/* Inspector Sprocket · Midnight Missions — presentation layer.
   Fixed 1280×720 (landscape) or 720×1280 (portrait) stage scaled to fit the viewport, the same way as Smash N Grab
   and Fire 7s. Brushed-steel Sprocket cabinet with gears, deep purple reels, a night city behind, gold for wins,
   H.E.X. red for the bonus family. */

:root {
  --gold-1: #fff3c4; --gold-2: #ffd35b; --gold-3: #d9962c; --gold-4: #8a5210; --gold-5: #4a2a06;
  --steel-1: #f4f7fb; --steel-2: #c3ccd8; --steel-3: #7f8da0; --steel-4: #3a4250; --steel-5: #1a1f28;
  --night-0: #05040f; --night-1: #0b0820; --night-2: #150f33; --night-3: #22184a;
  --purple-1: #c9a4ff; --purple-2: #7a4fd6; --purple-3: #3d2478; --purple-4: #26104c; --purple-5: #170a30;
  --mad: #ff2e55; --mad-2: #9a0c28; --green: #46e07a; --pink: #ff4fb3; --blue: #4aa8ff; --orange: #ff8a2a; --silver: #dfe6ee;
  --display: Impact, 'Arial Narrow Bold', 'Arial Black', Haettenschweiler, sans-serif;
  --cond: Bahnschrift, 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', Arial, sans-serif;
  --body: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cell: 98px; --colw: 116px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night-0); color: #f1eefb; font-family: var(--body); overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
[hidden] { display: none !important; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: var(--night-0); }
#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: center center; overflow: hidden; user-select: none; -webkit-user-select: none; font-family: var(--cond); font-stretch: condensed; }
#stage.portrait { width: 720px; height: 1280px; }

/* ---------- background ---------- */
.bg { position: absolute; inset: 0; overflow: hidden; background: var(--night-0); }
.bg .layer { position: absolute; inset: -3%; background-size: cover; background-position: center 55%; transition: opacity 1.2s ease, filter 1.2s ease; }
.bg .city { background-image: url('../art/city.png'); filter: brightness(.42) saturate(.75) contrast(1.08); animation: drift 48s ease-in-out infinite alternate; }
.bg .city::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0820cc, #1a0f4a55 40%, #05040f 100%), radial-gradient(ellipse at 50% 60%, transparent 40%, #05040f 100%); mix-blend-mode: multiply; }
.bg .lair { background-image: url('../art/lair.png'); background-position: center 45%; opacity: 0; filter: brightness(.7); }
#stage.scene .bg .lair { opacity: 1; }
#stage.scene .bg .city { opacity: 0; }
#stage.penny .bg .city, #stage.dash .bg .city { filter: brightness(.5) saturate(1) hue-rotate(-10deg); }
.beam { position: absolute; left: 50%; bottom: -10%; width: 90px; height: 900px; transform-origin: 50% 100%; background: linear-gradient(180deg, transparent, #c9a4ff10 40%, #ffffff26 100%); filter: blur(6px); pointer-events: none; mix-blend-mode: screen; }
.beam.a { transform: translateX(-380px) rotate(-30deg); animation: beamA 17s ease-in-out infinite alternate; }
.beam.b { transform: translateX(380px) rotate(28deg); animation: beamB 21s ease-in-out infinite alternate; }
@keyframes beamA { to { transform: translateX(-380px) rotate(22deg); } }
@keyframes beamB { to { transform: translateX(380px) rotate(-26deg); } }
.haze { position: absolute; inset: -20%; background: radial-gradient(ellipse at 20% 70%, #7a4fd614, transparent 45%), radial-gradient(ellipse at 75% 30%, #4aa8ff10, transparent 40%); pointer-events: none; mix-blend-mode: screen; }
.haze.a { animation: hazeA 38s linear infinite; }
.haze.b { animation: hazeB 52s linear infinite; opacity: .7; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 42%, #05040fcc 100%), linear-gradient(180deg, #05040f88, transparent 18%, transparent 78%, #05040fdd); pointer-events: none; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.flash i { position: absolute; top: -20%; bottom: -20%; width: 34%; filter: blur(30px); }
.flash i:first-child { background: linear-gradient(90deg, transparent, #ffd35b99, transparent); left: -40%; }
.flash i:last-child { background: linear-gradient(90deg, transparent, #ffb34799, transparent); left: 110%; }
.flash.red i:first-child { background: linear-gradient(90deg, transparent, #ff2e5599, transparent); }
.flash.red i:last-child { background: linear-gradient(90deg, transparent, #ff6a8899, transparent); }
.flash.blue i:first-child { background: linear-gradient(90deg, transparent, #8fe3ff99, transparent); }
.flash.blue i:last-child { background: linear-gradient(90deg, transparent, #4aa8ff99, transparent); }
.flash.on { opacity: 1; animation: flashFade 2.6s ease-out forwards; }
.flash.on i:first-child { animation: sweepR 2.6s cubic-bezier(.3, 0, .2, 1) forwards; }
.flash.on i:last-child { animation: sweepL 2.6s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes drift { to { transform: translate3d(1.5%, -1%, 0) scale(1.03); } }
@keyframes hazeA { to { transform: translate3d(12%, -4%, 0); } }
@keyframes hazeB { from { transform: translate3d(8%, 3%, 0); } to { transform: translate3d(-10%, -2%, 0); } }
@keyframes sweepR { 0% { left: -40%; } 100% { left: 130%; } }
@keyframes sweepL { 0% { left: 110%; } 100% { left: -60%; } }
@keyframes flashFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- symbols ---------- */
.sym { position: relative; display: inline-block; width: 100%; height: 100%; background-image: url('../art/symbols.png'); background-repeat: no-repeat; background-size: 300% 200%; flex-shrink: 0; }
.sym[data-id="wild"] { background-position: 0% 0%; }
.sym[data-id="gadget"] { background-image: url('../art/sym/sprocket.svg'); background-size: contain; background-position: center; }
.sym[data-id="car"] { background-position: 100% 0%; }
.sym[data-id="file"] { background-position: 0% 100%; }
.sym[data-id="safe"] { background-position: 50% 100%; }
.sym[data-id="cuffs"] { background-position: 100% 100%; }
.sym[data-id="bonus"], .mad-sym { background-image: url('../art/sym/hex.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; }
.mad-sym { display: inline-block; width: 100%; height: 100%; }
.sym.letter { background: none; display: grid; place-items: center; font-family: var(--display); font-size: 74px; line-height: 1; letter-spacing: 0; -webkit-text-stroke: 1.5px #ffffffaa; text-shadow: 0 5px 0 #0a0616, 0 8px 12px #000a; }
.sym.letter[data-id="A"] { color: #ff3d5a; }
.sym.letter[data-id="K"] { color: #ffc72c; }
.sym.letter[data-id="Q"] { color: #4fe06a; }
.sym.letter[data-id="J"] { color: #4aa0ff; }

/* ---------- bonus logos (text-built) ---------- */
.blogo { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9; font-family: var(--display); text-align: center; white-space: nowrap; filter: drop-shadow(0 3px 4px #000c); }
.blogo small { font-family: var(--cond); font-weight: 700; letter-spacing: 2px; font-size: .34em; color: #fff; text-shadow: 0 1px 0 #000; }
.blogo .a, .blogo .b { display: block; }
.blogo { font-size: 20px; }
.blogo.big { font-size: 44px; }
.blogo.card { font-size: 27px; }
.blogo.t0 .a { font-family: Consolas, 'Lucida Console', monospace; font-weight: 700; letter-spacing: 3px; color: #46e07a; background: #04160a; padding: .04em .18em; border-radius: .12em; border: .04em solid #1b5a30; text-shadow: 0 0 .25em #46e07a, 0 0 .5em #46e07a66; font-size: .92em; }
.blogo.t0 .b { color: #ff9a2a; font-size: 1.1em; letter-spacing: 1px; -webkit-text-stroke: .02em #6b2a00; text-shadow: 0 .06em 0 #6b2a00; margin-top: .05em; }
.blogo.t1 .a { color: #ff2e55; font-style: italic; letter-spacing: 1px; -webkit-text-stroke: .025em #fff; text-shadow: 0 .06em 0 #4a0212, 0 .1em .2em #000; }
.blogo.t1 .b { color: #5ab8ff; font-size: .8em; letter-spacing: 3px; -webkit-text-stroke: .02em #fff; text-shadow: 0 .06em 0 #0a2a5a; }
.blogo.t2 .a { color: #ff4fb3; font-size: 1.25em; letter-spacing: 1px; -webkit-text-stroke: .02em #fff; text-shadow: 0 .06em 0 #6b0a45, 0 .1em .2em #000; font-style: italic; }
.blogo.t2 .b { color: #fff; font-size: .68em; letter-spacing: 4px; text-shadow: 0 .06em 0 #3a1a6a; }
.blogo.t3 .a { background: linear-gradient(180deg, #ffffff, #c3ccd8 45%, #6d7b8e 55%, #eef2f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; font-style: italic; filter: drop-shadow(0 .06em 0 #1a1f28); }
.blogo.t3 .b { color: #4aa8ff; font-size: .68em; letter-spacing: 3px; text-shadow: 0 .06em 0 #0a2a5a; }
.blogo.t4 .a { color: #ff2e55; letter-spacing: 2px; -webkit-text-stroke: .02em #fff; text-shadow: 0 .06em 0 #4a0212, 0 .1em .2em #000; }
.blogo.t4 .b { background: linear-gradient(180deg, #fff6c8, #ffd35b 45%, #b8741a 60%, #ffe9a6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.15em; letter-spacing: 1px; filter: drop-shadow(0 .06em 0 #5a2a04); }
.blogo.mystery .a { color: #c9a4ff; letter-spacing: 2px; -webkit-text-stroke: .02em #fff; text-shadow: 0 .06em 0 #2a1060; }
.blogo.mystery .b { color: #ffd35b; font-size: .8em; letter-spacing: 4px; }

/* ---------- logo ---------- */
.logo { position: absolute; left: 14px; top: 6px; width: 292px; text-align: center; filter: drop-shadow(0 10px 14px #000c); z-index: 3; pointer-events: none; }
.logo::before { content: ''; position: absolute; left: 50%; top: 45%; width: 260px; height: 120px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, #7a4fd644, transparent 65%); z-index: -1; animation: breatheGlow 3s ease-in-out infinite; }
@keyframes breatheGlow { 50% { opacity: .5; transform: translate(-50%, -50%) scale(1.1); } }
.logo-kicker { font-size: 10px; letter-spacing: 6px; color: #c9a4ff; font-weight: 700; text-shadow: 0 1px 2px #000; margin-left: 6px; }
.logo-main { display: flex; flex-direction: column; align-items: center; line-height: .86; margin-top: 2px; transform: skewX(-5deg); }
.logo-main .l1 { font-family: var(--display); font-size: 30px; letter-spacing: 6px; background: linear-gradient(180deg, #ffffff, #d7e0ea 40%, #7f8da0 55%, #eef2f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #1a1f28) drop-shadow(0 4px 6px #000c); }
.logo-main .l2 { font-family: var(--display); font-size: 62px; letter-spacing: 2px; background: linear-gradient(180deg, #fff9d6 0%, #ffe27a 35%, #f3ad2b 55%, #b76a10 75%, #ffd86a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #6b3d05) drop-shadow(0 6px 0 #3a2002) drop-shadow(0 10px 12px #000c); }
.logo-sub { margin-top: 6px; font-size: 11px; letter-spacing: 4.5px; color: #c9a4ff; font-weight: 700; text-shadow: 0 0 10px #7a4fd6, 0 1px 2px #000; animation: neon 3.2s ease-in-out infinite; }
@keyframes neon { 50% { text-shadow: 0 0 18px #c9a4ff, 0 1px 2px #000; color: #ead9ff; } }
.logo-sub::before, .logo-sub::after { content: ''; display: inline-block; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, #c9a4ff99); vertical-align: middle; margin: 0 8px; }
.logo-sub::after { background: linear-gradient(90deg, #c9a4ff99, transparent); }
.logo.big { position: static; width: 620px; filter: drop-shadow(0 14px 22px #000); }
.logo.big::before { width: 640px; height: 260px; }
.logo.big .logo-kicker { font-size: 16px; letter-spacing: 12px; }
.logo.big .logo-main .l1 { font-size: 60px; letter-spacing: 12px; }
.logo.big .logo-main .l2 { font-size: 138px; }
.logo.big .logo-sub { font-size: 17px; margin-top: 16px; letter-spacing: 7px; }
.portrait .logo { left: 50%; top: 10px; width: 460px; transform: translateX(-50%); }
.portrait .logo-main .l2 { font-size: 78px; }

/* ---------- top nav ---------- */
.topnav { position: absolute; right: 18px; top: 16px; display: flex; gap: 10px; z-index: 5; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #3a4250, #1a1f28); border: 1px solid #c3ccd866; box-shadow: 0 4px 10px #0009, inset 0 1px 0 #ffffff33; color: #eef2f7; transition: transform .15s, filter .15s; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover:not(:disabled) { filter: brightness(1.25); transform: translateY(-1px); }
.icon-btn:active:not(:disabled) { transform: translateY(1px); }
.icon-btn:disabled { opacity: .4; }
#btn-sound .mute { display: none; }
#btn-sound.muted .wave { display: none; }
#btn-sound.muted .mute { display: block; }
.portrait .topnav { right: 14px; top: 14px; }

/* ---------- the ladder (top centre) ---------- */
.ladder { position: absolute; left: 318px; top: 12px; width: 644px; height: 80px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; z-index: 3; }
.rung { --glow: #ffd35b; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; background: linear-gradient(160deg, #2a3140, #12161e 70%); border: 2px solid #8a94a4; box-shadow: 0 0 0 1px #0a0d12, 0 6px 14px #000a, inset 0 0 0 2px #00000045, inset 0 1px 0 #ffffff44; overflow: hidden; transition: transform .2s, box-shadow .4s, filter .4s; padding: 2px 4px; }
.rung .blogo { font-size: 15px; }
.rung small.price { font-size: 9px; letter-spacing: 1.5px; color: #c3ccd8; font-weight: 700; }
.rung .num { position: absolute; left: 5px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #0a0d12; border: 1px solid #8a94a4; font-size: 9px; font-weight: 700; color: #c3ccd8; display: grid; place-items: center; }
.rung.lit { border-color: var(--gold-2); box-shadow: 0 0 0 1px #3b2708, 0 6px 14px #000a, 0 0 26px var(--glow), inset 0 0 0 2px #00000045, inset 0 1px 0 #ffffff55; transform: scale(1.04); }
.rung.lit .num { background: var(--gold-2); color: #2b1a04; border-color: var(--gold-1); }
.rung.out { filter: saturate(.2) brightness(.45); }
.rung.out::after { content: '✕'; position: absolute; right: 6px; top: 3px; color: #ff2e55; font-size: 14px; font-weight: 700; }
.rung.hit { animation: rungHit .5s ease-in-out 6 alternate; }
@keyframes rungHit { to { filter: brightness(1.8); box-shadow: 0 0 34px var(--glow); } }
.rung .bulbs { position: absolute; inset: 2px; border-radius: 8px; pointer-events: none; background-image: radial-gradient(circle, #fff6c8 0 1.3px, transparent 2px); background-size: 12px 12px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; opacity: .3; }
.rung.lit .bulbs, .rung.hit .bulbs { animation: chase .3s steps(2) infinite; opacity: 1; }
@keyframes chase { to { background-position: 6px 6px; } }
.portrait .ladder { left: 12px; top: 148px; width: 696px; height: 70px; gap: 5px; }
.portrait .rung .blogo { font-size: 13px; }

/* ---------- cabinet ---------- */
.cabinet { position: absolute; left: 318px; top: 98px; width: 644px; z-index: 2; }
.cabinet-title { display: flex; justify-content: space-between; padding: 0 12px 5px; font-size: 11px; letter-spacing: 2.2px; font-weight: 700; color: #d7e0ea; text-shadow: 0 1px 2px #000; }
.cabinet-title span:first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); margin-right: 8px; vertical-align: 1px; animation: blink 2.4s infinite; }
#stage.penny .cabinet-title span:first-child::before { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
#stage.dash .cabinet-title span:first-child::before { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
@keyframes blink { 50% { opacity: .35; } }
.reels { position: relative; height: 436px; padding: 13px; border-radius: 16px; display: grid; grid-template-columns: repeat(5, var(--colw)); gap: 6px; justify-content: center; align-content: start;
  background: linear-gradient(160deg, #ffffff 0%, #c3ccd8 10%, #5b6675 26%, #1d222b 46%, #8f9cad 64%, #eef2f7 80%, #4a5462 100%);
  box-shadow: 0 0 0 2px #0a0d12, 0 0 0 4px #c3ccd855, 0 30px 60px #000c, 0 0 90px #7a4fd62a, inset 0 0 0 1px #ffffff88; transition: background 1s, box-shadow 1s; }
.reels::before { content: ''; position: absolute; inset: 11px; border-radius: 8px; background: #120826; box-shadow: inset 0 0 0 1px #3d2478, inset 0 0 40px #000; }
.reels::after { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(180deg, #ffffff33, transparent 30%); }
/* gears in the frame corners */
.reels .gear { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #eef2f7, #7f8da0 45%, #3a4250 70%); box-shadow: 0 3px 6px #000a; z-index: 1; }
#stage.penny .reels { box-shadow: 0 0 0 2px #0a0d12, 0 0 0 4px #ff4fb366, 0 30px 60px #000c, 0 0 110px #ff4fb355, inset 0 0 0 1px #ffffff88; }
#stage.dash .reels { box-shadow: 0 0 0 2px #0a0d12, 0 0 0 4px #4aa8ff66, 0 30px 60px #000c, 0 0 110px #4aa8ff55, inset 0 0 0 1px #ffffff88; }
.reel { position: relative; height: 410px; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #1c0d3a 0%, #2b1656 50%, #1c0d3a 100%); box-shadow: inset 0 0 0 1px #4a2d8a, inset 0 18px 20px -14px #000, inset 0 -18px 20px -14px #000; transition: background .8s; }
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 var(--cell), #00000055 var(--cell) calc(var(--cell) + 6px)); background-position: 0 calc(var(--cell) - 3px); opacity: .9; }
.strip { position: absolute; left: 0; right: 0; top: 0; transform: translateY(calc(var(--cell) * -1)); will-change: transform; }
.reel.spinning .strip { filter: blur(1.4px); }
.reel.turbo.spinning .strip { filter: blur(3px); }
.cell { position: relative; height: var(--cell); display: flex; align-items: center; justify-content: center; }
.cell .sym { height: 94%; width: auto; aspect-ratio: 1 / 1; max-width: 96%; filter: drop-shadow(0 6px 4px #0008); transition: transform .25s, filter .25s; }
.cell .sym.letter { font-size: calc(var(--cell) * .74); }
.cell .tag { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%) rotate(-5deg); font-family: var(--display); font-size: 11px; letter-spacing: 1.5px; color: #fff; padding: 1px 7px; border-radius: 4px; text-shadow: 0 1px 0 #000, 0 0 4px #000; pointer-events: none; white-space: nowrap; }
.cell .tag.wild { color: #ffe08a; text-shadow: 0 2px 0 #7a1d1d, 0 -1px 0 #7a1d1d, 1px 0 0 #7a1d1d, -1px 0 0 #7a1d1d, 0 4px 8px #000; }
.reel.spinning .cell .tag { opacity: 0; }
.reel.antic { box-shadow: inset 0 0 0 3px #ff2e55, inset 0 0 40px #ff2e5566; animation: anticGlow .5s ease-in-out infinite alternate; }
@keyframes anticGlow { to { box-shadow: inset 0 0 0 3px #fff0b3, inset 0 0 60px #ff2e55aa; } }
.cell.land .sym { animation: land .45s cubic-bezier(.2, 1.4, .4, 1); }
.cell.land::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, #fff8, transparent 65%); animation: flashOut .5s ease-out forwards; pointer-events: none; }
@keyframes land { 0% { transform: scale(1.35); filter: brightness(2) drop-shadow(0 0 20px #fff); } 100% { transform: scale(1); } }
@keyframes flashOut { to { opacity: 0; transform: scale(1.6); } }
.reels.showing .cell:not(.hit) .sym { filter: brightness(.38) saturate(.6) drop-shadow(0 6px 4px #0008); }
.reels.showing .cell:not(.hit) .tag { opacity: .3; }
.cell.hit .sym { animation: winPulse .7s ease-in-out infinite alternate; }
.cell.hit::before { content: ''; position: absolute; inset: 3px; border-radius: 8px; box-shadow: inset 0 0 0 3px #ffe9a6, 0 0 22px #ffd86a; animation: hitRing .7s ease-in-out infinite alternate; pointer-events: none; z-index: 1; }
@keyframes winPulse { to { transform: scale(1.1); filter: brightness(1.3) drop-shadow(0 0 16px #ffd86a); } }
@keyframes hitRing { to { box-shadow: inset 0 0 0 3px #fff, 0 0 34px #ffd86a; } }
.cell[data-id="wild"] .sym { animation: wildIdle 2.4s ease-in-out infinite; }
@keyframes wildIdle { 50% { filter: drop-shadow(0 6px 4px #0008) drop-shadow(0 0 12px #ff8a2a99); } }
.cell[data-id="bonus"] .sym { animation: madIdle 2s ease-in-out infinite alternate; }
@keyframes madIdle { to { filter: drop-shadow(0 6px 4px #0008) drop-shadow(0 0 18px #ff2e55aa); } }
.cell[data-id="gadget"] .sym { animation: gadgetIdle 3s ease-in-out infinite alternate; }
@keyframes gadgetIdle { to { filter: drop-shadow(0 6px 4px #0008) drop-shadow(0 0 12px #c3ccd888); } }
.reel.spinning .cell .sym { animation: none !important; }
.glass { position: absolute; inset: 13px; border-radius: 8px; pointer-events: none; background: linear-gradient(100deg, #ffffff10, transparent 30%, transparent 70%, #ffffff08), linear-gradient(180deg, #ffffff14, transparent 12%, transparent 88%, #00000055); z-index: 5; }
#stage.penny .glass::after, #stage.dash .glass::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, #ffffff18 48%, #ffffff30 50%, #ffffff18 52%, transparent 60%); animation: spot 5s ease-in-out infinite; }
@keyframes spot { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.lines-layer { position: absolute; inset: 13px; width: calc(100% - 26px); height: calc(100% - 26px); pointer-events: none; z-index: 3; overflow: visible; }
.lines-layer polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.lines-layer .glow { stroke-width: 12; opacity: .45; filter: blur(2px); }
.lines-layer .core { stroke: #fff; stroke-width: 3; opacity: .9; stroke-dasharray: 2000; animation: lineDraw .8s ease-out; }
@keyframes lineDraw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
/* marks: fixed wilds and car overlays on the reels */
.marks { position: absolute; left: 13px; top: 13px; width: calc(100% - 26px); display: grid; grid-template-columns: repeat(5, var(--colw)); grid-template-rows: repeat(var(--rows), var(--cell)); gap: 6px; justify-content: center; pointer-events: none; z-index: 4; }
.mark { position: relative; border-radius: 8px; opacity: 0; }
.mark.fixed { opacity: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, #3a1c6e, #170a30 75%); box-shadow: inset 0 0 0 3px #ff4fb3, inset 0 0 26px #ff4fb3aa, 0 0 18px #ff4fb388; animation: lockGlow 1.6s ease-in-out infinite alternate; }
@keyframes lockGlow { to { box-shadow: inset 0 0 0 3px #fff, inset 0 0 36px #ff4fb3cc, 0 0 28px #ff4fb3cc; } }
.mark.fixed .sym { height: 88%; width: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 4px #0008); }
.mark.fixed b { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 10px; letter-spacing: 2px; color: #fff; background: #6b0a45dd; border: 1px solid #ff4fb3; padding: 1px 7px; border-radius: 4px; text-shadow: 0 1px 0 #000; }
.mark.car { opacity: 1; display: flex; align-items: flex-end; justify-content: center; }
.mark.car .sym { width: 78%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 0 12px #4aa8ff) drop-shadow(0 6px 6px #000); animation: carBob .8s ease-in-out infinite alternate; }
@keyframes carBob { to { transform: translateY(-4px) rotate(-3deg); } }
.mark.car::before { content: ''; position: absolute; inset: 3px; border-radius: 8px; box-shadow: inset 0 0 0 3px #4aa8ff, 0 0 20px #4aa8ff; animation: hitRing .7s ease-in-out infinite alternate; }
.mark.pop { animation: markPop .55s cubic-bezier(.2, 1.5, .4, 1), lockGlow 1.6s .55s ease-in-out infinite alternate; }
@keyframes markPop { 0% { transform: scale(.6); filter: brightness(2.5); } 100% { transform: scale(1); filter: brightness(1); } }
/* colossal symbol overlay */
.colossal { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #3d2478, #170a30 75%); box-shadow: inset 0 0 0 3px #ffd35b, 0 0 30px #ffd35b88; animation: colossalIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.colossal .sym { height: 92%; width: auto; aspect-ratio: 1; max-width: 92%; filter: drop-shadow(0 10px 10px #000c); }
.colossal .sym.letter { font-size: 200px; }
.colossal b { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) rotate(-4deg); font-family: var(--display); font-size: 16px; letter-spacing: 3px; color: #2b1a04; background: linear-gradient(180deg, #ffe9a6, #d9962c); padding: 2px 12px; border-radius: 5px; box-shadow: 0 3px 6px #000a; }
@keyframes colossalIn { 0% { transform: scale(.4); filter: brightness(2.5); } 100% { transform: scale(1); } }
/* Gear Up modifier splash */
.gogo { position: absolute; inset: 13px; z-index: 8; pointer-events: none; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse at 50% 50%, #1a1038cc, #05040fdd); display: flex; align-items: center; justify-content: center; animation: fadeIn .2s; }
.gogo .arm { position: absolute; left: -20px; top: 50%; height: 34px; transform: translateY(-50%); display: flex; align-items: center; animation: armOut 1.1s cubic-bezier(.2, 1.1, .3, 1) forwards; transform-origin: left center; }
.gogo .seg { display: block; width: 150px; height: 26px; margin-right: -6px; border-radius: 13px; background: linear-gradient(180deg, #ffffff, #c3ccd8 30%, #5b6675 60%, #dfe6ee 100%); box-shadow: 0 4px 8px #000a, inset 0 0 0 1px #ffffff55; }
.gogo .hand { display: block; width: 56px; height: 56px; border-radius: 50% 50% 50% 8px; background: radial-gradient(circle at 40% 35%, #ffffff, #c3ccd8 40%, #5b6675 90%); box-shadow: 0 6px 10px #000a; margin-left: 8px; }
@keyframes armOut { 0% { transform: translateY(-50%) scaleX(.1); opacity: 0; } 25% { opacity: 1; } 65% { transform: translateY(-50%) scaleX(1); } 85% { transform: translateY(-50%) scaleX(1); } 100% { transform: translateY(-50%) scaleX(.1); opacity: 0; } }
.gogo-text { position: relative; text-align: center; animation: gogoText 1.3s ease-out forwards; }
.gogo-text small { display: block; font-size: 16px; letter-spacing: 8px; color: #c9a4ff; font-weight: 700; text-shadow: 0 0 12px #7a4fd6; }
.gogo-text b { display: block; font-family: var(--display); font-size: 70px; line-height: 1; letter-spacing: 3px; background: linear-gradient(180deg, #fff9d6, #ffe27a 40%, #f3ad2b 60%, #b76a10 80%, #ffd86a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #6b3d05) drop-shadow(0 10px 20px #000); transform: skewX(-6deg); }
@keyframes gogoText { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.1); opacity: 1; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
.fx-layer { position: absolute; inset: 13px; pointer-events: none; z-index: 7; }
.message { margin: 8px 12px 0; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: 2.4px; font-weight: 700; color: #e9e2ff; text-shadow: 0 1px 3px #000; background: linear-gradient(90deg, transparent, #0b0820d9 20%, #0b0820d9 80%, transparent); transition: color .3s; white-space: nowrap; overflow: hidden; }
.message.excite { color: #fff; animation: msgPulse .6s ease-in-out infinite alternate; }
@keyframes msgPulse { to { text-shadow: 0 0 14px #ffd86a, 0 1px 3px #000; letter-spacing: 3px; } }
.portrait .cabinet { left: 8px; top: 222px; width: 704px; --colw: 128px; }
.portrait .reels { height: 476px; }
.portrait .reel { height: 450px; }

/* ---------- side panels ---------- */
.panel { position: absolute; top: 106px; width: 280px; height: 480px; z-index: 3; }
.panel.left { left: 20px; }
.panel.right { right: 20px; }
.panel-base, .panel-bonus { display: flex; flex-direction: column; gap: 10px; }
#stage.penny .panel-base, #stage.dash .panel-base, .panel-bonus { display: none; }
#stage.penny .panel-bonus, #stage.dash .panel-bonus { display: flex; }
.buy-btn { display: flex; align-items: center; gap: 10px; height: 88px; padding: 0 16px; border-radius: 12px; background: linear-gradient(180deg, #ffd766, #d59a2c 55%, #8f5a12); border: 2px solid #fff0b3; box-shadow: 0 6px 0 #4a2e08, 0 12px 20px #000a, inset 0 1px 0 #fff8, inset 0 -3px 0 #00000033; color: #2b1a04; font-family: var(--display); font-size: 34px; letter-spacing: 2px; line-height: .95; text-shadow: 0 1px 0 #ffe8a8; transition: transform .1s, filter .15s; }
.buy-btn .mad-sym { width: 68px; height: 68px; }
.buy-btn small { display: block; font-family: var(--cond); font-size: 12px; letter-spacing: 3px; font-weight: 700; color: #4a2e08; }
.buy-btn:hover:not(:disabled) { filter: brightness(1.1); }
.buy-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #4a2e08, 0 6px 12px #000a; }
.buy-btn:disabled { filter: saturate(.4) brightness(.65); }
.mode-btn { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px; border-radius: 10px; background: linear-gradient(180deg, #3a4250, #1a1f28); border: 1px solid #c3ccd866; box-shadow: 0 4px 12px #0009, inset 0 1px 0 #ffffff22; text-align: left; transition: filter .15s; }
.mode-btn small { display: block; font-size: 10px; letter-spacing: 2.4px; color: #c3ccd8; font-weight: 700; }
.mode-btn b { display: block; font-family: var(--display); font-size: 21px; letter-spacing: 1.5px; color: #eef2f7; margin-top: 2px; font-weight: 400; }
.mode-ind { width: 14px; height: 14px; border-radius: 50%; background: #1a1f28; box-shadow: inset 0 0 0 2px #0a0d12, 0 0 0 1px #c3ccd855; flex-shrink: 0; transition: background .2s, box-shadow .2s; }
.mode-btn.on .mode-ind { background: var(--gold-2); box-shadow: 0 0 14px var(--gold-2), inset 0 0 0 2px #7a4f0a; }
.mode-btn.on b { color: var(--gold-1); }
.mode-btn:hover:not(:disabled) { filter: brightness(1.2); }
.mode-btn:disabled { opacity: .55; }
.hints { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 0; }
.hint { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.6px; font-weight: 700; color: #d7e0ea; line-height: 1.3; text-shadow: 0 1px 2px #000; }
.hint .sym, .hint .mad-sym { width: 44px; height: 44px; flex-shrink: 0; }
.feature-badge { display: flex; justify-content: center; padding: 8px; border-radius: 10px; background: linear-gradient(180deg, #3a4250, #1a1f28); border: 2px solid #c3ccd8; box-shadow: 0 6px 16px #000a, inset 0 1px 0 #fff5; }
.feature-badge .blogo { font-size: 24px; }
.meter { padding: 8px 14px; border-radius: 10px; background: linear-gradient(180deg, #22184a, #0b0820); border: 2px solid #c3ccd8; box-shadow: 0 6px 14px #000a, inset 0 0 0 2px #00000045; text-align: center; }
.meter span { display: block; font-size: 11px; letter-spacing: 2.6px; color: #c9a4ff; font-weight: 700; }
.meter b { display: block; font-family: var(--display); font-size: 36px; line-height: 1.05; color: #ffe9a6; text-shadow: 0 2px 0 #5a3a05, 0 3px 8px #000; font-variant-numeric: tabular-nums; }
.meter.spins b { font-size: 42px; }
.meter.bump b { animation: bump .35s ease-out; }
@keyframes bump { 40% { transform: scale(1.18); filter: brightness(1.6); } }
/* Penny lift */
.lift { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lift .shaft { position: relative; width: 250px; height: 200px; border-radius: 10px; background: linear-gradient(180deg, #22184a, #0b0820); border: 2px solid #ff4fb3; box-shadow: 0 6px 14px #000a, inset 0 0 20px #000; overflow: hidden; }
.lift .floors { position: absolute; inset: 6px 6px 6px 70px; display: flex; flex-direction: column-reverse; gap: 4px; }
.lift .floor { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-radius: 6px; background: #170a30; border: 1px solid #3d2478; font-size: 10px; letter-spacing: 1.5px; font-weight: 700; color: #7f8da0; transition: background .3s, color .3s; }
.lift .floor b { font-family: var(--display); font-size: 14px; letter-spacing: 1px; }
.lift .floor.lit { background: linear-gradient(90deg, #6b0a45, #3d2478); color: #fff; border-color: #ff4fb3; box-shadow: 0 0 12px #ff4fb366; }
.lift .floor.here { background: linear-gradient(90deg, #ff4fb3, #7a4fd6); color: #fff; }
.lift .car { position: absolute; left: 8px; bottom: 6px; width: 54px; height: 34px; border-radius: 6px; background: linear-gradient(180deg, #eef2f7, #7f8da0); box-shadow: 0 0 14px #ff4fb3, inset 0 0 0 2px #3a4250; display: grid; place-items: center; transition: bottom .9s cubic-bezier(.3, .8, .3, 1); }
.lift .car .sym { width: 30px; height: 30px; }
.lift small { font-size: 10px; letter-spacing: 1.5px; color: #ff9fd6; font-weight: 700; }
/* Dash trail */
.trail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.trail .space { position: relative; height: 46px; border-radius: 7px; background: linear-gradient(180deg, #22184a, #0b0820); border: 1px solid #4aa8ff66; display: grid; place-items: center; font-family: var(--display); font-size: 13px; letter-spacing: .5px; color: #d7e0ea; text-align: center; line-height: 1; transition: background .2s, box-shadow .2s; }
.trail .space.here { background: linear-gradient(180deg, #4aa8ff, #1a4a8a); color: #fff; box-shadow: 0 0 16px #4aa8ff; }
.trail .space.won { animation: spaceWon .6s ease-in-out 3 alternate; }
@keyframes spaceWon { to { background: #ffd35b; color: #2b1a04; box-shadow: 0 0 22px #ffd35b; } }
.trail .space i { position: absolute; left: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #0b0820; border: 1px solid #4aa8ff; font-size: 8px; font-style: normal; font-weight: 700; display: grid; place-items: center; color: #4aa8ff; }
.trail .space .sym { position: absolute; right: -6px; top: -10px; width: 30px; height: 30px; filter: drop-shadow(0 0 8px #4aa8ff); animation: carBob .5s ease-in-out infinite alternate; }
.spin-btn { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, #d9ffe6, #46e07a 35%, #1f9a55 70%, #0a4a2c); box-shadow: 0 0 0 5px #0a0d12, 0 0 0 8px #8a94a4, 0 14px 30px #000c, 0 0 60px #46e07a33, inset 0 -8px 16px #00000040, inset 0 6px 10px #fff8; color: #062a14; transition: transform .12s, box-shadow .12s, filter .2s; }
.spin-btn .ring { position: absolute; inset: 9px; border-radius: 50%; border: 3px dashed #0a4a2c66; }
.spin-btn svg { width: 82px; height: 82px; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 #d9ffe6); transition: transform .3s; }
.spin-btn .label { position: absolute; bottom: 24px; font-family: var(--display); font-size: 19px; letter-spacing: 3px; }
.spin-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateX(-50%) scale(1.03); }
.spin-btn:active:not(:disabled) { transform: translateX(-50%) scale(.96); }
.spin-btn:disabled { filter: saturate(.5) brightness(.75); }
.spin-btn.busy svg { animation: spinIcon 1.1s linear infinite; }
.spin-btn.pulse { animation: spinPulse 1.6s ease-in-out infinite; }
@keyframes spinIcon { to { transform: rotate(360deg); } }
@keyframes spinPulse { 50% { box-shadow: 0 0 0 5px #0a0d12, 0 0 0 8px #8a94a4, 0 14px 30px #000c, 0 0 90px #46e07a88, inset 0 -8px 16px #00000040, inset 0 6px 10px #fff8; } }
.spin-side { position: absolute; left: 50%; top: 330px; transform: translateX(-50%); display: flex; gap: 22px; }
.round-btn { width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(180deg, #3a4250, #1a1f28); border: 1px solid #c3ccd866; box-shadow: 0 5px 12px #0009, inset 0 1px 0 #ffffff22; color: #eef2f7; transition: filter .15s, transform .1s; }
.round-btn svg { width: 26px; height: 26px; fill: currentColor; }
.round-btn small { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; }
.round-btn .ico-stop { display: none; }
.round-btn.on { color: var(--gold-1); box-shadow: 0 0 0 2px var(--gold-3), 0 0 18px #f7d36a66, 0 5px 12px #0009; }
.round-btn.running .ico-play { display: none; }
.round-btn.running .ico-stop { display: block; }
.round-btn:hover:not(:disabled) { filter: brightness(1.25); }
.round-btn:disabled { opacity: .45; }
.gamble-btn { position: absolute; left: 50%; top: 420px; transform: translateX(-50%); width: 150px; height: 46px; border-radius: 23px; background: linear-gradient(180deg, #3a4250, #1a1f28); border: 1px solid #c3ccd866; box-shadow: 0 4px 10px #0009; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gamble-btn small { font-size: 10px; letter-spacing: 2px; color: #c3ccd8; font-weight: 700; }
.gamble-btn b { font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: #eef2f7; font-weight: 400; }
.gamble-btn.on b { color: var(--gold-1); }
.gamble-btn:disabled { opacity: .5; }
.portrait .panel { top: auto; height: auto; width: auto; }
.portrait .panel.left { left: 12px; right: 12px; top: 770px; height: 96px; }
.portrait .panel-base { flex-direction: row; align-items: stretch; }
.portrait .panel-bonus { flex-direction: row; }
.portrait .buy-btn { height: 96px; padding: 0 12px; flex: 1.05; font-size: 24px; }
.portrait .buy-btn .mad-sym { width: 50px; height: 50px; }
.portrait .mode-btn { height: 96px; flex: 1; padding: 0 10px; gap: 8px; }
.portrait .mode-btn b { font-size: 18px; }
.portrait .hints { display: none; }
.portrait .feature-badge { flex: 1; display: grid; place-items: center; }
.portrait .meter { flex: 1; padding: 6px; }
.portrait .meter b, .portrait .meter.spins b { font-size: 30px; }
.portrait .lift, .portrait .trail { display: none !important; }
.portrait .panel.right { left: 0; right: 0; top: 872px; height: 180px; }
.portrait .spin-btn { top: 2px; width: 176px; height: 176px; }
.portrait .spin-side { left: auto; right: 40px; top: 40px; transform: none; flex-direction: column; gap: 14px; }
.portrait .gamble-btn { left: 40px; top: 66px; transform: none; width: 150px; }

/* ---------- hud ---------- */
.hud { position: absolute; left: 0; right: 0; bottom: 30px; height: 84px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 60px; background: linear-gradient(180deg, #0b082000, #0b0820e6 30%, #05040ff5); border-top: 1px solid #c3ccd833; z-index: 4; }
.hud-item span { display: block; font-size: 11px; letter-spacing: 3px; color: #c3ccd8; font-weight: 700; }
.hud-item b { display: block; font-family: var(--display); font-size: 34px; line-height: 1.1; color: #f1eefb; letter-spacing: 1px; font-variant-numeric: tabular-nums; font-weight: 400; text-shadow: 0 2px 4px #000; }
.hud-item.win { text-align: right; }
.hud-item.win b { color: var(--gold-1); text-shadow: 0 0 18px #f7d36a55, 0 2px 4px #000; }
.hud-item.win.count b { animation: winGlow .5s ease-in-out infinite alternate; }
@keyframes winGlow { to { text-shadow: 0 0 30px #f7d36a, 0 2px 4px #000; transform: scale(1.04); } }
.hud-item.stake { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.stake-btn { width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 1; display: grid; place-items: center; background: linear-gradient(180deg, #3a4250, #1a1f28); border: 1px solid #c3ccd866; box-shadow: 0 4px 10px #0009, inset 0 1px 0 #ffffff22; color: #eef2f7; transition: filter .15s, transform .1s; }
.stake-btn:hover:not(:disabled) { filter: brightness(1.3); }
.stake-btn:active:not(:disabled) { transform: scale(.94); }
.stake-btn:disabled { opacity: .35; }
.footer-note { position: absolute; left: 60px; right: 60px; bottom: 9px; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 2px; color: #8f9cad; font-weight: 700; z-index: 4; }
.portrait .hud { bottom: 136px; height: 90px; padding: 0 28px; }
.portrait .hud-item b { font-size: 30px; }
.portrait .footer-note { left: 24px; right: 24px; bottom: 112px; }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.toast { position: absolute; left: 50%; top: 96px; transform: translate(-50%, -20px); padding: 10px 22px; border-radius: 30px; background: #0b0820e8; border: 1px solid #ffd07a66; color: #ffe6b3; font-size: 13px; letter-spacing: 2px; font-weight: 700; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 60; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.portrait .toast { top: 700px; }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #22184acc, #05040fe8 75%); animation: fadeIn .3s ease-out; }
.overlay[hidden] { display: none; }
.overlay.splash { background: radial-gradient(ellipse at 50% 30%, #3d2478cc, #05040ff2 70%); z-index: 50; }
.overlay.scene { background: radial-gradient(ellipse at 50% 40%, #0b082044, #05040fb8 80%); z-index: 28; }
@keyframes fadeIn { from { opacity: 0; } }
.card { position: relative; width: 520px; max-width: calc(100% - 40px); padding: 30px 34px 28px; border-radius: 22px; background: linear-gradient(160deg, #2a3140, #0b0820 60%, #22184a); border: 1px solid #c3ccd8; box-shadow: 0 30px 90px #000d, inset 0 0 0 3px #ffffff0c, inset 0 1px 0 #ffffff33; text-align: center; animation: cardIn .45s cubic-bezier(.2, 1.3, .4, 1); display: flex; flex-direction: column; align-items: center; gap: 14px; }
@keyframes cardIn { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.card .close { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border-radius: 50%; font-size: 24px; color: #eef2f7; background: #1a1f28; border: 1px solid #c3ccd866; display: grid; place-items: center; line-height: 1; z-index: 2; }
.card .close:hover { filter: brightness(1.4); }
.kicker { font-size: 12px; letter-spacing: 4px; color: #c9a4ff; font-weight: 700; }
.ov-title { margin: 0; font-family: var(--display); font-size: 40px; letter-spacing: 2px; line-height: 1; color: #ffe9a6; text-shadow: 0 3px 0 #6b3d05, 0 6px 14px #000; font-weight: 400; }
.ov-sub { margin: 0; font-size: 12px; letter-spacing: 2.6px; color: #c3ccd8; font-weight: 700; }
.feature-title { margin: 0; font-family: var(--display); font-size: 54px; letter-spacing: 3px; line-height: 1; background: linear-gradient(180deg, #fff9d6, #ffe27a 40%, #f3ad2b 60%, #b76a10 80%, #ffd86a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #6b3d05) drop-shadow(0 8px 14px #000c); transform: skewX(-5deg); font-weight: 400; white-space: nowrap; }
.cta { min-width: 260px; height: 58px; padding: 0 30px; border-radius: 12px; font-family: var(--display); font-size: 22px; letter-spacing: 2.5px; color: #2b1a04; background: linear-gradient(180deg, #ffd766, #d59a2c 55%, #8f5a12); border: 2px solid #fff0b3; box-shadow: 0 5px 0 #4a2e08, 0 12px 24px #000a, inset 0 1px 0 #fff8; text-shadow: 0 1px 0 #ffe8a8; transition: transform .1s, filter .15s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cta small { font-family: var(--cond); font-size: 12px; letter-spacing: 1px; font-weight: 700; opacity: .85; }
.cta:hover:not(:disabled) { filter: brightness(1.1); }
.cta:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #4a2e08, 0 6px 12px #000a; }
.cta:disabled { filter: saturate(.4) brightness(.6); }
.cta.ghost { background: linear-gradient(180deg, #3a4250, #1a1f28); color: #eef2f7; border-color: #8a94a4; box-shadow: 0 5px 0 #05040f, 0 12px 24px #000a; text-shadow: none; }
.cta.alt { background: linear-gradient(180deg, #c9a4ff, #7a4fd6 60%, #3d2478); color: #fff; border-color: #e6ccff; box-shadow: 0 5px 0 #1e0a3a, 0 12px 24px #000a; text-shadow: 0 1px 0 #3a1a6a; }
.cta.red { background: linear-gradient(180deg, #ff7a93, #ff2e55 55%, #9a0c28); color: #fff; border-color: #ffd0d8; box-shadow: 0 5px 0 #4a0212, 0 12px 24px #000a; text-shadow: 0 1px 0 #4a0212; }
.cta.ghost:active:not(:disabled), .cta.alt:active:not(:disabled), .cta.red:active:not(:disabled) { box-shadow: 0 1px 0 #05040f, 0 6px 12px #000a; }
.fine { margin: 0; font-size: 12px; line-height: 1.6; color: #c3ccd8; }

/* splash */
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; animation: cardIn .8s cubic-bezier(.2, 1.2, .4, 1); }
.splash-cast { display: flex; gap: 10px; }
.splash-cast .sym, .splash-cast .mad-sym { width: 124px; height: 124px; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px #000); }
.splash-cast > :nth-child(2) { animation-delay: -.7s; } .splash-cast > :nth-child(3) { animation-delay: -1.4s; } .splash-cast > :nth-child(4) { animation-delay: -2.1s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.loading { width: 320px; height: 8px; border-radius: 4px; background: #1a1f28; border: 1px solid #c3ccd866; overflow: hidden; }
.loading i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c48a24, #ffe27a); transition: width .3s; box-shadow: 0 0 12px #ffe27a; }
.loading.done { display: none; }
.splash .cta { animation: spinPulse 1.6s ease-in-out infinite; }
.splash-note { margin: 0; font-size: 12px; letter-spacing: 1px; color: #c3ccd8; }

/* ---------- the tombola ---------- */
.tombola-card { position: relative; width: 1000px; padding: 18px 30px 20px; border-radius: 24px; background: linear-gradient(160deg, #2a3140, #0b0820 55%, #22184a); border: 2px solid #c3ccd8; box-shadow: 0 30px 90px #000d, inset 0 0 0 3px #ffffff0c, inset 0 1px 0 #ffffff33; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: cardIn .5s cubic-bezier(.2, 1.3, .4, 1); }
.tombola-layout { display: grid; grid-template-columns: 560px 340px; gap: 20px; align-items: center; margin-top: 6px; }
.tombola-cage { position: relative; width: 560px; height: 350px; }
.cage-frame { position: absolute; inset: 0; border-radius: 26px; background: linear-gradient(160deg, #ffffff 0%, #c3ccd8 10%, #5b6675 28%, #1d222b 48%, #8f9cad 66%, #eef2f7 82%, #4a5462 100%); box-shadow: 0 0 0 2px #0a0d12, 0 24px 50px #000c, inset 0 0 0 1px #ffffff88; }
.cage-frame::before { content: ''; position: absolute; inset: 14px; border-radius: 16px; background: radial-gradient(ellipse at 50% 50%, #170a30, #05040f 80%); box-shadow: inset 0 0 40px #000, inset 0 0 0 1px #3d2478; }
.cage-frame .bulbs { position: absolute; inset: 4px; border-radius: 22px; pointer-events: none; background-image: radial-gradient(circle, #fff6c8 0 1.6px, transparent 2.4px); background-size: 14px 14px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 6px; opacity: .35; }
.tombola-cage.spinning .cage-frame .bulbs, .tombola-cage.landed .cage-frame .bulbs { animation: chase .25s steps(2) infinite; opacity: 1; }
.drum-wrap { position: absolute; left: 30px; top: 30px; width: 500px; height: 290px; perspective: 1100px; perspective-origin: 50% 50%; overflow: hidden; border-radius: 14px; }
.drum { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(0deg); will-change: transform; }
.tcard { position: absolute; left: -175px; top: -52px; width: 350px; height: 104px; border-radius: 12px; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(180deg, #1d2130, #0b0d16); border: 3px solid #8a94a4; box-shadow: inset 0 0 0 2px #ffffff14, 0 8px 20px #000a; transition: filter .2s; }
.tcard::before { content: ''; position: absolute; inset: 5px; border-radius: 8px; border: 1px solid #ffffff22; pointer-events: none; }
.tcard.spacer { background: linear-gradient(180deg, #3d2478, #170a30); border-color: #7a4fd6; }
.tcard.spacer .mad-sym { width: 72px; height: 72px; opacity: .85; }
.tcard.spacer b { font-family: var(--display); font-size: 50px; color: #c9a4ff; margin: 0 18px; text-shadow: 0 0 16px #7a4fd6; }
.tcard.mystery { background: linear-gradient(180deg, #4a2a8a, #1a0a3a); border-color: #c9a4ff; }
.tombola-cage.spinning .tcard { filter: blur(1.2px); }
.tombola-cage.fast .tcard { filter: blur(3px); }
.tcard.front { filter: brightness(1.25) drop-shadow(0 0 18px #ffd35b); border-color: #ffd35b; animation: frontPop .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes frontPop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
.drum-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #05040fee 0%, #05040f66 22%, transparent 42%, transparent 58%, #05040f66 78%, #05040fee 100%); }
.drum-window { position: absolute; left: 100px; top: 116px; width: 360px; height: 118px; border-radius: 14px; border: 3px solid #ffd35b; box-shadow: 0 0 22px #ffd35b66, inset 0 0 22px #ffd35b22; pointer-events: none; }
.drum-pointer { position: absolute; right: 24px; top: 158px; width: 36px; height: 34px; background: linear-gradient(180deg, #ffe9a6, #d9a13c); clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%); filter: drop-shadow(0 4px 6px #000c); z-index: 3; transform-origin: 100% 50%; }
.tombola-cage.spinning .drum-pointer { animation: pointerFlick .12s ease-in-out infinite alternate; }
@keyframes pointerFlick { to { transform: rotate(-14deg); } }
.drum-lever { position: absolute; right: -24px; top: 90px; width: 26px; height: 170px; transform-origin: 50% 90%; z-index: 6; cursor: pointer; transition: transform .35s cubic-bezier(.3, 1.4, .4, 1); }
.drum-lever i { position: absolute; left: 9px; top: 20px; width: 8px; height: 140px; border-radius: 4px; background: linear-gradient(90deg, #7f8da0, #f4f7fb 40%, #3a4250); box-shadow: 0 4px 8px #000a; }
.drum-lever b { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9db0, #ff2e55 45%, #6a0a1e); box-shadow: 0 4px 8px #000a, inset 0 -3px 5px #0006; }
.drum-lever.pull { transform: rotate(38deg) translateY(-8px); }
.chance-ring { position: absolute; left: 12px; top: 12px; width: 92px; height: 92px; z-index: 4; display: grid; place-items: center; }
.chance-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.chance-ring circle { fill: none; stroke-width: 10; }
.chance-ring .track { stroke: #9a0c28; }
.chance-ring .arc { stroke: #46e07a; stroke-dasharray: 326.7; stroke-dashoffset: 163; transition: stroke-dashoffset .5s; stroke-linecap: butt; }
.chance-ring b { font-family: var(--display); font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000; line-height: 1; margin-top: 2px; }
.chance-ring small { font-size: 8px; letter-spacing: 1.5px; color: #c3ccd8; font-weight: 700; }
.ladder-board { position: relative; z-index: 1; display: flex; flex-direction: column-reverse; gap: 8px; }
.lrung { --glow: #ffd35b; position: relative; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 14px 0 12px; border-radius: 12px; background: linear-gradient(160deg, #2a3140, #12161e 70%); border: 2px solid #8a94a4; box-shadow: 0 0 0 1px #0a0d12, 0 6px 14px #000a, inset 0 0 0 2px #00000045, inset 0 1px 0 #ffffff44; transition: transform .2s, box-shadow .3s, filter .4s; }
.lrung .blogo { font-size: 20px; }
.lrung .meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.lrung .meta small { font-size: 9px; letter-spacing: 1.5px; color: #c3ccd8; font-weight: 700; }
.lrung .meta b { font-family: var(--display); font-size: 16px; color: #ffe9a6; letter-spacing: 1px; }
.lrung .num { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #0a0d12; border: 1px solid #8a94a4; font-size: 10px; font-weight: 700; color: #c3ccd8; display: grid; place-items: center; }
.lrung.flash { border-color: #fff; box-shadow: 0 0 0 1px #0a0d12, 0 0 24px #ffffffaa, inset 0 0 0 2px #00000045; }
.lrung.lit { border-color: var(--gold-2); box-shadow: 0 0 0 1px #3b2708, 0 6px 14px #000a, 0 0 30px var(--glow), inset 0 0 0 2px #00000045; transform: scale(1.04); }
.lrung.lit .num { background: var(--gold-2); color: #2b1a04; }
.lrung.out { filter: saturate(.2) brightness(.45); }
.lrung.out::after { content: 'REMOVED'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-family: var(--display); font-size: 22px; letter-spacing: 3px; color: #ff2e55; border: 2px solid #ff2e55; padding: 0 10px; border-radius: 6px; background: #05040fcc; }
.lrung.target { border-color: #c9a4ff; box-shadow: 0 0 0 1px #1e0a3a, 0 0 22px #c9a4ff88; }
.tombola-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 66px; margin-top: 4px; }
.tombola-decide { display: flex; align-items: center; gap: 18px; }
.gamble-up { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: #1e0a3a99; border: 1px solid #7a4fd6; }
.gamble-up .kicker { font-size: 10px; letter-spacing: 3px; }
.gamble-up .seg { width: auto; }
.gamble-up .seg button { min-width: 88px; height: 34px; font-size: 12px; }
.gamble-up .cta { height: 48px; min-width: 240px; font-size: 18px; flex-direction: column; gap: 0; line-height: 1; }
.tombola-card .fine { text-align: center; max-width: 900px; min-height: 18px; }
.tombola-card .feature-title { font-size: 42px; }
.portrait .tombola-card { width: 690px; padding: 14px 16px; }
.portrait .tombola-layout { grid-template-columns: 1fr; gap: 12px; }
.portrait .tombola-cage { width: 560px; margin: 0 auto; }
.portrait .ladder-board { flex-direction: row; gap: 4px; }
.portrait .lrung { flex: 1; flex-direction: column; justify-content: center; height: 64px; padding: 4px; }
.portrait .lrung .blogo { font-size: 13px; }
.portrait .lrung .meta, .portrait .lrung .num { display: none; }
.portrait .lrung.out::after { font-size: 12px; }
.portrait .tombola-decide { flex-direction: column; gap: 8px; }

/* ---------- bonus scenes ---------- */
.scene-card { position: relative; width: 1180px; height: 650px; padding: 14px 26px 18px; border-radius: 24px; background: linear-gradient(160deg, #2a3140f0, #0b0820f0 55%, #22184af0); border: 2px solid #c3ccd8; box-shadow: 0 30px 90px #000d, inset 0 0 0 3px #ffffff0c, inset 0 1px 0 #ffffff33; display: flex; flex-direction: column; gap: 10px; animation: cardIn .5s cubic-bezier(.2, 1.3, .4, 1); }
.scene-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.scene-head .kicker { text-align: left; }
.scene-head .blogo.big { font-size: 40px; }
.scene-meter { justify-self: end; text-align: right; }
.scene-meter span { display: block; font-size: 10px; letter-spacing: 3px; color: #c9a4ff; font-weight: 700; }
.scene-meter b { display: block; font-family: var(--display); font-size: 34px; color: #ffe9a6; text-shadow: 0 2px 0 #5a3a05, 0 3px 8px #000; font-variant-numeric: tabular-nums; }
/* Vault Job */
.safe-layout { display: grid; grid-template-columns: 250px 1fr; gap: 18px; flex: 1; min-height: 0; }
.prize-board { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; padding: 10px; border-radius: 14px; background: #05040f99; border: 1px solid #3d2478; }
.prize-board .chip { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 8px; background: linear-gradient(180deg, #22184a, #0b0820); border: 1px solid #7a4fd6; font-family: var(--display); font-size: 20px; color: #ffe9a6; text-shadow: 0 2px 0 #000; transition: filter .3s; }
.prize-board .chip .blogo { font-size: 11px; }
.prize-board .chip.removed { filter: saturate(.2) brightness(.4); position: relative; }
.prize-board .chip.removed::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; background: #ff2e55; transform: rotate(-8deg); }
.prize-board h4 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 10px; letter-spacing: 3px; color: #c9a4ff; text-align: center; }
.safe-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; }
.safe-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, #2b1656, #170a30 75%); border: 2px solid #3d2478; box-shadow: 0 8px 20px #000a, inset 0 1px 0 #ffffff22; transition: transform .15s, filter .15s, border-color .3s; overflow: hidden; }
.safe-btn .sym { width: 92px; height: 92px; filter: drop-shadow(0 8px 8px #000a); transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .4s; }
.safe-btn .num { position: absolute; left: 8px; top: 6px; font-family: var(--display); font-size: 14px; color: #c3ccd8; letter-spacing: 1px; }
.safe-btn:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.2); border-color: #c9a4ff; }
.safe-btn.chosen { border-color: #ffd35b; box-shadow: 0 0 26px #ffd35b88, 0 8px 20px #000a; }
.safe-btn.chosen::after { content: 'YOUR SAFE'; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) rotate(-4deg); font-family: var(--display); font-size: 13px; letter-spacing: 2px; color: #2b1a04; background: linear-gradient(180deg, #ffe9a6, #d9962c); padding: 2px 10px; border-radius: 5px; box-shadow: 0 3px 6px #000a; }
.safe-btn.opened { filter: none; }
.safe-btn.opened .sym { transform: perspective(300px) rotateY(-100deg) translateX(-30px); opacity: 0; }
.safe-btn .prize { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity .3s .25s, transform .5s .25s cubic-bezier(.2, 1.5, .4, 1); font-family: var(--display); font-size: 40px; color: #ffe9a6; text-shadow: 0 3px 0 #5a3a05, 0 6px 14px #000; }
.safe-btn .prize .blogo { font-size: 18px; }
.safe-btn.opened .prize { opacity: 1; transform: scale(1); }
.safe-btn.opened.chosen .prize, .safe-btn.opened.reveal .prize { animation: prizePulse .7s ease-in-out infinite alternate; }
@keyframes prizePulse { to { transform: scale(1.12); filter: brightness(1.4); } }
.safe-btn.dim { filter: saturate(.3) brightness(.4); }
.safe-btn.spot { border-color: #fff; box-shadow: 0 0 30px #fff8; animation: spotPulse .8s ease-in-out infinite alternate; }
@keyframes spotPulse { to { box-shadow: 0 0 40px #ffd35b; border-color: #ffd35b; } }
.safe-panel { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.safe-panel .phone { display: flex; align-items: center; gap: 16px; padding: 8px 18px; border-radius: 14px; background: linear-gradient(180deg, #22184a, #0b0820); border: 2px solid #ffd35b; box-shadow: 0 0 24px #ffd35b55; animation: cardIn .4s cubic-bezier(.2, 1.3, .4, 1); }
.safe-panel .phone.ringing { animation: ring .12s ease-in-out infinite alternate; }
@keyframes ring { to { transform: rotate(2deg) translateX(2px); } }
.safe-panel .phone .amt { display: flex; flex-direction: column; line-height: 1; }
.safe-panel .phone .amt small { font-size: 10px; letter-spacing: 3px; color: #c9a4ff; font-weight: 700; }
.safe-panel .phone .amt b { font-family: var(--display); font-size: 40px; color: #ffe9a6; text-shadow: 0 3px 0 #5a3a05; font-variant-numeric: tabular-nums; }
.safe-panel .cta { height: 52px; min-width: 180px; font-size: 19px; }
.safe-panel .fine { font-size: 13px; letter-spacing: 1px; color: #e9e2ff; font-weight: 700; }
/* Double Agents */
.tally { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tally > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 12px; background: linear-gradient(180deg, #22184a, #0b0820); border: 1px solid #7a4fd6; }
.tally strong { font-family: var(--display); font-size: 28px; color: #ffe9a6; text-shadow: 0 2px 0 #5a3a05; line-height: 1; }
.tally .mad strong { color: #ff2e55; text-shadow: 0 2px 0 #4a0212; }
.tally .lamps { display: flex; gap: 6px; }
.tally .lamps i { width: 16px; height: 16px; border-radius: 50%; background: #170a30; border: 1px solid #7a4fd6; transition: background .2s, box-shadow .2s; }
.tally .lamps i.lit { background: #46e07a; box-shadow: 0 0 12px #46e07a; }
.tally .mad .lamps i.lit { background: #ff2e55; box-shadow: 0 0 12px #ff2e55; }
.tally > div.boost strong::after { content: ' ×2'; font-size: 14px; color: #c9a4ff; }
.agent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; flex: 1; align-content: center; }
.agent-grid.few { grid-template-columns: repeat(5, 1fr); padding: 0 120px; }
.acard { position: relative; height: 112px; perspective: 700px; }
.acard .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.2, .4, 1); }
.acard.flipped .inner { transform: rotateY(180deg); }
.acard .face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.acard .front { background: linear-gradient(180deg, #3a4250, #1a1f28); border: 2px solid #8a94a4; box-shadow: 0 8px 20px #000a, inset 0 1px 0 #ffffff33; cursor: pointer; transition: transform .15s, filter .15s; }
.acard .front .sym { width: 58px; height: 58px; }
.acard .front small { font-size: 9px; letter-spacing: 2px; color: #c3ccd8; font-weight: 700; }
.acard:not(.flipped):hover .front { transform: translateY(-3px); filter: brightness(1.25); }
.acard .back { transform: rotateY(180deg); background: linear-gradient(180deg, #22184a, #0b0820); border: 2px solid #7a4fd6; font-family: var(--display); font-size: 34px; color: #ffe9a6; text-shadow: 0 2px 0 #5a3a05; }
.acard .back.cash { border-color: #46e07a; }
.acard .back.cash small { font-size: 9px; letter-spacing: 2px; color: #46e07a; font-family: var(--cond); font-weight: 700; }
.acard .back.cat { border-color: #ffd35b; background: linear-gradient(180deg, #4a2a06, #1a0a02); }
.acard .back.cat .cat-icon { width: 60px; height: 52px; }
.acard .back.cat small { font-size: 9px; letter-spacing: 2px; color: #ffd35b; font-family: var(--cond); font-weight: 700; }
.acard .back.mad { border-color: #ff2e55; background: radial-gradient(ellipse at 50% 40%, #4a0212, #170a30); }
.acard .back.mad .mad-sym { width: 66px; height: 66px; }
.acard.flipped.match .back { animation: matchGlow .5s ease-in-out 6 alternate; }
@keyframes matchGlow { to { box-shadow: 0 0 30px #46e07a; filter: brightness(1.5); } }
.agent-panel { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.agent-panel .fine { font-size: 13px; letter-spacing: 1px; color: #e9e2ff; font-weight: 700; }
/* Baron’s Bounty */
.money-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; flex: 1; align-items: center; }
.bomb-ring-wrap { position: relative; width: 470px; height: 470px; margin: 0 auto; display: grid; place-items: center; }
.bomb-ring-wrap::before { content: ''; position: absolute; inset: 20px; border-radius: 50%; border: 2px dashed #7a4fd655; }
.bomb-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: transform 2.6s cubic-bezier(.12, .8, .1, 1); }
.bomb { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.bomb .sym { width: 82px; height: 82px; filter: drop-shadow(0 6px 8px #000a); }
.bomb.bronze .sym { filter: sepia(1) saturate(2.4) hue-rotate(-20deg) brightness(.85) drop-shadow(0 6px 8px #000a); }
.bomb.silver .sym { filter: saturate(0) brightness(1.5) contrast(1.1) drop-shadow(0 6px 8px #000a); }
.bomb.gold .sym { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.25) drop-shadow(0 0 10px #ffd35b) drop-shadow(0 6px 8px #000a); }
.bomb b { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-size: 16px; letter-spacing: 1px; color: #fff; background: #05040fdd; padding: 1px 8px; border-radius: 6px; border: 1px solid #8a94a4; text-shadow: 0 1px 0 #000; }
.bomb.gold b { color: #ffe9a6; border-color: #ffd35b; }
.bomb.selected { animation: bombBlow .9s ease-out forwards; z-index: 2; }
@keyframes bombBlow { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.4); filter: brightness(3); } 45% { transform: scale(1.6); filter: brightness(6); opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; transform: scale(2); } }
.bomb.rearm { animation: markPop .55s cubic-bezier(.2, 1.5, .4, 1); }
.claw-core { position: relative; width: 190px; height: 190px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 30%, #5a1a2a, #170a30 60%, #05040f); border: 4px solid #ff2e55; box-shadow: 0 0 40px #ff2e5566, inset 0 0 30px #000; z-index: 1; }
.claw-core .mad-sym { width: 80px; height: 80px; }
.claw-core b { font-family: var(--display); font-size: 40px; color: #ffe9a6; text-shadow: 0 3px 0 #5a3a05, 0 6px 14px #000; line-height: 1; }
.claw-core.pop b { animation: bump .5s ease-out; }
.money-side { display: flex; flex-direction: column; gap: 14px; }
.money-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.money-picks button { height: 96px; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, #4a0212, #170a30 75%); border: 2px solid #ff2e55; box-shadow: 0 8px 20px #000a; display: grid; place-items: center; transition: transform .15s, filter .15s; }
.money-picks button .mad-sym { width: 74px; height: 74px; animation: pickGlow 1.4s ease-in-out infinite; }
@keyframes pickGlow { 50% { filter: drop-shadow(0 0 16px #ff2e55); transform: scale(1.06); } }
.money-picks button:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.25); }
.money-picks button:disabled { filter: saturate(.3) brightness(.5); }
.money-log { display: flex; flex-wrap: wrap; gap: 6px; min-height: 80px; align-content: flex-start; }
.money-log span { padding: 4px 10px; border-radius: 20px; background: #22184a; border: 1px solid #7a4fd6; font-family: var(--display); font-size: 16px; color: #ffe9a6; letter-spacing: 1px; animation: cardIn .3s; }
.money-log span.gold { border-color: #ffd35b; background: #4a2a06; }
.money-log span.collect { border-color: #ff2e55; color: #fff; background: #4a0212; }
.collect-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-family: var(--display); font-size: 110px; letter-spacing: 8px; color: #ff2e55; border: 8px solid #ff2e55; padding: 0 30px; border-radius: 20px; background: #05040fcc; text-shadow: 0 0 30px #ff2e55; animation: stampIn .5s cubic-bezier(.2, 1.5, .4, 1); z-index: 5; }
@keyframes stampIn { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(3); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
.portrait .scene-card { width: 700px; height: 1100px; }
.portrait .safe-layout { grid-template-columns: 1fr; }
.portrait .prize-board { grid-template-columns: repeat(4, 1fr); }
.portrait .safe-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
.portrait .agent-grid { grid-template-columns: repeat(4, 1fr); }
.portrait .agent-grid.few { padding: 0; }
.portrait .money-layout { grid-template-columns: 1fr; }

/* intro / summary / result */
.card.intro { width: 620px; }
.intro-logo .blogo { font-size: 52px; }
.intro-art { display: flex; align-items: center; gap: 16px; }
.intro-art .sym { width: 180px; height: 180px; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 8px 12px #000); }
.free-spins { text-align: center; }
.free-spins b { display: block; font-family: var(--display); font-size: 120px; line-height: .9; color: #ffe27a; text-shadow: 0 4px 0 #6b3d05, 0 8px 18px #000; }
.free-spins span { font-size: 15px; letter-spacing: 4px; font-weight: 700; color: #c9a4ff; }
.intro-copy { margin: 0; font-size: 15px; line-height: 1.55; color: #e9e2ff; max-width: 520px; }
.tier-row { display: flex; gap: 12px; }
.tier-row.facts > div { width: 140px; padding: 10px 8px; border-radius: 10px; background: #05040faa; border: 1px solid #7a4fd655; text-align: center; }
.tier-row.facts b { display: block; font-family: var(--display); font-size: 30px; color: #ffe9a6; text-shadow: 0 2px 0 #5a3a05; }
.tier-row.facts span { display: block; font-size: 10px; letter-spacing: 2px; color: #c9a4ff; margin-top: 4px; font-weight: 700; }
.summary-amount span { display: block; font-size: 13px; letter-spacing: 4px; color: #c9a4ff; font-weight: 700; }
.summary-amount b { display: block; font-family: var(--display); font-size: 84px; line-height: 1.1; color: #ffe9a6; text-shadow: 0 4px 0 #6b3d05, 0 8px 18px #000, 0 0 40px #f7d36a55; font-variant-numeric: tabular-nums; }
.summary-chips { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.summary-chips .chip { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: #eef2f7; padding: 4px 12px; border-radius: 20px; background: #22184a; border: 1px solid #7a4fd6; }
.summary-chips .sym, .summary-chips .mad-sym { width: 40px; height: 40px; }
.result-amount { font-family: var(--display); font-size: 90px; line-height: 1.1; color: #ffe9a6; text-shadow: 0 4px 0 #6b3d05, 0 8px 18px #000, 0 0 40px #f7d36a55; font-variant-numeric: tabular-nums; padding: 10px 0; }
.card.result { padding-top: 40px; }

/* big win */
.overlay.bigwin { background: radial-gradient(ellipse at 50% 50%, #3d2478cc, #05040fe0 70%); z-index: 45; cursor: pointer; }
.bigwin-inner { text-align: center; animation: bigIn .7s cubic-bezier(.17, .89, .3, 1.25); }
@keyframes bigIn { from { transform: scale(.3); opacity: 0; } }
.bigwin-title { font-family: var(--display); font-size: 150px; line-height: .9; letter-spacing: 6px; background: linear-gradient(180deg, #fff9d6, #ffe27a 35%, #f3ad2b 55%, #b76a10 75%, #ffd86a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #6b3d05) drop-shadow(0 8px 0 #3a2002) drop-shadow(0 20px 30px #000); transform: skewX(-6deg); animation: titleThrob 1s ease-in-out infinite alternate; }
.bigwin-title.mega { background: linear-gradient(180deg, #ffe0ea, #ff4fb3 35%, #e0321a 60%, #6b0716 80%, #ffb347); -webkit-background-clip: text; background-clip: text; }
.bigwin-title.epic { background: linear-gradient(180deg, #e2fbff, #6fe7ff 35%, #1fa2ff 60%, #0a3d8a 80%, #9be7ff); -webkit-background-clip: text; background-clip: text; }
@keyframes titleThrob { to { transform: skewX(-6deg) scale(1.05); } }
.bigwin-amount { font-family: var(--display); font-size: 110px; line-height: 1; color: #fff; text-shadow: 0 4px 0 #6b3d05, 0 10px 24px #000, 0 0 60px #ffd86a88; margin-top: 12px; font-variant-numeric: tabular-nums; }
.bigwin-note { margin-top: 18px; font-size: 12px; letter-spacing: 4px; color: #eef2f7aa; font-weight: 700; }
.portrait .bigwin-title { font-size: 120px; }
.portrait .bigwin-amount { font-size: 90px; }

/* jackpot */
.overlay.potwin { --glow: #ffd44d; background: radial-gradient(ellipse at center, #3d2478dd, #05040ff2 75%); z-index: 47; overflow: hidden; cursor: pointer; }
.rays { position: absolute; left: 50%; top: 50%; width: 1400px; height: 1400px; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, #f9d99118 12deg 18deg, transparent 18deg 26deg); animation: rays 24s linear infinite; -webkit-mask-image: radial-gradient(#000 0%, #000 30%, transparent 70%); mask-image: radial-gradient(#000 0%, #000 30%, transparent 70%); }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.pot-inner { position: relative; text-align: center; animation: bigIn .8s cubic-bezier(.17, .89, .3, 1.25); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pot-amount { font-family: var(--display); font-size: 96px; line-height: 1.1; color: #fff; text-shadow: 0 4px 0 #8b5d28, 0 10px 24px #000; font-variant-numeric: tabular-nums; }
.jackpot-title { margin: 6px 0; font-family: var(--display); font-size: 170px; line-height: .9; letter-spacing: 8px; background: linear-gradient(180deg, #fff9d6, #ffe27a 35%, #f3ad2b 55%, #b76a10 75%, #ffd86a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #6b3d05) drop-shadow(0 8px 0 #3a2002) drop-shadow(0 20px 40px #000) drop-shadow(0 0 40px #ffd44d88); transform: skewX(-6deg); animation: titleThrob .9s ease-in-out infinite alternate; }
.kicker.dim { opacity: .75; margin-top: 10px; }
.portrait .jackpot-title { font-size: 128px; }

/* gamble */
.card.gamble { width: 640px; gap: 8px; padding: 22px 28px 20px; }
.risk-wrap { position: relative; width: 190px; height: 190px; margin: 2px 0; }
.risk-wheel { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #c3ccd8; background: conic-gradient(#1f9a72 0deg 145deg, #a52443 145deg 360deg); box-shadow: 0 0 0 3px #0a0d12, 0 12px 30px #000c, inset 0 0 30px #0009; will-change: transform; }
.risk-wheel span, .risk-wheel b { position: absolute; font-family: var(--display); font-size: 14px; letter-spacing: 1px; color: #fff3cf; text-shadow: 0 2px 0 #000; }
.risk-wheel span { right: 14px; top: 40px; transform: rotate(60deg); }
.risk-wheel b { left: 14px; bottom: 44px; transform: rotate(240deg); font-weight: 400; }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3c4, #d9a13c 50%, #6b4310); border: 4px solid #ffe9a6; box-shadow: 0 0 0 3px #0a0d12, 0 8px 20px #000c, inset 0 -4px 8px #0006; z-index: 3; }
.wheel-hub .mad-sym { width: 44px; height: 44px; }
.wheel-pointer { position: absolute; left: 50%; top: -18px; width: 30px; height: 40px; margin-left: -15px; z-index: 4; transform-origin: 50% 15%; filter: drop-shadow(0 6px 6px #000c); background: linear-gradient(180deg, #ffe9a6, #d9a13c); clip-path: polygon(50% 100%, 0 22%, 12% 0, 88% 0, 100% 22%); }
.risk-result { min-height: 26px; font-family: var(--display); font-size: 24px; letter-spacing: 2px; color: #ffe9a6; text-shadow: 0 2px 0 #5a3a05, 0 3px 8px #000; }
.gamble-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%; align-items: center; }
.gamble-grid .cta { width: 100%; min-width: 0; height: 52px; font-size: 16px; padding: 0 12px; flex-direction: column; gap: 0; line-height: 1; }
.gamble-grid .cta small { font-size: 10px; }
.gamble-grid .fine, .gamble-grid .collect-row { grid-column: 1 / -1; }
.gamble-grid .fine { text-align: center; font-size: 11px; line-height: 1.5; }
.collect-row { display: flex; gap: 10px; }
.collect-row .cta { flex: 1; }
#gamble-cash { grid-template-areas: 'segc segb' 'btnc btnb' 'fine fine' 'coll coll'; }
#seg-cash { grid-area: segc; } #seg-bonus { grid-area: segb; } #btn-gamble-cash { grid-area: btnc; } #btn-gamble-bonus { grid-area: btnb; } #gamble-fine { grid-area: fine; } .collect-row { grid-area: coll; }
#gamble-chance { grid-template-columns: 1fr; }
.seg { display: flex; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid #c3ccd866; background: #1a1f28; }
.seg button { flex: 1; height: 40px; font-family: var(--display); font-size: 14px; letter-spacing: 1.2px; color: #c3ccd8; transition: background .15s, color .15s; padding: 0 4px; }
.seg button + button { border-left: 1px solid #c3ccd844; }
.seg button.on { background: linear-gradient(180deg, #ffd766, #d59a2c); color: #2b1a04; }
.seg button:disabled { opacity: .35; }

/* dialogs */
.card.dialog { width: 620px; max-height: 670px; gap: 10px; padding-top: 26px; }
.dialog-body { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: stretch; overflow: auto; max-height: 530px; padding: 2px; text-align: left; }
.dialog-body p { margin: 0; font-size: 15px; line-height: 1.6; color: #e9e2ff; }
.dialog-body p.small { font-size: 12px; color: #c3ccd8; }
.dialog-body h3 { margin: 6px 0 0; font-size: 11px; letter-spacing: 3px; color: #c9a4ff; }
.paytable { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.paytable > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: #170a30; border: 1px solid #3d2478; }
.paytable .sym { width: 70px; height: 70px; }
.paytable .sym.letter { font-size: 48px; }
.paytable small { font-size: 11px; color: #d7e0ea; letter-spacing: .5px; line-height: 1.5; text-align: center; }
.paytable small b { color: #fff; }
.tier-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tier-table > div { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: 10px; background: #170a30; border: 1px solid #3d2478; text-align: center; }
.tier-table .blogo { font-size: 14px; }
.tier-table span { font-size: 12px; color: #e9e2ff; }
.tier-table small { font-size: 11px; color: #c3ccd8; }
.lines-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px 6px; }
.line-card { position: relative; }
.line-card b { position: absolute; top: -6px; left: -6px; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #ffd35b; color: #2b1a04; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.mini-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; height: 34px; background: #3d2478; padding: 1px; border-radius: 3px; }
.mini-grid i { background: #170a30; }
.mini-grid i.lit { background: #ffd35b; box-shadow: 0 0 4px #ffa700; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-list button { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-radius: 10px; background: #22184a; border: 1px solid #3d2478; color: #eef2f7; font-size: 15px; font-weight: 600; }
.menu-list button:hover { filter: brightness(1.2); }
.menu-list button span:last-child { color: #c3ccd8; font-size: 18px; }
.history { display: flex; flex-direction: column; max-height: 160px; overflow: auto; }
.history > div { display: flex; justify-content: space-between; padding: 7px 4px; border-bottom: 1px solid #3d24783b; font-size: 13px; color: #d7e0ea; }
.history b { color: #e1c38a; }
.slider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #e9e2ff; font-weight: 600; }
.slider span { width: 90px; letter-spacing: 1px; }
.slider input { flex: 1; accent-color: #f7d36a; }
.slider b { width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #e9e2ff; font-weight: 600; }
.choice-row .seg { width: auto; flex: 1; }
.buy-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.buy-tiers button { --tc: #ffd35b; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; background: #22184a; border: 1px solid #3d2478; color: #eef2f7; }
.buy-tiers button.on { border-color: var(--tc); background: linear-gradient(#3d2478, #22184a); box-shadow: 0 0 0 1px var(--tc), 0 0 20px color-mix(in srgb, var(--tc) 35%, transparent); }
.buy-tiers .blogo { font-size: 17px; height: 44px; }
.buy-tiers b { font-family: var(--display); font-size: 30px; color: #f1d499; font-weight: 400; }
.buy-tiers small { font-size: 10px; color: #c3ccd8; letter-spacing: .5px; text-align: center; }
.buy-tiers .sym, .buy-tiers .mad-sym { width: 66px; height: 66px; }
.buy-art { display: flex; justify-content: center; gap: 4px; }
.buy-art .sym, .buy-art .mad-sym { width: 110px; height: 110px; }
.purchase { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #c3ccd8; font-weight: 600; }
.purchase b { font-family: var(--display); font-size: 26px; color: #f1d498; font-weight: 400; }
.help-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.help-nav .dots { display: flex; gap: 8px; }
.help-nav .dots button { width: 9px; height: 9px; border-radius: 50%; background: #3d2478; }
.help-nav .dots button.on { background: #eec57c; }
.help-nav .nav { width: 40px; height: 40px; border-radius: 50%; background: #1a1f28; border: 1px solid #c3ccd866; color: #eef2f7; font-size: 20px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-grid button { height: 44px; border-radius: 8px; background: #22184a; border: 1px solid #3d2478; color: #eef2f7; font-size: 13px; font-weight: 600; }
.demo-grid button:hover { filter: brightness(1.3); }
.dialog .cta { align-self: center; }
.card.dialog.buy { width: 840px; max-height: 690px; }
.card.dialog.buy .dialog-body { max-height: 600px; gap: 14px; }
.card.dialog.buy .cta { height: 64px; font-size: 24px; min-width: 340px; }
.astats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.astat { background: #170a30; border: 1px solid #3d2478; border-radius: 8px; padding: 8px 10px; }
.astat span { display: block; font-size: 9px; letter-spacing: 1.5px; color: #c3ccd8; font-weight: 700; }
.astat b { display: block; font-family: var(--display); font-size: 22px; color: #f1eefb; font-variant-numeric: tabular-nums; font-weight: 400; }
.astat.good b { color: #5ee39c; } .astat.warn b { color: #f7d36a; } .astat.bad b { color: #ff5c5c; }
.arow { display: flex; gap: 10px; justify-content: center; }
.arow .cta { min-width: 0; padding: 0 22px; height: 48px; font-size: 18px; }
.pass-input { width: 100%; max-width: 320px; align-self: center; padding: 14px 16px; border-radius: 10px; border: 1px solid #c3ccd866; background: #05040f; color: #f1eefb; font: 26px var(--display); letter-spacing: 8px; text-align: center; }
.pass-input:focus { outline: 2px solid var(--gold-2); }
.pass-err { min-height: 18px; text-align: center; color: #ff5c5c; }
.portrait .card.dialog { width: 660px; max-height: 1000px; }
.portrait .dialog-body { max-height: 820px; }
.portrait .card.dialog.buy { width: 680px; max-height: 1000px; }
.portrait .card.dialog.buy .dialog-body { max-height: 860px; }
.portrait .lines-grid { grid-template-columns: repeat(5, 1fr); }
.portrait .card.gamble { width: 660px; }
.portrait .card.intro { width: 660px; }
.portrait .buy-tiers { grid-template-columns: repeat(2, 1fr); }

/* jackpot run badge */
.jackpot-badge { position: absolute; left: 50%; top: 94px; transform: translateX(-50%); padding: 4px 14px; border-radius: 20px; background: linear-gradient(90deg, #ff2e55, #ffb347); color: #fff; font-family: var(--cond); font-size: 11px; letter-spacing: 3px; font-weight: 700; box-shadow: 0 4px 12px #000a, 0 0 18px #ff2e5588; z-index: 6; display: none; animation: blink 1.4s infinite; pointer-events: none; }
#stage.jackpot .jackpot-badge { display: block; }
.portrait .jackpot-badge { top: 218px; }

/* ---------- motion preferences ---------- */
#stage.reduced *, #stage.reduced *::before, #stage.reduced *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .05s !important; }

/* =====================================================================================================
   Luxury pass: metal buttons, gold bezels, glass panels and ornamented frames. Later rules win.
   ===================================================================================================== */
:root {
  --metal-gold: linear-gradient(180deg, #fff8d8 0%, #f7dc86 16%, #dcae3f 40%, #a67016 56%, #d9a84a 74%, #fff2c0 100%);
  --metal-steel: linear-gradient(180deg, #ffffff 0%, #d3dbe5 18%, #8f9cad 46%, #4a5463 58%, #a9b4c2 80%, #eef2f7 100%);
  --glass: linear-gradient(165deg, #2b2f4acc 0%, #0d0b23e6 45%, #1a1440f2 100%);
}
/* gold call-to-action */
.cta { position: relative; overflow: hidden; border-radius: 30px; border: 1px solid #fff3c4; background: var(--metal-gold); color: #3a2604; text-shadow: 0 1px 0 #fff2c0; box-shadow: 0 0 0 2px #4a3208, 0 0 0 3px #d9ad4a66, 0 8px 0 #4a3208, 0 16px 28px #000b, inset 0 2px 0 #fffbe6, inset 0 -3px 0 #a0701a; letter-spacing: 3px; }
.cta::after { content: ''; position: absolute; left: 6%; right: 6%; top: 3px; height: 42%; border-radius: 30px 30px 40% 40%; background: linear-gradient(180deg, #ffffffaa, #ffffff10); pointer-events: none; }
.cta:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 2px #4a3208, 0 0 0 3px #d9ad4a66, 0 2px 0 #4a3208, 0 8px 14px #000b, inset 0 2px 0 #fffbe6; }
.cta.ghost { background: var(--metal-steel); color: #1a1f28; border-color: #f4f7fb; text-shadow: 0 1px 0 #ffffffaa; box-shadow: 0 0 0 2px #1a1f28, 0 0 0 3px #b9c4d266, 0 8px 0 #1a1f28, 0 16px 28px #000b, inset 0 2px 0 #fff, inset 0 -3px 0 #4a5463; }
.cta.ghost:active:not(:disabled) { box-shadow: 0 0 0 2px #1a1f28, 0 0 0 3px #b9c4d266, 0 2px 0 #1a1f28, 0 8px 14px #000b; }
.cta.alt { background: linear-gradient(180deg, #e9d8ff 0%, #b98cff 18%, #7a4fd6 46%, #3d2478 60%, #7a4fd6 80%, #d9c4ff 100%); color: #fff; border-color: #f2e8ff; text-shadow: 0 1px 0 #2a1060, 0 0 10px #c9a4ff88; box-shadow: 0 0 0 2px #1e0a3a, 0 0 0 3px #b98cff66, 0 8px 0 #1e0a3a, 0 16px 28px #000b, inset 0 2px 0 #f6eeff, inset 0 -3px 0 #2a1060; }
.cta.red { background: linear-gradient(180deg, #ffd6de 0%, #ff8ea3 16%, #ff2e55 44%, #8a0a25 60%, #ff4f70 80%, #ffd6de 100%); text-shadow: 0 1px 0 #4a0212; box-shadow: 0 0 0 2px #4a0212, 0 0 0 3px #ff8ea366, 0 8px 0 #4a0212, 0 16px 28px #000b, inset 0 2px 0 #fff0f3, inset 0 -3px 0 #6a0a1e; }
.cta small { letter-spacing: 1.5px; opacity: .9; }
/* steel and gold controls */
.icon-btn, .round-btn, .stake-btn, .mode-btn, .gamble-btn, .card .close, .help-nav .nav { background: linear-gradient(180deg, #4a5463 0%, #2a3140 40%, #151a22 100%); border: 1px solid #c3ccd8; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #7f8da066, 0 5px 0 #0a0814, 0 10px 18px #000a, inset 0 1px 0 #ffffff66, inset 0 -2px 0 #00000066; }
.icon-btn:active:not(:disabled), .round-btn:active:not(:disabled), .stake-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #7f8da066, 0 2px 0 #0a0814, 0 6px 10px #000a, inset 0 1px 0 #ffffff66; }
.mode-btn { border-radius: 14px; padding: 0 16px; }
.mode-btn small { color: #d9ad4a; letter-spacing: 3px; }
.mode-btn b { color: #f4f7fb; letter-spacing: 2px; }
.mode-btn.on { border-color: #ffd35b; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #d9ad4a, 0 5px 0 #0a0814, 0 10px 18px #000a, 0 0 24px #ffd35b44, inset 0 1px 0 #ffffff66; }
.mode-ind { width: 16px; height: 16px; background: radial-gradient(circle at 40% 35%, #3a4250, #0a0814 70%); box-shadow: inset 0 1px 2px #000, 0 0 0 2px #7f8da0, 0 0 0 3px #0a0814; }
.mode-btn.on .mode-ind { background: radial-gradient(circle at 40% 35%, #fff8d8, #ffd35b 45%, #b8741a 90%); box-shadow: 0 0 0 2px #7a4f0a, 0 0 0 3px #0a0814, 0 0 16px #ffd35b; }
.round-btn.on { border-color: #ffd35b; color: #fff8d8; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #d9ad4a, 0 5px 0 #0a0814, 0 10px 18px #000a, 0 0 20px #ffd35b55, inset 0 1px 0 #ffffff66; }
.gamble-btn { border-radius: 26px; height: 50px; }
.gamble-btn.on { border-color: #ffd35b; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #d9ad4a, 0 5px 0 #0a0814, 0 10px 18px #000a, 0 0 20px #ffd35b55; }
.buy-btn { border-radius: 16px; background: var(--metal-gold); border: 1px solid #fff3c4; color: #3a2604; text-shadow: 0 1px 0 #fff2c0; box-shadow: 0 0 0 2px #4a3208, 0 0 0 3px #d9ad4a66, 0 8px 0 #4a3208, 0 16px 28px #000b, inset 0 2px 0 #fffbe6, inset 0 -3px 0 #a0701a; position: relative; overflow: hidden; }
.buy-btn::after { content: ''; position: absolute; left: 4%; right: 4%; top: 3px; height: 40%; border-radius: 14px 14px 45% 45%; background: linear-gradient(180deg, #ffffff99, #ffffff08); pointer-events: none; }
.buy-btn .mad-sym { filter: drop-shadow(0 4px 6px #0008); }
.buy-btn small { color: #6a4610; }
.buy-btn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 2px #4a3208, 0 0 0 3px #d9ad4a66, 0 2px 0 #4a3208, 0 8px 14px #000b, inset 0 2px 0 #fffbe6; }
/* the spin button: an emerald jewel in a gold bezel */
.spin-btn { background: radial-gradient(circle at 38% 28%, #eafff1 0%, #7ff0a8 18%, #24c46a 42%, #0f7a40 72%, #063d20 100%); color: #063d20; box-shadow: 0 0 0 4px #0a0814, 0 0 0 9px #d9ad4a, 0 0 0 11px #4a3208, 0 0 0 12px #f7dc8655, 0 18px 40px #000d, 0 0 60px #46e07a33, inset 0 -12px 22px #00000055, inset 0 8px 14px #ffffffaa; }
.spin-btn .ring { border: 2px solid #ffffff44; inset: 12px; }
.spin-btn::after { content: ''; position: absolute; left: 14%; right: 14%; top: 8px; height: 34%; border-radius: 50%; background: linear-gradient(180deg, #ffffffbb, #ffffff00); pointer-events: none; }
.spin-btn .label { color: #eafff1; text-shadow: 0 2px 0 #063d20, 0 0 10px #46e07a; }
.spin-btn svg { filter: drop-shadow(0 2px 0 #b8ffd0); }
.spin-btn.pulse { animation: spinPulseLux 1.8s ease-in-out infinite; }
@keyframes spinPulseLux { 50% { box-shadow: 0 0 0 4px #0a0814, 0 0 0 9px #ffe27a, 0 0 0 11px #4a3208, 0 0 0 12px #f7dc8655, 0 18px 40px #000d, 0 0 90px #46e07a77, inset 0 -12px 22px #00000055, inset 0 8px 14px #ffffffaa; } }
.spin-btn:disabled { filter: saturate(.55) brightness(.7); }
/* segmented controls */
.seg { border-radius: 24px; border: 1px solid #d9ad4a66; background: #0a0814; box-shadow: inset 0 2px 6px #000, 0 1px 0 #ffffff14; padding: 3px; gap: 3px; }
.seg button { border-radius: 20px; height: 36px; }
.seg button + button { border-left: 0; }
.seg button.on { background: var(--metal-gold); color: #3a2604; text-shadow: 0 1px 0 #fff2c0; box-shadow: 0 2px 6px #000a, inset 0 1px 0 #fffbe6; }
/* hud */
.hud { background: linear-gradient(180deg, #0b082000, #0b0820f0 25%, #05040f); border-top: 1px solid #d9ad4a44; }
.hud::before { content: ''; position: absolute; left: 60px; right: 60px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #f7dc86, transparent); }
.hud-item span { color: #d9ad4a; }
.hud-item b { color: #fff; }
.hud-item.win b { color: #ffe9a6; }
/* ladder plaques and the reel frame */
.rung { border-radius: 12px; background: var(--glass); border: 1px solid #f7dc86aa; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #a67016, 0 8px 18px #000a, inset 0 1px 0 #ffffff33; }
.rung .num { background: var(--metal-gold); color: #3a2604; border-color: #4a3208; font-weight: 800; }
.rung small.price { color: #f7dc86; }
.rung .bulbs { background-image: radial-gradient(circle, #ffe9a6 0 1.2px, transparent 2px); opacity: .25; }
.rung.lit { border-color: #fff8d8; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #ffd35b, 0 8px 18px #000a, 0 0 28px #ffd35b99, inset 0 1px 0 #ffffff55; }
.reels { border-radius: 20px; padding: 14px; background: var(--metal-steel); box-shadow: 0 0 0 1px #0a0814, 0 0 0 3px #d9ad4a, 0 0 0 4px #4a3208, 0 0 0 5px #f7dc8655, 0 34px 70px #000d, 0 0 100px #7a4fd62a, inset 0 0 0 1px #ffffffaa; }
.reels::before { inset: 12px; border-radius: 10px; }
.cabinet-title { color: #f7dc86; }
.message { border-top: 1px solid #d9ad4a33; border-bottom: 1px solid #d9ad4a33; border-radius: 20px; background: linear-gradient(90deg, transparent, #0b0820e6 15%, #0b0820e6 85%, transparent); }
.meter, .feature-badge { border-radius: 14px; background: var(--glass); border: 1px solid #f7dc86aa; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #a67016, 0 8px 18px #000a, inset 0 1px 0 #ffffff33; }
.meter span { color: #d9ad4a; }
.lift .shaft, .trail .space { border-radius: 12px; }
.trail .space { border-color: #7f8da066; background: var(--glass); }
/* cards, dialogs and scenes: glass with a gold double frame and corner ornaments */
.card, .scene-card, .tombola-card { border-radius: 26px; background: var(--glass); border: 1px solid #f7dc86; box-shadow: 0 0 0 1px #0a0814, 0 0 0 3px #a67016, 0 0 0 4px #f7dc8655, 0 40px 100px #000e, inset 0 1px 0 #ffffff33, inset 0 0 80px #0a081499; backdrop-filter: blur(6px); }
.card::before, .scene-card::before, .tombola-card::before { content: ''; position: absolute; inset: 9px; border-radius: 19px; border: 1px solid #f7dc8655; pointer-events: none; }
.card::after, .scene-card::after, .tombola-card::after { content: ''; position: absolute; inset: 0; border-radius: 26px; pointer-events: none; background: radial-gradient(circle at 16px 16px, #ffe9a6 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 16px) 16px, #ffe9a6 0 3px, transparent 4px), radial-gradient(circle at 16px calc(100% - 16px), #ffe9a6 0 3px, transparent 4px), radial-gradient(circle at calc(100% - 16px) calc(100% - 16px), #ffe9a6 0 3px, transparent 4px); opacity: .8; }
.card > *, .scene-card > *, .tombola-card > * { position: relative; z-index: 1; }
.card .close { z-index: 3; }
.kicker { color: #f7dc86; }
.kicker::before, .kicker::after { content: ''; display: inline-block; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, #f7dc86); vertical-align: middle; margin: 0 10px; }
.kicker::after { background: linear-gradient(90deg, #f7dc86, transparent); }
.scene-head { padding-bottom: 8px; border-bottom: 1px solid #f7dc8644; }
.scene-meter { padding: 6px 16px; border-radius: 14px; background: var(--glass); border: 1px solid #f7dc86aa; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #a67016, inset 0 1px 0 #ffffff33; }
.scene-meter span { color: #d9ad4a; }
/* tombola cage: polished chrome with gold rivets */
.cage-frame { border-radius: 30px; background: var(--metal-steel); box-shadow: 0 0 0 1px #0a0814, 0 0 0 3px #d9ad4a, 0 0 0 4px #4a3208, 0 30px 60px #000d, inset 0 0 0 1px #ffffffaa; }
.cage-frame::before { inset: 16px; border-radius: 18px; box-shadow: inset 0 0 50px #000, inset 0 0 0 1px #7a4fd6, inset 0 0 0 3px #0a0814; }
.cage-frame .bulbs { background-image: radial-gradient(circle at 35% 35%, #fff8d8 0 1.2px, #d9ad4a 1.8px, #6a4610 2.8px, transparent 3.2px); background-size: 16px 16px; opacity: .9; padding: 7px; inset: 5px; }
.tombola-cage.spinning .cage-frame .bulbs, .tombola-cage.landed .cage-frame .bulbs { animation: none; opacity: 1; filter: brightness(1.4); }
.drum-window { border-color: #ffe27a; box-shadow: 0 0 0 1px #4a3208, 0 0 26px #ffd35b77, inset 0 0 0 1px #4a3208, inset 0 0 26px #ffd35b22; border-radius: 16px; }
.drum-pointer { background: var(--metal-gold); filter: drop-shadow(0 4px 6px #000c) drop-shadow(0 0 6px #ffd35b66); }
.tcard { border-radius: 16px; background: linear-gradient(165deg, #232838, #0b0d16 60%, #181c2a); border: 2px solid #d9ad4a; box-shadow: inset 0 0 0 1px #ffffff18, inset 0 0 30px #0a0814, 0 8px 20px #000a; }
.tcard::before { inset: 6px; border-color: #f7dc8633; border-radius: 10px; }
.tcard.spacer { border-color: #7a4fd6; background: linear-gradient(165deg, #3a2478, #150a30 60%, #2a1860); }
.tcard.mystery { border-color: #c9a4ff; }
.tcard.front { border-color: #fff8d8; }
.drum-lever i { background: linear-gradient(90deg, #6a4610, #f7dc86 40%, #a67016); }
.drum-lever b { background: radial-gradient(circle at 35% 30%, #ffb0c0, #ff2e55 45%, #6a0a1e); box-shadow: 0 4px 8px #000a, 0 0 0 2px #ffd35b, inset 0 -3px 5px #0006; }
.lrung { border-radius: 14px; background: var(--glass); border: 1px solid #f7dc86aa; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #a67016, 0 8px 18px #000a, inset 0 1px 0 #ffffff33; }
.lrung .num { background: var(--metal-gold); color: #3a2604; border-color: #4a3208; }
.lrung .meta small { color: #d9ad4a; }
.lrung.lit { border-color: #fff8d8; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #ffd35b, 0 8px 18px #000a, 0 0 30px #ffd35b99; }
.chance-ring { filter: drop-shadow(0 4px 8px #000c); }
.chance-ring .track { stroke: #6a0a1e; }
.gamble-up { border-radius: 16px; background: var(--glass); border: 1px solid #c9a4ff66; box-shadow: 0 0 0 1px #0a0814, inset 0 1px 0 #ffffff22; }
/* safe heist */
.prize-board { border-radius: 16px; border: 1px solid #f7dc8666; background: #05040fb0; box-shadow: inset 0 0 30px #000; }
.prize-board .chip { border-radius: 10px; border: 1px solid #d9ad4a88; background: linear-gradient(180deg, #22184a, #0b0820); box-shadow: inset 0 1px 0 #ffffff22; }
.prize-board h4 { color: #f7dc86; }
.safe-btn { border-radius: 16px; background: radial-gradient(ellipse at 50% 25%, #35206a, #170a30 70%); border: 1px solid #7f8da0aa; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #4a5463, 0 10px 22px #000b, inset 0 1px 0 #ffffff33, inset 0 -10px 22px #0000006a; }
.safe-btn:hover:not(:disabled) { border-color: #f7dc86; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #d9ad4a, 0 14px 26px #000b, 0 0 20px #ffd35b33, inset 0 1px 0 #ffffff33; }
.safe-btn.chosen { border-color: #fff8d8; box-shadow: 0 0 0 1px #0a0814, 0 0 0 3px #ffd35b, 0 10px 22px #000b, 0 0 30px #ffd35b88, inset 0 1px 0 #ffffff33; }
.safe-btn.chosen::after { background: var(--metal-gold); border: 1px solid #4a3208; }
.safe-btn .num { color: #d9ad4a; }
.safe-panel .phone { border-radius: 40px; padding: 8px 12px 8px 24px; background: var(--glass); border: 1px solid #f7dc86; box-shadow: 0 0 0 1px #0a0814, 0 0 0 3px #a67016, 0 0 30px #ffd35b44, inset 0 1px 0 #ffffff33; }
.safe-panel .cta { height: 50px; min-width: 170px; font-size: 18px; }
/* agent */
.tally > div { border-radius: 14px; background: var(--glass); border: 1px solid #f7dc86aa; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #a67016, inset 0 1px 0 #ffffff33; }
.tally .lamps i { background: radial-gradient(circle at 40% 35%, #2a3140, #0a0814 70%); border: 1px solid #7f8da0; box-shadow: inset 0 1px 2px #000; }
.tally .lamps i.lit { background: radial-gradient(circle at 40% 35%, #d9ffe6, #46e07a 45%, #0f7a40 90%); border-color: #d9ffe6; box-shadow: 0 0 12px #46e07a; }
.tally .mad .lamps i.lit { background: radial-gradient(circle at 40% 35%, #ffd0d8, #ff2e55 45%, #8a0a25 90%); border-color: #ffd0d8; box-shadow: 0 0 12px #ff2e55; }
.acard .front { border-radius: 14px; background: linear-gradient(165deg, #3a2a1c, #1c130c 55%, #2a1e14); border: 1px solid #d9ad4a; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #6a4610, 0 10px 20px #000a, inset 0 1px 0 #ffffff33, inset 0 0 26px #0a081466; }
.acard .front::before { content: ''; position: absolute; inset: 6px; border-radius: 9px; border: 1px solid #f7dc8633; }
.acard .front small { color: #f7dc86; }
.acard .back { border-radius: 14px; box-shadow: 0 0 0 1px #0a0814, 0 10px 20px #000a, inset 0 1px 0 #ffffff33; }
/* money */
.money-picks button { border-radius: 16px; background: radial-gradient(ellipse at 50% 25%, #5a1226, #170a30 70%); border: 1px solid #ff8ea3; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #8a0a25, 0 10px 22px #000b, inset 0 1px 0 #ffffff33, inset 0 -10px 22px #0000006a; }
.money-picks button:hover:not(:disabled) { border-color: #fff; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #ff2e55, 0 14px 26px #000b, 0 0 24px #ff2e5566; }
.bomb-ring-wrap::before { border: 2px dashed #d9ad4a55; box-shadow: inset 0 0 80px #7a4fd622, 0 0 0 1px #0a0814; background: radial-gradient(circle, #ffd35b0a, transparent 60%); }
.claw-core { border: 3px solid #ffd35b; box-shadow: 0 0 0 2px #4a3208, 0 0 0 4px #ff2e5566, 0 0 50px #ff2e5566, inset 0 0 40px #000; }
.money-log span { border-radius: 24px; border: 1px solid #d9ad4a88; background: linear-gradient(180deg, #22184a, #0b0820); }
.money-log span.gold { background: var(--metal-gold); color: #3a2604; text-shadow: 0 1px 0 #fff2c0; border-color: #4a3208; }
/* intro, summary, result, dialogs */
.tier-row.facts > div { border-radius: 14px; background: var(--glass); border: 1px solid #f7dc8666; box-shadow: 0 0 0 1px #0a0814, inset 0 1px 0 #ffffff22; }
.tier-row.facts span, .summary-amount span, .free-spins span { color: #d9ad4a; }
.summary-chips .chip { border-radius: 24px; border: 1px solid #d9ad4a88; background: linear-gradient(180deg, #22184a, #0b0820); }
.menu-list button { border-radius: 14px; background: var(--glass); border: 1px solid #f7dc8644; box-shadow: 0 0 0 1px #0a0814, inset 0 1px 0 #ffffff22; }
.menu-list button:hover { border-color: #f7dc86; }
.dialog-body h3 { color: #f7dc86; }
.buy-tiers button { border-radius: 16px; background: var(--glass); border: 1px solid #7f8da055; box-shadow: 0 0 0 1px #0a0814, inset 0 1px 0 #ffffff22; }
.buy-tiers button.on { border-color: #ffe27a; box-shadow: 0 0 0 1px #0a0814, 0 0 0 2px #d9ad4a, 0 0 26px #ffd35b55, inset 0 1px 0 #ffffff33; background: linear-gradient(165deg, #3a2a5c, #1a1040); }
.paytable > div, .tier-table > div, .astat { border-radius: 12px; background: var(--glass); border: 1px solid #f7dc8633; }
.pass-input { border-radius: 30px; border: 1px solid #d9ad4a; box-shadow: inset 0 2px 8px #000, 0 0 0 1px #0a0814; }
.risk-wheel { border: 5px solid #d9ad4a; box-shadow: 0 0 0 2px #4a3208, 0 0 0 4px #f7dc8655, 0 14px 30px #000c, inset 0 0 30px #0009; }
.wheel-hub { background: var(--metal-gold); border: 2px solid #fff3c4; box-shadow: 0 0 0 2px #4a3208, 0 8px 20px #000c, inset 0 -4px 8px #0006; }
.wheel-pointer { background: var(--metal-gold); }
.toast { border-radius: 30px; background: var(--glass); border: 1px solid #f7dc86aa; box-shadow: 0 0 0 1px #0a0814, 0 8px 20px #000a; color: #fff8d8; }
.logo-kicker, .logo-sub { color: #f7dc86; }
.logo-sub { text-shadow: 0 0 10px #d9ad4a88, 0 1px 2px #000; animation: none; }
.logo-sub::before, .logo-sub::after { background: linear-gradient(90deg, transparent, #f7dc86); }
.logo-sub::after { background: linear-gradient(90deg, #f7dc86, transparent); }
.hint { color: #e9e2ff; }
.hint b { color: #f7dc86; }
.footer-note { color: #a67016; }

/* ---------- Inspector Sprocket: the reactive character and his speech bubble ---------- */
.raven-icon { display: inline-block; width: 60px; height: 52px; background: url('../art/sym/raven.svg') center / contain no-repeat; }
.hero-wrap { position: relative; height: 236px; display: flex; align-items: flex-end; gap: 6px; }
.hero { position: relative; width: 128px; height: 236px; flex-shrink: 0; filter: drop-shadow(0 10px 14px #000c); }
.hero svg { width: 100%; height: 100%; overflow: visible; }
.hero #hero-root { transform-box: view-box; transform-origin: 150px 540px; animation: heroSway 5s ease-in-out infinite alternate; }
@keyframes heroSway { from { transform: rotate(-1deg); } to { transform: rotate(1.2deg); } }
.hero #arm-inner { transform-box: view-box; transform-origin: 198px 236px; transition: transform .45s cubic-bezier(.2, 1.2, .4, 1); }
.hero.win #arm-inner { transform: rotate(-28deg); }
.hero.big #arm-inner { animation: armPump .5s ease-in-out 4 alternate; }
@keyframes armPump { from { transform: rotate(-20deg); } to { transform: rotate(-52deg); } }
.hero .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } }
.hero .eyepiece { transition: filter .3s; }
.hero.win .eyepiece, .hero.big .eyepiece, .hero.bonus .eyepiece { filter: drop-shadow(0 0 6px #ffb347) drop-shadow(0 0 12px #ffb347); }
.hero #magnifier { transform-box: fill-box; transform-origin: center; }
.hero.win #magnifier, .hero.big #magnifier { animation: glint .9s ease-in-out 2; }
@keyframes glint { 50% { filter: brightness(1.8) drop-shadow(0 0 10px #9fdcff); } }
.hero.lose #head-inner { transform-box: fill-box; transform-origin: center; animation: headShake .45s ease-in-out 2; }
@keyframes headShake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.hero.bonus #hero-root { animation: heroJump .6s ease-out 2; }
@keyframes heroJump { 35% { transform: translateY(-16px) rotate(-2deg); } }
.bubble { position: relative; flex: 1; margin: 0 0 100px 4px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #fffaf0, #efe6d6); color: #2a1f1c; font-size: 12px; font-weight: 700; letter-spacing: .3px; line-height: 1.35; border: 1px solid #d9ad4a; box-shadow: 0 0 0 1px #4a3208, 0 8px 20px #000a; min-height: 46px; display: flex; align-items: center; }

.bubble::before { content: ''; position: absolute; left: -9px; bottom: 16px; border: 8px solid transparent; border-right-color: #efe6d6; border-left: 0; }
.bubble.pop { animation: bubblePop .4s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bubblePop { from { transform: scale(.6); opacity: 0; } }
.overlay.splash .splash-hero { position: absolute; left: 70px; bottom: 90px; width: 210px; height: 380px; }
.portrait .hero-wrap, .portrait .splash-hero { display: none; }