:root {
  --bg: #e6dcc3; --card: #f4ecd8; --text: #111827; --sub: #5b6472;
  --primary: #2563eb; --primary-hover: #1d4ed8; --border: #d1d5db;
  --ok-bg: #dcfce7; --ok-txt: #166534; --bad-bg: #fee2e2; --bad-txt: #991b1b;
  --wsp: #25d366; --wsp-hover: #1da851; --danger-bg: #fee2e2; --danger-txt: #991b1b;
  --danger-hover: #fecaca;
  --badge-bg: #ebe0c6; --badge-border: #d9ccab;

  /* ===== Atmósfera cálida del modo claro (v1.4) =====
     Capa ambiental muy sutil (halos dorados/crema) que se aplica al fondo
     general de la app y a las superficies principales/secundarias, para
     que el modo claro tenga más riqueza visual sin dejar de ser blanco y
     legible. Se define como tokens vacíos en modo oscuro (ver
     [data-theme="dark"] más abajo) para no afectarlo en absoluto. */
  --ambient-gold-glow:
    radial-gradient(120% 55% at 50% -8%, rgba(232,200,116,.20) 0%, rgba(232,200,116,.07) 30%, transparent 60%),
    radial-gradient(90% 45% at 100% 100%, rgba(201,153,46,.07) 0%, transparent 55%);
  --card-ambient-glow:
    radial-gradient(140% 60% at 50% -20%, rgba(232,200,116,.06) 0%, transparent 55%);

  /* ===== Sistema visual v1.2 (segunda pasada) =====
     Tokens coherentes reutilizados por Home y pantallas interiores.
     No sustituyen a los tokens anteriores (siguen usándose en el juego),
     solo añaden el vocabulario que faltaba para dejar de acumular overrides. */
  --primary-dark: #1849b3;
  --accent-gold: #c9992e;
  --accent-gold-light: #e8c874;
  --duel-purple: #7c3aed;
  --duel-purple-dark: #4c1d95;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-soft: 0 2px 10px rgba(17,24,39,.06);
  --shadow-card: 0 10px 26px rgba(17,24,39,.09);
  --shadow-elevated: 0 20px 45px rgba(17,24,39,.16);

  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* ===== v1.3 — Design System (tercera pasada) =====
     Capa semántica adicional: superficies, texto, bordes y familias de
     acento. Se define como alias del vocabulario anterior (--bg, --card,
     --text, --sub, --border, --primary...) para no romper ninguno de los
     ~300 usos existentes; el CSS nuevo (estados, foco, iconos) se apoya en
     esta capa, y el CSS antiguo puede migrarse a ella con calma. */
  --color-bg: var(--bg);
  --color-surface: var(--card);
  --color-surface-elevated: #fffefb;
  --color-surface-interactive: #faf5ea;
  --color-surface-muted: #f6efe0;
  --color-text: var(--text);
  --color-text-secondary: var(--sub);
  --color-text-muted: #5b6472;
  --color-text-inverse: #ffffff;
  --color-border: var(--border);
  --color-border-subtle: #e5e7eb;
  --color-border-strong: #9ca3af;
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-dark);
  --color-primary-light: #60a5fa;
  --color-primary-soft: rgba(37,99,235,.08);

  /* Familias de acento: strong / normal / soft / surface / text */
  --accent-blue-strong: #1d4ed8;   --accent-blue: #2563eb;   --accent-blue-soft: rgba(37,99,235,.14);   --accent-blue-surface: rgba(37,99,235,.07);   --accent-blue-text: #1d4ed8;
  --accent-purple-strong: #5b21b6; --accent-purple: #7c3aed; --accent-purple-soft: rgba(124,58,237,.16); --accent-purple-surface: rgba(124,58,237,.08); --accent-purple-text: #6d28d9;
  --accent-gold-strong: #92400e;   --accent-gold-mid: #c9992e; --accent-gold-soft: rgba(201,153,46,.18);  --accent-gold-surface: rgba(201,153,46,.09);  --accent-gold-text: #92400e;
  --accent-teal-strong: #0f766e;   --accent-teal: #0d9488;   --accent-teal-soft: rgba(13,148,136,.16);  --accent-teal-surface: rgba(13,148,136,.07);  --accent-teal-text: #0f766e;
  --accent-red-strong: #991b1b;    --accent-red: #dc2626;    --accent-red-soft: rgba(220,38,38,.16);    --accent-red-surface: rgba(220,38,38,.08);    --accent-red-text: #991b1b;

  --focus-ring: 0 0 0 3px rgba(37,99,235,.35);

  /* ===== Sir Edwards 2.0 — sistema visual (primera pasada gráfica) =====
     Identidad de marca, antes encerrada en #view-home y por tanto invisible
     para el resto de pantallas. Ahora es global:
       navy  = tinta de marca (títulos, estructura; en oscuro se invierte a crema)
       cream = superficie cálida de marca · gold = prestigio y detalles de marca
       purple = banda del sombrero / Duelo · burgundy = acento del personaje
     Roles (los que faltaban en la capa v1.3):
       superficie destacada --color-surface-highlight · borde de marca --color-border-accent
       estados: --state-lift (hover) / --state-press (active)
     Geometría: --radius-sm (controles, filas) / -md (cards) / -lg (principales, modales).
     Profundidad: --shadow-soft (ligera) / -card (media) / -elevated (importante). */
  --brand-navy: #16244a;
  --brand-navy-deep: #16244a;
  --brand-cream: #f4ecd8;
  --brand-cream-deep: #e8dcc0;
  --brand-gold: #c9992e;
  --brand-gold-light: #e8c874;
  --brand-purple: #5b2e8f;
  --brand-burgundy: #7b1f2e;
  --color-surface-highlight: #fdf7ea;
  --color-border-accent: rgba(201,153,46,.38);
  --state-lift: translateY(-2px);
  --state-press: scale(.98);

  /* ===== Prompt 2 — Motion System (Fase A: fundamento) =====
     Vocabulario común de duración/easing para que cada componente nuevo
     deje de inventar su propia curva. No sustituye los keyframes/estados
     ya existentes (streak, Lucidez, logros, etc.), solo evita duplicarlos
     hacia delante. Jerarquía de uso:
       micro   → botones, hover, focus, selección
       short   → feedback de respuesta, cambios de estado pequeños
       medium  → transición entre pantallas, entrada de cards/resultados
       special → Lucidez, Enigma, apariciones importantes de Sir Edwards */
  --motion-micro: 120ms;
  --motion-short: 180ms;
  --motion-medium: 260ms;
  --motion-special: 420ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-decelerate: cubic-bezier(0,0,.2,1);
  --ease-emphasized: cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] {
  /* Base con un ligero componente azul/gris (no gris neutro plano), y
     jerarquía de elevación por luminosidad en vez de por sombra negra. */
  --bg: #0f1420; --card: #1a2233; --text: #f3f4f6; --sub: #a3adc2;
  --primary: #5b9dff; --primary-hover: #7db1ff; --border: #2c3650;
  --ok-bg: #0d3b2e; --ok-txt: #b9f6da; --bad-bg: #4a1620; --bad-txt: #ffd0d6;
  --danger-bg: #4a1620; --danger-txt: #ffd0d6; --danger-hover: #5c1c28;
  --badge-bg: #212b40; --badge-border: #313d59;

  --shadow-soft: 0 1px 0 rgba(255,255,255,.02), 0 4px 14px rgba(0,0,0,.28);
  --shadow-card: 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.34);
  --shadow-elevated: 0 1px 0 rgba(255,255,255,.04), 0 24px 50px rgba(0,0,0,.45);

  --color-surface-elevated: #212b40;
  --color-surface-interactive: #232e46;
  --color-surface-muted: #171e2d;

  /* Modo oscuro: sin atmósfera cálida (mantiene su propia identidad). */
  --ambient-gold-glow: none;
  --card-ambient-glow: none;
  --color-text-muted: #8e99b4;
  --color-text-inverse: #0f1420;
  --color-border-subtle: #232c42;
  --color-border-strong: #465272;
  --color-primary-light: #8fc1ff;
  --color-primary-soft: rgba(91,157,255,.14);

  --accent-blue-surface: rgba(91,157,255,.10);   --accent-blue-soft: rgba(91,157,255,.20);   --accent-blue-text: #8fc1ff;
  --accent-purple-surface: rgba(167,139,250,.12); --accent-purple-soft: rgba(167,139,250,.24); --accent-purple-text: #c4b5fd; --accent-purple: #a78bfa; --accent-purple-strong: #c4b5fd;
  --accent-gold-surface: rgba(232,200,116,.10);   --accent-gold-soft: rgba(232,200,116,.22);   --accent-gold-text: #e8c874;   --accent-gold-mid: #e8c874;  --accent-gold-strong: #f3dfa0;
  --accent-teal-surface: rgba(45,212,191,.10);    --accent-teal-soft: rgba(45,212,191,.22);    --accent-teal-text: #5eead4;   --accent-teal: #2dd4bf;      --accent-teal-strong: #99f6e4;
  --accent-red-surface: rgba(248,113,113,.10);    --accent-red-soft: rgba(248,113,113,.22);    --accent-red-text: #fca5a5;    --accent-red: #f87171;       --accent-red-strong: #fecaca;

  --focus-ring: 0 0 0 3px rgba(91,157,255,.45);

  --brand-navy: #f4ede0;
  --brand-cream: #1b2338;
  --brand-cream-deep: #12182a;
  --brand-burgundy: #d0616f;
  --color-surface-highlight: #222b40;
  --color-border-accent: rgba(232,200,116,.30);
}

/* ===== Estados de foco e interacción (v1.3) =====
   Foco consistente en Light/Dark, sin depender del outline azul por
   defecto del navegador, que rompe con el resto del sistema visual. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
/* Alto contraste del sistema: las sombras se ignoran, así que el foco vuelve a ser un contorno real. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}
button, .btn, [role="button"], a, input, select, textarea {
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, filter .2s ease, opacity .2s ease;
}
button:disabled, .btn:disabled, [aria-disabled="true"] {
  opacity: .5; filter: saturate(.7); cursor: not-allowed;
}

/* Red de seguridad global (Prompt 2, sección 29): colapsa cualquier
   animación/transición a prácticamente instantánea cuando el sistema pide
   menos movimiento. No las elimina (el feedback de estado debe seguir
   siendo visible: correcto/incorrecto, streak, XP...), solo quita el
   desplazamiento. Los bloques @media(prefers-reduced-motion) específicos
   que ya existían más abajo en este archivo (medallas, Lucidez, resume
   card...) se mantienen y siguen aplicando además de esta regla. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
* { box-sizing: border-box; font-family: var(--font-ui); }
body { margin: 0; background-color: var(--bg); background-image: var(--ambient-gold-glow); background-repeat: no-repeat; color: var(--text); min-height: 100vh; display: flex; justify-content: center; position: relative; transition: background-color 0.3s, color 0.3s; }
.app { width: min(820px, 100%); }
.card { background-color: var(--card); background-image: var(--card-ambient-glow); background-repeat: no-repeat; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 10px 30px #00000012; position: relative; overflow: hidden; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

/* Modal de Benvinguda */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; overflow-y: auto; }
.modal-card { background: var(--card); border-radius: var(--radius-lg); padding: 28px; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-elevated); border: 1px solid var(--color-border-accent); animation: fadeInScale 0.3s ease-out; }
@media(max-width:600px){
  .home-subtitle > span:not(.home-sub-line):not(.home-sub-diamond){white-space:nowrap;font-size:10px;letter-spacing:1.05px;}

  .modal-card { padding: 20px; max-height: 80vh; }
    }
.modal-card:focus { outline: none; }   /* la tarjeta recibe el foco al abrir el modal (a11y.js) solo para anunciarse */
.modal-card h2 { margin-top: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand-navy); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.modal-card p { line-height: 1.5; font-size: 14px; color: var(--text); margin: 0 0 12px 0; }
.modal-card ul { padding-left: 20px; margin: 12px 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.modal-card li { margin-bottom: 6px; }

/* IDENTIDAD VISUAL DE LOS MODOS */

.card.theme-review {
  border: 3px solid #0d9488;
  background:
    radial-gradient(circle at 0% 0%, rgba(13,148,136,.10), transparent 34%),
    var(--card);
  box-shadow: 0 14px 40px rgba(13,148,136,.12);
}
.card.theme-standard {
  border: 2px solid #2563eb;
  background: var(--card);
}
.card.theme-survival {
  border: 3px solid #f6c453;
  background:
    radial-gradient(circle at 100% 0%, rgba(245,158,11,.09), transparent 34%),
    var(--card);
  box-shadow: 0 14px 40px rgba(245,158,11,.10);
}
.card.theme-sudden {
  border: 3px solid #dc2626;
  background:
    radial-gradient(circle at 50% 0%, rgba(220,38,38,.16), transparent 38%),
    linear-gradient(180deg, rgba(127,29,29,.035), transparent 35%),
    var(--card);
  box-shadow: 0 14px 42px rgba(220,38,38,.18);
}
.card.theme-timetrial {
  border: 3px solid #db2777;
  background:
    radial-gradient(circle at 0% 0%, rgba(219,39,119,.14), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(244,114,182,.10), transparent 35%),
    var(--card);
  box-shadow: 0 14px 42px rgba(219,39,119,.17);
}

/* Franja superior */
.card.theme-standard::before,
.card.theme-review::before,
.card.theme-survival::before,
.card.theme-sudden::before,
.card.theme-timetrial::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 2;
}
.card.theme-standard::before { background: #2563eb; }
.card.theme-review::before { background: #0d9488; }
.card.theme-survival::before { background: linear-gradient(90deg,#b45309,#f59e0b,#fbbf24,#f59e0b,#b45309); }
.card.theme-sudden::before {
  background: #dc2626;
  animation: suddenPulse 1.2s ease-in-out infinite;
}
.card.theme-timetrial::before { background: linear-gradient(90deg,#db2777,#f472b6,#db2777); }

@keyframes suddenPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .45; }
}

/* CABECERA: ahora cada modo tiene una identidad clara */
.card.theme-standard .mode-header,
.card.theme-review .mode-header,
.card.theme-survival .mode-header,
.card.theme-sudden .mode-header,
.card.theme-timetrial .mode-header {
  position: relative;
  margin: 4px 0 18px;
  padding: 12px 14px 12px 52px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 14px;
}


.card.theme-review .mode-header {
  color: #0f766e;
  background: rgba(13,148,136,.07);
  border: 1px solid rgba(13,148,136,.18);
}
.card.theme-review .mode-header::before {
  content: "";
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/repaso.webp") center / contain no-repeat;
}
.card.theme-standard .mode-header {
  color: #1d4ed8;
  background: rgba(37,99,235,.07);
  border: 1px solid rgba(37,99,235,.16);
}
.card.theme-standard .mode-header::before {
  content: "";
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/estandar.webp") center / contain no-repeat;
}

.card.theme-survival .mode-header {
  color: #92400e;
  background: rgba(245,158,11,.11);
  border: 1px solid rgba(245,158,11,.28);
}
.card.theme-survival .mode-header::before {
  content: "";
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/supervivencia.webp") center / contain no-repeat;
}

.card.theme-sudden .mode-header {
  color: #991b1b;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.25);
}
.card.theme-sudden .mode-header::before {
  content: "";
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/muerte-subita.webp") center / contain no-repeat;
}
.card.theme-sudden .mode-header::after {
  content: "UN SOLO FALLO";
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 900;
  opacity: .75;
}

.card.theme-timetrial .mode-header {
  color: #9d174d;
  background: linear-gradient(90deg,rgba(219,39,119,.11),rgba(244,114,182,.08));
  border: 1px solid rgba(219,39,119,.22);
  font-size: 15px;
}
.card.theme-timetrial .mode-header::before {
  content: "";
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/contrarreloj.webp") center / contain no-repeat;
}
.card.theme-timetrial .mode-header::after {
  content: "SPRINT";
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 900;
}
/* Dentro de la partida, el HUD (.game-hud) reutiliza la clase .mode-header,
   pero ahí la esquina derecha ya la ocupa el chip de racha (Racha):
   sin esto, "SPRINT" y el chip quedaban escritos uno encima del otro. */
.card.theme-timetrial .mode-header.game-hud::after {
  display: none;
}

/* BARRA DE PROGRESO */
.card.theme-standard .bar-fill { background: #2563eb; }
.card.theme-review .bar-fill { background: #0d9488; }
.card.theme-survival .bar-fill { background: linear-gradient(90deg,#d97706,#fbbf24); }
.card.theme-sudden .bar-fill { background: #dc2626; }
.card.theme-timetrial .bar-fill { background: linear-gradient(90deg,#db2777,#f472b6); }

.card.theme-survival .progress-bar {
  height: 11px;
  border: 2px solid rgba(245,158,11,.28);
  background: rgba(245,158,11,.08);
}
.card.theme-sudden .progress-bar {
  height: 10px;
  border: 2px solid rgba(220,38,38,.28);
  background: rgba(220,38,38,.08);
}
.card.theme-timetrial .progress-bar {
  height: 13px;
  border: 2px solid rgba(219,39,119,.25);
  background: rgba(219,39,119,.08);
}

/* PREGUNTA: tarjetas internas distintas */
.card.theme-review .q-box {
  border-left: 5px solid #0d9488;
  padding: 18px 18px 18px 16px;
  background: rgba(13,148,136,.035);
  border-radius: 0 14px 14px 0;
}

.card.theme-standard .q-box {
  border-left: 5px solid #2563eb;
  padding: 18px 18px 18px 16px;
  background: rgba(37,99,235,.035);
  border-radius: 0 14px 14px 0;
}

.card.theme-survival .q-box {
  border-left: 6px solid #f59e0b;
  padding: 20px 18px 20px 17px;
  background: rgba(245,158,11,.035);
  border-radius: 0 16px 16px 0;
}

.card.theme-sudden .q-box {
  border: 2px solid rgba(220,38,38,.22);
  border-left: 7px solid #dc2626;
  padding: 19px 18px;
  background: rgba(220,38,38,.055);
  border-radius: var(--radius-sm);
  box-shadow: 0 5px 18px rgba(220,38,38,.08);
}

.card.theme-timetrial .q-box {
  border: 2px solid rgba(219,39,119,.20);
  border-left: 7px solid #db2777;
  padding: 20px 18px;
  background: linear-gradient(90deg,rgba(219,39,119,.065),rgba(244,114,182,.035));
  border-radius: var(--radius-sm);
  font-size: 21px;
}

/* INPUT: cada modo parece un control diferente */
.card.theme-review input[type="text"] {
  border-color: rgba(13,148,136,.28);
  background: linear-gradient(90deg,var(--card),rgba(13,148,136,.025));
}

.card.theme-standard input[type="text"] {
  border-color: rgba(37,99,235,.25);
}
.card.theme-survival input[type="text"] {
  border-color: rgba(245,158,11,.35);
  background: linear-gradient(90deg,var(--card),rgba(245,158,11,.018));
}
.card.theme-sudden input[type="text"] {
  border-color: rgba(220,38,38,.35);
  background: linear-gradient(90deg,var(--card),rgba(220,38,38,.025));
}
.card.theme-timetrial input[type="text"] {
  border-color: rgba(219,39,119,.35);
  background: linear-gradient(90deg,var(--card),rgba(244,114,182,.025));
}

.card.theme-review input[type="text"]:focus { border-color:#0d9488; box-shadow:0 0 0 3px rgba(13,148,136,.12); }
.card.theme-standard input[type="text"]:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.card.theme-survival input[type="text"]:focus { box-shadow:0 0 0 4px rgba(245,158,11,.13); }
.card.theme-sudden input[type="text"]:focus { box-shadow:0 0 0 4px rgba(239,68,68,.14); }
.card.theme-timetrial input[type="text"]:focus { border-color:#f472b6; box-shadow:0 0 0 4px rgba(244,114,182,.13); }

/* BOTONES */
.card.theme-standard .btn-primary { background:#2563eb; }
.card.theme-review .btn-primary { background:#0d9488; }
.card.theme-timetrial .btn-primary { background:linear-gradient(90deg,#db2777,#9d174d); }

/* ===== ESTÁNDAR — pulido visual/UX (paso 1 de la revisión modo a modo) =====
   Solo CSS, sin tocar HTML/JS: la pregunta gana algo más de presencia
   frente al resto de elementos, las 4 respuestas tipo test ganan área
   táctil y un feedback de interacción más claro, y el HUD de progreso
   ("MODO ESTÁNDAR · x/20", ya generado por JS) gana legibilidad. Todo
   queda scoped a .card.theme-standard: no afecta a ningún otro modo. */
.card.theme-standard .q-box {
  box-shadow: 0 2px 10px rgba(37,99,235,.05);
}
.card.theme-standard #game-progress-lbl {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
/* Área táctil más cómoda (mínimo 48px de alto) y feedback de interacción
   más claro en las 4 opciones de Estándar: elevación con sombra al pasar
   el ratón (adicional al borde de acento ya existente) y un pequeño
   "hundido" al pulsar en móvil, para que se note la pulsación sin
   depender de una animación llamativa. Respeta prefers-reduced-motion
   (regla global en la cabecera del documento). */
.card.theme-standard #choice-options .choice-btn {
  min-height: 50px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card.theme-standard #choice-options .choice-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(37,99,235,.14);
}
.card.theme-standard #choice-options .choice-btn:active:not(:disabled) {
  transform: scale(.98);
}

/* ===== SUPERVIVENCIA — pulido visual/UX (paso 2 de la revisión modo a modo) =====
   Solo CSS, sin tocar HTML/JS: mismo criterio que Estándar (más presencia
   para la pregunta, más área táctil y feedback en las 4 opciones, HUD de
   progreso más legible), con el acento dorado/naranja propio de este modo.
   No toca el parpadeo de corazones (animateLifeLossHearts) ni ninguna
   lógica de vidas/puntuación: sigue siendo JS puro. Scoped a
   .card.theme-survival: no afecta a ningún otro modo. */
.card.theme-survival .q-box {
  box-shadow: 0 2px 12px rgba(245,158,11,.07);
}
.card.theme-survival #game-progress-lbl {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.card.theme-survival #choice-options .choice-btn {
  min-height: 50px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card.theme-survival #choice-options .choice-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(245,158,11,.18);
}
.card.theme-survival #choice-options .choice-btn:active:not(:disabled) {
  transform: scale(.98);
}

/* ===== MUERTE SÚBITA — pulido visual/UX (paso 3 de la revisión modo a modo) =====
   Solo CSS, sin tocar HTML/JS: mismo criterio que Estándar/Supervivencia
   (HUD de progreso más legible, más área táctil y feedback en las 4
   opciones), con el acento rojo propio de este modo. La .q-box de Muerte
   Súbita ya tenía sombra propia (línea ~404), así que aquí no se duplica.
   No toca el fin de partida al primer fallo ni ninguna otra lógica del
   modo: sigue siendo JS puro. Scoped a .card.theme-sudden: no afecta a
   ningún otro modo. */
.card.theme-sudden #game-progress-lbl {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.card.theme-sudden #choice-options .choice-btn {
  min-height: 50px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card.theme-sudden #choice-options .choice-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(220,38,38,.16);
}
.card.theme-sudden #choice-options .choice-btn:active:not(:disabled) {
  transform: scale(.98);
}

/* ===== CONTRARRELOJ — pulido visual/UX (paso 4 de la revisión modo a modo) =====
   Solo CSS, sin tocar HTML/JS: mismo criterio que los modos anteriores
   (HUD de progreso más legible, más área táctil y feedback en las 4
   opciones), con el acento morado/cian propio de este modo. No toca el
   cronómetro (#tt-timer-num), el aviso +3s/-3s (.timetrial-change) ni el
   tic-tac de los últimos segundos, que son lógica/JS específicos del modo
   y no se han modificado. Scoped a .card.theme-timetrial: no afecta a
   ningún otro modo. */
.card.theme-timetrial #game-progress-lbl {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.card.theme-timetrial #choice-options .choice-btn {
  min-height: 50px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.card.theme-timetrial #choice-options .choice-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(219,39,119,.16);
}
.card.theme-timetrial #choice-options .choice-btn:active:not(:disabled) {
  transform: scale(.98);
}

/* DETALLES EXTRA */
 .card.theme-timetrial .actions::before {
  content: "Cada acierto añade +3 segundos";
  display: none;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  color: #be185d;
  margin-bottom: 2px;
}

/* Feedback de +3s/-3s de Contrarreloj: centrado en pantalla (position:fixed)
   para que sea imposible de perder, grande y con colores sólidos de alto
   contraste (fondo de color + texto blanco) en vez de depender del color de
   texto sobre el fondo de la tarjeta, que pasaba desapercibido. No bloquea
   clics (pointer-events:none) y un cambio nuevo sustituye al anterior en
   vez de acumularse (ver playTimeTrialChangeFX). */
.timetrial-change {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  padding: 12px 26px 13px;
  border-radius: 14px;
  /* Estilo Sir Edwards: borde dorado, serif y verde bosque / granate en vez de verde y rojo de semáforo. */
  border: 2px solid var(--se-gold, #c9992e);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  color: #fff3d0;
  text-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.timetrial-change.show.tt-gain {
  background: linear-gradient(180deg, #2f8456, #1c5a38);
  box-shadow: inset 0 0 0 2px rgba(10,30,18,.35), inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(28,90,56,.5);
  animation: ttChangeUp 800ms ease-out forwards;
}
.timetrial-change.show.tt-loss {
  background: linear-gradient(180deg, #a52a3d, #701828);
  box-shadow: inset 0 0 0 2px rgba(40,6,14,.35), inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(112,24,40,.5);
  animation: ttChangeDown 800ms ease-out forwards;
}
/* Misma pieza visual que Contrarreloj (.timetrial-change), pero en el
   morado propio de Lucidez Mental (#6d28d9) en vez del granate de "fallo",
   para que la penalización de tiempo en Fase III se distinga del simple
   feedback de "incorrecto" que ya se muestra debajo de la pregunta. */
.timetrial-change.show.lucidez-loss {
  background: linear-gradient(180deg, #6a35bd, #44208a);
  box-shadow: inset 0 0 0 2px rgba(20,8,50,.35), inset 0 1px 0 rgba(255,255,255,.2), 0 12px 30px rgba(68,32,138,.5);
  animation: ttChangeDown 800ms ease-out forwards;
}

@keyframes ttChangeUp {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  25%  { transform: translate(-50%,-50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%,-58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-68%) scale(.92); }
}
@keyframes ttChangeDown {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  25%  { transform: translate(-53%,-50%) scale(1); }
  35%  { transform: translate(-47%,-50%) scale(1); }
  45%  { transform: translate(-52%,-50%) scale(1); }
  55%  { transform: translate(-50%,-50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%,-46%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-40%) scale(.92); }
}

/* El propio número del cronómetro también reacciona: doble confirmación
   visual (aparece el "+3"/"-3" Y el número parpadea de color). Importante:
   NO se usa display:inline-block ni transform aquí. La primera versión sí
   lo hacía para poder aplicarle un scale(), pero convertir el número en su
   propia caja de bloque hacía que algunos visores/webviews móviles lo
   trataran como un "bloque de texto" independiente y le aplicaran su
   propio ajuste automático de tamaño de letra, agrandándolo y
   desalineándolo del resto de la frase — persistía incluso forzando
   font/line-height/text-size-adjust. Con un <span> puramente inline y solo
   una animación de opacidad/color (que no requiere generar una caja nueva)
   ese problema desaparece de raíz, a costa de perder el efecto de escala. */
#tt-timer-num.tt-timer-flash-up,
#mc-timer-num.tt-timer-flash-up {
  color: var(--ok-txt);
  animation: ttTimerPulse 800ms ease-out;
}
/* Flash del número de Fase III: morado en vez de rojo (ver .lucidez-loss
   más arriba), para mantener el mismo código de color en todo el aviso. */
#lucidez-p3-timer-num.lucidez-timer-flash-down {
  color: #8b5cf6;
  animation: ttTimerPulse 800ms ease-out;
}
#tt-timer-num.tt-timer-flash-down,
#mc-timer-num.tt-timer-flash-down {
  color: var(--bad-txt);
  animation: ttTimerPulse 800ms ease-out;
}
@keyframes ttTimerPulse {
  0%, 100% { opacity: 1; }
  35% { opacity: .3; }
  65% { opacity: 1; }
}

[data-theme="dark"] .card.theme-standard .mode-header { color:#93c5fd; }
[data-theme="dark"] .card.theme-review .mode-header { color:#5eead4; }
[data-theme="dark"] .card.theme-survival .mode-header { color:#fcd34d; }
[data-theme="dark"] .card.theme-sudden .mode-header { color:#fca5a5; }
[data-theme="dark"] .card.theme-timetrial .mode-header { color:#f9a8d4; }
[data-theme="dark"] .card.theme-sudden .actions::before { color:#fca5a5; }
[data-theme="dark"] .card.theme-timetrial .actions::before { color:#f9a8d4; }


/* ====== TEMA: CÁLCULO MENTAL (verde, ritmo rápido) ====== */
.card.theme-mentalcalc {
  border: 3px solid #14532d;
  background:
    radial-gradient(circle at 0% 0%, rgba(21,128,61,.14), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(34,197,94,.10), transparent 35%),
    var(--card);
  box-shadow: 0 14px 42px rgba(21,128,61,.17);
}
.card.theme-mentalcalc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 2;
  background: linear-gradient(90deg,#14532d,#16a34a,#14532d);
}
.card.theme-mentalcalc .mode-header {
  position: relative;
  margin: 4px 0 18px;
  padding: 12px 14px 12px 52px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 15px;
  color: #14532d;
  background: linear-gradient(90deg,rgba(21,128,61,.11),rgba(34,197,94,.08));
  border: 1px solid rgba(21,128,61,.22);
}
.card.theme-mentalcalc .mode-header::before {
  content: "";
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/calculo-turbo.webp") center / contain no-repeat;
}
.card.theme-mentalcalc .mode-header::after {
  content: "AGILIDAD";
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 900;
}
/* Dentro de la partida, el HUD (.game-hud) reutiliza la clase .mode-header,
   pero ahí la esquina derecha ya la ocupa el chip de racha (Racha):
   sin esto, "AGILIDAD" y el chip quedaban escritos uno encima del otro. */
.card.theme-mentalcalc .mode-header.game-hud::after {
  display: none;
}
.card.theme-mentalcalc .bar-fill { background: linear-gradient(90deg,#14532d,#16a34a); }
.card.theme-mentalcalc .progress-bar {
  height: 13px;
  border: 2px solid rgba(21,128,61,.25);
  background: rgba(21,128,61,.08);
}
.card.theme-mentalcalc .q-box {
  border: 2px solid rgba(21,128,61,.20);
  border-left: 7px solid #14532d;
  padding: 20px 18px;
  background: linear-gradient(90deg,rgba(21,128,61,.065),rgba(34,197,94,.035));
  border-radius: var(--radius-sm);
  font-size: 26px;
  text-align: center;
  font-weight: 900;
}
.card.theme-mentalcalc input[type="text"] {
  border-color: rgba(21,128,61,.35);
  background: linear-gradient(90deg,var(--card),rgba(21,128,61,.025));
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}
.card.theme-mentalcalc input[type="text"]:focus { border-color:#14532d; box-shadow:0 0 0 4px rgba(21,128,61,.13); }
.card.theme-mentalcalc .btn-primary { background:linear-gradient(90deg,#14532d,#15803d); }
.card.theme-mentalcalc .actions::before {
  content: "La dificultad sube con tu racha de aciertos";
  display: none;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  color: #14532d;
  margin-bottom: 2px;
}
[data-theme="dark"] .card.theme-mentalcalc .mode-header { color:#86c59a; }
[data-theme="dark"] .card.theme-mentalcalc .actions::before { color:#86c59a; }

/* ===== CÁLCULO MENTAL — pulido visual/UX (paso 5 de la revisión modo a modo) =====
   Solo CSS, sin tocar HTML/JS: este modo no usa las 4 opciones tipo test
   (#choice-options), sino una respuesta numérica por texto, así que el
   pulido se centra en dar más presencia a la operación (.q-box) y en la
   legibilidad del HUD combinado de cronómetro + puntuación
   ("CÁLCULO MENTAL · Xs | Y pts", ya generado por JS). No toca el
   cronómetro, el tic-tac de los últimos segundos ni la subida de
   dificultad por racha, que son lógica/JS específicos del modo. Scoped a
   .card.theme-mentalcalc: no afecta a ningún otro modo. */
.card.theme-mentalcalc .q-box {
  box-shadow: 0 2px 12px rgba(21,128,61,.09);
}
.card.theme-mentalcalc #game-progress-lbl {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}


/* ====== TEMA: LUCIDEZ MENTAL (violeta, el desafío definitivo) ====== */
.card.theme-lucidez {
  border: 3px solid #6d28d9;
  background:
    radial-gradient(circle at 0% 0%, rgba(109,40,217,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(6,182,212,.10), transparent 38%),
    var(--card);
  box-shadow: 0 14px 44px rgba(109,40,217,.20);
  /* Prompt 2 — Fase D (sección 19): la intensidad de color sube por fase
     (lucidez-fase-1/2/3, más abajo) cambiando border-color/box-shadow al
     vuelo vía lucidezApplyPhaseVisuals(). Antes era un corte instantáneo;
     con esto se funde de una fase a la siguiente. El fondo (gradientes
     radiales) no se transiciona: los navegadores no interpolan entre dos
     conjuntos de gradiente distintos, así que intentarlo no tendría efecto
     visual, solo coste. No toca color/estructura, solo cómo se llega a él. */
  transition: border-color var(--motion-special) var(--ease-standard), box-shadow var(--motion-special) var(--ease-standard);
}
.card.theme-lucidez::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 2;
  background: linear-gradient(90deg,#6d28d9,#a78bfa,#06b6d4,#a78bfa,#6d28d9);
}
.card.theme-lucidez .mode-header {
  position: relative;
  margin: 4px 0 18px;
  padding: 12px 14px 12px 52px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 15px;
  color: #4c1d95;
  background: linear-gradient(90deg,rgba(109,40,217,.13),rgba(6,182,212,.08));
  border: 1px solid rgba(109,40,217,.28);
}
.card.theme-lucidez .mode-header::before {
  content: "";
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  background: url("../assets/modes/suelto/secreto.webp") center / contain no-repeat;
}
.card.theme-lucidez .mode-header::after {
  content: "DESAFÍO FINAL";
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 900;
}
/* Dentro de la partida, el HUD (.game-hud) reutiliza la clase .mode-header,
   pero ahí la esquina derecha ya la ocupa el chip de racha (Racha):
   sin esto, "DESAFÍO FINAL" y el chip quedaban escritos uno encima del otro. */
.card.theme-lucidez .mode-header.game-hud::after {
  display: none;
}
.card.theme-lucidez .bar-fill { background: linear-gradient(90deg,#6d28d9,#06b6d4); }
.card.theme-lucidez .progress-bar {
  height: 13px;
  border: 2px solid rgba(109,40,217,.28);
  background: rgba(109,40,217,.08);
}
.card.theme-lucidez .q-box {
  border: 2px solid rgba(109,40,217,.22);
  border-left: 7px solid #6d28d9;
  padding: 20px 18px;
  background: linear-gradient(90deg,rgba(109,40,217,.06),rgba(6,182,212,.03));
  border-radius: var(--radius-sm);
}
.card.theme-lucidez input[type="text"] {
  border-color: rgba(109,40,217,.35);
  background: linear-gradient(90deg,var(--card),rgba(109,40,217,.025));
}
.card.theme-lucidez input[type="text"]:focus { border-color:#6d28d9; box-shadow:0 0 0 4px rgba(109,40,217,.14); }
.card.theme-lucidez .btn-primary { background:linear-gradient(90deg,#6d28d9,#7c3aed); }
.card.theme-lucidez .actions::before {
  content: "30 preguntas. Sin red. Sin vuelta atrás.";
  display: none;
  width: 100%;
  font-size: 11px;
  font-weight: 800;
  color: #5b21b6;
  margin-bottom: 2px;
}
[data-theme="dark"] .card.theme-lucidez .mode-header { color:#ddd6fe; }
[data-theme="dark"] .card.theme-lucidez .actions::before { color:#c4b5fd; }

/* ===== LUCIDEZ MENTAL — pulido visual/UX (paso 6, último modo de la
   revisión modo a modo) =====
   Solo CSS, sin tocar HTML/JS. Este modo es el más elaborado (4 fases con
   intensidad visual progresiva, temporizadores propios de Fase III y del
   Último Enigma, revelado de preguntas a los 3s en Fase II, overlay
   narrativo entre fases) y ya tenía una identidad muy cuidada y madura, así
   que el pulido aquí es deliberadamente mínimo para no diluirla ni
   convertirla en una copia de Estándar: solo se añade una sombra sutil a
   la pregunta base (.q-box, en la línea de la que ya tienen Estándar y
   Supervivencia) y se mejora la legibilidad tipográfica del HUD de
   progreso, sin tocar el chip de temporizador (.lucidez-timer-chip) que ya
   vive dentro de ese mismo HUD. Como el resto de fases (Fase II, Fase III,
   Último Enigma) no redefinen estas dos propiedades, el ajuste se hereda
   de forma coherente en toda la partida sin pisar ninguno de sus
   tratamientos específicos. No toca el revelado a 3s de Fase II, el reloj
   de 45s de Fase III, el reloj del Último Enigma ni el overlay narrativo.
   Scoped a .card.theme-lucidez: no afecta a ningún otro modo. */
.card.theme-lucidez .q-box {
  box-shadow: 0 2px 12px rgba(109,40,217,.08);
}
.card.theme-lucidez #game-progress-lbl {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
/* Prompt 2 — Fase D (secciones 18-20): el enunciado "se enfoca" al
   aparecer — encaja con el resto de la identidad de Lucidez (misteriosa,
   intelectual) y, en la Fase II, además vende bien la mecánica real de
   memoria: el texto que aparece a los 3s (revealDelay, sin cambios) entra
   con el mismo pequeño desenfoque que el resto. Clase añadida por JS
   (lucidezRevealQText()) justo antes de escribir el texto nuevo, en los
   mismos puntos donde ya se escribía. */
#q-text.lucidez-text-reveal {
  animation: lucidezTextReveal var(--motion-medium) var(--ease-standard) both;
}
@keyframes lucidezTextReveal {
  0% { opacity: .3; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); }
}

/* ---- Subtítulo narrativo de fase (Lucidez Mental): eliminado a
   petición del usuario para dejar el título de cada fase limpio;
   el elemento se mantiene en el HTML pero ya no se muestra. ---- */
.lucidez-phase-subtitle {
  display: none;
  margin: -10px 0 14px;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .2px;
  color: #6d28d9;
  opacity: .85;
}
.card.theme-lucidez .lucidez-phase-subtitle { display: none; }
[data-theme="dark"] .lucidez-phase-subtitle { color: #c4b5fd; }

/* ---- Fase I: mismo tratamiento base, con un pequeño acento propio ---- */
.card.theme-lucidez.lucidez-fase-1 .mode-header::after { content: "FASE I"; }
.card.theme-lucidez.lucidez-fase-1 .mode-header {
  box-shadow: inset 3px 0 0 0 rgba(6,182,212,.45);
}

/* ---- Progresión de intensidad por fase ---- */
/* Fase I · La mente despierta: se queda en el tratamiento base (limpio). */

/* Fase II · Las conexiones se estrechan: sube el contraste. */
.card.theme-lucidez.lucidez-fase-2 {
  border-color: #5b21b6;
  box-shadow: 0 14px 46px rgba(91,33,182,.26);
  background:
    radial-gradient(circle at 0% 0%, rgba(109,40,217,.22), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(6,182,212,.14), transparent 40%),
    var(--card);
}
.card.theme-lucidez.lucidez-fase-2 .mode-header {
  border-color: rgba(91,33,182,.4);
  background: linear-gradient(90deg,rgba(91,33,182,.18),rgba(6,182,212,.10));
}
.card.theme-lucidez.lucidez-fase-2 .q-box { border-left-color: #5b21b6; }

/* Fase III · El abismo cognitivo está cerca: violeta profundo + cian de acento. */
.card.theme-lucidez.lucidez-fase-3 {
  border-color: #4c1d95;
  box-shadow: 0 16px 52px rgba(76,29,149,.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(109,40,217,.30), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(6,182,212,.18), transparent 44%),
    var(--card);
}
.card.theme-lucidez.lucidez-fase-3 .mode-header {
  border-color: rgba(6,182,212,.45);
  background: linear-gradient(90deg,rgba(76,29,149,.24),rgba(6,182,212,.14));
  color: #4c1d95;
}
.card.theme-lucidez.lucidez-fase-3 .q-box {
  border-left-color: #06b6d4;
  border-color: rgba(6,182,212,.35);
}
.card.theme-lucidez.lucidez-fase-3 .progress-bar { border-color: rgba(6,182,212,.4); }
.card.theme-lucidez.lucidez-fase-3 .bar-fill { background: linear-gradient(90deg,#4c1d95,#06b6d4); }

/* Temporizador protagonista en Fase III y en El Último Enigma */
#game-progress-lbl .lucidez-timer-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(6,182,212,.14);
  border: 1px solid rgba(6,182,212,.4);
  color: #0e7490;
}
/* 2.0: en oscuro la cabecera de la Fase III heredaba el violeta profundo del modo claro (#4c1d95) y el chip no tenía color propio. */
[data-theme="dark"] .card.theme-lucidez.lucidez-fase-3 .mode-header { color: #ddd6fe; }
[data-theme="dark"] #game-progress-lbl .lucidez-timer-chip { color: #a5f3fc; background: rgba(34,211,238,.16); border-color: rgba(103,232,249,.55); }
#game-progress-lbl .lucidez-timer-chip.lucidez-timer-low {
  animation: lucidezTimerPulse .8s ease-in-out infinite;
  background: rgba(220,38,38,.16);
  border-color: rgba(220,38,38,.55);
  color: #b91c1c;
}
[data-theme="dark"] #game-progress-lbl .lucidez-timer-chip.lucidez-timer-low { color: #fca5a5; }
@keyframes lucidezTimerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,.35); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(220,38,38,0); }
}

/* ---- El Último Enigma: pantalla especial ---- */
.card.theme-lucidez.lucidez-enigma-final {
  border-color: #2e1065;
  background:
    radial-gradient(circle at 50% 0%, rgba(109,40,217,.34), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(6,182,212,.16), transparent 50%),
    var(--card);
  box-shadow: 0 18px 60px rgba(46,16,101,.4);
}
.card.theme-lucidez.lucidez-enigma-final .mode-header,
.card.theme-lucidez.lucidez-enigma-final .progress-bar {
  display: none;
}
.card.theme-lucidez.lucidez-enigma-final .lucidez-phase-subtitle {
  display: none;
}
.lucidez-enigma-header {
  display: none;
  text-align: center;
  margin-bottom: 14px;
}
.card.theme-lucidez.lucidez-enigma-final .lucidez-enigma-header { display: block; }
.lucidez-enigma-eye { font-size: 40px; line-height: 1; margin-bottom: 2px; }
.lucidez-enigma-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #4c1d95;
}
[data-theme="dark"] .lucidez-enigma-title { color: #ddd6fe; }
.lucidez-enigma-timer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 18px;
  border-radius: var(--radius-pill);
  font-weight: 900;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  background: rgba(6,182,212,.14);
  border: 1px solid rgba(6,182,212,.4);
  color: #0e7490;
}
.lucidez-enigma-timer .seq-ico { width: 1.05em; height: 1.05em; }
.lucidez-enigma-note {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #5b21b6;
}
[data-theme="dark"] .lucidez-enigma-note { color: #c4b5fd; }
[data-theme="dark"] .lucidez-enigma-timer { color: #67e8f9; }
.lucidez-enigma-timer.lucidez-timer-low {
  animation: lucidezTimerPulse .7s ease-in-out infinite;
  background: rgba(220,38,38,.16);
  border-color: rgba(220,38,38,.55);
  color: #b91c1c;
}
[data-theme="dark"] .lucidez-enigma-timer.lucidez-timer-low { color: #fca5a5; }
.card.theme-lucidez.lucidez-enigma-final .q-box {
  border: 2px solid rgba(109,40,217,.35);
  border-left: none;
  background: linear-gradient(180deg,rgba(109,40,217,.09),rgba(6,182,212,.04));
  border-radius: var(--radius-md);
  text-align: center;
  justify-content: center;
  font-size: 21px;
  padding: 24px 18px;
}

/* ---- Transición y desenlace narrativo (overlay a pantalla completa) ---- */
.lucidez-story-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #4c1d95, #140a28 92%);
  animation: lucidezOverlayFade .35s ease-out;
}
.lucidez-story-overlay > div { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.lucidez-story-overlay.show { display: flex; }
/* Sir Edwards 2.0 (Prompt 1.5, corrección): retrato de fase, remate visual
   DEBAJO del título/frase (título → frase → personaje). Oculto por defecto;
   cuando se muestra (transición de entrada a Fase I/II/III/Enigma), sustituye
   al emoji  de siempre para no duplicar el mismo papel visual, que sigue
   intacto para el resto de transiciones (desenlaces). Tres de los cuatro
   assets llegan con un fondo casi blanco muy ceñido al personaje (apenas
   margen); mask-image difumina solo ese borde estrecho hacia el fondo
   oscuro del overlay en vez de alterar los colores de la ilustración
   (prohibido) — no recorta sombrero, cara, manos ni botas, que quedan
   dentro del área totalmente opaca de la máscara. */
.lucidez-story-character { display: none; margin: 16px auto 0; }
.lucidez-story-character.show { display: block; }
.lucidez-story-overlay.has-character .lucidez-story-icon { display: none; }
.lucidez-story-character img {
  display: block;
  margin: 0 auto;
  max-width: min(78vw, 300px);
  max-height: 46vh; max-height: 46dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
  -webkit-mask-image: radial-gradient(ellipse 74% 84% at 50% 48%, #000 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 84% at 50% 48%, #000 84%, transparent 100%);
  animation: lucidezOverlayPop .6s ease-out;
}
.lucidez-story-overlay .lucidez-story-icon { font-size: 46px; margin-bottom: 10px; animation: lucidezOverlayPop .6s ease-out; }
.lucidez-story-overlay .lucidez-story-img { display: block; width: 64px; height: 64px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.lucidez-story-overlay .lucidez-story-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #f5f3ff;
  text-shadow: 0 0 18px rgba(167,139,250,.7);
  margin-bottom: 8px;
}
.lucidez-story-overlay .lucidez-story-sub {
  font-size: 15px;
  max-width: 320px;
  line-height: 1.35;
  text-wrap: balance;
  font-style: italic;
  color: #ddd6fe;
  opacity: .9;
}
.lucidez-story-overlay.tone-fail { background: radial-gradient(circle at 50% 40%, #44198a, #0f0a19 92%); }
.lucidez-story-overlay.tone-fail .lucidez-story-title { color: #f1f5f9; text-shadow: 0 0 16px rgba(148,163,184,.5); }
.lucidez-story-overlay.tone-success .lucidez-story-icon { animation: lucidezOverlayGlow 1.1s ease-in-out infinite; }
/* Prompt 2 — Fase D (sección 20): el Enigma es la culminación de Lucidez,
   así que su retrato recibe el mismo glow ya usado para el logro más
   especial (lucidezOverlayGlow, sin tocar), además de la entrada normal
   (lucidezOverlayPop). Bounded por la propia duración del overlay
   (2.3s, sin cambios), no es un bucle permanente en pantalla. */
.lucidez-story-character[data-character="enigma"] img {
  animation: lucidezOverlayPop .6s ease-out, lucidezOverlayGlow 1.4s ease-in-out .5s infinite;
}
@keyframes lucidezOverlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lucidezOverlayPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lucidezOverlayGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(167,139,250,.6)); } 50% { filter: drop-shadow(0 0 22px rgba(103,232,249,.9)); } }
@media (prefers-reduced-motion: reduce) {
  .lucidez-story-overlay, .lucidez-story-overlay .lucidez-story-icon,
  .lucidez-story-character img,
  #game-progress-lbl .lucidez-timer-chip.lucidez-timer-low,
  .lucidez-enigma-timer.lucidez-timer-low { animation: none; }
}

/* ====== MEJORAS VISUALES: MODOS / ESTADÍSTICAS / LOGROS ====== */

/* Selector de modos */
.mode-grid .mode-card{
  position:relative;
  overflow:hidden;
  border:2px solid transparent;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mode-grid .mode-card:hover{
  transform:translateY(-4px);
}
.mode-card::after{
  content:'';
  position:absolute;
  right:-38px;
  top:-38px;
  width:100px;height:100px;
  border-radius:50%;
  opacity:.10;
}
.mode-standard::after{background:#2563eb}
.mode-review::after{background:#0d9488}
.mode-survival::after{background:#f59e0b}
.mode-sudden::after{background:#dc2626}
.mode-timetrial::after{background:#db2777}
.mode-mentalcalc::after{background:#14532d}
.mode-lucidez::after{background:#6d28d9}

.mode-card .mode-icon{
  width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  font-size:30px;
  margin-bottom:12px;
  box-shadow:0 5px 16px rgba(0,0,0,.08);
}
.mode-standard .mode-icon{background:rgba(37,99,235,.12)}
.mode-review .mode-icon{background:rgba(13,148,136,.12)}
.mode-survival .mode-icon{background:rgba(245,158,11,.14)}
.mode-sudden .mode-icon{background:rgba(220,38,38,.12)}
.mode-timetrial .mode-icon{background:linear-gradient(135deg,rgba(219,39,119,.14),rgba(244,114,182,.12))}
.mode-mentalcalc .mode-icon{background:linear-gradient(135deg,rgba(21,128,61,.14),rgba(34,197,94,.12))}

.mode-card .mode-subtitle{
  display:block;
  line-height:1.35;
  opacity:.78;
}
.mode-standard .mode-subtitle{color:#2563eb}
.mode-review .mode-subtitle{color:#0f766e}
.mode-survival .mode-subtitle{color:#b45309}
.mode-sudden .mode-subtitle{color:#b91c1c}
.mode-timetrial .mode-subtitle{color:#be185d}
.mode-mentalcalc .mode-subtitle{color:#14532d}
.mode-lucidez .mode-subtitle{color:#6d28d9}
.mode-lucidez .lucidez-phase-line strong{color:#6d28d9}
/* v1.3 — auditoría Jugar: estos tonos *-700 se pensaban solo para fondo
   claro y no tenían variante oscura; en Dark el mentalcalc (#18181b) era
   prácticamente invisible sobre la tarjeta oscura y el resto perdía
   contraste. Se aclaran usando la misma familia de acento que ya usa
   el resto del sistema en Dark. */
[data-theme="dark"] .mode-standard .mode-subtitle{color:var(--accent-blue-text)}
[data-theme="dark"] .mode-review .mode-subtitle{color:var(--accent-teal-text)}
[data-theme="dark"] .mode-survival .mode-subtitle{color:var(--accent-gold-text)}
[data-theme="dark"] .mode-sudden .mode-subtitle{color:var(--accent-red-text)}
[data-theme="dark"] .mode-timetrial .mode-subtitle{color:#f9a8d4}
[data-theme="dark"] .mode-mentalcalc .mode-subtitle{color:#86c59a}
[data-theme="dark"] .mode-lucidez .mode-subtitle{color:#c4b5fd}
[data-theme="dark"] .mode-lucidez .lucidez-phase-line strong{color:#c4b5fd}
.mode-standard > p:not(.mode-req),
.mode-review > p:not(.mode-req),
.mode-lucidez > p:not(.mode-req){
  margin-top:14px;
}

.performance-title{
align-items:center;
}
.performance-bar{
min-width:10px;
}
@media(max-width:700px){
  }

/* Logros como colección */
.achievement-card{
  position:relative;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.achievement-card.unlocked{
  border-color:rgba(212,175,55,.52);
  background:
    radial-gradient(circle at 0% 0%,rgba(245,215,110,.18),transparent 35%),
    linear-gradient(145deg,rgba(212,175,55,.08),var(--card) 60%);
  box-shadow:0 7px 22px rgba(212,175,55,.10);
}
.achievement-card.unlocked:hover{transform:translateY(-3px)}
.achievement-card.unlocked .achievement-icon{
  font-size:38px;
  width:66px;height:66px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg,#fff7cc,#fef3c7);
  border:2px solid rgba(212,175,55,.60);
  box-shadow:0 4px 16px rgba(212,175,55,.20);
}
.achievement-card.unlocked .achievement-name{font-weight:900}
.achievement-card.locked .achievement-icon{
  font-size:30px;
  filter:grayscale(1);
  opacity:.45;
}
.achievement-card.locked{
  opacity:.82;
  background:linear-gradient(145deg,rgba(127,127,127,.045),var(--card));
}
.achievement-card.locked .achievement-name{
  font-weight:900;
  letter-spacing:.5px;
}
.achievement-secret{
  text-align:center;
  font-size:10px;
  font-weight:800;
  opacity:.55;
  margin-top:5px;
}

.achievement-toast .toast-small{
  text-transform:uppercase;opacity:.7;
}
[data-theme="dark"] .achievement-toast{
  background:linear-gradient(135deg,#33280d,#3a2c0d);
  color:#fde68a;
  border-color:rgba(251,191,36,.5);
}

/* Canvas Confetti */
#confetti-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99; }

/* Header & Badges */
.top-bar { justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
/* Dentro de una partida, la racha/nivel/XP ya se muestran en el propio
   marcador de la partida: se ocultan aquí para no duplicar información. */
body.in-game .stats-badges { display: none; }
.brand { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.stats-badges { display: flex; gap: 8px; font-weight: 700; font-size: 13px; flex-wrap: wrap; }
.badge { background: var(--badge-bg); padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--badge-border); }

/* Nav */
.nav-wrap { position: relative; }
.nav-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 4px; width: 22px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--card)); }
.nav { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid var(--border); overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tab-btn { background: none; border: none; padding: 8px 12px; font-weight: 700; color: var(--sub); cursor: pointer; border-radius: 8px 8px 0 0; white-space: nowrap; }
.tab-btn.active { color: var(--primary); border-bottom: 3px solid var(--primary); background: var(--badge-bg); }

/* Views */
.view { display: none; }
/* Transición de navegación (Prompt 2, sección 6): puramente visual, no
   retrasa nada — switchTab() ya intercambia display:none/block al
   instante; esto solo añade una entrada corta encima. Se aplica igual en
   home/juego/estadísticas/logros/ajustes/duelo porque cuelga de .view. */
.view.active { display: block; animation: viewEnter var(--motion-medium) var(--ease-decelerate) both; }
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Game View */
.mode-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; color: var(--sub); font-weight: 600; }

/* Botón de salida de partida: siempre visible, incluso con el teclado móvil
   abierto (que oculta .top-bar y .nav-wrap). Así el jugador nunca queda
   atrapado dentro de un modo de juego. */
.game-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-interactive);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-height: 44px; /* objetivo táctil mínimo */
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  touch-action: manipulation;
}
.game-exit-btn:hover { background: var(--badge-bg); border-color: var(--color-border-accent); }

.progress-bar { height: 8px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 16px; }
.bar-fill { height: 100%; width: 0%; background: var(--primary); transition: width 0.3s; }

.q-box { font-size: 20px; font-weight: 700; line-height: 1.35; margin: 16px 0; display: flex; justify-content: space-between; gap: 10px; }

input[type="text"], select { width: 100%; padding: 13px; border: 2px solid var(--border); background: var(--card); color: var(--text); border-radius: var(--radius-sm); font-size: 15px; outline: none; margin-bottom: 12px; }
input[type="text"]:focus, select:focus { border-color: var(--primary); }
#duel-join-code-input:focus { border-color: var(--accent-blue); }
.card.theme-survival input[type="text"]:focus { border-color: #f59e0b; }
.card.theme-sudden input[type="text"]:focus { border-color: #ef4444; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
button.btn { border: 0; border-radius: var(--radius-sm); padding: 13px 18px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-soft); min-height: 48px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); transform: var(--state-lift); }
.card.theme-survival .btn-primary { background: #d97706; }
.card.theme-survival .btn-primary:hover { background: #b45309; }
.card.theme-sudden .btn-primary { background: #dc2626; }
.card.theme-sudden .btn-primary:hover { background: #b91c1c; }
.card.theme-timetrial .btn-primary:hover { background: #be185d; }

.btn-secondary { background: var(--color-surface-interactive); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--badge-bg); border-color: var(--color-border-accent); }
.btn-danger { background: var(--danger-bg); color: var(--danger-txt); border: 1px solid var(--border); }
.btn-danger:hover { background: var(--danger-hover); }
/* Prompt 2 — Fase A: mismo micro-lift que btn-primary ya tenía, para que
   toda la familia de botones se sienta coherente. Solo en dispositivos con
   hover real (ratón), para no dejar un botón "levantado" tras un tap. */
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover, .btn-danger:hover, .btn-share:hover { transform: var(--state-lift); }
}

/* Botón "Compartir resultado": algo más de jerarquía que un botón
   secundario plano (borde sutil + fondo ligeramente tintado en morado,
   la identidad de la tarjeta final), sin llegar a ser un botón primario
   llamativo. Contraste comprobado en claro y oscuro. */
.btn-share { background: rgba(109,40,217,.07); color: var(--text); border: 1px solid rgba(109,40,217,.35); }
.btn-share:hover { background: rgba(109,40,217,.13); border-color: rgba(109,40,217,.55); }
[data-theme="dark"] .btn-share { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.40); }
[data-theme="dark"] .btn-share:hover { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.6); }
/* 2.0: «Compartir resultado» discreto (acción secundaria); sin btn-share-quiet recupera el aspecto destacado. */
.results-actions .btn-share { width: 100%; margin-top: 10px; }
.results-actions .btn-share.btn-share-quiet {
  width: fit-content; min-height: 0; margin: 12px auto 0; display: block; padding: 8px 18px;
  font-size: 14px; font-weight: 600; background: transparent; box-shadow: none;
  color: var(--color-text-muted); border-color: var(--border);
}
.results-actions .btn-share.btn-share-quiet:hover { background: var(--badge-bg); }
/* En oscuro el botón discreto era casi invisible: relleno y borde violeta suaves, texto legible. */
[data-theme="dark"] .results-actions .btn-share.btn-share-quiet {
  background: rgba(167,139,250,.16); border-color: rgba(167,139,250,.6); color: var(--text);
}
[data-theme="dark"] .results-actions .btn-share.btn-share-quiet:hover { background: rgba(167,139,250,.26); }

.feedback { margin-top: 16px; padding: 14px; border-radius: var(--radius-sm); display: none; line-height: 1.45; font-size: 15px; }
.feedback.ok { background: var(--ok-bg); color: var(--ok-txt); }
.feedback.bad { background: var(--bad-bg); color: var(--bad-txt); }
/* Prompt 2 — Fase B (sección 9): confirmación visual del resultado real.
   fb.className ya se reescribe a 'feedback ok'/'feedback bad' en cada
   checkAnswer()/checkLucidezAnswer()/checkMentalCalcAnswer() existente, así
   que esta entrada se dispara sola con la clase que ya se asigna, sin
   ningún cambio de lógica. */
.feedback.ok, .feedback.bad { animation: feedbackIn var(--motion-short) var(--ease-decelerate) both; }
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Botones de respuesta tipo test (4 opciones) */
#choice-options { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media(max-width:600px){ #choice-options { grid-template-columns: 1fr; } }
.choice-btn {
  border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
  padding: 13px 14px; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer;
  transition: all 0.15s; touch-action: manipulation; line-height: 1.3;
}
.choice-btn:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); }
.choice-btn.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
.choice-btn.correct { border-color: #16a34a; background: var(--ok-bg); color: var(--ok-txt); }
.choice-btn.incorrect { border-color: #dc2626; background: var(--bad-bg); color: var(--bad-txt); }
.choice-btn:disabled { cursor: default; opacity: 0.92; }
/* Prompt 2 — Fase B (sección 9): mismas clases .correct/.incorrect que ya
   pinta markChoiceButtons(), solo se añade la microtransición encima.
   Correcto: pequeño pop controlado. Incorrecto: shake corto y elegante
   (2 oscilaciones, no una bandera roja parpadeante). */
.choice-btn.correct { animation: choiceCorrectPop var(--motion-short) var(--ease-emphasized) both; }
.choice-btn.incorrect { animation: choiceIncorrectShake var(--motion-short) var(--ease-standard) both; }
@keyframes choiceCorrectPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes choiceIncorrectShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Prompt 2 — Fase B (secciones 10-12): "pulso" reutilizado por streak, XP
   y Fragmentos (setTextWithBump() en index.html añade la clase cuando el
   número sube; el valor y el momento en que sube siguen decididos por el
   estado real del juego, esto solo lo hace visible). display:inline-block
   para que el transform se aplique de forma fiable sobre un <span>. */
.streak-bump, .xp-bump, .fragments-bump {
  display: inline-block;
  animation: valueBump var(--motion-short) var(--ease-emphasized) both;
}
@keyframes valueBump {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
/* Estados de hover/selección de los 4 botones adaptados al color de acento
   de cada modo (mismo tono que ya usa su barra de progreso/cabecera), para
   que la interacción tipo test se sienta parte del tema de cada modo en
   vez de un componente genérico. Correcto/incorrecto quedan siempre en
   verde/rojo: ese significado es universal y no depende del modo. */
.card.theme-survival .choice-btn:hover:not(:disabled) { border-color: #f59e0b; }
.card.theme-survival .choice-btn.selected:not(.correct):not(.incorrect) { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--card)); }
.card.theme-sudden .choice-btn:hover:not(:disabled) { border-color: #dc2626; }
.card.theme-sudden .choice-btn.selected:not(.correct):not(.incorrect) { border-color: #dc2626; background: color-mix(in srgb, #dc2626 12%, var(--card)); }
.card.theme-timetrial .choice-btn:hover:not(:disabled) { border-color: #db2777; }
.card.theme-timetrial .choice-btn.selected:not(.correct):not(.incorrect) { border-color: #db2777; background: color-mix(in srgb, #db2777 12%, var(--card)); }
.card.theme-review .choice-btn:hover:not(:disabled) { border-color: #0d9488; }
.card.theme-review .choice-btn.selected:not(.correct):not(.incorrect) { border-color: #0d9488; background: color-mix(in srgb, #0d9488 12%, var(--card)); }
.sabias-que-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed currentColor;
  opacity: 0.92;
  font-size: 13.5px;
  line-height: 1.45;
}

/* TARJETA DE RESULTADOS */
.results-card { 
  background: linear-gradient(135deg, var(--card) 0%, var(--badge-bg) 100%); 
  border: 2px solid var(--primary); 
  border-radius: 24px; 
  padding: 30px 24px; 
  text-align: center; 
  margin-bottom: 16px; 
  display: none; 
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
  animation: fadeInScale 0.4s ease-out;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
/* Prompt 2 — Fase C (sección 14): último escalón de la jerarquía de
   resultados ("...→ acciones"). Compartir/Volver (y, en Duelo, el botón
   que ya cambia a "← Volver a Duelo") entran los últimos, cuando ya se ha
   leído el resto. No afecta a los botones propios de la tarjeta de Duelo
   (#results-duel-box), que quedan fuera de esta fase. */
.results-actions { animation: resultsActionsIn var(--motion-short) var(--ease-decelerate) .4s both; }
@keyframes resultsActionsIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Prompt 2 — Fase C (sección 17): "botón → estado de procesamiento →
   confirmación" ya existe en JS (shareResultAsText()/copyDuelCode() ya
   cambian el texto del botón a "¡Copiado!" y lo revierten solos); aquí
   solo se anima ese cambio de texto que ya se produce, igual que streak/XP
   en la Fase B. No se toca el pipeline de compartir/generar imagen. */
.btn-confirm-pulse { animation: valueBump var(--motion-short) var(--ease-emphasized) both; }

/* Identidad del modo: etiqueta pequeña y fija ("CONTRARRELOJ"). El
   desenlace concreto (victoria, derrota, tiempo agotado...) ya lo cuentan
   la frase y el sello de abajo, así que el título no compite por atención. */
.results-card h3 { margin: 0 0 10px 0; font-size: 13px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--sub); }
.results-metrics-grid { display: grid; gap: 14px; margin-bottom: 22px; }
.metric-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
/* Prompt 2 — Fase C (sección 14): el score es el segundo escalón de la
   jerarquía ("resultado → score → detalles → recompensas → acciones") y
   antes no tenía ninguna entrada propia — aparecía de golpe con el resto
   de la tarjeta. Un empuje corto y controlado, justo después del
   retrato (que ya usa moodPop sin delay). No toca el marcado ni los
   textos, que siguen viniendo de finishGame()/revealLucidezResults(). */
.metric-box { animation: metricIn var(--motion-short) var(--ease-decelerate) .08s both; }
@keyframes metricIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.metric-value { font-size: 26px; font-weight: 900; color: var(--text); }
.metric-label { font-size: 12px; color: var(--sub); font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
/* La puntuación es el protagonista visual del resultado (pedido explícito):
   más grande, tipografía de época y acento dorado; la efectividad la
   acompaña, más discreta, sin competir por atención. */
.results-metrics-grid .metric-box:first-child {
  background: linear-gradient(150deg, var(--accent-gold-surface), var(--card) 75%);
  border-color: var(--accent-gold-mid);
}
#res-score-text { font-size: 34px; font-weight: 900; color: var(--accent-gold-text); }
#res-percentage-text { font-size: 21px; color: var(--sub); font-weight: 800; }

/* Sir Edwards 2.0 (Prompt 1.5): retrato estático Victory/Defeat. Marco propio
   (fondo claro fijo, no invertido por tema) porque los assets oficiales
   llevan su propia iluminación pintada para un fondo claro; en vez de
   alterar sus colores (prohibido) se adapta el contenedor que lo rodea,
   igual que el resto de superficies del sistema. Sin recorte: object-fit
   contain conserva sombrero, cara, manos y capa completos. */
.results-character {
  display: none;
  width: clamp(96px, 26vw, 136px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  border-radius: var(--radius-md);
  background: #f6efe0;
  border: 1px solid var(--tone-border, var(--color-border-accent));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
  z-index: 1;
  animation: moodPop .4s cubic-bezier(.34,1.56,.64,1);
}
.results-character.show { display: block; }
.results-character img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) {
  .results-character { animation: none; }
}

.results-phrase-container {
  position: relative;
  background: linear-gradient(150deg, var(--card), rgba(127,127,127,.035) 65%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 26px 26px;
  margin-bottom: 22px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
  transition: border-color .3s ease, background .3s ease;
}
.results-phrase-container[class*="tone-"] { background-image: linear-gradient(150deg, var(--tone-soft), transparent 70%); }
.results-phrase-container::before,
.results-phrase-container::after {
  content: "\201C";
  position: absolute;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: 92px;
  line-height: 1;
  color: var(--tone-color, var(--primary));
  opacity: .10;
  pointer-events: none;
}
.results-phrase-container::before { top: -8px; left: 10px; }
.results-phrase-container::after { content: "\201D"; bottom: -58px; right: 10px; }

.results-mood-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 50%;
  background: var(--tone-soft, rgba(37,99,235,.10));
  border: 2px solid var(--tone-border, rgba(37,99,235,.28));
  box-shadow: 0 6px 18px var(--tone-soft, rgba(37,99,235,.14));
  animation: moodPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes moodPop {
  0% { transform: scale(.4) rotate(-8deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.results-category-title {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tone-color, var(--primary));
  margin-bottom: 14px;
}
/* Cálculo Mental (y cualquier otro modo futuro que no use categoría) deja
   este bloque vacío a propósito: se colapsa por completo para que el icono
   de ánimo pase directo a la frase, sin dejar un hueco en blanco. */
.results-category-title:empty {
  display: none;
  margin-bottom: 0;
}
.results-phrase {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 700;
  animation: phraseFadeIn .5s ease-out .12s both;
}
@keyframes phraseFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tonos: cada desenlace adopta un color coherente con la identidad visual
   ya usada en el resto de la app (azul estándar, teal repaso, dorado logro,
   morado contrarreloj...), para que la frase aleatoria de cada final se
   sienta parte del mismo diseño y no un añadido genérico. */
.results-phrase-container.tone-desastre { --tone-color:#dc2626; --tone-soft:rgba(220,38,38,.12); --tone-border:rgba(220,38,38,.32); border-color: rgba(220,38,38,.28); }
.results-phrase-container.tone-suspenso { --tone-color:#ea580c; --tone-soft:rgba(234,88,12,.12); --tone-border:rgba(234,88,12,.32); border-color: rgba(234,88,12,.26); }
.results-phrase-container.tone-mediocre { --tone-color:#6b7280; --tone-soft:rgba(107,114,128,.12); --tone-border:rgba(107,114,128,.30); }
.results-phrase-container.tone-bien { --tone-color:#2563eb; --tone-soft:rgba(37,99,235,.12); --tone-border:rgba(37,99,235,.30); border-color: rgba(37,99,235,.24); }
.results-phrase-container.tone-casi_perfecto,
.results-phrase-container.tone-review { --tone-color:#0d9488; --tone-soft:rgba(13,148,136,.12); --tone-border:rgba(13,148,136,.30); border-color: rgba(13,148,136,.26); }
.results-phrase-container.tone-perfecto,
.results-phrase-container.tone-win { --tone-color:#c9971f; --tone-soft:rgba(212,175,55,.16); --tone-border:rgba(212,175,55,.45); border-color: rgba(212,175,55,.38); background: linear-gradient(150deg, rgba(212,175,55,.07), var(--card) 65%); }
.results-phrase-container.tone-fail { --tone-color:#dc2626; --tone-soft:rgba(220,38,38,.12); --tone-border:rgba(220,38,38,.32); border-color: rgba(220,38,38,.28); }
.results-phrase-container.tone-timetrial { --tone-color:#db2777; --tone-soft:rgba(219,39,119,.12); --tone-border:rgba(219,39,119,.32); border-color: rgba(219,39,119,.26); }
.results-phrase-container.tone-mentalcalc { --tone-color:#14532d; --tone-soft:rgba(21,128,61,.10); --tone-border:rgba(21,128,61,.30); border-color: rgba(21,128,61,.24); }

[data-theme="dark"] .results-phrase-container.tone-desastre,
[data-theme="dark"] .results-phrase-container.tone-fail { --tone-color:#f87171; }
[data-theme="dark"] .results-phrase-container.tone-suspenso { --tone-color:#fb923c; }
[data-theme="dark"] .results-phrase-container.tone-mediocre { --tone-color:#9ca3af; }
[data-theme="dark"] .results-phrase-container.tone-bien { --tone-color:#60a5fa; }
[data-theme="dark"] .results-phrase-container.tone-casi_perfecto,
[data-theme="dark"] .results-phrase-container.tone-review { --tone-color:#5eead4; }
[data-theme="dark"] .results-phrase-container.tone-perfecto,
[data-theme="dark"] .results-phrase-container.tone-win { --tone-color:#fbbf24; }
[data-theme="dark"] .results-phrase-container.tone-timetrial { --tone-color:#f9a8d4; }
[data-theme="dark"] .results-phrase-container.tone-mentalcalc { --tone-color:#86c59a; }

@media(max-width:600px){
  .results-phrase-container{padding:26px 18px 20px;border-radius:16px;}
  .results-phrase-container::before,.results-phrase-container::after{font-size:64px;}
  .results-phrase-container::after{bottom:-38px;}
  .results-mood-icon{width:50px;height:50px;font-size:25px;margin-bottom:11px;}
  .results-phrase{font-size:19px;}
}

/* ---- Overrides específicos de dark mode para #results-card ----
   Aislados con el selector #results-card: no tocan el tema global de la
   app. Refuerzan explícitamente los fondos y textos de la tarjeta final
   en oscuro (cabecera, métricas, frase, chips, racha) para garantizar
   contraste y evitar cualquier fondo claro heredado, en cualquier ancho
   de pantalla, incluido 320–375px. */
[data-theme="dark"] #results-card.results-card{
  background: linear-gradient(135deg, var(--card) 0%, var(--badge-bg) 100%);
  border-color: var(--primary);
}
[data-theme="dark"] #results-card .metric-box{
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] #results-card .metric-value,
[data-theme="dark"] #results-card .metric-label,
[data-theme="dark"] #results-card .results-phrase,
[data-theme="dark"] #results-card .result-chip-value,
[data-theme="dark"] #results-card .results-streak-value{
  color: var(--text);
}
[data-theme="dark"] #results-card .results-phrase-container{
  background: linear-gradient(150deg, var(--card), rgba(255,255,255,.04) 65%);
  border-color: var(--border);
}
[data-theme="dark"] #results-card .result-chip{
  background: var(--badge-bg);
  border-color: var(--badge-border);
}

/* Chips de métricas específicas de cada modo: cada modo destaca datos
   distintos (racha, XP, vidas, récords...) para que la pantalla final
   se sienta propia de esa forma de juego y no un resumen genérico.
   Formato compacto a propósito: icono + valor en una píldora, sin
   caption aparte, para que quepan varios en una sola línea (" 12 ·
   43 s · Récord") en vez de apilar cajas grandes. La etiqueta
   completa vive en el atributo title, por accesibilidad. */
.results-mode-chips {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.results-mode-chips.show { display: flex; }
.result-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  padding: 7px 14px;
  /* Prompt 2 — Fase C: mismo fade de siempre (chipFadeIn, sin tocar), solo
     se retrasa el conjunto para que las chips (racha/vidas/XP de sesión)
     caigan en el escalón de "recompensas", después de que se haya leído
     el score y la frase — antes empezaban a la vez que el retrato. */
  animation: chipFadeIn .35s ease-out .2s both;
}
.result-chip:nth-child(2) { animation-delay: .25s; }
.result-chip:nth-child(3) { animation-delay: .3s; }
.result-chip:nth-child(4) { animation-delay: .35s; }
@keyframes chipFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-chip-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.result-chip-value { font-size: 13.5px; color: var(--text); font-weight: 800; white-space: nowrap; }

/* Sello final de Lucidez Mental: pensado para destacar por sí solo,
   como un desenlace propio en lugar de una frase más dentro de la
   tarjeta genérica. */
.results-lucidez-stamp {
  display: none;
  text-align: center;
  margin-bottom: 18px;
}
.results-lucidez-stamp.show { display: block; }
.results-lucidez-stamp .stamp-badge {
  display: inline-block;
  padding: 9px 24px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border: 2px solid currentColor;
  /* Prompt 2 — Fase C: mismo stampIn de siempre, con un pequeño respiro
     tras la frase (a la que corona) en vez de reventar a la vez que el
     retrato. */
  animation: stampIn .55s cubic-bezier(.34,1.56,.64,1) .2s both;
}
.results-lucidez-stamp .stamp-badge.tone-ok {
  color: #0d9488; background: rgba(13,148,136,.09); box-shadow: 0 0 24px rgba(13,148,136,.22);
}
.results-lucidez-stamp .stamp-badge.tone-fail {
  color: #dc2626; background: rgba(220,38,38,.09); box-shadow: 0 0 24px rgba(220,38,38,.18);
}
.results-lucidez-stamp .stamp-badge.tone-perfect {
  color: #7c3aed; background: rgba(124,58,237,.10); box-shadow: 0 0 28px rgba(124,58,237,.28);
}
.results-lucidez-stamp .stamp-badge.tone-amber {
  color: #b45309; background: rgba(180,83,9,.09); box-shadow: 0 0 24px rgba(180,83,9,.20);
}
/* Insignia de "nuevo récord" / "nueva mejor racha": mismo lenguaje visual
   que el sello de desenlace, en dorado, para que se lea como un extra que
   se celebra aparte y no como el remate principal de la partida. */
.results-lucidez-stamp .stamp-badge.tone-gold {
  color: #a16207; background: rgba(212,175,55,.14); box-shadow: 0 0 24px rgba(212,175,55,.26);
}
[data-theme="dark"] .results-lucidez-stamp .stamp-badge.tone-ok { color: #5eead4; }
[data-theme="dark"] .results-lucidez-stamp .stamp-badge.tone-fail { color: #f87171; }
[data-theme="dark"] .results-lucidez-stamp .stamp-badge.tone-perfect { color: #c4b5fd; }
[data-theme="dark"] .results-lucidez-stamp .stamp-badge.tone-amber { color: #fbbf24; }
[data-theme="dark"] .results-lucidez-stamp .stamp-badge.tone-gold { color: #fbbf24; }
@keyframes stampIn {
  0% { transform: scale(2) rotate(-8deg); opacity: 0; }
  60% { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.streak-live-badge{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.28);
  color:#b45309;
}
[data-theme="dark"] .streak-live-badge{color:#fbbf24}

/* Racha dentro de la partida: pegada justo encima de la pregunta para que
   siempre quede visible en móvil, incluso con el teclado abierto. */
.game-streak-inline{
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin:0 0 10px;
  padding:6px 12px;
  border-radius: var(--radius-pill);
  border:1px solid rgba(245,158,11,.35);
  background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(245,158,11,.05));
  font-weight:800;
  font-size:13px;
  color:#92400e;
}
.game-streak-inline-icon{font-size:16px}
[data-theme="dark"] .game-streak-inline{
  border-color:rgba(251,191,36,.4);
  background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(251,191,36,.05));
  color:#fbbf24;
}
/* Racha actual al terminar: misma píldora compacta que el resto de chips
   (solo se distingue por el tono ámbar) para no duplicar visualmente la
   info de "racha máxima" con una caja grande aparte. Se oculta por
   completo si la racha es 0: no aporta nada que celebrar. */
.results-streak-box{
  display:none;
  align-items:center;
  gap:6px;
  margin:0 auto 18px;
  padding:7px 14px;
  width:fit-content;
  border:1px solid rgba(245,158,11,.30);
  border-radius:999px;
  background:rgba(245,158,11,.10);
}
.results-streak-box.show{ display:inline-flex; }
.results-streak-fire{ font-size:14px; line-height:1; }
.results-streak-label{ display:none; }
.results-streak-value{
  font-size:13.5px;
  font-weight:800;
  color:var(--text);
}

.session-medals-box { background: var(--card); border: 2px dashed #f59e0b; border-radius: 16px; padding: 18px; margin-bottom: 24px; text-align: left; display: none; }
.session-medals-title { font-size: 13px; font-weight: 800; color: #d97706; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.session-medals-list { display: flex; flex-direction: column; gap: 10px; }
.session-medal-item { display: flex; align-items: center; gap: 12px; background: var(--badge-bg); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); }
.session-medal-icon { font-size: 24px; background: var(--card); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.session-medal-info { font-size: 14px; font-weight: 800; color: var(--text); }
.session-medal-desc { font-size: 12px; color: var(--sub); font-weight: 500; }
.session-medal-fragment { font-size: 11px; font-weight: 800; color: #7c3aed; margin-top: 4px; }
[data-theme="dark"] .session-medal-fragment { color: #c4b5fd; }

/* Prompt 2 — Fase B (sección 13): "aparición → identificación → pequeño
   emphasis → estabilización" en una sola tarjeta se logra encadenando las
   4 fases dentro de un único keyframe corto, sin bloquear la pantalla de
   resultados ni depender de JS. Cada logro entra un poco después del
   anterior (nth-child) para que una lista de varios no aparezca de golpe;
   se limita a los primeros 6 para no alargar la espera si hay muchos.
   No se toca .medal-lucidez-absoluta (su propio halo ya es su "especial"
   y tiene mayor especificidad, así que sustituye a esta entrada). */
.session-medal-item {
  animation: medalCardIn var(--motion-special) var(--ease-decelerate) both;
  /* Prompt 2 — Fase C: mismo escalonado entre logros de la Fase B
     (var(--medal-i)), con un offset base de .28s añadido ahora para que
     el bloque de logros caiga en el escalón de "recompensas" de la
     tarjeta de resultados, después del score y la frase. */
  animation-delay: calc(.28s + var(--motion-micro) * var(--medal-i, 0));
}
.session-medal-item:nth-child(1) { --medal-i: 0; }
.session-medal-item:nth-child(2) { --medal-i: 1; }
.session-medal-item:nth-child(3) { --medal-i: 2; }
.session-medal-item:nth-child(4) { --medal-i: 3; }
.session-medal-item:nth-child(5) { --medal-i: 4; }
.session-medal-item:nth-child(n+6) { --medal-i: 5; }
@keyframes medalCardIn {
  0% { opacity: 0; transform: translateY(8px) scale(.97); }
  55% { opacity: 1; transform: translateY(0) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* El "+1 Fragmento de Mente" es la parte que más se parece a XP (sección
   12: recompensa + conocimiento + progreso), así que recibe un pequeño
   glow propio además de la entrada de la tarjeta que ya hereda. */
.session-medal-fragment { animation: fragmentGlow 1.4s var(--ease-standard) calc(.28s + var(--motion-special) + var(--motion-micro) * var(--medal-i, 0)) both; }
@keyframes fragmentGlow {
  0% { filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
  35% { filter: drop-shadow(0 0 5px rgba(124,58,237,.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
}

/* Tratamiento especial para el logro maestro de Lucidez Mental: mismo
   layout que el resto de logros de sesión, pero con un halo violeta propio
   para que se note que no es un logro cualquiera. */
.session-medal-item.medal-lucidez-absoluta {
  background: radial-gradient(circle at 0% 0%, rgba(109,40,217,.16), transparent 60%), var(--badge-bg);
  border: 1px solid rgba(109,40,217,.45);
  animation: lucidezAbsolutaGlow 2.2s ease-in-out infinite;
}
.session-medal-item.medal-lucidez-absoluta .session-medal-icon {
  animation: lucidezOverlayGlow 1.6s ease-in-out infinite;
}
.session-medal-item.medal-lucidez-absoluta .session-medal-info { color: #6d28d9; }
[data-theme="dark"] .session-medal-item.medal-lucidez-absoluta .session-medal-info { color: #c4b5fd; }
.session-medal-lucidez-tag { font-size: 11px; font-weight: 800; color: #6d28d9; margin-top: 4px; font-style: italic; }
[data-theme="dark"] .session-medal-lucidez-tag { color: #c4b5fd; }
@keyframes lucidezAbsolutaGlow {
  0%,100% { box-shadow: 0 0 0 rgba(109,40,217,0); }
  50% { box-shadow: 0 0 18px rgba(109,40,217,.35); }
}
@media (prefers-reduced-motion: reduce) {
  .session-medal-item.medal-lucidez-absoluta,
  .session-medal-item.medal-lucidez-absoluta .session-medal-icon { animation: none; }
}

/* Caja de "nuevo modo desbloqueado": más destacada que la de logros */
@keyframes modeUnlockGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes modeUnlockPop {
  0% { transform: scale(.92); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.session-mode-unlock-box {
  position: relative;
  background: linear-gradient(135deg,#f5f3ff,#eef2ff 45%,#ecfeff);
  border: 3px solid #7c3aed;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: left;
  display: none;
  overflow: hidden;
  /* Prompt 2 — Fase C: el glow en bucle es un aviso ya existente y se deja
     tal cual; solo se retrasa un poco la entrada (modeUnlockPop) para que
     caiga en el escalón de "recompensas", junto a las chips. */
  box-shadow: 0 10px 30px rgba(124,58,237,.18);
  animation: modeUnlockPop .4s ease-out .28s both;
}
/* Resplandor en bucle: capa interior (la caja recorta con overflow:hidden) que solo anima opacity. */
.session-mode-unlock-box::before,
.mode-unlock-toast::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 26px rgba(124,58,237,.45);
  opacity:0; will-change:opacity;
}
.session-mode-unlock-box::before{ animation: modeUnlockGlow 2.2s ease-in-out infinite; }
.session-mode-unlock-title {
  font-size: 14px;
  font-weight: 900;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-mode-unlock-list { display: flex; flex-direction: column; gap: 12px; }
.session-mode-unlock-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.75);
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(124,58,237,.35);
}
.session-mode-unlock-icon {
  font-size: 30px;
  background: linear-gradient(145deg,#ede9fe,#dbeafe);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.session-mode-unlock-name { font-size: 16px; font-weight: 900; color: #4c1d95; }
.session-mode-unlock-desc { font-size: 12px; color: #6b21a8; font-weight: 600; opacity: .85; }
[data-theme="dark"] .session-mode-unlock-box {
  background: linear-gradient(135deg,#241b3d,#1c2340 45%,#132b33);
  border-color: #a78bfa;
}
[data-theme="dark"] .session-mode-unlock-title { color: #c4b5fd; }
[data-theme="dark"] .session-mode-unlock-item { background: rgba(255,255,255,.06); border-color: rgba(167,139,250,.4); }
[data-theme="dark"] .session-mode-unlock-name { color: #ede9fe; }
[data-theme="dark"] .session-mode-unlock-desc { color: #c4b5fd; }

/* Toast de modo desbloqueado: variante más grande y vistosa que la de logros */
.mode-unlock-toast{
  position:fixed;
  top:78px;left:50%;
  transform:translate(-50%,-20px) scale(.9);
  z-index:9999;
  display:flex;align-items:center;gap:14px;
  padding:16px 22px;
  min-width:300px;
  max-width:calc(100vw - 28px);
  border-radius:var(--radius-md);
  border:3px solid #7c3aed;
  background:linear-gradient(135deg,#f5f3ff,#e0e7ff);
  color:#4c1d95;
  box-shadow:0 18px 50px rgba(0,0,0,.22),0 0 34px rgba(124,58,237,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.mode-unlock-toast.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.mode-unlock-toast.show::before{ animation: modeUnlockGlow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .session-mode-unlock-box::before,
  .mode-unlock-toast::before{ animation:none !important; opacity:0; }
}
.mode-unlock-toast .toast-icon{font-size:40px}
.mode-unlock-toast .toast-small{
  display:block;font-size:11px;font-weight:900;
  text-transform:uppercase;letter-spacing:1px;opacity:.8;
}
.mode-unlock-toast .toast-name{
  display:block;font-size:17px;font-weight:900;margin-top:2px;
}
.mode-unlock-toast.mode-unlock-toast-multi{
  flex-direction:column;align-items:flex-start;gap:8px;
}
.mode-unlock-toast-multi .toast-multi-title{
  font-size:11px;font-weight:900;text-transform:uppercase;
  letter-spacing:1px;opacity:.8;
}
.mode-unlock-toast-multi .toast-multi-list{
  display:flex;flex-direction:column;gap:4px;
}
.mode-unlock-toast-multi .toast-multi-item{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:900;
}
.mode-unlock-toast-multi .toast-multi-icon{font-size:22px}
[data-theme="dark"] .mode-unlock-toast{
  background:linear-gradient(135deg,#241b3d,#1c2340);
  color:#ede9fe;
  border-color:#a78bfa;
}

/* Toast de aviso genérico: sustituye a alert() para que el mensaje se vea
   siempre, incluso en entornos (webviews, previsualizaciones embebidas)
   donde los diálogos nativos del navegador no se muestran. */
.info-toast{
  position:fixed;
  top:78px;left:50%;
  transform:translate(-50%,-20px) scale(.95);
  z-index:10000;
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 18px;
  min-width:260px;
  max-width:calc(100vw - 28px);
  border-radius:var(--radius-md);
  border:2px solid var(--primary, #0d9488);
  background:var(--card, #fff);
  color:var(--text, #1f2937);
  box-shadow:var(--shadow-elevated);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
}
.info-toast.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.info-toast .toast-icon{font-size:20px;flex-shrink:0}
[data-theme="dark"] .info-toast{ background:#1c2340; color:#ede9fe; }

/* Modes Grid */
.modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 10px; }
/* Lucidez Mental ocupa toda la anchura del menú: 3 columnas en escritorio, 2 en móvil */
.modes-grid .mode-lucidez { grid-column: 1 / -1; }
.mode-card { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: all 0.2s; position: relative; }
.mode-card:hover:not(.locked) { border-color: var(--primary); background: var(--badge-bg); }
.mode-card.locked { opacity: 0.65; cursor: not-allowed; background: var(--badge-bg); border-style: dashed; }
.mode-card p { color: var(--sub); }
.mode-lock-badge{position:absolute;font-family:system-ui,sans-serif;}.mode-lock-badge.is-unlocked{color:#15803d;}
.mode-req{margin-top:6px!important;font-size:12px!important;font-weight:700;color:#374151!important;display:none}
.mode-card.locked .mode-req{display:block}
[data-theme="dark"] .mode-req{color:#d1d5db!important}

/* La frase de desbloqueo de Lucidez Mental es más larga que el resto de
   requisitos, así que en pantallas estrechas reduce el tamaño de forma
   proporcional y, si aun así no cabe, se permite partir en 2 líneas en vez
   de forzar una sola línea con scroll horizontal (eso generaba una barra
   de desplazamiento atravesando el texto en móvil). */
#mode-req-lucidez_mental{
  white-space:normal;
  overflow-x:hidden;
  font-size:clamp(9px,2.7vw,12px)!important;
  letter-spacing:-0.1px;
}

/* Descripción de Lucidez Mental ya desbloqueado: las cuatro fases se
   pintan como bloques independientes (en vez de un párrafo corrido) para
   que se lean de un vistazo, pero con la misma sobriedad que el resto de
   descripciones de modo: mismo tamaño/color heredados de ".mode-card p"
   (así escalan igual en los breakpoints móviles) y poca separación entre
   líneas. Igual que en Contrarreloj/Cálculo Mental, el <strong> solo sube
   el peso de la fuente — nunca cambia de color. */
.lucidez-phase-line{
  margin: 0 0 3px;
  padding: 0;
  color: var(--sub);
  font-size: inherit;
  line-height: 1.4;
  text-align: left;
  hyphens: none;
}
.lucidez-phase-line:last-child{ margin-bottom: 0; }
.lucidez-phase-line strong{
  font-weight: 800;
}
.mode-lock-badge::before{content:"";display:block;font-size:17px;line-height:1;background-size:contain;background-position:center;background-repeat:no-repeat}
/* La imagen del candado (cerrado / abierto) se asigna en theme.css. */

/* Submenu Header */
.submenu-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.submenu-header .btn-secondary { min-height: 0; padding: 8px 12px; font-size: 13px; box-shadow: none; }

/* Logros Grid */
.medals-grid { margin-top: 14px; }
.medal-card { opacity: 0.4; }
.medal-card.secret-locked { border: 1px dashed var(--border); }

/* Sistema de Fragmentos de Mente */
.medal-fragment-tag {
  margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  color: #7c3aed; background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.35);
  border-radius: 999px; padding: 3px 8px; display: inline-block;
}
.medal-fragment-tag.is-unlocked { color: #6d28d9; background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.5); }
[data-theme="dark"] .medal-fragment-tag { color: #c4b5fd; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.4); }
[data-theme="dark"] .medal-fragment-tag.is-unlocked { color: #ede9fe; background: rgba(167,139,250,.22); border-color: rgba(167,139,250,.6); }

/* Marca visual adicional en la propia tarjeta (no solo en la etiqueta de
   texto) para distinguir de un vistazo, dentro de toda la cuadrícula de
   logros, cuáles de ellos otorgan Fragmento de Mente. */
.medal-card.has-fragment { box-shadow: inset 3px 0 0 0 rgba(124,58,237,.55); }
[data-theme="dark"] .medal-card.has-fragment { box-shadow: inset 3px 0 0 0 rgba(167,139,250,.6); }

.fragments-progress-box {
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(6,182,212,.06));
  border: 2px dashed #8b5cf6; border-radius: var(--radius-md); padding: 18px; margin-bottom: 20px; text-align: center;
}
.fragments-progress-box.fragments-complete { border-style: solid; border-color: #7c3aed; }
.fragments-progress-title { font-size: 13px; font-weight: 900; letter-spacing: .5px; color: #4c1d95; text-transform: uppercase; margin-bottom: 6px; }
.fragments-progress-subtitle { font-size: 12.5px; color: var(--sub); margin: 10px 0 0; }
.fragments-progress-count { font-size: 26px; font-weight: 900; color: #6d28d9; margin-bottom: 10px; }
.fragments-bar { margin-bottom: 0; }
.fragments-bar-fill { background: linear-gradient(90deg, #7c3aed, #06b6d4); }
/* Prompt 4: barra 0..15 con marcas de hito + escalera de recompensas. */
.fragments-bar-wrap { position: relative; }
.fragments-bar-marks { position: absolute; inset: 0; pointer-events: none; }
.fragments-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: rgba(76,29,149,.45); border-radius: 1px; }
.fragments-bar-mark.is-reached { background: rgba(255,255,255,.85); }
.fragments-milestones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.fragment-milestone { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid rgba(139,92,246,.35); background: rgba(255,255,255,.5); }
.fragment-milestone.is-locked { opacity: .6; }
.fragment-milestone.is-unlocked { border-color: #7c3aed; background: rgba(124,58,237,.12); }
.fragment-milestone-icon { font-size: 22px; line-height: 1; }
.fragment-milestone-body { flex: 1; min-width: 0; }
.fragment-milestone-title { font-size: 12px; font-weight: 900; color: #4c1d95; }
.fragment-milestone-text { font-size: 13px; color: var(--sub); }
.fragment-milestone.is-unlocked .fragment-milestone-text { color: var(--text, inherit); font-weight: 700; }
.fragment-milestone-state { font-size: 15px; font-weight: 900; color: #6d28d9; }
[data-theme="dark"] .fragment-milestone { background: rgba(255,255,255,.04); border-color: rgba(167,139,250,.35); }
[data-theme="dark"] .fragment-milestone.is-unlocked { background: rgba(139,92,246,.2); border-color: #a78bfa; }
[data-theme="dark"] .fragment-milestone-title, [data-theme="dark"] .fragment-milestone-state { color: #c4b5fd; }
[data-theme="dark"] .fragments-progress-box { background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(6,182,212,.1)); border-color: #a78bfa; }
[data-theme="dark"] .fragments-progress-title { color: #c4b5fd; }
[data-theme="dark"] .fragments-progress-count { color: #ddd6fe; }

/* Progreso general de Logros: cabecera de la pantalla Logros, en dorado
   para reforzar el concepto de logro/recompensa. Compacta a propósito. */
.achievements-progress-box {
  background: linear-gradient(135deg, var(--accent-gold-surface), var(--color-surface-highlight));
  border: 1px solid var(--color-border-accent); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; text-align: center;
  box-shadow: var(--shadow-soft);
}
.achievements-progress-title { font-size: 13px; font-weight: 900; letter-spacing: .5px; color: var(--accent-gold-text); text-transform: uppercase; margin-bottom: 4px; }
.achievements-progress-count { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--brand-navy); margin-bottom: 10px; }
.achievements-bar { margin-bottom: 0; }
.achievements-bar-fill { background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-light)); }
.achievements-progress-subtitle { font-size: 12.5px; color: var(--sub); margin: 10px 0 0; }

.medal-icon { font-size: 28px; margin-bottom: 4px; }
.medal-desc { margin-top: 2px; }

/* Stats Grid & History */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-box { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center; background: var(--badge-bg); }
.stat-value { font-size: 26px; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 12px; color: var(--sub); font-weight: 700; margin-top: 4px; }

.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--border); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.history-item-info { font-weight: 700; }
.history-item-sub { font-size: 12px; color: var(--sub); }
.history-item-score { font-weight: 800; color: var(--primary); }


.stats-section-sub { color: var(--sub); font-size: 12px; }
.progress-row { margin: 10px 0 14px; }
.progress-row-head { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:700; margin-bottom:6px; }
.progress-track { height:9px; border-radius:999px; background:var(--border); overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; background:var(--primary); transition:width .35s ease; }
.progress-meta { font-size:11px; color:var(--sub); margin-top:4px; }
.stats-mini-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.stats-mini { padding:12px; border:1px solid var(--border); text-align:center; }
.stats-mini-value { font-size:21px; font-weight:800; color:var(--primary); }
.stats-mini-label { font-size:11px; color:var(--sub); margin-top:3px; }

/* Resumen de Nivel/XP en Estadísticas (mismo dato que la home, para que la
   pantalla se sienta como un dashboard de progreso personal). */
.stats-level-widget {
  display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--border); padding: 14px 16px;
  margin-bottom: 20px;
}
.stats-level-widget-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#3b82f6,#1d4ed8); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.stats-level-widget-info { flex: 1; min-width: 0; }
.stats-level-widget-top { font-weight: 800; font-size: 14px; margin-bottom: 5px; }
.stats-level-widget-bar { height: 6px; margin-bottom: 4px; }
.stats-level-widget-xp { font-size: 11.5px; color: var(--sub); font-weight: 700; }
@media(max-width:600px){ .stats-mini-grid{grid-template-columns:repeat(2,1fr)} }

/* ===== Estadísticas v2: "Perfil de rendimiento" ===== */
.stats-empty{ display:none; text-align:center; padding:40px 20px; border:1px dashed var(--border); border-radius:var(--radius-md); margin:16px 0; }
.stats-empty-icon{ font-size:38px; margin-bottom:10px; }
.stats-empty-title{ font-weight:900; font-size:16px; margin-bottom:6px; }
.stats-empty-sub{ color:var(--sub); font-size:13px; margin:0; }

.stats-hero{
  text-align:center; padding:26px 18px; margin:16px 0;
 border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(37,99,235,.10), var(--card) 70%);
}
.stats-hero-value{ font-size:44px; font-weight:900; color:var(--primary); line-height:1; }
.stats-hero-label{ margin-top:6px; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--sub); }
.stats-hero-sub{ margin-top:10px; font-size:13px; color:var(--sub); }
.stats-hero-sub span{ font-weight:800; color:var(--text); }

.stats-highlight-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 8px; }
.stats-highlight{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:14px 15px; border:1px solid var(--border); background:var(--card);
}
.stats-highlight-icon{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow: 0 5px 12px rgba(0,0,0,.16); }
.stats-icon-streak{ background: linear-gradient(135deg,#f59e0b,#dc2626); }
.stats-icon-best{ background: linear-gradient(135deg, var(--accent-gold-mid), var(--accent-gold-strong)); }
.stats-highlight-body{ min-width:0; }
.stats-highlight-value{ font-size:20px; font-weight:900; white-space:nowrap; }
.stats-highlight-label{ font-size:10px; font-weight:800; opacity:.62; text-transform:uppercase; letter-spacing:.35px; }
.stats-highlight-context{ font-size:11px; color:var(--sub); margin-top:2px; font-weight:700; }
@media(max-width:460px){ .stats-highlight-row{grid-template-columns:1fr} }

.knowledge-summary{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.knowledge-tag{ font-size:12px; font-weight:800; padding:6px 11px; border-radius:999px; background:var(--badge-bg); border:1px solid var(--border); }
.knowledge-tag.tag-strong{ color:#166534; background:var(--ok-bg); border-color:transparent; }
.knowledge-tag.tag-progress{ color:#92400e; background:rgba(245,158,11,.14); border-color:transparent; }
.knowledge-tag.tag-weak{ color:#991b1b; background:var(--bad-bg); border-color:transparent; }

.settings-section h3 { display: flex; align-items: center; gap: 6px; }
.settings-note { font-size: 13px; color: var(--sub); line-height: 1.5; margin: 0 0 10px; }
.settings-note.settings-warning { color: var(--danger-txt); }
.settings-backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.settings-backup-actions .btn { flex: 1 1 200px; }
.settings-status { font-weight: 700; margin: 0 0 8px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.settings-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.settings-field { margin-bottom: 16px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field-label { font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 8px; }
.segmented-control { display: flex; gap: 6px; flex-wrap: wrap; }
.segmented-btn { flex: 1 1 auto; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.segmented-btn:hover { background: var(--border); }
.segmented-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.settings-danger-zone { box-shadow: inset 3px 0 0 0 var(--danger-txt); }
/* Botones sueltos de Ajustes (Política de privacidad, Reiniciar progreso): centrados en su tarjeta. */
.settings-section .btn.settings-btn-center { display: block; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; }
.settings-version-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.settings-version-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.settings-changelog { margin-bottom: 14px; }
.settings-changelog:last-child { margin-bottom: 0; }
.settings-changelog-title { font-size: 13px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.settings-changelog-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--sub); line-height: 1.6; }
.settings-changelog-list li { margin-bottom: 2px; }
.settings-changelog-entry { margin-bottom: 16px; }
.settings-changelog-entry:last-child { margin-bottom: 0; }
.settings-changelog-entry-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.settings-changelog-entry-version { font-size: 13px; font-weight: 800; color: var(--text); }
.settings-changelog-entry-date { font-size: 12px; color: var(--sub); }
.settings-changelog-entry-current { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-txt); font-size: 10.5px; font-weight: 800; letter-spacing: .3px; }



/* ===== v1.4: selector de modos, estadísticas y logros ===== */
.modes-grid .mode-card{
  position:relative; overflow:hidden;
 border:2px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.modes-grid .mode-card:hover{transform:translateY(-4px)}
.mode-card.mode-standard{border-color:rgba(37,99,235,.28);background:linear-gradient(145deg,rgba(37,99,235,.10),var(--card) 68%)}
.mode-card.mode-review{border-color:rgba(13,148,136,.30);background:linear-gradient(145deg,rgba(13,148,136,.10),var(--card) 68%)}
.mode-card.mode-survival{border-color:rgba(245,158,11,.34);background:linear-gradient(145deg,rgba(245,158,11,.12),var(--card) 68%)}
.mode-card.mode-sudden{border-color:rgba(220,38,38,.30);background:linear-gradient(145deg,rgba(220,38,38,.10),var(--card) 68%)}
.mode-card.mode-timetrial{border-color:rgba(219,39,119,.32);background:linear-gradient(145deg,rgba(219,39,119,.11),rgba(244,114,182,.06),var(--card) 72%)}
.mode-card.mode-mentalcalc{border-color:rgba(21,128,61,.32);background:linear-gradient(145deg,rgba(21,128,61,.11),rgba(34,197,94,.06),var(--card) 72%)}
/* Lucidez Mental: el modo secreto final recibe un tratamiento propio,
   más marcado que el resto (borde más grueso + resplandor pulsante), para
   que se note que no es un modo más. */
.mode-card.mode-lucidez{
  border-color:rgba(109,40,217,.32);
  background:
    radial-gradient(circle at 12% 12%, rgba(109,40,217,.20), transparent 46%),
    radial-gradient(circle at 90% 88%, rgba(6,182,212,.14), transparent 46%),
    linear-gradient(145deg,rgba(109,40,217,.12),var(--card) 68%);
  box-shadow:0 10px 30px rgba(109,40,217,.20);
}
/* Resplandor pulsante: capa propia con opacity (sin animar box-shadow). */
.mode-card.mode-lucidez::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 16px 42px rgba(109,40,217,.38);
  opacity:0; will-change:opacity;
  animation: lucidezCardGlow 3s ease-in-out infinite;
}
.mode-card.mode-lucidez:hover{ border-color:rgba(109,40,217,.60); }
@keyframes lucidezCardGlow{
  0%,100%{ opacity:0; }
  50%{ opacity:1; }
}
[data-theme="dark"] .mode-card.mode-lucidez{ border-color:rgba(167,139,250,.32); }
[data-theme="dark"] .mode-card.mode-lucidez:hover{ border-color:rgba(167,139,250,.60); }
@media (prefers-reduced-motion: reduce){
  .mode-card.mode-lucidez::before{ animation:none; opacity:0; }
}
.mode-card-icon{
display:flex;align-items:center;justify-content:center;
}
.mode-standard .mode-card-icon{background:rgba(37,99,235,.12)}
.mode-review .mode-card-icon{background:rgba(13,148,136,.12)}
.mode-survival .mode-card-icon{background:rgba(245,158,11,.14)}
.mode-sudden .mode-card-icon{background:rgba(220,38,38,.12)}
.mode-timetrial .mode-card-icon{background:linear-gradient(135deg,rgba(219,39,119,.15),rgba(244,114,182,.12))}
.mode-mentalcalc .mode-card-icon{background:linear-gradient(135deg,rgba(21,128,61,.15),rgba(34,197,94,.12))}
.mode-card h3{margin:0 0 8px;}
.mode-card p{margin:0;}
.mode-card .mode-subtitle{
  margin-top:14px;padding-top:11px;border-top:1px solid var(--border);
  font-size:11px;font-weight:900;letter-spacing:.15px;
}
/* Los colores de .mode-subtitle por modo viven en una única definición más
   arriba del archivo (líneas ~1169-1174), junto a sus variantes de tema
   oscuro. Antes había aquí una segunda definición duplicada (con un valor
   distinto para .mode-standard, #2563eb vs #1d4ed8) que ganaba la cascada en
   silencio; se retiró para dejar una sola fuente de verdad, conservando el
   valor #2563eb que ya era el efectivamente visible. */

/* Tarjeta "Continuar partida": mismo lenguaje visual que el resto de tarjetas
   de modo (hereda mode-standard/review/survival/sudden/timetrial vía JS),
   pero con borde reforzado y un pulso sutil para que destaque como acción
   prioritaria frente a empezar una partida nueva. */
/* El pulso vive en un pseudo-elemento (::before) que solo anima opacity y
   transform: no repinta sombras en cada fotograma. El color sale de --pulse. */
#resume-game-card{
  border-width:3px;
  --pulse:rgba(37,99,235,.20);
}
#resume-game-card .mode-card-icon{ position:relative; }
#resume-game-card.mode-review{ --pulse:rgba(13,148,136,.20); }
#resume-game-card.mode-survival{ --pulse:rgba(245,158,11,.22); }
#resume-game-card.mode-sudden{ --pulse:rgba(220,38,38,.22); }
#resume-game-card.mode-timetrial{ --pulse:rgba(219,39,119,.22); }
#resume-game-card.mode-mentalcalc{ --pulse:rgba(21,128,61,.22); }
#resume-game-card.mode-lucidez{ --pulse:rgba(109,40,217,.26); }
#resume-game-card::before,
.duel-resume-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 8px var(--pulse);
  opacity:0; will-change:opacity,transform;
  animation: resumeCardPulse 2.4s ease-in-out infinite;
}
@keyframes resumeCardPulse{
  0%,100%{ opacity:0; transform:scale(.985); }
  50%{ opacity:1; transform:scale(1); }
}
@media(max-width:600px){
  /* En móvil el pulso en bucle aporta poco frente al borde y el degradado. */
  #resume-game-card::before,
  .mode-card.mode-lucidez::before{ animation:none; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #resume-game-card::before,
  .duel-resume-card::before{ animation:none; opacity:0; }
}


/* Estadísticas: tarjetas compactas, sin iconos superpuestos */
.stats-extra-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  margin:18px 0;
}
.stat-extra{
  min-width:0;display:flex;align-items:center;gap:12px;
  padding:14px 15px;border:1px solid var(--border);
box-sizing:border-box;
}
.stat-extra-icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;text-align:center;
  box-shadow: 0 5px 12px rgba(0,0,0,.16);
}
.stat-extra > div{min-width:0}
.stat-extra-label{display:block;font-size:10px;font-weight:800;opacity:.62;text-transform:uppercase;letter-spacing:.35px}
.stat-extra-value{display:block;margin-top:3px;font-size:19px;font-weight:900;white-space:nowrap}
.stat-extra-context{display:block;margin-top:3px;font-size:9px;line-height:1.25;font-weight:700;color:var(--sub)}
.stat-streak .stat-extra-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}
.stat-best .stat-extra-icon{background:linear-gradient(135deg,#3b6fd6,#1d4ed8)}
.stat-speed .stat-extra-icon{background:linear-gradient(135deg,#8b5cf6,var(--duel-purple-dark))}
.stat-mentalcalc .stat-extra-icon{background:linear-gradient(135deg,#15803d,#14532d)}
.stat-master .stat-extra-icon{background:linear-gradient(135deg,#14b8a6,#0d9488)}
.stat-lucidez .stat-extra-icon{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}

.performance-box{
  margin:0 0 22px;padding:16px 17px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--card);
}
.performance-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px;font-weight:900}
.performance-bars{display:flex;align-items:flex-end;gap:7px;height:96px;padding:0 3px 3px;border-bottom:1px solid var(--border)}
.performance-bar{flex:1;max-width:70px;margin:auto;min-height:6px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#2563eb,#60a5fa);position:relative}
.performance-bar span{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:9px;font-weight:900;white-space:nowrap}
.performance-labels{display:flex;gap:7px;margin-top:6px}.performance-labels span{flex:1;text-align:center;font-size:9px;opacity:.5}
@media(max-width:760px){.stats-extra-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.stats-extra-grid{grid-template-columns:1fr}.stat-extra{padding:12px}}

/* Logros: usamos las clases reales .medal-card / .icon */
.medals-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.medal-card{
  position:relative;text-align:center;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);
  transition:transform .2s ease,box-shadow .2s ease;
  box-sizing:border-box;
}
.medal-card.unlocked:hover{transform:translateY(-4px)}
.medal-card .icon,.medal-card .medal-icon{
margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--badge-bg);border:2px solid var(--border);
}
.medal-title{font-weight:900;margin-bottom:6px}
.medal-desc{line-height:1.4;color:var(--sub)}
.medal-card.secret-locked .medal-icon{filter:grayscale(1);font-size:29px}
.medal-card.secret-locked .medal-title{font-size:14px}
@media(max-width:760px){.medals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.medals-grid{grid-template-columns:1fr}}

/* Notificación real de logro */
.achievement-toast{
  position:fixed;top:76px;left:50%;z-index:9999;
  display:flex;align-items:center;gap:12px;padding:12px 17px;
  min-width:280px;max-width:calc(100vw - 28px);box-sizing:border-box;
  border:2px solid rgba(245,158,11,.52);border-radius:var(--radius-md);
  background:linear-gradient(135deg,#fffdf0,#fff6d1);color:#78350f;
  box-shadow:var(--shadow-elevated);
  opacity:0;transform:translate(-50%,-18px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.achievement-toast.show{opacity:1;transform:translate(-50%,0)}
.achievement-toast .toast-icon{font-size:34px}.achievement-toast .toast-small{display:block;font-size:9px;font-weight:900;letter-spacing:.8px}.achievement-toast .toast-name{display:block;font-size:15px;font-weight:900;margin-top:2px}




/* ===== Rachas: visual ===== */
.streak-badge{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:8px;padding:4px 9px;border-radius:999px;
  background:rgba(245,158,11,.12);color:#b45309;
  font-size:11px;font-weight:900;
}
[data-theme="dark"] .streak-badge{color:#fbbf24;background:rgba(245,158,11,.14)}
.streak-progress{
  margin-top:8px;height:4px;border-radius: var(--radius-pill);overflow:hidden;
  background:rgba(245,158,11,.10);
}
.streak-progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#f59e0b,#fbbf24);
  transition:width .25s ease;
}
.streak-milestone{
  animation:streakPop .35s ease;
}
@keyframes streakPop{
  0%{transform:scale(.9);opacity:.5}
  70%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}




/* Logros: visibles desde el principio, desbloqueados destacan */
.medal-card.locked{
  background:linear-gradient(145deg,rgba(127,127,127,.035),var(--card));
}
.medal-card.locked .medal-title{
  color:var(--text);
}
.medal-status.locked-status{
  opacity:.55;
}




/* v1.7: compacta para móvil */
.medal-card{
  min-height:165px;
  padding:16px 13px;
}
.medal-card .icon,.medal-card .medal-icon{
  width:56px;height:56px;
  font-size:31px;
  margin-bottom:9px;
}
.medal-title{font-size:14px}
.medal-desc{font-size:11px}
.medal-status{ font-weight:900; letter-spacing:.6px; margin-top:7px;font-size:8px}

/* Selector de modos más compacto */
.modes-grid .mode-card{
  min-height:175px;
  padding:17px;
}
.mode-card-icon{
  width:46px;height:46px;
  border-radius:var(--radius-sm);
  font-size:24px;
  margin-bottom:9px;
}
.mode-card h3{font-size:17px;margin-bottom:6px}
.mode-card p{font-size:14px;line-height:1.45}

/* Ajuste de espaciado visual: solo Supervivencia, Muerte Súbita y Contrarreloj.
   Baja ligeramente la descripción y el requisito para que no queden tan pegados
   al título y mantengan una separación visual más limpia, como Modo Estándar. */
#mode-desc-survival-main,
#mode-desc-sd-main,
#mode-desc-timetrial{
  position:relative;
}

#mode-req-survival-main,
#mode-req-sudden_death_main,
#mode-req-timetrial{
  position:relative;
}

/* En pantallas pequeñas, aún más compacto */
@media(max-width:600px){
  
  /* Solo baja ligeramente las descripciones de estos cuatro modos.
     No modifica títulos, candados, requisitos ni el resto de modos. */
  #mode-desc-survival-main,
  #mode-desc-sd-main,
  #mode-desc-timetrial,
  #mode-desc-mental-calc{
    position:relative;
  }

  /* Solo baja ligeramente los requisitos de estos cuatro modos.
     No modifica títulos, candados, descripciones ni el resto de modos. */
  #mode-req-survival-main,
  #mode-req-sudden_death_main,
  #mode-req-timetrial,
  #mode-req-mental_calc{
    position:relative;
  }
    
  /* En móvil, mantener el contador de Repaso en la misma línea que el título. */
  .mode-review h3{
    white-space:nowrap;
  }

      }




.medal-card.secret-locked{
  opacity:.65;
  background:linear-gradient(145deg,rgba(80,80,80,.045),var(--card));
  filter:saturate(.25);
}
.medal-card.secret-locked .icon{
  background:rgba(127,127,127,.08);
  border-color:var(--border);
  color:var(--sub);
}




@media(max-width:600px){
          .brand{max-width:100%;}
  .stats-badges{width:100%;font-size:10px;}
  .stats-badges .badge{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    
  
        .card.theme-standard .mode-header,
  .card.theme-review .mode-header,
  .card.theme-survival .mode-header,
  .card.theme-sudden .mode-header,
  .card.theme-timetrial .mode-header{
    display:flex;
    align-items:center;
  }
      .card.theme-standard .mode-header span,
  .card.theme-review .mode-header span,
  .card.theme-survival .mode-header span,
  .card.theme-sudden .mode-header span,
  .card.theme-timetrial .mode-header span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  }
@media(max-width:360px){
  .tab-btn{padding:6px 6px;font-size:10px;}
}

/* Welcome card: cleaner hierarchy */
.welcome-card{
  position:relative;
  overflow:hidden;
}
.welcome-card::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(37,99,235,.7),rgba(124,58,237,.7));
}
.welcome-card h2{
  margin-top:3px;
  letter-spacing:-.3px;
}


/* ===== v1.9: selector de dificultad con identidad del modo ===== */
#menu-difficulty-modes{
  transition:background .25s ease,border-color .25s ease;
}
#menu-difficulty-modes .submenu-header{
  padding:12px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  margin-bottom:14px;
}
#menu-difficulty-modes .submenu-header h2{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.2px;
}

/* Supervivencia */
#menu-difficulty-modes.diff-survival .submenu-header{
  color:#92400e;
  background:linear-gradient(90deg,rgba(245,158,11,.13),rgba(245,158,11,.04));
  border-color:rgba(245,158,11,.32);
}
/* Estilo pedido: igual que las tarjetas de modos normales, fondo blanco y
   solo un borde fino de color identificando el modo (nada de degradado de
   color de fondo ni texto en color, que resultaba demasiado cargado). */
#menu-difficulty-modes.diff-survival .mode-card{
  background:var(--card);
}
#menu-difficulty-modes.diff-survival .mode-card h3{color:var(--text)}

/* Muerte Súbita */
#menu-difficulty-modes.diff-sudden .submenu-header{
  color:#991b1b;
  background:linear-gradient(90deg,rgba(220,38,38,.13),rgba(220,38,38,.04));
  border-color:rgba(220,38,38,.30);
}
#menu-difficulty-modes.diff-sudden .mode-card{
  background:var(--card);
}
#menu-difficulty-modes.diff-sudden .mode-card h3{color:var(--text)}

[data-theme="dark"] #menu-difficulty-modes.diff-survival .submenu-header{color:#fcd34d}
[data-theme="dark"] #menu-difficulty-modes.diff-sudden .submenu-header{color:#fca5a5}


/* v2.0: candados nuevos — iconos gráficos claramente distintos */
.mode-lock-badge{
  top:9px;right:9px;width:42px;height:42px;
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:0;line-height:0;background:rgba(255,255,255,.88);
  border:2px solid rgba(148,163,184,.42);
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  z-index:3;overflow:hidden;
}
.mode-lock-badge::before{content:"" !important;display:block;width:30px;height:30px;background-repeat:no-repeat;background-position:center;background-size:contain;}
.mode-lock-badge.is-unlocked{background:rgba(240,253,244,.95);border-color:rgba(34,197,94,.45);}
.mode-card.locked .mode-lock-badge{background:rgba(255,247,237,.96);border-color:rgba(234,88,12,.34);}
/* Candado cerrado */
.mode-card.locked .mode-lock-badge::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='12' y='27' width='40' height='30' rx='7' fill='%23D4AF37' stroke='%239A7410' stroke-width='3'/%3E%3Cpath d='M21 28V19c0-8 5-13 11-13s11 5 11 13v9' fill='none' stroke='%239A7410' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='41' r='5' fill='%23785400'/%3E%3Cpath d='M32 45v6' stroke='%23785400' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Candado abierto: arco claramente separado y levantado */
.mode-card:not(.locked) .mode-lock-badge::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='12' y='27' width='40' height='30' rx='7' fill='%23D4AF37' stroke='%239A7410' stroke-width='3'/%3E%3Cpath d='M21 28V18c0-8 5-13 12-13 7 0 12 5 12 13' fill='none' stroke='%239A7410' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M45 18v-7' stroke='%239A7410' stroke-width='7' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='41' r='5' fill='%23785400'/%3E%3Cpath d='M32 45v6' stroke='%23785400' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* El JS escribe texto por compatibilidad: lo ocultamos porque el estado ya lo representa la imagen. */
.mode-lock-badge{color:transparent!important;text-indent:-9999px;}

/* v2.0: logros desbloqueados = recompensa/medalla oro, mucho más visibles */
.medal-card.unlocked{
  opacity:1;
  border:2px solid #d4af37;
  background:linear-gradient(145deg,rgba(255,248,200,.92),rgba(212,175,55,.18) 38%,var(--card) 78%);
}
.medal-card.unlocked .icon{
  width:70px;height:70px;margin-top:16px;
  background:radial-gradient(circle at 35% 25%,#fffbe8 0%,#ffe88a 24%,#d4af37 62%,#a87908 100%);
  border:3px solid #c49a22;
  color:#6f4d00;
  box-shadow:0 0 0 4px rgba(212,175,55,.16),0 7px 20px rgba(212,175,55,.34),inset 0 2px 4px rgba(255,255,255,.7);
  position:relative;
  font-size:38px;
  filter:saturate(1.15);
}
.medal-card.unlocked .icon::after{
  content:"✓";
  position:absolute;right:-5px;bottom:-5px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff8cf;color:#8a6500;border:2px solid #d4af37;
  font-size:13px;font-weight:1000;box-shadow:0 3px 8px rgba(0,0,0,.16);
}
.medal-card.unlocked .medal-title{color:#765300;font-weight:1000;}
.medal-card.unlocked .medal-status{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:10px;padding:5px 9px;border-radius:999px;
  background:#fff3b0;color:#805d00!important;
  border:1px solid rgba(212,175,55,.65);
  box-shadow:0 2px 7px rgba(212,175,55,.16);
}
/* v1.3 — auditoría Logros: esta medalla dorada no tenía variante Dark y
   quedaba como una tarjeta color crema/amarillo clara flotando sobre un
   fondo oscuro (el "modal blanco en dark" del que hablábamos, aplicado a
   logros). El oro en Dark debe sentirse como metal iluminado sobre fondo
   oscuro, no como papel claro: superficie oscura con tinte dorado sutil,
   borde y símbolos en dorado desaturado para no quemar la vista. */
[data-theme="dark"] .medal-card.unlocked{
  border-color: var(--accent-gold-mid);
  background: linear-gradient(145deg, var(--accent-gold-surface), var(--color-surface-elevated) 60%, var(--card) 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 0 0 1px rgba(232,200,116,.14);
}
[data-theme="dark"] .medal-card.unlocked .icon{
  background: radial-gradient(circle at 35% 25%, #4a3a12 0%, #6b5218 30%, var(--accent-gold-mid) 78%, #8a6a1e 100%);
  border-color: var(--accent-gold-mid);
  color: #2a2005;
  box-shadow: 0 0 0 4px rgba(232,200,116,.14), 0 7px 18px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.18);
}
[data-theme="dark"] .medal-card.unlocked .icon::after{
  background: #2a2005; color: var(--accent-gold-text); border-color: var(--accent-gold-mid);
}
[data-theme="dark"] .medal-card.unlocked .medal-title{ color: var(--accent-gold-text); }
[data-theme="dark"] .medal-card.unlocked .medal-status{
  background: var(--accent-gold-surface); color: var(--accent-gold-text) !important;
  border-color: rgba(232,200,116,.4);
  box-shadow: none;
}
.medal-card.locked .icon{opacity:.68;}
@media(max-width:600px){
      }

/* =========================================================
   SIREdwards QUIZ — MOBILE FIRST POLISH
   Capa visual únicamente: no altera la lógica del juego.
   ========================================================= */
:root{
  --mobile-radius:18px;
  --mobile-gap:12px;
  --mobile-touch:52px;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-x:none;
}
body{
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
button,input,select{font:inherit}
button{-webkit-appearance:none;appearance:none}
.app{min-width:0}
.card{min-width:0}

/* Mejor respuesta táctil */
button.btn,.tab-btn,.mode-card{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
button.btn:active,.tab-btn:active,.mode-card:not(.locked):active{
  transform:scale(.985);
}

/* Menú principal más limpio */
.mode-card{
  -webkit-tap-highlight-color:transparent;
}
.mode-card p{
  overflow-wrap:anywhere;
}
#resume-game-card{
  margin-bottom:12px!important;
}

/* Durante una partida: máxima prioridad al contenido */
body.in-game .card{
  box-shadow:var(--shadow-card);
}
body.in-game #game-play-area{
  min-width:0;
}
body.in-game .q-box{
  overflow-wrap:anywhere;
  word-break:normal;
}
body.in-game #ans-input{
  min-height:54px;
}
body.in-game .actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
body.in-game .actions .btn{
  min-height:52px;
}
body.in-game .actions .btn-primary{
  grid-column:1 / -1;
}

/* Resultados: aprovechan mejor el ancho */
.results-card{
  min-width:0;
}
.results-metrics-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.metric-box{
  min-width:0;
}
.metric-value{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Modales respetando notch y teclado */
.modal-overlay{
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
}
.modal-card{
  width:min(500px,100%);
}

/* Aviso de "partida a medias" al intentar arrancar un modo nuevo mientras
   queda una partida sin terminar. Reutiliza .modal-overlay/.modal-card
   (mismo look que el resto de modales) con un acento ámbar propio de un
   aviso, en vez del azul genérico. */
.modal-card-warning { text-align: center; border-color: #f59e0b; }
.modal-card-warning .modal-warning-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 10px;
}
.modal-card-warning h2 { justify-content: center; color: #b45309; }
[data-theme="dark"] .modal-card-warning h2 { color: #fbbf24; }
.modal-card-warning p { text-align: left; }
.modal-warning-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-warning-actions .btn { flex: 1; }

/* Evita que el canvas de confeti provoque scroll */
#confetti-canvas{
  max-width:100%;
}

/* ===== 600 px o menos ===== */
@media (max-width:600px){
  body{
    display:block;
    min-height:100dvh;
    padding:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left));
  }
  .app{
    width:100%;
    max-width:none;
  }
  .card{
    width:100%;
    padding:12px;
    border-radius:var(--radius-md);
  }

  /* Cabecera */
  .top-bar{
    margin-bottom:9px!important;
    padding-bottom:9px!important;
    gap:8px;
  }
  .brand{
    font-size:13px!important;
    line-height:1.2;
    margin-bottom:7px!important;
    text-align:center;
  }
  .stats-badges{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px!important;
  }
  .stats-badges .badge{
    min-width:0;
    padding:7px 3px!important;
    font-size:10px;
    border-radius:var(--radius-sm);
  }

  /* Navegación: cuatro botones siempre visibles, sin scroll */
  .nav-wrap::after{display:none}
  .nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px!important;
    margin-bottom:11px!important;
    padding:3px!important;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--badge-bg);
    overflow:visible;
  }
  .tab-btn{
    min-width:0;
    min-height:42px;
    padding:7px 3px!important;
    border-radius:var(--radius-sm)!important;
    border:0!important;
    font-size:10px!important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tab-btn.active{
    background:var(--card);
    box-shadow:var(--shadow-soft);
    border:0!important;
  }

  /* Menú de modos: dos columnas, fácil de tocar */
  .modes-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .modes-grid .mode-card{
    padding:13px!important;
    border-radius:var(--radius-md);
  }
  /* Altura mínima solo para las cards VERTICALES de selección (Jugar y hub de Duelos).
     Las cards en fila (Duelo por código, «Duelos con amigos») conservan su altura natural. */
  #menu-main-modes .modes-grid .mode-card,
  #duel-home.seq-d-hub-on .seq-d-card:not(.seq-d-code){
    min-height:158px!important;
  }
  .mode-card-icon{
    width:42px!important;
    height:42px!important;
    border-radius:var(--radius-sm)!important;
    font-size:22px!important;
    margin-bottom:8px!important;
  }
  .mode-card h3{
    font-size:15px!important;
    line-height:1.15;
    margin-bottom:5px!important;
    padding-right:24px;
  }
  .mode-card p{
    font-size:11px!important;
    line-height:1.35!important;
    text-align:left;
    overflow-wrap:break-word;
  }

  /* Descripciones de modos: lectura limpia en dos columnas */
  .modes-grid .mode-card > p:not(.mode-req){
    margin-top:7px!important;
    margin-bottom:0!important;
  }

  /* Cálculo Mental: prioriza jerarquía visual y evita un bloque de texto denso */
  #mode-desc-mental-calc{
    font-size:11px!important;
    line-height:1.4!important;
    letter-spacing:-.05px;
  }

  #mode-desc-mental-calc br{
    display:block;
    content:"";
    margin-bottom:2px;
  }

  #mode-desc-mental-calc strong{
    font-weight:900;
  }
  .mode-card .mode-subtitle{
    margin-top:8px!important;
    padding-top:7px!important;
    font-size:9px!important;
    line-height:1.25;
  }
  .mode-lock-badge{
    width:32px!important;
    height:32px!important;
    top:7px!important;
    right:7px!important;
    border-radius:9px!important;
  }
  .mode-lock-badge::before{
    width:23px!important;
    height:23px!important;
  }

  /* Partida */
  body.in-game .top-bar{
    margin-bottom:4px!important;
    padding-bottom:4px!important;
  }
  body.in-game .brand{
    font-size:10px!important;
    opacity:.62;
    margin-bottom:4px!important;
  }
  body.in-game .stats-badges{
    display:none!important;
  }
  body.in-game .nav{
    margin-bottom:7px!important;
  }
  body.in-game .nav .tab-btn{
    min-height:34px;
    font-size:9px!important;
    padding:5px 2px!important;
  }

  .card.theme-standard .mode-header,
  .card.theme-review .mode-header,
  .card.theme-survival .mode-header,
  .card.theme-sudden .mode-header,
  .card.theme-timetrial .mode-header,
  .card.theme-mentalcalc .mode-header,
  .card.theme-lucidez .mode-header{
    margin:3px 0 8px!important;
    min-height:38px;
    padding:8px 9px 8px 38px!important;
    border-radius:var(--radius-sm);
    font-size:11px!important;
    line-height:1.2;
  }
  .card.theme-standard .mode-header::before,
  .card.theme-review .mode-header::before,
  .card.theme-survival .mode-header::before,
  .card.theme-sudden .mode-header::before,
  .card.theme-timetrial .mode-header::before,
  .card.theme-mentalcalc .mode-header::before,
  .card.theme-lucidez .mode-header::before{
    left:10px!important;
    font-size:18px!important;
  }
  .card.theme-mentalcalc .mode-header::after,
  .card.theme-sudden .mode-header::after,
  .card.theme-timetrial .mode-header::after,
  .card.theme-lucidez .mode-header::after{
    display:none;
  }
  .progress-bar{
    height:7px!important;
    margin-bottom:10px!important;
  }

  .game-streak-inline{
    margin:0 0 8px!important;
    padding:6px 10px!important;
    font-size:12px!important;
  }
  .q-box,
  .card.theme-review .q-box,
  .card.theme-standard .q-box,
  .card.theme-survival .q-box,
  .card.theme-sudden .q-box,
  .card.theme-timetrial .q-box{
    margin:10px 0!important;
    padding:15px 13px!important;
    border-radius:var(--radius-sm)!important;
    font-size:19px!important;
    line-height:1.35;
  }
  .card.theme-mentalcalc .q-box{
    margin:10px 0!important;
    padding:17px 10px!important;
    font-size:27px!important;
    line-height:1.2;
  }

  input[type="text"],select{
    min-height:54px;
    margin-bottom:9px!important;
    padding:13px 14px!important;
    border-radius:var(--radius-sm)!important;
    font-size:16px!important;
  }
  body.in-game .actions{
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:8px;
  }
  body.in-game .actions .btn{
    min-height:50px;
    padding:11px 10px!important;
    font-size:14px!important;
    border-radius:var(--radius-sm)!important;
  }
  body.in-game .actions::before{
    grid-column:1 / -1;
    margin-bottom:0!important;
    font-size:10px!important;
    text-align:center;
  }

  .feedback{
    margin-top:9px!important;
    padding:12px!important;
    font-size:14px!important;
    border-radius:var(--radius-sm);
  }

  /* Resultados */
  .results-card{
    padding:20px 12px!important;
    border-radius:19px!important;
  }
  .results-card h3{
    font-size:22px!important;
    line-height:1.2;
    margin-bottom:15px!important;
  }
  .results-metrics-grid{
    gap:8px!important;
    margin-bottom:15px!important;
  }
  .metric-box{
    padding:12px 8px!important;
    border-radius:13px!important;
  }
  .metric-value{font-size:22px!important}
  .metric-label{font-size:9px!important}
  .results-phrase-container{
    margin-bottom:14px!important;
  }
  .results-streak-box{
    padding:11px 12px!important;
    margin-bottom:14px!important;
  }
  .session-mode-unlock-box,
  .session-medals-box{
    padding:14px!important;
    margin-bottom:14px!important;
    border-radius:15px!important;
  }
  .session-mode-unlock-item,
  .session-medal-item{
    padding:10px!important;
    gap:9px!important;
  }

  /* Estadísticas y logros */
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .stat-box{
    padding:12px 8px!important;
    border-radius:var(--radius-sm)!important;
  }
  .stat-value{font-size:22px!important}
  .stat-label{font-size:10px!important}
  .stats-extra-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .stat-extra{
    padding:10px!important;
    gap:8px!important;
    border-radius:var(--radius-sm)!important;
  }
  .stat-extra-icon{
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
    font-size:18px!important;
  }
  .stat-extra-value{font-size:17px!important}
  .stat-extra-label{font-size:8px!important}
  .performance-box,.stats-section{
    padding:12px!important;
    border-radius:var(--radius-md)!important;
  }
  .medals-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .medal-card{
    min-height:150px!important;
    padding:11px 7px!important;
    border-radius:var(--radius-md)!important;
  }
  .medal-card .icon,.medal-card .medal-icon,
  .medal-card.unlocked .icon{
    width:48px!important;
    height:48px!important;
    font-size:27px!important;
    margin-bottom:7px!important;
  }
  .medal-title{font-size:12px!important}
  .medal-desc{font-size:9px!important;line-height:1.3}
  .medal-status{font-size:7px!important;margin-top:5px!important}

  /* Ajustes */
  .settings-section{
    padding:12px!important;
    border-radius:var(--radius-sm)!important;
  }
  .segmented-btn{
    padding:9px 8px!important;
    font-size:13px!important;
  }

  /* Toasts: no tapan toda la pantalla */
  .achievement-toast,.mode-unlock-toast{
    top:max(10px,env(safe-area-inset-top))!important;
    min-width:0!important;
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    padding:11px 13px!important;
    border-radius:var(--radius-md)!important;
  }
  .achievement-toast .toast-icon{font-size:28px!important}
  .achievement-toast .toast-name{font-size:14px!important}
  .mode-unlock-toast .toast-icon{font-size:32px!important}
  .mode-unlock-toast .toast-name{font-size:15px!important}
}

/* Móviles muy estrechos */
@media(max-width:370px){
  body{padding:6px}
  .card{padding:10px;border-radius:var(--radius-md)}
  .modes-grid{gap:7px!important}
  .modes-grid .mode-card{padding:11px!important}
  #menu-main-modes .modes-grid .mode-card, #duel-home.seq-d-hub-on .seq-d-card:not(.seq-d-code){min-height:150px!important}
  .mode-card p{font-size:10px!important}
  .mode-card h3{font-size:14px!important}
  .mode-card .mode-subtitle{font-size:8px!important}
  .nav{gap:2px!important}
  .tab-btn{font-size:9px!important}
  .q-box,
  .card.theme-review .q-box,
  .card.theme-standard .q-box,
  .card.theme-survival .q-box,
  .card.theme-sudden .q-box,
  .card.theme-timetrial .q-box{font-size:18px!important}
}

/* Pantallas bajas en horizontal */
@media(max-height:520px) and (orientation:landscape){
  body{padding:5px 8px}
  .top-bar{align-items:center}
  .brand{margin:0!important}
  .stats-badges{width:auto!important;display:flex!important}
  .nav{margin-bottom:6px!important}
  .card{padding:9px}
  .q-box{margin:7px 0!important;padding:10px 12px!important}
  input[type="text"]{min-height:46px!important}
  body.in-game .actions .btn{min-height:44px!important}
}

/* Respeto a usuarios que prefieren menos movimiento */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}


/* ===== Identidad visual y HUD optimizado para móvil ===== */
.brand-main{font-weight:1000;letter-spacing:.7px;font-size:clamp(18px,2.2vw,24px);line-height:1.05;}
.brand-sub{margin-top:4px;font-size:9px;font-weight:800;letter-spacing:1.15px;color:var(--sub);opacity:.9;}
.game-hud{justify-content:space-between !important;gap:10px;position:sticky;top:0;z-index:20;background:var(--card);}
.game-hud .game-streak-inline{flex:0 0 auto;margin:0;white-space:nowrap;}
@media(max-width:600px){
  .brand-main{font-size:18px;letter-spacing:.8px;}
  .brand-sub{font-size:7.5px;letter-spacing:.75px;white-space:nowrap;}
  body.in-game .brand-main{font-size:14px;}
  body.in-game .brand-sub{font-size:7px;letter-spacing:.55px;}
  .game-hud{min-height:42px !important;padding:7px 9px !important;margin:2px 0 8px !important;}
  .game-hud #game-progress-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .game-hud .game-streak-inline{padding:6px 10px;font-size:12px;}
  .game-hud .game-streak-inline-icon{font-size:15px;}
}

/* ===== Identidad final del título + experiencia con teclado móvil ===== */
.quiz-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  position:relative;
}
.quiz-brand .brand-main{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:clamp(19px,3vw,27px);
  font-weight:1000;
  letter-spacing:1.1px;
  line-height:1;
  background:linear-gradient(90deg,#2563eb,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.quiz-brand .brand-mark{
  width:25px;height:25px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  font-size:14px;
  box-shadow:0 4px 12px rgba(37,99,235,.22);
  -webkit-text-fill-color:#fff;
}
.quiz-brand .brand-sub{
  margin:5px 0 0 32px;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:1.35px;
  color:var(--sub);
}
[data-theme="dark"] .quiz-brand .brand-sub{
  color:rgba(255,255,255,.78);
  opacity:1;
}
.quiz-brand .brand-dot{color:var(--primary);font-weight:1000;margin:0 2px;}

@media(max-width:600px){
  .quiz-brand .brand-main{font-size:17px;letter-spacing:.85px;}
  .quiz-brand .brand-mark{width:22px;height:22px;border-radius:7px;font-size:12px;}
  .quiz-brand .brand-sub{font-size:6.5px;letter-spacing:.55px;margin-left:29px;margin-top:4px;white-space:nowrap;}
}

/* Cuando aparece el teclado, el contenido superior deja de competir por espacio.
   El HUD de la partida se mantiene visible y la zona de pregunta gana altura. */
body.keyboard-open .top-bar,
body.keyboard-open .nav-wrap{display:none!important;}
body.keyboard-open .card{padding-top:8px!important;}
body.keyboard-open #view-game{padding-top:0!important;}
body.keyboard-open .game-hud{
  position:sticky!important;
  top:0!important;
  margin-top:0!important;
  margin-bottom:5px!important;
  z-index:50!important;
  min-height:36px!important;
  padding:5px 8px!important;
  backdrop-filter:blur(8px);
}
body.keyboard-open .progress-bar{height:5px!important;margin-bottom:6px!important;}
body.keyboard-open .q-box,
body.keyboard-open .card.theme-review .q-box,
body.keyboard-open .card.theme-standard .q-box,
body.keyboard-open .card.theme-survival .q-box,
body.keyboard-open .card.theme-sudden .q-box,
body.keyboard-open .card.theme-timetrial .q-box{
  margin:6px 0!important;
  padding:10px 11px!important;
  font-size:17px!important;
  line-height:1.25!important;
}
body.keyboard-open .card.theme-mentalcalc .q-box{
  margin:6px 0!important;
  padding:11px 8px!important;
  font-size:24px!important;
}
body.keyboard-open input[type="text"]{
  min-height:48px!important;
  height:48px!important;
  padding:10px 12px!important;
  margin-bottom:6px!important;
}
body.keyboard-open .actions{margin-top:5px!important;gap:6px!important;}
body.keyboard-open .actions .btn{min-height:44px!important;padding:9px 9px!important;font-size:13px!important;}
body.keyboard-open .actions::before{font-size:9px!important;}
body.keyboard-open .feedback{margin-top:6px!important;padding:9px!important;font-size:13px!important;}

@media(max-width:600px){
  /* En móviles, ocultar cabecera/nav al abrir teclado evita el salto vertical
     y deja el juego en la parte superior de la ventana visual. */
  body.keyboard-open .app{width:100%;}
  body.keyboard-open .card{border-radius:var(--radius-sm)!important;}
}


/* =========================================================
   TARJETA FINAL — SISTEMA MÓVIL CONSOLIDADO
   Una única capa responsive. HTML/JS/lógica intactos.
   ========================================================= */

@media (max-width:600px){

  /* 01 — CONTENEDOR */
  #results-card.results-card{
    width:100%;
    max-width:none;
    margin:0 auto 12px!important;
    padding:16px 10px 12px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:20px!important;
    background:var(--card)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.10)!important;
  }

  /* 02 — CABECERA / IDENTIDAD DEL MODO: pequeña a propósito, el
     protagonismo es para la puntuación y la frase de abajo. */
  #results-card .results-card h3{
    margin:0 0 8px!important;
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:800!important;
    letter-spacing:1.1px!important;
    text-transform:uppercase!important;
    color:var(--sub)!important;
  }

  /* 03 — MÉTRICAS: cuatro celdas de un mismo panel. Nota: el 'display' NO
     se fuerza aquí a propósito — en Duelo, finishGame() oculta esta
     rejilla con style.display='none' (la puntuación de Duelo vive en su
     propia tarjeta, no aquí), y un !important en display la habría
     dejado siempre visible pase lo que pase, tapando esa lógica. */
  #results-card .results-metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    padding:1px!important;
    margin:0 0 11px!important;
    border:1px solid rgba(0,0,0,.06)!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:rgba(0,0,0,.055)!important;
  }

  #results-card .metric-box{
    min-width:0!important;
    min-height:62px;
    padding:10px 5px 9px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:0!important;
    background:var(--card)!important;
    box-shadow:none!important;
  }

  #results-card .metric-value{
    font-size:21px!important;
    line-height:1!important;
    font-weight:850!important;
    letter-spacing:-.25px;
    white-space:nowrap;
  }

  #results-card .metric-label{
    margin-top:4px!important;
    font-size:10px!important;
    line-height:1.12!important;
    font-weight:700!important;
    letter-spacing:.35px!important;
    text-transform:uppercase;
    opacity:.62;
  }

  /* 04 — FRASE: bloque emocional principal */
  #results-card .results-phrase-container{
    position:relative;
    margin:0 0 10px!important;
    padding:20px 16px 16px!important;
    border-radius:16px!important;
    border:1px solid rgba(0,0,0,.07)!important;
    border-top:3px solid var(--tone-color, var(--primary))!important;
    box-shadow:none!important;
    overflow:hidden;
  }

  #results-card .results-phrase-container::before,
  #results-card .results-phrase-container::after{
    opacity:.5!important;
  }

  #results-card .results-mood-icon{
    width:46px!important;
    height:46px!important;
    margin:0 auto 8px!important;
    font-size:23px!important;
  }

  #results-card .results-category-title{
    margin:0 0 7px!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:1px!important;
  }

  #results-card .results-phrase{
    max-width:32em;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:19px!important;
    line-height:1.36!important;
  }

  /* Firma de Sir Edwards: la frase se lee como algo que dice él. */
  #results-card .results-phrase:not(:empty)::after{
    content:"— Sir Edwards";
    display:block;
    margin-top:10px;
    font-family:'Inter',system-ui,sans-serif;
    font-style:normal;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:var(--tone-color, var(--primary));
  }

  /* 05 — RACHA: píldora compacta, igual que los chips; solo visible
     cuando lleva la clase .show (racha > 0 y modo aplicable). */
  #results-card .results-streak-box.show{
    display:inline-flex!important;
    align-items:center!important;
    margin:0 auto 10px!important;
    padding:6px 12px!important;
    border-radius:999px!important;
    box-shadow:none!important;
    gap:6px!important;
  }

  #results-card .results-streak-fire{
    font-size:13px!important;
  }

  #results-card .results-streak-value{
    font-size:12.5px!important;
    font-weight:800!important;
  }

  /* 06 — RECOMPENSAS: compactas, sin sensación de tarjetas anidadas */
  #results-card .session-mode-unlock-box,
  #results-card .session-medals-box{
    margin:0 0 9px!important;
    padding:10px!important;
    border-radius:13px!important;
    border:1px solid rgba(0,0,0,.065)!important;
    box-shadow:none!important;
  }

  #results-card .session-mode-unlock-title,
  #results-card .session-medals-title{
    margin:0 0 7px!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:.7px!important;
  }

  #results-card .session-mode-unlock-list,
  #results-card .session-medals-list{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }

  #results-card .session-mode-unlock-item,
  #results-card .session-medal-item{
    min-width:0!important;
    padding:7px 8px!important;
    gap:8px!important;
    border-radius:9px!important;
    box-shadow:none!important;
  }

  #results-card .session-mode-unlock-icon,
  #results-card .session-medal-icon{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    border-radius:8px!important;
    font-size:19px!important;
  }

  #results-card .session-mode-unlock-name,
  #results-card .session-medal-info{
    min-width:0!important;
    font-size:12px!important;
    line-height:1.18!important;
    font-weight:750!important;
    overflow-wrap:anywhere;
  }

  #results-card .session-mode-unlock-desc,
  #results-card .session-medal-desc{
    min-width:0!important;
    margin-top:2px!important;
    font-size:9.5px!important;
    line-height:1.22!important;
    overflow-wrap:anywhere;
  }

  /* 07 — CTA */
  #results-card > div:last-child .btn{
    width:100%!important;
    min-height:50px!important;
    padding:12px 14px!important;
    border-radius:13px!important;
    font-size:13.5px!important;
    line-height:1.1!important;
    font-weight:800!important;
    box-shadow:0 5px 14px rgba(0,0,0,.09)!important;
  }
}

/* Móvil estrecho: 320–369 px */
@media (max-width:369px){
  #results-card.results-card{
    padding:13px 8px 10px!important;
    border-radius:17px!important;
  }

  #results-card .results-card h3{
    font-size:10.5px!important;
    letter-spacing:1px!important;
    margin-bottom:7px!important;
  }

  #results-card .results-metrics-grid{
    margin-bottom:9px!important;
    border-radius:12px!important;
  }

  #results-card .metric-box{
    min-height:57px;
    padding:8px 4px!important;
  }

  #results-card .metric-value{
    font-size:18px!important;
  }

  #results-card .metric-label{
    font-size:10px!important;
    letter-spacing:.2px!important;
  }

  #results-card .results-phrase-container{
    padding:14px 11px 12px!important;
    margin-bottom:9px!important;
  }

  #results-card .results-mood-icon{
    width:41px!important;
    height:41px!important;
    font-size:20px!important;
  }

  #results-card .results-phrase{
    font-size:16.5px!important;
    line-height:1.32!important;
  }

  #results-card .results-streak-box{
    margin-bottom:9px!important;
    padding:6px 11px!important;
  }

  #results-card .result-chip{
    padding:6px 11px!important;
  }

  #results-card .result-chip-value{
    font-size:12.5px!important;
  }

  #results-card .session-mode-unlock-box,
  #results-card .session-medals-box{
    padding:8px!important;
    margin-bottom:8px!important;
  }

  #results-card .session-mode-unlock-icon,
  #results-card .session-medal-icon{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
    font-size:18px!important;
  }

  #results-card .session-mode-unlock-name,
  #results-card .session-medal-info{
    font-size:11.5px!important;
  }

  #results-card .session-mode-unlock-desc,
  #results-card .session-medal-desc{
    font-size:9px!important;
  }

  #results-card > div:last-child .btn{
    min-height:48px!important;
    font-size:13px!important;
  }
}

/* Móvil horizontal */
@media (max-height:520px) and (orientation:landscape) and (max-width:900px){
  #results-card.results-card{
    padding:9px!important;
    border-radius:15px!important;
  }

  #results-card .results-card h3{
    font-size:10.5px!important;
    letter-spacing:1px!important;
    margin-bottom:5px!important;
  }

  #results-card .results-metrics-grid{
    margin-bottom:6px!important;
  }

  #results-card .metric-box{
    min-height:48px;
    padding:6px!important;
  }

  #results-card .metric-value{
    font-size:17px!important;
  }

  #results-card .metric-label{
    margin-top:2px!important;
    font-size:10px!important;
  }

  #results-card .results-phrase-container{
    padding:8px 12px!important;
    margin-bottom:6px!important;
  }

  #results-card .results-mood-icon{
    width:34px!important;
    height:34px!important;
    font-size:18px!important;
    margin-bottom:3px!important;
  }

  #results-card .results-category-title{
    margin-bottom:3px!important;
  }

  #results-card .results-phrase{
    font-size:13.5px!important;
    line-height:1.25!important;
  }
  #results-card .results-phrase:not(:empty)::after{ display:none; }

  #results-card .results-streak-box,
  #results-card .session-mode-unlock-box,
  #results-card .session-medals-box{
    margin-bottom:5px!important;
    padding:6px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #results-card .session-mode-unlock-box{
    animation:none!important;
  }
}

/* --- Ajustes de UI: botones de copia de seguridad con borde --- */
.settings-backup-actions .btn{
  border: 1px solid var(--border);
}



/* ===== v2.1: selector de dificultad — tarjetas apiladas y más limpias ===== */
#menu-difficulty-modes .modes-grid{
  grid-template-columns:1fr !important;
}
#menu-difficulty-modes .mode-card{
  width:100%;
  box-sizing:border-box;
  transform:none;
}
#menu-difficulty-modes .mode-card:hover{
  transform:translateY(-2px) !important;
}
#menu-difficulty-modes .mode-card:active{
  transform:scale(.985) !important;
}
#menu-difficulty-modes.diff-survival .mode-card{
  border-color:rgba(245,158,11,.72);
}
#menu-difficulty-modes.diff-survival .mode-card:hover{
  border-color:#f59e0b;
  box-shadow:0 9px 22px rgba(245,158,11,.16);
}
#menu-difficulty-modes.diff-sudden .mode-card{
  border-color:rgba(220,38,38,.72);
}
#menu-difficulty-modes.diff-sudden .mode-card:hover{
  border-color:#dc2626;
  box-shadow:0 9px 22px rgba(220,38,38,.16);
}

@media(max-width:600px){
  #menu-difficulty-modes .modes-grid{
    grid-template-columns:1fr !important;
  }
    }

/* ===== TARJETAS DE DIFICULTAD · ESTILO JUEGO ===== */
#menu-difficulty-modes .modes-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin-top:18px !important;
}

#menu-difficulty-modes .mode-card{
  position:relative;
  min-height:92px !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:18px 58px 18px 24px !important;
  border:2px solid rgba(245,158,11,.42) !important;
  border-radius:var(--radius-lg) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.85), transparent 34%),
    linear-gradient(135deg, rgba(245,158,11,.10), var(--card) 58%) !important;
  box-shadow:var(--shadow-soft) !important;
  overflow:hidden !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

#menu-difficulty-modes .mode-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:linear-gradient(180deg,#fbbf24,#f59e0b,#d97706);
}

#menu-difficulty-modes .mode-card::after{
  content:"›";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-53%);
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(245,158,11,.14);
  color:#b45309;
  font-size:28px;
  font-weight:800;
  line-height:1;
  transition:transform .18s ease, background .18s ease;
}

#menu-difficulty-modes .mode-card:hover{
  transform:var(--state-lift);
  border-color:rgba(245,158,11,.75) !important;
  box-shadow:var(--shadow-card) !important;
}

#menu-difficulty-modes .mode-card:hover::after{
  transform:translate(3px,-53%);
  background:rgba(245,158,11,.22);
}

#menu-difficulty-modes .mode-card:active{
  transform:var(--state-press);
  box-shadow:var(--shadow-soft) !important;
}

#menu-difficulty-modes .mode-card h3{
  margin:0 !important;
  font-size:22px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:-.3px !important;
  color:var(--text) !important;
  text-align:center !important;
}

#menu-difficulty-modes .mode-card p{
  margin:5px 0 0 !important;
  text-align:center !important;
}

/* Identidad de cada dificultad */
#menu-difficulty-modes .mode-card[data-difficulty="ameba"]{
  border-color:rgba(34,197,94,.48) !important;
  background:linear-gradient(135deg,rgba(34,197,94,.13),var(--card) 60%) !important;
}
#menu-difficulty-modes .mode-card[data-difficulty="ameba"]::before{
  background:linear-gradient(180deg,#4ade80,#22c55e,#16a34a);
}
#menu-difficulty-modes .mode-card[data-difficulty="humano"]{
  border-color:rgba(59,130,246,.44) !important;
  background:linear-gradient(135deg,rgba(59,130,246,.12),var(--card) 60%) !important;
}
#menu-difficulty-modes .mode-card[data-difficulty="humano"]::before{
  background:linear-gradient(180deg,#60a5fa,#3b82f6,#2563eb);
}
#menu-difficulty-modes .mode-card[data-difficulty="derrame"]{
  border-color:rgba(239,68,68,.46) !important;
  background:linear-gradient(135deg,rgba(239,68,68,.13),var(--card) 60%) !important;
}
#menu-difficulty-modes .mode-card[data-difficulty="derrame"]::before{
  background:linear-gradient(180deg,#fb7185,#ef4444,#dc2626);
}

@media (max-width:600px){
  #menu-difficulty-modes .mode-card{
    min-height:84px !important;
    padding:16px 56px 16px 22px !important;
  }
  #menu-difficulty-modes .mode-card h3{
    font-size:20px !important;
  }
}

/* Oscuro */
[data-theme="dark"] #menu-difficulty-modes .mode-card{
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(135deg,rgba(245,158,11,.13),var(--card) 60%) !important;
  box-shadow:var(--shadow-soft) !important;
}
[data-theme="dark"] #menu-difficulty-modes .mode-card::after{
  color:#fbbf24;
  background:rgba(245,158,11,.16);
}

/* Duelo: código de reto y banner de resultado. Usa el ADN visual de
   Sir Edwards (dorado/púrpura/azul marino) en vez de los verdes/rojos
   genéricos de acierto-fallo del juego: victoria = dorado (prestigio,
   mismo tono que un logro desbloqueado), empate = púrpura (identidad de
   Duelo) y derrota = tono neutro/marino discreto, sin rojo de alarma. */
.duel-result-box {
  margin-top: 14px; padding: 16px; border-radius: 14px; text-align: center;
  background: var(--badge-bg); border: 1px solid var(--badge-border);
}
.duel-result-box.duel-result-win {
  background: linear-gradient(150deg, var(--accent-gold-soft), var(--card) 45%);
  border-color: var(--accent-gold-mid); color: var(--accent-gold-text);
}
.duel-result-box.duel-result-draw {
  background: linear-gradient(150deg, var(--accent-purple-soft), var(--card) 45%);
  border-color: var(--duel-purple); color: var(--accent-purple-text);
}
.duel-result-box.duel-result-loss {
  background: var(--color-surface-muted); border-color: var(--border); color: var(--text);
}
/* Vista previa de "Unirme a un reto": comparte clases con la tarjeta de
   "Reto Creado" (duel-result-neutral), pero se tiñe aparte por ID para no
   tocar la de creador — dos clases (duel-result-box.duel-result-neutral)
   pesan más que la de .duel-created-card y la sobrescribirían si se
   estilase por clase. Usa el azul de "Unirme" en vez del gris genérico. */
#duel-join-preview {
  background: linear-gradient(150deg, var(--accent-blue-soft), var(--card) 45%);
  border-color: var(--accent-blue);
}
.duel-result-title { font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.duel-result-hint { font-size: 13px; opacity: .85; margin: 6px 0 0; }
.duel-result-phrase { font-size: 13px; font-style: italic; opacity: .9; margin: 10px 0 0; }
.duel-repeat-note {
  font-size: 11.5px; font-style: normal; opacity: .7; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed currentColor;
}
.duel-result-score { font-size: 26px; font-weight: 900; }
.duel-vs { font-size: 14px; font-weight: 600; opacity: .7; margin: 0 6px; }
/* Duelo: tarjeta "RETO CREADO" (creador). Mismo componente/tono que el
   resto del resultado de Duelo; solo añade una etiqueta discreta reutilizable
   (CÓDIGO DEL RETO / Tu puntuación) y una puntuación destacada en solitario,
   ya que aquí no hay marcador "X vs Y" que mostrar todavía. */
.duel-result-tagline { font-weight: 800; font-size: 16px; margin: 0 0 10px; }
.duel-result-subtle-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  opacity: .65; margin: 12px 0 2px;
}
.duel-result-score-solo { font-size: 26px; font-weight: 900; }
.duel-created-card .duel-result-score-solo {
  font-size: 44px; font-weight: 900; color: var(--accent-purple-text); line-height: 1;
}
/* Duelo: tarjeta "RETO CREADO" con el mismo lenguaje visual de Home/
   SirEdwards — insignia circular con degradado y sombra propia (igual que
   .duel-action-icon/.home-big-icon), tarjeta con radio y sombra grandes
   (--radius-lg/--shadow-card, los mismos tokens que .stats-hero) y
   tipografía de época (--font-display) en vez del texto plano genérico. */
.duel-created-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--duel-purple);
  background: linear-gradient(150deg, var(--accent-purple-soft), var(--card) 45%);
  padding: 26px 20px 22px;
}
.duel-created-icon {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: linear-gradient(135deg, var(--duel-purple), #2c1250);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.duel-created-mode {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .3px; opacity: 1; color: var(--accent-purple-text); margin: 0;
}
.duel-created-divider {
  height: 1px; margin: 16px auto 2px; width: 60%;
  background: linear-gradient(90deg, transparent, var(--accent-purple-soft), transparent);
}
.duel-created-card .duel-code-display {
  border: 1px dashed var(--accent-purple-soft); font-size: 20px;
}
/* Jerarquía de acciones de "RETO CREADO": WhatsApp es la principal (grande,
   color de marca, máximo peso visual); "Copiar código" queda como
   secundaria de siempre (.btn-secondary), con algo menos de énfasis aún. */
.btn-whatsapp {
  background: #25D366; color: #fff; border: none; font-weight: 800;
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 15px; cursor: pointer;
}
.btn-whatsapp:active { background: #1ebd5a; }
.btn-duel-secondary { opacity: .85; font-weight: 600; }
/* El código de reto es un artefacto propio de Duelo (no un dato genérico
   de la app), así que usa el acento violeta de Duelo en vez de --primary:
   --accent-purple-surface/--accent-purple-text ya están definidos con
   variante correcta para Light/Dark, así que no hace falta ningún token
   nuevo ni el rgba() fijo que había antes. */
.duel-code-display {
  font-family: ui-monospace, monospace; font-size: 22px; font-weight: 800;
  letter-spacing: 2px; padding: 10px 14px; margin: 8px 0; border-radius: var(--radius-sm);
  background: var(--accent-purple-surface); color: var(--accent-purple-text); display: inline-block;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.duel-code-display:active { opacity: .8; }
/* Aviso "✓ Código copiado" / "No se pudo copiar el código": ver
   showDuelCodeCopyToast(). Discreto, pegado al código, sin bloquear clics. */
.duel-code-copy-toast {
  display: inline-block; margin: 6px 0 0; padding: 4px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--accent-purple-surface); color: var(--accent-purple-text);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.duel-code-copy-toast.show { opacity: 1; transform: translateY(0); }
.duel-code-copy-toast.is-error { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .duel-code-copy-toast.is-error { background: #3b1116; color: #fca5a5; }

/* ---------- Cierre de auditoría v1.1: pantalla Duelo completa ----------
   Cabecera, 3 acciones principales y dificultades de "Crear reto".
   Reutiliza tokens ya existentes (--duel-purple y las familias --accent-*,
   ya con variante Light/Dark correcta) para dar identidad propia sin
   introducir colores nuevos ni reconstruir el marcado: siguen siendo las
   mismas clases .mode-card / .modes-grid / .section-topbar de siempre. */

/* Cabecera: mismo componente .section-topbar que el resto de pantallas,
   con acento violeta propio de Duelo (subtítulo) en vez de duplicar el
   componente o añadir gradientes/glows nuevos. Sin icono en el h2, igual
   que el resto de secciones (Jugar/Estadísticas/Logros/Ajustes). */
#view-duelo .section-topbar-sub { color: var(--dz-duel-text); }

/* Tres acciones principales: jerarquía primaria (Crear reto) / secundaria
   (Unirme) / histórico (Mis retos). Pasada visual final: cada acción es
   una tarjeta protagonista con icono con presencia propia (mismo lenguaje
   que .home-small-icon/.home-big-icon: insignia circular con degradado y
   sombra), título destacado y descripción secundaria, en vez de un simple
   renglón de texto. */
.mode-card.duel-action-crear {
  border-color: var(--duel-purple);
  background: linear-gradient(150deg, var(--accent-purple-soft), var(--card) 45%);
}
.mode-card.duel-action-crear:hover, .mode-card.duel-action-crear:focus-visible { border-color: var(--duel-purple); }
.mode-card.duel-action-unirse {
  border-color: var(--accent-blue);
  background: linear-gradient(150deg, var(--accent-blue-soft), var(--card) 45%);
}
.mode-card.duel-action-unirse:hover, .mode-card.duel-action-unirse:focus-visible {
  border-color: var(--accent-blue); background: linear-gradient(150deg, var(--accent-blue-soft), var(--card) 35%);
}
.mode-card.duel-action-retos {
  border-color: var(--accent-gold-strong);
  background: linear-gradient(150deg, var(--accent-gold-soft), var(--card) 45%);
  box-shadow: 0 6px 18px rgba(146,64,14,.16);
}
.mode-card.duel-action-retos:hover, .mode-card.duel-action-retos:focus-visible { border-color: var(--accent-gold-mid); }
#view-duelo .mode-card:active, #duel-panel-crear .mode-card:active { transform: scale(.98); }

.duel-action-icon {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px rgba(0,0,0,.16);
}
.duel-action-icon svg { width: 24px; height: 24px; color: #fff; }
.duel-action-icon-crear { background: linear-gradient(135deg, var(--duel-purple), #2c1250); }
.duel-action-icon-unirse { background: linear-gradient(135deg, var(--accent-blue), var(--primary-dark)); }
.duel-action-icon-retos { background: linear-gradient(135deg, var(--accent-gold-mid), var(--accent-gold-strong)); }
.duel-action-text { flex: 1; min-width: 0; }
.duel-action-text h3 { margin: 0 0 4px; }
.duel-action-text p { margin: 0; }

/* Menú principal de Duelo (Crear reto/Unirme/Mis retos): ancho contenido
   y centrado, con cada tarjeta en fila (icono + texto) para dar presencia
   al icono sin volver a las tarjetas verticales gigantes de Jugar. */
#duel-home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  max-width: 460px;
  margin: 6px auto 0;
}
#duel-home .mode-card:not(.duel-resume-card) {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 18px 20px;
}
#duel-home .mode-card:not(.duel-resume-card) h3 { margin-bottom: 4px; font-size: 16px; }
#duel-home .mode-card:not(.duel-resume-card) p { margin: 0; font-size: 12.5px; line-height: 1.4; }
@media (min-width: 601px) {
  #duel-home .mode-card:not(.duel-resume-card):hover { transform: translateY(-2px); }
}

/* Crear reto → lista de modos: un modo debajo de otro, SIN descripciones
   (eso se mantiene tal cual se pidió). Pasada visual v1.3: cada fila gana
   un medallón de icono propio y un estado a la derecha, para que se
   reconozcan de un vistazo y tengan la misma "presencia" que el resto de
   la app — reutilizando radios/sombra/hover ya existentes, con acentos de
   color por modo, sin usar la clase .mode-card ni tocarla globalmente —
   de ahí clases propias .duel-mode-option / dmo-*. */
.duel-mode-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  max-width: 460px;
  margin: 18px auto 0;
}
.duel-mode-option {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  text-align: left;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.duel-mode-option:active { transform: scale(.98); }
@media (hover: hover) {
  .duel-mode-option:hover:not(.locked) { transform: translateY(-2px); box-shadow: var(--shadow-card); }
}
.duel-mode-option:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-card); }
.duel-mode-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
}
.duel-mode-name { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; }
/* Estado a la derecha: solo hay texto cuando el modo está bloqueado
   ("BLOQUEADO"); desbloqueado no añade ninguna etiqueta ("Disponible"),
   el propio aspecto normal de la fila ya lo dice. Al pulsar un modo
   bloqueado, selectDuelMode() ya muestra el aviso completo en un toast:
   la fila no necesita repetir esa frase. */
.duel-mode-status { display: none; }
.duel-mode-option.locked .duel-mode-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
/* Mismo tratamiento visual que .mode-card.locked (opacidad + borde
   discontinuo + superficie atenuada), para que el estado bloqueado se
   sienta idéntico al de Jugar. */
.duel-mode-option.locked {
  cursor: default;
  opacity: .65;
  border-style: dashed;
  background: #eef0f3;
}
[data-theme="dark"] .duel-mode-option.locked { background: var(--badge-bg); }
.duel-mode-option.locked:hover { transform: none; box-shadow: var(--shadow-soft); }
.duel-mode-option.locked .duel-mode-icon { background: #e4e6ea !important; filter: grayscale(1); }
[data-theme="dark"] .duel-mode-option.locked .duel-mode-icon { background: var(--badge-bg) !important; }
/* Acentos de color por modo: mismos tonos que ya usa .mode-card.mode-*
   (ver v1.4 más abajo), aplicados aquí a clases propias (dmo-*) para no
   tocar .mode-standard/.mode-survival/etc. globalmente. Borde + un tinte
   de fondo muy sutil + el icono con el mismo tono que ya tiene ese modo
   dentro de la partida, para que la identidad viaje también a la
   selección (no solo dentro del juego). */
.duel-mode-option.dmo-standard:not(.locked) { border-color: var(--accent-blue); background: linear-gradient(150deg, rgba(37,99,235,.28), var(--card) 65%); }
.duel-mode-option.dmo-survival:not(.locked) { border-color: rgba(245,158,11,.6); background: linear-gradient(150deg, var(--accent-gold-soft), var(--card) 45%); }
.duel-mode-option.dmo-sudden:not(.locked) { border-color: var(--accent-red); background: linear-gradient(150deg, var(--accent-red-soft), var(--card) 45%); }
.duel-mode-option.dmo-timetrial:not(.locked) { border-color: #db2777; background: linear-gradient(150deg, rgba(219,39,119,.12), var(--card) 45%); }
.duel-mode-option.dmo-mentalcalc:not(.locked) { border-color: rgba(21,128,61,.5); background: linear-gradient(150deg, rgba(21,128,61,.10), var(--card) 45%); }
.duel-mode-option.dmo-lucidez:not(.locked) { border-color: var(--duel-purple-dark); background: linear-gradient(150deg, var(--accent-purple-soft), var(--card) 45%); }
[data-theme="dark"] .duel-mode-option.dmo-lucidez:not(.locked) { border-color: rgba(167,139,250,.48); }
.dmo-standard .duel-mode-icon { background: rgba(37,99,235,.14); }
.dmo-survival .duel-mode-icon { background: rgba(245,158,11,.16); }
.dmo-sudden .duel-mode-icon { background: rgba(220,38,38,.14); }
.dmo-timetrial .duel-mode-icon { background: linear-gradient(135deg, rgba(219,39,119,.18), rgba(244,114,182,.14)); }
.dmo-mentalcalc .duel-mode-icon { background: linear-gradient(135deg, rgba(21,128,61,.16), rgba(34,197,94,.14)); }
.dmo-lucidez .duel-mode-icon { background: linear-gradient(135deg, rgba(109,40,217,.18), rgba(6,182,212,.14)); }

/* "Continuar reto": mismo tratamiento que #resume-game-card en Jugar
   (borde reforzado + pulso, misma jerarquía de "acción prioritaria"),
   pero con la identidad violeta de Duelo en vez del color del modo,
   porque el Duelo siempre reutiliza el motor de Modo Estándar (no hay
   una identidad de modo propia que mostrar aquí). Ocupa el ancho
   completo del grid, igual que ya hace .mode-lucidez / .duel-diff-mixta. */
.duel-resume-card {
  grid-column: 1 / -1;
  border-width: 3px;
  border-color: var(--duel-purple);
  background: linear-gradient(150deg, var(--accent-purple-soft), var(--card) 45%);
  --pulse: rgba(219,39,119,.22);
}
.duel-resume-card:hover, .duel-resume-card:focus-visible { border-color: var(--duel-purple); }
.duel-resume-card .mode-card-icon { background: linear-gradient(135deg, var(--accent-purple-surface), var(--accent-purple-soft)); }
@media(max-width:600px){ .duel-resume-card::before{ animation:none; opacity:0; } }

/* Dificultades de "Crear reto": Mixta hereda la identidad violeta de Duelo
   (equivale al Modo Estándar) y ocupa el ancho completo, igual que ya hace
   .mode-lucidez en el selector de modos principal. Fácil/Media/Difícil
   usan familias semánticas ya existentes (teal/gold/red) para conservar
   la semántica de dificultad sin inventar tokens nuevos. */
#duel-panel-crear .modes-grid .duel-diff-mixta { grid-column: 1 / -1; }
.mode-card.duel-diff-mixta {
  border-color: var(--duel-purple);
  background: linear-gradient(150deg, var(--accent-purple-soft), var(--card) 45%);
}
.mode-card.duel-diff-facil {
  border-color: var(--accent-teal);
  background: linear-gradient(150deg, var(--accent-teal-soft), var(--card) 45%);
}
.mode-card.duel-diff-media {
  border-color: var(--accent-gold-mid);
  background: linear-gradient(150deg, var(--accent-gold-soft), var(--card) 45%);
}
.mode-card.duel-diff-dificil {
  border-color: var(--accent-red);
  background: linear-gradient(150deg, var(--accent-red-soft), var(--card) 45%);
}
.mode-card.duel-diff-mixta:hover, .mode-card.duel-diff-mixta:focus-visible { border-color: var(--accent-purple); }
.mode-card.duel-diff-facil:hover, .mode-card.duel-diff-facil:focus-visible { border-color: var(--accent-teal); }
.mode-card.duel-diff-media:hover, .mode-card.duel-diff-media:focus-visible { border-color: var(--accent-gold-mid); }
.mode-card.duel-diff-dificil:hover, .mode-card.duel-diff-dificil:focus-visible { border-color: var(--accent-red); }

/* ====== NUEVO MENÚ PRINCIPAL (pantalla de inicio) ======
   Pantalla de entrada rediseñada: sustituye a la barra de pestañas superior
   solo en esta vista (ver body.on-home más abajo); el resto de pantallas
   siguen teniendo la barra de pestañas de siempre para saltar entre
   secciones sin pasar por aquí, más un botón "← Menú" nuevo para volver. */
/* ====== v1.1: Home = marca, interior = contenido ======
   La cabecera global (marca + insignias) y la barra de 5 pestañas quedan
   retiradas de TODAS las pantallas: la home ya tiene su propia cabecera
   (sombrero/avatar de Sir Edwards, identidad) y cada pantalla interior
   tiene su propio header "← Título" (ver .section-topbar). Nivel/XP ya
   no vive en Home (ver v1.6 más abajo: se movió a Jugar) — Home solo
   conserva el avatar. Se ocultan por CSS en vez de borrarlas del DOM
   para no tocar el JS que actualiza sus valores (lbl-level, lbl-xp,
   lbl-current-streak) ni los onclick de los botones de pestaña. */
.top-bar, .nav-wrap { display: none !important; }

.home-info-btn {
  position: absolute; top: 18px; left: 18px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--card);
  color: var(--primary); font-size: 17px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 5; padding: 0;
  box-shadow: var(--shadow-soft); transition: transform .15s ease, box-shadow .15s ease;
}
.home-info-btn:active { transform: scale(.92); }

/* ---------- Iconografía de interfaz (SVG inline, v1.3) ----------
   Sustituye los emoji estructurales de navegación (info, nivel, Jugar,
   Duelo, Estadísticas, Logros, Ajustes) por un lenguaje de línea coherente:
   stroke-width 1.75, currentColor, tamaño = font-size del contenedor.
   Los emoji del CONTENIDO del juego (categorías, resultados, logros
   individuales) no se tocan. */
.icon-svg { width: 1em; height: 1em; display: block; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Símbolos de marca a color (#se-target, #se-swords en index.html): mismos dibujos que las insignias de Home. */
.se-sym { width: 72%; height: 72%; display: block; flex-shrink: 0; }
/* Vidas de Supervivencia / Lucidez en la etiqueta de progreso: corazones del sprite (#se-heart), en línea con el texto. */
.se-lives { display: inline-flex; gap: 1px; vertical-align: -0.3em; }
.se-life { width: 1.3em; height: 1.3em; display: inline-block; flex-shrink: 0; vertical-align: -0.3em; }
.home-level-top .icon-svg { color: var(--accent-gold-mid); }

/* ---------- HOME — recreación fiel del mockup de referencia ---------- */
#view-home {
  position: relative;
  margin: -24px -24px -24px -24px;
  padding: 34px 22px 26px;
  background: radial-gradient(120% 65% at 50% 0%, #f8f1de 0%, var(--brand-cream) 45%, var(--brand-cream-deep) 100%);
}

.home-header {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 4px 0 22px;
}
.home-emblem-spark { color: var(--brand-gold); font-size: 15px; opacity: .85; flex-shrink: 0; }
.home-emblem { position: relative; width: 128px; height: 128px; flex-shrink: 0; display:flex; align-items:center; justify-content:center; }
.home-emblem::before { display:none; }
.home-emblem-ring {
  position: relative; z-index: 1; width: 100%; height: 100%;
  background: transparent; border: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.home-hat-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(19,31,61,.18)); }

.home-title {
  text-align: center; font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 44px); font-weight: 700; color: var(--brand-navy);
  letter-spacing: .5px; margin: 4px 0 10px; line-height: 1.08;
  font-variant: small-caps;
}
.home-subtitle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--brand-purple); font-weight: 700; font-size: 11.5px;
  letter-spacing: 2px; margin-bottom: 28px; text-transform: uppercase;
}
.home-sub-line { flex: 0 1 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold)); }
.home-subtitle .home-sub-line:last-child { background: linear-gradient(90deg, var(--brand-gold), transparent); }
.home-subtitle .home-sub-diamond { color: var(--brand-gold); opacity: .9; font-size: 10px; flex-shrink: 0; }

.home-big-cards { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.home-big-card {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px;
  border-radius: var(--radius-lg); cursor: pointer; touch-action: manipulation;
  color: #fff; position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(232,200,116,.35);
  box-shadow: 0 16px 34px rgba(15,23,42,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-big-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 12% -15%, rgba(255,255,255,.28), transparent 55%);
}
.home-big-card > * { position: relative; z-index: 1; }
.home-big-card:active { transform: scale(.98); }
@media (hover:hover) {
  .home-big-card:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(15,23,42,.28); }
}
.home-big-card.home-card-jugar {
  background: linear-gradient(150deg, #2d5bb8, var(--primary-dark) 55%, #0d1f4a);
}
.home-big-card.home-card-jugar::after {
  content: ""; position: absolute; right: -6px; bottom: -30px; z-index: 0;
  width: 170px; height: 170px;
  background-image: radial-gradient(circle at center, rgba(255,255,255,.85) 0 2px, transparent 3px);
  background-size: 22px 22px; opacity: .14;
}
.home-big-card.home-card-duelo {
  background: linear-gradient(150deg, #c2622b, #9a3412 55%, #4a1808);
}
.home-big-card.home-card-duelo::after {
  content: ""; position: absolute; right: 6px; bottom: -14px; z-index: 0;
  width: 120px; height: 120px; opacity: .14;
  background: url("../assets/modes/suelto/duelo.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
}
.home-big-icon {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; padding: 8px;
  background: radial-gradient(circle at 35% 30%, #f8f1de, #e3d6b8 80%);
  border: 3px solid var(--brand-gold);
  box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
}
.home-big-icon svg { width: 100%; height: 100%; }
.home-big-text { flex: 1; min-width: 0; }
.home-big-title { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: 1px; }
.home-big-sub { font-size: 13px; opacity: .85; margin-top: 4px; font-weight: 500; }
.home-big-arrow {
  font-size: 18px; font-weight: 700; flex-shrink: 0; width: 34px; height: 34px;
  border-radius: 50%; border: 1.5px solid var(--brand-gold-light);
  background: rgba(255,255,255,.08); display: flex;
  align-items: center; justify-content: center;
}

.home-small-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.home-small-card {
  background: linear-gradient(180deg, #f4ecd8, #e8dcc0); text-align: center;
  border: 1px solid var(--color-border-accent); border-radius: var(--radius-md);
  padding: 18px 8px 14px; cursor: pointer; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-small-card:active { transform: scale(.97); }
@media (hover:hover) {
  .home-small-card:hover { transform: var(--state-lift); box-shadow: var(--shadow-elevated); }
}
/* v1.4 — el fondo de estas tarjetas era un crema fijo que nunca cambiaba
   con el tema, mientras que --brand-navy (color del título; antes --home-navy) sí se invertía
   a crema claro en modo oscuro: el resultado era texto claro sobre fondo
   claro, casi ilegible ("Estadísticas", "Logros", "Ajustes"). Se les da su
   propio fondo oscuro, reutilizando los mismos tokens que ya pinta
   #view-home en modo oscuro para que combinen con el resto de la pantalla. */
[data-theme="dark"] .home-small-card {
  background: linear-gradient(180deg, var(--brand-cream), var(--brand-cream-deep));
  border-color: var(--color-border-accent);
}
.home-small-icon {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin-bottom: 10px; color: #fff;
  box-shadow: 0 5px 12px rgba(0,0,0,.16);
}
.home-small-icon svg { width: 22px; height: 22px; }
.home-card-stats .home-small-icon { background: linear-gradient(135deg,#3b6fd6,var(--brand-navy)); }
.home-card-medals .home-small-icon { background: linear-gradient(135deg,var(--brand-gold-light),var(--brand-gold)); }
.home-card-settings .home-small-icon { background: linear-gradient(135deg,#8791a3,#525b6e); }
.home-small-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: var(--brand-navy); }
.home-small-divider { width: 26px; height: 1px; background: var(--brand-gold); opacity: .6; margin: 7px auto; position: relative; }
.home-small-divider::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 6px; color: var(--brand-gold); background: var(--brand-cream);
}
.home-small-sub { font-size: 10.5px; color: var(--sub); margin: 0 0 10px; line-height: 1.3; }
.home-small-arrow { font-size: 14px; color: var(--brand-gold); margin-top: auto; font-weight: 700; }

.home-footer { text-align: center; margin-top: 6px; }
.home-footer-line {
  display: flex; align-items: center; gap: 10px; margin: 0 auto 6px; width: 70%;
  color: var(--brand-gold); opacity: .55; font-size: 13px;
}
.home-footer-line::before, .home-footer-line::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-gold));
}
.home-footer-line::after { background: linear-gradient(90deg, var(--brand-gold), transparent); }
.home-footer-quote-mark { font-family: var(--font-display); font-size: 20px; color: var(--brand-gold); margin-bottom: 4px; }
.home-quote {
  font-family: var(--font-display); font-style: italic; font-size: 14.5px;
  color: var(--brand-navy); line-height: 1.5; margin: 0 8px;
}
.home-quote-author { font-family: var(--font-display); font-size: 12px; color: var(--brand-navy); font-weight: 700; margin-top: 10px; letter-spacing: .4px; opacity: .85; }


/* Cabecera "← Título" reutilizada en Jugar/Duelo/Estadísticas/Logros/Ajustes
   para volver a la pantalla de inicio sin depender de la barra de pestañas.
   Deliberadamente austera: sin logo, sin nombre completo de la app, sin
   nivel/XP, sin navegación horizontal — esa identidad ya vive solo en home.
   Debe sentirse parte del mismo sistema: mismo par de fuentes, mucho más
   espacio alrededor y jerarquía clara entre título y subtítulo. */
.section-topbar {
  display: flex; align-items: center; gap: 14px; margin: 2px 0 24px; padding-bottom: 16px;
  /* Filete dorado que se desvanece: la misma línea de marca que acompaña al subtítulo de Home. */
  background: linear-gradient(90deg, var(--color-border-accent), transparent 78%) left bottom / 100% 1px no-repeat;
}
.section-topbar h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 24px; letter-spacing: .2px; color: var(--brand-navy);
}
.section-topbar-text { min-width: 0; }
.section-topbar-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--sub); font-weight: 600; letter-spacing: .2px; }
.section-back-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--brand-navy); font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; flex-shrink: 0; touch-action: manipulation; box-shadow: var(--shadow-soft);
  transition: transform .15s ease;
}
.section-back-btn:active { transform: scale(.92); }

/* Botón "?" de ayuda de Duelo: mismo lenguaje visual que .section-back-btn
   pero más discreto (borde en vez de icono a color), empujado al extremo
   derecho de la cabecera. */
#view-duelo .section-topbar-text { flex: 1 1 auto; min-width: 0; }
.section-help-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--sub); font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; flex-shrink: 0; margin-left: auto; touch-action: manipulation;
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}
.section-help-btn:hover { color: var(--duel-purple); border-color: var(--accent-purple-soft); }
.section-help-btn:active { transform: scale(.92); }

@media (max-width: 380px) {
  .home-emblem { width: 104px; height: 104px; }
  .home-emblem::before { inset: -26px; }
  .home-emblem-spark { font-size: 12px; }
  .home-level-card { min-width: 124px; padding: 7px 12px; }
  .home-small-sub { display: none; }
  .home-small-card { padding: 13px 4px 10px; }
  .home-small-divider { margin: 5px auto; }
  .home-title { margin-top: 6px; }
  .home-subtitle { gap: 6px; letter-spacing: 1.4px; }
  .home-sub-line { flex-basis: 30px; }
}

/* =========================================================
   SISTEMA VISUAL v1.2 — PANTALLAS INTERIORES (segunda pasada)
   Estas reglas se cargan al final a propósito: sustituyen, sin
   borrarlas, las cajas "card dentro de card" acumuladas en pasadas
   anteriores (.stats-section / .settings-section / .history-container
   tenían fondo + borde + sombra interior en cada bloque). El objetivo
   es que Estadísticas/Logros/Ajustes respiren: texto y separadores
   donde antes había una caja, y una superficie con volumen solo donde
   de verdad agrupa datos (stats-hero, stats-mini, stat-extra, medal-card).
   No se toca el HTML ni la lógica: mismas clases, tratamiento distinto.
   ========================================================= */

.stats-section, .history-container {
 box-shadow: none;
 margin: 0;
}
.stats-section h3, .history-container h3, #menu-main-modes > h2 {
  margin: 0 0 14px; font-weight: 800; font-size: 14.5px; letter-spacing: .2px;
}
.stats-section-sub { margin: -8px 0 14px; }
.history-list { margin-top: 12px; }
.history-item { box-shadow: var(--shadow-soft); border-color: transparent; }

/* Estadísticas: los widgets que sí agrupan datos reales mantienen superficie,
   pero con la sombra suave del nuevo sistema en vez de bordes duros. */
.stats-level-widget, .stats-hero, .stats-highlight, .stats-mini, .stat-extra {
  box-shadow: var(--shadow-soft); border-color: transparent;
}
.stats-hero { border-radius: var(--radius-lg); }
.stats-mini, .stat-extra { border-radius: var(--radius-sm); background: var(--card); }
.stats-highlight { border-radius: var(--radius-md); }

/* Ajustes: mismo criterio. Cada grupo (Apariencia/Sonido, Progreso,
   Historial) pasa a ser un bloque abierto separado por una línea fina;
   solo la Zona de Peligro conserva un tratamiento propio, deliberadamente
   secundario y aislado del resto. */
.settings-section {
 box-shadow: none;
 margin: 0;
}
#view-settings > .settings-section:first-of-type { border-top: none; padding-top: 0; }
.settings-section h3 {
  margin: 0 0 14px; font-weight: 800; font-size: 14.5px; letter-spacing: .2px;
}
.settings-danger-zone {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: 1px dashed var(--danger-txt);
}
.settings-danger-zone h3 { font-size: 13px; }

/* Logros: refuerza que lo bloqueado es discreto y lo desbloqueado, valioso —
   sin cambiar el marcado, solo intensificando el contraste ya existente. */
.medal-card.locked { opacity: .5; filter: saturate(.3); box-shadow: none; }
.medal-card.unlocked {
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover) {
  .medal-card.unlocked:hover { box-shadow: var(--shadow-elevated); }
}

/* =========================================================
   AUDITORÍA v1.1 — PANEL 2/3: personalidad en Estadísticas/Ajustes
   Recupera un borde discreto por sección (en vez de la sola línea
   superior del sistema v1.2) para que cada bloque se lea como un
   panel propio y agrupado, sin sombras ni gradientes nuevos. El
   pequeño rombo delante de cada título es el mismo motivo ya usado
   como conector en Home, para que Estadísticas/Ajustes se sientan
   del mismo producto sin añadir decoración nueva.
   ========================================================= */
.stats-section, .settings-section, .history-container {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 16px; background: var(--card);
  margin-top: var(--space-lg);
}
#view-stats > #stats-content > .stats-section:first-child,
#view-stats > #stats-content > .stats-hero + .stats-highlight-row + .stats-section {
  margin-top: var(--space-lg);
}
#view-settings > .settings-section:first-of-type { margin-top: 0; }
.stats-section h3::before, .settings-section h3::before, .history-container h3::before, #menu-main-modes > h2::before {
  content: ''; display: inline-block; font-size: 7px; color: var(--accent-gold-mid);
  opacity: .75; margin-right: 8px; position: relative; top: -2px;
}
.settings-danger-zone { border-color: var(--danger-txt); border-style: dashed; opacity: .9; }
.settings-danger-zone:hover { opacity: 1; }
.settings-danger-zone h3::before { color: var(--danger-txt); opacity: .7; }

/* Separación clara entre estadísticas generales y Duelo: más aire arriba
   y el mismo acento violeta que ya identifica a Duelo en el resto de la
   app (--duel-purple / --accent-purple-soft), sin tokens nuevos. */
#stats-duel-section {
  margin-top: calc(var(--space-xl) + var(--space-md));
  border-color: var(--dz-duel-soft);
}
#stats-duel-section h3::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--dz-duel); transform: rotate(45deg); opacity: .85; top: -1px; }

/* Los números son el protagonista de un dashboard de progreso: alineación
   tabular para que no "bailen" al cambiar de valor. */
.stats-hero-value, .stats-mini-value, .stat-extra-value, .stats-highlight-value {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .stats-section, .settings-section, .history-container { padding: 14px 13px; }
}

/* =========================================================
   SISTEMA VISUAL v1.5 — JUGAR: TARJETAS DE MODO (pasada visual)
   Objetivo: que "Jugar" pertenezca al mismo sistema v1.1 que Home
   y Duelo. No se toca la lógica (reglas, desbloqueos, puntuación):
   solo se añade el icono de cada modo (.mode-card-icon, componente
   que ya existía y ya usaba "Continuar partida") y una línea de
   estado "✓ DISPONIBLE" (.mode-subtitle, mismo componente que ya
   usaba "EN CURSO") para los modos bloqueables. El estado
   bloqueado/desbloqueado sigue siendo exactamente el que ya
   gestiona updateBadges() vía la clase .locked que alterna JS. */

/* La línea "✓ DISPONIBLE" solo existe en los 5 modos bloqueables y
   se apoya en la misma clase .locked que ya alterna el JS: nunca se
   solapa con .mode-req, que usa la regla inversa (solo visible con
   .locked). Sin JS nuevo. */
.mode-card .mode-status-open { display: none; }
.mode-card:not(.locked) .mode-status-open { display: block; }

/* Accesibilidad/coherencia: mismo estado :focus-visible que ya usan
   las tarjetas de Duelo, por si en el futuro las tarjetas reciben
   foco por teclado. No cambia el comportamiento actual. */
#view-modes .mode-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-card);
}

/* El nuevo icono de modo queda por delante del candado y del brillo
   decorativo de fondo de cada tarjeta. */
#view-modes .mode-card-icon { position: relative; z-index: 1; }

/* Cálculo Mental no tenía token semántico propio (su acento ya era un
   gris neutro deliberado, ver comentarios de la auditoría v1.3/v1.4):
   se iguala el tono del nuevo icono al que ya usa su .mode-subtitle,
   sin introducir un color nuevo. */
[data-theme="dark"] .mode-mentalcalc .mode-card-icon { background: linear-gradient(135deg, rgba(134,197,154,.16), rgba(95,174,125,.10)); }

/* Jugar y Duelo deben leerse como la misma familia: idéntico radio,
   idéntica sombra en reposo y el mismo salto sutil al pasar el ratón
   que ya usan las tarjetas de Home (.home-small-card) y Duelo. */
#view-modes .modes-grid .mode-card,
#view-duelo .modes-grid .mode-card { box-shadow: var(--shadow-soft); }
@media (hover: hover) {
  #view-modes .modes-grid .mode-card:hover:not(.locked),
  #view-duelo .modes-grid .mode-card:hover { box-shadow: var(--shadow-card); }
}

/* Los antiguos ajustes finos "position:relative;top:8px/6px" (pensados
   para cuando la tarjeta no tenía icono) quedan neutralizados ahora
   que el icono ya marca esa separación por sí mismo; si no se anulan,
   el texto queda descentrado respecto al icono nuevo. Mismos
   elementos, mismo contenido — solo se corrige el desplazamiento. */
#mode-desc-survival-main, #mode-desc-sd-main, #mode-desc-timetrial, #mode-desc-mental-calc,
#mode-req-survival-main, #mode-req-sudden_death_main, #mode-req-timetrial, #mode-req-mental_calc {
  top: 0;
}

/* Verificado a 360/375/390px y escritorio: icono arriba-izquierda,
   candado arriba-derecha (ya con su propio tamaño reducido en móvil,
   ver reglas existentes), sin solape ni overflow horizontal. */

/* =========================================================
   SISTEMA VISUAL v1.7 — NIVEL+XP COMO INDICADOR DEL HEADER DE JUGAR
   Identidad (sombrero) y progreso (Nivel/XP/barra) quedan separados:
   Home conserva solo el sombrero, centrado en solitario. El indicador
   de progreso ya NO es una tarjeta/botón aparte (eso competía visualmente
   con "Continuar partida" y generaba hueco vacío); ahora vive DENTRO del
   propio .section-topbar de Jugar, alineado a la derecha y a la altura
   del título. Mismos ids de siempre (#home-lbl-level, #home-lbl-xp,
   #home-level-bar-fill) que ya rellenaba updateBadges() — no hay lógica
   nueva ni un segundo sistema de progreso, solo reubicación visual. */

/* Home: con el conector y la tarjeta de nivel fuera, el sombrero
   queda solo dentro de .home-header (que ya centraba su contenido),
   así que se mantiene centrado y con la misma presencia sin tocar
   .home-avatar. */
.home-header { margin-bottom: 18px; }

/* El header de Jugar pasa a alojar 3 elementos (volver / título / progreso):
   el título se deja encoger (min-width:0) para que el indicador de la
   derecha nunca provoque overflow horizontal en móvil. */
#view-modes.view .section-topbar,
#view-modes .section-topbar { flex-wrap: nowrap; }
#view-modes .section-topbar-text { flex: 1 1 auto; min-width: 0; }
#view-modes .section-topbar-text h2,
#view-modes .section-topbar-text .section-topbar-sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.play-progress-inline {
  flex-shrink: 0; margin-left: auto; text-align: right;
  width: 92px; max-width: 34vw;
}
.play-progress-inline-top {
  font-size: 12px; font-weight: 800; letter-spacing: .2px;
  color: var(--text); white-space: nowrap;
}
.play-progress-inline-bar.progress-bar {
  height: 4px; width: 100%; margin: 5px 0 4px; border-radius: 999px;
}
.play-progress-inline-xp {
  font-size: 10.5px; font-weight: 700; color: var(--sub); white-space: nowrap;
}
@media (max-width: 380px) {
  .play-progress-inline { width: 74px; max-width: 32vw; }
  .play-progress-inline-top { font-size: 10.5px; }
  .play-progress-inline-xp { font-size: 9.5px; }
}

/* Mismo widget de Nivel/XP dentro de la partida (Jugar y Duelo comparten
   #view-game): una sola línea compacta, sin icono ni tarjeta propia, para
   no competir con la pregunta como protagonista de la pantalla. */
.game-level-inline {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 10px;
}
.game-level-inline-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  color: var(--sub); white-space: nowrap;
}
.game-level-inline-bar.progress-bar { flex: 1 1 auto; height: 4px; margin: 0; border-radius: 999px; }
.game-level-inline-xp { font-size: 10.5px; font-weight: 700; color: var(--sub); white-space: nowrap; }

/* Auditoría v1.1, punto 9: equilibrio vertical/horizontal de la pantalla
   de partida (Jugar y Duelo comparten #view-game). En desktop, el `.card`
   raíz llega a 820px de ancho; una pregunta corta ahí se siente "flotando"
   en vez de compuesta. Se centra solo el contenido activo de la partida
   en una columna más intencionada, sin tocar el layout en móvil (donde
   el `.card` ya ocupa el ancho completo de forma natural). */
@media (min-width: 700px) {
  #view-game .game-level-inline,
  #view-game .mode-header.game-hud,
  #view-game > .progress-bar,
  #view-game .lucidez-phase-subtitle,
  #view-game #game-play-area,
  #view-game #results-card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  #view-game .q-box { font-size: 22px; }
}

/* Auditoría v1.1, punto 10: la tarjeta de resultados final mantiene su
   estructura compartida (métricas, chips, sellos), pero cada modo
   conserva algo de personalidad reutilizando exactamente los mismos
   matices que ya identifican a su .mode-header dentro de la partida.
   Duelo (theme-duel) se añade COMO MODIFICADOR sobre theme-standard
   (que es el motor que reutiliza) y se declara después para ganarle,
   así el resultado se lee como "competición" y no como Modo Estándar. */
.metric-value#res-percentage-text { color: var(--primary); }
.card.theme-standard #results-card { border-color: rgba(37,99,235,.4); background: linear-gradient(135deg, rgba(37,99,235,.08), var(--card) 72%); }
.card.theme-review #results-card { border-color: rgba(13,148,136,.4); background: linear-gradient(135deg, rgba(13,148,136,.08), var(--card) 72%); }
.card.theme-review .metric-value#res-percentage-text { color: #0f766e; }
.card.theme-survival #results-card { border-color: rgba(245,158,11,.45); background: linear-gradient(135deg, rgba(245,158,11,.10), var(--card) 72%); }
.card.theme-survival .metric-value#res-percentage-text { color: #b45309; }
.card.theme-sudden #results-card { border-color: rgba(220,38,38,.45); background: linear-gradient(135deg, rgba(220,38,38,.09), var(--card) 72%); }
.card.theme-sudden .metric-value#res-percentage-text { color: #b91c1c; }
.card.theme-timetrial #results-card { border-color: rgba(219,39,119,.4); background: linear-gradient(135deg, rgba(219,39,119,.09), rgba(244,114,182,.05), var(--card) 74%); }
.card.theme-timetrial .metric-value#res-percentage-text { color: #be185d; }
.card.theme-mentalcalc #results-card { border-color: rgba(21,128,61,.32); background: linear-gradient(135deg, rgba(21,128,61,.08), rgba(34,197,94,.05), var(--card) 74%); }
.card.theme-mentalcalc .metric-value#res-percentage-text { color: #166534; }
.card.theme-lucidez #results-card { border-color: rgba(109,40,217,.45); background: linear-gradient(135deg, rgba(109,40,217,.10), rgba(6,182,212,.05), var(--card) 74%); }
.card.theme-lucidez .metric-value#res-percentage-text { color: #5b21b6; }
.card.theme-duel #results-card { border-color: var(--dz-duel-soft); background: linear-gradient(135deg, var(--dz-duel-surface), var(--card) 72%); }
.card.theme-duel .metric-value#res-percentage-text { color: var(--dz-duel-text); }
/* 2.0: en oscuro el número de cada modo usa el tono claro de su color (≥ 4,5:1 sobre el fondo de la tarjeta). */
[data-theme="dark"] .card.theme-review .metric-value#res-percentage-text { color: #5eead4; }
[data-theme="dark"] .card.theme-survival .metric-value#res-percentage-text { color: #fbbf24; }
[data-theme="dark"] .card.theme-sudden .metric-value#res-percentage-text { color: #fca5a5; }
[data-theme="dark"] .card.theme-timetrial .metric-value#res-percentage-text { color: #f9a8d4; }
[data-theme="dark"] .card.theme-lucidez .metric-value#res-percentage-text { color: #c4b5fd; }
[data-theme="dark"] .card.theme-mentalcalc .metric-value#res-percentage-text { color: #86c59a; }

/* =========================================================
   SISTEMA VISUAL v1.8 — ESTADÍSTICAS, LOGROS Y AJUSTES
   Pasada puramente visual: mismas clases, mismos ids, mismos datos.
   No se toca ningún cálculo ni condición de desbloqueo; solo se refina
   jerarquía, agrupación por identidad de modo, sensación de recompensa
   en Logros y accesibilidad táctil en Ajustes, sobre el sistema "las
   secciones respiran" ya introducido en v1.2.
   ========================================================= */

/* --- ESTADÍSTICAS: "Récords personales" con identidad de modo ---
   Cada tarjeta ya usaba un color de icono distinto (.stat-speed,
   .stat-mentalcalc, .stat-lucidez, .stat-master); se refuerza ese mismo
   color como una fina línea de acento a la izquierda, para que el ojo
   agrupe cada récord con su modo antes de leer el número. */
.stat-extra { border-left: 3px solid transparent; }
.stat-speed { border-left-color: var(--accent-purple); }
.stat-mentalcalc { border-left-color: #15803d; }
.stat-lucidez { border-left-color: var(--accent-purple-strong); }
.stat-master { border-left-color: var(--accent-teal); }

/* Duelos: la sección entera se oculta vía JS (renderStats) mientras no haya
   ningún reto jugado, para no mostrar 6 ceros sin sentido; esta regla solo
   evita un salto visual brusco cuando sí se muestra. */
#stats-duel-section { animation: fadeInScale .25s ease-out; }

/* Widget de Nivel/XP: mismo tratamiento "superficie suave" que el resto de
   cajas de datos reales (stats-hero, stats-mini, stat-extra). */
.stats-level-widget { border-radius: var(--radius-md); }

/* Historial de partidas: se limita la altura en pantallas pequeñas con
   scroll propio, para que "Últimas partidas" no obligue a un scroll de
   página kilométrico cuando ya hay muchas partidas guardadas. */
@media (max-width: 600px) {
  /* «Últimas partidas» (#history-list-container) guarda solo 5 partidas: se muestran enteras, sin scroll interno que corte la última fila. */
  .history-list:not(#history-list-container) { max-height: 340px; overflow-y: auto; padding-right: 2px; }
}

@media (max-width: 380px) {
  .stats-hero-value { font-size: 36px; }
  .stat-extra { padding: 10px; }
  .stat-extra-value { font-size: 17px; }
  .stats-mini-value { font-size: 18px; }
  .duel-created-card .duel-result-score-solo { font-size: 36px; }
}

/* --- LOGROS: lo desbloqueado se siente ganado, lo bloqueado queda atrás --- */

/* Candado en SVG (sustituye al emoji dentro de medal-status/.icon):
   mismo texto, icono propio del sistema en vez de un carácter suelto. */
.medal-lock-svg {
  width: 12px; height: 12px; fill: currentColor; vertical-align: -1.5px;
  margin-right: 3px; opacity: .85;
}
.medal-card.secret-locked .icon .medal-lock-svg,
.medal-card.locked .icon .medal-lock-svg {
  width: 26px; height: 26px; margin-right: 0; opacity: .55;
}

/* Barrido dorado sutil en las medallas desbloqueadas: la recompensa se
   nota al entrar en la pantalla, no solo al pasar el ratón. Una sola
   pasada (no en bucle) para no distraer; se anula igual que el resto de
   animaciones del archivo bajo prefers-reduced-motion (regla global ya
   existente al principio de este bloque de estilos). */
.medal-card.unlocked {
  position: relative; overflow: hidden;
}
.medal-card.unlocked::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform: translateX(100%);
  animation: medalShine 1.6s ease-out .1s 1;
  mix-blend-mode: soft-light;
}
[data-theme="dark"] .medal-card.unlocked::before {
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  mix-blend-mode: soft-light;
}
@keyframes medalShine { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* Fragmento: la franja lateral morada ya existente gana un poco más de
   presencia para que "otorga Fragmento" se note sin depender solo del
   texto de la etiqueta. */
.medal-card.has-fragment.unlocked { box-shadow: inset 4px 0 0 0 rgba(124,58,237,.7), var(--shadow-card); }
[data-theme="dark"] .medal-card.has-fragment.unlocked { box-shadow: inset 4px 0 0 0 rgba(167,139,250,.75), var(--shadow-card); }

@media (max-width: 380px) {
  .medal-card { padding: 10px; }
}

/* --- AJUSTES: agrupación y uso táctil en móvil ---
   Sin iconos: cada subgrupo (Apariencia, Sonido...) se distingue con un
   pequeño kicker en mayúsculas, mismo tratamiento tipográfico que el resto
   de rótulos secundarios de la app, no con símbolos nuevos. */

.settings-group + .settings-group { margin-top: 18px; }
.settings-kicker {
  margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--sub); opacity: .75;
}
.settings-field-label { display: flex; align-items: center; }

/* Objetivo táctil cómodo (≥44px) en los controles segmentados, y foco
   claramente visible además del :focus-visible global ya existente. */
.segmented-btn { min-height: 44px; }
.segmented-btn.active:focus-visible { box-shadow: var(--focus-ring), inset 0 0 0 1px var(--primary); }

/* Separación ligera entre el bloque Tema/Sonido para que se lean como
   dos preguntas distintas y no una lista continua. */
.settings-field + .settings-field { padding-top: 4px; }

@media (max-width: 380px) {
  .segmented-btn { font-size: 13px; padding: 10px 8px; }
  .settings-backup-actions .btn { flex-basis: 100%; }
}

/* ============================================================
   PWA — aviso discreto de instalación (v1.3)
   Franja no intrusiva dentro de Home. Reutiliza los tokens de color,
   radio y sombra ya existentes para que combine con el resto de la UI;
   no modifica ninguna regla previa.
   ============================================================ */
.pwa-install-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-ui);
}
.pwa-install-hint-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.pwa-install-hint-action {
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
}
.pwa-install-hint-action:hover { background: var(--primary-hover); }
.pwa-install-hint-dismiss {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--sub);
  font-size: 15px;
  line-height: 1;
  padding: 6px 4px;
  cursor: pointer;
  min-height: 36px;
  min-width: 28px;
  position: relative;
}
/* Zona táctil ampliada (~48 px) sin mover ni agrandar la cruz. */
.pwa-install-hint-dismiss::after { content: ''; position: absolute; inset: -8px -10px; }
[data-theme="dark"] .pwa-install-hint {
  background: var(--color-surface-elevated, var(--card));
  border-color: var(--color-border, var(--border));
}
[data-theme="dark"] .pwa-install-hint-text { color: var(--color-text, var(--text)); }

/* ============================================================
   PROMPT 2 — Fase E: Duelo (motion / game feel)
   Solo motion. Reutiliza los tokens de Fase A (--motion-*, --ease-*) y
   el sistema de identidad morada de Duelo ya existente (--duel-purple,
   --accent-purple-*). No se toca ninguna regla de color/layout previa.

   IMPORTANTE — arquitectura de Duelo online (src/online/duels.js):
   render() reemplaza root.innerHTML por completo en cada sondeo (cada
   3-5 s mientras el duelo está "pendiente"/"aceptado"/"en_curso"). Un
   <animation> de una sola pasada sobre un elemento que se repinta así
   se repetiría en cada sondeo (parpadeo), así que aquí SOLO se anima:
     a) contenido que se pinta una única vez y no vuelve a sondearse
        (pantallas estáticas del Duelo por código, y el bloque de
        resultado final .duel-result-win/-loss/-draw, que solo se pinta
        cuando el duelo ya está "completado" y el sondeo se detiene), o
     b) un pulso infinito (que al reiniciarse en fase 0 en cada repintado
        no se nota) para las cuentas atrás de espera, o
     c) una transición (no una animation) sobre el marco de la partida,
        que no se retrigguea si la clase no cambia de valor entre
        sondeos consecutivos.
   .duel-result-neutral se deja SIN animación de entrada porque esa
   clase la reutilizan tanto pantallas estáticas (#duel-join-preview,
   tratada aparte por id) como las pantallas de espera del Duelo online
   que sí se repintan por sondeo (pendiente/aceptado/"Empieza en…").
   ============================================================ */

/* ---- Duelo por código (pantallas estáticas, un único pintado) ------- */

/* Crear reto → lista de modos: entrada breve y escalonada, mismo criterio
   que .session-medal-item de Fase B pero con la cadencia propia de Duelo. */
@keyframes duelOptionIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.duel-mode-list .duel-mode-option {
  animation: duelOptionIn var(--motion-short) var(--ease-decelerate) both;
  animation-delay: calc(var(--motion-micro) * var(--dmo-i, 0));
}
.duel-mode-list .duel-mode-option:nth-child(1) { --dmo-i: 0; }
.duel-mode-list .duel-mode-option:nth-child(2) { --dmo-i: 1; }
.duel-mode-list .duel-mode-option:nth-child(3) { --dmo-i: 2; }
.duel-mode-list .duel-mode-option:nth-child(4) { --dmo-i: 3; }
.duel-mode-list .duel-mode-option:nth-child(5) { --dmo-i: 4; }
.duel-mode-list .duel-mode-option:nth-child(6) { --dmo-i: 5; }

/* "Reto creado" (código listo para compartir): revelado único, elegante. */
.duel-created-card {
  animation: duelResultReveal var(--motion-special) var(--ease-decelerate) both;
}

/* Vista previa de "Unirme" (código válido reconocido): mismo revelado,
   acotado por id para no tocar el resto de .duel-result-neutral (ver
   nota de arquitectura arriba). */
#duel-join-preview {
  animation: duelResultReveal var(--motion-medium) var(--ease-decelerate) both;
}

/* ---- Resultado de Duelo (win/loss/draw): compartido por el Duelo por
   código (pintado estático) y por resultBlock() del Duelo online, que
   solo se pinta una vez, cuando el estado ya es "completado" y el
   sondeo se ha detenido — ambos casos son seguros para una animación
   de una sola pasada. Personalidad diferenciada sin exagerar: victoria
   con un leve rebote (coherente con el dorado de "logro"), derrota y
   empate con una entrada más calmada. */
@keyframes duelResultReveal {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes duelResultRevealWin {
  0% { opacity: 0; transform: translateY(8px) scale(.95); }
  60% { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.duel-result-box.duel-result-win {
  animation: duelResultRevealWin var(--motion-special) var(--ease-emphasized) both;
}
.duel-result-box.duel-result-loss {
  animation: duelResultReveal var(--motion-medium) var(--ease-decelerate) both;
}
.duel-result-box.duel-result-draw {
  animation: duelResultReveal var(--motion-medium) var(--ease-standard) both;
}

/* ---- Duelo online (src/online/duels.js) ------------------------------ */

/* Cuentas atrás de espera (invitación / sala de espera / "Empieza en…"):
   pulso sutil e infinito. Es seguro bajo el sondeo porque un bucle
   infinito reiniciado en fase 0 en cada repintado no se percibe como
   un salto — a diferencia de una animación de una sola pasada. */
#seq-duel-root #seq-d-count {
  display: inline-block;
  animation: seqDuelCountPulse 1.6s var(--ease-standard) infinite;
}
@keyframes seqDuelCountPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* Marco morado de "partida en curso" (#seq-duel-root.seq-d-playing, ya
   existente en online.css): se añade una transición — no una animation
   — para que aparezca/desaparezca con suavidad en vez de un corte
   instantáneo. Una transition no se retrigguea si la clase no cambia de
   valor entre sondeos, así que es segura bajo el repintado por sondeo.
   Acotada a la pestaña Duelo activa para no tocar .card en ningún otro
   sitio de la app. */
#view-duelo.active .card {
  transition: border-color var(--motion-special) var(--ease-standard),
              box-shadow var(--motion-special) var(--ease-standard);
}

/* ============================================================
   PROMPT 2 — Fase F: Sir Edwards (character moments)
   Solo motion sobre el asset oficial ya integrado (Prompt 1.5). No se
   redibuja, deforma ni altera el personaje ni el sombrero: únicamente
   transform (scale/rotate) y opacity sobre los tres puntos donde ya
   aparece — Home (sombrero), Resultados (Victory/Defeat) y Lucidez/
   Enigma. Auditoría: Lucidez/Enigma ya tenían entrada (lucidezOverlayPop,
   Prompt 1.5) y el glow del Enigma (Fase D) — no se toca, para no
   duplicar. No se añade al personaje en sitios donde hoy no aparece
   (streak, achievements): no hay asset ni hueco para ello, y esta fase
   es solo motion, no nuevas apariciones. Reutiliza los tokens de las
   Fases A-D; sin sonido nuevo.
   ============================================================ */

/* Sombrero de Home: "aparición" sutil (sección 25 del Prompt 2) al
   entrar en Home, sin tocar silueta ni banda morada — solo scale+opacity
   sobre el asset ya existente. Comparte el fade de .view.active (Fase A);
   este añadido es la "aparición" propia del sombrero por encima de ese
   fade general, con un pequeño retraso para que se sienta como su
   momento, no como parte del mismo movimiento. */
@keyframes sirHatAppear {
  0% { opacity: 0; transform: scale(.88); }
  100% { opacity: 1; transform: scale(1); }
}
.home-hat-img { animation: sirHatAppear var(--motion-medium) var(--ease-decelerate) .1s both; }

/* Victory/Defeat: personalidad diferenciada (sección 22/24: "reacción",
   "nod", "tilt"). Se conserva moodPop (Prompt 1.5, ya funciona) y se
   añade un segundo gesto corto, propio de cada desenlace, justo cuando
   moodPop termina (delay .4s = duración de moodPop). Rotación pequeña,
   sin squash&stretch ni deformación: un gesto de cabeza/capa, no un
   redibujado. Victoria: asentimiento breve con un poco más de energía.
   Derrota: inclinación única, más lenta y sobria — sin exagerar. */
@keyframes sirEdwardsNodYes {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes sirEdwardsNodNo {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.results-character.char-victory {
  animation: moodPop .4s cubic-bezier(.34,1.56,.64,1),
             sirEdwardsNodYes var(--motion-medium) var(--ease-standard) .4s both;
}
.results-character.char-defeat {
  animation: moodPop .4s cubic-bezier(.34,1.56,.64,1),
             sirEdwardsNodNo var(--motion-special) var(--ease-standard) .4s both;
}
@media (prefers-reduced-motion: reduce) {
  .home-hat-img { animation: none; }
}

/* 2.0: en móvil, la regla «07 — CTA» de la tarjeta de resultados fuerza todos los botones a ancho completo y 50px.
   «Compartir resultado» es secundario y discreto: se recupera su tamaño propio (con !important y mayor especificidad). */
@media (max-width:600px){
  #results-card > div:last-child .btn.btn-share.btn-share-quiet{
    width:fit-content!important; min-height:0!important; padding:8px 18px!important;
    font-size:14px!important; border-radius:12px!important; margin:12px auto 0!important; display:block!important;
  }
}

/* 2.0: «Instalar la app» en Ajustes (src/ui/install-app.js). */
.settings-install-btn { width: 100%; margin-top: 8px; }
.settings-install-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--sub); }

/* 2.0: los avisos pasan abajo, como una píldora oscura y compacta: no tapan cabeceras ni botones de arriba
   y se leen de un vistazo. Misma función showInfoToast(), solo cambia la presentación. */
.info-toast{
  top:auto; bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%,16px) scale(.96);
  align-items:center; gap:10px;
  min-width:0; width:max-content; max-width:min(440px, calc(100vw - 32px));
  padding:11px 18px 11px 14px;
  border:1px solid rgba(201,153,46,.5);
  border-radius:var(--radius-pill);
  background:rgba(250,243,230,.97); color:#16244a;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(10,16,36,.32);
  font-size:14px; font-weight:600;
}
.info-toast.show{ transform:translate(-50%,0) scale(1); }
.info-toast .toast-icon{ font-size:17px; }
/* 2.0: el aviso sigue el tema: en claro, crema con texto oscuro; en oscuro, fondo oscuro con texto claro. */
[data-theme="dark"] .info-toast{ background:rgba(30,41,82,.97); color:#fdf7ea; border-color:rgba(232,200,116,.45); }

/* 2.0: la familia de iconos propia (#se-*) sustituye a los emojis: insignias algo más grandes para que se
   lean los detalles (corazón, calavera, reloj, pizarra…), en Jugar y en Duelo. */
#view-modes .mode-card-icon, #duel-home .seq-d-card .mode-card-icon{ width:54px!important; height:54px!important; border-radius:14px!important; margin-bottom:10px!important; }
#view-modes .mode-card-icon .se-sym, #duel-home .seq-d-card .mode-card-icon .se-sym{ width:80%; height:80%; }
.seq-d-card-icon .se-sym{ width:34px; height:34px; }

/* ===== 2.0 — Sensación de juego (src/ui/game-fx.js) ================================================ */
/* Letras A–D en las respuestas tipo test: ayudan a leer y dan aspecto de concurso. */
#choice-options { counter-reset: fx-opt; }
#choice-options .choice-btn { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; border-radius: 14px;
  box-shadow: 0 2px 0 rgba(22,36,74,.08), 0 1px 3px rgba(0,0,0,.04); }
#choice-options .choice-btn::before { counter-increment: fx-opt; content: counter(fx-opt, upper-alpha); flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--brand-navy, #16244a); background: var(--badge-bg); border: 1.5px solid var(--color-border-accent, rgba(201,153,46,.38));
  transition: background .15s, color .15s, border-color .15s; }
#choice-options .choice-btn:hover:not(:disabled)::before { border-color: var(--accent-gold); }
#choice-options .choice-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 rgba(0,0,0,0); }
#choice-options .choice-btn.correct::before { content: '✓'; background: #16a34a; border-color: #16a34a; color: #fff; }
#choice-options .choice-btn.incorrect::before { content: '✕'; background: #dc2626; border-color: #dc2626; color: #fff; }
#choice-options .choice-btn.correct { box-shadow: 0 0 0 3px rgba(22,163,74,.18), 0 8px 20px rgba(22,163,74,.18); }
[data-theme="dark"] #choice-options .choice-btn::before { color: #f0d99a; background: rgba(232,200,116,.10); }

/* Tarjeta: destello al acertar, sacudida corta al fallar. */
.card.fx-ok { animation: fx-ok-glow .65s ease-out; }
.card.fx-bad { animation: fx-bad-shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes fx-ok-glow { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.0); } 30% { box-shadow: 0 0 0 4px rgba(22,163,74,.35), 0 0 36px rgba(22,163,74,.25); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@keyframes fx-bad-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }

/* Racha que se calienta. */
.game-streak-inline { transition: background .3s, box-shadow .3s, color .3s; }
.game-streak-inline.fx-heat-1 { background: linear-gradient(135deg, #fff1d6, #ffe0a8); box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.game-streak-inline.fx-heat-2 { background: linear-gradient(135deg, #ffd08a, #ff9f43); color: #7a2e00; box-shadow: 0 0 14px rgba(255,140,40,.45); }
.game-streak-inline.fx-heat-3 { background: linear-gradient(135deg, #ff9f43, #e8483b); color: #fff; box-shadow: 0 0 20px rgba(232,72,59,.55); animation: fx-heat-pulse 1.1s ease-in-out infinite; }
.game-streak-inline.fx-heat-3 .game-streak-inline-text, .game-streak-inline.fx-heat-3 #game-current-streak { color: #fff; }
@keyframes fx-heat-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Aviso de hito de racha. */
#view-game { position: relative; }
.fx-streak-banner { position: absolute; left: 50%; top: 150px; z-index: 30; pointer-events: none; display: flex; align-items: baseline; gap: 8px;
  padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, #16244a, #5b2e8f); color: #fdf7ea;
  border: 1.5px solid rgba(232,200,116,.7); box-shadow: 0 18px 40px rgba(22,36,74,.4); transform: translate(-50%, -50%);
  animation: fx-banner 1.5s cubic-bezier(.2,.9,.3,1.2) both; }
.fx-streak-fire { font-size: 26px; align-self: center; }
.fx-streak-num { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; color: #e8c874; }
.fx-streak-lbl { font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
@keyframes fx-banner { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -75%) scale(.95); } }

/* Canvas de chispas/confeti: por encima de todo, nunca captura toques. */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* Resultados: cifras grandes con entrada, sin cambiar sus valores. */
.results-card .metric-value { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .card.fx-ok, .card.fx-bad, .game-streak-inline.fx-heat-3, .fx-streak-banner { animation: none; }
}

/* ===== 2.0 — Logros agrupados (src/ui/achievements.js) ============================================= */
#medals-container.ach-groups { display: flex; flex-direction: column; gap: 10px; grid-template-columns: none; }
.ach-group { border: 1px solid var(--color-border-accent, rgba(201,153,46,.38)); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-soft); overflow: hidden; }
.ach-group > summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px;
  align-items: center; padding: 14px 16px; cursor: pointer; }
.ach-group > summary::-webkit-details-marker { display: none; }
.ach-g-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--badge-bg); }
.ach-g-name { font-weight: 800; font-size: 15.5px; color: var(--text); }
.ach-g-count { font-weight: 800; font-size: 13px; color: var(--accent-gold-strong, #92400e); }
.ach-g-bar { grid-column: 2 / span 2; height: 6px; border-radius: 99px; background: var(--color-border-subtle, #e5e7eb); overflow: hidden; }
.ach-g-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9992e, #e8c874); }
.ach-group > summary::after { content: ''; grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; display: none; }
.ach-group[open] > summary { border-bottom: 1px solid var(--color-border-subtle, #e5e7eb); }
.ach-group.is-complete { background: linear-gradient(135deg, var(--color-surface-highlight, #fdf7ea), var(--card)); }
.ach-group.is-complete .ach-g-ico { background: linear-gradient(135deg, #e8c874, #c9992e); }
.ach-list { display: flex; flex-direction: column; }
.ach-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--color-border-subtle, #eef0f3); }
.ach-row:first-child { border-top: 0; }
.ach-ico { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--badge-bg); border: 1.5px solid var(--badge-border); }
.ach-ico .medal-lock-svg { width: 18px; height: 18px; opacity: .6; }
.ach-row.is-locked .ach-ico { filter: grayscale(1); opacity: .55; }
.ach-row.is-done .ach-ico { background: radial-gradient(circle at 50% 35%, #fff7d6, #f0d99a); border-color: #c9992e; box-shadow: 0 4px 12px rgba(201,153,46,.35); }
.ach-check { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); }
.ach-body { flex: 1 1 auto; min-width: 0; }
.ach-title { font-weight: 800; font-size: 14.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ach-row.is-locked .ach-title { color: var(--sub); }
.ach-desc { font-size: 13px; line-height: 1.4; color: var(--sub); margin-top: 2px; }
.ach-frag { font-size: 12px; padding: 1px 6px; border-radius: 99px; background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.3); }
.ach-frag.got { background: rgba(124,58,237,.22); }
.ach-prog { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ach-bar { flex: 1 1 auto; height: 6px; border-radius: 99px; background: var(--color-border-subtle, #e5e7eb); overflow: hidden; }
.ach-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--primary); min-width: 0; }
.ach-num { font-size: 12px; font-weight: 800; color: var(--sub); font-variant-numeric: tabular-nums; }
.ach-row.is-secret .ach-title { letter-spacing: 2px; }
[data-theme="dark"] .ach-g-bar, [data-theme="dark"] .ach-bar { background: rgba(255,255,255,.1); }
[data-theme="dark"] .ach-row, [data-theme="dark"] .ach-group[open] > summary { border-color: rgba(255,255,255,.07); }

/* ===== 2.0 — Radar de categorías (src/ui/stats-extra.js) ========================================== */
.stats-radar { margin: 4px 0 14px; text-align: center; }
.radar-svg { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.radar-ring { fill: none; stroke: var(--color-border-subtle, #e5e7eb); stroke-width: 1; }
.radar-ring.outer { stroke: var(--color-border-accent, rgba(201,153,46,.45)); stroke-width: 1.5; fill: rgba(201,153,46,.04); }
.radar-axis { stroke: var(--color-border-subtle, #e5e7eb); stroke-width: 1; }
.radar-shape { fill: rgba(37,99,235,.22); stroke: #2563eb; stroke-width: 2.4; stroke-linejoin: round; }
.radar-dot { fill: #c9992e; stroke: #fff; stroke-width: 1.5; }
.radar-dot.empty { fill: #9ca3af; }
.radar-lbl { font-size: 11.5px; font-weight: 700; fill: var(--text); }
.radar-pct { font-size: 11.5px; font-weight: 800; fill: var(--primary); }
.radar-note { font-size: 13.5px; color: var(--sub); margin: 2px 0 0; }
[data-theme="dark"] .radar-shape { fill: rgba(96,165,250,.25); stroke: #60a5fa; }
[data-theme="dark"] .radar-ring, [data-theme="dark"] .radar-axis { stroke: rgba(255,255,255,.12); }
[data-theme="dark"] .radar-dot { stroke: #1c2340; }

/* 2.0: «Empieza en 3, 2, 1…» del Duelo online: cada número entra con un golpe corto (setCount en duels.js). */
#seq-duel-root #seq-d-count.seq-d-pop { animation: seqDuelCountPop .45s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes seqDuelCountPop { 0% { transform: scale(1.8); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #seq-duel-root #seq-d-count.seq-d-pop { animation: none; } }

/* 2.0: el número de la racha quedaba más alto que «Racha» (el span pasa a inline-block al animarse y se
   desalineaba de la línea base). Texto y número se alinean ahora como una sola fila centrada. */
.game-streak-inline .game-streak-inline-text { display: inline-flex; align-items: center; gap: .3em; line-height: 1; }
.game-streak-inline #game-current-streak { display: inline-block; line-height: 1; vertical-align: middle; font-variant-numeric: tabular-nums; }

/* 2.0: el contador de Logros usaba los números «de estilo antiguo» de la fuente de títulos (el 0 parecía una
   «o» y los dígitos bailaban). Mismo estilo que el contador de Fragmentos: cifras de ancho fijo y alineadas. */
.achievements-progress-count { font-family: var(--font-ui); font-weight: 900; font-size: 30px; letter-spacing: .5px;
  font-variant-numeric: lining-nums tabular-nums; color: var(--brand-navy); }
[data-theme="dark"] .achievements-progress-count { color: #f0d99a; }

/* ===== 2.0 polish — Estadísticas: «expediente» del jugador ======================================== */
/* Ficha: papel crema con filete dorado y rombos en las esquinas (el mismo marco que la tarjeta para compartir). */
.stats-dossier { position: relative; margin: 4px 0 18px; padding: 16px 16px 14px; border-radius: 18px;
  background: linear-gradient(160deg, var(--color-surface-highlight, #fdf7ea), var(--card) 70%);
  border: 1px solid var(--color-border-accent, rgba(201,153,46,.38)); box-shadow: var(--shadow-soft), inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(201,153,46,.22); }
.stats-dossier::before, .stats-dossier::after { content: ''; position: absolute; top: 9px; font-size: 8px; color: var(--accent-gold, #c9992e); }
.stats-dossier::before { left: 11px; } .stats-dossier::after { right: 11px; }
.dossier-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; text-align: center; }
.dossier-kicker { font: 800 10.5px var(--font-ui); letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent-gold-strong, #92400e); }
.dossier-name { font: 700 19px var(--font-display); color: var(--brand-navy, #16244a); overflow-wrap: anywhere; }
.stats-dossier .stats-level-widget { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.dossier-seal { width: 52px !important; height: 52px !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #fff7d6, #f0d99a) !important; border: 2px solid #c9992e !important; box-shadow: 0 4px 10px rgba(201,153,46,.3); }
.dossier-seal .se-sym { width: 70%; height: 70%; }
.stats-dossier .stats-level-widget-top { font: 800 15px var(--font-ui); letter-spacing: .6px; color: var(--brand-navy, #16244a); }
.dossier-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(201,153,46,.45); }
.dossier-tile { text-align: center; min-width: 0; }
.dossier-tile-label { font: 800 9.5px var(--font-ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--sub); }
.dossier-tile-value { font: 900 24px var(--font-ui); color: var(--brand-navy, #16244a); font-variant-numeric: tabular-nums; margin: 3px 0 2px; }
.dossier-tile-sub { font-size: 11px; line-height: 1.3; color: var(--sub); overflow-wrap: anywhere; }
[data-theme="dark"] .dossier-name, [data-theme="dark"] .stats-dossier .stats-level-widget-top, [data-theme="dark"] .dossier-tile-value { color: #f3ead6; }

/* Títulos de sección: símbolo propio en un sello pequeño + filete dorado (en lugar del emoji). */
h3.stats-h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 18px; }
h3.stats-h .se-sym { width: 30px; height: 30px; flex: 0 0 auto; padding: 4px; border-radius: 50%; background: var(--badge-bg); border: 1px solid var(--badge-border); box-sizing: border-box; }
h3.stats-h::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(201,153,46,.45), transparent); }

/* Récords personales: como placas de trofeo. */
#extra-stats .stat-extra { border: 1px solid var(--color-border-accent, rgba(201,153,46,.38)); background: linear-gradient(160deg, var(--color-surface-highlight, #fdf7ea), var(--card)); }
#extra-stats .stat-extra-icon { background: radial-gradient(circle at 50% 35%, #fff7d6, #f0d99a) !important; border: 1.5px solid #c9992e; }
#extra-stats .stat-extra-icon .se-sym { width: 72%; height: 72%; }
#extra-stats .stat-extra-value { color: var(--accent-gold-strong, #92400e); font-variant-numeric: tabular-nums; }
[data-theme="dark"] #extra-stats .stat-extra-value { color: #e8c874; }

/* Duelos y colección: cifras compactas. */
#stats-duel-section .stats-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#stats-duel-section .stats-mini { padding: 10px 6px; }
#stats-duel-section .stats-mini-value { font-size: 20px; }
#stats-duel-section .stats-mini-label { font-size: 11px; }

/* Dominio del conocimiento: una barra que se ve de un vistazo (vistas en claro, dominadas en oro). */
.dominio-bar { position: relative; height: 14px; margin: 10px 0 6px; border-radius: 99px; background: var(--color-border-subtle, #e5e7eb); overflow: hidden; }
.dominio-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .6s ease; }
.dom-seen { background: rgba(37,99,235,.28); }
.dom-master { background: linear-gradient(90deg, #c9992e, #e8c874); }
.dominio-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--sub); margin-bottom: 8px; }
.dom-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dom-dot-master { background: #c9992e; } .dom-dot-seen { background: rgba(37,99,235,.45); }
[data-theme="dark"] .dominio-bar { background: rgba(255,255,255,.1); }

/* Perfil de conocimiento y dificultad: barras más compactas. */
#category-stats .progress-row, #difficulty-stats .progress-row { margin: 6px 0 10px; }
#category-stats .progress-track, #difficulty-stats .progress-track { height: 7px; }
#category-stats .progress-row-head, #difficulty-stats .progress-row-head { font-size: 12.5px; margin-bottom: 4px; }

/* Últimas partidas: icono del modo, nombre y fecha, y el marcador a la derecha. */
.hist-row { gap: 12px; justify-content: flex-start !important; }
.hist-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--badge-bg); border: 1px solid var(--badge-border); }
.hist-ico .se-sym { width: 74%; height: 74%; }
.hist-body { flex: 1 1 auto; min-width: 0; }
.hist-score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.hist-score b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); }
.hist-score span { font-size: 12px; font-weight: 800; color: var(--primary); }
/* Los títulos con sello propio no llevan además el rombo decorativo genérico de .stats-section h3. */
h3.stats-h::before { display: none !important; content: none !important; }
/* El Historial de duelos ya no va aparte: mismo espacio que las demás secciones. */
#view-stats #stats-duel-section { margin-top: var(--space-lg); }
.dossier-seal { overflow: hidden; }
.dossier-seal .seq-av-img { width: 88%; height: 88%; object-fit: contain; display: block; }
/* Logros secretos sin conseguir: sello azul marino con «?» dorado (misterioso, no un candado más). */
.ach-secret-seal { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #2a3560, #1c2340); border: 2px solid #c9992e; box-shadow: inset 0 0 0 3px #1c2340, inset 0 0 0 4px rgba(201,153,46,.55);
  font: 800 20px/1 var(--font-display, Georgia, serif); color: #e8c874; }
.ach-row.is-secret .ach-ico { background: none; border: 0; box-shadow: none; padding: 0; filter: none; opacity: 1; }

/* ===== 2.0 — Bienvenida (primera vez) y novedades con voz de Sir Edwards ===================== */
#welcome-modal .welcome-card { max-width: 440px; width: calc(100% - 32px); padding: 26px 22px 22px; max-height: 92vh; overflow-y: auto;
  border: 1px solid rgba(201,153,46,.55); box-shadow: 0 0 0 4px var(--card), 0 0 0 5px rgba(201,153,46,.35), 0 18px 40px rgba(0,0,0,.28); text-align: center; }
#welcome-modal .welcome-kicker { font: 800 11px var(--font-ui); letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent-gold-strong, #92400e); }
#welcome-modal .welcome-rule { width: 56px; height: 1px; margin: 12px auto 16px; background: linear-gradient(90deg, transparent, #c9992e, transparent); }
#welcome-modal .welcome-title { display: block; font: 700 clamp(24px, 6.6vw, 30px)/1.15 var(--font-display); color: var(--brand-navy, #16244a); margin: 0 0 10px; }
#welcome-modal .welcome-lead { font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--sub); margin: 0 auto 18px; max-width: 34ch; }
#welcome-modal .welcome-sub { font: 800 10.5px var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--sub); margin-bottom: 8px; }
#welcome-modal .welcome-list { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.4; }
#welcome-modal .welcome-list li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--badge-bg); }
#welcome-modal .welcome-list li > span:first-child { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
#welcome-modal .welcome-note { font-size: 13px; line-height: 1.45; color: var(--sub); margin: 0 0 16px; }
#welcome-modal .welcome-btn { width: 100%; min-height: 52px; font-size: 17px; margin-top: 0 !important; padding: 12px; }
[data-theme="dark"] #welcome-modal .welcome-title { color: #f3ead6; }
#welcome-modal { z-index: 1100; } /* por encima de la pantalla de cuenta */
#welcome-modal [hidden] { display: none !important; }
/* Pregunta del nombre (2.2): reutiliza la tarjeta de bienvenida */
#name-modal { z-index: 1100; }
/* En móvil la tarjeta se ancla arriba en vez de centrarse: con el teclado abierto el campo del nombre queda a la vista. */
@media (max-width: 600px) { #name-modal { align-items: flex-start; padding-top: max(20px, 5vh); } }
#name-modal [hidden] { display: none !important; }
#name-modal .welcome-card { max-width: 440px; width: calc(100% - 32px); padding: 26px 22px 22px; max-height: 92vh; overflow-y: auto;
  border: 1px solid rgba(201,153,46,.55); box-shadow: 0 0 0 4px var(--card), 0 0 0 5px rgba(201,153,46,.35), 0 18px 40px rgba(0,0,0,.28); text-align: center; }
#name-modal .welcome-kicker { font: 800 11px var(--font-ui); letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent-gold-strong, #92400e); }
#name-modal .welcome-rule { width: 56px; height: 1px; margin: 12px auto 12px; background: linear-gradient(90deg, transparent, #c9992e, transparent); }
#name-modal .name-hero { display: block; width: 64px; height: 64px; margin: 0 auto 8px; }
#name-modal .name-hero.name-hero-greet { width: 88px; height: 88px; object-fit: contain; }
#name-modal .welcome-title { display: block; font: 700 clamp(24px, 6.6vw, 28px)/1.15 var(--font-display); color: var(--brand-navy, #16244a); margin: 0 0 10px; }
[data-theme="dark"] #name-modal .welcome-title { color: #f3ead6; }
#name-modal .welcome-lead { font-size: 15px; line-height: 1.5; font-style: italic; color: var(--sub); margin: 0 auto 16px; max-width: 34ch; }
#name-modal .name-input { width: 100%; box-sizing: border-box; min-height: 50px; padding: 10px 14px; font: 600 18px var(--font-ui); text-align: center; border-radius: 12px;
  border: 1.5px solid rgba(201,153,46,.6); background: var(--badge-bg); color: inherit; }
#name-modal .name-input:focus { outline: 2px solid #c9992e; outline-offset: 2px; }
#name-modal .name-error { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--danger-txt, #b6202f); }
#name-modal .welcome-note { font-size: 13px; line-height: 1.45; color: var(--sub); margin: 12px 0 14px; }
#name-modal .welcome-btn { width: 100%; min-height: 52px; font-size: 17px; margin-top: 0 !important; padding: 12px; }
#name-modal .name-skip { margin-top: 10px; background: none; border: 0; color: var(--sub); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 8px; }
@media (max-height: 640px) { #name-modal .name-hero { width: 48px; height: 48px; } #name-modal .welcome-lead { font-size: 14px; margin-bottom: 10px; } }
#welcome-modal .welcome-hero { display: block; width: 132px; height: auto; margin: 0 auto 8px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.22)); }
#welcome-modal .welcome-list-plain li { padding: 9px 14px; font-style: italic; }
#welcome-modal .welcome-list-plain li > span:first-child { flex: 1 1 auto; font-size: inherit; min-width: 0; }
.update-modal-lead { font-style: italic; color: var(--sub) !important; margin: -6px 0 6px !important; }
@media (max-width: 360px), (max-height: 700px) {
  #welcome-modal .welcome-card { padding: 18px 16px 16px; }
  #welcome-modal .welcome-rule { margin: 8px auto 10px; }
  #welcome-modal .welcome-title { font-size: 23px; margin-bottom: 6px; }
  #welcome-modal .welcome-lead { font-size: 14px; margin-bottom: 12px; }
  #welcome-modal .welcome-list { font-size: 13.5px; gap: 6px; margin-bottom: 12px; }
  #welcome-modal .welcome-list li { padding: 7px 10px; }
  #welcome-modal .welcome-note { font-size: 12px; margin-bottom: 12px; }
  #welcome-modal .welcome-btn { min-height: 48px; font-size: 16px; }
  #welcome-modal .welcome-hero { width: 96px; margin-bottom: 4px; }
}
.update-recap { margin: 4px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--badge-bg); border: 1px dashed rgba(201,153,46,.5); }
.update-recap-lead { font-style: italic; color: var(--sub) !important; font-size: 13.5px !important; margin: 0 0 6px !important; }
.update-recap ul { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 6px; font-size: 13.5px !important; }
.update-recap li { margin: 0 !important; line-height: 1.4; }
.update-recap-v { display: inline-block; min-width: 34px; padding: 1px 6px; margin-right: 4px; border-radius: 6px; font: 800 11px var(--font-ui); text-align: center; color: #fff7d6; background: #1c2340; border: 1px solid #c9992e; vertical-align: 1px; }
.update-recap-now { font: 800 10.5px var(--font-ui) !important; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sub) !important; margin: 12px 0 4px !important; }
#update-modal .modal-card.has-recap { padding: 18px 18px 16px; max-height: 94vh; overflow-y: auto; }
#update-modal .modal-card.has-recap h2 { margin-bottom: 6px; }
#update-modal .modal-card.has-recap #update-modal-list { font-size: 14px; line-height: 1.35; margin: 0 0 12px; }
#update-modal .modal-card.has-recap #update-modal-list li { margin-bottom: 3px; }

/* ===== 2.0 — Insignias ilustradas de los modos (assets/modes/*.webp) ======================== */
/* La insignia ya trae su marco: el contenedor deja de pintar su baldosa de color. */
.mode-card-icon.has-img, .home-big-icon.has-img { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.mode-img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.22)); }
#view-modes .mode-card-icon.has-img, #duel-home .mode-card-icon.has-img { width: 64px !important; height: 64px !important; margin-bottom: 8px !important; }
.seq-d-card-icon .mode-img { width: 52px; height: 52px; }
.home-big-icon.has-img { width: 78px; height: 78px; }
.home-big-icon.has-img .mode-img { filter: drop-shadow(0 5px 9px rgba(0,0,0,.35)); }
/* Bloqueado: la insignia se ve apagada, como el resto de la tarjeta. */
.mode-card.locked .mode-card-icon.has-img .mode-img { filter: grayscale(.85) brightness(.9) drop-shadow(0 2px 3px rgba(0,0,0,.18)); opacity: .75; }
/* Cabecera de la partida: mini insignia del modo delante del marcador. */
/* Ocupa el hueco del emoji decorativo de cada tema (izquierda de la cabecera): el texto conserva su ancho. */
.game-mode-lbl { display: contents; }
.game-mode-badge { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); -webkit-user-drag: none; user-select: none; pointer-events: none; }
.card .mode-header.game-hud { position: relative; }
/* Resumen «Continuar partida» e historial de Estadísticas con la insignia. */
#resume-card-icon.has-img { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.hist-ico:has(.mode-img) { background: none; border: 0; width: 42px; height: 42px; }
/* Selector de dificultad de Supervivencia: insignia arriba, como en Jugar. */
#menu-difficulty-modes .diff-card .mode-card-icon.has-img { width: 64px !important; height: 64px !important; margin-bottom: 8px !important; }
#menu-difficulty-modes .mode-card.diff-card { justify-content: flex-start !important; gap: 16px; text-align: left !important; }
#menu-difficulty-modes .mode-card.diff-card h3 { text-align: left !important; flex: 1; }
#menu-difficulty-modes .diff-card .mode-card-icon.has-img { margin: 0 !important; flex: 0 0 auto; }
/* En partida la insignia sustituye al emoji decorativo que cada tema ponía delante del marcador. */
.card .mode-header.game-hud:has(#game-mode-badge:not([style*="none"]))::before { display: none !important; }
.card .mode-header.game-hud:has(#game-mode-badge:not([style*="none"])) { padding-left: 50px !important; }
/* El marcador ya no se corta con «…» (perdía el nº de pregunta en Supervivencia, Contrarreloj y Cálculo): si no cabe, pasa a dos líneas. */
.game-hud #game-progress-lbl { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
/* Insignia «mini» (sin marco): el aro dorado fino la sigue identificando como insignia a tamaño pequeño. */
.game-mode-badge, .mode-img-mini { border-radius: 50%; box-shadow: 0 0 0 1.5px #c9992e, 0 2px 4px rgba(0,0,0,.25); filter: none; }
.hist-ico:has(.mode-img-mini) { width: 40px; height: 40px; }
.hist-ico .mode-img-mini { width: 36px; height: 36px; }
/* Inicio: Estadísticas, Logros y Ajustes con su insignia (la insignia trae su propio marco). */
.home-small-icon.has-img { background: none !important; box-shadow: none !important; border: 0 !important; width: 58px !important; height: 58px !important; padding: 0 !important; }
.home-small-icon.has-img .mode-img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); }

/* Última vida / Última pregunta (src/ui/last-life.js): solo presentación. */
.card.theme-survival #game-progress-lbl.last-life { color: #b91c1c; text-shadow: 0 0 10px rgba(220,38,38,.35); animation: last-life-pulse .9s ease-out 1; }
[data-theme="dark"] .card.theme-survival #game-progress-lbl.last-life { color: #fca5a5; text-shadow: 0 0 12px rgba(248,113,113,.5); }
@keyframes last-life-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.fx-lastlife-banner { position: fixed; left: 50%; top: 42%; z-index: 200; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: max-content; max-width: calc(100% - 32px); padding: 10px 22px; border-radius: 18px; text-align: center; color: #fdf7ea; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #16244a, #5b2e8f); border: 1.5px solid rgba(232,200,116,.7); box-shadow: 0 18px 40px rgba(22,36,74,.4);
  animation: fx-lastlife 2.2s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes fx-lastlife { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  16% { transform: translate(-50%, -50%) scale(1); } 87% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -75%) scale(.95); } }
.fx-lastlife-banner.is-life { background: linear-gradient(135deg, #7f1d1d, #dc2626); border-color: rgba(252,165,165,.8); box-shadow: 0 18px 40px rgba(220,38,38,.4); }
.fx-lastlife-banner.is-ok { background: linear-gradient(135deg, #14532d, #16a34a); border-color: rgba(134,239,172,.7); box-shadow: 0 18px 40px rgba(22,163,74,.35); }
.fx-lastlife-title { font-size: 18px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; line-height: 1.15; }
.fx-lastlife-sub { font-size: 13px; font-weight: 600; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .fx-lastlife-banner, .card.theme-survival #game-progress-lbl.last-life { animation: none; } }

/* «Momento Sir Edwards» (src/ui/hitos.js): aparece en el centro, de medio cuerpo, apoyado sobre el bocadillo. */
.sir-hito { position: fixed; inset: 0; z-index: 190; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: radial-gradient(ellipse at 50% 50%, rgba(10,14,30,.45), rgba(6,8,18,.82)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: sir-hito-fade .25s ease-out both; }
.sir-hito.is-leaving { animation: sir-hito-out .26s ease-in both; }
.sir-hito-stage { width: min(100%, 420px); padding: 0 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin-top: -4vh; }
.sir-hito-img { position: relative; z-index: 1; display: block; width: min(66vw, 270px); height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: -3px;
  pointer-events: none; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); animation: sir-hito-rise .5s cubic-bezier(.2,.9,.3,1.1) both; }
.sir-hito-bubble { position: relative; z-index: 2; width: 100%; box-sizing: border-box; overflow: hidden; padding: 16px 20px 18px; border-radius: 18px; text-align: center;
  background: linear-gradient(135deg, #16244a, #3b2466); color: #fdf7ea; border: 1.5px solid rgba(232,200,116,.8);
  box-shadow: 0 18px 40px rgba(0,0,0,.45); animation: sir-hito-bubble .45s .12s cubic-bezier(.2,.9,.3,1.15) both; }
.sir-hito.is-sudden .sir-hito-bubble { background: linear-gradient(135deg, #1a1020, #5a1420); border-color: rgba(248,113,113,.7); }
.sir-hito-text { margin: 0; font-family: var(--font-display, inherit); font-size: 18px; font-weight: 700; line-height: 1.34; font-style: italic; }
.sir-hito-sign { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #e8c874; }
.sir-hito-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #c9992e, #e8c874); transform-origin: left center;
  animation: sir-hito-timer 5.2s linear both; }
.sir-hito.is-sudden .sir-hito-timer { background: linear-gradient(90deg, #b91c1c, #f87171); }
@keyframes sir-hito-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sir-hito-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sir-hito-rise { from { opacity: 0; transform: translateY(18%) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sir-hito-bubble { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sir-hito-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .sir-hito, .sir-hito-img, .sir-hito-bubble, .sir-hito.is-leaving { animation: none !important; } }

/* XP extra de una racha: pastilla dorada dentro del aviso de racha (src/ui/game-fx.js). */
.fx-streak-xp { align-self: center; margin-left: 2px; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 900; letter-spacing: .4px;
  color: #1c1405; background: linear-gradient(135deg, #f0d99a, #e8c874); box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; white-space: nowrap; }

/* --- AJUSTES 2.3: Preferencias en tarjetas separadas (Apariencia, Sonido, Avisos, Aplicación) --- */
.settings-cards .settings-group {
  background: rgba(255,255,255,.025); border: 1px solid rgba(201,162,75,.22); border-radius: 14px;
  padding: 16px 16px 14px; margin: 0 0 14px;
}
.settings-cards .settings-group:last-child { margin-bottom: 0; }
.settings-cards .settings-group + .settings-group { margin-top: 0; }
.settings-cards .settings-kicker {
  color: #c9a24b; opacity: 1; letter-spacing: .14em; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,162,75,.25);
}
.settings-cards .settings-field { margin-bottom: 14px; }
.settings-cards .settings-field:last-child { margin-bottom: 0; }
.settings-cards .settings-field-label { font-weight: 600; }
.settings-cards .settings-note { margin: 10px 0 0; font-style: italic; opacity: .8; }
:root:not([data-theme="dark"]) .settings-cards .settings-group { background: rgba(0,0,0,.02); border-color: rgba(138,106,28,.3); }
:root:not([data-theme="dark"]) .settings-cards .settings-kicker { color: #8a6a1c; border-bottom-color: rgba(138,106,28,.3); }
#push-note:empty { display: none; }

/* Logros bloqueados (2.3): candado dorado sobre la medalla en gris; el secreto lleva su medallón con interrogación. */
.ach-ico-wrap { position: relative; flex: 0 0 auto; display: flex; }
.ach-lock { position: absolute; right: -4px; bottom: -3px; width: 20px; height: 20px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); pointer-events: none; }
.ach-secret-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }

/* Tarjeta final en móviles de poca altura útil (pantalla grande con zoom/fuente grande, p. ej.): el CTA «Volver al Menú principal»
   y «Compartir resultado» deben verse sin hacer scroll. Se compacta la frase (sin quitarle protagonismo) en escalones por altura. */
@media (max-width:600px) and (max-height:940px){
  #results-card .results-phrase-container{ padding:14px 14px 12px!important; }
  #results-card .results-mood-icon{ width:40px!important; height:40px!important; margin-bottom:5px!important; font-size:20px!important; }
  #results-card .results-phrase{ font-size:17px!important; line-height:1.3!important; }
  #results-card .results-phrase:not(:empty)::after{ margin-top:6px; }
  #results-card .results-character{ width:84px!important; margin-bottom:9px!important; }
}
@media (max-width:600px) and (max-height:800px){
  #results-card .results-mood-icon{ display:none!important; }
  #results-card .results-phrase{ font-size:16px!important; }
  #results-card .results-phrase:not(:empty)::after{ display:none; }
  #results-card .results-character{ width:66px!important; margin-bottom:6px!important; }
}

/* Con la tarjeta final en pantalla, «← Menú principal» de arriba sobra: ya está «Volver al Menú principal» abajo. */
#view-game:has(#results-card[style*="display: block"]) #game-exit-btn { display: none; }