/* Grafica «Aero» (scelta da Michele il 12/11/2026: cielo, vetro e tasti lucidi di B, titoli alti e stretti di C).
   Va caricato PER ULTIMO in ogni pagina, dopo tutti gli altri fogli di stile e dopo i blocchi <style>:
   ridefinisce i colori (stessi nomi dei token Sumi) e ritocca le forme. Togliendo questo file il sito torna Sumi. */
:root{
  --paper:#EAF6FD; --grain:transparent; --grid:transparent; --card:rgba(255,255,255,.74); --well:rgba(255,255,255,.62);
  --ink:#06324F; --muted:#24506B; --line:rgba(16,104,164,.22); --line2:rgba(16,104,164,.40);
  --gold:#C98A00; --bull:#0B7F46; --bull-soft:#D3F5E1; --bear:#C92A52; --bear-soft:#FCDCE5; --doji:#06324F;
  --accent:#0A76C4; --accent-soft:#D6EEFC; --hl:#E3F6FF; --hl-line:#39B4F2;
  --seal:#0A76C4; --seal-ink:#FFFFFF;
  --display:"Sofia Sans Extra Condensed","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Hind",system-ui,sans-serif;
  --r:16px;
  --sky:linear-gradient(180deg,#7CCBF5 0%,#B5E3FA 30%,#E6F7FF 62%,#FFFFFF 100%);
  --gel:linear-gradient(180deg,#0D62A6 0%,#1C7FC6 100%);
  --gel-edge:#0A558F; --gel-ink:#FFFFFF;
  --gel-ok:linear-gradient(180deg,#14854C 0%,#27A566 100%);
  --gel-ko:linear-gradient(180deg,#C22C55 0%,#DC4A72 100%);
  --glass-edge:rgba(255,255,255,.95);
  --glass-shadow:0 8px 22px rgba(10,80,130,.16), inset 0 1px 0 rgba(255,255,255,.9);
  --bubble:rgba(255,255,255,.8);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#031226; --card:rgba(9,36,64,.80); --well:rgba(4,22,42,.70);
  --ink:#EAF7FF; --muted:#B7D8EE; --line:rgba(150,210,255,.24); --line2:rgba(150,210,255,.42);
  --gold:#F2C552; --bull:#5FE39A; --bull-soft:rgba(95,227,154,.18); --bear:#FF8FA8; --bear-soft:rgba(255,143,168,.18); --doji:#EAF7FF;
  --accent:#6CCBFF; --accent-soft:rgba(108,203,255,.18); --hl:rgba(108,203,255,.14); --hl-line:#6CCBFF;
  --seal:#2AA5EA; --seal-ink:#FFFFFF;
  --gel:linear-gradient(180deg,#0A4E86 0%,#1568A8 100%); --gel-edge:#3D8FCC;
  --sky:linear-gradient(180deg,#010A18 0%,#04213F 45%,#0A4474 100%);
  --glass-edge:rgba(170,220,255,.34);
  --glass-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
  --bubble:rgba(150,210,255,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#031226; --card:rgba(9,36,64,.80); --well:rgba(4,22,42,.70);
  --ink:#EAF7FF; --muted:#B7D8EE; --line:rgba(150,210,255,.24); --line2:rgba(150,210,255,.42);
  --gold:#F2C552; --bull:#5FE39A; --bull-soft:rgba(95,227,154,.18); --bear:#FF8FA8; --bear-soft:rgba(255,143,168,.18); --doji:#EAF7FF;
  --accent:#6CCBFF; --accent-soft:rgba(108,203,255,.18); --hl:rgba(108,203,255,.14); --hl-line:#6CCBFF;
  --seal:#2AA5EA; --seal-ink:#FFFFFF;
  --gel:linear-gradient(180deg,#0A4E86 0%,#1568A8 100%); --gel-edge:#3D8FCC;
  --sky:linear-gradient(180deg,#010A18 0%,#04213F 45%,#0A4474 100%);
  --glass-edge:rgba(170,220,255,.34);
  --glass-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
  --bubble:rgba(150,210,255,.35); color-scheme:dark}

/* ---------- fondo: cielo fisso, bolle solo ai bordi (mai sopra i testi) ---------- */
/* il cielo sta su html (copre sempre tutta la pagina, anche sotto il piede); body trasparente, anche su About e Privacy dove una regola !important metteva la grana */
html{background:var(--paper) var(--sky) fixed;min-height:100%}
body{background:transparent!important;background-image:none!important;min-height:100vh;font-size:16px;line-height:1.6}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle closest-side,transparent 0 72%,var(--bubble) 93%,transparent 100%) calc(100% + 26px) 12%/120px 120px no-repeat,
  radial-gradient(circle closest-side,transparent 0 70%,var(--bubble) 92%,transparent 100%) -14px 46%/54px 54px no-repeat,
  radial-gradient(circle closest-side,transparent 0 68%,var(--bubble) 90%,transparent 100%) calc(100% - 6px) 78%/34px 34px no-repeat}

/* ---------- titoli alti e stretti ---------- */
h1,.hero h1,.prompt,.sect h2,.bar .t,.menu-h,.authcard h2,.intro h2,.summary .score,#landing h2,.level .lv-name,.studylink .sl-h{
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.015em;line-height:1}
.hero h1{font-size:clamp(56px,12vw,112px);line-height:.9}
.hero h1 em{color:var(--accent)}
.prompt{font-size:clamp(28px,5vw,40px);line-height:1.02}
.prompt small{text-transform:none;letter-spacing:0;line-height:1.4}
.menu-h,.sect h2,.bar .t{font-size:30px}
.menu-h::before{background:var(--gel);border:1px solid var(--gel-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);width:14px;height:14px}
.level .lv-name{font-size:28px}
.level .lv-name small{font-family:var(--body);letter-spacing:.04em}
.studylink .sl-h{font-size:30px}
.summary .score{font-size:44px}
/* i titoli piccoli restano nel carattere di testo: lo stretto sotto i 20 px si legge male */
.mode h3,.card h3,.opt .nm,.fb h3,.danger-zone h3,.streak b,.sitefoot span,.fb .levelup b{font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:0}
.eyebrow{letter-spacing:.2em;font-weight:500}

/* ---------- vetro ---------- */
.panel,.mode,.studylink,.compare figure,.beltbox .tip,#landing #lp-set{
  background:var(--card);border:1px solid var(--glass-edge);border-radius:var(--r);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bigchart,.intro .big,.card .well,.mode .ill,.secret{background:var(--well);border:1px solid var(--line);border-radius:12px}
.qcard{box-shadow:var(--glass-shadow)}
.hero{border-bottom:0}
.settings{border-bottom:1px solid var(--line)!important}
.authcard{border-top:1px solid var(--glass-edge)!important}
.danger-zone{border-top:1px solid var(--bear)}
.bar{border-bottom:1px solid var(--line2)}

/* modalità: da tabella a filetti a carte di vetro */
.modes{border:0;gap:12px}
.mode,.mode:first-child{border:1px solid var(--glass-edge);border-radius:var(--r);padding:16px}
.mode::before{content:none}
.mode:hover,.mode[aria-checked="true"]{background:var(--card)}
.mode[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--glass-shadow)}
.mode[aria-checked="true"]::after{content:none}
.mode .rec{color:var(--accent)}
@media (max-width:900px){.mode:nth-child(3){border-left:1px solid var(--glass-edge)}.mode:nth-child(n+3){border-top:1px solid var(--glass-edge)}}
@media (max-width:640px){.mode,.mode:first-child{border:1px solid var(--glass-edge)!important}}

/* ---------- tasti lucidi a goccia ---------- */
.btn,#landing .btn{background:var(--gel);color:var(--gel-ink);border:1px solid var(--gel-edge);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(8,60,110,.22);text-shadow:none;letter-spacing:.02em}
.btn:hover:not(:disabled){background:var(--gel);color:var(--gel-ink)}
.btn.big,#landing .btn.big,#landing .iscr2{border-radius:18px;background:var(--gel);color:var(--gel-ink)}
.btn.ghost,#landing .btn.small{background:var(--card);color:var(--ink);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);text-shadow:none}
.btn.ghost:hover:not(:disabled){background:var(--card);color:var(--ink)}
.btn.danger{background:var(--gel-ko);border-color:#B5284C;color:#fff}
.back{border-radius:999px}

/* selettori a pillola */
.seg{border-radius:999px;border-color:var(--glass-edge);background:var(--card);padding:2px;gap:2px;box-shadow:var(--glass-shadow)}
.seg button,.seg button+button{border:0;border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--gel);color:var(--gel-ink);text-shadow:none}
.themes button{border-radius:999px}
.lingue button{border-radius:12px;background:var(--card);border-color:var(--glass-edge)}
.lingue button[aria-pressed="true"]{background:var(--gel);color:var(--gel-ink);border-color:var(--gel-edge)}
.chip,.nextchip{border-radius:999px}
.switch input,.check input{accent-color:var(--accent)}

/* ---------- risposte: carte di vetro; giusto e sbagliato si riconoscono anche dal segno, non solo dal colore ---------- */
.opts{gap:10px;border-top:0}
.opt,.opts .opt:nth-child(odd){border:1px solid var(--glass-edge);border-radius:12px;background:var(--card);box-shadow:var(--glass-shadow)}
.opt:hover:not(:disabled){background:var(--card)}
.opt.right{background:var(--bull-soft);border-color:var(--bull);box-shadow:0 0 0 1px var(--bull)}
.opt.wrong{background:var(--bear-soft);border-color:var(--bear);box-shadow:0 0 0 1px var(--bear)}
.opt.right .k,.opt.wrong .k{font-size:0;border:0;width:24px;height:24px;color:#fff}
.opt.right .k{background:var(--gel-ok)}
.opt.wrong .k{background:var(--gel-ko)}
.opt.right .k::before{content:"✓";font-size:14px;font-weight:700}
.opt.wrong .k::before{content:"✕";font-size:13px;font-weight:700}
.opt.fig{border-radius:12px;border:1px solid var(--glass-edge)!important}
.fb{border-radius:14px;border:1px solid;border-left-width:1px}
.pip.cur{background:var(--accent);border-color:var(--accent)}

/* barre di avanzamento lucide */
.level .lv-bar{height:10px;border-radius:999px;background:var(--well);border:1px solid var(--line)}
.level .lv-bar i{background:var(--gel-ok);border-radius:999px}

/* ---------- campi ---------- */
#authForm input,.acard input:not([type=checkbox]),.studybar input{
  border:1px solid var(--line2);border-radius:12px;background:var(--well);padding:10px 12px}
#authForm input:focus-visible,.studybar input:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.danger-box input,.acard .danger-box input:not([type=checkbox]){border:1px solid var(--bear);border-radius:12px;background:var(--well);padding:8px 12px}
.qr{border-radius:12px}
.sitefoot{border-top:1px solid var(--line2)}
.sitefoot a:hover{color:var(--accent)}

/* ---------- copertina (pagina d'ingresso): nome grande al centro, niente timbro ---------- */
#landing .hero .kg-nome{margin:0;text-transform:none;font-family:var(--body);font-weight:700;font-size:clamp(52px,13vw,96px);line-height:1;letter-spacing:-.01em;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
#landing .frase{font-family:var(--body);font-weight:500;color:var(--muted);order:1;margin:14px 0 6px}
#landing .riga{order:2;height:clamp(80px,16svh,130px);margin:0 0 18px}
#landing .iscr2{order:3;min-width:min(320px,80vw)}
#landing .giu{color:var(--muted)}
#landing h2{font-size:clamp(40px,8vw,68px)}
#landing .foto img,#landing .foto svg{border-radius:var(--r);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
#landing .passi li{font-family:var(--body);font-weight:700;border-bottom:1px solid var(--line2)}
#landing .passi b{background:var(--gel);border:1px solid var(--gel-edge);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(8,60,110,.22);text-shadow:none}
#landing .passi .lv{color:var(--accent)}
#landing .gearbtn{border-radius:50%}
#landing .btn:focus-visible,#landing .linkbtn:focus-visible,#landing a:focus-visible{outline-color:var(--accent)}

@media (prefers-reduced-transparency: reduce){
  .panel,.mode,.studylink,.compare figure,.beltbox .tip,#landing #lp-set{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* righe di impostazioni e progressi: sono «panel» ma senza scatola, quindi niente vetro né ombra */
.settings,.progress{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0!important}

/* avviso cookie */
.ck-bar{background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--glass-edge)!important;border-radius:var(--r)!important;box-shadow:var(--glass-shadow)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ck-bar button{background:var(--gel)!important;color:var(--gel-ink)!important;border:1px solid var(--gel-edge)!important;border-radius:12px!important;text-shadow:none}
.ck-bar a{color:var(--accent)!important}

/* logo KeriGaku (versione F di Michele) nei colori Aero: cerchio lucido azzurro. Vale per il logo nel Dojo; favicon e icone vanno rifatte a parte. */
.hero .logo{content:url(logo-aero.svg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero .logo{content:url(logo-aero-notte.svg)}}
:root[data-theme="dark"] .hero .logo{content:url(logo-aero-notte.svg)}

/* telefono: il sito Sumi nascondeva il disegno di ogni attività; Michele (12/11) lo vuole vedere anche qui: disegno a sinistra, testi a destra */
@media (max-width:640px){
  .mode{grid-template-columns:104px minmax(0,1fr)!important;gap:2px 12px;padding:12px;align-items:start}
  .mode > *{grid-column:2}
  .mode .ill{display:flex;grid-column:1;grid-row:1 / span 3;height:auto;aspect-ratio:2/1;align-self:center}
  .mode .peek,.mode .peekline{grid-column:1 / -1}
}

/* disegni delle attività ridisegnati (Michele 12/11): tessera azzurra lucida con pittogramma chiaro, uguale di giorno e di notte.
   I disegni che il sito costruiva con lo script restano nel codice ma sono nascosti; l'immagine è lo sfondo della tessera. */
.mode .ill > *,.studylink .ill > *{display:none!important}
/* i disegni delle attività hanno già la loro tessera (bordo, gradiente, angoli) dentro l'SVG: la casella è solo il contenitore 2:1 */
.mode .ill,.studylink .ill{border:0;border-radius:14px;box-shadow:0 2px 6px rgba(8,60,110,.2);background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 100%;aspect-ratio:2/1;height:auto}
#ill-studia{background-image:url(attivita-studia.svg)}
#ill-srs{background-image:url(attivita-srs.svg)}
#ill-f2n{background-image:url(attivita-f2n.svg)}
#ill-n2f{background-image:url(attivita-n2f.svg)}
#ill-scen{background-image:url(attivita-scen.svg)}
#ill-prova{background-image:url(attivita-prova.svg)}

/* correzioni di errori evidenti (12/11) */
/* bolle solo dove c'è margine vuoto ai lati (schermi oltre 1400 px): altrimenti finivano sopra logo e testi */
@media (max-width:1400px){body::after{content:none}}
/* logo KeriGaku al posto del vecchio timbro anche su About, Privacy e Admin */
img[src="logo.svg"]{content:url(logo-aero.svg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) img[src="logo.svg"]{content:url(logo-aero-notte.svg)}}
:root[data-theme="dark"] img[src="logo.svg"]{content:url(logo-aero-notte.svg)}
/* la fila di candele dell'intestazione non passa più sotto il logo */
.hero canvas{-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 62%,#000 76%,transparent 86%);mask-image:linear-gradient(90deg,transparent 40%,#000 62%,#000 76%,transparent 86%)}
@media (max-width:640px){.hero canvas{-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 55%,transparent 72%);mask-image:linear-gradient(90deg,transparent 30%,#000 55%,transparent 72%)}}
/* nome del livello: sul telefono la riga «Livello 1 di 4 · …» va a capo intera, non spezzata a metà */
@media (max-width:640px){.level .lv-name small{display:block;margin:6px 0 0}}