:root { --bg:#0d1a12; --panel:#13261a; --line:#2b4a35; --text:#eef3ea; --muted:#9db3a2; --accent:#ffd23f; --red:#e63946; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#000; color:var(--text); font:15px/1.4 "Trebuchet MS", system-ui, sans-serif; }
kbd { background:#0006; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:12px; }
#cv { position:fixed; inset:0; width:100vw; height:100vh; display:block; background:#1f5e2b; }
[hidden] { display:none !important; }
/* menús retro: el lienzo mide 320–576 × 288 y se amplía sin suavizado (tamaño en menu-screen-manager.js) */
#menuCanvas { position:fixed; inset:0; margin:auto; display:block; image-rendering:pixelated; image-rendering:crisp-edges; background:#000; cursor:pointer; touch-action:none; }

/* ---------- pantalla de inicio (start-screen.js): diseño de la imagen al compartir (tools/og-image/) ----------
   Un cuadro 16:9 que se ajusta a la ventana; las medidas van en cqw para que todo escale junto (1cqw = 8 px a 800 de ancho). */
@font-face { font-family: 'Pixelify Sans'; font-weight: 400; font-display: block; src: url(assets/fonts/pixelify-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 700; font-display: block; src: url(assets/fonts/pixelify-sans-700.woff2) format('woff2'); }
#startScreen { --papel:#f3efe6; --tinta:#1d1a2e; --gris:#6b6678; --rojo:#d63a2f;
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:var(--papel);
  font-family:'Pixelify Sans', 'Courier New', monospace; color:var(--tinta); user-select:none; -webkit-user-select:none; }
.start-frame { position:relative; width:min(100vw, 177.78vh); aspect-ratio:16/9; container-type:inline-size; }
.start-logos { position:absolute; top:7.5cqw; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:3.75cqw; }
.start-logos img { width:44.8cqw; image-rendering:pixelated; }
.start-sep { width:.5cqw; height:12.5cqw; background:var(--tinta); opacity:.15; }
.start-btn { position:absolute; left:50%; top:27cqw; transform:translateX(-50%); min-width:46cqw; display:flex; align-items:center; justify-content:center;
  gap:2.2cqw; padding:2cqw 4.2cqw; border:0; overflow:hidden; background:var(--tinta); color:var(--papel); font:700 4.5cqw/1 'Pixelify Sans', 'Courier New', monospace;
  letter-spacing:.2cqw; box-shadow:1cqw 1cqw 0 var(--rojo); white-space:nowrap; cursor:wait; }
.start-btn:disabled { opacity:1; }
.start-bar { position:absolute; left:0; top:0; bottom:0; width:0; background:#3a3552; }
.start-label, .start-play { position:relative; }
.start-play { display:none; width:0; height:0; border-top:2cqw solid transparent; border-bottom:2cqw solid transparent; border-left:3.2cqw solid var(--rojo); }
#startScreen.ready .start-bar { display:none; }
#startScreen.ready .start-play { display:block; }
#startScreen.ready .start-btn { cursor:pointer; animation:start-pulse 1.2s steps(2) infinite; }
#startScreen.ready .start-btn:focus-visible { outline:.5cqw solid var(--rojo); outline-offset:.6cqw; }
@keyframes start-pulse { 50% { box-shadow:1cqw 1cqw 0 var(--rojo), 0 0 0 .6cqw #d63a2f55; } }
.start-hint { position:absolute; top:39.75cqw; left:0; right:0; margin:0; text-align:center; font-size:3cqw; color:var(--gris); }
.start-foot { position:absolute; bottom:2.75cqw; left:3.75cqw; right:3.75cqw; display:flex; justify-content:space-between; font-size:2.5cqw; color:var(--gris); }
.start-foot b { color:var(--tinta); }

/* aviso de girar el teléfono: pantallas táctiles en vertical, encima de todo (también en pleno partido) */
#rotateHint { display:none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotateHint { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center;
    background:#f3efe6; color:#1d1a2e; font:400 20px/1.35 'Pixelify Sans', 'Courier New', monospace; }
  #rotateHint b { font-size:26px; font-weight:700; }
  .rotate-icon { display:block; width:56px; height:92px; margin:0 auto 22px; border:6px solid #1d1a2e; border-radius:10px; box-shadow:6px 6px 0 #d63a2f;
    animation:rotate-phone 2.4s ease-in-out infinite; }
  @keyframes rotate-phone { 0%, 30% { transform:rotate(0); } 60%, 100% { transform:rotate(-90deg); } }
}