/* ============================================================================
   CYBER DEFENSE — Contact Center
   ----------------------------------------------------------------------------
   Estilos del juego de sensibilización en ciberseguridad.
   Paleta corporativa: blanco, azul marino #1F3A73, rojo #E5484D solo
   para amenazas y errores críticos.

   Estructura del archivo:
     1.  Tokens / variables                  (:root, base, helpers)
     2.  Layout raíz                         (.game, .stage)
     3.  HUD superior
     4.  Paneles (mission, remind)
     5.  SVG escena (gates, items, escudo, paths, agente)
     6.  Toast central
     7.  Distracción (N3 popup)
     8.  Critical Error overlay
     9.  Overlays comunes (intro, end, cert)
       9.4  Quiz overlay
       9.5  Welcome overlay (nombre + código)
       9.6  Picker overlay (selector de agente)
     10. Intro overlay específico
     11. End screen específico
     12. Certificate específico (paleta pergamino + oro)
     13. Responsivo
   ============================================================================ */


/* ============================================================
   1. TOKENS / VARIABLES
   ============================================================ */
:root {
  /* Superficies */
  --bg:        #F4F6FA;
  --panel:     #FFFFFF;
  --panel-2:   #F9FAFC;

  /* Tinta */
  --ink:       #1A2233;
  --ink-2:     #4A5568;
  --ink-3:     #8590A6;

  /* Líneas */
  --line:      #E2E8F0;
  --line-2:    #ECEFF4;
  --line-3:    #cfd8e8;

  /* Azul marino corporativo */
  --navy:      #1F3A73;
  --navy-2:    #2E4F95;
  --navy-3:    #14264f;
  --navy-soft: #E6ECF7;

  /* Estados */
  --ok:        #3FB950;
  --ok-soft:   #E8F8EC;
  --danger:    #E5484D;
  --danger-2:  #B0292E;
  --danger-soft: #FDECEC;
  --warn:      #F5A623;

  /* Forma */
  --radius-lg: 14px;
  --radius:    10px;
  --radius-sm: 6px;

  /* Sombras */
  --shadow-card: 0 1px 2px rgba(20,30,55,.05), 0 0 0 1px rgba(20,30,55,.04);
  --shadow-pop:  0 8px 24px rgba(20,30,55,.12);

  /* Tipografía */
  --font:        'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow: hidden;
}
[hidden] { display: none !important; }
.t-red { color: var(--danger); font-style: normal; font-weight: 600; }


/* ============================================================
   2. LAYOUT RAÍZ
   ============================================================ */
.game {
  height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--panel);
  position: relative;
  box-shadow: 0 0 0 1px var(--line-2);
}
.stage {
  position: relative;
  overflow: hidden;
  background: var(--panel);
}


/* ============================================================
   3. HUD SUPERIOR
   ============================================================ */
.hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line-2);
  background: var(--panel-2);
  min-height: 52px;
  position: relative;
  z-index: 5;
}
.hud-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* Mute toggle: dos SVG (on/off) controlados por la clase .is-muted */
#btnSound .ico-sound-off { display: none; }
#btnSound.is-muted .ico-sound-on  { display: none; }
#btnSound.is-muted .ico-sound-off { display: inline-block; }
#btnSound.is-muted { color: var(--ink-3); }

/* Toggle de velocidad: muestra "1×" o "2×". En 2× se destaca en navy. */
.speed-btn {
  width: auto;
  min-width: 36px;
  padding: 0 8px;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.speed-btn.is-fast {
  background: var(--navy-soft);
  color: var(--navy);
  border-color: var(--navy-soft);
}

/* Lang dropdown */
.lang-wrap { position: relative; }
.lang-btn  { width: auto; padding: 0 8px; gap: 4px; font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.lang-btn span { line-height: 1; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  min-width: 140px;
  z-index: 50;
}
.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.lang-menu button:hover { background: var(--line-2); }

.hud-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
  color: var(--ink-2);
  font-size: 13px;
}
.hud-eyebrow { font-weight: 600; color: var(--navy); letter-spacing: .03em; }
.hud-sep     { color: var(--ink-3); }
.hud-level   { font-weight: 500; color: var(--ink); }

.hud-stats {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hud-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.hud-stats .stat b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  min-width: 22px;
  text-align: right;
}
.stat-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.stat-icon svg { width: 14px; height: 14px; }
.stat-icon-ok   { background: var(--navy-soft);   color: var(--navy); }
.stat-icon-fail { background: var(--danger-soft); color: var(--danger); }
.stat-icon-time { background: var(--line-2);      color: var(--ink-2); }


/* ============================================================
   4. PANELES (esquinas de la escena)
   ============================================================ */
.panel {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  z-index: 3;
  max-width: 260px;
}
.panel-mission { top: 20px;  left: 20px; }
.panel-remind  { top: 20px;  right: 20px; max-width: 280px; }

/* Pastilla compacta para flechas ← →, abajo-centro, sin texto. */
.arrow-pill {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  z-index: 3;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.panel-head svg { width: 18px; height: 18px; }
.panel-body {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}
.panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.panel-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.panel-list-tight li { padding: 2px 0; }
.panel-list-tight li::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--navy);
  border-radius: 50%;
  flex-shrink: 0;
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot-safe   { background: var(--navy); }
.dot-threat { background: var(--danger); }

/* Flechas izquierda / derecha — botones circulares dentro de la pastilla. */
.arrow-btn {
  width: 38px; height: 38px;
  border: 0;
  background: transparent;
  color: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, transform .08s ease;
}
.arrow-btn:hover  { background: var(--navy-soft); }
.arrow-btn:active { transform: scale(.94); }
.arrow-btn svg    { width: 20px; height: 20px; }


/* ============================================================
   5. SVG escena
   ============================================================ */
.castle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Puertas (badges numerados) */
.gate-badge        { cursor: pointer; }
.gate-badge circle {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 3;
  transition: fill .15s ease;
}
.gate-badge text {
  font-family: var(--font);
  font-weight: 700;
  font-size: 18px;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
  pointer-events: none;
}
.gate-badge.is-protected circle { fill: var(--navy-2); }

/* Items en movimiento */
.item {
  /* Solo opacity para fade-in al spawn y fade-out al rebote. */
  transition: opacity .25s ease;
}
.item-glyph {
  fill: none;
  stroke: #6a7587;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.item.is-threat .item-glyph,
.item.is-revealed .item-glyph {
  stroke: var(--danger);
  stroke-width: 2;
}

/* Escudo (sector anular) — rotación animada por JS (rAF). */
.shield-arc {
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(20, 38, 79, 0.28));
  transition: filter .2s ease;
}
.shield-arc.is-flashing {
  filter:
    drop-shadow(0 0 14px rgba(168, 192, 238, 0.85))
    drop-shadow(0 3px 6px rgba(20, 38, 79, 0.28));
}

/* FX flotantes (check / cross / warn sobre la puerta) */
.fx-pop {
  animation: fxFade .9s ease forwards;
  pointer-events: none;
}
@keyframes fxFade {
  0%   { opacity: 0; transform: translateY(0)   scale(.8); }
  20%  { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(1); }
}


/* ============================================================
   6. TOAST CENTRAL
   ============================================================ */
.toast {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -10px);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 6;
  max-width: 380px;
  text-align: center;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.toast.is-ok   { border-left-color: var(--navy); }
.toast.is-fail { border-left-color: var(--danger); }
.toast.is-warn { border-left-color: var(--warn); }


/* ============================================================
   7. DISTRACCIÓN (N3)
   ============================================================ */
/* La distracción aparece centrada sobre el agente (en el centro de la
   escena). Antes vivía pegada a la esquina inferior-derecha; ahora se
   superpone al agente para que el jugador tenga que mirar al centro. */
.distraction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  animation: popIn .25s ease;
  pointer-events: none;          /* solo el card recibe clicks (el OK) */
}
.distraction .distraction-card { pointer-events: auto; }

@keyframes popIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.distraction-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  /* Sombra más marcada para destacar sobre el agente */
  box-shadow: 0 12px 32px rgba(20,30,55,.22), 0 0 0 1px rgba(20,30,55,.04);
  min-width: 300px;
  max-width: 360px;
  /* Fondo ligeramente translúcido para que se intuya al agente detrás */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(3px);
}
.distraction-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--navy-soft);
  color: var(--navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.distraction-icon svg { width: 18px; height: 18px; }
.distraction-body  { flex: 1; }
.distraction-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.distraction-text  { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.distraction-ok {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
}
.distraction-ok:hover { background: var(--navy-2); }


/* ============================================================
   8. CRITICAL ERROR overlay
   ----------------------------------------------------------------
   Múltiples cajas rojas "CRITICAL ERROR" parpadeando, repartidas
   por la pantalla con rotaciones y delays aleatorios.
   ============================================================ */
.critical-error {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(160,0,0,0.18) 0%, rgba(80,0,0,0.45) 80%);
}
.ce-box {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border: 2.5px solid #ff2a2a;
  background: rgba(20, 0, 0, 0.92);
  color: #ff6a6a;
  font-family: 'Inter', monospace;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(255, 60, 60, 0.4),
    0 0 24px rgba(255, 0, 0, 0.5);
  animation: ceBlink 0.55s steps(2, end) infinite;
  white-space: nowrap;
}
.ce-box .ce-icon {
  display: inline-flex;
  width: 24px; height: 24px;
  border: 2px solid #ff2a2a;
  align-items: center;
  justify-content: center;
  color: #ff6a6a;
  font-weight: 900;
  font-size: 16px;
  transform: rotate(0deg);
}
.ce-box .ce-text { color: #ff7a7a; }
@keyframes ceBlink {
  0%   { opacity: 1; }
  100% { opacity: 0.25; }
}


/* ============================================================
   9. OVERLAYS COMUNES (intro, end, cert)
   ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(244, 246, 250, 0.92);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 24px;
}


/* ============================================================
   9.4. QUIZ OVERLAY (pregunta de control antes del picker)
   ============================================================ */
.quiz-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  max-width: 720px;
  width: 100%;
  padding: 28px 32px;
}
.quiz-prompt {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
  color: var(--navy);
  font-weight: 700;
}
.quiz-question {
  margin: 0 0 22px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font);
  line-height: 1.4;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.quiz-option:hover:not(:disabled) {
  border-color: var(--navy);
  background: var(--navy-soft);
}
.quiz-option:active:not(:disabled) { transform: scale(.99); }
.quiz-option:disabled { cursor: default; }
.quiz-letter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--line-2);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 13px;
  margin-top: 1px;
}
.quiz-option.correct {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.quiz-option.correct .quiz-letter {
  background: var(--ok);
  color: #fff;
}
.quiz-option.selected {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.quiz-option.selected .quiz-letter {
  background: var(--danger);
  color: #fff;
}
.quiz-feedback {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  min-height: 1.4em;
}
.quiz-feedback.is-ok { color: #1f6a3a; }
.quiz-feedback.is-ko { color: var(--danger-2); }
.quiz-explanation {
  background: var(--navy-soft);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 16px;
}
.quiz-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.quiz-hint {
  margin: 6px 0 0;
  text-align: right;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}


/* ============================================================
   9.6. PICKER OVERLAY (selector de agente)
   ============================================================ */
.picker-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  max-width: 760px;
  width: 100%;
  padding: 28px 32px;
}
.picker-back {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.picker-back:hover {
  background: var(--line-2);
  color: var(--ink);
  border-color: var(--line);
}
.picker-back svg { width: 16px; height: 16px; }
.picker-head {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.picker-head h1 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.picker-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.picker-item {
  border: 2px solid var(--line);
  background: var(--panel-2);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease, background .15s ease;
  display: block;
}
.picker-item:hover {
  border-color: var(--navy);
  background: var(--navy-soft);
}
.picker-item:active { transform: scale(.96); }
.picker-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
.picker-name {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}
@media (max-width: 720px) {
  .picker-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .picker-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   9.5. WELCOME OVERLAY (nombre + código del agente)
   ----------------------------------------------------------------
   Primera pantalla, antes del quiz. Pide datos opcionales que
   firman el certificado AFOVA al final del juego.
   ============================================================ */
.welcome-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  max-width: 540px;
  width: 100%;
  padding: 30px 32px 26px;
}
.welcome-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.welcome-eyebrow {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.welcome-titles h1 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 700;
}
.welcome-subtitle {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.welcome-lang { justify-self: end; }

.welcome-form {
  display: grid;
  gap: 14px;
  margin: 0 0 12px;
}
.welcome-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.welcome-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.welcome-field input {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.welcome-field input::placeholder { color: var(--ink-3); }
.welcome-field input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31, 58, 115, 0.12);
}
.welcome-hint {
  margin: 4px 0 18px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.welcome-actions {
  display: flex;
  justify-content: flex-end;
}


/* ============================================================
   10. INTRO OVERLAY
   ============================================================ */
.intro-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  max-width: 880px;
  width: 100%;
  padding: 28px 32px;
}
.intro-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.intro-mentor {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--navy-soft);
  object-fit: cover;
  border: 2px solid var(--navy-soft);
}
.intro-titles h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intro-titles p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}
.intro-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  margin-bottom: 20px;
}
.intro-rule {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.intro-rule-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--navy-soft);
  color: var(--navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-rule-icon svg { width: 20px; height: 20px; }
.intro-rule h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.intro-rule p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}
.intro-actions,
.end-actions,
.cert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Botones */
.btn-primary,
.btn-secondary {
  border: 0;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s ease, transform .08s ease;
}
.btn-primary  { background: var(--navy); color: #fff; }
.btn-primary:hover  { background: var(--navy-2); }
.btn-primary:active { transform: scale(.98); }
.btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--line-2); }


/* ============================================================
   11. END SCREEN
   ============================================================ */
.end-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  max-width: 560px;
  width: 100%;
  padding: 28px 32px;
}
.end-badge {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--navy-soft);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.end-badge svg { width: 32px; height: 32px; }
.end-badge.is-fail { background: var(--danger-soft); color: var(--danger); }
.end-title {
  margin: 0 0 6px;
  text-align: center;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.end-subtitle {
  margin: 0 0 20px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}
.end-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.end-stats-2col { grid-template-columns: 1fr 1fr; }
.end-stat {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.end-stat-label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.end-stat b {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.end-lesson {
  background: var(--navy-soft);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.5;
  margin: 0 0 20px;
}


/* ============================================================
   12. CERTIFICATE
   ----------------------------------------------------------------
   Paleta pergamino + oro, consistente con call-organizer y
   behind-each-call. Sello, doble marco, nombre del jugador en
   cursiva serif y una única firma "AFOVA" con un texto descriptivo
   debajo de la línea (no se repite "AFOVA" dos veces).

   Tokens locales del cert (no se sacan a :root para no contaminar
   el resto del juego, que sigue siendo navy/blanco).
   ============================================================ */
.overlay.cert {
  background: rgba(28, 39, 51, 0.65);
  backdrop-filter: blur(2px);
}
.cert-card {
  position: relative;
  background: linear-gradient(180deg, #f5e8c8 0%, #ecd9a8 100%);
  color: #1a1a2a;
  border-radius: 4px;
  padding: 48px 56px 32px;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.4);
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
}
.cert-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid #8a6b1a;
  border-radius: 2px;
  pointer-events: none;
}
.cert-card::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid #d4a83a;
  border-radius: 1px;
  pointer-events: none;
}
.cert-seal {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  color: #5a4a1a;
  background: radial-gradient(#f0d890 0%, #d4a83a 60%, #8a6b1a 100%);
  border-radius: 50%;
  border: 2px solid #8a6b1a;
  box-shadow: inset -2px -3px 6px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.2);
}
.cert-seal svg { width: 60%; height: 60%; }

.cert-eyebrow {
  margin: 0 0 4px;
  color: #5a4a1a;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font);
}
.cert-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  margin: 0 0 18px;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: #5a4a1a;
  font-weight: 700;
}
.cert-intro {
  margin: 0 0 8px;
  font-size: 12px;
  color: #5a4a3a;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: var(--font);
}
.cert-recipient {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2a;
  margin: 6px 0 8px;
  padding: 0 24px 6px;
  display: inline-block;
  min-width: 280px;
  border-bottom: 1px solid rgba(90, 74, 26, 0.35);
}
.cert-code {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a4a3a;
  margin: 8px 0 0;
  font-family: var(--font);
}
.cert-code[hidden] { display: none; }
.cert-body {
  margin: 22px auto 28px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1a1a2a;
  max-width: 480px;
}
.cert-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: end;
  margin: 6px 4px 22px;
}
.cert-date-block,
.cert-signature-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cert-date-label,
.cert-signed-by {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a4a3a;
  font-family: var(--font);
  font-weight: 600;
}
.cert-date {
  font-size: 15px;
  color: #1a1a2a;
  font-weight: 700;
  font-family: 'Georgia', serif;
}
/* Bloque de firma: "AFOVA" grande arriba → línea → texto descriptivo.
   Así "AFOVA" sale UNA sola vez y la línea actúa como soporte de la firma. */
.cert-signature {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  color: #5a4a1a;
  line-height: 1;
  /* Pequeña rotación para imitar firma manuscrita */
  transform: rotate(-3deg);
  transform-origin: center bottom;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.cert-sig-line {
  display: block;
  width: 70%;
  height: 1px;
  background: #5a4a3a;
  margin: 2px auto 4px;
}
.cert-actions {
  justify-content: center;
  position: relative;
  z-index: 1;
}
.cert-actions .btn-primary {
  background: #8a6b1a;
  color: #f5e8c8;
}
.cert-actions .btn-primary:hover { background: #a37e1f; }
.cert-actions .btn-secondary {
  background: transparent;
  color: #5a4a1a;
  border: 1px solid #8a6b1a;
}
.cert-actions .btn-secondary:hover { background: rgba(138, 107, 26, 0.08); }

/* Imprimir: solo el certificado, sin overlay ni resto del juego. */
@media print {
  body * { visibility: hidden; }
  .overlay.cert, .overlay.cert * { visibility: visible; }
  .overlay.cert {
    position: absolute; inset: 0; background: #fff;
    backdrop-filter: none;
  }
  .cert-card { box-shadow: none; }
  .cert-actions { display: none; }
}


/* ============================================================
   13. RESPONSIVO
   ============================================================ */
@media (max-width: 980px) {
  .intro-rules { grid-template-columns: 1fr; }
  .panel-mission, .panel-remind { display: none; }
}
@media (max-height: 640px) {
  .panel { padding: 10px 12px; }
}