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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Press Start 2P', monospace;
  color: #cdefff;
}

/* ===================== SFONDO MATRIX ===================== */
#matrix-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  background: #000;
}

/* Overlay di disturbo: linee/bande che lampeggiano a scatti sopra la pioggia
   di numeri, per dare l'idea di un segnale che si interrompe a tratti. */
#glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 210, 255, 0.08) 0px,
      rgba(0, 210, 255, 0.08) 2px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: screen;
}

#glitch-overlay.active {
  opacity: 1;
  animation: glitch-flicker 0.18s steps(2, end) infinite;
}

@keyframes glitch-flicker {
  0%   { transform: translate(0, 0); opacity: 0.9; }
  20%  { transform: translate(-6px, 2px); opacity: 0.5; }
  40%  { transform: translate(5px, -3px); opacity: 0.8; }
  60%  { transform: translate(-3px, -2px); opacity: 0.4; }
  80%  { transform: translate(4px, 3px); opacity: 0.7; }
  100% { transform: translate(0, 0); opacity: 0.9; }
}

/* ===================== SCHERMATE ===================== */
.screen {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.screen.hidden {
  display: none;
}

.menu-inner,
.levels-inner,
.game-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ===================== TITOLO PIXEL CON GLITCH ===================== */
.pixel-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 5.5vw, 40px);
  line-height: 1.6;
  color: #4fd7ff;
  text-shadow:
    0 0 6px rgba(0, 210, 255, 0.9),
    0 0 18px rgba(0, 210, 255, 0.6),
    0 0 34px rgba(0, 140, 255, 0.4);
  position: relative;
}

.pixel-title .line1,
.pixel-title .line2 {
  display: block;
  position: relative;
}

/* Duplicati sfalsati in rosso/ciano per il classico effetto glitch testuale.
   Restano invisibili finché .glitching non è attivo sul titolo. */
.pixel-title .line1::before,
.pixel-title .line1::after,
.pixel-title .line2::before,
.pixel-title .line2::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}

.pixel-title.glitching .line1::before,
.pixel-title.glitching .line2::before {
  opacity: 0.85;
  color: #ff2f6e;
  clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
  transform: translate(-3px, -1px);
  animation: glitch-slice-a 0.25s steps(2, end) infinite;
}

.pixel-title.glitching .line1::after,
.pixel-title.glitching .line2::after {
  opacity: 0.85;
  color: #00fff2;
  clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
  transform: translate(3px, 1px);
  animation: glitch-slice-b 0.25s steps(2, end) infinite;
}

@keyframes glitch-slice-a {
  0%   { transform: translate(-3px, -1px); }
  50%  { transform: translate(4px, 1px); }
  100% { transform: translate(-2px, 2px); }
}

@keyframes glitch-slice-b {
  0%   { transform: translate(3px, 1px); }
  50%  { transform: translate(-4px, -1px); }
  100% { transform: translate(2px, -2px); }
}

.pixel-subtitle {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(16px, 4vw, 26px);
  color: #4fd7ff;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.7);
}

.pixel-text {
  max-width: 480px;
  font-size: 12px;
  line-height: 1.9;
  color: #9fd3e8;
}

/* ===================== PULSANTI ===================== */
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.pixel-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  letter-spacing: 1px;
  color: #001018;
  background: #00e5ff;
  border: 3px solid #001018;
  border-radius: 4px;
  padding: 16px 34px;
  cursor: pointer;
  box-shadow: 0 5px 0 #007a99, 0 5px 16px rgba(0, 210, 255, 0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
  /* Su mobile una pressione un po' lunga (capita spesso in un gioco, non
     solo sui tasti direzionali) altrimenti fa scattare il menu nativo di
     selezione/copia del telefono sul testo del pulsante: "user-select"
     da solo non basta su iOS Safari, serve anche "-webkit-touch-callout". */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.pixel-btn:hover {
  filter: brightness(1.15);
}

.pixel-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #007a99, 0 1px 8px rgba(0, 210, 255, 0.35);
}

.pixel-btn--small {
  font-size: 11px;
  padding: 12px 24px;
}

/* ===================== LIVELLI ===================== */
.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 16px;
  max-width: 420px;
}

.level-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  font-size: 16px;
  color: #001018;
  background: #00e5ff;
  border: 3px solid #001018;
  border-radius: 6px;
  box-shadow: 0 4px 0 #007a99;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.level-node:hover {
  filter: brightness(1.15);
}

.level-node:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #007a99;
}

.level-node.locked {
  color: #4a6a78;
  background: #142a33;
  border-color: #0a1a20;
  box-shadow: 0 4px 0 #061216;
  cursor: not-allowed;
}

.level-node.locked:hover {
  filter: none;
}

/* ===================== LINK RITORNO HUB ===================== */
.back-to-hub {
  position: absolute;
  bottom: 24px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #6fa8bf;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.back-to-hub:hover {
  color: #00e5ff;
}

/* ===================== INTRO VIDEO ===================== */
.intro-video-screen {
  padding: 24px;
  background: #000;
  z-index: 5;
}

/* Cornice nera attorno al video rimpicciolito: prima riempiva tutto lo
   schermo con "cover" e tagliava i bordi, rendendo illeggibili i dialoghi
   vicino ai margini del fotogramma. Ora il video resta piccolo e intero
   (contain, mai ritagliato), con un bordo scuro ben visibile attorno. */
.intro-video-frame {
  max-width: 78vw;
  max-height: 74vh;
  border: 6px solid #050c0f;
  outline: 2px solid #12262b;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.75);
  background: #000;
  line-height: 0;
}

.intro-video {
  display: block;
  /* Un filo più piccolo del riquadro della cornice (che include il suo
     bordo da 6px per lato): usare lo stesso max-width/max-height della
     cornice qui lasciava al video lo spazio per "spuntare" oltre il
     bordo di qualche pixel invece di restarci dentro. */
  max-width: calc(78vw - 12px);
  max-height: calc(74vh - 12px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}

.intro-skip-btn {
  position: absolute;
  right: env(safe-area-inset-right, 18px);
  bottom: env(safe-area-inset-bottom, 18px);
  z-index: 6;
  font-size: 10px;
  padding: 10px 16px;
  opacity: 0.85;
}

.intro-skip-btn:hover {
  opacity: 1;
}