/* ============================================================
   Conquizzone — KIT "Sala di Guerra" (design system, Fase 1b)
   Fonte visiva: mockup approvato clan/design/a-sala-di-guerra/ (3 lug 2026).
   Regole del kit:
   - SOLO selettori namespaced .k-* (+ @font-face e :root): il file è INERTE
     sul DOM legacy; le superfici esistenti si convertono nelle Fasi 2-6.
   - Le classi legacy (.modal, .btn-primario, …) restano in stile.css e NON
     vanno ristilizzate qui — eccezione: i compound `.modal.k-modal` che
     adattano il guscio legacy alle superfici costruite da UIKit.
   - z-index: mai hardcodato nei componenti — arriva INLINE da UIKit.Z
     (ui-kit.js), i detector di boot leggono gli style inline.
   ============================================================ */

/* ─── Font self-hosted (latin subset, variable) ──────────────────────────
   Nomi famiglia IDENTICI a quelli usati dal canvas (mappa.js): Cinzel 700
   etichette, Bebas Neue numeri difesa, EB Garamond etichette pergamena. */
@font-face {
  font-family: 'Cinzel';
  src: url('/game/fonts/cinzel-var-latin.woff2') format('woff2');
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/game/fonts/ebgaramond-var-latin.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('/game/fonts/bebasneue-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ─── Token ──────────────────────────────────────────────────────────── */
:root {
  /* Colori — inchiostro/legno, filetti d'oro, ceralacca */
  --k-bg:           #16110C;
  --k-surface:      #1E1710;   /* pannelli/sheet */
  --k-surface-2:    #241C13;   /* card dentro i pannelli */
  --k-surface-3:    #211912;   /* righe lista */
  --k-btn-scuro:    #221A11;   /* bottoni secondari scuri */
  --k-ink:          #EFE6D2;   /* testo primario (avorio) */
  --k-ink-forte:    #F2E8D2;   /* titoli */
  --k-ink-muted:    #B3A283;   /* testo secondario */
  --k-ink-soft:     #C6B794;   /* etichette/labels */
  --k-gold:         #C9A227;
  --k-gold-bright:  #E5C96B;
  --k-gold-scuro:   #A9891D;   /* hover/pressed dell'oro */
  --k-su-oro:       #241A07;   /* testo SOPRA i bottoni oro */
  --k-green:        #5F8A54;
  --k-green-soft:   #7FA36F;
  --k-wax:          #A93F35;   /* ceralacca */
  --k-wax-bright:   #C24437;
  --k-danger-testo: #DE9C90;
  --k-border:       rgba(201,162,39,.30);
  --k-border-tenue: rgba(201,162,39,.20);
  --k-border-forte: rgba(201,162,39,.45);
  --k-track:        #332818;   /* barre vuote (timer/difesa) */
  --k-scrim:        rgba(10,7,4,.6);
  --k-grad-oro:     linear-gradient(#D4AC2E,#BE9720);
  --k-grad-hdr:     linear-gradient(#1D1610,#1A130E);
  --k-grad-abar:    linear-gradient(#1D1610,#17120C);
  --k-ombra-oro:    0 3px 0 #8F6F14;

  /* Spaziatura (base 4px) */
  --k-s1: 4px; --k-s2: 8px; --k-s3: 12px; --k-s4: 16px;
  --k-s5: 20px; --k-s6: 24px; --k-s7: 32px; --k-s8: 40px;

  /* Tipografia */
  /* ⚠️ QUATTRO CARATTERI, QUATTRO MESTIERI — e il primo nome inganna.
     `--k-font` NON è un carattere del pacchetto: è quello di SISTEMA. Chi lo scrive
     credendo di prendere il kit ottiene Segoe UI. Sta bene dov'è (bottoni secondari,
     campi, chip, etichette tracciate: il chrome, che deve sembrare nativo), ma non
     va mai messo su un testo che si LEGGE. */
  --k-font:         -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* titoli, verdetti, numeri importanti, bottoni primari */
  --k-font-display: 'Cinzel', Georgia, serif;
  /* i testi che si leggono: domande, spiegazioni, riepiloghi, prose brevi */
  --k-font-lettura: 'EB Garamond', Georgia, serif;
  /* le cifre sulla carta — il file c'è e mappa.js lo usa da sempre; mancava il nome */
  --k-font-numeri:  'Bebas Neue', 'Cinzel', sans-serif;
  --k-t-xs: 11px; --k-t-sm: 12.5px; --k-t-md: 14px; --k-t-lg: 15.5px;
  --k-t-xl: 17px; --k-t-2xl: 21px; --k-t-3xl: 24px;

  /* Raggi / elevazioni */
  --k-r-xs: 9px; --k-r-sm: 12px; --k-r-md: 14px; --k-r-lg: 24px; --k-r-pill: 999px;
  --k-elev-1: 0 6px 18px rgba(0,0,0,.5);
  --k-elev-2: 0 -14px 40px rgba(0,0,0,.6);
  --k-elev-3: 0 8px 32px rgba(0,0,0,.6);
}

/* ─── Testo / intestazioni ───────────────────────────────────────────── */
.k-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--k-gold);
}
.k-titolo {
  font-family: var(--k-font-display); font-weight: 700;
  font-size: var(--k-t-3xl); letter-spacing: .5px; color: var(--k-ink-forte);
}
.k-sotto { font-size: 13.5px; color: var(--k-ink-muted); }

/* 👑 LA CORONA ACCANTO A UNA PAROLA (`UI.coronaSlot`) — «le corone non sono allineate ai
   testi» (owner, 5 agosto 2026).
   ⚠️⚠️ Il riquadro della corona è alto 1,45 volte la sua larghezza (serve al Re per
   starci in piedi) e l'inchiostro è posato sul FONDO, col vuoto sopra. Centrare quel
   riquadro su una riga di testo lo abbassa, e la corona finisce sotto le lettere.
   MISURATO in `anteprima_corone`: 5 px sotto il piede del testo a tutti e cinque i gradi;
   nello slot, 0. ⚠️ E non è `vertical-align`: in un contenitore flex è ignorato. */
.k-corona-slot { flex: 0 0 auto; display: inline-flex; align-items: flex-end;
  height: 1.15em; overflow: visible; }
.k-corona-slot > img { display: block; }

/* 📦 IL RIQUADRO dei blocchi di una scheda (Potenza · gerarchia · titoli · lealtà ·
   accordi · podio). ⚠️ Era scritto TRE volte: due helper con lo stile in linea dentro
   `_apriCompagnia` e un terzo vestito nell'HTML per gli accordi — che infatti si vedeva
   diverso dagli altri («scrivili fighi come il resto», owner). L'occhiello è quello del
   kit, l'unico del gioco: la regola sta in `stile.css` accanto ai sotto-titoli della
   diplomazia, e quattro modi di scrivere la stessa cosa si vedono come sciatteria anche
   senza saperli nominare.
   ⚠️ IL MARGINE È DELLA FAMIGLIA, non del singolo riquadro: era scritto in linea
   (`style="margin:2px 0 10px"`) sui due che vivono nel pannello personale — la Potenza e
   la lealtà — e su nessuno degli altri, così lo stesso blocco stava più staccato dei
   vicini a seconda di chi l'aveva disegnato. Serve dove il riquadro sta DA SOLO in una
   colonna stretta (`#stats-corpo` ha `gap: 2px`, che tiene uniti i comandi lì sotto);
   dentro una sezione di scheda lo azzera `.k-prof-blocco > .k-prof-riq` (stile.css),
   perché lì lo spazio lo decide il contenitore. */
.k-prof-riq { padding: 11px 13px; border-radius: 12px; margin: 0 0 7px;
  background: var(--k-surface-3, #211912);
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.18)); }
.k-prof-riq > .k-eyebrow { display: block; margin: 0 0 7px; }

/* ─── Icone SVG (UIKit.icona) ────────────────────────────────────────── */
.k-ico { flex: 0 0 auto; vertical-align: -3px; }

/* ─── Bottoni ────────────────────────────────────────────────────────── */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; background: none;
  font-family: var(--k-font); color: var(--k-ink);
  min-height: 46px; padding: 0 18px; border-radius: var(--k-r-sm);
  font-size: var(--k-t-md); font-weight: 600; line-height: 1.2;
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
}
.k-btn:active { transform: translateY(1px); }
.k-btn[disabled] { opacity: .45; pointer-events: none; }
.k-btn--primario {
  background: var(--k-grad-oro); color: var(--k-su-oro);
  box-shadow: var(--k-ombra-oro);
  font-family: var(--k-font-display); font-weight: 800;
  font-size: var(--k-t-lg); letter-spacing: 1.8px; text-transform: uppercase;
  min-height: 54px; border-radius: 13px;
}
.k-btn--primario:active { box-shadow: 0 1px 0 #8F6F14; transform: translateY(2px); }
.k-btn--secondario { background: var(--k-btn-scuro); border: 1px solid rgba(201,162,39,.40); color: var(--k-ink); }
.k-btn--ghost { border: 1px solid rgba(198,183,148,.35); color: var(--k-ink-soft); }
.k-btn--pericolo { border: 1px solid rgba(169,63,53,.6); color: var(--k-danger-testo); }
/* F6.d — CTA "crea" evidenziata (carta iscrizione + selettore clan): tratteggio
   oro su fondo tenue = alternativa ben visibile senza rubare peso al percorso
   principale (scegliere un clan esistente). */
.k-btn--crea {
  background: rgba(201,162,39,.08);
  border: 1.5px dashed var(--k-border-forte);
  color: var(--k-gold-bright); font-weight: 700; min-height: 48px;
}
.k-btn--mini {
  min-height: 38px; padding: 0 18px; border-radius: 11px;
  font-family: var(--k-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
/* Costo/nota dentro il bottone primario (es. "1 attacco") */
/* ⚠️ La pastiglia del costo nasce per il bottone PRIMARIO, che è dorato: l'inchiostro
   scuro ci si legge benissimo. Sugli altri — secondario, ghost — il fondo è scuro e quel
   colore sparisce (verificato guardando il bottone del porto: il costo era invisibile). */
.k-btn--secondario .k-costo,
.k-btn--ghost .k-costo,
.k-btn--pericolo .k-costo { background: rgba(201,162,39,.16); color: var(--k-gold-bright, #E5C96B); }
.k-btn .k-costo {
  font-family: var(--k-font); font-size: var(--k-t-xs); font-weight: 700;
  letter-spacing: .4px; text-transform: none;
  padding: 3px 9px; border-radius: var(--k-r-pill);
  background: rgba(36,26,7,.18); color: #3A2B08; margin-left: 2px;
}

/* ─── Chip / badge ───────────────────────────────────────────────────── */
.k-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 34px; padding: 0 10px; border-radius: var(--k-r-pill);
  font-size: var(--k-t-md); font-weight: 600;
  background: rgba(201,162,39,.10); border: 1px solid var(--k-border);
  color: var(--k-gold-bright);
}
.k-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--k-r-pill);
  font-size: var(--k-t-xs); font-weight: 800;
  background: var(--k-wax); color: #F5E9D9;
}

/* ─── Card (con angoli incisi = firma della direzione) ──────────────── */
.k-card {
  position: relative;
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-tenue);
  border-radius: var(--k-r-md);
  padding: 14px;
}
/* ⚠️⚠️ GLI ANGOLI INCISI SONO SFONDO, NON PSEUDO-ELEMENTI — e la ragione è lo scorrimento.
   Erano `::before`/`::after` in `position:absolute`, e l'owner (7 agosto 2026) ha visto che
   *«in tutte le schede del gioco, se troppo lunghe, l'angolo giallo in basso a destra non
   compare in fondo alla scheda, ma prima»*. In una scheda che scorre (otto di queste carte
   hanno `max-height:8Xvh; overflow-y:auto` scritto nel loro `style`) il blocco contenitore
   di un figlio assoluto è il **padding box fermo all'origine dello scorrimento**: i due
   angoli restano incollati al contenuto e se ne vanno con lui. Scorrendo fino in fondo non
   se ne vedeva NESSUNO dei due — il difetto era anche peggio di come è stato segnalato.
   Lo sfondo di un contenitore che scorre, invece, sta fermo sulla cornice
   (`background-attachment: scroll` = fisso rispetto all'ELEMENTO, non ai suoi contenuti):
   gli angoli restano ai quattro spigoli visibili, e quando si è in fondo il basso visibile
   È la fine della scheda — che è dove l'owner li vuole.
   ⚠️ La geometria è IDENTICA a prima: `background-origin` è il padding box, lo stesso
   riquadro a cui si ancorava `position:absolute`, quindi i 5 px valgono dal bordo interno
   comunque sia l'imbottitura (ci sono carte con `padding:0`).
   ⚠️ NON scrivere `background:` (la forma breve) nello `style` di una `.k-card--incisa`:
   azzererebbe `background-image` e gli angoli sparirebbero in silenzio. Se serve un altro
   colore si cambia `--k-surface-2` o si usa `background-color`. Lo controlla
   `test_angoli_incisi.mjs`. */
.k-card--incisa {
  --k-angolo-inciso: rgba(229,201,107,.7);
  background-image:
    linear-gradient(var(--k-angolo-inciso), var(--k-angolo-inciso)),
    linear-gradient(var(--k-angolo-inciso), var(--k-angolo-inciso)),
    linear-gradient(var(--k-angolo-inciso), var(--k-angolo-inciso)),
    linear-gradient(var(--k-angolo-inciso), var(--k-angolo-inciso));
  background-repeat: no-repeat;
  background-size: 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px;
  background-position:
    left 5px top 5px, left 5px top 5px,
    right 5px bottom 5px, right 5px bottom 5px;
}

/* ─── Liste / righe ──────────────────────────────────────────────────── */
.k-list { display: flex; flex-direction: column; }
.k-riga {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; font-size: var(--k-t-md); color: var(--k-ink);
  border-bottom: 1px solid rgba(201,162,39,.10);
}
.k-riga:last-child { border-bottom: none; }
.k-riga b { font-family: var(--k-font-display); font-size: var(--k-t-lg); }

/* ─── Testata sezione "forze" (foglio attacchi, mockup 05) ───────────── */
.k-fz-testa {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--k-ink-soft);
}
.k-fz-testa b { font-family: var(--k-font-display); font-size: 19px; color: var(--k-ink-forte); }
.k-fz-testa b i { font-style: normal; font-size: 13px; opacity: .6; }
.k-ca-desc {
  padding: 6px 2px 4px; font-size: 12.5px; color: var(--k-ink-muted); line-height: 1.45;
  border-bottom: 1px solid rgba(201,162,39,.10);
}

/* ─── Blocco difesa cella (Fase 3, mockup 02-zona) ───────────────────── */
.k-dif {
  background: var(--k-surface-2); border: 1px solid rgba(201,162,39,.20);
  border-radius: var(--k-r-md); padding: 12px 14px; text-align: left;
}
.k-dif-testa { display: flex; align-items: center; justify-content: space-between; }
.k-dif-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--k-ink-soft);
}
.k-dif-num { font-family: var(--k-font-display); font-size: 16px; color: var(--k-ink-forte); }
.k-dif-bar { display: flex; gap: 5px; margin: 10px 0 8px; }
.k-dif-bar i { flex: 1; height: 9px; border-radius: 3px; background: #332818; }
.k-dif-bar i.on { background: linear-gradient(var(--k-wax-bright), var(--k-wax)); }
/* 🕳️ F6.l — logoramento: la tacca del livello corrente si SVUOTA da destra
   (--dif-fr = frazione residua colorata; il resto è il fondo vuoto). */
.k-dif-bar i.on.scala {
  background: linear-gradient(90deg,
    var(--k-wax-bright) var(--dif-fr, 100%), #332818 var(--dif-fr, 100%));
}
/* 👑 Barra difesa CONTINUA per capitali molto fortificate (difMax > 12): un'unica
   barra proporzionale invece di decine di tacche. Il numero N/M la spiega. */
.k-dif-bar.k-dif-cont { display: block; gap: 0; height: 11px; border-radius: 4px;
  background: #332818; overflow: hidden; }
.k-dif-bar.k-dif-cont > span { display: block; height: 100%;
  background: linear-gradient(90deg, var(--k-wax-bright), var(--k-wax)); }
.k-dif-hint { font-size: 12px; line-height: 1.45; color: var(--k-ink-muted); margin: 0; text-align: center; }
/* La stessa riga, quando dice una cosa che si sta PERDENDO (raccolto oltre il tetto della
   borsa): stesso posto e stessa misura, colore d'allarme — come .k-titolo--allarme. */
.k-dif-hint--allarme { color: var(--k-danger-testo); margin-top: 4px; }

/* ─── Esito quiz (Fase 3, mockup 04): sigillo ceralacca + reward ─────── */
/* 🏅 IL SIGILLO DELL'ESITO — il segno grande in cima alla schermata del risultato.
   ⚠️⚠️ ERA IN CERALACCA ROSSA anche quando avevi VINTO, e l'owner l'ha letto per quello
   che sembra: «quando indovino esce [un segno] rosso che non è bella se indovino»
   (5 agosto). L'intenzione era araldica — un decreto sigillato — ma in un'interfaccia il
   rosso dice «hai sbagliato», e nessuno lo disimpara guardando una ceralacca. Qui la
   scala del gioco è già chiara altrove: ORO = hai vinto, e lo spento = non stavolta.
   ⚠️ `--k-wax` NON si tocca: è giusto dov'è (le barre della difesa, i pericoli). Cambia
   solo questo sigillo, che è l'unico posto dove il rosso premiava. */
.k-es-sigillo {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #2A1E0D;
  background: radial-gradient(circle at 35% 28%, #F5DE8B, var(--k-gold, #C9A227) 72%);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.16);
}
.k-es-sigillo--spento {
  background: radial-gradient(circle at 35% 30%, #4A4038, #2E2620);
  color: var(--k-ink-muted);
  box-shadow: 0 3px 10px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.05);
}
/* 🏛️ IL COLPO DI TIMBRO — il sigillo si posa, non compare.
   ⚠️ È un'animazione su un fatto GIÀ ACCADUTO (l'esito è in mano), quindi è corta e non
   trattiene nessuno: 380 ms. Non è la sospensione finta col dado tolta il 5 agosto —
   quella fingeva un'attesa che non c'era, questa accompagna una rivelazione che c'è.
   ⚠️ Lo spento entra SENZA rimbalzo: un tonfo allegro su una sconfitta è una presa in giro. */
.k-es-sigillo { animation: k-timbro .38s cubic-bezier(.2, 1.5, .4, 1) both; }
.k-es-sigillo--spento { animation: k-timbro-spento .3s ease-out both; }
@keyframes k-timbro {
  0%   { transform: scale(1.5) rotate(-12deg); opacity: 0; }
  55%  { transform: scale(.93) rotate(2deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}
@keyframes k-timbro-spento {
  0%   { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
/* ✔️✖️ I punti del quiz, uno per domanda risposta (erano ⭐ e 💔). */
.k-es-punto {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.18));
  animation: k-punto .3s cubic-bezier(.2,1.5,.4,1) both;
}
.k-es-punto--ok { color: var(--k-gold-bright, #E5C96B); background: rgba(201,162,39,.12); }
.k-es-punto--ko { color: var(--k-ink-muted, #B3A283); background: rgba(255,255,255,.04); }
/* ⚠️ I punti si accendono UNO ALLA VOLTA: `nth-child` invece di una variabile passata dal
   codice, perché qui l'ordine è già nel markup e non serve che il codice lo ripeta. */
.k-es-punto:nth-child(2) { animation-delay: .07s; }
.k-es-punto:nth-child(3) { animation-delay: .14s; }
.k-es-punto:nth-child(4) { animation-delay: .21s; }
.k-es-punto:nth-child(5) { animation-delay: .28s; }
@keyframes k-punto {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
/* ⚠️ `flex-wrap` non è un vezzo: nello stato «Borsa piena» .rw-cosa porta una FRASE,
   non un'etichetta, e va a capo. Senza wrap, `baseline` allinea .rw-tot alla PRIMA
   riga della frase e «Borsa: n/max» resta appeso in alto a destra. */
/* ⚠️ `center` e non `baseline` — misurato: con `baseline` .rw-tot cadeva 3,5 px più in
   basso degli altri due (l'owner l'ha visto a occhio, io no). La causa: .rw-cosa è un
   `inline-flex` e la linea di base di un inline-flex è quella del suo PRIMO figlio, che
   qui è l'IMMAGINE del bagigio — non il testo. Così «Bagigi» era allineato al bordo
   inferiore della monetina e «Borsa» alla propria linea di base del testo: due
   riferimenti diversi, che non possono combaciare. Con tre corpi diversi (24, 15, 13) e
   un'immagine in mezzo, il centro è l'unico allineamento che significhi qualcosa. */
.k-reward {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  background: var(--k-surface-2); border: 1px solid rgba(201,162,39,.22);
  border-radius: var(--k-r-md); padding: 12px 14px;
}
.k-reward .rw-piu { font-family: var(--k-font-display); font-weight: 800; font-size: 24px; color: var(--k-gold-bright); }
/* ⚠️ Questi due erano gli unici senza un carattere: ereditavano quello di sistema.
   Nello stato «Borsa piena» .rw-piu non viene emesso, quindi era l'unica riga del
   gioco senza un solo carattere del pacchetto — ed è quella che l'owner ha additato. */
.k-reward .rw-cosa { display: inline-flex; align-items: center; gap: 5px; font-family: var(--k-font-lettura); font-weight: 700; font-size: 15px; color: var(--k-ink); }
.k-reward .rw-tot { font-family: var(--k-font-lettura); font-size: 13px; color: var(--k-ink-muted); }
/* ─── Barra a tacche (difesa 5 livelli) ──────────────────────────────── */
.k-bar { display: flex; gap: 5px; }
.k-bar i { flex: 1; height: 9px; border-radius: 3px; background: var(--k-track); }
.k-bar i.on { background: linear-gradient(var(--k-wax-bright), var(--k-wax)); }

/* ─── Sigillo di ceralacca (esiti/conferme) ──────────────────────────── */
.k-sigillo {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #C24437, #8E2F26);
  color: #F5DFCB;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 -3px 6px rgba(60,10,5,.55);
}
.k-sigillo--verde { background: radial-gradient(circle at 35% 30%, #6E9A62, #4A6E41); color: #EEF4E8; }

/* ─── Guscio modale UIKit (riusa la struttura legacy .modal) ─────────── */
.modal.k-modal { background: var(--k-scrim); }
.modal.k-modal .modal-contenuto {
  background: var(--k-surface);
  border: 1px solid var(--k-border-forte);
  border-radius: var(--k-r-lg) var(--k-r-lg) 0 0;
  box-shadow: var(--k-elev-2);
  color: var(--k-ink);
  font-family: var(--k-font);
  padding: 18px 20px 30px;
}
@media (min-width: 600px) {
  .modal.k-modal .modal-contenuto { border-radius: var(--k-r-lg); }
}
.k-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(201,162,39,.4); margin: 0 auto 10px; }
.k-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); color: var(--k-ink-soft);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.k-corpo { font-size: var(--k-t-md); line-height: 1.45; }
.k-corpo p { margin: 6px 0; }
.k-azioni { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.k-azioni .k-btn { width: 100%; }

/* ─── Barra azione HUD (Fase 2) — mockup 01-mappa ────────────────────── */
.k-abar-rispondi {
  flex: 1.45; height: 60px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: none; border-radius: var(--k-r-md); cursor: pointer;
  background: var(--k-grad-oro); color: var(--k-su-oro);
  box-shadow: var(--k-ombra-oro);
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
}
.k-abar-rispondi:active { transform: translateY(2px); box-shadow: 0 1px 0 #8F6F14; }
.k-abar-rispondi.spenta { filter: saturate(.45) brightness(.72); }
.k-abar-r-titolo {
  font-family: var(--k-font-display); font-weight: 800; font-size: 17px;
  letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.1;
}
.k-abar-r-sotto {
  font-size: 11px; font-weight: 700; color: #4D3B10;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 8px; border-radius: var(--k-r-pill);
}
.k-abar-usa {
  flex: 1; height: 60px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(201,162,39,.40); border-radius: var(--k-r-md); cursor: pointer;
  background: var(--k-btn-scuro); color: var(--k-ink);
  -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
}
.k-abar-usa.spenta { opacity: .45; }
.k-abar-usa:not(.spenta) { box-shadow: 0 0 12px rgba(201,162,39,.35); }
/* ⚠️ ATTACCA è la GEMELLA di RISPONDI: verbo sopra nel carattere display, risorsa
   sotto. Prima il numero stava sopra e l'etichetta sotto — invertite fra loro, i due
   pulsanti si leggevano in due modi diversi pur facendo la stessa cosa (un verbo e la
   sua risorsa). Le misure sono quelle di .k-abar-r-titolo / .k-abar-r-sotto. */
.k-abar-u-titolo {
  font-family: var(--k-font-display); font-weight: 800; font-size: 17px;
  letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.1;
  color: var(--k-gold-bright);
}
.k-abar-u-riga { display: flex; align-items: center; gap: 5px; color: var(--k-ink); margin-top: 2px; }
.k-abar-u-riga b { font-family: var(--k-font-display); font-weight: 700; font-size: 15px; line-height: 1; }
.k-abar-u-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--k-ink-soft);
}
/* Ruota: tondo 60px, dot rosso quando il giro è pronto, countdown in cooldown */
.k-abar-ruota {
  width: 60px; height: 60px; flex: 0 0 60px; padding: 0; /* via il padding UA dei button (Android) */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(201,162,39,.40); border-radius: 50%; cursor: pointer;
  background: var(--k-btn-scuro); color: var(--k-gold-bright); position: relative;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.k-abar-ruota.in-cooldown { color: var(--k-ink-muted); border-color: rgba(201,162,39,.18); opacity: .8; }
/* Pronta: invito DELICATO al tap — respiro di bagliore dorato (keyframes proprio,
   niente dipendenza dal vecchio pulse-glow) + etichetta "Attacchi extra" nel cerchio */
@keyframes k-ruota-invito {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
  50%      { box-shadow: 0 0 10px 2px rgba(201,162,39,.45); }
}
.k-abar-ruota:not(.in-cooldown):not(:disabled) {
  animation: k-ruota-invito 2.6s ease-in-out infinite;
  border-color: rgba(201,162,39,.7);
  color: var(--k-gold-bright);
}
.k-abar-ruota-ico { display: flex; align-items: center; justify-content: center; line-height: 0; }
.k-abar-ruota-lbl { display: block; text-align: center; line-height: 1.15; }
.k-abar-ruota-lbl span {
  display: block; font-size: 7.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: var(--k-ink-soft);
}
.k-abar-ruota-cd { font-size: 9px; font-weight: 700; letter-spacing: .3px; line-height: 1; }
.k-abar-ruota-dot {
  position: absolute; top: 2px; right: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--k-wax-bright); border: 2px solid var(--k-bg);
}
/* Purgatorio: bottone ceralacca full-width al posto della barra (via body.cqz-purgatorio) */
.k-abar-purg {
  flex: 1; height: 60px; min-width: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid rgba(0,0,0,.25); border-radius: var(--k-r-md); cursor: pointer;
  background: linear-gradient(135deg, var(--k-wax-bright), #8E2F26); color: #F5E9D9;
  box-shadow: 0 3px 0 #6E241D, 0 0 18px rgba(194,68,55,.45);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.k-abar-purg .k-abar-r-sotto { color: #F0CFC5; }
/* Banner modalità conquista (kit). F6.k: a RIDOSSO dell'header (56px+safe) —
   "così la mappa si vede di più" (collaudo); bollicina chat e CTA scarica-app
   occupano la stessa zona → nascoste con body.cqz-mc-attiva (sotto). */
.k-mc-banner {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 62px); left: 50%;
  transform: translateX(-50%); z-index: 5000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(440px, calc(100vw - 24px));
  background: var(--k-surface); border: 1px solid var(--k-border-forte);
  border-radius: var(--k-r-md); padding: 14px 18px;
  box-shadow: var(--k-elev-1); color: var(--k-ink); font-size: 1rem;
}
body.cqz-mc-attiva #btn-chat-flot,
body.cqz-mc-attiva #cta-app-banner { display: none !important; }
.k-mc-riga { display: flex; align-items: center; gap: 12px; }
.k-mc-num {
  font-family: var(--k-font-display); font-weight: 800; color: var(--k-gold-bright);
  font-size: 1.5rem; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
}
.k-mc-testo { color: var(--k-ink); font-weight: 600; flex: 1; min-width: 0; line-height: 1.3; font-size: .95rem; }
.k-mc-testo b { color: var(--k-gold-bright); }
/* 🎯 I BERSAGLI DEL BANNER ATTACCO — chip in riga, non più voci di un elenco.
   ⚠️ QUI STAVANO `.k-mc-voce` e compagnia: righe larghe tutto il banner, con la
   freccina `›` a destra, dentro un contenitore che si apriva e chiudeva col chevron.
   Via il 5 agosto su richiesta dell'owner: la tendina rivelava una voce sola. Un chip
   fa la stessa cosa (vola sul bersaglio) ma si vede senza aprire niente, e in riga ce
   ne stanno due — che è il massimo che questa modalità abbia mai: terra e mare.
   ⚠️ `flex-wrap` perché con l'inglese e i caratteri grandi i due chip vanno a capo
   invece di stringersi fino a tagliare il testo. */
/* ⚠️ La regola sta sulla CLASSE e non su `#mc-banner-righe`, e non è pignoleria:
   `anteprima_banner_attacco.mjs` riscrive ogni `id="` in `data-id="` per non avere id
   doppi nella pagina di prova. Un selettore per id lì dentro non aggancia mai — la
   prova mostrerebbe un banner impaginato male e nessuno saprebbe se è il banner o la
   prova. Con la classe, quello che si guarda è quello che esce. */
.k-mc-chip-riga { display: flex; flex-wrap: wrap; gap: 7px; }
.k-mc-chip-riga:empty { display: none; }
.k-mc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 1 1 auto; min-width: 0; justify-content: center;
  background: var(--k-surface-2, #241C13);
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.18));
  border-radius: 999px; padding: 8px 14px; min-height: 38px;
  color: var(--k-ink, #EFE6D2); font-family: var(--k-font); font-size: .82rem; font-weight: 600;
  cursor: pointer; line-height: 1.2; white-space: nowrap;
}
.k-mc-chip:active { transform: scale(.97); }
.k-mc-chip .k-mc-chip-ico { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--k-gold-bright, #E5C96B); }
.k-mc-chip .k-mc-chip-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* F6.e — pallino ceralacca sul titolo di un capitolo richiudibile (dip-cap):
   segnala che dentro c'è qualcosa che chiede un'azione (invito/voto coalizione). */
.k-cap-dot { color: #C24437; font-size: .72em; vertical-align: 1px; }

/* ⚠️ QUI STAVANO `.k-mc-toggle` e le due regole di `.compresso`, cioè il banner
   attacco richiudibile (F6.c). Via il 5 agosto insieme alla freccetta: il banner
   serviva a comprimerlo perché copriva la carta con un elenco sotto, e senza
   quell'elenco è alto la metà. La preferenza `cqz_mc_compresso` non si legge più e
   viene CANCELLATA in `_mcVincoloTutApplica` — lasciarla lì e togliere solo il
   bottone bloccherebbe il banner chiuso, senza niente per riaprirlo. */

/* 🖌️ IL PENNELLO (28 lug) — si dipinge su più zone e si conferma una volta sola.
   ⚠️ Resta visibile anche a banner COMPRESSO: è l'azione principale della
   modalità attacco, non un dettaglio dei bersagli. */
.k-pen { display: flex; flex-direction: column; gap: 8px; }
/* ⚠️ QUI STAVA L'INTERRUTTORE ⚔️/🛡️ (`.k-pen-modi`, `.k-pen-modo`). Via il 5 agosto,
   con la sua metà scudo: owner, «per rinforzare non serve pennello, vado direttamente
   nelle schede capitale/torre/porto/mura e con gilda costruttori». Con un modo solo non
   c'era niente da commutare. Il rinforzo NON è morto: sta sulla scheda di ogni struttura
   («Aumenta le difese») e nella Gilda dei costruttori. */
/* il conteggio: quante zone · quanto costano · quanto oro resta */
.k-pen-conta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 4px 8px; min-height: 20px; font-size: .84rem; line-height: 1.25;
  color: var(--k-ink-soft, #C6B794); text-align: center;
}
.k-pen-conta b { color: var(--k-gold-bright, #E5C96B); font-weight: 800; font-size: .95rem; }
.k-pen-costo::before, .k-pen-resta::before { content: '·'; margin-right: 8px; opacity: .55; }
.k-pen-resta { color: var(--k-ink-muted, #B3A283); }
.k-pen-invito { font-style: italic; opacity: .85; }
.k-pen-invito::before { content: none; }
/* a selezione vuota non c'è niente da confermare: resta solo l'invito */
.k-pen.vuoto .k-pen-azioni { display: none; }
.k-pen-azioni { display: flex; gap: 8px; }
.k-pen-annulla {
  flex: 0 0 auto; min-height: 46px; padding: 0 16px;
  background: var(--k-btn-scuro, #1B140D);
  border: 1px solid rgba(198,183,148,.35); border-radius: var(--k-r-sm, 12px);
  font-family: var(--k-font); font-size: .9rem; font-weight: 700;
  color: var(--k-ink-soft, #C6B794); cursor: pointer;
}
.k-pen-annulla:active { transform: scale(.98); }
.k-pen-ok { flex: 1; min-width: 0; }

/* ⚠️ QUI STAVANO `#mc-banner-ob` e `.k-mc-ob*`, la striscia OBIETTIVO del banner attacco.
   Erano CSS ORFANO: la striscia è uscita dal pannello il 30 luglio (owner) e da allora
   nessun JS generava più quegli elementi, ma le regole erano rimaste a occupare il foglio.
   ⚠️ La MECCANICA dell'obiettivo è viva e non si tocca: vive nel Consiglio, col picker
   sulla carta, la celebrazione qui sotto e il campo `locali.obiettivo` sul server. */

/* F6.k — celebrazione conquista OBIETTIVO: card non bloccante al centro
   (pointer-events none), entra col timbro e svanisce da sola. */
.k-ob-celebra {
  position: fixed; inset: 0; z-index: 9500; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.k-ob-celebra-card {
  background: var(--k-surface); border: 1px solid rgba(201,162,39,.6);
  border-radius: var(--k-r-md); box-shadow: var(--k-elev-2), var(--k-ombra-oro);
  padding: 22px 30px; text-align: center; max-width: 82vw;
  animation: kObPop 3.4s ease-in-out forwards;
}
.k-ob-celebra-ico { font-size: 2.4rem; line-height: 1; }
.k-ob-celebra-tit {
  font-family: var(--k-font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--k-gold-bright); margin-top: 8px; letter-spacing: .5px;
}
.k-ob-celebra-nome { color: var(--k-ink); font-size: .92rem; margin-top: 5px; }
@keyframes kObPop {
  0% { opacity: 0; transform: scale(.72); }
  10% { opacity: 1; transform: scale(1.04); }
  15% { transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}

/* ─── Toast (UIKit.toast — sostituisce il vecchio mostraToast) ─────────
   Centro schermo (Fase 3.3, richiesta proprietario: "quelli in alto non si
   vedono"): grande, non intercetta i tap (pointer-events none). */
.k-toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  /* width max-content: senza, un fixed con left:50% si impacchetta a mezzo schermo */
  width: max-content; max-width: 86vw; text-align: center;
  padding: 16px 26px; border-radius: var(--k-r-sm);
  font-family: var(--k-font); font-size: 1.1rem; font-weight: 600;
  border: 1px solid rgba(229,201,107,.35);
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  animation: kToastIn .3s ease;
  pointer-events: none;
}
.k-toast--successo {
  background: linear-gradient(135deg, #4F7A46, #3C5F36);
  color: #F1EADB; border: 1px solid rgba(229,201,107,.4);
}
.k-toast--avviso { background: var(--k-grad-oro); color: var(--k-su-oro); }
.k-toast--errore { background: linear-gradient(135deg, #C24437, #93352B); color: #F5E9D9; }
.k-toast.k-via { opacity: 0; transition: opacity .5s; }
/* 👑 Il segno del toast, prima del testo.
   ⚠️ `inline-flex` + `vertical-align: middle`: un `<svg>` in mezzo al testo si appoggia
   alla LINEA DI BASE e sprofonda sotto le lettere — è lo stesso inciampo della corona
   nella riga «Ha giurato fedeltà a …». Il toast è centrato, e un segno che casca di due
   pixel si vede tutto. */
.k-toast-ico {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-right: 8px; opacity: .92;
}
@keyframes kToastIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ─── Fascia "terra alleata" nella finestra cella (Fase 3.3) ─────────── */
.k-fascia-alleato {
  display: block; margin: 0 0 10px; padding: 11px 14px;
  border-radius: var(--k-r-sm); text-align: center;
  background: linear-gradient(135deg, rgba(95,138,84,.26), rgba(60,95,54,.20));
  border: 1px solid rgba(127,163,111,.55);
  color: var(--k-ink); font-weight: 600; font-size: .95rem; line-height: 1.35;
}

/* ─── Replay player (R1) ── z-index: INLINE dal JS (UIKit.Z.replay, C2) ── */
.k-replay-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom, 0px)); /* sopra la barra azione, stessa quota della pill dip */
  width: min(480px, calc(100vw - 20px));
  display: flex; flex-direction: column; gap: 6px;
  background: var(--k-surface); border: 1px solid var(--k-border-forte);
  border-radius: var(--k-r-md); padding: 10px 14px 6px;
  box-shadow: var(--k-elev-1);
}
.k-replay-testa { display: flex; align-items: center; gap: 8px; }
.k-replay-btn { /* area tocco >=38px */
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-btn-scuro); border: 1px solid var(--k-border-tenue); border-radius: var(--k-r-xs);
  color: var(--k-gold-bright); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.k-replay-speed { font-family: var(--k-font-display); font-weight: 800; font-size: 14px; }
.k-replay-info { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
#replay-giorno  { font-family: var(--k-font-display); font-weight: 700; font-size: 15px; color: var(--k-ink-forte); white-space: nowrap; }
#replay-counter { font-size: 11px; color: var(--k-ink-muted); font-variant-numeric: tabular-nums; }
.k-replay-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; /* width fluida + area tocco */
  background: transparent; touch-action: none; cursor: pointer;          /* touch-action:none = scrub senza scroll */
  margin: 0;
}
.k-replay-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--k-track); border: 1px solid var(--k-border-tenue);
}
.k-replay-slider::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--k-track); border: 1px solid var(--k-border-tenue);
}
.k-replay-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--k-gold); border: 2px solid var(--k-gold-bright); margin-top: -9px;
}
.k-replay-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--k-gold); border: 2px solid var(--k-gold-bright);
}

/* Classifica replay: overlay interno a #contenitore-mappa (sopra i controlli
   zoom z:5) — NON e' figlio di body: fuori dal sistema Z/detector di boot. */
.k-replay-cls {
  position: absolute; top: 60px; left: 8px; z-index: 6;
  pointer-events: none; max-width: 200px; font-size: 11px;
  background: rgba(30, 23, 16, .9); border: 1px solid var(--k-border);
  border-radius: var(--k-r-sm); padding: 8px 12px; box-shadow: var(--k-elev-1);
}
.k-replay-cls-riga { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--k-ink); white-space: nowrap; overflow: hidden; }
.k-replay-cls-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.k-replay-cls-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.k-replay-cls-n    { color: var(--k-gold-bright); font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ─── Tutorial (Fase 6.a) ── card coach-mark "Sala di Guerra" ──────────── */
/* Posizionamento/z-index restano INLINE dal JS (overlay 20000-20002).      */
.k-tut-card {
  background: linear-gradient(165deg, var(--k-surface-2), var(--k-surface));
  border: 2px solid rgba(201, 162, 39, .5); /* animato da tutCardPulse (stile iniettato) */
  border-radius: var(--k-r-md);
  padding: 20px 18px 14px;
  text-align: center;
  color: var(--k-ink);
  box-shadow: var(--k-elev-2);
}
.k-tut-card h3 {
  margin: 0 0 8px; font-family: var(--k-font-display);
  font-weight: 700; font-size: 1.1rem; letter-spacing: .02em;
  color: var(--k-gold-bright);
}
/* ⚠️ Il segno in cima alla scheda del tutorial. Erano EMOJI DI SISTEMA (🏰 🗺️ ⚔️),
   scritte inline nel JS con un font-size a mano: sono le prime immagini che un iscritto
   vede del gioco, ed erano l'unica cosa che non sembrava disegnata sulla carta.
   Owner, 5 agosto: «le icone devono essere nel nostro stile, non quelle standard». */
.k-tut-glifo {
  display: flex; justify-content: center; margin-bottom: 6px;
  color: var(--k-gold-bright);
}
.k-tut-card p {
  margin: 0 0 14px; font-size: .92rem; line-height: 1.5;
  color: var(--k-ink);
}
.k-tut-card p b, .k-tut-card p strong { color: var(--k-gold-bright); }

/* ─── Classifica (Fase 4) ─────────────────────────────────────────────── */
/* Descrizioni brevi sotto i tab (perpetua/purgatorio) */
.k-cls-desc { font-size: .82rem; color: var(--k-ink-muted); margin: 0 0 8px; line-height: 1.4; }
.k-cls-desc b { color: var(--k-ink); }
/* Verde "delta" leggibile su fondo scuro (guadagni, risorti, frecce su) */
.k-cls-delta { color: #4FC47F; font-weight: 700; }
/* Riga classifica generata dai builder (perpetua/purgatorio/popup entrata) */
/* ⚠️ Righe più STRETTE per far posto a stemmi più GRANDI (owner, 5 agosto: «meno spazio
   tra un nome e l'altro, in modo da poter fare gli stemmi più grandini»). Il padding
   verticale scende da 9 a 5 e il margine da 6 a 4: l'insegna cresce di sei pixel e la
   riga resta alta uguale, perché quel che si toglie attorno si rimette dentro. */
.k-cls-riga {
  display: flex; align-items: center; gap: 10px;
  background: var(--k-surface-3);
  border-radius: 13px; padding: 5px 12px; margin-bottom: 4px;
  font-size: .9rem; color: var(--k-ink);
}
.k-cls-riga--clic { cursor: pointer; }
.k-cls-riga--clic:active { background: var(--k-surface-2); }
/* La TUA riga: pergamena dorata */
.k-cls-riga--tu {
  background: rgba(201,162,39,.12);
  border: 1px solid rgba(201,162,39,.45);
}
.k-cls-pos { font-family: var(--k-font-display); font-weight: 700; font-size: 15px; min-width: 22px; text-align: center; flex-shrink: 0; color: var(--k-gold); }
/* 🏳️ La bandiera della nazione, nello slot dov'era l'insegna. `line-height:1` perché
   un'emoji porta con sé l'interlinea del font di sistema e alzerebbe la riga; e su
   Windows questo elemento non viene proprio emesso (vedi `_bandieraCls` in ui.js). */
.k-cls-bandiera { font-size: 24px; line-height: 1; flex-shrink: 0; width: 30px; text-align: center; }
.k-cls-pos--top { color: var(--k-gold-bright); }
/* 🏆 Il podio dell'albo: oro, argento, bronzo — al posto delle tre emoji di sistema.
   ⚠️ Il primo posto porta il TROFEO del gioco, quindi qui serve solo che il glifo
   prenda il colore: `currentColor` lo eredita, come fanno le altre icone del kit. */
.k-cls-pos--oro     { color: var(--k-gold-bright); }
.k-cls-pos--argento { color: #C8CCD4; }
.k-cls-pos--bronzo  { color: #C08A5A; }
.k-cls-pos--oro svg { display: block; margin: 0 auto; }
/* Pastiglia che porta un SEGNO invece di una parola (le corone dell'ordinamento).
   ⚠️ Il nome del grado resta in `title`/`aria-label`: una corona sola non si legge
   con le dita, e chi usa un lettore di schermo non vede nessun disegno. */
.k-ctab--ico, .ctab--ico { padding: 4px 9px; display: inline-flex; align-items: center; }
.ctab--ico img { display: block; }
.k-cls-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-cls-punti { font-weight: 800; color: var(--k-gold-bright); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-cls-sub { font-size: .72rem; color: var(--k-ink-muted); }

/* ─── Classifica: mockup 06 (F4.c) ────────────────────────────────────── */
/* Maniglia sheet in testa al modal */
.k-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(201,162,39,.4); margin: 2px auto 8px; flex: 0 0 auto; }
/* Didascalia quieta in fondo alla lista */
.k-cls-caption { font-size: .78rem; color: var(--k-ink-muted); text-align: center; margin: 10px 4px 2px; line-height: 1.4; }
/* Stemma QUADRATO arrotondato (stile albo d'oro — scelta proprietario 4 lug:
   valorizza i loghi a sfondo trasparente): logo o INIZIALE Cinzel con anello
   (colore clan o oro tenue) */
/* 👑 L'INVOLUCRO DELLO STEMMA — serve solo quando c'è una corona sopra.
   ⚠️⚠️ La corona NON può stare dentro `.k-stemma`: quello ha `overflow: hidden` (gli
   serve, per ritagliare l'insegna dentro il raggio) e la taglierebbe a metà. L'owner ha
   chiesto che «la corona può sbordare dal quadrato assegnato», quindi vive qui fuori.
   ⚠️ `margin-top` positivo e non un `height` più alto: il riquadro resta quello che era,
   la corona sporge sopra, e la riga non si allarga per farle posto. */
.k-stemma-box { position: relative; flex: 0 0 auto; display: inline-flex; }
/* 👑 …e l'insegna che NON passa da `_stemmaHtml`. La scheda della cella e quella
   della Signoria disegnano il loro stemma a mano (`.dot-colore`, `.logo-locale-grande`),
   con `background-image` invece di un `<img>` dentro un involucro: per loro la corona si
   appende come figlio, e serve solo che il riquadro faccia da riferimento e la lasci
   uscire. ⚠️ `overflow: visible` è la stessa correzione già scritta poche righe più giù
   per `.mini-logo`/`.coal-av`: quella famiglia nasce con `overflow: hidden`, che
   taglierebbe la corona esattamente come faceva `.k-stemma`. */
/* ⚠️⚠️ Qui c'è SOLO `position`. L'`overflow: visible` sta più giù, accanto a
   `.mini-logo`/`.coal-av`, e NON per ordine sparso: `.dot-colore` dichiara
   `overflow: hidden` cinquecento righe più avanti, con la STESSA specificità (una
   classe) — e a parità vince l'ultima. Scritto qui, l'`overflow` perdeva e la corona
   della scheda cella veniva tagliata via: presente nel DOM, invisibile sullo schermo. */
.k-ins-corona { position: relative; }
/* ⚠️ Selettore SEMPLICE, non `.k-stemma-box .k-corona`: la corona deve posizionarsi allo
   stesso modo dovunque la si appenda, e legarla a un solo genitore vorrebbe dire
   riscrivere queste cinque righe per ogni scheda che ne vuole una. */
.k-corona {
  position: absolute; left: 50%; top: 0;
  /* ⚠️⚠️ IL −34% È MISURATO, NON SCELTO. La corona è disegnata al CENTRO di un riquadro
     quadrato, ma è larga e bassa: il suo piede cade al **51 %** dell'altezza del riquadro
     e la metà inferiore resta trasparente (misurato sui pixel, grado per grado). Col
     −74 % di prima il piede finiva al −23 % dell'insegna, cioè STACCATO — e siccome lo
     scarto è una frazione del riquadro, cresceva con la misura: impercettibile a 34 px,
     evidente nella scheda della Signoria a 64. Con il −34 % il piede appoggia appena
     dentro il bordo alto (≈ +8 %) e la corona sporge sopra, che è quel che l'owner ha
     chiesto: «si veda bene e non nasconda lo stemma». */
  transform: translate(-50%, -88%);
  pointer-events: none;
  /* un'ombra stretta, perché una corona chiara su un'insegna chiara sparisce */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}
.k-stemma {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--k-font-display); font-weight: 700; font-size: 16px;
  /* ⚠️ `background-color`, non la scorciatoia `background`: quella azzererebbe anche
     `background-size`, e chi disegna qui mette il logo in `background-image` inline. */
  background-color: #241B12; background-size: cover; background-position: center;
  color: var(--k-ink-soft); border: 0;
  overflow: hidden; text-transform: uppercase;
}
.k-stemma--lg { width: 44px; height: 44px; border-radius: 11px; font-size: 20px; color: var(--k-gold-bright); }
/* la piastrella scura serve solo a reggere l'INIZIALE: sotto un'insegna se ne va.
   ⚠️ Due regole, non una lista: un browser senza `:has()` scarterebbe l'intera lista,
   perdendo anche il selettore d'attributo che avrebbe capito. */
.k-stemma[style*="url("] { background-color: transparent; }
.k-stemma:has(img) { background-color: transparent; }
/* ⚠️ `inherit`, non un raggio suo: con l'anello in mezzo un 6 dentro un 8 si notava
   appena, senza si vedrebbe la piastrella affiorare ai quattro angoli. */
.k-stemma img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* Delta posizioni (tab Attuale): ▲ sale · ▼ scende · = stabile */
.k-cls-mossa { font-size: 11.5px; font-weight: 800; min-width: 28px; text-align: center; flex: 0 0 auto; }
.k-cls-mossa--su { color: var(--k-green-soft); }
.k-cls-mossa--giu { color: var(--k-danger-testo); }
.k-cls-mossa--pari { color: #8C8069; }

/* ─── Classifica, secondo giro (5 agosto 2026) ─────────────────────────────
   Sette voci al posto di undici elenchi annidati. Quel che segue serve a righe
   che dicono DUE cose — la Signoria e la persona — e a due controlli nuovi. */
/* Il nome sta su due righe: la Signoria sopra, chi la governa sotto.
   ⚠️ `min-width:0` è obbligatorio, o l'ellissi non scatta dentro un flex. */
.k-cls-nome-box { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.k-cls-nome-box .k-cls-nome { flex: none; }
/* 🏛️ La provincia dopo il nome del comune: in tono minore e col peso normale, o
   leggerebbe come parte del nome. ⚠️ Vive DENTRO `.k-cls-nome`, che tronca con l'ellissi:
   su un nome lungo sparisce la parentesi, non il nome — che è l'ordine giusto. */
.k-cls-dopo { font-weight: 400; color: var(--k-ink-muted); }
.k-cls-punti { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* Il saldo della settimana: il segno si vede, ed è tutto il punto di un saldo. */
.k-cls-su  { color: var(--k-green-soft, #7FA36F); }
.k-cls-giu { color: var(--k-danger-testo, #DE9C90); }
/* Il medagliere di una riga: le corone IN FILA. ⚠️ `.k-cls-punti` è una colonna, e senza
   questo guscio le tre corone si impilavano — righe alte il triplo e la terza tagliata. */
.k-cls-medaglie { display: flex; align-items: center; gap: 8px; }
/* Una medaglia: la corona del grado e quante ne tiene.
   ⚠️ La corona si chiede a 18 px e viene alta 1,45 volte tanto (le corone alte DEVONO
   venire alte): l'altezza della riga la decide questa immagine, non il numero. */
.k-cls-med {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--k-font-display); font-weight: 700; font-size: 13px;
  color: var(--k-gold-bright);
}
.k-cls-med img { flex: 0 0 auto; }
/* Avviso quieto al posto della lista: caricamento, errore, elenco vuoto. */
.k-cls-avviso {
  text-align: center; padding: 18px 12px;
  font-family: var(--k-font-lettura); font-size: .92rem; line-height: 1.45;
  color: var(--k-ink-muted);
}
/* 👑 L'invito al PRO in fondo alle due voci riservate: la stessa forma tratteggiata
   del bottone «crea», perché è un invito e non un muro. */
.k-cls-pro {
  margin-top: 4px; padding: 12px 14px; border-radius: 13px; cursor: pointer;
  background: rgba(201,162,39,.08); border: 1.5px dashed var(--k-border-forte);
  color: var(--k-gold-bright); font-weight: 700; font-size: .84rem; text-align: center;
}
.k-cls-pro:active { background: rgba(201,162,39,.14); }

/* ─── Navigatore di periodo (albo d'oro) ──────────────────────────────────
   ⚠️ Al posto di un `<select>` NATIVO del sistema operativo, che apriva il menu del
   telefono in mezzo a una pergamena. Stessa forma del passo-passo del replay, che è
   già il modo in cui questo gioco naviga i giorni — bersagli da 38 px compresi. */
/* ⏳ 9 agosto — «quanto manca al reset» sopra la classifica settimanale (owner: nella
   settimana «non c'è»). Sta sotto le due facce e sopra la lista, allineata a destra come
   una didascalia: è un'informazione di contorno, non una voce da toccare. */
.k-cls-reset { display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin: -2px 2px 8px; font-size: .72rem; letter-spacing: .02em;
  color: var(--k-ink-muted); }
.k-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.k-nav-btn {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-btn-scuro); border: 1px solid var(--k-border-tenue);
  border-radius: var(--k-r-xs); color: var(--k-gold-bright);
  font-family: var(--k-font-display); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.k-nav-btn[disabled] { opacity: .35; pointer-events: none; }
.k-nav-info { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.k-nav-eti {
  font-family: var(--k-font-display); font-weight: 700; font-size: 15px;
  color: var(--k-ink-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-nav-sub { font-size: 11px; color: var(--k-ink-muted); font-variant-numeric: tabular-nums; }

/* Sezioni del menu Impostazioni (F4.c) */
.k-imp-sez {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--k-gold); margin: 12px 2px 2px;
}
.k-imp-sez:first-of-type { margin-top: 2px; }

/* ─── Dadi battaglia navale (F5.c): tremano durante la risoluzione ────── */
.k-dado {
  display: inline-block; font-size: 2rem; margin: 0 4px;
  animation: k-dado-shake .55s ease-in-out infinite;
}
.k-dado:nth-child(2) { animation-delay: .12s; }
.k-dado:nth-child(3) { animation-delay: .24s; }
@keyframes k-dado-shake {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  25%      { transform: rotate(10deg)  translateY(-4px); }
  50%      { transform: rotate(-8deg)  translateY(2px); }
  75%      { transform: rotate(14deg)  translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .k-dado { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FASE 6.b — Onboarding e form (iscrizione, selettore clan, avvisi di boot).
   Convenzione popup di boot: position/inset/z-index restano SEMPRE inline nel
   builder (i detector _cePopupBloccante/_popupAvvioAperto leggono gli style
   inline) — qui vive solo il resto (scrim, card, tipografia).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Form ── */
.k-input {
  width: 100%; box-sizing: border-box;
  background: var(--k-surface-2); color: var(--k-ink);
  border: 1px solid var(--k-border-tenue); border-radius: var(--k-r-sm);
  padding: 13px 15px; font-size: .95rem; font-family: var(--k-font);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.k-input::placeholder { color: var(--k-ink-muted); }
.k-input:focus { border-color: var(--k-gold); box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.k-input--grande { font-size: 1.15rem; padding: 17px 20px; text-align: center; font-weight: 600; }
.k-label { font-size: .78rem; color: var(--k-ink-soft); margin-bottom: 6px; }
.k-err { color: var(--k-danger-testo); font-size: .85rem; min-height: 0; margin: 0; }
.k-a { color: var(--k-gold-bright); }

/* Radio/checkbox NATIVI ritintati: accent-color basta, niente controlli custom. */
.k-opz { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem;
  color: var(--k-ink); line-height: 1.35; cursor: pointer; }
.k-opz input { accent-color: var(--k-gold); margin-top: 2px; flex: 0 0 auto; }
.k-opz--fine { font-size: .72rem; color: var(--k-ink-muted); }
.k-opz--scelta { flex: 1; align-items: center; justify-content: center; gap: 6px;
  padding: 9px; border-radius: 10px; border: 2px solid var(--k-border);
  background: rgba(201,162,39,.08); font-size: .88rem; font-weight: 600; }
.k-opz--scelta input { margin-top: 0; }

/* Autocomplete a scomparsa (F6.d: si apre SOTTO l'input — convenzione — ora che
   ricerca e campo città stanno nella metà alta della carta; verso l'alto il menu
   sborderebbe sopra la card). z:10 è interno alla superficie che lo ospita. */
.k-acp { position: absolute; top: 100%; left: 0; right: 0; max-height: 220px;
  overflow-y: auto; background: var(--k-surface); border: 1px solid var(--k-border-forte);
  border-radius: 0 0 12px 12px; z-index: 10; display: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); text-align: left; }
.k-acp-voce { padding: 11px 13px; border-bottom: 1px solid rgba(201,162,39,.10);
  cursor: pointer; color: var(--k-ink); font-size: .88rem; }
.k-acp-voce:last-child { border-bottom: none; }
.k-acp-voce:active { background: rgba(201,162,39,.10); }

/* Upload file (logo clan) */
.k-filepick { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; border: 1px dashed var(--k-border);
  background: rgba(201,162,39,.04); cursor: pointer; }
.k-filepick-anteprima { width: 48px; height: 48px; border-radius: 50%;
  background: var(--k-surface-3) center/cover no-repeat; border: 2px solid var(--k-border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; overflow: hidden; }

/* Note inline (banner DENTRO una superficie: invito pieno, account esistente…) */
.k-nota { border-radius: 10px; padding: 10px 12px; font-size: .82rem; line-height: 1.4;
  color: var(--k-ink); background: var(--k-surface-2);
  border: 1px solid var(--k-border-tenue); }
.k-nota--verde { border-color: rgba(95,138,84,.55); background: rgba(95,138,84,.14); }
.k-nota--oro   { border-color: var(--k-border); background: rgba(201,162,39,.10); }
.k-nota--wax   { border-color: rgba(169,63,53,.55); background: rgba(169,63,53,.14); }
/* IL TRIBUTO AL SIGNORE — la riga sotto la striscia del premio quando chi ha vinto il quiz
   è un vassallo. Corona a sinistra, frase al centro.
   ⚠️⚠️ NASCE DENTRO IL CORREDO, e la lapide di `.k-reward .rw-cosa` dice perché conta:
   quelle due righe «erano gli unici senza un carattere», ereditavano quello di sistema, e
   l'owner le aveva additate. Questa è nata il 7 agosto con lo STESSO difetto — scritta con
   `style.cssText`, quindi in Segoe UI — e l'owner l'ha additata di nuovo: «mettila nello
   stile / font del gioco, con icone nostre». Il carattere base del gioco è di SISTEMA
   (`--font` in stile.css): chi vuole quello del pacchetto lo deve CHIEDERE.
   ⚠️ E DEVE STARE QUI, dopo `.k-nota`: i due selettori pesano uguale (una classe), quindi
   vince chi viene dopo. Scritta più in alto nel file — dov'era la prima stesura — la base
   le rimangiava `font-size` e `line-height` in silenzio, lasciando in piedi il solo
   `font-family` perché quello `.k-nota` non lo tocca. Un modificatore va con la sua famiglia. */
.k-nota--tributo {
  margin: 0 0 10px; text-align: center;
  font-family: var(--k-font-lettura); font-size: 13px; line-height: 1.45;
}
/* ⚠️ LA CORONA STA NEL FLUSSO DEL TESTO, non in una colonna sua. Con un flex centrato la
   frase — che va a capo — si prendeva tutta la larghezza e spingeva il segno contro il
   bordo sinistro, lontano dalle parole: si leggeva come un pallino d'elenco. Inline il
   segno precede la prima parola e resta attaccato alla frase anche quando questa gira,
   che è lo stesso gesto di `.k-reward .rw-cosa` qui sopra. Guardato, non dedotto. */
.k-nota--tributo .k-ico { vertical-align: -3px; margin-right: 5px; color: var(--k-gold-bright); }

/* 👑 LA NOTA DI CHI GOVERNA, in fondo alla scheda della cella: «Sei il Duca di queste
   terre! Costo di costruzione: −50%». Stessa forma della riga del tributo qui sopra — e
   per la stessa ragione, che è la lapide di `.k-reward .rw-cosa`: il carattere BASE del
   gioco è di sistema (`--font` in stile.css), quindi quello del pacchetto si CHIEDE.
   ⚠️ Come la gemella, sta DOPO `.k-nota`: pesano uguale (una classe), vince chi viene
   dopo, e scritta più in alto la base le rimangerebbe corpo e interlinea in silenzio. */
.k-nota--governo {
  margin: 10px 0 0; text-align: center;
  font-family: var(--k-font-lettura); font-size: 13px; line-height: 1.45;
}
.k-nota--governo .k-ico { vertical-align: -3px; margin-right: 5px; color: var(--k-gold-bright); }

/* Shell dei popup di boot (position/z inline nel builder!) */
.k-ovl { background: rgba(10,7,4,.78); display: flex; align-items: center;
  justify-content: center; padding: 20px; box-sizing: border-box; }
.k-ovl--fatal { background: var(--k-bg); }
.k-ovl-card { width: min(420px, 100%); max-height: 88vh; overflow-y: auto;
  text-align: center; box-sizing: border-box; }

/* Bottoni: aggiunte F6.b */
.k-btn { text-decoration: none; }          /* i k-btn su <a> non devono sottolineare */
.k-btn--block { width: 100%; box-sizing: border-box; display: flex;
  align-items: center; justify-content: center; }
.k-btn--wax { background: linear-gradient(160deg, var(--k-wax-bright), var(--k-wax));
  color: #F5E8E5; border: none; font-weight: 800; }
.k-card--allarme { border: 2px solid var(--k-wax-bright); }

/* ── Overlay iscrizione (.k-isc-*) — root: fixed + z 20000 inline nel markup ── */
.k-isc-sfondo { background: radial-gradient(ellipse at 30% 20%, #241C13 0%, #1A140D 45%, #16110C 100%); }
.k-isc-orbe { position: absolute; border-radius: 50%; pointer-events: none; }
.k-isc-orbe--1 { width: 300px; height: 300px; top: -50px; right: -80px;
  background: radial-gradient(circle, rgba(201,162,39,.07), transparent 70%);
  animation: k-orbe-float 8s ease-in-out infinite; }
.k-isc-orbe--2 { width: 200px; height: 200px; bottom: 10%; left: -40px;
  background: radial-gradient(circle, rgba(95,138,84,.08), transparent 70%);
  animation: k-orbe-float 12s ease-in-out infinite reverse; }
.k-isc-orbe--3 { width: 150px; height: 150px; top: 40%; right: 10%;
  background: radial-gradient(circle, rgba(229,201,107,.05), transparent 70%);
  animation: k-orbe-float 10s ease-in-out infinite 2s; }
@keyframes k-orbe-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.k-isc-wrap { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 100%;
  padding: max(30px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
  box-sizing: border-box; }
.k-isc-card { width: 100%; max-width: 380px; text-align: center; }
.k-isc-logo { max-width: min(280px, 75vw); height: auto; margin-bottom: 16px;
  opacity: 0; transition: opacity .6s, max-width .4s ease;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.45)); }
/* F6.d — allo step2 (scelta clan) il logo si fa piccolo: l'azione primaria
   (ricerca + crea) sale nella metà alta invece di stare schiacciata in fondo. */
.k-isc-card--step2 .k-isc-logo { max-width: min(150px, 42vw); margin-bottom: 8px; }
.k-isc-tag { margin: 0 0 8px; font-size: .95rem; color: var(--k-ink);
  line-height: 1.5; font-weight: 500; }
.k-isc-cta { font-size: 1.2rem; padding: 19px 26px; letter-spacing: .5px;
  border-radius: 16px; animation: k-cta-pulse 2.4s ease-in-out infinite; }
@keyframes k-cta-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(201,162,39,.30), 0 0 0 1px rgba(239,230,210,.08); }
  50%      { box-shadow: 0 8px 32px rgba(201,162,39,.50), 0 0 0 1px rgba(239,230,210,.15); }
}
.k-isc-login { display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; margin-top: 14px; padding: 10px 18px; color: var(--k-ink-soft);
  font-size: .88rem; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(198,183,148,.30); border-radius: 12px; }
.k-isc-glogo { vertical-align: middle; }
.k-isc-divisore { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.k-isc-divisore::before, .k-isc-divisore::after { content: ''; flex: 1; height: 1px;
  background: var(--k-border-tenue); }
.k-isc-clan-nome { font-family: var(--k-font-display); color: var(--k-gold-bright);
  font-size: 1.05rem; line-height: 1.3; letter-spacing: .3px; }
.k-isc-link { color: var(--k-gold); font-size: .85rem; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid rgba(201,162,39,.4);
  padding-bottom: 2px; }
.k-isc-privacy { display: block; margin-top: 18px; color: var(--k-ink-muted);
  font-size: .72rem; text-decoration: none; opacity: .75; }

/* ── Selettore clan fullscreen (.k-selc-*) — z Selettore (20100) inline ── */
.k-selc { background: linear-gradient(180deg, #1E1710 0%, #16110C 100%); overflow: hidden; }
.k-selc-testa { position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 14px 26px;
  background: var(--k-surface); border-bottom: 1px solid var(--k-border-tenue);
  box-shadow: 0 10px 22px rgba(0,0,0,.45); }
.k-selc-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px; background: none; border: none; color: var(--k-ink-muted);
  font-size: 26px; cursor: pointer; padding: 4px 8px; z-index: 3; }
.k-selc-titolo { margin: 0 0 16px; font-family: var(--k-font-display); /* F6.d: stacco verso il filtro, tornato nella testa */
  color: var(--k-gold-bright); font-size: 1.15rem; font-weight: 700;
  text-align: center; letter-spacing: .5px; }
.k-selc-card { display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--k-surface-2); border: 1px solid var(--k-border-tenue);
  padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  color: var(--k-ink); transition: transform .12s, background .15s;
  box-sizing: border-box; font-family: var(--k-font); font-size: 1rem; }
.k-selc-card:active { transform: scale(.98); }
.k-selc-card--altri { justify-content: center; border-color: var(--k-border);
  color: var(--k-gold-bright); font-weight: 700; }
/* ⚠️⚠️ `.k-selc-*` È CODICE MORTO IN WORLD: sono le card del selettore di clan, che qui
   non esiste (una Signoria ha un membro solo). Nessun `.js` e nessun `.html` di `mondo/`
   le nomina — vivono solo in `real/`, da cui world è stato clonato.
   NON RIUSARE `.k-selc-logo` così com'è: dipinge il fondo col colore della casata, cioè
   esattamente il quadratino colorato che l'owner ha fatto togliere ovunque il 5 agosto
   (blocco più sotto). Se un domani serve una card simile, si parte da `.k-stemma`. */
.k-selc-logo { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; color: var(--k-su-oro);
  background: var(--clan-col, #888); }
.k-selc-nome { display: block; font-weight: 700; font-size: .98rem; line-height: 1.2; }
.k-selc-sub { display: block; font-size: .76rem; color: var(--k-ink-muted); margin-top: 3px; }
.k-selc-lista { display: flex; flex-direction: column; gap: 9px; }
.k-selc-vuoto { text-align: center; color: var(--k-ink-muted); margin: 24px 0 12px; }
.k-selc-altri-box { margin-top: 14px; text-align: center; background: var(--k-surface-2);
  border: 1px dashed var(--k-border-tenue); border-radius: 14px; padding: 14px; }
.k-selc-altri-txt { margin: 0 0 10px; font-size: .82rem; color: var(--k-ink-muted); }

/* F6.b — dettagli overlay iscrizione (classi referenziate dal markup) */
.k-isc-orbewrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; pointer-events: none; }
.k-isc-tag--sub { margin: 0 0 28px; font-size: .8rem; color: var(--k-ink-muted);
  font-weight: 400; line-height: 1.4; }
.k-isc-step2 { margin-top: 20px; text-align: center; }
.k-isc-hint { font-size: .85rem; color: var(--k-ink); line-height: 1.4;
  margin: 0 0 10px; text-align: center; }
.k-isc-campo { position: relative; margin-bottom: 12px; }
.k-acp-host { position: relative; }
.k-isc-crealink { margin-bottom: 12px; text-align: center; }
.k-isc-crea { padding: 16px; text-align: left; margin-bottom: 12px; }
.k-isc-crea-tit { display: block; text-align: center; margin: 0 0 10px; }
.k-isc-col { display: flex; flex-direction: column; gap: 8px; }
.k-isc-nota-campo { margin: -2px 0 0; font-size: .7rem; color: var(--k-ink-muted); }
.k-filepick-testo { flex: 1; font-size: .82rem; color: var(--k-ink); }
.k-fp-opz { color: var(--k-ink-muted); }
.k-fp-hint { font-size: .68rem; color: var(--k-ink-muted); margin-top: 2px; }
.k-label--forte { color: var(--k-ink); font-weight: 700; margin-bottom: 7px; }
.k-isc-tipobox { margin-top: 6px; padding: 10px; }
.k-isc-tipobox .k-opz + .k-opz { margin-top: 7px; }
.k-isc-selbox { padding: 14px; margin-bottom: 12px; }
.k-isc-selbox .k-eyebrow { display: block; margin: 0 0 4px; }
.k-isc-selbox .k-sotto { margin: 4px 0 0; }
.k-isc-selbox .k-isc-link { display: inline-block; margin-top: 8px; } /* F6.d: Cambia clan */
.k-isc-nomeinput { margin-bottom: 10px; }
.k-isc-genere { display: flex; gap: 8px; margin-bottom: 10px; }
.k-isc-gioca { padding: 14px; font-size: 1.05rem; }
.k-isc-links { display: flex; justify-content: center; gap: 20px; margin-top: 22px;
  flex-wrap: wrap; }
/* F6.b — selettore: filtro/scroll/etichette */
.k-selc-filtro { display: block; max-width: 540px; margin: 6px auto 4px; }
/* F6.d — barra fissa in basso col CTA "Crea un nuovo clan" (thumb zone: il tap
   sta sotto il pollice, la ricerca torna in alto nell'ordine di lettura).
   Specchio di .k-selc-testa, ombra ribaltata; la clearance della lista la
   imposta il JS (scrollEl.style.bottom = barra.offsetHeight). */
.k-selc-creabar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: var(--k-surface);
  border-top: 1px solid var(--k-border-tenue);
  box-shadow: 0 -10px 22px rgba(0,0,0,.45);
}
.k-selc-scroll { position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.k-selc-inner { max-width: 560px; margin: 0 auto;
  padding: 14px 14px 20px; } /* la safe-area in basso la assorbe la creabar */
.k-selc-top-lbl { display: block; margin: 6px 4px 12px; }
.k-acp-voce--vuota { color: var(--k-ink-muted); cursor: default; font-size: .85rem; }
.k-acp-voce strong { font-size: .88rem; }
.k-acp-sub { font-size: .75rem; color: var(--k-ink-muted); margin-top: 2px; }
.k-acp-sub-inline { color: var(--k-ink-muted); font-size: .72rem; }

/* ── F6.b WP2: avvisi di boot sulla shell kit ── */
.k-ovl-card .k-titolo { margin: 0 0 12px; }
.k-titolo--allarme { color: var(--k-danger-testo); }
.k-ovl-glifo { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
.k-ovl-glifo--grande { font-size: 3rem; }
.k-ovl-riga { color: var(--k-ink); font-size: .95rem; line-height: 1.5; margin: 0 0 6px; }
.k-ovl-riga--sotto { margin-bottom: 14px; }
.k-ovl-riga2 { margin: 0 0 14px; line-height: 1.5; }
.k-ovl-azione { margin-top: 14px; }
.k-ovl-cta { margin-bottom: 8px; }
.k-ovl-nota { display: block; margin: 0 0 12px; text-align: left; }
.k-ovl-label { display: block; text-align: left; margin-bottom: 4px; }
.k-ovl-err { margin: 6px 0 12px; min-height: 14px; }

/* ⚰️ Qui stavano le regole `.k-tit-*` del popup «Nuovo titolo sbloccato», tolto il
   6 agosto coi dieci titoli a soglia che annunciava. */

/* Voci notifiche in-app */
.k-notif-lista { max-height: 300px; overflow-y: auto; }
/* ⚠️⚠️ …TRANNE dove le voci sono ALTE. Il foglio dei traguardi (7 agosto) porta fino a
   cinque benefici per voce: coi 300 px la terza voce restava tagliata a metà parola, con
   sotto il bottone OK — e sembrava un guasto, non uno scorrimento. Qui scorre l'INTERO
   pannello (`.k-ovl-card` ha già `max-height:88vh; overflow-y:auto`), che è la stessa
   lezione già scritta due riquadri più sotto per `.k-ent-pannello`: «il vecchio modello
   *solo la lista scrolla* tagliava i bottoni in basso su schermi corti».
   ⚠️ Visto SOLO guardando l'anteprima: l'asserzione «il foglio sta nello schermo»
   misurava la CARD, non l'ultima voce, ed era verde su un foglio mozzato. */
.k-notif-lista--tutta { max-height: none; overflow: visible; }
.k-notif-voce { padding: 8px 0; border-bottom: 1px solid rgba(201,162,39,.10);
  text-align: left; font-size: .9rem; line-height: 1.6; color: var(--k-ink); }
.k-notif-voce:last-of-type { border-bottom: none; }

/* Classifica d'ingresso (z Entrata 9990 — NIENTE data-cqz-layer) */
/* v4: scrolla l'INTERO pannello (il dispaccio + recap lo rendono più alto → il
   vecchio modello "solo la lista scrolla" tagliava i bottoni in basso su schermi corti). */
.k-ent-pannello { width: min(420px, 100%); max-height: 88vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 20px 18px 16px;
  text-align: center; box-sizing: border-box; }
.k-ent-titolo { font-size: 1.35rem; margin: 0 0 4px; }
.k-ent-sub { margin: 0 0 4px; }
.k-ent-lbl { display: block; text-align: left; margin: 6px 0 4px; }
.k-ent-lista { border: 1px solid var(--k-border-tenue); border-radius: 10px;
  text-align: left; padding: 6px; }
.k-ent-lista .k-cls-riga:last-child { margin-bottom: 0; }
.k-ent-tu { color: var(--k-gold-bright); font-weight: 600; }
.k-ent-punti { min-width: 46px; text-align: right; font-size: .9rem; }
/* v4 — dispaccio (stemma+titolo), filetto ceralacca, recap a righe, empty state */
.k-ent-disp { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; text-align: left; }
.k-ent-disp-testo { min-width: 0; }
.k-ent-disp .k-titolo { font-size: 1.3rem; line-height: 1.04; }
.k-ent-disp .k-eyebrow { margin-top: 3px; }
.k-ent-wax { height: 2px; border: 0; margin: 0 0 14px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(169,63,53,.7), rgba(169,63,53,.15) 70%, transparent); }
.k-ent-recap { padding: 4px 12px; margin-bottom: 12px; text-align: left; }
.k-ent-rec { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
.k-ent-rec + .k-ent-rec { border-top: 1px solid var(--k-border-tenue); }
.k-ent-rec-ico { width: 24px; text-align: center; font-size: 15px; flex: 0 0 auto; }
.k-ent-rec-txt { flex: 1; font-size: 13.5px; color: var(--k-ink); line-height: 1.3; }
.k-ent-rec-val { font-family: var(--k-font-display); font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.k-ent-rec-val.v-su { color: var(--k-green-soft); }
.k-ent-rec-val.v-giu { color: var(--k-danger-testo); }
.k-ent-quiet { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 12px; margin-bottom: 12px; }
.k-ent-quiet .ico { font-size: 20px; flex: 0 0 auto; }
.k-ent-quiet p { font-size: 13px; color: var(--k-ink-muted); line-height: 1.35; }
.k-ent-btn { margin-top: 10px; }

/* 🪦 Le regole del popup d'ingresso vecchio (card del leader, delta perpetua, «mostra la
   top 10», chip del bottino) sono uscite il 3 agosto insieme al markup che le usava:
   l'owner ha tolto la classifica perpetua dal riepilogo del rientro. Verificate a zero
   riferimenti in app.js e ui.js prima di toglierle. */
/* ── 3 agosto: le perdite dicono dove, e ci si va col tocco ─────────────────────────── */
.k-ent-perso { display: flex; align-items: center; gap: 9px; width: 100%;
  background: rgba(169,63,53,.10); border: 1px solid rgba(169,63,53,.28);
  border-radius: 10px; padding: 7px 10px; margin: 4px 0 0; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: background .15s ease, border-color .15s ease; }
.k-ent-perso:hover, .k-ent-perso:active { background: rgba(169,63,53,.20);
  border-color: rgba(169,63,53,.5); }
.k-ent-perso-ico { flex: 0 0 auto; display: inline-flex; color: var(--k-danger-testo, #DE9C90); }
.k-ent-perso-dove { flex: 1; min-width: 0; font-size: 13px; color: var(--k-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-ent-perso-n { flex: 0 0 auto; font-family: var(--k-font-display); font-weight: 700;
  font-size: 12.5px; color: var(--k-danger-testo, #DE9C90); }
.k-ent-perso-go { flex: 0 0 auto; font-size: 1.15rem; font-weight: 700; line-height: 1;
  color: var(--k-danger-testo, #DE9C90); }
/* ⚠️ Il conto delle perse e i luoghi sotto sono UNA cosa sola: il filetto che separa le
   righe del recap non va messo fra loro, o sembrerebbero due notizie diverse. */
.k-ent-rec--perse + .k-ent-perso { border-top-color: transparent; }
/* Il glifo del corredo dentro la colonnina dell'icona */
.k-ent-rec-ico { display: inline-flex; align-items: center; justify-content: center; }
/* Quanto raccolto si è versato per terra a borsa piena */
.k-ent-sprecato { margin: 6px 0 2px; font-size: .78rem; text-align: left; }
/* 🎁 GIRO 3 — popup d'ingresso v2: bottino, corsa al podio, CTA inviti */
/* 🪦 `.k-ent-saggio` è uscita il 3 agosto col Saggio. ⚠️ `.k-nota--oro` RESTA:
   la usano altri tre punti, e portarsela via avrebbe spento quelli. */
/* 🪦 `.k-ent-podio`, `.k-ent-podio-mia`, `.k-ent-podio-med` e `.k-ent-podio-txt` sono
   uscite il 9 agosto con la RIGA DI RIEPILOGO della settimana, tolta dall'owner. Restava
   `.k-ent-podio-go`, che è la freccia: adesso vive nell'intestazione della lista, che è
   diventata lei la porta della classifica. Verificate a zero riferimenti in app.js. */
.k-ent-podio-go { flex: 0 0 auto; font-size: 1.3rem; font-weight: 700;
  color: var(--k-gold-bright, #E5C96B); line-height: 1; }
/* ⏳ 9 agosto — l'intestazione della settimana: occhiello, conto alla rovescia «in
   piccolino» (owner) e la freccia. È TOCCABILE: apre la classifica settimanale.
   ⚠️ `align-items: baseline` no: la clessidra e la freccia hanno altezze diverse dal
   testo e la riga si sfalserebbe. Centro, e l'occhiello si prende lo spazio. */
.k-ent-sett-cap { display: flex; align-items: center; gap: 8px; text-align: left;
  margin: 10px 0 4px; cursor: pointer; border-radius: 8px; padding: 2px 4px;
  transition: background .15s ease; }
.k-ent-sett-cap:hover, .k-ent-sett-cap:active { background: rgba(201,162,39,.10); }
/* ⚠️ Occhiello un po' più stretto SOLO qui: con la spaziatura piena (2,2px) «IN TESTA
   QUESTA SETTIMANA» più il conto alla rovescia più la freccia non stanno nei 360 px di un
   telefono e l'occhiello va a capo — visto nell'anteprima, non dedotto. */
.k-ent-sett-cap .k-ent-lbl { flex: 1; min-width: 0; margin: 0; letter-spacing: 1.3px; }
.k-ent-sett-tempo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; letter-spacing: .02em; color: var(--k-ink-muted);
  white-space: nowrap; }
/* Il QUARTO SLOT: staccato dalle prime tre, perché fra la terza e me c'è un salto di
   posizione (4º… o 87º) e senza aria le si legge come quattro righe consecutive.
   ⚠️ Lo stacco è ARIA, non un filetto: la riga porta già la cornice dorata di
   `.k-cls-riga--tu`, e un bordo dentro una cornice si vede come un errore di disegno. */
.k-ent-riga-mia { margin-top: 10px; }
.k-ent-fuori { font-size: .74rem; color: var(--k-ink-muted); font-style: normal;
  text-align: right; white-space: nowrap; }
.k-ent-invita { display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1.5px dashed var(--k-border-forte, rgba(201,162,39,.45)); border-radius: 12px;
  padding: 9px 12px; margin-top: 10px; background: rgba(201,162,39,.06); }
.k-ent-invita-txt { flex: 1; font-size: .8rem; line-height: 1.35; color: var(--k-ink); }
.k-ent-invita .k-btn--mini { flex: 0 0 auto; }

/* 🏆 GIRO 4 — SALE TROFEI: chip podio settimanale + medaglioni titolo */
/* chip podio (scheda clan): 🥇 + settimana */
.k-med-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--k-surface-3, #211912); border: 1px solid var(--k-border-tenue);
  border-radius: 11px; padding: 6px 10px; min-width: 54px; }
.k-med-chip-med { font-size: 1.3rem; line-height: 1; }
.k-med-chip small { font-size: .6rem; color: var(--k-ink-muted); white-space: nowrap; }
/* K4: chip podio cliccabile (apre la classifica di quella settimana) */
.k-med-chip--clic { cursor: pointer; transition: border-color .15s, background .15s; }
.k-med-chip--clic:hover { border-color: var(--k-gold); background: rgba(201,162,39,.12); }
/* titoletto sala trofei (versione non richiudibile) + podio */
.k-med-titolo { font-family: var(--k-font-display); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--k-ink-muted); margin: 4px 0 6px; font-weight: 700; }
.k-med-podio { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
/* K5: sezione medaglie richiudibile quando è ampia */
.k-med-det { margin: 4px 0 6px; }
.k-med-det > summary { list-style: none; cursor: pointer; font-family: var(--k-font-display);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--k-ink-muted);
  font-weight: 700; padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.k-med-det > summary::-webkit-details-marker { display: none; }
.k-med-det > summary::before { content: '▾'; color: var(--k-gold); transition: transform .15s; }
.k-med-det:not([open]) > summary::before { transform: rotate(-90deg); }
.k-med-n { color: var(--k-gold-bright); font-weight: 700; }
/* medaglioni titolo (griglia sala trofei giocatore) */
.k-med-griglia { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 4px 0 2px; }
.k-med { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; text-align: center; }
.k-med--clic { cursor: pointer; }
.k-med-disco { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; position: relative; color: #2A1E0D;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.45); }
.k-med-disco::after { content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35); }
.k-med--oro .k-med-disco     { background: radial-gradient(circle at 35% 28%, #F5DE8B, #C9A227 72%); }
.k-med--argento .k-med-disco { background: radial-gradient(circle at 35% 28%, #EFEFEF, #A7ADB4 72%); }
.k-med--bronzo .k-med-disco  { background: radial-gradient(circle at 35% 28%, #E6AE7C, #A9713F 72%); }
.k-med-glifo svg { width: 26px; height: 26px; display: block; }
.k-med-nome { font-family: var(--k-font-display); font-size: .72rem; font-weight: 700;
  color: var(--k-gold-bright); line-height: 1.12; }
.k-med-sub { font-size: .6rem; color: var(--k-ink-muted); line-height: 1.05; }

/* ⚠️ Qui stavano le due righe che davano allo stemma un anello nel colore della casata
   (`--clan-col`). Tolte il 5 agosto 2026 su richiesta dell'owner — vedi il blocco più
   sotto. Le decine di `style="--clan-col:…"` sparse in `ui.js` e `app.js` restano e
   diventano inerti da sole: senza uno spessore, un colore di bordo non colora niente. */

/* ══════════════════════════════════════════════════════════════════════════════
   🛡️ LO STEMMA NON HA CORNICE — vale OVUNQUE (owner, 5 agosto 2026)

   Storia in due tempi, perché la seconda metà si capisce solo con la prima.
   Il 5 agosto il fondo COLORATO è stato tolto: un logo a sfondo trasparente su
   fondo tinto diventa illeggibile, e due Signorie di colore vicino diventavano due
   macchie indistinguibili proprio nelle liste, dove il colore servirebbe. Restava
   però un ANELLO nel colore della casata attorno a una piastrella scura — e lo
   stesso giorno l'owner l'ha guardato: *«rimane il quadratino colorato (orribile),
   va tolto, in modo tale che il logo possa essere più grande»*.

   Quindi adesso: **niente bordo**. Con `box-sizing: border-box` (reset globale in
   `stile.css`) quei 1,5-2 px per lato erano tolti al logo: senza, l'insegna cresce
   di 3-4 px in ogni direzione **senza rimontare una sola riga di elenco**.

   ⚠️ LA PIASTRELLA SCURA RESTA, MA SOLO A CHI NON HA STEMMA (decisione dell'owner,
   stesso giorno). Lì dentro c'è l'INIZIALE, e una lettera senza una forma sotto
   galleggia sul nulla — su fondi diversi (classifiche, plancia, carta) sparisce.
   Dove invece un'insegna c'è, la piastrella se ne va: sotto un logo opaco era
   invisibile comunque, ma sotto uno **trasparente** (quelli del compositore lo sono:
   il campo si apre con `clearRect`) affiorava agli angoli — cioè disegnava di nuovo
   il quadratino che stiamo togliendo, in un altro colore.

   ⚠️ Il logo si riconosce in due modi perché il gioco lo mette in due modi: come
   `<img>` figlio e come `background-image` scritto inline. Servono entrambi i
   selettori, o metà delle schermate resterebbe con la piastrella.

   ⚠️⚠️ E il secondo cerca `url(`, NON `background-image`. La scheda della cella scrive
   `dotProp.style.backgroundImage = logo ? url(…) : 'none'` — cioè l'attributo `style`
   contiene la parola `background-image` **anche quando lo stemma non c'è**. Un
   `[style*="background-image"]` avrebbe tolto la piastrella proprio a chi deve tenerla,
   e sarebbe sembrato giusto leggendo il codice: si vede solo guardando l'anteprima.

   ⚠️ Sta in `kit.css` e non in `stile.css` perché il kit si carica DOPO: una regola
   gemella in `stile.css` perderebbe contro `.k-dipm-stemma`, che vive qui.

   ⚠️ Chi disegna: il logo va in `background-image` (o come `<img>` figlio) — mai
   nella scorciatoia `background`, che azzererebbe tutto il resto insieme.
   ══════════════════════════════════════════════════════════════════════════════ */
.dot-colore, .classifica-colore, .dip-slot-logo, .coal-av,
.k-dipm-stemma, .mini-logo, .logo-locale-grande, .albo-dot {
  background-color: #241B12;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 0;
  color: var(--k-ink-soft, #C9BFA8);
  font-family: var(--k-font-display); font-weight: 700; text-transform: uppercase;
  overflow: hidden;
}
/* …e dove l'insegna c'è, sotto non resta niente: il logo arriva fino al bordo.
   ⚠️⚠️ DUE REGOLE SEPARATE, non una lista sola. Se in una lista di selettori ce n'è uno
   che il browser non capisce, il browser butta via **tutta** la regola: un WebView vecchio
   senza `:has()` perderebbe anche la metà a `[style]`, che avrebbe capito benissimo. Così
   invece ognuna vale per conto suo, e nel peggiore dei casi resta la piastrella scura sotto
   il logo — cioè l'aspetto di ieri meno l'anello, non una schermata rotta. */
.dot-colore[style*="url("], .classifica-colore[style*="url("],
.dip-slot-logo[style*="url("], .coal-av[style*="url("],
.k-dipm-stemma[style*="url("], .mini-logo[style*="url("],
.logo-locale-grande[style*="url("], .albo-dot[style*="url("] {
  background-color: transparent;
}
/* ⚠️⚠️ `img:not(.k-corona)`, e la differenza si è vista solo in anteprima. Questa regola
   toglie la piastrella scura quando dentro c'è l'INSEGNA, perché il logo arrivi fino al
   bordo. Dal 5 agosto dentro può esserci anche la CORONA DEL GRADO, che è un'immagine
   pure lei: con `:has(img)` nudo bastava un titolo per far sparire il fondo, e chi non
   aveva insegna si ritrovava l'iniziale sospesa nel vuoto con una corona sopra. La
   piastrella deve sparire per il logo, non per la corona. */
.dot-colore:has(img:not(.k-corona)), .classifica-colore:has(img:not(.k-corona)),
.dip-slot-logo:has(img:not(.k-corona)), .coal-av:has(img:not(.k-corona)),
.k-dipm-stemma:has(img:not(.k-corona)), .mini-logo:has(img:not(.k-corona)),
.logo-locale-grande:has(img:not(.k-corona)), .albo-dot:has(img:not(.k-corona)) {
  background-color: transparent;
}
/* ⚠️ `overflow:hidden` qui taglierebbe i distintivi che alcune schede appoggiano
   FUORI dal bordo (la corona, la medaglia): dove succede, si torna a `visible`. */
.mini-logo, .coal-av, .k-ins-corona { overflow: visible; }
.mini-logo img, .logo-locale-grande img { border-radius: inherit; }

/* ══════════════════════════════════════════════════════════════════════════════
   📊 LE CASELLE IN CIMA ALLE DUE SCHEDE
   Erano scritte a mano dentro `_apriStats` (un `tile()` con lo stile inline): §0bis
   dell'albo dice che la forma la dà una famiglia, non l'HTML. Sono TRE — striscia,
   zone, posizione sul pannello personale; potenza, zone, posizione sulla scheda di un
   altro signore — e devono stare su una riga anche a 360 px, quindi `flex:1 1 0` con
   `min-width:0`.
   ⚠️ Dal 6 agosto i tre valori sono tutti CIFRE (prima la prima era il grado, cioè una
   parola): l'ellissi resta perché sotto la cifra può esserci un nome di terra.
   ══════════════════════════════════════════════════════════════════════════════ */
.k-stat-riga { display: flex; gap: 7px; align-items: stretch; }
.k-stat-tile {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 4px 9px; border-radius: 13px;
  background: var(--k-surface-3, #211912);
  border: 1px solid rgba(201,162,39,.14);
}
.k-stat-tile--clic { cursor: pointer; }
.k-stat-ico { display: flex; align-items: flex-end; justify-content: center;
  height: 26px; line-height: 1; color: var(--k-gold, #C9A227); }
.k-stat-ico svg { width: 19px; height: 19px; }
/* ⚠️ La corona di un grado è un `<img>`, non un `<svg>`: la riga qui sopra non la
   toccava, e nella prima casella arrivava alta 28 px in uno slot da 26 — più grossa e
   più alta dei segni delle caselle accanto («le corone non sono allineate», owner).
   ⚠️ L'altezza si vincola e la larghezza si lascia libera: il riquadro è 1 × 1,45, e
   fissare tutti e due schiaccerebbe la corona. */
.k-stat-ico img { height: 22px; width: auto; }
.k-stat-num {
  font-family: var(--k-font-display); font-size: 1.34rem; line-height: 1.1;
  color: var(--k-gold-bright, #E5C96B);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* una parola (il grado) sta più stretta di una cifra: qui il display scende un filo */
.k-stat-num--parola { font-size: 1.02rem; letter-spacing: .01em; }
.k-stat-lbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-ink-muted, #B3A283); text-align: center; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-stat-sotto { font-size: .68rem; color: var(--k-ink-muted, #B3A283);
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-stat-sotto svg { width: 12px; height: 12px; }

/* 🏟️ Le sette regole `.k-gov-*` della GUIDA GOVERNATORE sono via (5 agosto):
   la guida portava per mano all'Arena, spenta il 30 luglio, e non poteva nemmeno
   partire (cercava le città in `citta_db`, che `migrazione_mondo_lite` svuota). */

/* ─── F6.i — Scheda città (.k-cz-*) ──────────────────────────────────────
   Testata (eyebrow geo + titolo Cinzel), assedio con barra continua,
   Governo (k-card--incisa) e card "Controllo della città" (ex Parlamento). */
.k-cz-geo { text-align: center; letter-spacing: 1.2px; font-size: 10px;
  line-height: 1.5; white-space: normal; margin: 2px 0 0; padding: 0 30px; }
.k-cz-sez { margin-top: 10px; }
.k-cz-assedio-testa { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.k-cz-assedio-num { font-size: .76rem; color: var(--k-ink-muted); white-space: nowrap; }
.k-cz-track { width: 100%; height: 8px; border-radius: 4px;
  background: var(--k-track); border: 1px solid var(--k-border-tenue); overflow: hidden; }
.k-cz-fill { height: 100%; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--k-gold), var(--k-green)); transition: width .4s ease; }
.k-cz-assedio-txt { margin: 7px 0 0; font-size: .76rem; color: var(--k-ink-muted); }
/* CTA sfida: i titoli lunghi ("Sfida il Doge Serenissimo X!") vanno a capo */
.k-cz-sfida { margin-top: 12px; font-size: 13.5px; white-space: normal;
  line-height: 1.25; min-height: 50px; }
.k-cz-gov-nome { font-family: var(--k-font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--k-ink); line-height: 1.2; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(201,162,39,.3); }
.k-cz-gov-pt { font-family: var(--k-font-display); font-weight: 700;
  font-size: .92rem; color: var(--k-gold-bright); white-space: nowrap; }
.k-cz-cand { margin-top: 12px; border-top: 1px solid var(--k-border-tenue); padding-top: 10px; }
.k-cz-riga { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 10px; background: var(--k-surface-3); cursor: pointer; }
.k-cz-riga + .k-cz-riga { margin-top: 5px; }
.k-cz-riga--oro { background: rgba(201,162,39,.10); border: 1px solid rgba(201,162,39,.28); }
.k-cz-pos { min-width: 18px; text-align: center; font-family: var(--k-font-display);
  font-weight: 700; font-size: 13px; color: var(--k-gold-bright); flex: 0 0 auto; }
.k-cz-riga-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .84rem; }
.k-cz-riga-meta { font-size: .72rem; color: var(--k-ink-muted); white-space: nowrap; }
.k-cz-riga-val { font-family: var(--k-font-display); font-size: .84rem; font-weight: 700;
  color: var(--k-gold-bright); white-space: nowrap; }
.k-cz-espandi { background: none; border: none; color: var(--k-gold-bright);
  font-size: .78rem; font-weight: 700; cursor: pointer; padding: 6px 0;
  width: 100%; text-align: center; }
/* Riga grande "Controllata da": oro = clan locale dominante, wax = occupante straniero */
.k-cz-ctrl { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: rgba(201,162,39,.10);
  border: 1px solid rgba(201,162,39,.30); cursor: pointer; }
.k-cz-ctrl--wax { background: rgba(169,63,53,.14); border-color: rgba(194,68,55,.40); }
.k-cz-ctrl-corpo { flex: 1; min-width: 0; }
.k-cz-ctrl-lbl { font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--k-ink-muted); }
.k-cz-ctrl--wax .k-cz-ctrl-lbl { color: var(--k-danger-testo); }
.k-cz-ctrl-nome { font-family: var(--k-font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--k-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.k-cz-ctrl-sub { font-size: .75rem; color: var(--k-ink-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* Barra di ripartizione zone (solo città contesa): un segmento per clan */
.k-cz-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  margin: 10px 0 8px; border: 1px solid var(--k-border-tenue); }
.k-cz-bar i { display: block; min-width: 4px; }
.k-cz-hint { margin: 8px 0 0; font-size: .74rem; color: var(--k-ink-muted); line-height: 1.4; }

/* ─── F6.j — Plancia mappa diplomatica (#dip-plancia, .k-dipm-*) ─────────
   UN pannello in basso al posto dei vecchi overlay sparsi (legenda in alto a
   sx, toolbar a dx, pillole al centro, cartellino riepilogo). z 900 inline. */
.k-dipm {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  width: min(440px, 100vw - 24px);
  background: var(--k-surface); border: 1px solid var(--k-border-forte);
  border-radius: var(--k-r-md); box-shadow: var(--k-elev-2);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
}
.k-dipm-testa { display: flex; align-items: center; gap: 8px; }
.k-dipm-titolo { flex: 1; min-width: 0; font-size: .72rem; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: var(--k-gold-bright);
  line-height: 1.35; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ⚠️ Questa regola vive DOPO quella condivisa e la vinceva: era l'unico posto del gioco
   dove lo stemma restava incorniciato, con un bordo suo per giunta fisso invece che nel
   colore della casata. Il bordo esce di qui come dagli altri otto. */
.k-dipm-stemma { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  font-size: 10px; font-weight: 700; color: var(--k-ink);
  border: 0; vertical-align: -5px; margin-right: 6px; }
/* ⚠️⚠️ DA QUI, E FINO A `.k-dipm-nome`, È IL VESTITO DELLA VISTA COALIZIONI, murata il
   5 agosto (owner: «togliere le coalizioni» dalla mappa). Nessuno le indossa più: la
   plancia non emette né le lenti né le righe coalizione. NON sono regole orfane da
   buttare come lo era `.k-mc-ob*` — quel blocco era morto dal 30 luglio senza ritorno
   previsto, questo veste un codice tenuto VIVO apposta (`_dipVistaMappa('coalizioni')`,
   `impostaCoalizioniMappa`). Buttare il vestito e tenere il corpo renderebbe il ritorno
   un rifacimento, che è la ragione per cui il corpo è stato tenuto.
   Riguarda: .k-dipm-lenti · .k-dipm-lente · .k-dipm-leg--coal · .k-dipm-coalriga ·
   .k-dipm-coaln · .k-dipm-coalpiu. */
/* Lenti con etichetta (collaudo: "Relazioni / Coalizioni"), riga propria
   sotto il titolo — segmented pill stile tab classifica */
.k-dipm-lenti { display: flex; gap: 6px; }
.k-dipm-lente { flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--k-border-tenue);
  background: var(--k-surface-3); color: var(--k-ink-soft);
  font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent; }
.k-dipm-lente.attiva { background: rgba(201,162,39,.16); color: var(--k-gold-bright);
  border-color: rgba(201,162,39,.55); }
/* Legenda a pallini: gli hex inline sono i colori VERI del renderer diplomazia */
.k-dipm-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem;
  color: var(--k-ink); }
.k-dipm-leg span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.k-dipm-leg i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.35); }
.k-dipm-leg--coal { max-height: 24vh; overflow-y: auto; }
/* 📜 IL RECAP — owner, 5 agosto: «il recap in basso (che è troppo piccolo) andrebbe
   indicato in modo elegante». Era una riga corsa a .74rem in grigio, coi fatti separati
   da punti mediani: si leggeva come una nota a piè di pagina, non come il quadro della
   tua posizione. Ora ogni fatto ha la sua riga — segno a sinistra, che cosa, e il valore
   a destra in oro — e la lealtà chiude il quadro. */
.k-dipm-cap {
  font-size: .8rem; color: var(--k-ink-muted); line-height: 1.45;
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 7px; border-top: 1px solid var(--k-border-tenue);
}
.k-dipm-riga { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
/* ⚠️ Il glifo non si stira né si schiaccia quando il valore è lungo: `flex:0 0 auto` e
   allineato al testo, non alla base della riga (un SVG su `baseline` balla). */
.k-dipm-riga svg { flex: 0 0 auto; width: 14px; height: 14px; align-self: center;
  color: var(--k-gold); }
.k-dipm-eti { flex: 0 0 auto; color: var(--k-ink-muted); }
/* ⚠️⚠️ `white-space: nowrap` NON È DECORAZIONE: senza, `text-overflow: ellipsis` non fa
   niente — il testo va a capo invece di essere troncato. Con sette vassalli dai nomi
   lunghi la riga diventava di tre righe, la plancia cresceva di un'altezza sopra la carta
   e — peggio — il GLIFO si staccava dall'etichetta e galleggiava a metà del blocco
   (`align-self: center` lo centra sull'intero riquadro, non sulla prima riga).
   Con una riga sola l'ellissi taglia in coda: restano visibili i PRIMI nomi, che sono
   quelli che contano. Visto nell'anteprima, non dedotto: leggendo il CSS avevo concluso
   il contrario. */
.k-dipm-val { flex: 1; min-width: 0; text-align: right; color: var(--k-ink-forte);
  font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-dipm-fioco { color: var(--k-ink-muted); font-weight: 400; }

/* 🌍 Il puntino sulle lingue ancora in traduzione (lo mette `i18n.js` quando la copertura
   del dizionario è sotto il 90 %). Sull'angolo, fuori dalla bandiera, così non ne copre
   i colori — che sono l'unica cosa per cui si riconosce. */
.cqz-lang-parziale {
  position: absolute; right: -3px; top: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--k-gold); border: 2px solid var(--k-surface);
  display: block;
}
/* F6.k — righe coalizione CLICCABILI (legenda ordinata + dettaglio membri):
   una per riga, chevron a destra; <em> per non ereditare il quadratino di
   .k-dipm-leg i. Nomi cliccabili nei dettagli dello schieramento. */
.k-dipm-coalriga { width: 100%; min-height: 30px; cursor: pointer;
  border-radius: 8px; padding: 2px 4px; -webkit-tap-highlight-color: transparent; }
.k-dipm-coalriga:active { background: rgba(201,162,39,.10); }
.k-dipm-coaln { font-style: normal; color: var(--k-ink-muted); font-size: .7rem; }
.k-dipm-chev { font-style: normal; margin-left: auto; color: var(--k-gold-bright);
  font-size: .95rem; }
.k-dipm-coalpiu { justify-content: center; color: var(--k-gold-bright); font-weight: 700; }
.k-dipm-nome { color: var(--k-gold-bright); font-weight: 700; cursor: pointer;
  text-decoration: underline dotted rgba(201,162,39,.6); text-underline-offset: 2px; }
.k-dipm-azioni { display: flex; gap: 8px; }
/* ⚠️ I due comandi NON vanno a capo. Con `k-btn--primario` in maiuscoletto spaziato,
   «Torna alla mappa» in 200 px si spezzava in due righe e la plancia cresceva di
   un'altezza — owner: «i pulsanti e la grafica vanno allineati al resto del gioco».
   Una riga sola, e se proprio non ci sta si accorcia con l'ellissi. */
.k-dipm-azioni .k-btn {
  flex: 1 1 0; min-width: 0; min-height: 42px; font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* F6.j — stato del bottone header mappa diplomatica: l'SVG resta sempre,
   in modalità diplomazia il bottone si tinge d'oro (via il clobber emoji). */
#btn-modo-mappa.attivo { color: var(--k-gold-bright);
  border-color: rgba(201,162,39,.55); background: rgba(201,162,39,.14); }
/* Round 3 collaudo — a riposo il .btn-zoom di modo-mappa aveva il fondo scuro
   opaco, diverso dai fratelli .btn-icona (classifica/info): pareggialo. */
#btn-modo-mappa:not(.attivo) { background: rgba(255,255,255,.03); box-shadow: none; }

/* ─── F8 — animazioni infinite in PAUSA quando non si vedono ─────────────
   (a) tab in background (visibilitychange → body.cqz-tab-bg): tutto fermo;
   (b) modal coprente aperto (body.cqz-modal-coprente, già togglata da
       _mappaSetCoperta): fermi i pulse del chrome sotto (ruota che respira,
       replay evidenziato) — giravano per niente dietro quiz e classifica. */
body.cqz-tab-bg *, body.cqz-tab-bg *::before, body.cqz-tab-bg *::after {
  animation-play-state: paused !important; }
body.cqz-modal-coprente #pannello-basso *,
body.cqz-modal-coprente #overlay-mappa * { animation-play-state: paused !important; }

/* ── 🎚️ Slider in palette ────────────────────────────────────────────────────
   ⚠️ Un `input[type=range]` non stilato è AZZURRO: quello di sistema, l'unico
   colore del gioco che non viene dalla pergamena (owner: «gli slider azzurri sono
   fuori palette»). Sono due — la durata del patto e i bagigi al tavolo — e si
   vedevano entrambi. Binario inciso, pomello d'oro come i bottoni. */
.k-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
}
.k-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: var(--k-btn-scuro, rgba(0,0,0,.35));
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.25));
}
.k-range::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: var(--k-btn-scuro, rgba(0,0,0,.35));
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.25));
}
.k-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--k-gold-bright, #E8C766), var(--k-gold, #C9A227));
  border: 1px solid var(--k-gold-scuro, #8A6E1A);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.k-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--k-gold-bright, #E8C766), var(--k-gold, #C9A227));
  border: 1px solid var(--k-gold-scuro, #8A6E1A);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.k-range:focus-visible { outline: 2px solid var(--k-gold, #C9A227); outline-offset: 3px; }

/* ── 📜 Le righe di una proposta ricevuta ────────────────────────────────────
   Una frase per riga, coi nomi di chi dà e chi riceve. L'ultimatum si stacca:
   è l'unica clausola che, se rifiuti, ti porta la guerra. */
.k-dip-tr-piatto, .dip-tr-piatto { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 6px; }
/* 📜 Le stesse clausole, ma nello STORICO: sono un ricordo, non una decisione da
   prendere. Rientrate sotto la riga dell'esito e un filo più sommesse, così la
   cronologia resta una fila di righe e non diventa una colonna di schede. */
.dip-tr-piatto--storico { margin: 2px 0 8px 16px; opacity: .78; font-size: .92em; }
.dip-tr-riga {
  font-size: .86rem; line-height: 1.35; color: var(--k-ink, #E9DCC0);
  padding: 3px 7px; border-radius: 7px;
  background: var(--k-btn-scuro, rgba(0,0,0,.18));
}
.dip-tr-riga--allarme {
  background: rgba(169,63,53,.16);
  border: 1px solid rgba(169,63,53,.45);
  color: var(--k-danger-testo, #E08573); font-weight: 700;
}

/* ═══ 🛡️ COMPOSITORE DI STEMMI (v57) ═══════════════════════════════════════
   Il pannello dove si compone l'insegna della Signoria. L'anteprima sta SEMPRE
   in vista, in cima: quello che si sceglie sotto si vede subito sopra, senza
   scorrere avanti e indietro — è l'unica ragione per cui la card è a due strati
   invece che un elenco lungo. */
.k-stm-wrap { display: flex; flex-direction: column; gap: 10px; }
.k-stm-anteprima {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 4px 4px;
}
.k-stm-canvas {
  width: 132px; height: 132px; flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  /* 🖐️ IL GESTO È DEL CANVAS, non del pannello. Col caricamento dell'immagine si trascina
     e si pizzica qui sopra: senza `touch-action: none` il browser interpreta il dito come
     uno scorrimento e la scheda scappa via mentre si tenta di spostare lo stemma — e non
     somiglia a un gesto non riconosciuto, somiglia a un pannello che si muove da solo.
     ⚠️ Va INSIEME a `{ passive: false }` sugli ascoltatori (app.js): l'uno senza l'altro
     non basta. E `user-select: none`, o il trascinamento seleziona il testo attorno. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.k-stm-lato { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
/* Come lo si vedrà DAVVERO: sul tondo della classifica e sul cartiglio della carta.
   Senza, si sceglie un dettaglio che a 28 px non esiste. */
.k-stm-mini { display: flex; align-items: center; gap: 8px; }
.k-stm-mini canvas { width: 30px; height: 30px; flex: 0 0 auto; }
.k-stm-mini canvas.grande { width: 46px; height: 46px; }
.k-stm-mini-lbl { font-size: .68rem; color: var(--k-ink-muted); line-height: 1.25; }

.k-stm-sez { border-top: 1px solid var(--k-border-tenue, rgba(201,162,39,.18)); padding-top: 8px; }
.k-stm-tit {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: none; border: 0; cursor: pointer; padding: 4px 2px;
  font-family: var(--k-font-display, 'Cinzel', Georgia, serif); font-weight: 700;
  font-size: .84rem; color: var(--k-gold-bright, #E5C96B); text-align: left;
}
.k-stm-tit .k-stm-val { font-family: var(--k-font, system-ui); font-weight: 400;
  font-size: .74rem; color: var(--k-ink-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.k-stm-corpo { padding: 4px 0 2px; }
.k-stm-corpo[hidden] { display: none; }

/* Le griglie di scelta: SVG nel DOM, non canvas. Cento canvas su un telefono
   debole sono cento contesti grafici — e questo gioco ha già pagato i boot morti
   sui telefoni deboli. */
.k-stm-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px;
}
.k-stm-cella {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 9px; cursor: pointer;
  background: var(--k-surface-3, #211912);
  border: 1.5px solid var(--k-border-tenue, rgba(201,162,39,.18));
  color: var(--k-ink-soft, #C6B794);
}
.k-stm-cella.sel {
  border-color: var(--k-gold-bright, #E5C96B); color: var(--k-gold-bright, #E5C96B);
  background: rgba(201,162,39,.14);
}
.k-stm-cella svg { display: block; width: 100%; height: 100%; }
.k-stm-cella--vuota { font-size: .64rem; text-align: center; padding: 4px; line-height: 1.2; }

/* 🛡️ Crea | Carica — la scelta in cima, non un pulsantino in fondo.
   ⚠️ Era una riga secondaria sotto Salva e la strada del PRO non si vedeva. */
.k-stm-modi { display: flex; gap: 6px; margin-bottom: 11px; }
.k-stm-modo {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px; border-radius: 11px; cursor: pointer; font-size: .84rem; font-weight: 700;
  font-family: inherit;
  background: var(--k-btn-scuro, #221A11); color: var(--k-ink-soft, #C6B794);
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.20));
  transition: all .2s ease;
}
.k-stm-modo.sel {
  background: linear-gradient(135deg, rgba(201,162,39,.20) 0%, rgba(201,162,39,.06) 100%);
  color: var(--k-gold-bright, #E5C96B); border-color: var(--k-gold, #C9A227);
}
.k-stm-pro {
  font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .5px;
  padding: 2px 5px; border-radius: 5px; background: var(--k-gold, #C9A227); color: #1A1209;
}

/* 🎨 Lo slot dell'icona nelle voci di Impostazioni: l'SVG del kit al posto
   dell'emoji di sistema. */
.k-imp-ico { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--k-gold, #C9A227); }
/* 👑 Il glifo dentro il comando d'ingresso. ⚠️ `currentColor`: il bottone primario è oro
   pieno con testo scuro, e una corona oro su oro sarebbe invisibile — il segno deve
   prendere il colore del testo che accompagna, non un token fisso. */
.k-isc-cta-ico { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: 8px; color: currentColor; }

.k-stm-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.k-stm-tab {
  padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: .72rem;
  background: var(--k-btn-scuro, #221A11); color: var(--k-ink-soft, #C6B794);
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.20));
}
.k-stm-tab.sel { background: rgba(201,162,39,.18); color: var(--k-gold-bright, #E5C96B);
  border-color: var(--k-gold, #C9A227); }

.k-stm-colore { display: flex; flex-direction: column; gap: 9px; }
.k-stm-colore-riga { display: flex; align-items: center; gap: 9px; }
.k-stm-colore-lbl { font-size: .74rem; color: var(--k-ink-muted); width: 78px; flex: 0 0 auto; }
.k-stm-slider { display: flex; align-items: center; gap: 8px; }
.k-stm-slider input[type="range"] { flex: 1; }
.k-stm-nota { font-size: .72rem; color: var(--k-ink-muted); line-height: 1.4; margin-top: 6px; }

/* 🛡️🏷️🎨 LE INSEGNE DELLA SIGNORIA — stemma, nome e colore in un foglio solo.
   ⚠️ Tutto su CLASSI e mai su `#id`: l'anteprima congela i casi rinominando `id="` in
   `data-id="`, e una regola scritta su un id non si applicherebbe MAI nella fotografia —
   senza che ci sia modo di accorgersene. */
.k-ins-scudo {
  display: flex; flex-direction: column; align-items: center; gap: 9px; margin-bottom: 14px;
}
/* lo stemma grande: è la cosa che si guarda per prima, e a 28px non si giudica */
.k-stemma--xl {
  width: 92px; height: 92px; border-radius: 16px; font-size: 40px;
  color: var(--k-gold-bright);
}
.k-ins-eti {
  display: block; margin: 11px 0 5px;
  font-family: var(--k-font-display); font-weight: 700; font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--k-gold);
}
/* i due gruppi del foglio: «Tu» e «Le insegne della Signoria» */
.k-ins-gruppo {
  margin: 18px 0 9px; padding-top: 13px; border-top: 1px solid var(--k-border-tenue);
  font-family: var(--k-font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .05em; color: var(--k-ink-forte);
}
.k-ins-gruppo:first-of-type { margin-top: 4px; padding-top: 0; border-top: 0; }
.k-ins-scelte { display: flex; gap: 8px; }
.k-ins-scelta {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--k-border); background: rgba(201, 162, 39, .05);
  font-family: var(--k-font); font-size: .88rem; color: var(--k-ink);
  transition: border-color .15s, background .15s;
}
/* ⚠️ `:has()` e non una classe messa da JS: lo stato lo porta già il radio, e una seconda
   copia in una classe sarebbe da tenere allineata a mano ad ogni clic. */
.k-ins-scelta:has(input:checked) {
  border-color: var(--k-gold); background: rgba(201, 162, 39, .14); color: var(--k-ink-forte);
}
.k-ins-scelta input { accent-color: var(--k-gold); }
/* 👑🚚 Il comando dello spostamento, staccato dalle card degli edifici da un filo d'oro:
   non è un edificio, è una decisione che li riguarda tutti. */
.k-pal-sposta {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--k-border-tenue);
}

/* 👑 La scheda PRO: le voci di quello che si compra. */
.k-pro-voce {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; margin-top: 6px;
  border-radius: 11px; background: var(--k-surface-3, #211912);
  border: 1px solid rgba(201,162,39,.22);
}
.k-pro-voce b { display: block; font-size: .86rem; color: var(--k-ink-forte, #F2E8D2); }
.k-pro-voce span { font-size: .76rem; color: var(--k-ink-muted); line-height: 1.35; }
.k-pro-ico { display: inline-flex; align-items: center; line-height: 1.2; flex: 0 0 auto;
  color: var(--k-gold, #C9A227); margin-top: 1px; }
/* La voce da cui si è arrivati: la scheda si apre da sei posti, e senza un segno
   tocca cercare in un elenco di sei quale riga ti riguardava. */
.k-pro-voce--qui {
  border-color: var(--k-gold, #C9A227);
  background: linear-gradient(180deg, rgba(201,162,39,.13), var(--k-surface-3, #211912));
}
/* 👆 IN SCHERMATA STA IL SOLO TITOLO, il dettaglio si legge toccando (owner, 6 agosto).
   Sei descrizioni aperte insieme facevano una parete di testo alta il doppio della scheda,
   e spingevano sotto la piega proprio le due cose che si devono leggere: il prezzo e il
   bottone.
   ⚠️ LA PIEGA STA SU UN MODIFICATORE, non su `.k-pro-voce`: quella classe è riusata in
   altre tre schermate (Impostazioni, foglio dei quiz) dove le righe non hanno niente da
   aprire — senza `--tocca` si porterebbero dietro un cursore a mano e un dettaglio
   invisibile che nessuno può aprire.
   ⚠️ E la riga sta CENTRATA da chiusa (una riga sola) e ALLINEATA IN ALTO da aperta: a
   voce aperta un glifo centrato verticalmente su tre righe di testo galleggia in mezzo al
   nulla, lontano dal titolo che dovrebbe accompagnare. */
.k-pro-voce--tocca {
  align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.k-pro-voce--tocca.k-pro-voce--aperta { align-items: flex-start; }
.k-pro-voce--tocca .k-pro-testo { flex: 1 1 auto; min-width: 0; }
.k-pro-voce--tocca .k-pro-d { display: none; margin-top: 4px; }
.k-pro-voce--tocca.k-pro-voce--aperta .k-pro-d { display: block; }
.k-pro-chev {
  display: inline-flex; flex: 0 0 auto; margin-top: 1px;
  color: var(--k-gold, #C9A227); transition: transform .16s ease;
}
.k-pro-voce--aperta .k-pro-chev { transform: rotate(90deg); }
/* 💶 I due piani dell'abbonamento: si SCEGLIE, non si guarda.
   ⚠️ Erano due riquadri statici e il bottone comprava sempre il mensile — l'annuale
   stava in vetrina e non si poteva prendere. Un listino con due prezzi di cui uno solo
   acquistabile è peggio di un listino con un prezzo. */
/* ⚠️ IL CONTENUTO VA CENTRATO ANCHE IN VERTICALE, e il difetto si vedeva solo sul mensile:
   i due riquadri stanno in una riga flex e si stirano alla stessa altezza, ma l'annuale ha
   TRE righe (prezzo, periodo, «risparmi il 37%») e il mensile due. Con l'allineamento in
   alto — quello di prima — il mensile restava appeso al bordo superiore con un vuoto sotto,
   e sembrava sbagliato pur essendo `text-align: center`: era centrato in orizzontale e
   basta. */
.k-pro-piano {
  flex: 1 1 0; min-width: 0; padding: 10px 8px; border-radius: 11px; text-align: center;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--k-surface-2, #241C13);
  border: 1px solid var(--k-border, rgba(201,162,39,.3));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .14s ease, background .14s ease;
}
.k-pro-piano b { display: block; font-weight: 700; font-size: .95rem; color: var(--k-ink, #EFE6D2); }
.k-pro-piano span { display: block; font-size: .74rem; margin-top: 3px; color: var(--k-gold, #C9A227); }
.k-pro-piano--scelto {
  border-color: var(--k-gold, #C9A227);
  background: linear-gradient(180deg, rgba(201,162,39,.15), var(--k-surface-2, #241C13));
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.35);
}

/* ⚠️ Le barre del compositore vanno vestite come quelle dei colori: senza, il
   cursore «Grandezza» esce BLU di sistema in mezzo all'oro — l'unica cosa nel
   pannello che non appartiene al gioco. */
.k-stm-slider input[type="range"],
.k-stm-corpo input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 7px; border-radius: 4px;
  background: var(--k-btn-scuro, #221A11);
  border: 1px solid var(--k-border-tenue, rgba(201,162,39,.22));
  outline: none;
}
.k-stm-slider input[type="range"]::-webkit-slider-thumb,
.k-stm-corpo input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px;
  border-radius: 50%; background: var(--k-gold-bright, #E5C96B);
  border: 2px solid var(--k-bg, #16110C); cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.k-stm-slider input[type="range"]::-moz-range-thumb,
.k-stm-corpo input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--k-gold-bright, #E5C96B);
  border: 2px solid var(--k-bg, #16110C); cursor: pointer;
}
/* la griglia che scorre non deve sembrare tagliata a metà */
.k-stm-griglia { scrollbar-width: thin; padding-bottom: 6px; }

/* ── 📜 IL MANUALE DI GIOCO ──────────────────────────────────────────────────
   Owner, 5 agosto: «Aggiungi manuale di gioco». ⚠️ Prima erano cinque card dentro
   un blocco richiudibile del MENU: si apriva in mezzo a un elenco di bottoni e
   spingeva tutto il resto in fondo, ed è la ragione per cui non lo leggeva nessuno.
   Qui è una schermata sua, e il corpo usa il carattere della LETTURA — non
   `--k-font`, che è di sistema e serve al chrome (§0bis: è così che la schermata
   dell'esito era finita in Segoe UI). */
.k-man-lista { display: flex; flex-direction: column; gap: 9px; max-height: 62vh; overflow-y: auto; }
.k-man-cap { padding: 11px 13px; }
.k-man-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  color: var(--k-gold-bright, #E5C96B); font-family: var(--k-font-display, serif);
  font-size: .95rem; letter-spacing: .02em; }
.k-man-corpo { font-family: var(--k-font-lettura, Georgia, serif); font-size: .88rem;
  line-height: 1.55; color: var(--k-ink, #EFE6D2); }
.k-man-corpo b { color: var(--k-gold-bright, #E5C96B); }

/* 📊 LA BARRETTA DELLE PERCENTUALI — statistiche avanzate, una materia per riga.
   ⚠️ NON è `.k-cz-track`/`.k-cz-fill`: quelle sono la barra dell'ASSEDIO, e il loro
   riempimento è un degradé oro→verde che in quel contesto significa «avanzamento verso la
   presa». Riusarle qui portava dentro il verde di un'altra meccanica, ed è il rilievo
   dell'owner del 6 agosto: «il colore delle barre non è nello stile del gioco». Qui il
   riempimento è l'oro della carta e basta — la stessa tinta dei numeri accanto.
   ⚠️ Altezza 6px come le usava la scheda: più sottile della barra d'assedio, che è un
   elemento principale, mentre questa accompagna una riga di testo. */
.k-stat-barra { display: block; height: 6px; border-radius: 4px; overflow: hidden;
  background: var(--k-track, #332818); border: 1px solid var(--k-border-tenue, rgba(201,162,39,.18)); }
.k-stat-barra-riemp { display: block; height: 100%; border-radius: 4px; width: 0;
  background: linear-gradient(90deg, var(--k-gold, #C9A227), var(--k-gold-bright, #E5C96B));
  transition: width .4s ease; }