/* ============================================================
   Burraco — Segnapunti
   Foglio di stile unico, mobile-first, nessuna dipendenza.
   ============================================================ */

/* ---------- 1. Variabili e tema ---------- */
:root {
  --verde:        #0b3d2c;
  --accento:      #16a06a;
  --accento-scuro:#0e7a50;
  --rosso:        #c0392b;
  --oro:          #d4a017;

  --bg:        #f2f5f3;
  --superficie:#ffffff;
  --superficie-2:#e9efec;
  --testo:     #12211b;
  --testo-soft:#5d6f67;
  --bordo:     #d8e2dd;

  --raggio:    18px;
  --raggio-sm: 12px;
  --ombra:     0 2px 10px rgba(11, 61, 44, .08);
  --ombra-alta:0 -8px 30px rgba(0, 0, 0, .18);

  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #101714;
    --superficie: #18211d;
    --superficie-2:#212c27;
    --testo:      #eaf2ee;
    --testo-soft: #9db0a7;
    --bordo:      #2b3833;
    --ombra:      0 2px 10px rgba(0, 0, 0, .35);
  }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

h1, h2 { margin: 0; font-weight: 700; letter-spacing: -.02em; }

input, button { font: inherit; color: inherit; }

.view[hidden], [hidden] { display: none !important; }

/* ---------- 3. Bottoni ---------- */
.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--raggio);
  padding: 16px 18px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(.98); }

.btn-xl { padding: 20px 18px; font-size: 19px; min-height: 62px; }

.btn-primary { background: var(--accento); color: #fff; box-shadow: 0 4px 14px rgba(22,160,106,.28); }
.btn-primary:active { background: var(--accento-scuro); }

.btn-danger { background: transparent; color: var(--rosso); border: 2px solid var(--rosso); }

.btn-ghost { background: transparent; color: var(--testo-soft); font-weight: 500; padding: 12px 18px; }

.btn-list {
  background: var(--superficie-2);
  color: var(--testo);
  text-align: left;
  margin-bottom: 10px;
}

.btn-sign {
  background: var(--superficie-2);
  color: var(--testo-soft);
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--raggio-sm);
}

.icon-btn {
  background: transparent;
  border: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
}
.icon-btn svg { fill: currentColor; }

/* ---------- 4. Campi ---------- */
.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--testo-soft);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  background: var(--superficie-2);
  border: 2px solid transparent;
  border-radius: var(--raggio-sm);
  padding: 15px 14px;
  font-size: 18px;
}
.field input:focus { outline: 0; border-color: var(--accento); background: var(--superficie); }
.hint { display: block; margin-top: 6px; font-size: 13px; color: var(--testo-soft); }

/* ---------- 5. Schermata nuova partita ---------- */
.setup-wrap {
  min-height: 100dvh;
  padding: 32px 20px calc(28px + var(--safe-b));
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
/* Centrato quando c'è spazio, ma senza tagliare l'alto sugli schermi piccoli */
.setup-head { text-align: center; margin: auto auto 26px; }
#form-setup { margin-bottom: auto; }
.logo {
  font-size: 40px;
  line-height: 1;
  color: var(--verde);
  margin-bottom: 10px;
}
@media (prefers-color-scheme: dark) { .logo { color: var(--accento); } }
.logo span { color: var(--rosso); }
.setup-head h1 { font-size: 34px; }
.tagline { margin: 6px 0 0; color: var(--testo-soft); font-size: 15px; }

.card {
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: 22px 20px;
  box-shadow: var(--ombra);
}
#btn-resume { margin-top: 14px; }

/* ---------- 6. Schermata partita ---------- */
#view-game {
  min-height: 100dvh;
  padding-bottom: calc(104px + var(--safe-b));
}

.topbar {
  background: var(--verde);
  color: #fff;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.topbar-title { display: block; font-size: 18px; font-weight: 700; }
.topbar-sub { display: block; font-size: 13px; opacity: .75; }

.banner {
  margin: 14px 16px 0;
  background: var(--oro);
  color: #2b1d00;
  border-radius: var(--raggio-sm);
  padding: 13px 16px;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}
.team {
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: 16px 10px 14px;
  text-align: center;
  box-shadow: var(--ombra);
  border: 2px solid transparent;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team.leader { border-color: var(--accento); }
.team.winner { border-color: var(--oro); }
.team-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--testo-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.team-score {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.team-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--accento);
  min-height: 18px;
  margin-top: 2px;
}
.team.winner .team-tag { color: var(--oro); }

.status {
  margin: 0 16px;
  text-align: center;
  color: var(--testo-soft);
  font-size: 14px;
}

/* ---------- 7. Storico ---------- */
.history { padding: 20px 16px 0; }
.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.history-head h2 { font-size: 16px; }
.history-hint { font-size: 13px; color: var(--testo-soft); }

.hand-list { list-style: none; margin: 0; padding: 0; }

.hand-row {
  width: 100%;
  display: grid;
  grid-template-columns: 62px 1fr 1fr 22px;
  align-items: center;
  gap: 6px;
  background: var(--superficie);
  border: 0;
  border-radius: var(--raggio-sm);
  padding: 14px 12px;
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--ombra);
}
.hand-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--testo-soft);
}
.hand-cell { text-align: right; }
.hand-pts {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hand-run {
  display: block;
  font-size: 12px;
  color: var(--testo-soft);
  font-variant-numeric: tabular-nums;
}
.hand-edit { color: var(--testo-soft); font-size: 15px; text-align: center; }

.empty {
  text-align: center;
  color: var(--testo-soft);
  font-size: 14px;
  padding: 18px 10px 4px;
  line-height: 1.5;
}

/* ---------- 8. Barra inferiore ---------- */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.bottom-bar .btn { max-width: 520px; margin: 0 auto; }

/* ---------- 9. Fogli (overlay) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 15, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
  animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet {
  background: var(--superficie);
  width: 100%;
  max-width: 520px;
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  padding: 10px 20px calc(20px + var(--safe-b));
  box-shadow: var(--ombra-alta);
  max-height: 92dvh;
  overflow-y: auto;
  animation: up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up { from { transform: translateY(30px) } to { transform: none } }

.sheet-grip {
  width: 42px; height: 4px;
  border-radius: 2px;
  background: var(--bordo);
  margin: 4px auto 16px;
}
.sheet h2 { font-size: 20px; margin-bottom: 16px; }
.sheet .btn + .btn { margin-top: 10px; }
.sheet form .btn { margin-top: 10px; }

.sheet-error {
  color: var(--rosso);
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 0;
  text-align: center;
}
.confirm-text { color: var(--testo-soft); font-size: 15px; line-height: 1.5; margin: 0 0 18px; }

.sheet-win { text-align: center; }
.win-salvata {
  font-size: 13px;
  color: var(--testo-soft);
  margin: -6px 0 18px;
}
.btn-scarta {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--rosso);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 0 4px;
  margin-top: 4px;
  cursor: pointer;
}
.win-badge { font-size: 54px; margin: 6px 0 4px; }
.sheet-win h2 { font-size: 26px; }

/* L'icona del tasto "cancella" è disegnata, non un carattere:
   così si vede uguale su ogni telefono. */
.keypad .tasto-funz svg { display: block; margin: 0 auto; }

/* ---------- 10. Campi del punteggio della mano ---------- */
.score-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.score-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.score-input-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--testo-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  overflow-wrap: anywhere;
}
.score-cell {
  background: var(--superficie-2);
  border: 2px solid transparent;
  border-radius: var(--raggio-sm);
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  display: block;
  width: 100%;
}
.score-cell.attiva { border-color: var(--accento); background: var(--superficie); }
.cell-label {
  display: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--testo-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.score-value {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.score-value.vuoto { color: var(--bordo); }
.score-preview {
  font-size: 12px;
  font-weight: 600;
  color: var(--testo-soft);
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-height: 15px;
}
.score-preview.traguardo { color: var(--oro); }

/* Con il punteggio dettagliato compaiono due campi per squadra */
.dettaglio .cell-label { display: block; }
.dettaglio .score-value { font-size: 26px; }
.score-inputs:not(.dettaglio) .riga-base { display: none; }

/* ---------- 11. Tastierino ---------- */
.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 12px;
}
.keypad button {
  background: var(--superficie-2);
  border: 0;
  border-radius: var(--raggio-sm);
  min-height: 52px;
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s ease, transform .06s ease;
}
.keypad button:active { background: var(--bordo); transform: scale(.96); }
.keypad .tasto-funz { font-size: 22px; color: var(--testo-soft); }
.keypad .tasto-funz svg { display: block; margin: 0 auto; }
.keypad .tasto-zero { grid-column: span 3; }
.keypad .tasto-avanti {
  grid-row: span 2;
  background: var(--verde);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.keypad .tasto-avanti:active { background: var(--accento-scuro); }

.keypad button:focus-visible,
.score-cell:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.link-btn:focus-visible,
.chip-tempo:focus-visible,
.hand-row:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* ---------- 12. Interruttore e selettori (schermata iniziale) ---------- */
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-testo { flex: 1; font-size: 15px; font-weight: 600; }
.switch-testo small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--testo-soft);
  margin-top: 2px;
  line-height: 1.35;
}
.switch-leva {
  flex: none;
  width: 50px; height: 30px;
  border-radius: 15px;
  background: var(--bordo);
  position: relative;
  transition: background .18s ease;
}
.switch-leva::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.switch input:checked + .switch-leva { background: var(--accento); }
.switch input:checked + .switch-leva::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-leva { outline: 3px solid var(--accento); outline-offset: 2px; }

/* Le colonne seguono il numero di pulsanti: due o tre, senza vuoti a destra */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: var(--superficie-2);
  border-radius: var(--raggio-sm);
  padding: 4px;
}
.segmented button {
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 11px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--testo-soft);
  cursor: pointer;
}
.segmented button.attivo { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra); }

#durata-wrap { margin-top: 12px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chips button {
  border: 2px solid var(--bordo);
  background: transparent;
  border-radius: 10px;
  padding: 10px 2px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.chips button.attivo { border-color: var(--accento); color: var(--accento); }
.durata-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--testo-soft);
}
.durata-custom input {
  width: 80px;
  background: var(--superficie-2);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 16px;
  text-align: center;
}
.durata-custom input:focus { outline: 0; border-color: var(--accento); }

/* ---------- 13. Tempo sul tabellone ---------- */
.topbar-azioni { display: flex; align-items: center; gap: 4px; }
.chip-tempo {
  background: rgba(255,255,255,.14);
  border: 0;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.chip-tempo.avviso { background: var(--oro); color: #2b1d00; }
.chip-tempo.scaduto { background: var(--rosso); color: #fff; }
.chip-tempo.pausa { opacity: .55; }

/* ---------- 14. Parziali nello storico ---------- */
.history-azioni { display: flex; align-items: baseline; gap: 12px; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accento);
  cursor: pointer;
}
.hand-det {
  display: block;
  font-size: 11px;
  color: var(--testo-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- 15. Schermata Regole ---------- */
#view-rules { min-height: 100dvh; padding-bottom: calc(28px + var(--safe-b)); }
#view-rules .topbar { justify-content: flex-start; gap: 4px; padding-left: 8px; }
#view-rules .topbar-info { flex: 1; }

.rules-wrap { max-width: 640px; margin: 0 auto; padding: 16px; }

.cerca {
  width: 100%;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: var(--raggio-sm);
  padding: 14px 14px;
  font-size: 16px;
  margin-bottom: 14px;
  box-shadow: var(--ombra);
  -webkit-appearance: none;
  appearance: none;
}
.cerca:focus { outline: 0; border-color: var(--accento); }

.regola {
  background: var(--superficie);
  border-radius: var(--raggio-sm);
  margin-bottom: 8px;
  box-shadow: var(--ombra);
  overflow: hidden;
}
.regola > summary {
  padding: 16px 42px 16px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
}
.regola > summary::-webkit-details-marker { display: none; }
.regola > summary::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--testo-soft);
  border-bottom: 2.5px solid var(--testo-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.regola[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.regola[open] > summary { color: var(--accento); }

.regola-corpo {
  padding: 0 16px 16px;
  font-size: 15px;
  line-height: 1.55;
}
.regola-corpo p { margin: 0 0 10px; }
.regola-corpo ul, .regola-corpo ol { margin: 0 0 10px; padding-left: 20px; }
.regola-corpo li { margin-bottom: 6px; }
.regola-corpo .q {
  font-weight: 700;
  color: var(--testo);
  margin-top: 16px;
  margin-bottom: 4px;
}
.regola-corpo .q:first-child { margin-top: 0; }
.regola-corpo .fonte {
  font-size: 12px;
  color: var(--testo-soft);
  border-top: 1px solid var(--bordo);
  padding-top: 10px;
  margin-bottom: 0;
}
.tab { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.tab td {
  padding: 9px 0;
  border-bottom: 1px solid var(--bordo);
  vertical-align: top;
}
.tab td:last-child {
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 12px;
}
.tab td small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--testo-soft);
  line-height: 1.35;
}

/* ---------- 16. Segno negativo bene in evidenza ---------- */
.keypad .tasto-funz.acceso {
  background: var(--rosso);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .22);
}
.keypad .tasto-funz.acceso:active { background: #a5312a; }
.score-value.negativo { color: var(--rosso); }
.hand-pts.negativo { color: var(--rosso); }

/* ---------- 17. Invito all'installazione ---------- */
.install {
  position: relative;
  margin-top: 14px;
  padding: 16px 40px 16px 16px;
  background: var(--superficie);
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio);
}
.install-titolo { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.install-testo { margin: 0; font-size: 14px; line-height: 1.5; color: var(--testo-soft); }
.install .btn-primary { margin-top: 12px; }
.install .link-btn { margin-top: 10px; }
.install-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  color: var(--testo-soft);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}
.istruzioni { font-size: 15px; line-height: 1.55; }
.istruzioni p { margin: 0 0 8px; }
.istruzioni ol { margin: 0 0 10px; padding-left: 20px; }
.istruzioni li { margin-bottom: 8px; }
.ico-share {
  vertical-align: -3px;
  color: #0a84ff;
  background: var(--superficie-2);
  border-radius: 5px;
  padding: 1px;
}
.hint-inline {
  display: block;
  font-size: 13px;
  color: var(--testo-soft);
  line-height: 1.45;
  margin-top: 4px;
}

/* ============================================================
   14. Modalità a tre giocatori
   Ogni mano due giocano in coppia contro uno; i punti della
   coppia si dividono a metà, quindi possono comparire mezzi punti.
   ============================================================ */

/* A due squadre la testata non deve cambiare nulla: display:contents
   lascia nome e tag esattamente dove stavano prima. */
.team-testa { display: contents; }

.scoreboard.tre { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px 4px; }
.scoreboard.tre .team {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 12px 16px;
  text-align: left;
}
.scoreboard.tre .team-testa { display: block; min-width: 0; }
.scoreboard.tre .team-name {
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--testo);
}
.scoreboard.tre .team-tag { margin-top: 1px; min-height: 0; }
.scoreboard.tre .team-score { font-size: 40px; margin-top: 0; }

/* Il mezzo punto non deve allargare la cifra: resta un apice discreto */
.mezzo { font-size: .58em; font-weight: 700; letter-spacing: 0; }

/* Storico a tre colonne */
.hand-row.tre { grid-template-columns: 66px 1fr 1fr 1fr 18px; gap: 4px; padding: 12px 10px; }
.hand-row.tre .hand-pts { font-size: 16px; }
.hand-row.tre .hand-run { font-size: 11px; }
.hand-solo {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--testo-soft);
  overflow-wrap: anywhere;
}
.hand-legend {
  display: grid;
  grid-template-columns: 66px 1fr 1fr 1fr 18px;
  gap: 4px;
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--testo-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hand-legend span { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-legend span:first-child { text-align: left; }

/* Chi ha giocato da solo */
.solo-picker { margin-bottom: 14px; }
.solo-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--testo-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.chips-solo { grid-template-columns: repeat(3, 1fr); }
.chips-solo button {
  font-size: 14px;
  font-variant-numeric: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Foglio mano: due gruppi impilati (solista e coppia) invece di due colonne */
.score-inputs.tre { grid-template-columns: 1fr; gap: 10px; }
.score-inputs.tre .score-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.score-inputs.tre .score-input-name { grid-column: 1 / -1; text-align: left; }
.score-inputs.tre .score-preview { grid-column: 1 / -1; text-align: left; line-height: 1.45; }
.score-inputs.tre:not(.dettaglio) .score-cell { grid-column: 1 / -1; }
.quota { font-weight: 700; color: var(--testo); }

/* ---------- 12. Nomi già usati, sotto i campi squadra ---------- */
.chips-nomi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip-nome {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  color: var(--testo-soft);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-nome:active { background: var(--superficie-2); }
/* Il tocco lungo apre le opzioni: niente menu di selezione del testo sopra */
.chip-nome { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- 13. Righe di collegamento sulla schermata iniziale ---------- */
.righe-extra { margin-top: 14px; }
.riga-link {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  background: var(--superficie);
  border: 0;
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 16px 18px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.riga-link-testo { font-size: 16px; font-weight: 600; color: var(--testo); }
.riga-link-n { font-size: 15px; color: var(--testo-soft); font-variant-numeric: tabular-nums; }
.riga-link-chev { color: var(--testo-soft); opacity: .55; font-size: 20px; line-height: 1; }

/* ---------- 14. Archivio delle partite ---------- */
.archivio { padding: 16px 16px 0; }
.arch-mese {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 4px 8px;
}
.arch-mese h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--testo-soft);
  margin: 0;
}
.arch-mese span { font-size: 12px; color: var(--testo-soft); }
.archivio > .arch-mese:first-child { margin-top: 4px; }
.arch-lista { list-style: none; margin: 0; padding: 0; }
.arch-riga {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 12px;
  align-items: center;
  gap: 12px;
  background: var(--superficie);
  border: 0;
  padding: 13px 14px 13px 16px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.arch-lista .swipe-wrap {
  border-radius: var(--raggio-sm);
  box-shadow: var(--ombra);
  margin-bottom: 8px;
}
.arch-nomi { min-width: 0; display: block; }
.arch-nome {
  display: block;
  font-size: 16px;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arch-nome.vince { font-weight: 700; }
.arch-nome.soft { font-size: 14px; color: var(--testo-soft); }
.arch-meta {
  display: block;
  font-size: 12px;
  color: var(--testo-soft);
  margin-top: 4px;
}
.arch-punti { text-align: right; }
.arch-p {
  display: block;
  font-size: 14px;
  color: var(--testo-soft);
  font-variant-numeric: tabular-nums;
}
.arch-p.primo { font-size: 16px; font-weight: 700; color: var(--verde); }
.arch-chev { color: var(--testo-soft); opacity: .55; font-size: 18px; line-height: 1; }

/* Le mani di una partita archiviata si leggono, non si toccano */
.hand-row.statica { cursor: default; }

@media (prefers-color-scheme: dark) {
  .arch-p.primo { color: var(--accento); }
}

/* ---------- 15. Statistiche ---------- */
.stats { padding: 16px 16px 0; }
.stat-titolo {
  font-size: 15px;
  font-weight: 700;
  color: var(--testo);
  margin: 20px 4px 10px;
}
.stat-card {
  background: var(--superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 18px 20px 20px;
}
.stat-card.elenco { padding: 0; overflow: hidden; }
.stat-divisore { height: 1px; background: var(--bordo); margin-left: 20px; }
.stat-etichetta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--testo-soft);
  margin-bottom: 12px;
}
.stat-sotto { font-size: 13px; color: var(--testo-soft); margin-top: 2px; }
.stat-sotto.centro { text-align: center; margin-top: 10px; }
.stat-nota {
  font-size: 12px;
  line-height: 1.5;
  color: var(--testo-soft);
  text-align: center;
  padding: 18px 12px 8px;
  margin: 0;
}

/* Testa a testa */
.tt-riga {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 16px;
}
.tt-lato.destra { text-align: right; }
.tt-nome {
  font-size: 13px;
  color: var(--testo-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-valore {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--testo-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.tt-lato.forte .tt-valore { color: var(--verde); }
.tt-sep { width: 1px; height: 44px; background: var(--bordo); }
.tt-barra {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--superficie-2);
  margin-top: 14px;
}
.tt-barra-piena { background: var(--accento); height: 8px; }

/* Chi vince, e i record */
.stat-riga {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}
.stat-riga.tocca { grid-template-columns: 1fr auto 18px; cursor: pointer; }
.stat-sx { min-width: 0; }
.stat-nome {
  font-size: 16px;
  font-weight: 600;
  color: var(--testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-barra-riga { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.stat-barra {
  width: 96px;
  height: 5px;
  border-radius: 3px;
  background: var(--superficie-2);
  flex: 0 0 auto;
}
.stat-barra-piena { height: 5px; border-radius: 3px; background: var(--accento); }
.stat-barra-piena.debole { background: var(--bordo); }
.stat-conto { font-size: 12px; color: var(--testo-soft); }
.stat-perc {
  font-size: 20px;
  font-weight: 700;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.stat-perc.debole { color: var(--testo-soft); }
.stat-valore {
  font-size: 18px;
  font-weight: 700;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.stat-matita { color: var(--testo-soft); font-size: 15px; text-align: center; }

/* Un record non ancora stabilito: si vede che c'è, e si legge perché è vuoto */
.stat-riga.vuota .stat-nome { color: var(--testo-soft); font-weight: 500; }
.stat-valore.vuoto { color: var(--testo-soft); opacity: .5; font-weight: 700; }

/* Avviso sui nomi che si somigliano */
.stat-avviso {
  background: #fbf7ea;
  border: 1px solid #ecdcae;
  border-radius: var(--raggio);
  padding: 16px 18px;
  margin-bottom: 4px;
}
.stat-avviso-testo {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #5a4a1c;
}
.stat-avviso-testo strong { color: var(--testo); }
.stat-avviso-azioni { display: flex; gap: 9px; flex-wrap: wrap; }
.btn-avviso {
  background: var(--superficie);
  border: 1px solid #e2d5ae;
  border-radius: 11px;
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #5a4a1c;
  cursor: pointer;
}
.btn-avviso.primario { background: var(--oro); border-color: var(--oro); color: #fff; font-weight: 700; }

.topbar-link {
  color: #fff;
  font-size: 15px;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}

.rename-nota {
  background: #fbf7ea;
  border: 1px solid #ecdcae;
  border-radius: var(--raggio-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #5a4a1c;
  margin: 12px 0 0;
}

@media (prefers-color-scheme: dark) {
  .tt-lato.forte .tt-valore,
  .stat-perc,
  .stat-valore { color: var(--accento); }
  .stat-avviso { background: #272113; border-color: #524420; }
  .stat-avviso-testo { color: #dcc98f; }
  .btn-avviso { background: var(--superficie); border-color: #524420; color: #dcc98f; }
  .btn-avviso.primario { background: var(--oro); border-color: var(--oro); color: #1a1408; }
  .rename-nota { background: #272113; border-color: #524420; color: #dcc98f; }
}

/* ---------- 16. Ritocchi dell'archivio ---------- */
.archivio-piede { padding: 8px 16px 24px; }
.archivio-nota {
  font-size: 12px;
  line-height: 1.5;
  color: var(--testo-soft);
  text-align: center;
  margin: 12px 8px 4px;
}

/* La mano in cui si è chiusa la partita */
.hand-row.chiusura { background: #fbf7ea; }
.hand-chiusura {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a37b0d;
  margin-top: 2px;
}
.hand-pts.oro { color: #a37b0d; }

.btn-list-danger { color: var(--rosso); }
.sheet-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--testo-soft);
  text-align: center;
  margin: 10px 8px 0;
}

@media (prefers-color-scheme: dark) {
  .hand-row.chiusura { background: #272113; }
  .hand-chiusura, .hand-pts.oro { color: #dcb44f; }
}

/* ---------- 17. Swipe verso sinistra ---------- */
.swipe-wrap {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;            /* lo scorrimento verticale resta al browser */
}
.swipe-content {
  position: relative;
  z-index: 1;
  background: var(--superficie);
  transition: transform .18s ease;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.swipe-content.trascina { transition: none; }
.swipe-azione {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.swipe-azione.elimina { background: var(--rosso); }
.swipe-azione.rinomina { background: var(--accento-scuro); width: 96px; }
.stat-card.elenco .swipe-wrap { border-radius: 0; }