:root{
  --bg:#050712;--panel:#11162b;--panel2:#18203d;--text:#f5f8ff;
  --muted:#aeb9d9;--cyan:#6df7ff;--purple:#a98cff;--pink:#ff7ad9;
  --green:#7dffb2;--danger:#ff7185;--gold:#ffd56a;--line:#334273;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{
  padding:18px;
  background:
    radial-gradient(circle at 12% 12%,rgba(35,57,126,.55),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(95,37,115,.48),transparent 30%),
    linear-gradient(180deg,#070a16,#04050c 75%);
  overflow-x:hidden;
}
body:before,body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
}
body:before{
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle,#6df7ff 0 1px,transparent 1.5px);
  background-size:90px 90px,140px 140px;
  background-position:0 0,30px 45px;
  opacity:.19;
  animation:starDrift 28s linear infinite;
}
body:after{
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(109,247,255,.055) 48%,transparent 54%),
    linear-gradient(65deg,transparent 0 44%,rgba(169,140,255,.05) 50%,transparent 56%);
  background-size:600px 600px,700px 700px;
  animation:signalSweep 18s linear infinite;
}
@keyframes starDrift{to{background-position:0 900px,30px 1045px}}
@keyframes signalSweep{to{background-position:800px 0,-900px 0}}
a{color:inherit}.shell{max-width:1120px;margin:auto}
.topbar{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.brand{font-size:clamp(24px,4vw,42px);font-weight:900;letter-spacing:.08em;text-shadow:0 0 20px rgba(109,247,255,.25)}
.subtitle{color:var(--muted);margin-top:4px}
.btn,button{
  border:0;border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--purple));color:#07101d;
  text-decoration:none;display:inline-block;transition:.16s transform,.16s filter;
}
.btn:hover,button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn.secondary,button.secondary{background:#202744;color:var(--text);border:1px solid #3b4779}
.panel{
  background:linear-gradient(180deg,rgba(25,31,58,.97),rgba(13,17,35,.97));
  border:1px solid #2f3968;border-radius:18px;padding:18px;
  box-shadow:0 16px 50px #0008,inset 0 1px 0 rgba(255,255,255,.035)
}
.hud{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.badge{background:#0d1226;border:1px solid #344276;border-radius:999px;padding:8px 12px;color:var(--muted)}
.badge strong{color:var(--text)}
canvas{
  display:block;max-width:100%;background:
  radial-gradient(circle at 50% 35%,rgba(83,69,151,.28),transparent 35%),
  linear-gradient(180deg,#090e20,#050813);
  border:1px solid #33406f;border-radius:14px;margin:auto;touch-action:none;
  box-shadow:inset 0 0 40px rgba(37,55,119,.28),0 0 24px rgba(0,0,0,.5)
}
.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.controls button{min-width:54px}.message{text-align:center;color:var(--muted);min-height:24px;margin:10px 0}
.grid{display:grid;gap:10px}.card{background:linear-gradient(180deg,#151d38,#10152b);border:1px solid #34406f;border-radius:14px;padding:14px}
.instructions{margin:10px 0 14px;color:var(--muted);font-size:14px;line-height:1.5;background:#0b1022;border:1px solid #2a3766;border-radius:12px;padding:11px 13px}
.overlay{position:fixed;inset:0;background:#03050bd9;display:none;place-items:center;z-index:10;padding:18px}
.overlay.show{display:grid}.overlay-card{max-width:460px;width:100%;text-align:center;background:linear-gradient(180deg,#1b2343,#0d1227);border:1px solid #40518b;border-radius:18px;padding:24px}
.game-toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:10px}
footer{color:var(--muted);text-align:center;margin-top:22px;font-size:13px}
input,select{background:#0b1022;border:1px solid #3a4779;color:var(--text);border-radius:10px;padding:10px}
@media(max-width:600px){body{padding:10px}.panel{padding:12px}.brand{font-size:28px}.controls button{padding:12px 14px}}