/* Playback flow pass. Presentation only; math books remain authoritative. */
main{display:block;min-height:0}
header{height:60px;padding:0 28px;background:#080d12}
.game{height:calc(100svh - 60px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:54px 20px minmax(0,1fr) 24px 96px 20px;gap:8px;padding:16px 24px;align-items:center;justify-items:center;align-content:stretch}
.game-heading{height:auto;margin:0}.game-heading h1{font-size:38px;margin:0 0 6px}.game-heading .eyebrow{display:none}.game-subtitle{font-size:7px}
.board-shell{width:min(100%,760px,calc((100svh - 346px)*1.2));height:auto;max-width:100%;min-width:0;aspect-ratio:6/5;align-self:center}
.board-top,.under-board{width:min(100%,760px,calc((100svh - 346px)*1.2));max-width:none;margin:0;align-self:center}
.under-board{font-size:10px;min-height:20px;align-items:center}.under-board #status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#spin-count{padding:0}
.hud-wrap{width:min(760px,100%);height:96px}.toolbar{height:96px}.spin{height:96px;transition:box-shadow .18s,background .18s}.spin.busy{background:#29313a;box-shadow:0 0 18px #d6e8f01a}.spin.busy img{opacity:.7}.spin:active{box-shadow:0 1px #0008}.spin img{will-change:transform}
.mode-amount{display:flex}.mode-amount>span{font-size:7px}.meter{gap:5%}.amount strong{font-variant-numeric:tabular-nums}.win-pill{transition:border-color .2s,box-shadow .2s;font-variant-numeric:tabular-nums}
.game:has(.has-win) .win-pill{border-color:#eadcb6;box-shadow:0 0 16px #eaca601a}
footer{margin:0;gap:18px;font-size:6px;align-self:center}
#review{position:fixed;inset:60px 0 0 auto;width:320px;max-width:92vw;z-index:40;display:block;max-height:none;margin:0;padding:24px;background:#0d141bf5;border-left:1px solid #72849344;box-shadow:-18px 0 50px #0006;transform:translateX(105%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),visibility .25s;overscroll-behavior:contain}
body.show-review #review{transform:translateX(0);visibility:visible}#review-toggle[aria-expanded=true]{color:#f0e1b9}
.world-color{transition:opacity .55s ease}.pip{transition:opacity .2s,box-shadow .2s}.pip.on{box-shadow:0 0 12px var(--c)}
.reel{contain:layout paint}.reel-face{gap:0}.reel-runner{backface-visibility:hidden}.reel-runner .symbol-art{filter:grayscale(1) blur(1.8px);opacity:.6;transform:scaleY(1.08)}
.motion-pane .pane-gem{will-change:transform}.reel-arrival,.reel-departure{backface-visibility:hidden}
.cell.paying .symbol-art{animation:prisma-pay .65s ease-out both}.cell.paying:after{content:'';position:absolute;inset:8%;border:1px solid #dae7ef36;border-radius:3px;pointer-events:none}
#paylines{z-index:7;opacity:.6;transition:opacity .15s}#paylines polyline{stroke-width:.75;opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.board-shell:after{content:'';position:absolute;inset:-4px;pointer-events:none;z-index:8;border-radius:5px;box-shadow:0 0 36px #ae8ee846,inset 0 0 22px #79c6e62b;border:1px solid #e0d3ff8c;opacity:0}
.board-shell.spectrum:after{animation:prisma-bloom .65s ease-out both}
@keyframes prisma-bloom{0%{opacity:0;transform:scale(.99)}30%{opacity:1}100%{opacity:0;transform:scale(1.025)}}
@keyframes prisma-pay{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
/* Routine wins stay attached to the board. Large milestones retain full plaques. */
.compact-win .presentation-card{margin-top:-42px;min-height:84px;width:min(250px,calc(var(--board-width) - 24px));margin-left:calc(min(250px,var(--board-width) - 24px)/-2);padding:10px 22px 9px;clip-path:none!important;border-radius:5px;background:linear-gradient(120deg,#17222bf5,#101820fa);border-color:#bdd0db55;box-shadow:0 8px 28px #0008}
#banner.compact-win #banner-title{font-size:34px;line-height:1.1}#banner.compact-win #banner-kicker{font-size:8px;letter-spacing:.22em;margin:0 0 4px}#banner.compact-win .presentation-unit{margin:3px 0 0;font-size:6px}#banner.compact-win .plaque-sheen{display:none}
#banner.compact-win #banner-continue{display:none}
#banner:not(.compact-win){background:#060a0dd9;backdrop-filter:blur(5px)}
#banner:not(.compact-win) .world-backdrop{opacity:.5}
.presentation-card{border-radius:8px;box-shadow:0 24px 90px #0008,0 0 0 5px #b8cdd50a}
@media(max-width:800px){
  header{padding:0 16px}.build-label{display:none}.game{padding:12px 14px;grid-template-rows:48px 18px minmax(0,1fr) 22px 88px 20px;gap:7px}
  .board-shell,.board-top,.under-board{width:min(100%,620px,calc((100svh - 315px)*1.2))}.game-heading h1{font-size:36px}.hud-wrap,.toolbar{height:88px}.spin{height:88px}.mode-amount{display:none}.meter{gap:12%}.under-board{font-size:9px}footer{font-size:5px;gap:9px}
}
@media(max-height:620px) and (min-width:801px){
  header{height:44px}.game{height:calc(100svh - 44px);grid-template-rows:28px 16px minmax(0,1fr) 18px 72px 12px;gap:4px;padding:8px 20px}.game-heading h1{font-size:26px;margin:0}.game-subtitle{display:none}.board-shell,.board-top,.under-board{width:min(100%,600px,calc((100svh - 238px)*1.2))}.hud-wrap,.toolbar{height:72px}.spin{height:72px}.meter,.bonus-button{height:55px;top:8px}.aux button{height:25px}.aux{top:5px}#review{top:44px}
}
@media(prefers-reduced-motion:reduce){.world-color,.pip,#review,.win-pill,.spin{transition:none}.cell.paying .symbol-art,.board-shell.spectrum:after{animation:none}.reel-runner .symbol-art{filter:grayscale(1)}}
/* Full-playtest fixes: visible mode costs and autoplay state. */
#mobile-cost{display:none}#auto{position:relative}#auto-count{position:absolute;right:-4px;top:-5px;z-index:2;min-width:15px;padding:2px 3px;border-radius:8px;background:#ead7a4;color:#101820;font:9px Arial,sans-serif;font-weight:700;line-height:12px;pointer-events:none}#auto-count:empty{display:none}
#auto[aria-pressed=true]{filter:drop-shadow(0 0 4px #eaca6088)}
#banner[data-kind=choice] #banner-title{font-size:25px;color:var(--accent)}#banner[data-kind=choice] .presentation-card{border-color:var(--accent)}
@media(max-width:800px){.board-rules{display:none}#mobile-cost{display:inline;font-variant-numeric:tabular-nums;letter-spacing:.07em;color:#d4dde4}.board-top{font-size:7px;gap:8px}#world-label{max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Home colors share the exact six-column geometry of the reel grid. */
.board-shell>#unlocks{position:absolute;top:-6px;left:6px;right:6px;height:12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;align-items:center;z-index:10;pointer-events:none}
.board-shell #unlocks .pip{width:10px;height:10px;justify-self:center;opacity:.9;outline:1px solid #081018;outline-offset:1px;box-shadow:0 0 7px color-mix(in srgb,var(--c) 45%,transparent)}
.board-shell #unlocks .pip.on{opacity:1;outline:1px solid var(--c);outline-offset:3px;box-shadow:0 0 14px var(--c)}
#paylines{opacity:.85}#paylines polyline{stroke-width:1.1;opacity:.7}
.reel.anticipating{box-shadow:inset 1px 0 #f4e6b2aa,inset -1px 0 #f4e6b2aa, inset 0 0 24px #ead39216}
@media(max-width:800px){.board-shell>#unlocks{left:4px;right:4px}}
/* A single color charge identifies the source wild before a legal expansion. */
.expansion-cue{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.cue-wash{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% var(--cue-y),#fff9 0%,var(--cue-color) 19%,transparent 52%),linear-gradient(90deg,var(--cue-color),transparent 16%,transparent 84%,var(--cue-color));box-shadow:inset 0 0 0 1px var(--cue-color)}
.cue-ring{position:absolute;left:50%;top:var(--cue-y);width:78%;aspect-ratio:1;border:2px solid var(--cue-color);border-radius:16%;box-shadow:0 0 16px var(--cue-color),inset 0 0 12px color-mix(in srgb,var(--cue-color) 40%,transparent);opacity:0;transform:translate(-50%,-50%) scale(.68)}
.board-shell #unlocks .pip.primed{animation:prisma-home-charge .52s ease-out both;opacity:1;outline-color:var(--c)}
@keyframes prisma-home-charge{0%{box-shadow:0 0 7px var(--c);transform:rotate(45deg) scale(1)}38%{box-shadow:0 0 22px 4px var(--c);transform:rotate(45deg) scale(1.45)}100%{box-shadow:0 0 10px var(--c);transform:rotate(45deg) scale(1)}}
.expansion-cue.still-cue .cue-wash{opacity:.3}.expansion-cue.still-cue .cue-ring{opacity:.55;transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.board-shell #unlocks .pip.primed{animation:none}}
/* Bloom upgrades remain readable between spins, without shifting the board. */
#bloom-status[hidden]{display:none}#bloom-status{display:flex;flex-direction:column;align-items:center;gap:3px;width:min(440px,calc(100vw - 40px));text-shadow:0 1px 3px #000}
body[data-world=bloom] .game-heading h1,body[data-world=bloom] .game-heading .game-subtitle{display:none}
.bloom-status-title{font:8px Arial,sans-serif;letter-spacing:.2em;color:#c2d0dc}
#bloom-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:100%}
.unlock-token{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;height:29px;padding:2px 6px;border:1px solid #7e8d9b40;border-radius:4px;background:#0e161ce6;color:#8b9aa6;text-align:left}
.unlock-token i{display:block;width:24px;height:24px;flex-shrink:0;filter:grayscale(1);opacity:.45}.unlock-token i .symbol-art{width:100%}
.unlock-token>span{display:flex;flex-direction:column;gap:2px}.unlock-token b{font:9px Arial,sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.unlock-token small{font:7px Arial,sans-serif;letter-spacing:.04em}
.unlock-token.is-unlocked{border-color:var(--c);color:#f0f5f8;background:color-mix(in srgb,var(--c) 13%,#0c151df2);box-shadow:inset 0 0 12px color-mix(in srgb,var(--c) 12%,transparent)}
.unlock-token.is-unlocked i{filter:none;opacity:1}.unlock-token.is-unlocked b{color:var(--c)}
.unlock-token.just-unlocked{animation:prisma-unlock-token .9s ease-out both}
.bloom-status-help{font:8px/1.2 Arial,sans-serif;color:#afbfcb;letter-spacing:0}
@keyframes prisma-unlock-token{0%{transform:scale(.95);box-shadow:0 0 0 transparent}35%{transform:scale(1.04);box-shadow:0 0 18px var(--c)}100%{transform:scale(1)}}
#banner[data-kind=unlock] .presentation-card{width:min(350px,calc(var(--board-width) - 24px));margin-left:calc(min(350px,var(--board-width) - 24px)/-2);min-height:154px;margin-top:-77px;padding:15px 18px;border-color:var(--accent);box-shadow:0 10px 36px #000a,0 0 20px color-mix(in srgb,var(--accent) 20%,transparent)}
#banner[data-kind=unlock] #banner-title{font-size:26px;color:var(--accent)}#banner[data-kind=unlock] .presentation-unit{font:10px/1.5 Arial,sans-serif;color:#eef4f7;letter-spacing:.08em;margin:8px 0}
#banner.compact-win[data-kind=unlock] #banner-detail{display:block;font:10px/1.4 Arial,sans-serif;margin:0;color:#bacbd7}
#banner[data-kind=unlock] .presentation-stats{margin:2px 0 9px;width:100%}#banner[data-kind=unlock] .unlock-map{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width:100%;max-width:210px;min-width:0}
.unlock-map-reel{height:24px;display:grid;place-items:center;border:1px solid #5d6e7a55;border-radius:3px;background:#0c141a;color:#6b7d8b;font:9px Arial,sans-serif}.unlock-map-reel.eligible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 23%,#10202a);color:#fff}
@media(max-width:480px){#bloom-colors{gap:4px}.unlock-token{gap:2px;padding:2px 3px}.unlock-token i{width:20px;height:20px}.unlock-token b{font-size:8px}.unlock-token small{font-size:6px}.bloom-status-help{font-size:7px}#banner[data-kind=unlock] #banner-title{font-size:23px}}
@media(max-height:620px) and (min-width:801px){body[data-world=bloom] .game{grid-template-rows:54px 16px minmax(0,1fr) 18px 72px 12px}body[data-world=bloom] .board-shell,body[data-world=bloom] .board-top,body[data-world=bloom] .under-board{width:min(100%,600px,calc((100svh - 264px)*1.2))}}
@media(prefers-reduced-motion:reduce){.unlock-token.just-unlocked{animation:none}}