.twerkerz-reels { isolation:isolate; overflow:hidden; container-type:size; }
.reel-column { position:absolute; top:0; height:100%; width:20%; overflow:hidden; }
.reel-column[data-reel="0"] { left:0; }
.reel-column[data-reel="1"] { left:20%; }
.reel-column[data-reel="2"] { left:40%; }
.reel-column[data-reel="3"] { left:60%; }
.reel-column[data-reel="4"] { left:80%; }
.reel-static,.reel-tape { position:absolute; inset:0; height:100%; width:100%; }
.reel-static { z-index:1; }
.reel-static > .symbol-slot { position:absolute; left:0; width:100%; }
.reel-tape { will-change:transform; pointer-events:none; z-index:2; }
.symbol-slot { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; box-sizing:border-box; }
.symbol-art { display:block; width:92%; height:92%; object-fit:contain; flex:none; filter:drop-shadow(0 4px 4px #08001299); }
.symbol-slot > .symbol-video-art { position:absolute; left:4%; top:4%; width:92%; height:92%; opacity:0; pointer-events:none; }
/* The activation corona may extend beyond the 92% artwork fit, but only to
   this measured cell edge. Inline container-unit placement preserves the
   original Bonus core size through every cabinet resize/orientation. */
.symbol-slot.has-bonus-activation { container-type:size; overflow:hidden; }
.symbol-slot > .symbol-activation-art { object-fit:fill; filter:none; animation:none; }
.symbol-art.is-video-covered { opacity:0!important; }
.tape-slot { position:absolute; left:0; width:100%; }
.symbol-slot.is-coin { isolation:isolate; }
.symbol-slot.is-bonus { isolation:isolate; }
.symbol-slot.is-bonus > .symbol-art:not(.symbol-video-art) { position:relative; z-index:1; }
.symbol-slot.is-bonus > .symbol-video-art { z-index:1; }
.symbol-slot.is-coin .symbol-art { position:relative; z-index:1; width:94%; height:94%; }
.symbol-slot.is-empty::before { content:""; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#3b174c22,transparent 65%); }
.coin-value { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:60%; height:37%; display:flex; align-items:center; justify-content:center; text-align:center; color:#37103e; font:950 clamp(21px,4.1cqw,70px)/1 system-ui,sans-serif; letter-spacing:-.055em; text-shadow:0 2px #fff7be,0 -1px #ae7412,0 1px 4px #ffd071; white-space:nowrap; pointer-events:none; z-index:2; }
.coin-value[data-digits="3"] { font-size:clamp(19px,3.4cqw,59px); }
.coin-value[data-digits="4"] { font-size:clamp(16px,2.8cqw,48px); }
.coin-value[data-digits="5"] { font-size:clamp(13px,2.3cqw,40px); }
.coin-value.is-illustrated > * { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 1px #350428bb); }
.coin-value.is-illustrated[data-digits="1"] { width:54%; height:40%; }
.coin-value.is-illustrated[data-digits="2"] { width:60%; height:40%; }
.coin-value.is-illustrated[data-digits="4"],.coin-value.is-illustrated[data-digits="5"] { width:62%; }
.symbol-slot.is-winning::after { content:""; position:absolute; inset:4%; border:2px solid #fff3b2; border-radius:14%; box-shadow:inset 0 0 17px #ff36c966,0 0 18px #ff42ddbb; animation:reel-win-glow 900ms ease-in-out infinite alternate; pointer-events:none; }
.symbol-slot.is-prop-win > .symbol-art:not(.symbol-video-art) { animation:reel-prop-win 850ms cubic-bezier(.2,.65,.35,1) both; }
.is-pulse .symbol-slot.is-held::before { content:""; position:absolute; inset:4%; border-radius:13%; background:radial-gradient(ellipse,#ffae3333,transparent 74%); box-shadow:inset 0 0 14px #fabb5333; }
.is-pulse .symbol-slot.is-empty { background:#03001080; }
.pulse-symbol-tape .symbol-slot.is-empty::before { content:none; }
.is-pulse-miss > .symbol-art,.pulse-symbol-tape .symbol-slot:not(.is-coin) > .symbol-art { filter:grayscale(1) brightness(.66) contrast(.9); opacity:.25; }
.pulse-cell-viewport { position:absolute; inset:0; overflow:hidden; z-index:3; background:#070210; }
.pulse-cell-viewport::after { content:""; position:absolute; inset:3%; border:1px solid #aa67c077; border-radius:10%; pointer-events:none; opacity:0; transition:opacity .15s; }
.pulse-cell-viewport.is-reveal-next::after { opacity:1; border-color:#fff1fc; box-shadow:inset 0 0 18px #e73cb866,0 0 14px #fa8cfa88; animation:pulse-inspect .55s ease-in-out infinite alternate; }
.pulse-cell-stopped:not(.coin-land) > .symbol-art { animation:pulse-miss-stop 240ms ease-out both; }
.reel-stop-bounce { animation:reel-stop-bounce 300ms cubic-bezier(.2,.65,.35,1) both; }
.is-expanded-wild::after { content:""; position:absolute; inset:.6% 1.5%; border:2px solid #fff4ff; border-radius:7%; box-shadow:inset 0 0 24px #ef47c988,0 0 14px #ef77ffaa; pointer-events:none; z-index:4; animation:reel-wild-expand 900ms cubic-bezier(.15,.8,.3,1) both; }
.is-expanded-wild .reel-static > .symbol-slot .symbol-art:not(.symbol-video-art) { animation:reel-wild-arrive 820ms cubic-bezier(.18,.8,.3,1) both; }
.wild-expansion-effects { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.wild-expansion-art { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; animation:wild-frame-ignite 1s ease-out both; }
.wild-energy-core { position:absolute; left:-20%; width:140%; top:var(--wild-origin); height:15%; transform:translateY(-50%); background:radial-gradient(ellipse,#fff9f7 0,#ffb9f7 12%,#fa36dca8 35%,transparent 72%); animation:wild-core-expand 900ms ease-out both; mix-blend-mode:screen; }
.wild-energy-beam { position:absolute; top:0; bottom:0; width:10%; background:linear-gradient(90deg,transparent,#ffb2fccc,#fff,transparent); filter:blur(1px); box-shadow:0 0 20px #f331dd; animation:wild-beam-burst 950ms ease-out both; }
.wild-energy-beam.left { left:1%; transform-origin:center var(--wild-origin); }
.wild-energy-beam.right { right:1%; transform-origin:center var(--wild-origin); }
.wild-energy-ring { position:absolute; left:0; right:0; top:var(--wild-origin); height:15%; border:3px solid #fff4ff; border-radius:50%; filter:drop-shadow(0 0 6px #ff6eed); animation:wild-wave-travel 900ms ease-out both; }
.wild-energy-ring.second { animation-delay:140ms; border-color:#ffe389; }
.wild-energy-spark { position:absolute; left:var(--spark-left); top:var(--wild-origin); width:4%; height:1.5%; border-radius:50%; background:#fff3cf; box-shadow:0 0 6px #ff8cee,0 0 12px #ff51cc; opacity:0; animation:wild-spark-fly 950ms var(--spark-delay) ease-out both; }
.coin-land .symbol-art { animation:reel-coin-land 360ms cubic-bezier(.2,.7,.3,1) both; }
.coin-land .coin-value { animation:coin-value-land 360ms cubic-bezier(.2,.7,.3,1) both; }
.coin-land-effects { position:absolute; inset:0; pointer-events:none; z-index:0; }
.coin-land-aura { position:absolute; inset:-5%; border-radius:50%; background:radial-gradient(circle,#fff3a155 5%,#ffd44866 27%,#ff59d633 50%,transparent 70%); mix-blend-mode:screen; animation:coin-aura-bloom 1100ms ease-out both; }
.coin-land-ring { position:absolute; inset:12%; border-radius:50%; border:2px solid #fffbe3; box-shadow:0 0 10px #ffd658,inset 0 0 7px #ffe49b; animation:reel-coin-ring 850ms ease-out both; }
.coin-land-ring.second { animation-delay:110ms; border-color:#ffaef2; }
.coin-land-flare { position:absolute; left:12%; right:12%; top:47%; height:5%; background:linear-gradient(90deg,transparent,#fff6d8,transparent); filter:drop-shadow(0 0 7px #ffaadd); transform:rotate(-30deg); animation:coin-flare-sweep 550ms ease-out both; }
.coin-land-spark { position:absolute; left:50%; top:48%; width:5%; aspect-ratio:1; background:#fff7bb; clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%); filter:drop-shadow(0 0 3px #ffe062); opacity:0; animation:coin-spark-burst 900ms var(--spark-delay) cubic-bezier(.12,.65,.23,1) both; }
.coin-land-confetti { position:absolute; left:50%; top:50%; width:4%; height:2%; border-radius:8%; background:var(--confetti-color); box-shadow:0 0 2px #fff5; opacity:0; animation:coin-confetti-burst 1100ms var(--confetti-delay) cubic-bezier(.1,.6,.3,1) both; }
.coin-land-confetti:nth-child(3n) { width:3%; height:3%; border-radius:0; }
.bonus-land > .symbol-art:not(.symbol-activation-art) { animation:bonus-art-flash 720ms ease-out both; }
.bonus-land-effects { position:absolute; inset:0; pointer-events:none; z-index:0; }
.bonus-land-aura { position:absolute; inset:-9%; border-radius:50%; background:radial-gradient(ellipse,#fff3ae99 5%,#ffce6288 26%,#ff54d75c 47%,transparent 70%); animation:bonus-aura-bloom 1050ms ease-out both; }
.bonus-land-flash { position:absolute; left:-3%; right:-3%; top:44%; height:12%; background:radial-gradient(ellipse,#fffbe8 8%,#ffe7a3bb 35%,transparent 73%); filter:drop-shadow(0 0 8px #ffa5e7); animation:bonus-flash 600ms ease-out both; }
.bonus-land-ripple { position:absolute; inset:13%; border:3px solid #fff5d6; border-radius:50%; box-shadow:0 0 10px #ffc95b,inset 0 0 8px #ffd36a; animation:bonus-ripple 950ms cubic-bezier(.15,.7,.25,1) both; }
.bonus-land-ripple.second { border-color:#ffd2f5; box-shadow:0 0 10px #ff74d6,inset 0 0 7px #ffb9ed; animation-delay:110ms; }
.bonus-land-spark { position:absolute; left:50%; top:50%; width:5%; aspect-ratio:1; background:#fff8d6; clip-path:polygon(50% 0,62% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%); filter:drop-shadow(0 0 4px #ffc76b); animation:bonus-spark 900ms var(--bonus-spark-delay) ease-out both; }
@keyframes bonus-art-flash { 0%,100% { filter:drop-shadow(0 4px 4px #08001299); } 18% { filter:brightness(1.45) drop-shadow(0 0 9px #fff1c6bb); } 48% { filter:brightness(1.08) drop-shadow(0 0 5px #ffabe988); } }
@keyframes bonus-aura-bloom { 0% { transform:scale(.5); opacity:0; } 22% { transform:scale(1); opacity:1; } 100% { transform:scale(1.15); opacity:0; } }
@keyframes bonus-flash { 0% { transform:scaleX(.2); opacity:0; } 20% { opacity:1; } 100% { transform:scaleX(1.1); opacity:0; } }
@keyframes bonus-ripple { 0% { transform:scale(.5); opacity:0; } 15% { opacity:1; } 100% { transform:scale(1.5); opacity:0; } }
@keyframes bonus-spark { 0% { transform:translate(-50%,-50%) scale(.1); opacity:0; } 18% { opacity:1; } 100% { transform:translate(calc(-50% + var(--bonus-spark-x)),calc(-50% + var(--bonus-spark-y))) scale(.1); opacity:0; } }
@keyframes reel-win-glow { from { opacity:.55; } to { opacity:1; } }
@keyframes reel-prop-win { 0%,100% { transform:translateY(0); filter:drop-shadow(0 4px 4px #08001299); } 22% { transform:translateY(-6%); filter:brightness(1.55) drop-shadow(0 0 10px #fff1aacc); } 42% { transform:translateY(3%); filter:brightness(1.2) drop-shadow(0 0 6px #ff8cdc99); } 65% { transform:translateY(-2%); filter:brightness(1.4) drop-shadow(0 0 8px #fff1aabb); } 82% { transform:translateY(1%); filter:brightness(1.1); } }
@keyframes reel-stop-bounce { 0% { transform:translateY(-2px); } 28% { transform:translateY(5px); } 64% { transform:translateY(-2px); } 100% { transform:translateY(0); } }
@keyframes pulse-inspect { from { box-shadow:inset 0 0 12px #e73cb844,0 0 8px #fa8cfa55; } to { box-shadow:inset 0 0 24px #ffacf477,0 0 15px #fff2ff88; } }
@keyframes pulse-miss-stop { 0% { transform:translateY(-2%); } 35% { transform:translateY(3%); } 100% { transform:translateY(0); } }
@keyframes reel-wild-expand { 0% { transform:scaleY(.12); opacity:0; } 45% { transform:scaleY(1.02); opacity:1; } 100% { transform:scaleY(1); opacity:.8; } }
@keyframes reel-wild-arrive { 0%,12% { transform:translateY(var(--wild-arrival-shift,0px)); filter:brightness(2); opacity:.6; } 65% { transform:translateY(3px); filter:brightness(1.4); opacity:1; } 100% { transform:translateY(0); } }
@keyframes wild-frame-ignite { 0% { transform:scaleY(.1); opacity:0; filter:brightness(3); } 45% { transform:scaleY(1.03); opacity:1; filter:brightness(1.65); } 100% { transform:scaleY(1); opacity:.88; filter:brightness(1); } }
@keyframes wild-core-expand { 0% { transform:translateY(-50%) scale(.1); opacity:0; } 20% { opacity:1; } 75% { transform:translateY(-50%) scale(1.15,8); opacity:.8; } 100% { transform:translateY(-50%) scale(1.4,9); opacity:0; } }
@keyframes wild-beam-burst { 0% { transform:scaleY(0); opacity:0; } 35% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1); opacity:.35; } }
@keyframes wild-wave-travel { from { transform:translateY(-50%) scale(.1); opacity:1; } to { transform:translateY(-50%) scale(2,11); opacity:0; } }
@keyframes wild-spark-fly { 0% { transform:translateY(0) scale(.1); opacity:0; } 15% { opacity:1; } 100% { transform:translateY(var(--spark-travel)) scale(.1); opacity:0; } }
/* Land vertically at the tape's exact width. Scaling the coin and its value
   moved both side edges and made an otherwise centred reel appear to wobble. */
@keyframes reel-coin-land { 0% { transform:translateY(-4px); filter:brightness(1.65); } 50% { transform:translateY(5px); } 100% { transform:translateY(0); } }
@keyframes coin-value-land { 0% { transform:translate(-50%,-50%) translateY(-4px); } 50% { transform:translate(-50%,-50%) translateY(5px); } 100% { transform:translate(-50%,-50%) translateY(0); } }
@keyframes reel-coin-ring { from { transform:scale(.6); opacity:1; } to { transform:scale(1.58); opacity:0; } }
@keyframes coin-aura-bloom { 0% { transform:scale(.5); opacity:0; } 25% { transform:scale(1.05); opacity:1; } 100% { transform:scale(1.13); opacity:0; } }
@keyframes coin-flare-sweep { from { transform:translateY(300%) rotate(-30deg); opacity:0; } 25% { opacity:1; } to { transform:translateY(-800%) rotate(-30deg); opacity:0; } }
@keyframes coin-spark-burst { 0% { transform:translate(-50%,-50%) scale(.1); opacity:0; } 18% { opacity:1; } 100% { transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.05); opacity:0; } }
@keyframes coin-confetti-burst { 0% { transform:translate(-50%,-50%) rotate(0) scale(.2); opacity:0; } 15%,50% { opacity:1; } 100% { transform:translate(calc(-50% + var(--confetti-x)),calc(-50% + var(--confetti-y))) rotate(var(--confetti-turn)) scale(.55); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .symbol-slot::after,.symbol-art,.coin-value,.is-expanded-wild::after,.reel-stop-bounce { animation:none!important; } .coin-land-effects,.wild-energy-core,.wild-energy-beam,.wild-energy-ring,.wild-energy-spark { display:none!important; } }
.reduced-motion .coin-land-effects,.reduced-motion .wild-energy-core,.reduced-motion .wild-energy-beam,.reduced-motion .wild-energy-ring,.reduced-motion .wild-energy-spark { display:none!important; }
.reduced-motion .symbol-slot.is-prop-win > .symbol-art { animation:none!important; }
@media (prefers-reduced-motion:reduce) { .bonus-land-effects { display:none!important; } }
.reduced-motion .bonus-land-effects { display:none!important; }
.reduced-motion .bonus-land > .symbol-art { animation:none!important; }