.symbol{overflow:hidden}
.reel{position:relative}
.reel-strip-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.reel-motion-strip{display:grid;width:100%;will-change:transform}
.reel-motion-strip>.symbol{position:relative;min-height:0;transition:none!important;animation:none!important}
.reel-motion-strip .symbol-art{animation:none!important}
.symbol-poster{display:contents}
.symbol-art,.coin-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;transform-origin:50% 55%;filter:drop-shadow(0 .22rem .18rem #08010bb8)}
.symbol .symbol-art.symbol-animation{transform:scale(calc(var(--symbol-motion-scale,.86)*var(--symbol-motion-padding,1)))!important;transform-origin:50% 50%}
.symbol[data-symbol-animation="playing"]{overflow:visible;z-index:3}
@media(max-width:600px),(orientation:portrait) and (max-width:900px){.symbol .symbol-art.symbol-animation{--symbol-motion-scale:.88!important}}
.art-symbol::before,.coin::before,.coin::after,.feature-cell.locked::before{content:none!important;background:none!important}
.art-symbol{background:radial-gradient(circle at 50% 40%,#7f4c80c9 0,#2b122fd8 73%)}
.symbol.winning{filter:brightness(1.28) drop-shadow(0 0 12px #ffb447);transform:scale(1.06);z-index:4;box-shadow:inset 0 0 14px #fff,0 0 20px #ff8e19;overflow:visible}
.symbol[data-symbol="wild"],.symbol[data-symbol="scatter"]{container-type:size;overflow:visible;z-index:3}
/* Both supplied hero symbols are square artworks. Give them a slightly larger
   centered box but preserve their intrinsic ratio on wide desktop cells and
   tall portrait cells. Disabling the resting transform also keeps the static
   high-resolution poster on a crisp compositor layer. */
.symbol[data-symbol="wild"] .symbol-art,
.symbol[data-symbol="scatter"] .symbol-art{inset:-3%;width:106%;height:106%;object-fit:contain;transform:none!important;translate:none;z-index:4;image-rendering:auto;backface-visibility:hidden}
.symbol[data-symbol="wild"] .symbol-art{filter:drop-shadow(0 1px 2px #0009)}
.symbol[data-symbol="scatter"] .symbol-art{filter:drop-shadow(0 2px 3px #000b)}
.symbol[data-symbol="wild"]::before,
.symbol[data-symbol="scatter"]::before{content:""!important;position:absolute;inset:2%;z-index:5;pointer-events:none;border-radius:7%;clip-path:inset(0 round 7%);background:linear-gradient(112deg,transparent 35%,#fff0 43%,#fff9 50%,#ffe46b55 55%,transparent 64%)!important;background-size:300% 100%!important;mix-blend-mode:screen;animation:hero-symbol-idle-sheen 2.8s ease-in-out infinite}
.reel:nth-child(2) .symbol[data-symbol="wild"]::before,.reel:nth-child(2) .symbol[data-symbol="scatter"]::before{animation-delay:-.55s}
.reel:nth-child(3) .symbol[data-symbol="wild"]::before,.reel:nth-child(3) .symbol[data-symbol="scatter"]::before{animation-delay:-1.1s}
.reel:nth-child(4) .symbol[data-symbol="wild"]::before,.reel:nth-child(4) .symbol[data-symbol="scatter"]::before{animation-delay:-1.65s}
.reel:nth-child(5) .symbol[data-symbol="wild"]::before,.reel:nth-child(5) .symbol[data-symbol="scatter"]::before{animation-delay:-2.2s}
.symbol.winning[data-symbol="wild"]::before,
.symbol.winning[data-symbol="scatter"]::before,
.symbol.symbol-triggered[data-symbol="wild"]::before,
.symbol.symbol-triggered[data-symbol="scatter"]::before{animation:hero-symbol-win-flash .72s ease-out 2}
.symbol[data-symbol="wild"]>.symbol-poster>.symbol-art{animation:wild-poster-land .46s cubic-bezier(.2,.8,.25,1) both}
.symbol[data-symbol="scatter"]>.symbol-poster>.symbol-art{animation:scatter-poster-land .5s cubic-bezier(.18,.82,.24,1) both}
.feature-cell>.symbol[data-symbol="wild"] .symbol-art{transform:scale(.96)!important}
/* Keep the new canonical symbol intact; the rejected tossed-pin effect is not juggling. */
.symbol[data-symbol="wild"]::after{content:none!important;animation:none!important}
.symbol.winning[data-symbol="wild"] .symbol-art{animation:none}
.coin{display:grid;place-items:center;isolation:isolate;container-type:size;background:transparent!important;border:0!important;border-radius:0!important}
.coin-art{z-index:0;inset:2%;width:96%;height:96%}
.coin .coin-art{animation:coin-face-idle 2.8s ease-in-out infinite;transform-origin:50% 50%}
.coin-red .coin-art{filter:drop-shadow(0 0 .22rem #ff403d88) drop-shadow(0 .22rem .18rem #08010bb8)}
.coin-blue .coin-art{filter:drop-shadow(0 0 .25rem #4ecbffaa) drop-shadow(0 .22rem .18rem #08010bb8)}
.coin-green .coin-art{filter:drop-shadow(0 0 .22rem #66f06e88) drop-shadow(0 .22rem .18rem #08010bb8)}
.coin-gold .coin-art{filter:drop-shadow(0 0 .28rem #ffd85aaa) drop-shadow(0 .22rem .18rem #08010bb8)}
.coin-value{z-index:1;max-width:50%;font-size:clamp(11px,1.9vw,27px);letter-spacing:-.05em;text-align:center;white-space:nowrap}
.coin-value-long .coin-value{font-size:clamp(9px,1.5vw,21px)}
.feature-cell.locked{overflow:hidden;border-color:transparent;background:transparent}
.feature-cell.locked .coin-art{inset:2%;width:96%;height:96%}
.feature-cell.locked .coin-value{position:relative;font-size:clamp(11px,1.55vw,22px);max-width:54%}
@keyframes wild-art-performance{0%{transform:scale(.9) translateY(0) rotate(-1deg)}35%{transform:scale(1.08) translateY(-8%) rotate(-4deg)}62%{transform:scale(1.13) translateY(-10%) rotate(3deg)}100%{transform:scale(.9) translateY(0)}}
@keyframes wild-poster-land{0%{opacity:.5;transform:scale(.86)}62%{opacity:1;transform:scale(1.035)}100%{opacity:1;transform:none}}
@keyframes scatter-poster-land{0%{opacity:.45;transform:scale(.84) rotate(-2deg)}65%{opacity:1;transform:scale(1.045) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes hero-symbol-idle-sheen{0%,61%{opacity:0;background-position:165% 50%}69%{opacity:.55}84%{opacity:.3;background-position:-65% 50%}85%,100%{opacity:0;background-position:-65% 50%}}
@keyframes hero-symbol-win-flash{0%{opacity:0;transform:scale(.92)}42%{opacity:.95;transform:scale(1.04)}100%{opacity:0;transform:scale(1.09)}}
@keyframes coin-face-idle{0%,100%{transform:scale(1);filter:brightness(1)}48%{transform:scale(1.035);filter:brightness(1.12)}56%{transform:scale(1.02);filter:brightness(1.04)}}
@media(max-width:600px),(orientation:portrait) and (max-width:900px){.symbol-art{transform:scale(.88)!important}.symbol[data-symbol="wild"] .symbol-art,.symbol[data-symbol="scatter"] .symbol-art{transform:none!important}.coin-art{inset:2%;width:96%;height:96%}.coin-value{max-width:60%}}
@media(prefers-reduced-motion:reduce){.symbol[data-symbol="wild"]::before,.symbol[data-symbol="scatter"]::before,.symbol[data-symbol="wild"]>img.symbol-art,.symbol[data-symbol="scatter"]>img.symbol-art,.symbol.winning[data-symbol="wild"] .symbol-art,.coin .coin-art{animation:none}}

/* Carnival matrix: one stationary color field below paylines and symbols.
   The stage shares the cabinet's existing desktop/portrait reel coordinates. */
.lower-screen>.reel-stage{
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#e9bc716e calc(20% - 1px),#e9bc716e 20%),
    repeating-linear-gradient(0deg,transparent 0,transparent calc(33.333333% - 1px),#e9bc716e calc(33.333333% - 1px),#e9bc716e 33.333333%),
    radial-gradient(ellipse at 15% 25%,#793960 0,transparent 55%),
    radial-gradient(ellipse at 85% 65%,#176572 0,transparent 60%),
    linear-gradient(135deg,#442c77,#283969 55%,#482e69);
  box-shadow:inset 0 0 14px #25153766;
}
.lower-screen>.reel-stage .symbol,
.lower-screen>.reel-stage .art-symbol{background:transparent}
/* Two-SCATTER suspense (REEL_FEEL_STANDARD section 2). data-anticipation arms when the 2nd SCATTER
   (2nd Cannon, 4th coin) is visible on a stopped reel; data-anticipation-level 2 is the "one away" reel;
   .reel.is-suspense is the lane still spinning; data-anticipation-result is the one-shot payoff.
   The matrix art is this element's own background, so the zoom keeps the frame and symbols aligned. */
.lower-screen>.reel-stage{transition:transform .35s ease-out;transform-origin:50% 50%}
.reel-stage{--suspense-glow:#ffd97a}
.reel-stage[data-anticipation="cannon-scatter"]{--suspense-glow:#ffa04a}
.reel-stage[data-anticipation="coin"]{--suspense-glow:#ffe567}
.reel-stage[data-anticipation]{transform:scale(1.03)}
.reel-stage[data-anticipation-level="2"]{transform:scale(1.055)}
/* The Free Spins sign is a child of the stage, outside the reel window.
   Keep it anchored while suspense zooms the reels, rather than moving its X
   and painted frame down with the whole stage. */
.reel-stage:has(>.fs-medallion)[data-anticipation]{transform:none}
.reel-stage:has(>.fs-medallion)[data-anticipation]>.reels{transform:scale(1.03);transition:transform .3s ease}
.reel-stage:has(>.fs-medallion)[data-anticipation-level="2"]>.reels{transform:scale(1.055)}
.reel-stage[data-anticipation]>.reels>.reel>.symbol{filter:brightness(.52) saturate(.62);transition:filter .35s ease}
.reel-stage[data-anticipation-level="2"]>.reels>.reel>.symbol{filter:brightness(.38) saturate(.5)}
.reel-stage[data-anticipation="scatter"]>.reels>.reel>.symbol[data-symbol="scatter"],
.reel-stage[data-anticipation="cannon-scatter"]>.reels>.reel>.symbol[data-symbol="cannon-scatter"],
.reel-stage[data-anticipation="coin"]>.reels>.reel>.symbol[data-symbol^="coin-"]{filter:brightness(1.22) saturate(1.16) drop-shadow(0 0 10px var(--suspense-glow));animation:suspense-hold 1.05s ease-in-out infinite;z-index:3}
.reel-stage[data-anticipation-level="2"][data-anticipation="scatter"]>.reels>.reel>.symbol[data-symbol="scatter"],
.reel-stage[data-anticipation-level="2"][data-anticipation="cannon-scatter"]>.reels>.reel>.symbol[data-symbol="cannon-scatter"],
.reel-stage[data-anticipation-level="2"][data-anticipation="coin"]>.reels>.reel>.symbol[data-symbol^="coin-"]{filter:brightness(1.34) saturate(1.2) drop-shadow(0 0 18px var(--suspense-glow));animation-duration:.62s}
/* Thin gold inner rim, then a vignette that closes in on the "one away" reel. */
.reel-stage::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .3s ease;border-radius:inherit;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--suspense-glow) 70%,transparent),inset 0 0 44px -6px color-mix(in srgb,var(--suspense-glow) 35%,transparent)}
.reel-stage[data-anticipation]::after{opacity:1}
.reel-stage[data-anticipation-level="2"]::after{background:radial-gradient(112% 70% at 50% 50%,transparent 30%,#12021c80 72%,#0a0112b8 100%);box-shadow:inset 0 0 0 3px var(--suspense-glow),inset 0 0 56px -4px color-mix(in srgb,var(--suspense-glow) 50%,transparent)}
/* A column of light rises inside the lane that is still spinning. */
.reel.is-suspense::before{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(0deg,color-mix(in srgb,var(--suspense-glow) 22%,transparent) 0,color-mix(in srgb,var(--suspense-glow) 6%,transparent) 26%,transparent 55%),radial-gradient(ellipse at 50% 112%,#fff0b840,transparent 55%);background-size:100% 190%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--suspense-glow) 80%,transparent),inset 0 0 24px color-mix(in srgb,var(--suspense-glow) 40%,transparent);animation:suspense-rise 1.15s linear infinite}
/* The stop is the payoff: HIT flashes and shakes; MISS settles, dull and brief. */
.reel-stage[data-anticipation-result="hit"]{animation:suspense-hit-flash .5s ease-out,suspense-shake .76s cubic-bezier(.36,.07,.19,.97)}
.reel-stage[data-anticipation-result="miss"]{animation:suspense-miss-settle .4s ease-out}
.reel-stage:has(>.fs-medallion)[data-anticipation-result]{animation:none}
.reel-stage:has(>.fs-medallion)[data-anticipation-result="hit"]>.reels{animation:suspense-hit-flash .5s ease-out,suspense-shake .76s cubic-bezier(.36,.07,.19,.97)}
.reel-stage:has(>.fs-medallion)[data-anticipation-result="miss"]>.reels{animation:suspense-miss-settle .4s ease-out}
@keyframes suspense-hold{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes suspense-rise{from{background-position:50% 100%}to{background-position:50% 0%}}
@keyframes suspense-hit-flash{0%{box-shadow:inset 0 0 0 3px #fff6d2,inset 0 0 90px #ffe9a8cc;filter:brightness(1.35)}100%{box-shadow:none;filter:brightness(1)}}
@keyframes suspense-shake{0%{transform:scale(1.05) translate3d(0,0,0)}18%{transform:scale(1.05) translate3d(-5px,2px,0)}36%{transform:scale(1.05) translate3d(5px,-2px,0)}54%{transform:scale(1.04) translate3d(-3px,1px,0)}72%{transform:scale(1.03) translate3d(2px,-1px,0)}100%{transform:scale(1) translate3d(0,0,0)}}
@keyframes suspense-miss-settle{from{filter:brightness(.82) saturate(.7)}to{filter:brightness(1) saturate(1)}}
@media(prefers-reduced-motion:reduce){.reel-stage[data-anticipation],.reel-stage[data-anticipation-level="2"]{transform:none}.reel-stage[data-anticipation]>.reels>.reel>.symbol,.reel.is-suspense::before,.reel-stage[data-anticipation-result]{animation:none}}
@media(prefers-reduced-motion:reduce){.reel-stage:has(>.fs-medallion)[data-anticipation]>.reels{transform:none;transition:none}.reel-stage:has(>.fs-medallion)[data-anticipation-result]>.reels{animation:none}}



/* Dedicated full-cell Cannon Scatter poster. It shares the sharp hero-symbol
   contract without scaling or blurring the source raster. */
.symbol[data-symbol="cannon-scatter"]{container-type:size;overflow:visible;z-index:3}
.symbol[data-symbol="cannon-scatter"] .symbol-art{inset:-3%;width:106%;height:106%;object-fit:contain;transform:none!important;translate:none;z-index:4;image-rendering:auto;backface-visibility:hidden;filter:drop-shadow(0 2px 3px #000b)}
.symbol[data-symbol="cannon-scatter"]::before{content:""!important;position:absolute;inset:2%;z-index:5;pointer-events:none;border-radius:7%;clip-path:inset(0 round 7%);background:linear-gradient(112deg,transparent 35%,#fff0 43%,#fff9 50%,#ffe46b55 55%,transparent 64%)!important;background-size:300% 100%!important;mix-blend-mode:screen;animation:hero-symbol-idle-sheen 2.8s ease-in-out infinite}
.symbol.winning[data-symbol="cannon-scatter"]::before,.symbol.symbol-triggered[data-symbol="cannon-scatter"]::before{animation:hero-symbol-win-flash .72s ease-out 2}
.symbol[data-symbol="cannon-scatter"]>.symbol-poster>.symbol-art{animation:scatter-poster-land .5s cubic-bezier(.18,.82,.24,1) both}
@media(max-width:600px),(orientation:portrait) and (max-width:900px){.symbol[data-symbol="cannon-scatter"] .symbol-art{transform:none!important}}
@media(prefers-reduced-motion:reduce){.symbol[data-symbol="cannon-scatter"]::before,.symbol[data-symbol="cannon-scatter"]>img.symbol-art{animation:none}}

/* 2026-09-23 visual pass: dynamic coin values use the same engraved carnival
   lettering as the cabinet while staying live for arbitrary multipliers. */
.coin-value{font-family:CarnivalCoin,Georgia,serif;font-weight:900;line-height:1;color:#fff5bd;-webkit-text-stroke:.055em #5d1707;text-shadow:0 .08em 0 #8c2d0d,0 .14em .12em #050107,0 0 .22em #ffd76f;letter-spacing:-.025em}
.coin-value-long .coin-value{letter-spacing:-.06em;-webkit-text-stroke:.045em #5d1707}
/* Warm burgundy theatre cloth and controlled teal/red spotlights connect the
   matrix to the red-gold cabinet without competing with symbols. */
.lower-screen>.reel-stage{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#e9bc7159 calc(20% - 1px),#e9bc7159 20%),repeating-linear-gradient(0deg,transparent 0,transparent calc(33.333333% - 1px),#e9bc7159 calc(33.333333% - 1px),#e9bc7159 33.333333%),radial-gradient(ellipse at 14% 30%,#722436aa 0,transparent 52%),radial-gradient(ellipse at 86% 62%,#13576488 0,transparent 55%),linear-gradient(135deg,#2a0917,#241126 48%,#2a0c18);box-shadow:inset 0 0 18px #100008aa,inset 0 0 2px #ffd77a88}
.cabinet[data-video-ready="true"] .controls>.auto-button{right:9.2%;background:none!important;border:0!important;box-shadow:none!important;color:transparent!important;text-shadow:none!important}
@media(max-width:900px) and (orientation:portrait){.cabinet[data-video-ready="true"] .controls>.auto-button{right:10.4%}}

/* Win presentation v2 (2026-09-24, after the reference review): a crisp gold frame on every winning cell
   instead of a milky white box, a gentle pulse of the symbol itself, other symbols dimmed during the
   combined win beat, and a big counted win plate on the board. */
.reel-stage .reels .symbol.winning{filter:none;transform:none;box-shadow:none;z-index:4;overflow:visible}
.reel-stage .reels .symbol.winning::after{
  content:""!important;position:absolute;inset:3%;z-index:5;border-radius:9%;pointer-events:none;
  border:3px solid #ffd76a;background:none!important;
  box-shadow:0 0 0 1px #6b2b04,inset 0 0 0 1px #fff3b0,0 0 14px 2px #ffb300b3,inset 0 0 16px #ffcf4a55;
  animation:win-frame-glow .9s ease-in-out infinite alternate!important
}
.reel-stage .reels .symbol.winning>:is(.symbol-art,.symbol-poster,.coin-art,.symbol-video){animation:win-symbol-pulse .9s ease-in-out infinite alternate}
@keyframes win-frame-glow{from{box-shadow:0 0 0 1px #6b2b04,inset 0 0 0 1px #fff3b0,0 0 8px 1px #ffb30099,inset 0 0 10px #ffcf4a33}to{box-shadow:0 0 0 1px #6b2b04,inset 0 0 0 1px #fff3b0,0 0 20px 4px #ffc300d9,inset 0 0 20px #ffcf4a66}}
@keyframes win-symbol-pulse{from{scale:1;filter:brightness(1)}to{scale:1.05;filter:brightness(1.14)}}
.reel-stage[data-win-focus] .reels .symbol:not(.winning){filter:brightness(.5) saturate(.65);transition:filter .18s ease}
.reel-stage .reels .symbol{transition:filter .25s ease}
/* Win toast (reference review 2026-09-25): a compact gold tag sitting on the bottom edge of the reel window,
   so it never covers a winning symbol. Big wins (>=20x) get a larger, pulsing tag. */
.win-plate{position:absolute;z-index:12;left:50%;top:100%;translate:-50% -50%;display:flex;align-items:center;gap:.5em;padding:.22em .9em .26em;border-radius:999px;pointer-events:none;
  font:900 clamp(16px,2.9dvh,30px)/1 CarnivalCoin,Georgia,serif;letter-spacing:.02em;color:#fff4b8;white-space:nowrap;
  background:linear-gradient(#3a0a17,#14030a);border:2px solid #ffd76a;box-shadow:0 0 0 1px #6b2b04,0 3px 10px #000a,0 0 16px 3px #ffb30066;
  text-shadow:0 2px 0 #6b1d06,0 0 10px #ffcf4a;opacity:0;scale:.6;transition:opacity .16s ease,scale .24s cubic-bezier(.2,1.5,.4,1)}
.win-plate.show{opacity:1;scale:1}
.win-plate small{display:block;margin:0;font-size:.52em;letter-spacing:.12em;color:#ffd76a;text-shadow:none}
.win-plate.big{font-size:clamp(20px,3.8dvh,40px);border-width:3px;animation:win-tag-pulse .8s ease-in-out infinite alternate}
@keyframes win-tag-pulse{from{box-shadow:0 0 0 1px #6b2b04,0 3px 10px #000a,0 0 14px 3px #ffb30066}to{box-shadow:0 0 0 1px #6b2b04,0 3px 10px #000a,0 0 26px 8px #ffc300aa}}
@media(max-width:900px) and (orientation:portrait){.win-plate{font-size:clamp(14px,4.6vw,22px)}.win-plate.big{font-size:clamp(17px,5.6vw,26px)}}
/* Reel landing: symbols catch the light for a moment as their reel stops (no bounce). */
.reel-stage .reels .symbol.just-landed>:is(.symbol-art,.symbol-poster,.coin-art){animation:land-catch .26s ease-out}
@keyframes land-catch{0%{filter:brightness(1.3);scale:1}40%{filter:brightness(1.12);scale:1.045}100%{filter:brightness(1);scale:1}}
@media(prefers-reduced-motion:reduce){
  .reel-stage .reels .symbol.winning::after,.reel-stage .reels .symbol.winning>*{animation:none!important}
  .win-plate{transition:none}
  .reel-stage .reels .symbol.just-landed>*{animation:none}
}
/* Strip cells must be exactly one board cell: a coin image may never grow its row (it did, by up to
   62 px, so every coin landing jumped at the stop). */
.reel-motion-strip{grid-auto-rows:minmax(0,1fr)}
.reel-motion-strip>.symbol{min-height:0;min-width:0;overflow:hidden}
/* BavaGames drawn numerals over the winning line (ported from Sunken Crown). */
.reel-stage>.win-amount-plate{position:absolute;z-index:13;display:flex;align-items:flex-end;gap:calc(var(--digit,40px) * .02);
  transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 3px 6px #1a0510cc) drop-shadow(0 0 10px #ffd97a66);
  animation:win-amount-pop .34s cubic-bezier(.2,1.5,.45,1) both}
.reel-stage>.win-amount-plate i{display:block;flex:none;height:var(--digit,40px);width:calc(var(--digit,40px) * var(--gw) / 240);
  background-image:url('../../assets/ui/win-numerals-v3.webp');background-repeat:no-repeat;
  background-size:calc(var(--digit,40px)  * 2128 / 240) var(--digit,40px);
  background-position:calc(var(--digit,40px) * var(--gx) / -240) 0}
@keyframes win-amount-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.win-equation{position:absolute;bottom:110%;left:50%;translate:-50% 0;white-space:nowrap;color:#fff4ba;font:700 clamp(13px,1.8vw,24px)/1.2 Georgia,serif;text-shadow:0 2px 3px #240200,0 0 7px #240200;background:radial-gradient(ellipse,#300c20dd,transparent 75%);padding:3px 12px}
.free-multi-star{position:relative;container-type:size}
.free-multi-star .symbol-art,.free-multi-flight .symbol-art{inset:-8%;width:116%;height:116%;transform:none!important}
.free-multi-flight{position:fixed;z-index:19000;pointer-events:none;container-type:size;filter:drop-shadow(0 0 14px #65cfff)}.multi-star-value{position:absolute;left:50%;top:45%;translate:-50% -50%;color:#fff2a6;font:900 min(34px,32cqmin)/1 Georgia,serif;text-shadow:0 3px 2px #371300,0 0 12px #ffdc70}
.multi-landed{animation:multi-star-burst .8s ease-out}@keyframes multi-star-burst{35%{filter:brightness(1.7) drop-shadow(0 0 14px #65cfff);transform:scale(1.1)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.multi-landed{animation:none}}
@media(prefers-reduced-motion:reduce){.reel-stage>.win-amount-plate{animation:none}}
/* HUD values in drawn numerals (hud-numerals.mjs). */
output.has-numerals{color:transparent!important;text-shadow:none!important}
.controls .hud-numerals{position:absolute;z-index:3;display:flex!important;font-style:normal;align-items:center;justify-content:center;gap:calc(var(--digit,16px) * .02);pointer-events:none;
  filter:drop-shadow(0 1px 1px #1a0510cc)}
.controls .hud-numerals i{display:block;flex:none;height:var(--digit,16px);width:calc(var(--digit,16px) * var(--gw) / 240);
  background-image:url('../../assets/ui/win-numerals-v3.webp');background-repeat:no-repeat;
  background-size:calc(var(--digit,16px)  * 2128 / 240) var(--digit,16px);background-position:calc(var(--digit,16px) * var(--gx) / -240) 0}
/* Regular-symbol motion (2026-09-26, symbol-motion.mjs): a 24 fps canvas laid over the still while a
   landing clip plays once or a win clip loops. The canvas is `box` x the cell, centred, and keeps the
   still's scale and pivot (inline transform-origin), so frame 0 sits exactly on the still. */
.symbol>canvas.symbol-motion{inset:auto;left:calc(50% - var(--symbol-motion-box,1) * 50%);top:calc(50% - var(--symbol-motion-box,1) * 50%);width:calc(var(--symbol-motion-box,1) * 100%);height:calc(var(--symbol-motion-box,1) * 100%);z-index:1}
.symbol[data-symbol-motion]{overflow:visible;z-index:3}
/* Racing suspense reel (2026-09-28): the lane itself glows - a bright pulsing frame in the suspense colour with a
   light that sweeps around it, plus an outer bloom, so the eye goes straight to the reel that can still hit. */
.reel.is-suspense{position:relative;z-index:8}
.reel.is-suspense::after{content:"";position:absolute;inset:-2px;z-index:12;pointer-events:none;border-radius:8px;
  border:5px solid #fff1b0;
  box-shadow:0 0 0 2px var(--suspense-glow),0 0 18px 6px var(--suspense-glow),0 0 46px 14px color-mix(in srgb,var(--suspense-glow) 55%,transparent),
    inset 0 0 14px 2px color-mix(in srgb,var(--suspense-glow) 70%,transparent);
  /* 2026-09-29 (Barak): the lane's inner haze washed out the symbols racing past, so it read as an empty reel. The
     frame and outer glow carry the suspense; inside, the symbols stay clearly visible. */
  animation:suspense-frame-pulse .36s ease-in-out infinite alternate}
.reel-stage[data-anticipation-level="2"] .reel.is-suspense::after{border-width:6px;animation-duration:.26s}
@keyframes suspense-frame-pulse{from{opacity:.75;filter:brightness(1)}to{opacity:1;filter:brightness(1.5)}}
@media(prefers-reduced-motion:reduce){.reel.is-suspense::after{animation:none}}
/* CHOMP KING collector (2026-09-28). */
.reel-stage .reels .symbol[data-symbol="chomp-king"]{overflow:visible;z-index:6}
.reel-stage .reels .symbol.king-awake{z-index:30}
.reel-stage .reels .symbol.king-awake>:is(.symbol-art,.symbol-poster){animation:none;filter:drop-shadow(0 0 14px #ffcf4a) drop-shadow(0 0 30px #ff9d1d88)}
.reel-stage .reels .symbol.king-awake.king-gulp>:is(.symbol-art,.symbol-poster){animation:king-gulp .34s cubic-bezier(.3,1.7,.5,1)}
.reel-stage .reels .symbol.king-awake.king-shrug>:is(.symbol-art,.symbol-poster){animation:king-shrug .7s ease-in-out 2}
.reel-stage .reels .symbol.king-eaten{filter:brightness(.55) saturate(.6);transition:filter .25s ease}
.reel-stage[data-chomp-king] .reels .symbol:not(.king-awake):not([data-symbol^="coin-"]){filter:brightness(.55) saturate(.7)}
@keyframes king-wake{0%{scale:1}40%{scale:1.62;rotate:-4deg}70%{scale:1.4;rotate:3deg}100%{scale:1.45;rotate:0deg}}
@keyframes king-gulp{0%{filter:brightness(1)}35%{filter:brightness(1.35) drop-shadow(0 0 18px #ffcf4a)}100%{filter:brightness(1)}}
@keyframes king-shrug{0%,100%{filter:brightness(1)}50%{filter:brightness(.8)}}
.king-flyer{position:absolute;z-index:40;pointer-events:none;padding:.1em .45em;border-radius:1em;white-space:nowrap;
  font:900 1em/1 CarnivalCoin,Georgia,serif;color:#3b1200;background:linear-gradient(#fff3a0,#f0a01c);box-shadow:0 0 0 2px #fff4c2,0 0 16px #ffcf53}
.reel-stage .reels .symbol>.king-total{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:9;padding:.12em .5em;border-radius:.4em;background:#1a0510c8;box-shadow:0 0 0 2px #ffd76a,0 0 18px #ffcf4a88;display:flex;align-items:flex-end;pointer-events:none;
  --digit:clamp(18px,4.2dvh,44px);gap:calc(var(--digit) * .02);opacity:0;scale:.6;transition:opacity .15s ease,scale .25s cubic-bezier(.2,1.6,.4,1);
  filter:drop-shadow(0 3px 4px #1a0510cc) drop-shadow(0 0 10px #ffd97a88)}
.reel-stage .reels .symbol>.king-total.show{opacity:1;scale:1}
.reel-stage .reels .symbol>.king-total i{display:block;flex:none;height:var(--digit);width:calc(var(--digit) * var(--gw) / 240);
  background:url('../../assets/ui/win-numerals-v3.webp') no-repeat;background-size:calc(var(--digit)  * 2128 / 240) var(--digit);background-position:calc(var(--digit) * var(--gx) / -240) 0}
@media(prefers-reduced-motion:reduce){.reel-stage .reels .symbol:is(.king-awake,.king-gulp,.king-shrug)>*{animation:none}}
.reel-stage>.king-total-flyer,.reel-stage .king-total-flyer{position:absolute;z-index:45;display:flex;align-items:flex-end;pointer-events:none;opacity:1;scale:1;
  padding:.12em .5em;border-radius:.4em;background:#1a0510c8;box-shadow:0 0 0 2px #ffd76a,0 0 18px #ffcf4a88;--digit:clamp(22px,5dvh,50px)}
.king-total-flyer i{display:block;flex:none;height:var(--digit);width:calc(var(--digit) * var(--gw) / 240);
  background:url('../../assets/ui/win-numerals-v3.webp') no-repeat;background-size:calc(var(--digit)  * 2128 / 240) var(--digit);background-position:calc(var(--digit) * var(--gx) / -240) 0}
.reel-stage.king-shake{animation:suspense-shake .5s cubic-bezier(.36,.07,.19,.97)}
output.king-win-pulse,label:has(>output.king-win-pulse){animation:king-win-pulse .6s ease-out}
@keyframes king-win-pulse{0%{filter:brightness(2) drop-shadow(0 0 16px #ffd24a)}100%{filter:none}}
/* CHOMP KING fills his whole cell (Vadim 2026-09-28): the wide tile is authored at the desktop cell shape. */
.reel-stage .reels .symbol[data-symbol="chomp-king"] .symbol-art{inset:0;width:100%;height:100%;object-fit:contain;transform:none!important}
/* 3 SCATTERs landed: the triggering symbols shake and glow (with the bonus bell). */
.reel-stage .reels .symbol.scatter-celebrate{z-index:20;animation:scatter-celebrate 1.8s cubic-bezier(.36,.07,.19,.97) both}
@keyframes scatter-celebrate{
  0%{scale:1;rotate:0deg;filter:brightness(1)}
  8%{scale:1.16;rotate:-7deg;filter:brightness(1.45) drop-shadow(0 0 16px #ffd24a)}
  16%{rotate:7deg}24%{rotate:-6deg}32%{rotate:6deg}40%{rotate:-5deg}48%{rotate:5deg}56%{rotate:-3deg}64%{rotate:3deg}
  72%{scale:1.12;rotate:-1deg;filter:brightness(1.3) drop-shadow(0 0 14px #ffd24a)}
  100%{scale:1;rotate:0deg;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.reel-stage .reels .symbol.scatter-celebrate{animation:none;filter:brightness(1.3)}}

/* Euro coins (2026-09-29): the euro sign is drawn smaller than the amount. */
.symbol.coin[data-coin-value] .coin-value::first-letter{font-size:.72em}
/* Landed cells are rendered under the moving strip before their reel stops. The coin landing animation animates
   opacity and overrode the hidden inline style for half a second, so the new coin (the result) showed static over
   the spinning reel (2026-09-29, David). visibility is not animated, so the cell stays hidden until arrival. */
.symbol.under-strip{visibility:hidden!important;opacity:0!important}
.symbol.under-strip .coin-value{visibility:hidden!important}
/* Sharp HUD digits: pick the sheet nearest the drawn size (hud-numerals.mjs sets data-tier). */
.controls .hud-numerals[data-tier="24"] i{background-image:url('../../assets/ui/win-numerals-v3-h24.webp')}
.controls .hud-numerals[data-tier="32"] i{background-image:url('../../assets/ui/win-numerals-v3-h32.webp')}
.controls .hud-numerals[data-tier="48"] i{background-image:url('../../assets/ui/win-numerals-v3-h48.webp')}
.controls .hud-numerals[data-tier="64"] i{background-image:url('../../assets/ui/win-numerals-v3-h64.webp')}
.controls .hud-numerals[data-tier="96"] i{background-image:url('../../assets/ui/win-numerals-v3-h96.webp')}
.controls .hud-numerals[data-tier="144"] i{background-image:url('../../assets/ui/win-numerals-v3-h144.webp')}