/* ════════════════════════════════════════════════════════════
   03 · APPLY — Protocol Challenge
   Zona del modello 0–600 (immagine cotta 810×600), domanda allineata
   in basso a y 700 (cresce verso l'alto), risposte e feedback in
   720–1032. Nessun controllo sopra 720.
   ════════════════════════════════════════════════════════════ */

[data-station="apply"]{
  --hero-h: 600px;
  --light-x: 342px;          /* centro della luce cotta (baricentro dei punti ufficiali) */
  --light-y: 312px;
}

/* ── il modello ───────────────────────────────────────── */
[data-station="apply"] .z-model{ height: var(--hero-h); overflow: visible; }
/* il pozzo di luce copre tutto lo schermo: chiuso nella zona del modello lascerebbe una riga a y 600 */
[data-station="apply"] .pool{
  inset: auto; left: 0; top: 0; width: 810px; height: 1080px;
  background:
    radial-gradient(circle 520px at var(--light-x) var(--light-y), rgba(226, 233, 241, .07), rgba(226, 233, 241, 0) 72%),
    radial-gradient(circle 760px at var(--light-x) var(--light-y), var(--oxford) 0%, var(--oxford-deep) 100%);
}
.hero{ position: absolute; left: 0; top: 0; width: 810px; height: 600px; }
/* sulle domande la parte bassa del volto cede il posto al testo, che cresce verso l'alto */
.apply-q .z-model::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  background: linear-gradient(180deg, rgba(0, 26, 56, 0) 0%, var(--oxford-deep) 88%);
  pointer-events: none;
}
.apply-q.is-maps .z-model::after{ display: none; }
.apply-esito .z-model::after{
  content: ""; position: absolute; left: 0; right: 0; top: 420px; height: 180px;
  background: linear-gradient(180deg, rgba(0, 26, 56, 0) 0%, var(--oxford-deep) 80%);
  pointer-events: none;
}

/* ── i punti: nucleo pieno + anello sottile; l'anello si espande una volta (§4) ── */
.pts{ position: absolute; inset: 0; pointer-events: none; }
.pt{ position: absolute; width: 0; height: 0; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.pt.on{ opacity: 1; }
.pt::before{                                   /* la maglia si dirada sotto il reticolo */
  content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(226, 233, 241, .9) 55%, rgba(226, 233, 241, 0) 100%);
}
.pt i{ position: absolute; border-radius: 50%; }
.pt b, .pt em{ position: absolute; border-radius: 50%; border: 2px solid; }
.pt.o i{ left: -7px; top: -7px; width: 14px; height: 14px; background: var(--orange); box-shadow: 0 0 0 2px var(--oxford-deep); }
.pt.n i{ left: -10px; top: -10px; width: 20px; height: 20px; background: var(--egyptian); }
.pt.o b, .pt.o em{ left: -17px; top: -17px; width: 34px; height: 34px; border-color: var(--orange); }
.pt.n b, .pt.n em{ left: -19px; top: -19px; width: 38px; height: 38px; border-color: var(--egyptian); }
.pt em{ opacity: 0; }
.pt.on em{ animation: ring-once 700ms var(--ease-out) 1 both; }
@keyframes ring-once{ from{ opacity: .9; transform: scale(1); } to{ opacity: 0; transform: scale(2.6); } }

.legend{ display: flex; gap: 28px; font-size: 18px; font-weight: var(--w-strong); color: var(--alice); }
.legend span{ display: inline-flex; align-items: center; gap: 10px; }
.legend i{ display: block; border-radius: 50%; }
.legend .o i{ width: 13px; height: 13px; background: var(--orange); box-shadow: 0 0 0 2px var(--oxford-deep), 0 0 0 3.5px var(--alice-42); }
.legend .n i{ width: 18px; height: 18px; background: var(--egyptian); box-shadow: 0 0 0 1.5px var(--alice); }

/* ── testo ────────────────────────────────────────────── */
[data-station="apply"] .q-text{ position: absolute; left: var(--gutter); right: var(--gutter); bottom: 380px; z-index: 2; }
.apply-idle .q-text{ bottom: 160px; }            /* l'unico comando è in fondo: il testo scende sotto il volto */
.apply-idle .title{ margin-top: 12px; font-size: var(--t-hero); font-weight: var(--w-strong); line-height: 1.02; letter-spacing: -.02em; color: var(--white); }
.apply-idle .lede{ margin-top: 18px; max-width: 34ch; }
.apply-q .question{ font-size: 38px; line-height: 1.14; }
.progress{
  position: absolute; right: var(--gutter); top: 40px; z-index: 6;
  font-size: var(--t-anchor); font-weight: var(--w-strong); letter-spacing: .3em; color: var(--alice-70);
}

/* ── D1: le quattro mappe ─────────────────────────────── */
.maps{ position: absolute; left: var(--gutter); top: 72px; display: grid; grid-template-columns: 349px 349px; gap: 16px; }
.map{ position: relative; width: 349px; height: 226px; margin: 0; }
.map img{ display: block; width: 100%; height: 100%; transition: opacity var(--dur) var(--ease-out); }
.map .letter{
  position: absolute; left: 12px; top: 8px;
  font-size: 22px; font-weight: var(--w-strong); color: var(--white); font-variant-numeric: tabular-nums;
}
.map .mark{
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-size: 16px; font-weight: var(--w-strong); letter-spacing: .04em;
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
/* dopo la risposta: le mappe sbagliate barrate, in modo che anche una foto della singola
   mappa dica che non è il protocollo; la corretta marcata come ufficiale (CLAUDE.md §6) */
.map.barred img{ opacity: .26; }
.map.barred::after{
  content: ""; position: absolute; left: 50%; top: 50%; width: 330px; height: 3px;
  background: var(--alice); transform: translate(-50%, -50%) rotate(-31deg); opacity: .9;
}
.map.barred .mark{ opacity: 1; color: var(--alice); }
.map.official .mark{ opacity: 1; color: var(--orange); }
.map.chosen .letter{ color: var(--orange); }

/* ── risposte ─────────────────────────────────────────── */
.opts{ display: grid; gap: 24px; transition: opacity var(--dur-fast) var(--ease-out); }
.opts.grid2{ grid-template-columns: 1fr 1fr; }
.opts.row{ grid-template-columns: repeat(4, 1fr); }
.opts.stack{ grid-template-columns: 1fr; gap: 20px; }
.opt{ border: 1.5px solid var(--alice-42); color: var(--alice); font-weight: var(--w-regular); }
.opts.grid2 .opt, .opts.row .opt{ justify-content: center; text-align: center; font-weight: var(--w-strong); }
.opts.grid2 .opt{ min-height: 88px; font-size: 30px; }
.opts.row .opt{ min-height: 96px; font-size: 34px; padding: 0; font-variant-numeric: tabular-nums; }
.opts.stack .opt{ min-height: 72px; padding: 16px 26px; font-size: 20px; line-height: 1.3; }
.opt:active{ border-color: var(--orange); }
.answered .opts{ opacity: 0; pointer-events: none; }

.fb{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.answered .fb{ opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease-out) 160ms, visibility 0s; }
.fb .verdict{ font-size: 28px; font-weight: var(--w-strong); color: var(--white); display: flex; align-items: center; gap: 14px; }
.was-right .fb .verdict::before{ content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
.fb .spieg{ font-size: 21px; line-height: 1.4; color: var(--alice-70); max-width: 44ch; }
.fb .spieg:empty{ display: none; }
.fb .btn{ margin-top: 8px; }
.fb .disclaimer{ font-size: 14px; }

/* ── esito: posizioni fisse; nell'ultimo terzo c'è solo l'azione ── */
.apply-esito .q-text.res{ bottom: auto; top: 528px; }
.apply-esito .legend{ position: absolute; right: var(--gutter); top: 540px; z-index: 2; }
.apply-esito .z-act{ top: auto; bottom: var(--gutter); }
.apply-esito .after{ position: absolute; left: var(--gutter); right: var(--gutter); top: 724px; display: flex; flex-direction: column; gap: 16px; }
.apply-esito .score{ margin-top: 6px; color: var(--white); font-weight: var(--w-strong); line-height: 1; }
.apply-esito .score b{ font-size: 76px; letter-spacing: -.02em; font-weight: var(--w-strong); }
.apply-esito .score span{ font-size: 30px; color: var(--alice-70); }
.apply-esito .res-label{ margin-top: 12px; font-size: 26px; font-weight: var(--w-strong); color: var(--alice); }
.apply-esito .peer{ margin-top: 8px; font-size: 18px; color: var(--alice-70); }
.apply-esito .peer:empty{ display: none; }
.apply-esito .next-stop{ padding-top: 14px; }
.apply-esito .next-stop .v{ font-size: 30px; margin-top: 4px; }
.apply-esito .next-stop .lede{ margin-top: 4px; font-size: 18px; }