@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;900&family=Cinzel+Decorative:wght@700;900&family=Alegreya+Sans+SC:wght@500;700;800&family=Spectral:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* pietra: il fondo, come la cornice delle carte */
  --stone-deep:#d8cfb8;
  --stone:#3b3833;
  --stone-line:rgba(122,110,86,.45);
  /* pergamena: i pannelli, come l'interno delle carte */
  --parchment:#e6d6ae;
  --parchment-hi:#f1e6c8;
  --parchment-2:#dccaa0;
  --bg-deep:var(--stone-deep);
  --bg-panel:var(--parchment);
  --bg-panel-2:var(--parchment-2);
  --line:var(--stone-line);
  /* inchiostri */
  --ink:#2b2419;
  --ink-dim:#5c5240;
  --ink-muted:#857a63;
  --parchment-dim:var(--ink-dim);
  --parchment-muted:var(--ink-muted);
  --gold:#a2842f;
  --gold-dim:#6f5a1e;
  --gold-hi:#d9c48b;
  /* giocatori: rosso mazzo A, blu mazzo B */
  --p0:#8d2a22;
  --p0-dim:#c46a4a;
  --p1:#23477b;
  --p1-dim:#5f8bc4;
  --danger:#a72420;
  --flag:#8a6512;
  --radius:6px;
  --metal:linear-gradient(135deg,#f6e9c2 0%,#c3ab78 26%,#8d7b58 52%,#6a5c45 74%,#3c3427 100%);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--stone-deep);
  background-image:
    repeating-linear-gradient(68deg, rgba(255,253,246,.3) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 20% 8%, rgba(255,253,246,.7), transparent 50%),
    radial-gradient(ellipse at 86% 92%, rgba(160,144,112,.22), transparent 58%),
    linear-gradient(150deg,#eee6d2 0%,#e0d8c1 44%,#cec5ab 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Spectral',serif;
  min-height:100vh;
  /* la pagina a schermo intero (100%) risultava troppo "grande"; questo la
     rende visivamente identica a come appare zoomata all'80% dal browser,
     senza dover chiedere all'utente di farlo a mano ogni volta. */
  zoom:0.8;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

.wrap{max-width:1920px; margin:0 auto; padding:26px 20px 40px;}

header{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 22px; margin-bottom:20px; flex-wrap:wrap; gap:12px;
  border:none; border-radius:var(--radius);
  background-color:#e8dcc0;
  background-image:
    radial-gradient(circle at 14% 20%, rgba(140,118,78,.14), transparent 30%),
    radial-gradient(circle at 86% 26%, rgba(140,118,78,.11), transparent 26%),
    radial-gradient(ellipse at 50% 45%, rgba(255,252,238,.7), transparent 66%),
    linear-gradient(150deg,#f0e7cf 0%,#e4dbc2 46%,#d3c9ae 100%);
  box-shadow:0 0 0 1px rgba(28,22,15,.35), 0 0 0 4px #b8a273, 0 0 0 5px rgba(28,22,15,.4), 0 8px 20px rgba(120,104,74,.28);
  /* resta visibile mentre si scorrono le tab piu' lunghe (Impostazioni,
     Statistiche), cosi' cambiare tab non richiede risalire la pagina */
  position:sticky; top:10px; z-index:20;
}
h1{
  font-family:'Cinzel Decorative','Cinzel',serif; font-weight:700; letter-spacing:0.04em;
  font-size:1.9rem; margin:0; color:#5c4a1e; text-shadow:0 1px 0 rgba(255,252,236,.7);
}
h1 span{color:var(--gold);}
.sottotitolo{
  font-family:'Alegreya Sans SC',sans-serif; font-size:0.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); margin-top:4px;
}

nav.tab{display:flex; gap:6px; flex-wrap:wrap;}
nav.tab button{
  font-family:'Cinzel',serif; font-weight:700; font-size:0.78rem; letter-spacing:0.05em;
  background:linear-gradient(180deg,#e4d4ab,#cfbc90); color:var(--ink-dim);
  border:none; box-shadow:inset 0 0 0 1.5px #a9946a;
  padding:9px 17px; border-radius:5px; cursor:pointer; transition:box-shadow .15s, color .15s;
}
nav.tab button:hover{box-shadow:inset 0 0 0 1.5px var(--gold); color:var(--ink);}
nav.tab button.attivo{
  background:linear-gradient(180deg,#5a554c,#37332c 58%,#1d1a16);
  color:#f0dca4; box-shadow:inset 0 -2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1.5px #b8a273;
}
/* piccolo distacco visivo tra i gruppi di tab: definisci (Mazzo/Grimorio) |
   configura (Impostazioni) | agisci (Simula/Allena IA) | rivedi (Partite/Statistiche) */
nav.tab button.gruppo-nuovo{margin-left:12px;}

/* -- collegamenti rapidi in cima a una tab lunga (es. Impostazioni) --------- */
nav.salta-a{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px;}
nav.salta-a a{
  font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:.05em;
  background:linear-gradient(180deg,#e4d4ab,#cfbc90); color:var(--ink-dim); text-decoration:none;
  box-shadow:inset 0 0 0 1.5px #a9946a; padding:6px 13px; border-radius:11px; transition:box-shadow .15s, color .15s;
}
nav.salta-a a:hover{box-shadow:inset 0 0 0 1.5px var(--gold); color:var(--ink);}

section.tab-contenuto{display:none;}
section.tab-contenuto.attiva{display:block;}

.pannello{
  position:relative;
  background-color:var(--parchment);
  background-image:
    radial-gradient(circle at 10% 14%, rgba(122,96,52,.16), transparent 24%),
    radial-gradient(circle at 90% 22%, rgba(122,96,52,.12), transparent 20%),
    radial-gradient(circle at 26% 84%, rgba(104,80,42,.14), transparent 26%),
    radial-gradient(ellipse at 50% 50%, rgba(255,248,226,.55), transparent 64%),
    repeating-linear-gradient(84deg, rgba(120,96,56,.05) 0 1px, transparent 1px 6px);
  border:none; border-radius:var(--radius);
  padding:22px 24px; margin-bottom:18px;
  box-shadow:0 0 0 1px rgba(28,22,15,.32), 0 0 0 4px #b8a273, 0 0 0 5px rgba(28,22,15,.38), 0 8px 18px rgba(120,104,74,.24);
}
.pannello-titolo{
  font-family:'Cinzel',serif; font-weight:700; font-size:1.05rem; letter-spacing:.04em;
  color:var(--ink); margin-bottom:6px; padding-bottom:8px;
  border-bottom:1px solid rgba(140,118,78,.4);
}
.pannello-nota{font-size:0.82rem; color:var(--ink-muted); line-height:1.5; margin:10px 0 16px;}
code{font-family:'JetBrains Mono',monospace; font-size:.9em; background:rgba(140,118,78,.16); padding:1px 5px; border-radius:3px; color:#5c4a1e;}

.griglia-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.griglia-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:800px){.griglia-2, .griglia-3{grid-template-columns:1fr;}}

label{display:block; font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.76rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px;}
input[type=number], input[type=text], select{
  width:100%; font-family:'JetBrains Mono',monospace; font-size:0.85rem;
  background:linear-gradient(180deg,#f4ead0,#e2d3ad); color:var(--ink);
  border:none; box-shadow:inset 0 0 0 1.5px #a9946a, inset 0 2px 4px rgba(0,0,0,.08);
  border-radius:4px; padding:9px 11px; margin-bottom:12px;
}
input:focus, select:focus{outline:none; box-shadow:inset 0 0 0 2px var(--gold), inset 0 2px 4px rgba(0,0,0,.08);}
.campo{margin-bottom:2px;}
.campo-aiuto{font-size:0.75rem; color:var(--ink-muted); line-height:1.4; margin:-8px 0 12px;}

.campo-checkbox{padding-top:4px;}
.etichetta-checkbox{
  display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0;
  font-family:'Spectral',serif; font-weight:400; font-size:0.9rem; color:var(--ink); cursor:pointer;
}
.etichetta-checkbox input[type=checkbox]{width:16px; height:16px; accent-color:var(--gold); cursor:pointer;}

.gruppo-dadi{display:flex; gap:6px; margin-bottom:12px;}
.gruppo-dadi label{
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:42px; height:36px; border:none; border-radius:4px;
  background:linear-gradient(180deg,#e4d4ab,#cfbc90); box-shadow:inset 0 0 0 1.5px #a9946a;
  color:var(--ink-dim); cursor:pointer;
  font-family:'Cinzel',serif; font-weight:700; font-size:0.85rem; text-transform:none; letter-spacing:0;
  margin-bottom:0; transition:box-shadow .15s, color .15s;
}
.gruppo-dadi label:has(input:checked){
  background:linear-gradient(180deg,#5a554c,#37332c); color:#f0dca4;
  box-shadow:inset 0 0 0 1.5px #b8a273, inset 0 -2px 0 rgba(0,0,0,.35);
}
.gruppo-dadi input[type=checkbox]{display:none;}

button.azione{
  font-family:'Cinzel',serif; font-weight:700; font-size:0.84rem; letter-spacing:0.06em;
  background:linear-gradient(180deg,#5a554c 0%,#37332c 58%,#1d1a16 100%); color:#f0dca4;
  border:none; border-radius:5px; box-shadow:0 0 0 2px #b8a273, 0 3px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.3);
  padding:11px 20px; cursor:pointer; transition:filter .15s, transform .06s;
}
button.azione:hover{filter:brightness(1.18);}
button.azione:active{transform:translateY(1px); box-shadow:0 0 0 2px #b8a273, 0 1px 0 rgba(0,0,0,.35);}
button.azione:disabled{opacity:0.45; cursor:default; filter:none;}
button.secondario{
  font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:.06em;
  background:linear-gradient(180deg,#e4d4ab,#cfbc90); color:#5c4a1e;
  border:none; box-shadow:inset 0 0 0 1.5px #a9946a; border-radius:4px;
  padding:8px 15px; cursor:pointer;
}
button.secondario:hover{box-shadow:inset 0 0 0 1.5px var(--gold);}
button.pericolo{color:#7c1c17; box-shadow:inset 0 0 0 1.5px rgba(141,42,34,.6);}

.messaggio{font-family:'JetBrains Mono',monospace; font-size:0.78rem; margin-top:12px; padding:9px 13px; border-radius:4px;}
.messaggio.ok{background:rgba(37,98,52,.12); color:#25502c; box-shadow:inset 0 0 0 1.5px rgba(37,98,52,.45);}
.messaggio.errore{background:rgba(167,36,32,.12); color:#7c1c17; box-shadow:inset 0 0 0 1.5px rgba(167,36,32,.5);}
.nascosto{display:none !important;}

.tessere{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px;}
@media (max-width:800px){.tessere{grid-template-columns:repeat(2,1fr);}}
.tessere.tessere-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:900px){.tessere.tessere-5{grid-template-columns:repeat(2,1fr);}}
.tessera{
  background-image:radial-gradient(circle at 22% 18%, rgba(255,250,232,.7), transparent 60%), linear-gradient(180deg,#ecdfba,#d8c69c);
  border:none; border-radius:5px; padding:15px 17px;
  box-shadow:inset 0 0 0 1.5px #a9946a, 0 0 0 1px rgba(28,22,15,.4), 0 8px 18px rgba(0,0,0,.35);
}
.tessera .etichetta{font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.7rem; letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px;}
.tessera .valore{font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); font-family:'Cinzel',serif;}
.tessera .valore small{font-size:0.78rem; font-weight:500; color:var(--ink-muted); font-family:'JetBrains Mono',monospace;}

.callout{
  background-image:radial-gradient(circle at 20% 16%, rgba(255,250,232,.55), transparent 58%), linear-gradient(180deg,#ded0a6,#c9b68a);
  border:none; border-left:4px solid var(--flag); border-radius:5px; padding:15px 19px; margin-bottom:16px;
  box-shadow:inset 0 0 0 1.5px #a9946a, 0 6px 14px rgba(0,0,0,.28);
}
.callout .titolo{font-family:'Cinzel',serif; font-weight:700; font-size:0.94rem; margin-bottom:6px; color:var(--ink); display:flex; align-items:center; gap:8px;}
.callout .titolo .puntino{width:8px; height:8px; transform:rotate(45deg); border-radius:0; background:var(--flag); flex-shrink:0;}
.callout p{margin:0; font-size:0.86rem; line-height:1.55; color:var(--ink-dim);}

.barra-split{display:flex; height:22px; border-radius:4px; overflow:hidden; box-shadow:inset 0 0 0 1.5px #a9946a; margin-top:10px;}
.barra-split .seg{display:flex; align-items:center; font-family:'Cinzel',serif; font-size:0.7rem; font-weight:700;}
.barra-split .p0{background:linear-gradient(180deg,#b8342c,#7c1c17); color:#ffe3dc; padding-left:9px;}
.barra-split .p1{background:linear-gradient(180deg,#35507f,#152a4a); color:#dce9ff; justify-content:flex-end; padding-right:9px;}
.barra-split .pareggio{background:linear-gradient(180deg,#cfbc90,#b8a480); color:var(--ink-dim);}

.gruppo-categoria{display:flex; align-items:center; gap:8px; margin:14px 0 6px;}
.gruppo-categoria:first-child{margin-top:0;}

.riga-bar{display:grid; grid-template-columns:92px 1fr 52px; align-items:center; gap:10px; height:28px;}
.riga-bar + .riga-bar{margin-top:4px;}
.riga-bar .nome{font-size:0.8rem; color:var(--ink-dim); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.riga-bar .traccia{position:relative; height:13px; background:rgba(122,100,60,.22); border-radius:2px; box-shadow:inset 0 0 0 1px rgba(140,118,78,.4);}
.riga-bar .riempi{position:absolute; top:0; left:0; height:100%; border-radius:2px; background:linear-gradient(90deg, var(--gold-dim), var(--gold));}
.riga-bar .media-linea{position:absolute; top:-3px; bottom:-3px; width:1px; background:rgba(60,50,30,.5);}
.riga-bar .val{font-family:'JetBrains Mono',monospace; font-size:0.76rem; font-variant-numeric:tabular-nums; color:var(--ink);}
.riga-bar .riempi.buono{background:linear-gradient(90deg,#4a7d3f,#2b5c25);}
.riga-bar .riempi.cattivo{background:linear-gradient(90deg,#b8342c,#7c1c17);}
.riga-bar-doppia .tracce{position:relative;}
.riga-bar-doppia .linea-pareggio{position:absolute; top:-3px; bottom:-3px; width:1px; background:rgba(60,50,30,.5);}

svg.grafico{width:100%; height:auto; overflow:visible;}
.asse-linea{stroke:rgba(90,76,48,.7); stroke-width:1;}
.griglia-linea{stroke:rgba(140,118,78,.45); stroke-width:1;}
.asse-testo{fill:var(--ink-muted); font-family:'JetBrains Mono',monospace; font-size:9px;}
.punto{fill:var(--gold); stroke:var(--parchment-hi); stroke-width:2;}
.punto-etichetta{fill:var(--ink-dim); font-family:'Spectral',serif; font-size:10.5px;}
.trend-linea{stroke:rgba(90,76,48,.45); stroke-width:1; stroke-dasharray:4 3;}
.colonna{fill:var(--gold);}
.colonna.speciale{fill:var(--flag);}
.colonna.a{fill:var(--p0);}
.colonna.b{fill:var(--p1);}
.colonna-etichetta{fill:var(--ink); font-family:'JetBrains Mono',monospace; font-size:9.5px; font-variant-numeric:tabular-nums;}

.punto.a{fill:var(--p0);}
.punto.b{fill:var(--p1);}
.trend-linea.a{stroke:var(--p0); opacity:0.6;}
.trend-linea.b{stroke:var(--p1); opacity:0.6;}

.linea-andamento{fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linejoin:round;}
.linea-andamento.a{stroke:var(--p0);}
.linea-andamento.b{stroke:var(--p1);}
.area-riempita{fill:var(--gold); opacity:0.16; stroke:none;}
.area-riempita.a{fill:var(--p0); opacity:0.14;}
.area-riempita.b{fill:var(--p1); opacity:0.14;}
.riferimento-linea{stroke:var(--flag); stroke-width:1; stroke-dasharray:4 3; opacity:0.85;}

.selettore-vista{margin-bottom:16px;}
.legenda-confronto{display:flex; gap:18px; font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.76rem; letter-spacing:.06em; color:var(--ink-dim); margin-bottom:14px;}
.legenda-confronto .voce{display:flex; align-items:center; gap:6px;}
.legenda-confronto .pallino{width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 1.5px #cbb684;}
.legenda-confronto .pallino.a{background:var(--p0);}
.legenda-confronto .pallino.b{background:var(--p1);}

.riga-bar-doppia{display:grid; grid-template-columns:92px 1fr 92px; align-items:center; gap:10px; padding:5px 0;}
.riga-bar-doppia + .riga-bar-doppia{border-top:1px solid rgba(140,118,78,.28);}
.riga-bar-doppia .nome{font-size:0.8rem; color:var(--ink-dim); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.riga-bar-doppia .tracce{display:flex; flex-direction:column; gap:3px;}
.riga-bar-doppia .traccia-mini{position:relative; height:9px; background:rgba(122,100,60,.22); border-radius:2px;}
.riga-bar-doppia .traccia-mini .riempi{position:absolute; top:0; left:0; height:100%; border-radius:2px;}
.riga-bar-doppia .traccia-mini.a .riempi{background:var(--p0);}
.riga-bar-doppia .traccia-mini.b .riempi{background:var(--p1);}
.riga-bar-doppia .valori{font-family:'JetBrains Mono',monospace; font-size:0.72rem; display:flex; flex-direction:column; gap:3px; text-align:right;}
.riga-bar-doppia .valori .a{color:#7c1c17;}
.riga-bar-doppia .valori .b{color:#1c3a68;}

.tessera-doppia .valore{font-size:1.15rem;}
.tessera-doppia .valore .a{color:#7c1c17;}
.tessera-doppia .valore .b{color:#1c3a68;}
.tessera-doppia .valore .sep{color:var(--ink-muted); font-size:0.85rem; margin:0 3px;}

.tabella-scroll{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:0.85rem;}
th{text-align:left; font-family:'Alegreya Sans SC',sans-serif; font-size:0.74rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:700; padding:9px 11px; border-bottom:2px solid var(--gold); white-space:nowrap;}
td{padding:9px 11px; border-bottom:1px solid rgba(140,118,78,.3); color:var(--ink-dim); font-variant-numeric:tabular-nums; white-space:nowrap;}
td.nome{color:var(--ink); font-weight:600; font-variant-numeric:normal;}
td.nome-incantesimo{cursor:help; border-bottom-style:dotted; text-decoration:underline; text-decoration-style:dotted; text-decoration-color:rgba(140,118,78,.6); text-underline-offset:3px;}
th.num, td.num{text-align:right;}
tbody tr:nth-child(even) td{background:rgba(255,252,238,.4);}
tr:hover td{background:rgba(162,132,47,.14);}

.riga-partita{display:grid; grid-template-columns:1fr auto auto auto auto; align-items:center; gap:12px;
  padding:11px 4px; border-bottom:1px solid rgba(140,118,78,.3); font-size:0.85rem;}
.riga-partita .esito{font-family:'Cinzel',serif; font-size:0.74rem; padding:4px 12px; border-radius:11px; font-weight:700;}
.riga-partita .esito.g0{background:rgba(141,42,34,.14); color:#7c1c17; box-shadow:inset 0 0 0 1.5px rgba(141,42,34,.5);}
.riga-partita .esito.g1{background:rgba(35,71,123,.14); color:#1c3a68; box-shadow:inset 0 0 0 1.5px rgba(35,71,123,.5);}
.riga-partita .esito.pareggio{background:rgba(122,100,60,.14); color:var(--ink-muted); box-shadow:inset 0 0 0 1.5px rgba(140,118,78,.5);}
.riga-partita .data{color:var(--ink-muted); font-family:'JetBrains Mono',monospace; font-size:0.76rem;}
.riga-partita .turni{color:var(--ink-dim); font-family:'JetBrains Mono',monospace; font-size:0.8rem;}

.barra-progresso{height:22px; background:rgba(122,100,60,.22); border-radius:4px; overflow:hidden; box-shadow:inset 0 0 0 1.5px #a9946a; margin:12px 0 8px;}
.barra-progresso .riempi{height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold)); transition:width .3s;}
.stato-testo{font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--ink-dim);}

/* -- galleria illustrazioni --------------------------------------------------- */
.griglia-galleria{
  display:flex; gap:16px; overflow-x:auto; padding:2px 2px 12px;
  scrollbar-color:var(--gold-dim) transparent; scrollbar-width:thin;
}
.griglia-galleria::-webkit-scrollbar{height:9px;}
.griglia-galleria::-webkit-scrollbar-track{background:rgba(122,100,60,.16); border-radius:5px;}
.griglia-galleria::-webkit-scrollbar-thumb{background:var(--gold-dim); border-radius:5px;}
/* le carte ufficiali sono marcate a 744x1039px (dimensione di stampa reale):
   qui le si rimpicciolisce in blocco con una transform, senza toccare l'HTML
   verbatim che le genera -- 260/744 = fattore di scala, l'altezza segue */
.carta-ufficiale-scala{
  flex-shrink:0; width:260px; height:363px; overflow:hidden;
  box-shadow:0 10px 22px rgba(20,16,10,.4);
}
.carta-ufficiale-scala > div{transform:scale(0.34946); transform-origin:top left;}

/* -- gettoni ufficiali (Grimorio) -------------------------------------------
   stessa logica dei .carta-ufficiale-scala qui sopra: HTML verbatim (mm
   reali), rimpicciolito/ingrandito solo con transform, mai riscritto */
.griglia-gettoni{ display:flex; gap:18px; flex-wrap:wrap; padding:2px 2px 8px; }
.gettone-item{ display:flex; flex-direction:column; align-items:center; gap:7px; width:76px; text-align:center; }
.griglia-gettoni-effetto .gettone-item{ width:151px; }
.gettone-item .etichetta{
  font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.66rem;
  letter-spacing:.03em; color:var(--ink-muted); line-height:1.25;
}
.gettone-cat-scala{
  width:51px; height:51px; overflow:hidden; border-radius:50%; flex-shrink:0;
  box-shadow:0 4px 9px rgba(20,16,10,.35);
}
.gettone-effetto-grande{
  width:151px; height:151px; overflow:hidden; border-radius:22px; flex-shrink:0;
  box-shadow:0 8px 16px rgba(20,16,10,.4);
}
.gettone-cat-mini{
  display:inline-block; vertical-align:middle; width:20px; height:20px;
  overflow:hidden; border-radius:50%; margin-right:6px; flex-shrink:0;
}
.gettone-cat-mini > div{ transform:scale(0.3922); transform-origin:top left; }
.gettone-effetto-mini{
  display:inline-block; vertical-align:middle; width:20px; height:20px;
  overflow:hidden; border-radius:5px; margin-left:6px; flex-shrink:0;
}
.gettone-effetto-mini > div{ transform:scale(0.1325); transform-origin:top left; }

/* -- tabellone (Impostazioni > Campo di battaglia) --------------------------
   l'anteprima dal vivo usa gli stessi pezzi veri del tabellone di replay
   (costruisciLayoutTabellone/adattaScalaPezzi in app.js), rimpicciolita con
   transform:scale entro un contenitore di larghezza limitata; i due fogli di
   stampa originali (Quote/Pezzi) restano invece l'iframe del .dc.html reale,
   montato su una piccola "cornice" pergamena cosi' lo sfondo bianco del
   foglio A4 non stona con il resto della pagina */
.anteprima-tabellone-scala{
  width:100%; max-width:640px; overflow:hidden; margin:4px 0 8px;
  border-radius:10px; box-shadow:0 8px 18px rgba(20,16,10,.4);
}
.anteprima-tabellone-scala .plancia-layout{ transform-origin:top left; }

.griglia-tabellone-stampa{ display:flex; gap:18px; flex-wrap:wrap; padding:4px 2px 8px; }
.tabellone-item{ display:block; text-decoration:none; color:inherit; }
.tabellone-item .etichetta{
  margin-top:8px; text-align:center; font-family:'Alegreya Sans SC',sans-serif; font-weight:700;
  font-size:0.72rem; letter-spacing:.03em; color:var(--ink-muted);
}
.tabellone-item .etichetta small{ font-weight:500; font-family:'JetBrains Mono',monospace; letter-spacing:0; }
.tabellone-scala-stampa{
  position:relative; overflow:hidden; border-radius:10px; background:#f2ecdd; box-sizing:border-box; padding:10px;
  box-shadow:0 8px 18px rgba(20,16,10,.4), inset 0 0 0 1px rgba(140,118,78,.35);
  transition:box-shadow .15s;
}
.tabellone-item:hover .tabellone-scala-stampa{ box-shadow:0 8px 18px rgba(20,16,10,.4), inset 0 0 0 1px rgba(140,118,78,.35), 0 0 0 2px var(--gold-dim); }
.tabellone-scala-stampa iframe{ border:0; display:block; pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,.25); transform-origin:top left; }
.tabellone-scala-stampa-quote{ width:378px; height:220px; }
.tabellone-scala-stampa-quote iframe{ transform:scale(0.141443); }
.tabellone-scala-stampa-pezzi{ width:303px; height:220px; }
.tabellone-scala-stampa-pezzi iframe{ transform:scale(0.251889); }
/* -- profilo statistico carte (radar) -------------------------------------- */
.griglia-radar{
  display:flex; gap:14px; overflow-x:auto; padding:2px 2px 12px;
  scrollbar-color:var(--gold-dim) transparent; scrollbar-width:thin; justify-content:center;
}
.griglia-radar::-webkit-scrollbar{height:9px;}
.griglia-radar::-webkit-scrollbar-track{background:rgba(122,100,60,.16); border-radius:5px;}
.griglia-radar::-webkit-scrollbar-thumb{background:var(--gold-dim); border-radius:5px;}
.radar-carta{
  background:var(--bg-panel-2); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(90,76,48,.3); padding:8px 6px 10px; text-align:center;
  flex:0 0 150px; width:150px;
}
.radar-carta .radar-nome{font-family:'Cinzel',serif; font-weight:700; font-size:0.78rem; color:var(--ink-dim); margin-top:2px;}
.radar-poligono{fill:rgba(162,132,47,.28); stroke:var(--gold); stroke-width:1.6; stroke-linejoin:round;}
.radar-griglia{fill:none; stroke:rgba(140,118,78,.35); stroke-width:1;}
.radar-raggio{stroke:rgba(140,118,78,.3); stroke-width:1;}
.radar-etichetta{fill:var(--ink-muted); font-family:'JetBrains Mono',monospace; font-size:7.5px; text-anchor:middle;}
.radar-punto{fill:var(--parchment-hi); stroke:var(--gold-dim); stroke-width:1;}

/* -- grimorio ---------------------------------------------------------------- */
.categoria-pill{display:inline-block; font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:11px; color:#fff;}
.categoria-pill.attacco{background:#8d2a22;}
.categoria-pill.difesa{background:#23477b;}
.categoria-pill.cura{background:#2f6b34;}
.categoria-pill.movimento{background:#6f5a1e;}
.categoria-pill.gittata{background:#5a4a8a;}
.categoria-pill.speciali{background:#7a4a1e;}
.stato-incantesimo{font-family:'JetBrains Mono',monospace; font-size:0.78rem;}
.stato-incantesimo.si{color:#2f6b34;}
.stato-incantesimo.no{color:var(--ink-muted);}
.griglia-personaggi{
  display:flex; align-items:stretch; gap:12px; overflow-x:auto; padding:2px 2px 12px;
  scrollbar-color:var(--gold-dim) transparent; scrollbar-width:thin;
}
.griglia-personaggi::-webkit-scrollbar{height:9px;}
.griglia-personaggi::-webkit-scrollbar-track{background:rgba(122,100,60,.16); border-radius:5px;}
.griglia-personaggi::-webkit-scrollbar-thumb{background:var(--gold-dim); border-radius:5px;}
.scheda-personaggio{
  background:var(--bg-panel-2); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(90,76,48,.3); padding:12px 14px;
  flex:0 0 240px; width:240px;
}
.scheda-personaggio .nome-personaggio{font-family:'Cinzel',serif; font-weight:700; font-size:0.9rem; color:var(--ink-dim); margin-bottom:6px;}
.scheda-personaggio ul{list-style:none; margin:0; padding:0; font-size:0.84rem;}
.scheda-personaggio li{padding:2px 0; display:flex; align-items:center; gap:7px;}
.pallino-cat{font-size:0.9em; line-height:1; color:var(--ink-muted);}
.pallino-cat.attacco{color:#8d2a22;}
.pallino-cat.difesa{color:#23477b;}
.pallino-cat.cura{color:#2f6b34;}
.pallino-cat.movimento{color:#6f5a1e;}
.pallino-cat.gittata{color:#5a4a8a;}
.pallino-cat.speciali{color:#7a4a1e;}

/* -- visualizzatore di partita integrato (ex iframe) ------------------------- */
/* durante la riproduzione alcuni blocchi cambiano altezza (dadi, incantesimi,
   cimitero): overflow-anchor:none evita che il browser "compensi" spostando
   la pagina da solo ad ogni variazione. */
#pannello-visualizzatore{overflow-anchor:none;}
.legenda{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  background-image:radial-gradient(circle at 20% 16%, rgba(255,250,232,.55), transparent 58%), linear-gradient(180deg,#e4d4ab,#cfbc90);
  box-shadow:inset 0 0 0 1.5px #a9946a; border-radius:var(--radius);
  padding:10px 16px; margin-bottom:16px;
  font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:.05em; color:var(--parchment-dim);
}
.legenda-voce{display:flex; align-items:center; gap:6px;}
.legenda-campione{width:14px; height:14px; border-radius:3px; flex-shrink:0;}
.legenda-campione.p0{background:var(--p0);}
.legenda-campione.p1{background:var(--p1);}
.legenda-campione.magia{background:var(--gold); border-radius:50%; width:9px; height:9px;}

.stato-generale{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:0.85rem;
  color:var(--parchment-dim); margin-bottom:10px; flex-wrap:wrap; gap:6px;
}
.badge-fase{
  font-family:'Cinzel',serif; font-weight:700; font-size:0.72rem; letter-spacing:0.05em;
  padding:4px 12px; border-radius:11px; box-shadow:inset 0 0 0 1.5px var(--gold);
  color:#5c4a1e; text-transform:uppercase;
}
.badge-vincitore{
  font-family:'Cinzel',serif; font-weight:700; letter-spacing:0.04em;
  padding:4px 12px; border-radius:11px; font-size:0.72rem;
}
.badge-vincitore.p0{background:rgba(141,42,34,.14); color:#7c1c17; box-shadow:inset 0 0 0 1.5px rgba(141,42,34,.55);}
.badge-vincitore.p1{background:rgba(35,71,123,.14); color:#1c3a68; box-shadow:inset 0 0 0 1.5px rgba(35,71,123,.55);}

.plancia{
  position:relative;
  background-color:var(--bg-panel);
  background-image:
    radial-gradient(circle at 10% 14%, rgba(122,96,52,.16), transparent 24%),
    radial-gradient(circle at 90% 22%, rgba(122,96,52,.12), transparent 20%),
    radial-gradient(circle at 26% 84%, rgba(104,80,42,.14), transparent 26%),
    radial-gradient(ellipse at 50% 50%, rgba(255,248,226,.55), transparent 64%),
    repeating-linear-gradient(84deg, rgba(120,96,56,.05) 0 1px, transparent 1px 6px);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(28,22,15,.32), 0 0 0 4px #b8a273, 0 0 0 5px rgba(28,22,15,.38), 0 8px 18px rgba(120,104,74,.24);
  padding:22px 18px; margin-bottom:20px;
  overflow-x:auto;
}
.linee-assalto{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.linea-assalto{stroke-width:2.5; opacity:0.9;}
.linea-assalto.p0{stroke:var(--p0);}
.linea-assalto.p1{stroke:var(--p1);}
.linea-assalto.magia{stroke-dasharray:5 4; opacity:0.85;}
.punta-p0{fill:var(--p0);}
.punta-p1{fill:var(--p1);}

/* -- tabellone del replay, composto dai pezzi ufficiali veri (v. "Clash of
   Cards/05 Tabellone a colori/Tabellone - Pezzi.dc.html" e le funzioni
   torrePezzoHtml/colonnaPezzoHtml/mezzeriaPezzoHtml in app.js) -------------- */
.plancia-scala{width:100%; overflow:hidden;}
.plancia-layout{display:flex; align-items:stretch; gap:2px; min-width:max-content; transform-origin:top left;}
.plancia-campo{display:flex; align-items:stretch; gap:2px;}

.torre{display:flex; flex-direction:column; align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.68rem;}
.torre-forma{position:absolute; inset:0; pointer-events:none; border-radius:3px;}
.torre.danneggiata .torre-forma{box-shadow:inset 0 0 0 3px var(--danger); animation:scossa .35s;}
.torre-forma.bersaglio{box-shadow:inset 0 0 0 3px var(--danger), 0 0 14px 2px rgba(167,36,32,.45);}
.torre-etichetta{font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.62rem; letter-spacing:0.1em; color:#efe2bd; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.torre-vita{color:#efe2bd; font-weight:700; font-size:0.8rem; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.torre-vita.p0{color:#ffb199;}
.torre-vita.p1{color:#9fc0f0;}

.slot{position:relative; display:flex; align-items:center; justify-content:center;}

/* i gettoni-unita' sono la carta ufficiale vera (cartaUfficialeCreaturaHtml),
   scalata per stare nella cella 70x95mm -- v. .gettone-carta-scala. Il
   gettone si sovrappone alla cella pergamena sottostante (stesso .slot),
   non si accoda in flusso normale. */
.gettone{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .2s;}
/* niente cornice rossa/blu: l'identita' del giocatore e' gia' data
   dall'intestazione della carta stessa (rossa = Mazzo A, blu = Mazzo B) */
.gettone-carta-scala{ width:257px; height:359px; overflow:hidden; border-radius:8px; box-shadow:0 4px 10px rgba(20,16,10,.4); }
.gettone-carta-scala > div{ transform:scale(0.34557); transform-origin:top left; }
.gettone.colpita{animation:scossa .35s;}
.gettone.colpita .carta-vita-valore{animation:lampoDanno .5s;}
.gettone.attacca{animation:balzo .35s; box-shadow:0 0 14px 3px rgba(162,132,47,0.6); z-index:2;}
.gettone.incanta{animation:balzo .35s; box-shadow:0 0 14px 3px rgba(107,63,158,0.5); z-index:2;}
.gettone.bersaglio{box-shadow:0 0 0 3px rgba(167,36,32,0.55); z-index:2;}
.gettone.mossa{animation:comparsa .3s ease-out;}
/* piu' grandi dei .gettone-effetto-mini di Grimorio: qui il tabellone e' gia'
   rimpicciolito dallo scale-to-fit (v. repAdattaScalaTabellone), un badge da
   20px diventerebbe un puntino illeggibile -- si parte piu' grandi apposta */
.gettone-effetti-attivi{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:4px; z-index:3;}
.gettone-effetto-badge{
  display:inline-block; width:38px; height:38px; overflow:hidden; border-radius:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.55), 0 0 0 1.5px rgba(255,246,220,.6);
}
.gettone-effetto-badge > div{ transform:scale(0.2517); transform-origin:top left; }

/* carta Torre vera, sovrapposta alla cella "vita" del pezzo Torre -- stesso
   meccanismo di .gettone sopra la cella "colonna" */
.torre-carta{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}

@keyframes scossa{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}
@keyframes balzo{0%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}}
@keyframes comparsa{0%{opacity:0.3; filter:brightness(1.3);}100%{opacity:1; filter:brightness(1);}}
@keyframes lampoDanno{0%,100%{color:#221c14;}30%{color:#a72420; transform:scale(1.2);}}

.risorse{display:flex; justify-content:space-between; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:0.8rem;}
.risorsa-giocatore{display:flex; gap:14px; align-items:center;}
.pallino-giocatore{width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow:0 0 0 1.5px #cbb684;}
.pallino-giocatore.p0{background:var(--p0);}
.pallino-giocatore.p1{background:var(--p1);}
.mana-valore{color:#8a6512; font-weight:600;}
.cimitero-valore{color:var(--parchment-muted);}

.pannelli-giocatore{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px;}
.pannello-giocatore{
  background-image:radial-gradient(circle at 22% 18%, rgba(255,250,232,.7), transparent 60%), linear-gradient(180deg,#ecdfba,#d8c69c);
  border-radius:var(--radius); padding:13px 15px;
  box-shadow:inset 0 0 0 1.5px #a9946a, 0 0 0 1px rgba(28,22,15,.3), 0 6px 14px rgba(120,104,74,.22);
}
.pannello-giocatore.p0{border-left:4px solid var(--p0);}
.pannello-giocatore.p1{border-left:4px solid var(--p1);}
.giocatore-titolo{
  display:flex; align-items:center; gap:8px;
  font-family:'Cinzel',serif; font-weight:700; font-size:0.82rem; letter-spacing:0.03em;
  color:var(--ink); margin-bottom:8px;
}
.pannello-sezione + .pannello-sezione{margin-top:10px;}
.pannello-sezione-titolo{
  font-family:'Alegreya Sans SC',sans-serif; font-weight:700; font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--parchment-muted); margin-bottom:5px;
}
.lista-incantesimi, .lista-cimitero{
  display:flex; flex-wrap:wrap; gap:5px; align-content:flex-start;
  max-height:64px; overflow-y:auto; padding-right:2px;
  scrollbar-color:var(--gold-dim) transparent; scrollbar-width:thin;
}
.lista-incantesimi::-webkit-scrollbar, .lista-cimitero::-webkit-scrollbar{width:7px;}
.lista-incantesimi::-webkit-scrollbar-track, .lista-cimitero::-webkit-scrollbar-track{background:rgba(122,100,60,.16); border-radius:5px;}
.lista-incantesimi::-webkit-scrollbar-thumb, .lista-cimitero::-webkit-scrollbar-thumb{background:var(--gold-dim); border-radius:5px;}
.chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:11px; font-size:0.7rem;
  font-family:'JetBrains Mono',monospace;
  background:rgba(255,252,238,.6); box-shadow:inset 0 0 0 1.2px rgba(140,118,78,.55); color:var(--parchment-dim);
}
.chip.magia{box-shadow:inset 0 0 0 1.2px rgba(107,63,158,.55); color:#553184;}
.chip.magia .cariche{color:#8a6512; font-weight:600;}
.chip.tomba{color:var(--parchment-muted);}
.testo-vuoto{font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--parchment-muted); opacity:0.75; font-style:italic;}

.vassoio-dadi{
  background-image:radial-gradient(circle at 20% 16%, rgba(255,250,232,.55), transparent 58%), linear-gradient(180deg,#ded0a6,#c9b68a);
  box-shadow:inset 0 0 0 1.5px #a9946a; border-radius:var(--radius);
  padding:12px 16px; margin-bottom:16px; min-height:172px;
  font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--parchment-dim);
  display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.azione-corrente{font-family:'Spectral',serif; font-size:0.9rem; color:var(--ink); line-height:1.45;}
.riga-dadi{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.riga-dadi .etichetta{width:88px; flex-shrink:0; font-family:'Alegreya Sans SC',sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:0.7rem;}
.dado{
  width:26px; height:26px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-weight:700; font-size:0.8rem;
  box-shadow:inset 0 0 0 1.5px #a9946a; background:linear-gradient(180deg,#f4ead0,#e2d3ad); color:var(--parchment-dim);
}
.dado.successo{box-shadow:inset 0 0 0 2px var(--gold); color:#6f5a1e; background:linear-gradient(180deg,#f6ecd0,#e6d29c);}
.dado.blocco{box-shadow:inset 0 0 0 2px #35507f; color:#1c3a68; background:linear-gradient(180deg,#e9eef6,#cfd9e8);}
.riga-dadi .esito{font-size:0.72rem; margin-left:4px;}

.controlli-replay{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.controlli-replay select{width:auto; margin-bottom:0;}
.controlli-replay input[type=range]{flex:1; accent-color:var(--gold);}
.contatore-evento{font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--parchment-dim); white-space:nowrap;}

.log-corrente{
  background:rgba(255,252,238,.5); border-radius:var(--radius);
  box-shadow:inset 0 0 0 1.5px #a9946a;
  padding:10px 14px; max-height:88px; overflow-y:auto;
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--parchment-dim); line-height:1.5;
  scrollbar-color:var(--gold-dim) transparent; scrollbar-width:thin;
}
.log-corrente::-webkit-scrollbar{width:7px;}
.log-corrente::-webkit-scrollbar-track{background:rgba(122,100,60,.16); border-radius:5px;}
.log-corrente::-webkit-scrollbar-thumb{background:var(--gold-dim); border-radius:5px;}
.log-corrente .tag-turno{color:#8a6512; margin-right:6px; font-weight:600;}
.log-corrente .tag-g0{color:var(--p0);}
.log-corrente .tag-g1{color:var(--p1);}

footer{margin-top:26px; font-family:'Alegreya Sans SC',sans-serif; font-size:0.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(58,48,32,.55); text-align:center;}