/* Pocket GM Screen (già DM Toolkit) — © 2026 Noemi Marcolini. Tutti i diritti riservati. Vedi LICENSE. */
/* ============================================================
   SCENA.CSS — Identita' dell'app (2026-11): ogni pagina si apre con
   una scena disegnata dal nome della campagna e il titolo sopra;
   sotto, fasce di tessere tonde e piatte. Titoli in Gloock, testo in
   Figtree. Tutti i colori nascono da tre numeri (tinta di fondo,
   tinta d'accento, intensita'): scegliendo una tavolozza nelle
   Impostazioni cambia tutto, scena compresa, in notte e in giorno.
   Caricato per ultimo, dopo identita.css (struttura).
   ============================================================ */

/* ── Tavolozze ── */
:root { --h: 40; --ha: 52; --k: 1; --ca: .17; --kt: 1; }
[data-colore="grafite"]    { --h: 255; --ha: 255; --k: .22; --ca: .015; --kt: .45; }
[data-colore="bosco"]      { --h: 155; --ha: 135; --k: 1;   --ca: .15; }
[data-colore="cuoio"]      { --h: 62;  --ha: 75;  --k: 1.4; --ca: .12; }
[data-colore="inchiostro"] { --h: 262; --ha: 232; --k: 1.3; --ca: .14; }
[data-colore="vino"]       { --h: 8;   --ha: 14;  --k: 1.2; --ca: .17; }
[data-colore="nero"]       { --h: 80;  --ha: 85;  --k: 0;   --ca: .14; --kt: .6; }

/* Giorno */
:root {
  --bg-primary:    oklch(96.5% calc(.012 * var(--k)) var(--h));
  --bg-secondary:  oklch(94% calc(.016 * var(--k)) var(--h));
  --bg-tertiary:   oklch(88% calc(.024 * var(--k)) var(--h));
  --bg-card:       oklch(91.5% calc(.022 * var(--k)) var(--h));
  --bg-card-hover: oklch(89.5% calc(.026 * var(--k)) var(--h));
  --campo:         oklch(99% calc(.005 * var(--k)) var(--h));
  --text-primary:   oklch(22% calc(.03 * var(--k)) var(--h));
  --text-secondary: oklch(35% calc(.03 * var(--k)) var(--h));
  --text-muted:     oklch(45% calc(.03 * var(--k)) var(--h));
  --text-inverse:   oklch(97% calc(.01 * var(--k)) var(--h));
  --border:        oklch(84% calc(.025 * var(--k)) var(--h));
  --border-strong: oklch(72% calc(.03 * var(--k)) var(--h));
  --ac:   oklch(50% var(--ca) var(--ha));
  --ac-t: #fff;
  --accent-primary: oklch(50% var(--ca) var(--ha));
  --accent-text:    oklch(44% var(--ca) var(--ha));
  --border-accent:  var(--ac);
  --nav-bg: var(--bg-primary); --nav-text: var(--text-muted); --nav-active: var(--text-primary); --nav-accent: var(--ac);
  --sc-c1: oklch(90% calc(.04 * var(--k)) var(--h)); --sc-c2: oklch(84% calc(var(--ca) * .6) var(--ha)); --sc-luce: oklch(97% calc(var(--ca) * .4) var(--ha)); --sc-ac: var(--ac);
  --sc-m0: oklch(78% calc(.045 * var(--k)) var(--h)); --sc-m1: oklch(66% calc(.05 * var(--k)) var(--h)); --sc-m2: oklch(52% calc(.05 * var(--k)) var(--h));
  --sc-stelle: 0;
  --tl1: 90%; --tle: 42%;
  --font-titoli: 'Gloock', Georgia, 'Times New Roman', serif;
  --raggio: 20px;
}
/* Notte */
[data-theme="dark"] {
  --bg-primary:    oklch(13% calc(.02 * var(--k)) var(--h));
  --bg-secondary:  oklch(17% calc(.024 * var(--k)) var(--h));
  --bg-tertiary:   oklch(28% calc(.034 * var(--k)) var(--h));
  --bg-card:       oklch(22% calc(.03 * var(--k)) var(--h));
  --bg-card-hover: oklch(25% calc(.034 * var(--k)) var(--h));
  --campo:         oklch(15% calc(.02 * var(--k)) var(--h));
  --text-primary:   oklch(94% calc(.02 * var(--k)) var(--h));
  --text-secondary: oklch(85% calc(.025 * var(--k)) var(--h));
  --text-muted:     oklch(74% calc(.03 * var(--k)) var(--h));
  --text-inverse:   oklch(15% calc(.02 * var(--k)) var(--h));
  --border:        oklch(30% calc(.03 * var(--k)) var(--h));
  --border-strong: oklch(41% calc(.035 * var(--k)) var(--h));
  --ac:   oklch(74% var(--ca) var(--ha));
  --ac-t: oklch(17% .03 var(--ha));
  --accent-primary: oklch(55% var(--ca) var(--ha));
  --accent-text:    oklch(78% calc(var(--ca) * .9) var(--ha));
  --sc-c1: oklch(19% calc(.05 * var(--k)) var(--h)); --sc-c2: oklch(36% calc(var(--ca) * .75) var(--ha)); --sc-luce: oklch(72% var(--ca) var(--ha));
  --sc-m0: oklch(27% calc(.045 * var(--k)) var(--h)); --sc-m1: oklch(21% calc(.04 * var(--k)) var(--h)); --sc-m2: oklch(16% calc(.03 * var(--k)) var(--h));
  --sc-stelle: .7;
  --tl1: 25%; --tle: 76%;
}
[data-theme="dark"][data-colore="nero"] { --bg-primary: #000; --bg-secondary: oklch(11% 0 0); --bg-card: oklch(16% 0 0); --bg-card-hover: oklch(20% 0 0); --bg-tertiary: oklch(24% 0 0); --campo: oklch(9% 0 0); }

/* ── Testo ── */
body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; }
h1, h2, h3, h4, .page-title, .card-title, .modal-title, .logo-text { font-family: var(--font-titoli); font-weight: 400; letter-spacing: -0.01em; overflow-wrap: break-word; }
.page-title, .page-header h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.page-subtitle { font-size: 1.05rem; color: var(--text-secondary); margin-top: 8px; }
.card-title { font-size: 1.35rem; color: var(--text-primary); }
::selection { background: color-mix(in oklch, var(--ac) 35%, transparent); }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
input, textarea { caret-color: var(--ac); }
[style*="font-size:0.6rem"], [style*="font-size:0.62rem"], [style*="font-size:0.65rem"], [style*="font-size:0.66rem"] { font-size: 0.76rem !important; }
[style*="font-size:0.68rem"], [style*="font-size:0.7rem"], [style*="font-size:0.72rem"] { font-size: 0.8rem !important; }
[style*="letter-spacing:0.08em"], [style*="letter-spacing:0.06em"], [style*="letter-spacing:0.05em"], [style*="letter-spacing:0.04em"], [style*="letter-spacing:1px"] { letter-spacing: 0 !important; }
[style*="font-family:var(--font-display)"]:not(h1):not(h2):not(h3) { font-family: var(--font-body) !important; font-weight: 600; }

/* ── Pulsanti ── */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: 999px; box-shadow: none; }
.btn-primary { background: var(--ac); border-color: transparent; color: var(--ac-t); box-shadow: none; }
.btn-primary:hover { background: var(--ac); border-color: transparent; filter: brightness(1.1); }
.btn-ghost, .btn-secondary, .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-secondary):not(.btn-gold) { background: color-mix(in oklch, var(--text-primary) 11%, transparent) !important; border-color: transparent !important; color: var(--text-primary); }
.btn-ghost:hover, .btn-secondary:hover, .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-secondary):not(.btn-gold):hover { background: color-mix(in oklch, var(--text-primary) 18%, transparent) !important; }
.btn-icon, .btn-icon-sm { border-radius: 12px; }
.card-header .btn-ghost, .card-header .btn-secondary { background: transparent !important; color: var(--text-muted); }
.card-header .btn-ghost:hover, .card-header .btn-secondary:hover { color: var(--text-primary); background: color-mix(in oklch, var(--text-primary) 10%, transparent) !important; }
.badge, .dn-chip { border-radius: 999px; font-weight: 600; }

/* ── Card: tonde e piatte ── */
.card,
[style*="background:var(--bg-card);border:1px solid var(--border)"],
[style*="background: var(--bg-card); border: 1px solid var(--border)"] {
  background: var(--bg-card) !important; border-color: transparent !important; border-radius: var(--raggio) !important; box-shadow: none !important;
}
.card { padding: 22px; }
.card:hover { box-shadow: none !important; border-color: transparent !important; }
.card-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; gap: 10px; }
.card .card { background: color-mix(in oklch, var(--text-primary) 6%, transparent) !important; border-radius: 14px !important; }
[style*="border-left:3px solid"], [style*="border-left: 3px solid"], [style*="border-left:4px solid"], [style*="border-left: 4px solid"] { border-left-width: 0 !important; border-radius: 12px !important; }
[style*="border-top:3px solid"], [style*="border-top: 3px solid"] { border-top-width: 0 !important; }

/* ── Campi, linguette, finestre ── */
.form-input, .form-select, .form-textarea { border-radius: 12px; background: var(--campo); border: 1px solid var(--border); font-family: var(--font-body); box-shadow: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ac); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ac) 25%, transparent); }
.form-label { font-family: var(--font-body); }
.tabs { background: transparent; border: 0; padding: 0; gap: 8px; flex-wrap: wrap; }
.tab-btn { flex: 0 0 auto; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; border-radius: 999px; padding: 8px 16px; background: color-mix(in oklch, var(--text-primary) 9%, transparent); color: var(--text-primary); box-shadow: none !important; }
.tab-btn.active { background: var(--text-primary); color: var(--bg-primary); }
.modal { border: 0 !important; border-radius: 24px !important; background: var(--bg-secondary); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6) !important; }
.modal-title { font-size: 1.5rem; }
.modal-header { border-bottom-color: transparent !important; }
.sc-tavolozze { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-tavolozze button { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--text-primary) 30%, transparent); }
.sc-tavolozze button[aria-pressed="true"] { border-color: var(--text-primary); box-shadow: inset 0 0 0 3px var(--bg-secondary); }

/* ── Barra in alto ── */
@media (min-width: 900px) {
  body.barra-alta #topbar { background: color-mix(in oklch, var(--bg-primary) 86%, transparent); border-bottom: 0; box-shadow: none; }
  .ba-logo { font-family: var(--font-titoli); font-weight: 400; font-size: 1.35rem; letter-spacing: 0; }
  .ba-voce { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--text-muted); box-shadow: none !important; position: relative; }
  .ba-voce[aria-current="page"], .ba-voce[data-dentro] { color: var(--text-primary); }
  .ba-voce[aria-current="page"]::after, .ba-voce[data-dentro]::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 14px; height: 2px; background: var(--ac); border-radius: 2px; }
  .ba-campagna { border: 0; background: color-mix(in oklch, var(--text-primary) 9%, transparent); border-radius: 999px; font-weight: 600; }
  .ba-campagna i { background: var(--ac); }
  .ba-menu { border: 0; border-radius: 16px; background: var(--bg-secondary); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--border); }
  .ba-menu button { border-radius: 10px; }
  .ba-icona { border-radius: 50%; }
}
.nav-label, .mobile-nav-label { font-family: var(--font-body); font-weight: 600; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--ac); }

/* ── La scena in testa alle pagine ── */
.sc-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; min-height: 420px; padding: 120px clamp(16px, 4vw, 56px) 36px !important; margin-bottom: 26px !important; }
.sc-hero.sc-basso { min-height: 280px; padding-top: 90px !important; }
.sc-hero > svg.sc-scena, .sc-sfondo > svg.sc-scena, .hn-card > svg.sc-scena { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.sc-hero::after, .hn-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in oklch, var(--bg-primary) 45%, transparent) 0%, transparent 26%, color-mix(in oklch, var(--bg-primary) 82%, transparent) 72%, var(--bg-primary) 100%); }
.sc-hero h1, .sc-hero h2 { font-family: var(--font-titoli) !important; font-weight: 400 !important; font-size: clamp(2.3rem, 6vw, 4.5rem) !important; line-height: 0.98; letter-spacing: -0.02em; margin: 0 !important; display: block !important; }
.sc-hero h1::before, .sc-hero h2::before { display: none !important; }
.sc-hero p { font-size: 1.1rem !important; color: var(--text-primary) !important; margin: 10px 0 0 !important; max-width: 62ch; }
.sc-testa { align-items: flex-end; }

/* ── Tessere ── */
.sc-riga { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.sc-t { --th: var(--h); position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 150px; padding: 22px; border-radius: var(--raggio); background: var(--bg-card); color: var(--text-primary); cursor: pointer; transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.sc-t:hover { transform: translateY(-3px); background: var(--bg-card-hover); }
.sc-t[data-t="lava"] { --th: 30; } .sc-t[data-t="bosco"] { --th: 155; } .sc-t[data-t="viola"] { --th: 300; } .sc-t[data-t="oro"] { --th: 85; } .sc-t[data-t="mare"] { --th: 230; }
.sc-et { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.sc-t[data-t]:not([data-t=""]) .sc-et { color: oklch(var(--tle) calc(.14 * var(--kt)) var(--th)); }
.sc-h { font-family: var(--font-titoli); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin: 0; }
.sc-s { font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.sc-larga { grid-column: span 2; }
.sc-capo { min-height: 200px; justify-content: flex-end; }
.sc-capo .sc-h { font-size: 2.1rem; }
.sc-urgente { background: color-mix(in oklch, var(--ac) 22%, var(--bg-card)); }
.sc-urgente:hover { background: color-mix(in oklch, var(--ac) 28%, var(--bg-card)); }
.sc-urgente .sc-et { color: var(--accent-text) !important; }
.sc-cw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; align-content: center; }
.sc-cw > .sc-et, .sc-cw > .sc-h, .sc-cw > .sc-s { grid-column: 1; }
.sc-cw > .sc-w { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.sc-ruota { width: 84px; height: 84px; display: block; }
.sc-ruota path, .sc-ruota circle { fill: color-mix(in oklch, var(--text-primary) 14%, transparent); stroke: var(--bg-card); stroke-width: 3; }
.sc-ruota .on { fill: var(--ac); }
.sc-giorni { text-align: center; font: 400 4rem/.9 var(--font-titoli); color: var(--accent-text); }
.sc-giorni em { display: block; font: 700 0.8rem var(--font-body); color: var(--text-muted); font-style: normal; margin-top: 6px; }
.sc-pallini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.sc-pallini i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in oklch, var(--text-primary) 35%, transparent); }
.sc-pallini i.on { background: var(--ac); border-color: var(--ac); }
/* Card colorate (scelta nelle Impostazioni): una tinta per categoria */
[data-card="colorate"] .sc-t[data-t]:not([data-t=""]):not(.sc-urgente) { background: oklch(var(--tl1) calc(.075 * var(--kt)) var(--th)); }
[data-card="colorate"] .sc-t[data-t]:not([data-t=""]) .sc-ruota path { stroke: oklch(var(--tl1) calc(.075 * var(--kt)) var(--th)); }
/* Tessere dentro una card (per esempio in "La mia dashboard"): piu' piccole e senza fondo doppio */
.card .sc-t { background: color-mix(in oklch, var(--text-primary) 7%, transparent); min-height: 0; padding: 16px; border-radius: 14px; }
.card .sc-t .sc-h { font-size: 1.15rem; }
.card .sc-ruota { width: 56px; height: 56px; }
.card .sc-giorni { font-size: 2.4rem; }
#dash-quest-attive, #dash-png-recenti, #dash-trame, #dash-clocks-preview, #dash-recent-notes, #dash-scadenze-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: none !important; padding: 0 !important; }
#dash-segreti-card, #dash-turni-fazione { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
#dash-segreti-card > .card-header, #dash-turni-fazione > .card-header { grid-column: 1 / -1; margin-bottom: 2px; }
.card .sc-larga { grid-column: auto; }

/* ── Dashboard ── */
#page-campagna > div.dn-con-scena { max-width: none; padding: 0 0 96px !important; }
#dn-hero { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; min-height: min(640px, 82vh); padding-top: 24px !important; margin-bottom: 8px !important; }
#dn-hero .dn-testa { margin: 0 0 auto !important; padding-bottom: 60px; align-items: center !important; }
#dn-hero #campagna-title { font-family: var(--font-body) !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0; color: var(--accent-text); line-height: 1.3; }
#dn-hero #dash-ultima-sess-sub { font-size: 0.9rem !important; color: var(--text-secondary) !important; margin: 2px 0 0 !important; }
#dn-hero .dn-lead-card { background: none !important; padding: 0 !important; margin: 0 !important; max-width: 920px; border-radius: 0 !important; overflow: visible; }
#dn-hero .dn-lead-card::before, #dn-hero .dn-lead-card::after { display: none !important; }
#dn-hero .dn-lead h2 { font-size: clamp(2.6rem, 8vw, 6.2rem) !important; line-height: .97; margin: 12px 0 18px !important; }
#dn-hero .dn-lead p { font-size: 1.15rem; line-height: 1.6; color: var(--text-primary); max-width: 62ch; }
#dn-hero .dn-quando { color: var(--accent-text); font-weight: 700; font-size: 0.95rem; }
#dn-hero .dn-azioni-s { gap: 10px; margin-top: 24px; }
#dn-hero .dn-azioni-s .btn { min-height: 48px; padding: 12px 22px; font-size: 1rem; background: color-mix(in oklch, var(--text-primary) 13%, transparent) !important; color: var(--text-primary) !important; }
#dn-hero .dn-azioni-s .btn:first-child { background: var(--ac) !important; color: var(--ac-t) !important; }
.dn-con-scena > #dash-mia-barra, .dn-con-scena > .dash-grid, .dn-con-scena > :not(#dn-hero) { margin-left: clamp(16px, 4vw, 56px) !important; margin-right: clamp(16px, 4vw, 56px) !important; }
#dash-mia-barra { border-bottom: 0 !important; gap: 8px !important; }
#dash-mia-barra [role="tablist"] { gap: 8px !important; }
#dash-mia-barra [role="tab"] { border-radius: 999px !important; padding: 8px 16px !important; background: color-mix(in oklch, var(--text-primary) 9%, transparent) !important; color: var(--text-primary); font-weight: 600; box-shadow: none !important; min-height: 38px; }
#dash-mia-barra [role="tab"][aria-selected="true"] { background: var(--text-primary) !important; color: var(--bg-primary); }
.dash-grid.dn { display: block !important; }
.dn-fascia { padding-top: 34px; }
.dn-fascia-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 14px; }
.dn-fascia-t h2 { font-size: 1.75rem; margin: 0 8px 0 0; }
.dn-fascia-t button { background: none; border: 0; padding: 4px 0; font: 600 0.92rem var(--font-body); color: var(--text-muted); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--text-muted) 45%, transparent); text-underline-offset: 4px; }
.dn-fascia-t button:hover { color: var(--text-primary); }
.dn-fascia .sc-riga > .card { margin: 0 !important; min-width: 0; }
.dn-sciolta, .dn-sciolta > :not(.card-header):not(.sc-t) { display: contents !important; }
/* Le tessere "sciolte" nella fascia tornano a misura piena (dentro una card sono piu' piccole) */
.dn-sciolta .sc-t { background: var(--bg-card); min-height: 150px; padding: 22px; border-radius: var(--raggio); }
.dn-sciolta .sc-t:hover { background: var(--bg-card-hover); }
.dn-sciolta .sc-t .sc-h { font-size: 1.45rem; }
.dn-sciolta .sc-capo { min-height: 200px; } .dn-sciolta .sc-capo .sc-h { font-size: 2.1rem; }
.dn-sciolta .sc-ruota { width: 84px; height: 84px; } .dn-sciolta .sc-giorni { font-size: 4rem; }
.dn-sciolta .sc-larga { grid-column: span 2; }
.dn-sciolta .sc-urgente { background: color-mix(in oklch, var(--ac) 22%, var(--bg-card)); }
[data-card="colorate"] .dn-sciolta .sc-t[data-t]:not([data-t=""]):not(.sc-urgente) { background: oklch(var(--tl1) calc(.075 * var(--kt)) var(--th)); }
.dn-sciolta > .card-header { display: none !important; }
.card.dn-nascosta { display: none !important; }
.dn-vuoti { margin-top: 34px; border: 1px dashed var(--border-strong); background: none; border-radius: var(--raggio); padding: 18px 22px; }
.dn-vuoti button { color: var(--accent-text); font-weight: 600; }

/* ── Home: le tue campagne ── */
#page-home .campaign-grid-section { max-width: 1320px; padding: 28px clamp(16px, 4vw, 56px) 96px; }
.hn-head h1 { font-family: var(--font-titoli); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
.hn-card { position: relative; isolation: isolate; overflow: hidden; display: flex !important; flex-direction: column; justify-content: flex-end; min-height: min(420px, 52vh); border: 0; border-radius: 28px; background: var(--bg-card); box-shadow: none; }
.hn-card:not(:first-child) { min-height: 340px; }
.hn-card .hn-main { padding: 40px clamp(20px, 4vw, 48px) 8px; gap: 12px; }
.hn-card .hn-main::before { display: none; }
.hn-card .hn-stato { color: var(--accent-text); font-weight: 700; font-size: 0.95rem; }
.hn-card h2 { font-family: var(--font-titoli); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: .97; letter-spacing: -0.02em; }
.hn-card:not(:first-child) h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.hn-card p { font-size: 1.12rem; line-height: 1.6; color: var(--text-primary); max-width: 62ch; }
.hn-card .hn-azioni-c { gap: 10px; margin-top: 14px; }
.hn-card .hn-azioni-c .btn { min-height: 48px; }
.hn-card .hn-elimina { color: var(--danger-text) !important; }
.hn-fatti { background: none !important; border: 0 !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px 32px !important; padding: 18px clamp(20px, 4vw, 48px) 34px !important; font-size: 0.92rem; }
.hn-fatti div { flex-direction: row !important; align-items: baseline; gap: 8px !important; }
.hn-fatti span { color: var(--text-muted); font-size: 0.9rem; }
.hn-fatti b { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; }
.hn-menu { border: 0; border-radius: 16px; background: var(--bg-secondary); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--border); }
.hn-menu button { border-radius: 10px; }

/* ── Wiki: pagina principale ── */
#page-wiki-hub { padding: 0 0 96px !important; }
.mz-hub { max-width: none !important; }
.mz-hub > :not(.sc-hero) { margin-left: clamp(16px, 4vw, 56px) !important; margin-right: clamp(16px, 4vw, 56px) !important; }
.mz-hub > div:nth-of-type(2) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 16px !important; }
.mz-voce { position: relative; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 22px !important; cursor: pointer; transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.mz-voce:hover { transform: translateY(-3px); background: var(--bg-card-hover) !important; }
.mz-voce > div:first-child { position: static; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 12px; margin: 0 0 auto !important; padding-bottom: 12px; }
.mz-voce > div:first-child > span:first-child { color: var(--text-muted) !important; }
.mz-voce > div:first-child > span:last-child { background: none !important; padding: 0 !important; font: 400 2.6rem/1 var(--font-titoli) !important; color: var(--accent-text) !important; font-variant-numeric: tabular-nums; }
.mz-voce > div:nth-child(2) { font: 400 1.5rem var(--font-titoli) !important; }
.mz-voce > div:nth-child(3) { font-size: 0.92rem !important; line-height: 1.4; }
.mz-hub > div:last-child > div:first-child { font: 400 1.5rem var(--font-titoli) !important; color: var(--text-primary) !important; margin: 14px 0 12px !important; text-transform: none !important; }
.mz-hub > div:last-child .card { border-style: solid !important; }

/* ── Wiki: elenchi e schede ── */
.page[id^="page-wiki-"] > * { max-width: none; }
.page[id^="page-wiki-"] [id^="wiki-"][id$="-list"], .page[id^="page-wiki-"] [id^="wiki-"][id$="-detail"] { position: relative; padding: 0 clamp(16px, 4vw, 56px) 110px !important; }
#wiki-section-tabbar { margin: 10px clamp(16px, 4vw, 56px) 8px !important; max-width: calc(100% - 2 * clamp(16px, 4vw, 56px)); gap: 8px !important; border: 0 !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#wiki-section-tabbar::-webkit-scrollbar { display: none; }
.mz-mazzo { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mz-carta { --th: var(--h); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 2 / 3; min-width: 0; width: 100%; padding: 20px; background: var(--bg-card); border: 0; border-radius: var(--raggio); text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.mz-carta:hover, .mz-carta:focus-visible { transform: translateY(-4px); background: var(--bg-card-hover); }
.mz-carta[data-seme="png"] { --th: 155; } .mz-carta[data-seme="luoghi"] { --th: 85; } .mz-carta[data-seme="fazioni"] { --th: 300; } .mz-carta[data-seme="lore"] { --th: 230; } .mz-carta[data-seme="quest"] { --th: 60; } .mz-carta[data-seme="sessioni"] { --th: 30; } .mz-carta[data-seme="pg"] { --th: 200; } .mz-carta[data-seme="incontri"] { --th: 20; }
.mz-carta .mz-mono { position: absolute; top: 6px; left: 18px; font: 400 7.5rem/1 var(--font-titoli); color: oklch(var(--tle) calc(.14 * var(--kt)) var(--th)); opacity: .32; pointer-events: none; user-select: none; }
.mz-carta .mz-indice { font-size: 0.82rem; font-weight: 700; color: oklch(var(--tle) calc(.14 * var(--kt)) var(--th)); }
.mz-carta .mz-indice i { display: none; }
.mz-carta .mz-nome { font: 400 1.45rem/1.15 var(--font-titoli); overflow-wrap: break-word; }
.mz-carta .mz-sotto { font-size: 0.9rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mz-carta .mz-tag { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 4px; }
.mz-carta .mz-tag span { font-size: 0.76rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: color-mix(in oklch, var(--text-primary) 10%, transparent); }
.mz-carta.con-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mz-carta.con-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in oklch, var(--bg-primary) 92%, transparent) 88%); }
.mz-carta.con-img > span { position: relative; z-index: 1; }
[data-card="colorate"] .mz-carta { background: oklch(var(--tl1) calc(.075 * var(--kt)) var(--th)); }
.mz-vuoto { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: var(--raggio); border: 1px dashed var(--border-strong); color: var(--text-secondary); }
.page[id^="page-wiki-"] [id^="wiki-"][id$="-list"] > .sc-hero > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.sc-sfondo { position: absolute; inset: 0 0 auto 0; height: 440px; overflow: hidden; opacity: .55; pointer-events: none; isolation: isolate; }
.sc-sfondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, var(--bg-primary)); }
.sc-sfondo > svg.sc-scena { z-index: 0; }
.mz-corte, .mz-corpo, .mz-resto { position: relative; }
.mz-corte { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: stretch; padding-top: 96px; margin-bottom: 36px; }
.mz-faccia { --th: var(--h); position: relative; aspect-ratio: 2 / 3; align-self: start; width: 100%; border-radius: var(--raggio); overflow: hidden; background: var(--bg-card); display: grid; place-items: center; }
[data-seme="png"] > .mz-faccia { --th: 155; } [data-seme="luoghi"] > .mz-faccia { --th: 85; } [data-seme="fazioni"] > .mz-faccia { --th: 300; } [data-seme="lore"] > .mz-faccia { --th: 230; } [data-seme="quest"] > .mz-faccia { --th: 60; } [data-seme="sessioni"] > .mz-faccia { --th: 30; } [data-seme="pg"] > .mz-faccia { --th: 200; }
[data-card="colorate"] .mz-faccia { background: oklch(var(--tl1) calc(.075 * var(--kt)) var(--th)); }
.mz-faccia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.mz-faccia .mz-iniz { font: 400 12rem/1 var(--font-titoli); color: oklch(var(--tle) calc(.14 * var(--kt)) var(--th)); opacity: .45; }
.mz-faccia .mz-angolo { display: none; }
.mz-testa { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mz-testa .mz-torna { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; font: 600 0.92rem var(--font-body); color: var(--text-muted); cursor: pointer; }
.mz-testa .mz-torna:hover { color: var(--text-primary); }
.mz-testa .mz-tipo { font: 700 0.95rem var(--font-body); color: var(--accent-text); }
.mz-testa .mz-tipo i { display: none; }
.mz-testa h2 { margin: 0; font: 400 clamp(2.4rem, 6vw, 4.8rem)/1 var(--font-titoli); letter-spacing: -0.02em; text-wrap: balance; }
.mz-testa .mz-ruolo { font-size: 1.2rem; color: var(--text-secondary); margin: 0; }
.mz-fatti { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.mz-fatti li { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 999px; background: color-mix(in oklch, var(--text-primary) 10%, transparent); font-size: 0.92rem; font-weight: 600; }
.mz-fatti li.stato { background: color-mix(in oklch, var(--stato, var(--ac)) 22%, transparent); color: color-mix(in oklch, var(--stato, var(--ac)) 55%, var(--text-primary)); }
.mz-testa .mz-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
.mz-testa .mz-azioni .btn { background: var(--ac) !important; color: var(--ac-t); min-height: 44px; padding: 10px 20px; font-size: 0.98rem; }
.mz-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.mz-corpo > * { min-width: 0; }
.mz-testi { display: flex; flex-direction: column; gap: 26px; }
.mz-sez h3 { margin: 0 0 4px; font: 400 1.4rem var(--font-titoli); color: var(--accent-text); }
.mz-sez div { font-size: 1.12rem; line-height: 1.65; white-space: pre-wrap; max-width: 62ch; }
.mz-lato { display: flex; flex-direction: column; gap: 16px; }
.mz-segreto { --th: 300; padding: 22px; border-radius: var(--raggio); background: var(--bg-card); }
[data-card="colorate"] .mz-segreto { background: oklch(var(--tl1) calc(.075 * var(--kt)) var(--th)); }
.mz-segreto::before { display: none; }
.mz-segreto h3 { margin: 0 0 6px; font: 400 1.4rem var(--font-titoli); }
.mz-segreto div { line-height: 1.6; white-space: pre-wrap; }
.mz-dettagli { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; padding: 22px; border-radius: var(--raggio); background: var(--bg-card); font-size: 0.96rem; }
.mz-dettagli dt { color: var(--text-muted); } .mz-dettagli dd { margin: 0; }
.mz-resto { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.mz-resto > div { margin-bottom: 0 !important; }
.mz-resto > div > div:first-child > div:first-child:not(:has(*)), .mz-resto > div > div:first-child:not(:has(*)) { font-family: var(--font-titoli) !important; font-size: 1.35rem !important; font-weight: 400 !important; color: var(--text-primary) !important; }
.mz-resto > div[style*="overflow:hidden"] > div:first-child { border-bottom: 0 !important; padding: 20px 22px 4px !important; }

/* ── Pagina della campagna ── */
#page-campagna-hub { padding: 28px clamp(16px, 4vw, 56px) 96px !important; }
#campagna-hub-body { max-width: 1320px; margin: 0 auto; }
.hub-tipo { text-transform: none !important; letter-spacing: 0 !important; font: 700 0.95rem var(--font-body) !important; color: var(--accent-text) !important; }
.hub-nome { font-family: var(--font-titoli) !important; font-weight: 400 !important; font-size: clamp(2.4rem, 6vw, 4.6rem) !important; line-height: 1; }
.hub-desc { max-width: 62ch; font-size: 1.1rem; line-height: 1.6; }
.hub-gruppo-titolo { font-family: var(--font-titoli) !important; font-size: 1.6rem !important; font-weight: 400 !important; color: var(--text-primary) !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 14px !important; }
.hub-griglia { gap: 14px !important; }
.hub-card { border-radius: var(--raggio) !important; padding: 18px 20px !important; transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.hub-card:hover, .hub-card:focus-visible { transform: translateY(-3px); background: var(--bg-card-hover) !important; }
.hub-card-icona { background: color-mix(in oklch, var(--text-primary) 9%, transparent) !important; color: var(--text-secondary) !important; border-radius: 50% !important; }
.hub-card-nome { font-family: var(--font-titoli); font-weight: 400 !important; font-size: 1.25rem !important; }
.hub-card-sotto { font-size: 0.86rem !important; }
.hub-card-num { background: none !important; font: 400 1.6rem var(--font-titoli) !important; color: var(--accent-text) !important; font-variant-numeric: tabular-nums; }

/* ── Sessione e strumenti ── */
#page-sessione, #page-generatori, #page-calendario, #page-schermo, #page-compendio, #page-scrittoio, #page-musica, #page-cartografo, #page-trame, #page-mappa { padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }
#page-sessione .page-header div[style*="padding:2px"] { background: color-mix(in oklch, var(--text-primary) 10%, transparent) !important; border: 0 !important; border-radius: 999px !important; padding: 3px !important; }
#page-sessione .page-header div[style*="padding:2px"] .btn-primary { background: var(--text-primary) !important; color: var(--bg-primary) !important; }
#page-sessione .page-header div[style*="padding:2px"] .btn-ghost { background: transparent !important; }
#cs-btn, #page-sessione .card-header .btn-primary, #page-sessione .combat-header .btn-primary { background: color-mix(in oklch, var(--text-primary) 11%, transparent) !important; color: var(--text-primary) !important; }
.party-card { border-radius: 16px !important; border: 0 !important; background: color-mix(in oklch, var(--text-primary) 7%, transparent) !important; }
.party-stat-box { border: 0 !important; background: color-mix(in oklch, var(--text-primary) 7%, transparent) !important; border-radius: 10px !important; }
.party-stat-value { font-family: var(--font-titoli); font-weight: 400; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
#page-generatori .btn-primary.btn-sm { background: var(--text-primary) !important; color: var(--bg-primary) !important; }
.generatori-grid { gap: 14px !important; }

/* ── Telefono ── */
#main-content { min-width: 0; }
#topbar, .topbar-title, #main-content > * { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  .sc-hero { min-height: 0; padding: 72px 16px 24px !important; gap: 14px; }
  .sc-hero.sc-basso { padding-top: 56px !important; min-height: 190px; }
  .sc-hero::after, .hn-card::after { background: linear-gradient(180deg, color-mix(in oklch, var(--bg-primary) 55%, transparent) 0%, color-mix(in oklch, var(--bg-primary) 35%, transparent) 22%, color-mix(in oklch, var(--bg-primary) 88%, transparent) 55%, var(--bg-primary) 100%); }
  .sc-hero p { font-size: 1rem !important; }
  .sc-riga { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-t { padding: 16px; min-height: 120px; border-radius: 16px; }
  .sc-h { font-size: 1.2rem; }
  .sc-larga, .sc-cw, .dn-sciolta .sc-larga { grid-column: 1 / -1; }
  .dn-sciolta .sc-t { padding: 16px; min-height: 120px; border-radius: 16px; } .dn-sciolta .sc-t .sc-h { font-size: 1.2rem; }
  .dn-sciolta .sc-ruota { width: 64px; height: 64px; } .dn-sciolta .sc-giorni { font-size: 3rem; }
  .sc-capo { min-height: 130px; } .sc-capo .sc-h { font-size: 1.6rem; }
  .sc-ruota { width: 64px; height: 64px; } .sc-giorni { font-size: 3rem; }
  .dn-fascia .sc-riga > .card { grid-column: 1 / -1; }
  #dn-hero { min-height: 0; padding-top: 16px !important; }
  #dn-hero .dn-testa { padding-bottom: 36px; }
  #dn-hero .dn-lead p { font-size: 1.02rem; }
  #dn-hero .dn-azioni-s .btn { flex: 1 1 auto !important; min-height: 46px !important; padding: 10px 16px; }
  .dn-fascia { padding-top: 26px; } .dn-fascia-t h2 { font-size: 1.5rem; }
  .hn-card { min-height: 0; border-radius: 22px; }
  .hn-card .hn-main { padding-top: 96px; }
  .hn-card .hn-azioni-c .btn { flex: 1 1 auto !important; }
  .hn-card .hn-azioni-c .btn-primary { flex: 1 1 100% !important; }
  .mz-mazzo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mz-carta { padding: 14px; border-radius: 16px; }
  .mz-carta .mz-mono { font-size: 5.4rem; left: 12px; }
  .mz-carta .mz-nome { font-size: 1.15rem; }
  .mz-corte { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 28px; }
  .mz-faccia { width: 92px; max-width: none; border-radius: 16px; } .mz-faccia .mz-iniz { font-size: 4.2rem; }
  .mz-corpo { grid-template-columns: 1fr; gap: 26px; }
  .mz-sez div { font-size: 1.05rem; }
  .mz-hub > div:nth-of-type(2) { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mz-voce { min-height: 140px; padding: 16px !important; }
  .mz-voce > div:first-child { padding-bottom: 8px; }
}
@media (max-width: 1100px) { .mz-corpo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sc-t, .mz-carta, .mz-voce, .hub-card { transition: none; } }

/* ── Rifiniture dopo le prime foto ── */
#page-campagna { padding: 0 !important; }
#page-campagna > div.dn-con-scena { max-width: none !important; margin: 0 !important; }
/* Con la barra in alto non c'e' il menu laterale: le linguette delle sezioni Wiki servono anche sul computer */
body.barra-alta #wiki-section-tabbar:not([style*="display:none"]):not([style*="display: none"]) { display: flex !important; }
.sc-hero { width: auto !important; max-width: none !important; box-sizing: border-box; }
.mz-testa h2 { font-size: clamp(2.4rem, 6vw, 4.8rem) !important; }
@media (max-width: 760px) { .mz-testa h2 { font-size: 2.3rem !important; } .sc-hero h1, .sc-hero h2 { font-size: 2.4rem !important; } }
#page-campagna-hub { padding: 0 0 96px !important; }
#campagna-hub-body { max-width: none; }
#campagna-hub-body > :not(.sc-hero) { margin-left: clamp(16px, 4vw, 56px); margin-right: clamp(16px, 4vw, 56px); }
#campagna-hub-body .sc-hero { min-height: 440px; }
#campagna-hub-body .hub-testa { margin-bottom: 8px; }
#page-campagna-hub { padding: 0 0 96px !important; }
#campagna-hub-body { max-width: none; }
#campagna-hub-body > :not(.sc-hero) { margin-left: clamp(16px, 4vw, 56px); margin-right: clamp(16px, 4vw, 56px); }
#campagna-hub-body .sc-hero { min-height: 440px; }
#campagna-hub-body .hub-testa { margin-bottom: 8px; }

/* ══ Pagine degli strumenti ══ */
/* I pulsanti con sola icona: il margine interno dei pulsanti normali schiacciava l'icona a un puntino */
.btn-icon, .btn-icon-sm { padding: 0 !important; display: inline-grid; place-items: center; flex: none; }
.btn-icon > svg, .btn-icon-sm > svg { flex: none; }
.btn-icon-sm { width: 36px; height: 36px; min-height: 0; font-size: 1rem; }
.btn-gold { background: var(--ac) !important; border-color: transparent !important; color: var(--ac-t) !important; }
/* Dove si lavora, la scena e' piu' bassa: lo strumento deve stare in vista */
#page-cartografo .sc-hero, #page-scrittoio .sc-hero, #page-compendio .sc-hero, #page-schermo .sc-hero, #page-generatori .sc-hero, #page-musica .sc-hero, #page-calendario .sc-hero, #page-sessione .sc-hero, #page-mappa .sc-hero { min-height: 200px; padding-top: 56px !important; padding-bottom: 26px !important; }
#page-cartografo .sc-hero h1, #page-scrittoio .sc-hero h1, #page-compendio .sc-hero h1, #page-schermo .sc-hero h1, #page-generatori .sc-hero h1, #page-musica .sc-hero h1, #page-calendario .sc-hero h1, #page-sessione .sc-hero h1, #page-mappa .sc-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important; }

/* Mappe */
#page-mappa .sc-hero { margin: 0 !important; flex: none; }
#page-mappa .sc-hero .page-subtitle { max-width: 70ch; font-size: 1rem !important; color: var(--text-secondary) !important; }
#mappa-canvas { background: var(--bg-secondary) !important; }
#mappa-vuota h2 { font-size: 1.6rem; }

/* Calendario: i giorni sono tessere */
.cal-mese { font-family: var(--font-titoli); font-size: 1.7rem; min-width: 240px; text-align: center; }
.cal-griglia { gap: 8px !important; }
.cal-g { border: 0 !important; border-radius: 14px !important; background: var(--bg-card); padding: 10px !important; min-height: 104px !important; transition: background-color .15s; }
.cal-g:hover { background: var(--bg-card-hover); }
.cal-g > div:first-child > span:first-child { font-family: var(--font-titoli); font-weight: 400 !important; font-size: 1.25rem !important; line-height: 1; }
.cal-g.cal-oggi { background: color-mix(in oklch, var(--ac) 24%, var(--bg-card)) !important; box-shadow: inset 0 0 0 2px var(--ac); }
.cal-g[style*="accent-secondary"] { box-shadow: inset 0 0 0 2px var(--text-primary); }
.cal-oggi-et { font-size: 0.74rem; font-weight: 700; color: var(--accent-text); }
.cal-ev { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; line-height: 1.3; margin-top: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; background: color-mix(in oklch, var(--c) 22%, transparent); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
#page-calendario .tabs { max-width: none !important; }
@media (max-width: 760px) {
  .cal-griglia { gap: 4px !important; }
  .cal-g { padding: 6px !important; min-height: 64px !important; border-radius: 10px !important; }
  .cal-g > div:first-child > span:first-child { font-size: 1rem !important; }
  .cal-ev { font-size: 0; padding: 0; width: 8px; height: 8px; margin-top: 4px; background: var(--c); }
  .cal-ev::before { display: none; }
  .cal-mese { min-width: 0; font-size: 1.3rem; }
}

/* Musica: il nome della playlist e' un titolo */
#page-musica .card .card-header .form-input:first-child { font-family: var(--font-titoli) !important; font-size: 1.45rem !important; font-weight: 400; background: transparent !important; border-color: transparent !important; padding-left: 0; }
#page-musica .card .card-header .form-input { background: transparent !important; border-color: transparent !important; padding-left: 0; color: var(--text-muted); }
#page-musica .card .card-header .form-input:first-child { color: var(--text-primary); }
#page-musica .card .card-header .form-input:focus { border-color: var(--ac) !important; padding-left: 10px; }
#page-musica .card .card-header .btn { color: var(--text-muted) !important; }

/* Compendio: elenco e filtri senza cornici */
.comp-list { border: 0 !important; border-radius: var(--raggio) !important; background: var(--bg-card); }
.comp-row { border-bottom-color: color-mix(in oklch, var(--text-primary) 9%, transparent) !important; padding: 12px 18px !important; }
.comp-row:hover { background: var(--bg-card-hover) !important; }

/* Cartografo e Scrittoio: il foglio di lavoro e' una tessera grande */
#carto-stage, #carto-vista { border-radius: var(--raggio) !important; border-color: transparent !important; }
#carto-titolo-mappa { font-family: var(--font-titoli); font-weight: 400; font-size: 1.6rem; }

/* ── Niente righe colorate su un lato: lo stato si legge dal fondo ── */
.card-accent, .card-gold { border-left: 0 !important; }
.toast-success, .toast-error, .toast-warning, .toast-info { border-left: 0; border-radius: 14px; }
.toast-success { background: color-mix(in oklch, var(--accent-success) 22%, var(--bg-secondary)); }
.toast-error { background: color-mix(in oklch, var(--accent-danger) 24%, var(--bg-secondary)); }
.toast-warning { background: color-mix(in oklch, var(--accent-warning) 22%, var(--bg-secondary)); }
.toast-info { background: color-mix(in oklch, var(--ac) 18%, var(--bg-secondary)); }
.comp-note { border: 0; border-radius: 12px; background: color-mix(in oklch, var(--accent-warning) 16%, var(--bg-card)); }
.combat-row-active { border-left: 0; background: color-mix(in oklch, var(--ac) 20%, transparent) !important; box-shadow: inset 0 0 0 2px var(--ac); border-radius: 12px; }

/* ══ Dashboard: il quadro completo nel primo schermo ══
   Nella scena: in alto nome della campagna, viste e Condividi; sotto, a sinistra l'ultima sessione,
   a destra "Cosa incombe" in tessere compatte. Sotto la scena partono subito Quest e Mondo. */
#dn-hero { display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: end; gap: 22px 36px; min-height: 0 !important; padding: 20px clamp(16px, 4vw, 56px) 30px !important; margin-bottom: 0 !important; }
#dn-hero.dn-con-incombe { grid-template-columns: minmax(0, 1fr) minmax(360px, 500px); }
#dn-hero .dn-testa { grid-column: 1 / -1; display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 10px 16px; margin: 0 !important; padding: 0 0 clamp(70px, 14vh, 150px) !important; }
#dn-hero .dn-testa > div:first-child { margin-right: auto; }
#dn-hero #dash-mia-barra { order: 2; margin: 0 !important; }
#dn-hero .dn-testa > div:last-child { order: 3; }
#dn-hero .dn-lead-card { align-self: end; }
#dn-hero .dn-lead h2 { font-size: clamp(2.6rem, 6.4vw, 5.2rem) !important; margin: 10px 0 14px !important; }
#dn-hero .dn-lead p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#dn-hero .dn-azioni-s { margin-top: 20px; }
#dn-hero > .dn-fascia { padding-top: 0; align-self: end; }
#dn-hero > .dn-fascia .dn-fascia-t { margin-bottom: 10px; }
#dn-hero > .dn-fascia .dn-fascia-t h2 { font-size: 1.45rem !important; line-height: 1.1; }
#dn-hero > .dn-fascia .sc-riga { grid-template-columns: 1fr 1fr; gap: 10px; }
#dn-hero > .dn-fascia .sc-t { min-height: 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in oklch, var(--bg-card) 92%, transparent); gap: 4px; }
#dn-hero > .dn-fascia .sc-t:hover { background: var(--bg-card-hover); }
#dn-hero > .dn-fascia .sc-urgente { background: color-mix(in oklch, var(--ac) 26%, var(--bg-card)); }
#dn-hero > .dn-fascia .sc-h { font-size: 1.15rem !important; }
#dn-hero > .dn-fascia .sc-s { font-size: 0.84rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#dn-hero > .dn-fascia .sc-larga { grid-column: 1 / -1; }
#dn-hero > .dn-fascia .sc-cw { grid-column: auto; }
#dn-hero > .dn-fascia .sc-cw.sc-larga { grid-column: 1 / -1; }
#dn-hero > .dn-fascia .sc-ruota { width: 52px; height: 52px; }
#dn-hero > .dn-fascia .sc-giorni { font-size: 2.6rem; }
#dn-hero > .dn-fascia .sc-pallini { padding-top: 6px; } #dn-hero > .dn-fascia .sc-pallini i { width: 12px; height: 12px; }
#dn-hero > .dn-fascia .sc-riga > .card { grid-column: 1 / -1; }
.dn-con-scena > .dash-grid > .dn-fascia:first-of-type, .dn-con-scena > .dash-grid > .dn-fascia[data-f="quest"] { padding-top: 22px; }
@media (max-width: 1100px) {
  #dn-hero.dn-con-incombe { grid-template-columns: minmax(0, 1fr); }
  #dn-hero .dn-testa { padding-bottom: 60px !important; }
  #dn-hero > .dn-fascia { padding-top: 14px; }
}
@media (max-width: 760px) {
  #dn-hero { gap: 16px; padding: 16px 16px 22px !important; }
  #dn-hero .dn-testa { padding-bottom: 44px !important; }
  #dn-hero .dn-testa > div:first-child { width: 100%; }
  #dn-hero .dn-lead h2 { font-size: 2.4rem !important; }
  #dn-hero .dn-lead p { -webkit-line-clamp: 5; }
  #dn-hero > .dn-fascia .sc-riga { grid-template-columns: 1fr; }
  #dn-hero > .dn-fascia .sc-cw { grid-column: 1 / -1; }
}
#dn-hero .dn-lead-card { grid-column: 1 / 2 !important; } #dn-hero > .dn-fascia { grid-column: 2 / 3; } @media (max-width: 1100px) { #dn-hero .dn-lead-card, #dn-hero > .dn-fascia { grid-column: 1 / -1 !important; } }
@media (max-width: 760px) {
  #dn-hero .dn-testa { padding-bottom: 18px !important; gap: 8px; }
  #dn-hero #dash-mia-barra [role="tab"], #dn-hero .dn-testa .btn { min-height: 34px !important; padding: 6px 12px !important; font-size: 0.86rem !important; }
  #dn-hero .dn-lead p { -webkit-line-clamp: 3; font-size: 0.98rem; }
  #dn-hero .dn-azioni-s { margin-top: 14px; gap: 8px; }
  #dn-hero .dn-azioni-s .btn { flex: 1 1 0 !important; min-height: 42px !important; padding: 8px 10px !important; font-size: 0.9rem !important; white-space: normal; }
  #dn-hero .dn-azioni-s .btn:nth-child(3) { flex-basis: 100% !important; background: transparent !important; min-height: 32px !important; text-decoration: underline; text-underline-offset: 4px; }
}

/* ══ Cartografo e Scrittoio: le scelte sono tessere con icona ══ */
#carto-tipi, #sc-voci { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(7.6em, 1fr)); gap: 10px !important; margin-bottom: 14px !important; }
.sc-scelta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 92px; padding: 14px 10px; line-height: 1.2; overflow-wrap: normal; hyphens: manual; border: 0; border-radius: 18px; background: var(--bg-card); color: var(--text-secondary); font: 600 0.95rem var(--font-body); text-align: center; cursor: pointer; transition: background-color .15s, transform .2s cubic-bezier(.2, .7, .2, 1); }
.sc-scelta:hover { background: var(--bg-card-hover); color: var(--text-primary); transform: translateY(-2px); }
.sc-scelta[aria-selected="true"] { background: var(--ac); color: var(--ac-t); }
.sc-scelta .sc-icona { opacity: .9; }
.carto-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px !important; }
.carto-pannello { background: var(--bg-card) !important; border-radius: var(--raggio) !important; }
.carto-pannello .form-label { color: var(--text-muted); font-weight: 600; }
.carto-nome-mappa, #carto-titolo-mappa { font-family: var(--font-titoli) !important; font-weight: 400 !important; font-size: 1.7rem !important; line-height: 1.1; }
#carto-stage, #sc-stage { border-radius: var(--raggio) !important; border: 0 !important; overflow: hidden; background: var(--bg-card) !important; }
.carto-zoom { border: 0 !important; border-radius: 999px !important; background: color-mix(in oklch, var(--bg-primary) 80%, transparent) !important; box-shadow: none !important; }
#carto-contesto { border-radius: 14px !important; border: 0 !important; background: color-mix(in oklch, var(--ac) 18%, var(--bg-card)) !important; }
@media (max-width: 760px) {
  #carto-tipi, #sc-voci { grid-template-columns: repeat(auto-fill, minmax(6.4em, 1fr)); gap: 8px !important; }
  .sc-scelta { min-height: 74px; padding: 10px 6px; font-size: 0.85rem; gap: 6px; border-radius: 14px; }
  .sc-scelta .sc-icona { width: 22px; height: 22px; }
}

/* ══ Schermo del DM ══ */
#schermo-empty { border: 1px dashed var(--border-strong) !important; border-radius: var(--raggio) !important; background: none !important; padding: 34px clamp(16px, 4vw, 40px) !important; }
#schermo-empty h2 { font-size: 1.8rem; }
.schermo-scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; margin: 22px auto 0; max-width: 980px; width: 100%; box-sizing: border-box; text-align: left; }
.schermo-scelta { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 0; border-radius: 18px; background: var(--bg-card); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, transform .2s cubic-bezier(.2, .7, .2, 1); }
.schermo-scelta:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.schermo-scelta-icona { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--ac) 20%, transparent); color: var(--accent-text); }
.schermo-scelta-icona svg { width: 20px; height: 20px; }
.schermo-scelta-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.schermo-scelta-testo b { font-family: var(--font-titoli); font-weight: 400; font-size: 1.2rem; }
.schermo-scelta-testo small { font-size: 0.86rem; color: var(--text-muted); line-height: 1.4; }
.schermo-block { background: var(--bg-card) !important; border: 0 !important; border-radius: var(--raggio) !important; box-shadow: none !important; }
.schermo-block-header { border-bottom: 0 !important; background: none !important; padding: 14px 16px 6px !important; }
.schermo-block-title { font-family: var(--font-titoli); font-weight: 400; font-size: 1.2rem; }
.schermo-block-icon { color: var(--accent-text); }
.schermo-block-header { flex-wrap: wrap; row-gap: 4px; }
.schermo-block-title { text-transform: none !important; letter-spacing: 0 !important; color: var(--text-primary) !important; flex: 1 1 120px !important; min-width: 0; }
/* Un solo pulsante per blocco, sempre visibile (anche col dito): apre il menu con le azioni scritte per esteso */
.schermo-block { position: relative; }
.schermo-block-header { flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; }
.schermo-block-menu-btn { margin-left: auto; flex: none; width: 36px; height: 36px; margin-block: -6px; margin-right: -8px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, color .15s; }
.schermo-block-menu-btn:hover, .schermo-block-menu-btn[aria-expanded="true"] { background: color-mix(in oklch, var(--text-primary) 10%, transparent); color: var(--text-primary); }
.schermo-block-menu-btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
#schermo-menu { position: fixed; z-index: 1000; min-width: 230px; padding: 6px; border-radius: 16px; background: var(--bg-secondary); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65), inset 0 0 0 1px var(--border); }
#schermo-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--text-primary); font: 500 0.95rem var(--font-body); text-align: left; cursor: pointer; }
#schermo-menu button svg { flex: none; color: var(--text-muted); }
#schermo-menu button:hover:not([disabled]), #schermo-menu button:focus-visible { background: color-mix(in oklch, var(--text-primary) 9%, transparent); outline: none; }
#schermo-menu button[disabled] { opacity: .38; cursor: default; }
#schermo-menu button.pericolo, #schermo-menu button.pericolo svg { color: var(--danger, #e5484d); }
#schermo-menu .sm-nota { padding: 6px 12px 6px; font-size: 0.82rem; color: var(--text-muted); }
#schermo-menu hr { border: 0; height: 1px; margin: 4px 8px; background: var(--border); }
.toast { align-items: center; }
.toast-azione { margin-left: 8px; padding: 6px 12px; border: 0; border-radius: 999px; background: color-mix(in oklch, var(--text-primary) 14%, transparent); color: inherit; font: 600 0.88rem var(--font-body); cursor: pointer; }
.toast-azione:hover { background: color-mix(in oklch, var(--text-primary) 22%, transparent); }
/* Griglia a muratura (Schermo._layoutMasonry): righe da 1px, ogni blocco ne occupa quante ne servono alla sua altezza.
   Senza questa regola i blocchi lasciavano buchi enormi e lo spostamento sembrava non funzionare. */
#schermo-grid, .schermo-grid { grid-auto-rows: 1px !important; row-gap: 16px !important; align-items: start !important; }
.schermo-block-header { cursor: grab; }
.schermo-block-header:active { cursor: grabbing; }
.schermo-block-resize { height: 18px !important; cursor: ns-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.schermo-block-resize::after { content: ''; width: 36px; height: 4px; border-radius: 4px; background: color-mix(in oklch, var(--text-primary) 18%, transparent); }
.schermo-block-resize:hover::after { background: var(--ac); }

/* ══ Sfondi con immagini (js/scena.js) ══
   L'immagine prende la luminosita' (luminosity) e la tavolozza da' tinta e saturazione:
   la stessa immagine segue brace, bosco, inchiostro... e la luce notte o giorno. */
.sc-foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--sc-c1), var(--sc-c2)); pointer-events: none; }
.sc-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; mix-blend-mode: luminosity; filter: grayscale(1) brightness(.62) contrast(1.12); }
:root:not([data-theme="dark"]) .sc-foto img { filter: grayscale(1) brightness(1.18) contrast(.85); opacity: .55; }
.hn-card > .sc-foto, .sc-sfondo > .sc-foto { z-index: -2; }
.sc-sfondo > .sc-foto { z-index: 0; }
.sc-cambia { position: absolute; right: clamp(12px, 3vw, 40px); bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border: 0; border-radius: 999px; background: color-mix(in oklch, var(--bg-primary) 70%, transparent); color: var(--text-secondary); font: 600 0.82rem var(--font-body); cursor: pointer; opacity: .75; transition: opacity .15s, background-color .15s; }
.sc-cambia:hover, .sc-cambia:focus-visible { opacity: 1; background: var(--bg-card); color: var(--text-primary); }
#dn-hero > .sc-cambia { bottom: auto; top: 22px; right: auto; left: 50%; transform: translateX(-50%); }
.sc-menu-sfondo { position: absolute; z-index: 400; width: min(340px, calc(100vw - 24px)); padding: 18px; border-radius: 18px; background: var(--bg-secondary); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sc-menu-sfondo h3 { font-size: 1.35rem; margin: 0; }
.sc-menu-sfondo h4 { font: 700 0.85rem var(--font-body); color: var(--text-muted); margin: 6px 0 0; }
.sc-menu-sfondo p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.sc-menu-sfondo .sc-nota { font-size: 0.82rem; color: var(--text-muted); }
.sc-menu-sfondo .sc-carica { cursor: pointer; }
.sc-paesaggi { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-paesaggi button { border: 0; border-radius: 999px; padding: 6px 12px; background: color-mix(in oklch, var(--text-primary) 9%, transparent); color: var(--text-primary); font: 600 0.84rem var(--font-body); cursor: pointer; }
.sc-paesaggi button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-primary); }
@media (max-width: 760px) { #dn-hero > .sc-cambia { top: auto; bottom: 10px; left: auto; right: 12px; transform: none; } }

/* I titoli dei vuoti ora sono h2: stessa misura di prima */
.module-placeholder h2 { font-size: 1.4rem; margin: 0 0 6px; }
.sc-hero > .sc-cambia { top: 14px; bottom: auto; } #dn-hero > .sc-cambia { top: 22px; } @media (max-width: 760px) { .sc-hero > .sc-cambia { top: 10px; right: 12px; } #dn-hero > .sc-cambia { top: auto; bottom: 10px; } }
.schermo-block-resize { background: transparent !important; border-top: 0 !important; }
.carto-azioni .carto-zoom { position: static !important; padding: 0 !important; background: var(--bg-card) !important; margin-right: 4px; }

/* Campo di ricerca: lente a sinistra, croce per svuotare solo quando c'e' testo, sempre largo quanto il suo spazio */
.campo-cerca { position: relative; display: flex; align-items: center; width: 100%; margin-bottom: var(--space-md); }
.campo-cerca > svg { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
.campo-cerca input { width: 100%; padding-left: 42px !important; padding-right: 42px !important; }
.campo-cerca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.campo-cerca-via { position: absolute; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; }
.campo-cerca-via:hover { background: color-mix(in oklch, var(--text-primary) 10%, transparent); color: var(--text-primary); }
.campo-cerca input:placeholder-shown ~ .campo-cerca-via { display: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.modal-header > .btn-icon, .modal-header .btn-icon:last-child { align-self: center; flex: none; width: 40px !important; height: 40px !important; min-height: 0 !important; padding: 0 !important; border-radius: 999px !important; display: grid; place-items: center; }

/* Finestra dei punti ferita nel combattimento */
.pf-stato { margin: 0 0 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pf-valore { font-size: 1.6rem !important; text-align: center; height: 56px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.pf-azioni { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-azioni .btn { min-height: 48px; border: 0 !important; border-radius: 14px !important; font-weight: 600; justify-content: center; }
.pf-azioni .pf-temp { grid-column: 1 / -1; }
.pf-danno { background: color-mix(in oklch, var(--danger-text, #e5484d) 40%, var(--bg-card)) !important; color: var(--text-primary) !important; }
.pf-cura { background: color-mix(in oklch, var(--success-text, #3fb950) 40%, var(--bg-card)) !important; color: var(--text-primary) !important; }
.pf-temp { background: color-mix(in oklch, #4ea1ff 34%, var(--bg-card)) !important; color: var(--text-primary) !important; }
.pf-azioni .pf-scelta { box-shadow: inset 0 0 0 2px currentColor; }
.pf-temp-badge { margin-top: 2px; font-size: 0.7rem; font-weight: 700; color: #7db8ff; white-space: nowrap; }
.pf-valore::-webkit-inner-spin-button, .pf-valore::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pf-valore { -moz-appearance: textfield; }
[data-theme="light"] .pf-temp-badge { color: #1f5fae; }
.musica-desc { display: block; width: 100%; min-height: 0 !important; resize: none; overflow: hidden; field-sizing: content; font-size: 0.86rem !important; line-height: 1.45; background: transparent !important; border-color: transparent !important; padding: 2px 4px !important; color: var(--text-muted) !important; }
.musica-desc:focus { border-color: var(--border) !important; color: var(--text-primary) !important; }
.musica-desc { display: block; width: 100%; min-height: 0 !important; resize: none; overflow: hidden; field-sizing: content; font-size: 0.86rem !important; line-height: 1.45; background: transparent !important; border-color: transparent !important; padding: 2px 4px !important; color: var(--text-muted) !important; }
.musica-desc:focus { border-color: var(--border) !important; color: var(--text-primary) !important; }
.hn-head .hn-azioni { flex-wrap: wrap; } .hn-head .hn-azioni > .btn { flex: 1 1 auto; }
#mappa-vuota { overflow-y: auto; justify-content: safe center !important; } #mappa-canvas { min-height: 380px; }

/* Home: le altre campagne in righe compatte sotto quella in uso */
.hn-altre { grid-column: 1 / -1; margin: 18px 0 2px; font: 400 1.5rem var(--font-titoli); color: var(--text-primary); }
.hn-riga { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 16px 20px; border-radius: 18px; background: var(--bg-card); }
.hn-riga-testo { flex: 1 1 260px; min-width: 0; }
.hn-riga h3 { margin: 0 0 4px; font: 400 1.35rem/1.15 var(--font-titoli); color: var(--text-primary); }
.hn-riga p { margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }
.hn-riga-azioni { display: flex; flex-wrap: wrap; gap: 6px; }
.hn-riga .hn-elimina { color: var(--danger-text) !important; }

/* Impostazioni: tre gruppi, titoli normali (niente maiuscolo), interruttore per le card */
.imp-corpo { display: flex; flex-direction: column; gap: 26px; padding: 20px !important; }
.imp-corpo > section + section { border-top: 1px solid var(--border); padding-top: 20px; }
.imp-titolo { margin: 0 0 14px; font: 400 1.35rem var(--font-titoli); color: var(--text-primary); text-transform: none; letter-spacing: 0; }
.imp-riquadro { background: var(--bg-secondary); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.imp-nota { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.imp-interruttore { display: flex; align-items: center; gap: 12px; margin-top: 16px; cursor: pointer; }
.imp-interruttore input { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: color-mix(in oklch, var(--text-primary) 18%, transparent); position: relative; cursor: pointer; transition: background-color .15s; }
.imp-interruttore input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-primary); transition: transform .18s; }
.imp-interruttore input:checked { background: var(--ac); }
.imp-interruttore input:checked::after { transform: translateX(18px); background: var(--ac-t, #fff); }
.imp-interruttore input:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.imp-interruttore span { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.imp-interruttore small { font-size: 0.8rem; color: var(--text-muted); }

/* Trascinamento dei blocchi: il blocco segue il dito, il riquadro tratteggiato mostra dove andra' */
#schermo-grid { position: relative; }
#schermo-segno-arrivo { position: absolute; z-index: 1; pointer-events: none; border: 2px dashed var(--ac); border-radius: var(--raggio); background: color-mix(in oklch, var(--ac) 10%, transparent); transition: left .12s, top .12s, width .12s; }
.schermo-block.in-volo { z-index: 50; opacity: .92; pointer-events: none; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7) !important; transition: none !important; }

/* Legenda dei pulsanti degli scontri */
.combat-legenda { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; gap: 6px 16px; padding: 10px 16px 12px; font-size: 0.8rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.combat-legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.combat-legenda svg { color: var(--text-secondary); }
.combat-legenda b { font-family: var(--font-mono); color: var(--text-secondary); margin-right: 2px; }
.combat-legenda span:nth-child(2) svg, .combat-actions-col button[title="Condizioni"] { color: var(--danger-text); }
@media (max-width: 600px) { .combat-legenda span { white-space: normal; } }

/* Righe dello scontro: quando l'elenco e' stretto (tablet col menu laterale, telefono) i pulsanti vanno
   su una seconda riga e si vedono tutti, invece di essere tagliati fuori dal bordo */
.combat-list { container-type: inline-size; }
@container (max-width: 760px) {
  .combat-list .combat-row { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) auto !important; grid-template-areas: "init name ca" "hp hp actions" !important; align-items: center; gap: 8px 12px !important; padding: 10px 12px !important; }
  .combat-list .combat-init-col { grid-area: init; width: auto !important; }
  .combat-list .combat-name-col { grid-area: name; overflow-wrap: anywhere; font-size: inherit !important; }
  .combat-list .combat-ca-col { grid-area: ca; display: block !important; }
  .combat-list .combat-hp-col { grid-area: hp; width: auto !important; }
  .combat-list .combat-actions-col { grid-area: actions; display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 4px !important; }
  .combat-list .combat-actions-col .btn-icon-sm { display: inline-flex !important; width: 40px !important; height: 40px !important; }
}
@container (max-width: 400px) {
  .combat-list .combat-row { grid-template-areas: "init name ca" "hp hp hp" "actions actions actions" !important; }
  .combat-list .combat-actions-col { justify-content: space-between; }
}
.imp-interruttore input[type="checkbox"] { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } .imp-interruttore > span { flex: 1 1 auto; min-width: 0; }
.combat-legenda em { font-style: normal; }
.combat-legenda b { white-space: nowrap; }
@container (max-width: 560px) { .combat-legenda-wrap .leg-extra { display: none; } }
@media (max-width: 600px) { .combat-legenda .leg-extra { display: none; } .combat-legenda { gap: 6px 14px; font-size: 0.78rem; } .combat-list .combat-actions-col { justify-content: flex-end !important; } }

/* Scheda di un PNG/luogo su schermi medi (tablet): iniziale piu' piccola, titolo che si adatta alla colonna */
.mz-testa { container-type: inline-size; }
.mz-testa h2 { font-size: clamp(2rem, 15cqi, 4.8rem) !important; overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (min-width: 761px) and (max-width: 1100px) {
  .mz-corte { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; padding-top: 56px; }
  .mz-faccia .mz-iniz { font-size: 7.5rem; }
}
.cal-g { min-width: 0; overflow: hidden; } .cal-g .cal-ev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.schermo-scelta { min-width: 0; } .schermo-scelta-testo b { overflow-wrap: break-word; }
/* Nota della Wiki: il titolo resta leggibile, i pulsanti vanno a capo quando lo spazio e' poco */
:has(> #wiki-note-title) { flex-wrap: wrap; row-gap: 8px; }
#wiki-note-title { flex: 1 1 16ch !important; min-width: 16ch; }

/* Passaggio del mouse sui pulsanti principali: niente vecchio rosso scuro, resta il colore della tavolozza */
.btn-primary:hover:not(:disabled) { background: var(--ac) !important; color: var(--ac-t) !important; filter: brightness(1.1); }
.dice-toggle:hover { background: var(--ac) !important; filter: brightness(1.1); }
/* Titoletti delle categorie del Compendio: leggibili, senza maiuscolo spaziato */
.comp-cat-header { font: 600 0.84rem var(--font-body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-secondary) !important; }
/* Il puntino della campagna non pulsa: indica solo quale e' aperta */
.campaign-dot { animation: none !important; }

/* Bersagli da toccare almeno 32px (sopra il minimo WCAG di 24) dove prima erano minuscoli */
.party-card .btn-icon-sm { width: 32px !important; height: 32px !important; }
.party-inspiration-btn { min-width: 32px; min-height: 32px; display: inline-grid !important; place-items: center; border-radius: 10px; }
button[onclick^="Clocks.tick"], button[onclick^="Clocks.untick"], button[onclick^="Clocks.remove"] { min-width: 32px; min-height: 32px; display: inline-grid !important; place-items: center; border-radius: 999px !important; font-size: 1rem !important; }
button[onclick^="Clocks."]:hover { background: color-mix(in oklch, var(--text-primary) 10%, transparent) !important; }
button[onclick*="').value='';Compendio.onSearch("] { min-width: 32px; min-height: 32px; display: grid !important; place-items: center; border-radius: 999px !important; }
.hn-piede button, #hn-piede button, .dn-fascia a, .dn-testa button { min-height: 32px; }
.dn-vuoti button { min-height: 32px; }

/* Calendario: lune, stagioni e meteo (js/calendario-cielo.js) */
.cielo-cella { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 4px; color: var(--text-secondary); font-size: 0.68rem; }
.cal-g { display: flex; flex-direction: column; }
.cielo-tempo { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.cielo-luna { flex-shrink: 0; color: var(--text-primary); }
.cielo-stagione { font-size: 0.75rem; font-weight: 600; color: var(--accent-text); padding: 2px 10px; border-radius: 999px; background: var(--bg-tertiary); white-space: nowrap; }
.cielo-dettaglio { display: grid; gap: 6px; font-size: 0.82rem; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--bg-secondary); }
.cielo-dettaglio .cielo-luna { color: var(--text-primary); }

/* Mappe: esagoni ed esplorazione (js/mappa-esagoni.js) */
.esa-pannello { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(100% - 24px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px 12px; cursor: default; font-size: 0.85rem; display: grid; gap: 8px; }
.esa-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.esa-info { font-size: 0.82rem; line-height: 1.4; }
.esa-check input { accent-color: var(--accent-primary); width: 15px; height: 15px; }
.esa-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.esa-gruppo-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.esa-sel { width: auto; font-size: 0.8rem; padding: 3px 8px; }
.esa-num { width: 72px; font-size: 0.8rem; padding: 3px 8px; }
.esa-campo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-secondary); }
.esa-griglia summary { cursor: pointer; color: var(--text-secondary); font-size: 0.8rem; }
.esa-griglia[open] summary { margin-bottom: 8px; }
#mappa-esagoni g { pointer-events: auto; }
.esa-pannello { max-height: 48%; overflow-y: auto; }
@media (max-width: 600px) {
  .esa-pannello { bottom: 8px; padding: 8px 10px; gap: 6px; }
  .esa-gruppo-seg { order: 3; width: 100%; }
}

/* Le mie tabelle: tiri multipli */
.tc-quanti { width: auto; font-size: 0.8rem; padding: 4px 8px; }
.tc-multi { flex: 1; margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.tc-note { flex-shrink: 0; white-space: nowrap; }

/* Calendario: anno bisestile */
.cal-bis { font-size: 0.7rem; font-weight: 600; color: var(--accent-text); padding: 1px 8px; border-radius: 999px; background: var(--bg-tertiary); margin-left: 6px; vertical-align: middle; }