:root {
  --bg: #060806;
  --text: #e8efe6;
  --muted: #93a596;
  --hairline: rgba(235, 255, 255, 0.16);
  --mark: rgba(235, 255, 255, 0.38);
  --human: rgb(64, 196, 150);
  --backend: rgb(150, 120, 224);
  --ai: rgb(224, 138, 72);
}

@font-face {
  font-family: Menlo;
  src: url(Menlo.ttc);
}
/* display face SOLO per il titolo (self-hosted, licenza OFL) */
@font-face {
  font-family: "Space Grotesk";
  src: url(SpaceGrotesk-500.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Menlo", monospace;
  overflow: hidden;
}

#petri {
  position: fixed;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 50% 45%, #0c120d 0%, #060806 70%);
}

/* =============================================================================
   HUD — piccola scheda flottante da laboratorio, in basso a sinistra.
   Vetro stratificato: blur+saturazione del canvas dietro, velo scuro in
   diagonale, micro-griglia di punti (blueprint), grana di stampa, crop marks
   agli angoli. Tutto responsive: larghezza min(), misure clamp().
   ========================================================================== */
#hud {
  position: fixed;
  left: clamp(0.6rem, 1.6vw, 1.5rem);
  bottom: clamp(0.6rem, 1.6vw, 1.5rem);
  /* larghezza FLUIDA: segue la finestra in vw (cresce/rimpicciolisce con essa),
     con un minimo leggibile e un massimo perché resti una finestra flottante.
     Il min() esterno la tiene dentro alla viewport sui formati stretti. */
  width: min(calc(100vw - 2 * clamp(0.6rem, 1.6vw, 1.5rem)), clamp(19rem, 60vw, 34rem));
  max-height: min(60vh, 34rem);
  display: flex;
  padding: clamp(0.9rem, 1.5vw, 1.3rem);
  /* strati: micro-griglia di punti · bagliore d'angolo · velo diagonale */
  background:
    radial-gradient(circle at 1px 1px, rgba(235, 255, 255, 0.05) 0.7px, transparent 1.2px) 0 0 / 12.5px 12.5px,
    radial-gradient(130% 70% at 12% 0%, rgba(235, 255, 255, 0.055), transparent 55%),
    linear-gradient(165deg, rgba(14, 20, 16, 0.60) 0%, rgba(5, 8, 6, 0.78) 100%);
  backdrop-filter: blur(18px) saturate(150%) brightness(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.08);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(235, 255, 255, 0.05);
  user-select: none;
}

/* crop marks "+" ai quattro angoli (segni di registro, come in stampa) */
#hud::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) 8px 12px / 9px 1px,
    linear-gradient(var(--mark), var(--mark)) 12px 8px / 1px 9px,
    linear-gradient(var(--mark), var(--mark)) calc(100% - 8px) 12px / 9px 1px,
    linear-gradient(var(--mark), var(--mark)) calc(100% - 12px) 8px / 1px 9px,
    linear-gradient(var(--mark), var(--mark)) 8px calc(100% - 12px) / 9px 1px,
    linear-gradient(var(--mark), var(--mark)) 12px calc(100% - 8px) / 1px 9px,
    linear-gradient(var(--mark), var(--mark)) calc(100% - 8px) calc(100% - 12px) / 9px 1px,
    linear-gradient(var(--mark), var(--mark)) calc(100% - 12px) calc(100% - 8px) / 1px 9px;
  background-repeat: no-repeat;
}

/* grana di stampa (turbolenza SVG) sopra a tutto, impercettibile ma viva */
#hud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* il contenuto scorre DENTRO la cornice (texture e marks restano fermi) */
.riga {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.65rem, 1vw, 0.95rem);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.riga::-webkit-scrollbar { display: none; }

/* testata: titolo in display face + indice tra parentesi (da poster) */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  min-width: 0;
}
#hud h1 {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  font-size: clamp(1.58rem, 2.88vw, 2.23rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
.idx {
  font-size: clamp(0.5rem, 0.78vw, 0.6rem);
  letter-spacing: 0.16em;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 0.35em 0.55em;
  border-radius: 1px;
  white-space: nowrap;
  flex: 0 0 auto;
}

#hud .sub {
  font-size: clamp(0.58rem, 0.9vw, 0.7rem);
  color: var(--muted);
  line-height: 1.5;
}

/* etichetta di sezione: numero + nome + hairline che sfuma (da blueprint) */
.sec {
  display: flex;
  align-items: center;
  gap: 0.9em;
  font-size: clamp(0.5rem, 0.78vw, 0.6rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: clamp(0.2rem, 0.4vw, 0.35rem);
}
.sec span { color: var(--text); }
.sec::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

.legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.8vw, 0.7rem);
}
.legend li {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  min-width: 0;
}
.legend b {
  font-weight: 400;
  font-size: clamp(0.6rem, 0.95vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.legend div {
  font-size: clamp(0.58rem, 0.9vw, 0.7rem);
  color: var(--muted);
  line-height: 1.5;
}
.legend em {
  display: block;
  font-style: normal;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 0.35em;
  font-size: clamp(0.58rem, 0.9vw, 0.7rem);
}

/* campione colore: quadratino CAVO (bordo colorato, riempimento tenue) */
.dot {
  width: clamp(7px, 0.7vw, 9px);
  height: clamp(7px, 0.7vw, 9px);
  border-radius: 1px;
  margin-top: 0.3em;
  flex: 0 0 auto;
  border: 1px solid;
}
.dot.human   { border-color: var(--human);   background: rgba(64, 196, 150, 0.22); }
.dot.backend { border-color: var(--backend); background: rgba(150, 120, 224, 0.22); }
.dot.ai      { border-color: var(--ai);      background: rgba(224, 138, 72, 0.22); }
/* il vetrino/agar: stesso ghiaccio traslucido del canvas */
.dot.dish    { border-color: rgba(235, 255, 255, 0.65); background: rgba(235, 255, 255, 0.14); }

.meta {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: clamp(0.58rem, 0.9vw, 0.7rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.src {
  font-size: clamp(0.52rem, 0.8vw, 0.62rem);
  color: var(--muted);
  line-height: 1.7;
}

/* link silenziosi: nessun blu, sottolineatura hairline */
#hud a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
  text-underline-offset: 2px;
}
#hud a:hover { text-decoration-color: var(--muted); }

/* =============================================================================
   SCHERMO ORIZZONTALE — stessa scheda, stessi elementi, disposti in ORIZZONTALE:
   barra bassa a tutta larghezza, il vetrino resta scoperto. Le etichette di
   sezione stanno SOPRA la propria colonna (griglia con aree nominate).
   ========================================================================== */
@media (orientation: landscape) and (min-width: 52rem) {
  #hud {
    left: clamp(0.6rem, 1.6vw, 1.5rem);
    right: clamp(0.6rem, 1.6vw, 1.5rem);
    width: auto;
    /* tetto di larghezza: la barra resta CONTENUTA (non full-bleed), ancorata a
       sinistra; su schermi più stretti si ferma comunque al margine destro */
    max-width: 62rem;
    max-height: min(42vh, 17rem);
  }
  .riga {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "mast s1  s2  s3"
      "sub  leg met src";
    column-gap: clamp(1rem, 2.4vw, 2.4rem);
    row-gap: clamp(0.45rem, 0.8vw, 0.7rem);
    align-items: start;
  }
  .riga > :nth-child(1) { grid-area: mast; }  /* masthead */
  .riga > :nth-child(2) { grid-area: sub; }   /* sub: sotto il titolo */
  .riga > :nth-child(3) { grid-area: s1; }
  .riga > :nth-child(4) { grid-area: leg; }
  .riga > :nth-child(5) { grid-area: s2; }
  .riga > :nth-child(6) { grid-area: met; }
  .riga > :nth-child(7) { grid-area: s3; }
  .riga > :nth-child(8) { grid-area: src; }

  /* titolo in colonna: wordmark sopra, indice sotto */
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6em;
  }
  .sec { margin-top: 0; }

  /* le 4 voci di legenda in due colonne → la barra resta bassa */
  .legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(0.8rem, 1.6vw, 1.4rem);
    row-gap: clamp(0.5rem, 0.8vw, 0.7rem);
  }
}