/* ============ Zona Gamer WebFon$ · estilos propios ============
   Páginas independientes de la portada: replican el disco y el cielo con su propio motor (assets/js/zona-gamer/motor.js). */
:root {
  --ink: #08070A; --ink-2: #110E15; --purple: #5A1480; --purple-glow: rgba(110, 24, 160, .35);
  --line: rgba(237, 234, 227, .09); --ivory: #FFFDF9; --gold: #E2B34E;
  --gold-grad: linear-gradient(135deg, #FFE7A3 0%, #E2B34E 45%, #B07A22 100%);
  --gold-soft: rgba(226, 179, 78, .12); --gold-line: rgba(226, 179, 78, .38);
  --f-display: 'Playfair Display', Georgia, serif; --f-body: 'Manrope', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ivory); font: 400 16px/1.5 var(--f-body);
  background: radial-gradient(60vw 50vw at 100% 0%, var(--purple-glow), transparent 70%), var(--ink);
  overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
a { color: var(--gold); }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }   /* width/height en CSS: el lienzo interno va a dpr× y sin esto se mostraría al doble en celular */
.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Menú de la Zona Gamer ---------- */
.menu { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.menu h1 { font: 700 clamp(2rem, 5vw, 3.2rem)/1.1 var(--f-display); margin: 0 0 8px; }
.menu p { color: var(--ivory); font-size: 1.05rem; margin: 0 0 32px; }
.menu-grid { display: grid; gap: 14px; }
.menu-grid a { display: grid; gap: 8px; padding: 22px 24px; border: 1px solid var(--gold-line); border-radius: 16px; background: rgba(17, 14, 21, .92); text-decoration: none; color: var(--ivory); text-align: left; transition: border-color .2s, transform .2s; }
.menu-grid a b { font: 700 clamp(1.5rem, 4vw, 1.9rem)/1.15 var(--f-display); color: var(--gold); }
.menu-grid a span { color: var(--ivory); font-size: 1.05rem; }
.menu-grid a:hover { border-color: var(--gold); transform: scale(1.02); }

/* ---------- Escenario: el disco centrado en la pantalla ---------- */
.escenario { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.escenario > * { pointer-events: auto; }
.orbit { position: relative; width: min(440px, 100vw - 150px, 100dvh - 220px); aspect-ratio: 1; }
.ring { position: absolute; border-radius: 50%; border: 1px solid var(--gold-line); }
.ring-1 { inset: 0; border-style: dashed; opacity: .55; transition: border-color .4s ease, box-shadow .4s ease, opacity .4s ease; }
.ring-2 { inset: 17%; opacity: .35; }
.ring-3 { inset: 34%; border-color: var(--purple); box-shadow: 0 0 60px var(--purple-glow); }
.planet { position: absolute; inset: 37%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2A1E33, #08070A 70%);
  box-shadow: 0 0 0 1px var(--gold-line), 0 0 80px rgba(226, 179, 78, .25), inset 0 0 30px rgba(110, 24, 160, .5);
  animation: planeta-respira 5s ease-in-out infinite; }
.planet img { width: 62%; height: auto; filter: drop-shadow(0 0 14px rgba(226, 179, 78, .45)); position: relative; z-index: 1; }
.planet::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 0 190px 34px rgba(226, 179, 78, .62), 0 0 56px 8px rgba(255, 231, 163, .5), inset 0 0 56px rgba(110, 24, 160, .75);
  animation: planeta-brillo 5s ease-in-out infinite; }
@keyframes planeta-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes planeta-brillo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.spin { position: absolute; inset: 0; }
.sat { position: absolute; width: 0; height: 0; }
.sat-n { top: 0; left: 50%; } .sat-e { top: 50%; left: 100%; } .sat-s { top: 100%; left: 50%; } .sat-o { top: 50%; left: 0; }
.sat-body { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; width: 150px; text-align: center; }
.sat-body svg { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--ink-2); border: 1px solid var(--gold-line); color: var(--gold); box-shadow: 0 0 24px rgba(226, 179, 78, .25); transition: box-shadow .2s, border-color .2s, transform .2s; }
.sat-body span { font-size: .92rem; font-weight: 500; line-height: 1.3; color: var(--ivory); background: rgba(8, 7, 10, .78); padding: 4px 10px; border-radius: 999px; }
.sat-body.activo svg { border-color: var(--gold); box-shadow: 0 0 36px rgba(226, 179, 78, .8); transform: scale(1.12); }
.orbit-grip { position: absolute; inset: -24%; border-radius: 50%; touch-action: none; z-index: 4; }
.orbit-planet-shield { position: absolute; inset: 37%; border-radius: 50%; touch-action: pan-y; z-index: 5; cursor: pointer; -webkit-touch-callout: none; }
@media (hover: hover) { .orbit-grip { cursor: grab; } .orbit.agarrado .orbit-grip { cursor: grabbing; } }
.orbit.cargando .planet { animation: none; transform: scale(1.26); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.orbit.cargando .planet::after { animation: none; opacity: 1; transition: opacity .6s ease; }
.orbit.soltando .planet { animation: none; transform: scale(1); transition: transform .7s ease; }
.orbit.soltando .planet::after { animation: none; opacity: 0; transition: opacity .7s ease; }
.orbit.bengala .ring-1 { border-style: solid; border-color: var(--gold); opacity: 1; box-shadow: 0 0 22px rgba(226, 179, 78, .6), inset 0 0 22px rgba(226, 179, 78, .35); }
.orbit-trail { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; z-index: 2; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(226, 179, 78, .25) 70%, rgba(255, 231, 163, .95) 88%, #fff 97%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 7px), #000 calc(50% - 6px), #000 calc(50% - 1px), transparent calc(50% + 1px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 7px), #000 calc(50% - 6px), #000 calc(50% - 1px), transparent calc(50% + 1px));
  filter: drop-shadow(0 0 8px rgba(226, 179, 78, .9)); transition: opacity .4s ease; }
.orbit.bengala .orbit-trail { opacity: 1; }
.orbit.golpe .planet { box-shadow: 0 0 0 2px #ff5a7a, 0 0 80px rgba(255, 90, 122, .6), inset 0 0 30px rgba(110, 24, 160, .5); }
.chispas { position: absolute; z-index: 3; pointer-events: none; }
.estallido-punto { position: fixed; width: 2px; height: 2px; border-radius: 50%; z-index: 6; pointer-events: none; }
@media (max-width: 640px) {
  .sat-body { width: 110px; gap: 6px; }
  .sat-body svg { width: 52px; height: 52px; padding: 13px; }
  .sat-body span { font-size: .78rem; padding: 3px 8px; }
}

/* ---------- Juego: lienzo y HUD ---------- */
#juego { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; }   /* idem: tamaño CSS explícito */
#juego.encima { z-index: 3; }
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 7; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud .marca { font: 700 1.1rem var(--f-display); color: var(--gold); text-decoration: none; }
.hud .stats { display: flex; gap: 16px; font-weight: 600; }
.hud .stats span b { color: var(--gold); }
.hud .btn-pausa { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(226, 179, 78, .55); background: rgba(8, 7, 10, .6); display: inline-flex; gap: 5px; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.hud .btn-pausa span { width: 4px; height: 14px; border-radius: 2px; background: var(--gold); }
.hud .btn-pausa[hidden] { display: none; }
@media (max-width: 600px) {
  .hud { flex-wrap: wrap; padding: 10px 14px; row-gap: 6px; }
  .hud .marca { order: 1; font-size: 1rem; }
  .hud .btn-pausa { order: 2; margin-left: auto; width: 36px; height: 36px; }
  .hud .stats { order: 3; width: 100%; justify-content: space-between; gap: 6px; font-size: .78rem; }
  .hud .stats span { white-space: nowrap; }
}
.overlay { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(8, 7, 10, .72); backdrop-filter: blur(4px); padding: 20px; }
.overlay[hidden] { display: none; }
.tarjeta { max-width: 420px; width: 100%; text-align: center; padding: 28px 24px; border: 1px solid var(--gold-line); border-radius: 20px; background: rgba(17, 14, 21, .94); }
.tarjeta h2 { font: 700 1.9rem/1.15 var(--f-display); margin: 0 0 10px; }
.tarjeta p { color: #DDD8CF; margin: 0 0 18px; }
.tarjeta .puntaje { font: 700 2.6rem var(--f-display); color: var(--gold); margin: 4px 0 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; font: 600 .95rem/1 var(--f-body); cursor: pointer; text-decoration: none; }
.btn-gold { background: var(--gold-grad); color: #1A1206; }
.btn-ghost { border-color: rgba(237, 234, 227, .24); color: var(--ivory); background: transparent; margin-left: 8px; }
.tarjeta .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tarjeta .acciones .btn { margin: 0; }
.tarjeta .acciones [hidden] { display: none; }
.letrero { position: fixed; left: 50%; transform: translate(-50%, -50%); z-index: 7; text-align: center; pointer-events: none; text-transform: uppercase; animation: letrero var(--dura, 2600ms) ease-out forwards; }
.letrero { width: min(92vw, 720px); }
.letrero p { margin: 0; font: 800 clamp(22px, 7vw, 44px) / 1.1 var(--f-body); color: #FFE7A3; text-shadow: 3px 3px 0 rgba(90, 20, 128, .95); }
.letrero p.sub { font-size: clamp(13px, 3.8vw, 22px); color: #FFFDF9; margin-top: 6px; }
@keyframes letrero { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
.aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7; padding: 10px 16px; border-radius: 999px; background: rgba(17, 14, 21, .85); border: 1px solid var(--gold-line); font-size: .9rem; color: #DDD8CF; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; transition: opacity .45s ease; }
.aviso.oculto { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .planet, .planet::after { animation: none; } }

/* ---------- Botón «Volver a WebFon$»: fijo abajo a la izquierda, igual al de las demos del portafolio ---------- */
.wf-back { position: fixed; left: 22px; bottom: 22px; z-index: 65; display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px; background: #0D0C10; color: #F3E7C8; text-decoration: none; font: 600 1.1rem/1 var(--f-body); letter-spacing: .01em; border: 1px solid rgba(226, 179, 78, .45); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.wf-back:hover { transform: translateY(-2px); border-color: var(--gold); background: #16131B; }
.wf-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wf-back img { width: 42px; height: 42px; }
.wf-back svg { width: 18px; height: 18px; color: var(--gold); }
.wf-back b { color: var(--gold); }
.menu { padding-bottom: 120px; }   /* sitio para el botón fijo */
@media (max-width: 680px) { .wf-back { left: 16px; bottom: 16px; padding: 6px 12px 6px 6px; font-size: .84rem; gap: 7px; } .wf-back img { width: 28px; height: 28px; } }

/* ---------- Las tarjetas del menú laten como un corazón: dos golpes seguidos (lub, dub) y pausa ---------- */
.menu-grid a { animation: tarjeta-late 1.7s ease-in-out infinite; transform-origin: center; }
.menu-grid a:nth-child(2) { animation-delay: .25s; }
.menu-grid a:nth-child(3) { animation-delay: .5s; }
.menu-grid a:nth-child(4) { animation-delay: .75s; }
.menu-grid a:hover { animation-play-state: paused; }
@keyframes tarjeta-late {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(226, 179, 78, 0); border-color: var(--gold-line); }
  10%  { transform: scale(1.045); box-shadow: 0 0 36px rgba(226, 179, 78, .45); border-color: var(--gold); }      /* lub */
  20%  { transform: scale(1); box-shadow: 0 0 10px rgba(226, 179, 78, .15); border-color: var(--gold-line); }
  30%  { transform: scale(1.03); box-shadow: 0 0 26px rgba(226, 179, 78, .35); border-color: var(--gold); }       /* dub */
  42%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(226, 179, 78, 0); border-color: var(--gold-line); }   /* pausa */
}
@media (prefers-reduced-motion: reduce) { .menu-grid a { animation: none; } }

/* ---------- Pantallas bajas (celular horizontal): el botón no flota sobre las tarjetas ---------- */
@media (max-height: 500px) {
  .wf-back { position: static; display: flex; width: max-content; margin: 18px auto 0; }
  .menu { padding: 28px 20px 36px; }
}

/* Llegada a velocidad luz: el menú no se ve hasta que el túnel lo tapa (la clase la pone velocidad-luz.js antes del primer pintado) */
html.llegando .menu, html.llegando .wf-back { visibility: hidden; }

/* ---------- Ajustes por juego ---------- */
body.zona-menu { overflow: auto; }
body.juego-agujero #juego { touch-action: none; }
body.juego-flota .escenario { display: none; }            /* en Flota el disco no juega: el planeta es la base que defiendes */
body.juego-flota #juego { touch-action: none; cursor: crosshair; image-rendering: pixelated; }
body.juego-pinball #juego { pointer-events: none; }
body.juego-pinball, body.juego-pinball .orbit-grip, body.juego-pinball .orbit-planet-shield { touch-action: none; }   /* el dedo mueve la paleta desde cualquier punto */
@media (max-width: 600px) { body.juego-pinball .orbit { width: 42vw; } }   /* en celular el disco (bumpers) se achica para que la arena respire */
@media (max-height: 500px) { body.juego-pinball .orbit { width: 36vh; } }  /* en celular horizontal, también */