/* MDEANGELIS: il sito è una sessione di terminale.
   Solo HTML e CSS, nessun JavaScript. Palette presa dal monogramma:
   ardesia, rame, grigio, perla. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --fondo: #14181e;
  --pannello: #1a1f26;
  --pannello-alto: #232a33;
  --bordo: #2c343e;
  --linee: #4c5560;
  --testo: #d8dcdf;
  --perla: #eef1f3;
  --tenue: #9aa3ab;
  --commento: #86909a;
  --rame: #d0865a;
  --rame-chiaro: #e9a57c;
  --grigio: #707878;
  --salvia: #a9c4ab;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --larghezza: 76rem;
  --barra: 2.75rem;
  --dopo: 2.75s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--fondo);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.7;
  font-variant-ligatures: contextual;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgb(208 134 90 / 0.25);
}

/* Righe di scansione appena percettibili, come su un vecchio monitor */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.016) 0 1px, transparent 1px 3px);
}

::selection {
  background: var(--rame);
  color: var(--fondo);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--rame);
  outline-offset: 3px;
}

.visivamente-nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 70;
  padding: 0.6rem 1rem;
  background: var(--rame);
  color: var(--fondo);
  font-weight: 700;
  text-decoration: none;
}

.salta:focus {
  top: 0.5rem;
}

/* ---------- Barra in alto, come la status line di tmux ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--barra);
  border-bottom: 1px solid var(--bordo);
  background: rgb(26 31 38 / 0.94);
  font-size: 0.8125rem;
}

.barra-casa {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.9rem 0 0.75rem;
  background: var(--rame);
  color: var(--fondo);
  font-weight: 700;
  text-decoration: none;
}

.barra-casa img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
}

.barra nav,
.barra ul {
  display: flex;
  align-items: stretch;
}

.barra ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.85rem;
  color: var(--testo);
  text-decoration: none;
}

.barra nav a:hover {
  background: var(--pannello-alto);
  color: var(--rame-chiaro);
}

.barra .n {
  color: var(--tenue);
}

.barra-lingua {
  border-left: 1px solid var(--bordo);
  font-weight: 700;
  color: var(--rame) !important;
}

/* ---------- Pagina ---------- */

main,
.stato {
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.cmd {
  margin: 2.25rem 0 0.9rem;
  color: var(--perla);
  overflow-wrap: anywhere;
}

.ps1 {
  color: var(--rame);
  font-weight: 700;
}

.ps-sep {
  color: var(--tenue);
}

.cwd {
  color: var(--salvia);
  font-weight: 700;
}

.commento {
  color: var(--commento);
}

.cursore {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: var(--perla);
}

/* ---------- Eroe: nome + neofetch ---------- */

.eroe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--barra));
  padding: 2.5rem 0 3rem;
}

/* Il nome come nel logo: MDE pieno, ANGELIS sottile, più il cursore */
.marchio {
  display: flex;
  align-items: baseline;
  margin: 0 0 0.5rem;
  font-size: min(8.5rem, calc((100vw - 2 * clamp(1rem, 4vw, 3rem)) / 6.3));
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--perla);
  text-shadow: 0 0 0.35em rgb(208 134 90 / 0.18);
}

.m-forte {
  font-weight: 800;
}

.m-leggero {
  font-weight: 200;
}

.m-cursore {
  display: inline-block;
  width: 0.5em;
  height: 0.78em;
  margin-left: 0.12em;
  background: var(--rame);
  box-shadow: 0 0 0.4em rgb(208 134 90 / 0.45);
}

.neofetch {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}

.mono {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mono path,
.sipario-mono path {
  fill-rule: evenodd;
  stroke-width: 3;
  stroke-linejoin: round;
}

.t-rame { fill: var(--rame); stroke: var(--rame); }
.t-grigio { fill: var(--grigio); stroke: var(--grigio); }
.t-chiaro { fill: #d8dcdf; stroke: #d8dcdf; }

.neo-info ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.neo-utente {
  font-weight: 700;
  color: var(--perla);
}

.k {
  color: var(--rame);
  font-weight: 700;
}

.neo-riga {
  color: var(--tenue);
}

.neo-info li {
  display: flex;
  flex-wrap: wrap;
}

.dp {
  color: var(--tenue);
  white-space: pre;
}

.ruota {
  display: inline-block;
  height: 1.7em;
  overflow: hidden;
  vertical-align: top;
}

.ruota-in {
  display: flex;
  flex-direction: column;
}

.ruota-in span {
  display: block;
  height: 1.7em;
  color: var(--perla);
  font-weight: 700;
}

.ruota-in span::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 0.2em;
  vertical-align: -0.2em;
  background: var(--rame);
}

.neo-colori {
  display: flex;
  margin-top: 0.9rem;
}

.neo-colori i {
  width: 2.25em;
  height: 1.2em;
}

.neo-colori i:nth-child(1) { background: #232a33; }
.neo-colori i:nth-child(2) { background: var(--rame); }
.neo-colori i:nth-child(3) { background: var(--grigio); }
.neo-colori i:nth-child(4) { background: #d8dcdf; }
.neo-colori i:nth-child(5) { background: var(--salvia); }
.neo-colori i:nth-child(6) { background: var(--rame-chiaro); }
.neo-colori i:nth-child(7) { background: #4c5560; }
.neo-colori i:nth-child(8) { background: var(--perla); }

.intro {
  max-width: 64ch;
  margin-top: 2rem;
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.bottone {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid var(--rame);
  border-radius: 3px;
  background: var(--rame);
  color: var(--fondo);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.bottone:hover {
  background: transparent;
  color: var(--rame-chiaro);
}

.bottone-linea {
  border-color: var(--linee);
  background: transparent;
  color: var(--perla);
}

.bottone-linea:hover {
  border-color: var(--rame);
}

/* ---------- Sezioni ---------- */

.blocco {
  padding-top: clamp(4rem, 10vw, 7rem);
}

.titolo {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--perla);
}

.hash {
  font-weight: 300;
  color: var(--rame);
}

/* Chi sono: bat chi_sono.md + finestra con la foto */

.chi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.bat {
  --gut: 2.25rem;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}

.bat-testa {
  padding: 0.45rem 0 0.45rem calc(var(--gut) + 1.25rem);
  border-bottom: 1px solid var(--bordo);
  background: linear-gradient(var(--bordo), var(--bordo)) calc(var(--gut) + 0.6rem) 0 / 1px 100% no-repeat;
  color: var(--tenue);
}

.bat-testa b {
  color: var(--perla);
}

.bat-corpo {
  padding: 0.6rem 0;
  counter-reset: riga;
  background: linear-gradient(var(--bordo), var(--bordo)) calc(var(--gut) + 0.6rem) 0 / 1px 100% no-repeat;
}

.bat-corpo > p {
  position: relative;
  min-height: 1.7em;
  padding: 0.05rem 0 0.05rem calc(var(--gut) + 1.25rem);
  counter-increment: riga;
}

.bat-corpo > p::before {
  content: counter(riga);
  position: absolute;
  top: 0.05rem;
  left: 0;
  width: var(--gut);
  text-align: right;
  color: var(--linee);
  font-size: 0.9375rem;
  font-weight: 400;
  font-style: normal;
}

.bat-corpo > p + p:not(.md-code, .md-vuota) {
  margin-top: 0.35rem;
}

.md-quote {
  font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--perla);
}

.md-quote::before {
  top: 0.15em !important;
}

.md-seg {
  color: var(--rame);
  font-weight: 700;
}

.md-code {
  color: var(--testo);
}

.md-ind {
  padding-left: calc(var(--gut) + 1.25rem + 2ch) !important;
}

.sx-k { color: var(--rame); font-weight: 700; }
.sx-v { color: var(--perla); }
.sx-s { color: var(--salvia); }
.sx-p { color: var(--tenue); }
.sx-c { color: var(--commento); }

.finestra {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--pannello);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 0.6);
}

.fin-barra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bordo);
  font-size: 0.75rem;
  color: var(--tenue);
}

.fin-barra i,
.term-barra i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--rame);
}

.fin-barra i:nth-child(2),
.term-barra i:nth-child(2) { background: var(--grigio); }

.fin-barra i:nth-child(3),
.term-barra i:nth-child(3) { background: #d8dcdf; }

.fin-barra span {
  margin: 0 auto;
  padding-right: 2.5rem;
}

.ritratto > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fin-stato {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.75rem;
  color: var(--tenue);
}

.tag {
  color: var(--rame);
  font-weight: 700;
}

@media (hover: hover) {
  .ritratto:hover > img {
    transform: scale(1.04);
  }
}

/* Interessi: tree ~/interessi */

.tree {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.75;
}

.tree li {
  display: grid;
  grid-template-columns: auto 26ch minmax(0, 1fr);
  column-gap: 1ch;
}

.tr-pre,
.tr-cont {
  white-space: pre;
  color: var(--linee);
}

.tr-pre {
  grid-area: 1 / 1;
}

.tr-nome {
  grid-area: 1 / 2;
  color: var(--perla);
}

.tr-com {
  grid-area: 1 / 3 / span 2;
  color: var(--commento);
}

/* Continua le linee dell'albero accanto ai commenti che vanno a capo */
.tr-cont {
  grid-area: 2 / 1;
  align-self: stretch;
  overflow: hidden;
  contain: size;
  width: 8ch;
}

.tr-radice,
.tr-dir {
  display: block !important;
}

.tr-radice .tr-nome,
.tr-dir .tr-nome {
  color: var(--rame);
  font-weight: 700;
}

.tr-dir {
  margin-top: 0.35rem;
}

.tr-fine {
  display: block !important;
  margin-top: 1.1rem;
  color: var(--tenue);
}

/* Musica: equalizzatore + ls -l ~/musica */

.player {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  background: var(--pannello);
}

.eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 3.5rem;
}

.eq i {
  width: 0.5rem;
  height: 100%;
  background: linear-gradient(to top, var(--rame), var(--rame-chiaro) 70%, var(--perla));
  transform-origin: bottom;
  transform: scaleY(0.35);
}

.eq i:nth-child(3n) { transform: scaleY(0.7); }
.eq i:nth-child(4n + 1) { transform: scaleY(0.5); }
.eq i:nth-child(5n + 2) { transform: scaleY(0.9); }

.player-titolo {
  color: var(--perla);
  font-weight: 700;
}

.player + .commento {
  margin-top: 1rem;
}

.ls-totale {
  color: var(--tenue);
}

.ls {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ls-riga {
  display: grid;
  grid-template-columns: 21ch 15ch 3ch minmax(0, 1fr);
  column-gap: 1ch;
  padding: 0.3rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 2px;
  text-decoration: none;
}

.ls-perm,
.ls-freccia {
  color: var(--tenue);
}

.ls-nome {
  color: var(--salvia);
  font-weight: 700;
}

.ls-url {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--rame-chiaro);
}

.ls-riga:hover,
.ls-riga:focus-visible {
  background: var(--rame);
  outline-offset: 0;
}

.ls-riga:hover *,
.ls-riga:focus-visible * {
  color: var(--fondo);
}

/* ---------- Piede: la status line di vim ---------- */

.stato {
  margin-top: 5rem;
  padding-bottom: 2rem;
}

.stato-riga {
  display: flex;
  flex-wrap: wrap;
  background: var(--pannello-alto);
  font-size: 0.8125rem;
}

.stato-riga span {
  padding: 0.3rem 0.8rem;
}

.stato-modo {
  background: var(--rame);
  color: var(--fondo);
  font-weight: 800;
}

.stato-file {
  color: var(--perla);
}

.stato-info {
  margin-left: auto;
  color: var(--tenue);
}

.stato-pos {
  background: var(--grigio);
  color: var(--fondo);
  font-weight: 700;
}

.stato-note {
  padding-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--tenue);
}

.stato-note a {
  display: inline-block;
  padding: 0.6rem 0;
  margin-left: 1ch;
  color: var(--rame);
}

/* ---------- 404 ---------- */

.errore {
  min-height: 100svh;
  padding-top: clamp(3rem, 10vw, 6rem);
  padding-bottom: 3rem;
}

.errore-msg {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: #f2a0a0;
}

.errore .cmd:first-of-type {
  margin-top: 2.5rem;
}

/* ---------- Animazioni (solo per chi non chiede meno movimento) ---------- */

.sipario {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Sipario: la finestra di terminale che avvia il sito */
  .sipario[hidden] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 4vh, 2rem);
    padding: 1rem;
    background:
      repeating-linear-gradient(0deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 3px),
      radial-gradient(circle at 50% 40%, #232a33, var(--fondo) 65%);
    animation: sipario-via 450ms ease-in calc(var(--dopo) - 0.35s) forwards;
  }

  .sipario-mono {
    width: auto;
    height: clamp(5.5rem, 16vh, 8rem);
    overflow: visible;
  }

  .sipario-mono path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    animation:
      traccia 1.3s cubic-bezier(0.6, 0.1, 0.3, 1) 0.25s forwards,
      riempi 400ms ease-out 1.5s forwards;
  }

  .sipario-mono .t-grigio { animation-delay: 0.37s, 1.58s; }
  .sipario-mono .t-chiaro { animation-delay: 0.49s, 1.66s; }

  .term {
    width: min(30rem, 100%);
    border: 1px solid #3a4450;
    border-radius: 6px;
    background: rgb(20 24 30 / 0.94);
    box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5);
    text-align: left;
    opacity: 0;
    animation: apri 300ms ease-out forwards;
  }

  .term-barra {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid #2f3843;
    font-size: 0.75rem;
    color: #8a939c;
  }

  .term-barra span {
    margin: 0 auto;
    padding-right: 2.5rem;
  }

  .term-corpo {
    padding: 0.9rem 1rem 1rem;
    font-size: clamp(0.75rem, 3.3vw, 0.875rem);
    line-height: 1.75;
    color: #c9d1d9;
  }

  .term-corpo p {
    white-space: nowrap;
  }

  .term-prompt,
  .term-ok {
    color: var(--rame);
    font-weight: 700;
  }

  .term-scrive {
    display: inline-block;
    vertical-align: bottom;
    clip-path: inset(0 100% 0 0);
    animation: digita 650ms steps(14) 0.35s forwards;
  }

  .term-cmd::after,
  .term-log.l4::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    margin-left: 0.2em;
    vertical-align: -0.2em;
    background: var(--perla);
    animation: lampeggia 0.8s steps(1) infinite;
  }

  .term-cmd::after {
    animation: lampeggia 0.8s steps(1) infinite, sparisce 1ms linear 1.05s forwards;
  }

  .term-log {
    opacity: 0;
    animation: compari 1ms linear forwards;
  }

  .term-log.l1 { animation-delay: 1.1s; }
  .term-log.l2 { animation-delay: 1.3s; }
  .term-log.l3 { animation-delay: 1.5s; }
  .term-log.l4 { animation-delay: 1.75s; }

  /* Eroe: l'output arriva riga per riga, come in un terminale */
  .eroe > * {
    opacity: 0;
    animation: compari 1ms linear forwards;
  }

  .eroe > .marchio {
    opacity: 1;
  }

  /* 10 caratteri monospazio da 0,55 em: il cursore segue le lettere */
  .m-scrive {
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
    animation: stampa 650ms steps(10, end) var(--dopo) forwards;
  }

  .m-cursore {
    animation: lampeggia 1.1s steps(1) calc(var(--dopo) + 0.6s) infinite;
  }

  .eroe > .cmd { animation-delay: calc(var(--dopo) + 0.45s); }
  .eroe > .neofetch { animation-delay: calc(var(--dopo) + 0.7s); }
  .eroe > .intro { animation-delay: calc(var(--dopo) + 0.85s); }
  .eroe > .azioni { animation-delay: calc(var(--dopo) + 1s); }

  .eroe .neo-info li {
    opacity: 0;
    animation: compari 1ms linear forwards;
  }

  .eroe .neo-info li:nth-child(1) { animation-delay: calc(var(--dopo) + 0.75s); }
  .eroe .neo-info li:nth-child(2) { animation-delay: calc(var(--dopo) + 0.8s); }
  .eroe .neo-info li:nth-child(3) { animation-delay: calc(var(--dopo) + 0.85s); }
  .eroe .neo-info li:nth-child(4) { animation-delay: calc(var(--dopo) + 0.9s); }
  .eroe .neo-info li:nth-child(5) { animation-delay: calc(var(--dopo) + 0.95s); }
  .eroe .neo-info li:nth-child(6) { animation-delay: calc(var(--dopo) + 1s); }
  .eroe .neo-info li:nth-child(7) { animation-delay: calc(var(--dopo) + 1.05s); }

  .ruota-in {
    animation: ruota 9s cubic-bezier(0.7, 0, 0.3, 1) calc(var(--dopo) + 2s) infinite;
  }

  .ruota-in span::after,
  .cursore {
    animation: lampeggia 1.1s steps(1) infinite;
  }

  .eq i {
    animation: eq 900ms ease-in-out infinite alternate;
  }

  .eq i:nth-child(2n) { animation-duration: 640ms; }
  .eq i:nth-child(3n) { animation-duration: 1100ms; animation-delay: -300ms; }
  .eq i:nth-child(4n) { animation-duration: 760ms; animation-delay: -500ms; }
  .eq i:nth-child(5n) { animation-duration: 1300ms; animation-delay: -150ms; }
  .eq i:nth-child(7n) { animation-duration: 560ms; animation-delay: -420ms; }

  @keyframes traccia { to { stroke-dashoffset: 0; } }
  @keyframes riempi { to { fill-opacity: 1; stroke-opacity: 0; } }
  @keyframes compari { to { opacity: 1; } }
  @keyframes sipario-via { to { opacity: 0; visibility: hidden; } }
  @keyframes apri {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes digita { to { clip-path: inset(0 0 0 0); } }
  @keyframes sparisce { to { visibility: hidden; width: 0; margin: 0; } }
  @keyframes lampeggia { 50% { opacity: 0; } }
  @keyframes stampa { to { width: 5.5em; } }
  @keyframes ruota {
    0%, 28% { transform: translateY(0); }
    33%, 61% { transform: translateY(-1.7em); }
    66%, 94% { transform: translateY(-3.4em); }
    100% { transform: translateY(-5.1em); }
  }
  @keyframes eq {
    from { transform: scaleY(0.12); }
    to { transform: scaleY(1); }
  }
}

/* ---------- Tablet e telefoni ---------- */

@media (max-width: 52rem) {
  .chi {
    grid-template-columns: minmax(0, 1fr);
  }

  .ritratto {
    order: -1;
    max-width: 26rem;
  }

  .tree li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tr-com {
    grid-area: 2 / 2;
    margin-bottom: 0.35rem;
    line-height: 1.55;
  }

  .tr-nome {
    font-weight: 700;
  }

  .ls-riga {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.55rem 0.5rem;
  }

  .ls-perm,
  .ls-freccia {
    display: none;
  }

  .ls-url {
    font-size: 0.8125rem;
  }
}

/* Telefoni: neofetch in colonna */
@media (max-width: 40rem) {
  .neofetch {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .neo-logo {
    width: clamp(7rem, 30vw, 10rem);
  }
}

@media (max-width: 30rem) {
  body {
    font-size: 0.875rem;
  }

  .barra-sessione {
    display: none;
  }

  .barra-casa {
    padding: 0 0.6rem;
  }

  .barra nav a {
    padding: 0 0.55rem;
    font-size: 0.75rem;
  }

  .barra .n {
    display: none;
  }

  .eroe {
    padding-top: 1.5rem;
  }

  .cmd {
    margin-top: 1.75rem;
  }

  .azioni {
    flex-direction: column;
  }

  .bottone {
    text-align: center;
  }

  .bat {
    --gut: 1.4rem;
  }

  .bat-corpo > p::before {
    font-size: 0.8125rem;
  }

  .stato-info,
  .stato-pos {
    display: none;
  }

  .stato-file {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  .stato-riga {
    flex-wrap: nowrap;
  }
}

@media (max-height: 40rem) {
  .sipario-mono {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}