*{box-sizing:border-box}
:root{
  --bg:#080611;--panel:#171026;--gold:#ffd166;--pink:#ff4fb4;
  --cyan:#42e8ff;--purple:#8c56ff;--text:#fff8ec;--muted:#b8aeca;
}
html,body{margin:0;min-height:100%;background:
radial-gradient(circle at 20% 0%,#38204f 0,transparent 30%),
radial-gradient(circle at 85% 20%,#2a1742 0,transparent 32%),
linear-gradient(#0a0712,#12091e 60%,#08050e);color:var(--text);
font-family:Arial,Helvetica,sans-serif}
body{padding:18px}.page{width:min(1180px,100%);margin:auto}
.brand{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 16px}
.badge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-weight:1000;
font-size:23px;color:#180b22;background:linear-gradient(145deg,#fff2a8,#f3a63c);
border:4px solid #fff6c8;box-shadow:0 0 0 5px #8a3cff,0 0 30px #ff4fb477}
h1{margin:0;font-size:clamp(29px,5vw,61px);letter-spacing:2px;line-height:.95;
background:linear-gradient(90deg,#fff6c8,#ffb23f,#ff4fb4,#42e8ff);
-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 20px #000}
.brand p{margin:7px 0 0;color:var(--muted);letter-spacing:4px;font-size:11px}
.game-card{background:linear-gradient(145deg,#201431,#0b0813);border:1px solid #ffffff1f;
border-radius:26px;padding:17px;box-shadow:0 25px 80px #000a,inset 0 1px #ffffff10}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.toolbar label{font-size:11px;letter-spacing:2px;color:var(--muted)}
select,.small{margin-left:8px;border:1px solid #ffffff25;border-radius:9px;background:#0d0a15;
color:var(--gold);padding:8px 10px;font-weight:800}.small{cursor:pointer}
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px}
.hud div{background:#090711;border:1px solid #ffffff18;border-radius:12px;text-align:center;padding:8px}
.hud span{display:block;font-size:10px;letter-spacing:2px;color:var(--muted)}
.hud strong{font:800 24px Consolas,monospace;color:var(--gold);text-shadow:0 0 13px #ffd16655}
.screen-wrap{position:relative;overflow:hidden;border:7px solid #050309;border-radius:18px;
box-shadow:0 0 0 1px #5e3b74,0 14px 35px #0009}
canvas{display:block;width:100%;height:auto;background:#1a0f2c;touch-action:none}
.scanlines{pointer-events:none;position:absolute;inset:0;opacity:.09;
background:repeating-linear-gradient(0deg,transparent 0 3px,#000 4px)}
.controls{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:12px;margin-top:15px}
button{border:1px solid #ffffff22;border-radius:14px;padding:14px;color:#fff;background:
linear-gradient(#392550,#171020);font-size:17px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #050309}
button:active{transform:translateY(4px);box-shadow:0 2px 0 #050309}
.start{color:#1c0e22;background:linear-gradient(135deg,#ffe18a,#ffad38,#ff5cb8)}
.instructions,footer{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
@media(max-width:650px){body{padding:7px}.game-card{padding:9px}.brand{justify-content:flex-start}
.badge{width:55px;height:55px}.brand p{font-size:8px;letter-spacing:1.7px}
.hud{grid-template-columns:repeat(2,1fr)}.controls{grid-template-columns:1fr 1fr}
.start{grid-column:1/-1;grid-row:1}.toolbar{align-items:flex-start;flex-direction:column}}