/* ============================================================
   LEGACY-GAMES.CSS — Sistema visual común (game-shell)
   Capa para homogeneizar los juegos cognitivos "legados"
   (atención, memoria, lenguaje) sin reescribir su lógica interna.
   Reutiliza las variables institucionales de app.css
   (--inst-navy, --inst-blue, --card, --text, --muted, --border,
   --shadow, --radius, --accent-warm, --accent-ok) con fallback
   propio por si una página no carga app.css todavía.
   FASE 1 del plan de homogeneización de juegos legados.
   ============================================================ */

.gs-scope{
  --gs-navy:       var(--inst-navy, #0e2239);
  --gs-blue:       var(--inst-blue, #1b3d63);
  --gs-light:      var(--inst-light, #f2f5f8);
  --gs-card:       var(--card, #ffffff);
  --gs-text:       var(--text, #0f172a);
  --gs-muted:      var(--muted, #64748b);
  --gs-border:     var(--border, rgba(15,23,42,.08));
  --gs-shadow:     var(--shadow, 0 10px 28px rgba(2,6,23,.06));
  --gs-radius:     var(--radius, 18px);
  --gs-radius-sm:  var(--radius-sm, 14px);
  --gs-focus:      var(--focus, 0 0 0 4px rgba(59,130,246,.20));
  --gs-amber:      var(--accent-warm, #C47A2B);
  --gs-amber-soft: var(--accent-warm-soft, rgba(196,122,43,.15));
  --gs-ok:         var(--accent-ok, #22c55e);
  --gs-ok-soft:    var(--accent-ok-soft, rgba(34,197,94,.14));
}

/* ── Contenedor general ─────────────────────────────────────── */
.game-shell{ max-width: 1120px; margin: 0 auto; }

/* ── Tarjeta / panel principal ──────────────────────────────── */
.game-card, .game-panel{
  background: var(--gs-card);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
}

/* ── Encabezado del juego ───────────────────────────────────── */
.game-header{
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 14px; margin: 0 0 18px;
}
.game-title{
  font-size: clamp(22px, 4vw, 30px); font-weight: 700;
  color: var(--gs-navy); margin: 0 0 6px; line-height: 1.2;
}
.game-subtitle{
  font-size: 14px; color: var(--gs-muted); line-height: 1.55;
  margin: 0; max-width: 62ch;
}

/* ── Insignia / categoría ───────────────────────────────────── */
.game-badge{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  color: var(--gs-navy); white-space: nowrap;
}
.game-badge-amber{ background: var(--gs-amber-soft); border-color: rgba(196,122,43,.3); color: #8a4f16; }
.game-badge-ok{ background: var(--gs-ok-soft); border-color: rgba(34,197,94,.3); color: #15803d; }

/* ── Barra de estado / progreso ─────────────────────────────── */
.game-status-bar{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm); padding: 12px 16px; margin: 0 0 18px;
}
.game-status-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.game-chip{
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--gs-border);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700;
  color: var(--gs-navy); white-space: nowrap;
}

/* ── Botones de acción ──────────────────────────────────────── */
.game-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.game-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px; border-radius: 14px;
  font-family: inherit; font-weight: 700; font-size: 14.5px;
  border: 1px solid var(--gs-border); background: #fff; color: var(--gs-navy);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.game-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2,6,23,.08); }
.game-btn:focus-visible{ outline: none; box-shadow: var(--gs-focus); }
.game-btn-primary{ background: var(--gs-blue); border-color: var(--gs-blue); color: #fff; }
.game-btn-primary:hover{ filter: brightness(1.06); }

/* ── Tarjeta de resultado / cierre ──────────────────────────── */
.game-result-card{
  border-radius: var(--gs-radius); border: 1px solid var(--gs-border);
  background: var(--gs-light); padding: clamp(18px, 4vw, 28px); text-align: center;
}
.game-result-medal{ font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.game-result-title{ font-size: clamp(20px, 4vw, 26px); font-weight: 800; color: var(--gs-navy); margin: 0 0 6px; }
.game-result-message{ color: var(--gs-muted); margin: 0 0 18px; line-height: 1.55; }
.game-result-stats{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; }
.game-result-stat{
  background: #fff; border: 1px solid var(--gs-border); border-radius: 14px;
  padding: 10px 16px; min-width: 110px;
}
.game-result-stat-label{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gs-muted); }
.game-result-stat-value{ font-size: 20px; font-weight: 800; color: var(--gs-navy); margin-top: 2px; }

/* ── Pantalla de inicio (versión institucional, clara) ──────── */
.game-intro-screen{
  border-radius: var(--gs-radius); border: 1px solid var(--gs-border);
  background: var(--gs-card); padding: clamp(22px, 5vw, 40px) clamp(18px, 5vw, 32px);
  text-align: center; box-shadow: var(--gs-shadow);
}
.game-intro-eyebrow{
  font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gs-blue); margin: 0 0 10px;
}
.game-intro-title{ font-size: clamp(22px, 5vw, 30px); font-weight: 800; color: var(--gs-navy); margin: 0 0 10px; line-height: 1.2; }
.game-intro-subtitle{ font-size: clamp(14px, 2.2vw, 16px); color: var(--gs-muted); margin: 0 auto 18px; max-width: 56ch; line-height: 1.55; }
.game-intro-objective{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700;
  color: var(--gs-navy); margin: 0 0 22px;
}
.game-intro-brief{
  max-width: 620px; margin: 0 auto 26px; text-align: left;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.6;
  color: var(--gs-text);
}
.game-intro-brief strong{ color: var(--gs-navy); }

/* ── Bloque plegable de instrucciones secundarias (FASE 2) ──────
   Para instrucciones largas que no necesitan estar siempre
   abiertas: usa <details class="game-instructions"><summary>…
   </summary>…</details>. No requiere JS. Cerrado por defecto para
   acortar la primera vista en mobile sin ocultar la información
   (sigue accesible con un toque). ──────────────────────────── */
.game-instructions{
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  background: var(--gs-light);
  padding: 10px 14px;
  margin-bottom: 18px;
}
.game-instructions summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--gs-blue);
  list-style: none;
}
.game-instructions summary::-webkit-details-marker{ display: none; }
.game-instructions summary::after{
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  transition: transform .2s ease;
}
.game-instructions[open] summary::after{ transform: rotate(180deg); }
.game-instructions ul, .game-instructions p{ margin-top: 10px; }

/* ── Insignias / medallas (tonos institucionales) ───────────── */
.game-medal{
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; border: 1px solid transparent;
}
.game-medal-bronce{ background: rgba(180,83,9,.12); color: #92400e; border-color: rgba(180,83,9,.32); }
.game-medal-plata{ background: rgba(100,116,139,.14); color: #334155; border-color: rgba(100,116,139,.32); }
.game-medal-oro{ background: var(--gs-amber-soft); color: #8a4f16; border-color: rgba(196,122,43,.4); }
.game-medal-comandante{ background: rgba(27,61,99,.12); color: var(--gs-blue); border-color: rgba(27,61,99,.32); }

/* ── Racha y retroalimentación suave ────────────────────────── */
.game-streak{ transition: transform .25s ease; }
.game-streak.is-up{ animation: gameStreakPulse .5s ease; }
@keyframes gameStreakPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}
.game-feedback-ok{ animation: gameBurst .45s ease; }
@keyframes gameBurst{
  0%{ box-shadow: 0 0 0 0 var(--gs-ok-soft); }
  100%{ box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}
.game-feedback-retry{ animation: gameShake .4s ease; }
@keyframes gameShake{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}
.game-fade-in{ animation: gameFadeIn .35s ease; }
@keyframes gameFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────  */
@media (max-width: 560px){
  .game-header{ flex-direction: column; }
  .game-intro-screen{ text-align: left; }
  .game-result-stats{ gap: 8px; }
  .game-result-stat{ min-width: 96px; padding: 8px 12px; }
}

/* ── FASE 1 (PLAN 3): patrón mobile compacto común ─────────────
   Compacta el header/hero/tarjeta de juego en mobile sin tocar el
   HTML ni la lógica de cada juego. Usa selectores con .gs-scope
   como ancla para ganar especificidad sobre las utilidades de
   Tailwind (p-6, py-10, etc.) sin necesidad de !important.
   No se aplica a Juego 12 (AeroCalma) ni Juego 18 (GeoFS): esas
   páginas no cargan legacy-games.css / no tienen clase .gs-scope.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 560px){
  /* Header institucional sticky (cuando existe, antes del hero) */
  .gs-scope > header,
  .gs-scope header.sticky{
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Hero tipo Tailwind (section.bg-inst-navy). El padding real vive
     en el <div class="max-w-* px-6 py-10/12/14"> hijo de la sección
     (Tailwind py-*), no en la sección misma: hay que pisar ese div,
     si no el padding de Tailwind queda intacto. */
  .gs-scope section.bg-inst-navy{
    padding-top: 0;
    padding-bottom: 0;
  }
  .gs-scope section.bg-inst-navy > div{
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .gs-scope section.bg-inst-navy h1{
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1.15;
    margin-bottom: 6px;
  }
  .gs-scope section.bg-inst-navy p{
    font-size: 14px;
    line-height: 1.4;
  }
  /* Insignia decorativa (punto pulsante + texto) sobre el título:
     ocupa espacio sin aportar información nueva en mobile */
  .gs-scope section.bg-inst-navy .rounded-full.mb-5{
    margin-bottom: 10px;
    padding: 6px 12px;
  }
  /* Grupo de botones embebido en el hero (Volver a juegos / Inicio):
     que ocupe el mínimo espacio posible al apilarse bajo el título */
  .gs-scope section.bg-inst-navy .flex.flex-wrap.items-center.justify-between{
    gap: 10px;
  }
  .gs-scope section.bg-inst-navy a.px-5,
  .gs-scope section.bg-inst-navy a.px-6{
    padding: 8px 14px;
    font-size: 13.5px;
  }

  /* Tarjeta principal del juego */
  .gs-scope .game-card{
    padding: 16px 14px;
  }

  /* Fila título + botones de acción dentro de una tarjeta sin hero
     propio (p.ej. Juego 7): que no sume filas extra al apilarse */
  .gs-scope .game-card .flex.items-start.justify-between{
    gap: 10px;
  }
  .gs-scope .game-card .flex.items-start.justify-between h1{
    font-size: clamp(20px, 6vw, 24px);
  }

  /* Barra de estado / chips */
  .gs-scope .game-status-bar{
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  /* Botones de acción */
  .gs-scope .game-actions{
    margin-top: 12px;
    gap: 8px;
  }

  /* Bloque plegable de instrucciones: un poco más compacto en mobile */
  .game-instructions{
    margin-bottom: 12px;
    padding: 8px 12px;
  }
}

/* ============================================================
   PLAN 4 — FASE 1: capa de componentes "estilo juego8"
   Agrega las piezas que le faltaban a este sistema para alinear
   la estructura de los juegos legados (Tailwind + legacy-games.css)
   con el patrón de referencia de juego8 (gp-mission-screen → gp-hud
   → área principal con barra de estado → gp-final-screen → aviso).
   Solo AGREGA clases nuevas: no modifica ni reemplaza ninguna regla
   existente, así que no afecta a los juegos que ya están en
   producción usando este archivo.
   ============================================================ */

/* ── Categoría / contexto (chip discreto sobre el título) ───── */
.game-category{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gs-blue); background: var(--gs-light);
  border: 1px solid var(--gs-border); border-radius: 999px;
  padding: 4px 12px; margin: 0 0 8px;
}

/* ── Objetivo (alias genérico, usable fuera de la intro) ─────
   Mismo aspecto que .game-intro-objective, pero sin depender de
   estar dentro de .game-intro-screen: se puede usar en cualquier
   parte del juego (cabecera de la tarjeta, panel principal, etc). */
.game-objective{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700;
  color: var(--gs-navy); margin: 0 0 14px;
}

/* ── Misión / instrucción breve (alias genérico) ─────────────
   Mismo aspecto que .game-intro-brief, pero reutilizable también
   dentro del panel principal del juego, no solo en la intro. */
.game-mission{
  max-width: 620px; text-align: left;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.6;
  color: var(--gs-text); margin: 0 0 18px;
}
.game-mission strong{ color: var(--gs-navy); }

/* ── Barra de herramientas (modo de juego / dificultad + sonido) ──
   Fila de botones de selección (modo/dificultad) + toggles, igual
   en espíritu al .mode-pick + .gp-sound-toggle de juego8, pero
   genérico para cualquier juego de la familia legada. */
.game-toolbar{
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0 0 16px;
}
.game-toolbar .game-btn{ min-width: 140px; }

/* ── Panel principal de juego (alias semántico de .game-card) ───
   Distingue visualmente el área donde ocurre la acción principal
   del resto del layout. Mismo aspecto que .game-card/.game-panel. */
.game-main-panel{
  background: var(--gs-card);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
}

/* ── Aviso psicoeducativo institucional ───────────────────────
   Unifica el disclaimer de cierre que hoy cada juego escribe con
   estilos sueltos. Mismo tono que .casino-aviso (usado en juego8 y
   los casinos), pero con las variables de legacy-games.css para
   que funcione también en páginas que no cargan casino.css. */
.game-safety-note{
  font-size: 12.5px; color: var(--gs-muted); line-height: 1.55;
  background: var(--gs-light); border: 1px solid var(--gs-border);
  border-radius: 12px; padding: 12px 16px; margin-top: 18px;
}

@media (max-width: 560px){
  .game-toolbar{ gap: 8px; margin-bottom: 12px; }
  .game-toolbar .game-btn{ min-width: 0; flex: 1 1 130px; }
  .game-mission{ padding: 12px 14px; font-size: 13.5px; }
  .game-safety-note{ padding: 10px 12px; margin-top: 14px; }
}

/* ============================================================
   PLAN 4 — FASE 2: optimización mobile transversal
   En layouts de 2 columnas (panel lateral + tablero) armados con
   Tailwind `grid lg:grid-cols-12` + `lg:col-span-4`/`lg:col-span-8`,
   el grid colapsa a una sola columna por debajo de 1024px y el
   panel lateral —que en el HTML va primero— queda mostrándose
   completo antes del tablero, obligando a scrollear de más para
   llegar a la acción principal.
   Estas dos clases (agregadas solo en juego3.html y juego4.html,
   donde se detectó el patrón) reordenan visualmente el contenido
   por debajo de 1024px sin tocar el DOM ni la lógica: el tablero
   se muestra primero y el panel queda después. En desktop (≥1024px)
   no tienen efecto, así que el layout de columnas original no cambia.
   No se aplica a ningún otro juego. */
@media (max-width: 1023px){
  .game-board-primary{ order: 1; }
  .game-panel-secondary{ order: 2; }
}

/* Utilidad opcional: barra de acciones fija al pie del juego.
   No se aplica automáticamente a ningún juego: se agrega como
   clase adicional (game-actions-sticky) caso por caso en las
   fases siguientes, solo donde no interfiera con el tablero. */
.game-actions-sticky{
  position: sticky;
  bottom: 8px;
  z-index: 20;
  padding: 8px;
  border-radius: 18px;
  background: rgba(15, 23, 42, .78);
  backdrop-filter: blur(10px);
}
.game-actions-sticky .game-btn{ min-height: 44px; }

/* ── Movimiento seguro ───────────────────────────────────────  */
@media (prefers-reduced-motion: reduce){
  .gs-scope *, .gs-scope *::before, .gs-scope *::after{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ============================================================
   FASE 1 — Sistema visual compartido: juego1 / juego3 / juego5
   Componentes mobile-first alineados con el patrón de juego8.
   Prefijo: gs-  (namespace del sistema compartido)
   ============================================================ */

/* ── Wrapper de página ──────────────────────────────────────── */
.gs-shell-wrap{
  max-width: 840px;
  margin: 0 auto;
  padding: 20px 16px;
}
@media (min-width: 640px){
  .gs-shell-wrap{ padding: 28px 24px; }
}

/* ── Header compacto sticky ─────────────────────────────────── */
.gs-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--gs-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gs-header-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.gs-header-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--gs-navy);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-header-name{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gs-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-header-sub{
  font-size: 11px;
  color: var(--gs-muted);
  white-space: nowrap;
}
.gs-header-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gs-btn-back{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--gs-border);
  background: var(--gs-light);
  color: var(--gs-navy);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
  line-height: 1;
  font-family: inherit;
}
.gs-btn-back:hover{ background: #fff; }
.gs-btn-sound-hdr{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--gs-border);
  background: var(--gs-light);
  color: var(--gs-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
  line-height: 1;
  font-family: inherit;
}
.gs-btn-sound-hdr:hover{ background: #fff; }

/* ── Pantalla de misión / intro ─────────────────────────────── */
.gs-intro{
  background: var(--gs-navy);
  border-radius: var(--gs-radius);
  padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 36px);
  text-align: center;
  margin-bottom: 18px;
}
.gs-intro-eyebrow{
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 0 14px;
}
.gs-intro-title{
  font-size: clamp(26px, 7vw, 42px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.15;
}
.gs-intro-subtitle{
  font-size: clamp(14px, 2.5vw, 16px);
  color: rgba(255,255,255,.82);
  margin: 0 auto 20px;
  max-width: 52ch;
  line-height: 1.55;
}
.gs-intro-objective{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}
.gs-intro-brief{
  max-width: 560px;
  margin: 0 auto 26px;
  text-align: left;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
}
.gs-intro-brief strong{ color: #fff; }
.gs-intro-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Botón de inicio / CTA de misión ────────────────────────── */
.gs-btn-start{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 28px;
  border-radius: 14px;
  background: #fff;
  color: var(--gs-navy);
  font-weight: 800;
  font-size: 15px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gs-btn-start:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.gs-btn-start:focus-visible{ outline: none; box-shadow: var(--gs-focus); }
.gs-btn-start.alt{
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.gs-btn-start.alt:hover{ background: rgba(255,255,255,.22); transform: none; box-shadow: none; }

/* ── HUD en partida (fila de chips compacta) ────────────────── */
.gs-hud{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--gs-light);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.gs-hud-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gs-hud-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gs-border);
  font-size: 12px;
  font-weight: 800;
  color: var(--gs-navy);
  white-space: nowrap;
}
.gs-hud-chip-label{
  color: var(--gs-muted);
  font-weight: 600;
}
/* Feedback al puntuar: agregar/quitar .is-up via JS */
.gs-hud-chip.is-up{
  animation: gs-chip-up .45s ease;
  border-color: var(--gs-blue);
}
@keyframes gs-chip-up{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.12); background: var(--gs-sky, #e0f2fe); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .gs-hud-chip.is-up{ animation: none; }
}

/* ── Pantalla final (resultado) ─────────────────────────────── */
.gs-final{
  border-radius: var(--gs-radius);
  border: 1px solid var(--gs-border);
  background: var(--gs-card);
  padding: clamp(22px, 5vw, 36px) clamp(18px, 5vw, 28px);
  text-align: center;
  box-shadow: var(--gs-shadow);
  margin-top: 18px;
}
.gs-final-title{
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  color: var(--gs-navy);
  margin: 0 0 8px;
}
.gs-final-msg{
  color: var(--gs-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto 22px;
}
.gs-final-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}
.gs-final-stat{
  background: var(--gs-light);
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 110px;
}
.gs-final-stat-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gs-muted);
  font-weight: 700;
}
.gs-final-stat-value{
  font-size: 22px;
  font-weight: 800;
  color: var(--gs-navy);
  margin-top: 2px;
}
.gs-final-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gs-final-actions .game-btn{
  text-decoration: none;
}

/* ── Barra de progreso compacta ─────────────────────────────── */
.gs-progress-bar{
  height: 6px;
  border-radius: 999px;
  background: var(--gs-light);
  border: 1px solid var(--gs-border);
  overflow: hidden;
  margin-bottom: 14px;
}
.gs-progress-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gs-blue), #4cc9f0);
  transition: width .4s ease;
}

/* ── FASE 3: utilidades sin Tailwind ────────────────────────── */
.hidden{ display: none !important; }
.gs-page{
  margin: 0;
  background: var(--gs-light, #f2f5f8);
  color: var(--gs-navy, #0e2239);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gs-panel{
  background: var(--gs-card);
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
  padding: clamp(20px, 4vw, 32px);
}
.gs-muted{ color: var(--gs-muted); }
.gs-kpi-row{
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: center; justify-content: space-between;
  margin-top: 20px; font-size: 15px;
}
.gs-kpi-row .gs-kpi-strong{ font-weight: 700; }
.gs-options-grid{
  display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px;
}
@media (min-width: 560px){ .gs-options-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .gs-options-grid{ grid-template-columns: repeat(3, 1fr); } }
.gs-option{
  border-radius: 14px;
  border: 1px solid var(--gs-border);
  background: var(--gs-light);
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.gs-option:hover{ background: #fff; }
.gs-option:focus-visible{ outline: none; box-shadow: var(--gs-focus); }
.gs-option.is-ok{
  border-color: rgba(34,197,94,.4);
  background: var(--gs-ok-soft);
  color: #166534;
}
.gs-option.is-off{ opacity: .5; }
.gs-locked{ pointer-events: none; }
.game-btn.is-active{ background: #fff; border-color: var(--gs-blue); }

/* Footer institucional compartido */
.gs-footer{ background: var(--gs-navy); color: #fff; }
.gs-footer-inner{ max-width: 1120px; margin: 0 auto; padding: 32px 24px; }
.gs-footer-top{ display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px){
  .gs-footer-top{ flex-direction: row; align-items: flex-start; justify-content: space-between; }
}
.gs-footer-name{ font-weight: 600; margin: 0; }
.gs-footer-sub{ color: rgba(255,255,255,.8); font-size: 14px; margin: 2px 0 0; }
.gs-footer-links{ display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; margin-top: 8px; }
.gs-footer-links a{ color: rgba(255,255,255,.8); text-decoration: underline; }
.gs-footer-links a:hover{ color: #fff; }
.gs-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 28px; padding-top: 16px;
  text-align: center; font-size: 12px; color: rgba(255,255,255,.6);
}

/* ── FASE 3b: layouts y componentes para reemplazo total de Tailwind ── */
.gs-layout{ display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px){
  .gs-layout-4-8{ grid-template-columns: 1fr 2fr; }
  .gs-layout-3-2{ grid-template-columns: 3fr 2fr; }
}
.gs-stack > * + *{ margin-top: 20px; }
.gs-section{ max-width: 1024px; margin: 0 auto; padding: 32px 24px; }
.gs-h2{ font-size: 20px; font-weight: 600; color: var(--gs-navy); margin: 0 0 8px; }
.gs-list{ padding-left: 20px; color: var(--gs-muted); margin: 8px 0 0; line-height: 1.55; }
.gs-list li{ margin-top: 6px; }
.gs-center{ text-align: center; }
.gs-btn-block{ width: 100%; }

.gs-stat-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gs-stat-card{
  border-radius: 14px; border: 1px solid var(--gs-border);
  background: var(--gs-light); padding: 14px 16px;
}
.gs-stat-label{ font-size: 12px; color: var(--gs-muted); margin: 0; }
.gs-stat-value{ font-size: 24px; font-weight: 600; color: var(--gs-navy); margin: 4px 0 0; }

.gs-box{
  border-radius: 14px; border: 1px solid var(--gs-border);
  background: var(--gs-light); padding: 20px;
}
.gs-select, .gs-input{
  border-radius: 12px; border: 1px solid var(--gs-border);
  background: #fff; padding: 10px 12px; font: inherit; color: var(--gs-navy);
}
.gs-select:focus-visible, .gs-input:focus-visible{ outline: none; box-shadow: var(--gs-focus); }
.gs-select-block{ width: 100%; margin-top: 8px; }
.gs-field-label{ font-size: 14px; color: var(--gs-muted); font-weight: 500; }

.gs-warn{
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  color: #92400e; border-radius: 10px; padding: 8px 10px;
  font-size: 14px; font-weight: 600;
}
.gs-row{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid var(--gs-border);
  border-radius: 10px; padding: 8px 12px;
}
.gs-grid-2-4{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px){ .gs-grid-2-4{ grid-template-columns: repeat(4, 1fr); } }

/* ── FASE 4: animaciones y feedback visual enriquecido ──────── */
@keyframes gs-pop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
@keyframes gs-rise{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: none; }
}

/* Acierto: pop suave en la opción elegida (clases usadas por los juegos) */
.choice.correct, .choice.good, .choice-btn.correct,
.gs-option.is-ok, .diff-btn.selected{
  animation: gs-pop .35s ease;
}
/* Error: sacudida breve reutilizando gameShake */
.choice.wrong, .choice.bad, .choice-btn.wrong{
  animation: gameShake .4s ease;
}

/* Pantalla de resultado: entrada con elevación y stagger en chips */
.gs-final{ animation: gs-rise .45s ease both; }
.gs-final-title{ animation: gs-pop .5s ease .2s both; }
.gs-final-stat{ animation: gs-rise .4s ease both; }
.gs-final-stat:nth-child(1){ animation-delay: .1s; }
.gs-final-stat:nth-child(2){ animation-delay: .2s; }
.gs-final-stat:nth-child(3){ animation-delay: .3s; }
.gs-final-stat:nth-child(4){ animation-delay: .4s; }

/* Intro: entrada escalonada del contenido */
.gs-intro .gs-intro-title{ animation: gs-rise .45s ease both; }
.gs-intro .gs-intro-subtitle{ animation: gs-rise .45s ease .08s both; }
.gs-intro .gs-intro-brief{ animation: gs-rise .45s ease .16s both; }
.gs-intro .gs-intro-actions{ animation: gs-rise .45s ease .24s both; }

/* Barra de progreso: brillo sutil al avanzar */
.gs-progress-fill{
  background-size: 200% 100%;
}

/* Respeto por reduced motion: sin animaciones */
@media (prefers-reduced-motion: reduce){
  .choice.correct, .choice.good, .choice-btn.correct,
  .gs-option.is-ok, .diff-btn.selected,
  .choice.wrong, .choice.bad, .choice-btn.wrong,
  .gs-final, .gs-final-title, .gs-final-stat,
  .gs-intro .gs-intro-title, .gs-intro .gs-intro-subtitle,
  .gs-intro .gs-intro-brief, .gs-intro .gs-intro-actions{
    animation: none !important;
  }
}

/* ── Responsive (mobile ≤ 560px) ────────────────────────────── */
@media (max-width: 560px){
  .gs-header{ padding: 8px 14px; }
  .gs-header-name{ font-size: 12px; max-width: 110px; }
  .gs-btn-back{ padding: 6px 10px; font-size: 12px; }
  .gs-btn-sound-hdr{ padding: 6px 9px; }
  .gs-shell-wrap{ padding: 14px 12px; }
  .gs-intro{ padding: 24px 16px; }
  .gs-intro-title{ font-size: clamp(24px, 8vw, 32px); }
  .gs-intro-brief{ padding: 12px 14px; font-size: 13.5px; }
  .gs-btn-start{ min-height: 46px; padding: 10px 22px; font-size: 14.5px; }
  .gs-final{ padding: 20px 16px; }
  .gs-final-stat{ min-width: 90px; padding: 10px 14px; }
  .gs-hud{ padding: 8px 12px; }
}