/* ===========================================================================
   Atlante — la mappa del mondo.

   LO STILE E' QUELLO DEL PANNELLO E DEL MANUALE (Cardine, web/pannello e
   web/manuale), e non per pigrizia: sono siti dello stesso server, aperti
   dallo stesso gioco. Presentarsi con due facce diverse fa sembrare che uno
   dei due sia di qualcun altro.

   Le regole della casa, ripetute qui perche' chi tocca questo file non deve
   andare a cercarle:
     * carattere Minecraftia, con la correzione di ascent che rimette in bolla
       il ritmo verticale (i glifi stanno TUTTI sopra la linea di base);
     * niente angoli arrotondati, niente sfocature: bordi a gradini come i
       blocchi, chiari in alto a sinistra e scuri in basso a destra;
     * mai `height` fissa su qualcosa che contiene testo: si usa il padding;
     * mai `vertical-align` per centrare: flex e `align-items`;
     * `line-height` generoso, perche' l'occhio alto ha bisogno di aria.

   L'UNICA DEROGA sta nella mappa: la tela e' un'immagine, non un testo, e li'
   il pixel comanda. `image-rendering: pixelated` e nessuna transizione, cosi'
   un blocco resta un quadrato anche a zoom alto.
   =========================================================================== */

@font-face {
  font-family: "Minecraftia";
  src: url("/fonts/Minecraftia-Regular.ttf") format("truetype");
  font-display: block;
  ascent-override: 212.5%;
  descent-override: 0%;
  line-gap-override: 0%;
}

:root {
  --spaziatura-marchio: 6px;

  --pergamena:       #ece0c4;
  --pergamena-riga:  #e4d6b6;
  --pergamena-cupa:  #d5c39b;
  --inchiostro:      #2b2118;
  --inchiostro-lieve:#6d5c48;
  --cuoio:           #5b3a1e;
  --cuoio-scuro:     #3a2412;
  --cuoio-chiaro:    #7a5230;
  --oro:             #c08a2e;
  --oro-chiaro:      #e0b455;
  --rosso:           #8c2f18;
  --verde:           #1d5137;
  --scrivania:       #1e1409;

  --gbc-notte:       #0a001a;
  --gbc-viola:       #800080;
  --gbc-blu:         #0f4a8b;
  --gbc-oro:         #ffcc00;
  --gbc-arancio:     #ff8800;
  --gbc-fuoco:       #ff5500;
  --gbc-lilla:       #cc33ff;
  --gbc-indaco:      #9b30ff;

  --riga:            26px;
  --colonna:         248px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--inchiostro);
  font-family: "Minecraftia", ui-monospace, monospace;
  font-size: 15px;
  line-height: var(--riga);
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-synthesis: style;
  background: repeating-linear-gradient(90deg,
    #1e1409 0 6px, #221710 6px 12px, #1b1208 12px 18px);
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* la pagina non scorre: scorre la mappa */
}

/* --------------------------------------------------------------------------
   Copertina — la stessa del pannello, con la targa che dice cos'e' la pagina
   -------------------------------------------------------------------------- */
header.copertina {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(200, 80, 211, 0.35), transparent 60%),
    linear-gradient(330deg, var(--gbc-viola), var(--gbc-blu));
  border-bottom: 4px solid var(--gbc-notte);
  box-shadow: inset 0 -3px 0 rgba(255, 0, 255, 0.35);
  padding: 14px 20px 12px;
  text-align: center;
  flex: 0 0 auto;
}
header.copertina .insegna {
  display: inline-block;
  padding: 6px 22px 8px;
  background: rgba(10, 0, 26, 0.55);
  border: 3px solid;
  border-color: rgba(255, 0, 255, 0.55) rgba(120, 0, 140, 0.75)
                rgba(120, 0, 140, 0.75) rgba(255, 0, 255, 0.55);
  box-shadow: 0 0 14px rgba(255, 0, 255, 0.35), inset 0 0 14px rgba(255, 0, 255, 0.12);
}
/* `letter-spacing` mette lo spazio DOPO OGNI LETTERA, ultima compresa: la
   scatola diventa piu' larga del testo e, centrandola, il testo finisce
   spostato a sinistra di mezza spaziatura. Il margine negativo se lo riprende. */
header.copertina .marchio {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: var(--spaziatura-marchio);
  font-weight: normal;
}
header.copertina .marchio span {
  display: inline-block;
  margin-right: calc(var(--spaziatura-marchio) * -1);
  background: linear-gradient(90deg,
    var(--gbc-oro) 0%, var(--gbc-oro) 5%, var(--gbc-arancio) 12%, var(--gbc-arancio) 17%,
    var(--gbc-fuoco) 24%, var(--gbc-fuoco) 29%, var(--gbc-lilla) 38%, var(--gbc-lilla) 43%,
    var(--gbc-indaco) 50%, var(--gbc-indaco) 57%, var(--gbc-lilla) 64%, var(--gbc-lilla) 69%,
    var(--gbc-fuoco) 76%, var(--gbc-fuoco) 81%, var(--gbc-arancio) 88%, var(--gbc-arancio) 93%,
    var(--gbc-oro) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(255, 136, 0, 0.55));
  animation: ondaMarchio 20s linear infinite;
}
@keyframes ondaMarchio {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}
header.copertina .targa {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px auto 0;
  padding: 4px 18px 6px;
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 55%, #9a6c1f);
  color: #2a1a06;
  border: 3px solid;
  border-color: #f4dc9a #6f4a12 #6f4a12 #f4dc9a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
header.copertina .targa::before,
header.copertina .targa::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #7a5a12;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}
header.copertina .targa span {
  letter-spacing: var(--spaziatura-marchio);
  margin-right: calc(var(--spaziatura-marchio) * -1);
}

/* --------------------------------------------------------------------------
   Le icone

   Minecraftia non ha gli emoji: senza questa regola ogni icona della colonna
   e della riga di stato uscirebbe come un quadratino, che e' esattamente il
   difetto per cui in gioco gli emoji sono vietati. Qui pero' disegna il font
   del sistema, e allora glielo si dice.
   -------------------------------------------------------------------------- */
.icona {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* Sono disegni a pixel: sfocarli per "ammorbidirli" e' l'unico modo di
     rovinarli. */
  image-rendering: pixelated;
  vertical-align: -3px;
}

/* --------------------------------------------------------------------------
   Comandi comuni
   -------------------------------------------------------------------------- */
/* Il conto accanto al titolo di un gruppo: "12 di 47". Piccolo e spento: e' un
   dato di servizio, non un titolo. */
.conteggio {
  font-size: 11px;
  color: var(--pergamena-cupa);
  opacity: 0.7;
}

/* La riga che spiega cosa fa una spunta, sotto al gruppo. */
.nota {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--pergamena-cupa);
  opacity: 0.75;
}

button, .bottone {
  background: var(--pergamena-cupa);
  color: var(--cuoio-scuro);
  border: 3px solid;
  border-color: var(--pergamena) var(--cuoio-scuro) var(--cuoio-scuro) var(--pergamena);
  font: inherit;
  line-height: var(--riga);
  cursor: pointer;
  padding: 2px 10px;
}
button:active, .bottone:active {
  border-color: var(--cuoio-scuro) var(--pergamena) var(--pergamena) var(--cuoio-scuro);
}
button[disabled] { opacity: 0.45; cursor: default; }
button.primario {
  background: linear-gradient(180deg, #2f7d55, var(--verde));
  border-color: #4fae79 #123322 #123322 #4fae79;
  color: #eafff2;
}

input, select {
  background: var(--pergamena);
  color: var(--inchiostro);
  border: 3px solid;
  border-color: var(--cuoio-scuro) var(--cuoio-chiaro) var(--cuoio-chiaro) var(--cuoio-scuro);
  padding: 2px 6px;
  font: inherit;
  line-height: var(--riga);
  min-width: 0;
}
input::placeholder { color: var(--inchiostro-lieve); }
input:focus, select:focus { outline: 2px solid var(--oro); }

/* --------------------------------------------------------------------------
   Entrata (il codice)
   -------------------------------------------------------------------------- */
main.scrivania {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow: auto;
}
.foglio {
  background: var(--pergamena);
  border: 4px solid;
  border-color: var(--cuoio-chiaro) var(--cuoio-scuro) var(--cuoio-scuro) var(--cuoio-chiaro);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  padding: 20px 24px 24px;
  max-width: 560px;
  width: 100%;
}
.foglio h2 { margin: 0 0 8px; font-size: 18px; font-weight: normal; }
.foglio .spiega { color: var(--inchiostro-lieve); margin: 0 0 16px; }
/* `code` eredita il carattere: il monospace di ripiego del browser e' piu'
   piccolo e con un'altra linea di base, e in mezzo a una frase faceva
   scalino. Qui si distingue con il fondo, non con il carattere. */
code {
  font-family: inherit;
  font-size: inherit;
  background: var(--pergamena-cupa);
  border: 1px solid var(--pergamena-riga);
  padding: 0 4px;
}
.foglio form { display: flex; gap: 10px; }
.foglio form input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 3px; }
.errore { color: var(--rosso); min-height: var(--riga); margin: 10px 0 0; }

/* --------------------------------------------------------------------------
   La mappa
   -------------------------------------------------------------------------- */
.tavolo {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: var(--colonna) 1fr;
  min-height: 0;                 /* senza questa il grid non lascia scorrere */
}

/* ---- colonna dei livelli ---- */
.colonna {
  background: var(--cuoio-scuro);
  border-right: 3px solid var(--cuoio);
  overflow-y: auto;
  padding: 12px;
  color: var(--pergamena);
}
.colonna h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: normal;
  color: var(--oro-chiaro);
  letter-spacing: 1px;
  border-bottom: 2px solid var(--cuoio);
  padding-bottom: 4px;
}
.colonna .gruppo { margin-bottom: 18px; }
.voce {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 2px;
  cursor: pointer;
  user-select: none;
}
.voce:hover { background: rgba(255, 204, 0, 0.12); }
/* Spento e acceso devono distinguersi DA LONTANO, non guardando bene: una
   colonna di venti caselle si legge di sfuggita, e due tonalita' di beige
   sembrano la stessa cosa. Quindi spento = buco scuro, acceso = oro pieno
   con la cornice scura intorno. */
.voce input[type=checkbox] {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: var(--cuoio-scuro);
  border: 2px solid;
  border-color: var(--gbc-notte) var(--cuoio-chiaro) var(--cuoio-chiaro) var(--gbc-notte);
  cursor: pointer;
}
.voce input[type=checkbox]:checked {
  background: var(--oro-chiaro);
  border-color: #f4dc9a #6f4a12 #6f4a12 #f4dc9a;
  box-shadow: inset 0 0 0 2px var(--cuoio-scuro);
}
.voce .pastiglia {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.55);
}
.voce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonna .azioni { display: flex; gap: 6px; margin: 6px 0 10px; }
/* L'ELENCO DELLE STRUTTURE SCORRE DA SOLO.
   Con trentaquattro voci in coda ai livelli, la colonna diventava piu' alta
   dello schermo e per arrivare a "Nascita" bisognava scorrere oltre tutte le
   strutture. Adesso ognuno dei due elenchi ha la sua altezza. */
#strutture {
  max-height: 38vh;
  overflow-y: auto;
  padding-right: 4px;
}
.colonna .azioni button { padding: 0 8px; font-size: 13px; }

/* ---- area della mappa ---- */
.mappa {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #0d0906;
  overflow: hidden;
}
#tela {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  image-rendering: pixelated;
}
#tela.trascino { cursor: grabbing; }

/* ---- barra degli attrezzi, sopra alla mappa ---- */
.attrezzi {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  pointer-events: none;              /* i buchi fra i comandi restano mappa */
}
.attrezzi > * { pointer-events: auto; }
/* La barra sta DENTRO alla mappa, sempre. Senza questo, su una finestra
   stretta l'ultima cassetta finiva oltre il bordo destro e "Copia link" si
   vedeva a meta'. */
.attrezzi { max-width: 100%; }
.attrezzi .cassetta { max-width: 100%; flex-wrap: wrap; }
.attrezzi .cassetta {
  display: flex;
  gap: 6px;
  align-items: center;
  background: rgba(58, 36, 18, 0.92);
  border: 3px solid;
  border-color: var(--cuoio-chiaro) var(--gbc-notte) var(--gbc-notte) var(--cuoio-chiaro);
  padding: 5px 8px;
  color: var(--pergamena);
}
.attrezzi input { width: 88px; min-width: 60px; }
.attrezzi input.largo { width: 190px; min-width: 90px; }
@media (max-width: 1100px) {
  .attrezzi input.largo { width: 130px; }
}
.attrezzi .risultati {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  background: var(--pergamena);
  border: 3px solid var(--cuoio-scuro);
  max-height: 260px;
  overflow-y: auto;
  min-width: 240px;
  z-index: 5;
}
.attrezzi .risultati div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  cursor: pointer;
}
.attrezzi .risultati div:hover { background: var(--oro-chiaro); }

/* ---- riga di stato, in fondo ---- */
.riga-stato {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  background: rgba(58, 36, 18, 0.92);
  border: 3px solid;
  border-color: var(--cuoio-chiaro) var(--gbc-notte) var(--gbc-notte) var(--cuoio-chiaro);
  padding: 4px 10px;
  color: var(--pergamena);
}
.riga-stato b { color: #fff; font-weight: normal; }
.riga-stato .etichetta { color: #d9c39c; }
.riga-stato .avviso { color: var(--gbc-oro); }

/* --------------------------------------------------------------------------
   I SEGNI DISEGNATI, E PERCHE' NON SONO CARATTERI

   Minecraftia ha 722 caratteri e NON ha nessuno di quelli che vengono in mente
   per primi in un'interfaccia: il meno tipografico, il triangolino pieno
   piccolo, il triangolo di attenzione, la spunta, la crocetta, la lineetta
   lunga. Un carattere che il font non ha non da' nessun errore: il browser va a
   prenderlo altrove, e quell'altro font ha metriche sue. Il meno del tasto zoom
   arrivava da un font diverso da quello del piu' accanto, ed e' per questo che
   uno dei due sembrava sempre storto.

   La misura di quanto stia storto non e' un caso, ed e' calcolabile: in
   Minecraftia l'inchiostro dei glifi sta fra 0,375em e 1,75em SOPRA alla linea
   di base (yMin 576, yMax 2688 su 1536 per em: si', tutto sopra la linea). Il
   centro dell'inchiostro cade quindi a 1,0625em dalla linea di base — che e'
   esattamente la meta' dell'`ascent-override: 212.5%` scritto sopra, ed e' per
   questo che quel numero e' quello.

   Da li' viene il `vertical-align` dei segni qui sotto: per centrare un segno
   alto A su quel centro serve `1,0625em - A/2`.

   Il controllo che questo non ricapiti sta in `strumenti/caratteri-mancanti.py`.
   -------------------------------------------------------------------------- */

/* Triangolo d'attenzione: alto 9px, quindi 1.0625em - 4.5px. */
.segno-avviso {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 5px;
  vertical-align: calc(1.0625em - 4.5px);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
}

/* I tasti con un segno invece che una lettera.
   Quadrati e con il segno messo al centro con le coordinate, non con la linea
   di base: cosi' non dipende da nessun font, presente o mancante. */
.tasto-segno {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  flex: 0 0 auto;
}
.tasto-segno > i {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
}
.segno-piu, .segno-meno {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.segno-piu::before, .segno-meno::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 2px;
  background: currentColor;
}
.segno-piu::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 12px;
  background: currentColor;
}
.segno-vai {
  width: 0;
  height: 0;
  margin: -6px 0 0 -3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

/* ---- cartellino che segue il mouse sulle strutture ---- */
.cartellino {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  z-index: 6;
  background: var(--pergamena);
  border: 3px solid var(--cuoio-scuro);
  padding: 2px 8px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

@media (max-width: 780px) {
  .tavolo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .colonna { max-height: 34vh; border-right: none; border-bottom: 3px solid var(--cuoio); }
}