:root {
  --sfondo: #070d18;
  --pannello: #0b1524;
  --bordo: rgba(255, 255, 255, 0.14);
  --testo: #e8f1fb;
  --testo-secondario: #8ea4bb;
  --accento: #38bdf8;
  --allerta: #fb923c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sfondo);
  color: var(--testo);
  font-family: "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
  /* La scena viene catturata da x11grab: niente selezione, niente cursore. */
  cursor: none;
  user-select: none;
}

#scena { position: relative; width: 100vw; height: 100vh; }

#mappa {
  position: absolute;
  inset: 0 30% 0 0;
  background: var(--sfondo);
}

/* Leaflet aggiunge i propri controlli e l'attribuzione: nella scena non servono,
   l'attribuzione di licenza e' quella permanente in basso. */
.leaflet-control-container, .leaflet-control-attribution { display: none !important; }

/* Il pane del radar viene ridipinto in canvas; il filtro serve solo a dargli
   un minimo di brillantezza sul fondale scuro. */
.leaflet-radar-pane { filter: saturate(1.15); }

#pannello {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 30%;
  padding: 1.6vh 1.4vw;
  background: var(--pannello);
  border-left: 1px solid var(--bordo);
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
}

#testata h1 {
  margin: 0;
  font-size: 1.6vw;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#stato {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5vh;
  font-size: 1.05vw;
  color: var(--testo-secondario);
}

/* Data e ora stanno insieme a destra, sulla stessa riga di DIRETTA. Una riga in
   piu' in testata toglierebbe spazio alle citta' proprio nel caso peggiore —
   Lombardia, dodici righe gia' rimpicciolite a 0,68 — perche' il pannello ha
   altezza fissa e #citta distribuisce le righe nello spazio che avanza. */
#adesso { display: flex; align-items: baseline; gap: 0.6vw; }
#data { color: var(--testo-secondario); }
/* Cifre a larghezza fissa: senza, l'orario balla a ogni cambio di minuto. */
#orologio { font-variant-numeric: tabular-nums; }

#live { color: #ef4444; font-weight: 600; letter-spacing: 0.08em; }
#live i {
  display: inline-block;
  width: 0.6vw; height: 0.6vw;
  margin-right: 0.4vw;
  border-radius: 50%;
  background: #ef4444;
}

#regione {
  font-size: 1.15vw;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
  padding-bottom: 0.5vh;
  border-bottom: 1px solid rgba(56, 189, 248, 0.28);
}

/* Il numero di righe varia da 1 (Valle d'Aosta) a 12 (Lombardia) e l'altezza
   del pannello e' fissa: la scala viene impostata da app.js in base a quante
   citta' ha la regione in scena. */
#citta {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#citta li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.7vh 0.8vw;
  border-radius: 0.6vw;
}

#citta li.evidenza {
  background: rgba(56, 189, 248, 0.12);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.nome { font-size: calc(1.35vw * var(--scala, 1)); font-weight: 500; }
.condizione { font-size: calc(0.95vw * var(--scala, 1)); color: var(--testo-secondario); }
.temp { font-size: calc(1.9vw * var(--scala, 1)); font-weight: 600; text-align: right; }
#citta li.evidenza .temp { color: var(--accento); }

#legenda .titolo { font-size: 0.9vw; color: var(--testo-secondario); }
#scala {
  display: flex;
  height: 0.9vh;
  margin: 0.4vh 0;
  border-radius: 2px;
  overflow: hidden;
}
#scala span { flex: 1; }
#soglie {
  font-size: 0.8vw;
  color: var(--testo-secondario);
  font-variant-numeric: tabular-nums;
}
.estremi {
  display: flex;
  justify-content: space-between;
  font-size: 0.8vw;
  color: var(--testo-secondario);
}

#freschezza {
  display: flex;
  justify-content: space-between;
  font-size: 0.85vw;
  color: var(--testo-secondario);
}
#freschezza .vecchio { color: var(--allerta); }

/* Stesso trattamento di #eta-radar quando invecchia: dice che non sappiamo,
   senza gridare. */
#eta-allerte { color: var(--allerta); }

#allerta-regione {
  margin: 0.4vh 0 0.8vh;
  font-size: 1.7vh;
  font-weight: 700;
  color: #ef4444;
  letter-spacing: 0.03em;
}

#allerta-regione.arancione { color: #f97316; }

/* Tutto cio' che sta sopra la mappa ha bisogno di uno z-index esplicito.
   I pane di Leaflet vivono a 200 (fondale), 300 (radar) e 400 (marcatore) nel
   contesto di impilamento della radice, perche' #mappa e' posizionato ma con
   z-index auto e quindi non ne crea uno proprio. Un fratello lasciato ad auto
   viene percio' dipinto prima di loro, qualunque sia l'ordine nel DOM: nel
   Chromium del container attribuzione e timeline non comparivano affatto,
   mentre nel browser di sviluppo si vedevano — la combinazione peggiore,
   perche' il difetto non si manifesta dove lo si cerca. Vale soprattutto per
   l'avviso, che e' l'unico modo che la scena ha di dire di essere rotta, e per
   l'attribuzione, che e' un obbligo di licenza. */
#avviso, #timeline, #attribuzione, #allerta-nazionale { z-index: 500; }

/* L'avviso occupa la fascia piu' alta dell'area mappa, che e' l'unica parte
   dell'inquadratura dove non c'e' Italia: Alpi straniere e mare. Non scorre e
   non lampeggia — il movimento e' l'unica cosa costosa in H.264, e questa
   scena e' altrimenti quasi immobile. */
#allerta-nazionale {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  padding: 0.9vh 1.2vw;
  background: rgba(10, 6, 8, 0.95);
  border-bottom: 2px solid #ef4444;
  color: #ffece8;
  font-size: 2.1vh;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#allerta-nazionale.arancione { border-bottom-color: #f97316; }

#avviso {
  position: absolute;
  top: 46%;
  left: 35%;
  transform: translateX(-50%);
  padding: 1.4vh 2vw;
  border-radius: 0.8vw;
  background: rgba(124, 45, 18, 0.92);
  border: 1px solid var(--allerta);
  color: #fed7aa;
  text-align: center;
  font-size: 1.3vw;
  font-weight: 600;
}
#avviso small { display: block; margin-top: 0.4vh; font-size: 0.95vw; font-weight: 400; }

#attribuzione {
  position: absolute;
  left: 0;
  right: 30%;
  bottom: 0;
  padding: 0.7vh 1vw;
  /* 0,9vw e non 1vw: con l'''aggiunta dei bollettini alle fonti la riga andava
     a capo e la seconda riga invadeva la timeline. E''' un obbligo di licenza,
     quindi non si puo''' accorciare a piacere: si riduce il corpo. Se un giorno
     si aggiunge un'''altra fonte, va verificato in cattura che stia ancora su
     una riga sola — nel browser di sviluppo il difetto non si vedeva. */
  font-size: 0.9vw;
  line-height: 1.3;
  color: rgba(205, 220, 236, 0.95);
  /* Il testo attraversa sia mare scuro sia terra chiara: senza una fascia di
     appoggio resta leggibile solo a tratti. L'attribuzione e' un obbligo di
     licenza (radar CC BY-SA, dati meteo CC BY 4.0), quindi deve essere
     leggibile davvero, non solo presente nel DOM: a 0.78vw grigio su nero
     era invisibile su una TV guardata da lontano. */
  background: linear-gradient(to top, rgba(5, 10, 20, 0.80), rgba(5, 10, 20, 0));
}

/* Timeline dell'animazione radar: dice a che istante appartiene il fotogramma
   in onda. Senza, la scena mostrerebbe la pioggia di cinquanta minuti fa con
   l'orologio che segna l'ora corrente — una bugia. Sta sopra l'attribuzione,
   che ha una fascia di appoggio sua. */
#timeline {
  position: absolute;
  left: 1vw;
  right: calc(30% + 1vw);
  bottom: 3.4vh;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

#tacche { display: flex; flex: 1; gap: 0.35vw; }

#tacche span {
  flex: 1;
  height: 0.7vh;
  border-radius: 1px;
  background: rgba(232, 241, 251, 0.3);
  box-shadow: 0 1px 2px rgba(5, 10, 20, 0.8);
}

/* Fotogramma che il servizio non ha dato: la tacca resta spenta. Il degrado si
   vede senza essere un allarme. */
#tacche span.mancante { background: rgba(232, 241, 251, 0.08); }

#tacche span.onda { background: var(--accento); }

#istante {
  font-size: 1vw;
  /* Cifre a larghezza fissa: senza, l'orario balla a ogni cambio di minuto. */
  font-variant-numeric: tabular-nums;
  color: rgba(205, 220, 236, 0.95);
  text-shadow: 0 1px 2px rgba(5, 10, 20, 0.9);
  min-width: 3.2vw;
  text-align: right;
}