/* ===== Design tokens ===== */
:root {
  --bg-1:#241253; --bg-2:#140a2e;
  --surface:#2a1a5e; --surface-2:#34206e;
  --border:rgba(255,255,255,.10);
  --text:#fff; --muted:#cfc6ef;
  --primary:#ffd23f; --primary-ink:#1b1033;
  --secondary:#7b6cf6; --danger:#ff5a7a; --success:#37d67a;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --font-round:ui-rounded,'SF Pro Rounded','Segoe UI Rounded',system-ui,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:var(--font-body); color:var(--text);
  background:radial-gradient(120% 120% at 50% 0%, var(--bg-1), var(--bg-2)) fixed;
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
}
#app { position:relative; padding:var(--sp-4); display:flex; flex-direction:column; align-items:center; }
#game {
  background:#0d0820; border-radius:var(--r-md); display:block; image-rendering:pixelated;
  width:min(92vw,560px); height:auto; aspect-ratio:1/1; touch-action:none; box-shadow:var(--shadow);
}

/* ===== Typography ===== */
.title { font-family:var(--font-round); font-weight:800; font-size:clamp(26px,6vw,40px); margin:0; letter-spacing:.5px; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.subtitle { margin:0; color:var(--muted); font-size:clamp(14px,3.5vw,18px); }
.muted { color:var(--muted); }
.hint { color:var(--muted); font-size:14px; max-width:430px; line-height:1.5; }

/* ===== Buttons ===== */
.btn {
  font-family:var(--font-round); font-weight:700; font-size:18px; min-height:48px;
  padding:12px 22px; border:none; border-radius:var(--r-md); cursor:pointer;
  color:var(--primary-ink); background:var(--primary); box-shadow:0 4px 0 rgba(0,0,0,.28);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease);
}
.btn:hover { filter:brightness(1.05); }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.28); }
.btn-primary { background:var(--primary); color:var(--primary-ink); }
.btn-secondary { background:var(--secondary); color:#fff; }
.btn-ghost { background:transparent; color:var(--text); box-shadow:none; border:2px solid var(--border); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.cta-row { display:flex; gap:var(--sp-3); flex-wrap:wrap; justify-content:center; }

:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:6px; }

/* ===== Overlay / panel ===== */
#overlay {
  /* Viewport-centered card that grows to its content (decoupled from the canvas
     size), so it never scrolls while there is screen space. */
  position:fixed; inset:0; margin:auto;
  width:min(92vw, 520px); height:fit-content; max-height:calc(100dvh - 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:var(--sp-3); text-align:center; overflow-y:auto; padding:var(--sp-4);
  background:linear-gradient(180deg, rgba(42,26,94,.96), rgba(20,10,46,.97));
  border:1px solid var(--border); border-radius:var(--r-lg);
  animation:overlay-in .28s var(--ease);
}
#overlay.hidden { display:none; }
@keyframes overlay-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
/* full-bleed header: fills the whole panel width, flush with the top edge */
.cover {
  width:calc(100% + 2 * var(--sp-4));
  margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-2);
  max-width:none; line-height:0; flex:none; /* keep its 2:1 aspect, don't let flex squish it */
}
.cover svg { width:100%; height:auto; display:block; border-radius:var(--r-lg) var(--r-lg) 0 0; }

/* ===== Top controls (Menu / Music) ===== */
.topbtn, #menu-btn, #mute-btn {
  display:none; position:absolute; top:var(--sp-5);
  font-family:var(--font-round); font-weight:700; font-size:13px; padding:8px 12px;
  border:none; border-radius:var(--r-sm); background:var(--secondary); color:#fff;
  cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.28);
}
#menu-btn:active, #mute-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28); }
#menu-btn { right:var(--sp-5); }
#mute-btn { right:96px; background:#3f3a6b; }
body.playing #menu-btn, body.playing #mute-btn { display:block; }

/* ===== D-pad ===== */
#dpad { display:none; margin-top:var(--sp-3); grid-template-columns:repeat(3,64px); grid-template-rows:repeat(2,64px); gap:var(--sp-2); touch-action:none; }
.dpad-btn { border:none; border-radius:var(--r-md); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:none; box-shadow:0 3px 0 rgba(0,0,0,.3); }
.dpad-btn:active { background:var(--secondary); transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.dpad-btn svg { width:30px; height:30px; fill:#fff; }
.d-up { grid-column:2; grid-row:1; } .d-left { grid-column:1; grid-row:2; }
.d-down { grid-column:2; grid-row:2; } .d-right { grid-column:3; grid-row:2; }
.d-left svg { transform:rotate(-90deg); } .d-right svg { transform:rotate(90deg); } .d-down svg { transform:rotate(180deg); }
@media (pointer:coarse) { body.playing #dpad { display:grid; } }

/* ===== Utility ===== */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===== Responsive ===== */
@media (max-width:640px) {
  #app { padding:4px; }
  /* Biggest square that fits the width and the height left after HUD + d-pad */
  #game { width:min(98vw, calc(100vh - 168px)); width:min(98vw, calc(100dvh - 168px)); }
  #hud { font-size:13px; gap:8px; padding:4px 2px; }
  #dpad { grid-template-columns:repeat(3,56px); grid-template-rows:repeat(2,56px); gap:6px; margin-top:6px; }
  /* full-screen menu on mobile: no card frame, fills the whole screen */
  #overlay { inset:0; margin:0; width:auto; height:auto; max-height:none; border:none; border-radius:0; gap:var(--sp-3); padding:var(--sp-4); justify-content:flex-start; }
  .cover { width:calc(100% + 2 * var(--sp-4)); margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-2); }
  .cover svg { border-radius:0; }
  #menu-btn, #mute-btn { top:10px; padding:6px 10px; } #menu-btn { right:8px; } #mute-btn { right:74px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) { *, #overlay { animation:none !important; transition:none !important; } }

/* ===== Hero picker cards ===== */
.hero-grid { display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; }
.hero-card {
  position:relative; width:108px; padding:6px; background:var(--surface);
  border:2px solid var(--border); border-radius:var(--r-md); cursor:pointer; color:var(--text);
  font-family:var(--font-round); font-weight:700; display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .12s var(--ease), border-color .12s var(--ease);
}
.hero-card .sprite { width:100%; aspect-ratio:1/1; background:rgba(255,255,255,.05); border-radius:10px; }
.hero-card .sprite svg { width:100%; height:100%; display:block; }
.hero-card:hover { transform:translateY(-2px); }
.hero-card.selected { border-color:var(--hero,#fff); box-shadow:0 0 0 3px color-mix(in srgb, var(--hero,#fff) 55%, transparent); }
.hero-card .check, .hero-card .lock { position:absolute; top:4px; right:4px; width:20px; height:20px; display:none; }
.hero-card.selected .check { display:block; }
.hero-card.taken { opacity:.45; cursor:not-allowed; }
.hero-card.taken .lock { display:block; }
.option { display:flex; align-items:center; gap:10px; font-size:16px; cursor:pointer; }
.option input { width:22px; height:22px; accent-color:var(--secondary); }
@media (max-width:640px) { .hero-card { width:84px; } }

/* ===== Forms (online menu) ===== */
.field { display:flex; flex-direction:column; gap:6px; align-items:flex-start; width:100%; max-width:320px; }
.field label { font-size:14px; color:var(--muted); }
.input {
  width:100%; min-height:48px; padding:10px 14px; font-size:18px; border-radius:var(--r-md);
  border:2px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); font-family:var(--font-body);
}
.input::placeholder { color:rgba(207,198,239,.6); }
.divider { display:flex; align-items:center; gap:10px; color:var(--muted); width:100%; max-width:320px; font-size:14px; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
.join-row { display:flex; gap:var(--sp-2); width:100%; max-width:320px; }
.join-row .input { text-transform:uppercase; letter-spacing:2px; text-align:center; }
.net-error { color:var(--danger); min-height:20px; font-size:14px; }

/* ===== Lobby ===== */
.room-code { font-family:var(--font-round); font-weight:800; font-size:clamp(28px,7vw,44px);
  letter-spacing:6px; background:var(--surface); padding:8px 18px; border-radius:var(--r-md); border:1px solid var(--border); }
.players { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.chip { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 12px; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.chip .badge { background:var(--primary); color:var(--primary-ink); border-radius:var(--r-pill); padding:0 8px; font-size:12px; font-weight:700; }

/* ===== HUD ===== */
#hud { display:flex; gap:var(--sp-3); padding:var(--sp-2) var(--sp-1); flex-wrap:wrap; justify-content:center; max-width:min(92vw,640px); font-family:var(--font-round); }
.hud-hero { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--hero,#fff); border-radius:var(--r-md); padding:4px 10px; font-size:15px; }
.hud-hero .name { font-weight:700; }
.hud-hearts { display:inline-flex; }
.hud-charges { display:inline-flex; align-items:center; gap:2px; }
.hud-pill { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px 12px; display:inline-flex; align-items:center; gap:6px; font-size:15px; }
.hud-ic { width:16px; height:16px; vertical-align:-3px; }
.ko { color:var(--danger); font-weight:800; }

/* ===== Quiz ===== */
.quiz-math { font-family:var(--font-round); font-weight:800; font-size:clamp(24px,6vw,36px); letter-spacing:1px; }
.quiz-text { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:460px; line-height:1.8; }
.word { font-family:var(--font-body); font-size:17px; padding:5px 9px; border-radius:8px; border:2px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
.word.sel { background:var(--secondary); border-color:var(--secondary); color:#fff; }
.quiz-feedback { min-height:20px; color:var(--primary); font-weight:700; font-family:var(--font-round); }

/* --- Online: stato connessione, recoverable, lobby --- */
.conn-status { color:var(--muted); font-size:14px; line-height:1.4; max-width:360px; }
.online-count { color:var(--text); font-weight:700; font-size:14px; }
.recoverable { display:flex; flex-direction:column; gap:var(--sp-2); width:100%; max-width:320px; align-items:center; }
.rejoin-btn { width:100%; }
.players-count { color:var(--muted); font-size:14px; font-weight:700; }
.chip.offline { opacity:.55; }
.chip .badge.off { background:var(--border); color:var(--text); }
.copy-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; }
.copy-feedback { color:var(--primary); min-height:18px; font-size:13px; }