/* =====================================================================
   WINTER PENALES · Mundial Edition
   style.css — Sistema visual COMPLETO (neo-retro arcade + estadio mundialista
   + Argentina + barbería Winter + CRT). Sin recursos externos: sólo las 2
   fuentes locales y los sprites/QR ya provistos.
   Todo el contrato de IDs/clases está calcado de index.html.
   Comentarios en español rioplatense.
   ===================================================================== */

/* =====================================================================
   1) FUENTES LOCALES (file://, offline)
   ===================================================================== */
@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('../assets/fonts/VT323-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   2) TOKENS DE DISEÑO (:root) — paleta + layout
   ===================================================================== */
:root {
  /* --- Paleta navy --- */
  --navy-900: #07142E;
  --navy-800: #0B1B3B;
  --navy-700: #122A52;
  --navy-600: #1B3A6B;

  /* --- Celestes / hielo / blanco (Argentina + Winter) --- */
  --celeste: #74ACDF;
  --celeste-bright: #6FC3FF;
  --ice: #BFE3FF;
  --white: #F4F9FF;

  /* --- Dorados (sol de mayo) --- */
  --gold: #FFC53D;
  --gold-deep: #F2A900;

  /* --- Señales --- */
  --red: #FF4D5E;
  --goal-green: #34D17A;

  /* --- Neón / aberración CRT --- */
  --neon-cyan: #5BE9FF;
  --neon-magenta: #FF5BD2;

  /* --- Tipografías --- */
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-text:  'VT323', 'Courier New', monospace;

  /* --- Layout / espaciado --- */
  --space-1: clamp(4px, 0.6vmin, 7px);
  --space-2: clamp(8px, 1.1vmin, 13px);
  --space-3: clamp(12px, 1.8vmin, 20px);
  --space-4: clamp(18px, 2.6vmin, 30px);
  --space-5: clamp(26px, 3.6vmin, 44px);

  /* --- Bordes / radios / sombras pixel --- */
  --bd-pixel: clamp(2px, 0.4vmin, 4px);
  --radius: clamp(8px, 1.4vmin, 16px);
  --radius-sm: clamp(5px, 0.9vmin, 10px);
  --shadow-hard: 0 6px 0 rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* --- Glows reutilizables --- */
  --glow-celeste: 0 0 10px rgba(111, 195, 255, 0.65), 0 0 26px rgba(111, 195, 255, 0.35);
  --glow-gold: 0 0 10px rgba(255, 197, 61, 0.65), 0 0 28px rgba(242, 169, 0, 0.4);
  --glow-green: 0 0 12px rgba(52, 209, 122, 0.7), 0 0 30px rgba(52, 209, 122, 0.4);
  --glow-red: 0 0 12px rgba(255, 77, 94, 0.7), 0 0 30px rgba(255, 77, 94, 0.4);

  /* --- Vuelo de la pelota (game.js lo pisa inline si hace falta) --- */
  --flight: 0.6s;

  /* --- Z-index (escala clara) --- */
  --z-snow: 0;
  --z-app: 2;
  --z-flash: 40;
  --z-top: 90;
  --z-crt: 100;

  color-scheme: dark;
}

/* =====================================================================
   3) RESET / BASE
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-text);
  color: var(--white);
  background:
    radial-gradient(120% 90% at 50% 8%, var(--navy-700) 0%, var(--navy-800) 38%, var(--navy-900) 78%),
    var(--navy-900);
  /* Vignette general del fondo */
  background-attachment: fixed;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  min-height: 100vh;    /* fallback Chrome viejo */
  min-height: 100svh;
}

/* Vignette por encima del degradé de fondo (debajo del contenido) */
body::after {
  content: '';
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(130% 120% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

img {
  display: block;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Tipografía pixel anti-aliasing crujiente para títulos/score */
.title,
.cta,
.dir-btn,
.icon-btn,
#hud,
.result-title,
#flash,
.power-caption {
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* =====================================================================
   4) UTILIDADES
   ===================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Foco accesible global (alto contraste) */
:focus-visible {
  outline: 3px solid var(--celeste-bright);
  outline-offset: 3px;
}

/* =====================================================================
   5) CONTENEDOR APP + SISTEMA DE PANTALLAS
   ===================================================================== */
#app {
  position: relative;
  z-index: var(--z-app);
  width: 100%;
  height: 100vh;    /* fallback Chrome viejo (sin svh/dvh) */
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

.screen {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.screen.is-active {
  display: flex;
  flex-direction: column;
  animation: screen-in 0.45s ease both;
}

@keyframes screen-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* =====================================================================
   6) CRT OVERLAY (#crt-overlay) — siempre estilado; game.js lo apaga con
      body.no-crt. Va por encima de todo, no interactivo.
   ===================================================================== */
#crt-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: var(--z-crt);
  pointer-events: none;
  mix-blend-mode: normal;
}

/* Scanlines finas */
.crt-scanlines {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 3px
  );
  opacity: 0.55;
}

/* Vignette radial del tubo */
.crt-vignette {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%),
    /* leve tinte de fósforo */
    linear-gradient(rgba(8, 20, 46, 0.06), rgba(8, 20, 46, 0.06));
}

/* Brillo / flicker animado + sutil aberración de bordes */
.crt-glow {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(80% 60% at 50% 22%, rgba(111, 195, 255, 0.07), transparent 60%);
  animation: crt-flicker 4.5s steps(8) infinite;
  opacity: 0.9;
  will-change: opacity;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 0.92; }
  48%      { opacity: 0.86; }
  50%      { opacity: 0.99; }
  52%      { opacity: 0.88; }
  70%      { opacity: 0.95; }
}

/* game.js apaga el CRT */
body.no-crt #crt-overlay { display: none; }

/* =====================================================================
   7) NIEVE (#snow-layer) — canvas fijo detrás del contenido
   ===================================================================== */
#snow-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-snow);
  pointer-events: none;
  display: block;
}

/* =====================================================================
   8) CONTROLES PERSISTENTES (#top-controls) — arriba a la derecha
   ===================================================================== */
#top-controls {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-top);
  display: flex;
  gap: var(--space-2);
}

.icon-btn {
  --c: var(--celeste-bright);
  display: grid;
  place-items: center;
  width: clamp(44px, 6vmin, 54px);
  height: clamp(44px, 6vmin, 54px);
  font-size: clamp(18px, 2.6vmin, 24px);
  color: var(--ice);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-800));
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.55);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s ease;
}
.icon-btn:hover {
  border-color: var(--celeste-bright);
  box-shadow: var(--shadow-hard), var(--glow-celeste), inset 0 2px 0 rgba(255, 255, 255, 0.15);
}
.icon-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

/* Toggle de sonido: muestra 🔊 o 🔇 según estado.
   Contrato flexible: game.js puede usar .muted en el botón o en body. */
.icon-btn .icon-off { display: none; }
.icon-btn .icon-on  { display: inline; }
.icon-btn.muted .icon-on,
body.muted #sound-toggle .icon-on  { display: none; }
.icon-btn.muted .icon-off,
body.muted #sound-toggle .icon-off { display: inline; }

/* Toast de feedback (ej. "Joystick conectado") */
.gp-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 5vh, 48px);
  transform: translateX(-50%);
  z-index: 97;
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.5vmin, 13px);
  color: var(--ice);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-800));
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.6);
  border-radius: var(--radius-sm);
  padding: clamp(8px, 1.4vmin, 12px) clamp(14px, 2.4vmin, 22px);
  box-shadow: var(--shadow-hard), var(--glow-celeste);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gp-toast.out { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* =====================================================================
   9) BOTONES GENERALES (.cta) — chunky pixel con bisel/sombra dura
   ===================================================================== */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-pixel);
  font-size: clamp(11px, 1.7vmin, 16px);
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--navy-900);
  text-align: center;
  padding: clamp(12px, 1.8vmin, 18px) clamp(18px, 3vmin, 30px);
  min-height: 52px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  border: var(--bd-pixel) solid var(--navy-900);
  border-radius: var(--radius-sm);
  box-shadow:
    0 6px 0 #9c6f00,                       /* bisel inferior dorado oscuro */
    0 9px 0 rgba(0, 0, 0, 0.5),            /* sombra dura */
    inset 0 3px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.cta:hover {
  filter: brightness(1.06) saturate(1.05);
}
.cta:active {
  transform: translateY(6px);
  box-shadow:
    0 0 0 #9c6f00,
    0 3px 0 rgba(0, 0, 0, 0.5),
    inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
.cta:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.7);
  opacity: 0.65;
  transform: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), inset 0 3px 0 rgba(255, 255, 255, 0.1);
}

/* CTA grande de la pantalla de inicio */
.cta-big {
  font-size: clamp(14px, 2.3vmin, 22px);
  min-height: 60px;
  padding: clamp(16px, 2.4vmin, 24px) clamp(28px, 4.5vmin, 52px);
}

/* CTA de patear — grande, con glow y pulso */
.cta-shoot {
  font-size: clamp(14px, 2.2vmin, 22px);
  min-height: 60px;
  width: min(100%, 420px);
  color: var(--white);
  background: linear-gradient(180deg, var(--celeste-bright) 0%, var(--celeste) 55%, #3f7ec0 100%);
  border-color: var(--navy-900);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  box-shadow:
    0 6px 0 #2c5a8c,
    0 10px 0 rgba(0, 0, 0, 0.5),
    var(--glow-celeste),
    inset 0 3px 0 rgba(255, 255, 255, 0.35);
  animation: shoot-pulse 1.1s ease-in-out infinite;
}
.cta-shoot:active {
  transform: translateY(6px);
  box-shadow:
    0 0 0 #2c5a8c,
    0 3px 0 rgba(0, 0, 0, 0.5),
    var(--glow-celeste),
    inset 0 3px 0 rgba(255, 255, 255, 0.3);
}
.cta-shoot:disabled {
  animation: none;
  filter: grayscale(0.8) brightness(0.65);
}
@keyframes shoot-pulse {
  0%, 100% { box-shadow: 0 6px 0 #2c5a8c, 0 10px 0 rgba(0,0,0,0.5), 0 0 10px rgba(111,195,255,0.5), inset 0 3px 0 rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 6px 0 #2c5a8c, 0 10px 0 rgba(0,0,0,0.5), 0 0 22px rgba(111,195,255,0.95), 0 0 40px rgba(111,195,255,0.55), inset 0 3px 0 rgba(255,255,255,0.4); }
}

/* =====================================================================
   10) PANTALLA INICIO (#screen-start)
   ===================================================================== */
#screen-start {
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.start-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: min(640px, 92vw);
  max-height: 100%;
  text-align: center;
  padding: var(--space-4) var(--space-4);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(27, 58, 107, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(11, 27, 59, 0.72), rgba(7, 20, 46, 0.85));
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), inset 0 0 40px rgba(7, 20, 46, 0.6);
  overflow: auto;
}

.start-logo {
  width: clamp(96px, 17vmin, 150px);
  height: auto;
  padding: 8px 16px;
  background: radial-gradient(circle at 50% 38%, rgba(244, 249, 255, 0.97), rgba(191, 227, 255, 0.9));
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* --- Título con aberración cromática --- */
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  font-family: var(--font-pixel);
  line-height: 1.05;
}
.title-line { display: block; }
.title-top {
  font-size: clamp(14px, 3vmin, 26px);
  color: var(--ice);
  letter-spacing: clamp(3px, 1.2vmin, 10px);
  text-shadow: 0 2px 0 var(--navy-900), var(--glow-celeste);
}
.title-big {
  font-size: clamp(30px, 8.5vmin, 74px);
  color: var(--white);
  letter-spacing: 1px;
  /* Glow celeste + aberración cromática cyan/magenta */
  text-shadow:
    -2px 0 0 var(--neon-magenta),
     2px 0 0 var(--neon-cyan),
     0 0 14px rgba(111, 195, 255, 0.7),
     0 0 34px rgba(91, 233, 255, 0.45),
     0 5px 0 var(--navy-900);
  animation: chroma-jitter 3.2s steps(40) infinite;
}
@keyframes chroma-jitter {
  0%, 92%, 100% { transform: translateX(0); }
  93% { transform: translateX(-1px); }
  95% { transform: translateX(1.5px); }
  97% { transform: translateX(-0.5px); }
}
.title-sub {
  font-size: clamp(10px, 2.1vmin, 18px);
  color: var(--gold);
  letter-spacing: clamp(2px, 0.8vmin, 6px);
  text-shadow: 0 2px 0 var(--navy-900), var(--glow-gold);
}

/* --- Instrucciones (lista retro) --- */
.instructions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-text);
  font-size: clamp(16px, 2.6vmin, 24px);
  color: var(--ice);
  text-align: left;
}
.instructions li {
  position: relative;
  padding-left: 1.7em;
  line-height: 1.3;
}
.instructions li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--gold);
  text-shadow: var(--glow-gold);
}
.instructions b {
  color: var(--celeste-bright);
  font-weight: 400;
  text-shadow: 0 0 8px rgba(111, 195, 255, 0.5);
}

/* --- Bloque follow (QR chico) --- */
.start-follow,
.follow-text-win {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.start-follow {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: rgba(7, 20, 46, 0.6);
  border: var(--bd-pixel) solid rgba(255, 197, 61, 0.45);
  border-radius: var(--radius-sm);
}
.qr {
  background: var(--white);
  border: 3px solid var(--white);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
}
.qr-sm { width: clamp(56px, 10vmin, 84px); }
.qr-md { width: clamp(110px, 22vmin, 170px); }
.qr-lg { width: clamp(150px, 30vmin, 240px); }

.follow-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}
.follow-label {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.4vmin, 12px);
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 var(--navy-900);
}
.follow-handle {
  font-family: var(--font-text);
  font-size: clamp(18px, 3vmin, 28px);
  color: var(--celeste-bright);
  text-shadow: var(--glow-celeste);
}

/* =====================================================================
   11) PANTALLA JUEGO (#screen-game) — layout HUD / escena / controles
   ===================================================================== */
#screen-game {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: var(--space-2);
  gap: var(--space-2);
}
#screen-game.is-active { display: flex; }

/* ----- HUD (#hud) ----- */
#hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  /* reserva lugar a la derecha para que los botones 🔊/⛶ (fixed) no tapen los puntitos */
  padding-right: calc(2 * clamp(44px, 6vmin, 54px) + var(--space-4));
  font-family: var(--font-pixel);
  background: linear-gradient(180deg, rgba(18, 42, 82, 0.92), rgba(7, 20, 46, 0.92));
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.45);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.hud-brand {
  font-size: clamp(10px, 1.7vmin, 15px);
  color: var(--ice);
  letter-spacing: 2px;
  text-shadow: var(--glow-celeste);
  white-space: nowrap;
}
.hud-brand .snow {
  color: var(--celeste-bright);
  display: inline-block;
  animation: snow-spin 6s linear infinite;
}
@keyframes snow-spin { to { transform: rotate(360deg); } }

.hud-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  justify-self: center;
  font-size: clamp(14px, 2.6vmin, 24px);
  color: var(--white);
  white-space: nowrap;
}
.hud-goal-icon { font-size: 0.9em; }
#goals {
  color: var(--gold);
  text-shadow: var(--glow-gold);
}
.hud-slash { color: var(--celeste); opacity: 0.8; }
#goals-target { color: var(--ice); }
.hud-score-label {
  font-size: clamp(7px, 1.2vmin, 11px);
  color: var(--celeste);
  letter-spacing: 1px;
  align-self: center;
}

/* Puntitos de tiro (#shot-dots) — game.js inserta .dot */
.hud-dots {
  display: inline-flex;
  gap: clamp(5px, 1vmin, 9px);
  justify-self: end;
}
.hud-dots .dot {
  width: clamp(11px, 1.8vmin, 16px);
  height: clamp(11px, 1.8vmin, 16px);
  border-radius: 50%;
  background: rgba(191, 227, 255, 0.32);
  border: 2px solid rgba(111, 195, 255, 0.8);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hud-dots .dot.is-goal {
  background: var(--goal-green);
  border-color: var(--goal-green);
  box-shadow: var(--glow-green);
}
.hud-dots .dot.is-miss {
  background: var(--red);
  border-color: var(--red);
  box-shadow: var(--glow-red);
}
.hud-dots .dot.is-current {
  border-color: var(--gold);
  background: rgba(255, 197, 61, 0.25);
  animation: dot-blink 0.7s steps(2) infinite;
}
@keyframes dot-blink {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 197, 61, 0); }
  50%      { box-shadow: var(--glow-gold); }
}

/* =====================================================================
   12) ESCENA (#scene) — cancha en perspectiva hacia el arco
   ===================================================================== */
#scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.3);
  box-shadow: var(--shadow-soft), inset 0 0 60px rgba(7, 20, 46, 0.7);
  background: var(--navy-900);
  /* base local para posicionar elementos con % */
  isolation: isolate;
}

/* ----- Cielo de noche ----- */
.sky {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(27, 58, 107, 0.9), transparent 60%),
    linear-gradient(180deg, #06102a 0%, #0a1c43 45%, #0e2350 70%, #0b1b3b 100%);
}
/* Puntitos de estrellas sutiles */
.sky::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    radial-gradient(1px 1px at 20% 18%, rgba(244, 249, 255, 0.7), transparent),
    radial-gradient(1px 1px at 70% 12%, rgba(244, 249, 255, 0.6), transparent),
    radial-gradient(1px 1px at 45% 26%, rgba(191, 227, 255, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 85% 22%, rgba(244, 249, 255, 0.5), transparent),
    radial-gradient(1px 1px at 10% 30%, rgba(191, 227, 255, 0.5), transparent);
  opacity: 0.8;
}

/* ----- Sol de mayo dorado (decorativo, arriba) ----- */
.sun-mayo {
  position: absolute;
  top: clamp(6px, 2.2vmin, 22px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(50px, 11vmin, 96px);
  height: clamp(50px, 11vmin, 96px);
  border-radius: 50%;
  /* Disco central */
  background: radial-gradient(circle at 50% 45%, var(--gold) 0%, var(--gold-deep) 55%, #c98a00 100%);
  box-shadow: var(--glow-gold), inset 0 0 14px rgba(255, 255, 255, 0.4);
  z-index: 2;
}
/* Rayos del sol vía conic-gradient en un pseudo más grande */
.sun-mayo::before {
  content: '';
  position: absolute;
  top: -42%; right: -42%; bottom: -42%; left: -42%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--gold) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%, #000 78%, transparent 80%);
          mask: radial-gradient(circle, transparent 46%, #000 48%, #000 78%, transparent 80%);
  filter: drop-shadow(0 0 6px rgba(242, 169, 0, 0.6));
  animation: sun-rays 70s linear infinite;
  z-index: -1;
}
/* Carita/rayos ondulados secundarios para densidad de "sol de mayo" */
.sun-mayo::after {
  content: '';
  position: absolute;
  top: -28%; right: -28%; bottom: -28%; left: -28%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 7.5deg, var(--gold-deep) 0deg 1.8deg, transparent 1.8deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%, #000 70%, transparent 72%);
          mask: radial-gradient(circle, transparent 50%, #000 52%, #000 70%, transparent 72%);
  opacity: 0.8;
  animation: sun-rays 95s linear infinite reverse;
  z-index: -1;
}
@keyframes sun-rays { to { transform: rotate(360deg); } }

/* ----- Tribuna (.stands) — patrón hinchada celeste/blanco sin imágenes ----- */
.stands {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  height: 22%;
  background:
    /* puntitos de hinchada */
    radial-gradient(2px 2px at 6px 6px, rgba(244, 249, 255, 0.85) 50%, transparent 52%),
    radial-gradient(2px 2px at 14px 10px, rgba(116, 172, 223, 0.85) 50%, transparent 52%),
    /* bandas celeste/blanco */
    repeating-linear-gradient(90deg,
      rgba(116, 172, 223, 0.5) 0 18px,
      rgba(244, 249, 255, 0.5) 18px 36px),
    linear-gradient(180deg, #0a1735, #0c1d40);
  background-size: 20px 16px, 20px 16px, auto, auto;
  border-bottom: 3px solid rgba(7, 20, 46, 0.9);
  box-shadow: inset 0 -10px 20px rgba(7, 20, 46, 0.8);
  opacity: 0.9;
  z-index: 1;
}
/* Borde luminoso de palco superior */
.stands::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(111, 195, 255, 0.6), transparent);
}

/* ----- Césped (.field) — verde noche con líneas de área ----- */
.field {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 56%;
  background:
    /* líneas claras de césped cortado (perspectiva) */
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.03) 0 14px,
      transparent 14px 28px),
    linear-gradient(180deg, #0f3d2a 0%, #0c3322 45%, #08251a 100%);
  /* trapezoide hacia el arco */
  clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
  z-index: 1;
  box-shadow: inset 0 30px 40px rgba(7, 20, 46, 0.6);
}
/* Línea del área (arco blanco de penal en perspectiva) */
.field::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 26%;
  width: 56%;
  height: 60%;
  transform: translateX(-50%);
  border: 3px solid rgba(244, 249, 255, 0.32);
  border-top: none;
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
}
/* Semicírculo del área grande */
.field::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 16%;
  width: 30%;
  height: 26%;
  transform: translateX(-50%);
  border: 3px solid rgba(244, 249, 255, 0.22);
  border-radius: 0 0 50% 50%;
  border-top: none;
}

/* ----- Punto de penal (.penalty-spot) ----- */
.penalty-spot {
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: clamp(7px, 1.4vmin, 12px);
  height: clamp(4px, 0.7vmin, 6px);
  transform: translateX(-50%);
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(244, 249, 255, 0.7);
  z-index: 3;
}

/* ----- Arco (.goal) ----- */
.goal {
  position: absolute;
  left: 50%;
  top: 30%;
  width: clamp(220px, 52%, 560px);
  height: clamp(110px, 26vmin, 230px);
  transform: translateX(-50%);
  z-index: 3;
}

/* Postes blancos con brillo */
.goal-post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(7px, 1.3vmin, 12px);
  background: linear-gradient(90deg, #cfe6ff, #ffffff 45%, #cfe6ff);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(191, 227, 255, 0.6), inset -2px 0 0 rgba(0, 0, 0, 0.15);
}
.goal-post-left  { left: 0; }
.goal-post-right { right: 0; }
.goal-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(7px, 1.3vmin, 12px);
  background: linear-gradient(180deg, #ffffff, #cfe6ff);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(191, 227, 255, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

/* Red (#net) — rombos vía 2 repeating-linear-gradient, semitransparente */
#net {
  position: absolute;
  top: clamp(7px, 1.3vmin, 12px); right: clamp(7px, 1.3vmin, 12px); bottom: 0; left: clamp(7px, 1.3vmin, 12px);
  background:
    repeating-linear-gradient(45deg,
      rgba(244, 249, 255, 0.16) 0 1px,
      transparent 1px 11px),
    repeating-linear-gradient(-45deg,
      rgba(244, 249, 255, 0.16) 0 1px,
      transparent 1px 11px),
    linear-gradient(180deg, rgba(7, 20, 46, 0.35), rgba(7, 20, 46, 0.15));
  border-radius: 0 0 4px 4px;
  transition: transform 0.18s ease;
}

/* Zonas de referencia/highlight dentro del arco */
.goal-zone {
  position: absolute;
  top: clamp(7px, 1.3vmin, 12px);
  bottom: 0;
  width: 33.33%;
  pointer-events: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.goal-zone[data-zone="left"]   { left: 0; }
.goal-zone[data-zone="center"] { left: 33.33%; }
.goal-zone[data-zone="right"]  { right: 0; }
/* highlight opcional (game.js puede agregar .is-hot) */
.goal-zone.is-hot {
  background: radial-gradient(60% 80% at 50% 40%, rgba(111, 195, 255, 0.25), transparent 70%);
  box-shadow: inset 0 0 24px rgba(111, 195, 255, 0.3);
}

/* Red abombándose por zona (#net.bulge-*) al entrar el gol */
#net.bulge-left   { animation: bulge-l 0.4s ease; }
#net.bulge-center { animation: bulge-c 0.4s ease; }
#net.bulge-right  { animation: bulge-r 0.4s ease; }
@keyframes bulge-l {
  0% { transform: scale(1); }
  40% { transform: perspective(300px) translateX(-6%) scaleX(1.05) translateZ(14px); }
  100% { transform: scale(1); }
}
@keyframes bulge-c {
  0% { transform: scale(1); }
  40% { transform: perspective(300px) scale(1.05) translateZ(18px); }
  100% { transform: scale(1); }
}
@keyframes bulge-r {
  0% { transform: scale(1); }
  40% { transform: perspective(300px) translateX(6%) scaleX(1.05) translateZ(14px); }
  100% { transform: scale(1); }
}

/* =====================================================================
   13) ARQUERO (#keeper) — sprite con estados togglea-por-clase
   ===================================================================== */
#keeper {
  position: absolute;
  left: 50%;
  top: 31%;
  width: clamp(70px, 16vmin, 140px);
  height: auto;
  transform: translate(-50%, 0);
  transform-origin: bottom center;
  z-index: 4;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.5, 1), filter 0.2s ease;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* Listo: leve respiración */
#keeper.is-ready {
  animation: keeper-breath 2.4s ease-in-out infinite;
}
/* Respiracion "con los pies en el piso" (sin flotar): escala desde la base */
@keyframes keeper-breath {
  0%, 100% { transform: translate(-50%, 0) scaleY(1) scaleX(1) rotate(0deg); }
  50%      { transform: translate(-50%, 0) scaleY(0.985) scaleX(1.008) rotate(0.5deg); }
}

/* Sombra de contacto en el piso, a los pies del arquero (para que NO flote) */
.keeper-shadow {
  position: absolute;
  left: 50%;
  top: 67%;
  width: clamp(58px, 13vmin, 118px);
  height: clamp(9px, 2vmin, 18px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.26) 48%, transparent 72%);
  border-radius: 50%;
  z-index: 3;            /* debajo del arquero (z-index 4) */
  pointer-events: none;
  filter: blur(1px);
  transition: opacity 0.2s ease;
}
body[data-phase="resolving"] .keeper-shadow { opacity: 0.22; }   /* se atenua cuando se tira */
/* Se tira a su izquierda (izquierda del que patea) */
#keeper.dive-left {
  animation: none;
  transform: translate(-130%, 4%) rotate(-16deg) scale(1.08);
}
/* Se tira a su derecha */
#keeper.dive-right {
  animation: none;
  transform: translate(30%, 4%) rotate(16deg) scale(1.08);
}
/* Salta al centro */
#keeper.center {
  animation: none;
  transform: translate(-50%, -12%) scale(1.1);
}
/* Festeja la atajada */
#keeper.celebrate {
  animation: keeper-celebrate 0.6s ease-in-out infinite;
}
@keyframes keeper-celebrate {
  0%, 100% { transform: translate(-50%, 0) scale(1.05); }
  50%      { transform: translate(-50%, -8%) scale(1.08); }
}
/* Lo batieron (gol): se hunde/oscurece */
#keeper.beaten {
  animation: none;
  transform: translate(-50%, 3%) scale(0.96);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55)) brightness(0.8) saturate(0.85);
}

/* =====================================================================
   14) PELOTA (#ball) — blanca, rayas barber-pole navy + copo de nieve
   ===================================================================== */
#ball {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: clamp(26px, 5vmin, 42px);
  height: clamp(26px, 5vmin, 42px);
  margin-left: calc(clamp(26px, 5vmin, 42px) / -2);
  border-radius: 50%;
  z-index: 6;
  transform-origin: center;
  background:
    /* copo de nieve sutil al centro (estrella radial) */
    radial-gradient(circle at 50% 50%, rgba(11, 27, 59, 0.18) 0 2px, transparent 3px),
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(11, 27, 59, 0.12) 4deg, transparent 8deg,
      transparent 56deg, rgba(11, 27, 59, 0.12) 60deg, transparent 64deg,
      transparent 116deg, rgba(11, 27, 59, 0.12) 120deg, transparent 124deg,
      transparent 176deg, rgba(11, 27, 59, 0.12) 180deg, transparent 184deg,
      transparent 236deg, rgba(11, 27, 59, 0.12) 240deg, transparent 244deg,
      transparent 296deg, rgba(11, 27, 59, 0.12) 300deg, transparent 304deg),
    /* rayas barber-pole navy diagonales */
    repeating-linear-gradient(45deg,
      var(--navy-700) 0 4px,
      var(--white) 4px 9px),
    radial-gradient(circle at 36% 32%, #ffffff, #dfeeff 70%);
  border: 2px solid var(--navy-800);
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.5),
    inset -3px -4px 6px rgba(11, 27, 59, 0.35),
    inset 3px 3px 6px rgba(255, 255, 255, 0.6);
  /* Contrato exacto pedido por game.js (anima transform inline + --flight) */
  transition:
    transform var(--flight, 0.6s) cubic-bezier(0.45, 0.05, 0.3, 1),
    opacity 0.2s ease;
  animation: ball-idle 1.4s ease-in-out infinite;
}
/* Brillo especular */
#ball::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 22%;
  width: 32%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 70%);
  pointer-events: none;
}
/* Idle: pulso sutil en el punto */
@keyframes ball-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6%) scale(1.03); }
}
/* Oculta (opacity 0) */
#ball.is-hidden { opacity: 0; }
/* Reset sin animación (game.js la usa para recolocar) */
#ball.no-anim {
  transition: none;
  animation: none;
}
/* Mientras vuela, game.js puede frenar el idle vía .no-anim antes de animar;
   por las dudas, si recibe transform inline el idle no debería pelear: */
#ball[style*="transform"] { animation: none; }

/* =====================================================================
   15) FLASH DE RESULTADO (#flash)
   ===================================================================== */
#flash {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;   /* explicito: en Chrome el inset:0 en un flex absoluto no expande al contenedor */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-flash);
  font-family: var(--font-pixel);
  font-size: clamp(20px, 6.2vmin, 56px);
  text-align: center;
  letter-spacing: 2px;
  color: var(--white);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
  padding: 0 4%;
}
/* El texto va envuelto en .flash-text (lo inyecta game.js) con ancho acotado
   para que las frases largas corten lindo y queden centradas. */
.flash-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  line-height: 1.08;
  text-align: center;
}
#flash.show {
  animation: flash-pop 0.42s cubic-bezier(0.18, 1.5, 0.4, 1) both;
  opacity: 1;
}
@keyframes flash-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
/* Colores por tipo */
#flash.goal {
  color: var(--goal-green);
  text-shadow: 0 4px 0 var(--navy-900), var(--glow-green);
}
#flash.save {
  color: var(--celeste-bright);
  text-shadow: 0 4px 0 var(--navy-900), var(--glow-celeste);
}
#flash.wide {
  color: var(--red);
  text-shadow: 0 4px 0 var(--navy-900), var(--glow-red);
}

/* ----- Capa de FX (#fx-layer) — confetti/partículas que mete game.js ----- */
.fx-layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 95;            /* sobre las pantallas, debajo del CRT (100) */
  pointer-events: none;
  overflow: hidden;
}

/* =====================================================================
   16) CONTROLES (#controls)
   ===================================================================== */
#controls {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.prompt {
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.8vmin, 16px);
  color: var(--ice);
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 0 8px rgba(111, 195, 255, 0.4);
}

/* ----- Pad direccional (#dir-pad) ----- */
.dir-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: min(100%, 560px);
}
.dir-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  min-height: 56px;
  padding: clamp(8px, 1.4vmin, 14px);
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.4vmin, 13px);
  color: var(--ice);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-800));
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.5);
  border-radius: var(--radius-sm);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.08s ease, box-shadow 0.1s ease, border-color 0.15s ease, color 0.15s ease;
}
.dir-btn .arrow {
  font-size: clamp(18px, 3.4vmin, 30px);
  line-height: 1;
  color: var(--celeste-bright);
  text-shadow: 0 0 8px rgba(111, 195, 255, 0.5);
}
.dir-btn .dir-label { letter-spacing: 1px; }
.dir-btn:hover {
  border-color: var(--celeste-bright);
  color: var(--white);
}
.dir-btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
/* Seleccionado (.is-selected) — glow celeste/gold */
.dir-btn.is-selected {
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--celeste-bright), var(--celeste));
  border-color: var(--gold);
  box-shadow:
    0 5px 0 #2c5a8c,
    var(--glow-celeste),
    0 0 0 2px var(--gold) inset,
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.dir-btn.is-selected .arrow {
  color: var(--navy-900);
  text-shadow: 0 0 6px rgba(255, 197, 61, 0.6);
}

/* ----- Medidor de potencia (#power-box) ----- */
.power-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(100%, 560px);
}
.power-track {
  position: relative;
  width: 100%;
  height: clamp(20px, 3.2vmin, 30px);
  background: linear-gradient(180deg, var(--navy-900), #050d20);
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.45);
  border-radius: 999px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
/* Franja "buena" (game.js puede ajustar left/width inline según config) */
.power-zone-good {
  position: absolute;
  top: 0;
  bottom: 0;
  /* defaults alineados a config: goodZoneMin 62 .. goodZoneMax 92 */
  left: 62%;
  width: 30%;
  background:
    repeating-linear-gradient(90deg,
      rgba(52, 209, 122, 0.55) 0 6px,
      rgba(52, 209, 122, 0.3) 6px 12px);
  border-left: 2px solid rgba(52, 209, 122, 0.8);
  border-right: 2px solid rgba(52, 209, 122, 0.8);
  box-shadow: inset 0 0 14px rgba(52, 209, 122, 0.5);
}
/* Relleno (#power-fill) — barber-pole animado */
.power-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%; /* game.js puede pisar width inline; si no, queda como base */
  background:
    repeating-linear-gradient(45deg,
      var(--gold) 0 10px,
      var(--gold-deep) 10px 20px);
  background-size: 28px 28px;
  box-shadow: 0 0 12px rgba(255, 197, 61, 0.6);
  animation: barber-scroll 0.6s linear infinite;
}
@keyframes barber-scroll {
  to { background-position: 28px 0; }
}
/* Cursor (#power-cursor) — game.js setea style.left en % */
.power-cursor {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0%;
  width: clamp(5px, 0.9vmin, 8px);
  margin-left: calc(clamp(5px, 0.9vmin, 8px) / -2);
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(244, 249, 255, 0.9), 0 0 18px rgba(111, 195, 255, 0.7);
  z-index: 3;
}
.power-caption {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.3vmin, 12px);
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 1px 0 var(--navy-900);
}

/* =====================================================================
   17) PANTALLAS RESULTADO (#screen-win / #screen-lose)
   ===================================================================== */
#screen-win,
#screen-lose {
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.result-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: min(560px, 92vw);
  max-height: 100%;
  text-align: center;
  padding: var(--space-4);
  background: linear-gradient(180deg, rgba(11, 27, 59, 0.85), rgba(7, 20, 46, 0.92));
  border: var(--bd-pixel) solid rgba(111, 195, 255, 0.3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: auto;
}

/* Trofeo (bob + brillo) */
.trophy {
  width: clamp(90px, 22vmin, 180px);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(242, 169, 0, 0.5));
  animation: trophy-bob 2.2s ease-in-out infinite;
}
@keyframes trophy-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); filter: drop-shadow(0 8px 16px rgba(242,169,0,0.45)); }
  50%      { transform: translateY(-8px) rotate(2deg); filter: drop-shadow(0 14px 22px rgba(242,169,0,0.7)); }
}

.result-title {
  font-family: var(--font-pixel);
  font-size: clamp(22px, 6vmin, 52px);
  line-height: 1.1;
  color: var(--white);
}
.win-inner .result-title {
  color: var(--gold);
  text-shadow:
    -2px 0 0 var(--neon-magenta),
     2px 0 0 var(--neon-cyan),
     0 0 16px rgba(255, 197, 61, 0.7),
     0 4px 0 var(--navy-900);
}
.lose-inner .result-title {
  color: var(--celeste-bright);
  text-shadow: 0 4px 0 var(--navy-900), var(--glow-celeste);
}
.result-sub {
  font-family: var(--font-text);
  font-size: clamp(18px, 3vmin, 28px);
  color: var(--ice);
}
.lose-score {
  font-family: var(--font-text);
  font-size: clamp(20px, 3.4vmin, 32px);
  color: var(--white);
}
.lose-score span {
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 0.85em;
  text-shadow: var(--glow-gold);
}

/* Tarjeta de premio (.reward-card) — borde dorado + glow */
.reward-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 197, 61, 0.12), transparent 60%),
    rgba(7, 20, 46, 0.7);
  border: var(--bd-pixel) solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--glow-gold), inset 0 0 24px rgba(242, 169, 0, 0.12);
}
.reward-card-lose {
  border-color: rgba(116, 172, 223, 0.6);
  box-shadow: var(--glow-celeste), inset 0 0 20px rgba(111, 195, 255, 0.1);
}
.lose-emoji {
  font-size: clamp(30px, 6.5vmin, 52px);
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: lose-emoji-bob 2.4s ease-in-out infinite;
}
@keyframes lose-emoji-bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.lose-levelup {
  color: var(--ice);
  max-width: 30ch;
  line-height: 1.28;
}

/* Caja de premio (ruleta) en la pantalla de victoria */
.prize-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-4);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 197, 61, 0.18), transparent 65%),
    rgba(7, 20, 46, 0.6);
  border: var(--bd-pixel) solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--glow-gold), inset 0 0 18px rgba(242, 169, 0, 0.15);
}
.prize-label {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.4vmin, 12px);
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 1px 0 var(--navy-900);
}
.prize-icon {
  width: clamp(60px, 13vmin, 100px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.prize-name {
  font-family: var(--font-text);
  font-size: clamp(18px, 3vmin, 28px);
  color: var(--white);
  line-height: 1.1;
  max-width: 18ch;
  min-height: 1.1em;
}
.prize-box.spinning .prize-icon { animation: prize-shake 0.12s linear infinite; }
@keyframes prize-shake { 0%, 100% { transform: translateY(0) scale(0.96); } 50% { transform: translateY(-3px) scale(1.02); } }
.prize-box.landed { animation: prize-pop 0.6s cubic-bezier(.18, 1.5, .4, 1); }
.prize-box.landed .prize-icon { animation: prize-land 0.6s cubic-bezier(.18, 1.6, .4, 1); }
@keyframes prize-pop {
  30% { box-shadow: 0 0 30px rgba(255, 197, 61, 0.95), 0 0 60px rgba(255, 197, 61, 0.6), inset 0 0 24px rgba(242, 169, 0, 0.3); }
  100% { box-shadow: var(--glow-gold), inset 0 0 18px rgba(242, 169, 0, 0.15); }
}
@keyframes prize-land { 0% { transform: scale(0.6); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
.reward-line {
  font-family: var(--font-text);
  font-size: clamp(16px, 2.6vmin, 24px);
  color: var(--ice);
  max-width: 36ch;
}
.follow-text-win {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.follow-text-win .follow-handle { font-size: clamp(20px, 3.4vmin, 30px); }

/* =====================================================================
   17b) POLISH DE ANIMACIONES
   ===================================================================== */
/* La pelota no hace idle mientras vuela (lo maneja Web Animations API) */
#ball.flying { animation: none !important; }

/* Estela de la pelota: fantasmas que se desvanecen */
.ball-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.8), rgba(191, 227, 255, 0.45) 60%, transparent 72%);
  pointer-events: none;
  z-index: 5;
  animation: ghost-fade 0.34s ease-out forwards;
}
@keyframes ghost-fade {
  from { opacity: 0.5; }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.65); }
}

/* Pop de la hinchada al gol: se ilumina y vibra */
.stands.pop { animation: stands-pop 0.7s ease-out; }
@keyframes stands-pop {
  0%   { filter: brightness(1) saturate(1); transform: translateY(0); }
  18%  { filter: brightness(1.6) saturate(1.35); transform: translateY(-3px); }
  45%  { filter: brightness(1.25) saturate(1.15); transform: translateY(0); }
  100% { filter: brightness(1) saturate(1); transform: translateY(0); }
}

/* Veredicto de potencia: FLOJO / PERFECTO / PASADO */
.pwr-verdict {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: clamp(11px, 2.2vmin, 20px);
  letter-spacing: 1px;
  z-index: 22;
  pointer-events: none;
  text-shadow: 0 2px 0 var(--navy-900);
  animation: verdict-rise 0.9s ease-out forwards;
}
.pwr-verdict.good { color: var(--goal-green); text-shadow: 0 2px 0 var(--navy-900), var(--glow-green); }
.pwr-verdict.weak { color: var(--celeste-bright); }
.pwr-verdict.over { color: var(--red); text-shadow: 0 2px 0 var(--navy-900), var(--glow-red); }
@keyframes verdict-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.7); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.12); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(1); }
}

/* Flourish de barberia ENTRE TIROS: barrido con rayas barber-pole + snip */
.barber-wipe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 26;
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg,
    var(--navy-700) 0 22px,
    var(--celeste) 22px 33px,
    var(--white) 33px 44px,
    var(--celeste) 44px 55px);
  animation: barber-wipe-move 0.64s cubic-bezier(.5, 0, .5, 1) forwards;
}
@keyframes barber-wipe-move {
  0%   { clip-path: inset(0 100% 0 0); }
  46%  { clip-path: inset(0 0 0 0); }
  54%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
.barber-snip {
  font-size: clamp(28px, 7vmin, 56px);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: snip-pop 0.64s ease-out forwards;
}
@keyframes snip-pop {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  38%, 58% { opacity: 1; transform: scale(1.1) rotate(-6deg); }
}

/* Caños de barbero decorativos (flanquean el titulo de inicio) */
.deco-pole {
  position: absolute;
  top: 13%;
  width: clamp(20px, 4vmin, 40px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  animation: pole-sway 3.6s ease-in-out infinite;
}
.deco-pole-l { left: 2%; }
.deco-pole-r { right: 2%; animation-delay: -1.8s; }
@keyframes pole-sway {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg); }
}
@media (max-width: 560px) { .deco-pole { display: none; } }

/* Emblema de barberia (tijera/maquina) en la tarjeta de premio */
.win-emblem {
  width: clamp(46px, 10vmin, 78px);
  height: auto;
  margin-top: calc(var(--space-2) * -1);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

/* Pantallas de resultado COMPACTAS en landscape (Chromebook) para que entre
   todo (incluido el boton) sin scroll. Dos niveles segun el alto disponible. */
@media (orientation: landscape) and (max-height: 900px) {
  .result-inner { gap: 6px; padding: 10px var(--space-3); }
  .trophy { width: clamp(54px, 12vmin, 92px); animation-duration: 2.6s; }
  .win-emblem { width: clamp(34px, 6vmin, 50px); margin-top: 0; }
  .result-title { font-size: clamp(19px, 4.6vmin, 38px); }
  .result-sub { font-size: clamp(14px, 2.2vmin, 20px); }
  .reward-card { padding: 8px var(--space-3); gap: 5px; }
  .reward-line { font-size: clamp(13px, 2vmin, 18px); }
  .prize-box { padding: 6px var(--space-3); }
  .prize-icon { width: clamp(50px, 10vmin, 78px); }
  .prize-name { font-size: clamp(16px, 2.6vmin, 24px); }
  .qr-md, .qr-lg { width: clamp(108px, 19vmin, 150px); }
  .cta { min-height: 46px; }
  .lose-score { font-size: clamp(16px, 2.6vmin, 24px); }
}
@media (orientation: landscape) and (max-height: 720px) {
  .win-inner .trophy { display: none; }   /* el premio pasa a ser el protagonista en pantallas bajas */
  .win-emblem { display: none; }
  .result-sub { display: none; }
  .qr-md, .qr-lg { width: clamp(96px, 17vmin, 130px); }
  .result-title { font-size: clamp(18px, 4.2vmin, 32px); }
  .prize-icon { width: clamp(46px, 9vmin, 70px); }
}

/* =====================================================================
   18) RESPONSIVE
   ===================================================================== */

/* --- Portrait / tablet: apila la escena y achica controles --- */
@media (orientation: portrait) {
  .goal { width: clamp(200px, 72%, 460px); }
  #keeper { width: clamp(64px, 22vmin, 130px); }
  .start-follow { flex-direction: column; }
  .follow-text { align-items: center; text-align: center; }
}

/* --- Pantallas chicas (alto reducido): comprime HUD/controles --- */
@media (max-height: 560px) {
  .instructions { font-size: clamp(13px, 4.5vw, 18px); }
  #controls { gap: 6px; padding: 4px var(--space-2) 8px; }
  .prompt { font-size: clamp(9px, 1.3vh, 12px); }  /* se achica, no desaparece */
  .dir-btn { min-height: 50px; }
  .cta-shoot { min-height: 52px; }
}

/* --- Chromebook landscape sweet spot (~1366x768): escena domina centro --- */
@media (orientation: landscape) and (min-width: 1024px) {
  #screen-game { padding: var(--space-2) var(--space-4); }
  .goal { top: 28%; }
  .dir-pad { gap: var(--space-3); }   /* mas separacion entre esquinas para no errar el toque */
}

/* --- Muy angosto --- */
@media (max-width: 380px) {
  .dir-btn .dir-label { font-size: 7px; }
  .hud-score-label, .hud-brand { letter-spacing: 0.5px; }
}

/* =====================================================================
   19) ACCESIBILIDAD — reduce-motion apaga animaciones no esenciales
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Mantenemos transición de la pelota corta pero perceptible para no romper el juego */
  #ball { transition: transform var(--flight, 0.4s) ease, opacity 0.2s ease !important; }
  .crt-glow { animation: none; }
  .title-big { animation: none; }
  #keeper.is-ready, #keeper.celebrate, .trophy, .hud-brand .snow { animation: none !important; }
}

/* =====================================================================
   20) MODO LITE (Chromebooks lentas / Chrome viejo) — game.js pone body.lite
   Apaga lo mas caro para el GPU/CPU: CRT, nieve y TODAS las animaciones
   continuas (sol girando, flicker, pulsos). Las transiciones de juego
   (vuelo de la pelota, atajada del arquero) se mantienen: son baratas.
   ===================================================================== */
body.lite #crt-overlay,
body.lite #snow-layer { display: none !important; }

body.lite *,
body.lite *::before,
body.lite *::after { animation: none !important; }

/* El cartel de resultado, sin el "pop", quedaria en su escala base (0.6);
   lo forzamos a tamaño completo para que se lea grande igual. */
body.lite #flash { transform: scale(1); }

/* Glows un poco mas baratos en lite (sombras animadas/dobles son caras). */
body.lite .title-big {
  text-shadow: 0 0 10px rgba(111, 195, 255, 0.7), 0 4px 0 var(--navy-900);
}