/* Mobile-first. Il telefono e' il caso normale, il desktop e' il caso comodo. */

:root {
  --ink: #f2e8d5;
  --ink-dim: #b3a68c;
  --bg: #17130f;
  --panel: #221c16;
  --panel-2: #2c241c;
  --line: #453729;
  --gold: #d9a441;
  --blood: #a3342b;
  --green: #6f9b52;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* L'attributo hidden vale "display: none", ma e' solo un valore predefinito del
   browser: qualunque regola con display esplicito lo batte. Senza questa riga
   la barra dei bersagli e la barra delle risorse restano in vista anche quando
   il codice le ha nascoste. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #05070d; color: var(--ink);
  font: 15px/1.45 ui-serif, Georgia, "Times New Roman", serif;
  overscroll-behavior: none;
}

/* Il pianeta occupa tutto lo schermo; sotto c'e' lo spazio, non un fondo
   qualsiasi: il nero fa parte della scena. */
#globe { position: fixed; inset: 0; z-index: 0; background: #05070d; touch-action: none; }
#globe canvas { display: block; width: 100%; height: 100%; }

/* La veduta ravvicinata della citta, sopra il globo. */
#city { position: fixed; inset: 0; z-index: 1; background: #0b0906; }
#city canvas { display: block; width: 100%; height: 100%; }

/* --- Barra alta --- */
/* A DESTRA, come in quasi tutti i giochi. E lascia libero tutto il fianco
   sinistro per il menu e la colonna dei poteri divini, che prima ci
   sbattevano contro. */
#hud {
  position: fixed; top: 0; right: 0; z-index: 500;
  padding: calc(6px + var(--safe-t)) 10px 10px 22px;
  background: linear-gradient(200deg, #17130fe8 30%, #17130f00);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.hud-civ { display: flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: .3px; }
.banner { width: 13px; height: 13px; border-radius: 3px; border: 1px solid #0006; display: inline-block; }
.hud-res { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.res {
  background: #221c16d9; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px 2px 6px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px;
}
.res i { font-style: normal; font-size: 12px; opacity: .95; }
.res b { font-variant-numeric: tabular-nums; }
/* Il ritmo al giorno accanto alla riserva: senza, si assegnano i cittadini
   alla cieca e ci si accorge dello sbaglio solo il giorno dopo. */
.res u { text-decoration: none; font-size: 10.5px; opacity: .9; font-variant-numeric: tabular-nums; }
.res u.up { color: #8fc46a; }
.res u.down { color: #e07b6f; }

/* --- Avvisi --- */
#toasts {
  position: fixed; left: 8px; right: 8px; top: calc(64px + var(--safe-t)); z-index: 900;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.toast {
  background: #2c241cf2; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 8px 11px; font-size: 13.5px;
  animation: in .18s ease-out;
}
.toast.bad { border-left-color: var(--blood); }
.toast.good { border-left-color: var(--green); }
@keyframes in { from { opacity: 0; transform: translateY(-6px); } }

/* --- Barra bersaglio --- */
#targetBar {
  position: fixed; left: 8px; right: 8px; top: calc(64px + var(--safe-t)); z-index: 950;
  background: #3a2a18f5; border: 1px solid var(--gold); border-radius: 9px;
  padding: 8px 10px; display: flex; align-items: center; gap: 10px; font-size: 13.5px;
}
#targetBar span { flex: 1; }

/* --- Colonna dei possedimenti ---
   Un impero sparso su un mappamondo 1:1 non si governa cercando le cose sulla
   mappa: serve un elenco, e accanto a ogni voce quanto sta rendendo adesso. */
#dockBtn {
  position: fixed; left: 8px; top: calc(10px + var(--safe-t)); z-index: 610;
  width: 40px; height: 40px; padding: 0; font-size: 17px; line-height: 1;
  background: #221c16e8; backdrop-filter: blur(3px);
}
#dockBtn[hidden] { display: none; }
#dock {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 700;
  width: min(86vw, 300px);
  background: var(--panel); border-right: 1px solid var(--line);
  box-shadow: 6px 0 24px #0009;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
}
#dock.closed { transform: translateX(-101%); }
#dock[hidden] { display: none; }
#dockHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 8px; border-bottom: 1px solid var(--line);
}
#dockHead b { color: var(--gold); letter-spacing: .4px; }
#dockHead button { padding: 2px 9px; font-size: 20px; line-height: 1; }
#dockBody { overflow-y: auto; padding: 6px 10px 20px; }
.dgroup { margin-top: 12px; }
.dgroup > h4 {
  margin: 0 0 5px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold); font-weight: 600; display: flex; justify-content: space-between;
}
.ditem {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  padding: 7px 9px; margin-bottom: 5px; cursor: pointer;
}
.ditem:active { background: #35291f; }
.ditem .t { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ditem .t b { font-weight: 600; }
.ditem .y { font-size: 11.5px; color: #9ec27c; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ditem .y.warn { color: #e0b13a; }
.ditem .y.none { color: var(--ink-dim); }
.ditem .sub { font-size: 11px; color: var(--ink-dim); margin-top: 1px; }

/* --- Scala di zoom ---
   La rotella resta, ma i quattro salti secchi servono: su un mondo 1:1 passare
   dal continente alla piazza a colpi di rotella e' un lavoro, non un gesto. */
#scale {
  position: fixed; left: 8px; right: 8px; z-index: 550;
  bottom: calc(100px + var(--safe-b));
  display: flex; gap: 3px; justify-content: center;
  pointer-events: none;
}
#scale button {
  pointer-events: auto;
  flex: 1 1 0; max-width: 92px;
  background: #221c16e8; border: 1px solid var(--line); color: var(--ink-dim);
  padding: 7px 4px; font-size: 12px; border-radius: 8px;
  backdrop-filter: blur(3px);
}
#scale button.on { background: var(--gold); color: #241a08; border-color: #b8892f; font-weight: 700; }

/* --- Pannello inferiore --- */
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 30px #0008;
  display: flex; flex-direction: column;
  max-height: 74vh; transition: transform .22s ease;
  padding-bottom: var(--safe-b);
}
/* LA SPORGENZA NON SI INDOVINA, SI MISURA.
   Da chiusa la card deve lasciare fuori esattamente la testata: la maniglia e
   la fila delle linguette, niente altro. Il numero fisso di 92px era tarato su
   una testata che non esiste piu, e ne lasciava fuori 24-36 in piu: il titolo
   della provincia restava a mezz aria sotto le linguette, e la card sembrava
   non chiudersi mai del tutto.
   Adesso --sheet-peek lo scrive app.js dopo aver misurato, e il 92px resta
   solo come valore di ripiego per il primo istante prima della misura. */
#sheet.collapsed { transform: translateY(calc(100% - var(--sheet-peek, 92px) - var(--safe-b))); }
#grabber { padding: 7px 0 3px; display: flex; justify-content: center; cursor: pointer; }
#grabber span { width: 40px; height: 4px; background: #6b5a44; border-radius: 3px; }

/* Il padding in alto e la line-height servono davvero: senza, il contenitore
   scorrevole si stringe sul testo e mangia la cima delle lettere. */
#tabs { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; overflow-x: auto; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
#tabs button {
  flex: 0 0 auto; background: none; border: none; color: var(--ink-dim);
  font: inherit; font-size: 13.5px; line-height: 1.45; padding: 6px 11px; border-radius: 7px; cursor: pointer;
}
#tabs button.on { background: var(--panel-2); color: var(--gold); }

#panes { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 16px; }
.pane { min-height: 40px; }

/* --- Contenuti --- */
h2 { font-size: 17px; margin: 6px 0 2px; }
h3 { font-size: 13px; margin: 14px 0 6px; color: var(--gold); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
p { margin: 5px 0; }
.muted { color: var(--ink-dim); font-size: 13px; }
.fine { color: #8b7d66; font-size: 11.5px; line-height: 1.4; }
.err { color: #e07b6f; font-size: 13px; min-height: 18px; }

.rows { display: flex; flex-direction: column; gap: 5px; }
.row { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.5px; }
.row b { font-variant-numeric: tabular-nums; }

.bar { height: 6px; background: #0004; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar > i { display: block; height: 100%; background: var(--gold); }
.bar.happy > i { background: var(--green); }
.bar.tension > i { background: var(--blood); }

.card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; margin: 7px 0;
}
.card.mine { border-color: #5d4a2e; }

button {
  font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink); padding: 8px 12px; font-size: 13.5px;
}
button:active { transform: translateY(1px); }
button.primary { background: var(--gold); color: #241a08; border-color: #b8892f; font-weight: 700; }
button.danger { border-color: #6d2f28; color: #e5988f; }
button.ghost { background: none; border-color: transparent; color: var(--ink-dim); }
button:disabled { opacity: .45; cursor: not-allowed; }
.btns { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }

label { display: block; font-size: 12.5px; color: var(--ink-dim); margin: 9px 0 0; }
/* Il selettore prende anche gli input senza attributo type esplicito: il
   valore predefinito e' text, ma un selettore [type=text] NON li trova. */
input:not([type=range]):not([type=checkbox]):not([type=radio]), select {
  /* display:block, se no il campo largo 100% resta in linea con il testo
     dell'etichetta che lo contiene e gli finisce sopra. */
  display: block;
  width: 100%; margin-top: 3px; padding: 9px 10px; font: inherit; font-size: 15px;
  background: #171310; color: var(--ink); border: 1px solid var(--line); border-radius: 7px;
}
.slot input[type=number] { display: inline-block; }
input[type=range] { width: 100%; accent-color: var(--gold); }

/* Assegnazione a slot interi: piu'/meno, non percentuali. */
.slot { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 6px; padding: 5px 0; }
.slot .nm { font-size: 13.5px; }
.slot .nm small { display: block; color: var(--ink-dim); font-size: 11px; }
/* La manopola e quello che rende, uno sopra l altro. */
.slot .centro { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.slot input { width: 100%; text-align: center; padding: 6px 4px; margin: 0; }
.slot button { padding: 6px 11px; min-width: 38px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

/* Scelta del colore di fazione: i cittadini renderizzati sulla mappa vestiranno
   questo (CLAUDE.md §13), quindi si sceglie vedendolo, non da un menu a tendina. */
.colors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.swatch {
  width: 30px; height: 30px; padding: 0; border-radius: 7px;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px #0006;
}
.swatch.on { border-color: var(--ink); transform: scale(1.08); }
.chip {
  display: inline-block; background: #0003; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; color: var(--ink-dim);
}
.ev { border-left: 2px solid var(--line); padding: 4px 0 4px 9px; margin: 4px 0; font-size: 13px; }
.ev time { display: block; color: #8b7d66; font-size: 11px; }
.ev.conquista { border-left-color: var(--green); }
.ev.sconfitta, .ev.rivolta, .ev.provincia-persa, .ev.spie-scoperte { border-left-color: var(--blood); }
.ev.razzia, .ev.struttura-presa { border-left-color: var(--gold); }

/* --- Ingresso --- */
#gate {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #2a2018, #100c09 70%);
  padding: 18px;
}
#gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px 16px;
  box-shadow: 0 20px 60px #000a;
}
.gate-card h1 { font-size: 22px; margin: 0 0 4px; color: var(--gold); letter-spacing: .5px; }
.sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 12px; }
.tabs2 { display: flex; gap: 5px; margin-bottom: 4px; }
.tabs2 button { flex: 1; }
.tabs2 button.on { background: var(--panel-2); color: var(--gold); border-color: #5d4a2e; }
#gGo { width: 100%; margin-top: 13px; padding: 11px; }

/* Etichette e segnaposto disegnati sopra il globo. */
.lbl {
  font-size: 10.5px; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000;
  white-space: nowrap; pointer-events: none; font-weight: 600;
}

@media (min-width: 820px) {
  #sheet { left: auto; right: 12px; bottom: 12px; width: 400px; border-radius: 14px; max-height: 82vh; border: 1px solid var(--line); }
  #sheet.collapsed { transform: translateY(calc(100% - var(--sheet-peek, 92px))); }
  #scale { right: 424px; bottom: 14px; justify-content: flex-start; left: 60px; }
  #hud { background: none; padding-top: 10px; }
  .hud-civ, .hud-res { background: #17130fd0; align-self: flex-start; border-radius: 999px; padding: 3px 10px; }
}


/* --- Righello: quanto misura davvero quello che si sta guardando --- */
#righello {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(58px + var(--safe-b)); z-index: 500;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; user-select: none;
}
#righelloTesto {
  font-size: 11.5px; letter-spacing: .3px; color: #f0e6d2;
  text-shadow: 0 1px 3px #000a, 0 0 8px #000a;
}
#righelloBarra {
  height: 7px; width: 100px; border: 1.5px solid #f0e6d2; border-top: none;
  box-shadow: 0 1px 3px #000a; transition: width .12s linear;
}
@media (min-width: 900px) {
  #righello { bottom: 62px; }
}


/* --- Avviso: qui non ci si puo' ancora entrare --- */
.avviso {
  margin: 10px 0 4px; padding: 9px 11px; border-radius: 9px;
  background: #3a2114; border: 1px solid #7a4a22;
}
.avviso b { color: #f0b45c; font-size: 13px; }
.avviso p { margin: 4px 0 0; font-size: 12.5px; color: #e6d6bc; line-height: 1.4; }
button.bloccato {
  background: #2a2119; color: #8a7a63; border: 1px solid #4a3d2c; cursor: not-allowed;
}



/* --- Filtri della mappa --- */
#filtriBtn {
  pointer-events: auto;
  /* Staccato dagli altri e di un altro colore: non e' un livello di zoom,
     e' un'altra cosa, e deve vedersi che e' un'altra cosa. */
  margin-left: 18px;
  background: #2b2033; color: #d9c6ea; border-color: #5b4470;
}
#filtriBtn.on { background: #6c4d8c; color: #fff; border-color: #8a68ad; font-weight: 700; }
#filtri {
  position: fixed; right: 12px; z-index: 700;
  bottom: calc(146px + var(--safe-b));
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; box-shadow: 0 8px 26px #0009;
  max-height: 62vh; overflow-y: auto; min-width: 208px;
}
#filtri[hidden] { display: none; }
#filtri h4 {
  margin: 9px 0 4px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
#filtri h4:first-child { margin-top: 0; }
#filtri label {
  display: flex; align-items: center; gap: 7px; padding: 3px 0;
  font-size: 13px; cursor: pointer; color: var(--ink);
}
#filtri label.sotto { padding-left: 16px; font-size: 12px; color: var(--ink-dim); }
#filtri input { accent-color: #c8a24a; width: 14px; height: 14px; cursor: pointer; }
#filtri .tutti {
  margin-top: 10px; display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 9px;
}
#filtri .tutti button {
  flex: 1; background: var(--panel-2); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px; font: inherit; font-size: 12px; cursor: pointer;
}


/* --- IL MENU LATERALE SPINGE, NON COPRE ---
   Aprendo i Possedimenti il pannello scorreva SOPRA le risorse in alto e sopra
   i livelli di zoom in basso, nascondendoli. Adesso quando e' aperto tutto il
   resto dell'interfaccia scivola a destra della stessa quantita', e torna al
   suo posto quando si chiude. Solo da schermo largo: sul telefono il menu
   occupa quasi tutto e spostare non avrebbe senso. */
@media (min-width: 700px) {
  #scale, #righello, #dockBtn, #toasts {
    transition: transform .2s ease;
  }
  /* Le risorse NON scivolano: stanno a destra, il menu si apre a sinistra e
     spingerle vorrebbe dire buttarle fuori dallo schermo. */
  body.dock-aperto #scale,
  body.dock-aperto #righello,
  body.dock-aperto #dockBtn {
    transform: translateX(min(86vw, 300px));
  }
}


/* --- I POTERI DIVINI ---
   Una colonna di bottoni quadrati sul fianco sinistro. La vede solo il Game
   Master: per tutti gli altri non esiste proprio nel documento. */
#poteri {
  position: fixed; left: 8px; top: calc(58px + var(--safe-t)); z-index: 620;
  display: flex; flex-direction: column; gap: 6px;
}
#poteri[hidden] { display: none; }
#poteri button {
  width: 52px; height: 52px; padding: 3px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #2a1d2ee8; color: #e6d4f2; border: 1px solid #6a4a80;
  border-radius: 10px; cursor: pointer; font: inherit;
  box-shadow: 0 2px 10px #0007; backdrop-filter: blur(3px);
  transition: transform .1s ease, background .15s ease;
}
#poteri button:hover { background: #3a2942e8; transform: translateY(-1px); }
#poteri button.on { background: #6c4d8c; border-color: #a37fc4; color: #fff; }
#poteri button .ico { font-size: 19px; line-height: 1; }
#poteri button .nome { font-size: 8.5px; letter-spacing: .2px; line-height: 1.1; text-align: center; }

#poterePannello {
  position: fixed; left: 70px; top: calc(58px + var(--safe-t)); z-index: 640;
  width: min(84vw, 290px);
  background: var(--panel); border: 1px solid #6a4a80; border-radius: 12px;
  padding: 12px 14px; box-shadow: 0 10px 30px #000a;
  max-height: 74vh; overflow-y: auto;
}
#poterePannello[hidden] { display: none; }
#poterePannello h3 { margin: 0 0 3px; color: #d9b8f2; text-transform: none; letter-spacing: 0; font-size: 15px; }
#poterePannello .fine { margin: 0 0 10px; }
#poterePannello label { display: block; margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); }
#poterePannello input, #poterePannello select {
  width: 100%; margin-top: 3px; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px;
}
#poterePannello .passi { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
#poterePannello .passi button {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13px; cursor: pointer;
}
#poterePannello .passi button.on { background: #6c4d8c; border-color: #a37fc4; color: #fff; font-weight: 700; }
#poterePannello .passi button span { color: var(--ink-dim); font-size: 11.5px; }
#poterePannello .passi button.on span { color: #e8d6f5; }
#poterePannello .vai { width: 100%; margin-top: 12px; }

@media (min-width: 700px) {
  body.dock-aperto #poteri, body.dock-aperto #poterePannello {
    transform: translateX(min(86vw, 300px)); transition: transform .2s ease;
  }
}


/* --- Il mirino di DIO ---
   Quando si sta scegliendo dove far cadere un potere, tutta la mappa prende il
   cursore a croce: si vede che il prossimo click non seleziona, colpisce. */
body.mirino #globe, body.mirino canvas { cursor: crosshair; }
body.mirino #targetBar { border-color: #a37fc4; background: #2a1d2ef2; }


/* --- L'avviso grosso in mezzo allo schermo ---
   Per le cose che vanno dette mentre si sta guardando la mappa, non in un
   angolo: un divieto che compare in basso a destra mentre il dito e' al centro
   non lo legge nessuno. */
#avvisone {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 900; max-width: min(88vw, 460px); text-align: center;
  background: #3a1c1cf2; border: 1px solid #a24a4a; border-radius: 12px;
  padding: 16px 20px; box-shadow: 0 12px 40px #000b;
  pointer-events: auto;
  animation: avvisoEntra .16s ease-out;
}
#avvisone[hidden] { display: none; }
#avvisone b { display: block; color: #ffb4b4; font-size: 15px; margin-bottom: 5px; }
#avvisone span { display: block; color: #f0dede; font-size: 13px; line-height: 1.45; }
#avvisone .ok {
  margin-top: 12px; min-width: 84px;
  background: #a24a4a; color: #fff; border: 1px solid #c96a6a;
  border-radius: 8px; padding: 7px 18px; font: inherit; font-weight: 700; cursor: pointer;
}
#avvisone .ok:hover { background: #b85757; }
@keyframes avvisoEntra {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/* --- Scegliere una civilta --- */
.civScelta { margin-top: 3px; }
.civScelta .mostra {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-size: 13px; display: flex; align-items: center; gap: 7px;
}
.civScelta .mostra .vuota { color: var(--ink-dim); font-style: italic; }
.civScelta .modi { display: flex; gap: 6px; margin-top: 5px; }
.civScelta .modi button {
  flex: 1; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px; font: inherit; font-size: 12px; cursor: pointer;
}
.civScelta .modi button:hover { background: #3a2942; border-color: #6a4a80; }
#civLista {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 920; width: min(92vw, 420px); max-height: 76vh;
  background: var(--panel); border: 1px solid #6a4a80; border-radius: 13px;
  box-shadow: 0 16px 50px #000c; display: flex; flex-direction: column;
}
#civLista[hidden] { display: none; }
#civLista header {
  padding: 12px 14px 8px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
}
#civLista header b { flex: 1; color: #d9b8f2; font-size: 15px; }
#civLista input {
  width: 100%; margin: 10px 14px 6px; width: calc(100% - 28px);
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px;
}
#civLista .righe { overflow-y: auto; padding: 4px 8px 12px; }
#civLista .riga {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 9px; font: inherit; cursor: pointer; color: var(--ink); text-align: left;
}
#civLista .riga:hover { background: var(--panel-2); border-color: var(--line); }
#civLista .riga .pallino { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #0007; flex: 0 0 auto; }
#civLista .riga .nome { flex: 1; font-size: 13.5px; }
#civLista .riga .dati { font-size: 11.5px; color: var(--ink-dim); }
#civLista .vuoto { padding: 18px 14px; color: var(--ink-dim); font-size: 13px; text-align: center; }


/* --- Due strade, due pulsanti --- */
.modo2 { display: flex; gap: 8px; margin-top: 4px; }
.modo2 button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--panel-2); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 6px; font: inherit; font-size: 12px; cursor: pointer;
}
.modo2 button .ico { font-size: 20px; line-height: 1; }
.modo2 button.on.verde  { background: #1f4d2b; border-color: #47a05f; color: #d6f5de; font-weight: 700; }
.modo2 button.on.rosso  { background: #4d1f1f; border-color: #a04747; color: #f5d6d6; font-weight: 700; }

/* --- Scegliere il cervello di una civilta --- */
.cervelli { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.cervelli .gruppo {
  font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--gold); margin: 7px 0 1px;
}
.cervelli .gruppo.ost { color: #e08a7a; }
.cervelli .gruppo.pac { color: #86c79a; }
.cervelli button {
  text-align: left; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px;
  font: inherit; cursor: pointer;
}
.cervelli button b { display: block; font-size: 13px; }
.cervelli button span { display: block; font-size: 11.5px; color: var(--ink-dim); margin-top: 1px; }
.cervelli button.on { background: #6c4d8c; border-color: #a37fc4; }
.cervelli button.on span { color: #e8d6f5; }
.cervelli .spiega {
  font-size: 11.5px; color: var(--ink-dim); line-height: 1.45;
  background: #241d16; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-top: 6px;
}

/* --- I cinque gradi --- */
.gradi { display: flex; gap: 5px; margin-top: 4px; }
.gradi button {
  flex: 1; background: var(--panel-2); color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 3px; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.gradi button b { font-size: 15px; }
.gradi button span { font-size: 9px; letter-spacing: .2px; }
.gradi button.on { background: #6c4d8c; border-color: #a37fc4; color: #fff; }


/* --- Il colore scelto a mano ---
   Sta in fondo alla tavolozza e si comporta come le altre caselle: quando e'
   quella attiva ha lo stesso anello. Dentro c'e' il selettore vero del
   browser, che qui e' invisibile e copre tutta la casella. */
.swatch.libero {
  position: relative; overflow: hidden;
  background: conic-gradient(#e74c3c, #f39c12, #f1c40f, #2ecc71, #1abc9c,
                             #3498db, #9b59b6, #e74c3c);
}
.swatch.libero input {
  position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
  opacity: 0; cursor: pointer; border: none; padding: 0;
}
.swatch.libero .segno {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; text-shadow: 0 1px 3px #000b; pointer-events: none;
}
.coloreScelto {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12px; color: var(--ink-dim);
}
.coloreScelto i {
  width: 15px; height: 15px; border-radius: 4px; border: 1px solid #0007; display: inline-block;
}

/* Il totale degli abitanti accanto al nome: quanto e larga la civilta lo
   dice "1 prov.", quanto e popolata lo dice questo, ed e il numero che
   conta davvero per crescere. */
#hudPop {
  background: #2a2119; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; font-size: 12px; color: var(--gold); font-weight: 700;
  letter-spacing: .2px;
}
#hudPop:empty { display: none; }


/* --- I numeri della stima, ognuno del colore della sua risorsa ---
   Una riga di numeri tutti uguali va riletta tre volte per capire quale sia
   quale. Con il colore si legge a colpo d'occhio. */
.stima { line-height: 1.7; }
.stima b { font-weight: 700; }
.r-food  { color: #8fd07a; }   /* cibo: verde grano   */
.r-wood  { color: #b98a5a; }   /* legno: bruno        */
.r-stone { color: #b9b3a6; }   /* pietra: grigio      */
.r-iron  { color: #8fa6bd; }   /* ferro: azzurro acciaio */
.r-gold  { color: #e8c463; }   /* oro                 */
.r-eat   { color: #d98a6a; }   /* quello che si mangia */
.r-birth { color: #f0a0c8; }   /* nascite: rosa       */


/* Il contatore accanto a ogni manopola: dice quanto rende quella voce, e
   cambia mentre si preme. */
.slot .reso {
  text-align: center; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2;
}


/* --- La scheda che spiega un numero ---
   Un valore da solo non insegna niente: questa rifà il conto voce per voce,
   con i numeri di adesso. */
:root { --sotto: 210px; }
@media (min-width: 820px) { :root { --sotto: 168px; } }

#scheda {
  /* LA SCHEDA NON ARRIVA MAI SUI TASTI IN FONDO.
     Sta al centro dello spazio LIBERO, non al centro dello schermo: sotto ci
     sono la barra dei comandi e il righello, e una scheda alta ci finiva
     sopra. Coperti i tasti, per passare dal mercato ai messaggi bisognava
     prima chiudere. Quanto spazio prendono quelle cose lo dice --sotto, che
     cambia con la larghezza perche cambia dove sta la barra. */
  position: fixed; left: 50%; top: calc((100vh - var(--sotto)) / 2);
  transform: translate(-50%, -50%);
  /* SI ADATTA AL CONTENUTO.
     Il conto e incolonnato in caratteri a larghezza fissa: invece di
     indovinare un numero di pixel che poi risulta stretto, si lascia
     decidere alla riga piu lunga, con un tetto per non invadere lo
     schermo e un minimo per non stringersi su schede corte. */
  z-index: 930; width: fit-content;
  min-width: min(92vw, 520px); max-width: min(96vw, 860px);
  max-height: calc(100vh - var(--sotto) - 28px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 16px 18px; box-shadow: 0 16px 50px #000c;
}
#scheda[hidden] { display: none; }
#scheda h3 { margin: 0 0 3px; color: var(--gold); font-size: 16px; text-transform: none; letter-spacing: 0; }
#scheda .sotto { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; }
#scheda .conto {
  /* Il conto e incolonnato, quindi a larghezza fissa: la scheda deve essere
     larga abbastanza da contenerlo senza barra di scorrimento. */
  font: 12px/1.85 ui-monospace, Consolas, monospace; white-space: pre;
  background: #221c16; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; overflow-x: auto;
}
#scheda .conto .piu  { color: #8fd07a; }
#scheda .conto .meno { color: #e08a7a; }
#scheda .conto .tot  { color: var(--gold); font-weight: 700; }
#scheda .nota { margin: 11px 0 0; font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
#scheda .chiudi {
  margin-top: 14px; width: 100%; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; cursor: pointer;
}
.cliccabile { cursor: help; border-bottom: 1px dotted var(--ink-dim); }
.cliccabile:hover { color: var(--gold); }

/* I tasti che usano un potere divino si vedono che sono altra cosa. */
button.divino {
  background: #4a2f63; color: #e6d4f2; border: 1px solid #8a68ad; font-weight: 700;
}
button.divino:hover { background: #5c3b7a; }


/* Il tastino "i" accanto a un titolo: apre la scheda che spiega quella voce. */
button.info {
  width: 17px; height: 17px; min-width: 0; padding: 0; margin-left: 7px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--gold); font: 700 11px/1 Georgia, serif; cursor: pointer;
  vertical-align: middle;
}
button.info:hover { background: var(--gold); color: #241a08; border-color: var(--gold); }

/* Toccare la scheda di un esercito porta la mappa su di lui. */
.cliccabile-card { cursor: pointer; transition: border-color .12s ease; }
.cliccabile-card:hover { border-color: var(--gold); }


/* --- LA BARRA MILITARE ---
   Sta sopra i livelli di zoom, in mezzo, e c'e' sempre: comandare le truppe e'
   la cosa che si fa piu' spesso e non deve costare tre tocchi per arrivarci.
   Il tasto verde crea, quello acciaio comanda: due mestieri diversi, due
   colori diversi. */
#militare {
  position: fixed; left: 8px; right: 8px; z-index: 555;
  bottom: calc(146px + var(--safe-b));
  display: flex; gap: 8px; justify-content: center;
  pointer-events: none;
}
#militare[hidden] { display: none; }
/* Quadrati, come i poteri divini: sono comandi, non voci di menu, e un
   quadrato con dentro un simbolo si riconosce prima di una parola. */
#militare button {
  pointer-events: auto; position: relative;
  min-width: 56px; height: 56px; padding: 3px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #232b34ee; border: 1px solid #4b5c6b; color: #dfe8f0;
  font: inherit; border-radius: 11px;
  cursor: pointer; box-shadow: 0 3px 12px #0008; backdrop-filter: blur(3px);
  transition: transform .1s ease, background .15s ease;
}
#militare button .ico { font-size: 21px; line-height: 1; }
#militare button .nome { font-size: 8.5px; letter-spacing: .2px; line-height: 1.1; }
#militare button:hover { background: #2e3a46ee; transform: translateY(-1px); }
#militare button.on { background: #4a6fa0; border-color: #6f97c9; color: #fff; font-weight: 700; }
/* Il numero delle colonne: un bollino sull'angolo, come le notifiche. */
#militare button .n {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; line-height: 17px; text-align: center;
  font-size: 11px; font-weight: 700;
  background: #b3452f; color: #fff; border: 1px solid #d4785f; border-radius: 999px; padding: 0 4px;
}
#militare button .n:empty { display: none; }
#btnCreaEsercito { background: #24361fee !important; border-color: #4e7040 !important; color: #ddf0d2 !important; }
#btnCreaEsercito:hover { background: #2e4527ee !important; }

/* NELLA FASCIA LIBERA A DESTRA DEL RIGHELLO.
   Il centro esatto dello schermo era gia' occupato: li' sta il righello dei
   chilometri, e i due tasti ci finivano sopra. La fascia buona e' quella fra
   il righello e il pannello delle province — l'unico pezzo di bordo basso che
   non ha niente sotto — e li' dentro stanno in mezzo.
   Sotto i 1280 pixel quella fascia si stringe troppo per due bottoni: allora
   si torna in mezzo, ma alzati sopra il righello invece che addosso. */
@media (min-width: 820px) {
  #militare {
    left: 50%; right: auto; bottom: 104px;
    transform: translateX(-50%);
    width: auto; justify-content: center;
  }
}
/* LA FASCIA A DESTRA DEL RIGHELLO NON BASTA PIU.
   Era larga 126 pixel, misurata quando i tasti erano due: con otto ci finivano
   dentro a due per riga, in una colonnina alta mezzo schermo. Adesso la barra
   sta sopra il righello e si centra nello spazio libero a sinistra del
   pannello delle province, cosi resta in una riga sola per quanti tasti ci
   siano. */
@media (min-width: 1280px) {
  #militare {
    left: 8px;
    right: 432px;
    bottom: 104px;
    transform: none;
    width: auto; justify-content: center;
  }
}
@media (min-width: 700px) {
  #militare { transition: transform .2s ease; }
  /* Il menu laterale non la sposta: sta a destra, e il menu si apre a
     sinistra. Spostarla vorrebbe dire buttarla sotto il pannello. */
  body.dock-aperto #militare { transform: none; }
}
@media (min-width: 820px) and (max-width: 1279px) {
  body.dock-aperto #militare { transform: translateX(-50%); }
}


/* --- IL CONTO ALLA ROVESCIA SULLA FRECCIA ---
   Quanto manca all'arrivo, appoggiato sulla punta della rotta. Non intercetta
   il tocco: sotto c'e' la mappa, e deve restare toccabile. */
#rottaTimer {
  position: fixed; z-index: 560; pointer-events: none;
  transform: translate(-50%, -140%);
  background: #7d1a15ee; color: #ffe9e6; border: 1px solid #e5372c;
  border-radius: 999px; padding: 2px 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
  box-shadow: 0 2px 10px #000a;
}
#rottaTimer[hidden] { display: none; }


/* Il numero dei nullafacenti: ambra, come un avviso che non e' ancora un
   allarme. Sottolineato tratteggiato, che e' il segno di "qui c'e' una
   spiegazione", lo stesso delle altre voci che si aprono. */
.oziosi {
  color: #e8a838;
  border-bottom: 1px dashed #a9762088;
  cursor: pointer;
}
.oziosi:hover { color: #ffc766; border-bottom-color: #e8a838; }


/* Chi sta sotto le armi: acciaio, come la barra militare in fondo. Non e' un
   avviso — non c'e' niente di sbagliato in un esercito — e' un'altra
   categoria di persone, e si deve leggere come tale. */
.inarmi {
  color: #8fb4d8;
  border-bottom: 1px dashed #5b7f9f88;
  cursor: pointer;
}
.inarmi:hover { color: #b8d6f2; border-bottom-color: #8fb4d8; }


/* Il numero che scorre: leggermente piu' chiaro del testo intorno, cosi' si
   capisce a colpo d'occhio che quello e' vivo e il resto no. */
.orologio { color: #f0e0c0; font-variant-numeric: tabular-nums; }


/* La penna per ribattezzare: piccola, accanto al nome, non un bottone che
   grida. Si accende passandoci sopra. */
.penna {
  margin-left: 8px; padding: 1px 6px; vertical-align: middle;
  background: none; border: 1px solid #4a3d2c; border-radius: 6px;
  color: #8a7a63; font-size: 12px; line-height: 1.3; cursor: pointer;
}
.penna:hover { color: var(--gold); border-color: #b8892f; }


/* --- LA POSTA E LE CAROVANE --- */

/* Il tasto della posta: colore di cera da sigillo, diverso sia dall'acciaio
   degli eserciti sia dal verde del reclutamento. Il bollino rosso in alto a
   destra e' lo stesso delle notifiche di qualunque cosa: si legge senza
   spiegazioni. */
#btnMessaggi { background: #362430ee !important; border-color: #6f4a63 !important; color: #f0dbe8 !important; }
#btnMessaggi:hover { background: #452e3dee !important; }
#btnMessaggi.on { background: #8a4f76 !important; border-color: #b57aa0 !important; color: #fff !important; }

/* Il conto alla rovescia di una carovana, giallo come la sua rotta: merce che
   arriva, non ferro che marcia. Fondo scuro e non giallo pieno, se no il testo
   dentro non si legge piu'. */
#rottaTimer.merce { background: #4a3708ee; border-color: #ffd21e; color: #fff4c9; }

/* Una riga di conversazione. Le proprie a destra e in tinta calda, quelle
   dell'altro a sinistra: si capisce chi parla senza leggere un nome. */
.msg { margin: 6px 0; display: flex; }
.msg.mio { justify-content: flex-end; }
.msg > div {
  max-width: 78%; padding: 7px 11px; border-radius: 12px;
  font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.msg.mio > div { background: #4a3a22; color: #f4e7cf; border-bottom-right-radius: 4px; }
.msg.suo > div { background: #2b2b33; color: #e2e2ea; border-bottom-left-radius: 4px; }
.msg time { display: block; font-size: 10.5px; opacity: .6; margin-top: 3px; }
#scheda textarea {
  width: 100%; min-height: 76px; resize: vertical; margin-top: 8px;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px;
}

/* I due tastini accanto al nome: parlare e mandare merce. */
.azione-riga {
  margin-left: 7px; padding: 1px 7px; vertical-align: middle;
  background: none; border: 1px solid #4a3d2c; border-radius: 6px;
  color: #8a7a63; font-size: 12px; line-height: 1.3; cursor: pointer;
}
.azione-riga:hover { color: var(--gold); border-color: #b8892f; }
.azione-riga.posta:hover { color: #e6a8cf; border-color: #a2678c; }
.azione-riga.carro:hover { color: #ffd21e; border-color: #ffd21e; }
/* Dentro c e un disegno, non una lettera: si centra da se e non deve
   trascinarsi dietro la riga di testo. */
.azione-riga.carro { display: inline-flex; align-items: center; justify-content: center; }
.azione-riga.carro svg { display: block; }


/* Il tasto della posta di DIO: stesso corpo degli altri ma con un bordo d'oro
   spesso, che si vede da lontano e non si confonde con niente. Lo ha solo il
   Game Master, e deve sembrare una cosa di un altro ordine. */
#btnPostaDio {
  background: #2a2216ee !important;
  border: 3px solid #e8c46a !important;
  color: #f7e9c4 !important;
  box-shadow: 0 0 0 1px #8a6a1e, 0 3px 14px #0009, 0 0 18px #e8c46a44 !important;
}
#btnPostaDio:hover { background: #3a2f1eee !important; border-color: #ffdd8a !important; }
#btnPostaDio.on { background: #8a6a1e !important; color: #fff !important; }
#btnPostaDio[hidden] { display: none; }


/* Il tasto dell'aiuto: azzurro, l'unico colore freddo della fila. Non e' una
   mossa di gioco — non arruola, non manda, non attacca — e' il filo diretto
   con chi il mondo lo governa, e si deve vedere che e' un'altra cosa. */
#btnAiuto { background: #1e2c38ee !important; border-color: #46708c !important; color: #d7ecf8 !important; }
#btnAiuto:hover { background: #27394aee !important; }
#btnAiuto.on { background: #3d6f96 !important; border-color: #6fa6cd !important; color: #fff !important; }


/* --- LA BARRA DI SCORRIMENTO ---
   Quella di sistema e' un pezzo di Windows appiccicato dentro una pergamena:
   grigia, squadrata, con le due frecce agli estremi. Qui e' cuoio e ottone
   come tutto il resto — un solco scavato nel pannello e un cursore caldo che
   si accende quando lo prendi. Le frecce spariscono: non le usa nessuno e
   rubano dodici pixel per capo.

   Firefox usa le due righe standard, il resto del mondo le -webkit-. */
#panes, #scheda, #poterePannello, #filtri, #civLista, .dialogo, #dockBody {
  scrollbar-width: thin;
  scrollbar-color: #7a6748 transparent;
}
#panes::-webkit-scrollbar,
#scheda::-webkit-scrollbar,
#poterePannello::-webkit-scrollbar,
#filtri::-webkit-scrollbar,
#civLista::-webkit-scrollbar,
#dockBody::-webkit-scrollbar,
.dialogo::-webkit-scrollbar { width: 11px; height: 11px; }

#panes::-webkit-scrollbar-track,
#scheda::-webkit-scrollbar-track,
#poterePannello::-webkit-scrollbar-track,
#filtri::-webkit-scrollbar-track,
#civLista::-webkit-scrollbar-track,
#dockBody::-webkit-scrollbar-track,
.dialogo::-webkit-scrollbar-track {
  background: #17120d;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px #2b2118;
  margin: 4px 0;
}

#panes::-webkit-scrollbar-thumb,
#scheda::-webkit-scrollbar-thumb,
#poterePannello::-webkit-scrollbar-thumb,
#filtri::-webkit-scrollbar-thumb,
#civLista::-webkit-scrollbar-thumb,
#dockBody::-webkit-scrollbar-thumb,
.dialogo::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a7350, #5f4d33);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #b09468;
}
#panes::-webkit-scrollbar-thumb:hover,
#scheda::-webkit-scrollbar-thumb:hover,
#poterePannello::-webkit-scrollbar-thumb:hover,
#filtri::-webkit-scrollbar-thumb:hover,
#civLista::-webkit-scrollbar-thumb:hover,
#dockBody::-webkit-scrollbar-thumb:hover,
.dialogo::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #b8892f, #8a6a1e);
  background-clip: padding-box;
}
#panes::-webkit-scrollbar-thumb:active,
#scheda::-webkit-scrollbar-thumb:active,
.dialogo::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #d8a648, #a37c24);
  background-clip: padding-box;
}
/* Le frecce agli estremi: via. */
#panes::-webkit-scrollbar-button,
#scheda::-webkit-scrollbar-button,
#poterePannello::-webkit-scrollbar-button,
#filtri::-webkit-scrollbar-button,
#civLista::-webkit-scrollbar-button,
#dockBody::-webkit-scrollbar-button,
.dialogo::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
#panes::-webkit-scrollbar-corner,
#scheda::-webkit-scrollbar-corner { background: transparent; }

/* Il dialogo di una conversazione: una finestra che scorre da sola, cosi' il
   riquadro per scrivere resta sempre in fondo e non scappa. */
.dialogo {
  max-height: 46vh; overflow-y: auto;
  padding: 4px 6px 2px 2px; margin-bottom: 4px;
}


/* Il megafono: stesso oro spesso del tasto delle preghiere, perche' sono la
   stessa cosa vista dai due lati — la voce di DIO che ascolta e quella che
   parla. Lo ha solo il Game Master. */
#btnMegafono {
  background: #2a2216ee !important;
  border: 3px solid #e8c46a !important;
  color: #f7e9c4 !important;
  box-shadow: 0 0 0 1px #8a6a1e, 0 3px 14px #0009, 0 0 18px #e8c46a44 !important;
}
#btnMegafono:hover { background: #3a2f1eee !important; border-color: #ffdd8a !important; }
#btnMegafono.on { background: #8a6a1e !important; color: #fff !important; }
#btnMegafono[hidden] { display: none; }


/* --- VIA LE FRECCETTE DEL BROWSER ---
   Un campo numerico si porta dietro due minuscole frecce su/giu' disegnate dal
   sistema: grigie, squadrate, di un altro secolo rispetto a tutto il resto, e
   per giunta inutili — qui accanto ci sono gia' un piu' e un meno grandi
   quanto un dito. Se ne vanno da ovunque. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* --- LA RIGA DI UNA RISORSA DA SPEDIRE ---
   Cinque cose in fila su una riga sola: che risorsa e', meno, quanto, piu', e
   "tutto". Con la griglia dei compiti — pensata per quattro colonne — il tasto
   "tutto" veniva sbalzato a capo e si prendeva tutta la larghezza, che e'
   esattamente l'aria di una cosa rotta. */
.riga-merce {
  display: grid;
  grid-template-columns: minmax(96px, 1.4fr) auto minmax(72px, 1fr) auto auto;
  align-items: center; gap: 6px; padding: 5px 0;
}
.riga-merce .nm { font-size: 13.5px; }
.riga-merce .nm small { display: block; color: var(--ink-dim); font-size: 11px; }
.riga-merce input { width: 100%; text-align: center; padding: 6px 4px; margin: 0; }
.riga-merce button { padding: 6px 10px; min-width: 36px; }
.riga-merce .tutto { font-size: 11.5px; min-width: 46px; color: var(--ink-dim); }
.riga-merce .tutto:hover { color: var(--gold); border-color: #b8892f; }


/* "Gia presidia questo posto": verde, perche' non e' un divieto ma una cosa
   gia' a posto. Dove starebbe il tasto, cosi' si legge al suo posto. */
.gia-presidia {
  margin: 8px 0 2px; padding: 6px 10px;
  background: #1c3320; border: 1px solid #3d6b45; border-radius: 8px;
  color: #8fe0a5; font-size: 12.5px; font-weight: 600;
}


/* Il quadratino col colore della civilta', accanto al suo nome: si riconosce
   prima dal colore che dal nome, come sulla mappa. */
.bandierina {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 6px; vertical-align: baseline;
  box-shadow: inset 0 0 0 1px #0007;
}

/* --- OTTO TASTI IN FONDO, NON QUATTRO ---
   Con mercato e alleanze la barra e' cresciuta, e su un telefono otto quadrati
   in fila non ci stanno. Invece di rimpicciolirli fino a renderli illeggibili,
   si lascia che vadano a capo: la barra cresce verso l'alto, dove non c'e'
   niente, e ogni tasto resta grande abbastanza da centrarlo col pollice. */
#militare { flex-wrap: wrap; }
@media (max-width: 560px) {
  #militare button { min-width: 46px; height: 50px; border-radius: 9px; }
  #militare button .ico { font-size: 18px; }
  #militare button .nome { font-size: 7.5px; }
}

/* La stretta di mano e il patto, accanto alla busta. */
.azione-riga.patto:hover { color: #8fd6a0; border-color: #5e9a6d; }
.azione-riga.alleanza:hover { color: #9fc7ff; border-color: #5f86bd; }
.azione-riga[disabled] { opacity: .38; cursor: default; }
.azione-riga[disabled]:hover { color: inherit; border-color: #4b5c6b; }

/* --- UN INTERRUTTORE ---
   Una spunta con la sua etichetta, grande abbastanza da premerla col dito
   senza centrare il quadratino. */
.interruttore {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 0 4px; padding: 8px 10px;
  background: #1b222acc; border: 1px solid #38444f; border-radius: 9px;
  cursor: pointer; user-select: none;
}
.interruttore input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
.interruttore span { font-size: 12.5px; color: #cfdae4; }
.interruttore:hover { border-color: #55667a; }

/* Una cosa che si poteva fare e adesso non si puo' piu'. Il messaggio resta,
   i tasti no: si legge come quello che e'. */
.spento { opacity: .62; font-style: italic; margin-top: 5px; }

/* --- QUANDO LA CITTA' E' APERTA, LA CITTA' E' TUTTO ---
   Fino a ieri questa schermata si guardava e basta, e lasciar spuntare sopra
   le barre della mappa non dava fastidio a nessuno. Adesso ci si COSTRUISCE, e
   la barra dei cantieri stava in fondo — cioe' esattamente sotto il righello,
   i livelli di zoom e i tasti militari, che le finivano addosso.
   Una veduta a schermo intero e' una schermata a se': mentre e' aperta, la
   mappa e le sue barre si tolgono di mezzo. */
body.in-citta #city { z-index: 960; }
body.in-citta #livelli,
body.in-citta #militare,
body.in-citta #righello,
body.in-citta #hud,
body.in-citta #poteri,
body.in-citta #civLista { display: none !important; }


/* --- UNA RIGA SPENTA DICE PIU' DI UNA RIGA CHE NON C'E' ---
   Senza la caserma di un'arma quell'arma non si arruola. La riga resta a
   schermo, spenta: cosi' si vede che la cosa esiste e che manca qualcosa,
   invece di chiedersi dove sia finita la cavalleria. */
.slot.spenta { opacity: .42; }
.slot.spenta input, .slot.spenta button, .slot.spenta select { pointer-events: none; }

/* Il livello si sceglie con una tendina accanto alla quantita: e' una scelta
   fra pochi valori, e una tendina lo dice meglio di un altro campo numerico. */
.slot select.liv {
  min-width: 92px; padding: 5px 7px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 12.5px; cursor: pointer;
}


/* ===========================================================================
   QUANDO IL PUNTATORE E' UN DITO
   ===========================================================================

   Il documento di progetto dice «mobile-first», ma i comandi erano tarati sul
   mouse: righe azione alte diciotto pixel, il tastino "i" diciassette, i piu' e
   meno degli slot ventinove, i bottoni normali trentaquattro. Il minimo per un
   polpastrello e' QUARANTAQUATTRO — sotto, si sbaglia bersaglio, e sbagliare
   bersaglio in un pannello di poteri divini vuol dire lanciare una pestilenza
   invece di un raccolto.

   NON SI RICONOSCE IL TELEFONO, SI RICONOSCE IL DITO.
   Guardare il nome del dispositivo e' fragile: i nomi cambiano, si possono
   dichiarare falsi, e un tablet o un portatile touch non si chiamano telefono
   pur avendo lo stesso problema. `pointer: coarse` fa la domanda giusta —
   «con che cosa stai puntando?» — e la fa al browser, che la risposta ce l'ha.
   Un desktop con la finestra stretta NON entra qui dentro, ed e' giusto: ha il
   mouse, la precisione ce l'ha.

   Per i comandi che devono restare piccoli DA VEDERE — il tastino "i" dentro un
   titolo, le righe azione dentro una frase — non si ingrandisce il disegno: si
   allarga la ZONA SENSIBILE con uno strato invisibile sopra. Restano piccoli e
   si prendono lo stesso. */

@media (pointer: coarse) and (max-width: 1200px) {

  /* La regola generale: nessun comando sotto i quarantaquattro. */
  button,
  .azione-riga,
  select,
  .interruttore {
    min-height: 44px;
  }

  button { padding: 11px 15px; font-size: 14.5px; }

  /* I tasti in fila si prendono lo spazio che c'e': un bottone largo si
     centra senza guardare, uno stretto va inseguito. */
  .btns { gap: 10px; margin-top: 12px; }
  .btns button { flex: 1 1 auto; min-width: 44%; }

  /* IL TASTINO "i": diciassette pixel di disegno, quarantaquattro di bersaglio.
     Lo strato invisibile e' centrato su di lui e deborda: non sposta niente
     nella riga, perche' e' fuori dal flusso. */
  button.info { position: relative; min-height: 0; }
  button.info::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* LE RIGHE AZIONE — la busta, il patto, l'alleanza — stanno dentro una frase
     e non possono diventare bottoni alti mezzo dito: stessa cura del tastino
     "i", e un po' di respiro attorno perche' spesso sono in fila fra loro. */
  .azione-riga {
    position: relative; min-height: 0;
    padding: 5px 10px; margin-left: 9px; font-size: 13px;
  }
  .azione-riga::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 100%; min-width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* I PIU' E MENO DEGLI SLOT: qui si sbaglia piu' che altrove, perche' sono in
     coppia e vicini. Larghi, alti, e distanziati. */
  .slot { gap: 9px; padding: 7px 0; }
  .slot button { min-width: 48px; min-height: 44px; padding: 8px 12px; font-size: 16px; }
  .slot input { padding: 10px 6px; font-size: 16px; }
  .slot select.liv { min-height: 44px; font-size: 14px; }

  /* Le linguette in cima ai pannelli: si sfiorano una con l'altra. */
  #tabs button { min-height: 44px; padding: 10px 14px; font-size: 14px; }

  /* I livelli di zoom, che stanno in fondo e si premono al volo. */
  #scale button { min-height: 44px; padding: 10px 6px; font-size: 13px; }

  /* L'interruttore: gia' pensato per il dito, gli manca solo l'altezza. */
  .interruttore { padding: 11px 12px; }
  .interruttore input { width: 21px; height: 21px; }

  /* I POTERI DIVINI. Sono la ragione per cui questo blocco esiste: sbagliare
     bersaglio li' non e' un fastidio, e' una carestia lanciata per errore su
     una civilta' che non c'entrava niente. Larghi, distanziati, e mai due
     stretti appaiati. */
  button.divino { min-height: 48px; padding: 12px 16px; font-size: 14.5px; }

  /* La testa del pannello a cassetto: la X di chiusura era un carattere. */
  #dockHead button { min-width: 44px; min-height: 44px; padding: 6px 12px; }

  /* Il campo di testo: sedici pixel e' la misura sotto la quale Safari su
     iPhone ingrandisce la pagina da solo quando ci si scrive dentro, e da li'
     non torna piu' indietro. Non e' estetica, e' un difetto di navigazione. */
  input:not([type=range]):not([type=checkbox]):not([type=radio]),
  select,
  textarea { font-size: 16px; }
}


/* ===========================================================================
   I POTERI DIVINI CAMBIANO FORMA, NON MISURA
   ===========================================================================

   Sul desktop la colonna sul fianco funziona: dodici tasti impilati, tutti
   visibili, un colpo d'occhio. Su un telefono no, e non per qualche pixel di
   troppo — DODICI COSE IN VERTICALE NON ENTRANO IN UN'ALTEZZA CHE IN VERTICALE
   NON C'E'. In piedi la colonna arrivava a coprire la fila dei comandi, con
   "Raccolto" sopra "Alleanze"; gli ultimi due finivano sotto la barra del
   browser. Girando l'orizzontale ne restava fuori la meta'.

   Quindi non si rimpicciolisce: si cambia forma. Un tasto, e dietro una
   griglia che si apre quando serve e si richiude appena hai scelto — perche'
   un potere divino ti chiede subito DOVE colpire, e una griglia aperta
   coprirebbe proprio la mappa su cui devi indicare. */

#poteriApri { display: none; }
#poteriGriglia { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 900px) {

  /* Il fianco torna a essere un tasto solo. */
  #poteri { flex-direction: row; }
  #poteriApri { display: flex; }

  /* La griglia diventa un foglio che copre lo schermo. Non una tendina
     stretta: dodici poteri chiedono spazio, e mezzo schermo di vuoto attorno a
     sei tasti stretti sarebbe peggio della colonna di prima. */
  #poteriGriglia {
    display: none;
    position: fixed; inset: auto 8px calc(12px + var(--safe-b)) 8px;
    z-index: 980;
    flex-direction: row; flex-wrap: wrap; gap: 8px;
    justify-content: center; align-content: flex-start;
    max-height: 68vh; overflow-y: auto;
    padding: 12px; border-radius: 14px;
    background: #1a1220f2; border: 1px solid #6a4a80;
    box-shadow: 0 -10px 40px #000b;
    backdrop-filter: blur(6px);
  }
  body.poteri-aperti #poteriGriglia { display: flex; }

  /* Tre per riga in piedi, e i tasti crescono: sono comandi che fanno danno,
     e sbagliare bersaglio qui vuol dire una carestia lanciata per errore. */
  #poteriGriglia button {
    width: calc(33.333% - 6px); height: 72px;
    border-radius: 12px;
  }
  #poteriGriglia button .ico { font-size: 24px; }
  #poteriGriglia button .nome { font-size: 10px; }
}

/* Sdraiati i tasti stanno in sei per riga: l'altezza e' poca e la larghezza
   avanza, quindi si usa quella. */
@media (max-width: 900px) and (orientation: landscape) {
  #poteriGriglia { max-height: 78vh; }
  #poteriGriglia button { width: calc(16.666% - 7px); height: 62px; }
}


/* ===========================================================================
   LA FILA DEI COMANDI SCORRE, NON STRABORDA
   ===========================================================================

   Otto tasti da cinquantasei pixel piu' gli spazi vogliono cinquecento pixel
   di larghezza. Un telefono in piedi ne ha trecentonovanta. La fila era
   centrata e senza scorrimento: il risultato era che i primi finivano fuori a
   sinistra — "Alleanze" spariva sotto la colonna dei poteri — e l'ultimo
   andava a capo per conto suo, sfalsato.
   Una fila che non entra non va accorciata: va fatta scorrere. */

@media (max-width: 900px) {
  #militare {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Il primo tasto non deve nascere sotto il tasto dei poteri, e l'ultimo
       deve poter arrivare al centro invece di restare incollato al bordo. */
    padding: 0 8px 0 68px;
    pointer-events: auto;
  }
  #militare::-webkit-scrollbar { display: none; }
  #militare button { flex: 0 0 auto; scroll-snap-align: center; }
}

/* Quando la griglia dei poteri e' aperta, la fila sotto non serve e darebbe
   solo fastidio: due file di tasti sovrapposte sono il modo migliore per
   premere quello sbagliato. */
body.poteri-aperti #militare { display: none; }

/* Dentro la griglia dei poteri, "A Dio" e "A tutti" devono avere la stessa
   faccia degli altri: sono tredici e quattordici tasti della stessa cosa, non
   due ospiti con il vestito di un'altra festa. Il colore lo tengono — dicono
   che sono posta, non calamita' — ma la forma e' quella della griglia. */
@media (max-width: 900px) {
  #poteriGriglia > button {
    width: calc(33.333% - 6px); height: 72px; min-width: 0;
    border-radius: 12px; padding: 4px;
  }
  #poteriGriglia > button .ico { font-size: 24px; }
  #poteriGriglia > button .nome { font-size: 10px; }
  /* Il pallino dei non letti resta in alto a destra come sulla fila. */
  #poteriGriglia > button .n { top: 4px; right: 6px; }
}
@media (max-width: 900px) and (orientation: landscape) {
  #poteriGriglia > button { width: calc(16.666% - 7px); height: 62px; }
}


/* ===========================================================================
   LE QUOTE IN FONDO, RIFATTE PER IL DITO
   ===========================================================================

   In fondo allo schermo ci sono quattro cose impilate, e stanno a quote fisse
   decise una per una quando i bottoni erano alti trentaquattro pixel:

     il pannello chiuso  ->  92 px dal fondo
     la barra dello zoom -> 100 px
     la fila dei comandi -> 146 px

   Alzando i bottoni a quarantaquattro per il dito, quelle quote non tornano
   piu': la barra dello zoom cresce verso l'alto e va a finire sotto la fila dei
   comandi, e il pannello — che ha z-index piu' alto — le passa sopra tutte e
   due. Nella foto si vedeva "Provincia" tagliato a meta' dal bordo del
   pannello.

   Le quote non si aggiustano a occhio: si ricalcolano dal basso, sommando le
   altezze vere. Pannello 92, piu' otto di respiro, fa 100 per lo zoom; zoom
   alto 44 piu' otto fa 152 per i comandi; comandi alti 56 piu' otto fa 216 per
   il tasto dei poteri, che cosi' non finisce mai sopra a niente. */

@media (max-width: 900px) {
  #scale    { bottom: calc(100px + var(--safe-b)); }
  #militare { bottom: calc(152px + var(--safe-b)); }

  /* La colonna dei poteri diventa un tasto solo e scende in basso a sinistra,
     dove il pollice ci arriva. In cima a sinistra c'era il menu, e i due si
     davano fastidio a vicenda. */
  #poteri {
    top: auto;
    bottom: calc(216px + var(--safe-b));
    left: 8px;
  }
  #poteriApri {
    width: 56px; height: 56px; padding: 3px 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: #2a1d2ee8; color: #e6d4f2; border: 1px solid #6a4a80;
    border-radius: 11px; box-shadow: 0 2px 10px #0007;
  }
  #poteriApri .ico { font-size: 22px; line-height: 1; }
  #poteriApri .nome { font-size: 8.5px; }
  body.poteri-aperti #poteriApri { background: #6c4d8c; border-color: #a37fc4; }

  /* Il pannello dei poteri, quando si apre, parte da sopra il tasto. */
  #poterePannello {
    left: 8px; right: 8px; top: auto;
    bottom: calc(280px + var(--safe-b));
    width: auto; max-height: 52vh;
  }
}

/* LE RISORSE IN CIMA MANGIANO ALTEZZA, E IN VERTICALE L'ALTEZZA E' TUTTO.
   Cinque pastiglie piu' il nome della civilta' andavano su due righe, e due
   righe in cima a un telefono in piedi sono sessanta pixel di mappa in meno.
   Stessa informazione, un filo piu' stretta: ci sta in una riga sola. */
@media (max-width: 900px) {
  #hud { padding: calc(4px + var(--safe-t)) 8px 8px 14px; gap: 3px; }
  .hud-civ { font-size: 13px; gap: 5px; }
  .hud-res { gap: 3px; }
  .res { padding: 2px 7px 2px 5px; font-size: 11.5px; gap: 3px; }
  .res i { font-size: 11px; }
}

/* Sdraiati l'altezza e' pochissima: il pannello chiuso si stringe, e tutto
   quello che gli sta sopra scende di conseguenza. */
@media (max-width: 900px) and (orientation: landscape) {
  /* Sdraiato la testata e la stessa: la misura vale anche qui. */
  #sheet.collapsed { transform: translateY(calc(100% - var(--sheet-peek, 64px) - var(--safe-b))); }
  #scale    { bottom: calc(72px + var(--safe-b)); }
  #militare { bottom: calc(124px + var(--safe-b)); }
  #poteri   { bottom: calc(188px + var(--safe-b)); }
  #poterePannello { bottom: calc(250px + var(--safe-b)); max-height: 62vh; }
}

/* LA TESTATA DELLA SCHEDA DEI POTERI, CON LA X.
   Resta incollata in alto mentre il resto scorre: su una scheda lunga il tasto
   per chiudere non deve andarsene proprio mentre lo si cerca.
   I margini negativi la fanno arrivare fino ai bordi del pannello, e il padding
   rimette dentro lo stesso incasso di prima: senza, il contenuto passerebbe di
   fianco alla testata invece che sotto. Il top negativo pareggia i 12px di
   padding del pannello, cosi si incolla a filo del bordo e non 12px sotto. */
#poterePannello .testaPotere {
  position: sticky; top: -12px; z-index: 3;
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--panel);
  margin: -12px -14px 0; padding: 12px 14px 4px;
  border-radius: 12px 12px 0 0;
}
#poterePannello .testaPotere h3 { flex: 1; min-width: 0; }
#poterePannello .chiudiX {
  position: relative;
  flex: 0 0 auto; background: none; border: 1px solid transparent;
  color: var(--ink-dim); font: inherit; font-size: 22px; line-height: 1;
  width: 30px; height: 30px; margin: -4px -4px 0 0;
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#poterePannello .chiudiX:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
#poterePannello .chiudiX:active { background: #6c4d8c; color: #fff; }
/* Col dito il bersaglio vero e piu grande di quello che si vede: il tasto
   resta piccolo per non rubare spazio al titolo, ma si prende i suoi 44px
   di zona sensibile allargandola oltre il disegno. */
#poterePannello .chiudiX::after {
  content: ''; position: absolute; width: 44px; height: 44px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* LA GUIDA DEI PRIMI PASSI.
   Sta in alto a destra su schermo largo, e in alto al centro sul telefono —
   sopra la card in basso, mai davanti ad essa: il secondo passo chiede proprio
   di aprire quella, e una guida che copre la cosa di cui parla non serve a
   niente. Il fondo e opaco perche sotto ci passa un mappamondo che gira. */
#guida {
  position: fixed; z-index: 700;
  right: 12px; top: calc(64px + var(--safe-t)); width: min(90vw, 320px);
  background: var(--panel); border: 1px solid var(--gold-dim, #6a5a3a);
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 10px 30px #000a;
}
#guida[hidden] { display: none; }
#guida .guidaTesta { display: flex; align-items: flex-start; gap: 6px; }
#guida .guidaTesta b { flex: 1; color: var(--gold); font-size: 15px; }
#guida .chiudiX {
  position: relative; flex: 0 0 auto;
  background: none; border: 1px solid transparent; color: var(--ink-dim);
  font: inherit; font-size: 22px; line-height: 1;
  width: 30px; height: 30px; margin: -4px -4px 0 0;
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#guida .chiudiX:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
#guida .chiudiX::after {
  content: ''; position: absolute; width: 44px; height: 44px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#guida ol { margin: 8px 0 0; padding-left: 20px; }
#guida li { margin: 0 0 7px; font-size: 13px; line-height: 1.45; color: var(--ink); }
#guida button.primary { width: 100%; margin-top: 4px; }
#guida .nota { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-dim); }

/* Sul telefono la colonna dei poteri sta a sinistra e la card in basso: resta
   la fascia in alto, larga quanto lo schermo meno i margini. */
@media (max-width: 900px) {
  #guida {
    left: 12px; right: 12px; width: auto;
    top: calc(92px + var(--safe-t));
    max-height: 46vh; overflow-y: auto;
  }
  #guida li { font-size: 13.5px; }
}

/* IL CONTO, IN FONDO AL MENU.
   L'uscita stava nella linguetta Mondo della card in basso, fra le statistiche
   del pianeta e la classifica: non e una cosa del mondo, e una cosa del conto,
   e la si cercava qui. Un filo sopra la separa da quello che possiedi, perche
   e l'unica voce del menu che non parla di territorio. */
#dockBody .dockConto { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
#dockBody .dockConto h4 span:last-child { color: var(--gold); font-weight: 400; }
#dockBody .dockConto .esci {
  width: 100%; margin-top: 8px; min-height: 40px;
  border-color: var(--line); color: var(--ink-dim);
}
#dockBody .dockConto .esci:hover { color: var(--ink); border-color: var(--blood); background: #2a1a18; }
#dockBody > .fine { margin: 4px 0 0; }