/*
 * MACHIAVELOX — stile di base.
 *
 * Tailwind (via CDN) copre layout e utility; qui stanno solo le cose che
 * Tailwind non ci dà: la palette come variabili CSS e qualche componente.
 *
 * IMPORTANTE: nessun colore va scritto come valore letterale nelle pagine.
 * Passano tutti da queste variabili, perché il tema DARK previsto in
 * /account (HANDOFF §7, D6) si realizzerà ridefinendo solo questo blocco.
 */

:root {
  /* Superfici */
  --fondo:          #faf9f7;
  --fondo-alt:      #ffffff;
  --bordo:          #e7e5e4;

  /* Testo */
  --testo:          #1c1917;
  --testo-tenue:    #78716c;

  /* Accento */
  --accento:        #15803d;
  --accento-forte:  #166534;
  --accento-tenue:  #dcfce7;

  /* Semantici, per i messaggi di gioco */
  --attenzione:     #b45309;
  --errore:         #b91c1c;

  color-scheme: light;
}

/* Tema scuro: previsto, non ancora attivabile dall'interfaccia.
   Quando arriverà, basterà impostare data-tema="scuro" su <html>. */
:root[data-tema="scuro"] {
  --fondo:          #1c1917;
  --fondo-alt:      #262322;
  --bordo:          #44403c;
  --testo:          #f5f5f4;
  --testo-tenue:    #a8a29e;
  --accento:        #4ade80;
  --accento-forte:  #86efac;
  --accento-tenue:  #14532d;
  --attenzione:     #fbbf24;
  --errore:         #f87171;

  color-scheme: dark;
}

body {
  background: var(--fondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/*
 * L'attributo `hidden` deve nascondere, sempre.
 *
 * Il browser lo realizza con un `display: none` della propria foglia di stile,
 * che perde contro QUALUNQUE regola nostra che imposti `display` — e basta un
 * `.bottone { display: inline-block }` perché un tasto marcato `hidden` resti
 * lì in bella vista. È una trappola silenziosa: l'HTML dice una cosa, lo
 * schermo ne mostra un'altra, e non c'è nessun errore da nessuna parte.
 */
[hidden] { display: none !important; }

/* --- Componenti minimi ---------------------------------------------------- */

.voce {
  color: var(--testo-tenue);
  text-decoration: none;
  transition: color .15s ease;
}
.voce:hover {
  color: var(--accento);
}
.voce-attiva {
  color: var(--testo);
  font-weight: 600;
}

.bottone {
  display: inline-block;
  padding: .55rem 1.1rem;
  border-radius: .5rem;
  background: var(--accento);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease;
}
.bottone:hover {
  background: var(--accento-forte);
}

.bottone-tenue {
  background: transparent;
  color: var(--testo);
  border-color: var(--bordo);
}
.bottone-tenue:hover {
  background: var(--fondo-alt);
  color: var(--accento);
}

.riquadro {
  background: var(--fondo-alt);
  border: 1px solid var(--bordo);
  border-radius: .75rem;
  padding: 1.5rem;
}

/* La schermata del tavolo, in home e in «Come giocare». Larga quanto la
   colonna che la contiene e mai di più: il file è 1080×784, quindi non viene
   mai ingrandito oltre la sua misura, e `width`/`height` nel tag tengono il
   posto mentre arriva, così la pagina non sobbalza. Bordo e raggio sono quelli
   del riquadro, perché accanto ai riquadri ci sta. */
.schermata {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bordo);
  border-radius: .75rem;
}

/* In home la schermata sta più stretta della colonna, centrata: a tutta
   larghezza, sotto un titolo e tre tasti, pesava troppo (Will). Sul telefono
   torna piena, perché lì la colonna è già stretta e l'80% la renderebbe un
   francobollo. */
.schermata-stretta { width: 80%; margin-inline: auto; }

@media (max-width: 640px) {
  .schermata-stretta { width: 100%; }
}

/* Avviso "in costruzione": deve essere impossibile scambiarlo per contenuto
   definitivo, quindi si distingue con un bordo tratteggiato. */
.avviso-lavori {
  border: 1px dashed var(--bordo);
  border-radius: .75rem;
  padding: 1.5rem;
  color: var(--testo-tenue);
}

/* --- Accessibilità -------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Moduli --------------------------------------------------------------- */

.campo-etichetta {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

.campo {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--bordo);
  border-radius: .5rem;
  background: var(--fondo);
  color: var(--testo);
  font-size: .95rem;
  font-family: inherit;
}
.campo:focus {
  border-color: var(--accento);
  outline: none;
  box-shadow: 0 0 0 3px var(--accento-tenue);
}

.campo-aiuto {
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--testo-tenue);
}

/* --- Avvisi --------------------------------------------------------------- */

.avviso {
  border: 1px solid var(--bordo);
  border-left-width: 3px;
  border-radius: .5rem;
  padding: .8rem 1rem;
  font-size: .875rem;
  line-height: 1.5;
}

.avviso-errore {
  border-left-color: var(--errore);
  color: var(--errore);
}

.avviso-nota {
  border-left-color: var(--accento);
}

.avviso-attenzione {
  border-left-color: var(--attenzione);
}

/* Il marchio in alto a sinistra: spostamento ottico di 4px in alto e a
   sinistra, per allinearlo agli altri elementi dell'intestazione. Si usa
   position: relative e non un margine negativo, così lo spostamento è
   puramente visivo e non muove nulla intorno. */
.marchio {
  position: relative;
  top: -2px;
  left: -4px;
}

.marchio img {
  position: relative;
  top: 2px;
  width: 150px;
  height: auto;
}

/* Avatar: sempre tondo, mai deformato */
.avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fondo);
  border: 1px solid var(--bordo);
}

/* --- La stessa partita in un'altra scheda --------------------------------- */

/* In alto al centro, sopra tutto, sia nell'anticamera sia al tavolo: non è un
   errore, ma è una cosa che si deve sapere prima di toccare qualcosa. */
.avviso-schede {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + .5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  max-width: calc(100% - 2rem);
  padding: .4rem .9rem;
  border-radius: .5rem;
  background: #fbbf24;
  color: #1c1917;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
}

/* --- Anticamera (FASE 4.3) ------------------------------------------------ */

.anticamera-posti {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.anticamera-posto {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: .75rem;
  background: var(--fondo-alt);
}

/* Un posto ancora vuoto non deve sembrare un giocatore. */
.anticamera-libero {
  border-style: dashed;
  background: transparent;
  color: var(--testo-tenue);
}

.anticamera-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.anticamera-nota { font-weight: 400; color: var(--testo-tenue); }

/* Il pallino della presenza: pieno se sta guardando la pagina adesso. */
.anticamera-pallino {
  flex: none;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  border: 1px solid var(--testo-tenue);
}

.anticamera-presente { background: var(--accento); border-color: var(--accento); }

.anticamera-stato {
  flex: none;
  font-size: .8rem;
  color: var(--testo-tenue);
}

.anticamera-pronto { color: var(--accento); font-weight: 700; }

.anticamera-messaggio { color: var(--attenzione); }

/* --- La campanella (FASE 6.2) ---------------------------------------------- */

.campanella-zona { position: relative; }

.campanella {
  position: relative;
  font-size: 1.1rem;
  line-height: 1;
  padding: .25rem;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Il numero delle non lette, sull'angolo: si nota senza gridare. */
.campanella-numero {
  position: absolute;
  top: -.35rem;
  right: -.45rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  border-radius: .55rem;
  background: var(--errore);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}

.campanella-pannello {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--bordo);
  border-radius: .75rem;
  background: var(--fondo-alt);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
  font-size: .85rem;
}

.campanella-voce {
  display: block;
  padding: .55rem .6rem;
  border-radius: .5rem;
  color: var(--testo);
  text-decoration: none;
}

a.campanella-voce:hover { background: var(--accento-tenue); }
.campanella-nuova { font-weight: 700; }
.campanella-vuota { padding: .6rem; color: var(--testo-tenue); }

/* --- Elenchi e paginazione (FASE 6) ------------------------------------------ */

/* Una persona per riga: il nome a sinistra, i tasti a destra. */
.elenco > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem 0;
  border-top: 1px solid var(--bordo);
}

.elenco > li:first-child { border-top: 0; }
.elenco .bottone { padding: .35rem .75rem; font-size: .8rem; }

.paginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--testo-tenue);
}

.paginazione a { color: var(--accento); text-decoration: none; font-weight: 600; }
.paginazione .spento { opacity: .35; }
.paginazione-per { display: flex; gap: .5rem; margin-left: auto; }

/* --- Gli inviti a una partita (FASE 6.4) -------------------------------------
   Una finestra al centro che oscura la pagina: un invito a giocare adesso non
   deve passare inosservato. */
.inviti-velo {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
}
.inviti-scatola {
    width: 100%;
    max-width: 26rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid var(--bordo);
    border-radius: 0.75rem;
    background: var(--fondo-alt);
    color: var(--testo);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.inviti-titolo {
    font-size: 1.125rem;
    font-weight: 700;
}
.invito-voce {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordo);
}
.invito-tasti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.invito-esito {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--attenzione);
}

/* --- Le liste di scelta degli amici (FASE 6.5) -------------------------------
   Altezza fissa, circa otto voci, e lo scorrimento dentro il riquadro: con
   tanti amici la pagina non si allunga all'infinito. Il filtro lo aggiunge
   app.js. */
.scelta {
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bordo);
    border-radius: 0.5rem;
}
.scelta-voce {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
}
.scelta-voce[hidden] {
    display: none;
}
.scelta-filtro {
    margin-bottom: 0.5rem;
}

/* La classifica di gruppo: una tabella che su telefono scorre di lato dentro
   il suo riquadro, invece di allargare la pagina. */
.tabella-scorre {
    overflow-x: auto;
}
.classifica {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}
.classifica th,
.classifica td {
    padding: 0.4rem 0.5rem;
    text-align: right;
    white-space: nowrap;
}
.classifica th:nth-child(-n+2),
.classifica td:nth-child(-n+2) {
    text-align: left;
}
.classifica th {
    font-weight: 600;
    color: var(--testo-tenue);
    border-bottom: 1px solid var(--bordo);
}
.classifica tr + tr td {
    border-top: 1px solid var(--bordo);
}

/* --- Come giocare (FASE 8.4) -------------------------------------------------
   I documenti di docs/ disegnati da lib/markdown.php: titoli, paragrafi,
   elenchi, citazioni e tabelle, con le carte e i tasti del tavolo. Le regole
   hanno un selettore di classe, quindi valgono sopra il reset di Tailwind. */
.testo-lungo { line-height: 1.65; }
.testo-lungo h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin-top: 1.5rem; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.6rem; }
.testo-lungo h4 { font-size: 1rem; font-weight: 600; margin-top: 1.2rem; }
.testo-lungo p { margin-top: .7rem; }
.testo-lungo ul { list-style: disc; padding-left: 1.4rem; margin-top: .6rem; }
.testo-lungo ol { list-style: decimal; padding-left: 1.4rem; margin-top: .6rem; }
.testo-lungo li + li { margin-top: .35rem; }
.testo-lungo li > ul,
.testo-lungo li > ol { margin-top: .35rem; }
.testo-lungo blockquote {
  margin-top: .8rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--bordo);
  color: var(--testo-tenue);
}
.testo-lungo blockquote p:first-child { margin-top: 0; }
.testo-lungo table { width: 100%; margin-top: .8rem; border-collapse: collapse; font-size: .92rem; }
.testo-lungo th,
.testo-lungo td { padding: .4rem .5rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.testo-lungo th { font-weight: 600; }
.testo-lungo code {
  padding: 0 .3rem;
  border-radius: .25rem;
  background: var(--fondo);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
.testo-lungo hr { margin: 1.6rem 0; border: 0; border-top: 1px solid var(--bordo); }
.testo-lungo a { color: var(--accento); }

.seme-rosso { color: #c62828; }

/* Le carte degli esempi: gli stessi SVG del tavolo, in fila. */
.carte-esempio {
  display: inline-flex;
  gap: .2rem;
  margin: .2rem .3rem .2rem 0;
  vertical-align: middle;
}
.carte-esempio img {
  height: 4.4rem;
  width: auto;
  border-radius: .3rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* La copia di un tasto del tavolo: stesso aspetto, sul feltro, ma non si
   clicca — è un'illustrazione, e il puntatore lo dice. */
.tasto-finto {
  display: inline-block;
  padding: .12rem .6rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .45rem;
  background: #0f4a2c;
  color: #f5f5f4;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  user-select: none;
}
.tasto-finto .seme-rosso { color: #f87171; }

/* Il regolamento dettagliato: un pannello che si apre, con il suo indice. */
.dettagliato > summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  list-style-position: inside;
}
.dettagliato[open] > summary { margin-bottom: 1rem; }
.dettagliato .indice {
  padding: .8rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: .5rem;
  background: var(--fondo);
}
.dettagliato .indice ol { margin-top: .3rem; }

/* L'indirizzo protetto (FASE 8.3): finché app.js non lo ricompone — o se
   JavaScript è spento — resta il testo di riserva, in corsivo. */
.email-protetta { font-style: italic; }

/* Le finestre del sito (FASE 8.3): il pannello dei cookie. Un <dialog>
   nativo, centrato, con lo sfondo scurito. */
.pannello-dialogo {
  width: calc(100% - 2rem);
  max-width: 28rem;
  padding: 1.25rem;
  border: 1px solid var(--bordo);
  border-radius: .75rem;
  background: var(--fondo-alt);
  color: var(--testo);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.pannello-dialogo::backdrop { background: rgba(0, 0, 0, .55); }