:root{
  --bg:#06111f;
  --bg-soft:#0f1d34;
  --card:rgba(10,18,34,.92);
  --line:rgba(148,163,184,.16);
  --text:#e5eefc;
  --muted:#9fb1ca;
  --accent:#38bdf8;
  --accent-2:#f97316;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at top,#17345f 0%,rgba(23,52,95,0) 42%),
    linear-gradient(180deg,#06111f 0%,#040a14 100%);
  color:var(--text);
}
a{color:#7dd3fc}
.container{max-width:1120px;margin:0 auto;padding:22px}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.header a{text-decoration:none;font-weight:700}
.game-shell{
  background:var(--card);
  padding:20px;
  border-radius:22px;
  border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  margin-top:18px;
}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{
  background:linear-gradient(135deg,var(--accent),#2563eb);
  color:#fff;
  border:none;
  padding:11px 16px;
  border-radius:14px;
  cursor:pointer;
  transition:transform .15s ease,opacity .15s ease,filter .15s ease;
  font-weight:700;
}
button:hover{opacity:.96;transform:translateY(-1px);filter:brightness(1.04)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
button:focus{outline:2px solid rgba(56,189,248,.4);outline-offset:2px}
canvas{
  display:block;
  max-width:100%;
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.12);
  background:#020617;
}
.game-area{min-height:320px}
.hud{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  color:var(--muted);
  font-size:14px;
}
.hud strong{color:var(--text)}
@media (max-width:600px){
  .header{flex-direction:column;align-items:flex-start}
  .hud{flex-direction:column;align-items:flex-start}
}