/* Il linguaggio visivo delle due pagine di amministrazione, in un posto solo.
 *
 * Stava duplicato in panel.html e server.html finche' era una manciata di regole.
 * Non lo e' piu': trecento righe in due copie sono la stessa "doppia verita'" che
 * questo progetto evita altrove, e la prima modifica al tema avrebbe scordato una
 * delle due pagine.
 *
 * Lo serve panel.py su /panel.css. Le due pagine tengono solo il proprio impianto:
 * la mappa e' due colonne a tutta altezza, il server e' una griglia di card.
 */

  :root {
    --bg: #080b10; --bg2: #0c1117; --bg3: #111925; --bg4: #18222f;
    --line: #1b2431; --line2: #2b3745;
    --ink: #e6edf5; --dim: #8ea0b5; --faint: #5b6b7e;

    --blue: #5596ff; --red: #f2645a; --amber: #e8ad3f; --green: #57c46f;
    --blue-soft: #5596ff1a; --red-soft: #f2645a1a; --amber-soft: #e8ad3f16;

    --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
    --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

    /* Spigoli quasi vivi. E' la scelta che cambia il carattere di tutto il resto: un
       pannello di controllo e' fatto di celle su una griglia, non di schede che
       galleggiano. Gli angoli tondi restano solo su cio' che si preme. */
    --r: 2px;

    /* Larghezza della barra laterale: solo icone. A 212 px era una colonna, e per due
       voci rubava spazio alla mappa senza dare niente in cambio. Le etichette restano
       nel markup - servono al lettore di schermo e riappaiono nel menu su telefono -
       ma su schermo largo si vedono al passaggio del puntatore. */
    --rail: 58px;

    /* Quanto si vede il fondo cartografico. E' LA manopola: il fondo e' satellitare e
       a piena luce ruberebbe la scena al dato, che sono le zone e i punti. Sotto .6
       torna il problema di prima - una mappa cosi' scura da non riconoscere piu' dove
       si sta guardando. */
    --carta-luce: .85;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 13.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  }

  /* Il telaio: barra laterale fissa, e a destra tutto il resto.
     Le due pagine hanno impianti interni diversi ma la stessa cornice. */
  body.app {
    display: grid; grid-template-columns: var(--rail) 1fr;
    height: 100vh; overflow: hidden;
  }
  .schermo { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; }
  .corpo { display: grid; grid-template-columns: 1fr 392px; min-height: 0; }
  #sprite { display: none; }

  /* Ogni icona e' una <use> sullo sprite: eredita currentColor e la dimensione dal
     contenitore, cosi' un'icona non ha mai un colore proprio da tenere in sincrono. */
  .i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

  /* ------------------------------------------------------------------ testa --- */

  /* --- la barra laterale --------------------------------------------------
     Tiene il marchio, la navigazione e l'uscita. Le voci sono poche adesso, ma qui
     ci stanno anche quelle che verranno (piloti, storico, regole) senza che la
     cornice debba essere ridisegnata - che era il limite della barra in cima. */

  .rail {
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid var(--line); background: var(--bg2);
  }
  .rail .marchio-riga {
    display: flex; align-items: center; justify-content: center; height: 50px;
    border-bottom: 1px solid var(--line);
  }
  .rail .logo { width: 28px; height: 28px; display: block; flex: none; }
  /* Il nome per esteso non ci sta in 58 px: vive nel menu su telefono, dove la barra
     si allarga. Qui resta leggibile dai lettori di schermo. */
  .rail .nome { display: none; }
  .rail .sezione { display: none; }

  .rail nav { display: flex; flex-direction: column; padding: 8px 0; min-height: 0;
              overflow-y: auto; }
  .rail .voce {
    position: relative; display: flex; align-items: center; justify-content: center;
    gap: 11px; height: 42px; color: var(--dim); text-decoration: none;
    font: 600 12px var(--sans); letter-spacing: .03em; border: 0; background: none;
    cursor: pointer; padding: 0;
  }
  .rail .voce .etichetta { display: none; }
  .rail .voce:hover { color: var(--ink); background: #ffffff06; }
  .rail .voce.on { color: var(--ink); background: var(--bg3); }
  /* Il segno della voce attiva: un filo pieno sul bordo, non una pillola. */
  .rail .voce.on::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--blue);
  }
  /* Il nome al passaggio del puntatore. Una riga di CSS al posto di una libreria, e
     serve solo dove l'etichetta e' nascosta. */
  .rail .voce[data-nome]:hover::after {
    content: attr(data-nome); position: absolute; left: calc(100% + 8px);
    padding: 5px 9px; background: var(--bg4); border: 1px solid var(--line2);
    color: var(--ink); font: 600 11px var(--sans); letter-spacing: .04em;
    white-space: nowrap; border-radius: var(--r); z-index: 50;
    box-shadow: 0 6px 18px #0009; pointer-events: none;
  }

  .rail .fondo { margin-top: auto; border-top: 1px solid var(--line); padding: 6px 0;
                 position: relative; }

  /* --- il menu dell'account ------------------------------------------------
     L'uscita non sta piu' in vista. Era una voce come le altre, alla stessa distanza
     di un clic di "Mappa": basta un gesto distratto per ritrovarsi fuori e dover
     rifare password e codice a sei cifre. Adesso serve aprirlo apposta. */
  .conto {
    position: absolute; left: calc(100% + 8px); bottom: 8px; z-index: 60;
    min-width: 170px; padding: 5px; background: var(--bg3);
    border: 1px solid var(--line2); border-radius: var(--r);
    box-shadow: 0 10px 30px #000b;
  }
  .conto[hidden] { display: none; }
  .conto .chi {
    padding: 7px 9px 8px; border-bottom: 1px solid var(--line); margin-bottom: 5px;
    font: 10px var(--mono); color: var(--faint); letter-spacing: .06em;
  }
  .conto a {
    display: flex; align-items: center; gap: 9px; padding: 8px 9px;
    color: var(--dim); text-decoration: none; border-radius: var(--r);
    font: 600 12px var(--sans);
  }
  .conto a:hover { background: var(--red-soft); color: var(--red); }

  /* --- la barra in cima al contenuto -------------------------------------- */

  header {
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px; height: 50px; border-bottom: 1px solid var(--line);
    background: var(--bg2);
  }
  /* Il titolo della pagina, con il quadratino d'accento che nel riferimento marca
     ogni inizio di blocco. */
  header .titolo {
    display: flex; align-items: center; gap: 9px;
    font: 650 11px var(--sans); letter-spacing: .18em; text-transform: uppercase;
  }
  header .titolo::before {
    content: ""; width: 7px; height: 7px; background: var(--blue); flex: none;
  }
  header .titolo span { color: var(--faint); font: 10px var(--mono); letter-spacing: .08em;
                        text-transform: none; }

  /* Il bottone del menu: si vede solo quando la barra laterale si ritira. */
  .menu {
    display: none; align-items: center; justify-content: center; width: 34px;
    height: 34px; border: 1px solid var(--line2); background: var(--bg3);
    color: var(--dim); border-radius: var(--r); cursor: pointer;
  }

  /* Il marchio grande, sulla pagina di accesso. Il filtro non e' decorazione: su un
     fondo scuro un distintivo metallico chiaro sembra ritagliato e appiccicato, e
     un'ombra diffusa lo posa sulla pagina invece di lasciarlo galleggiare. */
  .marchio {
    display: block; width: min(62%, 190px); height: auto; margin: 0 auto 18px;
    filter: drop-shadow(0 6px 18px #0009);
  }

  .spacer { margin-left: auto; }

  /* L'orologio in cabina: ora di partenza dal .miz piu' il tempo trascorso. E' il dato
     piu' consultato, quindi e' il piu' grande della pagina. */
  .clock { display: flex; align-items: baseline; gap: 8px; }
  .clock b { font: 650 26px/1 var(--mono); letter-spacing: -.01em;
             font-variant-numeric: tabular-nums; }
  .clock span { font: 10px/1 var(--mono); color: var(--faint); letter-spacing: .1em; }

  .chip {
    display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px var(--sans);
    padding: 6px 12px; border-radius: 20px; color: var(--dim);
    background: var(--bg); border: 1px solid var(--line);
  }
  .chip.ok { color: var(--green); border-color: #24462d; }
  .chip.warn { color: var(--amber); border-color: #4a3a1a; }
  .chip.bad { color: var(--red); border-color: #4d2523; }
  #stamp { font: 10px var(--mono); color: var(--faint); }

  /* ------------------------------------------------------------------ mappa --- */

  main { position: relative; overflow: hidden;
         background: radial-gradient(ellipse at 50% 38%, #0f1725 0%, var(--bg) 72%); }
  /* `user-select: none` e non solo il preventDefault sul pointerdown: l'SVG e' pieno
     di <text> - le etichette dei punti, il reticolo - e trascinando la mappa il browser
     ne faceva una selezione blu che restava li'. I due rimedi coprono strade diverse:
     questo vale anche per il doppio clic e per il trascinamento partito da fuori. */
  /* `touch-action: none` e' cio' che consegna il tocco ai nostri gestori invece che al
     browser: senza, un dito sulla mappa scorre la pagina e due la ingrandiscono. Vale
     SOLO qui - sul resto della pagina scorrere e ingrandire devono continuare a
     funzionare, perche' e' cosi' che si legge un pannello su un tablet. */
  svg#map { width: 100%; height: 100%; display: block; cursor: grab;
            touch-action: none;
            -webkit-user-select: none; user-select: none; }
  svg#map.dragging { cursor: grabbing; }

  /* A finestra stretta le colonne diventano una, e alla mappa serve un'altezza
     esplicita: in una riga alta "auto" un SVG a height:100% collassa a zero, e la mappa
     spariva del tutto. */
  /* --- schermi stretti ----------------------------------------------------
     La barra laterale esce dal flusso e diventa un pannello che scorre dentro,
     richiamato dal bottone del menu. Il contenuto passa a colonna unica.

     Alla mappa serve un'altezza ESPLICITA: in una riga alta "auto" un SVG a
     height:100% collassa a zero, e la mappa spariva del tutto. */
  @media (max-width: 1000px) {
    body.app { grid-template-columns: 1fr; height: auto; min-height: 100vh;
               overflow: visible; }
    .schermo { overflow: visible; }
    .corpo { grid-template-columns: 1fr; }
    main { height: 58vh; }
    .pannello { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }

    .menu { display: flex; }
    .rail {
      position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40;
      transform: translateX(-100%); transition: transform .18s ease;
      box-shadow: 18px 0 40px #000a;
    }
    /* Aperto il menu c'e' spazio: tornano il nome e le etichette, e i nomi al
       passaggio del puntatore non servono piu' - su un telefono non c'e' puntatore. */
    .rail .marchio-riga { justify-content: flex-start; gap: 10px; padding: 0 14px; }
    .rail .nome { display: block; }
    .rail .nome b { font: 650 12px/1.15 var(--sans); letter-spacing: .11em; display: block; }
    .rail .nome span { font: 9.5px/1.3 var(--mono); color: var(--faint); letter-spacing: .08em; }
    .rail .sezione {
      display: block; padding: 12px 15px 6px; font: 600 9px var(--mono);
      letter-spacing: .22em; text-transform: uppercase; color: #3f4c59;
    }
    .rail .voce { justify-content: flex-start; padding: 0 15px; }
    .rail .voce .etichetta { display: block; }
    .rail .voce[data-nome]:hover::after { display: none; }
    .conto { left: 8px; right: 8px; bottom: 52px; }
    body.menu-aperto .rail { transform: none; }
    /* Il velo che copre il contenuto: toccarlo chiude, ed e' il gesto che la gente
       prova per primo. */
    body.menu-aperto::after {
      content: ""; position: fixed; inset: 0; background: #000a; z-index: 39;
    }
    #stamp { display: none; }
    .clock b { font-size: 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .rail { transition: none; }
  }

  /* Reticolo e coordinate erano tarati su un fondo quasi nero: a #ffffff09 e
     #ffffff1c sparivano del tutto sopra il satellitare. Il contorno scuro sull'etichetta
     e' lo stesso rimedio gia' usato per i nomi dei punti - il testo resta leggibile sia
     sul mare che sulla neve, senza doverlo schiarire fino a dargli troppo peso. */
  .grid { stroke: #ffffff1a; stroke-width: 1; }
  .grid-label { fill: #ffffffb0; font: 9.5px var(--mono);
                paint-order: stroke; stroke: #080b10c0; stroke-width: 2.5px; }
  .scale { stroke: var(--faint); stroke-width: 1.5; }
  .scale-label { fill: var(--faint); font: 10px var(--mono); }

  /* --- le zone: rossa DOVE C'E' ANCORA DEL NEMICO, bianca LIBERA, blu TUA. Tre stati
         e tre colori, gli stessi sulla F10 dentro DCS, cosi' chi vola non impara due
         linguaggi.

         Il colore dice CHI C'E', non chi possiede, ed e' una richiesta dell'utente:
         prima si poteva ripulire una zona intera e vederla identica fino alla
         conquista, quindi il lavoro non lasciava traccia. Bianca vuol dire "non c'e'
         piu' niente da combattere qui", non ancora "e' mia".

         Il bianco e' l'unico colore che non somiglia a una delle due parti, ed e'
         esattamente cio' che serve per "di nessuno". Resta tratteggiata: il colore da
         solo non basta a chi distingue male i colori.

         Blu SICURA e' uno stato a se' e non una sfumatura del blu: quella zona non
         torna indietro mai piu', ed e' l'unica cosa permanente di tutta la campagna.
         Contorno pieno e piu' marcato, riempimento un po' piu' deciso. --- */
  .zone { stroke-width: 1.5; stroke-linejoin: round; }
  .zone.blue { fill: var(--blue-soft); stroke: #5596ffa0; }
  .zone.blue.locked { fill: #5596ff2e; stroke: var(--blue); stroke-width: 2.5; }
  .zone.red { fill: var(--red-soft); stroke: #f2645aa0; }
  .zone.contested, .zone.free { fill: #ffffff14; stroke: #ffffffc0; stroke-dasharray: 9 6; }
  /* La sigla si legge da lontano, il nome fa da didascalia. Il testo era bianco all'11%
     su fondo nero: sopra il satellitare non si vedeva piu', come il reticolo. */
  .zone-label { text-anchor: middle; pointer-events: none;
                paint-order: stroke; stroke: #080b10b0; stroke-width: 3px; }
  .zone-label .sigla { font: 700 15px var(--mono); letter-spacing: .1em; }
  .zone-label .nome { font: 650 9px var(--sans); letter-spacing: .18em; }
  .zone-label.red { fill: #f2645ac0; }
  .zone-label.contested, .zone-label.free { fill: #ffffffd0; }
  .zone-label.blue { fill: #5596ffc0; }
  .zone-label.blue.locked { fill: var(--blue); }
  .pt { cursor: pointer; }
  .pt .mk { stroke: var(--bg); stroke-width: 2.5; }
  .pt.blue .mk { fill: var(--blue); } .pt.red .mk { fill: var(--red); }
  .pt.onfront .mk { stroke: var(--amber); }
  .pt.sel .mk, .pt:hover .mk { stroke: var(--ink); stroke-width: 3; }
  /* La testa di ponte: un anello attorno al quadrato. Non e' un punto come gli altri -
     non si perde - e deve vedersi senza cliccarla. */
  .pt .home { fill: none; stroke-width: 1.3; opacity: .7; }
  .pt.blue .home { stroke: var(--blue); } .pt.red .home { stroke: var(--red); }
  /* Vicino a cadere, e oltre soglia. Il secondo non e' uno stato di passaggio: un punto
     ci resta finche' l'attaccante non possiede qualcosa di confinante. */
  .pt .risk { fill: none; stroke-width: 1.4; }
  .pt.critico .risk { stroke: var(--amber); stroke-dasharray: 3 3; }
  .pt.soglia .risk { stroke: var(--red); stroke-dasharray: 2 2.5; }
  .pt text { fill: var(--ink); font: 500 11px var(--sans); text-anchor: middle;
             pointer-events: none; paint-order: stroke; stroke: #080b10cc;
             stroke-width: 3.5px; stroke-linejoin: round; }
  /* Un segno per obiettivo, pieno se vivo: si contano, a differenza di un arco di danno
     che era una proporzione illeggibile. */
  .pip { stroke: var(--bg); stroke-width: 1; pointer-events: none; }
  .pip.alive { fill: var(--ink); } .pip.dead { fill: none; stroke: #ffffff3d; }
  /* I rinforzi comprati dall'IA, sopra il punto: rombi, per non confonderli con gli
     obiettivi. Dicono dove l'avversario ha investito. */
  .rnf { pointer-events: none; }
  .pt.blue .rnf { fill: var(--blue); } .pt.red .rnf { fill: var(--red); }

  /* La flotta. Stesso blu dei punti amici perche' e' roba della stessa parte, ma la
     forma e' uno scafo e non un quadrato: a questa scala il gruppo navale sta dentro un
     pixel, quindi e' la sagoma a dire che li' c'e' una nave e non una base. */
  .fleet .hull { fill: var(--blue); stroke: var(--bg); stroke-width: 1.4;
                 stroke-linejoin: round; }
  .fleet text { fill: var(--ink); font: 500 10px var(--sans); text-anchor: middle;
                letter-spacing: .08em; pointer-events: none; paint-order: stroke;
                stroke: #080b10cc; stroke-width: 3.5px; stroke-linejoin: round; }

  /* La barra del meteo sopra la mappa: solo icona e valore, senza etichette. Le parole
     stanno nella card in colonna; qui serve il colpo d'occhio. */
  #strip {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: stretch; gap: 0; overflow: hidden;
    background: #0a0f16e6; border: 1px solid var(--line2); border-radius: 11px;
    box-shadow: 0 8px 26px #000a; backdrop-filter: blur(8px);
    max-width: calc(100% - 24px);
  }
  #strip .s { display: flex; align-items: center; gap: 7px; padding: 9px 13px;
              border-left: 1px solid var(--line); color: var(--dim);
              font: 12.5px var(--mono); white-space: nowrap; }
  #strip .s:first-child { border-left: 0; }
  #strip .s b { color: var(--ink); font-weight: 600; }
  #strip .s.hot { color: var(--amber); } #strip .s.hot b { color: var(--amber); }
  #strip .s.bad { color: var(--red); } #strip .s.bad b { color: var(--red); }
  #strip.vuoto { display: none; }

  #tip {
    position: absolute; pointer-events: none; opacity: 0; transition: opacity .09s;
    background: #0a0f16f7; border: 1px solid var(--line2); border-radius: 9px;
    box-shadow: 0 10px 28px #000b; padding: 9px 12px; font-size: 12.5px;
    max-width: 260px; line-height: 1.5;
  }
  #tip.on { opacity: 1; }
  #tip .h { display: flex; align-items: center; gap: 7px; font-weight: 650;
            margin-bottom: 3px; }
  #tip .m { font: 10.5px var(--mono); color: var(--faint); letter-spacing: .04em; }
  #hint { position: absolute; right: 14px; bottom: 12px; font: 10px var(--mono);
          color: #ffffff1f; pointer-events: none; }

  /* ---------------------------------------------------------------- colonna --- */

  /* La colonna delle card. Si chiama `.pannello` e non piu' `aside` da quando
     l'elemento `aside` e' la barra laterale: due cose diverse non possono avere lo
     stesso selettore. */
  .pannello { border-left: 1px solid var(--line); background: var(--bg2); padding: 11px;
              overflow-y: auto; display: flex; flex-direction: column; gap: 11px;
              min-height: 0; }
  .pannello::-webkit-scrollbar { width: 9px; }
  .pannello::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; }

  .card { background: linear-gradient(180deg, var(--bg3), var(--bg2));
          border: 1px solid var(--line); border-radius: var(--r); padding: 13px; }
  .card > h2 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
    font: 650 10.5px var(--sans); text-transform: uppercase; letter-spacing: .14em;
    color: var(--dim);
  }
  /* Il quadratino prima del titolo: e' il segno che nel riferimento marca ogni
     inizio di blocco, e costa una pseudo-classe invece di un'icona in piu'. */
  .card > h2::before {
    content: ""; width: 5px; height: 5px; background: var(--line2); flex: none;
  }
  .card > h2 .i { color: var(--faint); }
  .card > h2 .n { margin-left: auto; font: 11px var(--mono); color: var(--faint);
                  letter-spacing: 0; text-transform: none; }

  /* --- riquadri: numero grande, unita' piccola, etichetta sotto. Sostituiscono le
         righe "etichetta ... valore", che erano una tabella travestita. --- */
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .tiles.due { grid-template-columns: repeat(2, 1fr); }
  .tile { background: #ffffff06; border: 1px solid var(--line); border-radius: 8px;
          padding: 9px 10px; }
  .tile .top { display: flex; align-items: center; gap: 6px; color: var(--faint);
               font: 650 9.5px var(--sans); letter-spacing: .1em;
               text-transform: uppercase; margin-bottom: 5px; }
  .tile .top .i { width: 13px; height: 13px; }
  .tile .val { font: 650 19px/1 var(--mono); font-variant-numeric: tabular-nums;
               letter-spacing: -.01em; }
  .tile .val u { font: 400 11px var(--mono); color: var(--dim); text-decoration: none;
                 margin-left: 3px; }
  .tile.hot { border-color: #4a3a1a; background: var(--amber-soft); }
  .tile.hot .val { color: var(--amber); }
  .tile.bad { border-color: #4d2523; background: var(--red-soft); }
  .tile.bad .val { color: var(--red); }

  /* --- la rosa dei venti: un quadrante con la lancetta. "16 kt ESE" e' un numero da
         decifrare, una lancetta si guarda. --- */
  .meteo-top { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
  .rosa { width: 96px; height: 96px; flex: none; }
  .rosa .ring { fill: #ffffff05; stroke: var(--line2); stroke-width: 1; }
  .rosa .tick { stroke: var(--line2); stroke-width: 1; }
  .rosa .tick.card { stroke: var(--faint); }
  .rosa .card-label { fill: var(--faint); font: 8px var(--mono); text-anchor: middle; }
  .rosa .needle { fill: var(--blue); }
  .rosa .needle.hot { fill: var(--amber); }
  .rosa .kt { fill: var(--ink); font: 650 17px var(--mono); text-anchor: middle; }
  .rosa .kt-u { fill: var(--faint); font: 8.5px var(--mono); text-anchor: middle; }
  .meteo-side { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  .quota { display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono);
           color: var(--dim); }
  .quota em { font-style: normal; color: var(--faint); min-width: 46px;
              font-size: 10px; letter-spacing: .06em; }
  .quota b { color: var(--ink); font-weight: 600; }
  .quota .g { flex: 1; height: 3px; background: #ffffff10; border-radius: 2px;
              overflow: hidden; }
  .quota .g div { height: 100%; background: var(--blue); border-radius: 2px; }
  .cielo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
  .cielo .i { color: var(--dim); }

  /* --- il controllo: barra piena con i conteggi dentro --- */
  .split { display: flex; height: 30px; border-radius: 8px; overflow: hidden;
           border: 1px solid var(--line); margin-bottom: 11px; }
  .split div { display: flex; align-items: center; justify-content: center; gap: 6px;
               font: 650 12px var(--mono); transition: flex-basis .45s ease; }
  .split .b { background: linear-gradient(180deg, #35659f, #274c78); color: #e6f0ff; }
  .split .r2 { background: linear-gradient(180deg, #a2463f, #7c322c); color: #ffe8e6; }
  .split .i { width: 13px; height: 13px; }

  .lato { display: flex; align-items: center; gap: 9px; padding: 7px 0;
          border-top: 1px solid var(--line); }
  .lato:first-of-type { border-top: 0; }
  .lato .nome { font: 600 12.5px var(--sans); min-width: 58px; }
  .lato.blue .nome { color: var(--blue); } .lato.red .nome { color: var(--red); }
  .lato .cifre { margin-left: auto; font: 11.5px var(--mono); color: var(--dim);
                 white-space: nowrap; }
  .lato .cifre b { color: var(--ink); font-weight: 600; }
  .cap { margin-top: 5px; }
  .cap .g { height: 4px; background: #ffffff10; border-radius: 2px; overflow: hidden; }
  .cap .g div { height: 100%; border-radius: 2px; }
  .cap.blue .g div { background: var(--blue); } .cap.red .g div { background: var(--red); }
  .cap.pieno .g div { background: var(--amber); }
  .cap .txt { display: flex; justify-content: space-between; font: 10px var(--mono);
              color: var(--faint); margin-top: 3px; }

  /* --- piloti --- */
  .pilot { display: flex; align-items: center; gap: 9px; padding: 7px 0;
           border-top: 1px solid var(--line); }
  .pilot:first-child { border-top: 0; }
  .pilot .av { width: 26px; height: 26px; border-radius: 7px; flex: none;
               display: grid; place-items: center; font: 650 11px var(--sans);
               background: var(--bg4); color: var(--dim); }
  .pilot.side2 .av { background: #24406b; color: #bcd6ff; }
  .pilot.side1 .av { background: #6b2a26; color: #ffcfcb; }
  .pilot .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; font-size: 12.5px; }
  .pilot .ping { font: 10.5px var(--mono); color: var(--faint); }

  /* --- dettaglio del punto --- */
  .tag { display: inline-flex; align-items: center; gap: 5px; font: 600 10px var(--mono);
         letter-spacing: .04em; padding: 3px 8px; border-radius: 5px; margin: 0 4px 4px 0;
         border: 1px solid var(--line2); color: var(--dim); }
  .tag .i { width: 11px; height: 11px; }
  .tag.b { color: #b6d3ff; border-color: #2f5288; background: var(--blue-soft); }
  .tag.r { color: #ffbdb8; border-color: #74352f; background: var(--red-soft); }
  .tag.w { color: var(--amber); border-color: #4a3a1a; background: var(--amber-soft); }
  .obj { display: flex; align-items: center; gap: 9px; padding: 5px 0;
         border-top: 1px solid var(--line); font-size: 12.5px; }
  .obj .i { color: var(--dim); }
  .obj .nome { flex: 1; min-width: 0; }
  .obj .st { font: 10px var(--mono); color: var(--green); letter-spacing: .06em; }
  .obj.dead { color: var(--faint); }
  .obj.dead .i { color: var(--faint); }
  .obj.dead .nome { text-decoration: line-through; }
  .obj.dead .st { color: var(--red); }

  /* --- attivita' --- */
  .tabs { display: flex; gap: 3px; margin-left: auto; }
  .tabs button { font: 650 9.5px var(--sans); letter-spacing: .12em;
                 text-transform: uppercase; color: var(--faint); background: none;
                 border: 1px solid transparent; border-radius: 6px; padding: 4px 9px;
                 cursor: pointer; }
  .tabs button.on { color: var(--ink); background: var(--bg4); border-color: var(--line2); }
  ul { list-style: none; margin: 0; padding: 0; }
  #feed li, #history li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
                          border-top: 1px solid var(--line); font-size: 12.5px; }
  #feed li:first-child, #history li:first-child { border-top: 0; }
  #feed .i, #history .i { color: var(--faint); }
  #feed .t { font: 10.5px var(--mono); color: var(--faint); flex: none; min-width: 40px;
             text-align: right; }
  #feed .txt, #history .txt { flex: 1; min-width: 0; overflow: hidden;
                              text-overflow: ellipsis; white-space: nowrap; }
  .empty { color: var(--faint); font-style: italic; font-size: 12px; padding: 5px 0; }
  .dim { color: var(--dim); } .faint { color: var(--faint); }

  details { border-top: 1px solid var(--line); padding-top: 10px; }
  summary { cursor: pointer; font: 650 10.5px var(--sans); letter-spacing: .14em;
            text-transform: uppercase; color: var(--dim); }
  summary:hover { color: var(--ink); }
  .leg { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px;
         color: var(--dim); }
  .leg svg.g { width: 20px; height: 20px; flex: none; fill: var(--ink); stroke: none; }

/* ==========================================================================
   La pagina del SERVER: una griglia di card invece di mappa piu' colonna.
   Sta qui e non in server.html perche' il linguaggio visivo deve avere un posto
   solo - la stessa ragione per cui questo file esiste.
   ========================================================================== */

/* `body.lista { display: block }` stava qui, ed e' stato un difetto vero: scritto
   quando questa pagina era un elenco sotto una barra in cima, arrivava DOPO `body.app`
   e ne annullava la griglia. Risultato, la barra laterale finiva in cima alla pagina
   come un blocco qualunque. La pagina adesso ha lo stesso telaio della mappa, quindi
   l'impianto lo decide `.app` e qui resta solo cio' che riguarda le card. */

main.griglia {
  position: static; background: none;
  /* Scorre QUI dentro e non nel body: `.schermo` e' alto quanto lo schermo e nasconde
     il traboccamento, quindi senza questa riga il fondo della pagina era irraggiungibile. */
  overflow-y: auto; min-height: 0;
  max-width: 1240px; margin: 0 auto; padding: 16px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; align-items: start; align-content: start;
}
main.griglia .card.sp2 { grid-column: span 2; }
@media (max-width: 1080px) {
  main.griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  main.griglia { grid-template-columns: 1fr; }
  main.griglia .card.sp2 { grid-column: auto; }
}

.nota { color: var(--faint); font-size: 11.5px; line-height: 1.45; margin-top: 11px; }
.nota b { color: var(--dim); font-weight: 600; }

/* --- controlli. Sono l'unica cosa in tutto il pannello che CAMBIA lo stato del
       server, e si vedono: bordo piu' chiaro, e il rosso solo dove serve. --- */

button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 12px var(--sans); color: var(--ink); border-radius: 7px;
  background: linear-gradient(180deg, var(--bg4), #131b26);
  border: 1px solid var(--line2); padding: 8px 14px; cursor: pointer;
}
button:hover { border-color: #3b4c60; }
button:active { transform: translateY(1px); }
button.larga { width: 100%; margin-top: 12px; }
button.small { font-size: 11px; padding: 5px 9px; }
/* I pulsanti dei crediti blu nella scheda Economia: importi fissi, decisi dal motore. */
.crediti-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
                 margin-top: 10px; }
.crediti-admin #crediti-pulsanti { display: flex; flex-wrap: wrap; gap: 6px; }
.crediti-admin #crediti-esito { font-size: 11px; }
button.danger { color: #ffbdb8; border-color: #5c2c28;
                background: linear-gradient(180deg, #2b1a18, #1d1211); }
button.danger:hover { border-color: #82403a; }
button .i { width: 13px; height: 13px; }

.campo { display: flex; gap: 8px; }
input[type=text] {
  flex: 1; min-width: 0; font: 12.5px var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line2); border-radius: 7px;
  padding: 8px 11px;
}
input[type=text]:focus { outline: none; border-color: #3d6199; }
input[type=text]::placeholder { color: var(--faint); }

#esito { margin-top: 11px; font: 11.5px var(--mono); color: var(--dim);
         min-height: 1.4em; }
#esito.ko { color: var(--red); }
#esito.ok { color: var(--green); }

  /* Il diario del guardiano, nella pagina Server. In monospazio perche' ogni riga
     comincia con la data e le date incolonnate si leggono, sfalsate no. */
  .riga-diario {
    font: 10px/1.5 var(--mono); color: var(--dim);
    padding: 2px 0; border-top: 1px solid var(--line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Il fondo cartografico, sotto tutto. Smorzato di proposito: e' un riferimento per
     capire dove si sta guardando, non il contenuto - il contenuto sono le zone e i
     punti, e devono restare leggibili sopra.

     La classe e' `carta` e non `tiles` perche' `tiles` e' gia' la griglia dei riquadri
     del meteo: il gruppo SVG del fondo si prendeva `display: grid` senza che servisse a
     niente e senza che si rompesse niente, che e' il modo in cui queste cose restano.

     `saturate` sotto l'uno: il satellitare vero e' molto piu' colorato di una mappa
     schematica, e a piena saturazione il verde dei boschi litigava con il blu e il
     rosso delle coalizioni. */
  .carta image { opacity: var(--carta-luce); filter: saturate(.8); }

/* ==========================================================================
   La dashboard della pagina Server: il colpo d'occhio in cima, il diario, e
   cio' che e' in campo adesso. Richiesta dell'utente: «piu' info come eventi e
   messaggi, e la dashboard piu' bella».
   ========================================================================== */

/* Le card di una stessa riga finiscono allo stesso bordo: sfalsate sembravano messe a caso. */
main.griglia { max-width: 1480px; grid-auto-flow: row dense; align-items: stretch; }
main.griglia .pila > .card:last-child { flex: 1; }
main.griglia .card.sp3 { grid-column: 1 / -1; }
/* La colonna accanto al diario: piu' card una sotto l'altra. Una pila e non righe di
   griglia, perche' con le righe la card piu' alta decide l'altezza di tutte e lascia
   buchi sotto le altre. */
main.griglia .pila { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Il colpo d'occhio: sei numeri, ognuno con un filo di colore a sinistra che dice di
   che cosa parla. Non sono card dentro una card: sono celle di una riga sola. */
.kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
       padding: 0; }
@media (max-width: 1080px) { .kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi .k { position: relative; padding: 14px 16px 13px; border-left: 1px solid var(--line);
          min-width: 0; }
.kpi .k:first-child { border-left: 0; }
.kpi .k::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
                  width: 2px; background: var(--line2); }
.kpi .k.ok::before { background: var(--green); }
.kpi .k.blu::before { background: var(--blue); }
.kpi .k.hot::before { background: var(--amber); }
.kpi .k.bad::before { background: var(--red); }
.kpi .lab { display: flex; align-items: center; gap: 6px; color: var(--faint);
            font: 650 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.kpi .lab .i { width: 13px; height: 13px; }
.kpi .num { font: 650 24px/1.15 var(--mono); font-variant-numeric: tabular-nums;
            margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .num u { font: 400 12px var(--mono); color: var(--dim); text-decoration: none;
              margin-left: 4px; }
.kpi .k.ok .num { color: var(--green); } .kpi .k.bad .num { color: var(--red); }
.kpi .k.hot .num { color: var(--amber); }
.kpi .sub { font: 11px var(--mono); color: var(--faint); margin-top: 3px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
            margin-top: 10px; background: #ffffff10; }
.kpi .bar .b { background: var(--blue); } .kpi .bar .r { background: var(--red); }

/* Il diario. Ogni riga: l'ora, il tipo, il testo, il lato. L'ora in monospazio perche'
   incolonnata si legge; il tipo come pastiglia colorata perche' e' cio' su cui si
   scorre con l'occhio per trovare "i messaggi" o "i combattimenti". */
.diario-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                margin-bottom: 10px; }
.diario-barra .tabs { margin-left: 0; flex-wrap: wrap; }
.diario-barra .tabs button .c { color: var(--faint); margin-left: 5px; letter-spacing: 0; }
.diario-barra input[type=text] { max-width: 220px; padding: 5px 10px; font-size: 12px; }
.diario { max-height: 640px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.diario::-webkit-scrollbar { width: 8px; }
.diario::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.diario li { display: grid; grid-template-columns: 40px 104px minmax(0, 1fr) 8px; gap: 10px;
             align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line);
             font-size: 12.5px; }
.diario li:first-child { border-top: 0; }
.diario .ora { font: 10.5px var(--mono); color: var(--faint); text-align: right; }
.diario .txt { min-width: 0; overflow-wrap: anywhere; }
.lato-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; flex: none;
                    background: transparent; }
.lato-dot.blue { background: var(--blue); }
.lato-dot.red { background: var(--red); }
.diario .giorno { display: block; grid-template-columns: none; padding: 9px 0 4px;
                  font: 650 9.5px var(--sans); letter-spacing: .14em;
                  text-transform: uppercase; color: var(--faint); border-top: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; justify-self: start;
        font: 650 9px var(--sans); letter-spacing: .1em; text-transform: uppercase;
        padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line2);
        color: var(--dim); white-space: nowrap; }
.pill .i { width: 11px; height: 11px; }
.pill.combat { color: #ffbdb8; border-color: #74352f; background: var(--red-soft); }
.pill.player { color: #b6d3ff; border-color: #2f5288; background: var(--blue-soft); }
.pill.msg    { color: #c9f0d2; border-color: #2c5a37; background: #57c46f14; }
.pill.ai     { color: var(--amber); border-color: #4a3a1a; background: var(--amber-soft); }
.pill.eco    { color: #e6d3ff; border-color: #4a3a6b; background: #a37cff14; }
.pill.system { color: var(--dim); }
.diario li.msg .txt { white-space: pre-line; color: var(--ink); }

/* Le liste brevi delle card: operazioni in corso, abbattimenti, libro mastro. */
.lista li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
            border-top: 1px solid var(--line); font-size: 12.5px; }
.lista li:first-child { border-top: 0; }
.lista li .i { color: var(--faint); }
.lista .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.lista .cifre { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.lista .cifre.piu { color: var(--green); } .lista .cifre.meno { color: var(--red); }
.lista .sub { display: block; font: 10.5px var(--mono); color: var(--faint);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }