/* The Quacks of Quedlinburg: everything only this game draws. The tokens, the frame (sheets, action bar, menu),
   buttons and the pages are in app.css; this file is loaded alongside it and relies on those. */

/* The fortune card banner (the dealt card, tucked small) */
.fortune { border-left: 4px solid var(--accent); padding: .5rem .75rem; background: linear-gradient(90deg, var(--panel-2), var(--panel)); border-radius: 8px; margin-bottom: 1rem; }
.fortune.immediate { border-left-color: var(--chip-purple); }
.fortune.round { border-left-color: var(--chip-blue); }
.fortune summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.fortune summary::-webkit-details-marker { display: none; }
.fortune summary::after { content: "tap to read"; font-size: .7rem; color: var(--muted); }
.fortune[open] summary::after { content: ""; }
.fortune .kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.fortune b { font-family: var(--display); font-size: 1.15rem; }
.fortune p { margin: .5rem 0 0; font-size: .95rem; }

/* Chips: the ingredient's drawing printed in ink on a disc of its colour, the value as a pip. Size from font-size. */
.chip {
    --bg: var(--chip-white); --ic: var(--chip-ink);
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 1em; height: 1em; border-radius: 50%; flex: none; vertical-align: middle;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--bg);
    box-shadow: inset 0 0 0 .06em rgba(0,0,0,.28), inset 0 0 0 .1em rgba(255,255,255,.18), 0 .08em .18em rgba(0,0,0,.5);
    color: var(--ic);
    line-height: 1;
}
.chip svg { width: .62em; height: .62em; display: block; }
/* The value pip. Its font-size is set here, so every other length is in the pip's own em (1.35em ≈ .46 of the chip). */
.chip .val {
    position: absolute; right: -.3em; bottom: -.3em; min-width: 1.35em; height: 1.35em; padding: 0 .22em;
    border-radius: 999px; background: #fff8e6; color: #241a0a; font-weight: 800; font-size: .34em; line-height: 1.35em;
    text-align: center; font-family: var(--body); box-shadow: 0 0 0 .18em rgba(0,0,0,.45), 0 .12em .25em rgba(0,0,0,.4);
}
.chip.white { --bg: var(--chip-white); }
.chip.orange { --bg: var(--chip-orange); }
.chip.green { --bg: var(--chip-green); }
.chip.blue { --bg: var(--chip-blue); }
.chip.red { --bg: var(--chip-red); }
.chip.yellow { --bg: var(--chip-yellow); }
.chip.purple { --bg: var(--chip-purple); }
.chip.black { --bg: var(--chip-black); --ic: #f1e8d6; box-shadow: inset 0 0 0 .06em rgba(255,255,255,.22), inset 0 0 0 .1em rgba(255,255,255,.08), 0 .08em .18em rgba(0,0,0,.5); }
.chip.locoweed { --bg: var(--chip-locoweed); }
.chip.xs { font-size: 1.25rem; }
.chip.sm { font-size: 1.8rem; }
.chip.md { font-size: 2.6rem; }
.chip.lg { font-size: 3.6rem; }
.chip.xl { font-size: 120px; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chip-stack { display: inline-flex; align-items: center; gap: .15rem; margin-right: .35rem; }
.chip-count { font-size: .8rem; color: var(--muted); }

/* The cauldron board (PotTrackView): an SVG, 360 × 360 viewBox */
.board { width: 100%; max-width: 420px; margin: .25rem auto; display: block; }
.board .rim { fill: var(--cauldron); }
.board .tile { fill: #3a3447; stroke: #6a6184; stroke-width: 1; }
.board .tile.ruby { fill: #4a2e3d; stroke: #8a4a5e; }
.board .tile.cur { fill: var(--accent); stroke: var(--accent-2); }
.board .tile.cur.boom { fill: var(--danger); stroke: #ffb3a3; }
.board .tile.past { fill: #2f2a3e; }
.board .tn { font: 700 8.5px var(--body); fill: #ece6f5; text-anchor: middle; pointer-events: none; }
.board .tv { font: 600 6.2px var(--body); fill: #c9bddb; text-anchor: middle; pointer-events: none; }
.board .tn.on { fill: #2a1c0a; }
.board .tv.on { fill: #4a3a1a; }
.board .spoon { color: #ece6f5; }
.board .spoon.on { color: #2a1c0a; }
.board .ring { fill: none; stroke: var(--accent-2); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(243,201,95,.9)); }
.board .ring.boom { stroke: #ffd0c4; filter: drop-shadow(0 0 5px var(--danger)); }
.board .rubybadge { filter: drop-shadow(0 0 3px rgba(255,92,122,.9)); }
.board .pc { transform-box: fill-box; transform-origin: center; }
.board .pc.land { animation: land .45s cubic-bezier(.2,.9,.3,1.3); }
.board .ripple { fill: none; stroke: var(--potion); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.board .pc.land .ripple { animation: ripple .6s ease-out; }
.board .cv { font: 800 6.5px var(--body); text-anchor: middle; fill: #241a0a; }
.board .bubble { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.35); stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.board.brewing .bubble { animation: pop 3s ease-in infinite; }
.board .brew-glow { opacity: .6; }
.board.brewing .brew-glow { animation: glow 2.6s ease-in-out infinite alternate; }
.board.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
.board .marker { pointer-events: none; }
.board.compact { max-width: 150px; margin: 0 auto; }
@keyframes land { 0% { transform: scale(2.1); opacity: .2; } 70% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.15); opacity: 0; } 55% { transform: scale(.9); opacity: .85; } 82% { transform: scale(1.1); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(5px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-8px, 0, 0); } 40%, 60% { transform: translate3d(8px, 0, 0); } }
@keyframes glow { from { opacity: .35; } to { opacity: .75; } }

/* Pot card */
.pot h2 { display: inline-flex; align-items: center; gap: .4rem; }
.scoring-line { font-size: .98rem; color: var(--muted); margin-bottom: .25rem; display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: center; }
.scoring-line b { color: var(--accent-2); }
.scoring-line .ruby-note { color: var(--ruby); font-weight: 700; display: inline-flex; align-items: center; gap: .2rem; }
.white-meter { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; font-size: .95rem; }
.white-meter .bar { flex: 1; height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.white-meter .bar i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.25); }
.white-meter .fill { height: 100%; background: var(--ok); transition: width .3s; border-radius: 6px; }
.white-meter .fill.warn { background: var(--accent); }
.white-meter .fill.danger { background: var(--danger); }
.stats { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .98rem; align-items: center; }
.stats > span { display: inline-flex; align-items: center; gap: .25rem; }
.stats b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.stats.wrap { margin-bottom: .5rem; }

/* The reveal overlay */
.reveal { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.reveal .coin { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform-style: preserve-3d; will-change: transform; }
.reveal .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.reveal .face.back { background: radial-gradient(circle at 40% 35%, #6a5a8a, #2d2444 70%); box-shadow: inset 0 0 0 5px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.6); color: #d7c9f0; font-family: var(--display); font-size: 3.4rem; font-weight: 800; }
.reveal .face.front { transform: rotateY(180deg); }
.reveal .face.front .chip { box-shadow: inset 0 0 0 .06em rgba(0,0,0,.28), inset 0 0 0 .1em rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.6); }
.reveal .cap { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,.7); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.reveal .cap small { display: block; font-family: var(--body); font-weight: 500; font-size: 1rem; color: var(--muted); }
.reveal .flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,120,60,.85), rgba(255,60,40,.35) 50%, rgba(40,0,0,.6)); opacity: 0; }
.reveal .boomtext { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.3); font-family: var(--display); font-size: 5rem; font-weight: 800; color: #fff1d6; text-shadow: 0 0 20px var(--danger), 0 4px 0 #7a1f10; opacity: 0; white-space: nowrap; }
.reveal .boomtext small { display: block; font-size: 1.1rem; font-family: var(--body); font-weight: 500; color: #ffd6c7; text-shadow: none; }
.reveal .particle { position: absolute; width: 10px; height: 10px; border-radius: 50%; left: 50%; top: 50%; margin: -5px; }

/* Someone else's pot exploded: a faint boom from the edge of the screen on the side they sit (left, right, or up for across the table) and a note */
.boom-toast { position: fixed; z-index: 65; pointer-events: none; animation: toast-life 3.4s ease-out forwards; }
.boom-toast.left { left: 0; top: 0; bottom: 0; width: 44vw; }
.boom-toast.right { right: 0; top: 0; bottom: 0; width: 44vw; }
.boom-toast.up { left: 0; right: 0; top: 0; height: 42vh; }
.boom-toast .glow { position: absolute; inset: 0; opacity: 0; animation: edge-boom 1.7s ease-out; }
.boom-toast.left .glow { transform-origin: 0 50%; background: radial-gradient(ellipse 75% 45% at 0% 50%, rgba(255,130,60,.6), rgba(255,70,40,.22) 50%, transparent 100%); }
.boom-toast.right .glow { transform-origin: 100% 50%; background: radial-gradient(ellipse 75% 45% at 100% 50%, rgba(255,130,60,.6), rgba(255,70,40,.22) 50%, transparent 100%); }
.boom-toast.up .glow { transform-origin: 50% 0; background: radial-gradient(ellipse 55% 85% at 50% 0%, rgba(255,130,60,.6), rgba(255,70,40,.22) 50%, transparent 100%); }
.boom-toast .note { position: absolute; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(40, 10, 20, .92); border: 1px solid var(--danger); color: #ffd6c7; font-size: .95rem; box-shadow: var(--shadow); white-space: nowrap; animation: note-in .4s cubic-bezier(.2,.8,.2,1.2) both; }
.boom-toast .note b { color: #fff1d6; }
.boom-toast.left .note { left: .75rem; top: 42%; }
.boom-toast.right .note { right: .75rem; top: 42%; }
.boom-toast.up .note { left: 50%; top: 4.4rem; translate: -50% 0; }
@keyframes edge-boom { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes note-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes toast-life { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* The flask sheet: where the pot steps back to and the cherry bombs after; the stop sheet: everyone else's pot */
.sheet.flask-confirm .stop-you { background: var(--panel-2); border-radius: 10px; padding: .5rem .75rem; }
.sheet.flask-confirm .stop-you .bombs { align-items: flex-start; }
.sheet.flask-confirm .stop-you .bombs .chip { margin-top: .15rem; }
.sheet.stop h3 { margin-top: 1rem; }
.sheet.stop .mini .what .pill { margin: .15rem 0; }

/* Shop: a market stall in the between-round sheet */
.sheet.shop .bought { margin-bottom: .5rem; }
.sheet.shop .shop-hint { margin-bottom: .5rem; }
.sheet.shop .head-aside .stats { gap: .6rem; }
.shelf { position: relative; padding: .9rem .4rem .6rem; background: linear-gradient(#2a1d12, #1f150c); border-radius: 12px; border-bottom: 10px solid #5a3b1e; box-shadow: inset 0 -8px 0 #3a2410; }
.jars { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
@media (max-width: 480px) { .jar { font-size: .66rem; } }
.jar { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--text); font-size: .68rem; -webkit-tap-highlight-color: transparent; line-height: 1.1; text-align: center; transition: opacity .2s; }
.jar .jar-svg { width: 100%; max-width: 46px; height: auto; }
.jar.locked { opacity: .5; }
.jar.cant { opacity: .4; filter: saturate(.4); }
.jar[aria-expanded="true"] { opacity: 1; }
.jar[aria-expanded="true"] .jar-svg { filter: drop-shadow(0 0 6px var(--accent-2)); }
.jar .lock { font-size: .7rem; color: var(--muted); display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; }
.stock-hint { color: var(--muted); font-size: .9rem; text-align: center; padding: .75rem .5rem 0; }
/* The jar turned round: the drawing scales with the sheet; the label is HTML laid over its paper so the text wraps */
.vial { position: relative; width: 100%; max-width: 320px; margin: .6rem auto 0; }
.vial .vial-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.vial .label { position: absolute; left: 20%; top: 32.9%; width: 60%; height: 61.4%; padding: .3rem .5rem .35rem; color: var(--parch-ink); font-size: .8rem; line-height: 1.25; overflow: hidden; }
.vial .label b { font-family: var(--display); font-size: 1.05rem; display: flex; align-items: center; gap: .3rem; line-height: 1.1; }
.vial .label b .ico { width: 1.25em; height: 1.25em; }
.vial .label b .book { font-family: var(--body); font-size: .7rem; font-weight: 600; color: #7a5a2a; margin-left: auto; white-space: nowrap; }
.vial .label p { margin: .25rem 0 0; }
.vial-prices { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }
.buy { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .45rem .6rem .35rem; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; min-width: 4.6rem; }
.buy .price { font-weight: 800; color: var(--accent-2); font-size: .9rem; display: inline-flex; align-items: center; gap: .15rem; }
.buy .left { font-size: .7rem; color: var(--muted); }
.buy:disabled { opacity: .35; cursor: default; }
.buy.view { cursor: default; }
.buy:active:not(:disabled) { transform: scale(.96); }
.tray { background: linear-gradient(#5a3b1e, #4a2f16); border-radius: 12px; padding: .6rem .75rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; border: 2px solid #7a5230; }
.tray .items { display: flex; gap: .4rem; flex: 1; min-height: 2rem; align-items: center; flex-wrap: wrap; }
.tray .purse { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; background: rgba(0,0,0,.3); padding: .3rem .6rem; border-radius: 999px; }
.tray .basket-item { display: inline-flex; align-items: center; gap: .3rem; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: .2rem .5rem .2rem .25rem; color: var(--text); cursor: pointer; font-size: .85rem; }
.tray .basket-item .x { color: #ffb3a3; width: .9em; height: .9em; }
.sheet.shop > footer { flex-direction: column; gap: .4rem; padding-top: .55rem; padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); }
.sheet.shop > footer .error { margin: 0; text-align: center; font-size: .9rem; }
.tray { padding: .45rem .5rem .45rem .6rem; flex-wrap: nowrap; gap: .5rem; }
.tray .items { min-width: 0; min-height: 1.8rem; }
.tray .finish { flex: none; margin: 0; white-space: nowrap; }
.shop-hint .bought { display: inline-flex; align-items: center; gap: .2rem; margin-left: .35rem; color: var(--text); }
.shop-warn { background: var(--panel-2); border: 1px solid var(--accent-dark); border-radius: 12px; padding: .55rem .7rem; }
.shop-warn p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.5; }
.shop-warn p .ico, .shop-warn p .chip { vertical-align: middle; }
.shop-warn .row { display: flex; gap: .5rem; }
.shop-warn .row .btn { flex: 1; margin: 0; }
.sheet.shop .jars { margin-top: .1rem; }
.sheet.shop .vial { max-width: 300px; margin-top: .4rem; }
.sheet.shop .vial-prices { margin-top: .45rem; }

/* Rubies: the step after the shop */
.sheet.rubies { border-color: var(--ruby); }
.sheet.rubies .option .cost { display: inline-flex; flex: none; }
.sheet.rubies .option .cost .ico { width: 1.1em; height: 1.1em; margin-right: -.2em; }
.sheet.rubies .option > .ico { flex: none; }
.sheet.rubies .option:disabled { opacity: .45; }
.sheet.rubies > footer .btn:first-child { flex: 0 0 auto; }

/* Round results: an ingredient's chip in a left gutter, then what it paid */
.result-line.gutter .src { flex: none; width: 1.9rem; display: inline-flex; justify-content: center; }
.result-line.gutter .src .chip { font-size: 1.6rem; }

/* The score track: 50 spaces in a square ring, rat tails on the outer edge, the standings in the middle */
.scoretrack { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.vp-board { display: block; width: 100%; height: auto; }
.vp-cell rect { fill: #3a2b55; stroke: #1b1230; stroke-width: 1; }
.vp-cell.five rect { fill: #4a3868; }
.vp-cell.start rect { fill: var(--accent-dark); }
.vp-cell text { fill: #cdbfe8; font: 700 8px var(--body); text-anchor: middle; opacity: .55; }
.vp-cell.start text { fill: var(--accent-text); opacity: .9; }
.vp-rat { color: #a99486; opacity: .75; }
.vp-rat.lit { color: var(--ruby); opacity: 1; filter: drop-shadow(0 0 2px rgba(255, 92, 122, .8)); }
.vp-token { transition: opacity .3s; }
.vp-token circle { fill: var(--cauldron); stroke: #fff1d6; stroke-width: 1.4; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.7)); }
.vp-token.me circle { stroke: var(--accent-2); stroke-width: 2.2; }
.vp-token.lap circle { stroke-dasharray: 3 1.5; }
.vp-token text { fill: #fff; font: 800 8.5px var(--body); text-anchor: middle; pointer-events: none; }
.vp-token.landed circle { animation: vp-land .45s ease-out; }
@keyframes vp-land { 0% { r: 7.5; } 40% { r: 10; } 100% { r: 7.5; } }
.vp-centre { position: absolute; left: 9.5%; top: 8.9%; width: 81%; height: 82.2%; display: flex; flex-direction: column; justify-content: center; padding: .4rem .5rem; gap: .5rem; }
.vp-standings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.vp-standings li { display: grid; grid-template-columns: auto 1fr auto 2.4rem 2.6rem; align-items: center; gap: .4rem; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; padding: .3rem .45rem; }
.vp-standings li.me { border-color: var(--accent); }
.vp-standings .tok { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--cauldron); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .75rem; border: 1.5px solid #fff1d6; }
.vp-standings .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.vp-standings .score { font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.vp-standings .gain { color: var(--ok); font-weight: 800; font-size: .9rem; text-align: right; }
.vp-standings .gain small { color: var(--muted); font-weight: 600; font-size: .7rem; }
.vp-standings .rats { display: inline-flex; align-items: center; justify-content: flex-end; gap: .15rem; font-weight: 800; color: #e8c9c0; }
.vp-standings .rats .ico { width: 1.1rem; height: 1.1rem; }
.vp-standings .rats .lead { color: var(--accent-2); }
.vp-note { margin: 0; font-size: .75rem; color: var(--muted); text-align: center; line-height: 1.25; }
.vp-note .ico { width: 1em; height: 1em; vertical-align: -.15em; }
.sheet.vp > .body { padding: .5rem .6rem; }
.sheet.vp-sheet > .body { padding: .5rem .6rem 1rem; }
.sheet.vp-sheet > header { padding: .75rem 1rem; }
@media (max-width: 380px) { .vp-standings li { grid-template-columns: auto 1fr auto 2rem 2.2rem; gap: .25rem; padding: .25rem .35rem; } .vp-standings .score { font-size: 1.15rem; } }

/* Round start: the rat tails and the fortune card dealt from the deck, in the between-round sheet */
.splash-rats { display: flex; justify-content: center; align-items: center; gap: .4rem; text-align: center; }
.cardstage { position: relative; height: 330px; display: flex; align-items: center; justify-content: center; perspective: 1000px; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 110%, #2b1f4d, #130b24 70%); margin: 0 auto; width: 100%; max-width: 420px; }
.deck { position: absolute; left: 14px; bottom: 16px; width: 86px; height: 122px; }
.cardback, .cardstage .fcard .back { background: radial-gradient(circle at 50% 35%, #5a3f8e, #2a1b4f 70%); border: 2px solid #9a7fd0; box-shadow: inset 0 0 0 6px #1e1438, inset 0 0 0 7px #7c62b8; border-radius: 10px; }
.deck .cardback { position: absolute; inset: 0; }
.deck .cardback:nth-child(1) { transform: rotate(-4deg) translate(-3px, 3px); }
.deck .cardback:nth-child(2) { transform: rotate(2deg) translate(2px, 1px); }
.cardback .ico, .cardstage .fcard .back .ico { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); color: #d9c8ff; }
/* The dealt card is laid out at its final size (2.3 times a deck card) and starts the deal scaled down onto the deck,
   so its text is drawn crisp where it is read rather than blown up from a small layer. Its centre sits 118 px right of
   and 88 px above the deck's. */
.cardstage .fcard { position: absolute; width: 198px; height: 281px; left: 76px; bottom: 24px; transform-style: preserve-3d; }
.cardstage .fcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 23px; }
.cardstage .fcard .back { border-width: 4.6px; box-shadow: inset 0 0 0 13.8px #1e1438, inset 0 0 0 16px #7c62b8; border-radius: 23px; }
.cardstage .fcard .front { transform: rotateY(180deg); background: linear-gradient(170deg, #f6ead0, var(--parch) 40%, var(--parch-2)); color: var(--parch-ink); border: 4.6px solid #8a6a3a; box-shadow: inset 0 0 0 11.5px #efe1c3, inset 0 0 0 13.8px #b8945c; padding: 23px 21px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.cardstage .fcard .front .kind { font-size: 12.6px; text-transform: uppercase; letter-spacing: .12em; color: #7a5a2a; font-weight: 700; }
.cardstage .fcard .front .kind.round { color: #2d4f8a; }
.cardstage .fcard .front h4 { font-family: var(--display); font-size: 21.8px; margin: 0; line-height: 1.05; color: var(--parch-ink); }
.cardstage .fcard .front p { font-size: 13.8px; line-height: 1.25; margin: 0; }
.cardstage .fcard .front .seal { margin-top: auto; align-self: center; flex: none; width: 37px; height: 37px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c0392b, #7a1f1a); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.cardstage .fcard.deal { animation: deal 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes deal {
    0% { transform: translate(-118px, 88px) scale(.4348) rotateY(0deg); }
    40% { transform: translate(0, 0) scale(1) rotateY(0deg); }
    55% { transform: translate(0, -10px) scale(1.04) rotateY(90deg); }
    70%, 100% { transform: translate(0, 0) scale(1) rotateY(180deg); }
}

/* The bonus die */
.die { margin: .25rem 0 .75rem; }
.diestage { height: 180px; display: flex; align-items: center; justify-content: center; perspective: 700px; border-radius: 12px; background: radial-gradient(circle at 50% 120%, #3a2a16, #130b24 70%); touch-action: none; cursor: grab; }
.die.mine .diestage { border: 1px solid var(--accent); }
.diestage { transition: transform .12s; overflow: visible; }
.diestage.grab { transform: scale(.97); }
.die.settled .die-hint { visibility: hidden; }
.diestage .cube { will-change: transform; }
.cube { width: 76px; height: 76px; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); }
.cube .f { position: absolute; inset: 0; background: linear-gradient(160deg, #f8ecd2, #d9c39a); border: 2px solid #8a6a3a; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #3b2a16; box-shadow: inset 0 0 0 4px #efe1c3; }
.cube .f .ico { width: 44px; height: 44px; }
.cube.blank .f > * { visibility: hidden; }
.cube.blank .f::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2rem; font-weight: 800; color: #8a6a3a; }
.die-outcome { opacity: 0; transition: opacity .4s; }
.result-player.rolled .die-outcome { opacity: 1; }
.cube .f.txt { font-family: var(--display); font-weight: 800; font-size: 1.6rem; flex-direction: column; line-height: 1; }
.cube .f.txt small { font-family: var(--body); font-size: .7rem; font-weight: 700; }
.cube .f1 { transform: rotateY(0deg) translateZ(38px); }
.cube .f2 { transform: rotateY(180deg) translateZ(38px); }
.cube .f3 { transform: rotateY(90deg) translateZ(38px); }
.cube .f4 { transform: rotateY(-90deg) translateZ(38px); }
.cube .f5 { transform: rotateX(90deg) translateZ(38px); }
.cube .f6 { transform: rotateX(-90deg) translateZ(38px); }
.dieresult { text-align: center; margin-top: .5rem; min-height: 1.6rem; font-family: var(--display); font-size: 1.25rem; color: var(--accent-2); opacity: 0; transition: opacity .3s; }
.dieresult.show { opacity: 1; }
.dieresult .who { color: var(--muted); font-family: var(--body); font-size: .95rem; }

/* Round results */
.stepper { display: flex; gap: .35rem; margin: .4rem 0 .3rem; }
.stepper span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.stepper span.done { background: var(--muted); }
.stepper span.on { background: var(--accent-2); }
.stepicons { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-bottom: .5rem; }
.stepicons span.on { color: var(--accent-2); font-weight: 700; }
.result-table { background: var(--panel-2); border-radius: 8px; padding: .5rem .75rem; margin-bottom: .5rem; }
.result-player { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.result-player:last-child { border-bottom: 0; }
.result-player .who { font-weight: 700; margin-bottom: .2rem; font-family: var(--display); font-size: 1.1rem; display: flex; align-items: center; gap: .35rem; }
.result-player.me .who { color: var(--accent-2); }
.result-line { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; font-size: .95rem; }
.result-line .ico { width: 1.4rem; height: 1.4rem; }
.result-line.nothing { color: var(--muted); font-style: italic; }
.result-line.exploded, .result-line.reward { color: #ffb3ab; }
.results-all .result-step { margin-bottom: 1.25rem; }
.results-all .result-step h3 { color: var(--accent-2); font-size: 1.1rem; margin-top: 0; font-family: var(--display); }
.minirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; margin: .25rem 0 .75rem; }
.mini { text-align: center; font-size: .85rem; background: var(--panel-2); border-radius: 10px; padding: .4rem .3rem; }
.mini .board { max-width: 110px; margin: 0 auto; }
.mini .who { font-weight: 700; display: block; font-family: var(--display); font-size: 1rem; }
.mini .what { color: var(--muted); display: block; font-size: .78rem; line-height: 1.2; }
.mini.boom .who { color: #ffb3a3; }
.mini.me { outline: 1px solid var(--accent); }

/* Short phones: the turned-round jar becomes just its paper label, sized to the text, so the prices stay on screen */
@media (max-height: 760px) {
    .sheet.shop .vial { max-width: none; }
    .sheet.shop .vial .vial-svg { display: none; }
    .sheet.shop .vial .label { position: static; width: auto; height: auto; background: var(--parch); border: 1.5px solid #b8945c; box-shadow: inset 0 0 0 3px var(--parch), inset 0 0 0 4px var(--parch-2); border-radius: 6px; padding: .45rem .65rem .5rem; border-left: 6px solid var(--jar); }
    .sheet.shop .jars .jar-svg { max-width: 38px; }
    .sheet.shop .shop-hint { margin-bottom: .35rem; }
}

.hud .fortune-tile { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; cursor: pointer; border-left: 4px solid var(--accent); font: inherit; color: var(--text); }
.hud .fortune-tile.immediate { border-left-color: var(--chip-purple); }
.hud .fortune-tile.round { border-left-color: var(--chip-blue); }
.hud .fortune-tile small { text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: .25rem; }
.hud .fortune-tile small .ico { width: 1em; height: 1em; }
.hud .fortune-tile b { font-family: var(--display); font-size: 1rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.last-tile .chip.md { font-size: 2.1rem; flex: none; }
.last-tile > .ico { width: 1.8rem; height: 1.8rem; flex: none; }
.last-tile small .ico { width: 1em; height: 1em; vertical-align: -.15em; }

.game-page .card.pot { padding: .55rem .7rem .6rem; margin-bottom: .5rem; }
.pot-head { display: grid; grid-template-columns: 4.6rem 1fr 4.6rem; align-items: center; gap: .3rem; }
.pot-head .who { grid-column: 2; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pot-head h2 { font-size: 1.2rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: flex; align-items: center; gap: .3rem; }
.pot-head .who .pill { font-size: .7rem; padding: 0 .45rem; margin-top: .1rem; }
.pot-head .nav { display: flex; align-items: center; gap: .1rem; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--cauldron); border-radius: 10px; color: var(--text); padding: .3rem; cursor: pointer; min-width: 0; font: inherit; }
.pot-head .nav.right { grid-column: 3; border-left: 1px solid var(--line); border-right: 3px solid var(--cauldron); justify-content: flex-end; }
.pot-head .nav small { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-head .nav .ico { width: 1rem; height: 1rem; flex: none; }
.pot-lines { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .88rem; }
.pot-lines .scoring-line { margin: 0; font-size: .88rem; gap: .1rem .4rem; }
.pot-lines .stats { gap: .55rem; font-size: .88rem; flex-wrap: nowrap; }
.pot-swipe { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.game-page .pot-swipe .board { max-width: min(100%, 400px, calc(100dvh - 405px)); min-width: 200px; margin: .2rem auto; }
.pot-swipe.swipe-l .board { animation: swipe-in-r .28s ease-out; }
.pot-swipe.swipe-r .board { animation: swipe-in-l .28s ease-out; }
@keyframes swipe-in-r { from { transform: translateX(30px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes swipe-in-l { from { transform: translateX(-30px); opacity: .3; } to { transform: none; opacity: 1; } }
.game-page .white-meter { margin: .25rem 0 0; font-size: .88rem; }
.game-page .card.pot .waiting { padding: .4rem .25rem 0; margin: 0; font-size: .88rem; }
.card.pot.other { border-color: var(--cauldron); }

/* Action bar: Stop, the bag (and flask) in the middle, Draw */
.fab-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding-bottom: .4rem; min-width: 0; }
.fab.pill { border-radius: 999px; flex-direction: row; gap: .35rem; padding: .45rem .8rem; width: auto; height: auto; background: var(--panel); font-weight: 600; margin: 0; }
.fab.pill .ico { width: 1.2rem; height: 1.2rem; }
.fab.pill span:not(.ico) { font-size: .8rem; white-space: nowrap; }
.fab.draw.gone { display: none; }
.fab.draw { -webkit-touch-callout: none; }

/* The flask, asked first, then tipped over */
.flask-what { display: flex; flex-direction: column; gap: .9rem; }
.flask-chips { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.flask-chips .arrow { width: 2rem; height: 2rem; color: var(--muted); }
.flask-chips .bag { width: 3rem; height: 3rem; }
.sheet.flask-confirm { border-color: var(--potion); }
.reveal .pour { position: absolute; left: 50%; top: 40%; width: 120px; height: 120px; display: none; align-items: center; justify-content: center; transform: translate(-50%,-50%); filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.reveal .pour > .ico { width: 110px; height: 110px; }

/* Stop sheet: what stopping pays, your bag, everyone else */
.stop-sec { padding: .1rem 0 .8rem; border-bottom: 1px solid var(--line); margin-bottom: .7rem; }
.stop-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.stop-sec > h3 { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; align-items: center; gap: .35rem; color: var(--accent-2); }
.stop-sec > h3 .ico { width: 1.1rem; height: 1.1rem; }
.stop-space { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--panel-2); border-radius: 10px; padding: .45rem .7rem; }
.stop-space .where small { display: block; color: var(--muted); font-size: .72rem; }
.stop-space .where b { font-family: var(--display); font-size: 1.3rem; }
.stop-space .lead { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; text-align: right; }
.stop-space .lead .ico { width: 1.2rem; height: 1.2rem; flex: none; }
.stop-space .lead.ahead { color: var(--ok); }
.stop-space .lead.level { color: var(--accent-2); }
.stop-space .lead.behind { color: var(--muted); }
.pay { display: flex; gap: .5rem; margin-top: .5rem; }
.pay-tile { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; background: var(--panel-2); border-radius: 10px; padding: .35rem .3rem; }
.pay-tile .ico { width: 1.4rem; height: 1.4rem; }
.pay-tile b { font-family: var(--display); font-size: 1.4rem; line-height: 1.1; }
.pay-tile small { color: var(--muted); font-size: .75rem; }
.bonuses { margin-top: .5rem; }
.stop-sec .note { margin: .3rem 0 0; }
.bag-facts { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .4rem; }
.bag-facts .fact { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: .92rem; }
.bag-facts .fact:last-child { border-bottom: 0; }
.bag-facts .fact > .ico { width: 1.3rem; height: 1.3rem; justify-self: center; }
.bag-facts .fact .chip { justify-self: center; }
.bag-facts .fact b { font-family: var(--display); font-size: 1.15rem; text-align: right; white-space: nowrap; }
.bag-facts .fact b small { font-family: var(--body); font-size: .75rem; color: var(--muted); font-weight: 500; }
.bag-facts .fact b.warn { color: var(--accent-2); }
.bag-facts .fact.danger b { color: var(--danger); }
.bag-sheet h3, .stop-sec h3 + .bag-facts ~ h3 { margin: .7rem 0 .35rem; font-size: .95rem; }

/* The shop's second purse (purple book 5): which coins the next chip is paid with, and tray items paid with it */
.purse-pick { display: flex; gap: .5rem; margin: 0 0 .6rem; }
.purse-pick .btn { flex: 1; justify-content: center; }
.basket-item.ghost { outline: 2px solid var(--chip-purple); outline-offset: 1px; }

/* Held chips (red book 6) on the brew bar */
.fab.pill.held { border-color: var(--chip-red); }

/* The herb witches: the brew-bar pill lights when the silver witch would work now; the sheet lists the three in play */
.fab.pill.witch.ready { border-color: var(--accent, #d9a441); box-shadow: 0 0 .7em rgba(217,164,65,.55); }
.witches-sheet .witch { border-left: 5px solid #c0c7d0; }
.witches-sheet .witch.copper { border-left-color: #b87333; }
.witches-sheet .witch.gold { border-left-color: #d4af37; }
.witches-sheet .witch.spent { opacity: .55; }
.witches-sheet .witch .btn { margin-top: .4rem; }

/* The Alchemists: the essence strip under the tiles (ten glasses, filled to the essence in hand), the patient cards, and the brew-bar pills */
.essence { display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0 0 .4rem; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.essence .ess-label { display: flex; align-items: center; gap: .4rem; flex: none; }
.essence .ess-label b { font-family: var(--display); font-size: 1.4rem; color: var(--accent-2); }
.essence .ess-label small { font-size: .7rem; line-height: 1.1; color: var(--muted); }
.glasses { display: flex; gap: 2px; flex: 1; min-width: 0; }
.glass { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 2px 0; border-radius: 6px; border: 1px solid var(--line); background: rgba(0,0,0,.25); }
.glass small { font-size: .7rem; line-height: 1.1; color: var(--muted); }
.glass b { font-size: .7rem; font-weight: 600; white-space: nowrap; letter-spacing: -.03em; max-width: 100%; overflow: hidden; text-overflow: clip; }
.glass.empty b { opacity: .35; }
.glass.on { background: rgba(217,164,65,.22); border-color: rgba(217,164,65,.6); }
.glass.reached { box-shadow: 0 0 0 2px var(--accent-2); }
.game-page.has-essence .pot-swipe .board { max-width: min(100%, 400px, calc(100dvh - 458px)); }
.patient .glasses { margin: .4rem 0; }
.patient .glass { padding: 3px 0; }
.patient .btn { margin-top: .4rem; }
.fab.pill.displayed { border-color: var(--chip-green); }
.fab.pill.forget { border-color: var(--chip-blue); }

/* The last one brewing: the pot's pill and a line over the bag in the action bar say everyone is waiting */
.pill.waiting-you { background: var(--accent-2); color: var(--accent-text); border-color: var(--accent-2); font-weight: 700; }
.fab-wait { font-size: .78rem; font-weight: 700; color: var(--accent-text); background: var(--accent-2); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap; box-shadow: var(--shadow); animation: fab-wait 2.4s ease-in-out infinite; }
@keyframes fab-wait { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* The rules sheet: a chip per ingredient under the title, each a jump to its section */
.rules-chips { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; padding-top: .45rem; }
.rules-chips button { background: none; border: 0; padding: .1rem; cursor: pointer; border-radius: 50%; line-height: 0; }
.rules-chips button:focus-visible { outline: 2px solid var(--accent-2); }
.rules-chips .chip { font-size: 2rem; }
.sheet.rules .rule.ingredient { scroll-margin-top: .5rem; }

.result-line .count, .sheet.shop .count { font-variant-numeric: tabular-nums; }

/* The table screen: a pot that explodes shakes and its section flashes; the newest ticker line glows for a moment */
.table-player.qt-boom { animation: qt-boom 1.2s ease-out; }
@keyframes qt-boom { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); } 15% { box-shadow: 0 0 0 6px rgba(255, 90, 60, .85), 0 0 40px rgba(255, 90, 60, .6); background-color: rgba(120, 20, 10, .45); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); } }
.ticker .qt-fresh { animation: qt-fresh 1.2s ease-out; }
@keyframes qt-fresh { 0%, 30% { background: rgba(243, 201, 95, .45); } 100% { } }
.table-score h2 { margin-bottom: .5rem; }

/* Reduced motion: the landed chip fades in instead of dropping, and the newer shows sit still */
@keyframes chip-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .board .pc.land { animation: chip-fade .2s ease-out !important; }
    .fab-wait, .table-player.qt-boom { animation: none !important; }
    .ticker .qt-fresh { animation: qt-fresh 1.2s step-end; }
}