:root{--y:#ffd21f;--o:#ff8a00;--r:#e8202a;--g:#36e05a;--ink:#f4f1ff;--mute:#9a94b8;--px:'Press Start 2P',monospace}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{background:#07050d;color:var(--ink);font:400 15px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.room{position:fixed;inset:0;background:url(/img/arcade.webp) center/cover;filter:blur(14px) brightness(.35) saturate(1.3);transform:scale(1.1);z-index:-1}

header{display:flex;align-items:center;gap:12px;padding:16px 24px;position:relative;z-index:3}
.logo{font:400 20px var(--px);color:var(--y);text-shadow:3px 3px 0 var(--r),6px 6px 0 #000;letter-spacing:2px}
.logo b{color:#fff;font-weight:400}
.sp{flex:1}
.xl,.ca{display:flex;align-items:center;gap:8px;background:rgba(10,8,20,.75);border:2px solid #2c2650;border-radius:6px;padding:8px 11px;font:400 10px var(--px);color:var(--ink)}
.xl:hover,.ca:hover{border-color:var(--y)}
.ca code{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px ui-monospace,Menlo,monospace;color:#cfd}
.ca b{color:var(--y);font-weight:400}

/* the cabinet: a screen + a control panel */
.cab{width:min(1240px,96vw,calc((100vh - 150px)*16/9));margin:4px auto 0;position:relative}
.screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#000;border:10px solid #111;box-shadow:0 0 0 2px #2a2a2a,0 0 60px rgba(255,60,140,.25),0 0 120px rgba(40,200,255,.15),inset 0 0 80px rgba(0,0,0,.8);container-type:inline-size}
.world{position:absolute;inset:0}
.world.shake{animation:shake .25s steps(2)}
@keyframes shake{25%{transform:translate(-1%,0.4%)}50%{transform:translate(0.8%,-0.4%)}75%{transform:translate(-0.5%,0.3%)}}
.stage{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.f{position:absolute;bottom:8.5%;image-rendering:pixelated;transition:transform .12s steps(3);will-change:transform;filter:drop-shadow(0 .6cqw 0 rgba(0,0,0,.35))}
.f.bull{left:27%}
.f.bear{right:27%}
.f.flash{filter:brightness(3) saturate(0)}
.f.idle{animation:bob .9s steps(2) infinite}
@keyframes bob{50%{translate:0 .35cqw}}
.fx{position:absolute;inset:0;pointer-events:none}
.spark{position:absolute;width:9cqw;height:9cqw;margin:-4.5cqw 0 0 -4.5cqw;background:radial-gradient(circle,#fff 0 18%,var(--y) 19% 34%,var(--o) 35% 46%,transparent 47%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spark .35s steps(4) forwards}
.spark.big{width:16cqw;height:16cqw;margin:-8cqw 0 0 -8cqw}
@keyframes spark{0%{transform:scale(.3) rotate(0)}60%{transform:scale(1.1) rotate(20deg)}100%{transform:scale(1.3) rotate(30deg);opacity:0}}
.dmg{position:absolute;font:400 2.2cqw var(--px);color:#fff;text-shadow:.25cqw .25cqw 0 #000,-.1cqw -.1cqw 0 #000;animation:up .9s steps(6) forwards;white-space:nowrap}
.dmg small{display:block;font-size:1.1cqw;color:var(--y);margin-top:.5cqw}
@keyframes up{to{transform:translateY(-6cqw);opacity:0}}

.hud{position:absolute;top:3.5%;left:3%;right:3%;display:grid;grid-template-columns:1fr auto 1fr;gap:2.2cqw;align-items:start;pointer-events:none}
.bar{height:2.7cqw;border:.35cqw solid #fff;outline:.25cqw solid #000;background:#b0101a;position:relative;overflow:hidden}
.side.r .bar{transform:scaleX(-1)}
.bar i{position:absolute;inset:0 auto 0 0;width:100%}
.bar .lag{background:#ff4d4d;transition:width .8s .35s linear}
.bar .life{background:linear-gradient(180deg,#fff27a,var(--y) 40%,#e0a800);transition:width .15s steps(3)}
.nm{font:400 1.7cqw var(--px);margin-top:.9cqw;color:#fff;text-shadow:.2cqw .2cqw 0 #000;display:flex;gap:.8cqw;align-items:center}
.side.r .nm{justify-content:flex-end}
.v{color:var(--y);letter-spacing:.3cqw}
.timer{font:400 4.6cqw/1 var(--px);color:var(--o);text-shadow:.3cqw .3cqw 0 #000,0 0 1cqw rgba(255,138,0,.6);min-width:9cqw;text-align:center;margin-top:-.3cqw}
.timer.low{color:var(--r);animation:blink .5s steps(1) infinite}
.say{position:absolute;left:0;right:0;top:34%;text-align:center;font:400 7cqw/1.1 var(--px);color:var(--y);text-shadow:.5cqw .5cqw 0 var(--r),1cqw 1cqw 0 #000;opacity:0;pointer-events:none;transform:scale(1.4)}
.say.on{opacity:1;transform:scale(1);transition:transform .2s steps(3)}
.say small{display:block;font-size:2.2cqw;color:#fff;text-shadow:.3cqw .3cqw 0 #000;margin-top:2cqw}
.say.ko{font-size:13cqw;color:#ff2a2a;text-shadow:.6cqw .6cqw 0 #fff,1.2cqw 1.2cqw 0 #000}
.combo{position:absolute;top:22%;font:400 2.4cqw var(--px);color:#fff;text-shadow:.25cqw .25cqw 0 #000;opacity:0}
.combo.on{opacity:1}.combo.l{left:4%}.combo.r{right:4%;text-align:right}
.combo b{color:var(--y);font-size:3.4cqw;font-weight:400;display:block}
.coin{position:absolute;bottom:3%;left:0;right:0;text-align:center;font:400 2cqw var(--px);color:#fff;text-shadow:.25cqw .25cqw 0 #000;animation:blink 1s steps(1) infinite;opacity:0}
.coin.on{opacity:1}
@keyframes blink{50%{visibility:hidden}}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 12cqw rgba(0,0,0,.55);border-radius:10px}

.panel{margin:0 auto;width:92%;height:70px;background:linear-gradient(180deg,#1b1b22,#0d0d12);border-radius:0 0 18px 18px;display:flex;align-items:center;gap:34px;padding:0 34px;border:2px solid #222;border-top:0}
.stick{width:40px;height:40px;border-radius:50%;background:#111;box-shadow:inset 0 0 0 4px #222;position:relative}
.stick i{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-22px 0 0 -12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6a6a,#a3000c)}
.btns{display:grid;grid-template-columns:repeat(3,24px);gap:6px 10px}
.btns i{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)}
.btns .r{background:#e8202a}.btns .y{background:#ffd21f}.btns .b{background:#2a7bff}
.credit{margin-left:auto;font:400 10px var(--px);color:var(--y)}

.info{max-width:1240px;margin:46px auto 0;padding:0 2vw;display:grid;grid-template-columns:1fr 1.25fr;gap:22px}
.card{background:rgba(12,10,24,.88);border:3px solid #2c2650;border-radius:10px;padding:24px;box-shadow:0 20px 50px -20px #000}
.card h2{font:400 16px var(--px);color:var(--y);text-shadow:3px 3px 0 var(--r)}
.card h3{font:400 11px var(--px);color:var(--y);margin:20px 0 10px}
.sub{color:var(--mute);margin:10px 0 16px}
.ml{display:grid;gap:7px}
.who{font:400 11px var(--px);margin-top:10px}.who small{font:500 12px Inter;color:var(--mute)}
.who.bull{color:var(--g)}.who.bear{color:#ff5a5a}
.row{display:flex;justify-content:space-between;border-bottom:1px dashed #2c2650;padding:4px 0;font-size:14px}
.row b{font:400 10px var(--px);color:#fff}
.rules{margin-top:16px;color:var(--mute);font-size:14px}
.tot{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.tot div{background:#0a0816;border:2px solid #2c2650;border-radius:6px;padding:8px}
.tot span{display:block;font:400 7px var(--px);color:var(--mute)}
.tot b{font:400 11px var(--px);display:block;margin-top:6px}
.hits{display:grid;gap:4px;max-height:230px;overflow:auto;font:500 13px ui-monospace,Menlo,monospace}
.hit{display:grid;grid-template-columns:60px 70px 1fr auto;gap:8px;padding:3px 6px;border-radius:4px;background:#0a0816}
.hit .s.bull{color:var(--g)}.hit .s.bear{color:#ff5a5a}.hit .m{color:var(--y)}.hit .t{color:var(--mute)}
.res{display:flex;flex-wrap:wrap;gap:6px}
.res span{font:400 8px var(--px);padding:7px 8px;border-radius:4px;background:#0a0816;border:2px solid #2c2650}
.res .bull{color:var(--g)}.res .bear{color:#ff5a5a}.res .draw{color:var(--mute)}
.none{color:var(--mute);font:500 13px Inter;padding:6px}
footer{max-width:1240px;margin:30px auto 40px;padding:0 2vw;color:#6f6990;font-size:12px}
@media(max-width:860px){
  .cab{width:100vw}.screen{border-width:5px;border-radius:10px}.panel{height:52px;gap:18px;padding:0 16px}.stick{width:30px;height:30px}.btns{grid-template-columns:repeat(3,16px);gap:4px 6px}.btns i{width:16px;height:16px}.credit{font-size:7px}
  .info{grid-template-columns:1fr}.tot{grid-template-columns:repeat(2,1fr)}
  header{padding:12px}.logo{font-size:14px}.ca code{max-width:100px}.xl,.ca{font-size:8px;padding:7px}
}