/* Briskola — tutto cio' che sta attorno al tavolo 3D.
   I colori stanno qui e solo qui: una schermata nuova (statistiche, inviti,
   briscola a quattro) si scrive con queste variabili e non stona. */

:root {
  color-scheme: dark;

  --inchiostro: #f3efe6;
  --fioco: rgba(243, 239, 230, .62);
  --fioco-piu: rgba(243, 239, 230, .42);
  --fondo: #0e1a12;
  --panno: #1b4a2c;
  --scheda: rgba(10, 20, 14, .92);
  --bordo: rgba(255, 255, 255, .16);
  --bordo-tenue: rgba(255, 255, 255, .09);
  --accento: #e6c05c;
  --accento-chiaro: #f4d886;
  --accento-velo: rgba(230, 192, 92, .14);
  --scuro: #1b1608;

  --serif: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --raggio: 12px;
  --ombra: 0 24px 60px rgba(0, 0, 0, .55);

  /* Lo scalino della tacca: zero sui monitor, qualcosa sui telefoni. */
  --su: env(safe-area-inset-top, 0px);
  --giu: env(safe-area-inset-bottom, 0px);
  --sx: env(safe-area-inset-left, 0px);
  --dx: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
:focus-visible { outline: 2px solid var(--accento-chiaro); outline-offset: 2px; }

/* ------------------------------------------------------------ il tavolo */

.pagina-tavolo { overflow: hidden; height: 100dvh; }
#scena { position: fixed; inset: 0; width: 100%; height: 100dvh; display: block; }

/* La vignetta: il bordo del tavolo si perde nel buio, ma non si spegne.
   Non intercetta nulla — i clic sulle carte passano al canvas. */
.pagina-tavolo::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, .52) 100%);
}

/* L'anello del turno: quando tocca a me il bordo dello schermo respira d'oro.
   Si vede con la coda dell'occhio e non copre niente. */
.pagina-tavolo::before {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(230, 192, 92, .55), inset 0 0 70px rgba(230, 192, 92, .18);
  opacity: 0; transition: opacity .45s ease;
}
.tocca-a-me.pagina-tavolo::before { opacity: 1; animation: respiro 3.2s ease-in-out infinite; }
@keyframes respiro { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ------------------------------------------------------------ le barre */

.hud {
  position: fixed; left: 0; right: 0; z-index: 4;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
.hud a, .hud button, .hud input { pointer-events: auto; }
.hud-alto { top: 0; padding: calc(.8rem + var(--su)) calc(1.2rem + var(--dx)) .8rem calc(1.2rem + var(--sx)); }
.hud-basso { bottom: 0; align-items: flex-end; padding: .8rem calc(1.2rem + var(--dx)) calc(.8rem + var(--giu)) calc(1.2rem + var(--sx)); }

.marchio {
  color: var(--inchiostro); text-decoration: none; font-variant: small-caps;
  letter-spacing: .09em; font-size: 1.1rem; line-height: 1.6; white-space: nowrap;
}
.marchio:hover { color: var(--accento-chiaro); }

/* I tre numeri che si guardano di continuo. */
.seggio { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.seggio-io { align-items: flex-start; text-align: left; }
.seggio-avv { align-items: flex-end; text-align: right; }
.nome {
  font-size: .95rem; color: var(--fioco); letter-spacing: .02em;
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.punteggio { display: flex; align-items: baseline; gap: .3rem; }
.punti {
  font-size: 2rem; line-height: 1.05; color: var(--accento);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  /* Due cifre al massimo: lo spazio e' prenotato, il numero non fa saltare la riga. */
  min-width: 2.1ch; display: inline-block;
}
.seggio-avv .punti { text-align: right; }
.soglia { font-size: .82rem; color: var(--fioco); font-variant-numeric: tabular-nums; }
.soglia b { font-weight: normal; color: var(--inchiostro); }
/* «mancano N» compare solo quando qualcuno riempie #manca-io: finche' e' vuoto
   la frase non c'e', cosi' non puo' mostrare un numero vecchio. */
.manca:has(b:empty) { display: none; }

.mazzo { text-align: center; }
.mazzo .conta {
  display: block; font-size: 1.5rem; line-height: 1.1; color: var(--inchiostro);
  font-variant-numeric: tabular-nums; min-width: 2.1ch;
}
.mazzo .fioco { font-size: .78rem; letter-spacing: .06em; }
.fioco { color: var(--fioco); }

/* L'indicazione del turno: una targhetta, non una didascalia. */
.turno {
  pointer-events: none;
  display: inline-block; padding: .42rem .9rem; border-radius: 999px;
  font-size: 1.05rem; letter-spacing: .01em;
  color: var(--fioco); background: rgba(10, 20, 14, .55);
  border: 1px solid var(--bordo-tenue);
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.tocca-a-me .turno {
  color: var(--scuro); background: var(--accento); border-color: transparent;
  font-weight: bold; transform: scale(1.06);
  box-shadow: 0 0 24px rgba(230, 192, 92, .45);
}

/* Il promemoria dei tasti: solo dove c'e' una tastiera, e in punta di piedi. */
.tasti { margin: .35rem 0 0; font-size: .78rem; color: var(--fioco-piu); letter-spacing: .04em; }
.tasti kbd {
  font: inherit; font-size: .78rem; padding: 0 .3em; border-radius: 4px;
  border: 1px solid var(--bordo-tenue); background: rgba(255, 255, 255, .06);
}
@media (hover: none), (max-width: 560px) { .tasti { display: none; } }

/* ------------------------------------------------------------ i pannelli */

.velo {
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center;
  padding: calc(1rem + var(--su)) calc(1rem + var(--dx)) calc(1rem + var(--giu)) calc(1rem + var(--sx));
  background: rgba(0, 0, 0, .5); backdrop-filter: blur(4px);
  overflow-y: auto;
}
.velo[hidden] { display: none; }
.scheda {
  background: var(--scheda); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.6rem 1.7rem;
  width: 100%; max-width: 440px; box-shadow: var(--ombra);
}
.scheda h2 { margin: 0 0 .5rem; font-weight: normal; font-size: 1.5rem; letter-spacing: .01em; }
.scheda p { margin: .4rem 0 1rem; color: var(--fioco); }

/* Il codice si detta a voce: sei caratteri, grandi e staccati dal link. */
.codice {
  display: block; margin: 1.1rem 0 .3rem;
  font-size: clamp(1.9rem, 9vw, 2.6rem); letter-spacing: .22em; text-indent: .22em;
  text-align: center; color: var(--accento); font-variant-numeric: tabular-nums;
}
.codice-nota { text-align: center; font-size: .82rem; margin: 0 0 1.3rem; }
.oppure {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 .8rem;
  color: var(--fioco-piu); font-size: .82rem; letter-spacing: .08em; font-variant: small-caps;
}
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: var(--bordo-tenue); }

.campo {
  width: 100%; padding: .62rem .7rem; font: inherit; font-size: .95rem;
  background: rgba(255, 255, 255, .06); color: var(--inchiostro);
  border: 1px solid var(--bordo); border-radius: 9px;
}
.link { margin-bottom: .7rem; }

.btn {
  display: inline-block; font: inherit; cursor: pointer; text-decoration: none; text-align: center;
  padding: .62rem 1.15rem; border-radius: 9px; color: var(--inchiostro);
  background: rgba(255, 255, 255, .08); border: 1px solid var(--bordo);
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: rgba(255, 255, 255, .15); }
.btn-primario { background: var(--accento); color: var(--scuro); border-color: transparent; font-weight: bold; }
.btn-primario:hover { background: var(--accento-chiaro); }
.btn-largo { display: block; width: 100%; }

.esito { text-align: center; }
.esito h2 { font-size: 1.9rem; margin-bottom: .2rem; }
.esito .punteggio-fine {
  display: block; font-size: 2.6rem; color: var(--accento); margin: .2rem 0 1.4rem;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.azioni { display: flex; flex-direction: column; gap: .6rem; margin: 0; }

/* ------------------------------------------------------- il mucchio delle prese */

/* Il punteggio proprio e' un pulsante, ma non deve sembrarlo: al tavolo si
   tocca il mazzetto, non un tasto. Quindi solo il cursore cambia, e il
   riquadro compare quando serve (passaggio del mouse, fuoco da tastiera). */
.punteggio-apri {
  font: inherit; color: inherit; background: none; border: 0;
  padding: .1rem .35rem; margin: -.1rem -.35rem; border-radius: 9px;
  cursor: pointer; text-align: left;
  transition: background .18s ease;
}
.punteggio-apri:hover { background: rgba(255, 255, 255, .09); }

.scheda-prese { max-width: 660px; position: relative; }
.scheda-prese h2 { padding-right: 2rem; }

/* La croce di chiusura: al tavolo il mucchio si richiude col dorso della mano,
   qui serve un bersaglio grande abbastanza anche per un pollice. */
.chiudi {
  position: absolute; top: .5rem; right: .5rem;
  width: 2.4rem; height: 2.4rem; padding: 0; line-height: 1;
  font: inherit; font-size: 1.5rem; cursor: pointer;
  color: var(--fioco); background: none; border: 0; border-radius: 8px;
}
.chiudi:hover { color: var(--inchiostro); background: rgba(255, 255, 255, .1); }

.prese-conto { margin: 0 0 1.1rem; color: var(--inchiostro); }
.prese-conto b { color: var(--accento); font-weight: normal; }
.prese-nota { margin: 1.1rem 0 0; font-size: .82rem; }

.prese-gruppo { margin-bottom: 1.1rem; }
.prese-gruppo:last-child { margin-bottom: 0; }
.prese-titolino {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem;
  color: var(--fioco-piu); font-size: .78rem; letter-spacing: .08em;
  font-variant: small-caps;
}
.prese-titolino::after { content: ""; flex: 1; height: 1px; background: var(--bordo-tenue); }

.prese-griglia {
  display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
}
.prese-carta { position: relative; margin: 0; }
.prese-carta img {
  display: block; width: 100%; height: auto; border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
/* La briscola si riconosce senza leggere: e' la carta che pesa. */
.prese-carta.briscola img { box-shadow: 0 0 0 2px var(--accento), 0 3px 10px rgba(0, 0, 0, .5); }
.prese-carta .valore {
  position: absolute; top: -.35rem; right: -.35rem; min-width: 1.5rem;
  padding: 0 .25rem; border-radius: 999px;
  background: var(--accento); color: var(--scuro);
  font-size: .78rem; line-height: 1.5rem; text-align: center; font-weight: bold;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.prese-vuoto { color: var(--fioco); margin: 0; }

@media (max-width: 560px) {
  .prese-griglia { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: .4rem; }
}

/* Il toast sta in alto: le carte in mano sono in basso e non vanno coperte. */
.toast {
  position: fixed; left: 50%; top: calc(4.6rem + var(--su)); z-index: 7;
  /* Il centraggio sta qui e non solo nei fotogrammi: senza animazioni
     (prefers-reduced-motion) il toast resterebbe spostato di mezza larghezza. */
  transform: translateX(-50%);
  max-width: min(22rem, calc(100vw - 2rem));
  background: var(--scheda); color: var(--inchiostro);
  padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid var(--bordo);
  box-shadow: var(--ombra); text-align: center; pointer-events: none;
  /* Il JavaScript lo nasconde dopo 2,4 s: l'animazione entra e si congeda da sola. */
  animation: toast-entra 2.4s ease both;
}
.toast[hidden] { display: none; }
@keyframes toast-entra {
  0%   { opacity: 0; transform: translate(-50%, -.7rem); }
  8%   { opacity: 1; transform: translate(-50%, 0); }
  88%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .tocca-a-me.pagina-tavolo::before { animation: none; }
  .toast { animation-name: none; }
  * { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------ telefono */

@media (max-width: 560px) {
  .hud-alto { padding-inline: calc(.8rem + var(--sx)) calc(.8rem + var(--dx)); }
  .hud-basso { padding-inline: calc(.8rem + var(--sx)) calc(.8rem + var(--dx)); }
  .marchio { font-size: .95rem; }
  .punti { font-size: 1.6rem; }
  .mazzo .conta { font-size: 1.2rem; }
  .turno { font-size: .92rem; padding: .34rem .75rem; }
  .scheda { padding: 1.3rem 1.2rem; }
}
/* Schermo basso e disteso (telefono coricato): le barre si fanno sottili. */
@media (max-height: 460px) {
  .hud-alto { padding-block: calc(.4rem + var(--su)) .4rem; }
  .hud-basso { padding-block: .4rem calc(.4rem + var(--giu)); }
  .punti { font-size: 1.4rem; }
  .tasti { display: none; }
}

/* ------------------------------------------------------------ la home */

.pagina-home {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(27, 74, 44, .85), transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(27, 74, 44, .35), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
.home {
  max-width: 560px; margin: 0 auto;
  padding: clamp(2.2rem, 8vh, 4.5rem) calc(1.2rem + var(--sx)) calc(3rem + var(--giu)) calc(1.2rem + var(--dx));
}
.intestazione { text-align: center; margin-bottom: 2.2rem; }
.home h1 {
  font-weight: normal; font-variant: small-caps; letter-spacing: .14em;
  font-size: clamp(2.3rem, 11vw, 3.2rem); margin: 0; line-height: 1.1;
}
.filetto {
  width: 4.5rem; height: 1px; margin: .9rem auto; border: 0;
  background: linear-gradient(90deg, transparent, var(--accento), transparent);
}
.sotto { color: var(--fioco); margin: 0; font-size: 1.02rem; }

.home .scheda { max-width: none; margin-bottom: 1.3rem; }
.home label { display: block; color: var(--fioco); font-size: .92rem; letter-spacing: .02em; }
.home label .campo { margin-top: .35rem; font-size: 1.05rem; }
.home label .campo::placeholder { color: var(--fioco-piu); font-style: italic; }

.scelte { display: grid; gap: .7rem; margin-top: 1.2rem; }
@media (min-width: 480px) { .scelte { grid-template-columns: 1fr 1fr; } }
.scelta {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; text-align: left;
  font: inherit; cursor: pointer; padding: .85rem 1rem; border-radius: 10px;
  color: var(--inchiostro); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bordo); transition: background .18s ease, border-color .18s ease;
}
.scelta:hover { background: rgba(255, 255, 255, .12); border-color: var(--accento-velo); }
.scelta .titolo { font-size: 1.08rem; }
.scelta .spiega { font-size: .82rem; color: var(--fioco); line-height: 1.35; }
.scelta-oro { background: var(--accento-velo); border-color: rgba(230, 192, 92, .45); }
.scelta-oro:hover { background: rgba(230, 192, 92, .22); border-color: rgba(230, 192, 92, .7); }
.scelta-oro .titolo { color: var(--accento-chiaro); }

.nota { font-size: .85rem; color: var(--fioco); margin: 1rem 0 0; }

.elenco { list-style: none; margin: .6rem 0 0; padding: 0; }
.elenco li { border-top: 1px solid var(--bordo-tenue); }
.elenco li:first-child { border-top: 0; }
.riga {
  display: flex; align-items: center; gap: .8rem; padding: .65rem .2rem;
  text-decoration: none; color: var(--inchiostro); border-radius: 8px;
}
.riga:hover { background: rgba(255, 255, 255, .06); }
.riga .codice-riga {
  color: var(--accento); letter-spacing: .13em; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.riga .dettaglio { color: var(--fioco); font-size: .85rem; margin-left: auto; text-align: right; }
.stato {
  font-size: .72rem; letter-spacing: .09em; font-variant: small-caps;
  padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--bordo-tenue);
  color: var(--fioco); white-space: nowrap;
}
.stato-corso { color: var(--accento); border-color: rgba(230, 192, 92, .45); background: var(--accento-velo); }
.stato-attesa { color: var(--inchiostro); border-style: dashed; }

.piede { text-align: center; color: var(--fioco-piu); font-size: .82rem; margin-top: 2rem; }

/* --------------------------------------------------- le impostazioni */

/* L'anteprima e' la scena vera, quindi riusa `#scena` — che nel tavolo e'
   fissa a tutto schermo. Qui torna un elemento normale dentro il suo riquadro:
   e' l'unica riga che serve, perche' `Scena.ridimensiona()` misura il canvas,
   non la finestra. */
.pagina-impostazioni #scena {
  position: static; inset: auto;
  width: 100%; height: 100%; display: block;
  border-radius: var(--raggio);
}

.pagina-impostazioni {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(27, 74, 44, .55), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
}
.impostazioni {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(1.6rem, 5vh, 3rem) calc(1.2rem + var(--dx)) calc(3rem + var(--giu)) calc(1.2rem + var(--sx));
}
.impostazioni h1 {
  font-weight: normal; font-variant: small-caps; letter-spacing: .12em;
  font-size: clamp(1.9rem, 7vw, 2.6rem); margin: 0; line-height: 1.1;
}

.colonne { display: grid; gap: 1.4rem; }
/* Da questa larghezza in su l'anteprima sta accanto ai comandi e **resta
   ferma mentre si scorre**: senza, scegliendo l'ultima voce non si vede piu'
   la cosa che si sta scegliendo. */
@media (min-width: 900px) {
  .colonne { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .anteprima { position: sticky; top: 1.4rem; }
}
.anteprima { min-width: 0; }
.anteprima #scena {
  aspect-ratio: 4 / 3;
  box-shadow: var(--ombra);
  border: 1px solid var(--bordo-tenue);
}
.didascalia { color: var(--fioco-piu); font-size: .82rem; margin: .55rem 0 .3rem; text-align: center; }

.comandi { display: grid; gap: 1.1rem; min-width: 0; }
.comandi .scheda { max-width: none; padding: 1.2rem 1.3rem; }
.comandi .scheda h2 { font-size: 1.2rem; letter-spacing: .04em; font-variant: small-caps; }

.scelte-scenario { display: grid; gap: .6rem; }
@media (min-width: 520px) { .scelte-scenario { grid-template-columns: 1fr 1fr; } }
/* L'acceso e' oro come il turno: e' lo stesso significato — «questo qui». */
.scelta-scenario.accesa {
  background: var(--accento-velo); border-color: rgba(230, 192, 92, .55);
}
.scelta-scenario.accesa .titolo { color: var(--accento-chiaro); }

.gruppo { border: 0; padding: 0; margin: 1.1rem 0 0; }
.gruppo legend {
  padding: 0; color: var(--fioco); font-size: .85rem;
  letter-spacing: .08em; font-variant: small-caps;
}
.bottoniera { display: flex; gap: .4rem; margin-top: .45rem; flex-wrap: wrap; }
.pillola {
  font: inherit; font-size: .92rem; cursor: pointer;
  padding: .32rem .95rem; border-radius: 999px;
  color: var(--fioco); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--bordo-tenue);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pillola:hover { background: rgba(255, 255, 255, .12); color: var(--inchiostro); }
.pillola.accesa {
  color: var(--scuro); background: var(--accento); border-color: transparent;
}

.cursore { display: flex; align-items: center; gap: .8rem; margin-top: .45rem; }
.cursore input[type="range"] { flex: 1; accent-color: var(--accento); min-width: 0; }
.cursore output {
  color: var(--accento); font-variant-numeric: tabular-nums;
  min-width: 2.8rem; text-align: right;
}

.piede-comandi { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.piede-comandi .scelta { flex-direction: row; align-items: center; text-decoration: none; }
.collegamento {
  font: inherit; font-size: .88rem; color: var(--fioco); cursor: pointer;
  background: none; border: 0; padding: .3rem 0; text-decoration: underline;
  text-underline-offset: .22em; text-decoration-color: var(--bordo);
}
.collegamento:hover { color: var(--inchiostro); }

/* Il secondo marchio nella barra alta e' un rimando, non un titolo: stessa
   forma, meno voce. */
.marchio-tenue { color: var(--fioco); font-size: .88rem; letter-spacing: .06em; }