:root { --pixel-font:"Courier New","Lucida Console",monospace; }

.overlay-stage { width:min(900px,76vw);filter:none;transition:opacity .25s steps(4,end); }
.overlay-stage.visible { transform:translateX(-50%) scale(var(--overlay-scale,1)); }
.overlay-stage.leaving { transform:translateX(-50%) scale(var(--overlay-scale,1)); }
.machine { filter:drop-shadow(11px 11px 0 rgba(2,3,8,.76)) drop-shadow(16px 16px 0 color-mix(in srgb,var(--cabinet),transparent 50%)); }

.marquee-shell { width:78%;margin-bottom:-4px;padding:8px 10px 7px;border:4px solid color-mix(in srgb,var(--cabinet),white 32%);border-radius:0;background:var(--cabinet);box-shadow:inset -6px -6px color-mix(in srgb,var(--cabinet),black 24%),inset 5px 5px color-mix(in srgb,var(--cabinet),white 10%),7px 7px 0 rgba(0,0,0,.7); }
.bulb-row { height:10px; }
.bulb-row i { width:6px;height:6px;border-radius:0;box-shadow:2px 2px 0 color-mix(in srgb,var(--accent),black 58%);animation:pixel-bulb 1s steps(2,end) infinite; }
.bulb-row i:nth-child(even) { animation-delay:-.5s; }
@keyframes pixel-bulb { 50% { opacity:.28; } }
.marquee-face { height:58px;border:3px solid color-mix(in srgb,var(--accent),white 35%);border-radius:0;background:var(--accent);box-shadow:inset -6px -6px color-mix(in srgb,var(--accent),black 24%),inset 4px 4px color-mix(in srgb,var(--accent),white 18%); }
.marquee-face h1 { font-size:clamp(1.5rem,2.7vw,2.45rem);font-weight:1000;letter-spacing:.08em;text-shadow:3px 3px 0 color-mix(in srgb,var(--cabinet),transparent 76%); }
.marquee-star { animation:pixel-star .8s steps(2,end) infinite; }
@keyframes pixel-star { 50% { transform:scale(1.35);opacity:.45; } }

.cabinet { padding:27px 30px 14px;border:4px solid color-mix(in srgb,var(--cabinet),white 28%);border-radius:0;background:var(--cabinet);box-shadow:inset -9px -9px color-mix(in srgb,var(--cabinet),black 24%),inset 7px 7px color-mix(in srgb,var(--cabinet),white 8%); }
.cabinet::before,.cabinet::after { top:43%;width:11px;height:88px;border-radius:0;box-shadow:3px 3px 0 color-mix(in srgb,var(--accent),black 55%);opacity:1; }
.cabinet::before { left:8px; }.cabinet::after { right:8px; }
.screen-bezel { padding:10px 12px 12px;border:3px solid color-mix(in srgb,var(--panel),white 27%);border-radius:0;background:var(--panel);box-shadow:inset 5px 5px color-mix(in srgb,var(--panel),black 24%),inset -5px -5px color-mix(in srgb,var(--panel),black 38%),5px 5px 0 rgba(0,0,0,.55); }
.screen-header { height:22px;padding:0 2px;color:color-mix(in srgb,var(--copy),transparent 38%);font:900 .54rem var(--pixel-font);letter-spacing:.08em; }
.screen-header span:last-child { font-family:var(--pixel-font); }
.screen-header span:last-child b { font:inherit; }
.screen-header i { width:7px;height:7px;border-radius:0;box-shadow:2px 2px color-mix(in srgb,var(--accent),black 55%);animation:pixel-bulb 1s steps(2,end) infinite; }
.screen-body { position:relative; }
.reels-view.view-muted { visibility:hidden; }
.reels-view.view-refresh { animation:pixel-view-in .3s steps(5,end); }
.reel-window { gap:7px;padding:8px;border:3px solid color-mix(in srgb,var(--copy),transparent 64%);border-radius:0;background:var(--reel);box-shadow:inset 6px 6px color-mix(in srgb,var(--reel),black 32%),inset -6px -6px color-mix(in srgb,var(--reel),black 45%); }
.reel-window::before { inset:0;z-index:7;width:auto;height:auto;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.16) 5px);opacity:.55; }
.reel-window::after { display:none; }
.payline-layer { z-index:6; }
.payline-path { stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(3px 3px 0 color-mix(in srgb,var(--accent),black 58%));animation:draw-payline .45s steps(7,end) forwards; }
.payline-path.jackpot { stroke-width:5;filter:drop-shadow(3px 3px 0 #7a5417); }
.reel { gap:6px; }
.reel-cell { border:2px solid color-mix(in srgb,var(--copy),transparent 72%);border-radius:0;background:repeating-conic-gradient(color-mix(in srgb,var(--reel),white 4%) 0 25%,var(--reel) 0 50%) 0 0/12px 12px;box-shadow:inset -4px -4px color-mix(in srgb,var(--reel),black 34%);transition:transform .1s steps(2,end),filter .1s,opacity .1s,box-shadow .1s; }
.reel-cell img { filter:drop-shadow(4px 4px 0 rgba(0,0,0,.48)); }
.reel-cell .symbol-glyph { font-family:Georgia,serif;text-shadow:4px 4px 0 color-mix(in srgb,var(--accent),black 55%); }
.reel-cell.jackpot-symbol::after { right:6px;top:4px;padding:2px;color:#ffcc4a;background:#22180a;filter:none;font:900 clamp(.58rem,1vw,.86rem) var(--pixel-font); }
.wild-marker { filter:drop-shadow(3px 3px 0 color-mix(in srgb,var(--accent),black 58%)); }
.wild-marker small { font-family:var(--pixel-font); }
.reel-cell.wild-resolving { border-color:var(--accent);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent),transparent 65%),4px 4px 0 color-mix(in srgb,var(--accent),black 52%);animation:wild-cycle-pixel .18s steps(2,end) infinite; }
.reel-cell.wild-landed { border-color:#fff;box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent),transparent 60%),5px 5px 0 var(--accent);animation:wild-land-pixel .45s steps(5,end); }
@keyframes wild-cycle-pixel { 50% { transform:translate(-3px,3px);filter:brightness(1.5); } }
@keyframes wild-land-pixel { 0% { transform:scale(1.18);filter:brightness(2); }100% { transform:none; } }
.reel.spinning .reel-cell { animation:reel-rattle-pixel .08s steps(2,end) infinite;filter:blur(2px); }
@keyframes reel-rattle-pixel { 50% { transform:translateY(7px); } }
.reel.stopped { animation:reel-stop-pixel .28s steps(5,end); }
@keyframes reel-stop-pixel { 0% { transform:translateY(-11px); }60% { transform:translateY(6px); }100% { transform:none; } }
.reel-cell.win { border-color:var(--accent);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent),transparent 73%),4px 4px 0 color-mix(in srgb,var(--accent),black 45%);animation:winner-cell-pixel .45s steps(2,end) infinite; }
.reel-cell.win.jackpot-win { border-color:#ffcc4a;box-shadow:inset 0 0 0 5px rgba(255,204,74,.28),5px 5px 0 #8b641c; }
@keyframes winner-cell-pixel { 50% { filter:brightness(1.35);transform:translateY(-3px); } }
.payline-dots { height:9px;margin-top:8px;gap:8px; }
.payline-dots i { width:5px;height:5px;border-radius:0; }
.payline-dots.active i { box-shadow:2px 2px 0 color-mix(in srgb,var(--accent),black 55%);animation:dot-wave-pixel .55s steps(2,end) infinite; }
@keyframes dot-wave-pixel { 50% { transform:translateY(-4px); } }

.win-flash { color:var(--accent);background:rgba(4,6,12,.9);text-shadow:5px 5px 0 color-mix(in srgb,var(--accent),black 55%);font-family:var(--pixel-font); }
.win-flash small,.win-flash span { font-family:var(--pixel-font); }.win-flash strong { letter-spacing:-.08em; }
.win-flash.show { animation:win-flash-pixel 1.4s steps(8,end) both; }
.win-flash.jackpot { color:#ffcc4a;text-shadow:5px 5px 0 #785117; }
@keyframes win-flash-pixel { 0% { opacity:0;transform:scale(.55); }12%,78% { opacity:1;transform:scale(1); }100% { opacity:0;transform:scale(1.12); } }

.idle-leaderboard { position:absolute;inset:0;z-index:9;padding:17px 18px 14px;display:grid;grid-template-rows:auto 1fr auto;border:3px solid color-mix(in srgb,var(--copy),transparent 62%);color:var(--copy);background:repeating-conic-gradient(color-mix(in srgb,var(--reel),white 4%) 0 25%,var(--reel) 0 50%) 0 0/14px 14px;box-shadow:inset 6px 6px color-mix(in srgb,var(--reel),black 30%),inset -6px -6px color-mix(in srgb,var(--reel),black 42%);font-family:var(--pixel-font);animation:pixel-view-in .3s steps(5,end); }
@keyframes pixel-view-in { 0% { opacity:0;transform:translateX(-14px); }100% { opacity:1;transform:none; } }
.idle-board-heading { padding:2px 3px 12px;display:flex;align-items:end;justify-content:space-between;border-bottom:2px solid var(--accent); }
.idle-board-heading small { color:color-mix(in srgb,var(--copy),transparent 47%);font:900 .57rem var(--pixel-font);letter-spacing:.1em; }
.idle-board-heading strong { color:var(--accent);font:900 clamp(1rem,2vw,1.55rem) var(--pixel-font);letter-spacing:.03em; }
.idle-board-list { padding:8px 2px;display:grid;align-content:start; }
.idle-score-row { min-height:48px;padding:0 7px;display:grid;grid-template-columns:45px minmax(0,1fr) auto;align-items:center;gap:12px;border-bottom:1px dashed color-mix(in srgb,var(--copy),transparent 76%); }
.idle-score-row:nth-child(even) { background:color-mix(in srgb,var(--panel),transparent 55%); }
.idle-score-rank { color:#ffcc4a;font:900 .76rem var(--pixel-font); }
.idle-score-name { overflow:hidden;font:900 clamp(.7rem,1.4vw,1rem) var(--pixel-font);white-space:nowrap;text-overflow:ellipsis; }
.idle-score-value { color:var(--accent);font:900 clamp(.75rem,1.6vw,1.08rem) var(--pixel-font);font-variant-numeric:tabular-nums; }
.idle-score-value::after { content:" PTS";color:color-mix(in srgb,var(--copy),transparent 55%);font-size:.56em; }
.idle-board-empty { display:grid;place-items:center;min-height:180px;color:color-mix(in srgb,var(--copy),transparent 50%);font:900 .68rem/1.6 var(--pixel-font);text-align:center; }
.idle-command { padding:10px 11px;display:flex;align-items:center;justify-content:space-between;border:2px dashed color-mix(in srgb,var(--accent),transparent 38%);color:color-mix(in srgb,var(--copy),transparent 40%);background:color-mix(in srgb,var(--panel),black 20%);font:900 .57rem var(--pixel-font); }
.idle-command b { color:var(--accent);font:900 .7rem var(--pixel-font); }

.result-panel { min-height:70px;border:3px solid color-mix(in srgb,var(--panel),white 22%);border-radius:0;background:var(--panel);box-shadow:inset -5px -5px color-mix(in srgb,var(--panel),black 28%),4px 4px 0 rgba(0,0,0,.54); }
.result-panel.win { border-color:var(--accent);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent),transparent 80%),4px 4px 0 color-mix(in srgb,var(--accent),black 55%); }
.spin-meta small,.spin-meta span,.result-copy small,.rank-copy small { font-family:var(--pixel-font); }
.spin-meta strong { font-family:var(--pixel-font);text-transform:uppercase; }
.result-copy strong { font-family:var(--pixel-font);letter-spacing:-.07em; }
.rank-copy > span { border:2px solid color-mix(in srgb,var(--copy),transparent 78%);border-radius:0;background:rgba(0,0,0,.18);box-shadow:inset -2px -2px rgba(0,0,0,.25); }
.rank-copy b { font-family:var(--pixel-font); }
.cabinet-footer { font-family:var(--pixel-font); }.speaker i { border-radius:0; }
.machine-feet i { border-radius:0;background:color-mix(in srgb,var(--cabinet),black 30%);box-shadow:inset -6px -5px rgba(0,0,0,.2); }
.test-ribbon { border:2px solid rgba(255,255,255,.23);border-radius:0;background:#070910;box-shadow:4px 4px 0 rgba(0,0,0,.6);font-family:var(--pixel-font);backdrop-filter:none; }
.machine.big-win .cabinet { animation:big-win-cabinet-pixel .35s steps(2,end) 6 alternate; }
.machine.big-win .marquee-shell { animation:big-win-marquee-pixel .2s steps(2,end) 10 alternate; }
@keyframes big-win-cabinet-pixel { to { filter:brightness(1.25); } }
@keyframes big-win-marquee-pixel { to { filter:brightness(1.45); } }

.overlay-stage.reels-only { width:min(820px,69vw); }
.reels-only .machine { filter:drop-shadow(8px 8px 0 rgba(2,3,8,.76)); }

@media (max-height:800px) {
  .overlay-stage { width:min(790px,68vw); }.marquee-face { height:49px; }.cabinet { padding-top:22px; }
}

.reel-cell{aspect-ratio:var(--cell-aspect,1.5)}
.reel-cell img{width:var(--emote-size,74%);height:var(--emote-size,74%)}
.reel-cell .symbol-glyph{scale:var(--emote-scale,1)}
.reel,.reel-window{gap:var(--reel-gap,6px)}

