/* GONG — interfaccia del prototipo (claude.md §16, §17)
   ==========================================================================
   Direzione: "neo-incisione pop" — fondi profondi, un colore identitario per
   condottiero, tipografia bold contemporanea, interfaccia moderna.
   Regola: mai leggibile come "clipart d'epoca di poco valore".

   Questa e' l'interfaccia di un PROTOTIPO: privilegia la leggibilita' su tutto.
   Il §17.4 e' vincolante — le icone operative restano sempre visibili sulle
   carte in campo, altrimenti il gioco diventa mnemonico prima che strategico.
   ========================================================================== */

:root {
  --cesare: #b3222a;
  --napoleone: #1f4f9c;
  --oro: #d8a94a;
  --notte: #0d1017;
  --notte-2: #141926;
  --notte-3: #1c2333;
  --bordo: #2a3346;
  --testo: #e8ecf4;
  --testo-tenue: #93a0b8;
  --neutro: #4a5670;
  --raggio: 10px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 0%, #1a2133 0%, var(--notte) 60%);
  color: var(--testo);
  font-size: 14px;
}

/* --- Testata ------------------------------------------------------------ */
.testata {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid var(--bordo);
}
.marchio { display: flex; align-items: baseline; gap: 12px; }
.logo {
  font-size: 28px; font-weight: 900; letter-spacing: .18em;
  color: var(--oro);
  text-shadow: 0 0 22px rgba(216,169,74,.35);
}
.sottotitolo { color: var(--testo-tenue); font-size: 12px; }
.stato-partita { display: flex; gap: 8px; }
.pillola {
  padding: 5px 12px; border-radius: 999px;
  background: var(--notte-3); border: 1px solid var(--bordo);
  font-weight: 600; font-size: 12px;
}
.pillola.fascia { color: var(--oro); border-color: rgba(216,169,74,.4); }
.comandi { display: flex; gap: 8px; }

button, select {
  font: inherit; font-weight: 600;
  background: var(--notte-3); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 7px 14px; cursor: pointer;
}
button:hover:not(:disabled), select:hover { border-color: var(--oro); }
button:disabled { opacity: .4; cursor: not-allowed; }
.conferma {
  width: 100%; margin-top: 10px; padding: 12px;
  background: linear-gradient(180deg, var(--oro), #b8862f);
  color: #1a1206; border: none; font-weight: 800; letter-spacing: .06em;
}
.secondario { width: 100%; margin-top: 6px; font-size: 12px; padding: 7px; }

/* --- Tavolo ------------------------------------------------------------- */
.tavolo {
  flex: 1; display: grid; grid-template-columns: 1fr 340px;
  gap: 16px; padding: 16px 20px; align-items: start;
}
.campo { display: grid; grid-template-columns: 200px 1fr 200px; gap: 16px; }
.colonna-base { display: flex; flex-direction: column; gap: 10px; }
.colonna-zone { display: flex; flex-direction: column; gap: 12px; }

.boss {
  padding: 12px; border-radius: var(--raggio);
  border: 2px solid var(--bordo); background: var(--notte-2);
  text-align: center;
}
.boss-a { border-color: var(--cesare); }
.boss-b { border-color: var(--napoleone); }
/* Ritratto del condottiero — architettura a tre strati (§17.2)
   1. figura: PNG scontornato su fondo trasparente
   2. sfondo: disegnato dal codice, colore del boss + anelli di risonanza
   3. cornice: il bordo del riquadro .boss
   Regola della risonanza (§17.3): mai campo colore piatto e uniforme, che
   leggerebbe come "anni '90". Sempre colore profondo + anelli tono su tono. */
.boss .ritratto {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  margin-bottom: 6px; border-radius: 8px; overflow: hidden;
  background:
    repeating-radial-gradient(circle at 50% 62%,
      color-mix(in srgb, var(--colore) 55%, #05070c) 0 9px,
      color-mix(in srgb, var(--colore) 34%, #05070c) 9px 18px),
    radial-gradient(circle at 50% 62%,
      color-mix(in srgb, var(--colore) 70%, #05070c), #05070c 78%);
  transition: filter .4s, opacity .4s;
}
.boss .ritratto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6));
}
/* Linguaggio di stato: chi insegue ha la risonanza spenta. */
.boss .ritratto.spento { filter: saturate(.35) brightness(.7); }

.boss .nome { font-weight: 800; font-size: 15px; }
.boss .autorita { font-size: 34px; font-weight: 900; line-height: 1.1; }
.boss .etichetta { font-size: 10px; letter-spacing: .16em; color: var(--testo-tenue); }
.boss .passiva { font-size: 11px; color: var(--testo-tenue); margin-top: 6px; }

/* --- Caselle ------------------------------------------------------------ */
.casella {
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--notte-2); padding: 10px; min-height: 118px;
  position: relative; transition: border-color .15s, background .15s;
}
.casella.base { min-height: 150px; background: var(--notte-3); }
.casella .intestazione {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .14em; color: var(--testo-tenue);
  margin-bottom: 8px; font-weight: 700;
}
.casella .conteggio { font-size: 13px; font-weight: 800; letter-spacing: 0; }
.casella .carte { display: flex; flex-wrap: wrap; gap: 6px; }

/* Il conteggio dei turni 1-2 e' PARZIALE: informa, non conferisce controllo.
   Va mostrato come tale, o si scambia per possesso della zona (§6 vs §7). */
.casella .conteggio em {
  display: block; font-style: normal; font-weight: 600;
  font-size: 9px; letter-spacing: .1em; color: var(--testo-tenue); text-align: right;
}
.casella .conteggio.parziale { color: var(--testo-tenue); }

/* Il controllo: stato assegnato dal gong, e' questo che le carte intendono. */
.padrone {
  display: inline-block; margin-bottom: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--bordo); background: rgba(255,255,255,.05);
}
.padrone.p-A { color: #ff8a90; border-color: rgba(179,34,42,.7); background: rgba(179,34,42,.16); }
.padrone.p-B { color: #8ab4ff; border-color: rgba(31,79,156,.7); background: rgba(31,79,156,.16); }
.padrone.nessuno { color: var(--neutro); }

.casella.controllo-A { border-color: var(--cesare); background: #1a1215; }
.casella.controllo-B { border-color: var(--napoleone); background: #111726; }
.casella.neutra { border-style: dashed; }

/* Zona logora: il malus e' della CASELLA, non delle carte (§7.2) */
.casella.logora::after {
  content: attr(data-logora);
  position: absolute; top: 8px; right: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: #e0a05a; background: rgba(224,160,90,.12);
  border: 1px solid rgba(224,160,90,.4); border-radius: 4px; padding: 2px 6px;
}

/* Bersagli selezionabili */
.casella.bersaglio {
  border-color: var(--oro); background: rgba(216,169,74,.1);
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(216,169,74,.35);
}

/* --- Carte -------------------------------------------------------------- */
.carta {
  width: 92px; border-radius: 8px; padding: 7px;
  background: var(--notte-3); border: 1px solid var(--bordo);
  position: relative; cursor: default; font-size: 11px;
}
.carta.p-cesare { border-left: 3px solid var(--cesare); }
.carta.p-napoleone { border-left: 3px solid var(--napoleone); }
.carta .nome { font-weight: 700; line-height: 1.15; min-height: 26px; }
.carta .potenza {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--oro); color: #1a1206; font-weight: 900; font-size: 12px;
}
.carta .potenza.modificata { background: #6fcf97; }
.carta .testo { color: var(--testo-tenue); font-size: 10px; line-height: 1.25; margin-top: 4px; }

/* Icone sempre visibili — REQUISITO §17.4 */
.carta .icone { display: flex; gap: 3px; margin-top: 5px; flex-wrap: wrap; }
.icona {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,.07); border: 1px solid var(--bordo);
  color: var(--testo-tenue); letter-spacing: .04em;
}
.icona.trappola { color: #e07a5a; border-color: rgba(224,122,90,.4); }
.icona.attivato { color: #6fcf97; border-color: rgba(111,207,151,.4); }
.icona.spesa { color: var(--testo-tenue); text-decoration: line-through; }
.icona.guarnigione { color: #e0a05a; border-color: rgba(224,160,90,.4); }

.carta.coperta { background: repeating-linear-gradient(45deg, #1a2133, #1a2133 6px, #222c42 6px, #222c42 12px); }
.carta.coperta .nome, .carta.coperta .testo, .carta.coperta .icone { visibility: hidden; }
.carta.selezionabile { cursor: pointer; }
.carta.selezionabile:hover { border-color: var(--oro); transform: translateY(-2px); }
.carta.selezionata { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(216,169,74,.4); }
.carta.fuori-fascia { opacity: .35; }
.carta.impegnata { outline: 2px solid #6fcf97; }

/* --- Mano --------------------------------------------------------------- */
.mano-barra {
  border-top: 1px solid var(--bordo); background: rgba(0,0,0,.4);
  padding: 10px 20px 16px;
}
.mano-intestazione {
  display: flex; gap: 12px; align-items: baseline;
  font-weight: 700; font-size: 12px; letter-spacing: .1em;
  color: var(--testo-tenue); margin-bottom: 8px;
}
.nota { font-weight: 400; letter-spacing: 0; }
.mano { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Pannello ----------------------------------------------------------- */
.pannello { display: flex; flex-direction: column; gap: 12px; }
.ordini, .registro {
  background: var(--notte-2); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 14px;
}
h2 { margin: 0 0 8px; font-size: 12px; letter-spacing: .16em; color: var(--testo-tenue); }
.aiuto { margin: 0 0 10px; font-size: 12px; color: var(--oro); line-height: 1.4; }
.lista-ordini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-ordini li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--notte-3); border: 1px solid var(--bordo);
  border-radius: 6px; padding: 6px 9px; font-size: 12px;
}
.lista-ordini .annulla {
  background: none; border: none; color: var(--testo-tenue);
  padding: 0 4px; font-size: 15px; line-height: 1;
}
.lista-ordini .vuoto { justify-content: center; color: var(--testo-tenue); font-style: italic; }

/* Registro causale — REQUISITO §17.5 */
.registro-corpo { max-height: 46vh; overflow-y: auto; font-size: 12px; line-height: 1.45; }
.voce { padding: 7px 0; border-bottom: 1px solid var(--bordo); }
.voce:last-child { border-bottom: none; }
.voce .titolo { font-weight: 700; }
.voce .riga { color: var(--testo-tenue); padding-left: 10px; }
.voce.gong .titolo { color: var(--oro); }
.voce.esito .titolo { color: #6fcf97; }
.voce.rifiuto .titolo { color: #e07a5a; }

/* --- Sipari ------------------------------------------------------------- */
.sipario {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,9,15,.94);
  display: grid; place-items: center;
}
.sipario.nascosto { display: none; }
.sipario-corpo {
  text-align: center; max-width: 640px; padding: 32px;
  background: var(--notte-2); border: 1px solid var(--bordo);
  border-radius: 14px;
}
.sipario-corpo h2 { font-size: 26px; letter-spacing: .2em; color: var(--oro); margin-bottom: 12px; }
.sipario-corpo p { color: var(--testo-tenue); }
.gong-corpo { max-width: 720px; text-align: left; }
.gong-corpo h2 { text-align: center; font-size: 40px; }
.gong-zona { margin-bottom: 14px; padding: 12px; background: var(--notte-3); border-radius: 8px; }
.gong-zona .zona-nome { font-weight: 800; letter-spacing: .12em; }
.gong-zona .riga { color: var(--testo-tenue); font-size: 12px; padding-left: 10px; }
.gong-zona .danno { color: var(--oro); font-weight: 700; }
#gong-ok, #sipario-ok { margin-top: 16px; padding: 12px 28px; }

@media (max-width: 1100px) {
  .tavolo { grid-template-columns: 1fr; }
  .campo { grid-template-columns: 1fr; }
}