/* =========================================================
   STILE: colori e aspetto della pagina
   ========================================================= */
:root {
  --bg: #000000;                         /* sfondo */
  --osd-fg: #ffffff;                     /* testo della scritta finale e dei pulsanti */
  --osd-bg: #000000;                     /* riquadro della scritta finale */
  --fringe-red: rgba(255, 40, 40, 0.55); /* sbavatura rossa (effetto TV) */
  --fringe-cyan: rgba(40, 220, 255, 0.55); /* sbavatura azzurra (effetto TV) */
  --font-tv: "VT323", "Courier New", Courier, monospace;

  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* La pagina resta scura anche con il tema chiaro del sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000000; }
}
:root[data-theme="dark"] { --bg: #000000; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- Schermo ---------- */
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Righe orizzontali e bordi scuri del vecchio televisore */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 100%);
}

/* ---------- Scritta finale ---------- */
.portal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
}

.portal a {
  pointer-events: auto;
  font-family: var(--font-tv);
  font-size: clamp(3.5rem, 16vw, 10rem);  /* dimensione della scritta */
  line-height: 1;
  color: var(--osd-fg);
  background: var(--osd-bg);
  padding: 0.1em 0.4em 0.04em;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 3px 0 var(--fringe-red), -3px 0 var(--fringe-cyan);
  visibility: hidden;
}
.portal a.visible { visibility: visible; }

.portal a:hover {
  color: var(--osd-bg);
  background: var(--osd-fg);
  text-shadow: none;
}

.portal a:focus-visible {
  outline: 3px solid var(--osd-fg);
  outline-offset: 6px;
}

.cursor {
  display: inline-block;
  font-size: 0.8em;
  margin-left: 0.05em;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Pulsanti ---------- */
.sound,
.power {
  font-family: var(--font-tv);
  color: var(--osd-fg);
  background: var(--osd-bg);
  border: 2px solid var(--osd-fg);
  cursor: pointer;
  z-index: 6;
}

.sound {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  font-size: 1.35rem;
  padding: 0.15em 0.6em;
}

.power {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2rem, 7vw, 3.5rem);
  padding: 0.15em 0.8em;
}
.power[hidden] { display: none; }

.sound:hover,
.power:hover { color: var(--osd-bg); background: var(--osd-fg); }

.sound:focus-visible,
.power:focus-visible { outline: 3px solid var(--osd-fg); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}