/* ============================================================
   Alfabeto interattivo ProLingua
   Identità: oro ProLingua #A08850 — cupola — Garamond nei titoli
   Nessuna dipendenza esterna: funziona offline, in Moodle e in iframe.
   ============================================================ */

:root{
  /* --- Colori di marca --- */
  --oro:        #A08850;
  --oro-scuro:  #7E6838;
  --oro-chiaro: #C7B183;
  --oro-velo:   #F3EADA;

  --inchiostro: #2A2622;
  --grigio:     #6E675E;
  --carta:      #FFFFFF;
  --fondo:      #FAF7F1;
  --linea:      #E6DECF;

  --ok:         #2E7D4F;

  /* --- Tipografia --- */
  --serif: "Garamond", "EB Garamond", "Adobe Garamond Pro", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Forme --- */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --ombra-s: 0 1px 2px rgba(42,38,34,.06), 0 2px 8px rgba(42,38,34,.05);
  --ombra-m: 0 4px 12px rgba(42,38,34,.07), 0 12px 32px rgba(42,38,34,.07);
  --ombra-oro: 0 6px 18px rgba(160,136,80,.28);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--inchiostro);
  background:
    radial-gradient(1100px 500px at 12% -10%, #FDF9F2 0%, transparent 60%),
    radial-gradient(900px 450px at 100% 0%, var(--oro-velo) 0%, transparent 55%),
    var(--fondo);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

button{ font:inherit; color:inherit; cursor:pointer; }

:focus-visible{
  outline:3px solid var(--oro);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================================================
   Guscio
   ============================================================ */
.app{
  max-width:1240px;
  margin:0 auto;
  padding:clamp(14px,2.5vw,28px) clamp(12px,2.5vw,28px) 28px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,22px);
}

/* --- Barra superiore --- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.brandbox{ display:flex; align-items:center; gap:16px; min-width:0; }

.logo{
  height:clamp(38px,5vw,52px);
  width:auto;
  flex:none;
}

.titles{ min-width:0; }

h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.15rem);
  line-height:1.1;
  margin:0;
  color:var(--oro-scuro);
  letter-spacing:.01em;
}

.sub{
  margin:.25em 0 0;
  color:var(--grigio);
  font-size:clamp(.85rem,1.6vw,.98rem);
}

.tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* --- Anello di avanzamento --- */
.progress{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--carta);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:6px 16px 6px 8px;
  box-shadow:var(--ombra-s);
}
.ring{ width:38px; height:38px; transform:rotate(-90deg); flex:none; }
.ring circle{ fill:none; stroke-width:4; stroke-linecap:round; }
.ring-bg{ stroke:var(--oro-velo); }
.ring-fg{
  stroke:var(--oro);
  stroke-dasharray:119.4;
  stroke-dashoffset:119.4;
  transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);
}
.progress-txt{ line-height:1.15; }
.progress-txt strong{ display:block; font-size:1rem; font-variant-numeric:tabular-nums; }
.progress-txt span{ font-size:.72rem; color:var(--grigio); text-transform:uppercase; letter-spacing:.07em; }

/* --- Interruttore audio automatico --- */
.tool-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--carta);
  border:1px solid var(--linea);
  border-radius:999px;
  padding:10px 16px;
  font-size:.86rem; font-weight:600;
  color:var(--grigio);
  box-shadow:var(--ombra-s);
  transition:.18s;
}
.tool-btn svg{ width:16px; height:16px; fill:currentColor; }
.tool-btn[aria-pressed="true"]{
  background:var(--oro); border-color:var(--oro); color:#fff;
  box-shadow:var(--ombra-oro);
}
.tool-btn:hover{ transform:translateY(-1px); }

/* ============================================================
   Impianto a due colonne
   ============================================================ */
.layout{
  display:grid;
  grid-template-columns:minmax(280px,360px) 1fr;
  gap:clamp(14px,2vw,22px);
  align-items:start;
  flex:1;
}

.panel{
  background:var(--carta);
  border:1px solid var(--linea);
  border-radius:var(--r-l);
  box-shadow:var(--ombra-m);
}

.griglia-panel{ padding:clamp(16px,2vw,22px); }

/* --- Gruppi di lettere --- */
.gruppo + .gruppo{ margin-top:26px; padding-top:22px; border-top:1px dashed var(--linea); }

.gruppo h2{
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:600;
  margin:0 0 2px;
  color:var(--oro-scuro);
}
.gruppo p{ margin:0 0 14px; font-size:.8rem; color:var(--grigio); line-height:1.45; }

.griglia{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:8px;
}

.cella{
  position:relative;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  background:var(--fondo);
  border:1.5px solid transparent;
  border-radius:var(--r-m);
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  font-weight:600;
  color:var(--inchiostro);
  transition:transform .16s cubic-bezier(.34,1.4,.5,1), background .16s, border-color .16s, box-shadow .16s;
}
.cella:hover{ background:var(--oro-velo); transform:translateY(-2px); }
.cella[aria-current="true"]{
  background:var(--oro);
  border-color:var(--oro);
  color:#fff;
  box-shadow:var(--ombra-oro);
  transform:translateY(-2px);
}
/* pallino "già ascoltata" */
.cella.vista::after{
  content:"";
  position:absolute; top:7px; right:7px;
  width:6px; height:6px; border-radius:50%;
  background:var(--ok);
}
.cella[aria-current="true"].vista::after{ background:#fff; }

/* ============================================================
   Scheda della lettera
   ============================================================ */
.scheda{
  padding:clamp(20px,3vw,34px);
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.4vw,26px);
  position:relative;
  overflow:hidden;
}

/* filigrana cupola */
.scheda::after{
  content:"";
  position:absolute; right:-70px; bottom:-90px;
  width:340px; height:340px;
  background:
    radial-gradient(circle at 50% 100%, var(--oro) 0 2px, transparent 2px),
    conic-gradient(from 180deg at 50% 100%, transparent 0deg, var(--oro) 90deg, transparent 180deg);
  -webkit-mask-image:radial-gradient(circle at 50% 100%, #000 60%, transparent 61%);
          mask-image:radial-gradient(circle at 50% 100%, #000 60%, transparent 61%);
  opacity:.05;
  pointer-events:none;
}

.scheda-head{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,32px);
  flex-wrap:wrap;
}

/* --- Bottone lettera grande --- */
.lettera-grande{
  display:inline-flex;
  align-items:center;
  gap:16px;
  background:linear-gradient(160deg, var(--oro) 0%, var(--oro-scuro) 100%);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:clamp(14px,2vw,20px) clamp(30px,4vw,46px);
  box-shadow:var(--ombra-oro);
  transition:transform .16s cubic-bezier(.34,1.4,.5,1), filter .16s;
  flex:none;
}
.lettera-grande:hover{ transform:translateY(-2px) scale(1.015); filter:brightness(1.05); }
.lettera-grande:active{ transform:translateY(0) scale(.99); }
.lettera-grande > span{
  font-family:var(--serif);
  font-size:clamp(2.6rem,7vw,4.1rem);
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
}

.spk{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.spk path:first-child{ fill:currentColor; stroke-width:1.4; }
.spk-lg{ width:clamp(28px,4vw,38px); height:clamp(28px,4vw,38px); }

/* onde sonore animate durante la riproduzione */
.spk .w1,.spk .w2{ opacity:.85; }
.suona .spk .w1{ animation:onda .9s ease-in-out infinite; }
.suona .spk .w2{ animation:onda .9s ease-in-out .18s infinite; }
@keyframes onda{ 0%,100%{opacity:.25} 50%{opacity:1} }

.scheda-meta{ min-width:0; }
.si-chiama{ margin:0; font-size:clamp(1rem,2.2vw,1.22rem); color:var(--grigio); }
.si-chiama b{
  font-family:var(--serif);
  font-size:1.3em; color:var(--oro-scuro); font-weight:600;
  letter-spacing:.02em;
}
.suono{
  margin:.5em 0 0;
  max-width:44ch;
  font-size:clamp(.88rem,1.7vw,.98rem);
  color:var(--inchiostro);
  line-height:1.5;
}
.tag{
  display:inline-block; margin-top:12px;
  background:var(--oro-velo); color:var(--oro-scuro);
  border-radius:999px; padding:4px 13px;
  font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
}

/* --- Parole --- */
.parole-head h2{
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  margin:0; color:var(--oro-scuro);
}
.parole-head .hint{ margin:.3em 0 0; font-size:.82rem; color:var(--grigio); }

.parole{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}

.parola{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  background:var(--fondo);
  border:1.5px solid var(--linea);
  border-radius:var(--r-m);
  padding:14px 16px;
  transition:transform .16s cubic-bezier(.34,1.4,.5,1), border-color .16s, background .16s, box-shadow .16s;
}
.parola:hover{ background:#fff; border-color:var(--oro); transform:translateY(-2px); box-shadow:var(--ombra-s); }
.parola.suona{ border-color:var(--oro); background:#fff; box-shadow:var(--ombra-oro); }

.parola .spk{ width:22px; height:22px; color:var(--oro); }

.parola-testo{
  font-family:var(--serif);
  font-size:clamp(1.15rem,2.2vw,1.35rem);
  line-height:1.15;
  min-width:0;
  word-break:break-word;
}
/* La lettera da imparare dentro la parola.
   Niente fondo colorato: la macchia spezza la parola e la rende meno leggibile.
   Colore oro + grassetto — due segnali distinti, quindi la lettera resta
   riconoscibile anche a chi non distingue bene i colori. */
.parola-testo mark{
  background:none;
  color:var(--oro);
  font-weight:700;
}


/* --- Navigazione in fondo alla scheda --- */
.scheda-nav{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:18px;
  border-top:1px dashed var(--linea);
  flex-wrap:wrap;
}
.nav-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  border:1.5px solid var(--linea);
  border-radius:999px;
  padding:10px 20px;
  font-size:.88rem; font-weight:600;
  color:var(--oro-scuro);
  transition:.16s;
}
.nav-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn:hover:not(:disabled){ background:var(--oro-velo); border-color:var(--oro); }
.nav-btn:disabled{ opacity:.35; cursor:default; }

.kbd-hint{ margin:0; font-size:.75rem; color:var(--grigio); text-align:center; flex:1; min-width:180px; }
kbd{
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  background:var(--fondo); border:1px solid var(--linea);
  border-bottom-width:2px; border-radius:5px;
  padding:1px 6px; color:var(--inchiostro);
}

/* --- Piede --- */
.foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.72rem; color:var(--grigio);
  padding-top:4px;
}
.claim{ text-transform:uppercase; letter-spacing:.13em; color:var(--oro); font-weight:600; }

/* ============================================================
   Caricamento ed errore
   ============================================================ */
.loader{
  position:fixed; inset:0;
  display:grid; place-content:center; justify-items:center; gap:18px;
  background:var(--fondo);
  color:var(--grigio); font-size:.9rem;
  z-index:50;
}
.loader[hidden]{ display:none; }
.dome{
  width:52px; height:52px;
  border:3px solid var(--oro-velo);
  border-top-color:var(--oro);
  border-radius:50%;
  animation:gira .9s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

.errore{
  margin:40px auto; max-width:520px;
  background:#FDF2F2; border:1px solid #E9C9C9; color:#8A2B2B;
  border-radius:var(--r-m); padding:18px 22px; font-size:.92rem;
}

/* ============================================================
   Adattamento a schermi piccoli
   ============================================================ */
@media (max-width:820px){
  .layout{ grid-template-columns:1fr; }
  .scheda{ min-height:0; }
  .griglia{ grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); }
  .topbar{ gap:14px; }
  .tools{ width:100%; justify-content:space-between; }
  .scheda-nav{ justify-content:center; }
  .kbd-hint{ display:none; }
}

@media (max-width:520px){
  /* Intestazione compatta: sul telefono lo spazio verticale serve alle lettere */
  .brandbox{ gap:11px; }
  .logo{ height:34px; }
  .tools{ gap:10px; }
  .progress{ padding:5px 12px 5px 6px; }
  .progress-txt span{ display:none; }
  .progress-txt strong{ font-size:.92rem; }
  .tool-btn{ padding:9px 14px; font-size:.8rem; }

  /* Sei colonne: griglia più densa, ma celle ancora comode da toccare */
  .griglia{ grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:7px; }
  .gruppo p{ font-size:.76rem; }

  .parole{ grid-template-columns:1fr; }
  .lettera-grande{ width:100%; justify-content:center; }
}

/* ============================================================
   Cornici basse — il caso dello SCORM dentro Moodle
   Il player di Moodle assegna all'attività un riquadro di poche centinaia
   di pixel: qui si stringe tutto perché resti leggibile senza scorrere
   dentro una finestrella.
   ============================================================ */
@media (max-height:760px){
  .app{ gap:10px; padding:10px 14px 10px; min-height:0; }
  .griglia-panel{ padding:14px; }
  .griglia{ gap:6px; }
  .progress{ padding:4px 12px 4px 5px; }
  .ring{ width:30px; height:30px; }
  .scheda-nav{ padding-top:10px; }
  .logo{ height:34px; }
  h1{ font-size:1.35rem; }
  .sub{ display:none; }
  .gruppo p{ display:none; }
  .gruppo + .gruppo{ margin-top:14px; padding-top:12px; }
  .scheda{ padding:16px 18px; gap:14px; }
  .lettera-grande{ padding:10px 26px; }
  .lettera-grande > span{ font-size:2.3rem; }
  .suono{ font-size:.86rem; }
  .parole{ gap:8px; }
  .parola{ padding:10px 12px; }
  .foot{ display:none; }
  .kbd-hint{ display:none; }
}

/* Rispetto delle preferenze di movimento ridotto */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Stampa: scheda leggibile su carta */
@media print{
  .tools,.scheda-nav,.loader{ display:none !important; }
  .panel{ box-shadow:none; }
  body{ background:#fff; }
}