/* ============================================================
   Il timer: orologio, durate, controlli, sottofondo, e il
   disegno delle sessioni intere contro quelle rotte.

   Va sempre DOPO pagina-chiara.css, da cui prende colori e
   caratteri. Lo usano le sei versioni della stessa pagina.
   Estratto il 22 settembre 2026 dalla pagina italiana, che era
   l'unica gia' passata alla veste chiara: le altre cinque si
   portavano ancora dentro il vecchio foglio scuro.
   ============================================================ */

.fase{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--inchiostro-3)}
.orologio{font-family:var(--sans);font-size:clamp(58px,15vw,88px);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;margin:6px 0;color:var(--inchiostro)}
.durate{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 12px}
.durata{background:var(--carta);border:1px solid var(--riga);color:var(--inchiostro);font-family:var(--sans);font-size:15px;
  font-weight:600;padding:0 18px;min-height:44px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;
  transition-property:transform,border-color,background-color,color;transition-duration:150ms;transition-timing-function:cubic-bezier(.2,.7,.3,1)}
.durata:hover{border-color:var(--inchiostro-3)}
.durata:active{transform:scale(.97)}
.durata.on{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--carta)}
.custom{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:15px;color:var(--inchiostro-2);margin-bottom:18px}
.custom input{width:84px;text-align:center;min-height:44px}
.controlli{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--inchiostro);color:var(--carta);
  font-family:var(--sans);font-weight:500;font-size:17px;padding:0 24px;min-height:44px;border-radius:6px;border:0;cursor:pointer;
  transition:transform .15s cubic-bezier(.2,.7,.3,1)}
.cbtn:hover{transform:translateY(-1px)}
.cbtn:active{transform:scale(.97)}
.cbtn.ghost{background:var(--carta);color:var(--inchiostro-2);border:1px solid var(--riga)}
.cbtn.ghost:hover{border-color:var(--inchiostro-3);color:var(--inchiostro)}
.msg{font-family:var(--sans);font-size:15px;color:var(--verde);font-weight:600;margin-top:14px;min-height:22px}
.contatore{font-family:var(--sans);font-size:15px;color:var(--inchiostro-2);margin-top:8px}
.contatore b{color:var(--inchiostro);font-size:16px;font-variant-numeric:tabular-nums}
.sottofondo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--riga)}
.sottofondo label{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--inchiostro-2);flex:none;display:flex;align-items:center;gap:6px;margin:0}
.sottofondo label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sottofondo select{width:auto;min-width:150px}
.sottofondo input[type=range]{flex:1;min-width:110px;accent-color:var(--blu)}
.foglio-in{text-align:center}
.foglio.testo,.foglio.testo *{text-align:left}
.confronto{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.traccia{background:#fff;border:1px solid var(--riga);border-radius:6px;padding:16px 18px}
.traccia b{display:block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--inchiostro-2);margin-bottom:12px}
.traccia .barra{display:flex;gap:4px;height:14px}
.traccia .seg{border-radius:3px;background:var(--verde)}
.traccia .buco{border-radius:3px;background:var(--carta);border:1px dashed #C8C4B8}
.traccia.rotta .seg{background:var(--corallo)}
.traccia small{display:block;font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:10px}
.player-piede{font-family:var(--sans);font-size:14px;color:var(--inchiostro-3);margin-top:14px}