*{box-sizing:border-box}
html,body{overscroll-behavior:none}
:root{
  --bg:#060812; --ink:#e9eef6; --muted:#92a1b5; --accent:#7df3c0; --danger:#ff5c7a; --card:rgba(255,255,255,0.06);
}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, #11183a 0%, #0b1027 40%, var(--bg) 100%); color:var(--ink);}
.wrap{max-width:1080px;margin:0 auto;padding:12px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.logo{font-weight:700;letter-spacing:.4px}
.stats{color:var(--muted)}
canvas#game{touch-action:none; width:100%;height:auto;display:block;background: linear-gradient(180deg, rgba(5,9,18,0.8), rgba(5,9,18,0.95)), url('../img/bg-grid.svg');
  background-size: cover;border-radius:16px;box-shadow: 0 8px 28px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);}
.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(800px 400px at 50% 40%, rgba(20,26,48,.95), rgba(6,8,18,.98));backdrop-filter: blur(4px);color:var(--ink);text-align:center;padding:20px;}
.overlay.hidden{display:none}
.overlay h1,.overlay h2{margin:.2em 0 .4em 0}
.overlay p{max-width:620px;color:var(--muted)}
.overlay button{background:linear-gradient(180deg,#1bffb3,#10c58f);color:#03281e;border:0;border-radius:12px;padding:12px 20px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 20px rgba(16,197,143,.35);transition: transform .1s ease;}
.overlay button:active{transform:translateY(1px)}
.overlay button.secondary{background:rgba(255,255,255,0.08);color:var(--ink);border:1px solid rgba(255,255,255,0.18);margin-left:8px}
.toggle{margin-top:12px;color:var(--muted)}
#leaderboard{max-width:420px;text-align:left}
#leaderboard li{padding:4px 6px;background:var(--card);margin:4px 0;border-radius:8px}
form#submitForm{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.controls-row{display:flex;gap:8px;align-items:center;justify-content:center;margin:8px 0;flex-wrap:wrap}
.controls-row select, form#submitForm input[type="text"]{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:var(--ink)}
.hidden{display:none !important}
/* powerups */
.pup{display:inline-flex;gap:6px;margin-right:6px;vertical-align:middle}
.pup span{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:2px 8px;font-size:12px;color:var(--ink)}
.pup img{width:16px;height:16px;display:inline-block}
/* portrait tweaks */
@media (orientation: portrait) {
  .wrap{padding:8px}
  .topbar{position:sticky;top:0;background:linear-gradient(180deg, rgba(6,8,18,.95), rgba(6,8,18,.7));backdrop-filter:blur(6px);z-index:5;padding:8px 4px;margin-bottom:6px}
  canvas#game{touch-action:none; max-height:82vh}
  .focus-mode canvas#game{touch-action:none; max-height:95vh !important}
  .overlay{padding:10px}
}

/* fullscreen / scroll lock */
body.focus-lock{overflow:hidden; height:100%; position:fixed; inset:0}

footer {
  text-align: center;
  font-size: 14px;
  color: #bbb;
  margin-top: 20px;
  padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}