/* ============================================================
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-latinext.woff2') format('woff2');
font-weight: 600 800;
font-display: swap;
}
@font-face {
font-family: 'EB Garamond';
src: url('/game/fonts/ebgaramond-var-latinext.woff2') format('woff2');
font-weight: 500 600;
font-display: swap;
}
@font-face {
font-family: 'Bebas Neue';
src: url('/game/fonts/bebasneue-latinext.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
/* ── Il cirillico (russo) ────────────────────────────────────────────────
⚠️⚠️ MISURATO, non ricordato: dei tre caratteri qui sopra NESSUNO ha una
lettera cirillica — né nei file che spediamo (0 glifi su 328/403/360) né
ALLA FONTE: Cinzel e Bebas Neue il cirillico non ce l'hanno proprio, e
riesportarli più larghi non serve a niente. EB Garamond invece sì: quello
qui sotto è LO STESSO carattere, solo ri-esportato.
⚠️ Perciò per i titoli e per i numeri servono due caratteri DIVERSI, e li
si dichiara col LORO nome invece di infilarli dentro la famiglia «Cinzel»:
chiamare Playfair «Cinzel» nasconderebbe che sono due disegni diversi.
⚠️ `unicode-range` limitato al cirillico → chi gioca nelle altre nove
lingue non scarica un byte. Sono 63 KB in tutto, e li prende solo il russo.
⚠️⚠️ SUL CANVAS QUESTO NON BASTA: `ctx.font` NON scarica niente, il browser
ripiega in silenzio e le lettere escono giuste col carattere sbagliato. Chi
disegna la carta deve chiederli a mano — `_attendiFontMappa` in app.js.
Tutti e tre sono su SIL Open Font License, come i tre di sopra: l'attribuzione
sta nei Termini §5.4 e si toglie solo il giorno che si toglie il carattere. */
@font-face {
font-family: 'Playfair Display'; /* al posto di Cinzel: i cartigli e i titoli */
src: url('/game/fonts/playfair-cyr.woff2') format('woff2');
font-weight: 400 900;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Oswald'; /* al posto di Bebas Neue: numeri e targhette */
src: url('/game/fonts/oswald-cyr.woff2') format('woff2');
font-weight: 200 700;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'EB Garamond Cyr'; /* lo STESSO EB Garamond, ri-esportato */
src: url('/game/fonts/ebgaramond-cyr.woff2') format('woff2');
font-weight: 400 800;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* ─── 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; }
/* 🏰 La riga che dice cosa si vince buttando giù una capitale — «N celle delle sue M». Sta
sotto il prezzo in attacchi, e va letta come una conseguenza, non come un'istruzione:
stesso corpo del suggerimento, un filo d'oro per staccarla dalla riga sopra. */
.k-dif-hint--capit { margin-top: 5px; padding-top: 5px; color: var(--k-gold-bright, #E5C96B);
border-top: 1px solid rgba(229, 201, 107, .16); }
/* ⚰️ L'AVVISO DELLA DISSOLUZIONE — «sotto Potenza 6 la capitale che cade ti cancella».
⚠️ Vive in DUE posti (il riquadro Potenza del profilo e la scheda della propria capitale) e
ha una classe sola: è la frase più pesante che il gioco scrive a un giocatore, e due
vestiti diversi la farebbero sembrare due avvisi diversi.
⚠️ Ceralacca, non oro: qui non si sta annunciando un beneficio, si sta dicendo un rischio —
ed è la stessa distinzione di `.k-dif-hint--allarme`. */
.k-dissol-avviso { display: flex; align-items: flex-start; gap: 6px;
margin: 10px 0 0; padding: 7px 9px; border-radius: 9px;
background: rgba(158, 42, 34, .13); border: 1px solid rgba(158, 42, 34, .30);
font-family: var(--k-font-lettura, 'EB Garamond', Georgia, serif);
font-size: .79rem; line-height: 1.4; color: var(--k-danger-testo, #E8A9A2); text-align: left; }
.k-dissol-avviso svg { flex: 0 0 auto; margin-top: 2px; opacity: .85; }
/* ─── 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;
}
/* ⚠️⚠️ IL CARATTERE DELLA LETTURA, e vale per OGNI popup del gioco: `.k-corpo` è il corpo
che `UIKit.modal` emette (ui-kit.js), quindi questa riga veste insieme lo spostamento
della capitale, l'accoglienza della fondazione, la conferma «50 punti difesa», il
logout, l'eliminazione dell'account e la ribellione dei vassalli.
Fino all'11 agosto non chiedeva NIENTE e cadeva sul carattere di sistema — mentre la
domanda del quiz, l'esito, il riepilogo e il Manuale erano già in EB Garamond da §0nonies
(5 agosto: «prosa a 12 px senza carattere di lettura» era il difetto, non lo stile).
⚠️ Ed è la riga che §0nonies aveva previsto: «i popup condividono una cornice: tre righe
lì dentro allineano l'intero gioco, e finché non le si tocca OGNI SCHERMATA NUOVA NASCE
VECCHIA». Infatti le tre card costruite il 10-11 agosto sono nate vecchie proprio così.
⚠️ Nessun selettore discendente la scavalca: in stile.css gli unici sono
`.modal-contenuto h3:not([class])` e `#modal-cella .modal-contenuto h3`, entrambi su h3.
⚠️ Costa ZERO byte: i tre .woff2 sono già in in index.html. */
.k-corpo { font-family: var(--k-font-lettura); 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; }
/* ⚠️⚠️ E IL BANNER SPARISCE SOTTO UN MODALE COPRENTE. Owner, 11 agosto: *«durante la
risposta il gioco è ancora in modalità attacco, col popup che dà fastidio»*.
Non era un'impressione ed è aritmetica: `.k-mc-banner` sta a z-index 5000, `.modal`
sta a 50 (stile.css) e `#modal-domande` non ha nessun override — quindi il banner
galleggia SOPRA il quiz, proprio dove ci sono le risposte da leggere.
La classe la mette già `apriModal` per tutti i modali coprenti (`MODALI_COPRENTI` +
`data-coprente="1"`), quindi vale anche per ruota e foglio forze, non solo per il
tutorial: il difetto era di tutti.
⚠️ `display:none` e non un abbassamento dello z-index: la modalità attacco RESTA
accesa sotto (uscirne cambierebbe lo stato del gioco mentre si risponde), qui si
nasconde soltanto il cartello. */
body.cqz-modal-coprente #mc-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 `