/* Clanova: un villaggio di notte illuminato dalle lanterne.
   Colori: notte indaco per gli sfondi, pergamena di luna per il testo, oro di lanterna per le azioni, brace per gli
   avvisi, e i quattro colori dei clan solo dove servono a riconoscere un clan.
   Caratteri: Pixelify Sans per titoli e bottoni (il mondo è in pixel), Atkinson Hyperlegible per leggere,
   Tiny5 solo per i nomi sulla mappa. Numeri, prezzi, date e codici sono sempre in Atkinson (700, cifre tutte larghe
   uguali): in pixel 2/Z, 5/S e 8/B si confondono. Dentro i testi in pixel le cifre e il simbolo € arrivano da
   'Cifre Chiare' (caratteri.css). Le cornici hanno gli angoli a gradino, come i pannelli dei giochi in pixel. */

:root {
  color-scheme: dark;
  --notte: #121833;
  --notte-2: #1b2347;
  --notte-3: #27315e;
  --linea: #3a4680;
  --luna: #f4ecd8;
  --nebbia: #b4bbdc;
  --lanterna: #ffc861;
  --lanterna-scura: #c98a1e;
  --brace: #ff7a3d;
  --fuoco: #e8553d;
  --acqua: #3fa7e0;
  --terra: #86b24c;
  --aria: #bcd0f5;
  --ok: #8fd18a;
  --f-pixel: 'Cifre Chiare', 'Pixelify Sans', system-ui, sans-serif;
  --f-testo: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gradino: 4px;
  --largo: 1120px;
  --stretto: 70ch;
  --testata: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Pixelify Sans unisce «fi» e «fl» in un segno che sembra una A: @sabafi_98 diventava @sabaA_98, Classifiche ClassiAche.
   Serve !important: ogni regola che usa la scorciatoia «font:» rimette le legature a «normal». Le emoji non cambiano. */
*, *::before, *::after { font-variant-ligatures: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--notte);
  background-image: radial-gradient(ellipse 120% 60% at 50% -10%, #23306a 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--luna);
  font: 400 1.0625rem/1.6 var(--f-testo);
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { display: block; max-width: 100%; }
.pixel, canvas.pixel, img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--lanterna); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #ffe0a0; }
:focus-visible { outline: 3px solid var(--lanterna); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-pixel); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-top: 1.6em; }
/* un link a un titolo (#guerra, #ora-oro) lo lascia sotto la testata fissa, non nascosto */
h2[id], h3[id] { scroll-margin-top: calc(var(--testata) + 12px); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; max-width: var(--stretto); text-wrap: pretty; }
.muto { color: var(--nebbia); }
.piccolo { font-size: 0.9rem; }
.salta { position: absolute; left: -999px; top: 8px; background: var(--lanterna); color: var(--notte); padding: 8px 14px; z-index: 100; font-weight: 700; }
.salta:focus { left: 8px; }
.nascosto-vista { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- cornici a gradino ---------- */
.cornice {
  position: relative;
  background: var(--notte-2);
  margin: var(--gradino);
  box-shadow:
    0 calc(-1 * var(--gradino)) 0 0 var(--linea), 0 var(--gradino) 0 0 var(--linea),
    calc(-1 * var(--gradino)) 0 0 0 var(--linea), var(--gradino) 0 0 0 var(--linea);
  padding: 20px 22px;
}
.cornice.calda { --linea: var(--lanterna-scura); background: #2a2443; }
.cornice > :last-child { margin-bottom: 0; }

/* ---------- bottoni ---------- */
.bottone {
  --bg: var(--lanterna); --fg: #241a05; --bordo: #8a5a10;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 8px 20px; margin: 3px;
  font: 600 1.05rem/1.1 var(--f-pixel); letter-spacing: 0.02em; text-decoration: none; text-align: center;
  color: var(--fg); background: var(--bg); border: 0; cursor: pointer;
  box-shadow: 0 -3px 0 0 var(--bordo), 0 3px 0 0 var(--bordo), -3px 0 0 0 var(--bordo), 3px 0 0 0 var(--bordo), inset 0 -4px 0 0 rgba(0, 0, 0, 0.18);
  touch-action: manipulation;
}
.bottone:hover { color: var(--fg); filter: brightness(1.08); }
.bottone:active { transform: translateY(2px); box-shadow: 0 -3px 0 0 var(--bordo), 0 3px 0 0 var(--bordo), -3px 0 0 0 var(--bordo), 3px 0 0 0 var(--bordo), inset 0 2px 0 0 rgba(0, 0, 0, 0.2); }
.bottone[disabled], .bottone[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }
.bottone.secondario { --bg: var(--notte-3); --fg: var(--luna); --bordo: var(--linea); }
.bottone.whatsapp { --bg: #25d366; --fg: #062b14; --bordo: #128c4a; }
.bottone.piccolo { min-height: 38px; padding: 4px 14px; font-size: 0.95rem; }
.bottoni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--testata); padding: 0 max(16px, env(safe-area-inset-left));
  background: rgba(18, 24, 51, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--linea);
}
/* il logo non si stringe mai: se manca posto cede la parte destra, non la scritta (sotto i 380px tutto si fa un po' più stretto) */
.logo { flex: none; display: flex; align-items: center; gap: 10px; font: 700 1.5rem/1 var(--f-pixel); color: var(--luna); text-decoration: none; letter-spacing: 0.03em; }
.logo:hover { color: var(--lanterna); }
.logo img { width: 40px; height: 40px; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { font: 500 1rem/1 var(--f-pixel); color: var(--nebbia); text-decoration: none; padding: 10px 12px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--luna); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--lanterna); }
.testata .destra { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lingua { position: relative; }
.lingua select { appearance: none; background: transparent; border: 2px solid var(--linea); padding: 7px 28px 7px 32px; font: 500 0.95rem/1 var(--f-pixel); color: var(--luna); cursor: pointer; min-height: 40px; }
/* il mondo davanti al nome della lingua: si riconosce anche da chi non legge quella lingua */
.lingua::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none;
  background: var(--nebbia);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5c-2.6-2.8-3.9-6-3.9-9.5s1.3-6.7 3.9-9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5c-2.6-2.8-3.9-6-3.9-9.5s1.3-6.7 3.9-9.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lingua:hover::before, .lingua:focus-within::before { background: var(--luna); }
.lingua::after { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--nebbia); border-bottom: 2px solid var(--nebbia); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lingua select option { background: var(--notte-2); }
.menu { display: none; }
.menu summary { position: relative; list-style: none; cursor: pointer; padding: 10px; font: 600 1rem/1 var(--f-pixel); }
.menu summary::-webkit-details-marker { display: none; }
/* aperto si vede: al posto della parola una ✕ oro, con la linea come la voce attiva (si chiude anche toccando fuori o con
   Esc, sito.js). La ✕ sta sopra la parola, che resta invisibile: il bottone non si allarga e la lingua non va sul logo. */
.menu[open] summary { color: transparent; box-shadow: inset 0 -3px 0 var(--lanterna); }
.menu[open] summary::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--lanterna); font-size: 1.2rem; }
.menu[open] .foglio { display: flex; }
.foglio { display: none; position: fixed; inset: var(--testata) 0 auto 0; flex-direction: column; background: var(--notte-2); border-bottom: 2px solid var(--linea); padding: 8px 16px 16px; }
.foglio a { padding: 14px 4px; font: 500 1.15rem/1 var(--f-pixel); color: var(--luna); text-decoration: none; border-bottom: 1px solid var(--notte-3); }
/* la barra intera (logo, sei voci, lingua, La mia casa) in spagnolo è larga 967px: sotto i 980 c'è il Menu */
@media (max-width: 980px) {
  .nav { display: none; }
  .menu { display: block; }
  .testata .entra-link { display: none; }
}
/* telefoni stretti: logo, lingua e menu stanno tutti nella testata senza toccarsi (360px e anche 320px) */
@media (max-width: 380px) {
  /* il mondo dice già che è un menu: la freccia si toglie e lascia il posto all'icona */
  .lingua select { padding: 7px 9px 7px 27px; }
  .lingua::before { left: 7px; width: 14px; height: 14px; }
  .lingua::after { display: none; }
}
@media (max-width: 340px) {
  .testata { gap: 8px; }
  .testata .destra { gap: 4px; }
  .logo { gap: 6px; font-size: 1.25rem; }
  .lingua select { font-size: 0.85rem; }
  .menu summary { padding: 10px 6px; }
}

/* ---------- pagine ---------- */
.pagina { max-width: var(--largo); margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-left)) 64px; }
.pagina.stretta { max-width: calc(var(--stretto) + 64px); }
.indietro { display: inline-block; padding: 10px 0; margin: -10px 0 8px; color: var(--nebbia); text-decoration: none; }
.indietro:hover, .indietro:focus-visible { color: var(--luna); text-decoration: underline; }
.intro { font-size: 1.15rem; color: var(--nebbia); max-width: 62ch; }
.griglia { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
/* quattro riquadri (i quattro clan): 2 x 2 o tutti e 4 in fila, mai 3 + 1 con l'ultimo da solo */
.griglia:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .griglia:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.due { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 820px) { .due { grid-template-columns: minmax(0, 1fr); } }
.sezione { margin-top: 40px; }

/* pagine corte: il piede sta in fondo allo schermo, non a metà (la mappa, body.home, ha già tutta l'altezza) */
body:not(.home) { display: flex; flex-direction: column; min-height: 100dvh; }
body:not(.home) > main { flex: 1 0 auto; }
.piede { border-top: 2px solid var(--linea); padding: 28px max(16px, env(safe-area-inset-left)) 40px; color: var(--nebbia); font-size: 0.95rem; }
.piede .dentro { max-width: var(--largo); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between; }
.piede nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.piede a { color: var(--nebbia); }
.piede a:hover { color: var(--luna); }

/* ---------- pezzi comuni ---------- */
.clan-segno { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.clan-segno::before { content: ''; width: 10px; height: 10px; background: var(--c, var(--nebbia)); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
[data-clan="fuoco"] { --c: var(--fuoco); }
[data-clan="acqua"] { --c: var(--acqua); }
[data-clan="terra"] { --c: var(--terra); }
[data-clan="aria"] { --c: var(--aria); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--notte-3); font: 500 0.9rem/1.3 var(--f-pixel); color: var(--luna); }
.chip.oro { background: #3a2f12; color: var(--lanterna); }

.commento {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; color: #1a1a1a;
  border-radius: 22px; font: 400 1.05rem/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
}
.commento .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); flex: none; }
.commento b { display: block; font-size: 0.85rem; }
.commento .emoji { font-size: 1.5rem; letter-spacing: 0.08em; }

.tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--notte-3); vertical-align: middle; }
.tabella th { font: 600 0.95rem/1.2 var(--f-pixel); color: var(--nebbia); }
.tabella td.num, .tabella th.num { text-align: right; }
.tabella tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tabella.crescita th, .tabella.crescita td { vertical-align: top; }
.tabella.crescita th { white-space: nowrap; color: var(--lanterna); width: 1%; }
.scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* i comandi delle regole: un esempio per riga. Al telefono ogni riga è una scheda che si legge dall'alto: il comando,
   cosa fa, poi gli esempi con la loro etichetta (data-titolo); l'esempio uguale al comando (🥚, 📣, ❌) non si ripete. */
.tabella.comandi .cmd { font-size: 1.3rem; white-space: nowrap; }
.tabella.comandi .esempi { white-space: nowrap; }
.tabella.comandi .esempi code { display: block; }
.tabella.comandi .esempi code + code { margin-top: 6px; }
@media (max-width: 600px) {
  .tabella.comandi, .tabella.comandi tbody, .tabella.comandi tr, .tabella.comandi td { display: block; }
  .tabella.comandi thead { display: none; }
  .tabella.comandi tr { padding: 14px 0 12px; border-bottom: 1px solid var(--notte-3); }
  .tabella.comandi td { border: 0; padding: 0; }
  .tabella.comandi .cmd { margin-bottom: 4px; line-height: 1.3; font-weight: 700; color: var(--lanterna); }
  .tabella.comandi .esempi { white-space: normal; margin-top: 10px; }
  .tabella.comandi .esempi::before { content: attr(data-titolo); display: block; margin-bottom: 4px; font: 600 0.85rem/1.2 var(--f-pixel); color: var(--nebbia); }
  .tabella.comandi .esempi code { display: inline-block; white-space: nowrap; margin: 0 8px 6px 0; padding: 3px 8px; background: var(--notte-3); }
  .tabella.comandi .esempi code + code { margin-top: 0; }
  .tabella.comandi .esempi.uguale { display: none; }
}
/* classifiche al telefono: la barra di ogni clan va sotto la sua riga, su tutta la larghezza (in una quinta colonna
   restava larga 0); ogni guerra è una scheda, data e vincitore sopra e i punti dei quattro clan sotto, ognuno col suo
   nome (data-nome), così niente resta fuori dallo schermo a destra */
@media (max-width: 600px) {
  .tabella.classifica-clan, .tabella.classifica-clan thead, .tabella.classifica-clan tbody { display: block; }
  .tabella.classifica-clan tr { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--notte-3); }
  .tabella.classifica-clan th, .tabella.classifica-clan td { border: 0; padding: 8px 6px; }
  .tabella.classifica-clan td { align-self: center; }
  .tabella.classifica-clan th:last-child { display: none; }
  .tabella.classifica-clan td:last-child { grid-column: 1 / -1; padding: 0 6px 12px; }
  .tabella.guerre, .tabella.guerre tbody { display: block; }
  .tabella.guerre thead { display: none; }
  .tabella.guerre tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; padding: 12px 0; border-bottom: 1px solid var(--notte-3); }
  .tabella.guerre td { border: 0; padding: 0; text-align: left; }
  .tabella.guerre td:nth-child(1) { grid-column: 1 / 3; }
  .tabella.guerre td:nth-child(2) { grid-column: 3 / 5; }
  .tabella.guerre td::before { content: attr(data-nome); display: block; font: 600 0.8rem/1.3 var(--f-pixel); color: var(--nebbia); }
}

.elenco-eroi { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.elenco-eroi li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--notte-3); }
.elenco-eroi a { text-decoration: none; color: var(--luna); font-weight: 700; }
.elenco-eroi a:hover { color: var(--lanterna); }

.barra { height: 12px; background: var(--notte-3); position: relative; }
.barra > span { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--lanterna)); }
/* barre con il nome nel title (la casa, pagina dell'eroe): il nome si scrive anche sopra la barra, perché col dito il
   title non si vede. Lo spazio viene dal bordo trasparente in alto, così il margine scritto nella pagina resta com'è. */
.barra[title] { height: calc(12px + 1.6em); border-top: 1.6em solid transparent; background-clip: padding-box; font-size: 0.9rem; }
.barra[title]::before { content: attr(title); position: absolute; left: 0; bottom: 100%; padding-bottom: 4px; line-height: 1.2; color: var(--nebbia); }

.avviso { padding: 14px 18px; background: #3a2414; border-left: 4px solid var(--brace); margin: 16px 0; }
.avviso.ok { background: #18341f; border-color: var(--ok); }
.avviso > :last-child { margin-bottom: 0; }

/* ---------- moduli ---------- */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 18px; min-width: 0; }
.campo input[type="file"] { max-width: 100%; }
.campo label, .campo .etichetta { font: 600 1rem/1.2 var(--f-pixel); }
.campo .aiuto { font-size: 0.9rem; color: var(--nebbia); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="url"], .campo input[type="password"], .campo input[type="search"], .campo select, .campo textarea, .riga-input input {
  width: 100%; min-height: 46px; padding: 10px 12px; background: var(--notte); border: 2px solid var(--linea); color: var(--luna); border-radius: 0;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--lanterna); outline: none; box-shadow: 0 0 0 3px rgba(255, 200, 97, 0.25); }
.campo [aria-invalid="true"] { border-color: var(--brace); }
.campo .errore { color: #ffb08a; font-size: 0.9rem; }
.spunta { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; cursor: pointer; }
.spunta input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--lanterna); flex: none; }

/* ---------- home: il mondo a tutto schermo ---------- */
body.home { overflow: hidden; height: 100vh; height: 100dvh; background: #0e1430; }
body.home .testata { position: fixed; left: 0; right: 0; background: rgba(18, 24, 51, 0.72); }
#mondo { position: fixed; inset: 0; touch-action: none; cursor: grab; }
#mondo:active { cursor: grabbing; }
#mondo canvas { width: 100% !important; height: 100% !important; }
.sopra { position: fixed; z-index: 20; }
.attesa-mondo { inset: 0; display: grid; place-items: center; font: 500 1.2rem/1 var(--f-pixel); color: var(--nebbia); pointer-events: none; }
.attesa-mondo .carico { display: grid; gap: 14px; justify-items: center; padding: 18px 22px; background: rgba(18, 24, 51, 0.82); border: 3px solid var(--notte-3); }
.attesa-mondo .barra { width: min(260px, 60vw); height: 12px; background: var(--notte); border: 2px solid var(--notte-3); }
.attesa-mondo .barra i { display: block; width: 0; height: 100%; background: var(--lanterna); transition: width 0.25s steps(6); }
@media (prefers-reduced-motion: reduce) { .attesa-mondo .barra i { transition: none; } }

.guida {
  left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - var(--testata) - 32px); overflow: auto;
}
.guida h1 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem); margin-bottom: 0.4em; }
.guida p { font-size: 1rem; }
.guida .commento { margin: 4px 0 14px; }
.guida .chiudi { position: absolute; top: 6px; right: 6px; }
.guida .esempi { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.guida .esempi code { font: 400 1.05rem/1 system-ui, sans-serif; background: var(--notte-3); padding: 8px 10px; }
.guida.chiusa { width: auto; padding: 0; background: none; box-shadow: none; margin: 0; }
/* i due bottoni sempre su una riga; quando il testo non ci sta tutto, una sfumatura in fondo dice che la guida scorre */
.guida .bottoni { flex-wrap: nowrap; }
.guida .bottoni .bottone { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
.guida[data-scorre]::after { content: ""; position: sticky; bottom: -20px; display: block; height: 56px; margin: -56px -22px -20px; background: linear-gradient(rgba(18, 24, 51, 0), var(--notte-2) 80%); pointer-events: none; }
/* sul computer la guida comincia sotto i contatori (mappa.js mette in --cima il loro bordo basso): non li copre più */
@media (min-width: 701px) { .guida { max-height: calc(100dvh - var(--cima, calc(var(--testata) + 60px)) - 16px - 2 * var(--gradino)); } }
.icona { width: 40px; height: 40px; display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--nebbia); cursor: pointer; font: 600 1.3rem/1 var(--f-pixel); }
.icona:hover { color: var(--luna); }

.barra-mondo { top: calc(var(--testata) + 12px); left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.contatori { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.contatori .chip { background: rgba(18, 24, 51, 0.82); padding: 6px 12px; pointer-events: auto; }
.contatori b { font-family: var(--f-testo); font-weight: 700; color: var(--lanterna); font-variant-numeric: tabular-nums; }

.strumenti { display: grid; gap: 10px; justify-items: end; width: min(380px, 100%); flex: none; pointer-events: auto; }
.cerca { position: relative; width: 100%; }
.cerca input { width: 100%; min-height: 46px; padding: 10px 14px 10px 40px; background: rgba(18, 24, 51, 0.92); border: 2px solid var(--linea); color: var(--luna); border-radius: 0; }
.cerca input:focus { outline: none; border-color: var(--lanterna); }
/* la lente sta a metà del campo (alto 46 px), anche quando sotto si apre l'elenco dei risultati */
.cerca svg { position: absolute; left: 12px; top: 23px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--nebbia); }
.risultati { list-style: none; margin: 4px 0 0; padding: 4px 0; background: var(--notte-2); border: 2px solid var(--linea); max-height: 50vh; overflow: auto; }
.risultati button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; background: none; border: 0; text-align: left; cursor: pointer; }
.risultati button:hover, .risultati button:focus-visible { background: var(--notte-3); }
.filtri { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.filtri button { min-height: 38px; padding: 6px 12px; background: rgba(18, 24, 51, 0.88); border: 2px solid var(--linea); font: 500 0.9rem/1 var(--f-pixel); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.filtri button[aria-pressed="true"] { border-color: var(--lanterna); color: var(--lanterna); }
/* il colore del clan è una riga sotto il nome: l'emoji davanti dice già quale terra è, e i bottoni restano su due righe */
.filtri button[data-clan] { box-shadow: inset 0 -3px 0 var(--c); }
.zoom { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.zoom button { width: 46px; height: 46px; background: rgba(18, 24, 51, 0.92); border: 2px solid var(--linea); font: 600 1.4rem/1 var(--f-pixel); cursor: pointer; }
.zoom button:hover { border-color: var(--lanterna); }

.scheda {
  left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center;
}
.scheda canvas { grid-row: span 3; width: 72px; height: auto; }
/* il nome va a capo come sulla mappa (mappa.js, righeNome) e lascia libero il posto della ✕ */
.scheda h2 { margin: 0; padding-right: 36px; font-size: 1.3rem; overflow-wrap: break-word; }
.scheda .chiudi { position: absolute; top: 4px; right: 4px; }
.scheda p { margin: 0; font-size: 0.95rem; }
.scheda .bottoni { grid-column: 1 / -1; margin: 8px 0 0; }
/* l'icona del social porta al profilo del giocatore; quadrata, alta come il bottone accanto */
.bottone.social { width: 48px; padding: 0; display: inline-grid; place-items: center; }
.bottone.social svg { width: 22px; height: 22px; }
.scheda .nota-anteprima { grid-column: 1 / -1; font-size: 0.85rem; }
/* con la guida aperta a sinistra la scheda si centra nello spazio libero a destra, senza coprirla */
@media (min-width: 960px) { .guida:not([hidden]) ~ .scheda { left: calc(50% + 212px); width: min(460px, calc(100vw - 472px)); } }
@media (max-width: 700px) {
  .barra-mondo { flex-direction: column; align-items: stretch; gap: 8px; }
  .contatori { gap: 6px; }
  .contatori .chip { padding: 5px 9px; font-size: 0.85rem; }
  .strumenti { width: 100%; justify-items: stretch; gap: 8px; }
  /* i filtri su una riga sola che scorre di lato, come le schede del negozio: la barra resta bassa e lascia più mappa */
  .filtri { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtri button { min-height: 36px; padding: 5px 10px; flex: none; }
  .guida:not([hidden]) ~ .zoom, body:has(.scheda:not([hidden])) .zoom { display: none; }
}

/* ---------- pagina dell'eroe ---------- */
.eroe-testa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .eroe-testa { grid-template-columns: 1fr; } }
/* la scena è ingrandita di un numero intero di pixel veri (eroe.js mette larghezza e altezza): il prato riempie il
   riquadro e quel che avanza di un pixel si taglia ai lati, con la casa sempre al centro */
.palco { position: relative; padding: 0; overflow: hidden; background: #2b4a2a; display: flex; justify-content: center; }
.palco canvas { flex: none; max-width: none; }
.palco .didascalia { position: absolute; left: 12px; bottom: 10px; background: rgba(18, 24, 51, 0.85); padding: 6px 10px; font: 500 0.9rem/1.2 var(--f-pixel); }
.nome-eroe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.nome-eroe h1 { margin: 0; overflow-wrap: anywhere; }
.utente { font: 600 1.15rem/1.2 var(--f-pixel); color: var(--lanterna); }
a.utente { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; overflow-wrap: anywhere; }
a.utente svg { flex: none; }
a.utente:hover span, a.utente:focus-visible span { text-decoration: underline; }
.dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 20px 0; }
.dati div { padding: 10px 0; border-bottom: 1px solid var(--notte-3); }
.dati dt { font-size: 0.9rem; color: var(--nebbia); }
.dati dd { margin: 2px 0 0; font: 700 1.15rem/1.3 var(--f-testo); font-variant-numeric: tabular-nums; }
.oggetti { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.oggetti li { padding: 12px 14px; background: var(--notte-3); position: relative; }
.oggetti li b { display: block; font: 600 1rem/1.2 var(--f-pixel); }
.oggetti li span { font-size: 0.9rem; color: var(--nebbia); }
.oggetti li[data-lv="1"] { box-shadow: inset 0 0 0 2px #b0753a, 0 0 14px rgba(205, 127, 50, 0.35); }
.oggetti li[data-lv="2"] { box-shadow: inset 0 0 0 2px #c9d3e6, 0 0 16px rgba(201, 211, 230, 0.4); }
.oggetti li[data-lv="3"] { box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 20px rgba(255, 207, 74, 0.5); background: #3a3218; }
.oggetti li[data-lv="4"] { box-shadow: inset 0 0 0 2px #fff, 0 0 22px rgba(170, 140, 255, 0.6); background: linear-gradient(135deg, #3d2b5c, #1f4a5a, #4a3d1f); }
.diario { list-style: none; padding: 0; margin: 0; }
.diario li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--notte-3); }
.diario time { color: var(--nebbia); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .diario li { grid-template-columns: 1fr; gap: 2px; } }
.lanterne { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.lanterne li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--notte-3); }
.lanterne img { width: 16px; height: 24px; }
.lanterne li.attesa img { filter: grayscale(1) brightness(0.6); }
.invito { display: flex; flex-wrap: wrap; gap: 8px; }
.codice-grande { font: 700 2.2rem/1 var(--f-testo); letter-spacing: 0.12em; color: var(--lanterna); font-variant-numeric: tabular-nums; }

/* ---------- negozio ---------- */
.negozio { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px; align-items: start; }
.negozio .prova { position: sticky; top: calc(var(--testata) + 16px); }
@media (max-width: 900px) {
  .negozio { grid-template-columns: 1fr; gap: 16px; }
  .negozio .prova { display: contents; }
  /* larga quanto la colonna (margin-inline 0): ai lati non restano strisce da cui si vede quel che scorre sotto */
  .negozio .prova > .cornice:first-child { position: sticky; top: var(--testata); z-index: 6; margin-inline: 0; padding: 8px !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
  .negozio .prova > .cornice:first-child canvas { max-width: min(260px, 70vw); }
  .negozio .prova > .cornice:first-child .bottoni { margin-top: 6px !important; }
  .negozio .carrello { order: 3; margin-top: 0 !important; }
}
/* negozio.js: dentro una cornice che non scorre l'anteprima viene spostata con un transform e deve stare sopra l'elenco */
.negozio .spostata { position: relative; z-index: 6; }
.negozio .cornice.spostata { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
/* negozio.js sceglie la misura: un numero intero di pixel veri per ogni pixel del disegno, dentro il riquadro (al
   telefono non più largo del max-width qui sopra). Con la colonna di 420px sta a 2x anche il draghetto giovane. */
.prova canvas { margin: 0 auto; background: radial-gradient(circle at 50% 70%, #33427e 0%, var(--notte-2) 70%); }
.schede { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 2px solid var(--linea); }
.schede button { padding: 12px 16px; background: none; border: 0; font: 600 1.05rem/1 var(--f-pixel); color: var(--nebbia); cursor: pointer; margin-bottom: -2px; border-bottom: 3px solid transparent; }
.schede button[aria-selected="true"] { color: var(--luna); border-bottom-color: var(--lanterna); }
.gruppo { margin-bottom: 26px; }
.gruppo h3 { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.gruppo h3 small { font: 400 0.95rem/1 var(--f-testo); color: var(--nebbia); }
.campioni { display: flex; flex-wrap: wrap; gap: 10px; }
.campione { display: grid; justify-items: center; gap: 6px; width: 86px; padding: 8px 4px 6px; background: var(--notte-3); border: 2px solid transparent; cursor: pointer; font-size: 0.8rem; line-height: 1.2; text-align: center; color: var(--luna); }
.campione .tinta { display: flex; width: 40px; height: 40px; flex-direction: column; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4); }
.campione .tinta span { flex: 1; }
.campione[aria-pressed="true"] { border-color: var(--lanterna); }
.campione .prezzo { color: var(--nebbia); }
.campione.tuo .prezzo { color: var(--ok); }
.campione.arrivo { opacity: 0.55; cursor: default; }
.carrello ul { list-style: none; padding: 0; margin: 0 0 12px; }
.carrello li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--notte-3); align-items: center; }
.carrello .totale { display: flex; justify-content: space-between; font: 700 1.2rem/1 var(--f-testo); font-variant-numeric: tabular-nums; margin: 12px 0; }
.mobile-anteprima { width: 64px; height: 64px; object-fit: contain; }

/* ---------- casa (arredamento) ---------- */
.stanza-box { background: #1a1424; }
.stanza { position: relative; margin: 0 auto; touch-action: none; overflow-x: auto; }
.stanza canvas { width: 100%; height: auto; }
.mobili { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.mobili button { display: grid; gap: 6px; justify-items: center; padding: 10px; background: var(--notte-3); border: 2px solid transparent; cursor: pointer; font-size: 0.9rem; }
.mobili button:hover { border-color: var(--linea); }

/* ---------- taverne ---------- */
.insegna-prova { padding: 0; background: #4f8a35; overflow: hidden; }
.insegna-prova canvas { display: block; margin: 0 auto; }
.taverne { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.taverna-carta { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--luna); }
.taverna-carta img { width: 64px; height: 64px; background: #3a2a1a; }
.taverna-carta h3 { margin: 0 0 2px; }
.logo-taverna { width: 128px; height: 128px; background: #3a2a1a; box-shadow: 0 0 0 4px #6b4a2a; }
.social-link { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }

/* ---------- entra ---------- */
.chiave { font: 700 clamp(2rem, 9vw, 3.6rem)/1 var(--f-testo); font-variant-numeric: tabular-nums; letter-spacing: 0.14em; color: var(--lanterna); text-align: center; padding: 18px; background: var(--notte); margin: 12px 0; user-select: all; }

/* ---------- pannello ---------- */
.pannello-griglia { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.numero-grande { font: 700 2.2rem/1 var(--f-testo); font-variant-numeric: tabular-nums; color: var(--lanterna); }
.coda li { display: grid; gap: 6px; }
.coda form { display: inline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.campione .segno-arrivo { display: grid; place-items: center; width: 40px; height: 40px; background: var(--notte-2); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4); font-size: 1.25rem; color: var(--lanterna); }
.campione .anteprima-mobile { width: 40px; height: 40px; object-fit: contain; }
.campione canvas.mini { display: block; background: radial-gradient(circle at 50% 60%, #33427e 0%, var(--notte-2) 75%); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4); }
.campione:has(canvas.mini) { width: 104px; }
.scheda-negozio[hidden] { display: none; }
.bottone.secondario[aria-pressed="true"] { --bordo: var(--lanterna); --fg: var(--lanterna); --bg: var(--notte-2); }
.casa-editor { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .casa-editor { grid-template-columns: 1fr; } }
.stanza-box { padding: 16px; }
.stanza canvas { display: block; max-width: 100%; margin: 0 auto; cursor: crosshair; }
.mobili button[aria-pressed="true"] { border-color: var(--lanterna); }
.mobili button[disabled] { cursor: default; opacity: 1; }
.mobile-anteprima { width: 64px; height: 64px; object-fit: contain; object-position: bottom; }
.mobile-negozio { display: grid; gap: 6px; justify-items: center; padding: 10px; background: var(--notte-2); color: var(--nebbia); text-decoration: none; font-size: 0.9rem; text-align: center; }
.mobile-negozio:hover { color: var(--luna); }

/* negozio, casa ed entra: correzioni della revisione */
/* schede del negozio: sotto i 600px una riga sola che scorre di lato; la colonna non si allarga oltre lo schermo */
@media (max-width: 900px) { .negozio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .schede { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--linea); }
  .schede::-webkit-scrollbar { display: none; }
  .schede button { flex: none; padding: 12px; margin-bottom: 0; }
  .schede:not([data-fine]) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
}
/* il pezzo nel carrello dice «Nel carrello» al posto del prezzo, color lanterna: non si confonde con quello già tuo */
.campione.nel-carrello .prezzo { color: var(--lanterna); }
/* riassunto del carrello nella cornice dell'anteprima: solo dove il carrello finisce in fondo alla pagina */
.mini-carrello { display: none; }
@media (max-width: 900px) { .mini-carrello { display: flex; width: calc(100% - 6px); margin: 10px 3px 3px; } }
/* casa: la riga sotto la stanza, con il bottone per togliere il mobile che si ha in mano */
.aiuto-stanza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 4px 0; }
.aiuto-stanza p { margin: 0; flex: 1 1 220px; }
/* Salva, Svuota e «Modifiche non salvate» subito sotto la stanza: al telefono l'elenco dei mobili viene dopo e li
   spingeva un migliaio di pixel più in basso. Se il fondo della stanza esce dallo schermo la riga resta attaccata in
   basso (sticky dentro la cornice, che per questo non ha overflow). Scegliendo un mobile la stanza torna in vista
   (casa.js), sotto la testata. */
.salva-stanza { position: sticky; bottom: 0; z-index: 2; margin: 6px 0 0; padding: 8px 0; background: #1a1424; }
.stanza-box [data-esito] { margin: 12px 0 0; }
.stanza-box { scroll-margin-top: calc(var(--testata) + 12px); }

/* anteprima statica: i nomi e i paesi senza la loro pagina non sembrano link (sito.js non li fa nemmeno saltare in cima) */
.elenco-eroi .senza-pagina { font-weight: 700; }
[data-anteprima] a[href="#"], [data-anteprima] a[href="#"]:hover { color: inherit; text-decoration: none; cursor: default; }
/* anteprima aperta dal disco (file://): l'avviso del guscio sta sopra a tutto, anche sopra la mappa */
.nota-disco { position: fixed; z-index: 50; top: calc(var(--testata) + 10px); left: 16px; right: 16px; margin: 0; max-width: 640px; }

/* nell'anteprima: il giorno in cui una novità esce sul sito vero (calendario delle uscite, uscite.ts) */
.uscita-segno { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--lanterna); border-radius: 3px;
  color: var(--lanterna); font: 600 0.72rem/1.5 var(--f-testo); letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
h1 .uscita-segno, h3 .uscita-segno { font-size: 0.8rem; }
.campione .uscita-segno { margin: 2px 0 0; display: table; }