/* ============================================================
   GAMIFICATION.CSS — Capa común visual de gamificación
   Juegos aeronáuticos (Checklist pre-flight · Ruta de vuelo · Aeropuertos)
   Cargar DESPUÉS de app.css y casino.css. Reutiliza sus variables
   (--casino-navy, --casino-cyan, --casino-gold) con fallback propio
   por si una página no carga casino.css.
   ============================================================ */

.gp-scope{
  --gp-navy:  var(--casino-navy, #061936);
  --gp-blue:  var(--casino-blue, #0b2f63);
  --gp-cyan:  var(--casino-cyan, #4cc9f0);
  --gp-gold:  var(--casino-gold, #d9a441);
  --gp-gold-soft: var(--casino-gold-soft, rgba(217,164,65,0.42));
  --gp-card:  var(--casino-card, rgba(255,255,255,0.96));
  --gp-line:  var(--casino-line, rgba(147,197,253,0.38));
  --gp-ok:    #22c55e;
  --gp-radius: 18px;
}

/* ── Pantalla de misión (intro de cada juego) ───────────────── */
.gp-mission-screen{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--gp-gold-soft);
  background:
    radial-gradient(circle at 14% 10%, rgba(76,201,240,0.18), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(217,164,65,0.12), transparent 46%),
    linear-gradient(180deg, rgba(6,25,54,0.88), rgba(6,25,54,0.94)),
    var(--gp-mission-bg, linear-gradient(135deg, #041225 0%, #082b57 48%, #031020 100%));
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: clamp(24px, 5vw, 44px) clamp(18px, 5vw, 36px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 0 22px rgba(76,201,240,0.14);
  text-align: center;
}
.gp-mission-screen::before{
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  opacity: .5;
  pointer-events: none;
}
.gp-mission-screen > *{ position: relative; z-index: 1; }
.gp-mission-eyebrow{
  font-size: 12px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase; color: #7dd3fc; margin: 0 0 10px;
}
.gp-mission-title{
  font-size: clamp(24px, 5vw, 34px); font-weight: 800;
  margin: 0 0 10px; line-height: 1.2;
}
.gp-mission-subtitle{
  font-size: clamp(14px, 2.4vw, 17px); color: rgba(255,255,255,0.85);
  margin: 0 auto 18px; max-width: 56ch; line-height: 1.55;
}
.gp-mission-objective{
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(76,201,240,0.12); border: 1px solid rgba(125,211,252,0.35);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  color: #e0f2fe; margin: 0 0 22px;
}
.gp-mission-brief{
  max-width: 640px; margin: 0 auto 26px; text-align: left;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,0.88);
}
.gp-mission-brief strong{ color: #fff; }

.gp-btn-start{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 36px; border: none; border-radius: 16px;
  background: linear-gradient(180deg, #0f5fa8, #052f66);
  border: 1px solid rgba(125,211,252,0.56);
  color: #fff; font-family: inherit; font-size: 16px; font-weight: 800;
  letter-spacing: 0.03em; cursor: pointer;
  box-shadow: 0 14px 30px rgba(8,47,103,0.32), 0 0 20px rgba(76,201,240,0.22);
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gp-btn-start:hover, .gp-btn-start:focus-visible{
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(8,47,103,0.38), 0 0 28px rgba(76,201,240,0.34);
}
.gp-btn-start:focus-visible{ outline: 3px solid rgba(125,211,252,0.6); outline-offset: 2px; }

/* ── Barra de estado / HUD durante el juego ─────────────────── */
.gp-hud{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between;
  background: var(--gp-card); border: 1px solid var(--gp-line);
  border-radius: 16px; padding: 12px 16px; margin: 0 0 16px;
  box-shadow: 0 10px 26px rgba(6,25,54,0.10);
  position: sticky; top: 8px; z-index: 5;
}
.gp-hud-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.gp-hud-chip{
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(11,47,99,0.06); border: 1px solid rgba(11,47,99,0.14);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700;
  color: var(--gp-navy); white-space: nowrap;
}
.gp-hud-chip-icon{ font-size: 14px; line-height: 1; }
.gp-hud-chip-value{ font-weight: 800; }

.gp-streak{ transition: transform .25s ease; }
.gp-streak.is-up{ animation: gpStreakPulse .5s ease; }
@keyframes gpStreakPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.22); }
  100%{ transform: scale(1); }
}

/* ── Insignias / medallas ─────────────────────────────────── */
.gp-badge{
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.02em; border: 1px solid transparent;
}
.gp-badge-bronce{ background: rgba(180,83,9,0.12); color: #92400e; border-color: rgba(180,83,9,0.32); }
.gp-badge-plata{ background: rgba(100,116,139,0.14); color: #334155; border-color: rgba(100,116,139,0.32); }
.gp-badge-oro{ background: rgba(217,164,65,0.16); color: #92660a; border-color: rgba(217,164,65,0.45); }
.gp-badge-comandante{ background: rgba(76,201,240,0.16); color: #075985; border-color: rgba(76,201,240,0.5); }

/* ── Retroalimentación suave (sin colores agresivos tipo "error") ── */
.gp-feedback-ok{ animation: gpBurst .45s ease; }
@keyframes gpBurst{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  100%{ box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}
.gp-feedback-retry{ animation: gpShake .4s ease; }
@keyframes gpShake{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}
.gp-fade-in{ animation: gpFadeIn .35s ease; }
@keyframes gpFadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.gp-flip-in{ animation: gpFlipIn .4s ease; }
@keyframes gpFlipIn{
  from{ opacity: 0; transform: rotateX(35deg) scale(.96); }
  to{ opacity: 1; transform: rotateX(0) scale(1); }
}

/* ── Pantalla final ──────────────────────────────────────── */
.gp-final-screen{
  border-radius: 24px; border: 1px solid var(--gp-gold-soft);
  background: linear-gradient(180deg, #0c2545, #061936);
  color: #fff; padding: clamp(24px, 5vw, 40px) clamp(18px, 5vw, 32px);
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.gp-final-medal{ font-size: 44px; line-height: 1; margin-bottom: 10px; }
.gp-final-title{ font-size: clamp(20px, 4vw, 28px); font-weight: 800; margin: 0 0 6px; }
.gp-final-message{ color: rgba(255,255,255,0.85); margin: 0 0 18px; line-height: 1.55; }
.gp-final-stats{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px;
}
.gp-final-stat{
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 10px 16px; min-width: 110px;
}
.gp-final-stat-label{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.gp-final-stat-value{ font-size: 20px; font-weight: 800; margin-top: 2px; }
.gp-final-actions{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ── Control de sonido ───────────────────────────────────── */
.gp-sound-toggle{
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.gp-sound-toggle:focus-visible{ outline: 3px solid rgba(125,211,252,0.6); outline-offset: 2px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 560px){
  .gp-hud{ position: static; }
  .gp-mission-screen{ text-align: left; }
  .gp-final-stats{ gap: 8px; }
  .gp-final-stat{ min-width: 96px; padding: 8px 12px; }
}

/* FASE 8 (PLAN 3): compactar la pantalla de misión (intro) en mobile
   para que el botón de inicio quede visible antes, sin scroll excesivo. */
@media (max-width: 480px){
  .gp-mission-screen{ padding: 20px 16px; }
  .gp-mission-eyebrow{ margin-bottom: 6px; }
  .gp-mission-title{ margin-bottom: 6px; }
  .gp-mission-subtitle{ margin-bottom: 12px; }
  .gp-mission-objective{ margin-bottom: 14px; padding: 6px 12px; font-size: 12px; }
  .gp-mission-brief{ padding: 12px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
  .gp-btn-start{ min-height: 46px; padding: 11px 20px; font-size: 14px; }
}

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