/* Calcolatore tornei — stili propri. Colori e basi in ../comune/stile.css */

body {
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

/* Testata */
.testata {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 4px 0 14px;
}

.marca {
  margin: 0;
  font-size: 18px;
}

.testata h1 {
  margin: 0;
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}

.avviso {
  margin: 0;
  font-size: 12px;
  color: var(--tenue);
}

/* Schede in alto */
.schede-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.schede-nav button {
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tenue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  transition: background 0.18s, color 0.18s;
}

.schede-nav button[aria-selected='true'] {
  background: var(--accento);
  color: var(--su-accento);
}

.pannello {
  animation: entra 0.22s ease-out;
}

@keyframes entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Colonne: telefono una sola, computer due */
.colonne {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ingressi,
.risultati {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

/* Sul telefono il risultato viene prima */
.risultati {
  order: -1;
}

@media (min-width: 900px) {
  .colonne {
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: 20px;
    align-items: start;
  }
  .risultati {
    order: 0;
  }
  #pannello-spingi .colonne {
    grid-template-columns: minmax(300px, 360px) 1fr;
  }
}

.intro {
  margin: 0 0 12px;
  color: var(--tenue);
  font-size: 15px;
}

.scheda h2,
.scheda > .etichetta,
label.etichetta,
p.etichetta {
  display: block;
  margin: 0 0 8px;
}

.etichetta.piccola {
  margin-top: 12px;
}

.sotto {
  margin: 6px 0 0;
  color: var(--tenue);
  font-size: 14px;
}

.tenue {
  color: var(--tenue);
}

.piccola {
  font-size: 12px;
}

.errore {
  margin: 8px 0 0;
  color: var(--perde);
  font-size: 14px;
  font-weight: 600;
}

/* Il numero importante: dentro il panno verde, giallo */
.principale .numero-grande {
  margin: 2px 0 0;
  color: var(--giallo);
}

.principale .etichetta,
.principale .sotto,
.principale .tenue,
.principale .avanzamento {
  color: rgba(255, 255, 255, 0.88);
}

.principale .errore {
  color: #FFFFFF;
  text-decoration: underline;
}

.riga-titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.riga-titolo h2 {
  margin: 0;
}

/* Liste di giocatori e premi */
.intestazione-lista,
.riga-lista {
  display: grid;
  grid-template-columns: 1fr 110px 36px;
  gap: 6px;
  align-items: center;
}

.intestazione-lista.con-tu,
.riga-lista.con-tu {
  grid-template-columns: 30px 1fr 110px 36px;
}

.intestazione-lista {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 4px;
}

.intestazione-lista.con-tu span:first-child {
  text-align: center;
}

.lista {
  display: grid;
  gap: 6px;
}

.riga-lista .campo,
.riga-premio .campo,
.altro .campo {
  min-width: 0;
  padding: 9px 10px;
}

.riga-lista .stack,
.riga-premio .campo,
.altro .campo {
  text-align: right;
}

.riga-lista input[type='radio'] {
  justify-self: center;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accento);
}

.riga-lista.attiva .campo {
  border-color: var(--accento);
}

.togli {
  width: 36px;
  height: 36px;
  border: 1px solid var(--linea);
  border-radius: var(--raggio-piccolo);
  background: transparent;
  color: var(--tenue);
  font-size: 20px;
  line-height: 1;
}

.togli:disabled {
  opacity: 0.3;
  cursor: default;
}

.aggiungi {
  margin-top: 10px;
  font-size: 14px;
}

.aggiungi:disabled {
  opacity: 0.4;
  cursor: default;
}

.riga-premio {
  display: grid;
  grid-template-columns: 36px 16px 1fr 36px;
  gap: 6px;
  align-items: center;
}

.riga-premio .posto {
  font-weight: 800;
  color: var(--accento);
}

.riga-premio .valuta {
  color: var(--tenue);
}

/* ICM: barre fiches e soldi */
.legenda {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--tenue);
}

.pallino {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-left: 6px;
}

.pallino.fiches { background: var(--tenue); }
.pallino.soldi { background: var(--accento); }
.pallino.verde { background: var(--accento); }
.pallino.rosso { background: var(--perde); }

.confronto {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.riga-confronto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'chi quanto' 'barre barre';
  gap: 4px 10px;
  align-items: end;
}

.riga-confronto .chi {
  grid-area: chi;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.riga-confronto.tua .chi::after {
  content: '★';
  margin-left: 6px;
  color: var(--accento);
}

.riga-confronto .quanto {
  grid-area: quanto;
  text-align: right;
  line-height: 1.2;
}

.riga-confronto .quanto b {
  display: block;
  font-size: 18px;
}

.riga-confronto .quanto small {
  color: var(--tenue);
  font-size: 12px;
}

.barre {
  grid-area: barre;
  display: grid;
  gap: 3px;
}

.barre > span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--fondo);
  overflow: hidden;
}

.barre i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.barra-fiches i { background: var(--tenue); }
.barra-soldi i { background: var(--accento); }

@media (min-width: 600px) {
  .riga-confronto {
    grid-template-columns: 140px 1fr 150px;
    grid-template-areas: 'chi barre quanto';
    align-items: center;
  }
}

/* Spiegazione passo passo */
.spiega {
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 0 var(--spazio);
}

.scheda .spiega {
  margin-top: 14px;
  background: var(--fondo);
}

.spiega summary,
.apribile summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 700;
  color: var(--accento);
}

.apribile summary {
  padding: 0;
  color: var(--tenue);
}

.spiega summary::-webkit-details-marker,
.apribile summary::-webkit-details-marker {
  display: none;
}

.spiega summary::after,
.apribile summary::after {
  content: '+';
  float: right;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s;
}

.spiega[open] summary::after,
.apribile[open] summary::after {
  transform: rotate(45deg);
}

.apribile[open] summary {
  margin-bottom: 10px;
}

.spiega ol {
  margin: 0 0 14px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.spiega[open] ol {
  animation: entra 0.2s ease-out;
}

.spiega ol p {
  margin: 0;
}

.spiega ol ul {
  margin: 6px 0 0;
  padding: 8px 10px;
  list-style: none;
  background: var(--fondo);
  border-radius: var(--raggio-piccolo);
  font-size: 13px;
  color: var(--tenue);
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}

.scheda .spiega ol ul {
  background: var(--fondo-2);
}

.nota {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--tenue);
}

/* All-in o passo: campi */
.campo-grande {
  font-size: 28px;
  font-weight: 800;
  color: var(--accento);
  padding: 8px 14px;
}

.due {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  margin: 14px 0;
}

.ante {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px;
}

.ante .campo,
.due select {
  padding: 10px 8px;
  min-width: 0;
}

select.campo {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
  text-overflow: ellipsis;
}

.pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.pillola {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pillola[aria-checked='true'] {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--fondo);
}

.altri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.altro {
  display: grid;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tenue);
}

/* Interruttore fiches / € */
.interruttore {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
}

.interruttore button {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
}

.interruttore button[aria-checked='true'] {
  background: #FFFFFF;
  color: var(--accento-scuro);
}

.interruttore button[aria-disabled='true'] {
  opacity: 0.45;
}

/* Avanzamento */
.avanzamento {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--tenue);
}

.avanzamento .barra {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.avanzamento .barra i {
  display: block;
  height: 100%;
  width: 0;
  background: #FFFFFF;
  transition: width 0.15s linear;
}

/* Griglia 13×13 */
.griglia13 {
  display: grid;
  gap: 2px;
  width: 100%;
}

.riga13 {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 2px;
}

.cella {
  --forza: 60%;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* intensità 30–100% riportata a 72–100%: testo bianco sempre leggibile */
  background: color-mix(in srgb, var(--perde) calc(var(--forza) * 0.4 + 60%), var(--fondo));
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  line-height: 1.05;
  transition: background 0.25s, transform 0.12s;
}

.cella.si {
  background: color-mix(in srgb, var(--accento) calc(var(--forza) * 0.4 + 60%), var(--fondo));
}

.cella.vuota {
  background: var(--superficie);
  color: var(--tenue);
  text-shadow: none;
}

.cella b {
  font-size: clamp(8px, 2.6vw, 12px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cella small {
  display: none;
  font-size: 10px;
  opacity: 0.9;
}

.cella.scelta {
  outline: 3px solid var(--testo);
  outline-offset: -1px;
  transform: scale(1.08);
  z-index: 1;
  position: relative;
}

@media (min-width: 900px) {
  .cella small {
    display: block;
  }
  .cella b {
    font-size: 12px;
  }
}

.legenda-griglia {
  margin-top: 10px;
}

/* Mano scelta */
.mano-scelta {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.decisione {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
}

.decisione.si { background: var(--testo); color: #FFFFFF; border: 2px solid var(--testo); }
.decisione.no { background: transparent; color: var(--testo); border: 2px solid var(--testo); }

.cifre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.cifre .etichetta {
  font-size: 10px;
  letter-spacing: 0.06em;
  margin: 0 0 2px;
}

.cifra {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.rimbalzo {
  animation: rimbalzo 0.25s ease-out;
}

@keyframes rimbalzo {
  0% { transform: scale(0.98); }
  60% { transform: scale(1.01); }
  100% { transform: none; }
}

/* Accordo: tabella */
.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabella th,
.tabella td {
  padding: 10px 4px;
  text-align: right;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}

.tabella th:first-child {
  text-align: left;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabella thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.tabella tbody tr:last-child th,
.tabella tbody tr:last-child td {
  border-bottom: 0;
}

.tabella tr.evidenzia th {
  color: var(--accento);
}

.differenza {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}

.differenza.piu { background: color-mix(in srgb, var(--vince) 22%, transparent); color: var(--vince); }
.differenza.meno { background: color-mix(in srgb, var(--perde) 22%, transparent); color: var(--perde); }
.differenza.pari { color: var(--tenue); }

@media (min-width: 600px) {
  .tabella { font-size: 16px; }
  .tabella th, .tabella td { padding: 12px 8px; }
}

@media (max-width: 380px) {
  .tabella { font-size: 13px; }
  .differenza { padding: 2px 4px; }
}

/* Taglie (KO / PKO) e Spin & Go */
.tre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin: 12px 0 0;
}

.tre .campo,
.due.spin .campo {
  min-width: 0;
  padding: 10px;
}

.due.spin {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.conversione {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--accento);
}

.altro .taglia {
  border-style: dashed;
}

.altri-intestazione {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--tenue);
}

.chi-chiama {
  margin: 10px 0 0;
  font-weight: 700;
}

.avanzamento.chiaro .barra {
  background: var(--superficie);
}

.avanzamento.chiaro .barra i {
  background: var(--accento);
}

#sp-chiama .cifra {
  font-size: 18px;
}

#sp-box-spin .bottone {
  width: 100%;
}

/* Riquadro "A cosa serve / Quando usarlo": sempre in alto, sempre aperto */
.a-cosa-serve {
  margin: 0 0 16px;
  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 { margin: 0; }
.a-cosa-serve p + p { margin-top: 6px; }
.a-cosa-serve b { color: var(--accento-scuro); }

/* Ogni scheda si apre con la sua domanda */
.domanda {
  margin: 0 0 4px;
  font-size: clamp(19px, 4.8vw, 24px);
  font-weight: 800;
  line-height: 1.2;
}

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

/* Il perché, subito sotto il numero principale */
.perche {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
}
.principale .perche { color: #FFFFFF; }
.sotto.forte { font-weight: 700; }

.mano-nome {
  margin: 2px 0 0;
  color: var(--tenue);
  font-size: 13px;
}
.perche-mano {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

/* Intestazioni lunghe in parole normali: vanno a capo invece di allargare la pagina */
.tabella thead th {
  white-space: normal;
  vertical-align: bottom;
}
.cifra .unita {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tenue);
}