/* Il tubo catodico */
:root {
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}
/* tre fosfori: carta (il vetro spento), inchiostro (il testo), tenue, luce (i titoli), caldo (le lettere appena scritte) */
.tubo[data-tema='verde'] { --carta: #041409; --inchiostro: #43FF7F; --tenue: #1F8E47; --luce: #D9FFE5; --caldo: #FFFFFF; }
.tubo[data-tema='ghiaccio'] { --carta: #070B13; --inchiostro: #A9CCFF; --tenue: #4D6893; --luce: #F1F6FF; --caldo: #6FC1FF; }
.tubo[data-tema='rosa'] { --carta: #15060F; --inchiostro: #FF6FBF; --tenue: #93306A; --luce: #FFE3F2; --caldo: #FFD166; }

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'VT323', ui-monospace, monospace;
  background: #030303;
  overflow: hidden;
}
button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.tubo {
  --bordo: clamp(30px, 4.2vw, 58px);
  position: relative;
  height: var(--alto);
  overflow: hidden;
  background: #020202;
  color: var(--inchiostro);
}

/* ------------------------------------------------------------------ quello che sta sul vetro */
.schermo {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--bordo) + 4px) calc(var(--bordo) + 12px);
  background: var(--carta);
  transform-origin: 50% 50%;
  text-shadow: 0 0 0.35em color-mix(in srgb, var(--inchiostro) 55%, transparent);
}
.barra {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tenue);
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem);
}
.barra__marchio {
  color: var(--luce);
}
.barra__voci {
  display: flex;
  gap: 18px;
  color: var(--tenue);
}
.barra__ora {
  margin-left: auto;
}

.scrivania {
  align-self: center;
  display: grid;
  gap: clamp(14px, 2.4vh, 28px);
}
.titolo {
  margin: 0;
  color: var(--luce);
  font-size: clamp(3rem, 1rem + 7vw, 7.6rem);
  font-weight: 400;
  line-height: 0.9;
}
.titolo .parola {
  display: inline-block;
  white-space: nowrap;
}
.titolo .c {
  display: inline-block;
}
.titolo .c.nascosta {
  visibility: hidden;
}
/* la testa che scrive: due lettere più accese */
.titolo .c.calda {
  color: var(--caldo);
  text-shadow: 0 0 0.3em var(--caldo);
}
.testo {
  position: relative;
  max-width: 44ch;
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  line-height: 1.15;
}
/* mentre scrive: la maschera scopre le righe finite e, nella riga in corso, fino al cursore */
.scrive {
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% var(--fatte, 0px) no-repeat,
    linear-gradient(#000, #000) 0 var(--fatte, 0px) / var(--x, 0px) var(--riga, 1em) no-repeat;
  mask:
    linear-gradient(#000, #000) 0 0 / 100% var(--fatte, 0px) no-repeat,
    linear-gradient(#000, #000) 0 var(--fatte, 0px) / var(--x, 0px) var(--riga, 1em) no-repeat;
}
.cursore {
  position: absolute;
  z-index: 2;
  display: block;
  background: var(--inchiostro);
  box-shadow: 0 0 0.4em var(--inchiostro);
}

.icone {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px);
}
.icona {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 96px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--inchiostro);
  font-size: 1.35rem;
  text-shadow: inherit;
  cursor: pointer;
}
.icona svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  shape-rendering: crispEdges;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--inchiostro) 60%, transparent));
}
.icona span {
  padding: 0 4px;
  transition: background-color 80ms steps(2), color 80ms steps(2);
}
/* il nome si inverte a scatti, come la selezione di un sistema vecchio */
.icona:focus-visible span,
.icona[aria-expanded='true'] span {
  background: var(--inchiostro);
  color: var(--carta);
  text-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .icona:hover span {
    background: var(--inchiostro);
    color: var(--carta);
    text-shadow: none;
  }
}
.icona:focus-visible {
  outline: 2px dashed var(--luce);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ la finestra */
.finestra {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 3;
  width: min(560px, calc(100% - var(--bordo) * 2 - 24px));
  translate: -50% -50%;
  border: 3px solid var(--inchiostro);
  background: var(--carta);
  box-shadow: 6px 6px 0 var(--tenue);
}
.finestra[hidden] {
  display: none;
}
.finestra__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 4px 12px;
  background: var(--inchiostro);
  color: var(--carta);
  text-shadow: none;
  font-size: 1.4rem;
}
.finestra__chiudi {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--carta);
  background: none;
  color: var(--carta);
  cursor: pointer;
}
.finestra__chiudi svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.finestra__chiudi:focus-visible {
  outline: 2px dashed var(--carta);
  outline-offset: 2px;
}
.finestra__corpo {
  position: relative;
  padding: 14px 18px 18px;
  font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.65rem);
  line-height: 1.15;
}
.finestra__corpo p {
  margin: 0 0 0.5em;
}
.finestra__corpo p:last-child {
  margin: 0;
}

/* ------------------------------------------------------------------ i comandi */
.comandi {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
  border-top: 2px solid var(--tenue);
}
.interruttore {
  min-height: 44px;
  padding: 4px 14px;
  border: 2px solid var(--inchiostro);
  background: none;
  color: var(--inchiostro);
  font-size: 1.4rem;
  text-shadow: inherit;
  box-shadow: 3px 3px 0 var(--tenue);
  cursor: pointer;
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.interruttore:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--tenue);
}
.interruttore:focus-visible {
  outline: 2px dashed var(--luce);
  outline-offset: 3px;
}
.temi {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.tema {
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.tema::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--tenue);
  background: var(--c);
}
.tema[data-scegli='verde'] { --c: #43FF7F; }
.tema[data-scegli='ghiaccio'] { --c: #A9CCFF; }
.tema[data-scegli='rosa'] { --c: #FF6FBF; }
.tema[aria-pressed='true']::before {
  border-color: var(--luce);
  box-shadow: 0 0 0 2px var(--carta), 0 0 0 4px var(--luce);
}
.tema:focus-visible {
  outline: 2px dashed var(--luce);
}

/* la riga di luce che si allarga quando il tubo si riaccende */
.lampo {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(180deg, var(--inchiostro), var(--luce) 50%, var(--inchiostro));
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ il vetro e i rettangoli */
.velo {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* senza WebGL: righe e cornice in CSS */
.senza-velo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 24px;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, 0.2) 2px 3px);
  box-shadow: inset 0 0 0 14px #0a0a0a, inset 0 0 60px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.zoom {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.zoom i {
  position: absolute;
  display: none;
  border: 2px solid var(--luce);
}
.zoom i:nth-child(2) {
  border-color: var(--inchiostro);
}
.zoom i:nth-child(3) {
  border-color: var(--tenue);
}

@media (max-width: 640px) {
  .tubo {
    --bordo: 22px;
  }
  .barra__voci {
    display: none;
  }
  .titolo {
    font-size: clamp(2.8rem, 1rem + 9vw, 4rem);
  }
  .icona {
    min-width: 80px;
  }
  .interruttore {
    font-size: 1.25rem;
  }
}