/* Estética retrofuturista: CRT, glow de fósforo y parpadeos muy sutiles */
:root { --glow:0 0 7px rgba(255,255,255,.5), 0 0 22px rgba(255,255,255,.2); --chroma:-1px 0 rgba(255,50,70,.38), 1px 0 rgba(40,200,255,.38); }

/* líneas de barrido + oscurecido de bordes del tubo */
html::before { content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px);
  box-shadow:inset 0 0 140px rgba(0,0,0,.65), inset 0 0 28px rgba(0,0,0,.5); }
/* parpadeo muy sutil del tubo */
html::after { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; background:rgba(255,255,255,.012);
  animation:crt-flicker 5.3s steps(1) infinite; }
@keyframes crt-flicker { 0%,100% { opacity:1; } 7% { opacity:.55; } 8% { opacity:1; } 41% { opacity:.8; } 42% { opacity:1; } 77% { opacity:.65; } 78% { opacity:1; } }

/* glow de fósforo y leve aberración cromática en el texto */
.menu a, .grid h1, .back, .foot, .tag, .cell span, #intro p, .term, .term-form button, #player h2, #player button {
  text-shadow:var(--glow), var(--chroma); }
.back { box-shadow:0 0 14px rgba(255,255,255,.08), inset 0 0 10px rgba(255,255,255,.05); }
#intro .logo .base { filter:invert(1) drop-shadow(0 0 2px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(255,255,255,.35)); }
.term-logo { filter:drop-shadow(0 0 16px rgba(255,255,255,.35)); }
#stage { filter:drop-shadow(0 0 14px rgba(255,255,255,.22)); }
.cell { box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(255,255,255,.03); }

/* sacudida corta ocasional (la activa js/retro.js) */
body.jitter .grid h1 { transform:translateX(1.5px); text-shadow:var(--glow), -2px 0 rgba(255,50,70,.55), 2px 0 rgba(40,200,255,.55); }

@media (prefers-reduced-motion:reduce) { html::after { animation:none; } }

/* datamosh ocasional del logo del inicio: bloques que se desplazan y se estiran, sin cambiar de color */
.logo { position:relative; width:min(72vw,560px); }
.logo img { display:block; width:100%; }
.logo .mosh { position:absolute; left:0; top:0; width:100%; opacity:0; pointer-events:none; filter:invert(1); will-change:transform, clip-path; }

/* botón "← Inicio" del menú: estilo menú OSD de VHS (texto blanco; al apuntarlo se rellena de blanco) */
#home { color:#fff; background:transparent; border:0; box-shadow:none; text-shadow:none; transition:opacity .9s ease .25s, visibility .9s ease .25s; }
#home:hover, #home:focus-visible { background:#fff; color:#000; border:0; outline:none; text-shadow:none; }

/* WORK y CONTACTO: sin glitch (ni sacudida ni franjas de color) */
.menu a { text-shadow:0 0 7px rgba(255,255,255,.45); }

#home { gap:5px; }
#home .ico { width:14px; height:12.5px; margin:0; vertical-align:-2px; flex:none; fill:currentColor; shape-rendering:crispEdges; }

/* "ENTRAR" del inicio: texto blanco; al apuntarlo se "selecciona" con un rectángulo blanco, como en un menú de VHS */
#intro p { background:transparent; color:#fff; padding:8px 14px 8px 16px; font-weight:700; text-shadow:none; animation:none; }
#intro p:hover, #intro.sel p { background:#fff; color:#000; }

/* barra de estado del inicio (señal, audífonos, hora y batería) */
.osd { position:absolute; top:20px; display:flex; align-items:center; gap:12px; color:#fff; pointer-events:none; text-shadow:var(--glow); }
.osd-l { left:22px; }
.osd-r { right:22px; gap:10px; font-size:15px; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.osd .ico { display:block; height:17px; width:auto; fill:currentColor; shape-rendering:crispEdges; filter:drop-shadow(0 0 4px rgba(255,255,255,.45)); }
.osd .ico .dim { opacity:.55; }
.osd .batt { height:16px; }

/* hora y batería: fijas arriba a la derecha, tanto en el inicio como en el menú */
.osd-r { position:fixed; z-index:60; right:22px; top:20px; }

/* glow del botón MENU y su casita (en hover, el brillo pasa al rectángulo blanco) */
#home { text-shadow:var(--glow); }
#home .ico { filter:drop-shadow(0 0 4px rgba(255,255,255,.5)); }
#home:hover, #home:focus-visible { text-shadow:none; box-shadow:0 0 16px rgba(255,255,255,.45); }
#home:hover .ico, #home:focus-visible .ico { filter:none; }

/* "PA' ATRAS" de WORK y contacto: igual que el botón MENU del inicio (sin marco; al pasar el cursor se vuelve blanco) */
.back:not(#home) { color:#fff; background:transparent; border:0; box-shadow:none; text-shadow:var(--glow); }
.back:not(#home):hover, .back:not(#home):focus-visible { background:#fff; color:#000; border:0; outline:none; text-shadow:none; box-shadow:0 0 16px rgba(255,255,255,.45); }

/* reproductor abierto (YouTube, Vimeo o video propio): limpio, sin líneas de barrido, viñeta ni parpadeo */
html:has(#player.open)::before, html:has(#player.open)::after { display:none; }

/* botón CERRAR del reproductor: igual que los demás (blanco, sin borde, se invierte al posarse) */
#player button { color:#fff; background:transparent; border:0; box-shadow:none; text-shadow:var(--glow); }
#player button:hover, #player button:focus-visible { background:#fff; color:#000; border:0; outline:none; text-shadow:none; box-shadow:0 0 16px rgba(255,255,255,.45); }