/* La card di Complici, come layout_complici_v2 della stampa (0009/D43): solo
   .card e i suoi discendenti, più i colori su :root e i font locali. */

/* Font locali, OFL, copiati da deck/fonts/. I file di Nunito hanno tutti lo
   stesso nome interno: il peso esplicito li distingue. */
@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Nunito-Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Nunito-Medium.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/Nunito-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/Nunito-Bold.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/JetBrainsMono-Medium.ttf") format("truetype"); }

/* Colori dei prototipi; le tinte sono il colore del lato al 55% sul bianco,
   come i triangoli stampati. */
:root {
  --panel: #FFFFFF;
  --panel-border: #EDEEF6;
  --shadow: rgba(122, 130, 180, .28);
  --ink: #1E2749;
  --ink-soft: #9AA0B4;
  --grid-thin: #E4E6F1;
  --zone: #E6E9FA;
  --alice: #5B6FD6;
  --alice-tint: #A3ADE8;
  --bob: #E0943A;
  --bob-tint: #EBC08E;
  --pen: #2E7C84;
  --facile: #3FA66B;
  --facile-bg: #E6F5EC;
  --medio: #7C86D9;
  --medio-bg: #E3E6FA;
  --difficile: #D96C6C;
  --difficile-bg: #FBEAEA;
  --logo-e: #D5D9EC;
  --f-ui: "Nunito", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: #1B2038; --panel-border: #2A3150; --shadow: rgba(0, 0, 0, .45);
    --ink: #E6E8F5; --ink-soft: #8C93AE; --grid-thin: #2C3352; --zone: #2A3160;
    --alice: #8C9BF0; --alice-tint: #56609E; --bob: #F0AA5A; --bob-tint: #B98448; --pen: #6CC4CC;
    --facile: #6CCB92; --facile-bg: #1D3A2B; --medio: #A3ADF0; --medio-bg: #2A3160;
    --difficile: #F08A8A; --difficile-bg: #3E2328; --logo-e: #343B5E;
  }
}
:root[data-theme="dark"] {
  --panel: #1B2038; --panel-border: #2A3150; --shadow: rgba(0, 0, 0, .45);
  --ink: #E6E8F5; --ink-soft: #8C93AE; --grid-thin: #2C3352; --zone: #2A3160;
  --alice: #8C9BF0; --alice-tint: #56609E; --bob: #F0AA5A; --bob-tint: #B98448; --pen: #6CC4CC;
  --facile: #6CCB92; --facile-bg: #1D3A2B; --medio: #A3ADF0; --medio-bg: #2A3160;
  --difficile: #F08A8A; --difficile-bg: #3E2328; --logo-e: #343B5E;
}

/* Colori del lato: le proprie chiavi e il proprio sale nel colore del lato,
   gli anelli in quello dell'altro. */
.card.lato-A { --proprio: var(--alice); --proprio-tinta: var(--alice-tint); --altro: var(--bob); }
.card.lato-B { --proprio: var(--bob); --proprio-tinta: var(--bob-tint); --altro: var(--alice); }

.card, .card * { box-sizing: border-box; }
.card {
  width: 100%;
  background: var(--panel); color: var(--ink); font-family: var(--f-ui);
  border: 1px solid var(--panel-border); border-radius: 22px; box-shadow: 0 6px 18px var(--shadow);
  padding: 22px 18px 16px; display: flex; flex-direction: column; gap: 18px;
}

.card .testa { display: flex; flex-direction: column; gap: 6px; }
.card .riferimento { align-self: flex-end; font-size: 11px; color: var(--ink-soft); }
.card .riga-testa { display: flex; align-items: flex-end; gap: 12px; }
.card .giocatore { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.card .giocatore .etichetta { font-size: 11px; letter-spacing: .08em; color: var(--ink-soft); }
.card .giocatore .nome { min-height: 24px; padding: 2px 0 4px; border-bottom: 1px solid var(--grid-thin);
  font-size: 15px; font-weight: 500; color: var(--pen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .identita { width: 28px; height: 28px; border-radius: 50%; background: var(--proprio); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 500; flex: none; }
.card .badge { border: 1px solid var(--livello); background: var(--livello-bg); color: var(--livello);
  font-size: 11px; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; flex: none; }
.card .badge.livello-facile { --livello: var(--facile); --livello-bg: var(--facile-bg); }
.card .badge.livello-medio { --livello: var(--medio); --livello-bg: var(--medio-bg); }
.card .badge.livello-difficile { --livello: var(--difficile); --livello-bg: var(--difficile-bg); }

/* La griglia è un contenitore: cifre e indici seguono la sua larghezza
   (1cqi = 1% della griglia, una cella è circa 11cqi). */
.card .griglia { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  width: 100%; aspect-ratio: 1; border: 2px solid var(--ink); container-type: inline-size; }
.card .cella { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0;
  border-right: 1px solid var(--grid-thin); border-bottom: 1px solid var(--grid-thin);
  font-size: clamp(15px, 6.3cqi, 28px); font-variant-numeric: tabular-nums; line-height: 1; }
/* La zona come nella v2: il blu di Alice al 4% sul colore della card, i bordi
   sottili al 24%; i bordi dei riquadri restano sopra. */
.card .cella.zona { background: color-mix(in srgb, var(--alice) 4%, var(--panel));
  border-color: color-mix(in srgb, var(--alice) 24%, var(--panel)); }
.card .cella.bordo-riquadro-col { border-right: 2px solid var(--ink); }
.card .cella.ultima-col { border-right: 0; }
.card .cella.bordo-riquadro-riga { border-bottom: 2px solid var(--ink); }
.card .cella.ultima-riga { border-bottom: 0; }

.card .cella .segni { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; overflow: visible; }
.card .segni .chiave { fill: var(--proprio-tinta); }
.card .segni .sale { fill: none; stroke: var(--proprio-tinta); stroke-width: 3; stroke-linejoin: round; }
/* L'anello a puntini della chiave ricevuta, come layout_complici_v2 (0011/D4,
   0009/D48): puntini tondi di 0,95 pt ogni 2,3 pt, nel colore dell'altro al
   60% sul fondo; la cella è 27,7 pt, quindi 1 pt = 3,6 unità. */
.card .segni .anello { fill: none; stroke: color-mix(in srgb, var(--altro) 60%, var(--panel));
  stroke-width: 3.4; stroke-dasharray: 0.04 8.3; stroke-linecap: round; }
.card .segni .nucleo-alice { fill: none; stroke: var(--alice); stroke-width: 3.6; }
.card .segni .nucleo-bob { fill: none; stroke: var(--bob); stroke-width: 3.6; }

.card .cella .indizio, .card .cella .cifra { position: relative; z-index: 2; }
.card .cella .indizio { color: var(--ink); font-weight: 500; }
.card .cella .cifra { color: var(--pen); font-weight: 600; }
.card .cella .cifra:empty { display: none; }
.card .cella .cifra.ricevuta { color: var(--altro); font-weight: 700; }
.card .cella .indice { position: absolute; right: 7%; bottom: 4%; z-index: 3;
  font-size: clamp(8px, 2.3cqi, 11px); font-weight: 600; line-height: 1; }
.card .cella.chiave .indice { color: var(--proprio); }
.card .cella.anello .indice { color: var(--altro); }

/* Testo solo per chi legge con lo screen reader. */
.card .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.card .piede { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--grid-thin); padding-top: 12px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.card .checksum { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-weight: 500;
  font-size: 12px; color: var(--ink); }
.card .checksum svg { width: 13px; height: 13px; flex: none; }
.card .checksum .pieno { fill: var(--proprio); }
.card .checksum .vuoto { fill: none; stroke: var(--proprio); stroke-width: 1; }

/* Il logo Penny & Pier: i nomi nei colori dei lati, la "&" chiara dietro. */
.card .logo { position: relative; display: inline-grid; justify-items: center; font-weight: 500; line-height: 1.05; }
.card .logo .penny, .card .logo .pier { position: relative; z-index: 1; }
.card .logo .penny { color: var(--alice); }
.card .logo .pier { color: var(--bob); }
.card .logo .e-commerciale { position: absolute; left: 50%; top: 50%; height: 2.3em; width: auto;
  transform: translate(-50%, -50%); fill: var(--logo-e); overflow: visible; }