:root{
  --navy:#0a1b3d; --navy-deep:#050d20;
  --royal:#1d4fa8; --royal-mid:#2660c9; --royal-deep:#12356f; --royal-lite:#3f7ae0;
  --gold:#ffd45c; --gold-hi:#fff0b8; --gold-mid:#f5a623; --gold-deep:#a35f04;
  --cream:#fffaf0; --ink:#08183f;
  --text:#ffffff; --muted:#bdd2f5; --muted-2:#c4d6f7;
  --green:#4fe08a; --green-hi:#a8f7c8; --green-deep:#1a7a4a;
  --red:#ff7b8f; --red-hi:#ffc2cc; --red-deep:#a0243a;
  --purple:#a98bff;
  --font:'Fredoka',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --r-lg:26px; --r-md:20px; --r-sm:14px;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
/* L'attributo hidden deve vincere su qualunque regola di display.
   Senza questa riga una classe con `display:flex` o `display:grid` lo annulla
   silenziosamente: il pannello di accesso restava aperto e copriva l'app. */
[hidden]{display:none!important}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--text); font-size:18px; line-height:1.55; font-weight:400;
  background:
    radial-gradient(1000px 620px at 50% -6%, #2a5fbf 0%, transparent 62%),
    radial-gradient(760px 520px at 88% 4%, rgba(245,166,35,.22), transparent 60%),
    linear-gradient(180deg,var(--navy) 0%,#071634 55%,var(--navy-deep) 100%);
  background-attachment:fixed; min-height:100vh;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px;margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;letter-spacing:-.02em;font-weight:700}
button{font:inherit;color:inherit;border:0;background:none}

.screen{display:none}
.screen.active{display:block;animation:screenIn .34s var(--spring)}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* ── barra superiore ─────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(29,79,168,.97),rgba(12,42,95,.9));
  border-bottom:3px solid rgba(255,212,92,.36);
  box-shadow:0 6px 20px rgba(3,10,30,.5);
}
.brand-link{display:inline-flex;border-radius:12px;transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
.brand-link:active{transform:scale(.94)}
.brand-link:focus-visible{outline:3px solid var(--gold-hi,#fff0b8);outline-offset:3px}
.brand{height:44px;width:auto;display:block;
  filter:drop-shadow(0 3px 6px rgba(3,10,30,.5)) drop-shadow(0 0 12px rgba(255,212,92,.18))}
.stats{display:flex;gap:9px}
.stat{
  display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  background:linear-gradient(180deg,rgba(63,122,224,.6),rgba(18,53,111,.75));
  border:2px solid rgba(255,212,92,.3);
  box-shadow:0 3px 0 rgba(4,14,40,.55),inset 0 1px 0 rgba(255,255,255,.2);
  font-size:17px;font-weight:700;
}
.stat i{font-style:normal;font-size:16px}
.stat.streak i{color:#ff9d4d}
.stat.gold i{color:var(--gold)}
.stat b{font-variant-numeric:tabular-nums}
.stat.bump{animation:bump .5s var(--spring)}
@keyframes bump{0%,100%{transform:scale(1)}35%{transform:scale(1.22)}}

.intro{padding:30px 0 10px;text-align:center}
.intro h1{
  font-size:clamp(28px,6.6vw,38px);line-height:1.15;
  background:linear-gradient(180deg,var(--cream) 0%,var(--gold) 54%,var(--gold-mid) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(6,16,45,.6));
}
.intro p{color:var(--muted);margin:12px auto 0;font-size:17px;max-width:420px}

/* ── percorso ────────────────────────────────────────────────────── */
/* Ogni sezione è un desk del percorso e ha il suo sfondo: la palette arriva
   da [data-scene="…"] più sotto, il disegno da scenes.js. I valori di
   default qui sotto valgono per una sezione senza scena dichiarata. */
.unit{
  margin:34px 0 10px;padding:2px 0 14px;border-radius:calc(var(--r-lg) + 6px);
  --sc-bg1:var(--royal-mid); --sc-bg2:var(--royal-deep);
  --sc-far:#ffffff; --sc-mid:#ffffff; --sc-near:var(--gold-hi);
  --sc-accent:rgba(255,212,92,.34); --sc-tint:rgba(38,96,201,.14);
  background:radial-gradient(120% 70% at 50% 0%,var(--sc-tint),transparent 72%);
}
.unit-head{
  padding:20px 22px;border-radius:var(--r-lg);margin-bottom:26px;position:relative;overflow:hidden;
  min-height:108px;
  background:linear-gradient(180deg,var(--sc-bg1),var(--sc-bg2));
  border:3px solid var(--sc-accent);
  box-shadow:0 7px 0 rgba(5,18,48,.6),inset 0 2px 0 rgba(255,255,255,.22);
}
.unit-head::after{content:'';position:absolute;inset:0 0 auto;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none;z-index:2}
.unit-head .n,.unit-head h2,.unit-head p,.unit-head .unit-badge{position:relative;z-index:3}
.unit-head .n{display:block;color:var(--gold-hi);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.18em}
.unit-head h2{font-size:24px;margin-top:5px;text-shadow:0 2px 0 rgba(5,18,48,.5)}
.unit-head p{margin:5px 0 0;color:#d6e5ff;font-size:15.5px}

/* ── la scena di sfondo della sezione ────────────────────────────── */
/* La scena occupa la metà destra della testata e sfuma verso il testo, che sta
   a sinistra. Ancorarla a destra con proporzioni naturali (`meet`, non
   `slice`) è ciò che evita di ingrandire il disegno fino a farne una macchia
   dietro il titolo. */
.unit-scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.22) 40%,#000 76%);
  mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.22) 40%,#000 76%)}
.scene-art{position:absolute;top:0;right:0;height:100%;width:56%;opacity:.5}
.scene-art .a{fill:var(--sc-far)}
.scene-art .b{fill:var(--sc-mid)}
.scene-art .c{fill:var(--sc-near)}
/* Un tracciato senza riempimento è una linea: l'attributo perde contro il
   CSS, quindi va riaffermato con più specificità o le linee diventano
   macchie piene. */
.scene-art .a[fill="none"]{fill:none;stroke:var(--sc-far);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scene-art .b[fill="none"]{fill:none;stroke:var(--sc-mid);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scene-art .c[fill="none"]{fill:none;stroke:var(--sc-near);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-transparency:reduce){ .scene-art{opacity:.28} }
/* su schermo stretto il titolo occupa quasi tutta la riga: la scena si
   ritira e si attenua, invece di finirgli dietro */
@media (max-width:520px){
  .scene-art{ width:50%; opacity:.4 }
  .unit-scene{
    -webkit-mask-image:linear-gradient(90deg,transparent 12%,rgba(0,0,0,.16) 46%,#000 84%);
    mask-image:linear-gradient(90deg,transparent 12%,rgba(0,0,0,.16) 46%,#000 84%)}
}

/* Le sedici palette, una per corso. Il fondo più chiaro della testata resta
   scuro abbastanza da tenere il testo bianco sopra la soglia AA: i valori
   sono verificati in tests/contrasto.mjs. */
.unit[data-scene="trade"]{ --sc-bg1:#1c4fa4; --sc-bg2:#0e2c63; --sc-far:#4f86e8; --sc-mid:#7fb0ff; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.38); --sc-tint:rgba(28,79,164,.20) }
.unit[data-scene="quant"]{ --sc-bg1:#12645c; --sc-bg2:#083b36; --sc-far:#3fa89b; --sc-mid:#7fd8c8; --sc-near:#a8f7c8; --sc-accent:rgba(168,247,200,.34); --sc-tint:rgba(18,100,92,.20) }
.unit[data-scene="accounts"]{ --sc-bg1:#37465e; --sc-bg2:#1d2837; --sc-far:#6d7f9c; --sc-mid:#a9b8cf; --sc-near:#fff0b8; --sc-accent:rgba(255,240,184,.30); --sc-tint:rgba(55,70,94,.24) }
.unit[data-scene="legal"]{ --sc-bg1:#6b2440; --sc-bg2:#3d1224; --sc-far:#a8536f; --sc-mid:#d38fa4; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.34); --sc-tint:rgba(107,36,64,.22) }
.unit[data-scene="shipping"]{ --sc-bg1:#14567a; --sc-bg2:#08334a; --sc-far:#3f93bd; --sc-mid:#84c8e6; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.36); --sc-tint:rgba(20,86,122,.22) }
.unit[data-scene="sustainability"]{ --sc-bg1:#1f6338; --sc-bg2:#0e3a20; --sc-far:#49a068; --sc-mid:#8ad9a3; --sc-near:#e9f7a8; --sc-accent:rgba(233,247,168,.32); --sc-tint:rgba(31,99,56,.22) }
.unit[data-scene="tech"]{ --sc-bg1:#4a2b8c; --sc-bg2:#271350; --sc-far:#8062cc; --sc-mid:#b49bf2; --sc-near:#7fe8ff; --sc-accent:rgba(127,232,255,.32); --sc-tint:rgba(74,43,140,.24) }
.unit[data-scene="pricing"]{ --sc-bg1:#7a4a12; --sc-bg2:#472a08; --sc-far:#b8802f; --sc-mid:#e0b064; --sc-near:#fff0b8; --sc-accent:rgba(255,240,184,.34); --sc-tint:rgba(122,74,18,.22) }
.unit[data-scene="hedging"]{ --sc-bg1:#234c86; --sc-bg2:#122a4f; --sc-far:#5480bd; --sc-mid:#8fb4e4; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.34); --sc-tint:rgba(35,76,134,.22) }
.unit[data-scene="options"]{ --sc-bg1:#6a2a6e; --sc-bg2:#3c123f; --sc-far:#a057a5; --sc-mid:#d194d6; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.32); --sc-tint:rgba(106,42,110,.22) }
.unit[data-scene="oil"]{ --sc-bg1:#4a3320; --sc-bg2:#241708; --sc-far:#8a6a44; --sc-mid:#c0a077; --sc-near:#ff9d4d; --sc-accent:rgba(255,157,77,.34); --sc-tint:rgba(74,51,32,.26) }
.unit[data-scene="renewable"]{ --sc-bg1:#0f5f70; --sc-bg2:#063a45; --sc-far:#3ba0b3; --sc-mid:#84d9e6; --sc-near:#d8f77f; --sc-accent:rgba(216,247,127,.32); --sc-tint:rgba(15,95,112,.22) }
.unit[data-scene="metals"]{ --sc-bg1:#6d3a1f; --sc-bg2:#3a1d0d; --sc-far:#a56a44; --sc-mid:#d1a184; --sc-near:#ffc98a; --sc-accent:rgba(255,201,138,.32); --sc-tint:rgba(109,58,31,.24) }
.unit[data-scene="softs"]{ --sc-bg1:#5a6120; --sc-bg2:#32380c; --sc-far:#8d9640; --sc-mid:#c3cd7c; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.34); --sc-tint:rgba(90,97,32,.22) }
.unit[data-scene="tradefinance"]{ --sc-bg1:#1c4076; --sc-bg2:#0d2245; --sc-far:#4a76b5; --sc-mid:#8aacdd; --sc-near:#fff0b8; --sc-accent:rgba(255,240,184,.34); --sc-tint:rgba(28,64,118,.22) }
.unit[data-scene="financing"]{ --sc-bg1:#17544a; --sc-bg2:#0a3029; --sc-far:#3f8f7f; --sc-mid:#83c8b6; --sc-near:#ffd45c; --sc-accent:rgba(255,212,92,.34); --sc-tint:rgba(23,84,74,.22) }

/* ── la rotta ─────────────────────────────────────────────────────
   Il percorso non è un elenco di schede: è una rotta che si risale.
   I nodi sono pedine circolari scostate dall'asse da --dx (impostata
   dal motore), il ritmo lo dà l'onda, non un bordo. --wave stringe
   l'ampiezza sugli schermi stretti senza toccare il markup. */
.nodes{--wave:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 0 8px}
/* Sulla rotta non si disegna una linea: i nodi scostati bastano a dare la
   direzione, e una linea dritta fra due nodi sfalsati leggerebbe come un
   errore di allineamento. Il connettore resta come respiro verticale. */
.connector{width:4px;height:34px;background:none;border-radius:0;flex:0 0 auto}
.node{
  position:relative;width:172px;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:8px 6px 12px;border-radius:22px;cursor:pointer;text-align:center;
  background:transparent;border:0;box-shadow:none;
  transform:translateX(calc(var(--dx,0px) * var(--wave)));
  transition:filter .18s ease,opacity .18s ease;
}
.node:hover:not(.locked) .medal{transform:translateY(-3px)}
.node:active:not(.locked) .medal{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.22),0 1px 0 rgba(5,18,48,.55)}
.node:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.node .medal{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;font-weight:700;color:var(--ink);
  background:linear-gradient(180deg,#6f96d8,#2c5697);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.22),0 6px 0 rgba(5,18,48,.55);
  transition:transform .12s var(--spring),box-shadow .12s var(--spring);
}
/* Sotto i 430px l'ampiezza piena dell'onda spinge i nodi oltre il bordo:
   si stringe l'onda e il nodo, non il disco. */
@media (max-width:430px){.nodes{--wave:.72}.node{width:158px}.node-copy{max-width:152px}}
@media (max-width:360px){.nodes{--wave:.58}.node{width:142px}.node-copy{max-width:138px}}
.node.done .medal{background:linear-gradient(180deg,var(--green-hi),var(--green-deep));color:#06371f}
.node.next .medal{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));position:relative}
/* L'anello pulsante era un box-shadow animato: ridipinge a ogni fotogramma.
   Un pseudo-elemento che scala e sfuma usa solo transform e opacity, le due
   proprietà che il browser compone senza toccare layout né pittura. */
.node.next .medal::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:3px solid rgba(255,212,92,.55);
  animation:pulseRing 2s ease-out infinite;
  will-change:transform,opacity;
}
@keyframes pulseRing{from{transform:scale(1);opacity:.75}to{transform:scale(1.42);opacity:0}}
.node.next{border-color:var(--gold)}
.node.locked{opacity:.42;cursor:not-allowed;filter:saturate(.4)}
/* Il lucchetto va visto: a #9fb0c9 su questo disco stava a 2.47:1. */
.node.locked .medal{background:linear-gradient(180deg,#64748f,#374260);color:#eaf1fb;animation:none;font-size:24px}
.node.done .medal{font-size:34px}
.node-copy{display:block;max-width:164px}
.node strong{display:block;font-size:14px;font-weight:600;line-height:1.25;
  text-shadow:0 2px 6px rgba(3,10,30,.85),0 1px 0 rgba(3,10,30,.7)}
.node small{display:block;color:#dceaff;font-size:14.5px;margin-top:3px}   /* non var(--muted): su royal-mid darebbe 3.81:1 */
.node small{font-size:11.5px;margin-top:2px;opacity:.82;letter-spacing:.02em}
.node.locked strong{opacity:.9}
/* La bolla "Start" è l'unico invito esplicito della schermata: sta sopra
   il nodo corrente, non in un angolo, e ha la punta che lo indica. */
.node .tag{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);padding:5px 15px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));color:var(--ink);
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
  box-shadow:0 3px 0 rgba(140,88,6,.75);animation:tagBob 1.8s ease-in-out infinite;z-index:2;
}
.node .tag::after{content:'';position:absolute;left:50%;bottom:-6px;width:0;height:0;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--gold-mid);border-bottom:0}
@keyframes tagBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
/* Quanto manca alla fine del corso: sta in cima al percorso, non dentro
   un desk, perché è l'unico numero che vale per tutta la carriera. */
.course-progress{max-width:460px;margin:2px auto 18px;padding:12px 15px;border-radius:16px;
  background:linear-gradient(160deg,rgba(16,40,86,.55),rgba(6,20,48,.7));
  border:1px solid rgba(173,205,255,.14)}
.course-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.course-top span{font-size:12px;font-weight:600;letter-spacing:.04em;color:#bcd2f0}
.course-top b{font-size:13px;color:var(--gold-hi)}
.course-track{height:9px;border-radius:99px;overflow:hidden;background:rgba(2,10,28,.6);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.course-track i{display:block;height:100%;border-radius:inherit;width:0;
  background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));transition:width .5s ease}

/* Il percorso mostra solo i livelli: questa riga dice dove e' finito il resto,
   altrimenti ruolo, mappa e statistiche sembrano semplicemente spariti. */
.path-footnote{max-width:460px;margin:22px auto 4px;text-align:center;font-size:12.5px;
  line-height:1.6;color:var(--muted-2)}
/* Un collegamento si deve poter toccare con un pollice: 44px è il minimo. */
.path-footnote a{display:inline-block;min-height:44px;padding:12px 10px;color:var(--gold-hi)}

.reset-row{text-align:center;padding:34px 0 50px}
.link-btn{color:var(--muted-2);font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px}
.link-btn:hover{color:var(--text)}

/* ── lezione ─────────────────────────────────────────────────────── */
.lesson-top{display:flex;align-items:center;gap:16px;padding:16px 20px;max-width:640px;margin:0 auto}
.icon-btn{font-size:26px;color:var(--muted);cursor:pointer;padding:4px 10px;border-radius:12px;line-height:1}
.icon-btn:hover{color:var(--text)}
.progress{flex:1;height:20px;border-radius:999px;background:rgba(4,14,40,.75);overflow:hidden;
  box-shadow:inset 0 3px 5px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.07)}
.progress>span{display:block;height:100%;width:0;border-radius:999px;position:relative;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-mid));
  transition:width .45s var(--spring);box-shadow:0 0 12px rgba(255,212,92,.55)}
.progress>span::after{content:'';position:absolute;inset:2px 4px auto;height:32%;border-radius:999px;background:rgba(255,255,255,.5)}
.hearts{display:flex;align-items:center;gap:5px}
.hearts .h{display:block;line-height:0;color:#ff6b52;
  filter:drop-shadow(0 2px 3px rgba(2,8,22,.55));
  transition:transform .3s var(--spring),opacity .3s ease}
.hearts .h svg{display:block}
/* vita spesa: il salvagente resta, spento — si vede che c'era */
.hearts .h.gone{color:#3d4a63;opacity:.3;transform:scale(.8);filter:none}
.hearts.lost .h{animation:heartLose .5s var(--spring)}
@keyframes heartLose{0%,100%{transform:scale(1)}40%{transform:scale(1.3)}}

/* La domanda stava incollata in alto con mezzo schermo vuoto sotto.
   "safe center" la centra quando ci sta e torna in alto quando è lunga,
   senza mai tagliarne la testa. */
.lesson-wrap{padding:18px 20px 210px;display:flex;flex-direction:column;
  justify-content:safe center;min-height:calc(100dvh - var(--lesson-top-h,72px))}
.q-kicker{display:block;color:var(--gold-hi);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}
.q-prompt{font-size:clamp(22px,5.2vw,27px);font-weight:600;line-height:1.35;margin-bottom:26px;text-shadow:0 2px 0 rgba(5,16,45,.4)}

.opts{display:grid;gap:13px;counter-reset:opt}
.opt{
  position:relative;width:100%;text-align:left;padding:18px 20px;border-radius:var(--r-md);cursor:pointer;
  background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));
  border:3px solid rgba(255,212,92,.18);
  box-shadow:0 6px 0 rgba(5,18,48,.6),inset 0 2px 0 rgba(255,255,255,.15);
  font-size:18px;font-weight:500;line-height:1.4;
  transition:transform .12s var(--spring),border-color .16s ease,background .16s ease;
}
.opt:hover:not([disabled]){border-color:rgba(255,212,92,.5);transform:translateY(-2px)}
.opt:active:not([disabled]){transform:translateY(4px);box-shadow:0 2px 0 rgba(5,18,48,.6)}
.opt:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
.opt.sel{border-color:var(--gold);background:linear-gradient(180deg,var(--royal-lite),var(--royal));transform:translateY(-2px);
  box-shadow:0 8px 0 rgba(5,18,48,.6),inset 0 2px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,212,92,.25)}
/* Con mouse e tastiera si risponde molto più in fretta se il numero del
   tasto è scritto sull'opzione. Su touch il numero sarebbe solo rumore. */
@media (pointer:fine){
  .opt{padding-right:52px}
  .opt::after{counter-increment:opt;content:counter(opt);position:absolute;right:14px;top:50%;
    transform:translateY(-50%);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
    font-size:12.5px;font-weight:700;color:#9fb7db;background:rgba(2,10,28,.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  .opt.sel::after{color:var(--ink);background:var(--gold-mid)}
  .opt.ok::after,.opt.no::after{opacity:0}
}
.opt.ok{border-color:var(--green);background:linear-gradient(180deg,#2f9e69,#14633c);animation:popIn .42s var(--spring)}
.opt.no{border-color:var(--red);background:linear-gradient(180deg,#b8394f,#6d1a2b);animation:shake .45s ease}
@keyframes popIn{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

.numwrap{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.numwrap span{font-size:30px;font-weight:700;color:var(--gold)}
input[type="text"],input[type="number"]{
  flex:1;padding:17px 20px;border-radius:var(--r-md);font-size:24px;font-weight:600;font-family:inherit;
  background:rgba(4,14,40,.7);color:var(--text);
  border:3px solid rgba(255,212,92,.28);box-shadow:inset 0 3px 6px rgba(0,0,0,.35);
}
input:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 3px 6px rgba(0,0,0,.35),0 0 0 4px rgba(255,212,92,.18)}
.hint{color:var(--muted-2);font-size:15px}

.tiles{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:22px;min-height:68px;
  padding:15px;border-radius:var(--r-md);border:3px dashed rgba(255,212,92,.26);background:rgba(4,14,40,.35)}
.tile{
  padding:13px 18px;border-radius:var(--r-sm);cursor:pointer;font-size:17px;font-weight:600;
  background:linear-gradient(180deg,var(--royal-lite),var(--royal-deep));
  border:2px solid rgba(255,212,92,.3);box-shadow:0 5px 0 rgba(5,18,48,.55),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .12s var(--spring);animation:popIn .3s var(--spring);
}
.tile:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(5,18,48,.55)}
.tile:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
.tile[disabled]{opacity:.7;cursor:default}
.bank{display:flex;flex-wrap:wrap;gap:11px}

.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pairs .col{display:grid;gap:11px;align-content:start}
.pair-btn{
  padding:16px 15px;border-radius:var(--r-sm);cursor:pointer;font-size:16px;line-height:1.35;text-align:left;font-weight:500;
  background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));
  border:3px solid rgba(255,212,92,.18);box-shadow:0 5px 0 rgba(5,18,48,.55);
  transition:transform .12s var(--spring),border-color .16s ease;
}
.pair-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(5,18,48,.55)}
.pair-btn.sel{border-color:var(--gold);transform:translateY(-2px)}
.pair-btn.matched{border-color:var(--green);background:linear-gradient(180deg,#2f9e69,#14633c);opacity:.62;cursor:default;animation:popIn .4s var(--spring)}
.pair-btn.no{animation:shake .45s ease;border-color:var(--red)}
.pair-btn:focus-visible{outline:4px solid var(--gold);outline-offset:2px}

.orderlist{display:grid;gap:11px}
.orderitem{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:13px;
  padding:15px 16px;border-radius:var(--r-sm);font-size:17px;font-weight:500;
  background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));
  border:3px solid rgba(255,212,92,.18);box-shadow:0 5px 0 rgba(5,18,48,.55);
  transition:transform .2s var(--spring);
}
.orderitem b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));color:var(--ink);font-size:16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.arrows{display:flex;flex-direction:column;gap:4px}
.arrows button{width:38px;height:27px;border-radius:9px;border:2px solid rgba(255,212,92,.3);
  background:rgba(255,255,255,.09);cursor:pointer;font-size:13px;line-height:1;color:var(--muted)}
.arrows button:hover:not([disabled]){color:var(--text);border-color:var(--gold);background:rgba(255,212,92,.16)}
.arrows button[disabled]{opacity:.3}
.arrows button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}

/* ── piede e feedback ────────────────────────────────────────────── */
.lesson-foot{position:fixed;left:0;right:0;bottom:0;z-index:15;padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(180deg,rgba(5,13,32,0),rgba(5,13,32,.97) 30%)}
/* Il tasto "mostra la risposta" era una barra larga sopra a Check e leggeva
   come l'azione principale. Resta disponibile, ma sotto e in tono minore. */
.foot-inner{display:flex;flex-direction:column;padding:16px 20px 20px}
.foot-inner .btn.primary,.foot-inner .btn.go,.foot-inner .btn.stop{order:1}
.foot-inner .btn.reveal{order:2}
.feedback{padding:20px;border-top:4px solid;animation:fbIn .34s var(--spring)}
@keyframes fbIn{from{transform:translateY(100%)}to{transform:none}}
.feedback .fb-head{display:flex;align-items:center;gap:11px;font-size:22px;font-weight:700;margin-bottom:7px}
.feedback .fb-head i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:19px}
.feedback p{margin:0;font-size:16px;line-height:1.55;color:#f0f6ff;max-width:600px}
.feedback.good{background:linear-gradient(180deg,#1c6b47,#12492f);border-color:var(--green-hi)}
.feedback.good .fb-head{color:var(--green-hi)}
.feedback.good .fb-head i{background:var(--green-hi);color:#06371f}
.feedback.bad{background:linear-gradient(180deg,#8e2b40,#5f172a);border-color:var(--red-hi)}
.feedback.bad .fb-head{color:var(--red-hi)}
.feedback.bad .fb-head i{background:var(--red-hi);color:#5b1122}

.btn{
  padding:18px 30px;border-radius:var(--r-md);font-size:19px;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:.05em;
  border:2px solid rgba(140,88,6,.6);
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 42%,var(--gold-mid) 100%);
  color:var(--ink);box-shadow:0 6px 0 var(--gold-deep),inset 0 2px 0 rgba(255,255,255,.7);
  transition:transform .12s var(--spring),filter .14s ease;
}
.btn.wide,.foot-inner .btn{width:100%}
.btn:hover:not([disabled]){filter:brightness(1.07)}
.btn:active:not([disabled]){transform:translateY(5px);box-shadow:0 1px 0 var(--gold-deep)}
.btn:focus-visible{outline:4px solid #fff;outline-offset:3px}
/* Un primario dorato spento diventava marrone fango e sembrava un guasto.
   In attesa di una risposta il pulsante e' grigio-ardesia: chiaramente
   inattivo, ma ancora un pulsante. */
.btn[disabled]{cursor:not-allowed;opacity:1;color:#8ea5c4!important;
  background:linear-gradient(180deg,#2b3f63,#1b2c49)!important;
  box-shadow:0 5px 0 rgba(6,17,40,.75)!important;text-shadow:none}
.btn.go{background:linear-gradient(180deg,var(--green-hi),var(--green) 44%,#22a765);box-shadow:0 6px 0 #14663d;border-color:rgba(16,90,54,.6);color:#04301b}
.btn.stop{background:linear-gradient(180deg,var(--red-hi),var(--red) 44%,#d9455f);box-shadow:0 6px 0 var(--red-deep);border-color:rgba(120,26,44,.6);color:#4a0d1c}

/* ── fine lezione ────────────────────────────────────────────────── */
.done-wrap{text-align:center;padding:70px 20px;position:relative}
.done-crest{font-size:84px;color:var(--gold);filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));animation:crestIn .7s var(--spring)}
@keyframes crestIn{0%{transform:scale(0) rotate(-40deg);opacity:0}60%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
#doneTitle{font-size:32px;margin:12px 0 10px;
  background:linear-gradient(180deg,var(--cream),var(--gold) 55%,var(--gold-mid));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(6,16,45,.55))}
.done-goal{color:var(--muted);max-width:460px;margin:0 auto 30px;font-size:16.5px}
.done-stats{display:flex;gap:14px;justify-content:center;margin-bottom:34px}
.done-stats>div{flex:1;max-width:180px;padding:18px 14px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));
  border:3px solid rgba(255,212,92,.28);box-shadow:0 6px 0 rgba(5,18,48,.55),inset 0 2px 0 rgba(255,255,255,.18);
  animation:popIn .5s var(--spring) backwards}
.done-stats>div:nth-child(2){animation-delay:.12s}
.done-stats span{display:block;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:700}
.done-stats strong{display:block;margin-top:7px;font-size:32px;color:var(--gold);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(5,16,45,.5)}

/* coriandoli */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;width:11px;height:15px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(-8vh) rotate(0);opacity:1}100%{transform:translateY(108vh) rotate(720deg);opacity:.9}}

@media (max-width:430px){
  .pairs{grid-template-columns:1fr}
  .brand{height:40px}
  .node .medal{width:68px;height:68px;font-size:27px}
  .node strong{font-size:13.5px}
  .q-prompt{margin-bottom:20px}
  .done-stats strong{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .confetti{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   Hélène — la mentore
   ══════════════════════════════════════════════════════════════════ */
.greet{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;
  margin:8px 0 4px;padding:16px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(63,122,224,.34),rgba(12,42,95,.5));
  border:2px solid rgba(255,212,92,.22);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14);
  animation:popIn .5s var(--spring);
}
.greet-face{flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.greet-face svg{display:block}
.greet-copy strong{display:block;color:var(--gold);font-size:15px;font-weight:700;letter-spacing:.02em}
.greet-copy p{margin:3px 0 0;color:#dbe8ff;font-size:15.5px;line-height:1.5}

.fb-inner{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;max-width:620px;margin:0 auto}
.fb-face{flex:0 0 auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));animation:faceIn .45s var(--spring)}
.fb-face svg{display:block}
@keyframes faceIn{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.feedback .fb-head{display:block;font-size:19px;font-weight:700;margin-bottom:5px}
.feedback .fb-head em{font-style:normal;font-weight:600;opacity:.92}
.feedback.good .fb-head{color:var(--green-hi)}
.feedback.bad .fb-head{color:var(--red-hi)}

.done-crest{font-size:0;display:flex;justify-content:center}
.done-crest svg{filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));animation:crestIn .7s var(--spring)}

@media (max-width:430px){
  .greet{gap:12px;padding:14px}
  .greet-face svg{width:62px;height:62px}
  .greet-copy p{font-size:14.5px}
  .fb-inner{gap:12px}
  .fb-face svg{width:58px;height:58px}
}
@media (prefers-reduced-motion:reduce){
  .greet,.fb-face,.done-crest svg{animation:none!important}
}

/* ── barra di avanzamento del corso ──────────────────────────────── */
.course-bar{margin:0 0 22px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(63,122,224,.34),rgba(18,53,111,.5));
  border:2px solid rgba(255,212,92,.22);box-shadow:inset 0 2px 0 rgba(255,255,255,.14)}
.course-bar-top{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:9px;font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#courseLabel{color:#cfe0ff}
#coursePct{color:var(--gold,#ffd45c);font-size:16px;font-variant-numeric:tabular-nums}
.course-track{height:12px;border-radius:99px;overflow:hidden;
  background:rgba(4,14,38,.55);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.course-track > i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#f5a623,var(--gold,#ffd45c),#fff0b8);
  box-shadow:0 0 12px rgba(255,212,92,.55);
  transition:width .9s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){.course-track > i{transition:none}}

/* ── ripasso, checkpoint, badge ───────────────────────────────────── */
.review-card{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 18px;
  padding:16px 18px;border-radius:20px;text-align:left;cursor:pointer;font:inherit;color:#fff;
  background:linear-gradient(180deg,#2359ba,#0f2d61);
  border:3px solid rgba(255,212,92,.24);
  box-shadow:0 6px 0 rgba(5,18,48,.6),inset 0 2px 0 rgba(255,255,255,.18);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .14s ease}
.review-card:hover{filter:brightness(1.08)}
.review-card:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(5,18,48,.6)}
.review-card:focus-visible{outline:3px solid var(--gold-hi,#fff0b8);outline-offset:3px}
.review-card.due{border-color:rgba(255,212,92,.6)}
.review-icon{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  font-size:23px;font-weight:700;color:#08183f;
  background:linear-gradient(180deg,#fff0b8,#f5a623);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 3px 0 rgba(5,18,48,.5)}
.review-card.due .review-icon{animation:tagBob 2.4s ease-in-out infinite}
.review-copy{flex:1 1 auto;min-width:0}
.review-copy strong{display:block;font-size:17.5px}
.review-copy small{display:block;margin-top:2px;color:#cfe0ff;font-size:14.5px}
.review-badge{flex:0 0 auto;min-width:32px;padding:5px 9px;border-radius:99px;
  font-size:14.5px;font-weight:700;color:#08183f;text-align:center;
  background:linear-gradient(180deg,#fff0b8,#ffd45c);box-shadow:0 3px 0 rgba(163,95,4,.7)}

.unit-badge{display:inline-block;margin-left:8px;padding:4px 11px;border-radius:99px;
  font-size:13px;font-weight:700;color:#08183f;vertical-align:middle;
  background:linear-gradient(180deg,#fff0b8,#f5a623);
  box-shadow:0 3px 0 rgba(163,95,4,.7),inset 0 2px 0 rgba(255,255,255,.5)}

/* Fine desk: il trofeo chiude la rotta come una pedina, non come una
   barra di comando — così la sezione ha un traguardo visibile. */
.checkpoint{display:flex;flex-direction:column;align-items:center;gap:8px;width:auto;
  margin:14px auto 6px;padding:10px 14px 14px;border-radius:22px;border:0;background:transparent;
  box-shadow:none;cursor:pointer;font:inherit;text-align:center;color:var(--text);
  transition:filter .14s ease}
.checkpoint-badge{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:35px;
  color:#08183f;background:linear-gradient(180deg,#fff0b8 0%,#ffd45c 45%,#f5a623 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.16),0 6px 0 #a35f04,0 0 26px rgba(255,212,92,.28);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s ease}
.checkpoint:hover .checkpoint-badge{transform:translateY(-3px)}
.checkpoint:active .checkpoint-badge{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 1px 0 #a35f04}
.checkpoint:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:22px}
.checkpoint strong{display:block;font-size:15px;font-weight:700;color:var(--gold-hi);
  text-shadow:0 2px 6px rgba(3,10,30,.8)}
.checkpoint small{display:block;margin-top:2px;max-width:250px;font-size:11.5px;font-weight:500;color:#c2d6f2}

/* Il desk chiuso in fondo alla rotta: si vede dov'è il prossimo traguardo
   senza poterci entrare. Senza questo la pagina finiva in uno spazio vuoto. */
.desk-next{position:relative;max-width:460px;margin:26px auto 8px;padding:20px 22px 18px;
  border-radius:22px;text-align:center;
  background:linear-gradient(160deg,rgba(16,40,86,.62),rgba(6,20,48,.78));
  border:1px dashed rgba(173,205,255,.20)}
.desk-next-lock{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:50%;
  font-size:21px;background:rgba(3,12,34,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.desk-next .n{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb7db}
.desk-next h2{margin:5px 0 0;font-size:19px;line-height:1.2;color:#dce9fb}
.desk-next p{margin:7px auto 0;max-width:330px;font-size:13px;line-height:1.5;color:#a6bcdc}
.desk-next.done{border-color:rgba(255,212,92,.28)}
.desk-next.done h2{color:var(--gold-hi)}

/* La bolla "Start" sporge sopra il nodo: senza questo respiro finisce
   addosso alla didascalia del livello precedente. */
.node.next{margin-top:14px}

.node.weak .medal{background:linear-gradient(180deg,#ffd45c,#f5a623);color:#08183f}
.node.weak small{color:#ffe6b0}

.run-banner{margin:0 0 14px;padding:9px 14px;border-radius:14px;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#08183f;text-align:center;
  background:linear-gradient(180deg,#fff0b8,#ffd45c);
  box-shadow:0 3px 0 rgba(163,95,4,.6)}

/* testo solo per screen reader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── installazione e stato offline ────────────────────────────────── */
.offline-flag{margin:0 0 14px;padding:10px 14px;border-radius:14px;
  font-size:14px;font-weight:600;text-align:center;color:#08183f;
  background:linear-gradient(180deg,#fff0b8,#f5a623);
  box-shadow:0 3px 0 rgba(163,95,4,.6)}
.install-host{text-align:center;padding:22px 0 0}
.install-btn{padding:14px 26px;border-radius:18px;cursor:pointer;font:inherit;
  font-size:16px;font-weight:700;color:#08183f;
  background:linear-gradient(180deg,#fff0b8 0%,#ffd45c 45%,#f5a623 100%);
  border:2px solid rgba(140,88,6,.55);
  box-shadow:0 5px 0 #a35f04,inset 0 2px 0 rgba(255,255,255,.65);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .14s ease}
.install-btn:hover{filter:brightness(1.06)}
.install-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #a35f04}
.install-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ── sfondo: un porto, una rotta, la curva del carry ──────────────── */
.backdrop{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none;
}
.backdrop .bd-ship{animation:bdDrift 34s ease-in-out infinite}
.backdrop .bd-route{animation:bdRoute 90s linear infinite}
@keyframes bdDrift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(40px,-5px)}
}
@keyframes bdRoute{ to{stroke-dashoffset:-400} }
@media (prefers-reduced-motion:reduce){
  .backdrop .bd-ship,.backdrop .bd-route{animation:none}
}
/* su schermi molto stretti il porto ruberebbe spazio alla lettura */
@media (max-width:420px){ .backdrop{opacity:.62} }

/* ── salvataggio in cloud ─────────────────────────────────────────── */
.cloud-host{padding:26px 0 0}
.cloud-cta{display:block;width:100%;padding:15px 18px;border-radius:18px;cursor:pointer;font:inherit;
  font-size:16px;font-weight:700;color:#fff;text-align:center;
  background:linear-gradient(180deg,#2359ba,#0f2d61);
  border:3px solid rgba(255,212,92,.28);
  box-shadow:0 5px 0 rgba(5,18,48,.6),inset 0 2px 0 rgba(255,255,255,.16);
  transition:transform .14s var(--spring),filter .14s ease}
.cloud-cta:hover{filter:brightness(1.09)}
.cloud-cta:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(5,18,48,.6)}
.cloud-cta:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.cloud-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 16px;border-radius:16px;font-size:15px;
  background:rgba(18,53,111,.6);border:2px solid rgba(255,212,92,.2)}
.cloud-who{color:var(--muted)}
.cloud-who strong{color:#fff8e6;font-weight:600}
.cloud-acts{display:flex;gap:14px}
.cloud-status{margin:10px 0 0;font-size:14.5px;text-align:center;color:var(--muted)}
.cloud-status.ok{color:var(--green-hi)}
.cloud-status.warn{color:var(--gold)}

.cloud-dialog{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(3,10,28,.72);backdrop-filter:blur(3px);animation:fbIn .2s ease}
.cloud-panel{position:relative;width:min(400px,100%);max-height:90vh;overflow:auto;padding:28px 26px 22px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#173d80,#0b2350);
  border:3px solid rgba(255,212,92,.3);
  box-shadow:0 20px 50px rgba(2,8,22,.7),inset 0 2px 0 rgba(255,255,255,.14);
  animation:popIn .3s var(--spring)}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.cloud-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  cursor:pointer;font-size:17px;color:var(--muted);background:rgba(4,14,40,.5)}
.cloud-close:hover{color:#fff}
.cloud-close:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}
.cloud-panel h2{font-size:24px;margin:0 0 6px;padding-right:34px}
.cloud-sub{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.5}
.cloud-label{display:block;margin:0 0 6px;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.cloud-panel input{width:100%;margin:0 0 15px;padding:14px 16px;border-radius:14px;font:inherit;font-size:17px;
  color:#fff;background:rgba(4,14,40,.6);border:2px solid rgba(255,212,92,.22)}
.cloud-panel input:focus{outline:none;border-color:var(--gold);background:rgba(4,14,40,.8)}
.cloud-err{margin:0 0 14px;padding:11px 14px;border-radius:12px;font-size:14.5px;
  color:#ffd7de;background:rgba(160,36,58,.45);border:1px solid rgba(255,123,143,.5)}
.cloud-alt{margin:16px 0 0;text-align:center;font-size:14.5px;color:var(--muted)}
.cloud-fine{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-2);text-align:center}
@media (prefers-reduced-motion:reduce){.cloud-dialog,.cloud-panel{animation:none}}

/* ── serie di risposte corrette ───────────────────────────────────── */
.streak-chip{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;
  font-size:16px;font-weight:700;color:#08183f;flex:0 0 auto;
  background:linear-gradient(180deg,#fff0b8,#f5a623);
  box-shadow:0 3px 0 rgba(163,95,4,.75),inset 0 2px 0 rgba(255,255,255,.5)}
.streak-chip b{font-variant-numeric:tabular-nums;min-width:1ch}
.streak-chip span[aria-hidden]{font-size:14px;line-height:1}
.streak-chip.record{background:linear-gradient(180deg,#fff,#ffd45c);
  box-shadow:0 3px 0 rgba(163,95,4,.75),0 0 16px rgba(255,212,92,.6),inset 0 2px 0 rgba(255,255,255,.6)}
.streak-chip.pop{animation:bump .34s cubic-bezier(.34,1.56,.64,1)}

.streak-toast{position:fixed;left:50%;top:74px;z-index:40;margin:0;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:11px 20px 11px 12px;border-radius:99px;
  background:linear-gradient(180deg,#2f9e69,#12492f);
  border:3px solid rgba(168,247,200,.5);
  box-shadow:0 10px 26px rgba(2,10,24,.6),inset 0 2px 0 rgba(255,255,255,.2);
  opacity:0;pointer-events:none}
.streak-toast.show{animation:toastIn 2.6s ease both}
@keyframes toastIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.9)}
  9%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  85%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.96)}
}
.streak-toast .st-face{flex:0 0 auto;display:block}
.streak-toast .st-face svg{display:block}
.streak-toast .st-copy strong{display:block;font-size:17px;color:#fff}
.streak-toast .st-copy small{display:block;font-size:13.5px;color:#c9f5dc}
@media (prefers-reduced-motion:reduce){
  .streak-chip.pop{animation:none}
  .streak-toast.show{animation:none;opacity:1}
}

/* ── accesso con LinkedIn ─────────────────────────────────────────── */
.li-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin:0 0 4px;padding:14px 18px;border-radius:14px;cursor:pointer;font:inherit;
  font-size:16px;font-weight:700;color:#fff;background:#0a66c2;
  border:2px solid #0a66c2;
  box-shadow:0 4px 0 #064681,inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .14s var(--spring),filter .14s ease}
.li-btn svg{flex:0 0 auto}
.li-btn:hover{filter:brightness(1.1)}
.li-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #064681}
.li-btn:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.cloud-or{position:relative;margin:18px 0 16px;text-align:center;
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.cloud-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(255,212,92,.2)}
.cloud-or span{position:relative;padding:0 12px;background:#102f65}

/* ── condivisione su LinkedIn ─────────────────────────────────────── */
.share-host:empty{display:none}
.share-host{padding:4px 0 16px}
.share-cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:14px 18px;border-radius:16px;cursor:pointer;font:inherit;
  font-size:16px;font-weight:700;color:#fff;background:#0a66c2;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 4px 0 #064681,inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .14s var(--spring),filter .14s ease}
.share-cta span[aria-hidden]{display:grid;place-items:center;width:22px;height:22px;
  border-radius:4px;background:#fff;color:#0a66c2;font-size:13px;font-weight:700;line-height:1}
.share-cta:hover{filter:brightness(1.1)}
.share-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #064681}
.share-cta:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}

.share-panel{width:min(560px,100%)}
.share-sub{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.5}
.share-card{margin:0 0 20px;border-radius:14px;overflow:hidden;
  border:2px solid rgba(255,212,92,.24);box-shadow:0 8px 22px rgba(2,8,22,.5)}
.share-card canvas{display:block;width:100%;height:auto}
.share-label{display:block;margin:0 0 6px;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
#shareText{width:100%;margin:0 0 18px;padding:14px 16px;border-radius:14px;
  font:inherit;font-size:14.5px;line-height:1.5;color:#eaf1ff;resize:vertical;
  background:rgba(4,14,40,.6);border:2px solid rgba(255,212,92,.2)}
#shareText:focus{outline:none;border-color:var(--gold)}
.share-acts{display:grid;gap:10px}
.share-acts .li-btn{text-decoration:none}
.share-msg{margin:14px 0 0;text-align:center;font-size:14.5px;color:var(--green-hi)}

/* ── glossario ────────────────────────────────────────────────────── */
.gl-back{color:var(--gold-hi);font-size:15px;font-weight:600;text-decoration:none;
  padding:9px 15px;border-radius:12px;border:2px solid rgba(255,212,92,.28);
  background:rgba(4,14,40,.35);white-space:nowrap}
.gl-back:hover{background:rgba(4,14,40,.6);color:#fff}
.gl-back:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}

.gl-tools{display:grid;grid-template-columns:1fr auto;gap:10px;margin:6px 0 12px}
/* Un campo di testo dentro una griglia ha una larghezza minima propria:
   senza min-width:0 la colonna non si stringe e su un telefono il campo di
   ricerca del glossario finiva mezzo fuori dallo schermo. */
.gl-tools input,.gl-tools select{min-width:0;padding:14px 16px;border-radius:14px;font:inherit;font-size:16.5px;
  color:#fff;background:rgba(4,14,40,.62);border:2px solid rgba(255,212,92,.24)}
.gl-tools input::placeholder{color:var(--muted-2)}
.gl-tools input:focus,.gl-tools select:focus{outline:none;border-color:var(--gold);background:rgba(4,14,40,.85)}
.gl-tools select{max-width:44vw}
.gl-count{margin:0 0 22px;font-size:13.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
.gl-empty{margin:20px 0 0;padding:18px 20px;border-radius:var(--r-md);font-size:16px;line-height:1.55;
  color:#e8f0ff;background:rgba(18,53,111,.55);border:2px solid rgba(255,212,92,.2)}

.gl-unit{margin:0 0 30px}
.gl-unit > h2{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:0 0 14px;font-size:20px;font-weight:700;color:#fff8e6}
.gl-n{padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#08183f;
  background:linear-gradient(180deg,#fff0b8,#f5a623)}
.gl-unit dl{margin:0;display:grid;gap:11px}
.gl-item{padding:17px 19px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));
  border:3px solid rgba(255,212,92,.18);
  box-shadow:0 5px 0 rgba(5,18,48,.5),inset 0 2px 0 rgba(255,255,255,.14)}
.gl-item dt{font-size:18px;font-weight:700;color:#fff8e6;margin:0 0 6px}
.gl-item dd{margin:0}
.gl-def{margin:0 0 8px;font-size:16px;line-height:1.55;color:#fff}
.gl-why{margin:0 0 11px;font-size:15px;line-height:1.55;color:#d6e5ff}
.gl-link{display:inline-block;font-size:14px;font-weight:600;color:#ffe6a3;
  text-decoration:none;border-bottom:2px solid rgba(255,212,92,.35);padding-bottom:1px}
.gl-link:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.gl-link:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
.gl-item.gl-target{border-color:var(--gold);box-shadow:0 5px 0 rgba(5,18,48,.5),0 0 0 4px rgba(255,212,92,.22)}
@media (max-width:560px){
  .gl-tools{grid-template-columns:1fr}
  .gl-tools select{max-width:none}
}
.gl-row{text-align:center;padding:30px 0 0}
.locked-hint{margin:18px 0 0;padding:13px 16px;border-radius:14px;text-align:center;
  font-size:15px;color:#08183f;background:linear-gradient(180deg,#fff0b8,#f5a623);
  box-shadow:0 3px 0 rgba(163,95,4,.6)}
.node.flagged{border-color:var(--gold)!important;
  box-shadow:0 6px 0 rgba(5,18,48,.5),0 0 0 4px rgba(255,212,92,.28)!important}
.gl-u{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#08183f;vertical-align:middle;background:linear-gradient(180deg,#fff0b8,#f5a623)}
.cloud-danger{margin:0;padding:16px 18px;border-radius:16px;font-size:15px;line-height:1.55;
  color:#fff;background:linear-gradient(180deg,#a0243a,#5c1526);
  border:3px solid rgba(255,194,204,.6);box-shadow:0 5px 0 rgba(40,6,14,.6)}

/* ── World of Trade career layer ─────────────────────────────────── */
.eyebrow{display:block;margin:0 0 7px;color:var(--gold-hi);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
body:not(.immersive){padding-bottom:92px}
body.immersive .game-nav{display:none}

.career-hero{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;margin:18px 0 22px;
  padding:19px 20px;border-radius:var(--r-lg);background:linear-gradient(135deg,#173d80,#0b2453 68%,#4d3210);
  border:3px solid rgba(255,212,92,.38);box-shadow:0 7px 0 rgba(4,13,35,.65),inset 0 2px 0 rgba(255,255,255,.16)}
.career-badge{width:78px;height:78px;border-radius:50%;display:grid;place-content:center;text-align:center;
  color:var(--ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));
  border:3px solid rgba(255,255,255,.35);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 4px 0 rgba(126,76,4,.7)}
.career-badge span{font-size:10px;font-weight:700;letter-spacing:.12em}.career-badge b{font-size:28px;line-height:1}
.career-label{color:#bcd2f6;font-size:11px;font-weight:700;letter-spacing:.14em}.career-copy h2{font-size:24px;margin:1px 0 2px}
.career-copy p{margin:0 0 10px;color:#d7e5fb;font-size:14px;line-height:1.35}
.career-track,.skill-track{height:10px;border-radius:99px;overflow:hidden;background:rgba(2,9,28,.7);border:1px solid rgba(255,255,255,.07)}
.career-track i,.skill-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));transition:width .4s var(--spring)}

.section-top{max-width:640px;margin:0 auto;padding:25px 20px 10px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.section-top h1{font-size:36px;line-height:1}.mini-xp{padding:8px 13px;border-radius:99px;color:var(--ink);font-weight:700;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 3px 0 rgba(126,76,4,.7)}
.tab-wrap{padding-top:12px;padding-bottom:38px}
.mode-hero,.practice-card,.profile-rank,.skill-card,.flash-record{padding:24px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));border:3px solid rgba(255,212,92,.28);
  box-shadow:0 7px 0 rgba(4,13,35,.58),inset 0 2px 0 rgba(255,255,255,.15)}
.mode-kicker{display:inline-block;margin-bottom:9px;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:#08213f;background:linear-gradient(180deg,#a8f7c8,#4fe08a)}
.mode-hero h2,.practice-card h2,.profile-rank h2,.skill-card h2{font-size:28px}.mode-hero p,.practice-card p,.profile-rank p{color:#d7e5fb;font-size:15px;line-height:1.55}
.mode-stats{display:flex;gap:10px;margin:18px 0}.mode-stats span{flex:1;padding:10px 12px;border-radius:13px;text-align:center;color:#cfe0fb;
  background:rgba(4,14,40,.4);border:1px solid rgba(255,255,255,.08);font-size:13px}.mode-stats b{color:#fff;font-size:18px;margin-left:5px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.mode-card{padding:18px;border-radius:18px;
  background:rgba(18,53,111,.65);border:2px solid rgba(255,212,92,.17)}.mode-card>span{font-size:11px;font-weight:700;letter-spacing:.15em;color:var(--gold-hi)}
.mode-card h3{font-size:19px;margin:4px 0}.mode-card p{font-size:13.5px;line-height:1.45;color:#cddcf5}.mode-card small{color:#93abd0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.locked-mode{opacity:.68}
.practice-orb{float:right;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 4px 0 rgba(126,76,4,.7)}
.practice-card .btn[disabled]{opacity:.42;cursor:not-allowed}

.profile-rank,.skill-card,.flash-record{margin-bottom:18px}.profile-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.profile-numbers>div{padding:13px 8px;border-radius:14px;text-align:center;background:rgba(4,14,40,.42);border:1px solid rgba(255,255,255,.08)}
.profile-numbers b{display:block;font-size:22px;color:var(--gold-hi);font-variant-numeric:tabular-nums}.profile-numbers span{display:block;margin-top:2px;color:#bcd0ef;font-size:11px;text-transform:uppercase;letter-spacing:.07em}
/* Titolo e nota stavano su una riga sola senza poter andare a capo: su
   schermo stretto "Trading Houses" e "Choose your house" si sovrapponevano. */
.card-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 15px;margin-bottom:18px}
.card-title>div{min-width:0;flex:1 1 auto}
.card-title small{flex:0 1 auto;color:#aabfe0}
.skill-row{margin:0 0 15px}.skill-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:14px}.skill-top span{display:flex;align-items:center;gap:8px;font-weight:600}.skill-top i{font-style:normal;color:var(--gold-hi);width:20px;text-align:center}.skill-top b{color:#fff;font-variant-numeric:tabular-nums}
.skill-track{height:9px}.flash-record .eyebrow{margin-bottom:0}

.game-nav{position:fixed;z-index:45;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(590px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);padding:7px;border-radius:22px;
  background:rgba(5,17,46,.95);border:2px solid rgba(255,212,92,.24);box-shadow:0 12px 34px rgba(2,8,22,.7),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 4px;border-radius:15px;cursor:pointer;color:#9fb7db}
.nav-item span{font-size:18px;line-height:1.1}.nav-item b{font-size:11px}.nav-item.active{color:#08183f;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 2px 0 rgba(126,76,4,.7)}
.nav-item:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}

/* Flash Trading */
.flash-top{max-width:640px;margin:0 auto;padding:15px 18px;display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;gap:9px}
.flash-clock,.flash-score,.flash-combo{padding:8px 6px;border-radius:14px;text-align:center;background:rgba(4,14,40,.62);border:2px solid rgba(255,212,92,.18)}
.flash-top span{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;color:#aebfdd}.flash-top b{display:block;font-size:19px;font-variant-numeric:tabular-nums}.flash-clock.danger{border-color:var(--red);animation:bump .6s infinite}.flash-clock.danger b{color:var(--red-hi)}
.flash-wrap{padding-top:22px;padding-bottom:80px}.flash-question{padding:23px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));
  border:3px solid rgba(255,212,92,.26);box-shadow:0 7px 0 rgba(4,13,35,.58),inset 0 2px 0 rgba(255,255,255,.15)}
.flash-question h2{font-size:clamp(22px,5vw,29px);line-height:1.35;margin:0 0 21px}.flash-options{display:grid;gap:11px}
.flash-opt{padding:15px 16px;border-radius:15px;cursor:pointer;text-align:left;font-size:16px;font-weight:500;background:rgba(4,14,40,.43);border:2px solid rgba(255,212,92,.2);box-shadow:0 4px 0 rgba(4,13,35,.6)}
.flash-opt:hover{border-color:var(--gold);transform:translateY(-1px)}.flash-opt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(4,13,35,.6)}
.flash-input{display:flex;align-items:center;gap:10px;margin-bottom:14px}.flash-input input{min-width:0}.flash-input span{font-weight:700;color:var(--gold-hi);white-space:nowrap}
.flash-feedback{min-height:50px;margin:16px 0 0;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.4}.flash-feedback.good{color:#d7ffe7;background:rgba(26,122,74,.5)}.flash-feedback.bad{color:#ffe0e5;background:rgba(160,36,58,.48)}
.flash-result{text-align:center;padding:28px 20px}.flash-trophy{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:38px;color:#08183f;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 5px 0 rgba(126,76,4,.7)}
.flash-result h1{font-size:64px;line-height:1;color:var(--gold-hi)}.flash-result>p{margin:2px 0 18px;color:#bfd1ee}.flash-result .link-btn{display:block;margin:16px auto 0}

@media (max-width:520px){
  .career-hero{grid-template-columns:68px 1fr;padding:16px}.career-badge{width:62px;height:62px}.career-badge b{font-size:22px}
  .career-copy h2{font-size:21px}.mode-grid{grid-template-columns:1fr}.section-top h1{font-size:32px}
  .profile-numbers{gap:7px}.profile-numbers b{font-size:19px}.game-nav{bottom:max(8px,env(safe-area-inset-bottom))}
  .flash-top{grid-template-columns:auto repeat(3,1fr);padding:10px 10px;gap:6px}.flash-top .icon-btn{padding:4px 5px}.flash-top b{font-size:17px}
}

/* Boss Deals */
.boss-teaser{opacity:1}.mini-action{margin-top:10px;padding:8px 11px;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer;color:#0a1d3e;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 2px 0 rgba(126,76,4,.7)}
.boss-shelf{margin-top:22px;padding:22px;border-radius:var(--r-lg);background:rgba(7,24,61,.68);border:2px solid rgba(255,212,92,.18)}
.boss-grid{display:grid;gap:12px}.boss-card{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:13px;padding:14px;border-radius:17px;background:rgba(22,61,124,.58);border:2px solid rgba(255,212,92,.16)}
.boss-card-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:16px;font-weight:900;letter-spacing:.06em;color:#08213f;background:linear-gradient(180deg,#ffe88b,var(--gold-mid));box-shadow:0 3px 0 rgba(126,76,4,.6)}
.boss-card-copy span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a9c0e3}.boss-card-copy h3{margin:2px 0 3px;font-size:17px}.boss-card-copy p{margin:0;color:#bfd0ea;font-size:12.5px;line-height:1.35}
.boss-start{padding:9px 11px;border-radius:12px;font-size:12px;font-weight:800;cursor:pointer;color:#071a37;background:linear-gradient(180deg,#9ff1c2,#4fdd8a);box-shadow:0 3px 0 rgba(16,104,59,.75)}.boss-start:disabled{cursor:not-allowed;color:#8192ad;background:#233a62;box-shadow:none}.boss-locked{opacity:.58}

.boss-top{max-width:760px;margin:0 auto;padding:13px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(180px,.7fr);align-items:center;gap:14px}
.boss-head-copy{min-width:0}.boss-head-copy span{display:block;color:var(--gold-hi);font-size:10px;font-weight:800;letter-spacing:.13em}.boss-head-copy b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.boss-progress-wrap{display:grid;gap:5px}.boss-progress-wrap>span{font-size:10px;color:#aabfdf;text-align:right;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.boss-progress{height:8px;border-radius:99px;overflow:hidden;background:rgba(4,14,40,.72);border:1px solid rgba(255,255,255,.08)}.boss-progress i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));transition:width .35s var(--spring)}
.boss-wrap{padding-top:25px;padding-bottom:80px;max-width:720px}
.deal-brief,.boss-question,.boss-result{padding:25px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--royal-mid),var(--royal-deep));border:3px solid rgba(255,212,92,.27);box-shadow:0 7px 0 rgba(4,13,35,.6),inset 0 2px 0 rgba(255,255,255,.14)}
.deal-stamp{float:right;width:76px;height:76px;border-radius:20px;display:grid;place-items:center;text-align:center;color:#0a1d3e;background:linear-gradient(180deg,#ffe88b,var(--gold-mid));box-shadow:0 5px 0 rgba(126,76,4,.7)}.deal-stamp span{font-size:23px;font-weight:900;line-height:1}.deal-stamp small{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-top:-14px}
.deal-brief h1,.boss-result h1{font-size:clamp(27px,6vw,38px);line-height:1.08;margin:5px 0 12px}.deal-brief>p{max-width:580px;color:#d4e2f6;line-height:1.58;font-size:15px}
.deal-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:19px 0}.deal-facts span{padding:10px 11px;border-radius:12px;background:rgba(4,14,40,.4);border:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#d9e6f8}
.deal-economics{margin:16px 0 18px;padding:14px 15px;border-radius:14px;background:rgba(4,14,40,.56);border:1px solid rgba(255,212,92,.18)}.deal-economics span,.deal-economics small{display:block;color:#aabfe0;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.deal-economics b{display:block;margin:2px 0;font-size:25px;color:var(--gold-hi)}
.boss-q-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.boss-q-meta span,.boss-q-meta i{font-size:10px;font-style:normal;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.boss-q-meta span{color:var(--gold-hi)}.boss-q-meta i{color:#9fb7db}
.boss-question h2{font-size:clamp(22px,5vw,30px);line-height:1.32;margin-bottom:22px}.boss-options{display:grid;gap:10px}.boss-option{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;text-align:left;cursor:pointer;background:rgba(4,14,40,.45);border:2px solid rgba(255,212,92,.17);box-shadow:0 3px 0 rgba(4,13,35,.56)}.boss-option>span{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:900;color:#bcd1f0;background:rgba(255,255,255,.07)}.boss-option:hover{border-color:var(--gold)}.boss-option.ok{border-color:#66e69b;background:rgba(25,122,72,.38)}.boss-option.no{border-color:#ff7387;background:rgba(154,34,55,.38)}.boss-option:disabled{cursor:default}
.boss-number{display:flex;align-items:center;gap:10px;margin-bottom:14px}.boss-number input{min-width:0}.boss-number span{color:var(--gold-hi);font-weight:800;white-space:nowrap}
.live-pnl{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);color:#aebfdd;font-size:12px}.live-pnl b{font-size:16px;color:#fff}
.boss-feedback{max-width:720px;margin:14px auto 0;border-radius:16px}.boss-feedback.good,.boss-feedback.bad{padding:14px;background:rgba(25,122,72,.34);border:1px solid rgba(91,232,148,.28)}.boss-feedback.bad{background:rgba(154,34,55,.34);border-color:rgba(255,115,135,.28)}.boss-feedback>div{margin-bottom:11px}.boss-feedback strong{font-size:15px}.boss-feedback p{margin:4px 0;color:#d5e2f5;font-size:13.5px;line-height:1.45}.boss-feedback small{color:#aebfdd;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.boss-stars{display:flex;gap:3px;margin:10px 0 18px;font-size:27px}.boss-stars span{color:#465a7a}.boss-stars .lit{color:var(--gold-hi);text-shadow:0 2px 9px rgba(255,212,92,.28)}
.boss-result-pnl{padding:17px;border-radius:16px;background:rgba(4,14,40,.48);border:1px solid rgba(255,255,255,.08)}.boss-result-pnl span,.boss-result-pnl small{display:block;color:#aebfdd;font-size:11px;text-transform:uppercase;letter-spacing:.07em}.boss-result-pnl b{display:block;font-size:31px;margin:2px 0}.boss-result-pnl b.positive{color:#75eba5}.boss-result-pnl b.negative{color:#ff8294}
.boss-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.boss-summary-grid>div{padding:13px 8px;text-align:center;border-radius:14px;background:rgba(4,14,40,.4);border:1px solid rgba(255,255,255,.07)}.boss-summary-grid b{display:block;font-size:20px;color:var(--gold-hi)}.boss-summary-grid span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#aebfdd}
.boss-breakdown,.deal-log{margin:18px 0;padding:15px;border-radius:15px;background:rgba(4,14,40,.34);border:1px solid rgba(255,255,255,.07)}.boss-breakdown h3{font-size:15px;margin-bottom:12px}.boss-skill{display:grid;grid-template-columns:110px 32px 1fr;align-items:center;gap:9px;margin:8px 0;font-size:12px}.boss-skill>b{text-align:right}.boss-skill>i{height:7px;border-radius:99px;overflow:hidden;background:#172c52}.boss-skill>i>em{display:block;height:100%;background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));border-radius:inherit}
.deal-log-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12.5px;color:#d7e4f6}.deal-log-row:last-child{border-bottom:0}.deal-log-row b{white-space:nowrap}.deal-log-row.head{color:#9fb7db;text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:800}.boss-note{font-size:11.5px;line-height:1.45;color:#9fb7db;margin:14px 2px}.boss-result .link-btn{display:block;margin:15px auto 0}

@media (max-width:560px){
  .boss-card{grid-template-columns:48px 1fr}.boss-card-icon{width:44px;height:44px}.boss-start{grid-column:1/-1;width:100%}.boss-top{grid-template-columns:auto 1fr}.boss-progress-wrap{grid-column:1/-1}.boss-progress-wrap>span{text-align:left}.deal-facts{grid-template-columns:1fr}.deal-stamp{width:64px;height:64px}.deal-stamp span{font-size:20px}.boss-summary-grid{gap:6px}.boss-summary-grid b{font-size:17px}.boss-skill{grid-template-columns:92px 30px 1fr}
}

/* Daily Deal + Desk Quests */
.daily-teaser{position:relative;overflow:hidden;border-color:rgba(79,224,138,.32);background:linear-gradient(145deg,rgba(17,70,80,.82),rgba(18,53,111,.76))}
.daily-teaser:after{content:'24H';position:absolute;right:-5px;top:-9px;font-size:52px;font-weight:900;letter-spacing:-.05em;color:rgba(255,255,255,.035);transform:rotate(8deg);pointer-events:none}
.daily-teaser>span{color:#8bf2b5}.daily-teaser .mini-action{background:linear-gradient(180deg,#a8f7c8,#4fe08a);box-shadow:0 2px 0 rgba(17,101,58,.75)}
.daily-quests{margin-top:22px;padding:22px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(11,37,82,.82),rgba(6,22,57,.82));border:2px solid rgba(79,224,138,.18);box-shadow:0 7px 0 rgba(4,13,35,.42)}
.quest-list{display:grid;gap:10px}.quest-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:13px;border-radius:15px;background:rgba(4,14,40,.42);border:1px solid rgba(255,255,255,.07)}
.quest-row.done{border-color:rgba(79,224,138,.3);background:rgba(17,84,61,.2)}.quest-row.claimed{opacity:.72}
.quest-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:18px;font-weight:900;color:#0b223f;background:linear-gradient(180deg,#b9f8d2,#4fe08a);box-shadow:0 3px 0 rgba(17,101,58,.62)}
.quest-copy h3{margin:0 0 2px;font-size:15px}.quest-copy p{margin:0;color:#b9cce9;font-size:12px;line-height:1.35}.quest-copy small{display:block;margin-top:4px;color:#8fa8cf;font-size:10px;font-variant-numeric:tabular-nums}
.quest-progress{height:6px;margin-top:7px;overflow:hidden;border-radius:99px;background:#10264d}.quest-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4fe08a,#a8f7c8);transition:width .35s var(--spring)}
.quest-claim{min-width:82px;padding:9px 10px;border-radius:11px;cursor:pointer;font-size:11px;font-weight:900;color:#0b223f;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 2px 0 rgba(126,76,4,.7)}.quest-claim[disabled]{cursor:default;color:#7f95b7;background:#172b50;box-shadow:none;opacity:.7}.quest-row.done:not(.claimed) .quest-claim{animation:questPulse 1.8s ease-in-out infinite}
@keyframes questPulse{50%{transform:translateY(-2px) scale(1.02)}}
.daily-bonus{display:flex;align-items:center;gap:11px;margin-top:12px;padding:12px 13px;border-radius:14px;color:#d7e7fb;background:rgba(4,14,40,.38);border:1px dashed rgba(255,212,92,.24)}.daily-bonus>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#0b223f;font-weight:900;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid))}.daily-bonus b,.daily-bonus small{display:block}.daily-bonus b{font-size:13px}.daily-bonus small{margin-top:2px;color:#9fb7db;font-size:11px}
@media (max-width:520px){.daily-quests{padding:17px}.quest-row{grid-template-columns:38px 1fr;gap:10px}.quest-icon{width:38px;height:38px}.quest-claim{grid-column:1/-1;width:100%}}

/* ── v4 · Trading House map + endless floor ─────────────────────── */
.world-map-shell{margin:18px 0 22px;padding:20px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(9,31,72,.88),rgba(5,20,52,.82));border:2px solid rgba(255,212,92,.18);box-shadow:0 7px 0 rgba(4,13,35,.38)}
.world-map{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,240px);gap:11px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.world-card{position:relative;min-height:116px;padding:13px;border-radius:16px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr auto;gap:9px 11px;text-align:left;color:#edf5ff;background:rgba(20,55,112,.56);border:2px solid rgba(255,255,255,.08);box-shadow:0 3px 0 rgba(3,12,32,.46);scroll-snap-align:start;cursor:pointer}
.world-card.active{border-color:rgba(255,212,92,.72);background:linear-gradient(145deg,rgba(32,76,145,.9),rgba(18,52,110,.82));box-shadow:0 4px 0 rgba(117,74,5,.52),0 0 0 1px rgba(255,212,92,.08) inset}.world-card.complete{border-color:rgba(79,224,138,.44);background:linear-gradient(145deg,rgba(19,90,82,.68),rgba(15,55,108,.7))}.world-card.locked{opacity:.42;cursor:not-allowed;filter:saturate(.6)}
.world-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:13px;font-weight:900;letter-spacing:-.02em;color:#0a2240;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));box-shadow:0 2px 0 rgba(126,76,4,.72)}.world-card.complete .world-icon{background:linear-gradient(180deg,#a8f7c8,#4fe08a);box-shadow:0 2px 0 rgba(16,104,59,.7)}
.world-copy{min-width:0}.world-copy small,.world-copy strong,.world-copy em{display:block}.world-copy small{font-size:9px;color:#97afd3;letter-spacing:.11em;text-transform:uppercase;font-style:normal;font-weight:800}.world-copy strong{font-size:14px;line-height:1.18;margin:3px 0 5px}.world-copy em{font-size:10.5px;color:#b8c9e2;font-style:normal}.world-mini-track{grid-column:1/-1;display:block;height:5px;border-radius:99px;background:rgba(3,13,34,.68);overflow:hidden}.world-mini-track b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi))}.world-card.complete .world-mini-track b{background:linear-gradient(90deg,#45cf80,#91f0b7)}
.phase-divider{display:flex;align-items:center;gap:12px;margin:34px 2px 15px}.phase-divider span{font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-hi);white-space:nowrap}.phase-divider i{height:1px;flex:1;background:linear-gradient(90deg,rgba(255,212,92,.32),transparent)}
.frontier-teaser{border-color:rgba(169,139,255,.34);background:linear-gradient(145deg,rgba(54,39,110,.7),rgba(18,53,111,.76))}.frontier-teaser>span{color:#c4b3ff}.frontier-meta{display:flex;gap:14px;margin:9px 0 1px}.frontier-meta small{color:#9fb7db;text-transform:none;letter-spacing:0}.frontier-meta b{color:#fff}.frontier-teaser .mini-action{background:linear-gradient(180deg,#d5c9ff,#9d82ee);box-shadow:0 2px 0 rgba(71,46,139,.75)}
@media (min-width:760px){.mode-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.world-map-shell{padding:16px}.world-map{grid-auto-columns:minmax(196px,82vw)}.world-card{min-height:110px}.phase-divider{margin-top:28px}}

/* ══════════════════════════════════════════════════════════════════════
   Competitive League · v5
   ══════════════════════════════════════════════════════════════════════ */
.game-nav{grid-template-columns:repeat(5,1fr);width:min(650px,calc(100% - 24px))}
.league-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,.72fr);gap:17px;align-items:center;margin-bottom:18px;padding:21px;border-radius:var(--r-lg);background:linear-gradient(145deg,rgba(34,72,139,.86),rgba(7,27,68,.92));border:2px solid rgba(255,212,92,.25);box-shadow:0 8px 0 rgba(3,12,33,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.league-emblem{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 32% 24%,#fff1a3,#e5ad35 55%,#9b6811);box-shadow:0 5px 0 rgba(91,54,6,.65),0 10px 28px rgba(0,0,0,.25)}
.league-emblem span{font-size:25px;font-weight:900;letter-spacing:.03em;color:#10264a;text-shadow:0 1px rgba(255,255,255,.5)}
.league-hero-copy h2{margin:3px 0 4px;font-size:27px}.league-hero-copy p{margin:0 0 10px;color:#c5d5ed;font-size:13px}.league-progress{height:9px;overflow:hidden;border-radius:99px;background:#102750;border:1px solid rgba(255,255,255,.08)}.league-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi))}.league-hero-stats{display:flex;gap:14px;margin-top:9px;color:#a9bfdf;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.league-hero-stats b{color:#fff}
.trader-card{padding:13px;border-radius:15px;background:rgba(3,15,40,.42);border:1px solid rgba(255,255,255,.08)}.trader-card label,.trader-card small{display:block}.trader-card label{margin-bottom:6px;color:#a9bfdf;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.trader-card>div{display:flex;gap:6px}.trader-card input{min-width:0;width:100%;padding:10px 11px;border-radius:11px;color:#fff;background:#071a3e;border:1px solid rgba(255,212,92,.2);outline:none}.trader-card input:focus{border-color:var(--gold)}.trader-card button{padding:8px 11px;border-radius:11px;cursor:pointer;color:#092143;font-weight:800;background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid))}.trader-card small{margin-top:6px;color:#899fbe;font-size:10px;line-height:1.35}
.league-panel{margin-top:18px;padding:21px;border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(9,31,72,.84),rgba(5,20,52,.82));border:2px solid rgba(255,212,92,.16);box-shadow:0 7px 0 rgba(4,13,35,.35)}
.league-board{display:grid}.league-head-row,.league-row{display:grid;grid-template-columns:38px minmax(0,1fr) 50px 72px;gap:9px;align-items:center;padding:10px 9px}.league-head-row{padding-top:0;color:#849bbc;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.league-head-row span:last-child{text-align:right}.league-row{border-top:1px solid rgba(255,255,255,.06);border-radius:11px}.league-row>b{color:#8399b9;text-align:center}.league-row>span{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.league-row>span small{margin-left:5px;color:#7189a9;font-size:8px;text-transform:uppercase}.league-row>i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:900;color:#b6cae7;background:rgba(255,255,255,.06)}.league-row>strong{text-align:right;color:var(--gold-hi);font-variant-numeric:tabular-nums}.league-row.me{background:linear-gradient(90deg,rgba(255,212,92,.13),rgba(255,212,92,.035));outline:1px solid rgba(255,212,92,.22)}.league-row.me>b{color:var(--gold-hi)}
.house-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:17px}.house-choice{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:11px;border-radius:14px;text-align:left;cursor:pointer;color:#dce8f8;background:rgba(4,16,42,.4);border:1px solid rgba(255,255,255,.08)}.house-choice>i{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-weight:900;color:#0b2141;background:linear-gradient(180deg,#d7e7ff,#769bd3)}.house-choice b,.house-choice small{display:block}.house-choice b{font-size:12px}.house-choice small{margin-top:2px;color:#8fa8cb;font-size:9.5px;line-height:1.25}.house-choice.selected{border-color:var(--gold);background:rgba(130,94,14,.2);box-shadow:inset 0 0 0 1px rgba(255,212,92,.18)}.house-choice.selected>i{background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid))}
.house-rank-head,.house-rank-row{display:grid;grid-template-columns:30px 36px minmax(0,1fr) 80px;gap:8px;align-items:center}.house-rank-head{grid-template-columns:minmax(0,1fr) 90px;padding:0 8px 7px;color:#8299ba;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.house-rank-head span:last-child{text-align:right}.house-rank-row{padding:9px 8px;border-top:1px solid rgba(255,255,255,.055)}.house-rank-row>b{color:#8096b6;text-align:center}.house-rank-row>i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:900;background:rgba(255,255,255,.07)}.house-rank-row span strong,.house-rank-row span small{display:block}.house-rank-row span strong{font-size:12px}.house-rank-row span small{color:#8198ba;font-size:9px}.house-rank-row em{font-style:normal;font-weight:800;text-align:right;color:var(--gold-hi)}.house-rank-row.mine{background:rgba(255,212,92,.055)}
.achievement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.achievement{position:relative;display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:center;min-height:74px;padding:11px;border-radius:14px;opacity:.48;background:rgba(4,15,40,.42);border:1px solid rgba(255,255,255,.07)}.achievement>div{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#7187a5;background:#15294d;border:2px solid #2b4268}.achievement b,.achievement small{display:block}.achievement b{font-size:12px}.achievement small{margin-top:2px;color:#8da5c6;font-size:9.5px;line-height:1.28}.achievement>em{position:absolute;right:8px;top:7px;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.08em;color:#7188aa}.achievement.unlocked{opacity:1;border-color:rgba(255,212,92,.24);background:linear-gradient(145deg,rgba(83,63,19,.28),rgba(9,28,65,.65))}.achievement.unlocked>div{color:#102548;background:linear-gradient(180deg,#fff0a1,var(--gold-mid));border-color:#ffe37a;box-shadow:0 2px 0 #75520d}.achievement.unlocked>em{color:#78e7a6}
@media (max-width:650px){.league-hero{grid-template-columns:65px 1fr}.league-emblem{width:62px;height:62px;border-radius:18px}.trader-card{grid-column:1/-1}.house-picker,.achievement-grid{grid-template-columns:1fr}.game-nav{width:calc(100% - 16px);padding:5px}.nav-item{padding:6px 2px}.nav-item b{font-size:9.5px}.nav-item span{font-size:16px}.league-panel{padding:16px}.league-head-row,.league-row{grid-template-columns:28px minmax(0,1fr) 38px 55px;padding-left:3px;padding-right:3px}}
.league-separator{padding:5px;text-align:center;color:#617897;letter-spacing:.25em;border-top:1px solid rgba(255,255,255,.05)}
.season-note{display:inline-block;margin:0 0 8px;padding:4px 7px;border-radius:8px;color:#8ee8b5;background:rgba(48,172,103,.12);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}

/* ── Mandatory account gate + top game navigation · v5.1 ─────────── */
body:not(.immersive){padding-bottom:0}
body.auth-locked{overflow:hidden}
body.auth-locked .app-header,
body.auth-locked .tab-bar,
body.auth-locked .screen{display:none!important}

.auth-gate{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:28px 18px;
  background:
    radial-gradient(900px 560px at 50% -8%,rgba(63,122,224,.58),transparent 62%),
    radial-gradient(600px 440px at 88% 8%,rgba(245,166,35,.17),transparent 62%),
    linear-gradient(180deg,#0a1b3d 0%,#071634 56%,#050d20 100%);
}
.auth-gate-card{width:min(520px,100%);padding:32px 30px 29px;text-align:center;border-radius:30px;
  background:linear-gradient(160deg,rgba(29,79,168,.96),rgba(7,28,68,.97));
  border:3px solid rgba(255,212,92,.34);box-shadow:0 13px 0 rgba(2,8,24,.56),0 24px 70px rgba(0,0,0,.42),inset 0 2px 0 rgba(255,255,255,.13)}
.auth-gate-logo{display:block;width:116px;height:auto;margin:0 auto 8px;filter:drop-shadow(0 7px 16px rgba(2,8,24,.5))}
.auth-gate-card .eyebrow{margin-bottom:8px}.auth-gate-card h1{font-size:clamp(30px,7vw,44px);line-height:1.05;color:var(--gold-hi);text-shadow:0 3px 0 rgba(5,16,45,.48)}
.auth-gate-card>p{max-width:430px;margin:13px auto 0;color:#d5e4fb;font-size:15px;line-height:1.55}
/* Una colonna sola: l'ingresso da ospite è la scelta principale,
   metterlo affiancato a "ho già un account" li farebbe leggere pari. */
.auth-gate-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
.auth-gate-actions .btn{width:100%;padding:14px 16px}
.auth-gate-actions .auth-tertiary{margin-top:2px;font-size:13px;color:#a9c2e8;text-decoration:none;padding:6px}
.auth-gate-actions .auth-tertiary:hover:not([disabled]){color:var(--gold-hi)}
.auth-gate-actions .auth-tertiary[disabled]{display:none}
.auth-secondary{color:#fff!important;background:linear-gradient(180deg,var(--royal-lite),var(--royal-deep))!important;
  border:2px solid rgba(255,212,92,.3)!important;box-shadow:0 5px 0 rgba(5,18,48,.64),inset 0 2px 0 rgba(255,255,255,.14)!important}
.auth-gate-actions button[disabled]{opacity:.46;cursor:not-allowed;filter:saturate(.5)}
.auth-gate-status{min-height:22px!important;margin-top:15px!important;color:#a9c2e8!important;font-size:12.5px!important}
.auth-gate-status.ok{color:var(--green-hi)!important}.auth-gate-status.warn{color:var(--red-hi)!important}

.app-header{position:sticky;top:0;z-index:60;padding:0;background:linear-gradient(180deg,rgba(29,79,168,.98),rgba(9,34,82,.96));
  border-bottom:3px solid rgba(255,212,92,.34);box-shadow:0 7px 22px rgba(2,8,24,.46);backdrop-filter:blur(14px)}
.app-header-inner{max-width:1120px;margin:0 auto;padding:9px 18px;display:grid;grid-template-columns:auto minmax(390px,1fr) auto;align-items:center;gap:16px}
.app-header .brand{height:42px}.app-header .brand-link{justify-self:start}
.header-stats{justify-self:end;display:flex;gap:7px;white-space:nowrap}
.app-header .stat{padding:7px 11px;font-size:15px;gap:5px}.app-header .stat i{font-size:13px;font-weight:800}.app-header .stat.level i{font-size:9px;letter-spacing:.05em;color:#bcd2f6}

/* The primary game navigation lives beside the rewards, never at the bottom. */
.game-nav{position:static!important;left:auto!important;bottom:auto!important;transform:none!important;z-index:auto!important;
  width:100%!important;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(68px,1fr))!important;gap:4px;padding:5px!important;border-radius:18px;
  background:rgba(5,17,46,.56);border:1px solid rgba(255,212,92,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:none}
.nav-item{min-width:0;flex-direction:row;gap:5px;padding:8px 7px;border-radius:12px;color:#b8ccec;white-space:nowrap}
.nav-item span{font-size:15px}.nav-item b{font-size:11px}.nav-item.active{box-shadow:0 2px 0 rgba(126,76,4,.62)}
body.immersive .app-header{display:none}
body.immersive .game-nav{display:grid}

@media (max-width:820px){
  .app-header-inner{grid-template-columns:auto 1fr auto;gap:9px;padding:8px 12px}
  .app-header .brand{height:36px}.header-stats{gap:5px}.app-header .stat{padding:6px 9px;font-size:13px}
  .game-nav{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(5,1fr)!important}
  .nav-item{justify-content:center;padding:6px 4px}.nav-item span{font-size:13px}.nav-item b{font-size:10px}
}
@media (max-width:480px){
  .app-header-inner{padding:7px 8px}.app-header .brand{height:32px}
  .app-header .stat{padding:5px 7px;font-size:12px;border-width:1px}.app-header .stat i{font-size:11px}.app-header .stat.level i{font-size:8px}
  .nav-item{gap:3px}.nav-item span{font-size:12px}.nav-item b{font-size:9px}
  .auth-gate-card{padding:25px 18px 23px;border-radius:24px}.auth-gate-logo{width:96px}
}
/* Auth form must sit above the mandatory entry gate. */
.cloud-dialog{z-index:220}

/* ── pagina legale ────────────────────────────────────────────────── */
.legal{max-width:680px;margin:0 auto;padding:6px 0 30px}
.legal-lead{padding:16px 18px;border-radius:var(--r-md);font-size:16.5px;line-height:1.6;
  background:rgba(18,53,111,.55);border:2px solid rgba(255,212,92,.2);color:#eaf1ff}
.legal h2{font-size:19px;margin:30px 0 10px;color:#fff8e6}
.legal h2.legal-warn{color:var(--gold)}
.legal p{margin:0 0 13px;font-size:16px;line-height:1.65;color:#e2edff}
.legal ul{margin:0 0 13px;padding-left:22px}
.legal li{margin-bottom:9px;font-size:16px;line-height:1.6;color:#e2edff}
.legal strong{color:#fff8e6}
.legal-date{margin-top:26px;font-size:14.5px;color:var(--muted-2)}
.app-legal{max-width:560px;margin:0 auto;padding:26px 20px 0;text-align:center}
.app-legal p{margin:0;font-size:13px;line-height:1.6;color:var(--muted-2)}
/* Un collegamento nel piede si tocca col pollice come ogni altro: 44px. */
.app-legal a{display:inline-block;min-height:44px;padding:12px 8px;color:var(--gold-hi)}
.auth-gate-legal{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted-2);text-align:center}
.auth-gate-legal a{color:var(--gold-hi)}

/* ── spendere una vita per vedere la soluzione ────────────────────── */
.btn.reveal{display:block;width:100%;margin:10px 0 0;padding:9px 18px;border-radius:12px;
  font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;
  color:#a9c2e8;background:transparent;
  border:0;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.btn.reveal:hover:not(:disabled){background:rgba(4,14,40,.5);color:var(--gold-hi)}
.btn.reveal:active:not(:disabled){transform:translateY(2px)}
.btn.reveal:disabled{opacity:.42;cursor:not-allowed;color:var(--muted-2);
  border-color:rgba(255,212,92,.16)}
.btn.reveal:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}

.feedback.shown{border-top-color:var(--gold)}
.fb-note{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--gold-hi)}

/* la soluzione mostrata non è interattiva */
.orderitem.solved{opacity:.95}
.orderitem.solved b{background:linear-gradient(180deg,#fff0b8,#f5a623);color:#08183f}
.pairs.solved .pair-btn,.tiles.solved .tile{cursor:default;pointer-events:none}
.tiles.solved .tile{border-color:rgba(255,212,92,.45)}

/* ── contatore dei salvagenti nella barra ─────────────────────────── */
.stat.lives .stat-buoy{display:block;width:17px;height:17px;border-radius:50%;
  background:
    conic-gradient(#ff6b52 0 25%, #fdf6e8 0 50%, #ff6b52 0 75%, #fdf6e8 0);
  box-shadow:inset 0 0 0 1px rgba(6,18,44,.45);
  position:relative}
.stat.lives .stat-buoy::after{content:"";position:absolute;inset:5px;border-radius:50%;
  background:var(--navy-deep,#050d20);box-shadow:inset 0 0 0 1px rgba(6,18,44,.5)}
.stat.lives.empty .stat-buoy{filter:grayscale(1);opacity:.45}
.stat.lives.empty b{color:var(--muted-2)}

/* ══════════════════════════════════════════════════════════════════════
   EXPERIENCE LAYER v7 — motion, mobile, navigation, Hélène, daily loop
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --glass:rgba(7,24,58,.72);--glass-strong:rgba(8,31,73,.92);
  --line-soft:rgba(174,205,255,.13);--cyan:#70d9ff;--violet:#a98cff;
}
body{overflow-x:hidden}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(10px);opacity:.42}
body::before{width:46vw;height:46vw;min-width:360px;min-height:360px;left:-18vw;top:18vh;background:radial-gradient(circle,rgba(32,102,224,.26),transparent 68%);animation:wotAmbientA 15s ease-in-out infinite alternate}
body::after{width:38vw;height:38vw;min-width:300px;min-height:300px;right:-14vw;top:46vh;background:radial-gradient(circle,rgba(245,166,35,.13),transparent 68%);animation:wotAmbientB 18s ease-in-out infinite alternate}
@keyframes wotAmbientA{to{transform:translate(8vw,-6vh) scale(1.08)}}
@keyframes wotAmbientB{to{transform:translate(-6vw,5vh) scale(.94)}}

/* richer screen entrances */
.screen.active:not(#lessonScreen):not(#flashScreen):not(#bossScreen){animation:screenReveal .36s cubic-bezier(.2,.75,.2,1)}
@keyframes screenReveal{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap{position:relative}
.mode-card,.league-panel,.world-map-shell,.daily-quests,.mode-hero,.career-hero,.practice-card,.greet{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
@media (hover:hover){
  .mode-card:hover,.world-card:hover,.achievement:hover{transform:translateY(-3px)}
  .league-panel:hover,.daily-quests:hover{border-color:rgba(255,212,92,.24)}
}
button,a{ -webkit-tap-highlight-color:transparent }
.btn,.mini-action,.nav-item,.linkedin-invite,.invite-actions button{transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
.btn:active,.mini-action:active,.nav-item:active,.linkedin-invite:active,.invite-actions button:active{transform:translateY(2px) scale(.985)}

/* top navigation: five mini game portals, not generic tabs */
.app-header{background:linear-gradient(180deg,rgba(10,39,92,.94),rgba(5,20,54,.92));box-shadow:0 10px 32px rgba(0,0,0,.34);border-bottom:1px solid rgba(255,212,92,.22)}
.app-header-inner{max-width:1240px}
.game-nav{gap:7px!important;padding:6px!important;border-radius:22px;background:rgba(2,12,35,.54);border:1px solid rgba(174,205,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.nav-item{position:relative;min-height:48px!important;padding:5px 9px!important;display:grid!important;grid-template-columns:34px 1fr;grid-template-rows:1fr 1fr;column-gap:7px;row-gap:0;align-items:center!important;justify-items:start!important;border:1px solid transparent!important;background:transparent!important;color:#9fb7db!important;box-shadow:none!important}
.nav-item .nav-glyph{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:11px;font-size:15px!important;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.nav-item b{align-self:end;font-size:11px!important;line-height:1.05;color:#e8f1ff}
.nav-item small{align-self:start;font-size:8px;line-height:1.15;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#728aad}
.nav-item::after{content:"";position:absolute;left:16px;right:16px;bottom:-6px;height:3px;border-radius:4px;background:transparent;transform:scaleX(.35);transition:.2s ease}
.nav-item.active{background:linear-gradient(145deg,rgba(27,72,150,.74),rgba(10,37,83,.82))!important;border-color:rgba(255,212,92,.22)!important;transform:none!important}
.nav-item.active::after{background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));transform:scaleX(1);box-shadow:0 0 16px rgba(255,212,92,.45)}
.nav-item.active .nav-glyph{color:#10254a;background:linear-gradient(180deg,#fff2aa,var(--gold-mid));border-color:#ffe780;box-shadow:0 3px 12px rgba(245,166,35,.24);transform:translateY(-1px)}
.nav-item:nth-child(2).active .nav-glyph{background:linear-gradient(180deg,#bff9ff,#55cce9);border-color:#bff9ff}
.nav-item:nth-child(3).active .nav-glyph{background:linear-gradient(180deg,#c8f7d8,#66dda0);border-color:#c8f7d8}
.nav-item:nth-child(4).active .nav-glyph{background:linear-gradient(180deg,#d9ccff,#a98cff);border-color:#e2d8ff}
.nav-item:nth-child(5).active .nav-glyph{background:linear-gradient(180deg,#fff1c4,#ffc969);border-color:#fff1c4}
.header-stats .stat{background:rgba(2,13,37,.48);border-color:rgba(174,205,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* section identity */
.section-top{position:relative;max-width:1120px;margin:0 auto;padding:34px 20px 8px;display:flex;align-items:center;gap:14px}
.section-number{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;align-content:center;background:linear-gradient(145deg,rgba(38,92,184,.85),rgba(10,34,79,.88));border:1px solid rgba(255,212,92,.22);box-shadow:0 7px 22px rgba(0,0,0,.22)}
.section-number b{font-size:16px;color:var(--gold-hi);line-height:1}.section-number span{font-size:7px;margin-top:3px;text-transform:uppercase;letter-spacing:.09em;color:#9fb8df}
.section-top h1{font-size:clamp(31px,5vw,46px);letter-spacing:-.03em}
body[data-section="play"] .section-number{background:linear-gradient(145deg,rgba(32,120,150,.85),rgba(7,52,73,.9))}
body[data-section="practice"] .section-number{background:linear-gradient(145deg,rgba(36,125,85,.82),rgba(9,61,47,.9))}
body[data-section="league"] .section-number{background:linear-gradient(145deg,rgba(101,69,173,.86),rgba(43,27,91,.9))}
body[data-section="profile"] .section-number{background:linear-gradient(145deg,rgba(148,95,24,.84),rgba(71,42,8,.92))}

/* Hélène as a real in-app coach */
.helene-call{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:88;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:999px;color:#edf4ff;background:linear-gradient(145deg,rgba(18,58,124,.96),rgba(5,23,59,.98));border:1px solid rgba(255,212,92,.32);box-shadow:0 9px 28px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08);cursor:pointer}
.helene-call span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;color:#11264a;font-weight:900;background:linear-gradient(180deg,#fff3b2,var(--gold-mid));box-shadow:0 2px 7px rgba(245,166,35,.32)}
.helene-call b{font-size:11px}.helene-call:hover span{animation:helenePing .65s ease}
@keyframes helenePing{50%{transform:scale(1.12) rotate(-5deg)}}
body.immersive .helene-call,body.auth-locked .helene-call{display:none}
.helene-coach{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:72px;z-index:92;width:min(410px,calc(100vw - 28px));display:grid;grid-template-columns:106px 1fr;gap:13px;padding:15px 16px 15px 10px;border-radius:25px;background:linear-gradient(150deg,rgba(18,59,126,.98),rgba(5,22,56,.985));border:2px solid rgba(255,212,92,.3);box-shadow:0 18px 50px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px)}
.helene-coach[hidden]{display:none}.helene-coach.coach-enter{animation:coachEnter .42s cubic-bezier(.2,.9,.2,1)}
@keyframes coachEnter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.helene-avatar{align-self:end;filter:drop-shadow(0 8px 13px rgba(0,0,0,.28));animation:heleneFloat 3.3s ease-in-out infinite}
.helene-avatar svg{display:block;max-width:100%;height:auto}
@keyframes heleneFloat{50%{transform:translateY(-5px) rotate(.5deg)}}
.helene-dialogue{padding:5px 5px 3px 0}.helene-dialogue h2{margin:3px 0 7px;font-size:19px;color:#fff}.helene-dialogue p{margin:0;color:#c8d9f2;font-size:12.5px;line-height:1.48}.helene-action{margin-top:11px;padding:8px 11px;border-radius:11px;color:#0a2348;font-size:10px;font-weight:900;background:linear-gradient(180deg,#fff2a9,var(--gold-mid));border:0;cursor:pointer}.helene-close{position:absolute;right:9px;top:8px;width:28px;height:28px;border-radius:50%;border:0;color:#9fb6d6;background:rgba(0,0,0,.17);font-size:18px;cursor:pointer}

/* Daily retention: visible on Path, not buried in Play */
.daily-pulse{margin:18px 0 22px;padding:18px 20px;border-radius:22px;overflow:hidden;position:relative;background:linear-gradient(145deg,rgba(10,64,72,.88),rgba(8,35,78,.9));border:1px solid rgba(98,234,170,.24);box-shadow:0 9px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.daily-pulse::after{content:"OPEN";position:absolute;right:-8px;bottom:-19px;font-size:72px;font-weight:900;letter-spacing:-.06em;color:rgba(255,255,255,.025);pointer-events:none}
.daily-pulse-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.daily-pulse h2{margin:2px 0 0;font-size:22px}.daily-pulse>p{max-width:620px;margin:8px 0 0;color:#bdd6de;font-size:12.5px;line-height:1.5}
.daily-ring{--daily:0deg;width:64px;height:64px;flex:0 0 64px;display:grid;place-items:center;align-content:center;border-radius:50%;background:radial-gradient(circle at center,#0a3350 0 58%,transparent 59%),conic-gradient(#68e1a5 var(--daily),rgba(255,255,255,.08) 0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.daily-ring b,.daily-ring small{display:block}.daily-ring b{font-size:15px}.daily-ring small{font-size:7px;text-transform:uppercase;color:#9dc8bb;letter-spacing:.07em}
.daily-pulse-actions{display:flex;gap:8px;margin-top:13px}.daily-pulse-actions button{padding:9px 12px;border-radius:11px;font-size:10px;font-weight:900;cursor:pointer}.daily-pulse-actions button:first-child{color:#073126;background:linear-gradient(180deg,#b3f8d1,#62dfa2);border:0}.daily-pulse-actions button:last-child{color:#dbeaff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.daily-briefing-layer{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:18px;background:rgba(2,8,24,.73);backdrop-filter:blur(10px)}.daily-briefing-layer[hidden]{display:none}
.daily-briefing{position:relative;width:min(560px,100%);padding:27px 28px 24px;border-radius:30px;background:linear-gradient(150deg,#123b7c,#071a40 70%);border:2px solid rgba(255,212,92,.31);box-shadow:0 25px 80px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.08);animation:briefIn .4s cubic-bezier(.2,.9,.2,1)}
@keyframes briefIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.brief-helene{position:absolute;right:20px;top:-52px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));animation:heleneFloat 3.3s ease-in-out infinite}.brief-helene svg{display:block}.daily-briefing h2{max-width:390px;margin:7px 0 9px;font-size:25px;line-height:1.1}.daily-briefing>p{max-width:440px;color:#c4d6f0;font-size:13px;line-height:1.5}.brief-close{position:absolute;right:12px;top:12px;z-index:2;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.2);color:#b5cae8;font-size:19px;cursor:pointer}.brief-missions{display:grid;gap:8px;margin:16px 0}.brief-mission{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:10px 11px;border-radius:14px;background:rgba(3,14,38,.38);border:1px solid rgba(255,255,255,.065)}.brief-mission>i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;font-style:normal;font-weight:900;color:#91aacd;background:#142b55}.brief-mission b,.brief-mission small{display:block}.brief-mission b{font-size:12px}.brief-mission small{margin-top:2px;color:#8fa8ca;font-size:9.5px}.brief-mission.done{border-color:rgba(98,224,162,.25);background:rgba(22,91,67,.18)}.brief-mission.done>i{color:#073425;background:#77e9ad}.brief-note{display:block;margin-top:10px;text-align:center;color:#7890b2;font-size:9px}

/* LinkedIn invite card */
.invite-panel{display:grid;grid-template-columns:62px 1fr;gap:15px;align-items:center;background:linear-gradient(145deg,rgba(13,63,117,.82),rgba(7,27,65,.86))!important;border-color:rgba(77,172,255,.2)!important}.invite-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:25px;font-weight:900;color:white;background:#0a66c2;box-shadow:0 5px 0 #07457f}.invite-copy h2{margin:2px 0 6px}.invite-copy p{margin:0;color:#aec3df;font-size:12px;line-height:1.45}.invite-actions{display:flex;gap:8px;margin-top:11px}.linkedin-invite,.invite-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:37px;padding:8px 12px;border-radius:11px;font-size:10px;font-weight:900;text-decoration:none;cursor:pointer}.linkedin-invite{color:white;background:#0a66c2;border:1px solid #2783df}.invite-actions button{color:#d9e8fb;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}.invite-copy>small{display:block;margin-top:9px;color:#738caf;font-size:8.8px;line-height:1.35}

/* Mobile is a first-class layout */
@media (max-width:820px){
  body:not(.immersive){padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .app-header-inner{grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:7px 9px;padding:7px 10px calc(6px + env(safe-area-inset-top))}
  .app-header .brand{height:34px}.header-stats{grid-column:2;grid-row:1;justify-self:end;max-width:100%;overflow:hidden}.header-stats .stat{min-width:0}
  .game-nav{grid-column:1/-1;grid-row:2;display:flex!important;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:5px!important;gap:5px!important}.game-nav::-webkit-scrollbar{display:none}
  .nav-item{flex:1 0 106px;scroll-snap-align:center;min-height:43px!important;grid-template-columns:29px 1fr;padding:4px 7px!important}.nav-item .nav-glyph{width:27px;height:27px;border-radius:9px}.nav-item b{font-size:10px!important}.nav-item small{font-size:7px}
  .section-top{padding:24px 14px 5px}.section-number{width:46px;height:46px;border-radius:15px}.section-top h1{font-size:34px}
  .wrap,.tab-wrap{padding-left:13px!important;padding-right:13px!important}
  .mode-grid{grid-template-columns:1fr!important}.mode-card{min-height:0}.mode-hero{padding:21px!important}.mode-hero h2{font-size:28px}
  .daily-quests,.league-panel,.world-map-shell,.boss-shelf{padding:15px!important;border-radius:19px!important}
  .helene-coach{right:10px;bottom:68px;width:calc(100vw - 20px);grid-template-columns:86px 1fr;padding:12px 12px 12px 7px}.helene-avatar svg{width:86px;height:86px}.helene-dialogue p{font-size:11.5px}.helene-call{right:10px;bottom:calc(var(--mobile-tab-h,70px) + max(10px,env(safe-area-inset-bottom)));padding-right:9px}.helene-call b{display:none}
  .daily-pulse{padding:16px;border-radius:19px}.daily-pulse>p{font-size:11.5px}.daily-ring{width:57px;height:57px;flex-basis:57px}.daily-pulse-actions{display:grid;grid-template-columns:1fr 1fr}.daily-pulse-actions button{min-height:42px}
  .daily-briefing{padding:23px 17px 18px;border-radius:24px}.brief-helene{right:8px;top:-40px}.brief-helene svg{width:88px;height:88px}.daily-briefing h2{max-width:300px;font-size:22px}.daily-briefing>p{font-size:11.5px}
  .invite-panel{grid-template-columns:46px 1fr;gap:11px}.invite-icon{width:44px;height:44px;border-radius:14px;font-size:19px}.invite-actions{display:grid;grid-template-columns:1fr 1fr}.linkedin-invite,.invite-actions button{min-height:43px}
  .world-map{padding-bottom:8px;scroll-snap-type:x proximity}.world-card{scroll-snap-align:start}
}
@media (max-width:470px){
  .header-stats .stat.lives{display:flex!important}.app-header .stat{padding:5px 6px!important}.app-header .brand{height:30px}
  .game-nav{margin:0 -2px}.nav-item{flex-basis:92px;grid-template-columns:26px 1fr;column-gap:5px}.nav-item .nav-glyph{width:25px;height:25px}.nav-item small{display:none}.nav-item b{align-self:center;grid-row:1/3}
  .intro{padding-top:17px!important}.intro h1{font-size:31px!important}.intro p{font-size:13px!important}
  .section-number{width:40px;height:40px;border-radius:13px}.section-number span{display:none}.section-top h1{font-size:31px}
  .daily-pulse-head{align-items:flex-start}.daily-pulse h2{font-size:19px}.daily-ring{width:52px;height:52px;flex-basis:52px}
  .invite-panel{grid-template-columns:1fr}.invite-icon{margin-bottom:2px}.invite-actions{grid-template-columns:1fr}
  .achievement-grid{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after,.helene-avatar,.brief-helene{animation:none!important}.screen.active{animation:none!important}
  .mode-card,.league-panel,.world-map-shell,.daily-quests,.mode-hero,.nav-item,.nav-item .nav-glyph{transition:none!important}
}

/* ── v7.1 Friends League / referrals / desk duels ───────────────── */
.social-circle{position:relative;overflow:hidden}
.social-circle::after{content:"";position:absolute;right:-90px;top:-120px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(79,224,138,.13),transparent 68%);pointer-events:none}
.social-title{position:relative;z-index:1}.social-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:13px;margin-top:12px;position:relative;z-index:1}
.friends-league-card,.referral-card,.duel-zone,.social-rewards{border:1px solid rgba(255,255,255,.075);background:rgba(2,13,36,.34);border-radius:18px;padding:14px}
.social-subhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:11px}.social-subhead b,.social-subhead small{display:block}.social-subhead b{font-size:13px}.social-subhead small{margin-top:2px;color:#8ea9cf;font-size:9.5px;line-height:1.35}.social-subhead>span{font-size:8.5px;font-weight:800;color:#82a1ca;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.friends-board{overflow:hidden;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(4,14,37,.34)}.friends-head,.friends-row{display:grid;grid-template-columns:26px minmax(90px,1fr) 42px 52px 72px;gap:7px;align-items:center;padding:8px 9px}.friends-head{font-size:7.5px;text-transform:uppercase;letter-spacing:.08em;color:#718bb0;border-bottom:1px solid rgba(255,255,255,.05)}.friends-row{min-height:45px;border-bottom:1px solid rgba(255,255,255,.045);font-size:10px}.friends-row:last-child{border-bottom:0}.friends-row.me{background:linear-gradient(90deg,rgba(255,212,92,.105),rgba(255,212,92,.025))}.friends-row>b{color:#7893ba}.friends-row>span{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friends-row>span small{display:block;color:#d5b753;font-size:7px;text-transform:uppercase}.friends-row>i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#143465;color:#dbe8fb;font-style:normal;font-weight:900}.friends-row>strong{text-align:right;font-variant-numeric:tabular-nums}.friends-row>button{min-height:31px;padding:5px 7px;border-radius:9px;background:linear-gradient(180deg,#315fae,#1e437f);border:1px solid rgba(255,255,255,.12);font-size:8px;font-weight:900;cursor:pointer}.friends-row>button:hover{filter:brightness(1.1)}
.referral-card{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(16,70,98,.39),rgba(4,18,43,.52));border-color:rgba(79,224,138,.15)}.referral-card>strong{margin:5px 0 6px;font-size:23px;letter-spacing:.08em;color:#a9f5c9}.referral-card>p{margin:0;color:#a8bfdf;font-size:10px;line-height:1.45}.referral-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.referral-actions a,.referral-actions button{display:flex;align-items:center;justify-content:center;min-height:38px;border-radius:11px;text-decoration:none;font-size:8.5px;font-weight:900;cursor:pointer}.referral-actions a{background:#0a66c2;color:#fff;border:1px solid #2b83d9}.referral-actions button{background:rgba(255,255,255,.06);color:#dceafa;border:1px solid rgba(255,255,255,.09)}.referral-card>small{margin-top:8px;color:#6f89ae;font-size:8px;line-height:1.35}
.duel-zone,.social-rewards{margin-top:13px}.challenge-list{display:grid;gap:8px}.challenge-card{display:grid;grid-template-columns:38px minmax(120px,1fr) auto 72px;gap:9px;align-items:center;padding:10px;border-radius:13px;background:rgba(8,27,63,.54);border:1px solid rgba(255,255,255,.055)}.challenge-card.finished{background:rgba(11,52,50,.28);border-color:rgba(79,224,138,.12)}.challenge-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#274f91,#132e62);font-size:17px}.challenge-copy span,.challenge-copy b,.challenge-copy small{display:block}.challenge-copy span{color:#7ca3d8;font-size:7.5px;text-transform:uppercase;letter-spacing:.05em}.challenge-copy b{margin-top:2px;font-size:10.5px}.challenge-copy small{margin-top:2px;color:#839cbc;font-size:8px}.challenge-card>em{font-style:normal;font-size:8px;font-weight:900;color:#e1bd55;text-transform:uppercase}.challenge-card>button{min-height:34px;border-radius:10px;background:linear-gradient(180deg,#4f79c1,#2c5392);font-size:8px;font-weight:900;cursor:pointer}.challenge-card>button[disabled]{opacity:.38;cursor:default}
.social-reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.social-reward{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:0 8px;padding:10px;border-radius:13px;background:rgba(8,27,63,.42);border:1px solid rgba(255,255,255,.05);opacity:.62}.social-reward.unlocked{opacity:1;border-color:rgba(79,224,138,.18);background:rgba(17,73,58,.25)}.social-reward>i{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#1a3768;font-style:normal;font-size:9px;font-weight:900}.social-reward.unlocked>i{background:#5bdda0;color:#073424}.social-reward b,.social-reward small{display:block}.social-reward b{font-size:9px}.social-reward small{margin-top:2px;color:#7890b2;font-size:7.6px;line-height:1.3}.social-reward>em{grid-column:2;font-style:normal;color:#c3a647;font-size:6.8px;font-weight:900;letter-spacing:.05em}.social-reward.unlocked>em{color:#73dfaa}
.social-empty{padding:18px;border:1px dashed rgba(255,255,255,.12);border-radius:14px;text-align:center;background:rgba(2,11,29,.25)}.social-empty.compact{padding:14px}.social-empty b{display:block;font-size:11px}.social-empty p{margin:5px auto 0;color:#839cbd;font-size:9px;max-width:410px}.social-empty button{margin-top:10px;min-height:36px;padding:7px 11px;border-radius:10px;background:#204d94;font-size:8px;font-weight:900;cursor:pointer}.social-loading{display:flex;gap:10px;align-items:center;justify-content:center;padding:28px;color:#8da7c8;font-size:10px}.social-loading span{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:#6ee1a6;animation:socialSpin .7s linear infinite}@keyframes socialSpin{to{transform:rotate(360deg)}}

.social-dialog{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:16px;background:rgba(2,8,22,.76);backdrop-filter:blur(9px)}.social-dialog[hidden]{display:none}.social-modal{position:relative;width:min(470px,100%);padding:24px;border-radius:25px;background:linear-gradient(150deg,#123b79,#071933);border:2px solid rgba(255,212,92,.24);box-shadow:0 25px 80px rgba(0,0,0,.52)}.social-modal h2{margin:5px 0 7px}.social-modal p{margin:0 0 14px;color:#9eb4d2;font-size:11px;line-height:1.45}.social-modal label{display:grid;gap:6px;color:#a9bfdd;font-size:9px;font-weight:800}.social-modal select{width:100%;min-height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#081b3f;color:#fff;padding:0 11px;font:inherit}.social-modal .btn{margin-top:13px}.social-modal>small{display:block;margin-top:9px;color:#7e96b8;font-size:8px}.social-x{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.2);font-size:20px;cursor:pointer}

.social-duel{position:fixed;inset:0;z-index:190;display:block;overflow:auto;background:radial-gradient(900px 500px at 50% -5%,#285cb5,transparent 62%),linear-gradient(180deg,#091b3d,#040c1d)}.social-duel[hidden]{display:none}.duel-top{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 18px;background:rgba(5,19,49,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}.duel-top>button{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);font-size:22px;cursor:pointer}.duel-top>div span,.duel-top>div b{display:block}.duel-top>div span{font-size:8px;color:#8fa9cc;text-transform:uppercase}.duel-top>div b{font-size:13px}.duel-score{text-align:right}.duel-score strong{font-size:20px;color:#ffd45c}.duel-progress{height:4px;background:#0a214c}.duel-progress i{display:block;height:100%;background:linear-gradient(90deg,#4fe08a,#ffd45c);transition:width .3s ease}.duel-body{width:min(620px,calc(100% - 28px));margin:0 auto;padding:45px 0 60px}.duel-body h2{font-size:clamp(22px,5vw,31px);line-height:1.2;margin:8px 0 24px}.duel-options{display:grid;gap:10px}.duel-options button{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;text-align:left;padding:12px;border-radius:15px;background:linear-gradient(180deg,rgba(32,74,137,.72),rgba(14,44,94,.78));border:2px solid rgba(255,255,255,.08);cursor:pointer}.duel-options button i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#0c2859;font-style:normal;font-weight:900}.duel-options button span{font-size:12px;font-weight:700}.duel-options button.selected{border-color:#ffd45c;transform:translateY(-1px)}.duel-options button.correct{border-color:#4fe08a;background:rgba(23,98,69,.55)}.duel-options button.wrong{border-color:#ff7b8f;background:rgba(110,31,52,.5)}.duel-numeric{display:flex;align-items:center;border:2px solid rgba(255,255,255,.09);border-radius:15px;background:#071a3c;overflow:hidden}.duel-numeric input{flex:1;min-width:0;height:58px;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:20px;padding:0 15px}.duel-numeric span{padding:0 14px;color:#98afd0;font-size:11px}.duel-feedback{margin:14px 0;padding:12px 14px;border-radius:13px}.duel-feedback.ok{background:rgba(24,102,71,.34);border:1px solid rgba(79,224,138,.22)}.duel-feedback.bad{background:rgba(119,33,52,.32);border:1px solid rgba(255,123,143,.2)}.duel-feedback b{font-size:11px}.duel-feedback p{margin:3px 0 0;color:#b7c9e2;font-size:9.5px}.duel-body>.btn{margin-top:15px}.duel-result{width:min(520px,calc(100% - 28px));margin:0 auto;padding:90px 0;text-align:center}.duel-result-mark{width:88px;height:88px;margin:0 auto 20px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(145deg,#ffd45c,#d78a12);color:#201502;font-size:40px;font-weight:900;box-shadow:0 12px 0 rgba(84,47,0,.45)}.duel-result h1{font-size:46px;color:#fff0b8}.duel-result p{max-width:440px;margin:10px auto 18px;color:#9fb4d2;font-size:12px}.duel-result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.duel-result-stats div{padding:14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}.duel-result-stats b,.duel-result-stats small{display:block}.duel-result-stats b{font-size:20px}.duel-result-stats small{color:#829abc;font-size:8px;text-transform:uppercase}
body.friend-frame-unlocked #careerHero>*,body.friend-frame-unlocked .career-hero{box-shadow:0 0 0 2px rgba(79,224,138,.22),0 0 34px rgba(79,224,138,.12)}

@media(max-width:820px){
  .social-grid{grid-template-columns:1fr}.friends-head,.friends-row{grid-template-columns:24px minmax(90px,1fr) 34px 45px 66px}.social-reward-grid{grid-template-columns:1fr}.challenge-card{grid-template-columns:36px minmax(100px,1fr) auto}.challenge-card>em{grid-column:2}.challenge-card>button{grid-column:3;grid-row:1/3}.duel-body{padding-top:30px}.duel-options button{min-height:58px}.referral-actions a,.referral-actions button{min-height:44px}
}
@media(max-width:470px){
  .friends-head{display:none}.friends-row{grid-template-columns:22px minmax(80px,1fr) 30px 42px;gap:5px}.friends-row>button{grid-column:2/5;min-height:35px}.referral-actions{grid-template-columns:1fr}.challenge-card{grid-template-columns:34px 1fr}.challenge-card>em{grid-column:2}.challenge-card>button{grid-column:1/3;grid-row:auto;min-height:38px}.duel-top{padding:9px 11px;grid-template-columns:38px 1fr auto}.duel-body{width:calc(100% - 22px);padding-top:24px}.duel-body h2{font-size:21px}.duel-options button span{font-size:11px}.duel-result{padding-top:55px}.duel-result h1{font-size:38px}
}
@media(prefers-reduced-motion:reduce){.social-loading span{animation:none}.duel-progress i{transition:none}.duel-options button.selected{transform:none}}
.social-nav-badge{position:absolute;right:5px;top:4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#ff6d82;color:white;font-size:7px;font-weight:900;box-shadow:0 2px 0 #8b1e31;border:1px solid rgba(255,255,255,.35)}
.weekly-rival{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;margin-top:13px;padding:13px 14px;border-radius:18px;background:linear-gradient(120deg,rgba(81,42,123,.4),rgba(10,34,73,.52));border:1px solid rgba(169,139,255,.22)}.weekly-rival-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#a98bff,#5d49ad);box-shadow:0 5px 0 #34276d;font-size:18px;font-weight:900}.weekly-rival h3{margin:2px 0 2px;font-size:15px}.weekly-rival p{margin:0;color:#98add0;font-size:9px;line-height:1.35}.weekly-rival>button{min-height:38px;padding:7px 11px;border-radius:11px;background:linear-gradient(180deg,#8f75e8,#5c45b1);border:1px solid rgba(255,255,255,.15);font-size:8px;font-weight:900;cursor:pointer}
@media(max-width:470px){.weekly-rival{grid-template-columns:42px 1fr}.weekly-rival-mark{width:40px;height:40px}.weekly-rival>button{grid-column:1/3;min-height:40px}.social-nav-badge{right:3px;top:2px}}
.weekly-rival>button[disabled]{opacity:.42;cursor:default}
.social-toast{position:fixed;right:18px;bottom:18px;z-index:210;width:min(390px,calc(100vw - 28px));display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center;padding:11px 14px 11px 8px;border-radius:20px;background:linear-gradient(145deg,#17447f,#081a3a);border:1px solid rgba(79,224,138,.25);box-shadow:0 18px 55px rgba(0,0,0,.45);opacity:0;transform:translateY(18px) scale(.97);transition:.32s cubic-bezier(.2,.9,.2,1);pointer-events:none}.social-toast.show{opacity:1;transform:none}.social-toast svg{display:block;filter:drop-shadow(0 5px 8px rgba(0,0,0,.25))}.social-toast small,.social-toast b,.social-toast p{display:block}.social-toast small{color:#73dca7;font-size:7px;font-weight:900;letter-spacing:.08em}.social-toast b{margin-top:2px;font-size:12px}.social-toast p{margin:3px 0 0;color:#9db4d2;font-size:9px;line-height:1.35}@media(max-width:470px){.social-toast{right:8px;bottom:8px;width:calc(100vw - 16px)}}@media(prefers-reduced-motion:reduce){.social-toast{transition:none}}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE UI CLEANUP v0.2 — safe areas, readable nav, overlays, dialogs
   ══════════════════════════════════════════════════════════════════════ */

/* One source of truth for the top safe area. The previous mobile rule
   accidentally added safe-area-inset-top to the BOTTOM of the header. */
.app-header{
  padding-top:env(safe-area-inset-top);
}

@media (max-width:820px){
  .app-header-inner{
    padding:7px 10px 6px!important;
  }

  /* All five primary destinations must always be visible. No hidden Profile
     tab and no horizontal nav hunt on a phone. */
  .game-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    margin:0!important;
    gap:4px!important;
    padding:5px!important;
  }
  .nav-item{
    min-width:0!important;
    width:100%!important;
    min-height:45px!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    column-gap:5px!important;
    padding:4px 5px!important;
    scroll-snap-align:none!important;
  }
  .nav-item .nav-glyph{width:26px;height:26px;border-radius:9px}
  .nav-item b{font-size:10px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav-item small{font-size:6.8px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav-item::after{left:8px;right:8px;bottom:-5px}

  /* Prevent the fixed coach from sitting under the iOS home indicator or on
     top of its own Ask Hélène button. */
  .helene-call{
    bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important;
  }
  .helene-coach{
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 70px))!important;
    max-height:min(72dvh,560px);
    overflow:auto;
  }

  /* Sheets/dialogs remain usable when the mobile keyboard reduces the visual
     viewport. */
  .auth-gate,
  .daily-briefing-layer,
  .cloud-dialog,
  .social-dialog{
    min-height:100dvh;
    padding-top:max(16px,env(safe-area-inset-top));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
    padding-left:max(12px,env(safe-area-inset-left));
  }
  .auth-gate{align-items:safe center}
  .auth-gate-card{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
  .cloud-panel,.social-modal,.daily-briefing{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}

  /* Readability: several social labels were below practical mobile sizes. */
  .friends-head{font-size:8.5px}
  .friends-row{font-size:11px;min-height:48px}
  .friends-row>span small{font-size:8px}
  .friends-row>button{font-size:9px;min-height:34px}
  .social-subhead b{font-size:14px}
  .social-subhead small{font-size:10.5px}
  .social-subhead>span{font-size:9px}
  .referral-card>p{font-size:11px}
  .referral-actions a,.referral-actions button{font-size:9.5px}
  .challenge-copy b{font-size:11.5px}
  .challenge-copy small{font-size:9px}
  .challenge-card>button,.challenge-card>em{font-size:9px}
  .weekly-rival p{font-size:10px}
  .weekly-rival>button{font-size:9px}

  /* Give interactive controls a reliable touch target. */
  .mini-action,.boss-start,.daily-pulse-actions button,.invite-actions a,.invite-actions button{
    min-height:44px;
  }
}

@media (max-width:470px){
  .app-header-inner{gap:6px 7px;padding-left:8px!important;padding-right:8px!important}
  .app-header .brand{height:29px}
  .header-stats{gap:4px}
  .app-header .stat{min-height:31px;padding:4px 6px!important;font-size:11.5px!important}
  .app-header .stat i{font-size:10px!important}

  .game-nav{gap:3px!important;padding:4px!important;border-radius:16px}
  .nav-item{grid-template-columns:1fr!important;grid-template-rows:24px 16px!important;justify-items:center!important;gap:0!important;padding:3px 2px!important;border-radius:10px!important}
  .nav-item .nav-glyph{grid-column:1;grid-row:1;width:24px;height:24px;margin:auto;font-size:12px!important}
  .nav-item b{grid-column:1;grid-row:2;align-self:center!important;font-size:9px!important;text-align:center}
  .nav-item small{display:none!important}
  .nav-item::after{left:5px;right:5px;bottom:-4px}

  .section-top{padding-top:20px}
  .section-top h1{font-size:29px}

  .helene-coach{
    right:8px!important;
    width:calc(100vw - 16px)!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:8px!important;
    padding:11px 10px 11px 6px!important;
    border-radius:20px!important;
  }
  .helene-avatar svg{width:72px!important;height:72px!important}
  .helene-dialogue h2{font-size:16px;margin-bottom:5px}
  .helene-dialogue p{font-size:11.5px;line-height:1.42}
  .helene-action{min-height:39px}

  .daily-pulse-actions{grid-template-columns:1fr!important}
  .daily-pulse-actions button{width:100%}

  /* Toasts used to cover Ask Hélène in the bottom-right corner. */
  .social-toast{
    left:8px!important;
    right:auto!important;
    bottom:max(68px,calc(env(safe-area-inset-bottom) + 66px))!important;
    width:calc(100vw - 16px)!important;
  }

  .lesson-top{padding-left:10px;padding-right:10px;gap:8px}
  .lesson-top .icon-btn{padding:6px;font-size:23px}
  .progress{height:16px}
  .lesson-wrap{padding-left:14px;padding-right:14px;padding-bottom:190px}
  .opt{padding:15px 16px;font-size:16px;border-radius:17px}
  .q-prompt{font-size:21px;line-height:1.32}
  .lesson-foot .foot-inner{padding-left:14px;padding-right:14px}
}

@media (max-width:360px){
  .app-header .stat.level{display:none}
  .nav-item b{font-size:8.5px!important}
  .header-stats{max-width:205px}
  .daily-pulse{padding:14px}
}

/* Stable vector nav icons across iOS/Android system fonts. */
.nav-item .nav-glyph svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-item:nth-child(2) .nav-glyph svg{fill:currentColor;stroke:none}
@media(max-width:470px){.nav-item .nav-glyph svg{width:15px;height:15px}}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE PRODUCT POLISH v0.3 — hierarchy, interaction, sheets, states
   This layer intentionally overrides legacy visual rules without changing
   progression/content logic.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --section-accent:var(--gold);
  --surface-1:rgba(11,35,78,.82);
  --surface-2:rgba(5,20,52,.88);
  --surface-border:rgba(173,205,255,.13);
  --surface-highlight:rgba(255,255,255,.055);
}
body[data-section="path"]{--section-accent:#ffd45c}
body[data-section="play"]{--section-accent:#68dff2}
body[data-section="practice"]{--section-accent:#72e7a8}
body[data-section="league"]{--section-accent:#b69cff}
body[data-section="profile"]{--section-accent:#ffc86b}

/* Header feels like one native game HUD rather than three unrelated blocks. */
.app-header{
  border-bottom:1px solid color-mix(in srgb,var(--section-accent) 34%,transparent)!important;
  transition:box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.app-header.scrolled{box-shadow:0 12px 34px rgba(0,0,0,.46)!important;background:linear-gradient(180deg,rgba(7,29,70,.985),rgba(4,16,43,.97))!important}
.header-stats .stat{
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(34,72,139,.7),rgba(12,37,83,.78))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.16)!important;
}
.header-stats .stat.gold{border-color:rgba(255,212,92,.20)!important}
.header-stats .stat.streak{border-color:rgba(255,143,84,.20)!important}

/* Primary navigation: crisp active state, stable tap feedback and no visual jump. */
.game-nav{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 20px rgba(0,0,0,.12)!important}
.nav-item{transition:background .18s ease,border-color .18s ease,transform .12s ease,color .18s ease!important}
.nav-item:active{transform:scale(.965)!important}
.nav-item[aria-current="page"]{color:#fff!important}
.nav-item:focus-visible,.btn:focus-visible,.mini-action:focus-visible,.node:focus-visible,.icon-btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--section-accent) 88%,white)!important;
  outline-offset:3px!important;
}

/* Section headers have a consistent visual anchor across all destinations. */
.section-top{
  max-width:1120px!important;
  margin:0 auto!important;
  padding:30px 20px 9px!important;
  align-items:center!important;
}
.section-top::after{
  content:"";height:1px;flex:1;min-width:34px;margin-left:8px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--section-accent) 50%,transparent),transparent);
}
.section-number{
  border-color:color-mix(in srgb,var(--section-accent) 28%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.section-number b{color:var(--section-accent)!important}

/* Unified card material. */
.mode-hero,.mode-card,.practice-card,.profile-rank,.skill-card,.flash-record,
.league-panel,.world-map-shell,.daily-quests,.career-hero,.greet,.daily-pulse{
  border-color:var(--surface-border)!important;
  box-shadow:inset 0 1px 0 var(--surface-highlight),0 14px 34px rgba(0,0,0,.20)!important;
}
.mode-hero,.practice-card,.profile-rank,.skill-card,.flash-record,
.league-panel,.world-map-shell,.daily-quests,.daily-pulse{
  background:linear-gradient(160deg,var(--surface-1),var(--surface-2))!important;
}

/* Play cards now read as distinct game modes at a glance. */
.mode-card{
  position:relative;overflow:hidden;min-height:190px;padding:20px 19px 18px!important;
  background:linear-gradient(155deg,rgba(18,53,111,.78),rgba(6,24,59,.88))!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.mode-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mode-accent,#ffd45c);opacity:.85}
.mode-card::after{position:absolute;right:13px;top:5px;font-weight:900;font-size:62px;line-height:1;color:var(--mode-accent,#ffd45c);opacity:.055;pointer-events:none}
.mode-card.daily-teaser{--mode-accent:#ffd45c}.mode-card.daily-teaser::after{content:"D"}
.mode-card.boss-teaser{--mode-accent:#ff8d9e}.mode-card.boss-teaser::after{content:"B"}
.mode-card.frontier-teaser{--mode-accent:#6de4f3}.mode-card.frontier-teaser::after{content:"∞";font-size:72px;top:0}
.mode-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--mode-accent,#ffd45c) 35%,transparent)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 17px 35px rgba(0,0,0,.28)!important}
.mode-card:active{transform:translateY(1px) scale(.992)}
.mode-card>span{color:var(--mode-accent,#ffd45c)!important}
/* Questa regola sovrascriveva con !important il fondo colorato dei pulsanti
   delle modalita' e lasciava l'inchiostro scuro (#0a1d3e) su un velo quasi
   trasparente: "Open today's deal" sembrava disattivato. Il colore resta
   quello della modalita'; qui si tiene solo il contesto di impilamento. */
.mini-action{position:relative;z-index:1;border:0;transition:.16s ease}
.mini-action:hover{filter:brightness(1.07)}
.mini-action:active{transform:scale(.98)}

/* Career Path: clearer progress states and less "stack of generic cards" feel.
   Il fondo resta quello della scena del corso: se qui si rimettesse un colore
   fisso, i sedici sfondi tornerebbero tutti blu — è già successo una volta. */
.unit-head{border-width:1px!important;background:linear-gradient(145deg,var(--sc-bg1),var(--sc-bg2))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.20)!important}
.unit-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:3;background:linear-gradient(180deg,var(--sc-near),var(--gold-mid))}
/* I nodi della rotta sono pedine, non schede: lo stato lo porta il disco. */
.node.locked{opacity:.62!important;filter:saturate(.55) brightness(.92)!important}
.node.done .medal{box-shadow:inset 0 3px 0 rgba(255,255,255,.42),inset 0 -4px 0 rgba(0,0,0,.2),0 6px 0 #0a4a2b!important}
.node.next .medal{box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.18),0 6px 0 #a9741a,0 0 22px rgba(255,212,92,.35)!important}
.connector{width:4px!important;height:34px!important;background:none!important}
.phase-divider i{background:linear-gradient(90deg,rgba(255,212,92,.28),transparent)!important}

/* Practice is deliberately quieter than Play, but clearly actionable. */
.practice-card{position:relative;overflow:hidden}
.practice-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#a8f7c8,#4fe08a)}
.practice-orb{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 20px rgba(0,0,0,.22)!important}

/* League/profile tables and cards remain readable with long aliases. */
.league-row,.house-rank-row,.friends-row{transition:background .16s ease,transform .12s ease}
.league-row:hover,.house-rank-row:hover,.friends-row:hover{background-color:rgba(255,255,255,.035)}
.league-row.me{box-shadow:inset 3px 0 0 var(--gold)!important}
.skill-row{padding:9px 0}
.skill-track{height:8px!important}
.profile-numbers>div{border:1px solid rgba(255,255,255,.07);background:rgba(2,11,31,.24);border-radius:14px;padding:10px 7px}

/* Buttons feel consistent across webview and browser. */
.btn,.mini-action,.boss-start,.helene-action,.referral-actions button,.referral-actions a{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn{transition:transform .12s ease,filter .16s ease,box-shadow .16s ease!important}
.btn:active:not(:disabled){transform:translateY(2px) scale(.99)!important;filter:brightness(.96)}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}

/* Background cannot scroll underneath an open modal/sheet. */
body.overlay-open{overflow:hidden!important}

/* Loading / empty statuses use the same visual language. */
.ui-status{
  display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;border-radius:15px;
  color:#a9c0df;background:rgba(5,18,46,.48);border:1px dashed rgba(173,205,255,.15);font-size:12px;
}
.ui-status::before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--section-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--section-accent) 10%,transparent)}

/* Subtle reveal animation; disabled for reduced-motion users. */
.ui-reveal{opacity:0;transform:translateY(10px);transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
.ui-reveal.is-visible{opacity:1;transform:none}

/* Mobile overlays become native-feeling bottom sheets. */
@media(max-width:650px){
  .section-top{padding:20px 14px 7px!important;gap:10px!important}.section-top::after{display:none}
  .section-number{transform:scale(.92);transform-origin:left center}
  .tab-wrap,.wrap{padding-left:14px;padding-right:14px}

  .mode-grid{grid-template-columns:1fr!important;gap:11px!important}
  .mode-card{min-height:0;padding:17px 16px!important}
  .mode-card::after{font-size:54px;right:10px}
  .mode-card.frontier-teaser::after{font-size:62px}

  .unit{margin-top:24px}.unit-head{margin-bottom:18px;padding:17px 17px 16px!important;border-radius:20px!important}
  .node .medal{width:66px!important;height:66px!important;font-size:26px!important}
  .node strong{font-size:13.5px!important}.node small{font-size:11px!important}
  .connector{height:30px!important}

  .cloud-dialog,.social-dialog,.daily-briefing-layer{place-items:end center!important;padding:0!important;background:rgba(1,7,20,.72)!important}
  .cloud-panel,.social-modal,.daily-briefing{
    width:100%!important;max-width:none!important;max-height:min(88dvh,760px)!important;margin:0!important;
    border-radius:25px 25px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;
    padding-left:max(18px,env(safe-area-inset-left))!important;padding-right:max(18px,env(safe-area-inset-right))!important;
    padding-bottom:max(20px,calc(env(safe-area-inset-bottom) + 14px))!important;
    animation:sheetUp .28s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes sheetUp{from{transform:translateY(24px);opacity:.7}to{transform:none;opacity:1}}

  .helene-coach{
    border-radius:22px 22px 0 0!important;right:0!important;left:0!important;bottom:0!important;width:100%!important;
    padding:13px max(13px,env(safe-area-inset-right)) max(15px,calc(env(safe-area-inset-bottom) + 10px)) max(8px,env(safe-area-inset-left))!important;
    grid-template-columns:74px minmax(0,1fr)!important;box-shadow:0 -16px 45px rgba(0,0,0,.48)!important;
  }
  .helene-call{bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))!important}
  .social-toast{bottom:max(76px,calc(env(safe-area-inset-bottom) + 74px))!important}
}

@media(max-width:390px){
  .section-top h1{font-size:27px!important}.section-number{display:none!important}
  .mode-hero,.practice-card,.profile-rank,.skill-card,.flash-record,.league-panel,.world-map-shell,.daily-quests,.daily-pulse{border-radius:20px!important;padding-left:15px!important;padding-right:15px!important}
  .profile-numbers{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  .profile-numbers>div{padding:8px 4px}.profile-numbers b{font-size:17px!important}.profile-numbers span{font-size:8px!important}
}

@media(orientation:landscape) and (max-height:520px){
  .app-header-inner{padding-top:4px!important;padding-bottom:4px!important}
  .game-nav{padding:3px!important}.nav-item{min-height:38px!important}.nav-item .nav-glyph{width:24px;height:24px}
  .section-top{padding-top:14px!important}.helene-coach{max-height:82dvh!important;overflow:auto}
}

@media(prefers-reduced-motion:reduce){
  .ui-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .cloud-panel,.social-modal,.daily-briefing{animation:none!important}
  .app-header,.nav-item,.mode-card,.node,.btn{transition:none!important}
}
/* Do not leave the floating coach launcher over an open sheet/coach. */
body.overlay-open .helene-call{opacity:0;pointer-events:none;transform:translateY(6px)}

/* Tempo al prossimo salvagente. Sta accanto al contatore e sparisce
   quando il fondo è pieno, così non aggiunge rumore a chi non ne ha bisogno. */
.stat-timer{
  margin-left:5px; font-size:11px; font-variant-numeric:tabular-nums;
  opacity:.72; letter-spacing:.01em;
}
.stat.lives.empty .stat-timer{ opacity:1; font-weight:600 }
@media (max-width:420px){ .stat-timer{ font-size:10px; margin-left:3px } }

/* Apertura di unità: accessibile ma non è il passo del percorso. Deve
   invitare senza competere con il nodo dorato, altrimenti chi sta seguendo
   il cammino non capisce più dove deve andare. */
.node.taster{ border-color:rgba(126,168,255,.5) }
.node.taster .medal{
  background:linear-gradient(180deg,#5f86d8,#3a5da8); color:#eaf1ff; animation:none;
}
.node .tag.taste{
  background:linear-gradient(180deg,#7ea8ff,#4a72d0); color:#08142e;
  box-shadow:0 3px 0 rgba(20,44,96,.7); animation:none;
}
@media (prefers-reduced-motion:reduce){ .node .tag{ animation:none } }

/* Le tre righe che dicono durata, formato e costo di ciascuna modalità.
   Servono a scegliere senza dover provare, quindi restano compatte. */
.tab-lede{
  margin:0 0 20px; max-width:64ch; color:var(--muted);
  font-size:15px; line-height:1.55;
}
.mode-facts{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 8px;
}
.mode-facts li{
  font-size:12px; line-height:1.3; color:var(--muted);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:4px 10px; background:rgba(255,255,255,.04);
}
.mode-hero .mode-facts{ margin-bottom:16px }
@media (max-width:520px){ .mode-facts li{ font-size:11px; padding:3px 8px } }

/* Introduzione al primo avvio. Riusa il pannello delle altre finestre, ma
   più largo: qui si legge, non si compila un modulo. */
.intro-panel{ width:min(460px,100%); text-align:left; padding-top:22px }
.intro-art{ display:flex; justify-content:center; margin:2px 0 10px }
.intro-step{
  margin:0 0 4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); font-weight:700;
}
.intro-panel h2{ padding-right:64px; line-height:1.2 }
#introCopy{ margin:8px 0 14px; color:var(--muted); line-height:1.6; font-size:15px }
.intro-list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px }
.intro-list li{
  position:relative; padding:9px 12px 9px 34px; font-size:14px; line-height:1.4;
  border-radius:12px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.intro-list li::before{
  content:'›'; position:absolute; left:14px; top:8px;
  color:var(--gold-hi); font-weight:700; font-size:16px;
}
.intro-dots{ display:flex; gap:7px; justify-content:center; margin:0 0 16px }
.intro-dots i{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.26);
  transition:background .2s ease, transform .2s ease;
}
.intro-dots i.on{ background:var(--gold-hi); transform:scale(1.25) }
.intro-skip{
  position:absolute; top:14px; right:16px; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#e8eefc; font:inherit; font-size:13px; cursor:pointer;
}
.intro-skip:hover{ background:rgba(255,255,255,.14) }
.intro-skip:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:2px }
@media (prefers-reduced-motion:reduce){ .intro-dots i{ transition:none } }

/* ══════════════════════════════════════════════════════════════════════
   PORTRAIT-FIRST MOBILE v0.4
   Phones are designed and supported in portrait orientation only.
   Desktop/tablet desktop layouts remain unchanged.
   ══════════════════════════════════════════════════════════════════════ */


@media (max-width:820px) and (orientation:portrait){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0}

  /* Two deliberate rows: identity/rewards, then the five primary areas. */
  .app-header{padding-top:env(safe-area-inset-top)!important}
  .app-header-inner{
    width:100%;max-width:none!important;
    display:grid!important;
    grid-template-columns:minmax(32px,1fr) auto!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"brand rewards" "nav nav";
    align-items:center!important;
    gap:6px 7px!important;
    padding:6px max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left))!important;
  }
  .app-header .brand-link{grid-area:brand;justify-self:start;min-width:0}
  .app-header .brand{height:29px!important;width:auto!important;max-width:64px;object-fit:contain;object-position:left center}

  .header-stats{
    grid-area:rewards!important;grid-column:auto!important;grid-row:auto!important;
    justify-self:end!important;align-items:center!important;
    display:grid!important;grid-template-columns:repeat(4,max-content)!important;
    gap:3px!important;max-width:100%!important;overflow:visible!important;
  }
  .app-header .stat{
    min-width:34px!important;min-height:31px!important;
    justify-content:center!important;
    padding:4px 6px!important;gap:3px!important;
    border-width:1px!important;font-size:11.5px!important;
    box-shadow:0 2px 0 rgba(4,14,40,.48),inset 0 1px 0 rgba(255,255,255,.16)!important;
  }
  .app-header .stat i{font-size:10px!important}
  .app-header .stat.level i{font-size:7.5px!important}
  .app-header .stat.level{display:flex!important}
  .header-stats .stat.lives{display:flex!important}
  .stat-timer{display:none!important}

  .game-nav{
    grid-area:nav!important;grid-column:auto!important;grid-row:auto!important;
    width:100%!important;min-width:0!important;margin:0!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    overflow:visible!important;gap:4px!important;padding:4px!important;
    border-radius:15px!important;
  }
  .nav-item{
    width:100%!important;min-width:0!important;min-height:48px!important;
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:27px 15px!important;
    justify-items:center!important;align-items:center!important;
    gap:0!important;padding:3px 2px!important;border-radius:10px!important;
    overflow:hidden!important;
  }
  .nav-item .nav-glyph{
    grid-column:1!important;grid-row:1!important;
    width:26px!important;height:26px!important;margin:0 auto!important;border-radius:9px!important;
  }
  .nav-item .nav-glyph svg{width:15px!important;height:15px!important}
  .nav-item b{
    grid-column:1!important;grid-row:2!important;align-self:center!important;
    width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;
    font-size:9px!important;line-height:1!important;text-align:center!important;
  }
  .nav-item small{display:none!important}
  .nav-item::after{left:5px!important;right:5px!important;bottom:-4px!important}

  /* Content is truly one-column on a phone. */
  .screen,.wrap,.tab-wrap,.boss-wrap,.lesson-wrap{width:100%;max-width:100%}
  .wrap,.tab-wrap{padding-left:12px!important;padding-right:12px!important}
  .intro{padding-top:18px!important}
  .intro h1{font-size:clamp(27px,8.1vw,34px)!important}
  .intro p{font-size:13px!important;line-height:1.48}
  .section-top{padding:18px 12px 7px!important}
  .section-top h1{font-size:28px!important}

  .mode-grid,.house-picker,.achievement-grid{grid-template-columns:1fr!important}
  .mode-card,.mode-hero,.practice-card,.profile-rank,.skill-card,.flash-record,
  .league-panel,.world-map-shell,.daily-quests,.daily-pulse,.career-hero,.greet{
    width:100%;max-width:100%;min-width:0;
  }

  /* The trading-house map no longer asks portrait users to swipe sideways. */
  .world-map{
    display:grid!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;
    grid-auto-columns:auto!important;overflow:visible!important;
    scroll-snap-type:none!important;gap:10px!important;padding:4px 0 2px!important;
  }
  .world-card{width:100%!important;min-width:0!important;scroll-snap-align:none!important}

  /* la pedina non si allarga: e' la rotta a serpeggiare, non una scheda */
  .node{max-width:none!important}
  .league-hero{width:100%;min-width:0}
  .league-panel{overflow:hidden}
  .friends-row,.league-row,.house-rank-row{min-width:0}

  /* Keep all fixed helpers inside the portrait safe area. */
  .helene-call{right:max(10px,env(safe-area-inset-right))!important}
  .helene-coach{max-width:100vw!important}
  .social-toast{max-width:calc(100vw - 16px)!important}
}

@media (max-width:370px) and (orientation:portrait){
  .app-header-inner{padding-left:max(6px,env(safe-area-inset-left))!important;padding-right:max(6px,env(safe-area-inset-right))!important;gap:5px!important}
  .app-header .brand{height:25px!important;max-width:52px}
  .header-stats{gap:2px!important}
  .app-header .stat{min-width:31px!important;min-height:29px!important;padding:3px 5px!important;font-size:10.5px!important}
  .game-nav{gap:2px!important;padding:3px!important}
  .nav-item{min-height:45px!important;grid-template-rows:25px 14px!important}
  .nav-item .nav-glyph{width:24px!important;height:24px!important}
  .nav-item b{font-size:8.3px!important}
}


/* v0.4.1 — the four reward counters must always remain visible on phones. */
@media (max-width:430px){
  .header-stats{grid-template-columns:repeat(4,minmax(30px,max-content))!important;gap:2px!important}
  .app-header .stat{min-width:30px!important;padding:4px 5px!important;gap:2px!important}
  .header-stats .stat.lives{display:flex!important;visibility:visible!important}
  .stat.lives #statLives{display:inline!important}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE HEADER v0.4.2
   Portrait phones use a dropdown for Path / Play / Practice / League.
   Reward counters keep their readable size; Profile stays one tap away.
   ══════════════════════════════════════════════════════════════════════ */
.mobile-section-nav{display:none}

@media (max-width:820px) and (orientation:portrait){
  .app-header-inner{
    grid-template-columns:minmax(42px,1fr) auto!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"brand rewards" "mobile-nav mobile-nav"!important;
    gap:8px 10px!important;
    padding:7px max(10px,env(safe-area-inset-right)) 9px max(10px,env(safe-area-inset-left))!important;
  }

  /* Desktop five-tab strip is intentionally removed on portrait phones. */
  .game-nav{display:none!important}

  .app-header .brand-link{grid-area:brand!important}
  .app-header .brand{
    height:34px!important;
    max-width:72px!important;
  }

  /* Do not squeeze the four counters to make navigation fit. */
  .header-stats{
    grid-area:rewards!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .app-header .stat{
    flex:0 0 auto!important;
    min-width:39px!important;
    min-height:35px!important;
    padding:5px 8px!important;
    gap:4px!important;
    font-size:12.5px!important;
    border-radius:13px!important;
  }
  .app-header .stat i{font-size:11px!important}
  .app-header .stat.level i{font-size:8px!important}
  .header-stats .stat.lives,
  .header-stats .stat.level{display:flex!important;visibility:visible!important}
  .stat.lives #statLives{display:inline!important}

  .mobile-section-nav{
    grid-area:mobile-nav;
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
    width:100%;
    min-width:0;
  }
  .mobile-menu-toggle,
  .mobile-profile-button{
    appearance:none;
    border:1px solid rgba(174,205,255,.17);
    color:#eef5ff;
    background:linear-gradient(180deg,rgba(20,55,116,.92),rgba(8,31,76,.94));
    box-shadow:0 4px 13px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
    min-height:46px;
    border-radius:14px;
    font:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-toggle{
    min-width:0;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 22px;
    align-items:center;
    gap:8px;
    padding:6px 11px;
    text-align:left;
  }
  .mobile-menu-icon{
    width:28px;height:28px;border-radius:9px;
    display:grid;place-content:center;gap:3px;
    background:rgba(255,212,92,.12);
    border:1px solid rgba(255,212,92,.20);
  }
  .mobile-menu-icon i{display:block;width:12px;height:1.5px;border-radius:5px;background:#ffd45c}
  .mobile-menu-copy{display:flex;min-width:0;flex-direction:column;line-height:1.02}
  .mobile-menu-copy small{font-size:8px;text-transform:uppercase;letter-spacing:.10em;color:#8ea8d4;font-weight:800}
  .mobile-menu-copy b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-menu-chevron{width:19px;height:19px;fill:none;stroke:#a8bee2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-chevron{transform:rotate(180deg)}

  .mobile-profile-button{
    width:72px;
    padding:5px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
  }
  .mobile-profile-button svg{width:19px;height:19px;fill:none;stroke:#c8d8f4;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-profile-button span{font-size:9px;font-weight:800;color:#dce8fb}
  body[data-section="profile"] .mobile-profile-button{
    border-color:rgba(255,212,92,.50);
    background:linear-gradient(180deg,rgba(38,77,145,.98),rgba(12,43,94,.98));
    box-shadow:0 4px 14px rgba(0,0,0,.25),inset 0 -2px 0 #ffd45c;
  }

  .mobile-menu-panel{
    position:absolute;
    z-index:90;
    top:calc(100% + 7px);
    left:0;
    right:79px;
    padding:6px;
    border-radius:16px;
    border:1px solid rgba(174,205,255,.18);
    background:linear-gradient(180deg,rgba(8,31,75,.99),rgba(4,19,50,.995));
    box-shadow:0 18px 45px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
  }
  .mobile-menu-panel[hidden]{display:none!important}
  .mobile-menu-item{
    width:100%;
    min-height:50px;
    padding:7px 9px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    align-items:center;
    gap:9px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#edf4ff;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }
  .mobile-menu-item + .mobile-menu-item{margin-top:2px}
  .mobile-menu-item:active{background:rgba(255,255,255,.08)}
  .mobile-menu-item.active{background:rgba(35,83,158,.45)}
  .mobile-menu-item.active::after{content:"";position:absolute}
  .mobile-menu-glyph{
    width:34px;height:34px;border-radius:10px;
    display:grid;place-items:center;
    border:1px solid rgba(174,205,255,.13);
    background:rgba(255,255,255,.045);
  }
  .mobile-menu-item.active .mobile-menu-glyph{background:#ffd45c;border-color:#ffe390}
  .mobile-menu-glyph svg{width:18px;height:18px;fill:none;stroke:#b9cbea;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-menu-item.active .mobile-menu-glyph svg{stroke:#173668}
  .mobile-menu-item > span:last-child{min-width:0;display:flex;flex-direction:column}
  .mobile-menu-item b{font-size:12.5px;line-height:1.1}
  .mobile-menu-item small{font-size:9px;color:#8fa7cf;margin-top:2px}
}

@media (max-width:370px) and (orientation:portrait){
  .app-header-inner{padding-left:max(7px,env(safe-area-inset-left))!important;padding-right:max(7px,env(safe-area-inset-right))!important;gap:7px 7px!important}
  .app-header .brand{height:29px!important;max-width:58px!important}
  .header-stats{gap:3px!important}
  .app-header .stat{min-width:36px!important;min-height:33px!important;padding:5px 6px!important;font-size:11.5px!important}
  .mobile-profile-button{width:66px}
  .mobile-menu-panel{right:73px}
}


/* ══════════════════════════════════════════════════════════════════════
   NAVIGAZIONE IN FONDO
   Su telefono le cinque schede stanno in una barra fissa in basso, dove
   arriva il pollice. Sostituisce il menu a panino: un menu che si apre
   costa due tocchi e nasconde dove sei, una barra ne costa uno e lo mostra
   sempre. Su schermi larghi resta la nav in alto, che lì funziona meglio.
   ══════════════════════════════════════════════════════════════════════ */
.tab-bar{ display:none }

@media (max-width:820px) and (orientation:portrait){
  /* il menu a panino non serve più */
  .mobile-section-nav{ display:none!important }
  #appHeader .app-header-inner{ grid-template-areas:"brand rewards"!important }

  .tab-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:46;
    display:flex; align-items:center; justify-content:space-around;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(9,24,58,.94),rgba(6,17,42,.99));
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -6px 22px rgba(2,8,22,.45);
    backdrop-filter:blur(10px);
  }
  /* Solo simboli, in fila. Il nome resta per chi usa uno screen reader:
     l'icona da sola è muta, e aria-label da solo non basta se il testo
     sparisce dal documento. */
  .tab-item{
    position:relative; flex:1 1 0; min-width:0;
    display:grid; place-items:center;
    height:52px; padding:0;
    background:none; border:0; border-radius:16px;
    color:var(--muted-2); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .16s ease;
  }
  .tab-glyph{ display:block; width:29px; height:29px }
  .tab-glyph svg{
    width:100%; height:100%; fill:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  }
  /* la pastiglia dietro il simbolo attivo: dice dove sei senza scritte */
  .tab-item.active{ color:var(--gold-hi) }
  .tab-item.active::before{
    content:''; position:absolute; inset:4px 50% 4px 50%;
    width:56px; margin-left:-28px; border-radius:16px;
    background:rgba(255,212,92,.15);
    border:1px solid rgba(255,212,92,.32);
  }
  .tab-item:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:-3px }
  .tab-item:active .tab-glyph{ transform:scale(.9) }

  /* il contenuto non deve finire sotto la barra */
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom)) }
  /* durante una lezione la barra sparisce: si esce dalla X, non cambiando scheda */
  body.immersive .tab-bar{ display:none }
  body.immersive{ padding-bottom:0 }
}

@media (max-width:820px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  .tab-item.active .tab-glyph{ transform:none }
}


/* ══════════════════════════════════════════════════════════════════════
   FASCIA DI UNITÀ
   Resta in cima al percorso e dice sezione, desk e titolo. Il colore
   cambia a ogni sezione, così lo scorrimento ha dei riferimenti visivi:
   in un percorso da 173 livelli il problema non è la lunghezza, è non
   sapere dove ci si trova dentro.
   ══════════════════════════════════════════════════════════════════════ */
.unit-banner{
  position:sticky; top:0; z-index:34;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  margin:0 0 6px; padding:12px 16px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:linear-gradient(180deg,#1d4ea8,#143a80);
  border-bottom:3px solid rgba(0,0,0,.22);
  box-shadow:0 6px 18px rgba(2,8,22,.35);
  color:#fff;
}
.unit-banner-copy{ min-width:0 }
.unit-banner-copy small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; opacity:.78;
}
.unit-banner-copy b{
  display:block; font-size:17px; line-height:1.25; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.unit-banner-guide{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:13px; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
}
.unit-banner-guide svg{
  width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.unit-banner-guide:hover{ background:rgba(255,255,255,.22) }
.unit-banner-guide:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:2px }

/* un colore per sezione: Foundations, le due Academy, i desk merceologici,
   le funzioni di casa, e gli asset */
.unit-banner[data-section="1"]{ background:linear-gradient(180deg,#1d4ea8,#143a80) }
.unit-banner[data-section="2"]{ background:linear-gradient(180deg,#1c7f6b,#115a4c) }
.unit-banner[data-section="3"]{ background:linear-gradient(180deg,#2a6fae,#1b4d7d) }
.unit-banner[data-section="4"]{ background:linear-gradient(180deg,#9a6516,#6f4710) }
.unit-banner[data-section="5"]{ background:linear-gradient(180deg,#6d4a9e,#4b3172) }
.unit-banner[data-section="6"]{ background:linear-gradient(180deg,#a8443f,#77302c) }
.unit-banner[data-section="7"]{ background:linear-gradient(180deg,#4a2b8c,#2d1857) }

@media (max-width:520px){
  .unit-banner{ padding:10px 13px; border-radius:0 }
  .unit-banner-copy b{ font-size:15.5px }
  .unit-banner-guide{ width:38px; height:38px; border-radius:11px }
}


/* Il piede della lezione prende il colore del riscontro: la spiegazione e il
   pulsante per proseguire diventano un blocco solo, invece di una fascia
   colorata con un rettangolo scuro appiccicato sotto. */
.lesson-foot.good{ background:linear-gradient(180deg,#1c6b47,#12492f) }
.lesson-foot.bad{ background:linear-gradient(180deg,#8e2b40,#5f172a) }
.lesson-foot.good .feedback,
.lesson-foot.bad .feedback{ background:none; box-shadow:none }
/* Con la spiegazione aperta il blocco cresce: su uno schermo corto il
   pulsante per proseguire finiva sotto il bordo, e per premerlo bisognava
   scorrere una schermata che non ha nient'altro da leggere. */
.lesson-foot.good .foot-inner,
.lesson-foot.bad .foot-inner{ padding:4px 20px 14px }
.lesson-foot.good .feedback,
.lesson-foot.bad .feedback{ padding:15px 20px 13px }
.lesson-foot.good .btn.primary{ background:linear-gradient(180deg,#5df0a6,#26c47c); color:#06371f; box-shadow:0 4px 0 #0d7a49 }
.lesson-foot.bad .btn.primary{ background:linear-gradient(180deg,#ffd0d8,#ff8fa3); color:#5d0f22; box-shadow:0 4px 0 #a3253f }
.lesson-foot.good .btn.reveal,
.lesson-foot.bad .btn.reveal{ display:none }


/* Conferma di uscita dalla lezione. Il pulsante grande è quello che fa
   restare: chi ha toccato la X per sbaglio deve poter tornare indietro
   senza pensarci, e uscire davvero deve costare una lettura in più. */
.quit-panel{ width:min(400px,100%); text-align:center }
.quit-art{ display:flex; justify-content:center; margin:2px 0 8px }
.quit-panel h2{ padding-right:0; font-size:21px; line-height:1.28 }
#quitCopy{ margin:8px 0 20px; color:var(--muted); line-height:1.55; font-size:15px }
.quit-leave{
  display:block; width:100%; margin-top:12px;
  color:var(--red-hi); text-decoration:none; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; font-size:13.5px;
}
.quit-leave:hover{ text-decoration:underline }
.quit-leave:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:3px; border-radius:10px }

@media (max-width:820px) and (orientation:portrait) and (prefers-reduced-motion:reduce){
  .tab-item{ transition:none }
  .tab-item:active .tab-glyph{ transform:none }
}
@media (max-width:360px) and (orientation:portrait){
  .tab-glyph{ width:26px; height:26px }
  .tab-item.active::before{ width:48px; margin-left:-24px }
}

@media (prefers-reduced-motion:reduce){
  .node.next .medal::after{ animation:none; opacity:.55 }
}


/* ══════════════════════════════════════════════════════════════════════
   MENO LAVORO QUANDO NON SERVE
   Le animazioni decorative — la nave che deriva, la rotta tratteggiata, le
   macchie di luce sullo sfondo — girano all'infinito. Durante una lezione
   nessuno le guarda, e a scheda nascosta nemmeno: fermarle libera il
   compositore e allunga la batteria senza togliere niente.
   ══════════════════════════════════════════════════════════════════════ */
/* Durante una domanda la carta nautica non decora: schiarisce il fondo sotto
   il testo e mette una domanda di lavoro sopra un paesaggio. In immersivo
   sparisce del tutto — si legge meglio e il compositore ha un livello in meno. */
body.immersive .backdrop{display:none}

body.immersive .backdrop .bd-ship,
body.immersive .backdrop .bd-route,
body.immersive::before,
body.immersive::after,
body.in-pausa .backdrop .bd-ship,
body.in-pausa .backdrop .bd-route,
body.in-pausa::before,
body.in-pausa::after,
body.in-pausa .node.next .medal::after{
  animation-play-state:paused;
}

/* Le sezioni del percorso fuori dallo schermo non hanno bisogno di essere
   disposte e dipinte a ogni scorrimento. contain-intrinsic-size evita che
   la barra di scorrimento salti quando entrano ed escono dalla vista. */
#pathBody .unit{
  content-visibility:auto;
  contain-intrinsic-size:auto 620px;
}


/* ══════════════════════════════════════════════════════════════════════
   PRESENTAZIONE DI UN CONCETTO
   Compare al posto della domanda, la prima volta che una parola del
   mestiere si affaccia. Deve leggersi in dieci secondi: se diventa una
   pagina di teoria, la gente la salta e siamo punto e a capo.
   ══════════════════════════════════════════════════════════════════════ */
.teach-card{
  max-width:600px; margin:6px auto 0; padding:22px 20px 24px;
  text-align:center; border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(21,54,116,.72),rgba(9,28,68,.72));
  border:2px solid rgba(255,212,92,.26);
  box-shadow:0 7px 0 rgba(4,13,35,.35);
  animation:teachIn .32s var(--spring);
}
@keyframes teachIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.teach-face{ display:flex; justify-content:center; margin-bottom:6px }
.teach-kicker{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-hi); opacity:.9;
}
.teach-term{ margin:6px 0 10px; font-size:26px; line-height:1.2 }
.teach-say{ margin:0 auto; max-width:52ch; font-size:16.5px; line-height:1.6; color:#f0f6ff }
.teach-why{
  margin:14px auto 0; max-width:52ch; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:14.5px; line-height:1.55; color:var(--muted);
}
@media (max-width:520px){
  .teach-card{ padding:18px 15px 20px }
  .teach-term{ font-size:22px }
  .teach-say{ font-size:15.5px }
}
@media (prefers-reduced-motion:reduce){ .teach-card{ animation:none } }

/* Installed-app preview */
@media (display-mode: standalone) {
  html, body { min-height: 100%; overscroll-behavior: none; }
  body { -webkit-tap-highlight-color: transparent; }
  .install-host { display:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE TAB BAR — CLEAN ICON STATE + NOTIFICATIONS
   Selected state is yellow only: no square/pill background or outline.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:820px) and (orientation:portrait){
  .tab-bar .tab-item,
  .tab-bar .tab-item.active{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    outline:0;
  }
  .tab-bar .tab-item.active{ color:var(--gold-hi)!important; }
  .tab-bar .tab-item.active::before,
  .tab-bar .tab-item.active::after{ display:none!important; content:none!important; }
  .tab-bar .tab-item:not(.active){ color:#8da5c8!important; }
  .tab-bar .tab-item:focus-visible{
    outline:2px solid rgba(255,212,92,.72)!important;
    outline-offset:-6px!important;
    border-radius:50%!important;
  }
  .tab-badge{
    position:absolute;
    top:2px;
    left:calc(50% + 7px);
    z-index:4;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#e94b61;
    color:#fff;
    border:2px solid #071633;
    box-shadow:0 2px 7px rgba(0,0,0,.35);
    font-size:9px;
    line-height:1;
    font-weight:900;
    font-variant-numeric:tabular-nums;
  }
  .tab-badge[hidden]{display:none!important}

  /* Hélène must live above the tab bar, never on top of Profile. */
  .helene-call{
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  .helene-coach{
    bottom:calc(132px + env(safe-area-inset-bottom))!important;
  }
  .social-toast{
    bottom:calc(82px + env(safe-area-inset-bottom))!important;
  }

  /* Adaptive Training stays anchored to a full portrait viewport. */
  #practiceScreen.active{
    min-height:calc(100dvh - 70px - env(safe-area-inset-bottom));
    overflow-anchor:none;
  }
  #practiceScreen .tab-wrap{min-height:calc(100dvh - 160px)}

  /* Career Path is levels-only: no decorative top gap left behind. */
  #pathScreen .path-levels-only{padding-top:6px!important}
}


/* ══════════════════════════════════════════════════════════════════════
   MOBILE SCROLL + IMMERSIVE SAFE AREA FIX v0.4.4
   Keep every hub naturally scrollable and keep lessons below the device
   status bar/notch when the main app header is hidden.
   ══════════════════════════════════════════════════════════════════════ */
.clean-section-title h1{
  color:var(--gold)!important;
  text-shadow:0 2px 0 rgba(5,16,45,.42),0 0 22px rgba(255,212,92,.10);
}
.clean-section-title .eyebrow{display:none!important}

/* The Career Path no longer has a sticky "Desk x of y" banner. */
#unitBanner,.unit-banner{display:none!important}

@media (max-width:820px) and (orientation:portrait){
  /* Installed/PWA mode must scroll like a normal app, not feel vertically locked. */
  html,body{
    min-height:100%;
    height:auto!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y;
  }
  body:not(.immersive):not(.auth-locked){
    overflow-y:auto!important;
    padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;
  }
  .screen.active:not(#lessonScreen):not(#doneScreen):not(#flashScreen):not(#bossScreen){
    min-height:auto!important;
    height:auto!important;
    overflow:visible!important;
    padding-bottom:calc(26px + env(safe-area-inset-bottom));
  }
  .screen.active .wrap,.screen.active .tab-wrap{
    overflow:visible!important;
    max-height:none!important;
  }
  /* Remove the old Practice viewport anchoring that made the tab feel clipped. */
  #practiceScreen.active,#practiceScreen .tab-wrap{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }

  /* Immersive question runs own the top safe area because app-header is hidden. */
  body.immersive{
    overflow-y:auto!important;
    min-height:100dvh;
  }
  #lessonScreen.active{
    min-height:100dvh;
    overflow:visible!important;
  }
  #lessonScreen .lesson-top{
    padding-top:max(16px,calc(env(safe-area-inset-top) + 12px))!important;
  }
  #lessonScreen .lesson-wrap{
    padding-top:18px!important;
    padding-bottom:calc(205px + env(safe-area-inset-bottom))!important;
  }
  /* Also protect the full-screen generated modes from the notch/status bar. */
  #flashScreen.active,#bossScreen.active,#doneScreen.active{
    padding-top:env(safe-area-inset-top);
  }

  .clean-section-title{padding-top:18px!important;padding-bottom:8px!important}
  .clean-section-title h1{color:var(--gold)!important}
}

@media (display-mode:standalone) and (max-width:820px) and (orientation:portrait){
  html,body{overscroll-behavior-y:auto!important}
}


/* ══════════════════════════════════════════════════════════════════════
   FIXED PLAYER HUD + STABLE PRACTICE v0.4.5
   The reward header is truly fixed. Its measured height is exposed by
   ui-polish.js, so content never hides beneath it on different devices.
   ══════════════════════════════════════════════════════════════════════ */
:root{--app-header-h:64px}
.app-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:120!important;
}
body:not(.immersive):not(.auth-locked){
  padding-top:var(--app-header-h)!important;
}
body.immersive,body.auth-locked{padding-top:0!important}

@media (max-width:820px) and (orientation:portrait){
  /* Practice must not visually lift the whole viewport when selected. */
  #practiceScreen.active{animation:none!important;transform:none!important}
  #practiceScreen.active .practice-card{scroll-margin-top:calc(var(--app-header-h) + 12px)}
  .screen.active:not(#lessonScreen):not(#doneScreen):not(#flashScreen):not(#bossScreen){
    scroll-margin-top:var(--app-header-h);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v0.4.6 — GAME EXPERIENCE PASS
   Feedback is immediate, rewards explain what changed, and completing a
   Career level can move straight into the next one.
   ═══════════════════════════════════════════════════════════════════ */
#exerciseArea.question-in{animation:wotQuestionIn .24s cubic-bezier(.2,.8,.2,1)}
@keyframes wotQuestionIn{from{opacity:.55;transform:translateY(7px)}to{opacity:1;transform:none}}

#lessonScreen::after{
  content:"";position:fixed;inset:0;z-index:250;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 0 transparent;
}
/* Il bagliore di risposta animava box-shadow: ogni fotogramma ridipinge un
   velo grande quanto lo schermo, sopra la lezione. L'alone ora è fisso e a
   muoversi è la sola opacità, che il compositore gestisce da solo. */
body.answer-pulse-good #lessonScreen::after{box-shadow:inset 0 0 52px 4px rgba(79,224,138,.18);animation:wotPulseGlow .42s ease}
body.answer-pulse-bad #lessonScreen::after{box-shadow:inset 0 0 58px 5px rgba(255,123,143,.18);animation:wotPulseGlow .42s ease}
@keyframes wotPulseGlow{0%,100%{opacity:0}35%{opacity:1}}

.game-float{
  position:fixed;z-index:260;left:50%;top:max(92px,calc(env(safe-area-inset-top) + 76px));
  transform:translate(-50%,-8px) scale(.94);opacity:0;pointer-events:none;white-space:nowrap;
  padding:8px 13px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em;
  background:rgba(5,18,48,.94);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.28s cubic-bezier(.2,.9,.2,1);
}
.game-float.show{opacity:1;transform:translate(-50%,0) scale(1)}
.game-float.good{color:#80efb8;border-color:rgba(79,224,138,.32)}
.game-float.bad{color:#ffb0bd;border-color:rgba(255,123,143,.32)}
.game-float.reward{color:#ffe18a;border-color:rgba(255,212,92,.38);box-shadow:0 10px 36px rgba(255,190,40,.12)}

.done-career-progress{
  width:min(390px,100%);margin:-12px auto 18px;padding:14px 15px;border-radius:17px;text-align:left;
  background:linear-gradient(180deg,rgba(22,55,111,.72),rgba(8,27,63,.78));
  border:1px solid rgba(255,212,92,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.done-career-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
.done-career-progress span{color:#91a8ca;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.done-career-progress strong{color:var(--gold-hi);font-size:15px}
.done-level-track{height:8px;margin:9px 0 7px;border-radius:99px;background:rgba(2,10,28,.62);overflow:hidden}
.done-level-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f1b933,#ffe788);box-shadow:0 0 14px rgba(255,212,92,.24);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.done-career-progress small{display:block;color:#9eb3d0;font-size:10.5px}

.done-unlock{
  width:min(390px,100%);margin:0 auto 18px;padding:14px 16px;border-radius:17px;
  border:1px solid rgba(255,212,92,.28);background:linear-gradient(145deg,rgba(93,62,10,.28),rgba(18,42,86,.78));
  box-shadow:0 12px 32px rgba(0,0,0,.18);animation:wotRewardIn .46s cubic-bezier(.2,.9,.2,1);
}
.done-unlock small,.done-unlock strong,.done-unlock span{display:block}
.done-unlock small{color:#f7c94f;font-size:9px;font-weight:900;letter-spacing:.13em}
.done-unlock strong{margin-top:3px;color:#fff4c8;font-size:18px;line-height:1.2}
.done-unlock span{margin-top:4px;color:#a9bdd8;font-size:10.5px}
.done-unlock.perfect{border-color:rgba(79,224,138,.28);background:linear-gradient(145deg,rgba(17,93,63,.28),rgba(18,42,86,.78))}
.done-unlock.perfect small{color:#76e9ad}
@keyframes wotRewardIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

#doneScreen .done-wrap{padding-bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px))}
#doneScreen #continueButton{width:min(390px,100%);margin-left:auto;margin-right:auto}

@media(max-width:520px){
  .done-wrap{padding-top:max(46px,calc(env(safe-area-inset-top) + 34px))}
  .done-stats{margin-bottom:28px}
  .done-career-progress,.done-unlock{width:100%}
}
@media(prefers-reduced-motion:reduce){
  #exerciseArea.question-in,.done-unlock{animation:none!important}
  body.answer-pulse-good #lessonScreen::after,body.answer-pulse-bad #lessonScreen::after{animation:none!important}
  .game-float{transition:none!important}
  .done-level-track i{transition:none!important}
}


/* ══════════════════════════════════════════════════════════════════
   Core Experience v0.5 — first ten minutes
   ══════════════════════════════════════════════════════════════════ */
.lesson-step{
  flex:0 0 auto;min-width:44px;padding:6px 8px;border-radius:10px;
  background:rgba(5,21,54,.74);border:1px solid rgba(255,212,92,.18);
  color:#ffe58a;font-size:10px;font-weight:900;letter-spacing:.08em;text-align:center;
  font-variant-numeric:tabular-nums;
}
.desk-brief-card{
  width:min(560px,100%);margin:0 auto;padding:20px;border-radius:24px;
  background:radial-gradient(360px 220px at 90% 0%,rgba(255,212,92,.12),transparent 68%),
             linear-gradient(155deg,rgba(25,65,126,.95),rgba(6,25,61,.98));
  border:1px solid rgba(255,212,92,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10);
}
.desk-brief-top{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.desk-brief-face{width:76px;height:76px;display:grid;place-items:center;flex:0 0 76px}
.desk-brief-face svg{display:block;width:76px;height:76px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.desk-brief-top>div:last-child{min-width:0}.desk-brief-top small{display:block;margin-top:4px;color:#9eb4d5;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.desk-brief-kicker{display:block;color:#ffd45c;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.desk-brief-card h2{margin:0;color:#fff4c8;font-size:clamp(25px,7vw,34px);line-height:1.08}
.desk-brief-sub{margin:7px 0 17px;color:#adc2df;font-size:13px;line-height:1.45}
.desk-brief-assignment{padding:14px 15px;border-radius:16px;background:rgba(3,14,38,.52);border:1px solid rgba(255,255,255,.07)}
.desk-brief-assignment>span{display:block;color:#ffd45c;font-size:9px;font-weight:900;letter-spacing:.14em}
.desk-brief-assignment strong{display:block;margin-top:4px;color:#fff;font-size:18px;line-height:1.2}
.desk-brief-assignment p{margin:6px 0 0;color:#c6d5e9;font-size:12px;line-height:1.45}
.desk-brief-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}
.desk-brief-facts span{min-width:0;padding:10px 7px;border-radius:13px;background:rgba(255,255,255,.045);text-align:center;color:#8fa8ca;font-size:9px;line-height:1.2}
.desk-brief-facts b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;color:#e8f1ff;font-size:11px}

.done-kicker{margin:8px auto 5px;color:#ffd45c;font-size:10px;font-weight:900;letter-spacing:.18em;text-align:center}
.done-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;width:100%;max-width:560px;margin-left:auto;margin-right:auto}
.done-stats>div{max-width:none!important;padding:14px 8px!important}
.done-stats span{font-size:9px!important;letter-spacing:.09em!important}
.done-stats strong{font-size:26px!important}
.done-next-preview{
  width:min(520px,100%);margin:10px auto 18px;padding:14px 16px;border-radius:17px;
  background:linear-gradient(145deg,rgba(19,48,96,.82),rgba(7,27,65,.88));
  border:1px solid rgba(126,168,255,.18);text-align:left;
}
.done-next-preview small,.done-next-preview strong,.done-next-preview span{display:block}
.done-next-preview small{color:#92acd0;font-size:9px;font-weight:900;letter-spacing:.13em}
.done-next-preview strong{margin-top:4px;color:#fff;font-size:16px;line-height:1.2}
.done-next-preview span{margin-top:4px;color:#a9bdd8;font-size:10.5px}
.done-unlock.new-desk{position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(255,212,92,.08),0 16px 38px rgba(0,0,0,.24)}
.done-unlock.new-desk::after{content:'';position:absolute;inset:-40% -70%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.20) 49%,transparent 56%);animation:wotDeskShine 1.25s .18s ease both}
@keyframes wotDeskShine{from{transform:translateX(-45%)}to{transform:translateX(65%)}}
/* Il richiamo sul primo livello: sulla rotta il nodo è un disco, e un disco
   si fa notare crescendo. Anche qui niente box-shadow animata. */
.node.first-callout .medal{animation:wotFirstCallout .7s ease 2!important}
@keyframes wotFirstCallout{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* The lesson is a game run: a new decision always begins from a clean top. */
/* Questa regola dava alla fascia un testo grigio-azzurro lasciandole il fondo
   dorato: 2.11:1, cioè illeggibile, ed è come si vedeva davvero. L'inchiostro
   scuro della fascia resta quello. */
#lessonScreen.active .run-banner{margin-bottom:13px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}

@media(max-width:430px){
  .lesson-step{min-width:40px;padding:5px 6px;font-size:9px}
  .desk-brief-card{padding:17px 15px;border-radius:20px}
  .desk-brief-face,.desk-brief-face svg{width:68px;height:68px}.desk-brief-face{flex-basis:68px}
  .desk-brief-facts{grid-template-columns:1fr 1fr 1fr;gap:5px}
  .desk-brief-facts span{padding:9px 4px;font-size:8px}.desk-brief-facts b{font-size:9.5px}
  .done-stats{gap:6px!important}.done-stats>div{padding:12px 5px!important}.done-stats strong{font-size:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .node.first-callout,.done-unlock.new-desk::after{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   v0.5.2 — PRACTICE ROOT + EDITABLE TRADER PROFILE
   Keep the short Practice hub on the app background (no white root strip),
   and let the player own a persistent display name + profile photo.
   ═══════════════════════════════════════════════════════════════════ */
html{
  min-height:100%;
  background:#050d20;
}
body{
  min-height:100dvh;
  background-color:#050d20;
}
@media (max-width:820px) and (orientation:portrait){
  /* Practice is intentionally short. Fill the usable viewport without
     reintroducing the old fixed-height/overflow lock that broke scrolling. */
  #practiceScreen.active{
    min-height:calc(100dvh - var(--app-header-h) - 78px - env(safe-area-inset-bottom))!important;
    height:auto!important;
    overflow:visible!important;
    background:transparent!important;
  }
  #practiceScreen .tab-wrap{
    min-height:calc(100dvh - var(--app-header-h) - 150px - env(safe-area-inset-bottom))!important;
    height:auto!important;
    padding-bottom:calc(30px + env(safe-area-inset-bottom))!important;
    background:transparent!important;
  }
}
@media (display-mode:standalone) and (max-width:820px) and (orientation:portrait){
  html,body,#practiceScreen.active{background-color:#050d20!important}
}

.profile-editor{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:16px 18px;
  align-items:center;
  margin-bottom:18px;
  padding:20px;
  border-radius:var(--r-lg);
  background:linear-gradient(145deg,#173f82,#0b275a 72%,#3c2c10);
  border:3px solid rgba(255,212,92,.30);
  box-shadow:0 7px 0 rgba(4,13,35,.58),inset 0 2px 0 rgba(255,255,255,.13);
}
.profile-avatar{
  width:88px;height:88px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold-hi),var(--gold-mid));
  color:#10224b;border:3px solid rgba(255,255,255,.45);
  box-shadow:0 5px 0 rgba(126,76,4,.62),0 8px 24px rgba(0,0,0,.24);
}
.profile-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.profile-avatar span{font-size:38px;font-weight:900;line-height:1}
.profile-editor-copy{min-width:0}
.profile-editor-copy .eyebrow{margin-bottom:3px}
.profile-editor-copy h2{font-size:27px;overflow-wrap:anywhere}
.profile-editor-copy p{margin:5px 0 0;color:#c7d8f2;font-size:13px;line-height:1.4}
.profile-photo-actions{
  grid-column:1/3;
  display:flex;gap:9px;flex-wrap:wrap;
}
.profile-edit-btn{
  min-height:42px;padding:9px 14px;border-radius:12px;cursor:pointer;
  color:#08183f;font-size:12px;font-weight:900;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-mid));
  box-shadow:0 3px 0 rgba(126,76,4,.65);
}
.profile-edit-btn.ghost{
  color:#dce8fb;background:rgba(5,19,49,.42);
  border:1px solid rgba(255,255,255,.14);box-shadow:none;
}
.profile-edit-btn:disabled{opacity:.38;cursor:default}
.profile-name-edit{grid-column:1/3;display:grid;gap:7px}
.profile-name-edit label{color:#a9bfdd;font-size:11px;font-weight:800}
.profile-name-edit>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.profile-name-edit input{
  min-width:0;height:46px;padding:0 13px;border-radius:13px;
  border:2px solid rgba(255,212,92,.20);outline:0;
  background:rgba(4,14,40,.58);color:#fff;font:inherit;font-size:16px;
}
.profile-name-edit input:focus{border-color:var(--gold);background:rgba(4,14,40,.78)}
.profile-name-edit button{
  min-width:72px;border-radius:13px;padding:0 14px;cursor:pointer;
  color:#08183f;font-size:12px;font-weight:900;
  background:linear-gradient(180deg,#a8f7c8,#4fe08a);
  box-shadow:0 3px 0 #1a7a4a;
}
.profile-edit-status{grid-column:1/3;color:#a8f7c8;font-size:11px;font-weight:700}
.profile-edit-status.bad{color:#ffc2cc}
@media (max-width:430px){
  .profile-editor{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:17px}
  .profile-avatar{width:72px;height:72px}
  .profile-avatar span{font-size:31px}
  .profile-editor-copy h2{font-size:23px}
  .profile-editor-copy p{font-size:11.5px}
}


/* ═══════════════════════════════════════════════════════════════════
   v0.5.3 — HARD FIX: PRACTICE CANVAS + PROFILE EDITOR VISIBILITY
   Previous v0.5.2 could be hidden by stale cache-first CSS/JS. The HTML now
   cache-busts assets; these rules also paint the *whole* Practice viewport.
   ═══════════════════════════════════════════════════════════════════ */
html, body {
  background-color:#050d20!important;
}
body[data-active-screen="practiceScreen"]{
  background:
    radial-gradient(900px 520px at 50% -4%, rgba(42,95,191,.65) 0%, transparent 62%),
    radial-gradient(620px 420px at 90% 2%, rgba(245,166,35,.12), transparent 60%),
    linear-gradient(180deg,#0a1b3d 0%,#071634 55%,#050d20 100%)!important;
}
@media (max-width:820px) and (orientation:portrait){
  #practiceScreen.active{
    position:relative!important;
    isolation:isolate;
    min-height:calc(100dvh - var(--app-header-h))!important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
    background:
      radial-gradient(900px 520px at 50% -4%, rgba(42,95,191,.42) 0%, transparent 62%),
      linear-gradient(180deg,#0a1b3d 0%,#071634 58%,#050d20 100%)!important;
    overflow:visible!important;
  }
  #practiceScreen .tab-wrap{
    min-height:0!important;
    padding-bottom:0!important;
    background:transparent!important;
  }
  /* Paint underneath the fixed tab bar/safe-area too. This avoids the
     single light strip some standalone WebViews expose on short pages. */
  body[data-active-screen="practiceScreen"] .tab-bar{
    background:#06112a!important;
    box-shadow:0 -6px 22px rgba(2,8,22,.55)!important;
  }
  body[data-active-screen="practiceScreen"] .tab-bar::after{
    content:"";
    position:absolute;
    left:0;right:0;top:100%;
    height:max(28px,env(safe-area-inset-bottom));
    background:#06112a;
    pointer-events:none;
  }
}

/* Make editing impossible to miss. */
#profileScreen .profile-editor{
  display:grid!important;
  margin-top:4px!important;
  border-color:rgba(255,212,92,.52)!important;
}
#profileScreen .profile-photo-actions,
#profileScreen .profile-name-edit{display:flex!important;}
#profileScreen .profile-name-edit{flex-direction:column!important;}
#profileScreen .profile-name-edit>div{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%;}
#profileScreen .profile-edit-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;}
#profileScreen #profileNameInput{display:block!important;}
#profileScreen #profileNameSave{display:block!important;}
@media(max-width:430px){
  #profileScreen .profile-editor{padding:16px!important;}
  #profileScreen .profile-photo-actions{grid-column:1/-1!important;gap:8px!important;}
  #profileScreen .profile-edit-btn{flex:1 1 auto!important;min-width:0!important;font-size:11px!important;padding:9px 10px!important;}
}


/* ════════════════════════════════════════════════════════════════════
   v0.6 — ACCOUNT & SOCIAL
   ════════════════════════════════════════════════════════════════════ */
.legacy-social-hidden060{display:none!important}
.account-card060{margin:14px 0 20px}.account-card-button060{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border-radius:18px;text-align:left;background:linear-gradient(145deg,rgba(29,79,168,.70),rgba(8,28,65,.92));border:1px solid rgba(255,212,92,.28);box-shadow:0 5px 0 rgba(3,11,31,.5);cursor:pointer}.account-card-button060:active{transform:translateY(2px)}.account-icon060{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(255,212,92,.13);color:var(--gold);font-size:20px}.account-card-button060>span:nth-child(2){min-width:0;display:grid}.account-card-button060 small{color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.13em}.account-card-button060 b{font-size:17px;line-height:1.25}.account-card-button060 em{font-style:normal;color:#b8cce9;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-card-button060>i{font-style:normal;color:var(--gold);font-size:28px}
.account-dialog060{position:fixed;inset:0;z-index:260;background:rgba(2,8,22,.78);backdrop-filter:blur(9px);display:flex;align-items:flex-end;justify-content:center;padding:0}.account-dialog060[hidden]{display:none!important}.account-sheet060{width:min(100%,560px);max-height:calc(94dvh - env(safe-area-inset-top));overflow:auto;overscroll-behavior:contain;padding:0 16px calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:linear-gradient(180deg,#102c63,#071834 26%,#050d20);border:1px solid rgba(255,212,92,.28);box-shadow:0 -18px 60px rgba(0,0,0,.55)}.account-sheet060>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:13px;margin:0 -16px 14px;padding:14px 16px 12px;background:rgba(8,27,60,.96);border-bottom:1px solid rgba(255,212,92,.16);backdrop-filter:blur(10px)}.account-sheet060>header button,.trader-sheet060>button{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);font-size:25px;cursor:pointer}.account-sheet060>header small{display:block;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.14em}.account-sheet060>header h2{font-size:20px}.account-loading060,.social-page-loading060{padding:35px 12px;color:#c3d4ed;text-align:center}
.account-section060{margin:12px 0;padding:15px;border-radius:20px;background:rgba(11,34,76,.72);border:1px solid rgba(255,255,255,.09)}.account-section-title060{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.account-section-title060 span{color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.14em}.account-section-title060 small{color:#91a9ca;font-size:10px}.account-identity-main060{display:flex;align-items:center;gap:11px;margin-bottom:14px}.account-mini-avatar060,.trader-avatar060{flex:0 0 auto;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff0b8,#f5a623);color:#071834;font-weight:900;box-shadow:0 3px 0 #8d5509}.account-identity-main060>div:last-child{display:grid}.account-identity-main060 b{font-size:17px}.account-identity-main060 small{color:#b9cce7}.account-section060 label{display:grid;gap:6px;color:#a9bfdd;font-size:11px;font-weight:800}.trader-id-input060{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border:1px solid rgba(255,212,92,.24);background:rgba(2,11,30,.5);border-radius:13px;overflow:hidden}.trader-id-input060>span{padding-left:12px;color:var(--gold);font-weight:900}.trader-id-input060 input,.password-box060 input{min-width:0;height:44px;border:0;outline:0;padding:0 8px;background:transparent;color:#fff;font:inherit;font-size:15px}.trader-id-input060 button,.password-box060 button{height:44px;padding:0 14px;color:#071834;background:linear-gradient(180deg,#fff0b8,#f5a623);font-weight:900;cursor:pointer}.account-status060{display:block;margin:8px 0 0;color:#a8f7c8}.account-status060.bad{color:#ffc2cc}.account-row060{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}.account-row060:first-of-type{border-top:0}.account-row060>span{display:grid;min-width:0}.account-row060 b{font-size:14px}.account-row060 small{color:#a8bddb;font-size:11px;overflow-wrap:anywhere}.account-row060 em{font-style:normal;color:#ffb7c3;font-size:10px;font-weight:800}.account-row060 em.verified{color:#9ef2bf}.account-row060.action button{padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:11px;font-weight:800;cursor:pointer}.password-box060{display:grid;gap:8px;margin-top:8px;padding:11px;border-radius:14px;background:rgba(2,11,30,.48)}.password-box060 input{padding:0 11px;border:1px solid rgba(255,255,255,.13);border-radius:11px}.password-box060 button{border-radius:11px}.password-box060 small{color:#b9cce8}.setting-toggle060{display:flex!important;align-items:center;justify-content:space-between;gap:15px}.setting-toggle060>span{display:grid}.setting-toggle060 b{color:#fff;font-size:14px}.setting-toggle060 small{color:#a8bddb;font-weight:400}.setting-toggle060 input{position:absolute;opacity:0}.setting-toggle060>i{position:relative;flex:0 0 auto;width:49px;height:29px;border-radius:99px;background:#263b5e;transition:.18s}.setting-toggle060>i::after{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.18s}.setting-toggle060 input:checked+i{background:#2f9c64}.setting-toggle060 input:checked+i::after{transform:translateX(20px)}.account-link060{display:flex;align-items:center;justify-content:space-between;padding:10px 0;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07)}.account-link060 i{font-style:normal;color:var(--gold)}.account-danger-light060,.account-danger060{width:100%;margin-top:10px;min-height:43px;border-radius:12px;cursor:pointer;font-weight:800}.account-danger-light060{color:#fff;background:rgba(255,255,255,.07)}.account-danger060{color:#ffc2cc;background:rgba(160,36,58,.18);border:1px solid rgba(255,123,143,.26)}.delete-box060{margin-top:10px;padding:12px;border-radius:14px;background:rgba(115,20,39,.18);border:1px solid rgba(255,123,143,.24)}.delete-box060 b{color:#ffc2cc}.delete-box060 p{margin:5px 0 10px;color:#cbbbc4;font-size:11px}.delete-box060 input{height:42px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,123,143,.28);background:#071329;color:#fff}.delete-box060 button{min-height:42px;border-radius:10px;background:#a0243a;color:#fff;font-weight:900}.delete-box060 button:disabled{opacity:.35}
.league-subnav060{position:sticky;top:calc(var(--app-header-h,0px) + 3px);z-index:8;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0 0 14px;padding:5px;border-radius:15px;background:rgba(4,15,39,.92);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}.league-subnav060 button{position:relative;min-height:40px;border-radius:11px;color:#9fb5d5;font-size:11px;font-weight:900;cursor:pointer}.league-subnav060 button.active{color:#08183f;background:linear-gradient(180deg,#fff0b8,#f5a623)}.league-subnav060 button span{position:absolute;right:4px;top:3px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:#ff6278;color:#fff;font-size:9px}.league-page060{display:none}.league-page060.active{display:block}.social-hero060,.challenge-hero060{display:grid;gap:14px;margin:4px 0 14px;padding:18px;border-radius:23px;background:linear-gradient(145deg,#153e82,#0b285a 68%,#4b3510);border:1px solid rgba(255,212,92,.35);box-shadow:0 6px 0 rgba(3,12,33,.55)}.social-hero060 span,.challenge-hero060 span,.social-panel-title060 span,.invite060 span{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.14em}.social-hero060 h2,.challenge-hero060 h2{font-size:24px}.social-hero060 p,.challenge-hero060 p,.invite060 p{margin:4px 0 0;color:#c7d8ef;font-size:12px}.social-own-id060{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:14px;background:rgba(2,11,30,.42)}.social-own-id060 small{margin-right:auto;color:#9fb7d8;font-size:9px}.social-own-id060 b{color:#fff0b8}.social-own-id060 button,.invite060 button{padding:7px 10px;border-radius:9px;background:rgba(255,212,92,.13);color:var(--gold);font-size:10px;font-weight:900;cursor:pointer}.social-panel060{margin:12px 0;padding:15px;border-radius:20px;background:rgba(11,34,76,.70);border:1px solid rgba(255,255,255,.09)}.social-panel-title060{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.social-panel-title060 h3{font-size:18px}.social-panel-title060>small{color:#a9bedb;font-size:10px}.social-panel-title060>b{min-width:25px;height:25px;display:grid;place-items:center;border-radius:99px;background:#ff6278;font-size:10px}.trader-search060{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border:1px solid rgba(255,212,92,.23);border-radius:13px;overflow:hidden;background:rgba(2,11,30,.5)}.trader-search060 span{padding-left:12px;color:var(--gold);font-weight:900}.trader-search060 input{min-width:0;height:44px;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:14px;padding:0 7px}.trader-search060 button{height:44px;padding:0 13px;background:#ffd45c;color:#08183f;font-size:11px;font-weight:900;cursor:pointer}.search-hint060{margin:9px 2px 0;color:#a9bedb;font-size:11px}.search-hint060.bad{color:#ffc2cc}.social-list060{display:grid;gap:8px}.search-results060{margin-top:10px}.trader-row060{display:grid;grid-template-columns:43px minmax(0,1fr) auto 25px;gap:9px;align-items:center;padding:10px;border-radius:15px;background:rgba(3,15,40,.46);border:1px solid rgba(255,255,255,.07)}.trader-copy060{display:grid;min-width:0}.trader-copy060 b{font-size:13px}.trader-copy060 small{color:#9fb5d3;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trader-row060>strong{color:#fff0b8;font-size:11px}.view-trader060{font-size:22px;color:var(--gold);cursor:pointer}.trader-actions060{grid-column:2/-1;display:flex;justify-content:flex-end}.friend-action060,.friend-request-actions060 button{min-height:34px;padding:0 11px;border-radius:9px;background:rgba(255,212,92,.13);color:var(--gold);font-size:10px;font-weight:900;cursor:pointer}.friend-action060.challenge{background:linear-gradient(180deg,#fff0b8,#f5a623);color:#08183f}.friend-action060:disabled{opacity:.5}.friend-request-actions060{display:flex;gap:7px}.friend-request-actions060 button:first-child{background:#4fe08a;color:#071834}.friend-request-actions060 button.ghost{background:rgba(255,255,255,.07);color:#d9e5f7}.social-empty060{padding:22px 12px;text-align:center;color:#b2c5e1}.social-empty060 b{display:block;color:#fff}.social-empty060 p{margin:5px auto 12px;max-width:330px;font-size:11px}.social-empty060 button{padding:8px 12px;border-radius:10px;background:#ffd45c;color:#08183f;font-weight:900}.invite060{display:flex;align-items:center;justify-content:space-between;gap:14px}.invite060>div{min-width:0}.invite060 h3{font-size:17px}
.duel-record060{display:flex;gap:7px}.duel-record060>div{min-width:54px;padding:7px;border-radius:12px;text-align:center;background:rgba(2,11,30,.42)}.duel-record060 b{display:block;color:#fff0b8;font-size:17px}.duel-record060 small{color:#9fb5d3;font-size:9px}.challenge-list060{display:grid;gap:8px}.challenge-row060{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border-radius:15px;background:rgba(3,15,40,.47);border:1px solid rgba(255,255,255,.07)}.challenge-cross060{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(255,212,92,.09)}.challenge-row060>div:nth-child(2){display:grid}.challenge-row060 small{color:#8fa8ca;font-size:9px}.challenge-row060 b{font-size:13px}.challenge-row060 span{color:#fff0b8;font-size:12px}.challenge-row060 em{font-style:normal;color:#a9bedb;font-size:9px;font-weight:900}.challenge-row060.won{border-color:rgba(79,224,138,.3)}.challenge-row060.won em{color:#8ef0b5}.challenge-row060.lost em{color:#ff9aaa}.challenge-row060 button{grid-column:2/-1;justify-self:end;padding:7px 11px;border-radius:9px;background:#ffd45c;color:#08183f;font-size:10px;font-weight:900}.trader-sheet060{position:relative;width:min(calc(100% - 24px),430px);margin:auto;padding:22px;border-radius:24px;background:linear-gradient(180deg,#153a78,#071834);border:1px solid rgba(255,212,92,.28)}.trader-sheet060>button{position:absolute;right:12px;top:12px}.trader-profile-head060{text-align:center}.trader-avatar060.big{width:74px;height:74px;margin:0 auto 10px;font-size:28px}.trader-profile-head060>span{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.14em}.trader-profile-head060 h2{font-size:24px}.trader-profile-head060 p{margin:3px 0;color:#b8cce7}.trader-profile-stats060{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.trader-profile-stats060>div{padding:12px;border-radius:13px;text-align:center;background:rgba(2,11,30,.46)}.trader-profile-stats060 b{display:block;color:#fff0b8}.trader-profile-stats060 small{color:#96adcd}.trader-profile-actions060{display:flex;justify-content:center}
@media(max-width:430px){.account-sheet060{border-radius:24px 24px 0 0}.social-hero060,.challenge-hero060{padding:15px}.invite060{align-items:flex-start;flex-direction:column}.invite060 button{width:100%;min-height:40px}.trader-row060{grid-template-columns:40px minmax(0,1fr) auto 20px}.trader-avatar060{width:40px;height:40px}.league-subnav060{top:calc(var(--app-header-h,0px) + 2px)}}

/* ═══════════════════════════════════════════════════════════════════
   v0.6.1 — MOBILE TAB STABILITY PASS
   Native-style tabs must switch as complete canvases: no vertical entrance
   animation, no delayed IntersectionObserver reveal, no inherited deep scroll,
   and one consistent safe-area/bottom-bar geometry on every hub.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --mobile-tab-h:70px;
  --hub-bottom-space:calc(var(--mobile-tab-h) + 22px + env(safe-area-inset-bottom));
}

@media (max-width:820px) and (orientation:portrait){
  html,body{
    width:100%;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    background-color:#050d20!important;
  }

  body:not(.immersive):not(.auth-locked){
    min-height:100dvh!important;
    padding-bottom:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none!important;
  }

  /* A tab is a stable app canvas. The bottom reserve lives here once, rather
     than being split between body + screen + per-tab exceptions. */
  #pathScreen.active,
  #playScreen.active,
  #practiceScreen.active,
  #leagueScreen.active,
  #profileScreen.active{
    display:block!important;
    width:100%!important;
    min-height:calc(100dvh - var(--app-header-h,64px))!important;
    height:auto!important;
    padding-bottom:var(--hub-bottom-space)!important;
    overflow:visible!important;
    overflow-x:hidden!important;
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    background:transparent;
    contain:none!important;
  }

  #pathScreen.active .wrap,
  #playScreen.active .wrap,
  #practiceScreen.active .wrap,
  #leagueScreen.active .wrap,
  #profileScreen.active .wrap,
  #pathScreen.active .tab-wrap,
  #playScreen.active .tab-wrap,
  #practiceScreen.active .tab-wrap,
  #leagueScreen.active .tab-wrap,
  #profileScreen.active .tab-wrap{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Mobile tab content is never allowed to sit invisible waiting for an
     observer callback after being display:none. */
  #pathScreen .ui-reveal,
  #playScreen .ui-reveal,
  #practiceScreen .ui-reveal,
  #leagueScreen .ui-reveal,
  #profileScreen .ui-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  /* Keep the chrome on its own compositor layers. This prevents the fixed HUD
     and bottom navigation from flickering while a long Path/League repaints. */
  .app-header,.tab-bar{
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .tab-bar{
    min-height:var(--mobile-tab-h);
    background:linear-gradient(180deg,rgba(9,24,58,.985),rgba(6,17,42,1))!important;
  }
  .tab-bar::after{
    content:"";
    position:absolute;
    left:0;right:0;top:100%;
    height:max(28px,env(safe-area-inset-bottom));
    background:#06112a;
    pointer-events:none;
  }

  /* The former Practice-only root patch is now guaranteed on every tab. */
  body[data-active-screen="pathScreen"],
  body[data-active-screen="playScreen"],
  body[data-active-screen="practiceScreen"],
  body[data-active-screen="leagueScreen"],
  body[data-active-screen="profileScreen"]{
    background-color:#050d20!important;
  }

  /* During one synchronous tab switch no presentation animation may fight the
     scroll restoration/layout. This class exists for only one animation frame. */
  body.tab-switching *,
  body.tab-switching *::before,
  body.tab-switching *::after{
    scroll-behavior:auto!important;
  }
  body.tab-switching .screen.active,
  body.tab-switching .screen.active .ui-reveal{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }

  /* League's internal tabs are part of the same fixed-header geometry. */
  .league-subnav060{
    top:calc(var(--app-header-h,64px) + 2px)!important;
    transform:translateZ(0);
  }
  .league-page060.active{
    min-height:220px;
    overflow:visible!important;
  }

  /* Full-screen sheets lock the canvas underneath; otherwise iOS/Android can
     move the page behind the sheet and return to a different position. */
  body.overlay-open,
  body.account-open060{
    overflow:hidden!important;
    overscroll-behavior:none!important;
    touch-action:none;
  }
  body.overlay-open .account-sheet060,
  body.account-open060 .account-sheet060,
  body.overlay-open .trader-sheet060{
    touch-action:pan-y;
  }
}

@media (display-mode:standalone) and (max-width:820px) and (orientation:portrait){
  html,body{min-height:100dvh!important;background:#050d20!important}
}


/* ── Practice · allenamento mirato ─────────────────────────────────────
   La scheda mostrava una coda sola e, per chi comincia, un pulsante spento.
   Qui si vede dove si è deboli e si allena una competenza alla volta. */
.practice-skills{margin-top:18px;padding:18px 17px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(16,40,86,.6),rgba(6,20,48,.8));
  border:1px solid rgba(173,205,255,.14)}
.practice-skills-note{margin:-6px 0 14px;font-size:12.5px;line-height:1.55;color:#a6bcdc}
.skill-drills{display:grid;gap:10px}
.skill-drill{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;
  width:100%;padding:12px 14px;border-radius:16px;cursor:pointer;text-align:left;
  background:linear-gradient(155deg,rgba(24,64,130,.88),rgba(9,31,72,.94));
  border:1px solid rgba(173,205,255,.14);
  transition:transform .14s var(--spring),border-color .16s ease}
.skill-drill:hover{border-color:rgba(255,212,92,.5);transform:translateY(-2px)}
.skill-drill:active{transform:translateY(1px)}
.skill-drill:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skill-drill>i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  font-style:normal;font-size:19px;color:var(--gold-hi);background:rgba(3,12,34,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.skill-drill-copy{min-width:0}
.skill-drill-copy b{display:block;font-size:14.5px;font-weight:700}
.skill-drill-copy small{display:block;margin:2px 0 7px;font-size:11.5px;line-height:1.4;color:#a9c2e8;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill-drill .skill-track{display:block;height:6px;border-radius:99px;overflow:hidden;
  background:rgba(2,10,28,.6);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.skill-drill .skill-track i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi))}
.skill-drill-score{min-width:26px;padding-left:2px;text-align:right;font-size:15px;color:var(--gold-hi)}


/* ── obiettivo del giorno ──────────────────────────────────────────────
   L'anello attorno alla fiamma dice quanti XP mancano oggi. Un conic-gradient
   mascherato: nessun SVG da tenere in sincrono, e si anima senza ridipingere. */
.stat.streak{position:relative;overflow:visible}
.stat.streak::before{
  content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 180deg,var(--gold-hi) var(--goal,0%), rgba(255,255,255,.13) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;padding:3px;
  transition:background .45s ease;
}
.stat.streak.goal-hit::before{box-shadow:0 0 14px rgba(255,212,92,.5)}
.stat.streak.goal-hit i{filter:drop-shadow(0 0 6px rgba(255,150,60,.8))}


/* Il pulsante di Hélène stava all'altezza della barra delle schede: copriva
   l'ultimo nodo della rotta e sfiorava le icone di navigazione. Sta sopra. */

/* Il crest in alto a sinistra è un collegamento alla home: era alto 34px,
   sotto la soglia toccabile, e stretto quanto l'immagine. */
.brand-link{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px}


/* ── impostazioni del dispositivo ──────────────────────────────────────
   Suono e vibrazione seguono il telefono, non l'account: stanno nel Profilo
   e restano raggiungibili anche senza aver mai creato un account. */
.device-settings{margin-top:16px;padding:18px 17px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(16,40,86,.6),rgba(6,20,48,.8));
  border:1px solid rgba(173,205,255,.14)}
.device-toggle{display:flex;align-items:center;gap:14px;padding:13px 2px;cursor:pointer}
.device-toggle+.device-toggle{border-top:1px solid rgba(255,255,255,.07)}
.device-toggle>span{flex:1 1 auto;min-width:0}
.device-toggle b{display:block;font-size:15px}
.device-toggle small{display:block;margin-top:3px;color:#a9c2e8;font-size:12.5px;line-height:1.5}
.device-toggle input{position:absolute;opacity:0;width:0;height:0}
.device-toggle i{flex:0 0 auto;position:relative;width:52px;height:31px;border-radius:999px;
  background:rgba(2,10,28,.7);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
  transition:background .18s ease}
.device-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;
  border-radius:50%;background:linear-gradient(180deg,#dbe8ff,#9fb7db);
  box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .18s var(--spring),background .18s ease}
.device-toggle input:checked+i{background:linear-gradient(180deg,var(--gold-mid),var(--gold-deep))}
.device-toggle input:checked+i::after{transform:translateX(21px);
  background:linear-gradient(180deg,#fff8e6,var(--gold-hi))}
.device-toggle input:focus-visible+i{outline:3px solid var(--gold);outline-offset:3px}

/* v0.8 stabilisation: explicit practice rationale and profile privacy labels */
.practice-reason{display:block;margin:12px 0;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.06);color:#b9cbe6;font-size:11px}.practice-reason b{display:block;color:#fff0b8;margin-bottom:2px}.practice-reason.weak{border:1px solid rgba(255,174,91,.18)}.practice-reason.memory{border:1px solid rgba(127,176,255,.18)}.profile-name-edit label{display:flex;justify-content:space-between;gap:10px}.profile-name-edit label small{color:#7893b8;font-size:9px;font-weight:700}

.block-trader060{margin-left:8px;padding:8px 11px;border-radius:10px;background:rgba(160,36,58,.18);border:1px solid rgba(255,123,143,.24);color:#ffc2cc;font-weight:800;cursor:pointer}

/* v0.8.2 — completion learning summary */
.done-learning-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 2px}
.done-learning-summary[hidden]{display:none!important}
.done-learning-summary>div{padding:12px 14px;border:1px solid var(--line,#dfe5ec);border-radius:14px;background:var(--card,#fff);display:grid;gap:3px}
.done-learning-summary small{font-size:10px;font-weight:800;letter-spacing:.11em;opacity:.62}
.done-learning-summary b{font-size:14px}.done-learning-summary span{font-size:12px;opacity:.72}
@media(max-width:420px){.done-learning-summary{grid-template-columns:1fr}}