/* Casino cabinet: composited reel strips, a single symbol atlas, bounded wins. */
:root { --bg:#0d0916; --bg2:#1b1429; --card:#21182e; --accent:#f5c661; --accent2:#775224; --text:#fff4de; --muted:#b7a9c6; --radius:14px; }
body { background:radial-gradient(ellipse at 50% 25%,#34164c 0,transparent 65%),#0d0916; padding-bottom:calc(82px + env(safe-area-inset-bottom)); font-family:system-ui,sans-serif; }
button { font:inherit; touch-action:manipulation; }button:focus-visible,summary:focus-visible { outline:3px solid #ffdc83; outline-offset:3px; }
.topbar { position:relative; max-width:650px; margin:auto; background:transparent; padding:12px 20px; padding-top:max(12px,env(safe-area-inset-top)); border-bottom:1px solid #cf9b451f; }
.brand { letter-spacing:2px; font-size:12px; }.brand-seal { color:#f6c65b; font-size:22px; margin-right:6px; }
.lang { gap:2px; }.langbtn { min-height:32px; border-color:#655037; font-size:10px; }.langbtn.active { background:#f3c565; }
.tabs { position:fixed; top:auto; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:650px; padding:7px 3px calc(7px + env(safe-area-inset-bottom)); background:#160f23; border:1px solid #75533266; border-radius:16px 16px 0 0; z-index:10; overflow:visible; box-shadow:0 -5px 25px #0008; }
.tab { min-width:0; flex:1 1 0; padding:6px 1px; font-size:clamp(8px,2.4vw,11px); display:flex; flex-direction:column; align-items:center; gap:5px; border-radius:8px; }.tab::before { content:'◎'; font-size:22px; line-height:22px; }.tab[data-view=history]::before { content:'◷'; }.tab[data-view=top]::before { content:'♜'; }.tab[data-view=favorites]::before { content:'♡'; }.tab[data-view=collection]::before { content:'▦'; }.tab[data-view=profile]::before { content:'☷'; }.tab.active { border:0; color:#ffd477; background:#d4a45412; }
.view { max-width:580px; padding:16px 16px 24px; }.machine-wrap { background:none; border:0; box-shadow:none; padding:0; }
.machine { --win:#ffd77b; position:relative; isolation:isolate; border:2px solid #f0c369; border-radius:32px 32px 19px 19px; padding:15px 22px 10px; background:linear-gradient(110deg,#3d193a,#180c29 28%,#3e173f 70%,#180d28); box-shadow:0 0 0 3px #68401d,0 0 0 5px #d8a64c,0 0 0 7px #291317,0 12px 0 #100913,0 18px 42px #000b,inset 0 0 22px #ec4df414; overflow:hidden; }
.machine::before { content:''; position:absolute; inset:7px; border:1px solid #d79a4138; border-radius:23px 23px 11px 11px; pointer-events:none; z-index:-1; background:repeating-linear-gradient(135deg,transparent 0 12px,#ffffff02 12px 13px); }
.machine-crown { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 0 12px; color:#f9c768; text-shadow:0 0 12px #e18a3e; }.machine-crown>span { font-size:16px; }
.machine-crown { border-radius:45% 45% 10px 10px / 18px 18px 10px 10px; background:radial-gradient(ellipse at 50% 100%,#ad254443,transparent 75%); border-bottom:1px solid #dba44666; margin-bottom:10px; box-shadow:0 1px #0008; }
.machine-title { font-family:Georgia,serif; font-size:clamp(25px,7.5vw,40px); font-weight:900; font-style:italic; letter-spacing:-1px; line-height:1.1; color:#ffe9a6; text-shadow:0 2px #b2762b,0 4px #4e260d,0 0 16px #f3a53f99; white-space:nowrap; }
.marquee { display:flex; justify-content:space-between; margin:0 0 12px; padding:0 2px; }.marquee i,.cabinet-rail i { display:block; flex-shrink:0; width:7px; height:7px; border-radius:50%; border:1px solid #ffe5a0; background:radial-gradient(circle at 35% 30%,#fff,#fff3ba 30%,#ffc04e 60%,#ad6020); opacity:1; box-shadow:0 0 5px #ffc961,0 0 10px #e7874280; animation:bulbGlow 2.4s ease-in-out infinite; animation-delay:calc(var(--i)*-160ms); }
.cabinet-rail { position:absolute; top:70px; bottom:22px; width:8px; display:flex; flex-direction:column; justify-content:space-between; z-index:5; pointer-events:none; }.rail-left { left:7px; }.rail-right { right:7px; }.rail-right i { animation-delay:calc(var(--i)*-160ms - 600ms); }
.machine.is-spinning { animation:none; }.machine.is-spinning .marquee i,.machine.is-spinning .cabinet-rail i { animation:bulbChase .9s ease-in-out infinite; animation-delay:calc(var(--i)*-90ms); }
.reel-housing { position:relative; padding:5px; border-radius:13px; background:linear-gradient(135deg,#ffeabb,#9c622a 18%,#f7d692 45%,#6c391c 70%,#ffe2a2); box-shadow:0 0 0 1px #2b140f,0 4px 13px #000b,0 0 14px #eeac4926; }
.reels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; background:#27152e; border:2px solid #422535; border-radius:8px; overflow:hidden; }
.reel { min-width:0; border:0; border-radius:0; background:#100b1d; box-shadow:none; overflow:hidden; }.reel-window { position:relative; height:290px; overflow:hidden; }.reel-pos { position:relative; top:auto; right:auto; height:23px; justify-content:center; color:#dcb678; background:#221126; font-size:8px; gap:3px; z-index:4; border-bottom:1px solid #665035; }.reel-pos .bowl-icon { width:12px; color:#e7bd70; }
.reel::before { z-index:3; background:linear-gradient(#07020abf 23px,transparent 33%,transparent 65%,#07020abd 100%); }
.sym { padding:2px; min-height:68px; height:68px; position:relative; overflow:hidden; }.sym.top,.sym.bottom { opacity:.55; }.sym.mid { min-height:154px; height:154px; border-top:1px solid #f6c65c88; border-bottom:1px solid #f6c65c88; background:radial-gradient(ellipse,#6d3e5025,transparent); color:#fff1c7; overflow:visible; }.sym.mid::after { content:''; position:absolute; inset:0; border:1px solid #ffdf9415; pointer-events:none; }
.flavor-symbol { display:block; width:86px; height:86px; max-width:100%; flex-shrink:0; background-image:url('/app/casino-symbols.webp'); background-size:500% 400%; background-repeat:no-repeat; mix-blend-mode:lighten; mask-image:linear-gradient(transparent,#000 7%,#000 87%,transparent 97%); }
.sym.top .flavor-symbol,.sym.bottom .flavor-symbol { width:77px; height:77px; }.sym.mid>.flavor-symbol { animation:casinoFloat 3s ease-in-out infinite; }.reel:nth-child(2) .sym.mid>.flavor-symbol { animation-delay:-1s; }.reel:nth-child(3) .sym.mid>.flavor-symbol { animation-delay:-2s; }
.sym .symbol-label { color:#ead1a0; font-size:8px; text-transform:uppercase; letter-spacing:.8px; text-overflow:ellipsis; max-width:100%; overflow:hidden; }.sym .brand { display:block; font-size:7px; color:#c9ad8e; letter-spacing:.6px; margin-top:1px; }.sym .name { font-size:10px; line-height:1.25; color:#fff2c5; text-shadow:0 1px 2px #000; margin-top:2px; }.sym .pct { position:absolute; right:3px; top:4px; background:linear-gradient(#ffe3a0,#cc953b); padding:1px 4px; border-radius:4px; color:#422417; font-size:9px; z-index:2; }.landed .sym.mid>.flavor-symbol { width:78px; height:78px; }.empty-reel { font-size:45px; color:#b7a0b8; }
.payline-arrow { position:absolute; top:calc(50% + 5px); transform:translateY(-50%); color:#ffeab0; font-size:14px; text-shadow:0 0 8px #ff991c; z-index:6; }.arrow-left { left:-11px; }.arrow-right { right:-11px; }
.rolling-strip { position:absolute; top:0; left:0; right:0; z-index:2; animation:none; will-change:transform; }.rolling-symbol { height:96px; display:flex; justify-content:center; align-items:center; }.rolling-symbol .flavor-symbol { width:90px; height:90px; }
.is-spinning .reel:not(.landed) .reel-window>.sym { visibility:hidden; }.sym.mid.rolling { animation:none; filter:none; }.reel.landed { border:0; box-shadow:none; }.reel.landed .sym.mid { animation:casinoLand .48s cubic-bezier(.16,.7,.3,1.4); }
.win-display { position:relative; border:1px solid #997239; border-radius:7px; background:linear-gradient(#0c0713,#241226); margin-top:14px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px; font-weight:900; font-size:17px; letter-spacing:2px; color:var(--win); text-shadow:0 0 12px var(--win); box-shadow:inset 0 2px 8px #0009,0 1px #efc46a40; }.win-label { font-size:7px; letter-spacing:1px; font-weight:500; color:#d8c3a7; text-shadow:none; }
.machine-status { font-size:7px; letter-spacing:.6px; text-align:center; color:#d6be9f; padding-top:10px; }.status-dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:#ffbf58; margin-right:5px; }
.deck { display:flex; align-items:center; gap:13px; margin:12px 0 17px; }.deck-star { font-size:22px; color:#e1b46b; text-shadow:0 0 10px #ff961e55; }.spin-btn { width:76%; min-height:55px; display:flex; align-items:center; justify-content:center; gap:18px; border:2px solid #ffe7b0; border-radius:13px; padding:12px; background:linear-gradient(#fa5164 0,#d51946 42%,#a80934 52%,#d8204b); color:#fff2cf; font-size:22px; font-weight:900; text-shadow:0 2px 2px #790827; letter-spacing:2px; box-shadow:0 5px 0 #650c27,0 6px 0 #f7c669,0 0 20px #fb285744,inset 0 2px 1px #ffffff88; transition:transform .12s; }.spin-btn:active:not(:disabled) { transform:translateY(4px); box-shadow:0 1px 0 #650c27,0 2px 0 #f7c669; }.spin-btn:disabled { opacity:.85; filter:none; }.spin-btn span { font-size:26px; }.marquee-bottom { margin:0; }
.spin-btn { position:relative; overflow:hidden; }.spin-btn::after { content:''; position:absolute; inset:-50% auto -50% -70%; width:35%; background:linear-gradient(90deg,transparent,#fff6,transparent); transform:skewX(-25deg); animation:buttonSweep 5s ease-in-out infinite; pointer-events:none; }.is-spinning .spin-btn::after { animation-duration:1.6s; }
.machine[data-rarity=uncommon] { --win:#7cf4b3; }.machine[data-rarity=rare] { --win:#65caff; }.machine[data-rarity=epic] { --win:#dd8aff; }.machine[data-rarity=legendary] { --win:#ff9b32; }.machine[data-rarity=mythic] { --win:#ff88c8; }
.is-winning .sym.mid { box-shadow:inset 0 0 18px color-mix(in srgb,var(--win) 25%,transparent); border-color:var(--win); }.is-winning .win-display { animation:winPlaque .65s ease-out,winGlow 1.2s ease-in-out 3; }.is-winning .marquee i,.is-winning .cabinet-rail i { animation:bulbChase 1.2s ease-in-out 3; animation-delay:calc(var(--i)*-80ms); }.is-winning .sym.mid>.flavor-symbol { animation:symbolWin .8s ease-in-out 3; }
.win-burst { position:absolute; inset:-50px; z-index:0; opacity:0; pointer-events:none; background:repeating-conic-gradient(from 0deg,transparent 0 18deg,var(--win) 20deg 22deg,transparent 24deg 40deg); mask-image:radial-gradient(ellipse,transparent 25%,#000 100%); }
.is-winning:is([data-rarity=epic],[data-rarity=legendary],[data-rarity=mythic]) .win-burst { animation:winRays 4s ease-out; }.is-winning:is([data-rarity=legendary],[data-rarity=mythic]) .machine-title { animation:jackpotTitle .8s ease-in-out 5; }
.casino-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:8; border-radius:inherit; }.casino-particles span { position:absolute; top:26%; color:var(--win); animation:prizeFall ease-in both; text-shadow:0 0 8px var(--win); }.win-spark { font-size:18px; }.win-coin { width:23px; height:23px; border-radius:50%; border:2px solid #ffe99a; display:grid; place-items:center; background:linear-gradient(120deg,#ffffc6,#f4be35 45%,#b77519); color:#97620c!important; box-shadow:0 0 10px #ffda6899; font-size:14px; }
.modes { margin:24px 0 14px; background:#150f20; border:1px solid #78563577; padding:4px; gap:3px; border-radius:12px; }.mode { border:0; background:none; min-height:41px; font-size:11px; }.mode.active { background:linear-gradient(#f0cc83,#bf8e48); color:#321923; font-weight:700; }.card { border:1px solid #83603c44; }.fold { background:#1b1326; }.fold-title { font-size:12px; }.fold-badge { font-size:10px; max-width:55%; text-align:right; }.btn { min-height:40px; }.btn.small { min-height:34px; }.component { border-color:#76512c44; }.toast { bottom:calc(88px + env(safe-area-inset-bottom)); }
@keyframes casinoRoll { from { transform:translateY(-384px); } to { transform:translateY(0); } }
@keyframes buttonSweep { 0%,65% { transform:translateX(0) skewX(-25deg); } 100% { transform:translateX(650%) skewX(-25deg); } }
@keyframes casinoLand { 0% { transform:translateY(-32px); } 55% { transform:translateY(7px); } 80% { transform:translateY(-3px); } 100% { transform:translateY(0); } }
@keyframes casinoFloat { 50% { transform:translateY(-3px) scale(1.035); } }
@keyframes bulbGlow { 50% { opacity:.65; } }@keyframes bulbChase { 0%,100% { opacity:.45; } 50% { opacity:1; box-shadow:0 0 6px #fff3a4,0 0 14px #ffb441; } }
@keyframes winPlaque { from { transform:scale(.85); opacity:.2; } to { transform:scale(1); opacity:1; } }@keyframes winGlow { 50% { box-shadow:0 0 18px color-mix(in srgb,var(--win) 45%,transparent); } }
@keyframes symbolWin { 50% { transform:translateY(-4px) scale(1.12); } }@keyframes winRays { 0% { opacity:0; transform:rotate(0); } 20% { opacity:.4; } 100% { opacity:0; transform:rotate(100deg); } }
@keyframes jackpotTitle { 50% { transform:scale(1.04); text-shadow:0 0 20px #fff4a1; } }@keyframes prizeFall { 0% { opacity:0; transform:translateY(-35px) scale(.4); } 15% { opacity:1; } 100% { opacity:0; transform:translate(var(--drift),380px) rotate(250deg); } }
@media(min-width:700px) { .view { padding-top:25px; }.machine { padding:20px 28px 12px; }.reel-window { height:340px; }.sym.top,.sym.bottom { height:93px; }.flavor-symbol { width:105px; height:105px; }.landed .sym.mid>.flavor-symbol { width:86px; height:86px; }.sym .name { font-size:12px; } }
@media(max-width:360px) { .view { padding:12px 12px 24px; }.machine { padding:12px 19px 9px; border-radius:25px 25px 16px 16px; }.machine-crown { gap:4px; }.machine-title { font-size:25px; }.marquee i,.cabinet-rail i { width:6px; height:6px; }.reel-window { height:254px; }.sym.top,.sym.bottom { height:50px; min-height:50px; }.flavor-symbol { width:72px; height:72px; }.sym .name { font-size:9px; }.win-display { font-size:14px; letter-spacing:1px; }.spin-btn { min-height:49px; font-size:20px; } }
@media(max-height:740px) and (max-width:600px) { .reel-window { height:254px; }.sym.top,.sym.bottom { height:50px; min-height:50px; }.topbar { padding-top:8px; padding-bottom:8px; }.machine-crown { padding-top:4px; }.deck { margin-bottom:13px; } }
/* Glass lenses sit in fixed brass sockets. Only the light layers animate. */
.machine.is-spinning .marquee i,.machine.is-spinning .cabinet-rail i,.machine.is-winning .marquee i,.machine.is-winning .cabinet-rail i { animation:none; opacity:1; }
.machine .marquee i,.machine .cabinet-rail i { position:relative; width:9px; height:9px; border:1px solid #9b733a; background:radial-gradient(circle at 33% 24%,#fff1bd 0 8%,#c09755 14%,#4f3217 52%,#24140b 70%); box-shadow:0 1px 1px #000,0 0 0 1px #28151b,inset 0 1px 2px #fff6; opacity:1; animation:none; color:#ffc967; }
.machine .marquee i::before,.machine .cabinet-rail i::before { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 32% 25%,#fff 0 12%,#fffbd9 20%,#ffdd88 40%,#ffb735 67%,#9f4e13 100%); box-shadow:inset -1px -1px 2px #51230180; opacity:.3; animation:bulbOrbit 6s linear infinite; animation-delay:calc(var(--phase)*-100ms); }
.machine .marquee i::after,.machine .cabinet-rail i::after { content:''; position:absolute; inset:-10px; border-radius:50%; background:radial-gradient(circle,#fff5bd99 0, #ffc35766 20%,#ffad3433 42%,transparent 70%); opacity:0; pointer-events:none; animation:bulbHalo 6s linear infinite; animation-delay:calc(var(--phase)*-100ms); }
.machine .rail-left { left:6px; }.machine .rail-right { right:7px; }
.machine.is-spinning .marquee i::before,.machine.is-spinning .cabinet-rail i::before { animation:bulbSprint 2.4s linear infinite; animation-delay:calc(var(--phase)*-40ms); }.machine.is-spinning .marquee i::after,.machine.is-spinning .cabinet-rail i::after { animation:bulbSprintHalo 2.4s linear infinite; animation-delay:calc(var(--phase)*-40ms); }
.machine.is-winning .marquee i::before,.machine.is-winning .cabinet-rail i::before { animation:bulbFinale 1.8s ease-in-out infinite; animation-delay:calc(var(--pair)*-900ms + var(--distance)*-45ms); }.machine.is-winning .marquee i::after,.machine.is-winning .cabinet-rail i::after { background:radial-gradient(circle,#fff4cfaa,var(--win) 15%,transparent 68%); animation:bulbFinaleHalo 1.8s ease-in-out infinite; animation-delay:calc(var(--pair)*-900ms + var(--distance)*-45ms); }
.machine::after { content:''; position:absolute; inset:1px; border-radius:inherit; pointer-events:none; z-index:4; box-shadow:inset 0 0 20px #ffb44022; opacity:.45; animation:cabinetBreathe 4s ease-in-out infinite; }.machine.is-spinning::after { box-shadow:inset 0 0 26px #ffbf5066; animation-duration:1.5s; }.machine.is-winning::after { box-shadow:inset 0 0 35px var(--win); animation:cabinetBreathe 1.8s ease-in-out 3; }

/* The atlas is a separate layer so its crop never clips the aura or stars. */
.flavor-symbol { position:relative; isolation:isolate; background:none; mask-image:none; mix-blend-mode:normal; overflow:visible; }
.symbol-art { position:absolute; inset:0; z-index:1; background-image:var(--symbol-sheet,url('/app/casino-symbols.webp')); background-size:500% 400%; background-position:var(--symbol-position); background-repeat:no-repeat; mix-blend-mode:lighten; mask-image:linear-gradient(transparent,#000 7%,#000 87%,transparent 97%); }
.flavor-symbol::before { content:''; position:absolute; inset:-9%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--symbol-color) 65%,transparent) 0, color-mix(in srgb,var(--symbol-color) 28%,transparent) 35%,transparent 70%); opacity:.65; transform:scale(.95); z-index:0; }
.sym.mid .flavor-symbol::before { animation:symbolAura 2.8s ease-in-out infinite; }
.sym.mid .flavor-symbol::after { content:''; position:absolute; inset:3%; border-radius:50%; border:1px solid color-mix(in srgb,var(--symbol-color) 45%,transparent); border-top-color:transparent; border-bottom-color:transparent; box-shadow:0 0 8px color-mix(in srgb,var(--symbol-color) 25%,transparent); transform:rotate(-25deg); z-index:0; animation:symbolOrbit 9s linear infinite; }
.symbol-glints { position:absolute; inset:0; z-index:2; pointer-events:none; }.symbol-glints::before,.symbol-glints::after { content:''; position:absolute; width:16px; height:16px; background:#fff8df; clip-path:polygon(50% 0,59% 39%,100% 50%,59% 59%,50% 100%,40% 60%,0 50%,40% 40%); opacity:0; }
.sym.mid .symbol-glints::before { top:12%; left:19%; animation:symbolSparkle 3.2s ease-in-out infinite; }.sym.mid .symbol-glints::after { bottom:20%; right:11%; width:11px; height:11px; animation:symbolSparkle 3.2s 1.5s ease-in-out infinite; }
.reel:nth-child(2) .symbol-glints::before { animation-delay:.7s; }.reel:nth-child(3) .symbol-glints::before { animation-delay:1.4s; }
.sym.top .flavor-symbol::before,.sym.bottom .flavor-symbol::before { opacity:.3; }.rolling-symbol .flavor-symbol::before { opacity:.35; }
.reel.landing-flare .sym.mid::after { background:radial-gradient(ellipse,#fff0bca6,transparent 70%); animation:landingLight .8s ease-out both; z-index:4; }
.machine.is-winning .sym.mid .flavor-symbol::before { animation:auraWin .85s ease-in-out 5; background:radial-gradient(ellipse,var(--win),transparent 70%); }.machine.is-winning .sym.mid .flavor-symbol::after { border-color:var(--win); border-top-color:transparent; animation:symbolOrbit 1.8s linear 3; }.machine.is-winning .sym.mid .symbol-glints::before,.machine.is-winning .sym.mid .symbol-glints::after { animation-duration:1.2s; }
.win-shockwave { pointer-events:none; position:absolute; inset:12% 5%; border:3px solid var(--win); border-radius:50%; opacity:0; z-index:6; }.is-winning .win-shockwave { animation:winShockwave 1.4s ease-out 2; }.is-winning:is([data-rarity=legendary],[data-rarity=mythic]) .win-shockwave { animation-iteration-count:3; }
.is-winning .win-burst { animation:winRays 4s ease-out; }.is-winning:is([data-rarity=epic],[data-rarity=legendary],[data-rarity=mythic]) .win-burst { animation:richWinRays 4.6s ease-out; }
.sym .name { font-size:13px; line-height:1.2; font-weight:800; color:#fff9e9; text-shadow:0 2px 3px #000; margin-top:4px; -webkit-line-clamp:2; overflow-wrap:anywhere; letter-spacing:0; }
.sym .brand { font-size:8px; color:#e5caa7; }.landed .sym.mid>.flavor-symbol { width:72px; height:72px; }.component .pname { font-size:16px; line-height:1.35; }
@keyframes bulbOrbit { 0%,7%,50%,57%,100% { opacity:1; } 16%,40%,66%,90% { opacity:.12; } }
@keyframes bulbHalo { 0%,7%,50%,57%,100% { opacity:1; transform:scale(1.1); } 18%,40%,68%,90% { opacity:.05; transform:scale(.8); } }
@keyframes bulbSprint { 0%,12%,100% { opacity:1; } 27%,78% { opacity:.12; } }
@keyframes bulbSprintHalo { 0%,12%,100% { opacity:1; transform:scale(1.3); } 27%,78% { opacity:0; transform:scale(.7); } }
@keyframes bulbFinale { 0%,100% { opacity:.25; } 35%,65% { opacity:1; } }
@keyframes bulbFinaleHalo { 0%,100% { opacity:.12; transform:scale(.9); } 35%,65% { opacity:1; transform:scale(1.6); } }
@keyframes cabinetBreathe { 50% { opacity:.9; } }
@keyframes symbolAura { 50% { opacity:1; transform:scale(1.17); } }
@keyframes symbolOrbit { to { transform:rotate(335deg); } }
@keyframes symbolSparkle { 0%,20%,70%,100% { opacity:0; transform:scale(.2) rotate(0deg); } 40%,48% { opacity:1; transform:scale(1.2) rotate(80deg); } }
@keyframes landingLight { from { opacity:1; transform:scale(.75); } to { opacity:0; transform:scale(1.4); } }
@keyframes auraWin { 50% { opacity:1; transform:scale(1.5); } }
@keyframes winShockwave { 0% { opacity:.8; transform:scale(.3); } 100% { opacity:0; transform:scale(1.6); } }
@keyframes richWinRays { 0% { opacity:0; transform:rotate(-20deg) scale(.6); } 20%,50% { opacity:.6; } 100% { opacity:0; transform:rotate(120deg) scale(1.2); } }
@media(min-width:700px) { .sym .name { font-size:15px; }.landed .sym.mid>.flavor-symbol { width:80px; height:80px; } }
@media(max-width:360px) { .sym .name { font-size:12px; }.machine .marquee i,.machine .cabinet-rail i { width:8px; height:8px; }.landed .sym.mid>.flavor-symbol { width:65px; height:65px; } }
.sym.mid[role=button] { cursor:pointer; touch-action:manipulation; }.sym.mid[role=button]:focus-visible { outline:2px solid #ffe5ac; outline-offset:-3px; }.sym.mid[aria-expanded=true] { background:#e9b95b20; }
.reel-housing { --neighbor-height:68px; }
.reel-description { position:absolute; top:calc(100% - var(--neighbor-height) - 5px); left:9px; right:9px; height:calc(var(--neighbor-height) + 80px); max-height:170px; z-index:9; padding:12px 14px; border:1px solid #af874c; border-radius:20px 20px 20px 13px; background:linear-gradient(140deg,#30203d,#1b1227); color:#f7eedc; box-shadow:0 8px 24px #000b,0 0 14px #b1833820,inset 0 1px #ffffff12; animation:descriptionCloud .22s ease-out; display:flex; flex-direction:column; gap:7px; }
.description-categories { margin-bottom:7px; }.description-categories:empty { display:none; }.description-categories .cat-chip { cursor:default; background:color-mix(in srgb,var(--category-color) 10%,#1b1227); font-weight:600; line-height:1.4; }
.machine:has(.has-description) .casino-particles { visibility:hidden; }
.reel-description[hidden] { display:none; }.reel-description strong { font-size:14px; line-height:1.25; overflow-wrap:anywhere; flex-shrink:0; max-height:36px; overflow:auto; }.description-copy { overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; min-height:0; scrollbar-width:thin; }.description-copy:focus-visible { outline:2px solid #9b793c; outline-offset:2px; }
@keyframes descriptionCloud { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(min-width:700px) { .reel-housing { --neighbor-height:93px; } }
@media(max-width:360px), (max-height:740px) and (max-width:600px) { .reel-housing { --neighbor-height:50px; } }
.topbar .brand { display:flex; align-items:center; }.brand-seal { flex-shrink:0; }
.flavor-marks { display:flex; gap:7px; }.flavor-marks .chip { min-width:40px; min-height:36px; font-size:17px; }.flavor-marks [data-mark=excluded].on { background:#672838; border-color:#ff8b91; color:#fff; }
.list-item.has-mix-info { display:block; }.inline-recipe { margin-top:14px; }.inline-recipe[hidden] { display:none; }.inline-recipe .mix-info { margin-bottom:0; }.mix-info .component { cursor:default; }.mix-info .spin-actions { min-height:40px; }
#view[data-view=profile] select { font-size:16px; min-height:46px; line-height:1.4; padding:10px 12px; }#view[data-view=profile] .pref-row { gap:8px; margin:14px 0!important; }#view[data-view=profile] .pref-row>span { font-size:15px; }#view[data-view=profile] .muted { font-size:14px; line-height:1.5; }#view[data-view=profile] .toggle-head { font-size:17px; cursor:pointer; }#view[data-view=profile] .collapsed>.card-body { display:none; }#view[data-view=profile] .card-body { padding-top:14px; }
.win-display { border-color:var(--win); background:linear-gradient(135deg,color-mix(in srgb,var(--win) 20%,#100916),#1b1029); box-shadow:0 0 12px color-mix(in srgb,var(--win) 45%,transparent),0 0 30px color-mix(in srgb,var(--win) 22%,transparent),inset 0 0 18px color-mix(in srgb,var(--win) 18%,transparent); }
.rarity { --rarity-color:#dcc995; border:1px solid var(--rarity-color); box-shadow:0 0 12px color-mix(in srgb,var(--rarity-color) 45%,transparent); }.rarity.tier-uncommon { --rarity-color:#7cf4b3; }.rarity.tier-rare { --rarity-color:#65caff; }.rarity.tier-epic { --rarity-color:#dd8aff; }.rarity.tier-legendary { --rarity-color:#ff9b32; }.rarity.tier-mythic { --rarity-color:#ff88c8; }
.is-winning .win-display { animation:winPlaque .65s ease-out,fullRarityGlow 1.6s ease-in-out infinite; }.is-winning[data-rarity] .win-burst { animation-duration:var(--celebration-duration); }.is-winning .win-shockwave { animation-iteration-count:infinite; }.is-winning .sym.mid>.flavor-symbol { animation-iteration-count:infinite; }
.rarity-extras { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; }.rarity-extras i { position:absolute; left:50%; top:46%; width:55%; height:22%; border:1px solid var(--win); border-radius:50%; opacity:0; animation:rarityRipple 1.7s ease-out infinite; animation-delay:calc(var(--n)*300ms); }
.rarity-extras[data-effect-tier=uncommon] i { border-width:2px; border-left-color:transparent; border-right-color:transparent; transform:rotate(35deg); }
.rarity-extras[data-effect-tier=rare] i { width:80px; height:2px; border:0; border-radius:0; background:linear-gradient(90deg,transparent,#fff,var(--win)); top:calc(15% + var(--n)*18%); left:0; animation:rarityMeteor 2.2s ease-out infinite; animation-delay:calc(var(--n)*600ms); }
.rarity-extras[data-effect-tier=epic] i { width:45px; height:45px; border-radius:5px; left:calc(8% + var(--n)*22%); top:10%; background:linear-gradient(135deg,#ffffff40,#b056dd11); animation:rarityPrism 2.8s ease-in infinite; animation-delay:calc(var(--n)*600ms); }
.rarity-extras[data-effect-tier=legendary] i { width:12%; height:120%; top:-10%; left:calc(5% + var(--n)*20%); border:0; border-radius:0; background:linear-gradient(90deg,transparent,#ffde8f50,transparent); transform-origin:50% 100%; animation:rarityBeam 3s ease-in-out infinite; animation-delay:calc(var(--n)*300ms); }
.rarity-extras[data-effect-tier=mythic] i { inset:calc(5px + var(--n)*5px); width:auto; height:auto; border-radius:28px; border:2px solid var(--win); box-shadow:inset 0 0 20px #8d68fa44; animation:mythicAura 2.8s ease-in-out infinite; animation-delay:calc(var(--n)*300ms); }
.machine:has(.has-description) .rarity-extras { visibility:hidden; }
.category-fx { position:absolute; inset:0; z-index:2; pointer-events:none; }.category-fx i { position:absolute; opacity:0; width:5px; height:5px; left:20%; bottom:20%; color:var(--symbol-color); }.category-fx i:nth-child(2) { left:60%; animation-delay:.8s!important; }.category-fx i:nth-child(3) { left:80%; animation-delay:1.6s!important; }
.sym.mid [data-effect=bubbles] .category-fx i { border:1px solid currentColor; border-radius:50%; animation:categoryRise 2.6s ease-in infinite; }
.sym.mid [data-effect=steam] .category-fx i { width:12px; height:25px; border-left:2px solid #fff9; border-radius:50%; animation:categoryRise 3.3s ease-out infinite; }
.sym.mid [data-effect=breeze] .category-fx i { width:12px; height:6px; border-radius:90% 0; background:currentColor; animation:categoryDrift 3.2s linear infinite; }
.sym.mid [data-effect=petals] .category-fx i { width:7px; height:10px; background:currentColor; border-radius:80% 20%; animation:categoryPetal 3.5s ease-in-out infinite; }
.sym.mid [data-effect=frost] .category-fx i { width:12px; height:12px; background:#c4faff; clip-path:polygon(45% 0,55% 0,55% 40%,100% 40%,100% 55%,55% 55%,55% 100%,40% 100%,40% 55%,0 55%,0 40%,40% 40%); animation:categoryPetal 3s linear infinite; }
.sym.mid [data-effect=embers] .category-fx i { background:#ffb054; box-shadow:0 0 7px #ff644d; border-radius:50%; animation:categoryRise 1.8s ease-in infinite; }
.sym.mid [data-effect=twinkle] .category-fx i,.sym.mid [data-effect=prism] .category-fx i { width:9px; height:9px; background:currentColor; clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%); animation:symbolSparkle 2s ease-in-out infinite; }
.sym.mid [data-effect=swirl]::after { animation-duration:4s; }.sym.mid [data-effect=orbit]::after { animation-duration:3s; border-style:dashed; }
.sym.mid [data-category=berry] .symbol-art { animation:berryBounce 3s ease-in-out infinite; }.sym.mid [data-category=fruit] .symbol-art { animation:fruitRock 4s ease-in-out infinite; }.sym.mid [data-category=creamy]::after { border-style:dotted; animation-duration:5s; }.sym.mid [data-category=taste_sweet]::after { border-width:2px; animation-direction:reverse; }
@keyframes categoryRise { 0% { opacity:0; transform:translateY(0) scale(.3); } 30% { opacity:.8; } 100% { opacity:0; transform:translateY(-65px) scale(1.4); } }@keyframes categoryDrift { 0% { opacity:0; transform:translate(-20px,0) rotate(0); } 30% { opacity:.8; } 100% { opacity:0; transform:translate(28px,-40px) rotate(180deg); } }@keyframes categoryPetal { 0% { opacity:0; transform:translateY(-55px) rotate(0); } 30% { opacity:.9; } 100% { opacity:0; transform:translate(15px,20px) rotate(200deg); } }
@keyframes berryBounce { 50% { transform:translateY(-3px) scale(1.05,.97); } }@keyframes fruitRock { 50% { transform:rotate(6deg); } }
@keyframes fullRarityGlow { 50% { box-shadow:0 0 18px var(--win),0 0 45px color-mix(in srgb,var(--win) 55%,transparent),inset 0 0 24px color-mix(in srgb,var(--win) 30%,transparent); } }
@keyframes rarityRipple { from { opacity:.8; transform:translate(-50%,-50%) scale(.4); } to { opacity:0; transform:translate(-50%,-50%) scale(2); } }@keyframes rarityMeteor { 0% { opacity:0; transform:translateX(-100px) rotate(-25deg); } 20% { opacity:.9; } 100% { opacity:0; transform:translateX(500px) rotate(-25deg); } }@keyframes rarityPrism { 0% { opacity:0; transform:translateY(-20px) rotate(45deg); } 25% { opacity:.8; } 100% { opacity:0; transform:translateY(380px) rotate(225deg); } }@keyframes rarityBeam { 50% { opacity:.7; transform:rotate(25deg); } }@keyframes mythicAura { 50% { opacity:.6; border-color:#9bdfff; transform:scale(.98); } }
/* Distinct category choreography; no shared floating icon/orbit treatment. */
.sym.mid > .flavor-symbol { animation:none; }
.sym.mid .flavor-symbol::after { animation:none; border:0; box-shadow:none; }
.sym.mid .symbol-glints::before,.sym.mid .symbol-glints::after { animation:none; }
.reel.landed .sym.mid { animation:reelSettle .25s ease-out; }
@keyframes reelSettle { 0% { transform:translateY(2px); } 100% { transform:translateY(0); } }
.rolling-strip .sym.mid > .flavor-symbol { width:72px; height:72px; }
.rolling-strip .sym.mid > .flavor-symbol,.rolling-strip .symbol-art,.rolling-strip .category-fx i { animation:none!important; }
.sym.mid [data-category=alcohol] .symbol-art { animation:glassTilt 3.6s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes glassTilt { 0%,100% { transform:rotate(-9deg); } 50% { transform:rotate(9deg); } }
.sym.mid [data-category=bakery] .symbol-art { animation:breadWarm 4s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes breadWarm { 0%,100% { transform:scale(.94); } 50% { transform:scale(1.06); } }
.sym.mid [data-category=berry] .symbol-art { animation:berryPop 2.6s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes berryPop { 0%,100% { transform:translateY(2px) scale(1.04,.96); } 50% { transform:translateY(-7px) scale(.97,1.04); } }
.sym.mid [data-category=candy] .symbol-art { animation:candyWobble 2.8s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes candyWobble { 0%,100% { transform:rotate(-12deg) scale(.96); } 50% { transform:rotate(12deg) scale(1.05); } }
.sym.mid [data-category=citrus] .symbol-art { animation:citrusTurn 7s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes citrusTurn { 0%,100% { transform:rotate(-20deg); } 50% { transform:rotate(30deg); } }
.sym.mid [data-category=creamy] .symbol-art { animation:creamWave 4.8s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes creamWave { 0%,100% { transform:skewX(-5deg) scaleX(.96); } 50% { transform:skewX(5deg) scaleX(1.04); } }
.sym.mid [data-category=dessert] .symbol-art { animation:dessertLift 3.8s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes dessertLift { 0%,100% { transform:translateY(3px) rotate(-3deg); } 50% { transform:translateY(-4px) rotate(3deg); } }
.sym.mid [data-category=drink] .symbol-art { animation:drinkFizz 2.1s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes drinkFizz { 0%,100% { transform:translateY(1px) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } }
.sym.mid [data-category=floral] .symbol-art { animation:flowerBloom 5s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes flowerBloom { 0%,100% { transform:rotate(-6deg) scale(.88); } 50% { transform:rotate(6deg) scale(1.08); } }
.sym.mid [data-category=fresh] .symbol-art { animation:freshSweep 3.4s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes freshSweep { 0%,100% { transform:translateX(-5px) rotate(-4deg); } 50% { transform:translateX(5px) rotate(4deg); } }
.sym.mid [data-category=fruit] .symbol-art { animation:fruitRock 3.2s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes fruitRock { 0%,100% { transform:rotate(-8deg) translateY(2px); } 50% { transform:rotate(8deg) translateY(-2px); } }
.sym.mid [data-category=herbal] .symbol-art { animation:herbSway 4.3s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes herbSway { 0%,100% { transform:skewX(-8deg) rotate(-5deg); } 50% { transform:skewX(8deg) rotate(5deg); } }
.sym.mid [data-category=ice] .symbol-art { animation:iceShiver 0.8s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes iceShiver { 0%,100% { transform:translate(-1px,1px) rotate(-1deg); } 50% { transform:translate(1px,-1px) rotate(1deg); } }
.sym.mid [data-category=other] .symbol-art { animation:prismFlip 5.5s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes prismFlip { 0%,100% { transform:perspective(200px) rotateY(-25deg) rotate(-5deg); } 50% { transform:perspective(200px) rotateY(25deg) rotate(5deg); } }
.sym.mid [data-category=spice] .symbol-art { animation:spiceShake 1.4s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes spiceShake { 0%,100% { transform:translateX(-3px) rotate(-5deg); } 50% { transform:translateX(3px) rotate(5deg); } }
.sym.mid [data-category=taste_fresh] .symbol-art { animation:coolLift 4.6s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes coolLift { 0%,100% { transform:translateY(5px) scale(.97); } 50% { transform:translateY(-6px) scale(1.03); } }
.sym.mid [data-category=taste_sour] .symbol-art { animation:sourPucker 2.4s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes sourPucker { 0%,100% { transform:scale(1.1,.9) rotate(-3deg); } 50% { transform:scale(.9,1.1) rotate(3deg); } }
.sym.mid [data-category=taste_strong] .symbol-art { animation:strongPulse 1.8s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes strongPulse { 0%,100% { transform:scale(.92); } 50% { transform:scale(1.1); } }
.sym.mid [data-category=taste_sweet] .symbol-art { animation:sweetRoll 4.2s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes sweetRoll { 0%,100% { transform:rotate(-8deg) translateX(-3px) scale(.98); } 50% { transform:rotate(8deg) translateX(3px) scale(1.04); } }
.sym.mid [data-category=tropical] .symbol-art { animation:tropicalDance 3.7s ease-in-out infinite; transform-origin:50% 65%; }
@keyframes tropicalDance { 0%,100% { transform:translate(-4px,2px) rotate(-9deg); } 50% { transform:translate(4px,-5px) rotate(9deg); } }
.sym.mid [data-category=citrus]::after,.sym.mid [data-category=taste_sour]::after { border:1px dashed var(--symbol-color); animation:symbolOrbit 6s linear infinite; }
.sym.mid [data-category=ice]::before { animation:iceGleam 2.4s steps(3,end) infinite; }
@keyframes iceGleam { 0%,100% { opacity:.3; } 50% { opacity:1; transform:scale(1.12); } }
.sym.mid [data-category=candy] .symbol-glints::before,.sym.mid [data-category=dessert] .symbol-glints::after { animation:symbolSparkle 2.3s ease-in-out infinite; }
/* A shared opacity envelope softens every tier's entrance and exit. */
.celebration-scene,.celebration-reels { position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.celebration-scene { z-index:5; overflow:hidden; }
.celebration-reels { z-index:3; }
.machine:has(.has-description) .celebration-scene,.machine:has(.has-description) .celebration-reels { visibility:hidden; }
.machine .win-display,.machine .sym.mid { transition:box-shadow 1.1s ease,border-color 1.1s ease; }
.machine.is-winning .win-display { animation:none; box-shadow:0 0 22px color-mix(in srgb,var(--win) 65%,transparent),0 0 48px color-mix(in srgb,var(--win) 35%,transparent),inset 0 0 25px color-mix(in srgb,var(--win) 30%,transparent); }
.machine.is-winning .sym.mid>.flavor-symbol { animation:none; }
.machine.is-winning .sym.mid .flavor-symbol::before { animation:symbolAura 2.8s ease-in-out infinite; background:radial-gradient(ellipse,color-mix(in srgb,var(--symbol-color) 65%,transparent),transparent 70%); }
.machine.is-winning .sym.mid .flavor-symbol::after { animation:none; border:0; }
.machine.is-winning .machine-title { animation:none; }
.machine::after { transition:box-shadow 1.2s ease; }
.machine.is-winning::after { animation:cabinetBreathe 4s ease-in-out infinite; }
.machine .marquee i,.machine .cabinet-rail i { transition:filter 1.2s ease; }
.machine.is-winning .marquee i,.machine.is-winning .cabinet-rail i { filter:brightness(1.35); }
.machine.is-winning .marquee i::before,.machine.is-winning .cabinet-rail i::before { animation:bulbOrbit 6s linear infinite; animation-delay:calc(var(--phase)*-100ms); }
.machine.is-winning .marquee i::after,.machine.is-winning .cabinet-rail i::after { background:radial-gradient(circle,#fff5bd99 0,#ffc35766 20%,#ffad3433 42%,transparent 70%); animation:bulbHalo 6s linear infinite; animation-delay:calc(var(--phase)*-100ms); }
/* Restored finale layers: paint the glow once, pulse it on the compositor. */
.win-display,.machine-title { position:relative; }
.restored-win-glow { position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.restored-win-glow i { position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 22px var(--win),0 0 44px color-mix(in srgb,var(--win) 50%,transparent),inset 0 0 20px color-mix(in srgb,var(--win) 35%,transparent); animation:restoredGlow 1.8s ease-in-out infinite; }
.flavor-symbol>.restored-win-glow { inset:-12%; z-index:-1; border-radius:50%; }
.flavor-symbol>.restored-win-glow i { background:radial-gradient(ellipse,var(--win),transparent 68%); box-shadow:none; animation:auraWin 1.7s ease-in-out infinite; }
.machine-title>.restored-win-glow { inset:4px -8px; border-radius:50%; }
.machine-title>.restored-win-glow i { box-shadow:none; background:radial-gradient(ellipse,color-mix(in srgb,var(--win) 50%,transparent),transparent 70%); }
@keyframes restoredGlow { 0%,100% { opacity:.25; transform:scale(.98); } 50% { opacity:.85; transform:scale(1.025); } }
.machine.is-winning .sym.mid>.flavor-symbol { animation:restoredSymbolWin 2.4s ease-in-out 3; }
@keyframes restoredSymbolWin { 0%,100% { transform:none; } 50% { transform:translateY(-3px) scale(1.08); } }
.machine.is-winning .sym.mid .symbol-glints::before,.machine.is-winning .sym.mid .symbol-glints::after { animation:symbolSparkle 1.6s ease-in-out infinite; }
.machine.is-winning .sym.mid .flavor-symbol::after { border:1px solid var(--win); border-top-color:transparent; border-bottom-color:transparent; animation:symbolOrbit 2.5s linear infinite; }
.machine.is-winning .marquee i,.machine.is-winning .cabinet-rail i { filter:none; }
.machine.is-winning .marquee i::before,.machine.is-winning .cabinet-rail i::before { animation:bulbFinale 1.8s ease-in-out infinite; animation-delay:calc(var(--pair)*-900ms + var(--distance)*-45ms); }
.machine.is-winning .marquee i::after,.machine.is-winning .cabinet-rail i::after { animation:bulbFinaleHalo 1.8s ease-in-out infinite; animation-delay:calc(var(--pair)*-900ms + var(--distance)*-45ms); }
.machine.is-winning:is([data-rarity=legendary],[data-rarity=mythic]) .machine-title { animation:restoredTitle 2.5s ease-in-out 3; }
@keyframes restoredTitle { 0%,100% { transform:none; } 50% { transform:scale(1.035); } }
@keyframes mythicAura { 0%,100% { opacity:.1; transform:scale(1); } 50% { opacity:.6; transform:scale(.98); } }
.win-projectors,.paper-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.win-projector { position:absolute; bottom:7%; left:8%; width:22px; height:15px; }
.win-projector:nth-child(even) { left:auto; right:8%; }
.projector-head { position:absolute; inset:0; border:1px solid #dfbd79; border-radius:5px 5px 3px 3px; background:linear-gradient(#ffedb1,#86714a 30%,#21182a 65%); box-shadow:0 -4px 12px var(--win); }
.projector-beam { position:absolute; bottom:7px; left:50%; width:145px; height:340px; margin-left:-72px; transform-origin:50% 100%; clip-path:polygon(0 0,100% 0,54% 100%,46% 100%); background:linear-gradient(0deg,color-mix(in srgb,var(--win) 75%,transparent),color-mix(in srgb,var(--win) 18%,transparent) 70%,transparent); animation:projectorSweep 4.8s ease-in-out infinite alternate; animation-delay:calc(var(--lamp)*-1.3s); }
.projectors-large .win-projector { width:30px; height:20px; }
.projectors-large .win-projector:nth-child(3) { left:28%; bottom:5%; }
.projectors-large .win-projector:nth-child(4) { right:28%; bottom:5%; }
.projectors-large .projector-beam { width:220px; height:510px; margin-left:-110px; }
@keyframes projectorSweep { from { transform:rotate(-26deg); opacity:.35; } to { transform:rotate(27deg); opacity:.85; } }
.paper-confetti i { position:absolute; top:-15px; width:6px; height:11px; opacity:0; animation:paperFall 3.8s linear infinite; animation-delay:calc(var(--piece)*170ms); }
@keyframes paperFall { 0% { opacity:0; transform:translate3d(0,0,0) rotate(0); } 12%,75% { opacity:.9; } 100% { opacity:0; transform:translate3d(var(--drift),650px,0) rotate(540deg); } }
/* Persistent result accents; transient layers stay inside the shared fade. */
.jackpot-crown { position:absolute; width:42px; height:25px; left:calc(50% - 21px); top:-22px; pointer-events:none; animation:crownForm .9s ease-out both; }
.jackpot-crown svg { width:100%; height:100%; filter:drop-shadow(0 0 5px #ffcf66); }
@keyframes crownForm { from { opacity:0; transform:translateY(8px) scale(.7); } to { opacity:1; transform:none; } }
.ice-blue-glints { position:absolute; inset:3px; display:block; text-align:left; pointer-events:none; z-index:3; }
.ice-blue-glints i { position:absolute; inset:0; animation:iceEdgeTravel 4.8s linear infinite; }
.ice-blue-glints i::before { content:''; position:absolute; top:0; left:0; display:block; width:9px; height:9px; background:#b7f2ff; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
.ice-blue-glints i:nth-child(2) { animation-delay:-2.4s; }
@keyframes iceEdgeTravel { 0%,100% { transform:translate(0,0); opacity:.3; } 25% { transform:translate(calc(100% - 9px),0); opacity:1; } 50% { transform:translate(calc(100% - 9px),calc(100% - 9px)); opacity:.5; } 75% { transform:translate(0,calc(100% - 9px)); opacity:1; } }
.rare-payline-sweep { position:absolute; left:0; top:50%; width:35%; height:3px; background:linear-gradient(90deg,transparent,#91eaff,#fff); box-shadow:0 0 10px #81dfff; opacity:0; animation:paylineSweep 2s .25s ease-in-out 2; }
@keyframes paylineSweep { 0% { opacity:0; transform:translateX(-100%); } 30%,65% { opacity:1; } 100% { opacity:0; transform:translateX(300%); } }
.legendary-reel-flashes { position:absolute; inset:23px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.legendary-reel-flashes i { background:radial-gradient(ellipse,#ffe69c77,transparent 75%); opacity:0; animation:goldReelFlash .8s ease-in-out both; animation-delay:calc(.35s + var(--reel)*.45s); }
@keyframes goldReelFlash { 0%,100% { opacity:0; transform:scale(.9); } 50% { opacity:1; transform:scale(1); } }
.legendary-cabinet-wave { position:absolute; inset:-10px; border-radius:15px; box-shadow:inset 0 0 28px #ffdc85,0 0 20px #ffd169; opacity:0; animation:goldReelFlash 1.4s 1.7s ease-in-out both; }
.golden-light-curtain { position:absolute; inset:0; overflow:hidden; opacity:.45; }
.golden-light-curtain i { position:absolute; top:-35%; left:calc(5% + var(--trail)*11%); width:2px; height:35%; background:linear-gradient(transparent,#ffe59a,transparent); opacity:0; animation:goldTrail 3.8s linear infinite; animation-delay:calc(var(--trail)*.35s); }
@keyframes goldTrail { 0% { opacity:0; transform:translateY(0); } 30%,70% { opacity:.8; } 100% { opacity:0; transform:translateY(400%); } }
.persistent-win-effect { pointer-events:none; z-index:4; animation:persistentArrival 1.1s ease-out both; }
@keyframes persistentArrival { from { opacity:0; } to { opacity:1; } }
.epic-projectors { --win:#bc65ff; }
.epic-projectors .projector-beam { height:390px; width:165px; margin-left:-82px; animation-duration:7s; }
.epic-projectors .projector-head { border-color:#d6a2ff; background:linear-gradient(#f2d9ff,#8355a8 35%,#241132 70%); }
.machine:has(.has-description) .persistent-win-effect { visibility:hidden; }
.epic-vortex,.epic-shard-burst { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.epic-vortex i { position:absolute; width:80%; height:42%; left:10%; top:28%; border:2px solid #cf85ff; border-left-color:transparent; border-right-color:transparent; border-radius:50%; opacity:0; animation:epicVortex 3s ease-in-out 2; }
.epic-vortex i:nth-child(2) { animation-delay:.45s; animation-direction:reverse; }
@keyframes epicVortex { 0%,100% { opacity:0; transform:rotate(-35deg) scale(.6); } 40% { opacity:.75; transform:rotate(25deg) scale(1); } 80% { opacity:.3; transform:rotate(90deg) scale(1.3); } }
.epic-shard-burst i { position:absolute; left:calc(10% + var(--shard)*16%); top:52%; width:7px; height:22px; background:linear-gradient(#fff0ff,#bd59ff,transparent); clip-path:polygon(50% 0,100% 45%,50% 100%,0 55%); opacity:0; animation:epicShard 2.8s ease-out 2; animation-delay:calc(.2s + var(--shard)*.13s); }
@keyframes epicShard { 0% { opacity:0; transform:translateY(20px) rotate(-20deg) scale(.3); } 25% { opacity:.9; } 100% { opacity:0; transform:translateY(-160px) rotate(110deg) scale(.7); } }
.machine[data-rarity=legendary] .win-display { background:linear-gradient(135deg,#562408,#221019 70%); border-color:#ffc16c; text-shadow:0 0 12px #ff7d22; }
.machine[data-rarity=legendary] .win-coin { background:linear-gradient(120deg,#fff1b4,#ffb63a 45%,#cb611c); border-color:#ffc271; }
.machine[data-rarity=legendary] .rarity-extras[data-effect-tier=legendary] i { background:linear-gradient(90deg,transparent,#ff9b3255,transparent); }
.legendary-embers { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.legendary-embers i { position:absolute; bottom:9%; left:4%; width:4px; height:13px; border-radius:50%; background:linear-gradient(#fff1b0,#ff972b,transparent); box-shadow:0 0 7px #ff8124; opacity:0; animation:legendaryEmberRise 5s linear infinite; animation-delay:calc(var(--ember)*-.625s); }
.legendary-embers i:nth-child(even) { left:auto; right:4%; }
@keyframes legendaryEmberRise { 0% { opacity:0; transform:translateY(0) scale(.6); } 18%,65% { opacity:.85; } 100% { opacity:0; transform:translateY(-460px) scale(.25); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; }.component.unfold,.spin-actions.unfold { opacity:1; }.is-spinning .reel:not(.landed) .reel-window>.sym { visibility:visible; }.machine .marquee i::before,.machine .cabinet-rail i::before { opacity:.85; }.machine .marquee i::after,.machine .cabinet-rail i::after { opacity:.4; }.symbol-glints::before,.symbol-glints::after { opacity:0; } }

/* Keep each flavor's four actions together in a compact two-column block. */
.comp-head > .comp-actions { display:grid; grid-template-columns:40px minmax(0,1fr); gap:6px; width:max-content; max-width:100%; flex:0 0 auto; align-self:flex-start; }
.comp-actions .btn.small { min-height:40px; margin:0; padding:7px 10px; font-size:13px; line-height:1.2; }
.comp-actions .comp-action-icon { width:40px; padding:0; font-size:18px; }
.comp-actions [data-sub],.comp-actions [data-mark=excluded] { text-align:left; white-space:normal; }