:root { --bg:#050713; --panel:#0b1024; --cyan:#30f3ff; --pink:#ff3dbb; --yellow:#ffe66b; --text:#c8d8f4; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:radial-gradient(circle at 50% 20%, #12184a 0, var(--bg) 54%); color:var(--text); font-family:'Trebuchet MS', system-ui, sans-serif; }
body { display:flex; justify-content:center; overflow-x:hidden; }
button { font:inherit; }
.cabinet { width:min(1200px, 100%); min-height:100vh; padding:clamp(10px, 2vw, 28px); display:flex; flex-direction:column; }
.topbar, footer { display:flex; align-items:center; justify-content:space-between; letter-spacing:.16em; font-size:clamp(9px, 1.3vw, 13px); }
.topbar { min-height:52px; border:1px solid #28366d; padding:0 16px; background:#080d20; box-shadow:0 0 18px #192057; }
.brand { color:var(--cyan); font-weight:700; text-shadow:0 0 9px #00efff; }.brand-mark { color:var(--pink); margin-right:8px; }.brand-sub { color:#7581a8; font-weight:400; }
.status-lights { display:flex; gap:8px; margin-left:auto; margin-right:24px; }.status-lights i { width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink); }.status-lights i:nth-child(2){background:var(--yellow);box-shadow:0 0 8px var(--yellow)}.status-lights i:nth-child(3){background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.icon-button { background:none; border:0; color:#9ba9d0; cursor:pointer; font-size:11px; letter-spacing:.12em; }.icon-button span{color:var(--cyan); margin-left:4px}.icon-button[aria-pressed="true"] span{color:var(--pink)}
.game-frame { margin:14px 0; padding:7px; border:1px solid #364887; background:#080d1c; box-shadow:0 0 0 1px #121d45, 0 0 35px #161b54; flex:1; display:flex; }
.game-stage { position:relative; width:100%; min-height:min(70vh, 760px); overflow:hidden; background:#03040d; }
canvas { display:block; width:100%; height:100%; min-height:inherit; touch-action:none; }
.scanlines { position:absolute; inset:0; pointer-events:none; opacity:.11; background:repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px, transparent 5px); mix-blend-mode:screen; }
.hud { position:absolute; z-index:2; inset:17px 22px auto; display:grid; grid-template-columns:repeat(4,1fr); pointer-events:none; }.hud > div:nth-child(n+2){text-align:right}.hud-label{display:block;color:#7c8dbb;font-size:10px;letter-spacing:.2em}.hud strong{display:block;color:var(--cyan);font-family:monospace;font-weight:700;font-size:clamp(11px,1.8vw,18px);line-height:1.8;text-shadow:0 0 10px #00dff5}
.overlay { position:absolute; z-index:4; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(ellipse, rgba(8,13,38,.72), rgba(3,4,13,.9)); }.overlay[hidden]{display:none}.eyebrow{color:var(--pink);letter-spacing:.25em;font-size:11px;text-shadow:0 0 8px var(--pink);}.overlay h1,.overlay h2{font-family:monospace;color:#fff;margin:12px 0;line-height:1.35;text-shadow:4px 4px 0 #56227e, 0 0 24px var(--cyan)}.overlay h1{font-size:clamp(30px,7vw,72px);letter-spacing:-.08em}.overlay h1 span{color:var(--cyan)}.overlay h2{font-size:clamp(25px,5vw,48px)}.tagline{color:var(--yellow);letter-spacing:.32em;font-weight:600;font-size:clamp(10px,1.7vw,15px);}.primary-button{margin:22px 0 14px;padding:15px 25px;border:1px solid var(--cyan);background:rgba(20,41,78,.85);color:#fff;cursor:pointer;letter-spacing:.17em;font-weight:700;box-shadow:0 0 16px #00a4bf,inset 0 0 12px #0a557d;transition:transform .15s,background .15s}.primary-button:hover,.primary-button:focus-visible{background:#16466e;transform:translateY(-2px)}.primary-button span{color:var(--pink);margin-left:12px}.controls-hint{color:#8c9ac2;font-size:11px;letter-spacing:.12em}kbd{border:1px solid #7184b3;color:var(--cyan);padding:3px 6px;margin:0 2px;background:#121b3a;font-size:10px}.result-line{letter-spacing:.18em;color:#98a5c8}.result-line strong{display:block;color:var(--cyan);font-family:monospace;font-size:22px;margin-top:10px}.new-record{color:var(--yellow);letter-spacing:.15em;animation:pulse 1s infinite}.toast{position:absolute;z-index:3;top:22%;left:50%;transform:translateX(-50%);color:var(--yellow);font-family:monospace;font-size:clamp(11px,2vw,18px);text-shadow:0 0 12px #ff8d00;pointer-events:none;opacity:0}.toast.show{animation:toast 1.8s both}.mobile-controls{display:none;position:absolute;z-index:5;bottom:15px;left:0;right:0;justify-content:space-around;pointer-events:none}.mobile-button{pointer-events:auto;width:58px;height:46px;border:1px solid #396c9a;background:#101b3dcc;color:var(--cyan);font-size:22px;box-shadow:0 0 12px #074d75}.mobile-button.fire{color:var(--pink);border-color:#a52a83}.game-frame:has(.overlay.active) .mobile-controls{display:none}footer{color:#526184;padding:4px 2px;font-size:9px}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}20%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-15px)}}@keyframes pulse{50%{opacity:.4}}
@media (max-width:600px){.cabinet{padding:7px}.topbar{padding:0 10px;min-height:42px}.brand-sub,.status-lights{display:none}.game-frame{margin:8px 0;padding:3px}.game-stage{min-height:calc(100vh - 100px)}.hud{inset:10px 10px auto;}.hud-label{font-size:8px}.hud strong{font-size:9px}.mobile-controls{display:flex}.controls-hint{display:none}footer{font-size:7px}.overlay h1{font-size:32px}}