/* Ninja Uzi Sushi — la CORSA INFINITA (14-10, js/infinita.js e avvio.js). Stesso stile di ricettario e bottega: carta di
   riso, inchiostro, lacca rossa e oro. Due carte (del giorno e libera) col record e il pulsante per partire. */
.corsa-intro { margin: 0 6px; font-size: 14.5px; line-height: 1.4; color: var(--inchiostro); }
/* il corpo scorre (carte, ninja, classifiche); la fila dei pulsanti resta in fondo */
.corsa-corpo { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 2px; }
.corsa-scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px; }
@media (max-width: 640px) { .corsa-scelte { grid-template-columns: 1fr; } }
.corsa-carta { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border: 3px solid var(--inchiostro);
  border-radius: 10px; background: linear-gradient(#fffaf0, #f4e6c4); box-shadow: 3px 3px 0 rgba(42,34,56,.7); color: var(--inchiostro); }
.corsa-carta.giorno { background: linear-gradient(#fff3c4, #f6d27a); }
.corsa-carta h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 clamp(20px, 2.4vw, 26px)/1 var(--font); letter-spacing: 1.4px;
  color: var(--lacca); -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; }
.corsa-carta small { color: #8a6a4a; font-size: 12.5px; }
.corsa-carta p { margin: 0; font-size: 13.5px; line-height: 1.35; }
.corsa-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.55);
  font-size: 13px; }
.corsa-rec b { font: 400 clamp(16px, 1.9vw, 19px)/1 var(--font); letter-spacing: .6px; }
.corsa-rec.vuoto { color: #8a6a4a; font-style: italic; }
.corsa-carta .tavoletta { align-self: flex-start; margin-top: auto; }
/* telefono in ORIZZONTALE (≤520 px di altezza): i CORRI finivano sotto la fila dei pulsanti (bisognava scorrere per vederli).
   Carte compatte: niente presentazione né descrizioni, record e CORRI sulla stessa riga */
@media (max-height: 520px) {
  .corsa-intro, .corsa-carta p, .corsa-carta small { display: none; }
  .corsa-scelte { grid-template-columns: 1fr 1fr; }
  .corsa-carta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 8px 10px; }
  .corsa-carta h3 { grid-column: 1 / -1; }
  .corsa-carta .tavoletta { margin-top: 0; align-self: center; }
}
/* la MAPPA ha 5 pulsanti dal 14-10 (anche ∞): sul telefono in verticale «VIA!» va a capo da solo → largo quanto la riga */
@media (max-width: 460px) { #v-mappa .riga-pulsanti #b-via { flex: 1 1 100%; } }
/* ---- le REGOLE DELLA SETTIMANA (js/settimane.js): chip con la tipologia (colore + kanji), nome e effetto */
.corsa-regole { display: flex; flex-direction: column; gap: 4px; }
.cr-tit { font: 400 13px/1.2 var(--font); letter-spacing: .8px; color: var(--lacca); }
.cr-regola { --c-tipo: #c0262d; display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; align-items: center; padding: 4px 8px;
  border: 2px solid var(--inchiostro); border-radius: 8px; background: #fffaf0; color: var(--inchiostro); text-align: left; }
.cr-regola[data-tipo="P"] { --c-tipo: #2f8a4a; }
.cr-regola[data-tipo="E"] { --c-tipo: #6a3ab4; }
.cr-regola[data-tipo="S"] { --c-tipo: #c99a0a; }
.cr-regola i { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--inchiostro);
  background: var(--c-tipo); color: #fff; font: 900 13px/1 var(--cjk, sans-serif); font-style: normal; }
.cr-regola b { font: 400 15px/1.1 var(--font); letter-spacing: .5px; }
.cr-regola small { font-size: 11.5px; line-height: 1.25; color: #6a5a4a; }
/* il riquadro prima del 3-2-1 (sopra la partita ferma, sotto le schermate) */
.regole-sett { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(12,6,28,.6); animation: rs-entra .35s ease-out; cursor: pointer; }
.regole-sett[hidden] { display: none; }
@keyframes rs-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.rs-pannello { width: min(640px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: 4px solid var(--inchiostro); border-radius: 12px; background: linear-gradient(#fffaf0, #f4e6c4); box-shadow: 6px 6px 0 rgba(0,0,0,.45); color: var(--inchiostro); }
.rs-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px;
  font: 400 clamp(18px, 2.4vw, 24px)/1 var(--font); letter-spacing: 1.2px; color: var(--lacca); -webkit-text-stroke: .6px var(--inchiostro); paint-order: stroke fill; }
.rs-stelle { color: #e8a80a; letter-spacing: 2px; -webkit-text-stroke: 0; }
.rs-regole { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .rs-regole { grid-template-columns: 1fr; } }
.rs-regole .cr-regola { grid-template-columns: 34px 1fr; padding: 8px 10px; transition: transform .2s, box-shadow .2s; }
.rs-regole .cr-regola i { width: 34px; height: 34px; font-size: 17px; }
.rs-regole .cr-regola b { font-size: clamp(16px, 2vw, 20px); }
.rs-regole .cr-regola small { font-size: 13px; }
.rs-regole .cr-regola.parla { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--oro), 4px 4px 0 rgba(0,0,0,.35); }
.rs-maestro { display: flex; align-items: center; gap: 12px; }
.rs-maestro .hanko { flex: none; width: 46px; height: 46px; font-size: 22px; }
.rs-maestro p { position: relative; flex: 1; margin: 0; padding: 10px 12px; border: 3px solid var(--inchiostro); border-radius: 12px; background: #fff;
  font-size: 15px; line-height: 1.35; font-style: italic; min-height: 2.7em; }
.rs-maestro p::before { content: ""; position: absolute; left: -11px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: var(--inchiostro); border-left: 0; }
.rs-salta { text-align: center; color: #8a6a4a; font-size: 12px; }
@media (max-height: 520px) {
  .rs-pannello { gap: 6px; padding: 10px 12px; }
  .rs-regole .cr-regola small { font-size: 12px; }
  .rs-maestro p { font-size: 13.5px; padding: 6px 10px; min-height: 0; }
  .rs-maestro .hanko { width: 36px; height: 36px; font-size: 18px; }
}
/* nella fine della corsa: le due regole della corsa giocata */
.fine-regole { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.fine-regole .cr-regola small { display: none; }

/* ---- le CLASSIFICHE */
.corsa-classifiche { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 3px solid var(--inchiostro); border-radius: 10px;
  background: #2a2238; color: #f4e6c4; box-shadow: 3px 3px 0 rgba(42,34,56,.7); }
.cl-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cl-testa h3 { margin: 0; font: 400 clamp(19px, 2.2vw, 24px)/1 var(--font); letter-spacing: 1.4px; color: var(--oro); -webkit-text-stroke: 1px var(--inchiostro); paint-order: stroke fill; }
.cl-schede { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-scheda { padding: 5px 10px; border: 2px solid #f4e6c4; border-radius: 6px; background: transparent; color: #f4e6c4; cursor: pointer;
  font: 400 clamp(13px, 1.5vw, 15px)/1 var(--font); letter-spacing: .8px; }
.cl-scheda.attiva { background: var(--oro); border-color: var(--oro); color: var(--inchiostro); }
/* il corpo che cambia: mentre arriva la scheda nuova resta quella di prima, attenuata (niente «refresh») */
.cl-corpo { transition: opacity .15s; }
.cl-corpo.carica { opacity: .45; }
.cl-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.cl-lista li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.06); font-size: 14px; }
.cl-lista li:nth-child(-n+3) b { color: var(--oro); }
.cl-lista li.mio { background: rgba(255,213,107,.25); box-shadow: inset 0 0 0 2px var(--oro); }
.cl-lista b { font: 400 17px/1 var(--font); }
.cl-lista span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cl-lista small { color: #c9b8a0; font-size: 12px; }
.cl-lista em { font: 400 16px/1 var(--font); font-style: normal; letter-spacing: .5px; }
.cl-vuoto, .cl-stato { margin: 0; font-size: 13px; line-height: 1.4; color: #c9b8a0; }
.cl-stato b { color: #f4e6c4; }
.cl-stato .tavoletta { margin-left: 6px; vertical-align: middle; }
.corsa-ninja { margin: 0 6px; font-size: 13.5px; line-height: 1.35; color: #6a5a4a; }
.corsa-ninja b { color: var(--inchiostro); }