/* Calcolatore probabilità — stili del programma 01.
   Base comune in ../comune/stile.css (colori, carte, componenti). */

:root {
  --larghezza-max: 1200px;
  --su-panno: var(--testo-panno);
  --su-panno-tenue: var(--tenue-panno);
  --nero: #111111;
  --veloce: 160ms;
  --medio: 260ms;
}

.contenitore { max-width: var(--larghezza-max); }

[hidden] { display: none !important; }

textarea { font: inherit; color: inherit; }

.tenue { color: var(--tenue); }
.piccolo { font-size: 13px; }
.giallo { color: var(--accento); }
/* L'EV ha sempre il segno: niente verde/rosso, si confonderebbero con i semi */
.positivo { color: var(--accento); }
.negativo { color: var(--testo); }

p { margin: 0; }
h1, h2, h3 { margin: 0; }

/* ---------- Testata ---------- */
.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 4px;
}
.marchio {
  font-size: 18px;
  line-height: 1.2;
}
.logo .logo-prima { color: var(--testo); }
header.testata .logo .logo-prima { color: #FFFFFF; }
.titolo {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.bottone-secondario.piccolo,
.bottone.piccolo {
  padding: 8px 14px;
  font-size: 14px;
  min-height: 40px;
}
.bottone-secondario { color: var(--testo); }
.bottone-secondario:hover:not(:disabled) { border-color: var(--tenue); }
.bottone-secondario:disabled { opacity: 0.4; cursor: default; }

/* ---------- Impianto ---------- */
.impianto {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}
.colonna {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}


.solo-telefono { display: none; }
@media (max-width: 899px) {
  .solo-computer { display: none !important; }
  .solo-telefono { display: inline-flex; }
}

@media (min-width: 900px) {
  .titolo { font-size: 28px; }
  .impianto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .colonna-numeri {
    position: sticky;
    top: 16px;
  }
}

/* ---------- Zone e slot ---------- */
.zona { display: flex; flex-direction: column; gap: 12px; }
.zona-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.strada {
  font-size: 13px;
  font-weight: 700;
  color: var(--accento);
}

.slot-fila {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.slot {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 8px;
  line-height: 0;
  transition: transform var(--veloce) ease;
}
.slot:hover { transform: translateY(-2px); }
.slot .carta {
  width: 52px;
  height: 72px;
  font-size: 32px;
}
.slot .carta .seme { font-size: 29px; }
.slot .carta.vuota { font-size: 24px; font-weight: 500; }
.slot.attivo .carta {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(11, 107, 58, 0.12);
}
.slot.attivo .carta.vuota { border-color: var(--accento); color: var(--accento); }
.slot-turn { margin-left: 8px; }

.carta { gap: 2px; }
.carta .valore { letter-spacing: -0.04em; }
.carta.entra { animation: entra var(--veloce) ease-out; }
@keyframes entra {
  from { transform: scale(0.82); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

@media (max-width: 380px) {
  .slot-fila { gap: 6px; }
  .slot .carta { width: 48px; height: 66px; font-size: 29px; }
  .slot .carta .seme { font-size: 26px; }
  .slot-turn { margin-left: 4px; }
}

/* Inserimento da tastiera (solo computer) */
.tastiera {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
}
.tastiera-etichetta { font-size: 13px; color: var(--tenue); }
.campo-piccolo { padding: 8px 12px; font-size: 15px; max-width: 220px; }
.errore {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--perde);
}
.errore:empty { display: none; }

/* ---------- Avversari ---------- */
.avversari { display: flex; flex-direction: column; gap: 12px; }
.segmenti {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border-radius: 999px;
  background: var(--fondo);
  border: 1px solid var(--linea);
}
.segmento {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 36px;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  color: var(--tenue);
  transition: background var(--veloce), color var(--veloce);
}
.segmento[aria-pressed='true'] {
  background: var(--superficie);
  color: var(--testo);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.pannello-tipo { display: flex; flex-direction: column; gap: 10px; }
.campo-etichetta { font-size: 13px; color: var(--tenue); }
.campo-etichetta small { font-size: 12px; opacity: 0.8; }
.campo-range {
  resize: vertical;
  min-height: 64px;
  font-size: 14px;
  line-height: 1.4;
}
.campo[aria-invalid='true'] { border-color: var(--perde); }
.conta-range { font-size: 13px; color: var(--tenue); }
.conta-range.errore { color: var(--perde); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 12px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: var(--testo);
  transition: background var(--veloce), color var(--veloce), border-color var(--veloce);
}
.chip:hover { border-color: var(--tenue); }
.chip[aria-pressed='true'] {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
}
.link-piccolo {
  border: 0;
  background: none;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}
.aggiungi { align-self: flex-start; }

/* ---------- Selettore ---------- */
.selettore {
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: var(--spazio);
}
.selettore-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.selettore-dove { font-size: 14px; font-weight: 700; margin-top: 2px; }
.selettore-azioni { display: flex; gap: 8px; flex: none; }
.selettore-azioni button { white-space: nowrap; }
.griglia-carte {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 4px;
}
.carta-scelta {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 6px;
  line-height: 0;
  min-width: 0;
  transition: transform var(--veloce), opacity var(--veloce);
}
.carta-scelta .carta {
  width: 100%;
  height: 48px;
  font-size: 19px;
  border-radius: 5px;
  box-shadow: none;
}
.carta-scelta .carta .seme { font-size: 17px; }
.carta-scelta:hover:not(:disabled) { transform: translateY(-2px); }
.carta-scelta:disabled { opacity: 0.22; cursor: not-allowed; }
.carta-scelta:disabled .carta { box-shadow: none; background: var(--superficie); }
.carta-scelta.scelta .carta { outline: 2px solid var(--accento); outline-offset: 2px; }

@media (max-width: 899px) {
  .selettore {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding: 16px 10px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform var(--medio) cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear var(--medio);
  }
  .selettore.aperto {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--medio) cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .selettore-testa { padding: 0 6px; }
  .griglia-carte { gap: 3px; }
  .carta-scelta .carta { height: 50px; font-size: 18px; }
  .carta-scelta .carta .seme { font-size: 16px; }
  .velo {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.35);
    animation: appare var(--medio) ease;
  }
  body.foglio-aperto { overflow: hidden; }
}
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Risultato: panno verde, carte e equity in bianco ---------- */
.risultato {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spazio);
  color: var(--su-panno);
}
.risultato .etichetta { color: var(--su-panno-tenue); }
.risultato-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.distintivo {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--su-panno);
  border: 1px solid var(--su-panno);
}
.distintivo.simulato { border-style: dashed; color: var(--su-panno-tenue); border-color: var(--su-panno-tenue); }

.panno-mani { display: flex; flex-direction: column; gap: 8px; }
.panno-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panno-coppia { display: flex; gap: 4px; }
.panno-avversari { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.panno-vs { font-size: 13px; font-weight: 800; color: var(--su-panno-tenue); text-transform: uppercase; }
.panno-range {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px dashed var(--su-panno-tenue);
}
.panno-board { display: flex; gap: 4px; }
.panno-mani .carta.vuota { border-color: var(--su-panno-tenue); }

.equity-numero {
  font-size: clamp(64px, 19vw, 104px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--giallo);
  transition: opacity var(--veloce);
}
.risultato.vuoto .equity-numero { color: var(--su-panno-tenue); opacity: 0.5; }
.risultato.in-calcolo .equity-numero { opacity: 0.5; }
.messaggio { font-size: 15px; color: var(--su-panno-tenue); min-height: 1.5em; }
.messaggio:empty { display: none; }

/* Barra vinci/pareggi/perdi: bianco, bianco tenue, nero (sul verde) */
.barra {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.barra span { height: 100%; width: 0; transition: width var(--medio) ease; }
.barra-vince { background: var(--su-panno); }
.barra-pari { background: rgba(255, 255, 255, 0.45); }
.barra-perde { background: var(--nero); }

.esiti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}
.esiti dt { font-size: 12px; color: var(--su-panno-tenue); font-weight: 700; }
.esiti dd { margin: 0; font-size: 18px; font-weight: 800; }
.esiti dt::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: 1px;
}
.esiti div:nth-child(1) dt::before { background: var(--su-panno); }
.esiti div:nth-child(2) dt::before { background: rgba(255, 255, 255, 0.45); }
.esiti div:nth-child(3) dt::before { background: var(--nero); }
.nota-casi { font-size: 12px; color: var(--su-panno-tenue); }
.nota-casi:empty { display: none; }

/* ---------- Pannelli apribili ---------- */
.pannello { padding: 0; }
.pannello summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--spazio);
  min-height: 52px;
  cursor: pointer;
  list-style: none;
}
.pannello summary::-webkit-details-marker { display: none; }
.pannello summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tenue);
  border-bottom: 2px solid var(--tenue);
  transform: rotate(45deg);
  transition: transform var(--veloce);
  margin-left: 4px;
  flex: none;
}
.pannello[open] summary::after { transform: rotate(-135deg); }
.pannello summary .etichetta { margin-right: auto; }
.sommario-valore { font-size: 18px; font-weight: 800; color: var(--accento); }
.pannello-corpo {
  padding: 0 var(--spazio) var(--spazio);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: apri var(--medio) ease;
}
@keyframes apri { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Outs */
.gruppi-outs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gruppo-testa { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gruppo-nome { font-weight: 700; }
.gruppo-conta { font-weight: 800; color: var(--accento); }
.mini-carte { display: flex; flex-wrap: wrap; gap: 4px; }
.carta.mini { width: 28px; height: 38px; font-size: 18px; border-radius: 4px; gap: 0; }
.carta.mini .seme { font-size: 15px; }

.regola {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.regola-riga { display: flex; justify-content: space-between; gap: 8px; }
.regola-nome { color: var(--tenue); font-size: 14px; font-weight: 700; }
.regola-conto { font-weight: 800; }
.regola-barra { height: 6px; border-radius: 999px; background: var(--superficie); overflow: hidden; }
.regola-barra span { display: block; height: 100%; border-radius: 999px; transition: width var(--medio) ease; }
.regola-stima { background: var(--tenue); }
.regola-esatto { background: var(--accento); }

/* ---------- Pot odds ---------- */
.pot { display: flex; flex-direction: column; gap: 12px; }
.pot-campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pot-campi .campo { margin-top: 4px; font-size: 18px; font-weight: 700; }
.pot-campi .campo::-webkit-outer-spin-button,
.pot-campi .campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pot-campi .campo { -moz-appearance: textfield; appearance: textfield; }
.verdetto-zona { display: flex; flex-direction: column; gap: 10px; }
.verdetto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--raggio);
  font-size: clamp(36px, 11vw, 52px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.verdetto.nuovo { animation: entra var(--medio) ease-out; }
.verdetto.chiama { color: var(--su-accento); background: var(--nero); border: 2px solid var(--nero); }
.verdetto.passa { color: var(--nero); background: var(--fondo); border: 2px solid var(--nero); }
.verdetto-icona { font-size: 0.7em; }
.pot-numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}
.pot-numeri div { display: flex; flex-direction: column; }
.pot-numeri span { font-size: 12px; font-weight: 700; }
.pot-numeri strong { font-size: 20px; font-weight: 800; }

/* ---------- Spiegazione ---------- */
.passi {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.passo {
  counter-increment: passo;
  position: relative;
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.passo::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accento);
  color: var(--su-accento);
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.passo h3 { font-size: 16px; font-weight: 800; }
.passo p { color: var(--testo); font-size: 15px; }

/* ---------- Piede ---------- */
.piede { text-align: center; font-size: 13px; color: var(--tenue); padding-bottom: 32px; }

/* ---------- Riquadro "A cosa serve / Quando usarlo": sempre in alto, sempre aperto ---------- */
.a-cosa-serve {
  margin: 8px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--accento);
  border-radius: var(--raggio-piccolo);
  background: #F1F7F3;
  font-size: 15px;
  line-height: 1.45;
}
.a-cosa-serve p + p { margin-top: 6px; }
.a-cosa-serve b { color: var(--accento-scuro); }

/* Riga d'aiuto sotto un titolo o un campo */
.aiuto-campo {
  color: var(--tenue);
  font-size: 13px;
  line-height: 1.4;
}
.pot .aiuto-campo { margin: 6px 0 12px; }

/* Il perché, subito sotto il numero */
.perche {
  font-size: 15px;
  line-height: 1.45;
  color: var(--su-panno);
}
.perche:empty { display: none; }
.verdetto-zona .perche-pot {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
}
.pot-campi { align-items: end; }