/* ===== Design tokens ===== */
:root {
  /* base */
  --bg:#0b0a17; --bg-2:#0f0d1f; --bg-1:#171430;
  --surface:#171430; --surface-2:#1e1a3d;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --border:rgba(255,255,255,.08);
  --text:#f3f1ff; --muted:#a7a2c9; --faint:#6f6a92;
  /* accents */
  --amber:#ffcb45; --amber-ink:#1a1330; --violet:#8b7cff;
  --primary:#ffcb45; --primary-ink:#1a1330; --secondary:#8b7cff; --danger:#ff5a7a; --success:#37d67a;
  /* hero colors */
  --blue:#4aa3ff; --pink:#ff6ec7; --green:#37d67a; --orange:#ffb74d;
  /* type scale */
  --fs-display:clamp(40px,6vw,64px); --fs-h2:clamp(26px,3.4vw,34px); --fs-h3:18px;
  --fs-body:16px; --fs-sm:14px; --fs-eyebrow:12px;
  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --radius:16px; --radius-sm:12px;
  --container:1080px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --font-round:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',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); font-size:var(--fs-body); line-height:1.55;
  background-color:var(--bg);
  background-image:radial-gradient(80% 60% at 75% -5%, rgba(139,124,255,.12), transparent 70%);
  min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased;
}
#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 - 188px)); width:min(98vw, calc(100dvh - 188px)); }
  #hud { font-size:13px; gap:8px; padding:4px 2px; }
  /* D-pad a tutta larghezza: le colonne riempiono lo spazio disponibile */
  #dpad { width:100%; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,clamp(56px,8vh,74px)); gap:8px; margin-top:8px; }
  #dpad .dpad-btn svg { width:38px; height:38px; }
  /* full-screen menu on mobile: no card frame, fills the whole screen.
     Quiz/messaggi sono corti → centrati verticalmente (niente vuoto in alto). */
  #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:center; }
  .cover { width:calc(100% + 2 * var(--sp-4)); margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-2); }
  /* Opzioni di gioco: il selettore va a capo a tutta larghezza sotto il titolo */
  .ally-pick { flex-wrap:wrap; }
  .ally-pick .cseg { margin-left:0; flex-basis:100%; }
  .ally-pick .cseg-b { flex:1; }
  .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); }
.hero-card.add-card{border-style:dashed;justify-content:center;color:var(--muted)}
.hero-card.add-card:hover{border-color:var(--amber);color:var(--amber)}
.hero-card.add-card .sprite.add{display:grid;place-items:center}
.hero-card.add-card .sprite.add .material-symbols-rounded{font-size:40px}
@media (max-width:640px) { .hero-card { width:84px; } }

/* ===== Game mode picker (two visual cards) ===== */
.modegrid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.modecard {
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:var(--s6) var(--s4); background:var(--surface); border:2px solid var(--border);
  border-radius:var(--r-lg); cursor:pointer; color:var(--text);
  transition:transform .12s var(--ease), border-color .12s var(--ease), background .12s;
}
.modecard:hover { transform:translateY(-3px); border-color:var(--amber); }
.modecard .material-symbols-rounded { font-size:48px; color:var(--amber); }
.modecard h3 { font-size:var(--fs-h3); font-weight:700; }
.modecard p { color:var(--muted); font-size:var(--fs-sm); margin:0; }
/* How-to: horizontal cards (icon left, text right) on a 2x2 grid — readable width */
.game-panel.wide { max-width:720px; }
.howto-list { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); width:100%; }
.howto-item { display:flex; align-items:center; gap:14px; text-align:left; padding:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.howto-item .hi-ico { font-size:30px; color:var(--violet); flex:0 0 auto; line-height:1; }
.howto-item .hi-txt h3 { font-size:var(--fs-h3); font-weight:700; line-height:1.1; margin:0; }
.howto-item .hi-txt p { color:var(--muted); font-size:var(--fs-sm); line-height:1.35; margin:0; }
@media (max-width:640px) { .modegrid { grid-template-columns:1fr; } .howto-list { grid-template-columns:1fr; } }

/* ===== Option toggles (visual, replace checkboxes) ===== */
.opttiles { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); width:100%; }
.opttile {
  display:flex; align-items:center; gap:12px; padding:var(--s3) var(--s4); text-align:left;
  background:var(--surface); border:2px solid var(--border); border-radius:var(--r-md);
  color:var(--text); cursor:pointer; transition:border-color .12s var(--ease), background .12s;
}
.opttile:hover { border-color:var(--line-2); }
.opttile .ot-ico { font-size:26px; color:var(--muted); }
.opttile .ot-txt { display:flex; flex-direction:column; line-height:1.25; }
.opttile .ot-txt b { font-weight:700; }
.opttile .ot-txt small { color:var(--muted); font-size:12px; }
.opttile .ot-check { margin-left:auto; font-size:22px; color:var(--muted); opacity:.25; transition:opacity .12s, color .12s; }
.opttile.on { border-color:var(--amber); background:color-mix(in srgb, var(--amber) 8%, var(--surface)); }
.opttile.on .ot-ico { color:var(--amber); }
.opttile.on .ot-check { color:var(--amber); opacity:1; }
@media (max-width:640px) { .opttiles { grid-template-columns:1fr; } }
/* Compagni AI: etichetta + selettore segmentato 0–3 */
.ally-pick {
  display:flex; align-items:center; gap:12px; padding:var(--s3) var(--s4); margin-bottom:var(--s3);
  background:var(--surface); border:2px solid var(--border); border-radius:var(--r-md);
}
.ally-pick .ap-head { display:flex; align-items:center; gap:12px; }
.ally-pick .ap-ico { font-size:26px; color:var(--muted); }
.ally-pick .ap-txt { display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.ally-pick .ap-txt b { font-weight:700; }
.ally-pick .ap-txt small { color:var(--muted); font-size:12px; }
/* Nell'editor (pannello stretto) il selettore Insegnante: titolo sopra, opzioni
   impilate una per riga a tutta larghezza */
.ed-preview .ally-pick { flex-direction:column; align-items:stretch; }
.ed-preview .ally-pick .cseg { flex-direction:column; margin-left:0; }
.ed-preview .ally-pick .cseg-b { flex:none; width:100%; }
.cseg { display:flex; gap:6px; margin-left:auto; }
.cseg-b {
  min-width:44px; min-height:44px; padding:6px 12px; border-radius:var(--r-sm); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.15;
  background:var(--bg); border:2px solid var(--border); color:var(--text);
  font-weight:700; font-size:15px; transition:border-color .12s, background .12s, color .12s;
}
.cseg-b.cseg-wide { font-size:13px; }
.cseg-b:hover { border-color:var(--line-2); }
.cseg-b.on { border-color:var(--amber); background:color-mix(in srgb, var(--amber) 14%, var(--surface)); color:var(--amber); }
/* Distinct sub-sections within the play screen (character vs options) */
.playgroup { width:100%; }
.playgroup + .playgroup { margin-top:var(--s4); padding-top:var(--s5); border-top:1px solid var(--line); }
.pg-title { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin-bottom:var(--s3); }
/* Tip / hint box */
.tip { display:flex; align-items:flex-start; gap:10px; width:100%; max-width:560px; text-align:left; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:color-mix(in srgb, var(--violet) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--violet) 32%, var(--line)); }
.tip .material-symbols-rounded { color:var(--violet); font-size:22px; flex:0 0 auto; }
.tip p { color:var(--text); font-size:var(--fs-sm); line-height:1.5; }

/* ===== Lobby stanze (#/online) ===== */
.rooms-lobby{max-width:860px;margin:0 auto}
.rooms-lobby #rooms-body{display:flex;flex-direction:column;gap:var(--s4)}
.room-panel{text-align:left}
.room-panel>.eyebrow{display:block;margin-bottom:var(--s4)}
.room-panel .acct-charhead{margin-top:0;margin-bottom:var(--s4)}
.room-create{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4);margin-bottom:var(--s4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md)}
/* 'Entra con codice' compatto: barra a una riga */
.join-compact{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s3);padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.join-compact .jc-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.join-compact .jc-label .material-symbols-rounded{font-size:18px;color:var(--amber)}
/* Label + input + CTA insieme, staccati e stessa altezza, tutto il blocco centrato */
.join-compact .join-row{display:flex;gap:var(--s2);align-items:center}
.join-compact .join-row .input{width:128px;height:38px;min-height:38px;box-sizing:border-box;text-align:center;letter-spacing:.12em;font-weight:700}
.join-compact .jc-msg{flex-basis:100%;text-align:center;min-height:0}
.join-compact .jc-msg:empty{display:none}
@media(max-width:560px){.join-compact .join-row{width:100%}.join-compact .join-row .input{flex:1;width:auto}}
.vis-pick .modecard{padding:var(--s4)}
.vis-pick .modecard .material-symbols-rounded{font-size:30px}
.vis-pick .modecard.sel{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--surface))}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
.room-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.rc-name{font-weight:700;font-size:var(--fs-h3)}
.rc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rc-code{font-family:ui-monospace,Menlo,monospace;letter-spacing:.12em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-weight:700}
.roombadge{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.roombadge .material-symbols-rounded{font-size:15px}
.roombadge.public{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
.roombadge.count.live{color:var(--success);border-color:color-mix(in srgb,var(--success) 45%,var(--line))}
.rc-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}
.btn-sm{height:38px;min-height:38px;padding:0 14px;font-size:var(--fs-sm)}
/* Toast di conferma (es. link copiato) */
.app-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:1000;
  max-width:90vw;padding:10px 18px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);
  box-shadow:0 8px 28px rgba(0,0,0,.45);font-size:var(--fs-sm);font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.app-toast.show{opacity:1;transform:translate(-50%,0)}
/* Pulsante Condividi su WhatsApp */
.btn-wa{background:#25d366;color:#0a2e17}
.btn-wa:hover{filter:brightness(1.05)}
.btn-wa .material-symbols-rounded{font-size:18px}

/* ===== Statistiche personaggio (#/statistiche) ===== */
.st-tiles{margin-bottom:var(--s5)}
.st-quiz{text-align:left;margin-bottom:var(--s5)}
.st-quiz .lead{margin-top:6px}
.st-quiz strong{color:var(--amber)}
.st-subjects{text-align:left;display:flex;flex-direction:column;gap:var(--s3)}
.st-subjects>.eyebrow{margin-bottom:var(--s2)}
.statbar-row{display:flex;align-items:center;gap:var(--s3)}
.sb-label{flex:0 0 110px;font-weight:600;font-size:var(--fs-sm)}
.sb-track{flex:1;height:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.sb-fill{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--amber));border-radius:999px}
.sb-val{flex:0 0 auto;font-weight:700;font-size:var(--fs-sm);min-width:78px;text-align:right}
.sb-val em{color:var(--faint);font-style:normal;font-weight:400}
@media(max-width:640px){.sb-label{flex-basis:80px}}

/* ===== Admin (#/admin) ===== */
.admin-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:var(--s5)}
.admin-tabs .tab{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-pill);padding:11px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.admin-tabs .tab:hover{color:var(--text);border-color:var(--line-2)}
.admin-tabs .tab.on{background:var(--amber);color:var(--amber-ink);border-color:transparent}
.admin-stats{grid-template-columns:repeat(4,1fr);margin-bottom:0}
.admin-subj{margin-bottom:var(--s4);text-align:left}
.admin-subj h3{font-size:var(--fs-h3);font-weight:700;margin-bottom:var(--s3)}
.admin-topic{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line)}
.admin-topic>b{min-width:120px;color:var(--muted);font-weight:600;font-size:var(--fs-sm)}
.admin-types{display:flex;flex-wrap:wrap;gap:6px}
.admin-type{font-size:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.admin-type em{color:var(--faint);font-style:normal;font-size:11px}
.admin-tablewrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);text-align:left}
.admin-table th,.admin-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.admin-table tr:last-child td{border-bottom:none}
.admin-av{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--surface-2);border-radius:8px}
.admin-av svg{width:30px;height:30px}
.admin-count{font-weight:700}
.adm-age{width:64px;text-align:center;padding:6px 8px;height:auto;min-height:0}
.bank-sel{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.bank-sel .input{width:auto;min-width:160px}
.bank-list{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s5)}
.bank-item{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.bank-add{border-top:1px solid var(--line);padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.bank-add h3{font-size:var(--fs-h3);font-weight:700;margin-bottom:6px}
@media(max-width:640px){.admin-stats{grid-template-columns:repeat(2,1fr)}}

/* ===== Widget feedback flottante ===== */
#fb-widget{position:fixed;right:18px;bottom:18px;z-index:60}
body.in-game #fb-widget{display:none}
.fb-fab{width:52px;height:52px;border-radius:50%;border:none;background:var(--amber);color:var(--amber-ink);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);display:grid;place-items:center}
.fb-fab .material-symbols-rounded{font-size:26px}
.fb-fab:hover{filter:brightness(1.05)}
.fb-panel{position:absolute;right:0;bottom:64px;width:320px;max-width:86vw;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.5);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);text-align:left}
.fb-head{display:flex;align-items:center;justify-content:space-between}
.fb-page{margin:0}
.fb-panel textarea.input{width:100%;resize:vertical;min-height:80px}
.fb-attach{display:flex;align-items:center;gap:10px;cursor:pointer}
.fb-preview{max-width:100%;border-radius:var(--r-md);border:1px solid var(--line)}
.fb-thanks{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s4);text-align:center}
.fb-thanks .material-symbols-rounded{font-size:40px;color:var(--danger)}
/* admin feedback */
.fb-card{padding:var(--s4) 0;border-top:1px solid var(--line);text-align:left}
.fb-card:first-child{border-top:none}
.fb-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.fb-card .fb-meta{color:var(--muted);font-size:var(--fs-sm)}
.fb-card .fb-text{margin:6px 0;white-space:pre-wrap}
.fb-thumb{max-width:220px;max-height:160px;border-radius:var(--r-md);border:1px solid var(--line);margin-top:6px}

/* ===== 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; }

/* --- Profili / account cloud --- */
.profiles { display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; max-width:420px; }
.profile-card { background:var(--surface); border:2px solid var(--border); border-radius:var(--r-md); padding:10px 14px; color:var(--text); font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.profile-card.selected { border-color:var(--primary); }
.profile-row { display:flex; align-items:center; gap:6px; }
.profile-row.selected .profile-card { border-color:var(--primary); }
.icon-btn { background:var(--surface); border:2px solid var(--border); border-radius:var(--r-md); color:var(--text); cursor:pointer; padding:10px 12px; font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.icon-btn:hover { border-color:var(--line-2); color:var(--amber); }

/* ===== Material Symbols (Google) — iconografia di sistema ===== */
.material-symbols-rounded {
  font-family:'Material Symbols Rounded';
  font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr;
  display:inline-block; vertical-align:middle;
  font-size:20px; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
.icon-btn .material-symbols-rounded { font-size:20px; }
.btn .material-symbols-rounded { font-size:20px; }
.dd-item .material-symbols-rounded { font-size:18px; margin-right:8px; vertical-align:-4px; }
.foot-heart { color:var(--danger); font-size:16px; vertical-align:-3px; }
.profile-card .pname { font-weight:700; }
.cloud-box { display:flex; flex-direction:column; gap:var(--sp-2); align-items:center; width:100%; max-width:320px; }

/* ===== Header ===== */
#topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#topbar .nav{display:flex;align-items:center;gap:var(--s6);height:68px}
#topbar .brand{background:none;border:0;color:var(--text);font:inherit;font-weight:800;font-size:17px;letter-spacing:-.01em;cursor:pointer}
#topbar .brand b{color:var(--amber)}
#topbar .links{display:flex;gap:var(--s5);margin-left:auto}
#topbar .hactions{display:flex;gap:var(--s3);align-items:center;margin-left:auto}
#topbar .hlink{background:none;border:0;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer}
#topbar .hlink:hover{color:var(--text)}
#topbar .hbtn{height:42px;min-height:42px}
#view{display:block;min-height:60vh}
/* ===== Hero ===== */
.hero{padding:var(--s9) 0 var(--s8);border-bottom:1px solid var(--line)}
.hero .herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.hero .display{margin:var(--s4) 0 var(--s5)}
.hero .accent{background:linear-gradient(90deg,var(--amber),#ff9d5c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.hero .trust{display:flex;gap:var(--s5);margin-top:var(--s6);color:var(--faint);font-size:var(--fs-sm)}
.hero .trust b{color:var(--text)}
.preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s5)}
.preview .pbar{display:flex;gap:6px;margin-bottom:var(--s4)}
.preview .pbar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.maze{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;aspect-ratio:1/1}
.maze span{border-radius:4px;background:#0c0a1c}
.maze .w{background:#272252}.maze .hero-c{background:var(--blue)}.maze .key{background:var(--amber)}.maze .mon{background:var(--pink)}.maze .exit{background:var(--green)}
/* anteprima hero animata (sottile) */
@keyframes mz-hero{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes mz-key{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 70%,transparent)}50%{transform:scale(1.1);box-shadow:0 0 8px 2px color-mix(in srgb,var(--amber) 55%,transparent)}}
@keyframes mz-mon{0%,100%{transform:translateX(-1px) rotate(-6deg)}50%{transform:translateX(1px) rotate(6deg)}}
@keyframes mz-exit{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent)}50%{box-shadow:0 0 9px 2px color-mix(in srgb,var(--green) 55%,transparent)}}
.maze .hero-c{animation:mz-hero 1.7s ease-in-out infinite;will-change:transform}
.maze .key{animation:mz-key 1.9s ease-in-out infinite}
.maze .mon{animation:mz-mon 1.1s ease-in-out infinite}
.maze .exit{animation:mz-exit 2.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.maze span{animation:none!important}}
/* mini-demo nell'hero: stage a dimensione FISSA (labirinto e quiz occupano lo stesso quadrato → niente scala/sposta) */
.demo-stage{aspect-ratio:1/1;display:grid}
.demo-stage .maze{aspect-ratio:auto;height:100%}
.demo-quiz{height:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--s4);padding:var(--s3);text-align:center}
.demo-quiz .dq-tag{align-self:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--violet) 35%,var(--line));border-radius:999px;padding:3px 10px}
.demo-quiz .dq-q{font-family:var(--font-round);font-weight:800;font-size:clamp(17px,2.2vw,22px);line-height:1.2}
.demo-quiz .dq-opts{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:240px;margin:0 auto;width:100%}
/* opzioni come i veri bottoni-risposta del gioco */
.demo-quiz .dq-opt{padding:10px 14px;border-radius:var(--r-md);background:var(--secondary);color:#fff;border:1px solid transparent;font-family:var(--font-round);font-weight:700;transition:background .25s,color .25s}
.demo-quiz .dq-opt.right{background:var(--success);color:#06210f}
/* ===== Sections ===== */
.h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em}
.dshead{max-width:560px;margin:0 auto var(--s7);text-align:center}
.dshead .h2{margin-top:var(--s2)}
/* landing feature/subject cards (responsive, any count) */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s4)}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);text-align:left}
.fcard .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);margin-bottom:var(--s3)}
.fcard .ico .material-symbols-rounded{font-size:28px;color:var(--violet)}
.fcard.subj .ico .material-symbols-rounded{color:var(--amber)}
.fcard h3{font-size:var(--fs-h3);font-weight:700}
.fcard p{color:var(--muted);font-size:var(--fs-sm);margin-top:6px;line-height:1.5}
.dshead .lead.center{max-width:620px;margin:var(--s3) auto 0}
/* materie in arrivo + box proposta */
/* materie: stesso blocco/griglia, tag e visibilità diversi (in arrivo / proponi) */
.fcard{position:relative}
.card-badge{position:absolute;top:var(--s4);right:var(--s4);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:3px 9px}
.card-badge.soon{color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--violet) 35%,var(--line))}
.card-badge.req{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line))}
.fcard.soon{opacity:.78}
.fcard.soon .ico .material-symbols-rounded{color:var(--muted)}
.fcard.req{cursor:pointer;border-style:dashed;border-color:var(--line-2);font:inherit;color:inherit;width:100%}
.fcard.req:hover{border-color:var(--amber);transform:translateY(-2px)}
.fcard.req .ico .material-symbols-rounded{color:var(--amber)}
/* personaggi: split anteprima + elenco numerato */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s6);align-items:center}
.charprev{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.charprev svg{width:200px;height:200px;max-width:100%;transition:opacity .2s}
.char-anim-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));border-radius:999px;padding:4px 12px}
.numlist{display:flex;flex-direction:column;gap:var(--s4);margin:0;padding:0}
.numlist li{display:flex;gap:20px;align-items:center;list-style:none}
.numlist .n{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--amber);font-weight:800;font-size:18px}
.numlist h3{font-size:var(--fs-h3);font-weight:700}.numlist p{color:var(--muted);font-size:var(--fs-sm);margin-top:4px;line-height:1.5}
@media(max-width:760px){.split{grid-template-columns:1fr}.charprev svg{width:150px;height:150px}}
/* online: fascia colorata con voci orizzontali */
.bandsection{background:linear-gradient(120deg,color-mix(in srgb,var(--violet) 14%,var(--surface)),#1a1530);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s8) 0}
.featrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s5)}
.featitem{display:flex;gap:20px;align-items:center}
.featitem .material-symbols-rounded{font-size:38px;color:var(--violet);flex:0 0 auto}
.featitem h3{font-size:var(--fs-h3);font-weight:700}.featitem p{color:var(--muted);font-size:var(--fs-sm);margin-top:4px;line-height:1.5}
/* genitori: pannello-elenco rassicurante */
.checklist{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s4)}
.checkitem{display:flex;gap:18px;align-items:center;text-align:left}
.checkitem .material-symbols-rounded{font-size:30px;color:var(--success);flex:0 0 auto}
.checkitem h3{font-size:var(--fs-h3);font-weight:700}.checkitem p{color:var(--muted);font-size:var(--fs-sm);margin-top:2px;line-height:1.5}
.checkitem + .checkitem{border-top:1px solid var(--line);padding-top:var(--s4)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.step .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--violet);font-weight:700;font-size:var(--fs-sm);margin-bottom:var(--s4)}
.step h3{font-size:var(--fs-h3);font-weight:700}.step p{color:var(--muted);font-size:var(--fs-sm);margin-top:6px}
.statsband{background:linear-gradient(120deg,var(--surface),#1a1530);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s8) 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);text-align:center;margin-bottom:var(--s5)}
.stat .num{font-size:40px;font-weight:800}.stat .lbl{color:var(--muted);font-size:var(--fs-sm)}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:var(--s4)}
.bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--amber),#7a5cf0)}
.tiny{font-size:12px;margin-top:10px}
.heroes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.htile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s4);text-align:center}
.htile .av{width:64px;height:64px;border-radius:16px;margin:0 auto var(--s3)}
.htile .nm{font-weight:600;font-size:var(--fs-sm)}
.finalcta{padding:var(--s9) 0;text-align:center;background:radial-gradient(100% 140% at 50% 0,rgba(139,124,255,.12),transparent)}
.center{text-align:center;justify-content:center}
.site-footer{border-top:1px solid var(--line);padding:var(--s7) 0;text-align:center;color:var(--faint);font-size:var(--fs-sm)}
/* ===== Game session visibility (canvas shown only while a game is active) ===== */
#app{display:none}
body.in-game #topbar{display:none} /* in partita il gioco è a tutto schermo (l'header fisso si sovrapponeva su mobile) */
body.in-game #app{display:flex;min-height:100dvh;justify-content:center}
body.in-game #view{display:none}
@media(max-width:860px){
  .hero .herogrid{grid-template-columns:1fr;gap:var(--s6)}
  .steps,.heroes,.stats{grid-template-columns:repeat(2,1fr)}
  #topbar .links{display:none}
  .ds-section,.hero{padding:var(--s8) 0}
}

/* ===== Design system (mockup v1) ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.eyebrow{display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.display{font-size:var(--fs-display);font-weight:800;letter-spacing:-.02em;line-height:1.06}
.lead{color:var(--muted);font-size:18px}
.ds-section{padding:var(--s9) 0}
.ds-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s7);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;min-height:50px;padding:0 22px;border-radius:var(--radius-sm);font-family:var(--font-body);font-weight:600;font-size:var(--fs-body);cursor:pointer;border:1px solid transparent;box-shadow:none;transition:transform .12s var(--ease),background .12s,border-color .12s}
.btn-primary{background:var(--amber);color:var(--amber-ink)}
.btn-primary:hover{transform:translateY(-1px);background:#ffd75f;filter:none}
.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--line-2)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--text);filter:none}
.btn:active{transform:translateY(1px);box-shadow:none}
.field{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:100%;max-width:340px}
.field label{font-size:var(--fs-sm);color:var(--muted)}
.input{width:100%;height:48px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--text);font:inherit;padding:0 14px}
.input::placeholder{color:var(--faint)}
.divider{display:flex;align-items:center;gap:10px;color:var(--faint);width:100%;max-width:340px;font-size:var(--fs-sm)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:6px}
.badge{background:var(--violet);color:#fff;border-radius:var(--r-pill);padding:1px 8px;font-size:11px;font-weight:700}
/* hidden attribute must win over display rules (e.g. .field{display:flex}) */
[hidden]{display:none!important}
/* auth gate */
.authwrap{display:flex;justify-content:center}
.authpanel{max-width:460px;width:100%;display:flex;flex-direction:column;gap:var(--s4);text-align:left}
.authpanel .field{max-width:none}
.auth-sent{display:flex;gap:12px;align-items:flex-start;padding:var(--s4);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--amber) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line))}
.auth-sent .material-symbols-rounded{color:var(--amber);font-size:24px;flex:0 0 auto}
.auth-sent p{margin:0;color:var(--text);font-size:var(--fs-sm);line-height:1.5}
/* account screen */
.acct-panel{max-width:760px;margin:0 auto}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.acct-cap{font-size:var(--fs-sm)}
.acct-email{font-size:18px}
.acct-charlabel{margin-top:var(--s6)}
.acct-heroes{margin-top:var(--s3)}
.htile .sprite-av{display:grid;place-items:center;background:var(--surface-2)}
.htile .sprite-av svg{width:54px;height:54px}
.acct-charhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap}
.subjchip{font-size:11px;line-height:1;padding:4px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.subjchip.all{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}

/* ===== Game overlays nel design system (parte 2) ===== */
#overlay{gap:var(--s4);padding:var(--s7);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);width:min(92vw,560px)}
.title{font-family:var(--font-body);font-weight:800;font-size:var(--fs-h2);letter-spacing:-.02em;text-shadow:none}
.subtitle{color:var(--muted);font-size:var(--fs-body)}
.hint{color:var(--muted);font-size:var(--fs-sm);max-width:440px;line-height:1.5}
.cover{margin:calc(-1 * var(--s7)) calc(-1 * var(--s7)) var(--s2);width:calc(100% + 2 * var(--s7))}
.cover svg{border-radius:var(--radius) var(--radius) 0 0}
/* in-game chrome */
.topbtn,#menu-btn,#mute-btn{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);box-shadow:none;border-radius:var(--radius-sm);font-family:var(--font-body);font-weight:600;font-size:13px}
#mute-btn{background:var(--surface)}
#menu-btn:active,#mute-btn:active{transform:translateY(1px);box-shadow:none}
.dpad-btn{background:var(--surface-2);border:1px solid var(--line);box-shadow:none;border-radius:var(--radius-sm)}
.dpad-btn:active{background:var(--violet);transform:translateY(1px);box-shadow:none}
/* hero picker → tile di sistema */
.hero-card{width:100px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-body);font-weight:600;padding:var(--s2)}
@media(max-width:480px){.hero-card{width:84px}}
.hero-card .sprite{background:var(--surface-2)}
.hero-card:hover{transform:translateY(-2px)}
.hero-card.selected{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.option{font-size:var(--fs-sm);color:var(--muted);gap:10px}
.option input{accent-color:var(--amber);width:20px;height:20px}
/* online + lobby */
.room-code{font-family:var(--font-body);font-weight:800;letter-spacing:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.net-error{color:var(--danger);font-size:var(--fs-sm)}
.online-count{color:var(--text);font-weight:700;font-size:var(--fs-sm)}
.conn-status{color:var(--muted);font-size:var(--fs-sm)}
/* attesa cold-start: animazione simpatica (eroe che saltella e raccoglie chiavi) */
.conn-anim{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:56px;margin-bottom:var(--s3)}
.ca-hero{width:24px;height:24px;border-radius:7px;background:var(--blue);box-shadow:0 3px 0 rgba(0,0,0,.25);animation:ca-hop .62s ease-in-out infinite}
.ca-dot{width:13px;height:13px;border-radius:50%;background:var(--amber);align-self:center;animation:ca-pulse 1.2s ease-in-out infinite}
.ca-dot:nth-child(3){animation-delay:.2s}.ca-dot:nth-child(4){animation-delay:.4s}
.conn-anim.sleepy{align-items:center;gap:6px}
.ca-hero.sleep{animation:ca-snore 2s ease-in-out infinite;opacity:.7}
.ca-z{color:var(--violet);font-weight:800;font-size:20px;animation:ca-float 2s ease-in-out infinite}
@keyframes ca-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes ca-pulse{0%,100%{transform:scale(.65);opacity:.45}50%{transform:scale(1);opacity:1}}
@keyframes ca-snore{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ca-float{0%{transform:translateY(4px);opacity:.3}100%{transform:translateY(-10px);opacity:0}}
@media(prefers-reduced-motion:reduce){.conn-anim *{animation:none!important}}
.players-count{color:var(--muted);font-size:var(--fs-sm);font-weight:700}
/* quiz */
.quiz-math{font-family:var(--font-body);font-weight:800;font-size:clamp(24px,6vw,36px)}
.word{font-family:var(--font-body);font-size:17px;border:1px solid var(--line-2);background:var(--surface-2);border-radius:10px;color:var(--text)}
.word.sel{background:var(--violet);border-color:var(--violet);color:#fff}
.word:disabled{opacity:.4;cursor:default}
.quiz-feedback{color:var(--amber);font-weight:700;font-family:var(--font-body)}
/* choice exercises (confronto/inglese/logica/storia) */
.quiz-choices{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;max-width:460px}
.quiz-choice{min-width:64px}
.quiz-choice.wrong{background:color-mix(in srgb,var(--danger) 30%,var(--surface-2));border-color:var(--danger);opacity:.7}
/* order exercise: the sentence being built */
.quiz-answer-row{min-height:32px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-family:var(--font-body);font-weight:700;font-size:18px;color:var(--amber);max-width:460px}
/* pre-game pages (scelta eroe / online / lobby) rendered in #view */
.game-panel{max-width:560px;margin:0 auto;padding:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s5);text-align:center}
/* Game screens: keep top/bottom balanced — drop the footer's extra top margin
   so the section's symmetric padding (96/96) isn't bottom-heavy. */
#view:has(.play-screen) ~ #site-footer{margin-top:0}
.game-panel > .btn{width:100%;max-width:340px}          /* single buttons (Crea partita, Indietro) full width */
.game-panel .hero-grid{justify-content:center;gap:var(--s3)}
.game-panel .option{justify-content:center;width:100%}
.game-panel .field{align-items:center}
.game-panel .field .input{text-align:center}
.game-panel .join-row{max-width:340px}
.game-panel .join-row .input{text-align:center}
.game-panel .divider,.game-panel .recoverable,.game-panel .net-error{width:100%;max-width:340px}
.game-panel .cta-row{margin-top:var(--s1)}
.game-panel .hint{margin-top:var(--s1)}
.game-panel .room-code{margin-bottom:var(--s1)}

/* persistent site footer */
#site-footer{border-top:1px solid var(--line);margin-top:var(--s8);padding:var(--s7) 0;color:var(--faint)}
body.in-game #site-footer{display:none}
#site-footer .footin{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center}
.fcredits{color:var(--muted);font-size:var(--fs-sm);margin:0}
.fcredits .ai{color:var(--violet);font-weight:700}
.fcredits .heart{color:var(--danger)}
.flinks{display:flex;gap:var(--s3);align-items:center;font-size:var(--fs-sm)}
.flinks button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px;padding:0}
.flinks button:hover{color:var(--text)}
.flinks span{color:var(--faint)}
.fcopy{font-size:12px;color:var(--faint);margin:0}

/* header online count */
.online-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}
.online-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 25%,transparent)}
.online-pill .oc{color:var(--text);font-weight:700}
@media(max-width:640px){.online-pill{display:none}}

/* user avatar + dropdown menu */
.usermenu{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:linear-gradient(160deg,var(--violet),#5b4bd6);color:#fff;font-weight:800;font-size:15px;cursor:pointer;display:grid;place-items:center;padding:0}
.avatar:hover{filter:brightness(1.08)}
.dropdown{position:absolute;right:0;top:50px;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:var(--s2);display:flex;flex-direction:column;gap:2px;z-index:50}
.dd-email{font-size:12px;color:var(--faint);padding:8px 10px;margin:0 0 4px;border-bottom:1px solid var(--line);word-break:break-all}
.dd-item{background:none;border:0;color:var(--text);font:inherit;font-size:var(--fs-sm);text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer}
.dd-item:hover{background:var(--surface-2)}

/* legal pages */
.legal{max-width:760px}
.legal-head{margin-bottom:var(--s6)}
.legal-upd{font-size:var(--fs-sm);margin-top:var(--s2)}
.legal-body{text-align:left}
.legal-body h3{font-size:var(--fs-h3);font-weight:700;margin:var(--s5) 0 var(--s2)}
.legal-body p,.legal-body li{color:var(--muted);font-size:var(--fs-body);line-height:1.6}
.legal-body ul{margin:var(--s2) 0 0 var(--s5)}
.legal-body a{color:var(--violet)}

/* character editor */
.editor{display:grid;grid-template-columns:300px 1fr;gap:var(--s5)}
.ed-preview{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
.ed-preview .stage{width:100%;aspect-ratio:1/1;max-width:220px;margin:0 auto;border-radius:var(--radius);background:radial-gradient(70% 70% at 50% 35%,#23204a,#12101f);display:grid;place-items:center;border:1px solid var(--line)}
.ed-preview .stage svg{width:72%;height:72%}
.ed-field{display:flex;flex-direction:column;gap:6px}
.ed-field label{font-size:var(--fs-sm);color:var(--muted)}
.agerow{display:flex;align-items:center;gap:10px}
.agerow input[type=range]{flex:1;accent-color:var(--amber)}
.agebadge{background:var(--violet);color:#fff;font-weight:700;border-radius:var(--r-pill);padding:2px 10px;font-size:13px}
.ed-controls .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s5)}
.ed-controls .tab{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-pill);padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ed-controls .tab.on{background:var(--amber);color:var(--amber-ink);border-color:transparent}
.group{margin-bottom:var(--s5)}
.group h3{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:10px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;padding:0}
.sw.sel{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber)}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{min-width:72px;padding:10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);color:var(--text);cursor:pointer;font:inherit;font-size:13px;text-transform:capitalize}
.opt.sel{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.subjlist{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.subjtoggle{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.subjtoggle input{width:18px;height:18px;accent-color:var(--amber)}
/* Materie come card selezionabili (stile landing) */
.subjgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);margin-bottom:var(--s3)}
.subjgrid .fcard.selectable{cursor:pointer;font:inherit;color:inherit;width:100%;transition:border-color .12s var(--ease),background .12s,transform .12s}
.subjgrid .fcard.selectable:hover{border-color:var(--line-2);transform:translateY(-2px)}
.subjgrid .fcard.selectable .sel-check{position:absolute;top:var(--s4);right:var(--s4);color:var(--muted);opacity:.25;transition:opacity .12s,color .12s}
.subjgrid .fcard.selectable .sel-check .material-symbols-rounded{font-size:24px}
.subjgrid .fcard.selectable.sel{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--surface))}
.subjgrid .fcard.selectable.sel .sel-check{color:var(--amber);opacity:1}
@media(max-width:720px){.editor{grid-template-columns:1fr}}

/* ===== Override mobile autoritativi (in fondo per vincere sul cascade) ===== */
@media (max-width:640px){
  /* Tab admin: una sola riga scorrevole invece di "esplodere" su più righe */
  .admin-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px}
  .admin-tabs .tab{flex:0 0 auto}
  /* Overlay (quiz/messaggi): a tutta larghezza e centrato verticalmente */
  #overlay{inset:0;margin:0;width:auto;max-width:none;height:auto;border-radius:0;justify-content:center}
}

/* ===== Juice quiz feedback (Juice Pass rifiniture) ===== */
@keyframes quiz-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
#overlay.shake { animation: quiz-shake .4s ease; }
@keyframes quiz-pop { 0%{transform:scale(1)} 35%{transform:scale(1.04)} 100%{transform:scale(1)} }
#overlay.quiz-correct { animation: quiz-pop .35s ease; }
.spark-burst { position:absolute; left:50%; top:40%; width:0; height:0; pointer-events:none; }
.spark { position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--amber,#ffd11a); transform:rotate(var(--a)) translateY(0); animation: spark-fly .42s ease-out forwards; }
@keyframes spark-fly { to { transform:rotate(var(--a)) translateY(-46px); opacity:0; } }

/* ===== Level transitions (Juice Pass rifiniture) ===== */
#overlay { transition: opacity .26s ease; }
#overlay.fade-out { opacity: 0; }
@keyframes level-in { from { opacity:0 } to { opacity:1 } }
#game.level-in { animation: level-in .36s ease; }

/* ===== Area Allenamento: rivelazione risposta corretta ===== */
.quiz-choice.right, .word.right { background: color-mix(in srgb, var(--ok, #37d67a) 30%, var(--surface-2, #fff)); border-color: var(--ok, #37d67a); color: var(--text); }
.quiz-feedback.train-ok { color: var(--ok, #37d67a); }

/* ===== Area Allenamento: layout pagina ===== */
.train-setup { display:flex; flex-direction:column; align-items:center; gap:var(--s4); text-align:center; }
.train-av { width:120px; }
.train-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s3); }
.train-tally { font-weight:700; color:var(--muted); }
.train-card { display:flex; flex-direction:column; align-items:center; gap:var(--s4); text-align:center; }
.train-card .field { align-items:center; margin-inline:auto; }
.train-card .field .input { text-align:center; }
.train-summary { gap:var(--s4); }

/* ===== Home loggata (dashboard) ===== */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 300px)); gap:var(--s4); justify-content:center; margin-bottom:var(--s6); }
.dash-card { display:flex; flex-direction:column; align-items:center; gap:var(--s2); text-align:center; padding:var(--s4); background:var(--surface, #fff); border:1px solid var(--line, #d7d2e8); border-radius:var(--radius, 14px); }
.dash-av { width:96px; }
.dash-name { font-weight:800; }
.dash-mini { font-size:var(--fs-sm, 13px); }
.dash-subj { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.dash-cta { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; margin-top:var(--s2); }
.dash-cta .btn { flex:1; min-width:110px; }
.dash-util { display:flex; gap:6px; justify-content:center; margin-top:4px; }
.dash-card.add-card { justify-content:center; color:var(--muted); cursor:pointer; }

/* Hero di benvenuto + metriche aggregate */
.dash-hero, .dh-hero { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  background:linear-gradient(135deg, color-mix(in srgb,var(--violet) 26%, var(--surface)), var(--surface));
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5) var(--s6); margin-bottom:var(--s5); }
.dh-hi { font:800 clamp(22px,3vw,30px)/1.1 var(--font-body); margin:0; }
.dh-sub { color:var(--muted); margin:4px 0 0; }
.dh-metrics { display:flex; gap:10px; flex-wrap:wrap; }
.dh-metric { text-align:center; background:color-mix(in srgb,var(--surface) 70%, transparent); border:1px solid var(--line); border-radius:14px; padding:10px 16px; min-width:84px; }
.dh-metric .n { display:block; font-weight:800; font-size:22px; line-height:1; }
.dh-metric .l { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.dh-metric.accent { border-color:color-mix(in srgb,var(--amber) 50%, var(--line)); }
.dh-metric.accent .n { color:var(--amber); }

/* Layout a due colonne (principale + sidebar) */
.dash-2col { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s5); align-items:start; }
.dash-main .dash-grid { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); justify-content:start; margin-bottom:0; }
.dh-side { display:flex; flex-direction:column; gap:var(--s4); }
.dh-panel { padding:var(--s5); }
.dh-panel h3 { margin:0 0 var(--s3); font-size:15px; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); margin:0 0 var(--s3); }
.sec-head h2 { font:800 18px/1 var(--font-body); margin:0; }
.linklike { background:none; border:0; padding:0; color:var(--violet); font-weight:700; font-size:13px; cursor:pointer; }
.linklike:hover { text-decoration:underline; }

/* Barre dei progressi per materia */
.dh-progress { display:flex; flex-direction:column; gap:6px; }
.barrow { display:flex; align-items:center; gap:10px; font-size:13px; }
.barrow .bl { width:84px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barrow .bt { flex:1; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.barrow .bf { display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--amber)); }
.barrow .bv { width:36px; text-align:right; font-weight:700; }

.dash-online { display:flex; flex-direction:column; align-items:stretch; gap:var(--s3); }
.dash-rooms-sec { display:flex; flex-direction:column; gap:6px; }
.dash-pub, .dash-mine { display:flex; flex-direction:column; gap:8px; }
.dash-room { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dash-room .rc-name { font-weight:700; }
.dash-room .rc-code { font-weight:800; letter-spacing:.04em; color:var(--muted); }
.dash-room .btn { margin-left:auto; }
/* Nella sidebar stretta il nome stanza va su una riga propria, codice/badge/Entra sotto. */
.dh-side .dash-room .rc-name { width:100%; }
@media (max-width:900px) { .dash-2col { grid-template-columns:1fr; } }

.train-setup .subjgrid { width:100%; }

/* Loader a tema (eroe che saltella), centrato nello schermo, in attesa dei dati. */
.dash-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3); min-height:60vh; text-align:center; }

/* Badge sorgente esercizio: "Professore AI" (vs deterministico). */
.quiz-ai { display:inline-flex; align-items:center; gap:4px; align-self:flex-end; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--violet); background:color-mix(in srgb, var(--violet) 14%, transparent); border:1px solid color-mix(in srgb, var(--violet) 40%, var(--line)); border-radius:999px; padding:3px 9px; }
.quiz-ai .material-symbols-rounded { font-size:14px; }

/* Brand: mascotte (cappello) accanto al wordmark */
.brand { display:inline-flex; align-items:center; gap:8px; }
.brand .bhat { flex:0 0 auto; }

/* Hero reel: crea l'eroe → rispondi → gioca, in un riquadro quadrato di dimensione FISSA
   (le scene non spostano il layout). max-width contiene l'altezza. */
#hero-reel { width:100%; max-width:400px; margin-inline:auto; display:flex; flex-direction:column; }
/* quadrato a dimensione fissa: le scene sono in assoluto, non possono ingrandirlo */
.reel-stage { position:relative; width:100%; aspect-ratio:1/1; }
.reel-stage > * { position:absolute; inset:0; }
.reel-stage .maze { aspect-ratio:auto; }
.reel-stage .demo-quiz { display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.reel-stage .char-anim { display:grid; place-items:center; }
.reel-stage .char-anim svg { width:min(66%,190px); height:auto; max-height:100%; }
/* chip che mostra il dettaglio in personalizzazione (scena avatar) */
.reel-chip { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--amber); background:color-mix(in srgb,var(--amber) 16%,var(--surface)); border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line)); border-radius:999px; padding:4px 11px; white-space:nowrap; }
.reel-chip .material-symbols-rounded { font-size:15px; }
/* didascalia: numero del passo + titolo + sottotitolo */
.reel-cap { display:flex; align-items:center; gap:10px; margin-top:14px; }
.reel-cap .reel-step { flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:12px; background:var(--amber); color:#1b1630; }
.reel-cap > div { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.reel-cap b { font-family:var(--font-round); font-weight:800; font-size:15px; }
.reel-cap span { color:var(--muted); font-size:12px; }

.classrow { display:flex; gap:8px; flex-wrap:wrap; }
.classbtn { min-width:48px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); font-weight:800; cursor:pointer; }
.classbtn.sel { border-color:var(--amber); color:var(--amber); }