/*
 * Error Recovery — la stanza dei pannelli ritmici (§23, reference di ATELIER
 * in app/design/screens/rooms.html §5).
 *
 * NESSUN VALORE GRAFICO VIVE QUI. Solo i token della stanza e i fallback
 * dichiarati (`currentColor`, `transparent`): non sono colori scelti da me,
 * sono ereditarieta' e assenza.
 *
 * PERCHE' UN FOGLIO PROPRIO E NON `court.css`: questo gioco non e' sul parquet.
 * Vestirlo con le classi del campo lo legherebbe alle misure del campo, e la
 * prima volta che ATELIER tocca il parquet si muoverebbe anche questa stanza
 * senza che nessuno l'abbia chiesto.
 *
 * TRE STATI, E DUE DI LORO NON POSSONO DISTINGUERSI PER TINTA.
 * ATELIER ha misurato: pannello sbagliato contro pannello spento sta a 2,86:1,
 * sotto il pavimento del sistema, e non si arrotonda. Quindi l'errore si legge
 * dal SEGNO — la croce — non dal riempimento. La croce non e' decorazione: e'
 * meta' dello stato, ed e' la meta' che sopravvive a chi non distingue le
 * tinte.
 *
 * E il pannello ACCESO perde il bordo mentre guadagna il riempimento. Non e'
 * ordine: spento e' un contorno con dentro il nulla, acceso e' un solido.
 * Togli ogni colore da questa stanza e restano due oggetti diversi.
 */

.tk-er-root {
  display: block;
  touch-action: none;          /* il tocco e' nostro, non dello scroll */
  user-select: none;
  width: 100%;
  height: 100%;
}

/*
 * IL FONDO NON SI MUOVE (C-5ab, D-030/D-017). Uno stimolo puo' comparire,
 * accendersi, sparire — quello e' il segnale. Il FONDO no: l'occhio si adatta
 * a un campo costante, e un campo ancora in movimento a t0 mette un transiente
 * di luminanza DENTRO la misura. Qui si misura un tempo di reazione, quindi
 * vale cinque volte.
 */
.tk-er-fondo {
  fill: var(--tk-surface-game, transparent);
}

/* Solo i pannelli si afferrano: tutto il resto e' trasparente al dito. */
.tk-er-banner {
  pointer-events: none;
}

.tk-er-panel {
  pointer-events: auto;
  cursor: pointer;
}

/* SPENTO: un contorno, e dentro niente. Un pannello spento non porta mai un
   segno — se lo portasse, non sarebbe piu' spento. */
.tk-er-panel__faccia {
  fill: transparent;
  stroke: var(--tk-panel-off-line, currentColor);
  stroke-width: var(--tk-panel-off-stroke, 2);
}

/* ACCESO: un solido, e il bordo se ne va. E' la meta' non-colore dello stato. */
.tk-er-panel--acceso .tk-er-panel__faccia {
  fill: var(--tk-panel-lit-fill, currentColor);
  stroke: none;
}

/*
 * SBAGLIATO: il riempimento dichiara il suo canale, ma a distinguerlo dallo
 * spento e' la CROCE — 2,86:1 non basta e non si arrotonda.
 */
.tk-er-panel--errato .tk-er-panel__faccia {
  fill: var(--tk-state-error, transparent);
  stroke: none;
}

.tk-er-panel__segno {
  display: none;
  stroke: var(--tk-panel-lit-fill, currentColor);
  stroke-width: var(--tk-outcome-mark-stroke, 2.5);
  stroke-linecap: round;
  fill: none;
}

.tk-er-panel--errato .tk-er-panel__segno {
  display: block;
}

.tk-er-banner__testo {
  fill: var(--tk-ink-strong, currentColor);
  font-weight: 600;
  font-size: var(--tk-text-item);
  letter-spacing: 0.01em;
}

.tk-er-banner__sotto {
  fill: var(--tk-ink-secondary, currentColor);
  font-size: var(--tk-text-body);
}

/*
 * LA TERZA RIGA: cosa fare adesso (A6). Inchiostro piu' quieto delle altre due,
 * perche' e' un'istruzione e non una notizia — l'esito resta la cosa che si
 * legge per prima. Non e' decorazione: senza, lo schermo aspetta un tocco che
 * il giocatore non sa di dover dare, e resta fermo sei secondi e passa.
 */
.tk-er-banner__invito {
  fill: var(--tk-ink-secondary, currentColor);
  font-size: var(--tk-text-body);
  opacity: 0.82;
}

/*
 * NIENTE TRANSIZIONE SUL RIEMPIMENTO DEI PANNELLI, ed e' una rinuncia
 * deliberata: qui la conferma del tocco E' lo spegnimento sulla battuta, e una
 * dissolvenza lo trasformerebbe in un evento sfumato proprio dove il giocatore
 * legge il proprio tempo. Il resto della casa usa --tk-duration-feedback; una
 * stanza che misura millisecondi no.
 */
@media (prefers-reduced-motion: reduce) {
  .tk-er-panel__faccia,
  .tk-er-panel__segno { transition: none; animation: none; }
}

/*
 * LA VIA D'USCITA (r3erec). Da quando la sequenza successiva non parte mai da
 * sola, chi non ricorda ha bisogno di una porta dichiarata: senza, resterebbe
 * fermo davanti a uno schermo che aspetta. Il bersaglio e' la banda, non le
 * lettere — chi manca una scritta di 13 px non ha scelto di continuare, ha
 * solo mancato.
 */
.tk-er-skip__zona {
  fill: transparent;
  pointer-events: auto;
}

.tk-er-skip__testo {
  fill: var(--tk-ink-secondary, currentColor);
  font-size: var(--tk-text-body);
  pointer-events: auto;
}

/* Il gruppo della via d'uscita: trasparente agli eventi, cosi' solo la banda
   e le lettere prendono il dito. Senza questa regola il gruppo esiste nel DOM
   e non e' vestito — il modo piu' silenzioso di rompere un disegno. */
.tk-er-skip {
  pointer-events: none;
}

/*
 * IL CONTO ALLA ROVESCIA (r11b). La macchina sta in `_comune/festa.js`, il
 * vestito qui: cosi' il canone di 咖啡, quando arriva, si applica in un posto
 * per stanza invece che dentro il motore condiviso.
 *
 * IL VELO COPRE, e non e' decorazione: se la griglia fosse leggibile durante il
 * conto, il giocatore comincerebbe a studiarla prima del via e la prima
 * sequenza partirebbe con un vantaggio che nessuno ha misurato. Il fondo e'
 * quello della stanza, pieno — non una trasparenza, che lascerebbe intravedere
 * proprio cio' che deve restare coperto.
 */
.tk-er-count {
  pointer-events: none;        /* il conto non prende il dito: non c'e' niente da toccare */
}

.tk-er-count__velo {
  fill: var(--tk-surface-game, transparent);
}

.tk-er-count__cifra {
  fill: var(--tk-ink-strong, currentColor);
  font-size: var(--tk-text-display, var(--tk-text-item));
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* le cifre non ballano cambiando */
  animation: tk-count-battuta var(--tk-duration-feedback, .18s) ease-out;
}

/*
 * L'EQUIVALENTE FERMO. Chi ha chiesto meno movimento vede le stesse tre cifre,
 * per lo stesso tempo: il conto DICE QUANTO MANCA, quindi non si toglie — si
 * smette di animarlo. Il tempo totale resta identico, cosi' due giocatori con
 * impostazioni diverse cominciano nello stesso istante relativo.
 */
.tk-count--fermo { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tk-er-count__cifra { animation: none; }
}

@keyframes tk-count-battuta {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*
 * LE SEI TINTE (咖啡, famiglia --tk-recall-N-fill).
 *
 * IL RIPOSO E' UN CONTORNO COLORATO, L'ACCESO E' UN PIENO — e questa e' una
 * decisione, non l'unica strada possibile.
 *
 * 咖啡 ha misurato l'altra: se il pannello a riposo fosse il PIENO ad alpha
 * ridotto, la tinta piu' debole incrocia il pavimento 3:1 ad alpha 0,752 (a
 * 0,80 sta a 3,26:1, a 0,70 crolla a 2,73:1 e la griglia a riposo smette di
 * leggersi). Quella strada e' legale se si resta sopra 0,752 — ma costa il
 * canale NON-COLORE: se il riposo e' gia' pieno, «acceso» resterebbe solo una
 * differenza di intensita' della stessa tinta, cioe' colore da solo.
 *
 * Col contorno invece restano DUE canali: la posizione ha la sua tinta stabile
 * anche a riposo (l'anello), e l'accensione e' un cambio di FORMA — vuoto che
 * diventa pieno — che si legge anche senza distinguere i colori. E' la stessa
 * regola che 咖啡 aveva gia' imposto ai pannelli («spento = contorno, acceso =
 * solido»): le tinte ci si appoggiano sopra invece di sostituirla.
 * Nessun alpha, quindi nessun valore da dichiarare: le tinte restano quelle
 * che ha misurato lei, intatte.
 */
.tk-er-panel--tinta1 .tk-er-panel__faccia { stroke: var(--tk-recall-1-fill); }
.tk-er-panel--tinta2 .tk-er-panel__faccia { stroke: var(--tk-recall-2-fill); }
.tk-er-panel--tinta3 .tk-er-panel__faccia { stroke: var(--tk-recall-3-fill); }
.tk-er-panel--tinta4 .tk-er-panel__faccia { stroke: var(--tk-recall-4-fill); }
.tk-er-panel--tinta5 .tk-er-panel__faccia { stroke: var(--tk-recall-5-fill); }
.tk-er-panel--tinta6 .tk-er-panel__faccia { stroke: var(--tk-recall-6-fill); }

.tk-er-panel--tinta1.tk-er-panel--acceso .tk-er-panel__faccia { fill: var(--tk-recall-1-fill); }
.tk-er-panel--tinta2.tk-er-panel--acceso .tk-er-panel__faccia { fill: var(--tk-recall-2-fill); }
.tk-er-panel--tinta3.tk-er-panel--acceso .tk-er-panel__faccia { fill: var(--tk-recall-3-fill); }
.tk-er-panel--tinta4.tk-er-panel--acceso .tk-er-panel__faccia { fill: var(--tk-recall-4-fill); }
.tk-er-panel--tinta5.tk-er-panel--acceso .tk-er-panel__faccia { fill: var(--tk-recall-5-fill); }
.tk-er-panel--tinta6.tk-er-panel--acceso .tk-er-panel__faccia { fill: var(--tk-recall-6-fill); }