/*
 * ================================================================
 *  GUARDIANES DE INTERNET — Hoja de Estilos Principal
 *  © 2025 Sequeira Jose Luis
 *  División UFI Delitos Informáticos y Estafas · Policía de San Juan
 *  Todos los derechos reservados — Ver archivo LICENSE
 *  Prohibida la copia o modificación sin autorización del autor.
 * ================================================================
 */

/* ===== Variables CSS ===== */
:root {
    --primary-color: #4CAF50;
    --secondary-color: #2196F3;
    --danger-color: #f44336;
    --warning-color: #ff9800;
    --success-color: #4CAF50;
    --bg-dark: #1a1a2e;
    --bg-medium: #16213e;
    --bg-light: #0f3460;
    --text-light: #ffffff;
    --text-gray: #b0b0b0;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --border-radius: 12px;
}

/* ===== Reset y Estilos Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a0a;
    color: var(--text-light);
    min-height: 100vh;
    font-size: clamp(15px, 0.3vw + 14px, 18px);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

body.performance-mode,
body.performance-mode * {
    scroll-behavior: auto !important;
}

body.performance-mode .floating-particles,
body.performance-mode .splash-particles {
    pointer-events: none;
}

body.performance-mode .splash-particle:nth-child(n+13),
body.performance-mode .floating-particles .particle:nth-child(n+7) {
    display: none !important;
}

body.performance-mode .splash-particle,
body.performance-mode .particle,
body.performance-mode .splash-logo-img.active,
body.performance-mode .splash-title,
body.performance-mode .hero-icon,
body.performance-mode .btn-play-icon,
body.performance-mode .header-logo,
body.performance-mode .header-title h1,
body.performance-mode .code-bracket,
body.performance-mode .heart,
body.performance-mode .card-logo,
body.performance-mode .memory-stat.warning-pulse,
body.performance-mode .danger-item.hint-pulse {
    animation: none !important;
}

body.performance-mode .main-header,
body.performance-mode .main-footer,
body.performance-mode .developer-badge,
body.performance-mode .player-info,
body.performance-mode .game-content,
body.performance-mode .memory-stat,
body.performance-mode .game-over-screen {
    backdrop-filter: none !important;
}

body.performance-mode .main-header,
body.performance-mode .main-footer,
body.performance-mode .developer-badge,
body.performance-mode .player-info,
body.performance-mode .game-content,
body.performance-mode .memory-stat,
body.performance-mode #runnerCanvas,
body.performance-mode .phone-frame {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

/* ===== Pantalla de Presentación (Splash) — GAMER EDITION ===== */
.splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh; height: 100dvh;
    background: #020510;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 10000;
    overflow: hidden;
    padding: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 24px) max(6px, env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.splash-screen.active ~ .main-footer { display: none; }
.splash-screen.fade-out { animation: splashFadeOut 0.8s ease-out forwards; }
@keyframes splashFadeOut { to { opacity: 0; transform: scale(0.96); } }

/* ── Grid de fondo ──────────────────────────────────────────── */
.sp-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: spGridMove 12s linear infinite;
}
@keyframes spGridMove { from{background-position:0 0} to{background-position:60px 60px} }

/* ── Scanlines ──────────────────────────────────────────────── */
.sp-scanlines {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent, transparent 2px,
        rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
    );
    animation: spScan 8s linear infinite;
}
@keyframes spScan { from{background-position:0 0} to{background-position:0 100px} }

/* ── Orbes de luz ───────────────────────────────────────────── */
.sp-orb {
    position: absolute; border-radius: 50%; filter: blur(90px);
    pointer-events: none; z-index: 0;
}
.sp-orb-1 { width: 500px; height: 500px; top: -15%; left: -10%; background: rgba(0,80,255,0.18); animation: spOrb1 14s ease-in-out infinite; }
.sp-orb-2 { width: 420px; height: 420px; bottom: -10%; right: -8%; background: rgba(120,0,255,0.16); animation: spOrb2 18s ease-in-out infinite; }
.sp-orb-3 { width: 340px; height: 340px; top: 40%; left: 55%; background: rgba(0,200,255,0.1); animation: spOrb3 22s ease-in-out infinite; }
@keyframes spOrb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-40px)} }
@keyframes spOrb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,30px)} }
@keyframes spOrb3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-80px,50px)} }

/* ── Partículas flotantes ───────────────────────────────────── */
.sp-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sp-ptcl {
    position: absolute; pointer-events: none; user-select: none;
    animation: spPtclFloat var(--dur, 8s) ease-in-out var(--del, 0s) infinite alternate;
}
@keyframes spPtclFloat {
    from { transform: translateY(0) rotate(0deg); }
    to   { transform: translateY(-60px) rotate(15deg); }
}

/* ── Esquinas del frame ─────────────────────────────────────── */
.sp-frame {
    position: absolute; width: 38px; height: 38px; z-index: 2;
    animation: spFramePulse 3s ease-in-out infinite;
}
.sp-frame-tl { top: 18px; left: 18px; border-top: 2px solid rgba(0,229,255,0.6); border-left: 2px solid rgba(0,229,255,0.6); }
.sp-frame-tr { top: 18px; right: 18px; border-top: 2px solid rgba(0,229,255,0.6); border-right: 2px solid rgba(0,229,255,0.6); }
.sp-frame-bl { bottom: 18px; left: 18px; border-bottom: 2px solid rgba(0,229,255,0.6); border-left: 2px solid rgba(0,229,255,0.6); }
.sp-frame-br { bottom: 18px; right: 18px; border-bottom: 2px solid rgba(0,229,255,0.6); border-right: 2px solid rgba(0,229,255,0.6); }
@keyframes spFramePulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* ── Líneas de borde superior/inferior ──────────────────────── */
.sp-border-top, .sp-border-bottom {
    position: absolute; left: 0; width: 100%; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.55), transparent);
    animation: spBorderSweep 4s ease-in-out infinite;
}
.sp-border-top { top: 0; }
.sp-border-bottom { bottom: 0; animation-delay: 2s; }
@keyframes spBorderSweep {
    0%,100%{ background-position: -100% 0; opacity: 0.4; }
    50%    { background-position: 100% 0;  opacity: 1; }
}

/* ── Matrix canvas splash ── */
.sp-matrix-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0.18; pointer-events: none; z-index: 1;
}

/* ── Contenido central ──────────────────────────────────────── */
.sp-content {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: 18px;
    width: min(100%, 780px);
    padding: clamp(12px, 2.5vw, 28px) clamp(16px, 3vw, 40px) clamp(8px, 1.5vh, 16px);
    text-align: center;
    animation: spContentIn 0.9s cubic-bezier(0.34,1.56,0.64,1) both;
}

.sp-dev-dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(6px, env(safe-area-inset-bottom));
    z-index: 12;
    width: min(calc(100vw - 20px), 560px);
    padding: 0 4px;
    box-sizing: border-box;
    pointer-events: auto;
}

#splashScreen .sp-content {
    margin-top: 0;
    padding-top: 4px;
    padding-bottom: clamp(170px, 26vh, 260px) !important;
    justify-content: center;
    gap: 8px;
}
@media (max-height: 520px) {
    #splashScreen .sp-content { margin-top: 0; padding-top: 4px; padding-bottom: 108px; }
}
.sp-stats { display: none !important; }

#splashScreen .sp-cyber-crime {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}
@keyframes spContentIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ── Logos ──────────────────────────────────────────────────── */
.sp-logos {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(18px,4vw,60px); width: 100%;
    animation: spLogosIn 1s ease-out 0.1s both;
}
@keyframes spLogosIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
.sp-logo-wrap { position: relative; display: inline-flex; align-items: center; }
.sp-logo-img { height: clamp(48px,7vw,80px); width: auto; position: relative; z-index: 1; filter: drop-shadow(0 0 12px rgba(0,180,255,0.4)); transition: filter 0.3s; }
.sp-logo-img:hover { filter: drop-shadow(0 0 22px rgba(0,229,255,0.8)); }
.sp-logo-glow { position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(0,180,255,0.15), transparent 70%); animation: spLogoGlow 3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes spLogoGlow { from{opacity:0.4} to{opacity:1} }
/* Escudo central */
.sp-logo-center { position: relative; display: flex; align-items: center; justify-content: center; }
.sp-shield-img { height: clamp(72px,11vw,120px); width: auto; position: relative; z-index: 2; filter: drop-shadow(0 0 24px rgba(255,200,0,0.6)); animation: spShieldFloat 4s ease-in-out infinite; }
@keyframes spShieldFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.04)} }
.sp-shield-ring {
    position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,200,0,0.3);
    animation: spRingExpand 3s ease-out infinite;
    width: clamp(80px,13vw,140px); height: clamp(80px,13vw,140px);
}
.sp-shield-ring-2 { animation-delay: 1.5s; border-color: rgba(0,229,255,0.25); }
@keyframes spRingExpand { 0%{transform:scale(0.8);opacity:0.8} 100%{transform:scale(2);opacity:0} }

/* ── Badge ──────────────────────────────────────────────────── */
.sp-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.3);
    border-radius: 20px; padding: 5px 18px; font-size: 0.62rem;
    font-weight: 800; letter-spacing: 0.22em; color: rgba(0,229,255,0.75);
    text-transform: uppercase; animation: spBadgeIn 0.7s ease 0.3s both;
}
@keyframes spBadgeIn { from{opacity:0;transform:scale(0.8)} to{opacity:1;transform:scale(1)} }
.sp-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; animation: spDotBlink 1.2s ease infinite; }
@keyframes spDotBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Título principal con glitch ────────────────────────────── */
.sp-title-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    animation: spTitleIn 0.8s ease 0.4s both;
}
@keyframes spTitleIn { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
.sp-title-glitch {
    font-size: clamp(2.4rem,6vw+1rem,5rem); font-weight: 900;
    letter-spacing: 0.18em; color: #fff; text-transform: uppercase;
    position: relative;
    text-shadow: 0 0 40px rgba(0,180,255,0.5), 0 0 80px rgba(0,100,255,0.2);
    animation: spGlitchIdle 6s ease-in-out infinite;
}
.sp-title-glitch::before,
.sp-title-glitch::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%;
    opacity: 0; pointer-events: none;
}
.sp-title-glitch::before { color: #ff004c; clip-path: polygon(0 0,100% 0,100% 45%,0 45%); animation: spGlitch1 6s ease-in-out infinite; }
.sp-title-glitch::after  { color: #00e5ff; clip-path: polygon(0 55%,100% 55%,100% 100%,0 100%); animation: spGlitch2 6s ease-in-out infinite; }
@keyframes spGlitchIdle {
    0%,85%,100% { text-shadow: 0 0 40px rgba(0,180,255,0.5); }
    87%          { text-shadow: 3px 0 40px rgba(0,180,255,0.5); filter: hue-rotate(20deg); }
    89%          { text-shadow: -3px 0 40px rgba(0,180,255,0.5); filter: hue-rotate(-20deg); }
    91%          { text-shadow: 0 0 40px rgba(0,180,255,0.5); filter: none; }
}
@keyframes spGlitch1 {
    0%,84%,92%,100% { opacity:0; transform:translate(0); }
    85% { opacity:0.8; transform:translate(-3px,1px); }
    87% { opacity:0.8; transform:translate(3px,-1px); }
    89% { opacity:0.5; transform:translate(-2px,0); }
}
@keyframes spGlitch2 {
    0%,84%,93%,100% { opacity:0; transform:translate(0); }
    86% { opacity:0.7; transform:translate(3px,0); }
    88% { opacity:0.7; transform:translate(-3px,1px); }
    91% { opacity:0.4; transform:translate(1px,0); }
}
.sp-title-sub {
    font-size: clamp(1.1rem,2.5vw,2rem); font-weight: 900; letter-spacing: 0.3em;
    background: linear-gradient(90deg, #00e5ff, #7b2fff, #00e5ff);
    background-size: 200% auto; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text;
    animation: spSubGrad 4s linear infinite;
    text-transform: uppercase;
}
@keyframes spSubGrad { from{background-position:0%} to{background-position:200%} }
.sp-title-line {
    width: clamp(100px,30vw,280px); height: 2px; margin-top: 8px;
    background: linear-gradient(90deg, transparent, #00e5ff, transparent);
    animation: spLinePulse 2.5s ease-in-out infinite;
}
@keyframes spLinePulse { 0%,100%{opacity:0.4;transform:scaleX(0.7)} 50%{opacity:1;transform:scaleX(1)} }

/* ── Descripción ────────────────────────────────────────────── */
.sp-desc {
    font-size: clamp(0.78rem,1.2vw,1rem); color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px;
    animation: spDescIn 0.7s ease 0.6s both;
}
@keyframes spDescIn { from{opacity:0} to{opacity:1} }
.sp-desc-icon { font-size: 0.9rem; animation: spDescIco 1.6s ease-in-out infinite alternate; }
@keyframes spDescIco { from{opacity:0.4;transform:scale(0.9)} to{opacity:1;transform:scale(1.1)} }

/* ── Stats rápidos ──────────────────────────────────────────── */
.sp-stats {
    display: flex; align-items: center; gap: 0;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; overflow: hidden;
    animation: spStatsIn 0.7s ease 0.7s both;
}
@keyframes spStatsIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
.sp-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 24px;
}
.sp-stat-val { font-size: clamp(1.3rem,3vw,2rem); font-weight: 900; color: #00e5ff; font-family: monospace; text-shadow: 0 0 14px rgba(0,229,255,0.6); }
.sp-stat-lbl { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.16em; color: rgba(255,255,255,0.3); text-transform: uppercase; }
.sp-stat-sep { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

/* ── Botón JUGAR épico ──────────────────────────────────────── */
.sp-play-btn {
    position: relative; border: none; border-radius: 16px; cursor: pointer;
    padding: 0; overflow: hidden; outline: none;
    width: min(100%, 340px);
    animation: spBtnIn 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.9s both;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 8px 40px rgba(0,136,255,0.5), 0 0 0 1px rgba(0,229,255,0.3);
}
@keyframes spBtnIn { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }
.sp-play-btn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 52px rgba(0,136,255,0.65), 0 0 0 2px rgba(0,229,255,0.5); }
.sp-play-btn:active { transform: translateY(1px) scale(0.98); }
.sp-play-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #0066ff 0%, #0033cc 40%, #6600ff 100%);
    z-index: 0;
    animation: spBtnBg 5s linear infinite;
    background-size: 200% 200%;
}
@keyframes spBtnBg { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.sp-play-shine {
    position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: rgba(255,255,255,0.18); transform: skewX(-20deg); z-index: 1;
    animation: spBtnShine 3s ease-in-out infinite;
}
@keyframes spBtnShine { 0%,100%{left:-80%} 55%{left:140%} }
.sp-play-content {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
    gap: 14px; padding: clamp(16px,2vw,22px) clamp(30px,4vw,50px);
}
.sp-play-icon {
    font-size: clamp(1.4rem,3vw,1.9rem); font-style: normal;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
    animation: spPlayIco 1.8s ease-in-out infinite;
}
@keyframes spPlayIco { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2) translateX(3px)} }
.sp-play-text {
    font-size: clamp(1.1rem,2vw,1.5rem); font-weight: 900; letter-spacing: 0.18em;
    color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); text-transform: uppercase;
}
/* Partículas del botón */
.sp-play-particles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sp-play-particles i {
    position: absolute; display: block; border-radius: 50%;
    background: rgba(255,255,255,0.7); pointer-events: none;
    animation: spBtnPtcl 2.5s ease-in-out infinite;
    opacity: 0;
}
.sp-play-particles i:nth-child(1){width:4px;height:4px;top:20%;left:15%;animation-delay:0s}
.sp-play-particles i:nth-child(2){width:3px;height:3px;top:70%;left:80%;animation-delay:0.4s}
.sp-play-particles i:nth-child(3){width:5px;height:5px;top:40%;left:90%;animation-delay:0.8s}
.sp-play-particles i:nth-child(4){width:3px;height:3px;top:80%;left:20%;animation-delay:1.2s}
.sp-play-particles i:nth-child(5){width:4px;height:4px;top:15%;left:60%;animation-delay:1.6s}
.sp-play-particles i:nth-child(6){width:3px;height:3px;top:60%;left:40%;animation-delay:2s}
@keyframes spBtnPtcl {
    0%{opacity:0;transform:translate(0,0) scale(0)}
    30%{opacity:1;transform:translate(0,-12px) scale(1)}
    100%{opacity:0;transform:translate(0,-28px) scale(0.4)}
}

/* ── Tarjeta del desarrollador ──────────────────────────────── */
.sp-dev-card {
    position: relative; overflow: hidden;
    background: rgba(8,12,30,0.85);
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 14px;
    padding: 16px 22px;
    width: 100%;
    animation: spDevIn 0.9s ease 1.1s both;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Borde degradado animado */
.sp-dev-card::before {
    content: ''; position: absolute; inset: 0; padding: 1px; border-radius: 14px;
    background: linear-gradient(90deg, #00e5ff, #7b2fff, #ff2d87, #00e5ff);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spDevBorder 4s linear infinite;
    pointer-events: none;
}
@keyframes spDevBorder { from{background-position:0%} to{background-position:300%} }
@keyframes spDevIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
/* Scan line sobre la tarjeta (desactivada: distrae del texto) */
.sp-dev-scan {
    display: none !important;
}
.sp-dev-inner { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; }
.sp-dev-right { flex: 1; min-width: 0; }
/* Avatar */
.sp-dev-left { position: relative; flex-shrink: 0; }
.sp-dev-avatar {
    width: 52px; height: 52px; border-radius: 12px;
    background: linear-gradient(135deg, #0066ff, #6600ff);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 900; color: #fff; letter-spacing: 0.05em;
    box-shadow: 0 0 20px rgba(0,136,255,0.5);
    animation: spAvatarPulse 3s ease-in-out infinite;
}
@keyframes spAvatarPulse {
    0%,100% { box-shadow: 0 0 20px rgba(0,136,255,0.5); }
    50%      { box-shadow: 0 0 32px rgba(0,136,255,0.8), 0 0 60px rgba(0,136,255,0.2); }
}
.sp-dev-pulse {
    position: absolute; inset: -4px; border-radius: 16px;
    border: 1px solid rgba(0,229,255,0.4);
    animation: spDevPulseRing 2.5s ease-out infinite;
}
@keyframes spDevPulseRing { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(1.6);opacity:0} }
/* Texto */
.sp-dev-right { text-align: left; }
.sp-dev-tag { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.2em; color: rgba(0,229,255,0.5); text-transform: uppercase; margin-bottom: 2px; }
.sp-dev-name {
    font-size: clamp(0.95rem,1.8vw,1.2rem); font-weight: 900; color: #fff;
    background: linear-gradient(90deg, #fff 40%, #00e5ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: 0.04em;
    line-height: 1.15;
}
.sp-dev-role { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.72rem; color: rgba(255,255,255,0.38); line-height: 1.2; }
.sp-dev-role-dot { width: 5px; height: 5px; border-radius: 50%; background: #25d366; box-shadow: 0 0 5px #25d366; animation: spDotBlink 1.5s ease infinite; flex-shrink: 0; }
.sp-dev-meta, .sp-dev-by {
    margin-top: 1px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(200, 230, 255, 0.45);
    line-height: 1.2;
}
.sp-dev-by { color: rgba(255,255,255,0.38); }
.cred-people {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 6px;
}
.cred-person { min-width: 0; }
.cred-person-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #e8f7ff;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.cred-person-role {
    margin: 2px 0 0 11px;
    font-size: 0.55rem;
    font-weight: 600;
    color: rgba(255,255,255,0.42);
    line-height: 1.2;
}
.cred-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #25d366;
    box-shadow: 0 0 6px #25d366, 0 0 12px rgba(37, 211, 102, 0.45);
    animation: spDotBlink 1.5s ease infinite;
}
.cred-people--bar {
    gap: 6px 12px;
}
.cred-people--bar .cred-person-name { font-size: 0.58rem; }
.cred-people--bar .cred-person-role { font-size: 0.47rem; margin-left: 11px; }
@media (max-width: 560px) {
    .cred-people { grid-template-columns: 1fr; gap: 6px; }
}
/* Esquinas de la tarjeta */
.sp-dev-corner { position: absolute; width: 14px; height: 14px; }
.sp-dev-corner-tl { top: 6px; left: 6px; border-top: 2px solid rgba(0,229,255,0.5); border-left: 2px solid rgba(0,229,255,0.5); }
.sp-dev-corner-br { bottom: 6px; right: 6px; border-bottom: 2px solid rgba(120,0,255,0.5); border-right: 2px solid rgba(120,0,255,0.5); }

/* ── Partículas flotantes generales (compatibilidad) ────────── */
.splash-particles, .splash-particle { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .sp-content { gap: 10px; padding: 12px 14px; }
    .sp-logos { gap: 8px; }
    .sp-logo-img { height: clamp(36px,9vw,48px); }
    .sp-shield-img { height: clamp(52px,14vw,68px); }
    .sp-shield-ring { width: clamp(58px,16vw,76px); height: clamp(58px,16vw,76px); }
    .sp-logo-connector { width: 18px; }
    .sp-logo-label { font-size: 0.44rem; }
    .sp-stat { padding: 8px 10px; }
    .sp-stat-val { font-size: 1rem; }
    .sp-title-glitch { letter-spacing: 0.08em; font-size: clamp(1.9rem,8vw,2.4rem); }
    .sp-title-sub { letter-spacing: 0.12em; font-size: clamp(0.85rem,4vw,1.1rem); }
    .sp-desc { font-size: 0.7rem; gap: 5px; flex-wrap: wrap; justify-content: center; }
    .sp-dev-card { padding: 10px 12px; width: 100%; }
    .sp-dev-avatar { width: 36px; height: 36px; font-size: 0.7rem; }
    .sp-dev-name { font-size: 0.85rem; }
    .sp-dev-role { font-size: 0.6rem; }
    .sp-frame { display: none; }
    .sp-play-btn { width: 100%; }
    .sp-stats { border-radius: 10px; width: 100%; justify-content: space-evenly; }
    .sp-badge { font-size: 0.52rem; padding: 3px 12px; }
    /* Reducir halos de energía del escudo central */
    .sp-center-energy { display: none; }
}

@media (max-width: 380px) {
    .sp-content { gap: 8px; padding: 10px 10px; }
    .sp-title-glitch { font-size: clamp(1.6rem,8vw,2rem); }
    .sp-stats { display: none; }
    .sp-desc { display: none; }
    .sp-logo-img { height: clamp(30px,8.5vw,40px); }
    .sp-shield-img { height: clamp(46px,13vw,58px); }
}

/* ── Pantallas medianas/grandes: acotar tamaños con vh para que siempre
       quepan sin scroll (ej: laptop 1366×768, monitor 1920×1080) ───── */
@media (min-width: 600px) {
    .sp-content {
        gap: min(18px, 1.8vh);
        padding: min(50px, 3.5vh) min(40px, 3vw);
    }
    .sp-shield-img   { height: min(130px, 12vh); }
    .sp-logo-img     { height: min(74px,   6vh);  }
    .sp-logo-frame   { padding: min(10px, 1vh) 14px; }
    .sp-title-glitch { font-size: min(5rem,  9vh);  }
    .sp-title-sub    { font-size: min(2rem,  3.5vh); }
    .sp-stat         { padding: min(12px, 1.2vh) 24px; }
    .sp-stat-val     { font-size: min(2rem, 2.5vh); }
    .sp-play-content { padding: min(22px, 2vh) min(50px, 4vw); }
    /* Dev-card compacto en pantallas con altura limitada */
    .sp-dev-card     { padding: min(16px, 1.5vh) min(22px, 2vw); }
    .sp-dev-inner    { gap: min(16px, 1.5vh); }
    .sp-dev-avatar   { width: min(52px, 5vh); height: min(52px, 5vh); font-size: min(1rem, 0.9vh); }
}

/* ── Animaciones de entrada legacy (por si se usan en JS) ───── */
@keyframes splashFadeIn { from{opacity:0} to{opacity:1} }
@keyframes floatParticle {
    0%,100%{transform:translate(0,0) scale(1);opacity:0.3}
    50%{transform:translate(0,-60px) scale(1.1);opacity:0.8}
}
@keyframes bracketPulse { 0%,100%{opacity:0.6} 50%{opacity:1} }

/* ===== Fondo Animado de Videojuego ===== */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        radial-gradient(circle at 20% 50%, rgba(244, 67, 54, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(33, 150, 243, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(76, 175, 80, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 60% 90%, rgba(255, 152, 0, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    animation: gameBackground 20s ease-in-out infinite;
}

@keyframes gameBackground {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.05) rotate(1deg);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.1) rotate(-1deg);
        opacity: 1;
    }
    75% {
        transform: scale(1.05) rotate(0.5deg);
        opacity: 0.9;
    }
}

/* Partículas flotantes de peligro */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(244, 67, 54, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(33, 150, 243, 0.3), transparent),
        radial-gradient(3px 3px at 50% 50%, rgba(76, 175, 80, 0.3), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(255, 152, 0, 0.3), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(156, 39, 176, 0.3), transparent),
        radial-gradient(1px 1px at 33% 80%, rgba(255, 235, 59, 0.3), transparent),
        radial-gradient(2px 2px at 15% 90%, rgba(244, 67, 54, 0.3), transparent);
    background-size: 200% 200%;
    animation: particlesFloat 15s ease-in-out infinite;
}

@keyframes particlesFloat {
    0%, 100% {
        background-position: 0% 0%, 100% 0%, 50% 50%, 80% 20%, 20% 80%, 70% 60%, 40% 90%;
        opacity: 0.4;
    }
    25% {
        background-position: 100% 50%, 0% 100%, 30% 70%, 60% 40%, 40% 60%, 90% 40%, 20% 70%;
        opacity: 0.6;
    }
    50% {
        background-position: 50% 100%, 50% 50%, 70% 30%, 40% 80%, 60% 40%, 50% 80%, 60% 50%;
        opacity: 0.5;
    }
    75% {
        background-position: 0% 50%, 100% 100%, 90% 60%, 20% 60%, 80% 20%, 30% 70%, 80% 30%;
        opacity: 0.6;
    }
}

/* Efecto de escaneo tipo videojuego */
.screen {
    position: relative;
}

/* Brillo pulsante tipo arcade eliminado */

@keyframes arcadeGlow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* ===== Partículas Flotantes con Iconos ===== */
.floating-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    font-size: 2em;
    opacity: 0.6;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 0 10px rgba(76, 175, 80, 0.5));
}

/* Animaciones individuales para cada partícula */
.particle-1 {
    top: 10%;
    left: 5%;
    animation: float1 15s infinite;
}

.particle-2 {
    top: 20%;
    left: 85%;
    animation: float2 18s infinite;
}

.particle-3 {
    top: 30%;
    left: 15%;
    animation: float3 20s infinite;
}

.particle-4 {
    top: 40%;
    left: 90%;
    animation: float4 17s infinite;
}

.particle-5 {
    top: 50%;
    left: 10%;
    animation: float5 19s infinite;
}

.particle-6 {
    top: 60%;
    left: 80%;
    animation: float6 16s infinite;
}

.particle-7 {
    top: 70%;
    left: 20%;
    animation: float7 21s infinite;
}

.particle-8 {
    top: 15%;
    left: 50%;
    animation: float8 14s infinite;
}

.particle-9 {
    top: 80%;
    left: 60%;
    animation: float9 22s infinite;
}

.particle-10 {
    top: 25%;
    left: 70%;
    animation: float10 18s infinite;
}

.particle-11 {
    top: 35%;
    left: 40%;
    animation: float11 16s infinite;
}

.particle-12 {
    top: 45%;
    left: 30%;
    animation: float12 20s infinite;
}

.particle-13 {
    top: 55%;
    left: 75%;
    animation: float13 17s infinite;
}

.particle-14 {
    top: 65%;
    left: 45%;
    animation: float14 19s infinite;
}

.particle-15 {
    top: 75%;
    left: 88%;
    animation: float15 15s infinite;
}

/* Keyframes para movimientos únicos */
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -50px) rotate(90deg); }
    50% { transform: translate(-20px, -100px) rotate(180deg); }
    75% { transform: translate(50px, -70px) rotate(270deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-40px, 60px) rotate(-90deg); }
    50% { transform: translate(30px, 120px) rotate(-180deg); }
    75% { transform: translate(-50px, 80px) rotate(-270deg); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, 100px) scale(1.3); }
}

@keyframes float4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-60px, 40px) rotate(120deg) scale(0.8); }
    66% { transform: translate(-30px, 90px) rotate(240deg) scale(1.2); }
}

@keyframes float5 {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    50% { transform: translate(80px, -80px); opacity: 0.9; }
}

@keyframes float6 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-50px, -40px) rotate(45deg); }
    50% { transform: translate(40px, -90px) rotate(90deg); }
    75% { transform: translate(-60px, -60px) rotate(135deg); }
}

@keyframes float7 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-100px) rotate(180deg); }
}

@keyframes float8 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, 50px) scale(1.2); }
    50% { transform: translate(-30px, 100px) scale(0.9); }
    75% { transform: translate(60px, 70px) scale(1.1); }
}

@keyframes float9 {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    33% { transform: translate(-70px, -60px); opacity: 0.8; }
    66% { transform: translate(50px, -40px); opacity: 0.7; }
}

@keyframes float10 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-80px, 80px) rotate(360deg); }
}

@keyframes float11 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, -50px) scale(0.8); }
    66% { transform: translate(-40px, -80px) scale(1.3); }
}

@keyframes float12 {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    50% { transform: translate(70px, 90px); opacity: 0.9; }
}

@keyframes float13 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-50px, 50px) rotate(-90deg); }
    50% { transform: translate(40px, 100px) rotate(-180deg); }
    75% { transform: translate(-60px, 70px) rotate(-270deg); }
}

@keyframes float14 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, -90px) scale(1.2); }
}

@keyframes float15 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
    25% { transform: translate(-40px, -50px) rotate(90deg); opacity: 0.8; }
    50% { transform: translate(30px, -100px) rotate(180deg); opacity: 0.9; }
    75% { transform: translate(-50px, -70px) rotate(270deg); opacity: 0.7; }
}

/* ===== Header Principal ===== */
.main-header {
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(15, 52, 96, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(12px, 1.4vw, 15px) clamp(14px, 2vw, 20px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.logo-container {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.header-logo {
    height: clamp(56px, 6vw, 80px);
    width: auto;
    max-width: clamp(100px, 12vw, 150px);
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.logo-left .header-logo {
    animation: floatLeft 3s ease-in-out infinite;
}

.logo-right .header-logo {
    animation: floatRight 3s ease-in-out infinite;
}

@keyframes floatLeft {
    0%, 100% {
        transform: translateY(0px) rotate(-2deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

@keyframes floatRight {
    0%, 100% {
        transform: translateY(0px) rotate(2deg);
    }
    50% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

.header-logo:hover {
    transform: scale(1.1);
}

.header-title {
    flex: 1;
    text-align: center;
    align-self: center;
}

.header-title h1 {
    font-size: clamp(1.35rem, 1.6vw + 0.9rem, 2rem);
    margin: 0;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titlePulse 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-icon {
    width: clamp(34px, 4vw, 50px);
    height: clamp(34px, 4vw, 50px);
    filter: drop-shadow(0 2px 8px rgba(76, 175, 80, 0.5));
}

@keyframes titlePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* ===== Footer del Desarrollador ===== */
.main-footer {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-top: 3px solid var(--primary-color);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
    margin-top: auto;
    padding: 20px 0;
    position: relative;
    z-index: 1000;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.developer-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1em;
    color: var(--text-gray);
    flex-wrap: wrap;
}

.developer-badge > span {
    opacity: 0.95;
}

.developer-badge.footer-awake > span {
    opacity: 0;
    transform: translateY(8px);
    animation: creditReveal 0.5s ease-out forwards;
}

.developer-badge.footer-awake > span:nth-child(1) { animation-delay: 0.04s; }
.developer-badge.footer-awake > span:nth-child(2) { animation-delay: 0.12s; }
.developer-badge.footer-awake > span:nth-child(3) { animation-delay: 0.2s; }
.developer-badge.footer-awake > span:nth-child(4) { animation-delay: 0.28s; }
.developer-badge.footer-awake > span:nth-child(5) { animation-delay: 0.36s; }
.developer-badge.footer-awake > span:nth-child(6) { animation-delay: 0.44s; }
.developer-badge.footer-awake > span:nth-child(7) { animation-delay: 0.52s; }

.code-bracket {
    font-size: 2.5em;
    font-weight: 900;
    color: #667eea;
    animation: bracketPulse 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5),
                 0 0 20px rgba(102, 126, 234, 0.3);
}

@keyframes bracketPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.82;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.94;
    }
}

.separator {
    color: #667eea;
    font-size: 1.2em;
    font-weight: 300;
    opacity: 0.6;
}

.dev-text {
    font-size: 1em;
    letter-spacing: 0.5px;
}

.heart {
    color: #e74c3c;
    animation: heartBeat 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(1.1);
    }
    20%, 40% {
        transform: scale(1);
    }
}

.dev-text strong {
    color: #667eea;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
}

.dev-title {
    font-size: 0.95em;
    color: #8b9dc3;
    font-style: italic;
}

.copyright {
    font-size: 0.9em;
    color: #6c7a89;
    letter-spacing: 0.3px;
}

.container {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(14px, 2vw, 20px);
    width: 100%;
    position: relative;
    /* z-index removido: evita stacking context que atrapa modales fixed */
}

body.gameplay-mode .container {
    max-width: min(100%, 1440px);
    padding-inline: clamp(8px, 1.4vw, 16px);
}

body[data-active-section="runnerContainer"] {
    background: #050816;
}

body[data-active-section="quizContainer"],
body[data-active-section="memoryContainer"],
body[data-active-section="dangerContainer"],
body[data-active-section="chatContainer"],
body[data-active-section="scenarioContainer"] {
    background: #07111f;
}

/* ===== Pantallas ===== */
.screen {
    display: none;
    animation: fadeIn 0.5s ease-in;
}

.screen.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Pantalla de Inicio ===== */
.hero {
    text-align: center;
    padding: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 20px) clamp(24px, 4vw, 40px) clamp(12px, 2vw, 20px);
}

.hero h1 {
    font-size: clamp(1.8rem, 2.4vw + 1rem, 3rem);
    flex-wrap: wrap;
}

.hero h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.hero-icon {
    width: clamp(40px, 5vw, 60px);
    height: clamp(40px, 5vw, 60px);
    filter: drop-shadow(0 3px 10px rgba(102, 126, 234, 0.6));
    animation: iconFloat 3s ease-in-out infinite;
}

.subtitle {
    font-size: clamp(1rem, 0.8vw + 0.9rem, 1.3rem);
    color: var(--text-gray);
    margin-bottom: 30px;
}

.player-info {
    background: var(--bg-light);
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--border-radius);
    margin: 30px auto;
    max-width: 500px;
    box-shadow: var(--shadow);
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: var(--text-gray);
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--bg-medium);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 1em;
    transition: border-color 0.3s;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* ===== Botones Estilo Videojuego ===== */
.btn {
    padding: 12px 30px;
    border: 3px solid;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 5px;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    vertical-align: middle;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    border-radius: 5px;
    pointer-events: none;
}

.btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background: linear-gradient(180deg, #5cb85c 0%, #449d44 100%);
    border-color: #398439;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #6ec76e 0%, #5cb85c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 8px 20px rgba(76, 175, 80, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
    background: linear-gradient(180deg, #449d44 0%, #398439 100%);
}

.btn-secondary {
    background: linear-gradient(180deg, #5bc0de 0%, #31b0d5 100%);
    border-color: #269abc;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(180deg, #6dd0ee 0%, #5bc0de 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 8px 20px rgba(33, 150, 243, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-secondary:active {
    background: linear-gradient(180deg, #31b0d5 0%, #269abc 100%);
}

.btn-info {
    background: linear-gradient(180deg, #b45fbf 0%, #9c27b0 100%);
    border-color: #7b1fa2;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-info:hover {
    background: linear-gradient(180deg, #c46fcf 0%, #b45fbf 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 8px 20px rgba(156, 39, 176, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-info:active {
    background: linear-gradient(180deg, #9c27b0 0%, #7b1fa2 100%);
}

.btn-danger {
    background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
    border-color: #c62828;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(180deg, #f55346 0%, #f44336 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 8px 20px rgba(244, 67, 54, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.btn-danger:active {
    background: linear-gradient(180deg, #d32f2f 0%, #c62828 100%);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.85em;
    border-width: 2px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn-small:active {
    transform: translateY(3px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) !important;
    filter: grayscale(50%);
}

.menu-options {
    text-align: center;
    margin-top: 30px;
}

.menu-options .btn {
    min-width: 220px;
}

/* ===== Pantalla de Juego ===== */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    z-index: 10;
}

.player-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.stat {
    font-size: 1.1em;
    font-weight: bold;
    white-space: nowrap;
}

.game-content {
    background: var(--bg-light);
    padding: clamp(18px, 3vw, 30px);
    border-radius: var(--border-radius);
    min-height: 400px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 5;
    overflow: hidden;
}

body.heavy-gameplay-mode .game-content {
    padding: clamp(10px, 1.8vw, 18px);
}

body.gameplay-mode .game-content {
    width: 100%;
}

body.gameplay-mode .floating-particles,
body.heavy-gameplay-mode .floating-particles {
    opacity: 0.2;
}

body.heavy-gameplay-mode::before,
body.heavy-gameplay-mode::after {
    animation: none;
}

body.heavy-gameplay-mode .hs-matrix-canvas,
body.heavy-gameplay-mode .gs-matrix-canvas,
body.performance-mode .hs-matrix-canvas,
body.performance-mode .gs-matrix-canvas {
    display: none !important;
}

body.heavy-gameplay-mode .gx-canvas,
body.performance-mode .gx-canvas {
    display: none !important;
}

body.heavy-gameplay-mode .main-header,
body.heavy-gameplay-mode .main-footer,
body.heavy-gameplay-mode .runner-controls,
body.heavy-gameplay-mode .game-controls-info,
body.heavy-gameplay-mode .runner-info,
body.heavy-gameplay-mode .game-info {
    backdrop-filter: none;
}

.game-section {
    display: none;
}

.game-section.active {
    display: block;
    opacity: 1;
    animation: none;
}

/* Excepción para el simulador de chat que necesita flex */
#scenarioContainer.active {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    inset: auto;
    min-height: clamp(640px, calc(100dvh - 210px), 980px);
    background: linear-gradient(135deg, #0a0a0a 0%, #16213e 50%, #0f3460 100%);
    z-index: 2;
    overflow: hidden;
    border-radius: 28px;
    padding: clamp(20px, 3vw, 34px);
    animation: none;
}

/* ===== Menú Hero Header ===== */
#gameMenu {
    position: relative;
    overflow: visible;
}
#gameMenu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    animation: mcGridMove 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes mcGridMove {
    from { background-position: 0 0; }
    to   { background-position: 44px 44px; }
}

.menu-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 18px 0 6px;
}
.menu-hero-badge {
    display: inline-block;
    background: linear-gradient(90deg, rgba(0,229,255,0.12), rgba(0,229,255,0.06));
    border: 1px solid rgba(0,229,255,0.28);
    border-radius: 30px;
    padding: 5px 18px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: rgba(0,229,255,0.75);
    text-transform: uppercase;
    margin-bottom: 10px;
    animation: badgePulse 3s ease infinite;
}
@keyframes badgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(0,229,255,0); }
}
.menu-title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0 0 6px;
    animation: menuTitleGlow 4s ease infinite;
}
@keyframes menuTitleGlow {
    0%,100% { text-shadow: 0 0 10px rgba(0,229,255,0.25); }
    50%      { text-shadow: 0 0 24px rgba(0,229,255,0.65), 0 0 50px rgba(0,229,255,0.2); }
}
.menu-subtitle {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.38);
    margin: 0;
    letter-spacing: 0.03em;
}

/* ===== Grid de Misiones ===== */
.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 18px;
    margin-top: 22px;
    position: relative;
    z-index: 1;
    perspective: 1200px;
}

/* ── Per-game accent colors ── */
.mission-card[data-game="quiz"]   { --mc-accent: #ffcc00; --mc-glow: rgba(255,204,0,.45); }
.mission-card[data-game="memory"] { --mc-accent: #a855f7; --mc-glow: rgba(168,85,247,.45); }
.mission-card[data-game="danger"] { --mc-accent: #ef4444; --mc-glow: rgba(239,68,68,.45); }
.mission-card[data-game="chat"]   { --mc-accent: #00e5ff; --mc-glow: rgba(0,229,255,.45); }
.mission-card[data-game="runner"] { --mc-accent: #f97316; --mc-glow: rgba(249,115,22,.45); }
.mission-card[data-game="kart"]   { --mc-accent: #7c4dff; --mc-glow: rgba(124,77,255,.45); }
.mission-card[data-game="rpg"]    { --mc-accent: #e6c36a; --mc-glow: rgba(230,195,106,.4); }

.mission-card {
    background: linear-gradient(160deg, rgba(20,26,50,0.96) 0%, rgba(10,13,30,0.98) 100%);
    padding: 24px 20px 20px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.12s ease;

    /* Fly-in entrance — removed then re-added by JS */
    opacity: 0;
    transform: translateY(40px) scale(0.94);
}
.mission-card.mc-visible {
    animation: mcFlyIn 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
.mission-card:nth-child(1) { animation-delay: 0.04s; }
.mission-card:nth-child(2) { animation-delay: 0.11s; }
.mission-card:nth-child(3) { animation-delay: 0.18s; }
.mission-card:nth-child(4) { animation-delay: 0.25s; }
.mission-card:nth-child(5) { animation-delay: 0.32s; }
.mission-card.is-soon { animation-delay: 0.53s; }

@keyframes mcFlyIn {
    from { opacity: 0; transform: translateY(42px) scale(0.93); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sweep shine on hover */
.mission-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.mission-card:hover::after { left: 160%; }

/* Hover state */
.mission-card:hover {
    border-color: var(--mc-accent, #4caf50);
    box-shadow:
        0 0 0 1px var(--mc-accent, #4caf50),
        0 8px 32px rgba(0,0,0,0.55),
        0 0 28px var(--mc-glow, rgba(76,175,80,.4));
    z-index: 2;
}
.mission-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.08s ease;
}

/* Decorative corner brackets */
.mc-corner {
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--mc-accent, #4caf50);
    border-style: solid;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mission-card:hover .mc-corner { opacity: 1; }
.mc-corner-tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 2px 0 0 0; }
.mc-corner-br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 2px 0; }

/* Ambient glow ring behind icon */
.mc-glow-ring {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 62px; height: 62px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--mc-glow, rgba(76,175,80,.3)) 0%, transparent 70%);
    animation: mcRingPulse 2.8s ease infinite;
    pointer-events: none;
}
@keyframes mcRingPulse {
    0%,100% { transform: translateX(-50%) scale(1);   opacity: 0.6; }
    50%      { transform: translateX(-50%) scale(1.35); opacity: 0.2; }
}

/* ── Floating icon ── */
.mission-icon {
    font-size: 3em;
    margin-bottom: 10px;
    display: inline-block;
    animation: mcIconFloat var(--icon-dur, 3.2s) ease-in-out infinite var(--icon-del, 0s);
    transform-origin: center bottom;
    filter: drop-shadow(0 4px 8px var(--mc-glow, rgba(76,175,80,.3)));
    position: relative;
    z-index: 1;
}
/* Different float rhythm per card */
.mission-card:nth-child(1) .mission-icon { --icon-dur: 3.0s; --icon-del: 0s; }
.mission-card:nth-child(2) .mission-icon { --icon-dur: 3.5s; --icon-del: -0.6s; }
.mission-card:nth-child(3) .mission-icon { --icon-dur: 2.8s; --icon-del: -1.2s; }
.mission-card:nth-child(4) .mission-icon { --icon-dur: 3.3s; --icon-del: -0.4s; }
.mission-card:nth-child(5) .mission-icon { --icon-dur: 2.6s; --icon-del: -0.9s; }

@keyframes mcIconFloat {
    0%,100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-11px) rotate(-4deg); }
    70%      { transform: translateY(-7px)  rotate(3deg); }
}
.mission-card:hover .mission-icon {
    animation: mcIconHoverSpin 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
    filter: drop-shadow(0 6px 14px var(--mc-glow, rgba(76,175,80,.55)));
}
@keyframes mcIconHoverSpin {
    0%   { transform: scale(1)    rotate(0deg); }
    40%  { transform: scale(1.28) rotate(-15deg); }
    100% { transform: scale(1.18) rotate(0deg); }
}

.mission-card h3 {
    margin: 8px 0 6px;
    color: var(--mc-accent, var(--primary-color));
    font-size: 0.95rem;
    font-weight: 800;
    transition: color 0.2s;
    position: relative; z-index: 1;
}

.mission-card p {
    color: var(--text-gray);
    margin-bottom: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    position: relative; z-index: 1;
}

.points {
    display: inline-block;
    background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
    border: 1px solid var(--mc-accent, var(--primary-color));
    color: var(--mc-accent, #fff);
    padding: 4px 13px;
    border-radius: 20px;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.04em;
    position: relative; z-index: 1;
    transition: background 0.2s, box-shadow 0.2s;
}
.mission-card:hover .points {
    background: var(--mc-accent, var(--primary-color));
    color: #000;
    box-shadow: 0 0 12px var(--mc-glow, rgba(76,175,80,.5));
}


/* ===== TV Quiz Show ===== */
/* --- Cyber Quiz --- */
/* ======================== CYBER QUIZ ======================== */
.cq-wrap {
    max-width: 860px;
    margin: 0 auto;
    background: linear-gradient(160deg, #04091a 0%, #060d1f 60%, #04091a 100%);
    border: 1px solid rgba(0,229,255,0.25);
    border-radius: 18px;
    padding: clamp(12px, 2vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0,229,255,0.08), inset 0 0 60px rgba(0,0,0,0.5);
}
/* Scanline sweep */
.cq-wrap::after {
    content: '';
    position: absolute;
    top: -20%; left: 0; right: 0;
    height: 50px;
    background: linear-gradient(180deg, transparent, rgba(0,229,255,0.045), transparent);
    animation: cqScanline 5s linear infinite;
    pointer-events: none; z-index: 10;
}
@keyframes cqScanline { from{top:-10%} to{top:110%} }

/* Animated grid background */
.cq-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    animation: cqGridMove 18s linear infinite;
    pointer-events: none; z-index: 0;
}
.cq-bg-grid.cq-bg-danger {
    background-image:
        linear-gradient(rgba(255,68,68,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,68,68,0.06) 1px, transparent 1px);
}
@keyframes cqGridMove { from{background-position:0 0} to{background-position:44px 44px} }
.cq-wrap > * { position: relative; z-index: 1; }
.cq-bg-grid { z-index: 0; }

/* ---- HUD ---- */
.cq-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(0,229,255,0.18);
    border-radius: 12px;
    padding: 12px 18px;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(0,229,255,0.1), 0 4px 20px rgba(0,0,0,0.5);
}
.cq-hud-left  { display: flex; flex-direction: column; gap: 5px; }
.cq-hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

/* Animated badge */
.cq-badge {
    font-size: 0.63rem; font-weight: 900; letter-spacing: 0.22em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #00e5ff 0%, #00ff88 40%, #00e5ff 80%);
    background-size: 200% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: cqBadgeShimmer 3s linear infinite;
}
@keyframes cqBadgeShimmer { from{background-position:0%} to{background-position:200%} }

.cq-round { font-size: 0.68rem; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; }
.cq-num   { color: #fff; font-weight: 900; font-size: 0.82rem; }
.cq-total { color: rgba(255,255,255,0.35); }

/* Circular SVG timer */
.cq-timer-wrap {
    position: relative;
    width: 74px; height: 74px;
    display: flex; align-items: center; justify-content: center;
}
.cq-timer-svg {
    position: absolute; inset: 0;
    width: 74px; height: 74px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(0,229,255,0.55));
}
.cq-svg-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 5;
}
.cq-svg-fill {
    fill: none;
    stroke: #00e5ff;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.35s;
}
.cq-timer-val {
    font-size: clamp(1.3rem,2.8vw,1.7rem); font-weight: 900;
    font-family: 'Courier New', monospace; color: #00e5ff;
    text-shadow: 0 0 12px rgba(0,229,255,0.8); line-height: 1;
    transition: color 0.35s;
    z-index: 1;
}
.cq-timer-val.cq-timer-urgent {
    color: #ff4444;
    text-shadow: 0 0 14px rgba(255,68,68,0.9);
    animation: cqTimerBlink 0.45s steps(2) infinite;
}
@keyframes cqTimerBlink { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* Score */
.cq-score-label { font-size: 0.56rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.32); text-transform: uppercase; }
.cq-score-val   {
    font-size: clamp(1.3rem,2.5vw,1.9rem); font-weight: 900;
    color: #ffd700; text-shadow: 0 0 14px rgba(255,215,0,0.65);
    font-family: 'Courier New', monospace;
}

/* Streak bar */
.cq-streak {
    align-self: center;
    text-align: center; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.08em;
    padding: 6px 20px; border-radius: 20px;
    background: linear-gradient(90deg, rgba(255,80,0,0.15), rgba(255,160,0,0.15));
    border: 1px solid rgba(255,100,0,0.45);
    color: #ff8800;
    box-shadow: 0 0 18px rgba(255,80,0,0.22), inset 0 0 10px rgba(255,80,0,0.08);
    transition: opacity 0.3s, height 0.3s;
}
.cq-streak.cq-streak-hidden { opacity: 0; pointer-events: none; height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-color: transparent; }
.cq-streak.cq-streak-pop    { animation: cqStreakPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes cqStreakPop { 0%{transform:scale(0.65)} 100%{transform:scale(1)} }

/* Question card */
.cq-question-card {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(0,229,255,0.18);
    border-radius: 14px;
    padding: clamp(18px,3vw,28px) clamp(18px,3vw,28px);
    display: flex; align-items: flex-start; gap: 16px;
    animation: cqCardIn 0.35s cubic-bezier(0.34,1.2,0.64,1);
    position: relative;
    box-shadow: 0 0 30px rgba(0,229,255,0.05), inset 0 0 40px rgba(0,0,0,0.25);
}
/* Corner brackets */
.cq-question-card::before,
.cq-question-card::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-color: rgba(0,229,255,0.7);
    border-style: solid;
}
.cq-question-card::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
    border-radius: 4px 0 0 0;
}
.cq-question-card::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 4px 0;
}
@keyframes cqCardIn { from{opacity:0;transform:translateY(-14px) scale(0.97)} to{opacity:1;transform:none} }

.cq-q-icon {
    font-size: clamp(1.8rem,3.5vw,2.4rem); flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(0,229,255,0.6));
}
.cq-q-text {
    font-size: clamp(1rem,2vw,1.22rem); font-weight: 600;
    color: rgba(255,255,255,0.95); line-height: 1.6; margin: 0;
}

/* Answer grid */
.cq-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.cq-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85);
    font-size: clamp(0.8rem,1.5vw,0.9rem); text-align: left;
    transition: all 0.18s ease; user-select: none;
    animation: cqBtnIn 0.4s cubic-bezier(0.34,1.15,0.64,1) both;
    position: relative; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Left neon accent bar */
.cq-btn::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: rgba(0,229,255,0.35);
    transition: background 0.2s, box-shadow 0.2s;
}
.cq-btn:nth-child(1){animation-delay:0.06s}
.cq-btn:nth-child(2){animation-delay:0.12s}
.cq-btn:nth-child(3){animation-delay:0.18s}
.cq-btn:nth-child(4){animation-delay:0.24s}
@keyframes cqBtnIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:none} }

.cq-btn:hover:not(:disabled) {
    background: rgba(0,229,255,0.1);
    border-color: rgba(0,229,255,0.45);
    transform: translateX(5px);
    box-shadow: -4px 0 0 #00e5ff, 0 4px 18px rgba(0,229,255,0.15);
    color: #fff;
}
.cq-btn:hover:not(:disabled)::before {
    background: #00e5ff;
    box-shadow: 0 0 10px #00e5ff;
}
.cq-btn:hover:not(:disabled) .cq-letter {
    background: rgba(0,229,255,0.3);
    border-color: #00e5ff;
    box-shadow: 0 0 12px rgba(0,229,255,0.55);
    color: #fff;
}
.cq-btn:active:not(:disabled) { transform: scale(0.97); }
.cq-btn:disabled { cursor: default; }

.cq-letter {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
    font-size: 0.78rem; font-weight: 900;
    background: rgba(0,229,255,0.1);
    border: 1px solid rgba(0,229,255,0.3);
    color: #00e5ff;
    transition: all 0.18s;
}
.cq-text { flex: 1; line-height: 1.4; }

/* Correct */
.cq-btn.cq-correct {
    background: rgba(0,255,136,0.14) !important;
    border-color: #00ff88 !important;
    color: #00ff88 !important;
    box-shadow: -4px 0 0 #00ff88, 0 0 22px rgba(0,255,136,0.25) !important;
    animation: cqCorrectFlash 0.5s ease;
}
.cq-btn.cq-correct::before { background: #00ff88; box-shadow: 0 0 10px #00ff88; }
.cq-btn.cq-correct .cq-letter { background: rgba(0,255,136,0.25); border-color: #00ff88; color: #00ff88; }
@keyframes cqCorrectFlash {
    0%  { box-shadow:-4px 0 0 #00ff88, 0 0 0 rgba(0,255,136,0); }
    45% { box-shadow:-4px 0 0 #00ff88, 0 0 45px rgba(0,255,136,0.55); }
    100%{ box-shadow:-4px 0 0 #00ff88, 0 0 22px rgba(0,255,136,0.25); }
}

/* Wrong */
.cq-btn.cq-wrong {
    background: rgba(255,68,68,0.18) !important;
    border-color: #ff4444 !important;
    color: #ff6b6b !important;
    box-shadow: -4px 0 0 #ff4444 !important;
    animation: cqWrongShake 0.45s ease;
}
.cq-btn.cq-wrong::before { background: #ff4444; }
.cq-btn.cq-wrong .cq-letter { background: rgba(255,68,68,0.25); border-color: #ff4444; color: #ff4444; }
@keyframes cqWrongShake {
    0%,100%{ transform:translateX(0); }
    20%,60%{ transform:translateX(-7px); }
    40%,80%{ transform:translateX(7px); }
}

/* Explanation */
.cq-exp-box {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: 12px;
    animation: cqExpIn 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes cqExpIn { from{opacity:0;transform:translateY(12px) scale(0.97)} to{opacity:1;transform:none} }
.cq-exp-correct { background: rgba(0,255,136,0.09); border: 1px solid rgba(0,255,136,0.3); box-shadow: 0 0 24px rgba(0,255,136,0.07); }
.cq-exp-timeout { background: rgba(255,165,0,0.09); border: 1px solid rgba(255,165,0,0.3); box-shadow: 0 0 24px rgba(255,165,0,0.07); }
.cq-exp-icon    { font-size: 1.5rem; flex-shrink: 0; line-height: 1.3; }
.cq-exp-content { flex: 1; }
.cq-exp-content strong { display: block; font-size: 0.88rem; font-weight: 800; color: #fff; margin-bottom: 4px; letter-spacing: 0.04em; }
.cq-exp-content p      { font-size: 0.82rem; color: rgba(255,255,255,0.72); margin: 0 0 10px; line-height: 1.5; }

/* Footer */
.cq-footer { display: flex; justify-content: flex-end; padding-top: 2px; }

/* ---- Results ---- */
.cq-results-wrap {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: clamp(24px,4vw,52px) clamp(16px,3vw,32px); gap: 16px;
}
.cq-results-badge {
    font-size: clamp(1.1rem,2.5vw,1.5rem); font-weight: 900; letter-spacing: 0.1em;
    background: linear-gradient(135deg,#ffd700,#ffaa00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: cqBadgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
.cq-lost-badge {
    background: linear-gradient(135deg,#ff4444,#ff9900) !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #000 !important;
    background-clip: unset !important;
    color: #000 !important;
    padding: 4px 16px;
    border-radius: 20px;
}
@keyframes cqBadgePop { from{opacity:0;transform:scale(0.4)} to{opacity:1;transform:scale(1)} }

.cq-results-title {
    font-size: clamp(1.5rem,3.5vw,2.2rem); font-weight: 900;
    color: #fff; margin: 0; letter-spacing: 0.1em;
    text-shadow: 0 0 30px rgba(0,229,255,0.5);
    animation: cqResultIn 0.4s ease 0.35s both;
}
.cq-lost-title { text-shadow: 0 0 30px rgba(255,68,68,0.4) !important; }
.cq-results-msg { color: rgba(255,255,255,0.6); font-size: 0.94rem; margin: 0; animation: cqResultIn 0.4s ease 0.45s both; }
@keyframes cqResultIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* Game over icon */
.cq-lost-icon {
    font-size: clamp(3rem,8vw,4.5rem);
    animation: cqLostIconIn 0.55s cubic-bezier(0.34,1.56,0.64,1);
    filter: drop-shadow(0 0 16px rgba(255,68,68,0.6));
}
@keyframes cqLostIconIn { from{transform:scale(0) rotate(-25deg);opacity:0} to{transform:none;opacity:1} }

/* Stats grid */
.cq-results-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: cqResultIn 0.4s ease 0.55s both; }
.cq-rs-stat {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 14px 20px; min-width: 86px;
    position: relative; overflow: hidden;
}
.cq-rs-stat::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.45), transparent);
}
.cq-rs-val {
    font-size: clamp(1.3rem,2.8vw,1.8rem); font-weight: 900;
    color: #fff; font-family: 'Courier New', monospace;
}
.cq-rs-val.cq-rs-highlight {
    background: linear-gradient(135deg,#ffd700,#ffaa00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cq-rs-label { font-size: 0.56rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.32); text-transform: uppercase; margin-top: 4px; }

.cq-results-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; animation: cqResultIn 0.4s ease 0.65s both; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .cq-answers { grid-template-columns: 1fr; }
    .cq-timer-wrap { width: 62px; height: 62px; }
    .cq-timer-svg  { width: 62px; height: 62px; }
    .cq-timer-val  { font-size: 1.25rem; }
    .cq-hud { padding: 10px 12px; gap: 8px; }
    .cq-results-grid { gap: 8px; }
    .cq-rs-stat { padding: 10px 14px; min-width: 72px; }
    .cq-btn { padding: 12px 14px; }
}
@media (max-width: 400px) {
    .cq-badge  { font-size: 0.55rem; letter-spacing: 0.14em; }
    .cq-letter { width: 26px; height: 26px; font-size: 0.72rem; }
    .cq-btn    { gap: 8px; }
}

/* ======================== ARIA — ROBOT GUARDIÁN CHARACTER ======================== */
.cq-aria {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(0,229,255,0.22);
    border-radius: 14px;
    padding: 12px 16px;
    position: relative;
    overflow: hidden;
    animation: cqAriaIn 0.4s cubic-bezier(0.34,1.2,0.64,1);
}
.cq-aria::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #00e5ff, #00ff88, #00e5ff);
    background-size: 100% 200%;
    animation: ariaBorderFlow 3s linear infinite;
}
@keyframes ariaBorderFlow { from{background-position:0 0} to{background-position:0 200%} }
@keyframes cqAriaIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:none} }

/* Avatar container */
.cq-aria-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* Holographic face */
.cq-aria-avatar {
    width: 62px; height: 62px;
    background: linear-gradient(160deg, #04101f, #071826);
    border: 2px solid rgba(0,229,255,0.6);
    border-radius: 12px;
    position: relative; overflow: hidden;
    box-shadow:
        0 0 14px rgba(0,229,255,0.35),
        inset 0 0 16px rgba(0,229,255,0.06);
    flex-shrink: 0;
}
/* Scanline inside face */
.cq-aria-scan-bar {
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.7), transparent);
    animation: ariaFaceScan 2.5s linear infinite;
    pointer-events: none; z-index: 2;
}
@keyframes ariaFaceScan { from{top:-2px} to{top:102%} }

.cq-aria-screen {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; height: 100%;
    position: relative; z-index: 1;
}

/* Eyes */
.cq-aria-eyes { display: flex; gap: 10px; }
.cq-aria-eye {
    width: 11px; height: 11px; border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff, 0 0 16px rgba(0,229,255,0.6);
    animation: ariaBlink 4.5s ease-in-out infinite;
    transition: background 0.3s, box-shadow 0.3s;
}
@keyframes ariaBlink {
    0%,46%,54%,100% { transform: scaleY(1); }
    50% { transform: scaleY(0.08); }
}

/* Mouth */
.cq-aria-mouth {
    width: 18px; height: 3px; border-radius: 2px;
    background: rgba(0,229,255,0.65);
    transition: all 0.35s ease;
}

/* Happy state — smile */
[data-state="happy"] .cq-aria-eye {
    background: #00ff88;
    box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0,255,136,0.5);
    animation: ariaEyeHappy 0.5s ease, ariaBlink 4.5s ease-in-out 0.6s infinite;
}
@keyframes ariaEyeHappy { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
[data-state="happy"] .cq-aria-mouth {
    height: 0; width: 20px;
    border-bottom: 3px solid rgba(0,255,136,0.9);
    border-left: 2px solid transparent; border-right: 2px solid transparent;
    background: transparent;
    border-radius: 0 0 12px 12px;
    transform: translateY(2px);
}
[data-state="happy"] .cq-aria-avatar {
    border-color: rgba(0,255,136,0.7);
    box-shadow: 0 0 18px rgba(0,255,136,0.4), inset 0 0 16px rgba(0,255,136,0.06);
}

/* Worried state — concern */
[data-state="worried"] .cq-aria-eye {
    background: #ff6b6b;
    box-shadow: 0 0 10px #ff4444, 0 0 20px rgba(255,68,68,0.5);
    animation: ariaEyeWorried 0.3s ease, ariaBlink 3s ease-in-out 0.4s infinite;
}
@keyframes ariaEyeWorried { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
[data-state="worried"] .cq-aria-mouth {
    height: 0; width: 20px;
    border-top: 3px solid rgba(255,68,68,0.9);
    border-left: 2px solid transparent; border-right: 2px solid transparent;
    background: transparent;
    border-radius: 12px 12px 0 0;
    transform: translateY(2px);
}
[data-state="worried"] .cq-aria-avatar {
    border-color: rgba(255,68,68,0.7);
    box-shadow: 0 0 18px rgba(255,68,68,0.35), inset 0 0 16px rgba(255,68,68,0.06);
    animation: ariaShake 0.4s ease;
}
@keyframes ariaShake {
    0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)}
}

/* Alert state — urgency */
[data-state="alert"] .cq-aria-eye {
    background: #ffd700;
    box-shadow: 0 0 10px #ffd700, 0 0 20px rgba(255,215,0,0.5);
    animation: ariaEyeAlert 0.4s steps(2) infinite;
}
@keyframes ariaEyeAlert { 0%,100%{opacity:1} 50%{opacity:0.3} }
[data-state="alert"] .cq-aria-avatar {
    border-color: rgba(255,215,0,0.7);
    box-shadow: 0 0 18px rgba(255,215,0,0.4), inset 0 0 16px rgba(255,215,0,0.06);
}

/* Name label */
.cq-aria-label {
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em;
    text-align: center; line-height: 1.3;
    background: linear-gradient(90deg, #00e5ff, #00ff88);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cq-aria-label small {
    font-size: 0.52rem; font-weight: 500; letter-spacing: 0.06em;
    -webkit-text-fill-color: rgba(255,255,255,0.35);
    display: block;
}

/* Speech bubble */
.cq-aria-bubble {
    flex: 1; position: relative;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(0,229,255,0.15);
    border-radius: 12px 12px 12px 4px;
    padding: 10px 14px;
    min-height: 50px;
    display: flex; align-items: center;
}
/* Tail of bubble pointing to avatar */
.cq-aria-bubble::before {
    content: '';
    position: absolute; left: -7px; top: 14px;
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 7px solid rgba(0,229,255,0.15);
}
.cq-aria-bubble::after {
    content: '';
    position: absolute; left: -5px; top: 15px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid rgba(0,0,0,0.45);
}

/* Blinking dot indicator */
.cq-aria-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 6px #00e5ff;
    flex-shrink: 0; margin-right: 8px;
    animation: ariaDotPulse 1.4s ease-in-out infinite;
}
@keyframes ariaDotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.7)} }

.cq-aria-msg {
    font-size: clamp(0.76rem,1.4vw,0.86rem);
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}
/* Typewriter reveal */
.cq-aria-msg.cq-aria-type {
    animation: ariaTypeReveal 0.6s ease;
}
@keyframes ariaTypeReveal {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 600px) {
    .cq-aria-avatar { width: 52px; height: 52px; border-radius: 10px; }
    .cq-aria-eye    { width: 9px; height: 9px; }
    .cq-aria-label  { font-size: 0.55rem; }
    .cq-aria-bubble { padding: 8px 12px; }
    .cq-aria-msg    { font-size: 0.76rem; }
}
@media (max-width: 400px) {
    .cq-aria { gap: 10px; padding: 10px 12px; }
    .cq-aria-avatar { width: 46px; height: 46px; }
}
.sc-wrap {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    overflow: hidden;
}

/* ════════════════════════════════════
   SCENARIO SIMULATOR — DESKTOP WINDOW
════════════════════════════════════ */
.sc-desktop-window {
    background: #0e0e1a;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 28px 80px rgba(0,0,0,0.7);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: clamp(480px, 72vh, 700px);
}

/* Title bar */
.sc-titlebar {
    width: 100%;
    height: 34px;
    background: linear-gradient(90deg, #141424, #1a1a2e);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    padding: 0 14px;
    flex-shrink: 0;
    user-select: none;
    gap: 8px;
}
.sc-tb-dots { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.sc-tb-close, .sc-tb-min, .sc-tb-max {
    width: 10px; height: 10px; border-radius: 50%; display: block;
}
.sc-tb-close { background: #ff5f57; box-shadow: 0 0 5px rgba(255,95,87,0.5); }
.sc-tb-min   { background: #febc2e; box-shadow: 0 0 5px rgba(254,188,46,0.5); }
.sc-tb-max   { background: #28c840; box-shadow: 0 0 5px rgba(40,200,64,0.5); }
.sc-tb-center {
    flex: 1; text-align: center;
    font-size: 0.62rem; letter-spacing: 0.1em; font-weight: 600;
    color: rgba(255,255,255,0.28); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-tb-end { width: 58px; flex-shrink: 0; }

/* Two-column layout */
.sc-app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sidebar */
.sc-sidebar {
    width: 200px;
    flex-shrink: 0;
    background: #0a0a16;
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sc-sidebar-hdr {
    padding: 12px 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.sc-sidebar-lbl {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.13em;
    text-transform: uppercase; color: rgba(255,255,255,0.26);
}
.sc-sidebar-sec {
    padding: 9px 10px 5px;
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.18); text-transform: uppercase; flex-shrink: 0;
}
.sc-dm-item {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; margin: 0 3px 2px;
    border-radius: 7px; cursor: default;
}
.sc-dm-item.sc-dm-active {
    background: rgba(0,229,255,0.1);
    border: 1px solid rgba(0,229,255,0.18);
}
.sc-dm-av {
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; flex-shrink: 0;
}
.sc-dm-info { flex: 1; min-width: 0; }
.sc-dm-name { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-dm-prev { font-size: 0.58rem; color: rgba(255,255,255,0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sc-dm-dot  { width: 7px; height: 7px; border-radius: 50%; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; flex-shrink: 0; }

/* Main chat panel */
.sc-main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #0e0e1a;
    overflow: hidden;
}

/* Top bar */
.sc-chat-topbar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    background: rgba(12,12,24,0.98);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.sc-back-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.5rem; color: rgba(255,255,255,0.38);
    line-height: 1; padding: 0; flex-shrink: 0;
    display: none;
    transition: color 0.2s;
}
.sc-ct-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
    border: 2px solid rgba(0,229,255,0.3);
}
.sc-ct-info { flex: 1; min-width: 0; }
.sc-ct-name { font-size: 0.88rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ct-status { font-size: 0.62rem; color: rgba(255,255,255,0.36); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.sc-status-online { color: #25d366 !important; }
.sc-ct-actions { display: flex; gap: 12px; font-size: 0.88rem; color: rgba(255,255,255,0.22); flex-shrink: 0; cursor: default; }

/* Chat messages area */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: radial-gradient(ellipse at 30% 0%, rgba(0,229,255,0.03) 0%, transparent 60%), #0e0e1a;
    scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 4px; }

/* Messages */
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.32s cubic-bezier(0.34,1.56,0.64,1);
    max-width: 72%;
}
.chat-message.show { opacity: 1; transform: translateY(0); }
.chat-message.them { align-self: flex-start; }
.chat-message.me   { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; flex-shrink: 0; align-self: flex-end;
}
.message-bubble {
    padding: 9px 13px; border-radius: 16px;
    word-break: break-word; position: relative; max-width: 100%;
    font-size: 0.86rem; color: rgba(255,255,255,0.9); line-height: 1.5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.chat-message.them .message-bubble {
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.07);
    border-bottom-left-radius: 4px;
}
.chat-message.me .message-bubble, .me-bubble {
    background: linear-gradient(135deg, #00a0cc, #0066aa);
    border-bottom-right-radius: 4px;
}
.message-meta {
    display: flex; align-items: center; gap: 4px;
    margin-top: 3px; justify-content: flex-end;
}
.message-time { font-size: 0.56rem; color: rgba(255,255,255,0.28); }
.message-read { font-size: 0.6rem; color: rgba(0,229,255,0.55); letter-spacing: -1px; }

/* Typing indicator */
.typing-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 16px 4px;
    background: #0e0e1a;
    flex-shrink: 0;
    min-height: 36px;
}
.typing-avatar {
    width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.08);
    font-size: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.typing-bubble {
    display: flex; gap: 4px; align-items: center;
    background: #1e1e2e; border-radius: 12px; padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.typing-bubble span {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.38); display: block;
    animation: scTypeDot 1.4s ease infinite;
}
.typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.4s; }
@keyframes scTypeDot {
    0%,80%,100% { transform: scale(0.75) translateY(0); opacity: 0.38; }
    40%          { transform: scale(1.25) translateY(-4px); opacity: 1; }
}

/* ─── Quick-reply choices (appear above input bar) ─── */
.chat-choices {
    background: rgba(8,8,18,0.99);
    border-top: 1px solid rgba(0,229,255,0.1);
    padding: 9px 14px 7px;
    flex-shrink: 0;
    animation: choicesSlideIn 0.22s ease-out;
    max-height: 200px;
    overflow-y: auto;
}
@keyframes choicesSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.choices-title {
    font-size: 0.58rem; letter-spacing: 0.12em; font-weight: 800;
    color: rgba(0,229,255,0.5); text-transform: uppercase; margin-bottom: 6px;
}

/* ─── Fake input bar (always visible at bottom) ─── */
.sc-input-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px 11px;
    background: rgba(10,10,20,0.98);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.sc-input-fake {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 22px;
    padding: 9px 16px;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.2);
    cursor: default;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
    user-select: none;
}
.sc-input-fake.sc-choosing {
    color: rgba(0,229,255,0.5);
    border-color: rgba(0,229,255,0.28);
    background: rgba(0,229,255,0.04);
    animation: inputPulse 1.8s ease infinite;
}
@keyframes inputPulse {
    0%,100% { box-shadow: none; }
    50%      { box-shadow: 0 0 0 2px rgba(0,229,255,0.12); }
}
.sc-send-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,229,255,0.07);
    border: 1px solid rgba(0,229,255,0.16);
    color: rgba(0,229,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: default; flex-shrink: 0;
    transition: all 0.3s ease;
}
.sc-send-btn.sc-choosing {
    background: rgba(0,229,255,0.18);
    border-color: rgba(0,229,255,0.45);
    color: rgba(0,229,255,0.85);
    box-shadow: 0 0 12px rgba(0,229,255,0.25);
}

/* Responsive: collapse sidebar on narrow */
@media (max-width: 600px) {
    .sc-wrap { max-width: 100%; }
    .sc-sidebar { display: none; }
    .sc-back-btn { display: block !important; }
    /* Ventana más alta para que quepan mensajes + opciones + barra */
    .sc-desktop-window { max-height: clamp(440px, 90vh, 700px); border-radius: 10px; }
    .chat-message { max-width: 88%; }
    .sc-input-bar { padding: 8px 10px 9px; }
    /* Opciones de respuesta compactas — evita corte en Samsung A15 y similares */
    .chat-choices { padding: 5px 10px 4px; max-height: none; }
    .sc-choices .choices-title { padding: 2px 6px 3px; font-size: 0.66rem; margin-bottom: 2px; }
    .sc-choice-btn.choice-bubble {
        padding: 8px 10px; font-size: 0.79rem; gap: 7px;
        touch-action: manipulation; min-height: 42px;
    }
    .sc-choice-letter { width: 22px; height: 22px; min-width: 22px; font-size: 0.62rem; }
}

.sc-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(0,229,255,0.2);
    border-radius: 12px;
    padding: 8px 14px;
    backdrop-filter: blur(6px);
}
.sc-hud-left { display: flex; flex-direction: column; gap: 3px; }
.sc-hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sc-badge {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.15em;
    background: linear-gradient(90deg,#00e5ff,#00ff88);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sc-round  { font-size: 0.7rem; color: rgba(255,255,255,0.55); }
.sc-num, .sc-total { color: #fff; font-weight: 700; }
.sc-hud-prog { flex:1; }
.sc-prog-track { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.sc-prog-fill { height:100%; background: linear-gradient(90deg,#00e5ff,#00ff88); border-radius: 3px; transition: width 0.4s ease; box-shadow: 0 0 8px rgba(0,229,255,0.4); }
.sc-score-label { font-size: 0.58rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.sc-score-val { font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 800; color: #ffd700; font-family: 'Courier New',monospace; text-shadow: 0 0 8px rgba(255,215,0,0.4); }
.sc-title-banner {
    text-align: center;
    font-size: clamp(0.82rem,1.8vw,1rem); font-weight: 700;
    color: rgba(255,255,255,0.8); letter-spacing: 0.06em;
    padding: 6px 16px; border-radius: 8px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08);
}
.sc-status-online { color: #25d366 !important; font-size: 0.7rem; }
/* Choice buttons - enhanced */
.sc-choices .choices-title {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em;
    color: #00e5ff; padding: 8px 12px 4px; text-transform: uppercase;
}
.sc-choice-btn.choice-bubble {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88);
    font-size: 0.85rem; text-align: left;
    transition: all 0.15s ease; user-select: none;
}
.sc-choice-btn.choice-bubble:hover { background: rgba(0,229,255,0.1); border-color: rgba(0,229,255,0.4); transform: translateX(4px); box-shadow: -3px 0 0 #00e5ff; }
.sc-choice-letter {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    font-size: 0.72rem; font-weight: 800;
    background: rgba(0,229,255,0.15); border: 1px solid rgba(0,229,255,0.3); color: #00e5ff;
}
.sc-choice-text { flex: 1; line-height: 1.4; }
.sc-choice-btn.choice-selected-safe   { background: rgba(0,255,136,0.18) !important; border-color: #00ff88 !important; color: #00ff88 !important; }
.sc-choice-btn.choice-selected-risk   { background: rgba(255,68,68,0.18) !important;  border-color: #ff4444 !important;  color: #ff6b6b !important; }
/* Mobile responsive */
@media (max-width: 640px) {
    .sc-hud { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 6px 10px; }
    .sc-hud-prog { display: none; }
}

/* ===== SpotDanger Mobile Responsive ===== */
@media (max-width: 640px) {
    /* Contenedor principal */
    .spot-danger-game { padding: 6px 4px; gap: 5px; border-radius: 10px; }

    /* Pantalla de intro */
    .level-intro-screen { min-height: 320px; padding: 18px 12px; }
    .intro-scene-icon   { font-size: 2.4rem; margin-bottom: 10px; }
    .intro-title        { font-size: 1.1rem; }
    .intro-desc         { font-size: 0.82rem; }
    .intro-badge        { font-size: 0.68rem; padding: 4px 10px; margin-bottom: 12px; }
    .intro-target       { font-size: 0.82rem; padding: 6px 12px; }

    /* HUD superior — 3 columnas comprimidas */
    .spy-hud {
        grid-template-columns: 1fr auto 1fr;
        gap: 4px;
        padding: 6px 8px;
        border-radius: 8px;
    }
    .spy-mission-name   { display: none; }
    .spy-mission-num    { font-size: 0.68rem; }
    .spy-timer-val      { font-size: 1.3rem; }
    .spy-timer-track    { width: 36px; }
    .spy-score-val      { font-size: 0.95rem; }
    .spy-score-label    { font-size: 0.55rem; }
    .life-icon          { font-size: 0.85rem; }
    .spy-lives          { gap: 2px; }
    .spy-right-hud      { gap: 6px; }

    /* Barra de amenazas */
    .threat-strip   { padding: 3px 8px; gap: 6px; }
    .threat-label   { font-size: 0.65rem; min-width: 40px; }
    .threat-tag     { font-size: 0.58rem; }
    .threat-track   { height: 5px; }
    .combo-strip    { font-size: 0.75rem; padding: 3px 8px; }

    /* Frame de la interfaz */
    .interface-frame { border-radius: 10px; }

    /* Nodos de peligro — táctiles grandes */
    .danger-node {
        font-size: 0.78rem;
        padding: 8px 30px 8px 10px;
        border-radius: 7px;
        min-height: 38px;
        gap: 6px;
    }
    .danger-node.profile-field { padding: 8px 30px 8px 10px; }
    .danger-node.chat-bubble   { max-width: 92%; font-size: 0.78rem; }
    .danger-node.url-item      { font-size: 0.68rem; }

    /* Mockup perfil */
    .mock-profile-cover   { height: 36px; }
    .mock-avatar-circle   { width: 36px; height: 36px; font-size: 1.1rem; margin-top: -18px; }
    .mock-profile-head    { padding: 0 10px 8px; margin-top: -20px; gap: 8px; }
    .mock-profile-name    { font-size: 0.8rem; }
    .mock-profile-sub     { font-size: 0.65rem; }
    .mock-section-label   { font-size: 0.65rem; padding: 6px 10px 4px; }
    .mock-field-list      { padding: 2px 8px 8px; gap: 3px; }

    /* Mockup email */
    .mock-email-topbar  { padding: 7px 10px; }
    .mock-email-logo    { font-size: 1rem; }
    .mock-email-brand   { font-size: 0.78rem; }
    .mock-email-card    { margin: 5px; }
    .mock-email-body    { padding: 6px; gap: 3px; }

    /* Mockup chat */
    .mock-chat-topbar      { padding: 7px 10px; }
    .mock-chat-avatar-sm   { width: 30px; height: 30px; font-size: 1rem; }
    .mock-chat-name        { font-size: 0.82rem; }
    .mock-chat-warn        { font-size: 0.6rem; padding: 2px 5px; }
    .mock-chat-messages    { padding: 6px; gap: 3px; }
    .mock-chat-footer      { padding: 5px 8px; }
    .mock-chat-input       { padding: 5px 10px; font-size: 0.72rem; }
    .mock-chat-send        { width: 28px; height: 28px; font-size: 0.75rem; }

    /* Mockup browser */
    .mock-browser-chrome { padding: 5px 8px; gap: 6px; }
    .bdot                { width: 8px; height: 8px; }
    .mock-browser-dots   { gap: 4px; }
    .url-safe            { font-size: 0.6rem; padding: 3px 6px; }
    .mock-browser-body   { padding: 6px; gap: 3px; }

    /* Mockup post */
    .mock-post-topbar   { padding: 8px 10px; gap: 8px; }
    .mock-post-avatar   { width: 32px; height: 32px; font-size: 1.1rem; }
    .mock-post-username { font-size: 0.82rem; }
    .mock-post-time     { font-size: 0.65rem; }
    .mock-post-body     { padding: 5px 8px; gap: 3px; }
    .mock-post-footer   { padding: 7px 10px; gap: 10px; font-size: 0.72rem; }

    /* Controles */
    .spy-controls { gap: 5px; }
    .spy-btn      { padding: 8px 10px; font-size: 0.72rem; border-radius: 8px; }

    /* Overlays y resultados */
    .overlay-card      { padding: 16px 12px; }
    .overlay-title     { font-size: 1.1rem; }
    .overlay-icon      { font-size: 2.2rem; }
    .lc-row            { font-size: 0.78rem; padding: 5px 8px; }
    .spy-results       { padding: 12px 8px; }
    .results-rank-badge{ font-size: 0.85rem; padding: 6px 16px; }
    .results-title     { font-size: 1.2rem; }
    .results-stats-grid{ gap: 6px; }
    .rs-stat           { padding: 7px 10px; min-width: 65px; }
    .rs-val            { font-size: 1rem; }
    .rs-label          { font-size: 0.6rem; }
    .safety-tips h3    { font-size: 0.9rem; }
    .safety-tips ul    { font-size: 0.78rem; padding-left: 18px; }

    /* Floaters de puntuación */
    .score-floater { font-size: 0.85rem; }
}

/* ── Extra pequeño: Galaxy A15 y similares (≤ 390px) ── */
@media (max-width: 390px) {
    .spot-danger-game { padding: 4px 2px; gap: 4px; }

    .spy-hud {
        grid-template-columns: auto 1fr auto;
        gap: 3px;
        padding: 5px 6px;
    }
    .spy-mission-info   { gap: 4px; }
    .spy-timer-val      { font-size: 1.15rem; }
    .spy-score-val      { font-size: 0.88rem; }
    .life-icon          { font-size: 0.78rem; }

    .danger-node {
        font-size: 0.72rem;
        padding: 7px 26px 7px 8px;
        min-height: 34px;
    }
    .spy-btn { padding: 7px 8px; font-size: 0.68rem; }

    .level-intro-screen { min-height: 280px; padding: 14px 8px; }
    .intro-title        { font-size: 0.98rem; }
    .intro-desc         { font-size: 0.75rem; }
}

@media (max-width: 380px) {
    .spy-hud { grid-template-columns: 1fr; gap: 8px; }
    .spy-hud > * { justify-content: center; align-items: center; }
    .spy-right-hud { justify-content: center; }
    .cq-hud { gap: 8px; }
    .mm-board.memory-board { gap: 4px; }
    .mock-post-topbar, .mock-chat-topbar, .mock-email-topbar { padding: 8px 10px; }
}


/* ===== Clasificación ===== */
.leaderboard-table {
    width: 100%;
    background: var(--bg-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.leaderboard-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.leaderboard-table th {
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    padding: 15px;
    text-align: left;
    color: var(--primary-color);
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.leaderboard-table td {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-medium) 100%);
    padding: 15px;
    border: 2px solid var(--bg-dark);
    transition: all 0.2s ease;
}

.leaderboard-table tr {
    transition: all 0.2s ease;
}

.leaderboard-table tr:nth-child(even) {
    background: transparent;
}

.leaderboard-table tr:hover {
    transform: translateX(8px);
}

.leaderboard-table tbody tr:hover td {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), 0 6px 15px rgba(33, 150, 243, 0.3);
    background: linear-gradient(180deg, #1e3a5f 0%, var(--bg-light) 100%);
}

.rank-medal {
    font-size: 1.5em;
    margin-right: 10px;
    display: inline-block;
    animation: medalSpin 2s ease-in-out infinite;
}

@keyframes medalSpin {
    0%, 90%, 100% { transform: rotateY(0deg); }
    45% { transform: rotateY(180deg); }
}

/* ===== Torneos ===== */
.tournament-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-medium);
    border: 2px solid var(--bg-dark);
    border-radius: 8px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.tab-btn:hover {
    border-color: var(--primary-color);
}

.tournament-card {
    background: var(--bg-light);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    border-left: 4px solid var(--secondary-color);
}

.tournament-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tournament-status {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: bold;
}

.status-active {
    background: var(--success-color);
}

.status-upcoming {
    background: var(--warning-color);
}

.status-finished {
    background: var(--text-gray);
}

.tournament-participants {
    margin-top: 15px;
}

.participant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: var(--bg-medium);
    border-radius: 6px;
}

/* ===== Instrucciones ===== */
.instructions-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.instruction-card {
    background: var(--bg-light);
    padding: 25px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.instruction-card.warning {
    border-left-color: var(--danger-color);
}

.instruction-card h3 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.instruction-card ul {
    list-style-position: inside;
    color: var(--text-gray);
}

.instruction-card li {
    margin-bottom: 8px;
}

/* ===== Modal ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: clamp(12px, 3vw, 24px);
    background: rgba(3, 8, 20, 0.82);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.modal.active {
    display: flex;
    animation: fadeIn 0.3s ease-in;
}

.modal-content {
    width: min(100%, 620px);
    margin: auto;
    padding: clamp(22px, 4vw, 38px);
    border-radius: 24px;
    max-height: min(88dvh, 900px);
    overflow-y: auto;
    position: relative;
    background: linear-gradient(180deg, rgba(18, 30, 56, 0.98) 0%, rgba(9, 15, 29, 0.98) 100%);
    border: 3px solid rgba(102, 126, 234, 0.42);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: modalSlideIn 0.4s ease;
    text-align: center;
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.close-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    user-select: none;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(90deg) scale(1.06);
}

.close-modal:active {
    transform: rotate(90deg) scale(0.96);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-result-card {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 40%),
        linear-gradient(180deg, rgba(27, 46, 84, 0.98) 0%, rgba(10, 17, 33, 0.98) 100%);
}

.modal-result-icon {
    font-size: clamp(2.8rem, 9vw, 4.8rem);
    line-height: 1;
    margin-bottom: clamp(10px, 2.4vw, 18px);
}

.modal-result .modal-content {
    width: min(100%, 640px);
}

.modal-result[data-variant="warning"] .modal-content {
    border-color: rgba(255, 193, 7, 0.45);
}

.modal-result[data-variant="danger"] .modal-content {
    border-color: rgba(255, 107, 107, 0.45);
}

.modal-result[data-variant="success"] .modal-content {
    border-color: rgba(78, 205, 196, 0.45);
}

.modal-content h2 {
    margin-bottom: 14px;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    background: linear-gradient(135deg, #ffd93d, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-result[data-variant="success"] .modal-content h2,
.modal-exit .modal-content h2 {
    background: linear-gradient(135deg, #4ecdc4, #ffd93d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.exit-tab-hint {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #ffb74d;
}

.modal-result-message,
.modal-message {
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    color: #d6deef;
    line-height: 1.65;
}

.modal-result-message {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(18px, 3vw, 28px);
}

.modal-result-message p,
.modal-message {
    margin: 0;
}

.modal-result-message strong {
    color: #ffffff;
}

.modal-result-message .points-earned,
.modal-result-message .correct-answer-label,
.modal-result-message .explanation {
    margin-inline: auto;
    width: min(100%, 100%);
}

/* Modal de confirmación */
.modal-confirm {
    text-align: center;
    width: min(100%, 560px);
}

.modal-confirm h2 {
    margin-bottom: 20px;
}

.modal-message {
    margin-bottom: 30px;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-buttons .btn {
    min-width: 160px;
}

.modal-settings .modal-content {
    width: min(100%, 560px);
    text-align: left;
}

.modal-settings .modal-content h2 {
    text-align: center;
    margin-bottom: 24px;
}

/* Settings modal small helpers */
.settings-row {
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.modal-settings .modal-content select,
.modal-settings .modal-content input[type="checkbox"] {
    font-size: 1em;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #ffffff;
    color: #000000;
}

.modal-settings .modal-content label {
    font-size: 1em;
    color: var(--text-gray);
}

@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: flex-start;
    }

    .modal.active {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .modal-content {
        width: 100%;
        max-height: none;
        border-radius: 20px;
    }

    .modal-buttons .btn {
        min-width: 0;
        width: 100%;
    }

    .settings-row {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .modal {
        padding: 6px;
    }

    .modal-content {
        padding: 18px 14px;
        border-radius: 18px;
    }

    .close-modal {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
    }

    .modal-result-message {
        gap: 10px;
    }
}

/* ===== Simulador de Chat — Desktop App Style ===== */

.cs-wrap {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── HUD top ── */
.cs-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(0,229,255,0.15);
    border-radius: 10px;
    padding: 8px 18px;
    backdrop-filter: blur(6px);
}
.cs-hud-item  { display: flex; flex-direction: column; gap: 2px; }
.cs-hud-right { align-items: flex-end; }
.cs-hud-center{ text-align: center; }
.cs-hud-label { font-size: 0.54rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.34); text-transform: uppercase; }
.cs-hud-val   { font-size: 1rem; font-weight: 800; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.45); font-family: 'Courier New', monospace; }
.cs-hud-title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; background: linear-gradient(90deg,#ff4444,#ff8800); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Streak ── */
.cs-streak-bar {
    text-align: center; font-size: 0.85rem; font-weight: 800;
    color: #ff6600; text-shadow: 0 0 10px #ff6600;
    background: rgba(255,102,0,0.1); border: 1px solid rgba(255,102,0,0.3);
    border-radius: 8px; padding: 5px;
    animation: csStreakIn 0.4s cubic-bezier(0.68,-0.55,0.27,1.55) forwards;
}
@keyframes csStreakIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ═══════════════════════════════════════════
   DESKTOP WINDOW FRAME
═══════════════════════════════════════════ */
.cs-phone {
    background: #0e0e1a;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 28px 80px rgba(0,0,0,0.7),
        0 0 60px rgba(0,229,255,0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: clamp(420px, 58vh, 620px);
    position: relative;
}

/* ── Title bar (macOS / Windows style) ── */
.cs-phone-notch {
    width: 100%;
    height: 34px;
    background: linear-gradient(90deg, #141424, #1a1a2e);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 7px;
    flex-shrink: 0;
    user-select: none;
}
/* Traffic lights */
.cs-notch-cam {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff5f57;
    box-shadow: 0 0 6px rgba(255,95,87,0.5);
    position: relative;
}
.cs-notch-cam::before {
    content: '';
    position: absolute; left: 14px; top: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: #febc2e;
    box-shadow: 0 0 6px rgba(254,188,46,0.5);
}
.cs-notch-cam::after {
    content: '';
    position: absolute; left: 28px; top: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 6px rgba(40,200,64,0.5);
}
.cs-titlebar-spacer { flex: 1; }
.cs-titlebar-app {
    font-size: 0.64rem; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3); font-weight: 600;
    text-transform: uppercase;
}
/* Three dots menu on right */
.cs-titlebar-dots {
    display: flex; gap: 5px; opacity: 0.25;
}
.cs-titlebar-dots span {
    width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.6); display: block;
}

/* ── App sidebar + main content ── */
.cs-desktop-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Sidebar */
.cs-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #0a0a16;
    border-right: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cs-sidebar-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.cs-sidebar-title {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
    color: rgba(255,255,255,0.28); margin-bottom: 8px;
}
.cs-user-card {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px 9px;
    border: 1px solid rgba(157,0,255,0.18);
}
.cs-user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800; color: #fff;
    flex-shrink: 0; position: relative; z-index: 0;
}
.cs-user-avatar::before {
    content: '';
    position: absolute; inset: -2px; border-radius: 50%;
    background: conic-gradient(#9d00ff, #00e5ff, #ff69b4, #9d00ff);
    z-index: -1;
    animation: csAvatarSpin 4s linear infinite;
}
@keyframes csAvatarSpin { to { transform: rotate(360deg); } }
.cs-user-name  { font-size: 0.73rem; font-weight: 700; color: rgba(255,255,255,0.82); line-height: 1.2; }
.cs-user-sub   { font-size: 0.58rem; color: rgba(255,255,255,0.3); }
.cs-sidebar-section {
    padding: 10px 10px 6px;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.2); text-transform: uppercase;
    flex-shrink: 0;
}
.cs-dm-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; margin: 0 4px 2px;
    border-radius: 7px; cursor: default;
    transition: background 0.2s;
}
.cs-dm-item.cs-dm-active {
    background: rgba(157,0,255,0.15);
    border: 1px solid rgba(157,0,255,0.2);
}
.cs-dm-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.cs-dm-info { flex: 1; min-width: 0; }
.cs-dm-name { font-size: 0.73rem; font-weight: 600; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-dm-preview { font-size: 0.6rem; color: rgba(255,255,255,0.28); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cs-dm-dot { width: 7px; height: 7px; border-radius: 50%; background: #9d00ff; box-shadow: 0 0 6px #9d00ff; flex-shrink: 0; }

/* ── Main chat panel ── */
.cs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── App header ── */
.cs-phone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(12,12,24,0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.cs-back-btn {
    background: none; border: none; cursor: pointer;
    font-size: 1.5rem; color: rgba(255,255,255,0.4);
    line-height: 1; padding: 0;
    transition: color 0.2s; flex-shrink: 0;
    display: none; /* hidden on desktop */
}
.cs-header-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 800; color: #fff;
    flex-shrink: 0; position: relative; z-index: 0;
}
.cs-header-avatar::before {
    content: '';
    position: absolute; inset: -2px; border-radius: 50%;
    background: conic-gradient(#ff4444 0%, #ff8800 50%, #ff4444 100%);
    z-index: -1;
    animation: csAvatarSpin 3s linear infinite;
}
.cs-header-info { flex: 1; min-width: 0; }
.cs-header-name {
    font-size: 0.92rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-header-status {
    font-size: 0.64rem; color: rgba(255,255,255,0.38);
    display: flex; align-items: center; gap: 4px; margin-top: 1px;
}
.cs-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #00ff88; box-shadow: 0 0 7px #00ff88;
    display: inline-block; flex-shrink: 0;
    animation: csStatusPulse 1.8s ease infinite;
}
@keyframes csStatusPulse {
    0%,100% { box-shadow: 0 0 4px #00ff88; transform: scale(1); }
    50%      { box-shadow: 0 0 14px #00ff88; transform: scale(1.35); }
}
.cs-danger-badge {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em;
    border: 1px solid; border-radius: 6px; padding: 4px 10px;
    white-space: nowrap; flex-shrink: 0;
    animation: csBadgePulse 1.4s ease infinite alternate;
}
@keyframes csBadgePulse { from { opacity: 0.6; } to { opacity: 1; box-shadow: 0 0 16px currentColor; } }
/* Header icons */
.cs-header-icons {
    display: flex; gap: 14px; align-items: center;
}
.cs-hico {
    font-size: 0.95rem; color: rgba(255,255,255,0.25);
    cursor: default; transition: color 0.2s;
}
.cs-hico:hover { color: rgba(255,255,255,0.55); }

/* Glitch */
@keyframes csGlitch {
    0%,91%,100% { text-shadow: none; transform: none; }
    92% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; transform: skewX(-4deg); }
    95% { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; transform: skewX(2deg); }
    97% { text-shadow: none; transform: none; }
}
.cs-glitch { animation: csGlitch 5s steps(1) infinite; }

/* ── Chat body ── */
.cs-phone-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: radial-gradient(ellipse at 30% 0%, rgba(157,0,255,0.04) 0%, transparent 55%), #0e0e1a;
    scroll-behavior: smooth;
    position: relative;
}
.cs-phone-body::-webkit-scrollbar { width: 4px; }
.cs-phone-body::-webkit-scrollbar-track { background: transparent; }
.cs-phone-body::-webkit-scrollbar-thumb { background: rgba(157,0,255,0.25); border-radius: 4px; }
/* Subtle grid background */
.cs-phone-body::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(0,229,255,0.015) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,229,255,0.015) 1px, transparent 1px);
    background-size: 40px 40px;
}
.cs-date-sep {
    text-align: center; font-size: 0.6rem; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.18); padding: 0 0 12px;
}

/* ── Messages ── */
.cs-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 70%;
}
.cs-msg-in {
    align-self: flex-start;
    animation: csMsgL 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.cs-msg-out {
    align-self: flex-end;
    flex-direction: row-reverse;
    animation: csMsgR 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes csMsgL { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } }
@keyframes csMsgR { from { opacity:0; transform:translateX(18px);  } to { opacity:1; transform:translateX(0); } }
.cs-msg-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: #fff;
    flex-shrink: 0; align-self: flex-end;
}
.cs-bubble {
    padding: 10px 15px; border-radius: 16px;
    word-break: break-word; position: relative;
    max-width: 100%;
}
.cs-bubble-in {
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.07);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.cs-bubble-out {
    background: linear-gradient(135deg, #6600cc, #9d00ff);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 16px rgba(157,0,255,0.35);
}
.cs-msg-text { font-size: 0.9rem; color: rgba(255,255,255,0.9); line-height: 1.48; }
.cs-msg-time { font-size: 0.6rem; color: rgba(255,255,255,0.26); margin-top: 5px; text-align: right; }

/* ── Footer ── */
.cs-phone-footer {
    background: rgba(10,10,20,0.98);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px 16px 14px;
    flex-shrink: 0;
}

/* Typing indicator */
.cs-typing-row {
    display: flex; align-items: center; gap: 9px;
}
.cs-typing-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 0.64rem; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cs-typing-bubble {
    display: flex; align-items: center; gap: 4px;
    background: #1e1e2e; border-radius: 12px; padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.cs-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.38);
    animation: csDot 1.4s ease infinite;
}
.cs-dot:nth-child(2) { animation-delay: 0.2s; }
.cs-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes csDot {
    0%,80%,100% { transform: scale(0.75) translateY(0); opacity: 0.38; }
    40%          { transform: scale(1.25) translateY(-4px); opacity: 1; }
}
.cs-typing-label { font-size: 0.64rem; color: rgba(255,255,255,0.25); font-style: italic; }

/* ── Choice prompt ── */
.cs-choices-header {
    font-size: 0.65rem; letter-spacing: 0.11em; font-weight: 700;
    color: rgba(255,255,255,0.28); text-transform: uppercase; margin-bottom: 8px;
}
.cs-choices { display: flex; flex-direction: column; gap: 7px; }
.cs-choice-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 11px 16px; text-align: left; cursor: pointer;
    color: rgba(255,255,255,0.82); font-size: 0.86rem;
    font-family: inherit; width: 100%;
    transition: all 0.2s;
    animation: csChoiceIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: var(--delay, 0s);
    position: relative; overflow: hidden;
}
.cs-choice-btn::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: rgba(157,0,255,0.5); border-radius: 3px 0 0 3px;
    transform: scaleY(0); transition: transform 0.2s;
}
@keyframes csChoiceIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.cs-choice-btn:hover:not(:disabled) {
    background: rgba(157,0,255,0.1);
    border-color: rgba(157,0,255,0.4);
    color: #fff;
    box-shadow: 0 0 18px rgba(157,0,255,0.15);
}
.cs-choice-btn:hover:not(:disabled)::before { transform: scaleY(1); }
.cs-choice-btn:active:not(:disabled) { transform: scale(0.98); }
.cs-chosen-safe {
    background: rgba(0,255,136,0.1) !important; border-color: #00ff88 !important;
    color: #00ff88 !important; box-shadow: 0 0 20px rgba(0,255,136,0.25) !important;
}
.cs-chosen-danger {
    background: rgba(255,68,68,0.1) !important; border-color: #ff4444 !important;
    color: #ff6666 !important; box-shadow: 0 0 18px rgba(255,68,68,0.22) !important;
}

/* ── Feedback ── */
.cs-feedback {
    padding: 15px; border-radius: 12px;
    display: flex; flex-direction: column; gap: 9px;
    animation: csFbIn 0.4s ease forwards;
}
@keyframes csFbIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.cs-fb-safe   { background: linear-gradient(135deg,rgba(0,255,136,0.07),rgba(0,229,255,0.04)); border: 1px solid rgba(0,255,136,0.22); }
.cs-fb-danger { background: linear-gradient(135deg,rgba(255,68,68,0.08),rgba(255,136,0,0.04));  border: 1px solid rgba(255,68,68,0.22); }
.cs-fb-icon   { font-size: 1.8rem; text-align: center; line-height: 1; }
.cs-fb-title  { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-align: center; }
.cs-fb-safe  .cs-fb-title { color: #00ff88; text-shadow: 0 0 12px rgba(0,255,136,0.5); }
.cs-fb-danger .cs-fb-title { color: #ff6666; text-shadow: 0 0 10px rgba(255,68,68,0.5); }
.cs-fb-text   { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.48; }
.cs-fb-points { font-size: 0.85rem; font-weight: 800; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.5); text-align: center; }
.cs-fb-actions{ display: flex; gap: 8px; margin-top: 4px; }
.cs-fb-btn {
    flex: 1; padding: 10px 6px; border: none; border-radius: 9px;
    cursor: pointer; font-size: 0.8rem; font-weight: 700;
    font-family: inherit; letter-spacing: 0.04em; transition: all 0.2s;
}
.cs-fb-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }
.cs-fb-primary  { background: linear-gradient(135deg,#9d00ff,#6600cc); color: #fff; box-shadow: 0 4px 16px rgba(157,0,255,0.35); }
.cs-fb-secondary{ background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); }

/* ── Alert bar ── */
.cs-alert-bar {
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 8px 14px;
}
.cs-alert-label { font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.3); white-space: nowrap; }
.cs-alert-track { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.cs-alert-fill  { height: 100%; border-radius: 3px; transition: width 0.85s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 0 8px currentColor; }
.cs-alert-val   { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; white-space: nowrap; }

/* ── Responsive — collapse sidebar on small screens ── */
@media (max-width: 620px) {
    .cs-sidebar { display: none; }
    .cs-back-btn { display: block; }
    .cs-wrap { max-width: 100%; gap: 6px; }
    .cs-hud { padding: 6px 10px; }
    .cs-hud-title { font-size: 0.68rem; letter-spacing: 0.08em; }
    .cs-hud-val { font-size: 0.9rem; }
    /* Reduced height avoids overflow-clip on narrow phones (A15: 800px viewport, 55vh=440px fits) */
    .cs-phone { height: clamp(340px, 55vh, 500px); border-radius: 10px; }
    .cs-phone-header { padding: 8px 12px; gap: 7px; }
    .cs-header-avatar { width: 30px; height: 30px; font-size: 0.78rem; }
    .cs-header-name { font-size: 0.82rem; }
    .cs-danger-badge { font-size: 0.56rem; padding: 3px 7px; }
    .cs-header-icons { gap: 10px; }
    .cs-phone-body {
        padding: 12px 14px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .cs-phone-footer { padding: 10px 12px 12px; }
    .cs-choices { gap: 5px; }
    .cs-choices-header { font-size: 0.6rem; margin-bottom: 5px; }
    .cs-msg { max-width: 85%; }
    .cs-msg-text { font-size: 0.85rem; }
    .cs-choice-btn {
        font-size: 0.82rem;
        padding: 9px 13px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .cs-alert-bar { padding: 6px 10px; }
    .cs-alert-label { font-size: 0.56rem; }
}
/* Extra-narrow phones (360px and below) — hide decorative header elements */
@media (max-width: 400px) {
    .cs-danger-badge { display: none; }
    .cs-header-icons { display: none; }
    .cs-phone-body { padding: 10px 12px; }
    .cs-choice-btn { font-size: 0.78rem; padding: 8px 10px; }
}
@media (min-width: 621px) {
    .cs-phone { height: clamp(440px, 60vh, 640px); }
}

/* ===== FIN Simulador de Chat ===== */


/* ===== Encuentra el Peligro — Cyber Detective ===== */

/* ---- Level Intro Screen ---- */
.level-intro-screen {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px);
    position: relative;
    background: #070d1a;
    border-radius: 18px;
    overflow: hidden;
}

.intro-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #00e5ff;
    border-style: solid;
    border-width: 0;
}
.intro-corner.tl { top: 12px; left: 12px; border-top-width: 3px; border-left-width: 3px; }
.intro-corner.tr { top: 12px; right: 12px; border-top-width: 3px; border-right-width: 3px; }
.intro-corner.bl { bottom: 12px; left: 12px; border-bottom-width: 3px; border-left-width: 3px; }
.intro-corner.br { bottom: 12px; right: 12px; border-bottom-width: 3px; border-right-width: 3px; }

.intro-badge {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: #00e5ff;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(0,229,255,0.1);
    border: 1px solid rgba(0,229,255,0.3);
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,229,255,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(0,229,255,0); }
}

.intro-scene-icon {
    font-size: clamp(3rem, 8vw, 5rem);
    margin-bottom: 16px;
    animation: iconBounce 1s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 18px rgba(0,229,255,0.6));
}

@keyframes iconBounce {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-8px) scale(1.05); }
}

.intro-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    text-shadow: 0 0 20px rgba(0,229,255,0.4);
}

.intro-desc {
    color: rgba(255,255,255,0.72);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    margin: 0 0 22px;
    max-width: 480px;
    line-height: 1.5;
}

.intro-target {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    background: rgba(255,60,60,0.15);
    border: 1px solid rgba(255,80,80,0.4);
    padding: 8px 18px;
    border-radius: 10px;
    margin-bottom: 24px;
}

.intro-target strong { color: #ff6b6b; font-size: 1.2em; }
.intro-target-icon { font-size: 1.2em; }

.intro-loading {
    width: min(100%, 340px);
}

.intro-loading-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.intro-loading-fill {
    height: 100%;
    background: linear-gradient(90deg, #00e5ff, #00ff88);
    border-radius: 2px;
    animation: loadFill 2s ease-in-out forwards;
}

@keyframes loadFill {
    0% { width: 0; }
    100% { width: 100%; }
}

.intro-loading-text {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: #00e5ff;
    text-transform: uppercase;
    animation: textBlink 0.8s steps(1) infinite;
}

@keyframes textBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---- Main Game Container ---- */
.spot-danger-game {
    max-width: 1000px;
    margin: 0 auto;
    background: #070d1a;
    border-radius: 16px;
    padding: clamp(12px, 2vw, 20px);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- HUD ---- */
.spy-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0,229,255,0.2);
    border-radius: 12px;
    padding: 10px 14px;
    backdrop-filter: blur(6px);
}
.spy-mission-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.spy-mission-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: linear-gradient(90deg, #00e5ff, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    flex-shrink: 0;
}
.spy-mission-name {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spy-timer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.spy-timer-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.1em;
}
.spy-timer-val {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    font-family: 'Courier New', monospace;
    color: #00e5ff;
    line-height: 1;
    text-shadow: 0 0 12px rgba(0,229,255,0.7);
    transition: color 0.3s ease;
    min-width: 2ch;
    text-align: center;
}
.spy-timer-val.timer-urgent {
    color: #ff4444;
    text-shadow: 0 0 12px rgba(255,68,68,0.8);
    animation: timerUrgent 0.5s steps(2) infinite;
}
@keyframes timerUrgent {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 1; }
}
.spy-timer-track {
    width: clamp(40px, 6vw, 70px);
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.spy-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #00e5ff, #00ff88);
    border-radius: 2px;
    transition: width 1s linear, background 0.3s ease;
}
.spy-timer-fill.bar-urgent {
    background: linear-gradient(90deg, #ff4444, #ff8800);
}
.spy-right-hud {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.spy-lives {
    display: flex;
    gap: 4px;
}
.life-icon {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 4px rgba(0,255,136,0.5));
}
.life-icon.lost {
    opacity: 0.2;
    filter: grayscale(1);
    transform: scale(0.8);
}
.spy-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.spy-score-label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.spy-score-val {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
    transition: transform 0.2s ease;
    font-family: 'Courier New', monospace;
}
.spy-score-val.score-bump {
    animation: scoreBump 0.3s ease;
}
@keyframes scoreBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ---- Threat Bar ---- */
.threat-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,80,80,0.2);
    border-radius: 8px;
    padding: 6px 12px;
}
.threat-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    min-width: 55px;
}
.threat-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.threat-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ff4444);
    border-radius: 3px;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px rgba(255,68,68,0.6);
}
.threat-tag {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: #ff6b6b;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Combo Strip ---- */
.combo-strip {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 5px 14px;
    border-radius: 8px;
    transition: opacity 0.3s ease;
    background: rgba(255,165,0,0.15);
    border: 1px solid rgba(255,165,0,0.3);
    color: #ffa500;
}
.combo-strip.combo-lv2 { background: rgba(255,165,0,0.15); border-color: rgba(255,165,0,0.3); color: #ffa500; }
.combo-strip.combo-lv3 { background: rgba(255,80,0,0.2);   border-color: rgba(255,80,0,0.4);   color: #ff5500; box-shadow: 0 0 12px rgba(255,80,0,0.3); }
.combo-strip.combo-lv4 { background: rgba(220,0,255,0.2);  border-color: rgba(220,0,255,0.4);  color: #dd00ff; box-shadow: 0 0 16px rgba(220,0,255,0.4); }
.combo-strip.combo-pop { animation: comboPop 0.3s ease; }
@keyframes comboPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ---- Interface Frame ---- */
.interface-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,229,255,0.15);
    background: transparent;
}
.scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #00e5ff 30%, #00ff88 70%, transparent 100%);
    box-shadow: 0 0 16px #00e5ff, 0 0 30px rgba(0,229,255,0.5);
    z-index: 100;
    pointer-events: none;
    top: 0; opacity: 0;
    transform: translateY(-3px);
}
.scan-line.active {
    animation: scanDown 1.5s ease-in-out forwards;
}
@keyframes scanDown {
    0%   { top: 0%;   opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ---- PROFILE Mockup ---- */
.mock-profile { background: #1e2c3d; border-radius: 16px; overflow: hidden; }
.mock-profile-cover { height: 64px; background: linear-gradient(135deg, #1877f2 0%, #4267b2 100%); }
.mock-profile-head {
    display: flex; align-items: flex-end; gap: 12px;
    padding: 0 16px 12px; margin-top: -24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mock-avatar-circle {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #2d4a6e, #3a5a82);
    border: 3px solid #1e2c3d; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; flex-shrink: 0;
}
.mock-profile-meta { padding-top: 8px; }
.mock-profile-name { font-size: 0.95rem; font-weight: 700; color: #fff; }
.mock-profile-sub {
    font-size: 0.75rem; color: rgba(255,255,255,0.5);
    display: flex; align-items: center; gap: 6px;
}
.pub-badge {
    background: rgba(255,165,0,0.2); border: 1px solid rgba(255,165,0,0.4);
    color: #ffa500; padding: 1px 6px; border-radius: 4px;
    font-size: 0.65rem; font-weight: 700;
}
.mock-section-label {
    padding: 10px 16px 6px;
    font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 700;
}
.mock-field-list { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 4px; }

/* ---- EMAIL Mockup ---- */
.mock-email { background: #1a1a2a; border-radius: 16px; overflow: hidden; }
.mock-email-topbar {
    background: #2d1c1c; padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock-email-logo { font-size: 1.2rem; }
.mock-email-brand { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.8); flex: 1; }
.mock-email-new {
    font-size: 0.65rem; letter-spacing: 0.08em;
    background: #e74c3c; color: #fff;
    padding: 2px 8px; border-radius: 10px; font-weight: 700;
}
.mock-email-card {
    margin: 10px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden;
}
.mock-email-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }

/* ---- CHAT Mockup ---- */
.mock-chat { background: #0b1418; border-radius: 16px; overflow: hidden; }
.mock-chat-topbar {
    background: #1f2c34; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock-chat-back { font-size: 1.4rem; color: rgba(255,255,255,0.5); line-height: 1; }
.mock-chat-avatar-sm {
    width: 36px; height: 36px; background: #2d3d4a; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.mock-chat-info { flex: 1; min-width: 0; }
.mock-chat-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.mock-chat-status { font-size: 0.7rem; color: #25d366; }
.mock-chat-warn {
    font-size: 0.65rem; background: rgba(255,165,0,0.2);
    border: 1px solid rgba(255,165,0,0.4); color: #ffa500;
    padding: 2px 7px; border-radius: 6px; white-space: nowrap; font-weight: 600;
}
.mock-chat-messages {
    padding: 12px; display: flex; flex-direction: column; gap: 6px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 20px), #0b1418;
}
.chat-row { display: flex; justify-content: flex-start; }
.mock-chat-footer {
    background: #1f2c34; padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mock-chat-input {
    flex: 1; background: rgba(255,255,255,0.07); border-radius: 20px;
    padding: 8px 14px; font-size: 0.8rem; color: rgba(255,255,255,0.3);
}
.mock-chat-send {
    width: 32px; height: 32px; background: #25d366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #fff; flex-shrink: 0;
}

/* ---- BROWSER Mockup ---- */
.mock-browser { background: #202124; border-radius: 16px; overflow: hidden; }
.mock-browser-chrome {
    background: #35363a; padding: 8px 12px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock-browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.bdot { display: block; width: 11px; height: 11px; border-radius: 50%; }
.bdot-r { background: #ff5f57; } .bdot-y { background: #ffbd2e; } .bdot-g { background: #28c940; }
.mock-browser-url-wrap { flex: 1; min-width: 0; background: #202124; border-radius: 16px; padding: 2px 4px; }
.url-safe { font-size: 0.75rem; font-family: monospace; color: rgba(255,255,255,0.5); padding: 4px 10px; }
.mock-browser-menu { color: rgba(255,255,255,0.4); font-size: 1rem; flex-shrink: 0; }
.mock-browser-body { padding: 10px; display: flex; flex-direction: column; gap: 4px; }

/* ---- POST Mockup ---- */
.mock-post { background: #18191a; border-radius: 16px; overflow: hidden; }
.mock-post-topbar {
    padding: 12px 14px; display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock-post-avatar {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.mock-post-user { flex: 1; min-width: 0; }
.mock-post-username { font-size: 0.9rem; font-weight: 700; color: #fff; }
.mock-post-time { font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.mock-post-menu { color: rgba(255,255,255,0.4); font-size: 1.1rem; }
.mock-post-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.mock-post-footer {
    padding: 10px 14px; display: flex; gap: 16px;
    font-size: 0.82rem; color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---- Danger Nodes ---- */
.danger-node {
    position: relative;
    padding: 9px 36px 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.88);
    font-size: clamp(0.8rem, 1.4vw, 0.92rem);
    display: flex; align-items: center; gap: 8px;
    user-select: none;
    transition: all 0.15s ease;
    will-change: transform;
}
.danger-node:hover:not(.revealed):not(.missed):not(.wrong-tap) {
    background: rgba(255,255,255,0.1);
    border-color: rgba(0,229,255,0.4);
    transform: translateX(4px);
    box-shadow: -3px 0 0 #00e5ff;
}
.danger-node.revealed {
    background: rgba(231,76,60,0.18); border-color: rgba(231,76,60,0.7); color: #ff9090;
    pointer-events: none; animation: revealDanger 0.4s ease;
}
@keyframes revealDanger {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(231,76,60,0); }
    40%  { transform: scale(1.04); box-shadow: 0 0 20px 4px rgba(231,76,60,0.4); }
    100% { transform: scale(1); box-shadow: 0 0 8px 0 rgba(231,76,60,0.2); }
}
.danger-node.wrong-tap {
    animation: wrongTap 0.4s ease;
    border-color: rgba(255,68,68,0.7); background: rgba(255,68,68,0.18);
}
@keyframes wrongTap {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.danger-node.missed {
    background: rgba(255,140,0,0.15); border-color: rgba(255,140,0,0.5); color: #ffb347;
    pointer-events: none; animation: missedReveal 0.5s ease;
}
@keyframes missedReveal { 0% { opacity: 0; } 100% { opacity: 1; } }
.danger-node.hint-glow { animation: hintGlowAnim 0.55s ease-in-out 4; border-color: #ffd700 !important; }
@keyframes hintGlowAnim {
    0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.4); }
    50%       { box-shadow: 0 0 22px rgba(255,215,0,0.9); background: rgba(255,215,0,0.12); border-color: #ffd700; transform: scale(1.03); }
}
.danger-node.chat-bubble {
    max-width: 82%; border-radius: 12px 12px 12px 4px;
    background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.08);
    padding: 8px 36px 8px 12px;
}
.danger-node.profile-field {
    border-radius: 6px; border-color: rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.04); padding: 10px 36px 10px 12px;
}
.danger-node.url-item {
    font-family: monospace; font-size: clamp(0.7rem, 1.3vw, 0.82rem);
    border-radius: 14px; padding: 6px 32px 6px 10px;
    background: rgba(0,0,0,0.3); border-color: transparent;
}
.node-badge {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 1em; opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.danger-node.revealed .node-badge,
.danger-node.missed .node-badge { opacity: 1; }

/* ---- Controls ---- */
.spy-controls {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.spy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border: 2px solid; border-radius: 8px;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; cursor: pointer; transition: all 0.15s ease;
    user-select: none; background: transparent;
}
.spy-btn:active { transform: translateY(2px); }
.spy-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.spy-btn-hint { background: rgba(0,229,255,0.1); border-color: rgba(0,229,255,0.4); color: #00e5ff; }
.spy-btn-hint:hover:not(:disabled) { background: rgba(0,229,255,0.2); border-color: #00e5ff; box-shadow: 0 0 12px rgba(0,229,255,0.3); }
.spy-btn-exit { background: rgba(255,68,68,0.1); border-color: rgba(255,68,68,0.4); color: #ff6666; margin-left: auto; }
.spy-btn-exit:hover { background: rgba(255,68,68,0.2); border-color: #ff4444; }
.spy-btn-primary { background: rgba(0,255,136,0.15); border-color: rgba(0,255,136,0.5); color: #00ff88; font-size: 0.9rem; padding: 11px 22px; }
.spy-btn-primary:hover { background: rgba(0,255,136,0.25); border-color: #00ff88; box-shadow: 0 0 16px rgba(0,255,136,0.3); }
.spy-btn-sub { font-size: 0.65em; opacity: 0.7; font-weight: 400; letter-spacing: 0; }

/* ---- Overlays ---- */
.game-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.82); backdrop-filter: blur(8px);
    border-radius: 16px; z-index: 50; animation: overlayIn 0.3s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay-card {
    text-align: center;
    padding: clamp(24px, 4vw, 36px) clamp(20px, 5vw, 40px);
    max-width: min(90%, 440px);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.overlay-icon { font-size: 3rem; animation: iconBounce 0.8s ease-in-out infinite alternate; }
.overlay-title { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: 0.1em; color: #fff; }
.overlay-card p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin: 0; }
.level-complete-card { border: 1px solid rgba(0,255,136,0.4); border-radius: 16px; background: rgba(0,20,10,0.95); gap: 14px; }
.lc-badge { font-size: 0.78rem; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; color: #00ff88; background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.3); padding: 4px 14px; border-radius: 20px; }
.lc-mission { font-size: clamp(0.95rem, 2vw, 1.15rem); font-weight: 700; color: #fff; }
.lc-stats { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.lc-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,0.04); font-size: 0.85rem; }
.lc-row span:first-child { color: rgba(255,255,255,0.7); }
.lc-row span:last-child  { font-weight: 700; color: #fff; }
.lc-total { background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.2); margin-top: 4px; }
.lc-total span { color: #00ff88 !important; font-size: 0.95rem; }
.time-up-overlay .overlay-card { border: 1px solid rgba(255,165,0,0.4); border-radius: 16px; background: rgba(20,10,0,0.95); }
.time-up-overlay .overlay-title { color: #ffa500; }

/* ---- Toast ---- */
.spy-toast {
    position: absolute; bottom: 70px; left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 7px;
    pointer-events: none; z-index: 60; opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: calc(100% - 24px); white-space: normal; text-align: center;
}
.spy-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.spy-toast-ok  { background: rgba(0,255,136,0.15); border: 1px solid rgba(0,255,136,0.4); color: #00ff88; }
.spy-toast-err { background: rgba(255,68,68,0.15);  border: 1px solid rgba(255,68,68,0.4);  color: #ff6b6b; }

/* ---- Score floater ---- */
.score-floater {
    position: absolute; pointer-events: none; font-size: 1rem; font-weight: 800;
    color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.6); white-space: nowrap; z-index: 70;
    transform: translateX(-50%); animation: floatUp 0.9s ease-out forwards;
}
@keyframes floatUp {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

/* ---- Frame shake ---- */
.interface-frame.frame-shake { animation: frameShake 0.4s ease; }
@keyframes frameShake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60%, 90% { transform: translateX(6px); }
}

/* ---- Results ---- */
.spy-results { padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 30px); }
.results-rank-badge {
    font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 4px; letter-spacing: 0.05em;
}
.results-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: 0.08em; text-shadow: 0 0 20px rgba(0,229,255,0.4); }
.results-msg { color: rgba(255,255,255,0.7); font-size: 1rem; margin-bottom: 20px; }
.results-stats-grid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.rs-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 20px; min-width: 90px; }
.rs-label { font-size: 0.65rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 4px; }
.rs-val { font-size: 1.4rem; font-weight: 800; color: #fff; font-family: 'Courier New', monospace; }
.rs-val.highlight { background: linear-gradient(135deg, #ffd700, #ffaa00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* ===== Guardian Runner ===== */
.runner-game {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.runner-stage-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.runner-game h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.runner-controls {
    background: var(--bg-medium);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    border-left: 4px solid var(--primary-color);
}

.runner-controls p {
    margin: 8px 0;
    font-size: 1.1em;
}

.runner-info {
    display: flex;
    justify-content: space-around;
    background: var(--bg-medium);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
    border: 3px solid var(--primary-color);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

.runner-hud {
    margin-bottom: 0;
}

.runner-info .info-item {
    font-size: clamp(1rem, 0.5vw + 0.95rem, 1.2rem);
    font-weight: bold;
}

.runner-stage,
.platformer-stage {
    width: 100%;
    margin: 0 auto;
}

.runner-stage {
    position: relative;
}

#runnerCanvas {
    display: block;
    width: 100%;
    max-width: 1320px;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 20px auto;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 10px 30px rgba(76, 175, 80, 0.3);
}

.runner-stage-message {
    min-height: 0;
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(88%, 520px);
    margin: 0;
    z-index: 4;
    pointer-events: none;
}

.runner-quick-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.runner-result-layout,
.game-result-layout {
    min-height: min(100dvh - 140px, 820px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 40px;
}

.runner-result-screen,
.game-result-screen {
    width: min(100%, 720px);
}

.runner-win-screen,
.game-result-screen.is-success {
    border-color: rgba(78, 205, 196, 0.45);
}

body.runner-playing[data-active-section="runnerContainer"] .game-content {
    overflow: hidden;
    overscroll-behavior: none;
}

body.runner-playing[data-active-section="runnerContainer"] .runner-stage,
body.runner-playing[data-active-section="runnerContainer"] #runnerCanvas {
    touch-action: none;
}

.touch-controls {
    display: none;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    width: min(100%, 900px);
    margin: 16px auto 0;
    touch-action: manipulation;
}

.runner-orientation-hint {
    display: none;
}

.landscape-lock-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: #000;
    z-index: 30;
}

.landscape-lock-overlay.active {
    display: flex;
}

.gi-turn-phone {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 100000;
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding:
        max(8px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));
    background: #02060e;
    color: #fff;
}
body.gi-need-portrait .gi-turn-phone {
    display: flex;
}
.gi-turn-art {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    animation: giTurnFloat 7s ease-in-out infinite;
    pointer-events: none;
}
.gi-turn-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 42%, rgba(190, 255, 255, 0.14) 50%, transparent 58%);
    background-size: 240% 100%;
    mix-blend-mode: screen;
    animation: giTurnScan 3.6s ease-in-out infinite;
    pointer-events: none;
}
.gi-turn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@keyframes giTurnFloat {
    0%, 100% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.06) brightness(1.04); }
}
@keyframes giTurnScan {
    0% { background-position: 120% 0; }
    100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gi-turn-art,
    .gi-turn-scan { animation: none; }
}

.landscape-lock-card {
    width: min(92vw, 420px);
    padding: 28px 22px;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.landscape-lock-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.landscape-lock-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.landscape-lock-card p {
    margin: 8px 0;
    color: rgba(255, 255, 255, 0.86);
}

#runnerContainer.landscape-locked,
#platformerContainer.landscape-locked,
#runnerContainer.landscape-locked .runner-game,
#platformerContainer.landscape-locked .platformer-game,
#runnerContainer.landscape-locked .runner-stage,
#platformerContainer.landscape-locked .platformer-stage,
#runnerContainer.landscape-locked .game-content,
#platformerContainer.landscape-locked .game-content {
    background: #000 !important;
}

#runnerContainer.landscape-locked #runnerCanvas,
#platformerContainer.landscape-locked #gameCanvas,
#runnerContainer.landscape-locked .runner-info,
#platformerContainer.landscape-locked .game-info,
#runnerContainer.landscape-locked .runner-touch-controls,
#platformerContainer.landscape-locked .platformer-touch-controls,
#runnerContainer.landscape-locked .runner-stage-message,
#platformerContainer.landscape-locked #gameMessage {
    opacity: 0;
    pointer-events: none;
}

[data-orientation-lock]:disabled,
.touch-controls .touch-btn:disabled {
    opacity: 0.45;
    filter: grayscale(0.2);
    cursor: not-allowed;
}

.mobile-game-shell {
    width: 100%;
    min-height: 100%;
}

.touch-btn {
    flex: 1;
    min-height: 72px;
    border: 0;
    border-radius: 18px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.18);
    user-select: none;
    -webkit-user-select: none;
}

.touch-btn span {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.touch-btn-move {
    background: linear-gradient(180deg, #2e78ff 0%, #1847b8 100%);
}

.touch-btn-action {
    background: linear-gradient(180deg, #ff8c42 0%, #d95604 100%);
}

.touch-btn:active {
    transform: translateY(2px);
}

.touch-btn:disabled {
    opacity: 0.45;
    filter: grayscale(0.2);
}

.boss-message {
    background: linear-gradient(180deg, #f44336 0%, #d32f2f 100%);
    color: white;
    padding: 20px;
    border-radius: var(--border-radius);
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    border: 3px solid #c62828;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 8px 20px rgba(244, 67, 54, 0.5);
    animation: bossAppear 0.5s ease;
}

@keyframes bossAppear {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Estilos para resultados de juegos */
.results-summary {
    background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 30px auto;
    max-width: 600px;
    border: 3px solid var(--primary-color);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 10px 30px rgba(76, 175, 80, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.results-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--primary-color) 0%, 
        var(--secondary-color) 25%, 
        var(--warning-color) 50%, 
        var(--danger-color) 75%, 
        var(--primary-color) 100%);
    animation: rainbowSlide 3s linear infinite;
}

@keyframes rainbowSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.result-score {
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
    margin: 15px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(76, 175, 80, 0.5);
    animation: scoreAppear 0.6s ease;
}

@keyframes scoreAppear {
    0% { opacity: 0; transform: scale(0.5); }
    60% { transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

.result-percentage {
    font-size: 1.3em;
    color: var(--secondary-color);
    margin: 10px 0;
}

.result-message {
    font-size: 1.2em;
    color: var(--text-light);
    margin: 15px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 4px solid var(--warning-color);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid rgba(76, 175, 80, 0.3);
}

@keyframes hintPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
    }
}

.feedback-area {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.feedback-message {
    padding: 18px 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.15em;
    font-weight: 600;
    animation: slideInBounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.feedback-correct {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    box-shadow: 0 10px 30px rgba(46, 204, 113, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.feedback-wrong {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 10px 30px rgba(231, 76, 60, 0.5),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.feedback-icon {
    font-size: 2em;
    animation: iconPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes iconPop {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.level-complete,
.time-up {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(22, 33, 62, 0.9));
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    animation: fadeInScale 0.4s ease;
    border: 3px solid rgba(78, 205, 196, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
                inset 0 0 40px rgba(78, 205, 196, 0.1);
    position: relative;
    z-index: 1;
}

.level-complete h3,
.time-up h3 {
    background: linear-gradient(135deg, #ffd93d, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    font-size: 2.5em;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.bonus {
    color: #ffd93d;
    font-weight: bold;
    font-size: 1.3em;
    margin-top: 15px;
    text-shadow: 0 0 10px rgba(255, 217, 61, 0.6);
}

.game-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 25px;
    position: relative;
    z-index: 1;
}

.safety-tips {
    background: var(--bg-light);
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    border-left: 4px solid var(--primary-color);
}

.safety-tips h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.safety-tips ul {
    list-style-position: inside;
    color: var(--text-gray);
}

.safety-tips li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* ===== Guardián Runner (Platformer) ===== */
.platformer-game {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-medium);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.info-left, .info-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.level-name {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary-color);
}

.lives {
    font-size: 1.3em;
}

.game-score {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--warning-color);
}

#gameCanvas {
    display: block;
    width: 100%;
    max-width: 1240px;
    height: auto;
    aspect-ratio: 8 / 5;
    margin: 0 auto;
    border: 3px solid var(--primary-color);
    border-radius: var(--border-radius);
    background: #1a1a2e;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.game-controls-info {
    background: var(--bg-medium);
    padding: 15px;
    border-radius: var(--border-radius);
    margin: 15px 0;
    text-align: center;
}

.game-controls-info p {
    margin: 5px 0;
    color: var(--text-gray);
}

.game-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.game-message {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.instructions-box,
.level-complete-msg,
.game-over-msg,
.game-won-msg,
.pause-msg {
    background: var(--bg-medium);
    padding: 30px;
    border-radius: var(--border-radius);
    text-align: center;
    max-width: 500px;
    animation: fadeIn 0.5s ease;
}

.instructions-box h3,
.level-complete-msg h3,
.game-over-msg h3,
.game-won-msg h3,
.pause-msg h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.8em;
}

.instructions-box ul {
    list-style-position: inside;
    text-align: left;
    margin: 15px auto;
    max-width: 400px;
}

.instructions-box li {
    margin: 10px 0;
    color: var(--text-gray);
}

.level-complete-msg,
.game-won-msg {
    border-left: 4px solid var(--success-color);
}

.game-over-msg {
    border-left: 4px solid var(--danger-color);
}

@keyframes floatUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* Ajustes responsive para el platformer */
@media (max-width: 850px) {
    #gameCanvas {
        max-width: 100%;
        height: auto;
    }
    
    .game-info {
        flex-direction: column;

@media (max-width: 768px) {
    .splash-content {
        width: min(100%, 500px);
    }

    .splash-logo {
        width: clamp(220px, 68vw, 340px);
        height: clamp(220px, 68vw, 340px);
    }

    .splash-logo-img {
        max-width: 100% !important;
    }

    .splash-logo-img.logo-img-3 {
        max-width: min(88%, 280px) !important;
    }
}

@media (max-width: 480px) {
    .splash-content {
        width: min(100%, 420px);
    }

    .splash-logo {
        width: clamp(240px, 74vw, 320px);
        height: clamp(240px, 74vw, 320px);
    }

    .splash-logo-img.logo-img-3 {
        max-width: min(90%, 290px) !important;
    }
}
        gap: 10px;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    /* Header responsive */
    .main-header {
        position: relative;
    }

    .header-content {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
    }

    .header-logo {
        height: 34px;
        max-width: 58px;
    }

    .header-title h1 {
        font-size: 1.02em;
        gap: 6px;
        flex-wrap: nowrap;
        text-align: center;
        line-height: 1.15;
        justify-content: center;
    }

    .logo-container {
        width: auto;
        justify-content: center;
        gap: 0;
    }

    .header-title {
        width: 100%;
        min-width: 0;
    }

    /* Footer responsive */
    .developer-badge {
        flex-direction: column;
        gap: 5px;
        font-size: 0.9em;
    }

    .hero h1 {
        font-size: 2.15em;
    }

    .subtitle {
        font-size: 1em;
    }

    .hero {
        padding: 12px 10px 18px;
    }

    .player-info {
        margin: 18px auto 16px;
        max-width: 420px;
        padding: 18px 14px;
        border-radius: 16px;
    }

    .player-info .btn-primary {
        width: 100%;
        margin: 6px 0 0;
    }

    .menu-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: 420px;
        margin: 18px auto 0;
        align-items: stretch;
    }

    .menu-options .btn {
        width: 100%;
        min-width: 0;
        margin: 0;
        min-height: 48px;
        padding: 10px 12px;
        font-size: 0.78rem;
        letter-spacing: 0.6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

    .menu-options #btnSettings {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 220px;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .game-header {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }

    .game-header > div {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .player-stats {
        justify-content: center;
        gap: 15px;
    }

    .stat {
        font-size: 0.95em;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
        margin: 3px;
    }

    .btn-small {
        padding: 6px 12px;
        font-size: 0.8em;
    }

    .game-content {
        padding: 14px;
    }

    body.heavy-gameplay-mode .main-header,
    body.heavy-gameplay-mode .main-footer {
        display: none !important;
    }

    body.heavy-gameplay-mode .container {
        max-width: 100%;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        position: relative;
        inset: auto;
        z-index: auto;
    }

    body.heavy-gameplay-mode #gameScreen {
        position: relative;
        inset: auto;
        z-index: auto;
        background: #08111f;
        overflow: visible;
    }

    body.heavy-gameplay-mode .game-header {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: auto;
        margin: 0 0 8px;
        min-height: 56px;
        padding: 9px 12px;
        border-radius: 0 0 16px 16px;
        background: rgba(8, 17, 31, 0.9);
        backdrop-filter: blur(8px);
    }

    body.heavy-gameplay-mode .game-header .player-stats {
        display: none;
    }

    body.heavy-gameplay-mode .game-header > div {
        justify-content: space-between;
    }

    body.heavy-gameplay-mode .game-content {
        position: relative;
        inset: auto;
        border-radius: 0;
        min-height: auto;
        height: auto;
        padding: 0;
        overflow: visible;
        overscroll-behavior: auto;
    }

    body.heavy-gameplay-mode .game-section.active {
        min-height: auto;
    }

    .quiz-container,
    .scenario-container,
    .memory-game-container,
    .runner-game,
    .platformer-game,
    .tv-quiz-container {
        max-width: 100%;
    }

    .mission-grid {
        gap: 15px;
    }

    .mission-card {
        min-height: 0;
    }

    .option-btn,
    .choice-btn {
        padding: 12px 15px;
        font-size: 0.95em;
    }

    .tournament-tabs {
        flex-direction: column;
    }
}

/* ===== Animaciones adicionales ===== */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* ===== Utilidades ===== */
.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

/* ===== Memory Match — BYTE Guardian Edition ===== */

.mm-wrap {
    max-width: 1100px;
    margin: 0 auto;
    background: #070d1a;
    border-radius: 16px;
    padding: clamp(10px,2vw,20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

/* ── HUD ── */
.mm-hud {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0,229,255,0.2);
    border-radius: 12px;
    padding: 10px 14px;
    backdrop-filter: blur(6px);
}
.mm-hud-item { display: flex; flex-direction: column; gap: 4px; }
.mm-hud-right { align-items: flex-end; }
.mm-hud-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mm-title {
    font-size: clamp(0.75rem,1.8vw,1.05rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    background: linear-gradient(90deg,#00e5ff,#00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mm-subtitle { font-size: 0.62rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }

/* ── Sigilo giratorio animado (centro del HUD en escritorio) ── */
.mm-sigil {
    display: none; /* solo desktop */
    width: 46px; height: 46px;
    position: relative;
    flex-shrink: 0;
}
.mm-sigil::before, .mm-sigil::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}
.mm-sigil::before {
    border-top-color: #00e5ff;
    border-right-color: rgba(0,229,255,0.3);
    animation: sigilSpin 1.8s linear infinite;
}
.mm-sigil::after {
    border-bottom-color: #9d00ff;
    border-left-color: rgba(157,0,255,0.3);
    animation: sigilSpin 1.2s linear infinite reverse;
    inset: 5px;
}
.mm-sigil-core {
    position: absolute; inset: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,229,255,0.2) 0%, rgba(157,0,255,0.15) 60%, transparent 100%);
    animation: sigilPulse 2s ease infinite;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    color: rgba(0,229,255,0.7);
    text-shadow: 0 0 8px #00e5ff;
}
@keyframes sigilSpin  { to { transform: rotate(360deg); } }
@keyframes sigilPulse {
    0%,100% { box-shadow: 0 0 6px rgba(0,229,255,0.3); opacity:0.7; }
    50%      { box-shadow: 0 0 18px rgba(0,229,255,0.6), 0 0 30px rgba(157,0,255,0.3); opacity:1; }
}
.mm-hud-label { font-size: 0.58rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.38); text-transform: uppercase; }
.mm-hud-val {
    font-size: clamp(1.0rem,2vw,1.5rem);
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
    font-family: 'Courier New', monospace;
}
.mm-timer-val { color: #00e5ff !important; text-shadow: 0 0 10px rgba(0,229,255,0.6) !important; }
.mm-timer-val.mm-urgent { color: #ff4444 !important; text-shadow: 0 0 10px rgba(255,68,68,0.8) !important; animation: mmUrgent 0.5s steps(2) infinite; }
@keyframes mmUrgent { 0%,100%{opacity:1} 50%{opacity:0.45} }
.mm-timer-track { width: clamp(36px,5vw,68px); height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.mm-timer-fill { height:100%; background: linear-gradient(90deg,#00e5ff,#00ff88); border-radius: 2px; transition: width 1s linear, background 0.3s; }

/* ── Progress row ── */
.mm-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
}
.mm-stat-pill { font-size: 0.75rem; color: rgba(255,255,255,0.65); white-space: nowrap; }
.mm-prog-bar  { flex: 1; min-width: 60px; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.mm-prog-fill { height:100%; background: linear-gradient(90deg,#00e5ff,#00ff88); border-radius: 3px; transition: width 0.5s ease; box-shadow: 0 0 6px rgba(0,229,255,0.4); }
.mm-combo-pill {
    font-size: 0.8rem;
    font-weight: 800;
    color: #ff6600;
    text-shadow: 0 0 8px #ff6600;
    white-space: nowrap;
}
@keyframes mmComboPop {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.mm-combo-pop { animation: mmComboPop 0.4s cubic-bezier(0.68,-0.55,0.27,1.55) forwards; }

/* ── Main 2-column layout ── */
.mm-main-layout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.mm-board-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* ── Board ── */
.mm-board.memory-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(5px,1.2vw,12px);
    padding: clamp(8px,1.2vw,16px);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(0,229,255,0.1);
    border-radius: 14px;
}

/* ── Cards ── */
.mm-card.memory-card {
    aspect-ratio: 3/4;
    cursor: pointer;
    perspective: 700px;
    transition: transform 0.1s ease;
    max-width: 140px;
    justify-self: center;
    width: 100%;
}
.mm-card.memory-card:hover:not(.flipped):not(.matched) {
    transform: translateY(-5px) scale(1.04);
    filter: drop-shadow(0 0 8px rgba(0,229,255,0.4));
}
.memory-card-inner {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
    border-radius: 10px;
}
.memory-card.flipped  .memory-card-inner,
.memory-card.matched  .memory-card-inner { transform: rotateY(180deg); }
.memory-card-front, .memory-card-back {
    position: absolute; inset: 0; border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.memory-card-front {
    background: linear-gradient(135deg,#0d1b2e,#0a1522);
    border: 1px solid rgba(0,229,255,0.25);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,229,255,0.04);
}
.mm-card-symbol {
    font-size: clamp(1.3rem,2.8vw,2rem);
    color: rgba(0,229,255,0.28);
    text-shadow: 0 0 12px rgba(0,229,255,0.15);
    user-select: none;
    animation: mmSymPulse 2.5s ease infinite alternate;
}
@keyframes mmSymPulse { from{opacity:0.28} to{opacity:0.55} }
.memory-card-back {
    transform: rotateY(180deg);
    border: 1px solid rgba(255,255,255,0.15);
    gap: 5px;
}
.memory-card-back.threat {
    background: linear-gradient(135deg,#2d0a0a,#1a0505);
    border-color: rgba(255,68,68,0.4);
    box-shadow: inset 0 0 20px rgba(255,68,68,0.08);
}
.memory-card-back.solution {
    background: linear-gradient(135deg,#0a2d0f,#051a08);
    border-color: rgba(0,255,136,0.4);
    box-shadow: inset 0 0 20px rgba(0,255,136,0.08);
}
.mm-card-emoji { font-size: clamp(1.3rem,2.8vw,2rem); }
.mm-card-name  { font-size: clamp(0.5rem,1vw,0.7rem); font-weight: 700; text-align: center; padding: 0 4px; color: rgba(255,255,255,0.85); letter-spacing: 0.03em; }
.memory-card.matched .memory-card-back { border-color: #00ff88 !important; box-shadow: 0 0 18px rgba(0,255,136,0.45) !important; }
.memory-card.matched .memory-card-inner { animation: mmMatchPop 0.45s cubic-bezier(0.68,-0.55,0.27,1.55) forwards; }
@keyframes mmMatchPop {
    0%   { transform: rotateY(180deg) scale(1); }
    50%  { transform: rotateY(180deg) scale(1.12); }
    100% { transform: rotateY(180deg) scale(1); }
}
/* Power revealed */
.mm-power-revealed .memory-card-back { border-color: #9d00ff !important; box-shadow: 0 0 22px rgba(157,0,255,0.7), 0 0 40px rgba(0,229,255,0.3) !important; }
/* Shake mismatch */
.mm-shake { animation: mmShake 0.5s ease; }
@keyframes mmShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ── Controls ── */
.mm-controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────
   BYTE — Guardián Cyber
───────────────────────────────────────────────────────── */
.mm-byte-panel {
    background: linear-gradient(160deg,#0d0020 0%,#12003a 50%,#0a0015 100%);
    border: 1px solid rgba(157,0,255,0.35);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 155px;
    max-width: 175px;
    position: relative;
    box-shadow: 0 0 20px rgba(157,0,255,0.08);
    transition: border-color 0.4s, box-shadow 0.4s;
    flex-shrink: 0;
}
.mm-byte-panel[data-state="happy"]  { border-color: rgba(0,255,136,0.55); box-shadow: 0 0 20px rgba(0,255,136,0.1); }
.mm-byte-panel[data-state="worried"]{ border-color: rgba(255,68,68,0.55);  box-shadow: 0 0 20px rgba(255,68,68,0.1); animation: mmByteShake 0.4s ease; }
.mm-byte-panel[data-state="power"]  { border-color: #9d00ff; animation: mmBytePowerPulse 0.9s ease infinite alternate; }
.mm-byte-panel[data-state="fire"]   { border-color: #ff6600; box-shadow: 0 0 30px rgba(255,102,0,0.25); }
@keyframes mmByteShake { 0%,100%{transform:translateX(0)} 25%,75%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }
@keyframes mmBytePowerPulse {
    from { box-shadow: 0 0 10px rgba(157,0,255,0.3); }
    to   { box-shadow: 0 0 30px rgba(157,0,255,0.8), 0 0 55px rgba(0,229,255,0.25); }
}

/* Face */
.mm-byte-face { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Antenna */
.mm-byte-antenna {
    width: 3px; height: 14px;
    background: linear-gradient(180deg,transparent,rgba(157,0,255,0.6));
    position: relative; margin-bottom: -2px;
}
.mm-byte-orb {
    width: 9px; height: 9px; border-radius: 50%;
    background: #9d00ff; box-shadow: 0 0 10px #9d00ff;
    position: absolute; top: -4px; left: -3px;
    animation: mmOrbPulse 1.6s ease infinite alternate;
}
@keyframes mmOrbPulse {
    from { box-shadow: 0 0 4px #9d00ff; transform: scale(1); }
    to   { box-shadow: 0 0 18px #9d00ff, 0 0 28px #00e5ff; transform: scale(1.15); }
}

/* Screen */
.mm-byte-screen {
    width: 68px; height: 58px;
    background: linear-gradient(135deg,#08001e,#0e051a);
    border: 2px solid rgba(157,0,255,0.45);
    border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; position: relative; overflow: hidden;
    box-shadow: inset 0 0 12px rgba(157,0,255,0.1);
}
/* Scan line */
.mm-byte-scan {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: rgba(157,0,255,0.45);
    animation: mmByteScan 3.5s linear infinite;
}
@keyframes mmByteScan { 0%{top:0} 100%{top:100%} }

/* Eyes */
.mm-byte-eyes { display: flex; gap: 10px; }
.mm-byte-eye {
    width: 13px; height: 13px; border-radius: 50%;
    background: #00e5ff; box-shadow: 0 0 8px #00e5ff;
    animation: mmByteEyeBlink 5s ease infinite;
    transition: background 0.3s, box-shadow 0.3s;
}
@keyframes mmByteEyeBlink {
    0%,88%,100% { transform: scaleY(1); }
    93% { transform: scaleY(0.08); }
}
[data-state="happy"]  .mm-byte-eye { background:#00ff88; box-shadow:0 0 12px #00ff88; animation:mmEyeHappy 0.4s ease infinite alternate; }
[data-state="worried"] .mm-byte-eye{ background:#ff4444; box-shadow:0 0 10px #ff4444; animation:mmEyeWorried 0.25s ease infinite alternate; }
[data-state="power"]  .mm-byte-eye { background:#ffd700; box-shadow:0 0 14px #ffd700,0 0 26px #ff8800; animation:mmEyePower 0.55s ease infinite alternate; }
[data-state="fire"]   .mm-byte-eye { background:#ff6600; box-shadow:0 0 12px #ff6600; width:15px; height:7px; border-radius:3px; animation:none; }
@keyframes mmEyeHappy   { from{transform:scaleY(1)} to{transform:scaleY(1.2) scaleX(1.1)} }
@keyframes mmEyeWorried { from{transform:scaleY(1)} to{transform:scaleY(0.5) translateY(-2px)} }
@keyframes mmEyePower   { from{transform:scale(1)} to{transform:scale(1.35)} }

/* Mouth */
.mm-byte-mouth {
    width: 26px; height: 4px; border-radius: 2px;
    background: rgba(0,229,255,0.45);
    transition: all 0.3s;
}
[data-state="happy"]  .mm-byte-mouth { width:30px; height:7px; background:#00ff88; border-radius:0 0 8px 8px; box-shadow:0 0 8px #00ff88; }
[data-state="worried"] .mm-byte-mouth{ transform:rotate(180deg); background:#ff4444; width:24px; }
[data-state="fire"]   .mm-byte-mouth { width:32px; background:linear-gradient(90deg,#ff6600,#9d00ff); box-shadow:0 0 10px #ff6600; animation:mmFireMouth 0.12s steps(2) infinite; }
@keyframes mmFireMouth { 0%{transform:scaleX(1)} 100%{transform:scaleX(0.75)} }

/* Label */
.mm-byte-label {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-align: center;
    background: linear-gradient(90deg,#9d00ff,#00e5ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-top: 2px;
}
.mm-byte-label small {
    font-size: 0.48rem; display: block; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.38);
    -webkit-text-fill-color: rgba(255,255,255,0.38);
    background: none;
}

/* Speech bubble */
.mm-byte-bubble {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(157,0,255,0.25);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.82);
    text-align: center;
    line-height: 1.35;
    min-height: 38px;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
}
@keyframes mmByteTypeIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Power section ── */
.mm-power-section { width:100%; display:flex; flex-direction:column; gap:5px; }
.mm-power-label { font-size:0.58rem; letter-spacing:0.11em; color:rgba(157,0,255,0.8); text-align:center; text-transform:uppercase; }
.mm-power-bar-track {
    width:100%; height:7px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow:hidden;
    border: 1px solid rgba(157,0,255,0.2);
}
.mm-power-bar-fill {
    height:100%;
    background: linear-gradient(90deg,#9d00ff,#00e5ff);
    border-radius: 4px;
    transition: width 0.55s ease;
    box-shadow: 0 0 8px rgba(157,0,255,0.6);
}
.mm-power-btn {
    width:100%; padding: 7px 4px;
    border: 1px solid rgba(157,0,255,0.3);
    border-radius: 8px;
    background: rgba(157,0,255,0.08);
    color: rgba(255,255,255,0.35);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
    cursor: not-allowed; font-family: inherit;
    transition: all 0.3s;
}
.mm-power-btn.mm-power-ready {
    background: linear-gradient(135deg,#9d00ff,#6600cc);
    border-color: #9d00ff; color: #fff;
    cursor: pointer;
    animation: mmPowerBtnPulse 0.85s ease infinite alternate;
}
@keyframes mmPowerBtnPulse {
    from { box-shadow: 0 0 8px rgba(157,0,255,0.4); transform: scale(1); }
    to   { box-shadow: 0 0 24px rgba(157,0,255,0.9), 0 0 40px rgba(0,229,255,0.35); transform: scale(1.03); }
}
.mm-power-btn.mm-power-ready:hover { animation:none; transform:scale(1.06); box-shadow:0 0 32px rgba(157,0,255,1); }
.mm-power-btn.mm-power-ready:active { transform:scale(0.97); }

/* ── Result screen ── */
.mm-result-wrap { min-height:380px; justify-content:center; align-items:center; }
.mm-result-inner {
    max-width: 420px; margin: 0 auto;
    text-align: center; display:flex; flex-direction:column;
    gap: 16px; padding: 24px 20px;
}
.mm-result-badge {
    font-size: 2rem; font-weight: 900; letter-spacing: 0.2em;
    border: 3px solid; border-radius: 12px;
    padding: 8px 22px; display:inline-block; align-self:center;
    text-shadow: 0 0 20px currentColor;
}
.mm-result-title {
    font-size: clamp(1.2rem,4vw,1.6rem); font-weight: 800;
    background: linear-gradient(90deg,#00e5ff,#00ff88);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mm-result-sub { color:rgba(255,255,255,0.55); font-size:0.88rem; margin:0; }
.mm-result-stats {
    background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.07);
    border-radius:12px; padding:14px 16px;
    display:flex; flex-direction:column; gap:8px;
}
.mm-rs { display:flex; justify-content:space-between; align-items:center; }
.mm-rs-l { font-size:0.78rem; color:rgba(255,255,255,0.48); }
.mm-rs-v { font-size:0.9rem; font-weight:700; color:rgba(255,255,255,0.88); }
.mm-rs-hi { color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,0.5); }
.mm-result-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ── Responsive ── */
@media (max-width:720px) {
    .mm-main-layout { flex-direction:column; }
    .mm-byte-panel {
        flex-direction:row; flex-wrap:wrap; justify-content:space-between;
        align-items:center; min-width:unset; max-width:unset;
        width:100%; padding:8px 12px;
    }
    .mm-byte-face { flex-direction:row; align-items:center; gap:8px; }
    .mm-byte-antenna { display:none; }
    .mm-byte-screen { width:50px; height:44px; }
    .mm-byte-bubble { flex:1; min-height:unset; font-size:0.64rem; }
    .mm-power-section {
        flex-direction:row; align-items:center;
        gap:6px; width:100%; order:2;
    }
    .mm-power-label { white-space:nowrap; font-size:0.55rem; }
    .mm-power-bar-track { flex:1; }
    .mm-power-btn { width:auto; white-space:nowrap; padding:5px 10px; }
}
@media (max-width:480px) {
    .mm-board.memory-board { gap:4px; padding:7px; }
    .mm-card-name { font-size:0.48rem; }
    .mm-card-emoji { font-size:1.15rem; }
    .mm-hud { gap:5px; padding:7px 10px; }
}
@media (max-width:360px) {
    .mm-board.memory-board { gap:3px; padding:5px; }
    .mm-hud { grid-template-columns:1fr; }
    .mm-hud-center { order:-1; }
}
/* Large screens: allow cards to grow nicely */
@media (min-width:1000px) {
    .mm-board.memory-board { gap:14px; padding:18px; }
    .mm-byte-panel { min-width:180px; max-width:200px; }
}

/* ===== Responsive Global Mejorado ===== */

@media (max-width: 1024px) {
    .container {
        padding: 15px;
        max-width: 95%;
    }

    #runnerCanvas {
        max-width: 100%;
        height: auto;
    }

    .runner-game canvas {
        max-width: 100%;
        height: auto !important;
    }

    .splash-title {
        font-size: 2.5em;
    }

    .splash-subtitle {
        font-size: 1.2em;
    }

    .btn-play {
        font-size: 1.3em;
        padding: 18px 42px;
        min-width: 240px;
    }
}

@media (max-width: 768px) {
    body.heavy-gameplay-mode {
        height: auto;
        overflow: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: auto;
        touch-action: manipulation;
    }

    .splash-title {
        font-size: 2em;
        padding: 0 20px;
    }

    .splash-subtitle {
        font-size: 1em;
    }

    .btn-play {
        font-size: 1.1em;
        padding: 16px 30px;
        min-width: 220px;
        border-radius: 16px;
    }

    .splash-logo-img {
        max-width: 100px !important;
        height: auto !important;
    }

    .title-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .mission-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mission-card {
        padding: 20px;
    }

    #runnerCanvas,
    #gameCanvas {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
    }

    .runner-info,
    .game-info {
        flex-wrap: wrap;
        font-size: 0.9em;
    }

    .runner-controls,
    .game-controls-info,
    .runner-info,
    .game-info,
    .question-text,
    .scenario-story {
        padding: 14px;
    }

    .memory-game-container,
    .quiz-container,
    .scenario-container,
    .tv-quiz-container,
    .runner-game,
    .platformer-game {
        padding-left: 0;
        padding-right: 0;
    }

    .game-info {
        gap: 12px;
        padding: 14px 16px;
    }

    .info-left,
    .info-right {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .touch-controls {
        display: flex;
    }

    .game-controls button {
        font-size: 0.9em;
        padding: 10px 20px;
    }

    #runnerCanvas,
    #gameCanvas {
        max-width: 100%;
        min-height: min(56vw, 360px);
    }

    body[data-active-section="runnerContainer"] .game-content,
    body[data-active-section="platformerContainer"] .game-content,
    body[data-active-section="quizContainer"] .game-content,
    body[data-active-section="memoryContainer"] .game-content,
    body[data-active-section="dangerContainer"] .game-content,
    body[data-active-section="chatContainer"] .game-content,
    body[data-active-section="scenarioContainer"] .game-content {
        padding: 0;
        background: #050816;
    }

    body[data-active-section="runnerContainer"] .game-content {
        inset: auto;
        min-height: auto;
        height: auto;
    }

    body[data-active-section="runnerContainer"] .game-header {
        display: none;
    }

    body[data-active-section="runnerContainer"] .runner-game,
    body[data-active-section="platformerContainer"] .platformer-game,
    body[data-active-section="quizContainer"] .tv-quiz-container,
    body[data-active-section="memoryContainer"] .memory-game-container,
    body[data-active-section="dangerContainer"] .spot-danger-game,
    body[data-active-section="chatContainer"] .chat-simulator,
    body[data-active-section="scenarioContainer"] .scenario-container {
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        padding: 12px 8px calc(env(safe-area-inset-bottom) + 8px);
    }

    body[data-active-section="runnerContainer"] .runner-game {
        display: grid;
        grid-template-rows: auto auto auto;
        min-height: auto;
        padding: 0;
        gap: 8px;
    }

    body[data-active-section="runnerContainer"] #runnerContainer,
    body[data-active-section="platformerContainer"] #platformerContainer {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        background: #050816;
        z-index: auto;
    }

    body[data-active-section="runnerContainer"] .runner-game,
    body[data-active-section="platformerContainer"] .platformer-game {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin: 0;
        background: #050816;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    body[data-active-section="runnerContainer"] .runner-stage-shell {
        min-height: 0;
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
    }

    body[data-active-section="runnerContainer"] .runner-game h2 {
        display: none;
    }

    body[data-active-section="runnerContainer"] .runner-controls {
        display: none;
    }

    body[data-active-section="runnerContainer"] .runner-info {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: 3;
        margin: 0;
        padding: 8px 10px;
        gap: 8px;
        background: rgba(7, 17, 31, 0.82);
        border-width: 2px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(6px);
    }

    body[data-active-section="runnerContainer"] .runner-info .info-item {
        font-size: 0.84rem;
    }

    body[data-active-section="runnerContainer"] .runner-stage {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        inset: auto;
        min-height: auto;
        width: 100%;
        height: auto;
    }

    body[data-active-section="runnerContainer"] #runnerCanvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        max-height: none;
        min-height: min(56vw, 360px);
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        aspect-ratio: 2 / 1;
    }

    body[data-active-section="runnerContainer"] .runner-stage-message {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        width: min(88%, 460px);
        z-index: 3;
        margin: 0;
    }

    body[data-active-section="runnerContainer"] .runner-quick-actions {
        position: relative;
        right: auto;
        bottom: auto;
        z-index: 3;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    body[data-active-section="runnerContainer"] .runner-quick-actions .btn {
        margin: 0;
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    body[data-active-section="platformerContainer"] .game-info {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        z-index: 3;
        margin: 0;
        padding: 8px 10px;
        background: rgba(7, 17, 31, 0.82);
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(6px);
    }

    body[data-active-section="platformerContainer"] .platformer-stage {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        margin: 0;
    }

    body[data-active-section="platformerContainer"] #gameCanvas {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        min-height: min(62vw, 300px);
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        aspect-ratio: 8 / 5;
    }

    body[data-active-section="platformerContainer"] .platformer-touch-controls {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 3;
        margin: 0;
        width: 100%;
        max-width: none;
    }

    body[data-active-section="platformerContainer"] .game-controls-info {
        display: none;
    }

    body[data-active-section="platformerContainer"] .game-buttons {
        position: relative;
        right: auto;
        top: auto;
        z-index: 3;
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin: 0;
        justify-content: center;
    }

    body[data-active-section="platformerContainer"] .game-buttons .btn {
        margin: 0;
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    body[data-active-section="platformerContainer"] #gameMessage {
        position: relative;
        left: 50%;
        top: auto;
        transform: translate(-50%, -50%);
        z-index: 3;
        width: min(88vw, 420px);
        min-height: 0;
        margin: 12px 0 0;
    }

    body[data-active-section="runnerContainer"] .runner-controls,
    body[data-active-section="platformerContainer"] .game-controls-info {
        margin-bottom: 8px;
    }

    body[data-active-section="quizContainer"] .tv-quiz-container,
    body[data-active-section="memoryContainer"] .memory-game-container,
    body[data-active-section="dangerContainer"] .spot-danger-game,
    body[data-active-section="chatContainer"] .chat-simulator,
    body[data-active-section="scenarioContainer"] .scenario-container {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    body[data-active-section="quizContainer"] .tv-quiz-container {
        justify-content: space-between;
    }

    body[data-active-section="quizContainer"] .tv-header,
    body[data-active-section="memoryContainer"] .memory-stats,
    body[data-active-section="dangerContainer"] .game-header-info {
        margin-bottom: 10px;
    }

    body[data-active-section="quizContainer"] .tv-host-section {
        gap: 12px;
        margin-bottom: 14px;
    }

    body[data-active-section="quizContainer"] .host-avatar-large {
        font-size: 3.5em;
        padding: 12px;
    }

    body[data-active-section="quizContainer"] .question-bubble {
        padding: 16px;
    }

    body[data-active-section="quizContainer"] .bubble-content {
        font-size: 1.06em;
        line-height: 1.45;
    }

    body[data-active-section="quizContainer"] .tv-option-btn {
        min-height: 78px;
        padding: 16px;
    }

    body[data-active-section="memoryContainer"] .memory-board {
        flex: 1;
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        gap: 10px;
        min-height: 0;
    }

    body[data-active-section="memoryContainer"] .memory-controls,
    body[data-active-section="quizContainer"] .tv-controls,
    body[data-active-section="dangerContainer"] .game-controls {
        margin-top: auto;
        position: sticky;
        bottom: 0;
        padding: 10px 0 calc(env(safe-area-inset-bottom) + 6px);
        background: linear-gradient(180deg, rgba(7, 17, 31, 0) 0%, rgba(7, 17, 31, 0.88) 36%, rgba(7, 17, 31, 0.96) 100%);
        backdrop-filter: blur(4px);
        z-index: 5;
    }

    body[data-active-section="dangerContainer"] .spot-danger-game {
        padding: 8px;
    }

    body[data-active-section="dangerContainer"] .danger-scene {
        flex: 1;
        min-height: 0;
        padding: 18px;
        margin-bottom: 12px;
    }

    body[data-active-section="dangerContainer"] .danger-item {
        min-height: 48px;
        max-width: 88%;
        padding: 10px 14px;
    }

    body[data-active-section="dangerContainer"] .item-text {
        font-size: 0.92rem;
    }

    body[data-active-section="chatContainer"] .chat-simulator,
    body[data-active-section="scenarioContainer"] .scenario-container {
        padding: 10px;
    }

    body[data-active-section="chatContainer"] .chat-messages {
        flex: 1;
        height: auto;
        min-height: 0;
    }

    body[data-active-section="runnerContainer"] .runner-touch-controls {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
    }

    body[data-active-section="platformerContainer"] .platformer-game,
    body[data-active-section="quizContainer"] .tv-quiz-container,
    body[data-active-section="memoryContainer"] .memory-game-container,
    body[data-active-section="dangerContainer"] .spot-danger-game,
    body[data-active-section="chatContainer"] .chat-simulator,
    body[data-active-section="scenarioContainer"] .scenario-container {
        overflow: hidden;
    }

    .runner-stage,
    .platformer-stage,
    .tv-quiz-container,
    .memory-game-container,
    .scenario-container,
    .quiz-container {
        width: 100%;
        max-width: 100%;
    }

    .main-footer {
        font-size: 0.8em;
        padding: 15px;
    }

    .footer-content {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .splash-content {
        padding-top: 80px;
    }

    .splash-title {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .splash-subtitle {
        font-size: 0.9em;
    }

    .btn-play {
        font-size: 1em;
        padding: 14px 22px;
        min-width: 200px;
        letter-spacing: 1px;
    }

    .splash-footer {
        font-size: 0.7em;
        flex-wrap: wrap;
        padding: 10px;
        gap: 5px;
    }

    .splash-logo-img {
        max-width: 70px !important;
    }

    .title-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .hero h2 {
        font-size: 1.8em;
    }

    .hero-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .touch-controls {
        gap: 8px;
    }

    .touch-btn {
        min-height: 64px;
        border-radius: 16px;
        font-size: 1.3rem;
    }

    .touch-btn span {
        font-size: 0.72rem;
    }

    .header-content {
        padding: 8px 6px;
    }

    .header-logo {
        height: 36px;
        max-width: 72px;
    }

    .header-title h1 {
        font-size: 1.02em;
    }

    .runner-controls p,
    .game-controls-info p,
    .question-text,
    .scenario-story,
    .option-btn,
    .choice-btn {
        font-size: 0.95rem;
    }

    body.heavy-gameplay-mode .game-content {
        padding: 0;
        border-radius: 0;
    }

    body[data-active-section="runnerContainer"] .game-content,
    body[data-active-section="platformerContainer"] .game-content,
    body[data-active-section="quizContainer"] .game-content,
    body[data-active-section="memoryContainer"] .game-content,
    body[data-active-section="dangerContainer"] .game-content,
    body[data-active-section="chatContainer"] .game-content,
    body[data-active-section="scenarioContainer"] .game-content {
        inset: auto;
        min-height: auto;
        border-radius: 0;
    }

    body[data-active-section="runnerContainer"] .game-content {
        inset: auto;
        min-height: auto;
        height: auto;
    }

    body.heavy-gameplay-mode .game-header {
        min-height: 52px;
        padding: 8px 10px;
    }

    body.heavy-gameplay-mode .container {
        height: auto;
    }

    body.gameplay-mode .container {
        padding-inline: 6px;
    }

    #runnerCanvas,
    #gameCanvas {
        border-width: 2px;
        border-radius: 12px;
        margin: 12px auto;
        min-height: min(62vw, 300px);
    }

    body[data-active-section="quizContainer"] .tv-header,
    body[data-active-section="dangerContainer"] .game-header-info,
    body[data-active-section="memoryContainer"] .memory-stat {
        padding: 10px 12px;
    }

    body[data-active-section="quizContainer"] .tv-title {
        font-size: 1.05rem;
        letter-spacing: 1px;
    }

    body[data-active-section="quizContainer"] .tv-score,
    body[data-active-section="quizContainer"] .tv-logo {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    body[data-active-section="quizContainer"] .score-value {
        font-size: 1.45rem;
    }

    body[data-active-section="memoryContainer"] .memory-board {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    body[data-active-section="memoryContainer"] .memory-card-front,
    body[data-active-section="memoryContainer"] .memory-card-back {
        padding: 10px;
    }

    body[data-active-section="memoryContainer"] .card-emoji {
        font-size: 1.8em;
    }

    body[data-active-section="memoryContainer"] .card-name {
        font-size: 0.72em;
    }

    body[data-active-section="dangerContainer"] .danger-scene {
        min-height: 0;
        padding: 12px;
    }

    body[data-active-section="runnerContainer"] #runnerCanvas {
        min-height: min(62vw, 300px);
        max-height: none;
    }

    body[data-active-section="runnerContainer"] .runner-info {
        inset: 6px 6px auto 6px;
        padding: 7px 8px;
        gap: 6px;
    }

    body[data-active-section="runnerContainer"] .runner-info .info-item {
        font-size: 0.78rem;
    }

    body[data-active-section="runnerContainer"] .runner-quick-actions {
        right: 6px;
        bottom: 6px;
        gap: 6px;
    }

    body[data-active-section="runnerContainer"] .runner-quick-actions .btn {
        padding: 7px 10px;
        font-size: 0.74rem;
    }

    body[data-active-section="platformerContainer"] .game-info {
        inset: 6px 6px auto 6px;
        padding: 7px 8px;
    }

    body[data-active-section="platformerContainer"] .level-name,
    body[data-active-section="platformerContainer"] .lives,
    body[data-active-section="platformerContainer"] .game-score {
        font-size: 0.88rem;
    }

    body[data-active-section="platformerContainer"] .game-buttons {
        right: 6px;
        top: 62px;
        gap: 6px;
    }

    body[data-active-section="platformerContainer"] .game-buttons .btn {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    body[data-active-section="dangerContainer"] .danger-item {
        max-width: 92%;
        gap: 8px;
        padding: 8px 10px;
    }

    body[data-active-section="dangerContainer"] .item-icon {
        font-size: 1.2em;
    }

    body[data-active-section="chatContainer"] .chat-messages {
        height: auto;
        padding: 12px;
    }

    body[data-active-section="platformerContainer"] .platformer-game,
    body[data-active-section="quizContainer"] .tv-quiz-container,
    body[data-active-section="memoryContainer"] .memory-game-container,
    body[data-active-section="dangerContainer"] .spot-danger-game,
    body[data-active-section="chatContainer"] .chat-simulator,
    body[data-active-section="scenarioContainer"] .scenario-container {
        padding: 60px 6px calc(env(safe-area-inset-bottom) + 6px);
    }

    .memory-board {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .game-controls {
        flex-direction: column;
        gap: 10px;
    }

    .game-controls button {
        width: 100%;
        font-size: 0.85em;
    }

    .main-footer {
        font-size: 0.7em;
        padding: 10px;
    }

    .splash-separator {
        display: none;
    }
}

@media (pointer: coarse), (max-width: 1024px) {
    .touch-controls {
        display: flex;
    }

    .floating-particles {
        display: block;
        opacity: 0.26;
    }

    body::before,
    body::after {
        animation: none;
    }

    .splash-particle,
    .particle,
    .title-icon,
    .header-logo,
    .header-title h1,
    .memory-stat.warning-pulse,
    .danger-item.hint-pulse,
    .card-logo {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .floating-particles .particle:nth-child(n+9) {
        display: none;
    }

    .splash-particle:nth-child(n+21) {
        display: none;
    }
}

@media (max-height: 900px) {
    .splash-content {
        padding-top: 24px;
        padding-bottom: 20px;
    }

    .splash-logo {
        width: clamp(130px, 22vh, 220px);
        height: clamp(130px, 22vh, 220px);
        margin-bottom: 18px;
    }

    .splash-subtitle {
        margin-bottom: 22px;
    }

    .splash-footer {
        margin-top: 24px;
    }
}

@media (max-height: 740px) {
    .splash-screen {
        align-items: center;
    }
    .sp-content {
        justify-content: flex-start;
        padding-top: 8px;
    }

    .splash-content {
        padding-top: 12px;
    }

    .splash-logo {
        width: clamp(110px, 18vh, 170px);
        height: clamp(110px, 18vh, 170px);
        margin-bottom: 14px;
    }

    .splash-title {
        margin-bottom: 10px;
    }

    .splash-subtitle {
        font-size: 1rem;
        margin-bottom: 18px;
    }

    .btn-play {
        padding: 12px 24px;
    }

    .splash-footer {
        gap: 6px;
        margin-top: 18px;
    }
}

/* ===== Ajustes Finales Splash y Encuentra el Peligro ===== */
.splash-footer {
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 12px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(9, 21, 40, 0.72), rgba(20, 55, 92, 0.48));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.splash-footer .splash-dev-text,
.splash-footer .splash-dev-title,
.splash-footer .splash-copyright {
    text-align: center;
}

body[data-active-section="dangerContainer"] .spot-danger-game {
    width: min(100%, 980px);
}

@media (max-width: 768px) {
    body[data-active-section="dangerContainer"] .spot-danger-game {
        padding: 12px 10px 16px;
        border-radius: 18px;
    }

    body[data-active-section="dangerContainer"] .game-header-info {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    body[data-active-section="dangerContainer"] .level-info h2 {
        font-size: 1.4rem;
        line-height: 1.1;
    }

    body[data-active-section="dangerContainer"] .level-title {
        font-size: 0.96rem;
        line-height: 1.25;
    }

    body[data-active-section="dangerContainer"] .game-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-active-section="dangerContainer"] .stat-item {
        min-width: 0;
        padding: 10px 8px;
    }

    body[data-active-section="dangerContainer"] .stat-label {
        font-size: 0.72rem;
        text-align: center;
    }

    body[data-active-section="dangerContainer"] .stat-value {
        font-size: 1.15rem;
    }

    body[data-active-section="dangerContainer"] .level-description {
        padding: 14px 12px;
        margin-bottom: 14px;
        border-radius: 16px;
    }

    body[data-active-section="dangerContainer"] .level-description p {
        font-size: 0.96rem;
        line-height: 1.35;
    }

    body[data-active-section="dangerContainer"] .danger-scene {
        min-height: clamp(420px, 78vw, 560px);
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 18px;
    }

    body[data-active-section="dangerContainer"] .danger-item {
        max-width: min(84%, 260px);
        min-height: 42px;
        padding: 8px 10px;
        gap: 8px;
        border-radius: 12px;
    }

    body[data-active-section="dangerContainer"] .item-text {
        font-size: 0.82rem;
        line-height: 1.22;
    }

    body[data-active-section="dangerContainer"] .item-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }

    body[data-active-section="dangerContainer"] .feedback-message,
    body[data-active-section="dangerContainer"] .level-complete,
    body[data-active-section="dangerContainer"] .time-up {
        border-radius: 14px;
        padding: 12px;
    }

    body[data-active-section="dangerContainer"] .game-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body[data-active-section="dangerContainer"] .game-controls .btn {
        width: 100%;
        margin: 0;
    }

    .splash-footer {
        width: min(100%, 360px);
        gap: 6px 10px;
        padding: 12px 14px;
    }
}

@media (max-width: 480px) {
    .floating-particles {
        opacity: 0.2;
    }

    .floating-particles .particle:nth-child(n+7) {
        display: none;
    }

    .splash-particle:nth-child(n+15) {
        display: none;
    }

    .splash-footer {
        width: min(100%, 320px);
        padding: 10px 12px;
        gap: 4px 8px;
        font-size: 0.72rem;
    }

    .splash-footer .splash-code-bracket,
    .splash-footer .splash-separator {
        display: none;
    }

    body[data-active-section="dangerContainer"] .spot-danger-game {
        padding: 10px 8px 14px;
    }

    body[data-active-section="dangerContainer"] .game-stats {
        grid-template-columns: 1fr;
    }

    body[data-active-section="dangerContainer"] .danger-scene {
        min-height: clamp(440px, 104vw, 620px);
        padding: 10px;
    }

    body[data-active-section="dangerContainer"] .danger-item {
        max-width: min(86%, 220px);
        padding: 7px 9px;
    }

    body[data-active-section="dangerContainer"] .item-text {
        font-size: 0.76rem;
    }
}

@media (max-width: 768px) {
    .splash-screen {
        padding: 16px 14px max(12px, env(safe-area-inset-bottom));
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .splash-content {
        width: min(100%, 440px);
        min-height: calc(100dvh - 32px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 18px 112px;
    }

    .splash-logo {
        width: clamp(180px, 56vw, 280px);
        height: clamp(180px, 56vw, 280px);
        margin-bottom: 24px;
    }

    .splash-title {
        font-size: clamp(2rem, 6.8vw, 2.7rem);
        margin-bottom: 14px;
    }

    .splash-subtitle {
        max-width: 30ch;
        margin-bottom: 26px;
        font-size: clamp(1rem, 2.9vw, 1.16rem);
    }

    .splash-footer {
        position: absolute;
        left: 50%;
        bottom: max(10px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        width: min(calc(100% - 20px), 370px);
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .splash-content {
        width: min(100%, 390px);
        min-height: calc(100dvh - 20px);
        padding: 22px 14px 104px;
    }

    .splash-logo {
        width: clamp(190px, 62vw, 260px);
        height: clamp(190px, 62vw, 260px);
    }

    .splash-footer {
        width: min(calc(100% - 18px), 332px);
        bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* ===== Override Final Encuentra el Peligro ===== */
.spot-danger-game {
    background:
        radial-gradient(circle at top left, rgba(255, 230, 124, 0.16), transparent 26%),
        radial-gradient(circle at top right, rgba(78, 205, 196, 0.14), transparent 30%),
        linear-gradient(145deg, #071528 0%, #102744 45%, #16365c 100%);
}

.spot-danger-game::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.danger-scene {
    background: linear-gradient(160deg, rgba(7, 15, 27, 0.94), rgba(17, 36, 61, 0.88), rgba(25, 52, 84, 0.9));
}

.danger-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 35%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 34px);
    mix-blend-mode: screen;
    opacity: 0.45;
    pointer-events: none;
}

.danger-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(233, 241, 255, 0.94));
    border-radius: 14px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.danger-item.checked,
.danger-item.checked.is-danger,
.danger-item.checked:not(.is-danger) {
    background: linear-gradient(180deg, rgba(255, 244, 180, 0.98), rgba(255, 216, 109, 0.96));
    border-color: rgba(255, 157, 0, 0.95);
    color: #5b3900;
    box-shadow: 0 10px 24px rgba(255, 171, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transform: scale(1.06);
    pointer-events: auto;
    animation: none;
}

.danger-item.checked .item-text,
.danger-item.checked.is-danger .item-text,
.danger-item.checked:not(.is-danger) .item-text {
    color: #5b3900;
    text-shadow: none;
}

.danger-item.found-danger,
.danger-item.checked.found-danger,
.danger-item.checked.is-danger.found-danger {
    pointer-events: none;
}

.danger-item.wrong-click,
.danger-item.checked.wrong-click,
.danger-item.checked:not(.is-danger).wrong-click {
    pointer-events: none;
    color: white;
}

.danger-item.wrong-click .item-text,
.danger-item.checked.wrong-click .item-text {
    color: white;
}

.danger-item.locked {
    pointer-events: none;
}

.danger-ready-btn {
    min-width: 210px;
    padding: 13px 24px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 10px;
    border: 2px solid #6f7782;
    color: #0f2745;
    text-shadow: none;
    background: linear-gradient(180deg, #fdfefe 0%, #dce5ef 48%, #b7c6d6 49%, #e8eef6 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 2px rgba(28, 44, 63, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -2px 0 rgba(111, 119, 130, 0.55);
    animation: readyDialogPulse 2.8s ease-in-out infinite;
}

.danger-ready-btn:hover {
    color: #081a30;
    background: linear-gradient(180deg, #ffffff 0%, #e8eff7 48%, #c4d2df 49%, #f4f7fb 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(83, 148, 234, 0.35), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 rgba(111, 119, 130, 0.52);
}

.danger-ready-btn:disabled {
    opacity: 0.78;
    color: #5d6771;
    background: linear-gradient(180deg, #edf1f5 0%, #cbd5df 48%, #b5bec7 49%, #dae1e8 100%);
    transform: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 1px rgba(28, 44, 63, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 0 rgba(111, 119, 130, 0.28);
    animation: none;
}

body[data-active-section="dangerContainer"] .spot-danger-game {
    width: min(100%, 980px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid rgba(122, 194, 220, 0.18);
    box-shadow: 0 14px 34px rgba(0, 8, 20, 0.28);
}

body[data-active-section="dangerContainer"] .spot-danger-game::before,
body[data-active-section="dangerContainer"] .spot-danger-game::after,
body[data-active-section="dangerContainer"] .particles-bg,
body[data-active-section="dangerContainer"] .danger-scene::before,
body[data-active-section="dangerContainer"] .danger-scene::after {
    display: none;
}

body[data-active-section="dangerContainer"] .game-header-info {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(10, 23, 40, 0.96), rgba(19, 47, 73, 0.92));
    border: 1px solid rgba(126, 214, 223, 0.16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

body[data-active-section="dangerContainer"] .level-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

body[data-active-section="dangerContainer"] .game-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body[data-active-section="dangerContainer"] .stat-item {
    min-width: 0;
    min-height: 78px;
    justify-content: center;
    padding: 10px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(88, 171, 185, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-active-section="dangerContainer"] .level-description {
    margin-bottom: 0;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(8, 18, 35, 0.94), rgba(14, 37, 58, 0.9));
    border: 1px solid rgba(126, 214, 223, 0.12);
}

body[data-active-section="dangerContainer"] .danger-scene {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 14px;
    min-height: 0;
    padding: 18px;
    margin-bottom: 0;
    border: 1px solid rgba(126, 214, 223, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: visible;
}

body[data-active-section="dangerContainer"] .danger-item {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: none;
    min-height: 74px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(163, 209, 227, 0.3);
    background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(225, 236, 246, 0.96));
    box-shadow: 0 8px 18px rgba(0, 14, 30, 0.16);
    backdrop-filter: none;
    will-change: auto;
    align-items: flex-start;
    z-index: 1;
}

body[data-active-section="dangerContainer"] .item-text {
    line-height: 1.35;
    font-size: 0.98rem;
    text-shadow: none;
}

body[data-active-section="dangerContainer"] .item-icon {
    flex-shrink: 0;
    font-size: 1.2rem;
    margin-top: 1px;
}

body[data-active-section="dangerContainer"] .danger-item:hover:not(.checked) {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 107, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 247, 252, 0.98));
    box-shadow: 0 10px 20px rgba(20, 44, 69, 0.18);
}

body[data-active-section="dangerContainer"] .danger-item.checked,
body[data-active-section="dangerContainer"] .danger-item.checked.is-danger,
body[data-active-section="dangerContainer"] .danger-item.checked:not(.is-danger) {
    transform: none;
}

body[data-active-section="dangerContainer"] .feedback-area {
    min-height: 58px;
}

body[data-active-section="dangerContainer"] .feedback-message {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

body[data-active-section="dangerContainer"] .game-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
    gap: 10px;
}

body[data-active-section="dangerContainer"] .game-controls .btn {
    width: 100%;
    min-height: 50px;
    padding: 11px 12px;
    font-size: 0.92rem;
    line-height: 1.15;
}

body[data-active-section="dangerContainer"] .danger-ready-btn {
    min-width: 0;
}

@keyframes readyDialogPulse {
    0%, 100% {
        transform: translateY(0);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }
}

@keyframes sceneWarningShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
}

.danger-scene.scene-warning {
    animation: sceneWarningShake 0.35s ease;
}

@media (max-width: 768px) {
    #homeScreen .menu-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 460px);
    }

    #homeScreen .menu-options #btnSettings {
        grid-column: auto;
    }

    body[data-active-section="dangerContainer"] .spot-danger-game {
        padding: 14px 10px 16px;
        gap: 10px;
        border-radius: 20px;
    }

    body[data-active-section="dangerContainer"] .game-header-info {
        grid-template-columns: 1fr;
        padding: 12px 10px;
        gap: 10px;
    }

    body[data-active-section="dangerContainer"] .game-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body[data-active-section="dangerContainer"] .stat-item {
        min-height: 62px;
        padding: 8px 6px;
    }

    body[data-active-section="dangerContainer"] .stat-label {
        font-size: 0.64rem;
        line-height: 1.1;
        text-align: center;
    }

    body[data-active-section="dangerContainer"] .stat-value {
        font-size: 1rem;
        line-height: 1;
    }

    body[data-active-section="dangerContainer"] .danger-scene {
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
        padding: 10px;
    }

    body[data-active-section="dangerContainer"] .danger-item {
        min-height: 66px;
        padding: 12px 12px;
    }

    body[data-active-section="dangerContainer"] .level-description {
        padding: 12px 10px;
    }

    body[data-active-section="dangerContainer"] .level-description p {
        font-size: 0.92rem;
        line-height: 1.28;
    }

    body[data-active-section="dangerContainer"] .feedback-area {
        min-height: 50px;
    }

    body[data-active-section="dangerContainer"] .feedback-message {
        padding: 10px 12px;
        gap: 10px;
        font-size: 0.92rem;
    }

    body[data-active-section="dangerContainer"] .feedback-icon {
        font-size: 1.35rem;
    }

    body[data-active-section="dangerContainer"] .game-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        margin-top: 0;
        gap: 8px;
    }

    body[data-active-section="dangerContainer"] .game-controls .btn {
        width: 100%;
        min-height: 46px;
        font-size: 0.84rem;
        padding: 10px 8px;
        line-height: 1.15;
    }

    body[data-active-section="dangerContainer"] .danger-ready-btn {
        grid-column: 1 / -1;
        min-height: 58px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    #homeScreen .menu-options {
        grid-template-columns: 1fr;
        width: min(100%, 320px);
    }

    body[data-active-section="dangerContainer"] .game-controls {
        grid-template-columns: 1fr;
        position: static;
        padding: 4px 0 calc(env(safe-area-inset-bottom) + 6px);
        background: none;
    }

    body[data-active-section="dangerContainer"] .game-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-active-section="dangerContainer"] .stat-item:first-child {
        grid-column: 1 / -1;
        min-height: 58px;
    }

    body[data-active-section="dangerContainer"] .danger-scene {
        min-height: 0;
        padding: 8px;
    }

    body[data-active-section="dangerContainer"] .danger-item {
        min-height: 62px;
        padding: 11px 10px;
    }

    body[data-active-section="dangerContainer"] .danger-ready-btn {
        order: -1;
        min-height: 62px;
        font-size: 0.98rem;
    }

    body[data-active-section="dangerContainer"] .game-controls .btn {
        min-height: 44px;
        font-size: 0.82rem;
    }
}

/* Canvas responsive universal */
canvas {
    max-width: 100%;
    height: auto;
}

@media (max-width: 360px) {
    .logo-right {
        display: none;
    }

    .header-content {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
    }

    .header-logo {
        height: 34px;
        max-width: 64px;
    }

    .header-title h1 {
        font-size: 0.96em;
        justify-content: flex-start;
        text-align: left;
    }

    .hero {
        padding-bottom: 14px;
    }

    .hero h1 {
        font-size: 1.85em;
        gap: 10px;
    }

    .subtitle {
        font-size: 0.88rem;
        margin-bottom: 18px;
    }

    .player-info {
        padding: 14px 12px;
        margin-top: 14px;
    }

    .menu-options {
        grid-template-columns: 1fr;
        max-width: 280px;
        gap: 8px;
    }

    .menu-options #btnSettings {
        grid-column: auto;
        max-width: none;
    }
}

@media (orientation: portrait) and (max-width: 1024px) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .landscape-lock-overlay.active,
    body.mobile-touch-device[data-active-section="platformerContainer"] .landscape-lock-overlay.active {
        display: flex;
    }
}

/* ===== Adaptación pantallas grandes (≥1400px) ===== */
@media (min-width: 1400px) {
    body.gameplay-mode .container {
        max-width: 1100px;
    }

    .mission-grid {
        grid-template-columns: repeat(4, minmax(min(100%, 200px), 1fr));
    }
}

/* ===== Adaptación pantallas muy grandes (≥1800px) ===== */
@media (min-width: 1800px) {
    .container {
        max-width: 960px;
    }

    body.gameplay-mode .container {
        max-width: 960px;
    }

    .header-content {
        max-width: 960px;
    }

    .main-footer > *,
    .footer-content {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    .mission-grid {
        grid-template-columns: repeat(3, minmax(min(100%, 200px), 1fr));
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    body.mobile-touch-device:not(.runner-playing) {
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.mobile-touch-device:not(.heavy-gameplay-mode) .container,
    body.mobile-touch-device:not(.heavy-gameplay-mode) .screen.active {
        overflow: visible;
    }

    body.mobile-touch-device:not(.heavy-gameplay-mode) #homeScreen,
    body.mobile-touch-device:not(.heavy-gameplay-mode) #leaderboardScreen,
    body.mobile-touch-device:not(.heavy-gameplay-mode) #tournamentScreen,
    body.mobile-touch-device:not(.heavy-gameplay-mode) #instructionsScreen {
        min-height: max-content;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .game-content {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-game {
        min-height: max-content;
        overflow: visible;
        padding: 0;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px;
        grid-template-rows: auto auto auto;
        align-items: start;
        gap: 10px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info {
        margin: 0;
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 8px 10px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas {
        width: 100% !important;
        min-height: clamp(240px, 52vw, 420px);
        max-height: none;
        border: 2px solid rgba(0, 235, 170, 0.7);
        border-radius: 12px;
        box-shadow: 0 0 0 1px rgba(0, 235, 170, 0.18), 0 12px 28px rgba(0, 0, 0, 0.28);
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage {
        min-height: auto;
        grid-column: 1;
        grid-row: 2 / span 2;
        align-self: start;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-controls {
        width: 100%;
        max-width: none;
        margin-top: 0;
        grid-column: 1;
        grid-row: 3;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info {
        left: auto;
        right: auto;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: clamp(36px, 10vh, 72px);
        align-self: center;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        width: 108px;
        margin: 0;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-message {
        bottom: 10px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.76rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn {
        min-height: 56px;
        font-size: 1.2rem;
    }

    body[data-active-section="quizContainer"] .tv-options-grid,
    body[data-active-section="memoryContainer"] .memory-board {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (orientation: landscape) and (max-width: 667px) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-shell {
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 8px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info {
        padding: 7px 8px;
        gap: 6px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item {
        font-size: 0.74rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas {
        min-height: clamp(210px, 50vw, 290px);
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions {
        width: 92px;
        gap: 6px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions .btn {
        width: 100%;
        padding: 8px 6px;
        font-size: 0.68rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn {
        min-height: 48px;
        font-size: 1rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn span {
        font-size: 0.66rem;
    }
}

@media (orientation: landscape) and (min-width: 668px) and (max-width: 844px) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-shell {
        grid-template-columns: minmax(0, 1fr) 104px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas {
        min-height: clamp(230px, 50vw, 360px);
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions {
        width: 104px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions .btn {
        width: 100%;
        padding: 9px 8px;
        font-size: 0.74rem;
    }
}

@media (orientation: landscape) and (min-width: 845px) and (max-width: 1024px) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-shell {
        grid-template-columns: minmax(0, 1fr) 124px;
        gap: 12px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info {
        padding: 9px 12px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item {
        font-size: 0.84rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas {
        min-height: clamp(280px, 44vw, 430px);
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions {
        width: 124px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions .btn {
        width: 100%;
        padding: 10px 10px;
        font-size: 0.8rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn {
        min-height: 60px;
        font-size: 1.25rem;
    }
}
    body[data-active-section="dangerContainer"] .danger-scene {
        min-height: calc(100dvh - 200px);
    }

@media screen and (min-width: 960px) and (min-height: 600px) {
    body[data-active-section="scenarioContainer"] #scenarioContainer.active {
        min-height: calc(100dvh - 106px) !important;
        padding: 8px 16px 14px !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    body[data-active-section="scenarioContainer"] .game-content {
        overflow: hidden !important;
    }

    body[data-active-section="scenarioContainer"] #scenarioContainer.active,
    body[data-active-section="scenarioContainer"] .scenario-container {
        gap: 0 !important;
        padding: 0 !important;
        max-width: 1240px !important;
        min-height: calc(100dvh - 106px) !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* ===== Ajustes Finales Home / Hostinger ===== */
.main-header {
    background: linear-gradient(135deg, rgba(7, 17, 31, 0.94) 0%, rgba(15, 52, 96, 0.9) 100%);
    border-bottom: 1px solid rgba(78, 205, 196, 0.18);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: minmax(88px, 112px) minmax(0, 1fr) minmax(88px, 112px);
    gap: clamp(12px, 2vw, 24px);
    padding: 12px clamp(14px, 3vw, 26px);
}

.header-title h1 {
    font-size: clamp(1.1rem, 1vw + 0.9rem, 1.7rem);
    letter-spacing: 0.02em;
}

#homeScreen .player-info {
    background: linear-gradient(180deg, rgba(15, 52, 96, 0.95) 0%, rgba(9, 24, 44, 0.98) 100%);
    border: 1px solid rgba(78, 205, 196, 0.16);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

#homeScreen .menu-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
    width: min(100%, 760px);
    margin: 24px auto 0;
    align-items: stretch;
}

#homeScreen .menu-options .btn {
    width: 100%;
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 14px 18px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.95rem;
    box-shadow: 0 7px 0 rgba(0, 0, 0, 0.34), 0 14px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: homeMenuReveal 0.46s ease both;
}

#homeScreen .menu-options .btn:nth-child(1) { animation-delay: 0.04s; }
#homeScreen .menu-options .btn:nth-child(2) { animation-delay: 0.1s; }
#homeScreen .menu-options .btn:nth-child(3) { animation-delay: 0.16s; }
#homeScreen .menu-options .btn:nth-child(4) { animation-delay: 0.22s; }

#homeScreen .menu-options #btnSettings {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
}

@keyframes homeMenuReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-footer {
    padding: 18px 0 22px;
    border-top: 2px solid rgba(78, 205, 196, 0.22);
}

.footer-content {
    display: flex;
    justify-content: center;
}

.developer-badge {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 14px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(12, 23, 42, 0.88), rgba(18, 49, 82, 0.74));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 28px rgba(0, 0, 0, 0.22);
    gap: 10px 14px;
}

.code-bracket {
    font-size: 1.85em;
}

.dev-text,
.dev-title,
.copyright {
    text-align: center;
}

.separator {
    opacity: 0.4;
}

body[data-active-section="memoryContainer"] .memory-game-container {
    width: min(100%, 920px);
    padding: clamp(10px, 3vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body[data-active-section="memoryContainer"] .memory-stats {
    gap: 12px;
    margin-bottom: 6px;
}

body[data-active-section="memoryContainer"] .memory-stat {
    padding: 12px 16px;
}

body[data-active-section="memoryContainer"] .memory-board {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.8vw, 14px) !important;
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    margin: 0 auto 8px !important;
}

body[data-active-section="memoryContainer"] .memory-card-front:not(.mm-card-face-art),
body[data-active-section="memoryContainer"] .memory-card-back {
    padding: clamp(8px, 1.8vw, 12px);
    border-radius: 14px;
}

body[data-active-section="memoryContainer"] .memory-card-front.mm-card-face-art {
    padding: 0;
    border-radius: 10px;
}

body[data-active-section="memoryContainer"] .card-emoji {
    font-size: clamp(1.3rem, 3.5vw, 2.2rem);
    margin-bottom: 6px;
}

body[data-active-section="memoryContainer"] .card-name {
    font-size: clamp(0.58rem, 1.5vw, 0.82rem);
    line-height: 1.15;
}

body[data-active-section="memoryContainer"] .memory-controls {
    position: static;
    margin-top: 4px;
    padding: 0;
    background: none;
    backdrop-filter: none;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-game {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 24px;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-shell {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info {
    order: 1;
    margin: 0;
    padding: 10px 12px;
    gap: 10px;
    background: linear-gradient(180deg, rgba(47, 60, 60, 0.92) 0%, rgba(26, 35, 37, 0.96) 100%);
    border: 1px solid rgba(196, 212, 205, 0.2);
    border-radius: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(56px, auto);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    line-height: 1.25;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item strong {
    display: block;
    margin-top: 4px;
    font-size: 0.92rem;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item-boss {
    display: block;
    grid-column: 1 / -1;
    min-height: 56px;
    visibility: hidden;
    opacity: 0.45;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item-boss.is-active {
    visibility: visible;
    opacity: 1;
    border-color: rgba(255, 107, 107, 0.34);
    background: linear-gradient(180deg, rgba(129, 30, 30, 0.34) 0%, rgba(74, 14, 14, 0.24) 100%);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage {
    order: 2;
    min-height: auto;
    position: relative;
    padding: 18px 16px 14px;
    border-radius: 28px 28px 22px 22px;
    background: linear-gradient(180deg, #c7cfbf 0%, #9fa995 100%);
    border: 1px solid rgba(34, 45, 40, 0.26);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72), 0 18px 34px rgba(0, 0, 0, 0.24);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage::before {
    content: '';
    position: absolute;
    inset: 10px 10px auto;
    height: calc(100% - 20px);
    border-radius: 22px 22px 16px 16px;
    background: linear-gradient(180deg, rgba(88, 95, 91, 0.96) 0%, rgba(44, 50, 47, 0.98) 100%);
    z-index: 0;
}

body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: fill !important;
    margin: 0;
    position: relative;
    z-index: 1;
    border: 8px solid #45504b !important;
    border-radius: 14px !important;
    background: #95a584 !important;
    box-shadow: inset 0 0 0 2px rgba(207, 224, 190, 0.22), 0 14px 30px rgba(0, 0, 0, 0.24);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-message {
    bottom: 10px;
    z-index: 2;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
    align-items: stretch;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-quick-actions .btn {
    width: 100%;
    margin: 0;
    min-height: 48px;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-controls {
    order: 4;
    margin-bottom: 0;
    display: none;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-mobile-console {
    display: block !important;
    order: 5;
    width: 100%;
    position: relative;
    padding: 16px 16px 22px;
    border-radius: 24px 24px 38px 24px;
    background: linear-gradient(180deg, #d7dfca 0%, #a9b39d 100%);
    border: 1px solid rgba(38, 47, 41, 0.26);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72), 0 18px 30px rgba(0, 0, 0, 0.18);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-faceplate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 10px;
    align-items: end;
}
/* Rejilla de parlante estilo Game Boy DMG: 6 ranuras diagonales paralelas */
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-speaker {
    width: 78px;
    height: 56px;
    margin-bottom: 6px;
    margin-right: 2px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 0 0 18px 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(145deg, #c8d0bc 0%, #b3bdb0 48%, #a8b2a5 100%);
    border: none;
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.22),
        inset -2px -2px 5px rgba(255, 255, 255, 0.45);
}
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-speaker span {
    display: block;
    flex: 0 0 auto;
    width: 3px;
    height: 32px;
    border-radius: 2px;
    transform: rotate(-34deg);
    background: linear-gradient(
        105deg,
        #0a0e0c 0%,
        #1e2822 22%,
        #3a4540 50%,
        #1a221e 78%,
        #080b09 100%
    );
    box-shadow:
        inset 1px 0 1px rgba(0, 0, 0, 0.9),
        0 1px 0 rgba(255, 255, 255, 0.14);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-inline: 4px;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-brand {
    color: #38453e;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-led {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, #ffec9c 0%, #ff6a3d 45%, #9b2617 100%);
    box-shadow: 0 0 10px rgba(255, 106, 61, 0.6);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 132px);
    gap: 14px;
    width: 100%;
    margin: 0;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn {
    min-height: 72px;
    color: #f8fbf5;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-dpad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-action-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-actions {
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 14px;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-actions .btn {
    min-height: 46px;
    min-width: 0;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    line-height: 1.1;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn-dpad {
    background: linear-gradient(180deg, #4c5652 0%, #2a302d 100%);
    border-radius: 18px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn-console-action {
    min-width: 110px;
    min-height: 110px;
    border-radius: 999px;
    background: linear-gradient(180deg, #a43463 0%, #712145 100%);
    font-size: 1.9rem;
    letter-spacing: 0.06em;
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28), inset 0 3px 0 rgba(255, 255, 255, 0.16);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn-console-action span {
    font-size: 0.74rem;
    min-height: 0.9rem;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn:disabled {
    opacity: 0.72;
    filter: grayscale(0.1);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn[data-action="shoot"]:not(:disabled) {
    box-shadow: 0 0 0 3px rgba(255, 236, 156, 0.16), 0 12px 22px rgba(0, 0, 0, 0.28), inset 0 3px 0 rgba(255, 255, 255, 0.16);
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item,
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-top,
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-actions .btn,
body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn span {
    text-transform: uppercase;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .landscape-lock-overlay,
body.mobile-touch-device[data-active-section="runnerContainer"] .landscape-lock-overlay.active {
    display: none !important;
}

@media (max-width: 768px) {
    #homeScreen .menu-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 460px);
        gap: 10px;
        margin-top: 18px;
    }

    #homeScreen .menu-options .btn {
        min-height: 52px;
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .developer-badge {
        padding: 14px 16px;
    }
}

@media (max-width: 540px) {
    #homeScreen .menu-options {
        grid-template-columns: 1fr;
        width: min(100%, 320px);
    }

    #homeScreen .menu-options #btnSettings {
        max-width: none;
    }

    .developer-badge {
        gap: 6px;
    }

    .code-bracket,
    .separator {
        display: none;
    }

    body[data-active-section="memoryContainer"] .memory-board {
        gap: 7px !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-controls {
        grid-template-columns: 1fr;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-faceplate {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-speaker {
        width: min(100%, 220px);
        height: 52px;
        margin: 10px auto 0;
        justify-self: center;
        border-radius: 0 0 22px 22px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-speaker span {
        height: 28px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info {
        grid-template-columns: 1fr 1fr;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item-boss {
        min-height: 52px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-console-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-dpad {
        grid-template-columns: 1fr 1fr;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-action-cluster {
        justify-content: flex-start;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .touch-btn-console-action {
        width: 100%;
        min-width: 0;
        min-height: 82px;
        border-radius: 22px;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item {
        padding: 8px;
        font-size: 0.72rem;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-info .info-item strong {
        font-size: 0.84rem;
    }
}

/* ===== Ajustes Finales Quiz Movil ===== */
body[data-active-section="quizContainer"] .tv-quiz-container {
    width: min(100%, 940px);
}

@media (max-width: 768px) {
    body[data-active-section="quizContainer"] .tv-quiz-container {
        padding: 14px 12px 18px;
        border-radius: 18px;
        min-height: auto;
    }

    body[data-active-section="quizContainer"] .tv-header {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 14px 14px 16px;
        margin-bottom: 14px;
        border-radius: 16px;
    }

    body[data-active-section="quizContainer"] .tv-logo {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    body[data-active-section="quizContainer"] .tv-icon {
        font-size: 1.8rem;
    }

    body[data-active-section="quizContainer"] .tv-title {
        font-size: 1rem;
        letter-spacing: 0.08em;
        line-height: 1.15;
    }

    body[data-active-section="quizContainer"] .tv-score {
        align-items: center;
    }

    body[data-active-section="quizContainer"] .score-label {
        font-size: 0.72rem;
    }

    body[data-active-section="quizContainer"] .score-value {
        font-size: 1.45rem;
    }

    body[data-active-section="quizContainer"] .tv-timer-container {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 8px 10px;
        padding: 10px 12px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    body[data-active-section="quizContainer"] .timer-label {
        font-size: 0.82rem;
    }

    body[data-active-section="quizContainer"] .timer-display {
        min-width: auto;
        font-size: 1.35rem;
        justify-self: start;
    }

    body[data-active-section="quizContainer"] .timer-bar {
        grid-column: 1 / -1;
        height: 10px;
    }

    body[data-active-section="quizContainer"] .tv-progress {
        margin-bottom: 12px;
        font-size: 0.86rem;
    }

    body[data-active-section="quizContainer"] .tv-host-section {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        margin-bottom: 14px;
    }

    body[data-active-section="quizContainer"] .host-character {
        min-width: 0;
        gap: 6px;
    }

    body[data-active-section="quizContainer"] .host-avatar-large {
        font-size: 2.4rem;
        padding: 10px;
        border-width: 3px;
    }

    body[data-active-section="quizContainer"] .host-name {
        font-size: 0.72rem;
        line-height: 1.1;
    }

    body[data-active-section="quizContainer"] .question-bubble {
        padding: 14px 14px 14px 16px;
        border-radius: 16px;
    }

    body[data-active-section="quizContainer"] .question-bubble::before {
        display: none;
    }

    body[data-active-section="quizContainer"] .bubble-content {
        font-size: 0.98rem;
        line-height: 1.42;
    }

    body[data-active-section="quizContainer"] .tv-options-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    body[data-active-section="quizContainer"] .tv-option-btn {
        min-height: 68px;
        padding: 12px 12px 12px 10px;
        gap: 10px;
        border-radius: 14px;
        align-items: flex-start;
    }

    body[data-active-section="quizContainer"] .option-letter {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
        margin-top: 2px;
    }

    body[data-active-section="quizContainer"] .option-text {
        font-size: 0.94rem;
        line-height: 1.32;
    }

    body[data-active-section="quizContainer"] .tv-explanation {
        margin-top: 10px;
    }

    body[data-active-section="quizContainer"] .host-speech {
        gap: 10px;
        align-items: stretch;
    }

    body[data-active-section="quizContainer"] .host-avatar {
        font-size: 2.4rem;
        flex-shrink: 0;
    }

    body[data-active-section="quizContainer"] .speech-bubble {
        padding: 14px;
        border-radius: 14px;
    }

    body[data-active-section="quizContainer"] .speech-bubble strong {
        font-size: 1.02rem;
        margin-bottom: 8px;
    }

    body[data-active-section="quizContainer"] .speech-bubble p {
        font-size: 0.92rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    body[data-active-section="quizContainer"] .correct-answer-label {
        padding: 10px 12px;
        margin: 10px 0;
        font-size: 0.94rem !important;
    }

    body[data-active-section="quizContainer"] .tv-controls {
        margin-top: 10px;
        padding-top: 8px;
    }

    body[data-active-section="quizContainer"] .tv-controls .btn {
        width: min(100%, 240px);
        min-height: 46px;
    }

    body[data-active-section="quizContainer"] .results-header {
        margin-bottom: 18px;
    }

    body[data-active-section="quizContainer"] .results-icon {
        font-size: 3.2rem;
        margin-bottom: 8px;
    }

    body[data-active-section="quizContainer"] .results-title {
        font-size: 1.5rem;
        line-height: 1.15;
    }

    body[data-active-section="quizContainer"] .results-stats {
        gap: 10px;
        margin-bottom: 16px;
    }

    body[data-active-section="quizContainer"] .stat-card {
        width: 100%;
        min-width: 0;
        padding: 16px 14px;
    }

    body[data-active-section="quizContainer"] .stat-value {
        font-size: 1.7rem;
    }

    body[data-active-section="quizContainer"] .stat-label {
        font-size: 0.86rem;
    }

    body[data-active-section="quizContainer"] .host-final-message {
        gap: 12px;
        padding: 16px 14px;
        margin-bottom: 16px;
        border-radius: 16px;
    }

    body[data-active-section="quizContainer"] .final-speech-bubble p {
        font-size: 0.95rem;
        line-height: 1.42;
    }

    body[data-active-section="quizContainer"] .results-actions,
    body[data-active-section="quizContainer"] .game-over-actions {
        gap: 10px;
    }

    body[data-active-section="quizContainer"] .results-actions .btn,
    body[data-active-section="quizContainer"] .game-over-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body[data-active-section="quizContainer"] .tv-quiz-container {
        padding: 10px 10px 16px;
        border-radius: 14px;
    }

    body[data-active-section="quizContainer"] .tv-header {
        padding: 12px 10px 14px;
    }

    body[data-active-section="quizContainer"] .tv-title {
        font-size: 0.92rem;
        letter-spacing: 0.05em;
    }

    body[data-active-section="quizContainer"] .tv-timer-container {
        grid-template-columns: 1fr auto;
    }

    body[data-active-section="quizContainer"] .timer-label {
        justify-self: start;
    }

    body[data-active-section="quizContainer"] .timer-display {
        font-size: 1.2rem;
    }

    body[data-active-section="quizContainer"] .tv-host-section {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
    }

    body[data-active-section="quizContainer"] .host-avatar-large {
        font-size: 2rem;
        padding: 8px;
    }

    body[data-active-section="quizContainer"] .host-name {
        font-size: 0.64rem;
    }

    body[data-active-section="quizContainer"] .question-bubble {
        padding: 12px;
    }

    body[data-active-section="quizContainer"] .bubble-content {
        font-size: 0.92rem;
    }

    body[data-active-section="quizContainer"] .tv-option-btn {
        min-height: 62px;
        padding: 10px;
        gap: 8px;
    }

    body[data-active-section="quizContainer"] .option-letter {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    body[data-active-section="quizContainer"] .option-text {
        font-size: 0.88rem;
    }

    body[data-active-section="quizContainer"] .host-speech {
        gap: 8px;
    }

    body[data-active-section="quizContainer"] .host-avatar {
        font-size: 2rem;
    }

    body[data-active-section="quizContainer"] .speech-bubble {
        padding: 12px;
    }

    body[data-active-section="quizContainer"] .speech-bubble p,
    body[data-active-section="quizContainer"] .final-speech-bubble p {
        font-size: 0.88rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MULTIPLAYER TOURNAMENT — Full UI Styles
═══════════════════════════════════════════════════════════════ */

/* ── Screen ──────────────────────────────────────────────────── */
#multiplayerScreen {
    position: fixed !important;
    inset: 0 !important;
    min-height: unset;
    background: transparent;
    display: none;
    align-items: unset;
    justify-content: unset;
    padding: 0;
    overflow: hidden;
}
#multiplayerScreen::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.035) 1px, transparent 1px);
    background-size: 52px 52px;
    animation: mpGridScroll 9s linear infinite;
    pointer-events: none;
    z-index: 0;
}
#multiplayerScreen.mp-open::before {
    display: none;
}
@keyframes mpGridScroll { from{background-position:0 0} to{background-position:52px 52px} }
#mpLobby, #mpWaiting, #mpResults {
    position: relative; z-index: 1;
    width: 100%;
}
.mp-logo-area { text-align: center; padding: 10px 0 22px; }
.mp-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: mpLogoFloat 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0,229,255,0.55));
}
.mp-logo-icon img {
    width: clamp(64px, 18vw, 80px);
    height: clamp(64px, 18vw, 80px);
    object-fit: contain;
    border-radius: 18px;
}
@keyframes mpLogoFloat {
    0%,100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-14px) rotate(3deg); }
}
.mp-logo-title {
    font-size: clamp(1.5rem,5vw,2.1rem); font-weight: 900; letter-spacing: 0.14em;
    color: #fff; margin: 10px 0 4px; animation: mpTitlePulse 4s ease infinite;
    text-shadow: 0 0 28px rgba(0,229,255,0.45);
}
@keyframes mpTitlePulse {
    0%,100% { text-shadow: 0 0 28px rgba(0,229,255,0.4); }
    50%      { text-shadow: 0 0 44px rgba(0,229,255,0.8), 0 0 90px rgba(0,229,255,0.18); }
}
.mp-logo-sub { font-size: 0.78rem; color: rgba(255,255,255,0.35); letter-spacing: 0.07em; }
.mp-tabs {
    display: flex; gap: 5px; margin-bottom: 14px;
    background: rgba(255,255,255,0.04); padding: 5px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
}
.mp-tab {
    flex: 1 0 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 4px 7px;
    background: none;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.38);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.mp-tab-ico {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
.mp-tab-active .mp-tab-ico {
    border-color: rgba(0, 229, 255, 0.55);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
}
.mp-tab-txt { line-height: 1.1; }
.mp-btn-ico {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 6px;
    vertical-align: middle;
    margin-right: 8px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}
.mp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mp-tab-active { background: rgba(0,229,255,0.12); border: 1px solid rgba(0,229,255,0.3); color: #00e5ff; box-shadow: 0 0 12px rgba(0,229,255,0.15); }
.mp-tab:hover:not(.mp-tab-active) { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06); }
.mp-tab-panels {
    background: rgba(8,12,26,0.92); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 20px; margin-bottom: 12px;
}
.mp-tab-panel { display: flex; flex-direction: column; gap: 14px; }
.mp-tab-panel.hidden { display: none !important; }
.mp-field { display: flex; flex-direction: column; gap: 6px; }
.mp-label { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.33); }
.mp-input {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
    border-radius: 10px; padding: 11px 14px; color: #fff; font-size: 0.94rem;
    font-family: inherit; outline: none; width: 100%; box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mp-input:focus { border-color: rgba(0,229,255,0.5); box-shadow: 0 0 0 2px rgba(0,229,255,0.1); }
.mp-input.shake { animation: inputShakeMP 0.4s ease; border-color: #ff4444 !important; }
@keyframes inputShakeMP { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
.mp-code-input { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.25em; text-align: center; }
.mp-avatars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 520px) {
    .mp-avatars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mp-av-btn {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 12px;
    background: rgba(4, 12, 28, 0.85);
    border: 2px solid rgba(0, 229, 255, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mp-av-btn-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mp-av-btn:hover {
    transform: scale(1.06);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
}
.mp-av-selected {
    border-color: #00e5ff;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35), 0 0 18px rgba(124, 77, 255, 0.35);
    transform: scale(1.04);
}
.mp-av-img {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25);
    border: 1px solid rgba(0, 229, 255, 0.35);
}
.mp-av-img--xs { width: 22px; height: 22px; }
.mp-av-img--sm { width: 30px; height: 30px; }
.mp-av-img--md { width: 40px; height: 40px; }
.mp-av-img--lg { width: 56px; height: 56px; border-radius: 14px; }
.mp-av-img--xl { width: 72px; height: 72px; border-radius: 16px; }
.mp-av-emoji { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.mp-av-emoji--xs { font-size: 1rem; }
.mp-av-emoji--sm { font-size: 1.25rem; }
.mp-av-emoji--lg { font-size: 2.4rem; }
.mp-av-emoji--xl { font-size: 2.8rem; }
.sp-av, .sp-feed-av, .mp-pr-av, .t-lb-av, .pt-rank-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.mp-pc-avatar, .mp-pod2-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-rt-player { display: flex; align-items: center; gap: 8px; }
.mp-btn-primary {
    width: 100%; padding: 14px; background: linear-gradient(90deg, #0088cc, #0055aa);
    border: none; border-radius: 12px; color: #fff; font-size: 0.96rem; font-weight: 900;
    letter-spacing: 0.1em; cursor: pointer; font-family: inherit; position: relative;
    overflow: hidden; box-shadow: 0 4px 22px rgba(0,136,204,0.4); transition: transform 0.15s, box-shadow 0.15s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.mp-btn-primary::before {
    content: ''; position: absolute; top: 0; left: -70%; width: 50%; height: 100%;
    background: rgba(255,255,255,0.18); transform: skewX(-18deg); animation: mpBtnShine 3s ease infinite;
}
@keyframes mpBtnShine { 0%,100%{left:-70%} 60%{left:140%} }
.mp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,136,204,0.55); }
.mp-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.mp-loading-dot {
    display: inline-block; width: 10px; height: 10px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: mpSpin 0.7s linear infinite;
    vertical-align: middle; margin-right: 4px;
}
@keyframes mpSpin { to { transform: rotate(360deg); } }
.mp-btn-secondary {
    padding: 12px 22px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px; color: rgba(255,255,255,0.65); font-size: 0.88rem; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.mp-btn-secondary:hover { background: rgba(255,255,255,0.12); color: #fff; }
.mp-demo-info {
    background: rgba(0,229,255,0.05); border: 1px solid rgba(0,229,255,0.14);
    border-radius: 10px; padding: 14px; text-align: center;
}
.mp-demo-icon { font-size: 2rem; margin-bottom: 6px; }
.mp-demo-info p { font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.5; margin: 0 0 10px; }
.mp-demo-bots { text-align: left; list-style: none; padding: 0; margin: 0; }
.mp-demo-bots li { font-size: 0.78rem; color: rgba(255,255,255,0.45); padding: 3px 0; }
.mp-demo-bots strong { color: rgba(255,255,255,0.78); }

/* ── Sección título pestañas ── */
.mp-section-title {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(0,229,255,0.45);
    margin-bottom: 14px; text-align: center;
}

/* ── Lista de salas (pestaña Unirse) ── */
.mp-room-list {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: 12px;
    max-height: 170px;
    overflow-y: auto;
    margin-bottom: 8px;
}
.mp-rl-empty {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 20px; font-size: 0.78rem;
    color: rgba(255,255,255,0.3); flex-direction: column;
}
.mp-rl-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid rgba(0,229,255,0.15);
    border-top-color: #00e5ff; border-radius: 50%;
    animation: mpWSpin 0.9s linear infinite;
}
.mp-rl-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.15s;
}
.mp-rl-row:last-child { border-bottom: none; }
.mp-rl-row:hover { background: rgba(0,229,255,0.08); }
.mp-rl-code {
    font-family: monospace; font-weight: 900; font-size: 1rem;
    letter-spacing: 0.15em; color: #00e5ff;
    text-shadow: 0 0 10px rgba(0,229,255,0.5);
    min-width: 70px;
}
.mp-rl-players { font-size: 0.72rem; color: rgba(255,255,255,0.45); flex: 1; display: flex; align-items: center; gap: 5px; }
.mp-rl-join-hint { font-size: 0.62rem; color: rgba(0,229,255,0.35); font-weight: 700; letter-spacing: 0.08em; }
.mp-rl-refresh {
    width: 100%; background: none; border: 1px solid rgba(0,229,255,0.15);
    border-radius: 8px; color: rgba(0,229,255,0.45); font-size: 0.72rem;
    padding: 5px; cursor: pointer; font-family: inherit;
    transition: all 0.2s; margin-bottom: 12px;
}
.mp-rl-refresh:hover { background: rgba(0,229,255,0.07); color: #00e5ff; }
.mp-join-divider {
    text-align: center; font-size: 0.62rem; color: rgba(255,255,255,0.18);
    margin: 10px 0 14px; letter-spacing: 0.04em;
}
.mp-input-flash {
    border-color: #00e5ff !important;
    box-shadow: 0 0 0 2px rgba(0,229,255,0.35) !important;
    animation: mpInputFlash 0.5s ease;
}
@keyframes mpInputFlash { 0%,100%{background:rgba(0,229,255,0.04)} 50%{background:rgba(0,229,255,0.14)} }

/* ── Demo IA rediseñada ── */
.mp-demo-card {
    background: linear-gradient(135deg, rgba(0,229,255,0.04), rgba(168,85,247,0.04));
    border: 1px solid rgba(0,229,255,0.14);
    border-radius: 14px; padding: 16px 14px 12px; margin-bottom: 14px;
}
.mp-demo-header { text-align: center; margin-bottom: 14px; }
.mp-demo-badge {
    display: inline-block; background: rgba(0,255,136,0.12);
    border: 1px solid rgba(0,255,136,0.25); border-radius: 30px;
    font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em;
    color: #00ff88; padding: 3px 10px; margin-bottom: 8px; text-transform: uppercase;
}
.mp-demo-icon-wrap { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
.mp-demo-headline { font-size: 1rem; font-weight: 800; color: #e0e0ff; margin-bottom: 8px; letter-spacing: 0.02em; }
.mp-demo-desc { font-size: 0.74rem; color: rgba(255,255,255,0.42); line-height: 1.55; margin: 0; }
.mp-demo-desc strong { color: rgba(255,255,255,0.7); }
.mp-demo-bots-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px;
}
.mp-bot-card {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 10px 6px; text-align: center;
    display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.mp-bot-av   { font-size: 1.6rem; line-height: 1; }
.mp-bot-name { font-size: 0.66rem; font-weight: 800; color: rgba(255,255,255,0.75); }
.mp-bot-lvl  { font-size: 0.55rem; font-weight: 700; border-radius: 20px; padding: 2px 7px; letter-spacing: 0.05em; }
.mp-bot-easy { background: rgba(0,255,136,0.12); color: #00ff88; }
.mp-bot-med  { background: rgba(255,215,0,0.12);  color: #ffd700; }
.mp-bot-hard { background: rgba(255,68,68,0.12);  color: #ff4444; }
.mp-bot-desc { font-size: 0.57rem; color: rgba(255,255,255,0.3); line-height: 1.35; }
.mp-back-link {
    width: 100%; background: none; border: none; color: rgba(255,255,255,0.25);
    font-size: 0.78rem; cursor: pointer; padding: 8px; text-align: center;
    font-family: inherit; transition: color 0.2s;
}
.mp-back-link:hover { color: rgba(255,255,255,0.55); }
/* Waiting Room */
.mp-wr-top { text-align: center; margin-bottom: 22px; }
.mp-room-card {
    display: inline-flex; align-items: center; gap: 12px;
    background: rgba(0,229,255,0.07); border: 1px solid rgba(0,229,255,0.26);
    border-radius: 14px; padding: 14px 22px; margin-bottom: 8px;
    animation: roomCardGlow 3s ease infinite;
}
@keyframes roomCardGlow { 0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0.2)} 50%{box-shadow:0 0 0 7px rgba(0,229,255,0)} }
.mp-rc-label { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.2em; color: rgba(0,229,255,0.5); text-transform: uppercase; }
.mp-rc-code { font-size: 2rem; font-weight: 900; letter-spacing: 0.25em; color: #00e5ff; text-shadow: 0 0 18px rgba(0,229,255,0.7); font-family: monospace; }
.mp-rc-copy { background: none; border: none; font-size: 1.1rem; cursor: pointer; opacity: 0.55; transition: opacity 0.2s; }
.mp-rc-copy:hover { opacity: 1; }
.mp-wr-subtitle { font-size: 0.74rem; color: rgba(255,255,255,0.28); }
.mp-players-title { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.22); margin-bottom: 12px; text-align: center; }
.mp-players-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 10px; margin-bottom: 22px; }
.mp-player-card {
    position: relative;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; padding: 16px 10px; text-align: center;
    animation: mpCardPop 0.45s cubic-bezier(0.34,1.56,0.64,1) var(--delay,0ms) both;
}
.mp-pc-kick {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255, 45, 70, 0.92); color: #fff;
    font-size: 12px; font-weight: 900; line-height: 22px; cursor: pointer;
}
@keyframes mpCardPop { from{opacity:0;transform:scale(0.65) translateY(24px)} to{opacity:1;transform:scale(1) translateY(0)} }
.mp-me { border-color: rgba(0,229,255,0.38); background: rgba(0,229,255,0.07); box-shadow: 0 0 18px rgba(0,229,255,0.12); }
.mp-pc-empty { border-style: dashed; opacity: 0.28; animation: none; }
.mp-pc-avatar { font-size: 2.1rem; margin-bottom: 6px; }
.mp-pc-name { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.72); word-break: break-word; }
.mp-pc-status { font-size: 0.58rem; color: rgba(255,255,255,0.26); margin-top: 3px; }
.mp-dot-online { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #25d366; box-shadow: 0 0 5px #25d366; margin-right: 3px; }
.mp-you-badge { background: rgba(0,229,255,0.18); border: 1px solid rgba(0,229,255,0.4); border-radius: 4px; padding: 0 4px; font-size: 0.54rem; color: #00e5ff; vertical-align: middle; }
.mp-wr-bottom { text-align: center; margin-bottom: 18px; }
.mp-start-btn {
    padding: 16px 38px; background: linear-gradient(90deg,#ff6b35,#ff2a00);
    border: none; border-radius: 14px; color: #fff; font-size: 1.1rem; font-weight: 900;
    letter-spacing: 0.12em; cursor: pointer; font-family: inherit; position: relative;
    overflow: hidden; box-shadow: 0 4px 28px rgba(255,80,0,0.5);
    animation: startBtnPulse 2.2s ease infinite;
    display: inline-flex; align-items: center; gap: 10px; transition: transform 0.15s;
}
.mp-start-btn::before {
    content:''; position:absolute; top:-50%; left:-60%; width:45%; height:200%;
    background:rgba(255,255,255,0.22); transform:skewX(-18deg); animation:mpBtnShine 2.2s ease infinite;
}
@keyframes startBtnPulse { 0%,100%{box-shadow:0 4px 28px rgba(255,80,0,0.5)} 50%{box-shadow:0 4px 42px rgba(255,80,0,0.78),0 0 0 5px rgba(255,80,0,0.1)} }
.mp-start-btn.hidden,
#mpStartBtn[hidden] { display: none !important; }
.mp-start-btn:disabled { opacity: 0.42; animation: none; cursor: not-allowed; box-shadow: none; }
.mp-start-btn:hover:not(:disabled) { transform: translateY(-2px); }
.mp-start-icon { font-size: 1.4rem; }
.mp-waiting-msg { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.78rem; color: rgba(255,255,255,0.32); }
.mp-wm-dots { display: flex; gap: 4px; }
.mp-wm-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.28); animation: mpDotPulse 1.4s ease infinite; }
.mp-wm-dots span:nth-child(2) { animation-delay: 0.2s; }
.mp-wm-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mpDotPulse { 0%,80%,100%{transform:scale(0.8);opacity:.3} 40%{transform:scale(1.3);opacity:1} }
.mp-phases-preview { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
#mpWaiting.is-versus .mp-phases-preview { display: none; }
.mp-versus-team { margin: 0 0 14px; }
.mp-versus-team .mp-btn-primary.is-on { box-shadow: 0 0 0 2px #7dffe0; }
.mp-side-pick {
    position: fixed; inset: 0; z-index: 10020;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2, 6, 18, 0.9);
}
.mp-side-card {
    width: min(420px, calc(100vw - 28px));
    padding: 28px 22px 22px;
    text-align: center;
    border-radius: 18px;
    background: #0c1424;
    border: 1px solid rgba(125, 255, 224, 0.35);
}
.mp-side-count {
    font-size: 64px; line-height: 1; font-weight: 800;
    color: #7dffe0; margin: 8px 0 6px;
}
.mp-side-card p { margin: 0 0 16px; color: #c9d6ea; }
.mp-side-actions { display: flex; gap: 10px; }
.mp-side-actions button {
    flex: 1; min-height: 168px; padding: 0; border: 2px solid transparent; border-radius: 14px;
    overflow: hidden; cursor: pointer; background: #101826; color: #e8fbff;
    display: flex; flex-direction: column;
}
.mp-side-actions img { width: 100%; height: 124px; object-fit: cover; display: block; }
.mp-side-actions span { display: block; padding: 8px 4px 10px; font-weight: 800; letter-spacing: 0.04em; }
.mp-side-actions button.is-on { border-color: #7dffe0; box-shadow: 0 0 0 2px #7dffe0; }
#mpWaiting .mp-player-card,
#mpWaiting .mp-room-card,
body.mp-modal-open .header-logo,
body.mp-modal-open .mp-logo-icon {
    animation: none !important;
}
.mp-pp-title { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.18em; color: rgba(255,255,255,0.18); text-transform: uppercase; margin-bottom: 10px; }
.mp-pp-phases { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-pp-phase { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.66rem; color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 10px; flex: 1; min-width: 50px; }
.mp-pp-phase span { font-size: 1.1rem; }
.mp-pp-arrow { color: rgba(255,255,255,0.18); font-size: 0.8rem; }
.mp-leave-btn { display: block; width: 100%; background: none; border: none; color: rgba(255,255,255,0.18); font-size: 0.74rem; cursor: pointer; padding: 8px; text-align: center; font-family: inherit; transition: color 0.2s; }
.mp-leave-btn:hover { color: rgba(255,100,100,0.6); }
/* Tournament HUD */
.t-hud { position: fixed; top: 62px; right: 0; z-index: 9900; display: flex; align-items: flex-start; pointer-events: auto; filter: drop-shadow(-4px 0 20px rgba(0,0,0,0.75)); }
.t-hud.hidden { display: none; }
body.vg-active #tournamentHUD { display: none !important; }
.t-hud-body { background: rgba(5,5,18,0.96); border: 1px solid rgba(0,229,255,0.2); border-right: none; border-radius: 12px 0 0 12px; padding: 12px 12px 12px 14px; width: 186px; display: flex; flex-direction: column; gap: 8px; transition: width 0.3s,opacity 0.3s,padding 0.3s; backdrop-filter: blur(12px); }
.t-hud-body.t-hud-collapsed { width: 0; padding: 0; overflow: hidden; opacity: 0; }
.t-hud-phase { display: flex; align-items: center; gap: 6px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0,229,255,0.7); border-bottom: 1px solid rgba(0,229,255,0.1); padding-bottom: 6px; }
#tHudPhaseIcon { font-size: 0.88rem; }
.t-hud-timer { text-align: center; font-size: 1.4rem; font-weight: 900; font-family: monospace; color: #00e5ff; text-shadow: 0 0 12px rgba(0,229,255,0.6); letter-spacing: 0.1em; }
.t-timer-urgent { color: #ff4444 !important; text-shadow: 0 0 16px rgba(255,68,68,0.8) !important; animation: timerUrg 0.55s ease infinite; }
@keyframes timerUrg { 0%,100%{opacity:1}50%{opacity:0.6} }
.t-hud-lb { display: flex; flex-direction: column; gap: 4px; }
.t-lb-row { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; font-size: 0.66rem; background: rgba(255,255,255,0.03); animation: lbRowIn 0.25s ease calc(var(--rank-del,0ms)) both; }
@keyframes lbRowIn { from{opacity:0;transform:translateX(8px)} to{opacity:1;transform:translateX(0)} }
.t-lb-me { background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.22); }
.t-lb-top1 { background: rgba(255,204,0,0.1) !important; border: 1px solid rgba(255,204,0,0.28) !important; }
.t-lb-top2 { background: rgba(168,168,168,0.1) !important; border: 1px solid rgba(168,168,168,0.2) !important; }
.t-lb-top3 { background: rgba(205,127,50,0.1) !important; border: 1px solid rgba(205,127,50,0.2) !important; }
.t-lb-pos { font-size: 0.78rem; width: 18px; text-align: center; flex-shrink: 0; }
.t-lb-num { font-size: 0.62rem; color: rgba(255,255,255,0.35); font-weight: 700; }
.t-lb-av  { font-size: 0.88rem; flex-shrink: 0; }
.t-lb-name { flex: 1; color: rgba(255,255,255,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-lb-score { font-weight: 900; color: #00e5ff; font-family: monospace; flex-shrink: 0; }
.t-lb-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 3px 0; }
.t-hud-toggle { background: rgba(5,5,18,0.96); border: 1px solid rgba(0,229,255,0.2); border-radius: 0 8px 8px 0; padding: 8px 7px; cursor: pointer; font-size: 0.88rem; color: rgba(255,255,255,0.45); transition: all 0.2s; align-self: center; backdrop-filter: blur(12px); }
.t-hud-toggle:hover { background: rgba(0,229,255,0.1); color: #00e5ff; }
/* Phase Transition */
.pt-overlay { position: fixed; inset: 0; z-index: 9950; background: rgba(3,6,16,0.97); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pt-overlay.hidden { display: none; }
.pt-overlay.pt-exit-anim { animation: ptFadeOut 0.35s ease forwards; }
@keyframes ptFadeOut { to{opacity:0;transform:scale(1.04)} }
.pt-bg-particles { position: absolute; inset: 0; pointer-events: none; }
.pt-particle { position: absolute; border-radius: 50%; animation: ptPtcl var(--dur,2.5s) ease-out both; opacity: 0; }
@keyframes ptPtcl { 0%{opacity:0.9;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--tx,0),var(--ty,-200px)) scale(0.2)} }
.pt-content { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; max-width: 440px; animation: ptIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes ptIn { from{opacity:0;transform:scale(0.75) translateY(35px)} to{opacity:1;transform:scale(1) translateY(0)} }
.pt-round-info { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(0,229,255,0.55); background: rgba(0,229,255,0.07); border: 1px solid rgba(0,229,255,0.22); border-radius: 20px; padding: 5px 18px; }
.pt-icon { font-size: 5.5rem; filter: drop-shadow(0 0 28px rgba(255,255,255,0.35)); animation: ptIconPop 0.85s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes ptIconPop { from{transform:scale(0) rotate(-180deg)} to{transform:scale(1) rotate(0)} }
.pt-name { font-size: clamp(1.2rem,4vw,1.7rem); font-weight: 900; letter-spacing: 0.1em; color: #fff; text-shadow: 0 0 32px rgba(255,255,255,0.3); text-transform: uppercase; }
.pt-standings { display: flex; flex-direction: column; gap: 6px; min-width: 270px; margin-top: 4px; }
.pt-standings-title { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; color: rgba(255,255,255,0.28); text-transform: uppercase; margin-bottom: 4px; }
.pt-rank-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 13px; font-size: 0.82rem; animation: ptRankIn 0.4s ease calc(var(--ri,0)*80ms) both; }
@keyframes ptRankIn { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:translateX(0)} }
.pt-rank-row span:nth-child(3) { flex: 1; color: rgba(255,255,255,0.68); text-align: left; }
.pt-rank-me { background: rgba(0,229,255,0.14) !important; border: 1px solid rgba(0,229,255,0.3); }
.pt-pts { font-weight: 900; color: #00e5ff; font-family: monospace; }
.pt-cd-wrap { margin-top: 8px; }
.pt-countdown { width: 82px; height: 82px; border-radius: 50%; background: rgba(0,229,255,0.08); border: 3px solid rgba(0,229,255,0.38); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; font-weight: 900; color: #00e5ff; font-family: monospace; animation: cdRipple 1.1s ease infinite; }
@keyframes cdRipple { 0%{box-shadow:0 0 0 0 rgba(0,229,255,0.45)} 70%{box-shadow:0 0 0 20px rgba(0,229,255,0)} 100%{box-shadow:0 0 0 0 rgba(0,229,255,0)} }
.pt-cd-change { animation: cdBounce 0.32s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes cdBounce { from{transform:scale(1.9)} to{transform:scale(1)} }
/* Results / Podium */
.mp-results-header { text-align: center; padding: 14px 0 22px; }
.mp-rh-title { font-size: clamp(1.4rem,5vw,1.9rem); font-weight: 900; color: #fff; text-shadow: 0 0 24px rgba(255,204,0,0.55); }
.mp-rh-sub { font-size: 0.74rem; color: rgba(255,255,255,0.32); margin-top: 4px; }
.mp-podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-bottom: 26px; min-height: 170px; padding: 0 8px; }
.mp-podium-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 150px; animation: podSlotIn 0.65s cubic-bezier(0.34,1.56,0.64,1) calc(var(--pd,0ms)) both; }
@keyframes podSlotIn { from{opacity:0;transform:translateY(40px) scale(0.78)} to{opacity:1;transform:translateY(0) scale(1)} }
.mp-pod-avatar { font-size: 2.3rem; }
.mp-pod-name { font-size: 0.78rem; font-weight: 800; color: rgba(255,255,255,0.82); text-align: center; word-break: break-word; }
.mp-pod-medal { font-size: 1.5rem; }
.mp-pod-score { font-size: 0.76rem; font-weight: 900; color: #00e5ff; font-family: monospace; }
.mp-pod-base { width: 100%; min-width: 68px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg,rgba(255,255,255,0.13),rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.1); animation: podGrow 0.9s ease calc(var(--pd,0ms)+200ms) both; transform-origin: bottom; }
@keyframes podGrow { from{transform:scaleY(0)} to{transform:scaleY(1)} }
.mp-podium-me .mp-pod-name { color: #00e5ff; }
.mp-podium-me .mp-pod-base { background: linear-gradient(180deg,rgba(0,229,255,0.28),rgba(0,229,255,0.07)); border-color: rgba(0,229,255,0.35); box-shadow: 0 0 16px rgba(0,229,255,0.22); }
.mp-breakdown { background: rgba(8,12,26,0.92); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.mp-sb-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.mp-sb-table th { padding: 9px 7px; background: rgba(0,229,255,0.07); color: rgba(255,255,255,0.38); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; font-size: 0.64rem; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: center; }
.mp-sb-table td { padding: 9px 7px; color: rgba(255,255,255,0.65); border-bottom: 1px solid rgba(255,255,255,0.04); text-align: center; }
.mp-sb-table tr:last-child td { border-bottom: none; }
.mp-sb-me td { color: #fff; background: rgba(0,229,255,0.06); }
.mp-sb-total { font-weight: 900 !important; color: #00e5ff !important; font-family: monospace; }
.mp-results-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mp-results-actions .mp-btn-primary { flex: 1; }
.mp-results-actions .mp-btn-secondary { flex: 1; }
/* Score float */
.score-float-mp { position: fixed; right: 195px; bottom: 42%; font-size: 1.4rem; font-weight: 900; color: #00e5ff; text-shadow: 0 0 12px rgba(0,229,255,0.7); pointer-events: none; z-index: 9999; animation: scoreFloatMp 1.3s ease forwards; font-family: monospace; }
@keyframes scoreFloatMp { 0%{opacity:1;transform:translateY(0) scale(1.4)} 100%{opacity:0;transform:translateY(-85px) scale(1)} }
/* Confetti */
.confetti-piece-mp { position: fixed; top: -12px; z-index: 10000; pointer-events: none; animation: confFall var(--dur,3s) ease var(--del,0s) forwards; }
@keyframes confFall { 0%{opacity:1;transform:translateY(-16px) rotate(0deg)} 100%{opacity:0;transform:translateY(110vh) rotate(760deg)} }
/* Toast */
.mp-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(120px); background: rgba(10,15,35,0.97); border: 1px solid rgba(0,229,255,0.28); border-radius: 10px; padding: 11px 22px; font-size: 0.84rem; color: rgba(255,255,255,0.84); z-index: 10000; pointer-events: none; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); white-space: nowrap; }
.mp-toast-show { transform: translateX(-50%) translateY(0); }
/* Tournament card */
.mission-card-tournament {
    --mc-accent: #ff6b35; --mc-glow: rgba(255,107,53,.5);
    grid-column: 1 / -1; flex-direction: row !important; align-items: center !important;
    text-align: left !important; padding: 18px 22px !important;
    background: linear-gradient(135deg,rgba(40,12,5,0.96),rgba(20,8,4,0.98)) !important;
    gap: 14px; display: flex !important;
}
.mission-card-tournament .mission-icon { font-size: 2.4rem !important; margin-bottom: 0 !important; flex-shrink: 0; }
.mission-card-tournament .points.mp-badge-tournament { background: #ff2a00; color: #fff; border: none; animation: liveBadgePulse 1.5s ease infinite; }
@keyframes liveBadgePulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,42,0,0.5)} 50%{box-shadow:0 0 0 7px rgba(255,42,0,0)} }
.mc-tournament-glow { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg,transparent,rgba(255,107,53,0.07),transparent); animation: tournamentSweep 3s ease infinite; pointer-events: none; }
@keyframes tournamentSweep { 0%,100%{transform:translateX(-100%)} 60%{transform:translateX(100%)} }
@media (max-width:600px) {
    #multiplayerScreen:not(.mp-open) { padding: 14px 12px 36px; }
    #multiplayerScreen.mp-open { padding: 0 !important; }
    .mp-logo-title { font-size: 1.55rem; }
    .t-hud-body { width: 150px; }
    .t-lb-name { display: none; }
    .pt-name { font-size: 1.1rem; }
    .pt-icon { font-size: 3.8rem; }
    .mp-podium { gap: 4px; }
    .mp-results-actions { flex-direction: column; }
    .mission-card-tournament { grid-column: 1 / -1; }
}

/* ── Lista compacta de jugadores (>12 en sala) ── */
.mp-player-list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 280px; overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(0,229,255,0.3) transparent;
}
.mp-player-list::-webkit-scrollbar { width: 4px; }
.mp-player-list::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.3); border-radius: 2px; }
.mp-player-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.04);
    font-size: 0.74rem; color: rgba(255,255,255,0.65);
    animation: mpRowIn 0.3s ease both;
}
@keyframes mpRowIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.mp-player-row.mp-me { background: rgba(0,229,255,0.09); border: 1px solid rgba(0,229,255,0.25); }
.mp-pr-av  { font-size: 1rem; flex-shrink: 0; }
.mp-pr-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-pr-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #25d366; box-shadow: 0 0 5px #25d366; flex-shrink: 0;
}
.mp-player-more {
    text-align: center; padding: 8px;
    font-size: 0.68rem; color: rgba(0,229,255,0.55);
    font-weight: 700; letter-spacing: 0.06em;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
/* Barra de progreso de sala */
.mp-room-capacity {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.64rem; color: rgba(255,255,255,0.3);
    margin-bottom: 8px;
}
.mp-room-cap-bar-wrap {
    flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;
}
.mp-room-cap-bar {
    height: 100%; background: linear-gradient(90deg, #00e5ff, #7b2fff);
    border-radius: 2px; transition: width 0.5s ease;
    width: 0%;
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN — GAMER REDESIGN
═══════════════════════════════════════════════════════════════ */

#homeScreen {
    position: relative;
    min-height: 100dvh;
    min-height: 100svh;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    padding: clamp(40px, 9vh, 64px) clamp(12px, 2vw, 24px) max(28px, env(safe-area-inset-bottom));
    gap: 28px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ══ RESULTADOS FINALES — PODIO + TABLA ═══════════════════════ */
.mp-res2-wrap {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; max-height: 100%;
    overflow: hidden;
}
.mp-res2-header {
    text-align: center; padding: 18px 12px 12px;
    border-bottom: 1px solid rgba(0,229,255,0.1);
    flex-shrink: 0;
}
.mp-res2-title {
    font-size: clamp(1rem,3.5vw,1.55rem); font-weight: 900;
    letter-spacing: 0.12em; color: #ffcc00;
    text-shadow: 0 0 22px rgba(255,204,0,0.55);
    text-transform: uppercase;
}
.mp-res2-sub {
    font-size: 0.68rem; color: rgba(255,255,255,0.32); margin-top: 4px;
}
.mp-res2-body {
    display: flex; flex: 1; gap: 16px; overflow: hidden;
    padding: 14px 12px;
    align-items: flex-end;
}

/* Podio */
.mp-pod2 {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 6px; flex-shrink: 0;
    min-width: 210px;
}
.mp-pod2-col {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    animation: pod2Rise var(--pd,0ms) cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: var(--pd,80ms);
    opacity: 0;
}
@keyframes pod2Rise {
    0%  { opacity: 0; transform: translateY(50px) scale(0.85); }
    100%{ opacity: 1; transform: translateY(0) scale(1); }
}
.mp-pod2-crown { font-size: 1.5rem; line-height: 1; }
.mp-pod2-avatar { font-size: 2.2rem; line-height: 1; }
.mp-pod2-name {
    font-size: 0.62rem; font-weight: 800; color: rgba(255,255,255,0.8);
    max-width: 68px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-pod2-medal { font-size: 1.2rem; }
.mp-pod2-score {
    font-size: 0.78rem; font-weight: 900; font-family: monospace;
    color: #00e5ff; letter-spacing: 0.04em;
}
.mp-pod2-pts { font-size: 0.5rem; color: rgba(0,229,255,0.6); }
.mp-pod2-base {
    width: 68px; border-radius: 6px 6px 0 0;
    transition: height 1.1s ease;
}
.mp-pod2-rank1 .mp-pod2-base { background: linear-gradient(180deg,rgba(255,204,0,0.45),rgba(255,204,0,0.1)); border: 1px solid rgba(255,204,0,0.5); }
.mp-pod2-rank2 .mp-pod2-base { background: linear-gradient(180deg,rgba(168,168,168,0.35),rgba(168,168,168,0.08)); border: 1px solid rgba(168,168,168,0.35); }
.mp-pod2-rank3 .mp-pod2-base { background: linear-gradient(180deg,rgba(205,127,50,0.35),rgba(205,127,50,0.08)); border: 1px solid rgba(205,127,50,0.35); }
.mp-pod2-me .mp-pod2-name { color: #00e5ff; }
.mp-pod2-me .mp-pod2-avatar { filter: drop-shadow(0 0 8px rgba(0,229,255,0.7)); }

/* Tabla lateral */
.mp-res2-table-wrap {
    flex: 1; overflow-y: auto; overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.2);
    min-width: 0;
}
.mp-rt {
    width: 100%; border-collapse: collapse;
    font-size: 0.72rem;
}
.mp-rt thead tr {
    background: rgba(0,229,255,0.07);
    border-bottom: 1px solid rgba(0,229,255,0.18);
}
.mp-rt th {
    padding: 8px 8px; text-align: center;
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em;
    color: rgba(0,229,255,0.55); text-transform: uppercase;
    white-space: nowrap;
}
.mp-rt th:nth-child(2) { text-align: left; }
.mp-rt-row {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
    animation: rtRowIn 0.3s ease calc(var(--ri,0)*45ms) both;
}
@keyframes rtRowIn { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }
.mp-rt-row:hover { background: rgba(255,255,255,0.03); }
.mp-rt-row td {
    padding: 8px 8px; text-align: center;
    color: rgba(255,255,255,0.55);
}
.mp-rt-pos { font-size: 0.88rem; font-weight: 900; }
.mp-rt-player { text-align: left !important; color: rgba(255,255,255,0.75) !important; }
.mp-rt-player span { margin-left: 4px; }
.mp-rt-total { font-weight: 900; color: #00e5ff !important; font-family: monospace; }
.mp-rt-me { background: rgba(0,229,255,0.08) !important; border: 1px solid rgba(0,229,255,0.18) !important; }
.mp-rt-me td { color: rgba(255,255,255,0.8) !important; }

.mp-res2-actions {
    display: flex; gap: 10px; justify-content: center;
    padding: 12px 12px 18px; flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 540px) {
    .mp-res2-body { flex-direction: column; align-items: center; gap: 10px; }
    .mp-pod2 { min-width: unset; }
    .mp-res2-table-wrap { max-height: 200px; }
}

/* ── Fondo del homescreen ──────────────────────────────────── */
.hs-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.hs-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 55px 55px;
    animation: hsGridMove 14s linear infinite;
}
@keyframes hsGridMove { from{background-position:0 0} to{background-position:55px 55px} }
.hs-bg-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.hs-bg-orb-1 { width: 500px; height: 500px; top: -20%; left: -12%; background: rgba(0,80,255,0.14); animation: hsOrb1 16s ease-in-out infinite; }
.hs-bg-orb-2 { width: 400px; height: 400px; bottom: -15%; right: -8%; background: rgba(100,0,255,0.12); animation: hsOrb2 20s ease-in-out infinite; }
@keyframes hsOrb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }
@keyframes hsOrb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,20px)} }
.hs-matrix-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0.5; pointer-events: none;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hs-hero {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(16px,3vw,40px); flex-wrap: wrap; width: 100%;
    animation: hsFadeUp 0.8s ease both;
}
@keyframes hsFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* Escudo central */
.hs-shield-wrap {
    position: relative; flex-shrink: 0;
    width: clamp(80px,12vw,130px); height: clamp(80px,12vw,130px);
    display: flex; align-items: center; justify-content: center;
}
.hs-shield-img {
    width: 100%; height: auto; position: relative; z-index: 2;
    filter: drop-shadow(0 0 20px rgba(255,200,0,0.55));
    animation: hsShieldFloat 4s ease-in-out infinite;
}
@keyframes hsShieldFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.04)} }
.hs-shield-halo {
    position: absolute; inset: -10px; border-radius: 50%;
    border: 1.5px solid rgba(255,200,0,0.25);
    animation: hsHaloExpand 3s ease-out infinite;
}
.hs-shield-halo-2 { inset: -20px; animation-delay: 1.5s; border-color: rgba(0,229,255,0.18); }
@keyframes hsHaloExpand { 0%{transform:scale(0.8);opacity:0.8} 100%{transform:scale(1.6);opacity:0} }
.hs-shield-sparks { position: absolute; inset: 0; }
.hs-spark {
    position: absolute; top: 50%; left: 50%;
    width: 3px; height: 3px; border-radius: 50%; background: rgba(0,229,255,0.8);
    transform-origin: 0 0;
    animation: hsSpark 2.4s ease-in-out var(--del,0s) infinite;
    transform: rotate(var(--a,0deg)) translateX(calc(clamp(40px,6vw,65px)));
}
@keyframes hsSpark {
    0%{opacity:0;transform:rotate(var(--a)) translateX(calc(clamp(40px,6vw,65px))) scale(0)}
    30%{opacity:1;transform:rotate(var(--a)) translateX(calc(clamp(40px,6vw,65px) + 12px)) scale(1.5)}
    100%{opacity:0;transform:rotate(var(--a)) translateX(calc(clamp(40px,6vw,65px) + 28px)) scale(0)}
}

/* Texto del hero */
.hs-hero-text { text-align: center; }
.hs-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.22em;
    color: rgba(0,229,255,0.6); text-transform: uppercase; margin-bottom: 8px;
}
.hs-eyebrow-bar { display: block; width: 22px; height: 1px; background: rgba(0,229,255,0.4); }
.hs-title {
    font-size: clamp(1.8rem,4vw+1rem,3.5rem); font-weight: 900;
    line-height: 1; letter-spacing: 0.08em; margin: 0 0 10px;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.hs-title-word {
    color: #fff; text-shadow: 0 0 30px rgba(255,255,255,0.2);
    animation: hsTitleWordIn 0.7s cubic-bezier(0.34,1.56,0.64,1) calc(var(--wi,0)*0.12s) both;
}
.hs-title-accent {
    background: linear-gradient(90deg, #00e5ff, #7b2fff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 16px rgba(0,229,255,0.4));
}
.hs-title-de { font-size: 0.6em; color: rgba(255,255,255,0.38); font-weight: 400; letter-spacing: 0.3em; align-self: center; }
@keyframes hsTitleWordIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
.hs-subtitle {
    font-size: clamp(0.8rem,1vw+0.7rem,1.05rem);
    color: rgba(255,255,255,0.45); min-height: 1.5em; letter-spacing: 0.04em;
}
.hs-typing { color: rgba(0,229,255,0.7); }
.hs-cursor { color: #00e5ff; animation: hsBlink 0.8s step-end infinite; }
@keyframes hsBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Panel de entrada ──────────────────────────────────────── */
.hs-panel {
    position: relative; z-index: 2; width: min(100%,480px);
    background: rgba(8,12,28,0.92); border-radius: 18px;
    padding: 24px; display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: hsFadeUp 0.8s ease 0.2s both;
    /* Borde degradado animado */
    --bd: linear-gradient(90deg,#00e5ff,#7b2fff,#ff2d87,#00e5ff);
}
.hs-panel::before {
    content:''; position:absolute; inset:0; padding:1px; border-radius:18px;
    background: var(--bd); background-size:300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation: hsPanelBorder 5s linear infinite; pointer-events:none;
}
@keyframes hsPanelBorder { from{background-position:0%} to{background-position:300%} }
.hs-panel-top { display:flex; align-items:center; gap:10px; }
.hs-panel-label {
    display:flex; align-items:center; gap:6px;
    font-size:0.6rem; font-weight:800; letter-spacing:0.2em;
    color:rgba(0,229,255,0.45); text-transform:uppercase;
}
.hs-panel-dot {
    width:6px; height:6px; border-radius:50%; background:#00e5ff;
    box-shadow:0 0 6px #00e5ff; animation:hsDotBlink 1.2s ease infinite;
}
@keyframes hsDotBlink { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* Input field */
.hs-input-wrap {
    position:relative; display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,0.04); border-radius:12px;
    padding: 13px 16px; border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hs-input-wrap:focus-within {
    border-color: rgba(0,229,255,0.4);
    box-shadow: 0 0 0 3px rgba(0,229,255,0.08), 0 0 20px rgba(0,229,255,0.08);
}
.hs-input-icon { font-size:1.1rem; flex-shrink:0; }
.hs-input {
    flex:1; background:none; border:none; outline:none;
    color:#fff; font-size:1rem; font-family:inherit; letter-spacing:0.04em;
}
.hs-input::placeholder { color:rgba(255,255,255,0.2); }
.hs-input-line {
    position:absolute; bottom:0; left:16px; right:16px; height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,0.6),transparent);
    border-radius:0 0 12px 12px; transform:scaleX(0); transition:transform 0.3s;
}
.hs-input-wrap:focus-within .hs-input-line { transform:scaleX(1); }

/* Botón Comenzar Aventura */
.hs-start-btn {
    position:relative; border:none; border-radius:14px; cursor:pointer;
    padding:0; overflow:hidden; outline:none; width:100%;
    box-shadow: 0 6px 32px rgba(0,180,80,0.4), 0 0 0 1px rgba(0,230,100,0.3);
    transition: transform 0.18s, box-shadow 0.18s;
    animation: hsStartPulse 3s ease-in-out infinite;
}
@keyframes hsStartPulse {
    0%,100%{box-shadow: 0 6px 32px rgba(0,180,80,0.4), 0 0 0 1px rgba(0,230,100,0.3)}
    50%{box-shadow: 0 8px 44px rgba(0,200,80,0.6), 0 0 0 2px rgba(0,229,100,0.5)}
}
.hs-start-btn:hover { transform:translateY(-3px) scale(1.02); }
.hs-start-btn:active { transform:translateY(1px) scale(0.99); }
.hs-start-bg {
    position:absolute; inset:0;
    background:linear-gradient(135deg, #00cc44 0%, #009933 50%, #00bb55 100%);
    background-size:200% 200%; animation:hsStartBg 4s ease infinite;
}
@keyframes hsStartBg { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hs-start-shine {
    position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:rgba(255,255,255,0.2); transform:skewX(-20deg);
    animation:hsStartShine 3s ease-in-out infinite;
}
@keyframes hsStartShine { 0%,100%{left:-80%} 55%{left:140%} }
.hs-start-content {
    position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
    gap:12px; padding:clamp(14px,2vw,18px) clamp(24px,3vw,40px);
    font-size:clamp(0.95rem,1.5vw,1.15rem); font-weight:900; letter-spacing:0.14em;
    color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.35); text-transform:uppercase;
}
.hs-start-icon { font-size:1.25em; animation:hsStartIco 1.8s ease-in-out infinite; }
@keyframes hsStartIco { 0%,100%{transform:scale(1) translateX(0)} 50%{transform:scale(1.15) translateX(3px)} }
.hs-start-trail {
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation:hsTrail 2s ease-in-out infinite;
}
@keyframes hsTrail { 0%{background-position:-100%} 100%{background-position:300%} }

/* ── Mini cards de menú ────────────────────────────────────── */
.hs-menu-grid {
    position:relative; z-index:2;
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:10px; width:min(100%,480px);
    animation: hsFadeUp 0.8s ease 0.4s both;
}
@media(max-width:480px){ .hs-menu-grid{ grid-template-columns:repeat(2,1fr); } }
.hs-menu-card {
    position:relative; overflow:hidden;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    border-radius:14px; padding:16px 8px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    transition:transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    font-family:inherit;
    animation: hsMcIn 0.6s cubic-bezier(0.34,1.56,0.64,1) calc(var(--mi,0)*0.07s + 0.5s) both;
}
.hs-menu-card:nth-child(1){--mi:0} .hs-menu-card:nth-child(2){--mi:1}
.hs-menu-card:nth-child(3){--mi:2} .hs-menu-card:nth-child(4){--mi:3}
@keyframes hsMcIn { from{opacity:0;transform:translateY(20px) scale(0.85)} to{opacity:1;transform:translateY(0) scale(1)} }
.hs-menu-card:hover {
    transform:translateY(-4px) scale(1.04);
    border-color:rgba(0,229,255,0.4);
    box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 16px rgba(0,229,255,0.12);
}
.hs-mc-glow {
    position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(circle at 50% 0%, rgba(0,229,255,0.12), transparent 70%);
    opacity:0; transition:opacity 0.2s;
}
.hs-menu-card:hover .hs-mc-glow { opacity:1; }
.hs-mc-icon { font-size:1.6rem; }
.hs-mc-label {
    font-size:0.56rem; font-weight:800; letter-spacing:0.16em;
    color:rgba(255,255,255,0.45); text-transform:uppercase;
}
.hs-mc-bar {
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,0.6),transparent);
    transform:scaleX(0); transition:transform 0.25s;
}
.hs-menu-card:hover .hs-mc-bar { transform:scaleX(1); }

/* ── homeScreen responsive: móvil portrait ─────────────────── */
@media (max-width: 600px) {
    #homeScreen {
        min-height: unset;
        padding: clamp(52px, 12vh, 80px) 12px 28px;
        gap: 16px;
        justify-content: flex-start;
    }
    .hs-hero {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }
    .hs-hero-text { text-align: center; }
    .hs-eyebrow   { justify-content: center; }
    .hs-title     { justify-content: center; font-size: clamp(1.6rem,7vw,2rem); letter-spacing: 0.04em; }
    .hs-subtitle  { font-size: 0.78rem; min-height: auto; }
    .hs-shield-wrap {
        width:  clamp(60px,18vw,80px) !important;
        height: clamp(60px,18vw,80px) !important;
    }
    /* Desactivar halos grandes para no inflar la sección */
    .hs-shield-halo, .hs-shield-halo-2, .hs-shield-halo-3,
    .hs-shield-ring-outer { display: none; }
    .hs-panel {
        padding: 16px;
        gap: 12px;
        width: 100%;
    }
    .hs-start-content {
        padding: 12px 16px;
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .hs-start-icon { font-size: 1rem; }
    .hs-ps-item  { padding: 8px 10px; }
    .hs-ps-val   { font-size: 1.1rem; }
    .hs-menu-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 7px;
        width: 100%;
    }
    .hs-menu-card {
        padding: 10px 4px;
        border-radius: 10px;
    }
    .hs-mc-icon  { font-size: 1.2rem; }
    .hs-mc-label { font-size: 0.46rem; }
}
@media (max-width: 420px) {
    /* Panel COMENZAR AVENTURA: más pequeño en Galaxy A15 y similares */
    .hs-panel {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 14px;
    }
    /* Etiqueta "PANEL DE ACCESO" y punto parpadeante: menos espacio */
    .hs-panel-top { gap: 6px; }
    .hs-panel-label { font-size: 0.52rem; letter-spacing: 0.14em; }
    .hs-panel-dot   { width: 5px; height: 5px; }
    /* Campo de nombre: padding más compacto */
    .hs-input-wrap  { padding: 9px 12px; border-radius: 10px; }
    .hs-input       { font-size: 0.9rem; }
    .hs-input-icon  { font-size: 0.95rem; }
    /* Botón COMENZAR AVENTURA: altura reducida */
    .hs-start-btn   { border-radius: 11px; }
    .hs-start-content {
        padding: 10px 14px;
        font-size: 0.82rem;
        letter-spacing: 0.1em;
        gap: 8px;
    }
    .hs-start-icon  { font-size: 0.9em; }
    /* Estadísticas del jugador bajo el botón */
    .hs-ps-item     { padding: 6px 8px; }
    .hs-ps-val      { font-size: 1rem; }
    .hs-ps-label    { font-size: 0.5rem; }
}
@media (max-width: 400px) {
    #homeScreen { padding: clamp(48px, 11vh, 72px) 8px 20px; gap: 10px; }
    .hs-title   { font-size: clamp(1.3rem,7vw,1.6rem); }
    .hs-shield-wrap { width: 56px !important; height: 56px !important; }
    .hs-start-content { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER DEL DESARROLLADOR — EPIC REDESIGN
═══════════════════════════════════════════════════════════════ */
.main-footer {
    background: rgba(3,5,18,0.98);
    border-top: 1px solid rgba(0,229,255,0.12);
    margin-top: auto; padding: 14px 0;
    position: relative; z-index: 1000;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
}
.footer-content { max-width: 780px; margin: 0 auto; padding: 0 20px; }

.dev-card-footer {
    position: relative; overflow: hidden;
    background: rgba(8,12,30,0.9); border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Borde degradado animado */
.dcf-border {
    position:absolute; inset:0; padding:1px; border-radius:14px;
    background:linear-gradient(90deg,#00e5ff,#7b2fff,#ff2d87,#00e5ff);
    background-size:300% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:dcfBorderAnim 5s linear infinite; pointer-events:none;
}
@keyframes dcfBorderAnim { from{background-position:0%} to{background-position:300%} }
/* Scan line */
.dcf-scan {
    position:absolute; top:0; left:0; width:100%; height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,229,255,0.5),transparent);
    pointer-events:none; z-index:5;
    animation:dcfScan 3.5s ease-in-out infinite;
}
@keyframes dcfScan { 0%{top:0%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:100%;opacity:0} }

.dcf-inner {
    position:relative; z-index:2;
    display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
/* Avatar */
.dcf-avatar-wrap { position:relative; flex-shrink:0; }
.dcf-avatar {
    width:48px; height:48px; border-radius:11px;
    background:linear-gradient(135deg,#0055cc,#5500ff);
    display:flex; align-items:center; justify-content:center;
    font-size:0.85rem; font-weight:900; color:#fff; letter-spacing:0.05em;
    box-shadow:0 0 18px rgba(0,100,255,0.5);
    animation:dcfAvtPulse 3s ease-in-out infinite;
}
@keyframes dcfAvtPulse { 0%,100%{box-shadow:0 0 18px rgba(0,100,255,0.5)} 50%{box-shadow:0 0 28px rgba(0,150,255,0.75)} }
.dcf-avatar-ring {
    position:absolute; inset:-5px; border-radius:15px;
    border:1px solid rgba(0,200,255,0.3);
    animation:dcfRingPop 2.5s ease-out infinite;
}
@keyframes dcfRingPop { 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(1.7);opacity:0} }
.dcf-status-dot {
    position:absolute; bottom:-2px; right:-2px;
    width:10px; height:10px; border-radius:50%; background:#25d366;
    box-shadow:0 0 6px #25d366; border:2px solid rgba(3,5,18,0.9);
    animation:dcfDotBlink 1.8s ease infinite;
}
@keyframes dcfDotBlink { 0%,100%{opacity:1;box-shadow:0 0 6px #25d366} 50%{opacity:0.4;box-shadow:0 0 2px #25d366} }
/* Texto */
.dcf-text { flex:1; min-width:0; }
.dcf-tag { font-size:0.52rem; font-weight:800; letter-spacing:0.22em; color:rgba(0,229,255,0.45); text-transform:uppercase; margin-bottom:1px; }
.dcf-name {
    font-size:clamp(0.9rem,1.5vw,1.1rem); font-weight:900;
    background:linear-gradient(90deg,#fff 40%,#00e5ff);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:0.04em; margin-bottom:3px;
}
.dcf-role {
    font-size:0.68rem; color:rgba(255,255,255,0.35);
    display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.dcf-role-icon { font-size:0.75rem; }
.dcf-by {
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255,255,255,0.38);
    line-height: 1.25;
}
.dcf-sep { color:rgba(255,255,255,0.18); }
.dcf-year { color:rgba(255,255,255,0.2); letter-spacing:0.08em; }
/* Lado derecho */
.dcf-right { display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.dcf-heart { font-size:1.3rem; animation:dcfHeart 1.4s ease-in-out infinite; }
@keyframes dcfHeart { 0%,100%{transform:scale(1)} 30%,60%{transform:scale(1.25)} 45%{transform:scale(1)} }
.dcf-made { font-size:0.52rem; font-weight:700; letter-spacing:0.1em; color:rgba(255,255,255,0.2); text-transform:uppercase; white-space:nowrap; }
/* Esquinas */
.dcf-corner { position:absolute; width:12px; height:12px; }
.dcf-corner-tl { top:6px; left:6px; border-top:2px solid rgba(0,229,255,0.5); border-left:2px solid rgba(0,229,255,0.5); }
.dcf-corner-br { bottom:6px; right:6px; border-bottom:2px solid rgba(120,0,255,0.5); border-right:2px solid rgba(120,0,255,0.5); }

/* Mobile */
@media(max-width:480px){
    .dcf-right { display:none; }
    .hs-hero { gap:12px; }
    .hs-shield-wrap { width:64px; height:64px; }
}


/* ═══════════════════════════════════════════════════════════════
   TOURNAMENT SCREEN — ANIMACIONES DE ENTRADA + BOTONES LEGIBLES
═══════════════════════════════════════════════════════════════ */

/* Pantalla: animación de entrada al volverse .active */
#tournamentScreen {
    position: relative; overflow: hidden;
    animation: none;
}
#tournamentScreen.active {
    animation: tsSlideIn 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes tsSlideIn {
    from { opacity:0; transform: translateY(32px) scale(0.97); }
    to   { opacity:1; transform: translateY(0)    scale(1);    }
}

/* Fondo decorativo de la pantalla torneo */
#tournamentScreen::before {
    content:'';
    position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:inherit;
    background:
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(255,180,0,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 10% 90%, rgba(100,0,255,0.08) 0%, transparent 70%);
    animation: tsBgPulse 6s ease-in-out infinite;
}
@keyframes tsBgPulse {
    0%,100% { opacity:0.6; } 50% { opacity:1; }
}

/* Título con animación */
#tournamentScreen > h2 {
    position: relative; z-index: 1;
    animation: tsTitleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
    text-align: center;
    font-size: clamp(1.3rem,2.5vw,1.8rem);
    letter-spacing: 0.12em;
    background: linear-gradient(90deg, #fff 30%, #ffd700 70%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 14px rgba(255,200,0,0.3));
    margin-bottom: 20px;
}
@keyframes tsTitleIn {
    from { opacity:0; transform: translateY(-18px) scale(0.92); }
    to   { opacity:1; transform: translateY(0)     scale(1);    }
}

/* Tabs con animación escalonada */
.tournament-tabs {
    position: relative; z-index: 1;
    display: flex; gap: 10px; margin-bottom: 20px;
    animation: tsFadeUp 0.5s ease 0.2s both;
}
@keyframes tsFadeUp {
    from { opacity:0; transform: translateY(16px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Botones de tabs — efecto de brillo por DETRÁS del texto */
.tab-btn {
    position: relative; overflow: hidden;
    flex: 1; padding: 12px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: rgba(255,255,255,0.65);
    font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.06em; cursor: pointer;
    transition: color 0.2s, border-color 0.2s, transform 0.18s;
    /* texto siempre encima */
    z-index: 0;
}
/* Efecto glow de fondo (NO tapa texto) */
.tab-btn::before {
    content: '';
    position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,180,0,0.22), rgba(100,0,255,0.18));
    opacity: 0; transition: opacity 0.25s;
}
/* Línea brillante inferior (NO tapa texto) */
.tab-btn::after {
    content: '';
    position: absolute; bottom: 0; left: 10%; right: 10%;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
    transform: scaleX(0); transition: transform 0.25s;
    z-index: -1;
}
.tab-btn:hover {
    color: #fff; border-color: rgba(255,180,0,0.4);
    transform: translateY(-2px);
}
.tab-btn:hover::before { opacity: 1; }
.tab-btn:hover::after  { transform: scaleX(1); }

/* Estado activo */
.tab-btn.active {
    color: #fff;
    background: rgba(255,180,0,0.12);
    border-color: rgba(255,200,0,0.5);
    box-shadow: 0 0 14px rgba(255,180,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tab-btn.active::before { opacity: 1; }
.tab-btn.active::after  { transform: scaleX(1); }

/* Contenido del torneo */
#tournamentContent {
    position: relative; z-index: 1;
    animation: tsFadeUp 0.5s ease 0.32s both;
}

/* Botón volver — animación */
#tournamentScreen > .btn {
    position: relative; z-index: 1;
    animation: tsFadeUp 0.5s ease 0.42s both;
}

/* Tarjetas de torneo — aparecen escalonadas */
.tournament-card {
    animation: tsMcIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.tournament-card:nth-child(1) { animation-delay: 0.38s; }
.tournament-card:nth-child(2) { animation-delay: 0.46s; }
.tournament-card:nth-child(3) { animation-delay: 0.54s; }
@keyframes tsMcIn {
    from { opacity:0; transform: translateX(-16px) scale(0.97); }
    to   { opacity:1; transform: translateX(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   MODAL TORNEO — OVERLAY ANIMADO
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   MODAL TORNEO — REDISEÑO ÉPICO FULL-SCREEN v2
═══════════════════════════════════════════════════════════════ */

/* 1 — Overlay full-screen */
.mp-modal {
    display: none;
    position: fixed; inset: 0; z-index: 3000;
    padding: 0;
}
.mp-modal.mp-open { display: block; }

/* 2 — Backdrop: blur sobre el juego de fondo */
.mp-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 4, 22, 0.55);
    backdrop-filter: blur(12px) saturate(0.7);
    -webkit-backdrop-filter: blur(12px) saturate(0.7);
    animation: mpBdIn 0.4s ease both;
    cursor: pointer;
}
@keyframes mpBdIn { from{opacity:0} to{opacity:1} }

/* 3 — Fondo arena (imagen IA, sin matrix) */
.mp-arena-bg {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    height: calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #142a52 0%, #1a1048 38%, #0c1834 100%);
}
.mp-arena-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    image-rendering: auto;
    filter: saturate(1.12) contrast(1.04) brightness(1.05);
}
.mp-arena-bg-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 120% 55% at 50% 0%, rgba(0, 140, 255, 0.22) 0%, transparent 62%),
        linear-gradient(180deg, rgba(8, 24, 56, 0.25) 0%, rgba(4, 8, 28, 0.22) 50%, rgba(2, 4, 18, 0.42) 100%);
}
.mp-matrix-canvas {
    display: none !important;
}

/* 4 — Frame: full-screen sin borde */
.mp-modal-frame {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 0;
    padding: 0;
    background: none;
    animation: none;
}
@keyframes mpFrameBorder {
    from { background-position: 0% 50%; }
    to   { background-position: 400% 50%; }
}
@keyframes mpFrameIn {
    from { opacity:0; transform: scale(0.97); }
    to   { opacity:1; transform: scale(1); }
}

/* 5 — Panel interior: ocupa todo el frame */
.mp-modal-panel {
    position: relative;
    width: 100%; height: 100%;
    background: rgba(3, 5, 18, 0.12);
    border-radius: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
    contain: layout style;
}

/* 6 — Orbes decorativos de fondo */
.mp-modal-panel::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at 15% 10%, rgba(0,100,255,0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 90%, rgba(120,0,255,0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.03) 0%, transparent 70%);
    pointer-events: none; border-radius: 23px;
}

/* 7 — Grid decorativo de fondo */
.mp-modal-panel::after {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.018) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none; border-radius: 23px;
}

/* 8 — Scan line (desactivada) */
.mp-modal-scan {
    display: none;
}
@keyframes mpScan {
    0%   { top: 0%;   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* 9 — Botón cerrar */
.mp-modal-close-btn {
    position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 30;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.35); font-size: 0.9rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; font-family: inherit;
}
.mp-modal-close-btn:hover {
    background: rgba(255,50,50,0.15); color: #ff7070;
    transform: scale(1.1) rotate(90deg); border-color: rgba(255,80,80,0.4);
}

/* 10 — Cuerpo scrollable (scroll interno, NO toca el panel) */
.mp-modal-body {
    position: relative; z-index: 1;
    flex: 1; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    overscroll-behavior: contain;
    padding: max(clamp(20px, 4vh, 48px), env(safe-area-inset-top)) clamp(20px, 5vw, 60px) clamp(20px, 3vh, 40px);
    padding-bottom: max(clamp(20px, 3vh, 40px), env(safe-area-inset-bottom));
    padding-left: max(clamp(20px, 5vw, 60px), env(safe-area-inset-left));
    padding-right: max(clamp(20px, 5vw, 60px), env(safe-area-inset-right));
    min-height: 0;
}
.mp-modal-body::-webkit-scrollbar { width: 3px; }
.mp-modal-body::-webkit-scrollbar-track { background: transparent; }
.mp-modal-body::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.2); border-radius: 2px; }

/* 11 — Logo area del modal */
.mp-modal .mp-logo-area {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: none;
    background: transparent;
}
.mp-logo-icon {
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 16px rgba(255,215,0,0.5));
    animation: mpLogoFloat 3.5s ease-in-out infinite;
}
@keyframes mpLogoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.mp-logo-title {
    font-size: clamp(1.3rem,4vw,1.8rem);
    font-weight: 900; letter-spacing: 0.12em;
    margin: 0 0 6px;
    background: linear-gradient(135deg, #00e5ff 0%, #7b2fff 50%, #ff2d87 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mp-logo-sub {
    font-size: 0.7rem; color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em; margin: 0;
}

/* Prevenir scroll del body cuando el modal está abierto */
body.mp-modal-open { overflow: hidden !important; }

/* Arena torneo — móvil / modo rendimiento: sin blur ni capas pesadas */
body.mp-arena-lite .mp-modal-backdrop,
body.performance-mode .mp-modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 10, 28, 0.62);
    animation: none;
}
body.mp-arena-lite .mp-modal-panel::before,
body.mp-arena-lite .mp-modal-panel::after,
body.performance-mode .mp-modal .mp-modal-panel::before,
body.performance-mode .mp-modal .mp-modal-panel::after {
    display: none;
}
body.mp-arena-lite .mp-arena-bg-veil,
body.performance-mode .mp-modal .mp-arena-bg-veil {
    background: linear-gradient(180deg, rgba(2, 6, 20, 0.22) 0%, rgba(4, 8, 28, 0.18) 50%, rgba(2, 4, 18, 0.32) 100%);
}
body.mp-arena-lite .mp-logo-icon,
body.performance-mode .mp-modal .mp-logo-icon {
    animation: none !important;
    filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.45));
}
body.mp-arena-lite .mp-logo-title,
body.performance-mode .mp-modal .mp-logo-title {
    animation: none !important;
}
body.mp-arena-lite .mp-btn-primary::before,
body.performance-mode .mp-modal .mp-btn-primary::before {
    animation: none !important;
    display: none;
}
body.mp-arena-lite .mp-game-card-art,
body.performance-mode .mp-modal .mp-game-card-art {
    content-visibility: auto;
}
@media (max-width: 768px) {
    .mp-modal-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 10, 28, 0.55);
    }
    .mp-modal-panel::before,
    .mp-modal-panel::after { display: none; }
    .mp-logo-icon { animation: none; }
    .mp-logo-title { animation: none; }
    .mp-btn-primary::before { display: none; }
}



/* ═══════════════════════════════════════════════════════════════
   SPLASH LOGOS — EPIC REDESIGN (override de estilos anteriores)
═══════════════════════════════════════════════════════════════ */

.sp-logos {
    display: flex; align-items: center; justify-content: center;
    gap: 0; width: 100%;
    animation: spLogosIn 0.9s ease 0.1s both;
}
#splashScreen .sp-authority {
    position: absolute;
    left: 50%;
    z-index: 26;
    width: min(72vw, 520px);
    margin: 0;
    transform: translateX(-50%);
    display: block;
    pointer-events: none;
    animation: spAuthIn 0.7s ease 0.35s both;
}
#splashScreen .sp-authority img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    animation: spAuthGlow 3.4s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(0, 229, 255, 0.35));
}
#splashScreen .sp-authority-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(190, 255, 255, 0.85) 50%, transparent 62%);
    background-size: 220% 100%;
    animation: spAuthScan 3.2s ease-in-out infinite;
    -webkit-mask: url("../img/logo-seguridad.png") center / 100% 100% no-repeat;
    mask: url("../img/logo-seguridad.png") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
}
@keyframes spAuthIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes spAuthGlow {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(0, 229, 255, 0.28));
    }
    50% {
        transform: translateY(-3px);
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(0, 229, 255, 0.8)) drop-shadow(0 0 28px rgba(123, 47, 255, 0.4));
    }
}
@keyframes spAuthScan {
    0%, 100% { background-position: 130% 0; }
    48% { background-position: -30% 0; }
}
@media (max-height: 520px) {
    #splashScreen .sp-authority img { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    #splashScreen .sp-authority,
    #splashScreen .sp-authority img,
    #splashScreen .sp-authority-scan { animation: none !important; }
}

/* Frame por logo */
.sp-logo-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    animation: spLogoWrapIn 0.7s cubic-bezier(0.34,1.56,0.64,1) calc(var(--sli,0)*0.22s + 0.2s) both;
}
@keyframes spLogoWrapIn {
    from { opacity:0; transform: scale(0.5) translateY(-16px); }
    to   { opacity:1; transform: scale(1)   translateY(0); }
}

.sp-logo-frame {
    position: relative; overflow: hidden;
    border-radius: 14px; padding: 10px 14px;
    background: rgba(0,8,26,0.75);
    display: flex; align-items: center; justify-content: center;
}

/* Borde degradado animado del frame */
.sp-logo-frame-border {
    position: absolute; inset: 0; padding: 1.5px; border-radius: 14px;
    background: linear-gradient(90deg,#00e5ff,#7b2fff,#ff2d87,#ffd700,#00e5ff);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: spFrameBd 4s linear infinite;
    pointer-events: none;
}
@keyframes spFrameBd { from{background-position:0%} to{background-position:300%} }

/* Scan line en el frame (desactivada en logos laterales) */
.sp-logo-frame-scan {
    display: none !important;
}

/* Esquinas decorativas en logos laterales — ocultas */
.sp-logo-wrap .sp-logo-corner {
    display: none !important;
}

/* Imagen del logo (override) */
.sp-logo-img {
    height: clamp(44px,6.5vw,74px); width: auto; position: relative; z-index: 1;
    filter: drop-shadow(0 0 10px rgba(0,180,255,0.45));
    transition: filter 0.3s, transform 0.3s;
    animation: spLogoFloat 5s ease-in-out infinite;
}
.sp-logo-left .sp-logo-img  { animation-delay: -0.5s; }
.sp-logo-right .sp-logo-img { animation-delay: -2.8s; }
@keyframes spLogoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.sp-logo-frame:hover .sp-logo-img {
    filter: drop-shadow(0 0 22px rgba(0,229,255,0.9));
    transform: translateY(-3px) scale(1.05);
}

/* Etiqueta bajo el logo */
.sp-logo-label {
    font-size: 0.5rem; font-weight: 900; letter-spacing: 0.22em;
    color: rgba(0,229,255,0.45); text-transform: uppercase; text-align: center;
    text-shadow: 0 0 10px rgba(0,229,255,0.3);
}

/* Conector animado entre logos */
.sp-logo-connector {
    flex: 1; max-width: clamp(20px,4vw,55px); height: 1px; align-self: center;
    margin-bottom: 22px; /* compensar la label */
    background: linear-gradient(90deg, rgba(0,229,255,0.5), rgba(120,0,255,0.5));
    position: relative; overflow: hidden;
}
.sp-logo-connector::before {
    content: '';
    position: absolute; top: -2px; left: -10%;
    width: 10px; height: 5px;
    border-radius: 50%; background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff;
    animation: spConnDot 1.8s linear infinite;
}
.sp-logo-connector-r::before { animation-direction: reverse; background: rgba(120,0,255,0.9); box-shadow: 0 0 8px rgba(120,0,255,0.9); }
@keyframes spConnDot { from{left:-10%} to{left:110%} }

/* Escudo central — ÉPICO (override) */
.sp-logo-center {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 12px; flex-shrink: 0;
}

/* Auras de energía detrás del escudo */
.sp-center-energy {
    position: absolute; border-radius: 50%; z-index: 1;
    width: clamp(90px,15vw,150px); height: clamp(90px,15vw,150px);
    background: radial-gradient(circle, rgba(255,200,0,0.2) 0%, transparent 70%);
    animation: spEnergy 2.4s ease-in-out infinite;
}
.sp-center-energy-2 {
    width: clamp(110px,18vw,180px); height: clamp(110px,18vw,180px);
    background: radial-gradient(circle, rgba(0,100,255,0.14) 0%, transparent 70%);
    animation: spEnergy 3.6s ease-in-out infinite reverse;
}
.sp-center-energy-3 {
    width: clamp(70px,11vw,115px); height: clamp(70px,11vw,115px);
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: spEnergy 1.8s ease-in-out infinite;
}
@keyframes spEnergy {
    0%,100% { transform:scale(0.88); opacity:0.55; }
    50%      { transform:scale(1.18); opacity:1;    }
}

/* Partículas orbitando el escudo */
.sp-center-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sp-cp {
    position: absolute; top: 50%; left: 50%;
    width: 3.5px; height: 3.5px; border-radius: 50%;
    background: rgba(255,200,0,0.9);
    box-shadow: 0 0 6px currentColor;
    animation: spCpOrbit 3.2s linear var(--cpd,0s) infinite;
}
@keyframes spCpOrbit {
    from { transform: rotate(var(--cpa,0deg)) translateX(clamp(48px,8vw,82px)); }
    to   { transform: rotate(calc(var(--cpa,0deg) + 360deg)) translateX(clamp(48px,8vw,82px)); }
}

/* Escudo imagen (override) */
.sp-shield-img {
    height: clamp(78px,13vw,130px); width: auto; position: relative; z-index: 4;
    filter: drop-shadow(0 0 28px rgba(255,200,0,0.75)) drop-shadow(0 0 55px rgba(255,150,0,0.3));
    animation: spShieldFloat 4s ease-in-out infinite;
}
@keyframes spShieldFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-10px) scale(1.05); }
}

/* Anillos del escudo (override + tercer anillo) */
.sp-shield-ring {
    position: absolute; border-radius: 50%; z-index: 3;
    border: 1.5px solid rgba(255,200,0,0.3);
    animation: spRingExpand 3s ease-out infinite;
    width: clamp(88px,14vw,148px); height: clamp(88px,14vw,148px);
}
.sp-shield-ring-2 {
    animation-delay: 1s; border-color: rgba(0,229,255,0.22);
    width: clamp(106px,17vw,172px); height: clamp(106px,17vw,172px);
}
.sp-shield-ring-3 {
    animation-delay: 2s; border-color: rgba(120,0,255,0.18);
    width: clamp(124px,20vw,196px); height: clamp(124px,20vw,196px);
}
@keyframes spRingExpand {
    0%   { transform:scale(0.75); opacity:0.9; }
    100% { transform:scale(2.1);  opacity:0;   }
}

/* Mobile */
@media(max-width:480px){
    .sp-logo-connector { max-width: 14px; }
    .sp-logo-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TOURNAMENT MODAL — REDISEÑO PRESENTACIÓN CYBERPUNK
═══════════════════════════════════════════════════════════════ */

/* El modal era .screen — ahora es overlay */
#tournamentScreen.screen { display: none !important; } /* Anular herencia si queda */

.ts-modal {
    display: none;
    position: fixed; inset: 0; z-index: 2500;
    align-items: center; justify-content: center;
    padding: 16px;
}
.ts-modal.ts-open { display: flex; }

.ts-backdrop {
    position: absolute; inset: 0;
    background: rgba(2,4,18,0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: tsBdIn 0.3s ease both;
    cursor: pointer;
}
@keyframes tsBdIn { from{opacity:0} to{opacity:1} }

body.ts-modal-open { overflow: hidden; }

/* Panel principal */
.ts-panel {
    position: relative; z-index: 2;
    background: rgba(4,7,24,0.97);
    border-radius: 22px;
    padding: 0;
    width: min(600px, 96vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow:
        0 32px 100px rgba(0,0,0,0.9),
        0 0 0 1px rgba(255,255,255,0.04),
        0 0 80px rgba(80,0,255,0.08);
    animation: tsPanelIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes tsPanelIn {
    from { opacity:0; transform: translateY(70px) scale(0.92); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}
.ts-panel-body {
    flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0;
}
.ts-panel-body::-webkit-scrollbar { width: 3px; }
.ts-panel-body::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.3); border-radius: 2px; }

/* Borde degradado animado */
.ts-border {
    position: absolute; inset: 0; padding: 1.5px; border-radius: 22px;
    background: linear-gradient(120deg,#00e5ff,#7b2fff,#ff2d87,#ffd700,#00e5ff);
    background-size: 400% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: tsBorderFlow 5s linear infinite;
    pointer-events: none; z-index: 0;
}
@keyframes tsBorderFlow { from{background-position:0%} to{background-position:400%} }

/* Scan line */
.ts-scan {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg,transparent,rgba(0,229,255,0.6),transparent);
    z-index: 5; animation: tsScan 5s ease-in-out infinite; pointer-events: none;
    border-radius: 22px 22px 0 0;
}
@keyframes tsScan {
    0%   { top: 0%;   opacity:0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity:0; }
}

/* Esquinas decorativas */
.ts-corner { position: absolute; width: 14px; height: 14px; z-index: 6; pointer-events: none; }
.ts-corner-tl { top: 8px; left: 8px; border-top: 2.5px solid #00e5ff; border-left: 2.5px solid #00e5ff; }
.ts-corner-br { bottom: 8px; right: 8px; border-bottom: 2.5px solid rgba(120,0,255,0.8); border-right: 2.5px solid rgba(120,0,255,0.8); }

/* Botón cerrar */
.ts-close-btn {
    position: absolute; top: 14px; right: 14px; z-index: 20;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); font-size: 0.9rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.22s; font-family: inherit;
}
.ts-close-btn:hover {
    background: rgba(255,60,60,0.2); color: #ff7070;
    transform: scale(1.15) rotate(90deg); border-color: rgba(255,100,100,0.4);
}

/* ── Header del modal ─────────────────────────────────────── */
.ts-header {
    display: flex; align-items: center; gap: 16px;
    padding: 28px 28px 20px;
    background: linear-gradient(135deg, rgba(0,80,255,0.08), rgba(120,0,255,0.06));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative; z-index: 1;
    animation: tsFadeUp 0.5s ease 0.1s both;
}
.ts-header-icon {
    width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg,rgba(255,180,0,0.18),rgba(255,100,0,0.12));
    border: 1px solid rgba(255,180,0,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 0 20px rgba(255,150,0,0.2);
    animation: tsIconGlow 2.5s ease-in-out infinite;
}
@keyframes tsIconGlow {
    0%,100% { box-shadow: 0 0 20px rgba(255,150,0,0.2); }
    50%      { box-shadow: 0 0 34px rgba(255,180,0,0.45), 0 0 60px rgba(255,100,0,0.15); }
}
.ts-title {
    font-size: clamp(1.3rem,3vw,1.8rem); font-weight: 900;
    letter-spacing: 0.18em; margin: 0 0 2px;
    background: linear-gradient(90deg,#fff 30%,#ffd700 70%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 12px rgba(255,200,0,0.3));
}
.ts-subtitle {
    font-size: 0.72rem; color: rgba(255,255,255,0.35);
    letter-spacing: 0.1em; margin: 0;
}

/* ── Contenido y botón volver ────────────────────────────── */
.ts-panel .tournament-tabs,
.ts-panel #tournamentContent,
.ts-back-btn {
    position: relative; z-index: 1;
    padding-left: 24px; padding-right: 24px;
}
.ts-panel .tournament-tabs {
    padding-top: 20px; padding-bottom: 0; margin-bottom: 0;
    animation: tsFadeUp 0.5s ease 0.18s both;
}
.ts-panel #tournamentContent {
    padding-top: 16px; padding-bottom: 0;
    animation: tsFadeUp 0.5s ease 0.26s both;
    min-height: 120px;
}
.ts-back-btn {
    display: block; width: calc(100% - 48px);
    margin: 18px 24px 24px;
    padding: 11px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45); font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.08em; cursor: pointer; text-align: center;
    transition: all 0.2s; font-family: inherit;
    animation: tsFadeUp 0.5s ease 0.34s both;
}
.ts-back-btn:hover {
    background: rgba(0,229,255,0.07);
    border-color: rgba(0,229,255,0.3);
    color: rgba(0,229,255,0.8);
    transform: translateY(-2px);
}

@keyframes tsFadeUp {
    from { opacity:0; transform: translateY(14px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ── Rediseño de elementos internos ─────────────────────── */

/* Tabs */
.ts-panel .tab-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 10px; padding: 10px 8px;
}
.ts-panel .tab-btn.active {
    background: rgba(255,180,0,0.1);
    border-color: rgba(255,200,0,0.45);
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255,180,0,0.18);
}
.ts-panel .tab-btn:hover:not(.active) {
    border-color: rgba(0,229,255,0.3);
    color: rgba(0,229,255,0.8);
    background: rgba(0,229,255,0.06);
    transform: translateY(-2px);
}

/* Tarjetas de torneo */
.ts-panel .tournament-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid rgba(255,180,0,0.6);
    border-radius: 12px;
    padding: 16px 18px; margin-bottom: 12px;
    transition: border-color 0.2s, background 0.2s, transform 0.18s;
    animation: tsMcIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.ts-panel .tournament-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,180,0,0.5);
    transform: translateX(3px);
}
@keyframes tsMcIn {
    from { opacity:0; transform: translateX(-14px); }
    to   { opacity:1; transform: translateX(0); }
}
.ts-panel .tournament-card:nth-child(1) { animation-delay: 0.28s; }
.ts-panel .tournament-card:nth-child(2) { animation-delay: 0.36s; }
.ts-panel .tournament-card:nth-child(3) { animation-delay: 0.44s; }

/* Formulario crear torneo */
.ts-panel .tournament-create h3 {
    font-size: 1rem; font-weight: 900; letter-spacing: 0.12em;
    color: #ffd700; margin-bottom: 6px;
}
.ts-panel .btn-success {
    background: linear-gradient(135deg,#00cc44,#009933);
    border: none; border-radius: 10px;
    padding: 13px 28px; font-size: 0.95rem; font-weight: 900;
    letter-spacing: 0.1em; color: #fff; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,180,50,0.35);
    transition: transform 0.18s, box-shadow 0.18s;
}
.ts-panel .btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,200,60,0.5);
}
.ts-panel .btn-primary {
    background: linear-gradient(135deg,rgba(0,100,255,0.3),rgba(80,0,255,0.3));
    border: 1px solid rgba(0,150,255,0.4);
    border-radius: 10px; padding: 11px 22px;
    font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em;
    color: rgba(0,229,255,0.9); cursor: pointer;
    transition: all 0.2s; font-family: inherit;
}
.ts-panel .btn-primary:hover {
    background: linear-gradient(135deg,rgba(0,150,255,0.4),rgba(100,0,255,0.4));
    border-color: rgba(0,229,255,0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,100,255,0.3);
}

/* Estado de torneo badges */
.ts-panel .tournament-status {
    padding: 3px 12px; border-radius: 20px;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ts-panel .status-active   { background: rgba(0,200,80,0.2);  color:#25d366; border:1px solid rgba(0,200,80,0.3); }
.ts-panel .status-upcoming { background: rgba(255,180,0,0.2); color:#ffd700; border:1px solid rgba(255,180,0,0.3); }
.ts-panel .status-finished { background: rgba(100,100,120,0.2); color:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.1); }

/* Neutralizar reglas antiguas del #tournamentScreen como .screen */
#tournamentScreen.screen,
#tournamentScreen.active {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN — FIX LAYOUT (sin header encima)
═══════════════════════════════════════════════════════════════ */

/* El container no debe tener padding-top cuando homeScreen está activo */
#mainContainer:has(#homeScreen.active) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* homeScreen como pantalla completa */
#homeScreen.active {
    min-height: 100vh !important;
    padding-top: clamp(48px, 10vh, 76px) !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN HEADER — REDISEÑO CYBERPUNK (solo visible en gameplay)
═══════════════════════════════════════════════════════════════ */
.main-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(4,7,24,0.97) !important;
    border-bottom: 1px solid rgba(0,229,255,0.12) !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.6), 0 1px 0 rgba(0,229,255,0.06) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Línea de brillo superior */
.main-header::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, #00e5ff 30%, #7b2fff 60%, transparent 100%);
    animation: mhTopLine 5s ease-in-out infinite;
}
@keyframes mhTopLine {
    0%,100% { opacity: 0.5; background-position: 0%; }
    50%      { opacity: 1;   background-position: 100%; }
}

.header-content {
    max-width: 1200px; margin: 0 auto;
    padding: clamp(10px,1.2vw,14px) clamp(14px,2vw,24px) !important;
    display: flex; justify-content: space-between; align-items: center !important;
    gap: 16px;
}

/* Logos en el header de gameplay */
.logo-container { flex: 0 0 auto; }
.header-logo {
    height: clamp(40px,4.5vw,58px) !important;
    width: auto; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0,180,255,0.35)) !important;
    transition: filter 0.3s;
}
.header-logo:hover {
    filter: drop-shadow(0 0 18px rgba(0,229,255,0.75)) !important;
}
/* Quitar animaciones float del header durante gameplay */
.logo-left  .header-logo { animation: none !important; }
.logo-right .header-logo { animation: none !important; }

/* Título del header */
.header-title h1 {
    font-size: clamp(0.85rem,1.4vw,1.1rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    background: linear-gradient(90deg, #fff 40%, #00e5ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: flex; align-items: center; gap: 8px;
}
.header-icon {
    height: clamp(24px,2.5vw,34px) !important;
    width: auto !important;
    filter: drop-shadow(0 0 8px rgba(255,200,0,0.5)) !important;
    animation: mhIconFloat 4s ease-in-out infinite !important;
    -webkit-text-fill-color: initial !important;
}
@keyframes mhIconFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* mainContainer sin restricciones cuando homeScreen está activo (selector corregido) */
#mainContainer:has(#homeScreen.active) {
    padding: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* body con mismo color de fondo que el homeScreen */
body:has(#homeScreen.active) {
    background: #030610 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOURNAMENT MODAL — CONTENIDO INTERNO (tablas, turnos, resultados)
═══════════════════════════════════════════════════════════════ */

/* Tarjeta de turno */
.tn-turn {
    text-align: center;
    padding: 20px 8px 24px;
}
.tn-turn-card {
    background: linear-gradient(135deg, rgba(80,40,200,0.28), rgba(0,80,200,0.22));
    border: 1px solid rgba(100,80,255,0.35);
    border-radius: 18px;
    padding: clamp(20px,4vw,32px) clamp(16px,4vw,28px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: tnSlide 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes tnSlide {
    from { opacity:0; transform: translateY(20px); }
    to   { opacity:1; transform: translateY(0); }
}
.tn-player-badge {
    display: inline-block;
    background: rgba(255,215,0,0.12);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
    color: #ffd700; margin-bottom: 14px;
}
.tn-player-name {
    font-size: clamp(1.4rem,5vw,2rem);
    font-weight: 900; letter-spacing: 0.06em;
    color: #fff;
    margin: 0 0 16px;
    text-shadow: 0 0 24px rgba(180,160,255,0.5);
}
.tn-game-box {
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 18px;
}
.tn-game-name {
    font-size: clamp(0.9rem,2.5vw,1.15rem);
    font-weight: 800; color: #fff; margin: 0 0 6px;
}
.tn-round-label {
    font-size: 0.72rem; color: rgba(255,215,0,0.7); margin: 0 0 6px;
    font-weight: 700; letter-spacing: 0.1em;
}
.tn-current-score {
    font-size: 0.7rem; color: rgba(255,255,255,0.45);
    margin: 0; letter-spacing: 0.08em;
}
.tn-play-btn {
    display: inline-block;
    background: linear-gradient(135deg,#00c94e,#007a2e);
    border: none; border-radius: 12px;
    padding: 14px 36px;
    font-size: clamp(0.9rem,2vw,1.05rem); font-weight: 900;
    letter-spacing: 0.12em; color: #fff; cursor: pointer;
    box-shadow: 0 6px 24px rgba(0,180,60,0.4);
    transition: transform 0.18s, box-shadow 0.18s;
    font-family: inherit;
}
.tn-play-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,210,70,0.55);
}

/* Tarjeta de puntos ganados */
.tn-points {
    text-align: center;
    padding: 16px 8px 20px;
}
.tn-points-card {
    border-radius: 16px;
    padding: clamp(18px,4vw,28px) clamp(14px,4vw,24px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: tnScale 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes tnScale {
    from { opacity:0; transform: scale(0.88); }
    to   { opacity:1; transform: scale(1); }
}
.tn-points-card.won  { background: linear-gradient(135deg,rgba(0,180,60,0.35),rgba(0,100,40,0.3));  border:1px solid rgba(0,200,70,0.4); }
.tn-points-card.lost { background: linear-gradient(135deg,rgba(200,40,40,0.32),rgba(130,20,20,0.28)); border:1px solid rgba(220,80,80,0.4); }
.tn-points-name {
    font-size: clamp(1.2rem,4vw,1.6rem); font-weight: 900; color:#fff; margin: 0 0 12px;
}
.tn-points-inner {
    background: rgba(255,255,255,0.08);
    border-radius: 12px; padding: 16px;
    margin: 0 0 14px;
}
.tn-points-msg {
    font-size: clamp(0.9rem,2.5vw,1.1rem); color:#fff; margin: 0 0 8px; font-weight: 700;
}
.tn-points-val {
    font-size: clamp(2rem,8vw,3rem); color: #ffd700; font-weight: 900;
    text-shadow: 0 0 20px rgba(255,215,0,0.7);
    animation: tnPulse 1s ease-in-out infinite;
    margin: 4px 0;
}
@keyframes tnPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.tn-points-total {
    font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 6px 0 0;
}
.tn-continue-btn {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    padding: 12px 32px;
    font-size: clamp(0.8rem,2vw,0.95rem); font-weight: 900;
    letter-spacing: 0.12em; color: #fff; cursor: pointer;
    transition: all 0.18s; font-family: inherit;
}
.tn-continue-btn:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }

/* Scoreboard intermedio */
.tn-scoreboard {
    padding: 12px 4px 20px;
    animation: tnSlide 0.4s ease both;
}
.tn-sb-title {
    font-size: clamp(1rem,3vw,1.3rem); font-weight: 900;
    letter-spacing: 0.14em; color: #ffd700;
    text-align: center; margin: 0 0 4px;
    text-shadow: 0 0 16px rgba(255,215,0,0.4);
}
.tn-sb-round {
    font-size: 0.7rem; color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em; text-align: center; margin: 0 0 16px;
}
.tn-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-radius: 12px; margin-bottom: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: border-color 0.2s;
    animation: tnSlide 0.35s ease var(--del,0s) both;
}
.tn-row:first-child { border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.06); }
.tn-row:nth-child(2){ border-color: rgba(192,192,192,0.3); }
.tn-row:nth-child(3){ border-color: rgba(205,127,50,0.3); }
.tn-medal { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.tn-pname { flex: 1; font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.88); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-score { font-size: 0.92rem; font-weight: 900; color: #ffd700; flex-shrink: 0; letter-spacing: 0.05em; }
.tn-next-btn {
    display: block; width: 100%;
    margin-top: 16px;
    background: linear-gradient(135deg,rgba(0,100,255,0.3),rgba(80,0,255,0.3));
    border: 1px solid rgba(0,150,255,0.35);
    border-radius: 11px; padding: 12px;
    font-size: 0.85rem; font-weight: 900; letter-spacing: 0.1em;
    color: rgba(0,229,255,0.9); cursor: pointer; text-align: center;
    transition: all 0.2s; font-family: inherit;
}
.tn-next-btn:hover {
    background: linear-gradient(135deg,rgba(0,150,255,0.4),rgba(100,0,255,0.4));
    border-color: rgba(0,229,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,100,255,0.3);
}

/* Resultados finales */
.tn-final {
    padding: 12px 4px 20px;
}
.tn-final-header {
    text-align: center;
    background: linear-gradient(135deg,rgba(255,180,0,0.14),rgba(255,100,0,0.1));
    border: 1px solid rgba(255,180,0,0.25);
    border-radius: 16px;
    padding: clamp(16px,3vw,24px);
    margin-bottom: 16px;
    animation: tnScale 0.5s ease both;
}
.tn-final-trophy { font-size: clamp(2rem,7vw,3rem); margin-bottom: 6px; display: block; animation: tnPulse 1.8s ease-in-out infinite; }
.tn-final-title {
    font-size: clamp(1rem,3.5vw,1.4rem); font-weight: 900;
    letter-spacing: 0.18em;
    background: linear-gradient(90deg,#ffd700,#ffaa00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin: 0 0 8px;
}
.tn-final-winner-name {
    font-size: clamp(1.4rem,5vw,2rem); font-weight: 900; color:#fff; margin: 0 0 4px;
    text-shadow: 0 0 24px rgba(255,215,0,0.6);
}
.tn-final-winner-score {
    font-size: clamp(0.85rem,2.5vw,1rem); color: rgba(255,215,0,0.8);
    font-weight: 700; margin: 0;
}
.tn-classification-label {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3); text-transform: uppercase;
    margin: 14px 0 10px;
}
.tn-new-btn {
    display: block; width: 100%; margin-top: 16px;
    background: linear-gradient(135deg,rgba(255,180,0,0.25),rgba(255,100,0,0.2));
    border: 1px solid rgba(255,180,0,0.4);
    border-radius: 11px; padding: 13px;
    font-size: 0.9rem; font-weight: 900; letter-spacing: 0.1em;
    color: #ffd700; cursor: pointer; text-align: center;
    transition: all 0.2s; font-family: inherit;
}
.tn-new-btn:hover {
    background: linear-gradient(135deg,rgba(255,200,0,0.35),rgba(255,120,0,0.28));
    border-color: rgba(255,200,0,0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255,150,0,0.35);
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN — LAYOUT MEJORADO (desktop y partículas)
═══════════════════════════════════════════════════════════════ */

/* Ocultar partículas flotantes en homeScreen — hs-bg tiene sus propios efectos */
body:has(#homeScreen.active) .floating-particles {
    opacity: 0;
    pointer-events: none;
}

/* Fix: #multiplayerScreen tiene display:flex en regla ID que supera .mp-modal display:none */
#multiplayerScreen { display: none !important; }
#multiplayerScreen.mp-open { display: block !important; }

/* ═══════════════════════════════════════════════════════════
   MÁQUINA ARCADE — GUARDIAN RUNNER (desktop)
   ═══════════════════════════════════════════════════════════ */

/* Ocultar arcade en móvil, ocultar consola en desktop */
.rac-machine {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
body.mobile-touch-device .rac-machine { display: none !important; }
.runner-mobile-console { display: none; }

/* ══ RUNNER PORTRAIT MÓVIL: Mostrar canvas + consola GameBoy ══
   Override de display:none con mayor especificidad + !important      */
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-machine {
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex-shrink: 0;
}
/* Ocultar decoración arcade — quedan solo canvas + HUD */
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-side-panel,
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-marquee,
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-ctrl-deck,
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-credit-display {
    display: none !important;
}
/* HUD compacto para móvil portrait */
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud,
body.runner-compact-ui[data-active-section="runnerContainer"] .rac-hud {
    padding: 6px 8px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #000 !important;
    border-bottom: 1px solid rgba(0,255,136,0.12) !important;
    border-radius: 0 !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud-stats,
body.runner-compact-ui[data-active-section="runnerContainer"] .rac-hud-stats {
    gap: 1px !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud-cell-boss,
body.runner-compact-ui[data-active-section="runnerContainer"] .rac-hud-cell-boss {
    display: none !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-hud-nav,
body.runner-compact-ui[data-active-section="runnerContainer"] .runner-hud-nav {
    display: grid !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .gs-nav-fab,
body.runner-compact-ui[data-active-section="runnerContainer"] .gs-nav-fab {
    display: none !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud-cell {
    min-width: 42px;
    gap: 0;
    flex: 0 1 auto;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud-lbl {
    font-size: 0.42rem;
    letter-spacing: 0.1em;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud-val {
    font-size: 0.74rem;
}
/* rac-body ocupa todo el ancho, sin side panels */
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-body {
    flex: 0 0 auto;
    min-height: 0;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-screen-col {
    width: 100%;
    min-width: 0;
}
/* Conectar runner-stage y runner-mobile-console como un GameBoy unificado */
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage.rac-screen-wrap {
    border-radius: 28px 28px 0 0 !important;
    margin-bottom: 0 !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-mobile-console {
    border-radius: 0 0 38px 24px !important;
    border-top: none !important;
    box-shadow: 0 18px 30px rgba(0,0,0,0.18) !important;
}
/* Eliminar gap entre pantalla y controles para aspecto integrado */
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-game,
body.runner-compact-ui[data-active-section="runnerContainer"] .runner-game {
    gap: 0 !important;
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .game-content,
body.runner-compact-ui[data-active-section="runnerContainer"] .game-content {
    overflow: hidden !important;
    height: 100dvh !important;
    height: 100svh !important;
    max-height: 100dvh !important;
    max-height: 100svh !important;
}
body.mobile-touch-device:not([data-active-section="runnerContainer"]):not([data-active-section="platformerContainer"]) .game-content {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Full-screen layout para la sección runner */
body[data-active-section="runnerContainer"] .game-content {
    background: #06060e;
    padding: 0;
    height: calc(100vh - 72px);
    max-height: calc(100vh - 72px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body[data-active-section="runnerContainer"] .runner-game {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ─── MARQUESINA ─── */
.rac-marquee {
    background: linear-gradient(180deg, #000 0%, #0a0018 50%, #000 100%);
    border-bottom: 2px solid rgba(0,229,255,0.25);
    overflow: hidden;
    flex-shrink: 0;
}
.rac-led-row {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 18px);
    padding: 4px 20px;
    background: #000;
}
.rac-led-row span {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0,255,136,0.5);
    animation: racLed 1.6s ease-in-out infinite;
}
.rac-led-row span:nth-child(2n)   { background: #00e5ff; box-shadow: 0 0 8px #00e5ff, 0 0 16px rgba(0,229,255,0.5); animation-delay: 0.4s; }
.rac-led-row span:nth-child(3n)   { background: #ff3350; box-shadow: 0 0 8px #ff3350, 0 0 16px rgba(255,51,80,0.5);  animation-delay: 0.8s; }
.rac-led-row span:nth-child(4n)   { background: #ffd700; box-shadow: 0 0 8px #ffd700, 0 0 16px rgba(255,215,0,0.5);  animation-delay: 1.2s; }
.rac-led-row span:nth-child(5n)   { background: #b44bff; box-shadow: 0 0 8px #b44bff, 0 0 16px rgba(180,75,255,0.5); animation-delay: 0.6s; }
.rac-led-row-b span { animation-direction: reverse; }
@keyframes racLed {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.15; transform: scale(0.65); }
}
.rac-marquee-body {
    text-align: center;
    padding: 4px 20px 4px;
}
.rac-marquee-badge {
    font-size: clamp(0.55rem, 1vw, 0.75rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(0,229,255,0.55);
    margin-bottom: 4px;
}
.rac-marquee-title {
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    background: linear-gradient(90deg, #00ff88 0%, #00e5ff 30%, #b44bff 60%, #ff3350 80%, #00ff88 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: racTitleScroll 4s linear infinite;
    filter: drop-shadow(0 0 16px rgba(0,255,136,0.4));
}
@keyframes racTitleScroll {
    0%   { background-position: 0%   center; }
    100% { background-position: 300% center; }
}
.rac-bolt {
    display: inline-block;
    animation: racBolt 0.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 8px #ffd700);
    -webkit-text-fill-color: #ffd700;
}
@keyframes racBolt { from { transform: scale(1) rotate(-5deg); } to { transform: scale(1.2) rotate(5deg); } }
.rac-marquee-stars {
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: rgba(255,215,0,0.6);
    margin-top: 3px;
    animation: racStarPulse 2s ease-in-out infinite;
}
@keyframes racStarPulse { 0%,100%{opacity:0.5} 50%{opacity:1; color:#ffd700;} }

/* ─── CUERPO PRINCIPAL ─── */
.rac-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ─── PANELES LATERALES ─── */
.rac-side-panel {
    width: clamp(48px, 7vw, 88px);
    background: linear-gradient(180deg, #0a0a16 0%, #080810 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 6px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
}
.rac-side-panel-r { border-right: none; border-left: 1px solid rgba(255,255,255,0.04); }
/* Neon vertical bar */
.rac-side-neon {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    right: 0;
    background: linear-gradient(180deg, transparent 0%, #00ff88 30%, #00e5ff 70%, transparent 100%);
    box-shadow: 0 0 10px #00ff88, 0 0 20px rgba(0,255,136,0.4);
    animation: racNeonPulse 2.5s ease-in-out infinite alternate;
}
.rac-side-neon-r { left: 0; right: auto; background: linear-gradient(180deg, transparent 0%, #b44bff 30%, #ff3350 70%, transparent 100%); box-shadow: 0 0 10px #b44bff, 0 0 20px rgba(180,75,255,0.4); }
@keyframes racNeonPulse { from{opacity:0.6} to{opacity:1; filter: brightness(1.3)} }
/* Grilles de altavoz */
.rac-grille {
    width: 100%;
    height: clamp(50px, 10vh, 90px);
    border-radius: 6px;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.7) 0px, rgba(0,0,0,0.7) 2px,
        rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 5px
    );
    border: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
}
.rac-grille::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 2px,
        transparent 2px, transparent 5px
    );
}
/* Badge lateral */
.rac-side-badge {
    font-size: clamp(0.4rem, 0.8vw, 0.6rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(0,229,255,0.5);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    line-height: 1.4;
    white-space: nowrap;
}
/* Ranura de moneda */
.rac-coin-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.rac-coin-label {
    font-size: 0.45rem;
    letter-spacing: 0.15em;
    color: rgba(255,215,0,0.5);
    font-weight: 900;
}
.rac-coin-line {
    width: 24px; height: 3px;
    border-radius: 99px;
    background: rgba(255,215,0,0.3);
    border: 1px solid rgba(255,215,0,0.4);
    box-shadow: 0 0 6px rgba(255,215,0,0.3);
}

/* ─── COLUMNA CENTRAL ─── */
.rac-screen-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #06060e;
}

/* ─── HUD ARCADE ─── */
.rac-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000;
    border-bottom: 1px solid rgba(0,255,136,0.15);
    padding: 4px 16px;
    flex-shrink: 0;
    gap: 8px;
    flex-wrap: nowrap;
}
.rac-hud-stats {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.runner-hud-nav {
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(8, 14, 28, 0.92), rgba(2, 6, 18, 0.95));
    box-shadow: 0 0 0 1px rgba(123, 47, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    place-items: center;
}
.runner-hud-nav:active {
    transform: scale(0.94);
}
body.gs-nav-open .runner-hud-nav {
    border-color: rgba(255, 83, 112, 0.6);
}
.rac-hud-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 60px;
}
.rac-hud-lbl {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    font-family: 'Courier New', monospace;
}
.rac-hud-val {
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #00ff88;
    text-shadow: 0 0 12px rgba(0,255,136,0.7);
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
}
.rac-hud-unit {
    font-size: 0.6rem;
    color: rgba(0,255,136,0.5);
    margin-left: 2px;
    font-family: monospace;
}
.rac-hud-score .rac-hud-val-score { color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.8); }
.rac-hud-val-health { font-size: 0.85rem; }
.rac-hud-val-boss { color: #ff3350; text-shadow: 0 0 12px rgba(255,51,80,0.7); font-size: 0.85rem; }

/* ─── PANTALLA CRT ─── */
.rac-screen-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: stretch;
    background: #000;
    overflow: hidden;
    min-height: 0;
}
.rac-screen-bezel {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: 0;
}
/* Scanlines */
.rac-scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
        rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
    );
    pointer-events: none;
    z-index: 2;
}
/* Viñeta CRT */
.rac-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
    z-index: 2;
}
/* Brillo de pantalla */
.rac-screen-glare {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
/* Canvas */
.rac-screen-wrap #runnerCanvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
    object-fit: fill;
    flex: 1 1 auto;
    min-height: 0;
}

/* ─── DECK DE CONTROLES ─── */
.rac-ctrl-deck {
    background: linear-gradient(180deg, #0a0a16 0%, #040408 100%);
    border-top: 2px solid rgba(0,255,136,0.15);
    padding: 6px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    min-height: 86px;
}
/* Hints de teclado */
.rac-ctrl-hints {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.rac-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: monospace;
}
.rac-hint kbd {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.6rem;
    font-family: monospace;
    color: rgba(255,255,255,0.65);
}
/* Botones arcade */
.rac-ctrl-btns {
    display: flex;
    gap: 14px;
    align-items: center;
}
.rac-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.1s;
}
.rac-btn:active { transform: scale(0.94); }
.rac-btn:focus, .rac-btn:focus-visible { outline: none; box-shadow: none; }
.rac-btn-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(46px, 4.5vw, 58px);
    height: clamp(46px, 4.5vw, 58px);
    border-radius: 50%;
    position: relative;
    z-index: 0;
}
.rac-btn-inner {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    z-index: 1;
    line-height: 1;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.rac-btn {
    position: relative;
}
/* Botón JUGAR — verde neón */
.rac-btn-play .rac-btn-ring {
    background: radial-gradient(circle at 35% 30%, #22ff7e, #00b84a 55%, #006b2a 100%);
    box-shadow: 0 4px 0 #003d18, 0 0 18px rgba(0,200,80,0.5), 0 0 40px rgba(0,255,100,0.2);
}
.rac-btn-play:hover .rac-btn-ring { box-shadow: 0 4px 0 #003d18, 0 0 30px rgba(0,255,100,0.8), 0 0 60px rgba(0,255,100,0.3); }
.rac-btn-play:active .rac-btn-ring { box-shadow: 0 1px 0 #003d18, 0 0 10px rgba(0,200,80,0.3); }
/* Botón PAUSA — amarillo */
.rac-btn-pause .rac-btn-ring {
    background: radial-gradient(circle at 35% 30%, #ffe066, #f59e0b 55%, #92600a 100%);
    box-shadow: 0 4px 0 #5c3a04, 0 0 18px rgba(245,158,11,0.5), 0 0 40px rgba(255,200,0,0.2);
}
.rac-btn-pause:hover .rac-btn-ring { box-shadow: 0 4px 0 #5c3a04, 0 0 30px rgba(255,200,0,0.8), 0 0 60px rgba(255,200,0,0.3); }
.rac-btn-pause:active .rac-btn-ring { box-shadow: 0 1px 0 #5c3a04; }
/* Botón SALIR — rojo */
.rac-btn-exit .rac-btn-ring {
    background: radial-gradient(circle at 35% 30%, #ff6680, #ff3350 55%, #9b0020 100%);
    box-shadow: 0 4px 0 #5c0010, 0 0 18px rgba(255,51,80,0.5), 0 0 40px rgba(255,0,50,0.2);
}
.rac-btn-exit:hover .rac-btn-ring { box-shadow: 0 4px 0 #5c0010, 0 0 30px rgba(255,80,100,0.8), 0 0 60px rgba(255,0,50,0.3); }
.rac-btn-exit:active .rac-btn-ring { box-shadow: 0 1px 0 #5c0010; }
.rac-btn-lbl {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-family: monospace;
}
.rac-btn:hover .rac-btn-lbl { color: rgba(255,255,255,0.9); }
/* Crédito display */
.rac-credit-display {
    text-align: right;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: rgba(255,215,0,0.4);
    font-family: monospace;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    animation: racCredit 2s ease-in-out infinite;
}
@keyframes racCredit { 0%,100%{opacity:0.4} 50%{opacity:0.9; color:#ffd700} }
.rac-credit-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ffd700;
    box-shadow: 0 0 6px #ffd700;
    animation: racLed 0.8s ease-in-out infinite;
}

/* ─── NO mostrar elementos del diseño viejo en arcade ─── */
body[data-active-section="runnerContainer"]:not(.mobile-touch-device) .runner-info,
body[data-active-section="runnerContainer"]:not(.mobile-touch-device) .runner-controls,
body[data-active-section="runnerContainer"]:not(.mobile-touch-device) .runner-game > h2 {
    display: none !important;
}

/* Fix: canvas en rac-screen-wrap no hereda margin ni max-width vieja */
.rac-screen-wrap > canvas {
    margin: 0 !important;
    max-width: none !important;
    border: none !important;
}

/* Fix: runner-stage-message posición dentro de rac-screen-wrap */
.rac-screen-wrap .runner-stage-message {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

/* Fix: ocultar runner-stage antigua en desktop */
body[data-active-section="runnerContainer"]:not(.mobile-touch-device) .runner-stage-shell {
    display: none !important;
}



/* Fix: #homeScreen tiene display:flex permanente (regla ID), no se oculta al navegar a otra screen */
#homeScreen:not(.active) { display: none !important; }

/* Fix: header oculto en homeScreen — solo se muestra en gameScreen */
body:has(#homeScreen.active) #mainHeader { display: none !important; }

/* Fix: #tournamentScreen { position:relative } (ID) anula .ts-modal { position:fixed } (clase) */
#tournamentScreen.ts-modal { position: fixed !important; inset: 0 !important; }

/* Layout de 2 columnas en pantallas ≥900px */
@media (min-width: 900px) {
    #homeScreen {
        display: grid;
        grid-template-columns: 1fr 420px;
        grid-template-rows: auto auto;
        column-gap: clamp(32px,5vw,64px);
        row-gap: 16px;
        align-content: center;
        align-items: start;
        padding: clamp(32px,5vw,64px) clamp(48px,7vw,100px);
    }
    /* hero: columna izquierda, abarca las 2 filas, centrado verticalmente */
    .hs-hero {
        grid-column: 1;
        grid-row: 1 / 3;
        flex-direction: column;
        align-items: flex-start;
        align-self: center;
        text-align: left;
        gap: 20px;
        width: 100%;
        max-width: none;
    }
    .hs-hero-text { text-align: left; }
    .hs-eyebrow    { justify-content: flex-start; }
    .hs-title      { justify-content: flex-start; }
    /* panel y menú: columna derecha */
    .hs-panel {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }
    .hs-menu-grid {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN — CYBERPUNK (misma estética que homeScreen)
═══════════════════════════════════════════════════════════════ */

/* Mismo fondo oscuro que homeScreen */
body:has(#gameScreen.active) {
    background: #030610 !important;
}

/* Fondo animado: grid + orbes */
#gameScreen {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}
#gameScreen::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 55px 55px;
    animation: hsGridMove 14s linear infinite;
}
#gameScreen::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 10% 10%, rgba(0,80,255,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 90% 90%, rgba(100,0,255,0.12) 0%, transparent 60%);
    animation: gsOrbFloat 22s ease-in-out infinite;
}
@keyframes gsOrbFloat {
    0%,100% { transform: translate(0,0); }
    50%     { transform: translate(30px,-20px); }
}

/* Game header — cyberpunk strip */
body:has(#gameScreen.active) .game-header {
    background: rgba(6,10,26,0.94);
    border: none;
    border-bottom: 1px solid rgba(0,229,255,0.14);
    border-radius: 0;
    margin-bottom: 0;
    padding: 12px clamp(20px,4vw,48px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.04);
    position: relative; z-index: 10;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body:has(#gameScreen.active) .game-header .stat {
    color: rgba(255,255,255,0.72);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* Línea de acento bajo el header */
body:has(#gameScreen.active) .game-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.5), transparent);
    pointer-events: none;
}

/* Game content — transparente para mostrar el fondo animado */
body:has(#gameScreen.active) .game-content {
    background: transparent;
    box-shadow: none;
    padding: clamp(12px,2vw,24px) clamp(20px,4vw,48px) clamp(8px,1.5vw,16px);
    position: relative; z-index: 2;
    overflow: visible;
}

/* Título "Elige tu misión" con gradiente */
body:has(#gameScreen.active) .menu-title {
    background: linear-gradient(90deg, #fff 40%, #00e5ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-size: clamp(1.6rem,3.5vw,2.4rem);
}

/* El gameMenu ya tiene su propio grid::before — lo ocultamos para no duplicar */
body:has(#gameScreen.active) #gameMenu::before {
    display: none;
}

/* mainHeader compacto y transparente en gameScreen */
body:has(#gameScreen.active) .main-header {
    background: rgba(3,6,16,0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,229,255,0.1) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5) !important;
    padding: 0;
}
body:has(#gameScreen.active) .header-content {
    padding: 8px clamp(16px,3vw,32px);
}
body:has(#gameScreen.active) .header-title h1 {
    font-size: clamp(0.85rem,1.5vw,1.1rem);
}
body:has(#gameScreen.active) .header-logo {
    height: clamp(28px,4vw,38px);
}
body:has(#gameScreen.active) .header-icon {
    height: 22px;
}

/* Container sin padding lateral extra */
body:has(#gameScreen.active) .container {
    padding: 0 !important;
}

/* Game content — máximo ancho */
body:has(#gameScreen.active) .game-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Botones de acción del header — estilo cyberpunk */
body:has(#gameScreen.active) .game-header .btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    border-radius: 10px;
    font-size: 0.78rem;
    padding: 6px 14px;
    transition: background 0.18s, border-color 0.18s;
}
body:has(#gameScreen.active) .game-header .btn:hover {
    background: rgba(0,229,255,0.15);
    border-color: rgba(0,229,255,0.45);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   GAME SECTIONS — Glassmorphism cyberpunk (todos los minijuegos)
═══════════════════════════════════════════════════════════════ */

/* Fondo oscuro igual que homeScreen durante gameplay */
body.heavy-gameplay-mode {
    background: #030610 !important;
}

/* Container a ancho completo en desktop durante gameplay */
body.heavy-gameplay-mode .container {
    max-width: 100% !important;
    padding-inline: clamp(12px,2.5vw,40px) !important;
}

/* GameScreen mantiene overflow:hidden para que el grid no se desborde */
body.heavy-gameplay-mode #gameScreen {
    background: transparent !important;
    overflow: hidden !important;
}

/* Game content: padding uniforme */
body.heavy-gameplay-mode .game-content {
    padding: clamp(12px,2vw,24px) clamp(12px,2.5vw,36px) !important;
}

/* Chat simulator necesita padding=0 para aprovechar todo el espacio vertical */
body.heavy-gameplay-mode[data-active-section="chatContainer"] #gameScreen .game-content {
    padding: 0 !important;
}
body.heavy-gameplay-mode[data-active-section="chatContainer"] .container {
    padding-inline: 0 !important;
}

/* ── Chat Simulator: diseño nativo móvil (A15 y similares) ── */
@media (max-width: 768px) {
    /* 1. Viewport fijo al alto visible */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] {
        overflow: hidden !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] #gameScreen {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100svh !important;
        overflow: hidden !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .game-header {
        flex-shrink: 0 !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .game-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] #chatContainer.game-section {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    /* 2. cs-wrap: columna que llena chatContainer */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-wrap {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* 3. HUD y elementos que no crecen */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-hud {
        flex-shrink: 0 !important;
        padding: 4px 10px !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-hud-val   { font-size: 0.9rem !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-hud-label { font-size: 0.5rem !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-hud-title { font-size: 0.6rem !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-streak-bar {
        flex-shrink: 0 !important;
        padding: 3px 10px !important;
        font-size: 0.7rem !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-alert-bar {
        flex-shrink: 0 !important;
        padding: 5px 10px !important;
        font-size: 0.68rem !important;
    }
    /* 4. Teléfono: sin marco, ocupa todo el espacio libre */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-phone {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    /* 5. Ocultar barra de título desktop (traffic lights) */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-phone-notch {
        display: none !important;
    }
    /* 6. Cadena flex interior — flex-basis:0 evita el problema de min-height:auto */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-desktop-layout {
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-sidebar {
        display: none !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-main {
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }
    /* 7. Cuerpo de mensajes: crece y hace scroll */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-phone-body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 10px 12px !important;
    }
    /* 8. Footer: siempre visible, no se encoge */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-phone-footer {
        flex-shrink: 0 !important;
        padding: 8px 10px 12px !important;
    }
    /* 9. Opciones más compactas */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-choices-header {
        font-size: 0.58rem !important;
        margin-bottom: 5px !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-choices { gap: 5px !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-choice-btn {
        padding: 9px 13px !important;
        font-size: 0.8rem !important;
        border-radius: 9px !important;
        line-height: 1.35 !important;
    }
    /* 10. Header nativo (back btn, avatar compacto) */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-phone-header {
        padding: 8px 10px !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-back-btn {
        display: flex !important;
        font-size: 1.2rem !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-header-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-danger-badge {
        font-size: 0.52rem !important;
        padding: 3px 6px !important;
    }
    /* 11. Mensajes y burbujas compactos */
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-msg      { max-width: 88% !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-bubble   { padding: 7px 11px !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-msg-text { font-size: 0.82rem !important; line-height: 1.4 !important; }
    body.heavy-gameplay-mode[data-active-section="chatContainer"] .cs-msg-time { font-size: 0.55rem !important; margin-top: 3px !important; }
}

/* Header strip: cyberpunk consistente en todos los juegos */
body.heavy-gameplay-mode .game-header {
    background: rgba(3,5,18,0.94) !important;
    border-bottom: 1px solid rgba(0,229,255,0.13) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.03) !important;
}
body.heavy-gameplay-mode .game-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.45), transparent);
    pointer-events: none;
}

/* ── Quiz (.cq-wrap) — glass sobre fondo animado ── */
body.heavy-gameplay-mode .cq-wrap {
    max-width: min(96%, 1000px) !important;
    background: rgba(3,6,22,0.78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: rgba(0,229,255,0.28) !important;
    box-shadow: 0 0 60px rgba(0,229,255,0.06), 0 8px 40px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(0,229,255,0.08) !important;
}

/* ── Memory Match (.mm-wrap) — glass purple accent ── */
body.heavy-gameplay-mode .mm-wrap {
    background: rgba(3,6,22,0.78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(168,85,247,0.25) !important;
    box-shadow: 0 0 60px rgba(168,85,247,0.07), 0 8px 40px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(168,85,247,0.07) !important;
    border-radius: 18px !important;
}

/* ── SpotDanger (.spot-danger-game) — glass red accent ── */
body.heavy-gameplay-mode .spot-danger-game {
    max-width: min(100%, 1120px) !important;
    background: rgba(3,6,22,0.78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(239,68,68,0.22) !important;
    box-shadow: 0 0 60px rgba(239,68,68,0.06), 0 8px 40px rgba(0,0,0,0.55),
                inset 0 1px 0 rgba(239,68,68,0.06) !important;
    border-radius: 18px !important;
}

/* ── Chat Scenario (.sc-desktop-window) — glass panel ── */
body.heavy-gameplay-mode .sc-desktop-window {
    background: rgba(6,8,20,0.9) !important;
    border-color: rgba(0,229,255,0.15) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 0 60px rgba(0,229,255,0.05), 0 20px 60px rgba(0,0,0,0.65) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN — PANEL ÉPICO (Comenzar Aventura)
═══════════════════════════════════════════════════════════════ */

/* Panel más dramático: cristal de obsidiana */
.hs-panel {
    background: linear-gradient(160deg, rgba(4,8,28,0.97) 0%, rgba(8,4,24,0.95) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(0,229,255,0.15),
        0 24px 80px rgba(0,0,0,0.7),
        0 0 80px rgba(0,80,255,0.08),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,229,255,0.04) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

/* Scanline dentro del panel */
.hs-panel::after {
    content: '';
    position: absolute;
    top: -10%; left: 0; right: 0; height: 40px;
    background: linear-gradient(180deg, transparent, rgba(0,229,255,0.04), transparent);
    animation: hsPanelScan 6s linear infinite;
    pointer-events: none; z-index: 0;
}
@keyframes hsPanelScan { from{top:-10%} to{top:110%} }

/* Label más neon */
.hs-panel-label {
    color: rgba(0,229,255,0.7) !important;
    text-shadow: 0 0 8px rgba(0,229,255,0.4);
}
.hs-panel-dot {
    box-shadow: 0 0 10px #00e5ff, 0 0 20px rgba(0,229,255,0.4) !important;
}

/* Input: vidrio más brillante */
.hs-input-wrap {
    background: rgba(0,229,255,0.04) !important;
    border-color: rgba(0,229,255,0.15) !important;
    box-shadow: inset 0 0 20px rgba(0,229,255,0.03);
}
.hs-input-wrap:focus-within {
    background: rgba(0,229,255,0.07) !important;
    border-color: rgba(0,229,255,0.5) !important;
    box-shadow:
        0 0 0 3px rgba(0,229,255,0.1),
        0 0 30px rgba(0,229,255,0.1),
        inset 0 0 20px rgba(0,229,255,0.05) !important;
}

/* ═══ BOTÓN COMENZAR AVENTURA — PLASMA ÉPICO ═══ */
.hs-start-btn {
    border-radius: 16px !important;
    box-shadow:
        0 0 0 1px rgba(0,229,255,0.4),
        0 8px 40px rgba(0,80,255,0.5),
        0 0 80px rgba(0,229,255,0.15),
        inset 0 1px 0 rgba(255,255,255,0.12) !important;
    animation: hsStartPlasma 3s ease-in-out infinite !important;
    transform-origin: center;
}
@keyframes hsStartPlasma {
    0%,100% {
        box-shadow: 0 0 0 1px rgba(0,229,255,0.4), 0 8px 40px rgba(0,80,255,0.5), 0 0 80px rgba(0,229,255,0.15);
    }
    33% {
        box-shadow: 0 0 0 1px rgba(123,47,255,0.5), 0 8px 48px rgba(100,0,255,0.5), 0 0 80px rgba(123,47,255,0.2);
    }
    66% {
        box-shadow: 0 0 0 1px rgba(255,45,135,0.45), 0 8px 48px rgba(200,0,100,0.4), 0 0 80px rgba(255,45,135,0.15);
    }
}
.hs-start-btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow:
        0 0 0 2px rgba(0,229,255,0.7),
        0 16px 60px rgba(0,80,255,0.7),
        0 0 120px rgba(0,229,255,0.25) !important;
}

/* Fondo del botón: gradiente arcoíris plasma */
.hs-start-bg {
    background: linear-gradient(135deg,
        #0050ff 0%,
        #00aaff 20%,
        #00e5ff 35%,
        #7b2fff 55%,
        #ff2d87 75%,
        #ff6600 90%,
        #0050ff 100%
    ) !important;
    background-size: 300% 300% !important;
    animation: hsStartBgPlasma 4s ease infinite !important;
}
@keyframes hsStartBgPlasma {
    0%   { background-position: 0%   50%; }
    25%  { background-position: 50%  0%;  }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50%  100%; }
    100% { background-position: 0%   50%; }
}

/* Shine mejorado: doble barrido */
.hs-start-shine {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%) !important;
    width: 40% !important;
    animation: hsStartShine2 2.5s ease-in-out infinite !important;
}
@keyframes hsStartShine2 { 0%,100%{left:-60%} 55%{left:160%} }

/* Texto del botón: más grande, glow */
.hs-start-content {
    font-size: clamp(1rem,1.8vw,1.3rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.4) !important;
    padding: clamp(16px,2.2vw,22px) clamp(28px,3.5vw,48px) !important;
}

/* Icono del botón: spin suave en hover */
.hs-start-icon {
    font-size: 1.5em !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
    animation: hsStartIco2 1.6s ease-in-out infinite !important;
}
@keyframes hsStartIco2 {
    0%,100% { transform: scale(1) translateX(0) rotate(0deg); }
    40%     { transform: scale(1.2) translateX(4px) rotate(-12deg); }
    70%     { transform: scale(1.1) translateX(2px) rotate(5deg); }
}

/* Trail inferior del botón: animated */
.hs-start-trail {
    height: 3px !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), rgba(0,229,255,0.9), transparent) !important;
    animation: hsTrail2 1.8s ease-in-out infinite !important;
    background-size: 200% 100% !important;
}
@keyframes hsTrail2 {
    0%   { background-position: -100% 0; opacity: 0.5; }
    50%  { background-position: 200%  0; opacity: 1;   }
    100% { background-position: -100% 0; opacity: 0.5; }
}

/* ═══ MINI CARDS DE MENÚ — ÉPICAS ═══ */
.hs-menu-card {
    background: linear-gradient(160deg, rgba(8,12,30,0.95) 0%, rgba(4,6,20,0.95) 100%) !important;
    border-color: rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    padding: 18px 8px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, box-shadow 0.2s !important;
}

/* Colores únicos por card */
.hs-menu-card:nth-child(1) { --hmc: #ffd700; --hmg: rgba(255,215,0,0.4); }
.hs-menu-card:nth-child(2) { --hmc: #ff2d87; --hmg: rgba(255,45,135,0.4); }
.hs-menu-card:nth-child(3) { --hmc: #7b2fff; --hmg: rgba(123,47,255,0.4); }
.hs-menu-card:nth-child(4) { --hmc: #00e5ff; --hmg: rgba(0,229,255,0.4); }

.hs-menu-card:hover {
    transform: translateY(-6px) scale(1.06) !important;
    border-color: var(--hmc, rgba(0,229,255,0.5)) !important;
    box-shadow:
        0 0 0 1px var(--hmc,rgba(0,229,255,0.4)),
        0 12px 36px rgba(0,0,0,0.55),
        0 0 30px var(--hmg,rgba(0,229,255,0.15)) !important;
}
.hs-mc-glow {
    background: radial-gradient(circle at 50% 0%, var(--hmg, rgba(0,229,255,0.15)), transparent 70%) !important;
}
.hs-menu-card:hover .hs-mc-glow { opacity: 1 !important; }

/* Iconos: más grandes + float */
.hs-mc-icon {
    font-size: 1.9rem !important;
    filter: drop-shadow(0 4px 8px var(--hmg, rgba(0,229,255,0.3)));
    animation: hmcFloat var(--hf-d,3s) ease-in-out infinite var(--hf-del,0s);
}
.hs-menu-card:nth-child(1) .hs-mc-icon { --hf-d: 3.2s; --hf-del: 0s; }
.hs-menu-card:nth-child(2) .hs-mc-icon { --hf-d: 2.8s; --hf-del: -0.5s; }
.hs-menu-card:nth-child(3) .hs-mc-icon { --hf-d: 3.5s; --hf-del: -1s; }
.hs-menu-card:nth-child(4) .hs-mc-icon { --hf-d: 2.6s; --hf-del: -1.5s; }
@keyframes hmcFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Label más brillante */
.hs-mc-label {
    color: var(--hmc, rgba(0,229,255,0.6)) !important;
    opacity: 0.7;
    text-shadow: 0 0 8px var(--hmg, rgba(0,229,255,0.3));
    font-size: 0.58rem !important;
}
.hs-menu-card:hover .hs-mc-label { opacity: 1; }

/* Barra inferior: color del acento */
.hs-mc-bar {
    background: linear-gradient(90deg, transparent, var(--hmc, rgba(0,229,255,0.7)), transparent) !important;
    height: 2px !important;
}
.hs-menu-card:hover .hs-mc-bar { transform: scaleX(1) !important; }

/* ── Panel Stats ── */
.hs-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}
.hs-panel-status {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em;
    color: rgba(0,229,255,0.55);
    font-family: 'Courier New', monospace;
}
.hs-panel-live {
    width: 6px; height: 6px; border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff, 0 0 16px rgba(0,229,255,0.4);
    animation: hsLivePulse 1.2s ease-in-out infinite;
    display: inline-block;
}
@keyframes hsLivePulse {
    0%,100% { opacity:1; transform:scale(1);    box-shadow: 0 0 6px #00e5ff; }
    50%      { opacity:0.4; transform:scale(0.7); box-shadow: 0 0 14px #00e5ff; }
}

.hs-panel-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-top: 14px;
    padding: 10px 16px;
    background: rgba(0,229,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(0,229,255,0.08);
}
.hs-ps-item {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; gap: 2px;
}
.hs-ps-val {
    font-size: 1.05rem; font-weight: 900;
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #00e5ff, #7b2fff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}
.hs-ps-lbl {
    font-size: 0.5rem; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.3); font-weight: 700;
    font-family: 'Courier New', monospace;
}
.hs-ps-sep {
    width: 1px; height: 28px;
    background: linear-gradient(180deg, transparent, rgba(0,229,255,0.25), transparent);
    flex-shrink: 0;
}

/* ── Shield ring outer ── */
.hs-shield-ring-outer {
    position: absolute;
    inset: -32px;
    border-radius: 50%;
    border: 1px solid rgba(0,229,255,0.12);
    animation: hsShieldRingOut 7s linear infinite;
}
.hs-shield-ring-outer::before {
    content: '';
    position: absolute;
    top: -2px; left: 40%;
    width: 16px; height: 4px;
    border-radius: 50%;
    background: rgba(0,229,255,0.8);
    box-shadow: 0 0 12px rgba(0,229,255,0.7);
}
@keyframes hsShieldRingOut { to { transform: rotate(360deg); } }

/* ── Escudo 3er halo (más suave) ── */
.hs-shield-halo-3 {
    position: absolute;
    inset: -48px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,47,255,0.06) 0%, transparent 70%);
    animation: hsHalo3Pulse 5s ease-in-out infinite reverse;
}
@keyframes hsHalo3Pulse {
    0%,100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(1.3); opacity: 0.2; }
}

/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN — REDISEÑO ÉPICO COMPLETO
   Selector raíz: #gameScreen / body.gameplay-mode
═══════════════════════════════════════════════════════════════ */

/* ── Fondo del gameScreen ── */
#gameScreen {
    position: relative !important;
    background: radial-gradient(ellipse at 20% 50%, rgba(0,20,60,0.9) 0%, rgba(0,5,20,1) 60%) !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.gs-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Grid animado igual al homeScreen */
.gs-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gsGridMove 8s linear infinite;
}
@keyframes gsGridMove { from{background-position:0 0} to{background-position:48px 48px} }

/* Orbes de luz */
.gs-bg-orb {
    position: absolute; border-radius: 50%;
    filter: blur(80px); pointer-events: none;
}
.gs-bg-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,80,255,0.12), transparent 70%);
    top: -100px; left: -100px;
    animation: gsOrb1Move 12s ease-in-out infinite;
}
.gs-bg-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(123,47,255,0.1), transparent 70%);
    bottom: -80px; right: -80px;
    animation: gsOrb1Move 15s ease-in-out infinite reverse;
}
.gs-bg-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,45,135,0.07), transparent 70%);
    top: 40%; left: 50%;
    animation: gsOrb1Move 18s ease-in-out infinite 3s;
}
@keyframes gsOrb1Move {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(60px,-40px) scale(1.15); }
    66%      { transform: translate(-40px,30px) scale(0.9); }
}

/* Matrix canvas */
.gs-matrix-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0.12; z-index: 1;
}

/* ── HUD HEADER ── */
#gameScreen .game-header,
body.gameplay-mode .game-header,
body.heavy-gameplay-mode .game-header {
    position: relative !important;
    z-index: 100 !important;
    background: rgba(2,4,16,0.95) !important;
    border-bottom: 1px solid rgba(0,229,255,0.1) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px 20px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 1px 0 rgba(0,229,255,0.08), 0 4px 30px rgba(0,0,0,0.6) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
/* Línea neon inferior */
#gameScreen .game-header::after,
body.gameplay-mode .game-header::after,
body.heavy-gameplay-mode .game-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.6) 30%, rgba(123,47,255,0.5) 70%, transparent 100%);
    pointer-events: none;
    animation: gsHudLine 4s ease-in-out infinite;
}
@keyframes gsHudLine {
    0%,100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Chips de stats */
.player-stats {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    flex: 1 !important;
}
.gs-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(0,229,255,0.05);
    border: 1px solid rgba(0,229,255,0.13);
    border-radius: 8px;
    padding: 5px 10px;
    transition: border-color 0.2s, background 0.2s;
}
.gs-chip:hover {
    background: rgba(0,229,255,0.09);
    border-color: rgba(0,229,255,0.3);
}
.gs-chip-pts {
    --gsc: rgba(255,215,0,0.13); --gsb: rgba(255,215,0,0.3);
    background: rgba(255,215,0,0.05);
    border-color: rgba(255,215,0,0.13);
}
.gs-chip-pts:hover { background: rgba(255,215,0,0.09); border-color: rgba(255,215,0,0.3); }
.gs-chip-lvl {
    background: rgba(123,47,255,0.06);
    border-color: rgba(123,47,255,0.18);
}
.gs-chip-lvl:hover { background: rgba(123,47,255,0.1); border-color: rgba(123,47,255,0.4); }
.gs-chip-icon { font-size: 1rem; line-height: 1; }
.gs-chip-data { display: flex; flex-direction: column; gap: 0; }
.gs-chip-val {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Courier New', monospace;
    line-height: 1.1;
    letter-spacing: 0.04em;
}
.gs-chip-lbl {
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.28);
    font-family: 'Courier New', monospace;
    line-height: 1;
}
/* Ocultar los .stat viejos si quedaran */
#gameScreen .stat { display: none !important; }

/* Botones HUD */
.gs-hud-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.gs-hud-btn {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Courier New', monospace !important;
    white-space: nowrap !important;
}
.gs-hud-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.gs-btn-home {
    border-color: rgba(0,229,255,0.2) !important;
    color: rgba(0,229,255,0.7) !important;
}
.gs-btn-home:hover {
    background: rgba(0,229,255,0.1) !important;
    border-color: rgba(0,229,255,0.5) !important;
    color: #00e5ff !important;
    box-shadow: 0 0 16px rgba(0,229,255,0.2) !important;
}
.gs-btn-exit {
    border-color: rgba(255,60,60,0.2) !important;
    color: rgba(255,100,100,0.7) !important;
}
.gs-btn-exit:hover {
    background: rgba(255,60,60,0.1) !important;
    border-color: rgba(255,60,60,0.5) !important;
    color: #ff6060 !important;
    box-shadow: 0 0 16px rgba(255,60,60,0.2) !important;
}

/* ── GAME CONTENT: transparente para mostrar fondo ── */
body.gameplay-mode .game-content {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: clamp(16px,2.5vw,32px) clamp(16px,3vw,40px) !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ── MENU HERO redesign ── */
.menu-hero {
    text-align: center !important;
    padding: 24px 0 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

.menu-hero-badge {
    display: inline-block !important;
    background: linear-gradient(90deg, rgba(0,229,255,0.06), rgba(123,47,255,0.06)) !important;
    border: 1px solid rgba(0,229,255,0.25) !important;
    border-radius: 30px !important;
    padding: 6px 20px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.25em !important;
    color: rgba(0,229,255,0.8) !important;
    font-family: 'Courier New', monospace !important;
    margin-bottom: 14px !important;
    animation: badgePulse 3s ease infinite !important;
    box-shadow: 0 0 20px rgba(0,229,255,0.08) !important;
}

.menu-title {
    font-size: clamp(1.8rem, 4.5vw, 3rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 10px !important;
    line-height: 1.05 !important;
}

/* Glitch title effect */
.menu-title-glitch {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #00e5ff 0%, #fff 40%, #7b2fff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gsTitleGlow 4s ease infinite;
}
.menu-title-glitch::before,
.menu-title-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    background: none;
    -webkit-text-fill-color: transparent;
}
.menu-title-glitch::before {
    background: linear-gradient(135deg, #ff2d87, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    animation: gsGlitch1 7s ease-in-out infinite;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}
.menu-title-glitch::after {
    background: linear-gradient(135deg, #00e5ff, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    animation: gsGlitch2 7s ease-in-out infinite 0.3s;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}
@keyframes gsTitleGlow {
    0%,100% { filter: brightness(1); }
    50%      { filter: brightness(1.2) drop-shadow(0 0 20px rgba(0,229,255,0.4)); }
}
@keyframes gsGlitch1 {
    0%,94%,100% { transform: translate(0,0); opacity: 0; }
    95%          { transform: translate(-3px, 1px); opacity: 0.6; }
    97%          { transform: translate(3px,-1px); opacity: 0.4; }
}
@keyframes gsGlitch2 {
    0%,94%,100% { transform: translate(0,0); opacity: 0; }
    95%          { transform: translate(3px, -1px); opacity: 0.5; }
    97%          { transform: translate(-3px,1px); opacity: 0.3; }
}

.menu-subtitle {
    font-size: 0.76rem !important;
    color: rgba(255,255,255,0.32) !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 12px !important;
}
/* Separador animado */
.menu-hero-line {
    width: 160px; height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,0.5), rgba(123,47,255,0.5), transparent);
    animation: gsLineGlow 3s ease-in-out infinite;
}
@keyframes gsLineGlow {
    0%,100% { opacity: 0.5; width: 120px; }
    50%      { opacity: 1; width: 200px; }
}

/* ── MISSION CARDS rediseño ── */
.mission-card {
    background: linear-gradient(160deg, rgba(8,14,36,0.97) 0%, rgba(4,8,22,0.98) 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 18px !important;
    padding: 28px 18px 20px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), border-color 0.2s, box-shadow 0.2s !important;
    cursor: pointer !important;
}
.mission-card:hover {
    transform: translateY(-8px) scale(1.04) !important;
    border-color: var(--mc-accent, #00e5ff) !important;
    box-shadow:
        0 0 0 1px var(--mc-accent, #00e5ff),
        0 16px 48px rgba(0,0,0,0.65),
        0 0 40px var(--mc-glow, rgba(0,229,255,0.2)) !important;
    z-index: 5 !important;
}

/* Número de misión badge */
.mc-number {
    position: absolute;
    top: 12px; left: 14px;
    font-size: 0.55rem;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.06em;
    color: var(--mc-accent, rgba(0,229,255,0.5));
    opacity: 0.45;
    background: rgba(0,0,0,0.3);
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.06);
    line-height: 1;
    transition: opacity 0.2s;
}
.mission-card:hover .mc-number { opacity: 0.9; }

/* Badge de estado */
.mc-status {
    position: absolute;
    top: 12px; right: 14px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(0,229,255,0.5);
    font-family: 'Courier New', monospace;
    opacity: 0;
    transition: opacity 0.2s;
}
.mission-card:hover .mc-status { opacity: 1; }
.mc-status-live {
    color: #ff4444 !important;
    opacity: 1 !important;
    animation: mcLivePulse 1.2s ease-in-out infinite;
}
@keyframes mcLivePulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Icono principal más grande */
.mission-icon {
    font-size: 3.2em !important;
    margin-bottom: 12px !important;
    margin-top: 4px !important;
    display: block !important;
    filter: drop-shadow(0 4px 10px var(--mc-glow, rgba(0,229,255,.3))) !important;
}

/* Título de tarjeta */
.mission-card h3 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin: 0 0 7px !important;
    color: var(--mc-accent, #fff) !important;
    letter-spacing: 0.02em !important;
}

/* Descripción */
.mission-card p {
    font-size: 0.74rem !important;
    color: rgba(255,255,255,0.38) !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
}

/* Puntos badge */
.points {
    font-size: 0.62rem !important;
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid var(--mc-accent, rgba(0,229,255,0.3)) !important;
    color: var(--mc-accent, rgba(0,229,255,0.7)) !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    font-family: 'Courier New', monospace !important;
}

/* Botón JUGAR */
.mc-play {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.3);
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
    margin-top: 4px;
}
.mission-card:hover .mc-play {
    background: linear-gradient(90deg, var(--mc-glow, rgba(0,229,255,0.08)), rgba(0,0,0,0));
    border-color: var(--mc-accent, rgba(0,229,255,0.3));
    color: var(--mc-accent, #00e5ff);
    box-shadow: 0 0 16px var(--mc-glow, rgba(0,229,255,0.1));
}

/* Shine sweep mejorado */
.mission-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--mc-glow, rgba(0,229,255,0.06)), transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}
.mission-card:hover::before { opacity: 1; }

/* Grid de misiones: 3 columnas en desktop */
.mission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)) !important;
    gap: 20px !important;
    margin-top: 24px !important;
}
@media (min-width: 900px) {
    .mission-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1200px) {
    .mission-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}

/* Torneo: borde especial */
.mission-card-tournament {
    --mc-accent: #ffd700 !important;
    --mc-glow: rgba(255,215,0,0.35) !important;
    border-color: rgba(255,215,0,0.12) !important;
    /* Normalizar a tarjeta vertical como las demás */
    display: block !important;
    grid-column: auto !important;
    flex-direction: unset !important;
    text-align: center !important;
    padding: 28px 18px 20px !important;
    background: linear-gradient(160deg, rgba(12,10,4,0.97) 0%, rgba(8,6,2,0.98) 100%) !important;
}
.mission-card-tournament .mission-icon {
    font-size: 3.2em !important;
    margin-bottom: 12px !important;
    margin-top: 4px !important;
    display: block !important;
}
.mission-card-tournament .points.mp-badge-tournament {
    background: rgba(255,60,0,0.15) !important;
    color: #ff6b35 !important;
    border: 1px solid rgba(255,107,53,0.5) !important;
    animation: liveBadgePulse 1.5s ease infinite !important;
}

/* Glow ring mejorado */
.mc-glow-ring {
    position: absolute !important;
    top: 20px; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important; height: 80px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, var(--mc-glow, rgba(0,229,255,0.2)) 0%, transparent 70%) !important;
    animation: mcRingPulse 3s ease infinite !important;
    pointer-events: none !important;
}

/* Corners: más visibles */
.mc-corner { width: 16px !important; height: 16px !important; opacity: 0; transition: opacity 0.25s, border-color 0.25s; }
.mission-card:hover .mc-corner { opacity: 1; }
.mc-corner-tl { top: 10px !important; left: 10px !important; border-width: 2px 0 0 2px !important; }
.mc-corner-br { bottom: 10px !important; right: 10px !important; border-width: 0 2px 2px 0 !important; }

/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN — REDISEÑO TOTAL v2
   "Sorpréndeme" — experiencia gamer inmersiva completa
═══════════════════════════════════════════════════════════════ */

/* ── 1. Ocultar el main-header y footer institucional durante el juego ── */
body.gameplay-mode .main-header,
body.heavy-gameplay-mode .main-header {
    display: none !important;
}
body.gameplay-mode .main-footer,
body.heavy-gameplay-mode .main-footer {
    display: none !important;
}
body.gameplay-mode:not([data-active-section="gameMenu"]),
body.heavy-gameplay-mode {
    overflow: hidden !important;
}

body.gameplay-mode[data-active-section="gameMenu"] {
    overflow: hidden !important;
}

/* ── 2. gameScreen: pantalla inmersiva full-screen (solo cuando activa) ── */
#gameScreen.active {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #010612 !important;
    z-index: 200 !important;
    opacity: 1 !important;
    animation: none !important;
}
#gameScreen .gs-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ── 3. HUD: sticky, glass, una sola barra ── */
#gameScreen .game-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    flex-shrink: 0 !important;
    background: rgba(1,6,18,0.96) !important;
    border-bottom: 1px solid rgba(0,229,255,0.08) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 10px 20px !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    box-shadow: 0 2px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,229,255,0.04) !important;
}
#gameScreen .game-header::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0,229,255,0.0) 5%,
        rgba(0,229,255,0.5) 25%,
        rgba(123,47,255,0.5) 50%,
        rgba(255,45,135,0.4) 75%,
        rgba(0,229,255,0.0) 95%,
        transparent 100%
    );
    animation: gsHudBorder 6s ease-in-out infinite;
}
@keyframes gsHudBorder {
    0%,100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
#gameScreen .game-header::after { display: none !important; }

/* ── 4. game-content: zona scrollable sobre el fondo fijo ── */
#gameScreen .game-content {
    flex: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: clamp(10px,1.5vw,16px) clamp(14px,2.5vw,36px) clamp(10px,1.5vw,16px) !important;
    min-height: 0 !important;
}

body.gameplay-mode[data-active-section="gameMenu"] #gameScreen.active,
body.gi-game-menu-scroll #gameScreen.active {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    height: 100svh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.gameplay-mode[data-active-section="gameMenu"] #gameScreen .game-content,
body.gi-game-menu-scroll #gameScreen .game-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
}

body.gameplay-mode[data-active-section="gameMenu"] #gameMenu,
body.gi-game-menu-scroll #gameMenu {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 24px;
}

/* ── 5. Status bar del menu-hero ── */
.gs-system-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(0,229,255,0.6);
    background: rgba(0,229,255,0.05);
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: 20px;
    padding: 3px 12px;
    margin-bottom: 6px;
}
.gs-sys-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff;
    animation: gsLivePulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes gsLivePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.7)} }
.gs-sys-sep { opacity: 0.3; }

/* ── 6. Título con efecto glitch mejorado ── */
.menu-title {
    font-size: clamp(1.4rem, 3.5vw, 2.4rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    margin: 0 0 6px !important;
}
.menu-hero { padding: 8px 0 4px !important; }
.menu-hero-badge { display: none !important; }

/* ── 7. MISSION CARDS — rediseño total ── */
.mission-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%,170px),1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}
@media (min-width: 850px)  { .mission-grid { grid-template-columns: repeat(5,1fr) !important; gap: 10px !important; } }
@media (min-width: 1200px) { .mission-grid { gap: 14px !important; } }
@media (max-width: 700px)  { .mission-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 420px)  { .mission-grid { grid-template-columns: 1fr !important; } }

.mission-card {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(175deg, rgba(6,11,30,0.97) 0%, rgba(3,5,16,0.98) 100%) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
    opacity: 1 !important; transform: none !important;
}

/* Barra de acento superior — marca el juego */
.mc-top-bar {
    height: 3px;
    width: 100%;
    background: var(--mc-accent, #00e5ff);
    box-shadow: 0 0 12px var(--mc-accent, #00e5ff);
    border-radius: 16px 16px 0 0;
    transition: box-shadow 0.2s;
}
.mission-card:hover .mc-top-bar {
    box-shadow: 0 0 24px var(--mc-accent, #00e5ff), 0 0 60px var(--mc-glow, rgba(0,229,255,0.3));
    animation: mcBarShine 1.5s ease-in-out infinite;
}
@keyframes mcBarShine {
    0%,100% { opacity: 1; } 50% { opacity: 0.65; }
}

/* Ilustración IA 16:9 — pan suave + hover gamer */
.mission-card > .mc-art {
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    isolation: isolate;
    background: #04060f;
    --mc-pan-dur: 18s;
    --mc-pan-shift: 3.5%;
    --mc-art-focus: center center;
}
.mission-card[data-game="quiz"] > .mc-art {
    --mc-pan-dur: 20s;
    --mc-art-focus: 52% center;
}
.mission-card[data-game="memory"] > .mc-art {
    --mc-pan-dur: 22s;
    --mc-art-focus: 50% center;
}
.mission-card[data-game="danger"] > .mc-art {
    --mc-pan-dur: 19s;
    --mc-art-focus: 48% center;
}
.mission-card[data-game="chat"] > .mc-art {
    --mc-pan-dur: 21s;
    --mc-art-focus: 50% center;
}
.mission-card[data-game="runner"] > .mc-art {
    --mc-pan-dur: 17s;
    --mc-art-focus: 54% center;
}
.mission-card[data-game="kart"] > .mc-art {
    --mc-pan-dur: 16s;
    --mc-art-focus: 48% center;
}
.mission-card > .mc-art .mc-art-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.mission-card > .mc-art .mc-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--mc-art-focus);
    transform: none;
    filter: saturate(1.06) contrast(1.03);
}
.mission-card > .mc-art::before {
    content: '';
    position: absolute;
    inset: 6px;
    z-index: 2;
    border-radius: 6px;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--mc-accent, #00e5ff) 45%, transparent);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--mc-accent, #00e5ff) 12%, transparent);
    animation: mcFramePulse 2.4s ease-in-out infinite;
}
.mission-card > .mc-art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.1) 50%, transparent 56%),
        linear-gradient(180deg, transparent 50%, rgba(4, 8, 22, 0.9) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.07) 2px, rgba(0, 0, 0, 0.07) 4px);
    background-size: 240% 100%, 100% 100%, 100% 8px;
    animation: mcArtShine 6s ease-in-out infinite, mcScanRoll 8s linear infinite;
}
@media (hover: hover) {
    .mission-card:hover > .mc-art .mc-art-img {
        filter: saturate(1.12) contrast(1.05) brightness(1.05);
    }
}
@keyframes mcFramePulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; box-shadow: inset 0 0 24px var(--mc-glow), 0 0 12px var(--mc-glow); }
}
@keyframes mcArtShine {
    0%, 70% { background-position: -130% 0, 0 0, 0 0; }
    100% { background-position: 230% 0, 0 0, 0 0; }
}
@keyframes mcScanRoll {
    from { background-position: -130% 0, 0 0, 0 0; }
    to { background-position: 230% 0, 0 0, 0 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .mission-card > .mc-art::before,
    .mission-card > .mc-art::after {
        animation: none !important;
    }
}
.mission-card > .mc-header {
    position: absolute;
    top: calc(3px + 8px);
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 14px;
    pointer-events: none;
}
.mission-card:has(> .mc-art) > .mc-bg-icon {
    display: none;
}
.mission-card:has(> .mc-art) .mc-icon-wrap {
    display: none;
}
.mission-card:has(> .mc-art) .mc-body {
    padding-top: 8px;
}

/* Icono de fondo gigante decorativo */
.mc-bg-icon {
    position: absolute;
    right: -12px; top: 18px;
    font-size: 6rem;
    opacity: 0.04;
    filter: blur(2px);
    pointer-events: none;
    line-height: 1;
    transition: opacity 0.3s, transform 0.4s;
    z-index: 0;
}
.mission-card:hover .mc-bg-icon {
    opacity: 0.07;
    transform: scale(1.1) rotate(8deg);
}

/* Header de tarjeta: código + estrellas */
.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 4px;
    position: relative; z-index: 1;
}
.mc-code {
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--mc-accent, rgba(0,229,255,0.6));
    opacity: 0.55;
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: opacity 0.2s;
}
.mission-card:hover .mc-code { opacity: 1; }
.mc-diff { display: flex; gap: 1px; }
.mc-star { font-size: 0.6rem; color: rgba(255,255,255,0.12); }
.mc-star.on { color: var(--mc-accent, #00e5ff); filter: drop-shadow(0 0 3px var(--mc-accent,#00e5ff)); }

/* Cuerpo: icono + título + descripción */
.mc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4px 10px 6px;
    flex: 1;
    position: relative; z-index: 1;
}
.mc-icon-wrap {
    margin-bottom: 4px;
    position: relative;
}
.mission-icon {
    font-size: 2.0em !important;
    display: block !important;
    margin: 0 !important;
    filter: drop-shadow(0 4px 8px var(--mc-glow, rgba(0,229,255,.25))) !important;
    animation: mcIconFloat var(--icon-dur,3.2s) ease-in-out infinite var(--icon-del,0s) !important;
}
.mission-card:nth-child(1) .mission-icon { --icon-dur:3.0s; --icon-del:0s; }
.mission-card:nth-child(2) .mission-icon { --icon-dur:3.5s; --icon-del:-0.6s; }
.mission-card:nth-child(3) .mission-icon { --icon-dur:2.8s; --icon-del:-1.1s; }
.mission-card:nth-child(4) .mission-icon { --icon-dur:3.3s; --icon-del:-0.4s; }
.mission-card:nth-child(5) .mission-icon { --icon-dur:2.6s; --icon-del:-0.9s; }
@keyframes mcIconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.mission-card:hover .mission-icon {
    animation: mcIconHoverSpin 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards !important;
}
@keyframes mcIconHoverSpin {
    0%  { transform: scale(1)    rotate(0deg); }
    45% { transform: scale(1.3)  rotate(-14deg); }
    100%{ transform: scale(1.18) rotate(0deg); }
}
.mc-body h3 {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    color: var(--mc-accent,#fff) !important;
    letter-spacing: 0.02em !important;
}
.mc-body p {
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.33) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Footer: puntos + botón acceder */
.mc-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
    position: relative; z-index: 1;
    transition: border-color 0.2s;
}
.mission-card:hover .mc-footer {
    border-top-color: rgba(255,255,255,0.08);
}
.points {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    font-family: 'Courier New', monospace !important;
    letter-spacing: 0.1em !important;
    color: var(--mc-accent,rgba(0,229,255,0.7)) !important;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    margin: 0 !important;
    display: inline-block !important;
}
.mc-play {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 8px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    color: rgba(255,255,255,0.25) !important;
    font-family: 'Courier New', monospace !important;
    transition: all 0.2s ease !important;
    margin-top: 0 !important;
}
.mission-card:hover .mc-play {
    background: linear-gradient(90deg, rgba(0,0,0,0.3), var(--mc-glow, rgba(0,229,255,0.08)), rgba(0,0,0,0.3)) !important;
    border-color: var(--mc-accent, rgba(0,229,255,0.4)) !important;
    color: var(--mc-accent,#00e5ff) !important;
    box-shadow: 0 0 20px var(--mc-glow, rgba(0,229,255,0.12)) !important;
}

/* Hover: elevación + glow */
.mission-card:hover {
    transform: translateY(-7px) scale(1.025) !important;
    border-color: var(--mc-accent,#00e5ff) !important;
    box-shadow:
        0 0 0 1px var(--mc-accent,#00e5ff),
        0 16px 40px rgba(0,0,0,0.65),
        0 0 50px var(--mc-glow, rgba(0,229,255,0.15)) !important;
    z-index: 5 !important;
}
.mission-card:active { transform: translateY(-2px) scale(1.01) !important; }

/* Glow ring */
.mc-glow-ring {
    position: absolute !important;
    top: 28px; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90px !important; height: 90px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, var(--mc-glow,rgba(0,229,255,0.12)) 0%, transparent 70%) !important;
    animation: mcRingPulse 3s ease infinite !important;
    pointer-events: none !important;
    opacity: 0.6;
}
.mission-card:hover .mc-glow-ring { opacity: 1; }

/* Acento por juego */
.mission-card[data-game="quiz"]   { --mc-accent:#ffcc00; --mc-glow:rgba(255,204,0,.35); }
.mission-card[data-game="memory"] { --mc-accent:#a855f7; --mc-glow:rgba(168,85,247,.35); }
.mission-card[data-game="danger"] { --mc-accent:#ef4444; --mc-glow:rgba(239,68,68,.35); }
.mission-card[data-game="chat"]   { --mc-accent:#00e5ff; --mc-glow:rgba(0,229,255,.35); }
.mission-card[data-game="runner"] { --mc-accent:#f97316; --mc-glow:rgba(249,115,22,.35); }
.mission-card[data-game="kart"]   { --mc-accent:#7c4dff; --mc-glow:rgba(124,77,255,.35); }

/* Anular estilos viejos del tournament en el grid */
.mission-card-tournament { display: none !important; }

/* ── 8. BANNER TORNEO LIVE STREAM ── */
.gs-live-banner {
    position: relative;
    margin-top: 8px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: clamp(88px, 22vw, 120px);
    border: 1px solid rgba(255, 140, 40, 0.35);
    transition: transform 0.2s;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
    animation: gsArenaGlow 2.6s ease-in-out infinite;
}
.gs-live-banner:hover {
    transform: translateY(-3px);
    animation-duration: 1.4s;
}
@keyframes gsArenaGlow {
    0%, 100% {
        border-color: rgba(255, 90, 30, 0.45);
        box-shadow:
            0 4px 40px rgba(0, 0, 0, 0.55),
            0 0 28px rgba(255, 70, 20, 0.22),
            inset 0 0 24px rgba(255, 50, 0, 0.06);
    }
    33% {
        border-color: rgba(255, 210, 60, 0.65);
        box-shadow:
            0 4px 40px rgba(0, 0, 0, 0.55),
            0 0 40px rgba(255, 200, 50, 0.38),
            inset 0 0 30px rgba(255, 180, 0, 0.1);
    }
    66% {
        border-color: rgba(255, 60, 120, 0.5);
        box-shadow:
            0 4px 40px rgba(0, 0, 0, 0.55),
            0 0 34px rgba(255, 40, 100, 0.28),
            inset 0 0 26px rgba(255, 0, 80, 0.07);
    }
}
.gs-lb-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse 90% 120% at 20% 50%, rgba(255, 80, 20, 0.35), transparent 55%),
        radial-gradient(ellipse 70% 100% at 80% 40%, rgba(255, 200, 50, 0.25), transparent 50%);
    mix-blend-mode: screen;
    animation: gsArenaFlash 2.6s ease-in-out infinite;
}
@keyframes gsArenaFlash {
    0%, 100% { opacity: 0; }
    12% { opacity: 0.85; }
    24% { opacity: 0.15; }
    38% { opacity: 0.75; }
    52% { opacity: 0.1; }
    68% { opacity: 0.9; }
    82% { opacity: 0.2; }
}
.gs-live-banner:hover .gs-lb-flash {
    animation-duration: 1.2s;
}
@media (prefers-reduced-motion: reduce) {
    .gs-live-banner,
    .gs-lb-flash,
    .gs-lb-title {
        animation: none !important;
    }
    .gs-live-banner {
        border-color: rgba(255, 180, 60, 0.45);
        box-shadow: 0 4px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 120, 40, 0.2);
    }
}

/* Foto IA arena + fondos del banner */
.gs-lb-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../img/missions/mission-tournament.jpg?v=202610232300') center / cover no-repeat;
    transform: none;
}
.gs-live-banner:hover .gs-lb-photo {
    filter: brightness(1.06) saturate(1.08);
}
.gs-lb-bg {
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        rgba(20,8,2,0.92) 0%,
        rgba(30,12,4,0.78) 28%,
        rgba(16,6,22,0.72) 62%,
        rgba(8,4,20,0.9) 100%
    );
    z-index: 1;
}
.gs-lb-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,107,53,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,107,53,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 1;
    animation: gsLbGridMove 8s linear infinite;
}
@keyframes gsLbGridMove { from{background-position:0 0} to{background-position:32px 32px} }
.gs-lb-scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px);
    z-index: 2; pointer-events: none;
    animation: gsLbScanMove 3s linear infinite;
}
@keyframes gsLbScanMove { from{background-position:0 0} to{background-position:0 -100px} }

/* Lado izquierdo: info live */
.gs-lb-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px;
    position: relative; z-index: 5;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,215,0,0.1);
    min-width: 180px;
}
.gs-lb-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,40,0,0.18);
    border: 1px solid rgba(255,40,0,0.4);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ff6b35;
    font-family: 'Courier New', monospace;
    animation: gsLbLivePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 16px rgba(255,60,0,0.2);
}
@keyframes gsLbLivePulse {
    0%,100% { box-shadow: 0 0 16px rgba(255,60,0,0.2); }
    50%      { box-shadow: 0 0 30px rgba(255,60,0,0.4); }
}
.gs-lb-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff3300;
    box-shadow: 0 0 10px #ff3300;
    animation: gsLivePulse 1.1s ease-in-out infinite;
    flex-shrink: 0;
}
.gs-lb-viewers {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.65rem; font-weight: 800;
    color: rgba(255,215,0,0.75);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.06em;
}
.gs-lb-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.gs-lb-tag {
    font-size: 0.48rem; font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
}

/* Centro: título épico */
.gs-lb-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 24px;
    position: relative; z-index: 5;
}
.gs-lb-icon {
    font-size: 2.4rem;
    margin-bottom: 6px;
    filter: drop-shadow(0 4px 12px rgba(255,215,0,0.4));
    animation: gsLbIconFloat 3s ease-in-out infinite;
}
@keyframes gsLbIconFloat {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(5deg); }
}
@keyframes gsArenaTitleBlink {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 120, 40, 0.45)); }
    33% { filter: drop-shadow(0 0 18px rgba(255, 220, 80, 0.75)); }
    66% { filter: drop-shadow(0 0 14px rgba(255, 70, 130, 0.55)); }
}
.gs-lb-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    margin: 0 0 6px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 40%, #ff6b35 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gsArenaTitleBlink 2.6s ease-in-out infinite;
    animation: gsLbTitleGlow 3s ease-in-out infinite;
}
@keyframes gsLbTitleGlow {
    0%,100% { filter: brightness(1); }
    50%      { filter: brightness(1.2) drop-shadow(0 0 12px rgba(255,215,0,0.5)); }
}
.gs-lb-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.5;
}

/* Lado derecho: botón unirse */
.gs-lb-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 28px;
    position: relative; z-index: 5;
    flex-shrink: 0;
    border-left: 1px solid rgba(255,215,0,0.1);
}
.gs-lb-btn {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    padding: 14px 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.gs-lb-btn-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #ff8c00 0%, #ffd700 50%, #ff6b35 100%);
    background-size: 200% 200%;
    animation: gsLbBtnBg 3s ease infinite;
    border-radius: inherit;
}
@keyframes gsLbBtnBg {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.gs-lb-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%);
    animation: gsLbBtnShine 2s ease-in-out infinite;
}
@keyframes gsLbBtnShine { 0%,100%{transform:translateX(-100%)} 55%{transform:translateX(200%)} }
.gs-lb-btn-text {
    position: relative; z-index: 2;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(0,0,0,0.85);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}
.gs-live-banner:hover .gs-lb-btn {
    transform: scale(1.06);
    box-shadow: 0 8px 40px rgba(255,150,0,0.5), 0 0 60px rgba(255,100,0,0.25);
}
.gs-lb-pts {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,215,0,0.4);
    font-family: 'Courier New', monospace;
    text-align: center;
}

/* Responsive banner torneo */
@media (max-width: 700px) {
    .gs-live-banner { flex-direction: column; min-height: auto; }
    .gs-lb-left { border-right: none; border-bottom: 1px solid rgba(255,215,0,0.1); width: 100%; flex-direction: row; flex-wrap: wrap; padding: 12px 16px; min-width: 0; }
    .gs-lb-center { padding: 14px 16px; }
    .gs-lb-right { border-left: none; border-top: 1px solid rgba(255,215,0,0.1); width: 100%; flex-direction: row; justify-content: space-between; padding: 12px 16px; }
}

/* ── Fix: eliminar animaciones duplicadas ── */
#gameMenu::before { animation: mcGridMove 10s linear infinite !important; }

/* ══ Fondos IA: capas <picture> (nombre + menú) — ver bloque v4 al final ══ */
.hs-bg { background: none; }
#gameMenu {
    background: transparent !important;
    border-radius: 0 !important;
}
body.gameplay-mode #gameScreen::before,
body.gameplay-mode #gameScreen::after { display: none !important; }
body.gameplay-mode .container { background: transparent !important; }

/* ── Fix: el container visible durante gameplay ── */
body.gameplay-mode #mainContainer,
body.heavy-gameplay-mode #mainContainer {
    display: block !important;
}

/* ══════════════════════════════════════════════════════
   BARRA DE CRÉDITOS INSTITUCIONAL — gameMenu
══════════════════════════════════════════════════════ */
.gs-credits-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    padding: 8px 4px 4px;
    border-top: 1px solid rgba(255,255,255,0.04);
    opacity: 0.92;
    transition: opacity 0.35s;
}
.gs-credits-bar:hover { opacity: 0.9; }
.gs-credits-logos {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.gs-credits-logo {
    height: 22px; width: auto;
    filter: none;
    opacity: 0.6;
    object-fit: contain;
    transition: opacity 0.2s;
}
.gs-credits-logo:hover { opacity: 1; }
.gs-credits-logo-wide {
    height: 40px;
    max-width: min(62vw, 340px);
}
.gs-credits-sep {
    width: 1px; height: 16px;
    background: rgba(255,255,255,0.12);
}
.gs-credits-dev {
    display: flex; align-items: center; gap: 10px;
}
.gs-credits-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.gs-credits-tag {
    font-family: 'Courier New', monospace;
    font-size: 0.46rem; font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(0,229,255,0.35);
    padding-top: 3px;
}
.gs-credits-name {
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.4);
}
.gs-credits-role {
    font-size: 0.47rem;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.03em;
}
@media (max-width: 600px) {
    .gs-credits-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .gs-credits-logos { flex-wrap: wrap; }
    .gs-credits-logo-wide { height: 30px; max-width: min(86vw, 280px); }
    .gs-credits-tag { display: none; }
}

/* ================================================================
   CORRECCIONES MÓVIL — Samsung Galaxy A15 (393×851 CSS px)
   Quiz Seguridad + Memory Match + Encuentra el Peligro
   ================================================================ */

/* ── Quiz: compactar todo el layout en 393px ── */
@media (max-width: 420px) {
    /* Contenedor principal: menos gap entre secciones */
    .cq-wrap { gap: 7px; padding: 10px; }

    /* HUD: timer más pequeño para dar más espacio al texto */
    .cq-hud { padding: 7px 10px; gap: 6px; }
    .cq-timer-wrap { width: 52px; height: 52px; }
    .cq-timer-svg  { width: 52px; height: 52px; }
    .cq-timer-val  { font-size: 1.05rem; }
    .cq-score-val  { font-size: 1.1rem; }
    .cq-badge      { font-size: 0.55rem; letter-spacing: 0.14em; }
    .cq-round      { font-size: 0.6rem; }

    /* Racha: menos altura */
    .cq-streak { padding: 4px 14px; font-size: 0.78rem; }

    /* ARIA robot: avatar más pequeño, ocultar sublabel */
    .cq-aria { padding: 8px 10px; gap: 9px; }
    .cq-aria-avatar { width: 44px; height: 44px; border-radius: 9px; }
    .cq-aria-eye    { width: 8px; height: 8px; }
    .cq-aria-label small { display: none; }
    .cq-aria-label  { font-size: 0.52rem; }
    .cq-aria-bubble { padding: 7px 10px; min-height: 38px; }
    .cq-aria-msg    { font-size: 0.72rem; line-height: 1.45; }
    .cq-aria-dot    { width: 5px; height: 5px; margin-right: 6px; }

    /* Tarjeta de pregunta */
    .cq-question-card { padding: 12px; gap: 10px; }
    .cq-q-icon        { font-size: 1.5rem; }
    .cq-q-text        { font-size: 0.9rem; line-height: 1.5; }

    /* Botones de respuesta */
    .cq-answers { gap: 7px; }
    .cq-btn     { padding: 10px 11px; gap: 8px; font-size: 0.84rem; }
    .cq-letter  { width: 26px; height: 26px; font-size: 0.7rem; border-radius: 5px; }
    .cq-text    { line-height: 1.35; }

    /* Caja de explicación */
    .cq-exp-box { padding: 10px 12px; gap: 9px; }
    .cq-exp-icon { font-size: 1.2rem; }
    .cq-exp-content strong { font-size: 0.8rem; }
    .cq-exp-content p      { font-size: 0.75rem; }

    /* Footer y botón salir */
    .cq-footer .spy-btn { padding: 7px 14px; font-size: 0.75rem; }

    /* Pantalla de resultados */
    .cq-results-wrap { padding: 18px 12px; gap: 10px; }
    .cq-results-badge { font-size: 0.96rem; }
    .cq-results-title { font-size: 1.35rem; }
    .cq-results-msg   { font-size: 0.84rem; }
    .cq-rs-stat       { padding: 9px 13px; min-width: 68px; }
    .cq-rs-val        { font-size: 1.15rem; }
    .cq-rs-label      { font-size: 0.5rem; }
    .cq-lost-icon     { font-size: 2.8rem; }
}

/* ── Memory Match: tamaño de carta aumentado (el 480px previo lo reducía) ── */
@media (max-width: 480px) {
    .mm-card-emoji { font-size: 1.5rem !important; }
    .mm-card-name  { font-size: 0.65rem !important; }
}

/* ── Memory Match: HUD y BYTE panel ultra-compactos en 420px ── */
@media (max-width: 420px) {
    /* HUD */
    .mm-hud { padding: 5px 6px; gap: 3px; }
    .mm-hud-val,
    .mm-hud-val.mm-timer-val { font-size: 0.9rem; }
    .mm-timer-track { width: 26px; }
    .mm-title     { font-size: 0.68rem; letter-spacing: 0.06em; }
    .mm-subtitle  { display: none; }
    /* Barra de progreso */
    .mm-progress-row { padding: 3px 7px; gap: 5px; }
    .mm-stat-pill    { font-size: 0.62rem; }
    /* BYTE: ocultar elementos decorativos */
    .mm-byte-screen { width: 36px; height: 32px; }
    .mm-byte-label  { display: none; }
    .mm-byte-bubble { font-size: 0.58rem; min-height: 28px; padding: 4px 6px; }
    .mm-power-label { display: none; }
    .mm-power-btn   { padding: 4px 8px; font-size: 0.62rem; }
}

/* ── Encuentra el Peligro: HUD compacto y controls en fila ── */
@media (max-width: 480px) {
    /* Spy HUD: 3 cols auto/flex/auto en vez de 1fr auto 1fr */
    .spy-hud {
        grid-template-columns: auto 1fr auto;
        gap: 5px;
        padding: 6px 8px;
    }
    .spy-timer-val  { font-size: 1.35rem; }
    .spy-timer-track { width: 32px; }
    .spy-lives      { gap: 2px; }
    .life-icon      { font-size: 0.85rem; }
    .spy-score-val  { font-size: 0.9rem; }
    .spy-score-label { font-size: 0.5rem; }

    /* Controles: forzar fila (el .game-controls los apilaba en columna) */
    body[data-active-section="dangerContainer"] .spy-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
        position: static !important;
        padding: 4px 0 calc(env(safe-area-inset-bottom) + 6px);
        background: none;
    }
    body[data-active-section="dangerContainer"] .spy-controls .spy-btn-exit {
        flex-shrink: 0;
    }

    /* Danger nodes: ligeramente más compactos */
    .danger-node            { font-size: 0.73rem; padding: 6px 28px 6px 9px; }
    .danger-node.profile-field { padding: 8px 28px 8px 10px; }
    .danger-node.chat-bubble   { padding: 7px 30px 7px 10px; }
    .danger-node.url-item      { font-size: 0.68rem; }

    /* Mock interfaces: más compactos */
    .mock-profile-cover   { height: 36px; }
    .mock-avatar-circle   { width: 36px; height: 36px; font-size: 1.1rem; }
    .mock-profile-name    { font-size: 0.82rem; }
    .mock-profile-sub     { font-size: 0.65rem; }
    .mock-browser-chrome  { padding: 5px 8px; }
    .mock-chat-messages   { padding: 6px; gap: 3px; }
    .mock-email-card      { margin: 4px; }
    .mock-post-topbar,
    .mock-chat-topbar,
    .mock-email-topbar    { padding: 7px 10px; }
    /* Interface frame */
    .interface-frame      { border-radius: 10px; }
    /* Toast más arriba para no tapar botones */
    .spy-toast            { bottom: 52px; }
}

/* ================================================================
   MEMORY MATCH — Layout completo para dispositivos móviles
   Aplica usando la clase body.mobile-touch-device para máxima
   especificidad (funciona aunque el media query no dispare)
   ================================================================ */

body.mobile-touch-device[data-active-section="memoryContainer"] .mm-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
    gap: 7px !important;
    box-sizing: border-box;
}

body.mobile-touch-device[data-active-section="memoryContainer"] .mm-main-layout {
    flex-direction: column !important;
    gap: 7px !important;
    width: 100% !important;
}

/* Ocultar el panel BYTE para liberar espacio en pantallas pequeñas */
body.mobile-touch-device[data-active-section="memoryContainer"] .mm-byte-panel {
    display: none !important;
}

/* Tablero: ancho completo */
body.mobile-touch-device[data-active-section="memoryContainer"] .mm-board-area {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
}

body.mobile-touch-device[data-active-section="memoryContainer"] .mm-board.memory-board {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    gap: 8px !important;
}

/* Cartas: sin max-width para que llenen cada celda de la grilla */
body.mobile-touch-device[data-active-section="memoryContainer"] .mm-card.memory-card {
    max-width: none !important;
    width: 100% !important;
    justify-self: stretch !important;
}

/* HUD centrado */
body.mobile-touch-device[data-active-section="memoryContainer"] .mm-hud {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Controles centrados en fila */
body.mobile-touch-device[data-active-section="memoryContainer"] .mm-controls {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* ================================================================
   ENCUENTRA EL PELIGRO — Altura y overflow en móvil
   ================================================================ */

/* Intro screen: reducir min-height */
body.mobile-touch-device[data-active-section="dangerContainer"] .level-intro-screen {
    min-height: 0 !important;
    padding: clamp(18px, 4vw, 28px) 16px !important;
}

/* Spot-danger-game: sin mínimo de altura, centrado */
body.mobile-touch-device[data-active-section="dangerContainer"] .spot-danger-game {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px) !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Interface frame: scroll vertical si el contenido es largo */
body.mobile-touch-device[data-active-section="dangerContainer"] .interface-frame {
    max-height: 52vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Escena de peligro: sin min-height forzado */
body.mobile-touch-device[data-active-section="dangerContainer"] .danger-scene {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* Threat strip y combo strip: más compactos */
body.mobile-touch-device[data-active-section="dangerContainer"] .threat-strip {
    padding: 4px 8px !important;
}
body.mobile-touch-device[data-active-section="dangerContainer"] .combo-strip {
    padding: 3px 8px !important;
    font-size: 0.75rem !important;
}

/* ================================================================
   QUIZ — Adaptación automática a pantallas de escritorio de poca
   altura (laptops 768–900 px). Solo para pantallas grandes (min-width: 481px).
   ================================================================ */

/* Permitir scroll vertical en game-content cuando quiz está activo */
body[data-active-section="quizContainer"] .game-content {
    overflow-y: auto !important;
}

/* ── Nivel 1: pantallas entre 700 y 860 px de alto (laptops comunes) ── */
@media (min-width: 481px) and (max-height: 860px) {
    body[data-active-section="quizContainer"] .cq-wrap {
        gap: 8px;
        padding: 12px 16px;
    }
    body[data-active-section="quizContainer"] .cq-hud {
        padding: 8px 14px;
        gap: 8px;
    }
    body[data-active-section="quizContainer"] .cq-timer-wrap,
    body[data-active-section="quizContainer"] .cq-timer-svg {
        width: 60px;
        height: 60px;
    }
    body[data-active-section="quizContainer"] .cq-timer-val {
        font-size: 1.25rem;
    }
    body[data-active-section="quizContainer"] .cq-score-val {
        font-size: 1.3rem;
    }
    body[data-active-section="quizContainer"] .cq-streak {
        padding: 4px 16px;
        font-size: 0.82rem;
    }
    body[data-active-section="quizContainer"] .cq-aria {
        padding: 9px 14px;
        gap: 12px;
    }
    body[data-active-section="quizContainer"] .cq-aria-avatar {
        width: 52px;
        height: 52px;
    }
    body[data-active-section="quizContainer"] .cq-aria-bubble {
        padding: 8px 12px;
    }
    body[data-active-section="quizContainer"] .cq-question-card {
        padding: 13px 16px;
        gap: 12px;
    }
    body[data-active-section="quizContainer"] .cq-q-icon {
        font-size: 1.7rem;
    }
    body[data-active-section="quizContainer"] .cq-q-text {
        font-size: 0.97rem;
        line-height: 1.5;
    }
    body[data-active-section="quizContainer"] .cq-answers {
        gap: 7px;
    }
    body[data-active-section="quizContainer"] .cq-btn {
        padding: 10px 14px;
        font-size: 0.86rem;
    }
    body[data-active-section="quizContainer"] .cq-letter {
        width: 26px;
        height: 26px;
    }
    body[data-active-section="quizContainer"] .cq-exp-box {
        padding: 10px 14px;
        gap: 10px;
    }
    body[data-active-section="quizContainer"] .cq-exp-icon {
        font-size: 1.25rem;
    }
    body[data-active-section="quizContainer"] .cq-exp-content p {
        font-size: 0.79rem;
    }
    body[data-active-section="quizContainer"] .cq-footer {
        padding-top: 0;
    }
    body[data-active-section="quizContainer"] .cq-results-wrap {
        padding: 20px 20px;
        gap: 12px;
    }
}

/* ── Nivel 2: pantallas muy bajas (< 700 px) ── */
@media (min-width: 481px) and (max-height: 700px) {
    body[data-active-section="quizContainer"] .cq-wrap {
        gap: 6px;
        padding: 9px 14px;
    }
    body[data-active-section="quizContainer"] .cq-aria {
        display: none; /* Ocultar robot ARIA para ganar espacio */
    }
    body[data-active-section="quizContainer"] .cq-timer-wrap,
    body[data-active-section="quizContainer"] .cq-timer-svg {
        width: 50px;
        height: 50px;
    }
    body[data-active-section="quizContainer"] .cq-timer-val {
        font-size: 1.05rem;
    }
    body[data-active-section="quizContainer"] .cq-question-card {
        padding: 10px 14px;
        gap: 10px;
    }
    body[data-active-section="quizContainer"] .cq-q-icon {
        font-size: 1.4rem;
    }
    body[data-active-section="quizContainer"] .cq-q-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    body[data-active-section="quizContainer"] .cq-btn {
        padding: 8px 12px;
        font-size: 0.82rem;
    }
    body[data-active-section="quizContainer"] .cq-exp-box {
        padding: 8px 12px;
    }
    body[data-active-section="quizContainer"] .cq-exp-content p {
        font-size: 0.75rem;
    }
}

/* ================================================================
   ESCRITORIO (≥ 769px) — Memory Match + Encuentra el Peligro
   ================================================================ */

/* ─────────────────────────────────────────────────────────────────
   MEMORY MATCH — Grid 8 columnas + Estética Yu-Gi-Oh ✨
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
@media (min-width: 769px) {
    body[data-active-section="memoryContainer"] .mm-sigil {
        display: flex;
    }
    body[data-active-section="memoryContainer"] .mm-title {
        font-size: 0.7rem !important;
        letter-spacing: 0.14em;
    }
}

/* ── Grid 8 columnas → 2 filas, todo en el viewport ── */
    body[data-active-section="memoryContainer"] .mm-board.memory-board {
        grid-template-columns: repeat(8, 1fr) !important;
    }
    body[data-active-section="memoryContainer"] .mm-card.memory-card {
        max-width: none !important;
        width: 100% !important;
        justify-self: stretch !important;
    }
    body[data-active-section="memoryContainer"] .game-content {
        overflow-y: auto !important;
    }

    /* ── Dorso de carta: diseño místico Yu-Gi-Oh (sin .mm-card-face-art = reverso IA) ── */
    body[data-active-section="memoryContainer"] .memory-card-front:not(.mm-card-face-art) {
        background:
            radial-gradient(ellipse at 50% 30%, rgba(157,0,255,0.25) 0%, transparent 60%),
            repeating-linear-gradient(
                45deg,
                rgba(157,0,255,0.04) 0px, rgba(157,0,255,0.04) 1px,
                transparent 1px, transparent 10px
            ),
            linear-gradient(160deg, #1a0340 0%, #0d0122 45%, #1a0340 100%) !important;
        border: 2px solid rgba(190,130,255,0.55) !important;
        box-shadow:
            0 0 20px rgba(157,0,255,0.4),
            0 0 60px rgba(157,0,255,0.1),
            inset 0 0 30px rgba(157,0,255,0.07) !important;
    }
    body[data-active-section="memoryContainer"] .mm-card-symbol {
        font-size: 1.8rem !important;
        color: rgba(210,160,255,0.6) !important;
        text-shadow: 0 0 18px rgba(157,0,255,0.8), 0 0 40px rgba(200,100,255,0.4) !important;
        animation: yugiSymbol 3s ease infinite alternate !important;
    }
    /* Hover: elevación + box-shadow redondeado (NO filter — rompe preserve-3d) */
    body[data-active-section="memoryContainer"] .mm-card.memory-card:hover:not(.flipped):not(.matched) {
        transform: translateY(-8px) scale(1.06) !important;
        border-radius: 10px !important;
        box-shadow: 0 0 18px rgba(255,215,0,0.45), 0 8px 24px rgba(0,0,0,0.5) !important;
    }
    /* Flip más dramático — SIN filter en card-inner (rompería el 3D) */
    body[data-active-section="memoryContainer"] .memory-card-inner {
        transition: transform 0.55s cubic-bezier(0.23,1.2,0.32,1) !important;
    }
    /* Glow en la carta flipada: border-radius + box-shadow en el wrapper */
    body[data-active-section="memoryContainer"] .mm-card.memory-card.flipped:not(.matched) {
        border-radius: 10px !important;
        box-shadow: 0 0 20px rgba(157,0,255,0.6), 0 0 50px rgba(157,0,255,0.2) !important;
    }
    /* Match: glow dorado intenso + pop dramático */
    body[data-active-section="memoryContainer"] .memory-card.matched .memory-card-back {
        border-color: #ffd700 !important;
        box-shadow:
            0 0 28px rgba(255,215,0,0.75),
            0 0 60px rgba(255,165,0,0.4),
            inset 0 0 20px rgba(255,215,0,0.1) !important;
    }
    body[data-active-section="memoryContainer"] .memory-card.matched .memory-card-inner {
        animation: yugiMatchPop 0.65s cubic-bezier(0.68,-0.55,0.27,1.55) forwards !important;
    }
    /* Cara visible de las cartas emparejadas: texto que quepa dentro */
    body[data-active-section="memoryContainer"] .memory-card-back {
        gap: 3px !important;
        padding: 4px 3px !important;
        overflow: hidden !important;
    }
    body[data-active-section="memoryContainer"] .mm-card-emoji {
        font-size: 1.5rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }
    body[data-active-section="memoryContainer"] .mm-card-name {
        font-size: 0.52rem !important;
        line-height: 1.18 !important;
        word-break: break-word !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }
}

/* ── Keyframes Yu-Gi-Oh (sin media query, solo para desktop via JS) ── */
@keyframes yugiSymbol {
    0%   { opacity:0.35; text-shadow:0 0 12px rgba(157,0,255,0.4); transform:scale(1) rotate(0deg); }
    50%  { opacity:0.7;  text-shadow:0 0 30px rgba(157,0,255,1),0 0 60px rgba(200,100,255,0.5); }
    100% { opacity:0.45; text-shadow:0 0 20px rgba(157,0,255,0.6); transform:scale(1.05) rotate(4deg); }
}
@keyframes yugiMatchPop {
    0%   { transform:rotateY(180deg) scale(1); }
    30%  { transform:rotateY(180deg) scale(1.22) rotate(-2deg); }
    65%  { transform:rotateY(180deg) scale(1.06) rotate(1deg); }
    100% { transform:rotateY(180deg) scale(1); filter:none; }
}
@keyframes yugiFlyIn {
    from { transform:translateY(-100px) scale(0.55) rotate(-10deg); opacity:0; }
    to   { transform:translateY(0) scale(1) rotate(0deg); opacity:1; }
}
@keyframes yugiMatchBanner {
    0%   { transform:translate(-50%,-50%) scale(0.2) rotate(-12deg); opacity:0; }
    25%  { transform:translate(-50%,-50%) scale(1.2) rotate(3deg); opacity:1; }
    65%  { transform:translate(-50%,-50%) scale(1.0) rotate(0deg); opacity:1; }
    100% { transform:translate(-50%,-50%) scale(1.4) rotate(6deg); opacity:0; }
}
@keyframes yugiBoardReveal {
    from { clip-path:inset(0 100% 0 0); opacity:0; }
    to   { clip-path:inset(0 0% 0 0); opacity:1; }
}

/* ─────────────────────────────────────────────────────────────────
   ENCUENTRA EL PELIGRO — Sin scroll en escritorio, todo visible
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    /* HUD de 3 columnas — anula la regla global que lo fuerza a 2 */
    body[data-active-section="dangerContainer"] .spy-hud.game-header-info {
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 6px 12px !important;
    }
    /* game-content: contenedor flex para que spot-danger-game llene el espacio disponible */
    body[data-active-section="dangerContainer"] .game-content {
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 16px !important;
    }
    /* spot-danger-game ocupa todo el game-content */
    body[data-active-section="dangerContainer"] .spot-danger-game {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    /* interface-frame toma el espacio restante → sin scroll exterior */
    body[data-active-section="dangerContainer"] .interface-frame {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    /* Compactar HUD y strips para ganar espacio vertical */
    body[data-active-section="dangerContainer"] .spy-hud {
        padding: 6px 12px !important;
    }
    body[data-active-section="dangerContainer"] .threat-strip {
        padding: 3px 10px !important;
        font-size: 0.85rem !important;
    }
    body[data-active-section="dangerContainer"] .combo-strip {
        padding: 3px 10px !important;
        font-size: 0.82rem !important;
    }
    body[data-active-section="dangerContainer"] .spy-controls {
        padding: 2px 0 !important;
        gap: 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   GUARDIAN RUNNER — Compactar máquina arcade en escritorio (≥769px)
   La máquina desbordaba ~51px por abajo en viewports de ~800px alto
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    /* game-content: reducir padding vertical para dar más espacio a la máquina */
    body[data-active-section="runnerContainer"] .game-content {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    /* Marquesina: compactar filas LED y título */
    body[data-active-section="runnerContainer"] .rac-led-row {
        padding: 2px 20px !important;
    }
    body[data-active-section="runnerContainer"] .rac-marquee-body {
        padding: 2px 20px 2px !important;
    }
    body[data-active-section="runnerContainer"] .rac-marquee-badge {
        font-size: 0.5rem !important;
        margin-bottom: 2px !important;
    }
    body[data-active-section="runnerContainer"] .rac-marquee-title {
        font-size: clamp(1.0rem, 2.2vw, 1.7rem) !important;
    }
    body[data-active-section="runnerContainer"] .rac-marquee-stars {
        font-size: 0.58rem !important;
        margin-top: 1px !important;
    }
    /* Panel de controles: reducir padding y botones */
    body[data-active-section="runnerContainer"] .rac-ctrl-deck {
        padding: 3px 16px !important;
        min-height: 64px !important;
        gap: 10px !important;
    }
    body[data-active-section="runnerContainer"] .rac-btn-ring {
        width: clamp(38px, 3.8vw, 48px) !important;
        height: clamp(38px, 3.8vw, 48px) !important;
    }
    body[data-active-section="runnerContainer"] .rac-btn-inner {
        font-size: clamp(0.95rem, 1.7vw, 1.25rem) !important;
    }
    body[data-active-section="runnerContainer"] .rac-ctrl-btns {
        gap: 10px !important;
    }
    body[data-active-section="runnerContainer"] .rac-hint {
        font-size: 0.55rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   MULTIJUGADOR — Overlay "Esperando a los demás" entre fases
   ───────────────────────────────────────────────────────────────── */
.mp-waiting-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 4, 22, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-waiting-overlay.mp-w-hidden { display: none; }
.mp-waiting-box {
    text-align: center;
    padding: 40px 50px;
    background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(168,85,247,0.06));
    border: 1px solid rgba(0,229,255,0.22);
    border-radius: 20px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 0 60px rgba(0,229,255,0.1), 0 0 120px rgba(168,85,247,0.06);
}
.mp-waiting-spinner {
    width: 60px; height: 60px;
    margin: 0 auto 20px;
    border: 4px solid rgba(0,229,255,0.12);
    border-top-color: #00e5ff;
    border-right-color: #a855f7;
    border-radius: 50%;
    animation: mpWSpin 1.1s linear infinite;
}
@keyframes mpWSpin { to { transform: rotate(360deg); } }
.mp-waiting-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e0e0ff;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.mp-waiting-count {
    font-size: 2.2rem;
    font-weight: 900;
    color: #00e5ff;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(0,229,255,0.5);
}
.mp-waiting-sub {
    font-size: 0.72rem;
    color: rgba(200, 210, 255, 0.5);
    line-height: 1.4;
}
.mp-waiting-next {
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em;
    color: rgba(255,204,0,0.8); margin: 8px 0 10px;
    text-transform: uppercase;
}
@keyframes mpWCPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.mp-wc-pulse { animation: mpWCPulse 0.42s cubic-bezier(0.34,1.56,0.64,1); }
.mp-wc-launch { color: #ffcc00 !important; text-shadow: 0 0 30px rgba(255,204,0,0.8); }

/* ════════════════════════════════════════════
   MODO ESPECTADOR
   ════════════════════════════════════════════ */

/* Tarjeta de intro en el tab */
.mp-spect-card { text-align:center; padding:18px 10px 10px; }
.mp-spect-icon { margin-bottom:8px; filter:drop-shadow(0 0 12px rgba(0,229,255,.5)); }
.mp-spect-icon img { width: 72px; height: 72px; object-fit: cover; border-radius: 16px; border: 1px solid rgba(0,229,255,0.35); }
.mp-spect-mode-inner { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.mp-spect-mode-ico { width: 28px; height: 28px; object-fit: cover; border-radius: 8px; flex-shrink: 0; border: 1px solid rgba(0,229,255,0.3); box-shadow: 0 0 10px rgba(0,229,255,0.2); }
.mp-spect-headline { font-size:1.15rem; font-weight:700; color:#00e5ff; margin-bottom:6px; }
.mp-spect-desc { font-size:.85rem; color:#a0aec0; max-width:360px; margin:0 auto 10px; }

/* Panel espectador (capa sobre mp-modal-body) */
#mpSpectatorPanel {
    display:flex; flex-direction:column; gap:14px;
    padding:10px 4px 0; min-height:420px;
}
.sp-header {
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(168,85,247,.08));
    border:1px solid rgba(0,229,255,.25); border-radius:12px;
    padding:10px 16px;
}
.sp-eye  { font-size:1.9rem; filter:drop-shadow(0 0 8px rgba(0,229,255,.6)); }
.sp-title { font-size:1rem; font-weight:800; color:#00e5ff; letter-spacing:.06em; }
.sp-phase-label { font-size:.78rem; color:#a0aec0; margin-top:2px; }
.sp-room-badge { margin-left:auto; font-size:.8rem; font-weight:700; color:#ffcc00;
    background:rgba(255,204,0,.12); border:1px solid rgba(255,204,0,.3);
    border-radius:20px; padding:4px 12px; white-space:nowrap; }

/* Layout 2 columnas */
.sp-layout { display:grid; grid-template-columns:1fr 1fr; gap:12px; flex:1; }
@media(max-width:640px){ .sp-layout { grid-template-columns:1fr; } }
.sp-section-title { font-size:.72rem; font-weight:700; color:#a0aec0; letter-spacing:.1em;
    text-transform:uppercase; margin-bottom:8px; padding-bottom:4px;
    border-bottom:1px solid rgba(255,255,255,.07); }

/* Fila de jugador en el panel de clasificación */
.sp-player-row {
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
    border-radius:10px; padding:8px 10px; margin-bottom:6px;
    transition:background .3s, border-color .3s;
}
.sp-rank  { font-size:1rem; min-width:28px; text-align:center; }
.sp-av    { font-size:1.3rem; }
.sp-info  { flex:1; min-width:0; }
.sp-name  { font-size:.82rem; font-weight:600; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-last-act { font-size:.7rem; color:#00e5ff; margin:1px 0 3px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-bar-wrap { height:4px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.sp-bar-fill { height:100%; background:linear-gradient(90deg,#00e5ff,#a855f7); border-radius:4px; transition:width .5s ease; }
.sp-score { font-size:.9rem; font-weight:800; color:#ffcc00; white-space:nowrap; }
.sp-pts   { font-size:.68rem; color:#a0aec0; font-weight:400; }
@keyframes spScoreBump { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3);color:#fff} }
.sp-score-bump { animation:spScoreBump .4s ease; }

/* Feed de actividad */
.sp-feed {
    max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
    scrollbar-width:thin; scrollbar-color:rgba(0,229,255,.2) transparent;
}
.sp-feed-row {
    display:flex; align-items:baseline; gap:7px;
    background:rgba(255,255,255,.02); border-radius:7px;
    padding:5px 8px; font-size:.75rem;
    border-left:3px solid transparent; transition:background .2s;
}
.sp-feed-score { border-left-color:#ffcc00; }
.sp-feed-phase { border-left-color:#a855f7; background:rgba(168,85,247,.07); }
.sp-feed-join  { border-left-color:#25d366; }
.sp-feed-leave { border-left-color:#ff4444; }
.sp-feed-info  { border-left-color:#00e5ff; }
@keyframes spFeedIn { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:none} }
.sp-feed-new { animation:spFeedIn .35s ease; }
.sp-feed-av  { font-size:.9rem; flex-shrink:0; }
.sp-feed-msg { flex:1; color:#cbd5e0; }
.sp-feed-ts  { color:#4a5568; flex-shrink:0; font-size:.68rem; }
.sp-feed-empty { color:#4a5568; font-size:.8rem; text-align:center; padding:20px 0; }
.sp-empty { color:#4a5568; font-size:.8rem; text-align:center; padding:16px 0; }

/* Toggle "Seré espectador" en pestaña Crear */
.mp-spect-mode-field { margin-top: 4px; }
.mp-spect-mode-lbl {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-size: 0.82rem; color: #a0aec0;
    background: rgba(0,229,255,0.04); border: 1px solid rgba(0,229,255,0.14);
    border-radius: 10px; padding: 10px 14px;
    transition: background 0.2s, border-color 0.2s;
}
.mp-spect-mode-lbl:hover { background: rgba(0,229,255,0.09); border-color: rgba(0,229,255,0.3); }
.mp-spect-cb { accent-color: #00e5ff; width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }

/* Controles del host-espectador (antes de iniciar el torneo) */
.sp-host-controls {
    background: rgba(255,204,0,0.06); border: 1px solid rgba(255,204,0,0.22);
    border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.sp-hc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-hc-info { display: flex; flex-direction: column; gap: 2px; }
.sp-hc-lbl { font-size: 0.66rem; color: #718096; text-transform: uppercase; letter-spacing: 0.08em; }
.sp-hc-code { font-size: 1.7rem; font-weight: 900; color: #ffcc00; letter-spacing: 0.15em; }
.sp-copy-btn {
    background: rgba(255,204,0,0.14); border: 1px solid rgba(255,204,0,0.3);
    color: #ffcc00; padding: 7px 14px; border-radius: 8px; cursor: pointer;
    font-size: 0.78rem; font-weight: 600; transition: background 0.2s; white-space: nowrap;
}
.sp-copy-btn:hover { background: rgba(255,204,0,0.26); }
.sp-hc-count { font-size: 0.82rem; color: #a0aec0; text-align: center; }
.sp-start-btn {
    background: linear-gradient(90deg, #00e5ff 0%, #0090ff 100%);
    color: #000822; font-weight: 800; font-size: 0.95rem;
    padding: 13px; border: none; border-radius: 10px; cursor: pointer;
    letter-spacing: 0.04em; transition: opacity 0.2s, transform 0.1s;
    width: 100%;
}
.sp-start-btn:not(:disabled):hover { opacity: 0.9; transform: translateY(-1px); }
.sp-start-btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* ════ SpotDanger — fix overflow en móvil pequeño (Galaxy A15 / 360px) ════ */
@media (max-width: 640px) {
    body[data-active-section="dangerContainer"] .game-content {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 env(safe-area-inset-bottom, 8px);
    }
    body[data-active-section="dangerContainer"] .spot-danger-game {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: 6px 4px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    /* El frame de interfaz hace scroll propio si el contenido no cabe */
    .interface-frame {
        max-height: calc(100dvh - 220px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Overlay (game-over, level complete) centrado y sin desbordamiento */
    .game-overlay {
        position: fixed !important;
        inset: 0;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
        background: rgba(0,0,0,0.78);
        backdrop-filter: blur(4px);
    }
    .overlay-card {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
}
@media (max-width: 390px) {
    .interface-frame {
        max-height: calc(100dvh - 200px);
    }
}

/* ════════════════════════════════════════════════════════════════
   ENCUENTRA EL PELIGRO — Override final para móvil (≤ 640px)
   Gana sobre todas las reglas !important de escritorio anteriores
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* 1. Permitir scroll en el gameScreen cuando el juego activo es danger */
    body[data-active-section="dangerContainer"] #gameScreen {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* 2. Quitar el padding de game-content que reduce el ancho disponible */
    body[data-active-section="dangerContainer"] .game-content {
        padding: 0 !important;
        overflow: visible !important;
        min-height: 0 !important;
    }

    /* 3. spot-danger-game: ancho completo, sin bordes redondeados que malgastan píxeles */
    body[data-active-section="dangerContainer"] .spot-danger-game {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
        gap: 5px !important;
        box-sizing: border-box !important;
    }

    /* 4. HUD compacto */
    body[data-active-section="dangerContainer"] .spy-hud {
        padding: 5px 8px !important;
        border-radius: 8px !important;
    }

    /* 5. Threat strip compacto */
    body[data-active-section="dangerContainer"] .threat-strip {
        padding: 3px 8px !important;
    }

    /* 6. combo-strip: quitar del flujo cuando está oculto */
    body[data-active-section="dangerContainer"] #comboStrip[style*="opacity:0"] {
        display: none !important;
    }

    /* 7. Interface frame: altura limitada con scroll interno */
    body[data-active-section="dangerContainer"] .interface-frame {
        max-height: 44vh !important;
        min-height: 180px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* 8. Controles: compactos y sin espacio extra */
    body[data-active-section="dangerContainer"] .spy-controls {
        padding: 0 !important;
        flex-shrink: 0 !important;
        gap: 6px !important;
    }

    /* 9. Nodos táctiles: altura mínima garantizada para el dedo */
    body[data-active-section="dangerContainer"] .danger-node {
        min-height: 40px !important;
        padding: 8px 32px 8px 10px !important;
        font-size: 0.8rem !important;
    }

    /* 10. Intro screen: sin min-height fija */
    body[data-active-section="dangerContainer"] .level-intro-screen {
        min-height: 0 !important;
        padding: 16px 12px !important;
    }

    /* 11. Overlay: pantalla completa, centrado */
    body[data-active-section="dangerContainer"] .game-overlay {
        position: absolute !important;
        inset: 0 !important;
        z-index: 50 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    body[data-active-section="dangerContainer"] .overlay-card {
        max-width: 100% !important;
        width: 100% !important;
        max-height: calc(100dvh - 40px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   SPLASH — VH CONSTRAINTS (al final para ganar la cascada)
   Evita que el contenido de la presentación se corte en pantallas
   de altura limitada (laptops 768px, zoom elevado, etc.)
================================================================ */
@media (min-width: 600px) {
    .sp-content       { gap: min(18px, 1.8vh) !important;
                        padding: min(50px,3.5vh) min(40px,3vw) !important; }
    .sp-shield-img    { height: min(130px, 11vh) !important; }
    .sp-logo-img      { height: min(74px,   6vh) !important; }
    .sp-logo-frame    { padding: min(10px, 1vh) 14px !important; }
    .sp-logo-center   { padding: min(12px, 1.1vh) !important; }
    .sp-title-glitch  { font-size: min(5rem,  8.5vh) !important; }
    .sp-title-sub     { font-size: min(2rem,  3.2vh) !important; }
    .sp-stat          { padding: min(12px,1.1vh) 20px !important; }
    .sp-stat-val      { font-size: min(2rem, 2.3vh) !important; }
    .sp-play-content  { padding: min(22px,1.9vh) min(50px,4vw) !important; }
    .sp-dev-card      { padding: min(16px,1.4vh) min(22px,2vw) !important; }
    .sp-dev-inner     { gap: min(16px,1.4vh) !important; }
    .sp-dev-avatar    { width: min(52px,4.8vh) !important;
                        height: min(52px,4.8vh) !important; }
}

/* ══ Canvas de juegos: escalar sin deformar en cualquier pantalla ══ */
#runnerCanvas,
#gameCanvas {
    object-fit: contain;
    background-color: #070b16;
    max-height: calc(100dvh - 120px);
}
body[data-active-section="runnerContainer"] #runnerCanvas {
    object-fit: fill !important;
    max-height: none !important;
}

/* ══ Runner: fondo oscuro detrás de la consola ══ */
body[data-active-section="runnerContainer"] .game-content,
body.gameplay-mode[data-active-section="runnerContainer"] .game-content {
    background:
        radial-gradient(ellipse 80% 55% at 50% 38%, rgba(0, 170, 255, 0.10), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(120, 60, 255, 0.10), transparent 70%),
        linear-gradient(rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(0, 229, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(180deg, #0b1324 0%, #070c18 55%, #04070f 100%) !important;
}

.gi-runner-room-bg { display: none !important; }

body[data-active-section="runnerContainer"] #runnerContainer,
body[data-active-section="runnerContainer"] .runner-game,
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-body,
body.mobile-touch-device[data-active-section="runnerContainer"] .rac-screen-col {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud {
    background: linear-gradient(180deg, rgba(14, 24, 44, 0.95), rgba(8, 14, 28, 0.95)) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* ══ HUD superior: chips y botones ══ */
.gs-hud .gs-chip {
    gap: 9px;
    padding: 6px 12px 6px 8px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 32, 56, 0.92), rgba(10, 18, 34, 0.92));
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.gs-hud .gs-chip-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.95rem;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
}
.gs-hud .gs-chip-val {
    font-size: 0.85rem;
    color: #eaf6ff;
}
.gs-hud .gs-chip-lbl {
    font-size: 0.5rem;
    color: rgba(160, 200, 230, 0.6);
    margin-top: 2px;
}
.gs-hud .gs-chip-pts { border-color: rgba(255, 200, 40, 0.35); }
.gs-hud .gs-chip-pts .gs-chip-icon { background: rgba(255, 200, 40, 0.14); border-color: rgba(255, 200, 40, 0.4); }
.gs-hud .gs-chip-pts .gs-chip-val { color: #ffd84d; }
.gs-hud .gs-chip-lvl { border-color: rgba(150, 90, 255, 0.4); }
.gs-hud .gs-chip-lvl .gs-chip-icon { background: rgba(150, 90, 255, 0.16); border-color: rgba(150, 90, 255, 0.45); }
.gs-hud .gs-chip-lvl .gs-chip-val { color: #cdb6ff; }

.gs-hud .gs-hud-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 7px 16px !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.gs-hud .gs-btn-home {
    background: linear-gradient(180deg, rgba(0, 150, 200, 0.28), rgba(0, 90, 140, 0.28)) !important;
    border: 1px solid rgba(0, 229, 255, 0.5) !important;
    color: #bff4ff !important;
}
.gs-hud .gs-btn-exit {
    background: linear-gradient(180deg, rgba(200, 40, 60, 0.3), rgba(130, 20, 35, 0.3)) !important;
    border: 1px solid rgba(255, 90, 100, 0.5) !important;
    color: #ffc9cc !important;
}
.gs-hud .gs-hud-btn:active {
    transform: translateY(1px) scale(0.98) !important;
}

@media (orientation: landscape) and (max-height: 600px) {
    #runnerCanvas,
    #gameCanvas {
        max-height: calc(100dvh - 70px);
        min-height: 0 !important;
    }
}

@media (orientation: portrait) and (max-width: 600px) {
    #runnerCanvas,
    #gameCanvas {
        max-height: 70dvh;
    }
}

/* ══ Rendimiento: decoración animada oculta detrás de los juegos de canvas ══ */
body[data-active-section="runnerContainer"] .gs-bg,
body[data-active-section="platformerContainer"] .gs-bg,
body[data-active-section="runnerContainer"] .floating-particles,
body[data-active-section="platformerContainer"] .floating-particles {
    display: none !important;
}
body.runner-playing .rac-machine [class*="rac-"],
body.runner-playing .rac-machine [class*="rac-"]::before,
body.runner-playing .rac-machine [class*="rac-"]::after {
    animation-play-state: paused !important;
}

/* ══ Runner: presentación cinemática de jefes ══ */
.runner-stage { position: relative; }

.boss-intro {
    --boss-color: #ff1744;
    position: absolute;
    inset: 0;
    z-index: 30;
    overflow: hidden;
    container-type: size;
    background: #04060d;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    color: #fff;
    animation: biIn 0.25s ease-out both;
}
.boss-intro.is-leaving { animation: biOut 0.4s ease-in forwards; }

.bi-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #04060d;
}
.bi-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    animation: biKenBurns 5.5s ease-out both;
}
.bi-bg.is-face img { object-position: center 36%; }
.bi-bg.bl-bg img { object-position: center 58%; animation: blZoom 3.2s ease-out both; }
.bi-bg.bv-portrait img { object-position: center 36%; }
.bi-bg.bv-victory img { object-position: center center; }
.bi-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 6, 13, 0.92) 0%, rgba(4, 6, 13, 0.55) 45%, rgba(4, 6, 13, 0.1) 75%),
        radial-gradient(ellipse at 70% 40%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
}
.bi-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    pointer-events: none;
}
.bi-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #fff 0%, var(--boss-color) 45%, transparent 75%);
    animation: biFlash 0.6s ease-out both;
    pointer-events: none;
}

.bi-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 9cqh;
    background: #000;
    z-index: 3;
}
.bi-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--boss-color), transparent);
    box-shadow: 0 0 10px var(--boss-color);
}
.bi-bar-top { top: 0; animation: biBarTop 0.5s cubic-bezier(.2,.8,.2,1) both; }
.bi-bar-top::after { bottom: 0; }
.bi-bar-bottom { bottom: 0; animation: biBarBottom 0.5s cubic-bezier(.2,.8,.2,1) both; }
.bi-bar-bottom::after { top: 0; }

.bi-warning {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqh;
    text-align: center;
    white-space: nowrap;
    animation: biWarning 1.5s ease-in-out both;
}
.bi-warning span {
    font-size: clamp(9px, 5cqh, 18px);
    letter-spacing: 0.4em;
    color: #ffd54f;
    animation: biBlink 0.3s steps(2) 4;
}
.bi-warning strong {
    font-size: clamp(16px, 13cqh, 54px);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 0 12px var(--boss-color), 0 0 30px var(--boss-color), 3px 0 0 rgba(0, 229, 255, 0.7), -3px 0 0 rgba(255, 23, 68, 0.7);
}

.bi-card {
    position: absolute;
    left: 4cqw;
    top: 50%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 3cqw;
    width: min(64cqw, 560px);
    transform: translateY(-50%);
    animation: biCardIn 0.6s cubic-bezier(.2,.9,.25,1.15) 1.35s both;
}
.bi-emblem {
    flex: 0 0 auto;
    width: clamp(48px, 34cqh, 130px);
    filter: drop-shadow(0 0 10px var(--boss-color));
    animation: biEmblem 0.7s cubic-bezier(.2,.9,.3,1.3) 1.5s both;
}
.bi-emblem-svg { display: block; width: 100%; height: auto; }
.bi-emblem-ring { transform-origin: 60px 62px; animation: biSpin 6s linear infinite; }

.bi-text { min-width: 0; }
.bi-threat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(8px, 3.6cqh, 13px);
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.7);
}
.bi-meter { display: inline-flex; gap: 3px; }
.bi-meter i {
    width: clamp(8px, 3cqw, 18px);
    height: clamp(5px, 2.4cqh, 9px);
    background: rgba(255, 255, 255, 0.15);
    transform: skewX(-20deg);
}
.bi-meter i.on { background: var(--boss-color); box-shadow: 0 0 6px var(--boss-color); }
.bi-name {
    margin: 0.6cqh 0 0.8cqh;
    font-size: clamp(15px, 10cqh, 44px);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 14px var(--boss-color), 2px 2px 0 #000;
    animation: biGlitch 0.5s steps(2) 1.6s 2;
}
.bi-quote {
    margin: 0;
    display: inline-block;
    padding: 0.6cqh 1.4cqw;
    font-size: clamp(9px, 4.6cqh, 18px);
    font-weight: 800;
    color: #fff;
    background: color-mix(in srgb, var(--boss-color) 70%, transparent);
    border-left: 3px solid #fff;
}
.bi-lesson {
    margin: 1cqh 0 0;
    font-size: clamp(8px, 3.8cqh, 14px);
    line-height: 1.3;
    color: #ffe082;
    font-family: system-ui, sans-serif;
}
.bi-skip {
    position: absolute;
    bottom: 1.6cqh;
    left: 0;
    right: 0;
    z-index: 5;
    text-align: center;
    font-size: clamp(7px, 3.2cqh, 12px);
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.75);
    animation: biFadeIn 0.4s ease 2s both, biPulse 1.2s ease-in-out 2.4s infinite;
}

/* Jefe final: retrato visible, texto abajo sin tapar la cara */
.boss-intro.is-final .bi-flash { animation-duration: 0.7s; }
.boss-intro.is-final .bi-bg img {
    object-position: center 40%;
    animation: biKenBurnsFinal 5.2s ease-out both;
}
.boss-intro.is-final .bi-shade {
    background: linear-gradient(180deg, rgba(4, 6, 13, 0.28) 0%, rgba(4, 6, 13, 0.08) 38%, rgba(4, 6, 13, 0.22) 58%, rgba(4, 6, 13, 0.9) 100%);
}
.boss-intro.is-final .bi-warning {
    top: 11%;
    transform: translate(-50%, 0);
    animation: biWarningFinal 1.1s ease both;
}
.boss-intro.is-final .bi-warning strong {
    color: #ffd54f;
    font-size: clamp(14px, 7cqh, 28px);
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px #000, 0 0 16px #ff1744;
}
.boss-intro.is-final .bi-card {
    left: 50%;
    top: auto;
    bottom: 11cqh;
    width: min(90cqw, 520px);
    flex-direction: column;
    text-align: center;
    gap: 6px;
    transform: translateX(-50%);
    padding: 8px 12px 10px;
    border-radius: 12px;
    background: rgba(4, 8, 18, 0.78);
    border: 1px solid rgba(255, 213, 79, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    animation: biCardInFinal 0.55s ease 0.7s both;
}
.boss-intro.is-final .bi-name {
    font-size: clamp(14px, 6.2cqh, 26px);
    animation: none;
    text-shadow: 0 2px 8px #000;
}
.boss-intro.is-final .bi-quote,
.boss-intro.is-final .bi-lesson {
    white-space: normal;
}
.boss-intro.is-final .bi-skip {
    bottom: 2.4cqh;
}
@keyframes biKenBurnsFinal {
    from { transform: scale(1.06); filter: brightness(0.82) saturate(1.15); }
    to { transform: scale(1); filter: brightness(1) saturate(1.08); }
}
@keyframes biWarningFinal {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes biCardInFinal {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Emblema fijo durante la pelea */
.boss-badge {
    --boss-color: #ff1744;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    background: rgba(4, 8, 18, 0.78);
    border: 1px solid var(--boss-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--boss-color) 55%, transparent);
    pointer-events: none;
    animation: biFadeIn 0.4s ease both;
}
.boss-badge .bi-emblem-svg { width: 30px; }
.boss-badge span {
    font: 800 11px/1 'Courier New', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.boss-badge.is-final span { color: #ffd54f; }

@media (max-width: 600px) {
    .boss-badge { display: none; }
    .bi-card { width: 88cqw; }
    .bi-shade { background: linear-gradient(90deg, rgba(4, 6, 13, 0.9) 0%, rgba(4, 6, 13, 0.6) 60%, rgba(4, 6, 13, 0.3) 100%); }
}

/* Presentación de jefe dentro del LCD, no encima del marco Game Boy */
body.mobile-touch-device[data-active-section="runnerContainer"] .boss-intro,
body.runner-compact-ui[data-active-section="runnerContainer"] .boss-intro {
    inset: 0;
    border-radius: 0;
    overflow: hidden;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg {
    inset: 0;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg img,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    animation: none;
    transform: none;
    filter: none;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg.bl-bg img,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg.bl-bg img {
    object-position: center 55%;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg.is-face img,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg.is-face img {
    object-fit: cover;
    object-position: center 22%;
    width: 100%;
    height: 100%;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bar,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bar {
    height: 0;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-shade,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-shade {
    background: linear-gradient(180deg, rgba(4, 6, 13, 0.18) 0%, rgba(4, 6, 13, 0.08) 42%, rgba(4, 6, 13, 0.78) 100%);
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-card,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-card {
    left: 4%;
    right: 4%;
    top: auto;
    bottom: 28px;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    flex-direction: column;
    text-align: center;
    gap: 3px;
    padding: 8px 10px 9px;
    border-radius: 10px;
    background: rgba(4, 8, 18, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transform: none;
    animation-name: biCardInSheet;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-emblem,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-emblem {
    width: clamp(42px, 15cqh, 62px);
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-threat,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-threat {
    justify-content: center;
    letter-spacing: 0.12em;
    font-size: clamp(8px, 2.2cqh, 11px);
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-name,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-name {
    font-size: clamp(13px, 4.6cqmin, 20px);
    letter-spacing: 0.01em;
    line-height: 1.08;
    overflow-wrap: anywhere;
    animation: none;
    margin: 2px 0;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-quote,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-quote {
    font-size: clamp(10px, 3.1cqmin, 13px);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-lesson,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-lesson {
    font-size: clamp(9px, 2.7cqmin, 12px);
    line-height: 1.25;
    overflow-wrap: anywhere;
    margin-top: 3px;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-skip,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-skip {
    bottom: 6px;
    font-size: clamp(9px, 2.6cqmin, 11px);
    letter-spacing: 0.06em;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-warning,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-warning {
    top: 7%;
    max-width: 92%;
    white-space: normal;
    transform: translate(-50%, 0);
}
body.mobile-touch-device[data-active-section="runnerContainer"] .bi-warning strong,
body.runner-compact-ui[data-active-section="runnerContainer"] .bi-warning strong {
    font-size: clamp(13px, 4.6cqh, 22px);
    letter-spacing: 0.06em;
}
body.mobile-touch-device[data-active-section="runnerContainer"] .boss-intro.is-final .bi-card,
body.runner-compact-ui[data-active-section="runnerContainer"] .boss-intro.is-final .bi-card {
    bottom: 28px;
    left: 4%;
    right: 4%;
    width: auto;
    transform: none;
    animation-name: biCardInSheet;
}
@keyframes biCardInSheet {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (orientation: portrait) and (max-width: 900px) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg img,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg img,
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg.is-face img,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg.is-face img {
        object-fit: cover;
        object-position: center 12%;
    }
}
@media (orientation: landscape) and (max-height: 520px) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-bg img,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-bg img,
    .boss-intro .bi-bg.is-face img {
        object-fit: cover;
        object-position: center 28%;
    }
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-card,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-card,
    body.mobile-touch-device[data-active-section="runnerContainer"] .boss-intro.is-final .bi-card,
    body.runner-compact-ui[data-active-section="runnerContainer"] .boss-intro.is-final .bi-card {
        bottom: 20px;
        padding: 5px 8px 6px;
        gap: 2px;
    }
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-emblem,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-emblem {
        width: 32px;
    }
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-name,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-name {
        font-size: 13px;
    }
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-quote,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-quote,
    body.mobile-touch-device[data-active-section="runnerContainer"] .bi-lesson,
    body.runner-compact-ui[data-active-section="runnerContainer"] .bi-lesson {
        font-size: 10px;
    }
    .bv-stamp { font-size: clamp(12px, 8cqh, 18px); }
}
body.mobile-touch-device[data-active-section="runnerContainer"] .boss-intro.is-final .bi-warning,
body.runner-compact-ui[data-active-section="runnerContainer"] .boss-intro.is-final .bi-warning {
    top: 10%;
}
@keyframes biCardInMobile {
    from { opacity: 0; transform: translate(-50%, -42%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes biIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes biOut { to { opacity: 0; transform: scale(1.06); } }
@keyframes biKenBurns { from { transform: scale(1.18); filter: brightness(0.4) saturate(1.4); } to { transform: scale(1); filter: brightness(1) saturate(1.1); } }
@keyframes biFlash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes biBarTop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes biBarBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes biWarning {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}
@keyframes biBlink { 50% { opacity: 0.2; } }
@keyframes biCardIn { from { opacity: 0; transform: translate(-40px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes biEmblem { from { opacity: 0; transform: scale(0.2) rotate(-120deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes biSpin { to { transform: rotate(360deg); } }
@keyframes biGlitch {
    0% { transform: translate(0); }
    25% { transform: translate(-3px, 1px); text-shadow: 3px 0 0 #00e5ff, -3px 0 0 #ff1744; }
    50% { transform: translate(3px, -1px); }
    100% { transform: translate(0); }
}
@keyframes biFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes biPulse { 50% { opacity: 0.4; } }
@keyframes biShake {
    0%, 100% { translate: 0 0; }
    25% { translate: -6px 3px; }
    50% { translate: 5px -4px; }
    75% { translate: -3px 5px; }
}

/* ══ Jefe vencido ══ */
.boss-intro.is-victory .bv-portrait {
    animation: bvPortrait 1.1s ease-in forwards;
}
.boss-intro.is-victory .bv-victory {
    opacity: 0;
    animation: bvVictory 2s ease-out 0.9s forwards;
}
.bv-shade {
    background: radial-gradient(ellipse at center, rgba(4, 6, 13, 0.15) 20%, rgba(4, 6, 13, 0.85) 100%) !important;
}
.bv-shards {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.bv-shards i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7cqh;
    height: 7cqh;
    background: var(--boss-color);
    clip-path: polygon(50% 0, 100% 60%, 30% 100%);
    box-shadow: 0 0 10px var(--boss-color);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: bvShard 1.1s cubic-bezier(.15,.8,.3,1) 0.85s forwards;
}
.bv-center {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4cqh;
    text-align: center;
}
.bv-emblem {
    width: clamp(44px, 28cqh, 110px);
    filter: drop-shadow(0 0 12px var(--boss-color));
    animation: bvEmblemBreak 0.9s ease-in forwards;
}
.bv-stamp {
    max-width: min(92cqw, 680px);
    padding: 1cqh 3cqw;
    font-size: clamp(14px, 7.4cqh, 36px);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.05;
    color: #fff;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 120, 0.85), transparent);
    text-shadow: 0 0 14px #00ff99, 2px 2px 0 #000;
    transform: scale(3);
    opacity: 0;
    animation: bvStamp 0.45s cubic-bezier(.2,.9,.3,1.4) 1s forwards;
}
.bv-name {
    font-size: clamp(9px, 4.6cqh, 18px);
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: line-through;
    text-decoration-color: #ff1744;
    opacity: 0;
    animation: biFadeIn 0.4s ease 1.35s forwards;
}
.bv-score {
    font-size: clamp(12px, 7cqh, 28px);
    font-weight: 900;
    color: #ffd54f;
    text-shadow: 0 0 10px #ff9800;
    opacity: 0;
    animation: bvScore 0.8s ease 1.55s forwards;
}
.boss-intro.is-victory.is-final .bv-stamp {
    background: linear-gradient(90deg, transparent, rgba(255, 179, 0, 0.9), transparent);
    text-shadow: 0 0 16px #ffd54f, 2px 2px 0 #000;
}

/* ══ Siguiente nivel ══ */
.bl-bg { animation: none; }
.bl-shade {
    background: radial-gradient(ellipse at center, rgba(0, 20, 30, 0.2) 25%, rgba(2, 6, 14, 0.8) 100%) !important;
}
.bl-streaks {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.bl-streaks i {
    position: absolute;
    top: calc(8% + var(--i) * 9%);
    left: -40%;
    width: 35%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00e5ff, #b2ff59);
    box-shadow: 0 0 8px #00e5ff;
    animation: blStreak 0.9s linear calc(var(--i) * 0.11s) infinite;
}
.bl-center {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6cqh;
    text-align: center;
}
.bl-tag {
    font-size: clamp(9px, 4.4cqh, 16px);
    letter-spacing: 0.35em;
    color: #b2ff59;
    animation: biFadeIn 0.4s ease 0.1s both;
}
.bl-level {
    font-size: clamp(18px, 14cqh, 60px);
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 0 16px #00e5ff, 0 0 40px #00e5ff;
    animation: blLevel 0.6s cubic-bezier(.2,.9,.3,1.4) 0.2s both;
}
.bl-level strong { color: #00e5ff; text-shadow: 0 0 18px #00e5ff, 2px 2px 0 #000; }
.bl-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2cqw;
    animation: biFadeIn 0.4s ease 0.7s both;
}
.bl-perks span {
    padding: 0.8cqh 2.4cqw;
    font-size: clamp(8px, 3.8cqh, 14px);
    font-weight: 700;
    color: #e0f7fa;
    background: rgba(0, 40, 60, 0.75);
    border: 1px solid rgba(0, 229, 255, 0.5);
    border-radius: 999px;
}
.bl-next {
    font-size: clamp(8px, 3.8cqh, 14px);
    color: rgba(255, 255, 255, 0.8);
    font-family: system-ui, sans-serif;
    animation: biFadeIn 0.4s ease 1s both;
}
.bl-next b { color: #ff8a80; }

@keyframes bvPortrait {
    0% { filter: none; transform: scale(1); }
    40% { filter: brightness(2.5) saturate(0); transform: scale(1.03) translateX(-4px); }
    55% { transform: scale(1.03) translateX(5px); }
    100% { filter: grayscale(1) brightness(0.3) blur(4px); transform: scale(1.12); opacity: 0; }
}
@keyframes bvVictory { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes bvShard {
    0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + cos(calc(var(--i) * 25.7deg)) * 55cqw), calc(-50% + sin(calc(var(--i) * 25.7deg)) * 55cqh))
            rotate(calc(var(--i) * 80deg)) scale(0.4);
    }
}
@keyframes bvEmblemBreak {
    0% { transform: scale(1); opacity: 1; }
    60% { transform: scale(1.15) rotate(-6deg); filter: drop-shadow(0 0 20px #fff); opacity: 1; }
    100% { transform: scale(0.2) rotate(40deg); opacity: 0; }
}
@keyframes bvStamp { to { transform: scale(1); opacity: 1; } }
@keyframes bvScore {
    0% { opacity: 0; transform: translateY(10px); }
    60% { opacity: 1; transform: translateY(-4px) scale(1.15); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes blZoom { from { transform: scale(1.25); filter: brightness(0.5); } to { transform: scale(1); filter: brightness(1); } }
@keyframes blStreak { to { left: 110%; } }
@keyframes blLevel { from { opacity: 0; transform: scale(0.4); letter-spacing: 0.6em; } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .boss-intro, .boss-intro * { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }
}

/* ===== Navegación más liviana dentro de la app ===== */
body.gameplay-mode .floating-particles {
    display: none;
}
body.gameplay-mode .main-header,
body.gameplay-mode .main-footer,
body.gameplay-mode .player-info,
body.gameplay-mode .game-content,
body.gameplay-mode .memory-stat,
body.gameplay-mode .mission-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.game-section:not(.active) {
    content-visibility: hidden;
}

/* ===== Pantalla de fin de partida del runner ===== */
.go-screen {
    position: relative;
    width: min(100%, 960px);
    aspect-ratio: 16 / 9;
    min-height: 360px;
    border-radius: 18px;
    overflow: hidden;
    background: #05070f center / cover no-repeat;
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 23, 68, 0.15), 0 20px 50px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    animation: goZoom 0.6s ease-out both;
}
.go-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    pointer-events: none;
    user-select: none;
}
.go-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 7, 15, 0) 20%, rgba(5, 7, 15, 0.75) 55%, rgba(5, 7, 15, 0.95) 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
}
.go-panel {
    position: relative;
    z-index: 2;
    width: min(46%, 420px);
    margin-right: clamp(16px, 5%, 48px);
    text-align: left;
    color: #e8f6ff;
    font-family: 'Courier New', monospace;
}
.go-tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ff1744;
    border-radius: 4px;
    color: #ff5370;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    animation: goBlink 1.4s steps(2) infinite;
}
.go-title {
    margin: 10px 0 6px;
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 2px 0 #ff1744, -2px 0 #00e5ff;
    animation: goGlitch 3s infinite;
}
.go-msg {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
    color: #a9c4d8;
}
.go-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.go-stat {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.25);
}
.go-stat span {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #6fa8c4;
}
.go-stat strong {
    display: block;
    margin-top: 2px;
    font-size: 18px;
    color: #fff;
}
.go-stat-score {
    border-color: rgba(255, 213, 79, 0.5);
    background: rgba(255, 213, 79, 0.08);
}
.go-stat-score strong {
    color: #ffd54f;
}
.go-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.go-btn {
    flex: 1 1 auto;
    padding: 12px 16px;
    border-radius: 10px;
    border: 0;
    font: 700 13px/1 'Courier New', monospace;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.go-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}
.go-btn:active {
    transform: translateY(0);
}
.go-btn-retry {
    color: #04130a;
    background: linear-gradient(180deg, #8cff4a, #39d353);
    box-shadow: 0 0 0 1px #b9ff8f inset, 0 6px 18px rgba(57, 211, 83, 0.35);
}
.go-btn-menu {
    flex: 0 0 auto;
    color: #cfe9ff;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.4) inset;
}
@media (max-width: 640px) {
    .go-screen:not(.go-screen--immersive) {
        aspect-ratio: auto;
        min-height: 480px;
        align-items: flex-end;
        justify-content: center;
        background-position: 20% center;
    }
    .go-screen:not(.go-screen--immersive) .go-shade {
        background: linear-gradient(180deg, rgba(5, 7, 15, 0.1) 10%, rgba(5, 7, 15, 0.92) 55%);
    }
    .go-screen:not(.go-screen--immersive) .go-panel {
        width: auto;
        margin: 0 16px 18px;
    }
}

/* Game over / victoria — imagen a pantalla completa en móvil */
@media (max-width: 900px), (pointer: coarse) {
    body.runner-go-active {
        overflow: hidden !important;
    }
    body.runner-go-active #gameScreen .game-header {
        display: none !important;
    }
    body.runner-go-active .game-content {
        height: 100dvh !important;
        height: 100svh !important;
        max-height: 100dvh !important;
        max-height: 100svh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.runner-go-active #runnerContainer {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2500;
        background: #05070f;
    }
    body.runner-go-active .runner-game.runner-result-layout {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    body.runner-go-active .go-screen {
        flex: 1 1 auto;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        aspect-ratio: unset !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #05070f !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
    }
    body.runner-go-active .go-bg-img {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        height: 100svh !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        filter: brightness(1.06) saturate(1.1) contrast(1.04);
        z-index: 0;
    }
    body.runner-go-active .go-fail .go-bg-img {
        object-position: center top !important;
    }
    body.runner-go-active .go-win .go-bg-img {
        object-position: center center !important;
    }
    body.runner-go-active .go-shade {
        background: linear-gradient(
            180deg,
            rgba(5, 7, 15, 0.02) 0%,
            rgba(5, 7, 15, 0.08) 38%,
            rgba(5, 7, 15, 0.52) 62%,
            rgba(5, 7, 15, 0.94) 100%
        );
    }
    body.runner-go-active .go-panel {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding:
            14px
            max(16px, env(safe-area-inset-right))
            max(20px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
        padding-top: max(18px, env(safe-area-inset-top));
        box-sizing: border-box;
        text-align: center;
        background: linear-gradient(180deg, rgba(6, 10, 22, 0.72) 0%, rgba(4, 7, 18, 0.94) 100%);
        border-top: 1px solid rgba(0, 229, 255, 0.22);
        box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    body.runner-go-active .go-title {
        animation: none;
        font-size: clamp(20px, 5.5vw, 28px);
        text-shadow: 0 0 14px rgba(255, 23, 68, 0.45), 0 2px 0 #000;
    }
    body.runner-go-active .go-tag {
        animation: goBlink 2s steps(2) infinite;
    }
    body.runner-go-active .go-stats {
        gap: 6px;
    }
    body.runner-go-active .go-stat strong {
        font-size: clamp(14px, 4vw, 18px);
    }
    body.runner-go-active .go-actions {
        flex-direction: column;
        width: 100%;
    }
    body.runner-go-active .go-btn {
        width: 100%;
        min-height: 48px;
        font-size: clamp(12px, 3.4vw, 14px);
    }
    body.runner-go-active .go-btn-menu {
        flex: 1 1 auto;
    }
    body.runner-go-active .gs-nav-fab:not([hidden]) {
        z-index: 3600;
    }
}
@keyframes goZoom { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes goBlink { 50% { opacity: 0.35; } }
@keyframes goGlitch {
    0%, 92%, 100% { transform: none; }
    94% { transform: translateX(-2px) skewX(-6deg); }
    96% { transform: translateX(2px); }
}
body.performance-mode .go-tag,
body.performance-mode .go-title,
body.performance-mode .go-screen {
    animation: none;
}

/* Pantalla de victoria */
.go-win {
    border-color: rgba(255, 213, 79, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.2), 0 0 40px rgba(255, 193, 7, 0.25), 0 20px 50px rgba(0, 0, 0, 0.55);
}
.go-win .go-tag {
    border-color: #ffd54f;
    color: #ffd54f;
    animation: none;
}
.go-win .go-title {
    background: linear-gradient(180deg, #fff8d6, #ffd54f 55%, #ff9800);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.45));
}
.go-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.go-confetti i {
    position: absolute;
    top: -12px;
    left: calc(var(--i) * 5.5%);
    width: 6px;
    height: 12px;
    border-radius: 2px;
    background: hsl(calc(var(--i) * 40), 95%, 60%);
    animation: goConfetti calc(3s + var(--i) * 0.17s) linear calc(var(--i) * -0.4s) infinite;
}
@keyframes goConfetti {
    to { transform: translateY(110vh) rotate(720deg); }
}
body.performance-mode .go-confetti {
    display: none;
}

/* ================= Simulador de chat (cc-) ================= */
.cc-app {
    --cc-bg: #0b141a;
    --cc-head: #1f2c34;
    --cc-them: #202c33;
    --cc-me: #005c4b;
    --cc-accent: #00a884;
    --cc-text: #e9edef;
    --cc-muted: #8696a0;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 440px);
    height: min(860px, calc(100dvh - 140px));
    min-height: 520px;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background-color: var(--cc-bg);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.5px),
        radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1.5px);
    background-size: 26px 26px, 26px 26px;
    background-position: 0 0, 13px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 8px #0d0f14, 0 0 0 9px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.5);
    color: var(--cc-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    text-align: left;
}
.cc-app [hidden] { display: none !important; }
.cc-app-instagram { --cc-bg: #000; --cc-head: #0e0e0e; --cc-them: #262626; --cc-me: #7b2ff7; --cc-accent: #d62976; }
.cc-app-instagram .cc-msg.cc-me { background: linear-gradient(135deg, #7b2ff7, #d62976); }
.cc-app-telegram { --cc-bg: #0e1621; --cc-head: #17212b; --cc-them: #182533; --cc-me: #2b5278; --cc-accent: #5288c1; }
.cc-app-sms { --cc-bg: #111; --cc-head: #1c1c1e; --cc-them: #2c2c2e; --cc-me: #0a84ff; --cc-accent: #0a84ff; }
.cc-app-tinder { --cc-bg: #120b10; --cc-head: #1d1218; --cc-them: #2a1d24; --cc-me: #fd297b; --cc-accent: #ff655b; }

.cc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: var(--cc-head);
    flex-shrink: 0;
    z-index: 2;
}
.cc-back {
    border: 0;
    background: none;
    color: var(--cc-text);
    font-size: 30px;
    line-height: 1;
    padding: 0 4px 4px;
    cursor: pointer;
}
.cc-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 21px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%), var(--av, #555);
}
.cc-who { flex: 1; min-width: 0; }
.cc-name {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-status { font-size: 12.5px; color: var(--cc-muted); }
.cc-status.is-typing { color: var(--cc-accent); font-style: italic; }
.cc-hud { display: flex; gap: 6px; flex-shrink: 0; }
.cc-pill {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--cc-text);
}
.cc-pill-pts { color: #ffd54f; }
.cc-progress { height: 3px; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; }
.cc-progress i { display: block; height: 100%; background: var(--cc-accent); transition: width 0.5s; }

.cc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 16px;
    -webkit-overflow-scrolling: touch;
}
.cc-chip {
    align-self: center;
    font-size: 11.5px;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--cc-head);
    color: var(--cc-muted);
    margin-bottom: 6px;
}
.cc-notice {
    align-self: center;
    max-width: 88%;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(255, 213, 79, 0.1);
    color: #ffe082;
    margin-bottom: 10px;
}

.cc-msg {
    position: relative;
    max-width: 82%;
    padding: 6px 9px 7px;
    border-radius: 10px;
    font-size: clamp(14.5px, 3.9vw, 15.5px);
    line-height: 1.38;
    word-wrap: break-word;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 0.22s, transform 0.22s;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.25);
}
.cc-msg.show, .cc-typing { opacity: 1; transform: none; }
.cc-them { align-self: flex-start; background: var(--cc-them); border-top-left-radius: 2px; }
.cc-me { align-self: flex-end; background: var(--cc-me); border-top-right-radius: 2px; }
.cc-them + .cc-me, .cc-me + .cc-them { margin-top: 6px; }
.cc-text { white-space: pre-wrap; }
.cc-meta {
    float: right;
    margin: 6px 0 -4px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}
.cc-ticks { margin-left: 3px; color: #53bdeb; }
.cc-link {
    display: block;
    margin: 6px -4px 2px;
    padding: 8px 10px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #53bdeb;
    text-decoration: none;
    color: inherit;
}
.cc-link-title { display: block; font-weight: 600; font-size: 14px; }
.cc-link-domain { display: block; font-size: 12.5px; color: #53bdeb; margin-top: 2px; word-break: break-all; }
.cc-typing { display: flex; gap: 4px; padding: 12px 14px; }
.cc-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cc-muted);
    animation: ccDot 1.2s infinite;
}
.cc-typing i:nth-child(2) { animation-delay: 0.15s; }
.cc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ccDot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.cc-guide {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 6px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
    flex-shrink: 0;
    z-index: 4;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s, transform 0.3s;
}
.cc-guide.show { opacity: 1; transform: none; }
.cc-guide-img {
    width: 72px;
    height: 86px;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: 16px;
    border: 2px solid #00e5ff;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
    flex-shrink: 0;
    background: #0a1630;
}
.cc-guide-bubble {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    background: #f4fbff;
    color: #0b1b2b;
    border-radius: 14px 14px 14px 4px;
    padding: 8px 12px 10px;
    font-size: 14px;
    line-height: 1.45;
    min-height: 54px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.cc-guide-name { font-size: 11.5px; font-weight: 800; color: #0277bd; letter-spacing: 0.02em; }
.cc-guide-name span { font-weight: 600; color: #5c7080; }
.cc-guide-bubble p { margin: 2px 0 0; }

.cc-choices {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px 12px 10px;
    max-height: min(42dvh, 320px);
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.45);
}
.cc-choices-title { font-size: 12px; font-weight: 700; color: var(--cc-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.cc-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--cc-head);
    color: var(--cc-text);
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cc-choices.show .cc-choice { animation: ccIn 0.3s ease-out var(--d) forwards; }
@keyframes ccIn { to { opacity: 1; transform: none; } }
.cc-choice:hover { border-color: var(--cc-accent); }
.cc-choice:active { transform: scale(0.98); }
.cc-choice-key {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    background: var(--cc-accent);
    color: #fff;
}
.cc-choices.locked .cc-choice:not(.picked) { opacity: 0.35; pointer-events: none; }
.cc-choice.picked { border-color: var(--cc-accent); background: color-mix(in srgb, var(--cc-accent) 25%, var(--cc-head)); }

.cc-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: var(--cc-head);
    flex-shrink: 0;
}
.cc-ico { font-size: 20px; opacity: 0.7; }
.cc-field {
    flex: 1;
    padding: 9px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--cc-muted);
    font-size: 15px;
}
.cc-field.is-active { color: var(--cc-accent); box-shadow: 0 0 0 1px var(--cc-accent) inset; }
.cc-send {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cc-accent);
    font-size: 18px;
}

.cc-sheet {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s;
}
.cc-sheet.show { background: rgba(0, 0, 0, 0.6); }
.cc-card {
    position: relative;
    width: 100%;
    max-height: 92%;
    overflow-y: auto;
    padding: 18px 18px max(18px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, #0f1b33, #08101f);
    border-top: 2px solid #00e5ff;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    text-align: center;
}
.cc-sheet.show .cc-card { transform: none; }
.cc-card.is-risk { border-top-color: #ff1744; }
.cc-card-img {
    width: 120px;
    height: 140px;
    object-fit: cover;
    object-position: 50% 10%;
    border-radius: 20px;
    margin: -60px auto 8px;
    display: block;
    border: 3px solid #00e5ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.3);
    background: #0a1630;
}
.cc-card.is-risk .cc-card-img { border-color: #ff1744; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 23, 68, 0.35); }
.cc-card-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 229, 255, 0.12);
    color: #7cf3ff;
}
.cc-card.is-risk .cc-card-tag { background: rgba(255, 23, 68, 0.14); color: #ff6b81; }
.cc-card-title { margin: 8px 0 4px; font-size: 22px; color: #fff; }
.cc-card-text { margin: 0 auto 10px; max-width: 420px; font-size: 15px; line-height: 1.45; color: #d5e4f2; min-height: 66px; }
.cc-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.cc-flags span {
    font-size: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e9edef;
}
.cc-card-pts { font-size: 20px; font-weight: 800; color: #ffd54f; margin-bottom: 12px; }
.cc-card-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cc-btn {
    flex: 1 1 140px;
    max-width: 260px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.cc-btn-main { border: 0; background: linear-gradient(180deg, #00e5ff, #0091ea); color: #021624; }
.cc-card.is-risk .cc-btn-main { background: linear-gradient(180deg, #ff5370, #d50032); color: #fff; }

.cc-end {
    justify-content: flex-end;
    background: radial-gradient(circle at 50% 25%, #12305a, #050a16 70%);
}
.cc-end-img {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 62%;
    object-fit: cover;
    object-position: 50% 15%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.cc-end-panel { position: relative; padding: 18px 18px max(22px, env(safe-area-inset-bottom)); text-align: center; }
.cc-end-title { margin: 8px 0 6px; font-size: 30px; color: #fff; }
.cc-end-msg { margin: 0 auto 14px; max-width: 380px; color: #d5e4f2; font-size: 15px; line-height: 1.45; }
.cc-end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cc-end-stats div { padding: 10px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.cc-end-stats span { display: block; font-size: 10.5px; letter-spacing: 0.08em; color: #8fb3cf; }
.cc-end-stats b { font-size: 20px; color: #fff; }

/* Celular: el chat ocupa toda la pantalla como la app real */
@media (max-width: 820px) {
    .cc-app {
        position: fixed;
        inset: 0;
        z-index: 3000;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }
}
@media (max-height: 560px) and (max-width: 820px) {
    .cc-guide-img { width: 48px; height: 56px; }
    .cc-choices { max-height: 50%; }
    .cc-card-img { width: 80px; height: 92px; margin-top: -30px; }
}
body.performance-mode .cc-app { background-image: none; }
body.performance-mode .cc-msg { transition: none; }

/* Burbujas con colita, como en la app real */
.cc-them:not(.cc-typing)::before,
.cc-me::before {
    content: '';
    position: absolute;
    top: 0;
    width: 10px;
    height: 12px;
}
.cc-them:not(.cc-typing)::before {
    left: -7px;
    background: var(--cc-them);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.cc-me::before {
    right: -7px;
    background: var(--cc-me);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cc-app-instagram .cc-msg::before,
.cc-app-sms .cc-msg::before,
.cc-app-tinder .cc-msg::before { display: none; }
.cc-app-instagram .cc-msg,
.cc-app-sms .cc-msg,
.cc-app-tinder .cc-msg { border-radius: 18px; }
.cc-msg.cc-them + .cc-msg.cc-them::before,
.cc-msg.cc-me + .cc-msg.cc-me::before { display: none; }
.cc-head-ico { font-size: 18px; opacity: 0.75; flex-shrink: 0; }

/* Vale hablando */
.cc-guide-face { position: relative; flex-shrink: 0; align-self: flex-start; }
.cc-voice {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #00e5ff;
    opacity: 0;
    transition: opacity 0.2s;
}
.cc-voice i { width: 3px; height: 4px; border-radius: 2px; background: #021624; }
.is-speaking .cc-voice { opacity: 1; }
.is-speaking .cc-voice i { animation: ccVoice 0.5s ease-in-out infinite alternate; }
.cc-voice i:nth-child(2) { animation-delay: 0.12s; }
.cc-voice i:nth-child(3) { animation-delay: 0.24s; }
.cc-voice i:nth-child(4) { animation-delay: 0.36s; }
@keyframes ccVoice { to { height: 10px; } }
.cc-guide.is-speaking .cc-guide-img,
.cc-card.is-speaking .cc-card-img { animation: ccTalkBob 0.6s ease-in-out infinite alternate; }
@keyframes ccTalkBob { to { transform: translateY(-2px) rotate(-0.6deg); } }

/* Intro: videollamada con Vale */
.cc-call {
    justify-content: flex-end;
    background: #050a16;
}
.cc-call-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}
.cc-call.is-speaking .cc-call-bg { animation: ccCallZoom 3s ease-in-out infinite alternate; }
@keyframes ccCallZoom { to { transform: scale(1.03); } }
.cc-call-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(52px, env(safe-area-inset-right) + 46px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
}
.cc-call-rec { color: #ff5370; animation: goBlink 1.2s infinite; }
.cc-call-panel {
    position: relative;
    z-index: 2;
    margin: 0 10px max(12px, env(safe-area-inset-bottom));
    padding: 14px 16px 16px;
    border-radius: 20px;
    background: rgba(8, 14, 28, 0.82);
    border: 1px solid rgba(0, 229, 255, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.cc-call-panel .cc-guide-name { color: #7cf3ff; }
.cc-call-text {
    margin: 4px 0 12px;
    min-height: 88px;
    font-size: clamp(14.5px, 4vw, 16px);
    line-height: 1.45;
    color: #eaf6ff;
}

/* Celulares chicos (iPhone SE, Android compactos) */
@media (max-width: 380px) {
    .cc-head { gap: 6px; padding-left: 6px; padding-right: 8px; }
    .cc-head-ico { display: none; }
    .cc-avatar { width: 34px; height: 34px; font-size: 18px; }
    .cc-pill { padding: 3px 6px; font-size: 10.5px; }
    .cc-guide-img { width: 64px; height: 76px; }
    .cc-guide-bubble { font-size: 13.5px; }
    .cc-choice { font-size: 14px; padding: 9px 12px; }
    .cc-msg { max-width: 88%; }
}
@media (max-height: 560px) and (max-width: 820px) {
    .cc-guide-img { width: 48px; height: 56px; }
    .cc-call-bg { object-position: 50% 10%; }
    .cc-call-text { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-guide.is-speaking .cc-guide-img,
    .cc-card.is-speaking .cc-card-img,
    .cc-call.is-speaking .cc-call-bg { animation: none; }
}
body.performance-mode .cc-call-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 14, 28, 0.95); }

.cc-guide-unit {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #01579b;
    margin-top: 1px;
}
/* Chat a pantalla completa en celular (sin HUD del juego encima) */
@media (max-width: 820px) {
    body[data-active-section="scenarioContainer"] #scenarioContainer.active {
        position: fixed;
        inset: 0;
        z-index: 2800;
        width: 100%;
        height: 100dvh;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #0b141a !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
    }
    body[data-active-section="scenarioContainer"] .game-content {
        padding: 0 !important;
    }
    body[data-active-section="scenarioContainer"] #gameScreen > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .cc-sheet .cc-card {
        max-height: min(92dvh, 100%);
        padding-top: 12px;
    }
    .cc-card-img {
        width: 76px;
        height: 90px;
        margin: 0 auto 8px;
    }
    .cc-card-title { font-size: 19px; }
    .cc-card-text {
        min-height: 44px;
        font-size: 14px;
        line-height: 1.42;
        text-align: left;
    }
    .cc-flags {
        justify-content: flex-start;
        max-height: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cc-card-actions {
        padding-top: 10px;
        margin-top: 4px;
        background: linear-gradient(180deg, transparent, #08101f 30%);
    }
    .cc-btn { min-height: 46px; font-size: 14px; }
}

#chatContainer { display: none !important; }

/* ── Menú gamer deslizable (misiones activas) ── */
body.gs-in-mission #gameScreen .game-header {
    display: none !important;
}
body.gs-in-mission .game-content {
    padding-top: 0 !important;
}
.gs-nav-fab-anchor {
    position: fixed;
    top: max(6px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 3800;
    width: 48px;
    height: 48px;
    pointer-events: none;
}
.gs-nav-fab-anchor .gs-nav-fab {
    pointer-events: auto;
}
.gs-nav-fab {
    display: none;
    position: fixed;
    top: max(6px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 3800;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0, 229, 255, 0.55);
    border-radius: 14px;
    background:
        linear-gradient(155deg, rgba(14, 22, 42, 0.96) 0%, rgba(4, 8, 20, 0.98) 100%);
    box-shadow:
        0 0 0 1px rgba(123, 47, 255, 0.3),
        0 10px 28px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 229, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    place-items: center;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
body.gs-in-mission .gs-nav-fab:not([hidden]),
.gs-hud-header-slot .gs-nav-fab:not([hidden]) {
    display: grid;
}
.gs-nav-fab:active { transform: scale(0.94); }
body.gs-nav-open .gs-nav-fab {
    border-color: rgba(255, 83, 112, 0.6);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.35);
}
.gs-nav-fab-icon {
    width: 18px;
    height: 2px;
    background: #00e5ff;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 -6px 0 #00e5ff, 0 6px 0 #00e5ff;
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
body.gs-nav-open .gs-nav-fab-icon {
    transform: rotate(45deg);
    box-shadow: none;
    background: #ff5370;
}
body.gs-nav-open .gs-nav-fab-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #ff5370;
    border-radius: 2px;
    transform: rotate(90deg);
}
.gs-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3650;
    background: rgba(2, 6, 16, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
body.gs-nav-open .gs-nav-backdrop:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}
.gs-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3700;
    width: min(88vw, 320px);
    height: 100dvh;
    max-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: linear-gradient(165deg, #0c1428 0%, #060a14 55%, #0a1020 100%);
    border-left: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55), -4px 0 24px rgba(0, 229, 255, 0.08);
    transform: translateX(104%);
    transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    color: #e8f6ff;
}
body.gs-nav-open .gs-nav-drawer {
    transform: none;
}
.gs-nav-drawer-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.03) 0 1px, transparent 1px 3px);
    opacity: 0.5;
}
.gs-nav-drawer-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.gs-nav-drawer-tag {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #00e5ff;
}
.gs-nav-drawer-sub {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}
.gs-nav-drawer-close {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.gs-nav-drawer-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.gs-nav-stat {
    padding: 10px 6px;
    text-align: center;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.15);
}
.gs-nav-stat span {
    display: block;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
}
.gs-nav-stat strong {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-nav-drawer-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gs-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0, 229, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.gs-nav-item:hover,
.gs-nav-item:focus-visible {
    border-color: rgba(0, 229, 255, 0.55);
    background: rgba(0, 229, 255, 0.08);
    outline: none;
}
.gs-nav-item:active { transform: scale(0.98); }
.gs-nav-item-ico { font-size: 22px; flex-shrink: 0; }
.gs-nav-item-text { flex: 1; min-width: 0; }
.gs-nav-item-text strong {
    display: block;
    font-size: 14px;
    color: #fff;
}
.gs-nav-item-text small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}
.gs-nav-item-chevron {
    font-size: 20px;
    color: #00e5ff;
    opacity: 0.8;
}
.gs-nav-item-muted {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── HUD comando: solo menú en selector de juegos ── */
.gs-hud--command {
    display: flex;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    padding: max(6px, env(safe-area-inset-top)) clamp(12px, 3vw, 24px) 10px !important;
    min-height: 54px;
    position: relative;
    z-index: 20;
    background:
        linear-gradient(90deg, rgba(0, 229, 255, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, rgba(10, 16, 32, 0.98) 0%, rgba(6, 10, 22, 0.94) 100%) !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.28) !important;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(0, 229, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.gs-hud-stats-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.gs-hud-command-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1 1 auto;
    position: relative;
    min-height: 48px;
}

.gs-hud-stat-lbl {
    display: block;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(0, 229, 255, 0.65);
    line-height: 1.1;
}

.gs-hud-term {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(4, 10, 22, 0.88));
    box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.08);
    font-family: 'Courier New', ui-monospace, monospace;
}

.gs-hud-term-prompt {
    color: #00e5ff;
    font-weight: 800;
    flex-shrink: 0;
}

.gs-hud-term-text {
    color: #9ff8ff;
    font-size: clamp(0.66rem, 3.1vw, 0.84rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.2;
    min-height: 1.2em;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.gs-hud-term-cursor {
    width: 7px;
    height: 0.95em;
    background: #00e5ff;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    flex-shrink: 0;
    animation: gsHudTermCursor 0.85s step-end infinite;
}

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

.gs-hud-score-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 52px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 216, 77, 0.28);
    background: rgba(255, 216, 77, 0.06);
}

.gs-hud-stat-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
}

.gs-hud-stat-score {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffd84d;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.gs-hud-command-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
    flex-shrink: 0;
}
.gs-hud-header-slot {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    flex: 0 0 auto;
    margin-left: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.gs-hud-header-slot .gs-nav-fab {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 229, 255, 0.65) !important;
    background:
        linear-gradient(145deg, rgba(12, 20, 40, 0.95), rgba(4, 8, 20, 0.98)) !important;
    box-shadow:
        0 0 0 1px rgba(123, 47, 255, 0.35),
        0 0 22px rgba(0, 229, 255, 0.25),
        inset 0 0 12px rgba(0, 229, 255, 0.08) !important;
}
.gs-hud-header-slot .gs-nav-fab:hover {
    border-color: #00e5ff !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.5),
        0 0 28px rgba(0, 229, 255, 0.4) !important;
}
.gs-hud-header-slot .gs-nav-fab-icon {
    box-shadow: 0 -7px 0 #00e5ff, 0 7px 0 #00e5ff;
}

/* Menú de misiones (móvil): HUD + menú siempre visibles */
@media (max-width: 900px), (pointer: coarse) {
    body[data-active-section="gameMenu"] #gameScreen .game-header.gs-hud--command {
        display: flex !important;
        visibility: visible !important;
        overflow: visible !important;
        z-index: 4500 !important;
        min-height: 56px;
    }
    body[data-active-section="gameMenu"] .gs-hud-command-bar {
        display: flex;
        width: 100%;
        gap: 6px;
        min-height: 48px;
    }
    body[data-active-section="gameMenu"] .gs-hud-header-slot .gs-nav-fab {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* ── Drawer gamer unificado (menú + misiones) ── */
.gs-nav-drawer--gamer {
    width: min(94vw, 360px);
    padding: 0;
    background: #060a14;
    border-left: 1px solid rgba(0, 229, 255, 0.45);
    box-shadow:
        -20px 0 56px rgba(0, 0, 0, 0.7),
        -6px 0 32px rgba(0, 229, 255, 0.1),
        -2px 0 24px rgba(123, 47, 255, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gs-nav-drawer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.gs-nav-drawer-bg picture,
.gs-nav-drawer-bg-img {
    display: block;
    width: 100%;
    height: 100%;
}
.gs-nav-drawer-bg-img {
    object-fit: cover;
    object-position: center center;
    transform: none;
    filter: saturate(1.05) brightness(0.88) contrast(1.04);
}
.gs-nav-drawer-bg-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 10, 22, 0.42) 0%, rgba(8, 6, 18, 0.58) 50%, rgba(4, 8, 16, 0.78) 100%);
}
.gs-nav-drawer--gamer .gs-nav-drawer-scan {
    opacity: 0.22;
    background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.02) 0 1px, transparent 1px 4px);
}
@media (max-width: 768px) {
    .gs-nav-drawer--gamer {
        width: min(100vw, 380px);
    }
    .gs-nav-drawer-bg-img {
        object-position: center top;
        filter: saturate(1.08) brightness(0.92) contrast(1.02);
    }
    .gs-nav-drawer-bg-veil {
        background: linear-gradient(180deg, rgba(6, 10, 22, 0.35) 0%, rgba(8, 6, 18, 0.5) 55%, rgba(4, 8, 16, 0.72) 100%);
    }
    .gs-nav-drawer--gamer .gs-nav-drawer-scan {
        opacity: 0.12;
    }
}
.gs-nav-drawer-inner {
    position: relative;
    z-index: 2;
    padding: max(12px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gs-nav-drawer-head {
    align-items: center;
    margin-bottom: 14px;
}
.gs-nav-drawer-close {
    border-color: rgba(255, 83, 112, 0.45) !important;
    background: rgba(255, 83, 112, 0.12) !important;
    color: #ff8a9a !important;
    flex-shrink: 0;
}
.gs-nav-drawer-tag {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}
.gs-nav-drawer-stats--gamer {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.gs-nav-stat--hero,
.gs-nav-stat--pts,
.gs-nav-stat--lvl {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    text-align: left;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 229, 255, 0.22);
    backdrop-filter: blur(6px);
}
.gs-nav-drawer-stats--gamer .gs-nav-stat-ico {
    grid-row: 1 / -1;
    grid-column: 1;
}
.gs-nav-drawer-stats--gamer .gs-nav-stat-lbl {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
}
.gs-nav-drawer-stats--gamer .gs-nav-stat--hero strong,
.gs-nav-drawer-stats--gamer .gs-nav-stat--pts strong,
.gs-nav-drawer-stats--gamer .gs-nav-stat--lvl strong {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-nav-stat-ico {
    font-size: 1.25rem;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.35));
}
.gs-nav-stat-lbl {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    color: rgba(255, 255, 255, 0.45) !important;
}
.gs-nav-stat--hero strong,
.gs-nav-stat--pts strong,
.gs-nav-stat--lvl strong {
    margin-top: 0 !important;
    font-size: 15px !important;
    font-weight: 800;
    color: #fff;
}
.gs-nav-item--gamer {
    border-radius: 14px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, rgba(123, 47, 255, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.gs-nav-item--tournament {
    border-color: rgba(255, 213, 79, 0.35);
    background: linear-gradient(135deg, rgba(255, 213, 79, 0.1) 0%, rgba(255, 82, 82, 0.06) 100%);
}
.gs-nav-ico-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 229, 255, 0.25);
    font-size: 1.15rem !important;
}
.gs-nav-item--tournament .gs-nav-ico-ring {
    border-color: rgba(255, 213, 79, 0.4);
}

/* ── Modal salir — terminal gamer ── */
.modal-exit--gamer {
    background: rgba(2, 4, 12, 0.88) !important;
    backdrop-filter: blur(10px);
}
.modal-exit-terminal {
    width: min(100%, 400px) !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    text-align: left !important;
    border: 1px solid rgba(255, 82, 82, 0.45) !important;
    background: linear-gradient(165deg, rgba(14, 8, 18, 0.98) 0%, rgba(8, 10, 22, 0.99) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.12),
        0 24px 60px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(255, 60, 60, 0.15) !important;
}
.modal-exit-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 4px);
    opacity: 0.35;
}
.modal-exit-terminal .exit-terminal-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
}
.exit-terminal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.exit-terminal-dot--r { background: #ef5350; }
.exit-terminal-dot--y { background: #ffb74d; }
.exit-terminal-dot--g { background: #66bb6a; }
.exit-terminal-channel { flex: 1; margin-left: 4px; }
.exit-terminal-live {
    color: #ef5350;
    font-weight: 700;
    animation: edTerminalRec 1.2s ease-in-out infinite;
}
@keyframes edTerminalRec {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}
.modal-exit-terminal .exit-terminal-kicker {
    margin: 14px 16px 0;
    font-family: ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: rgba(255, 138, 128, 0.9);
}
.modal-exit-terminal .exit-terminal-title {
    margin: 8px 16px 10px;
    font-family: ui-monospace, monospace;
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    text-shadow: 0 0 22px rgba(255, 82, 82, 0.45);
}
.modal-exit-terminal .exit-terminal-msg {
    margin: 0 16px 12px;
    font-size: 0.82rem !important;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78) !important;
    text-align: left;
}
.modal-exit-terminal .exit-terminal-hint {
    margin: 0 16px 12px;
    font-size: 0.75rem !important;
    text-align: left;
}
.modal-exit-terminal .exit-terminal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 16px 18px;
    margin: 0;
}
.exit-gamer-btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.exit-gamer-btn:active { transform: scale(0.98); }
.exit-gamer-btn--danger {
    border: 1px solid rgba(255, 82, 82, 0.65);
    background: linear-gradient(180deg, #e53935 0%, #b71c1c 100%);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 60, 60, 0.35);
}
.exit-gamer-btn--stay {
    border: 1px solid rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.08);
    color: #80deea;
    box-shadow: inset 0 0 16px rgba(0, 229, 255, 0.06);
}
.exit-gamer-btn--stay:hover {
    border-color: rgba(0, 229, 255, 0.75);
    background: rgba(0, 229, 255, 0.14);
}

body.performance-mode .gs-nav-drawer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Runner móvil: clase runner-compact-ui + media (no depender solo de caché / detección táctil) */
@media (max-width: 900px), (pointer: coarse) {
    body[data-active-section="runnerContainer"] .runner-mobile-console,
    body.runner-compact-ui[data-active-section="runnerContainer"] .runner-mobile-console {
        display: block !important;
    }
    body[data-active-section="runnerContainer"] .runner-game,
    body.runner-compact-ui[data-active-section="runnerContainer"] .runner-game {
        padding-top: max(6px, env(safe-area-inset-top)) !important;
        gap: 0 !important;
    }
    body[data-active-section="runnerContainer"] .rac-side-panel,
    body[data-active-section="runnerContainer"] .rac-marquee,
    body[data-active-section="runnerContainer"] .rac-ctrl-deck,
    body[data-active-section="runnerContainer"] .rac-credit-display,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-side-panel,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-marquee,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-ctrl-deck,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-credit-display {
        display: none !important;
    }
}

/* Fondos IA v3: imagen a pantalla completa (splash + nombre) */
html:has(#splashScreen.active),
body:has(#splashScreen.active) {
    overflow: hidden;
    background: #020510 !important;
}
.splash-screen {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    background: #020510 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}
.sp-bg-photo,
.hs-bg-photo {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
picture.sp-bg-photo,
picture.hs-bg-photo,
picture.gs-bg-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: giBgKenBurns 36s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes giBgKenBurns {
    0% { transform: scale(1.03) translate(0, 0); }
    100% { transform: scale(1.1) translate(-0.8%, -0.4%); }
}

@keyframes giBgGlowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}

.sp-bg-photo::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(2, 5, 16, 0.06) 0%, rgba(2, 5, 16, 0.22) 55%, rgba(2, 5, 16, 0.48) 100%);
    pointer-events: none;
    animation: giBgGlowPulse 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    picture.sp-bg-photo,
    picture.hs-bg-photo,
    picture.gs-bg-photo {
        animation: none;
    }
    .sp-bg-photo::after,
    .hs-bg-photo::after {
        animation: none;
    }
}

body.performance-mode picture.sp-bg-photo,
body.performance-mode picture.hs-bg-photo,
body.performance-mode picture.gs-bg-photo,
body.performance-mode .sp-bg-photo::after,
body.performance-mode .hs-bg-photo::after {
    animation: none;
}
.sp-bg-photo img,
.hs-bg-photo img,
.gs-bg-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    object-fit: cover;
    object-position: center center;
}
@media (orientation: portrait) and (max-width: 1024px) {
    picture.sp-bg-photo,
    picture.hs-bg-photo,
    picture.gs-bg-photo {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
    .sp-bg-photo img,
    .hs-bg-photo img,
    .gs-bg-photo img {
        object-fit: cover;
        object-position: center 32%;
        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;
        min-height: 100svh !important;
        transform: none !important;
        left: 0 !important;
        top: 0 !important;
        image-rendering: auto;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        filter: none;
    }
    .gs-bg-photo {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100dvh !important;
        min-height: 100svh !important;
    }
    .gs-bg-photo picture {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
    .sp-bg-photo::after {
        background: linear-gradient(180deg, rgba(2, 5, 16, 0.04) 0%, rgba(2, 5, 16, 0.18) 50%, rgba(2, 5, 16, 0.45) 100%);
    }
    .hs-bg-photo::after {
        background: linear-gradient(180deg, rgba(4, 8, 22, 0.06) 0%, rgba(4, 8, 22, 0.14) 50%, rgba(4, 8, 22, 0.34) 100%);
    }
    .gs-bg-photo::after {
        background: linear-gradient(180deg, rgba(4, 8, 22, 0.08) 0%, rgba(4, 8, 22, 0.24) 50%, rgba(4, 8, 22, 0.52) 100%);
    }
    body:has(#gameMenu.active) #gameScreen {
        min-height: 100dvh !important;
        min-height: 100svh !important;
    }
    body:has(#gameMenu.active) .game-content {
        min-height: 0 !important;
    }
}
body:has(#homeScreen.active),
html:has(#homeScreen.active) {
    background: #030610 !important;
}
#homeScreen {
    animation: none;
    min-height: 100dvh !important;
}
#homeScreen.active {
    min-height: 100dvh !important;
    background: transparent !important;
}
#mainContainer:has(#homeScreen.active) {
    min-height: 100dvh;
    width: 100% !important;
}
#homeScreen .hs-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    z-index: 0;
    pointer-events: none;
    background: #030610 !important;
}
.hs-bg-photo {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    min-height: 100svh;
}
.hs-bg-photo::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(4, 8, 22, 0.12) 0%, rgba(4, 8, 22, 0.2) 45%, rgba(4, 8, 22, 0.38) 100%);
    pointer-events: none;
    animation: giBgGlowPulse 9s ease-in-out infinite;
}

/* Home: sin overlay ciber encima del inicio */
#homeScreen .hs-cyber-crime {
    display: none !important;
}

#homeScreen .hs-cc-matrix,
#splashScreen .sp-cyber-crime .hs-cc-matrix {
    position: absolute;
    inset: -10% 0 0 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 14px,
        rgba(0, 229, 255, 0.03) 14px,
        rgba(0, 229, 255, 0.03) 15px
    );
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    animation: hsCcMatrixFall 7s linear infinite;
}

#homeScreen .hs-cc-matrix::before,
#splashScreen .sp-cyber-crime .hs-cc-matrix::before {
    content: '01001101 11010000 01100101 10110100 01101111';
    position: absolute;
    left: 8%;
    top: 0;
    width: 120%;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.35em;
    line-height: 2.2;
    color: rgba(255, 82, 82, 0.22);
    word-break: break-all;
    animation: hsCcMatrixFall 11s linear infinite;
}

#homeScreen .hs-cc-matrix::after,
#splashScreen .sp-cyber-crime .hs-cc-matrix::after {
    content: 'phish scam leak fraud hack steal data breach alert';
    position: absolute;
    right: 5%;
    top: 0;
    width: 40%;
    font-family: ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    line-height: 2.4;
    color: rgba(0, 229, 255, 0.18);
    animation: hsCcMatrixFall 9s linear infinite reverse;
}

@keyframes hsCcMatrixFall {
    from { transform: translateY(-8%); }
    to { transform: translateY(18%); }
}

#homeScreen .hs-cc-scan,
#splashScreen .sp-cyber-crime .hs-cc-scan {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 82, 82, 0.85), transparent);
    box-shadow: 0 0 18px rgba(255, 82, 82, 0.55);
    animation: hsCcScan 4.5s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes hsCcScan {
    0% { top: 0; opacity: 0; }
    8% { opacity: 0.85; }
    92% { opacity: 0.85; }
    100% { top: 100%; opacity: 0; }
}

#homeScreen .hs-cc-alert,
#splashScreen .sp-cyber-crime .hs-cc-alert {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 60, 60, 0.12), transparent 70%),
        radial-gradient(ellipse 50% 30% at 20% 20%, rgba(255, 82, 82, 0.08), transparent);
    animation: hsCcAlertPulse 3.2s ease-in-out infinite;
}

@keyframes hsCcAlertPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

#homeScreen .hs-cc-glitch,
#splashScreen .sp-cyber-crime .hs-cc-glitch {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.04) 50%, transparent 52%);
    mix-blend-mode: overlay;
    animation: hsCcGlitch 6s steps(1) infinite;
    opacity: 0;
}

@keyframes hsCcGlitch {
    0%, 92%, 100% { opacity: 0; transform: translateX(0); }
    93% { opacity: 0.35; transform: translateX(-2%); }
    94% { opacity: 0; transform: translateX(1%); }
    95% { opacity: 0.2; transform: translateX(0); }
}

#homeScreen .hs-bg-grid--crime {
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(255, 82, 82, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
}

/* Fondo ciberdelito (letras + línea roja): visible también en móvil / modo rendimiento */
body.performance-mode #homeScreen .hs-cc-glitch,
body.performance-mode #splashScreen .sp-cyber-crime .hs-cc-glitch {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #homeScreen .hs-cyber-crime *,
    #splashScreen .sp-cyber-crime * {
        animation: none !important;
    }
}

@media (orientation: portrait) and (max-width: 1024px) {
    .hs-bg-photo img,
    .sp-bg-photo img {
        object-fit: cover !important;
        object-position: center 32% !important;
        min-height: 100dvh !important;
        min-height: 100svh !important;
        transform: translateZ(0);
    }
    .sp-bg-photo::after {
        background: linear-gradient(180deg, rgba(2, 5, 16, 0.06) 0%, rgba(2, 5, 16, 0.14) 50%, rgba(2, 5, 16, 0.34) 100%);
    }
    .sp-dev-dock {
        width: min(100%, 420px);
        padding-bottom: max(2px, env(safe-area-inset-bottom));
    }
}

body:has(#homeScreen.active) #mainContainer,
body:has(#homeScreen.active) {
    background: #030818 !important;
    min-height: 100dvh;
    min-height: 100svh;
}
@media (orientation: portrait) and (max-width: 1024px) {
    #homeScreen,
    #homeScreen.active {
        min-height: 100dvh !important;
        min-height: 100svh !important;
        height: auto;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .splash-screen {
        padding: max(8px, env(safe-area-inset-top)) 10px max(4px, env(safe-area-inset-bottom));
    }
    .sp-content {
        padding-bottom: 6px;
    }

    /* Home — escudo, panel y menú un poco más abajo (móvil vertical) */
    #homeScreen,
    #homeScreen.active {
        padding-top: clamp(56px, 13vh, 92px) !important;
        gap: 14px !important;
    }
    #homeScreen > .hs-hero {
        margin-top: clamp(8px, 2vh, 20px);
    }
}
#homeScreen > *:not(.hs-bg) { position: relative; z-index: 2; }

/* Splash: fondo limpio — solo foto + degradado */
body:has(#splashScreen.active) .floating-particles,
#splashScreen .sp-particles,
#splashScreen .sp-ptcl,
#splashScreen .sp-grid,
#splashScreen .sp-matrix-canvas,
#splashScreen .sp-orb,
#splashScreen .sp-scanlines {
    display: none !important;
    visibility: hidden !important;
}

/* Fondos IA v4: menú de misiones a pantalla completa + nombre sin bordes */
body:has(#homeScreen.active) .main-footer {
    display: none !important;
}
#mainContainer:has(#homeScreen.active) {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}
#gameScreen:has(#gameMenu.active) {
    background: #030610 !important;
}
body:has(#gameMenu.active) #gameScreen {
    min-height: 0 !important;
    height: calc(100dvh - 124px) !important;
    height: calc(100svh - 124px) !important;
}
#gameScreen:has(#gameMenu.active)::before,
#gameScreen:has(#gameMenu.active)::after {
    opacity: 0.2;
}
#gameScreen:has(#gameMenu.active) .gs-bg-grid,
#gameScreen:has(#gameMenu.active) .gs-bg-orb,
#gameScreen:has(#gameMenu.active) .gs-matrix-canvas {
    display: none !important;
}
.gs-bg-photo {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#gameScreen:has(#gameMenu.active) .gs-bg-photo {
    opacity: 1;
}
.gs-bg-photo::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(4, 8, 22, 0.12) 0%, rgba(4, 8, 22, 0.3) 50%, rgba(4, 8, 22, 0.55) 100%);
    pointer-events: none;
}

/* Inicio: sin emojis flotantes (cohete, candado, etc.) — eliminados del HTML */
.floating-particles,
.sp-particles,
.sp-ptcl,
#spParticles {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ══ Estafadores vs Guardianes (vista superior) ══ */
body[data-active-section="vsGuardiansContainer"] .game-content {
    padding: 0 !important;
    max-width: none !important;
}
body.vg-active .game-header,
body[data-active-section="vsGuardiansContainer"] .game-header {
    display: none !important;
}
body[data-active-section="vsGuardiansContainer"] #gameScreen,
body[data-active-section="vsGuardiansContainer"] .game-content {
    padding: 0 !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
body[data-active-section="vsGuardiansContainer"] #vsGuardiansContainer {
    position: fixed;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    height: 100svh;
    max-height: 100svh;
    min-height: 0;
    box-sizing: border-box;
    padding:
        var(--gi-safe-top, env(safe-area-inset-top, 0px))
        var(--gi-safe-right, env(safe-area-inset-right, 0px))
        var(--gi-safe-bottom, env(safe-area-inset-bottom, 0px))
        var(--gi-safe-left, env(safe-area-inset-left, 0px));
}
body[data-active-section="vsGuardiansContainer"] .vg-shell {
    position: absolute;
    inset: 0;
    min-height: 100%;
    height: 100%;
}
body[data-active-section="vsGuardiansContainer"] .gs-nav-fab {
    display: none !important;
}
body[data-active-section="vsGuardiansContainer"] .vg-hud-nav,
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-hud-nav {
    display: grid !important;
    pointer-events: auto;
}
.vg-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: #02060c;
    overflow: hidden;
}
.vg-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    cursor: none;
    z-index: 1;
    background: #0a121c;
    visibility: visible;
}
body.vg-hide-aim .vg-canvas {
    cursor: default;
}
body:not(.gi-device-desktop):not(.vg-hide-aim) .vg-canvas {
    cursor: none;
}
.vg-aim-toggle {
    display: none;
    margin: 6px auto 0;
    pointer-events: auto;
    border: 1px solid rgba(122, 246, 255, 0.45);
    background: rgba(4, 14, 24, 0.88);
    color: #9ff7ff;
    font: 800 9px "Segoe UI", sans-serif;
    letter-spacing: 0.16em;
    padding: 4px 8px;
    border-radius: 6px;
}
body.gi-device-desktop .vg-aim-toggle { display: inline-block; }
.vg-aim-toggle.is-off {
    border-color: rgba(255, 83, 112, 0.5);
    color: #ff8a9e;
}
.vg-mm-frame { position: relative; }
.vg-hud {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 5;
    pointer-events: none;
}
.vg-hud-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    background: transparent;
}
.vg-hud-nav {
    flex-shrink: 0;
    margin-left: auto;
}
.vg-hud-nav-stack {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    z-index: 14;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    pointer-events: auto;
}
.vg-hud-nav-stack .vg-hud-nav {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
    color: #7af6ff;
}
.vg-hud-nav-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.vg-hud-toggles--nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.vg-ping {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 8px 0 7px;
    border-radius: 10px;
    border: 1px solid rgba(61, 255, 138, 0.45);
    background: rgba(6, 16, 32, 0.88);
    color: #d8ffe8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    pointer-events: none;
}
.vg-ping[hidden] { display: none !important; }
.vg-ping-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3dff8a;
    box-shadow: 0 0 6px #3dff8a;
}
.vg-ping.is-mid { border-color: rgba(255, 213, 79, 0.55); color: #ffe7a3; }
.vg-ping.is-mid .vg-ping-dot { background: #ffd54f; box-shadow: 0 0 6px #ffd54f; }
.vg-ping.is-bad { border-color: rgba(255, 82, 82, 0.6); color: #ffc1c1; }
.vg-ping.is-bad .vg-ping-dot { background: #ff5252; box-shadow: 0 0 6px #ff5252; }
.vg-gear-ico {
    width: 18px;
    height: 18px;
    display: block;
    background: #7af6ff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-.97l2.11-1.63a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7 7 0 0 0-1.69-.98l-.38-2.65A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.49.42l-.38 2.65c-.6.24-1.17.55-1.69.98l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64L4.57 10.4C4.53 10.72 4.5 11.05 4.5 11.38s.03.65.07.97l-2.11 1.63a.5.5 0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.43 1.09.74 1.69.98l.38 2.65a.5.5 0 0 0 .49.42h3.8a.5.5 0 0 0 .49-.42l.38-2.65c.6-.24 1.17-.55 1.69-.98l2.49 1a.5.5 0 0 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 15.5A3.5 3.5 0 1 1 15.5 12 3.5 3.5 0 0 1 12 15.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-.97l2.11-1.63a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7 7 0 0 0-1.69-.98l-.38-2.65A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.49.42l-.38 2.65c-.6.24-1.17.55-1.69.98l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64L4.57 10.4C4.53 10.72 4.5 11.05 4.5 11.38s.03.65.07.97l-2.11 1.63a.5.5 0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.43 1.09.74 1.69.98l.38 2.65a.5.5 0 0 0 .49.42h3.8a.5.5 0 0 0 .49-.42l.38-2.65c.6-.24 1.17-.55 1.69-.98l2.49 1a.5.5 0 0 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64z'/></svg>") center / contain no-repeat;
}
body.vg-play-fs[data-active-section="vsGuardiansContainer"] #gameScreen,
body.vg-play-fs[data-active-section="vsGuardiansContainer"] #vsGuardiansContainer {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    z-index: 80;
}
body.vg-play-fs[data-active-section="vsGuardiansContainer"] .vg-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.vg-settings-modal {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 14, 0.28);
    pointer-events: auto;
}
.vg-settings-modal[hidden] { display: none !important; }
.vg-settings-card {
    position: relative;
    width: min(92vw, 420px);
    max-height: min(92svh, 640px);
    overflow: auto;
    padding: 22px 20px 16px;
    border-radius: 18px;
    background: rgba(8, 16, 32, 0.55);
    border: 1px solid rgba(122, 246, 255, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e8f7ff;
}
.vg-settings-card h3 {
    margin: 0 28px 14px 0;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vg-settings-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.vg-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 0.92rem;
    font-weight: 700;
}
.vg-settings-zoom { flex-direction: column; align-items: stretch; }
.vg-settings-zoom span { display: flex; justify-content: space-between; }
.vg-settings-zoom input { width: 100%; }
.vg-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    background: rgba(8, 16, 32, 0.92);
}
.vg-settings-apply,
.vg-settings-reset {
    flex: 1 1 140px;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.45);
    font-weight: 800;
    cursor: pointer;
}
.vg-settings-apply { background: linear-gradient(135deg, #00e5ff, #7c4dff); color: #021018; }
.vg-settings-reset { background: rgba(4, 12, 24, 0.7); color: #d6f6ff; }
.vg-hud-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(9px, 2.4vw, 12px);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fff;
    text-align: left;
}
.vg-hud-title span { color: #ff5370; }
.vg-hud-pills { display: flex; gap: 6px; }
.vg-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0,229,255,0.15);
    border: 1px solid rgba(0,229,255,0.35);
    color: #b8f7ff;
}
.vg-hud-hint {
    margin: 0 12px 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    pointer-events: none;
}
.vg-btn {
    pointer-events: auto;
    border: 1px solid rgba(0,229,255,0.4);
    background: rgba(0,20,40,0.85);
    color: #00e5ff;
    font-weight: 800;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.vg-minimap-wrap {
    position: absolute;
    top: max(58px, env(safe-area-inset-top) + 48px);
    right: max(10px, env(safe-area-inset-right));
    bottom: auto;
    z-index: 6;
    padding: 4px;
    border-radius: 10px;
    background: rgba(2,8,16,0.85);
    border: 1px solid rgba(0,229,255,0.35);
}
.vg-minimap { display: block; border-radius: 6px; }
.vg-minimap-label {
    display: block;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgba(0,229,255,0.7);
    margin-top: 2px;
}
.vg-pill-hp {
    position: relative;
    overflow: hidden;
    min-width: 72px;
}
.vg-pill-hp::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: var(--vg-hp, 100%);
    background: linear-gradient(90deg, #00e676, #00e5ff);
}
.vg-pill-nuke { border-color: rgba(255, 83, 112, 0.55); color: #ffcdd2; }

.vg-gboy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: none;
    overflow: visible;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #d7dfca 0%, #a9b39d 100%);
    border-top: 1px solid rgba(38, 47, 41, 0.3);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy,
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy {
    display: block;
}
.vg-gboy-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 4px;
}
.vg-gboy-brand {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: #38453e;
}
.vg-gboy-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffec9c, #ff6a3d 45%, #9b2617 100%);
    box-shadow: 0 0 8px rgba(255, 106, 61, 0.65);
}
.vg-gboy-plate {
    display: grid;
    grid-template-columns: 1fr 1fr 72px;
    gap: 10px;
    align-items: end;
    overflow: visible;
}
.vg-dpad {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 4px;
    pointer-events: auto;
}
.vg-dpad-btn {
    border: none;
    border-radius: 10px;
    background: linear-gradient(145deg, #3a4540, #2a332e);
    color: #e8efe4;
    font-size: 14px;
    font-weight: 800;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.12), 0 3px 0 #1e2622;
    touch-action: none;
    cursor: pointer;
}
.vg-dpad-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.35); }
.vg-dpad-up { grid-column: 2; grid-row: 1; }
.vg-dpad-left { grid-column: 1; grid-row: 2; }
.vg-dpad-mid { grid-column: 2; grid-row: 2; opacity: 0.35; pointer-events: none; }
.vg-dpad-right { grid-column: 3; grid-row: 2; }
.vg-dpad-down { grid-column: 2; grid-row: 3; }
.vg-ab {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: flex-end;
    pointer-events: auto;
}
.vg-ab { position: relative; overflow: visible; z-index: 10; }
.vg-hud-toggles--pad {
    display: none !important;
}
.vg-radar-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(0, 229, 255, 0.45);
    background: rgba(6, 16, 32, 0.88);
    color: #7af6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.vg-radar-toggle svg { width: 18px; height: 18px; display: block; }
.vg-radar-toggle.is-off {
    border-color: rgba(255, 83, 112, 0.55);
    color: #ff8a9e;
}
.vg-hud-toggles--hud {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    margin-right: 8px;
    pointer-events: auto;
    z-index: 12;
}
body.mobile-touch-device .vg-hud-toggles--hud,
body.vg-compact-ui .vg-hud-toggles--hud { display: none; }
.vg-hud-toggles--pad,
body.mobile-touch-device .vg-hud-toggles--pad,
body.vg-compact-ui .vg-hud-toggles--pad { display: none !important; }
body.mobile-touch-device .vg-gboy .vg-sel,
body.vg-compact-ui .vg-gboy .vg-sel { display: none !important; }
.vg-shell.is-radar-off .vg-minimap-wrap {
    visibility: hidden !important;
    pointer-events: none !important;
}
.vg-shell.is-hp-off .vg-hud-top > .vg-hp {
    display: none !important;
}
.vg-ab-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid rgba(30, 38, 34, 0.5);
    font-size: 18px;
    font-weight: 900;
    color: #1b2420;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    touch-action: none;
    cursor: pointer;
}
.vg-ab-btn span { font-size: 8px; letter-spacing: 0.06em; margin-top: 2px; font-weight: 800; }
.vg-btn-b .vg-b-ico { width: 20px; height: 14px; object-fit: contain; pointer-events: none; }
.vg-btn-b .vg-b-name { font-size: 7px; line-height: 1.05; letter-spacing: 0; font-weight: 800; pointer-events: none; max-width: 54px; text-align: center; white-space: normal; }
.vg-ex-item.is-picked { border-color: #ffd54f; box-shadow: 0 0 12px rgba(255, 213, 79, 0.75); }
.vg-ex-swap { flex-direction: column; max-width: 148px; white-space: normal; text-align: center; line-height: 1.15; }
.vg-ex-swap img { width: 28px; height: 16px; object-fit: contain; }
.vg-ex-swap b { white-space: normal; font-size: 10px; line-height: 1.15; letter-spacing: 0.02em; }
.vg-btn-a { background: radial-gradient(circle at 30% 25%, #ff8a9b, #c6284a 70%); color: #fff; }
.vg-btn-b { background: radial-gradient(circle at 30% 25%, #ffe082, #f9a825 70%); }
.vg-gboy-speaker {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 0 0 14px 4px;
    background: linear-gradient(145deg, #c8d0bc, #a8b2a5);
    box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2);
}
.vg-gboy-speaker span {
    width: 3px;
    height: 28px;
    border-radius: 2px;
    transform: rotate(-34deg);
    background: linear-gradient(105deg, #0a0e0c, #3a4540 50%, #080b09);
}
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell {
    padding-bottom: 148px;
}
.vg-lobby-pick-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
    margin: 0 0 10px;
}
.vg-pick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.vg-pick-card {
    position: relative;
    padding: 0;
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    overflow: hidden;
    background: #061018;
    cursor: pointer;
    text-align: left;
}
.vg-pick-card.is-selected {
    border-color: #00e5ff;
    box-shadow: 0 0 20px rgba(0,229,255,0.35);
}
.vg-pick-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.vg-pick-tag {
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    padding: 4px 8px;
}
.vg-pick-tag-g { color: #00e5ff; background: rgba(0,229,255,0.12); }
.vg-pick-tag-f { color: #ff5370; background: rgba(255,83,112,0.12); }
.vg-pick-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 8px 8px;
    color: #e8f7ff;
}

.vg-lobby {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 8, 16, 0.92);
    backdrop-filter: blur(8px);
}
.vg-lobby[hidden] { display: none !important; }
.vg-lobby #vgOnlineRow,
.vg-lobby #vgRoomPanel { display: none !important; }
.vg-lobby:not(.is-arena) #vgOnlineStatus,
.vg-lobby:not(.is-arena) .vg-fill-row { display: none !important; }
.vg-lobby-card {
    width: min(520px, 100%);
    max-height: min(92vh, 860px);
    overflow: auto;
    padding: 22px 20px;
    border-radius: 16px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: linear-gradient(160deg, rgba(8, 24, 40, 0.98), rgba(4, 12, 22, 0.98));
    color: #e8f7ff;
    text-align: center;
}
.vg-lobby-card h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
}
.vg-lobby-sub { margin: 0 0 16px; font-size: 0.85rem; opacity: 0.75; }
.vg-lobby-label { display: block; margin-bottom: 12px; font-size: 0.85rem; text-align: left; }
.vg-lobby-select, .vg-lobby-input {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}
.vg-lobby-btn {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 229, 255, 0.4);
    background: rgba(0, 30, 50, 0.9);
    color: #00e5ff;
    font-weight: 800;
    cursor: pointer;
}
.vg-lobby-primary { background: linear-gradient(90deg, #0088aa, #00c8e8); color: #001018; border-color: transparent; }
.vg-mode-hint {
    margin: 0 0 10px;
    font-size: 0.75rem;
    color: rgba(180, 230, 255, 0.75);
    line-height: 1.35;
}
.vg-hud-top > .vg-hp:not(.vg-ar) { order: 1; }
.vg-hud-top > .vg-ar { order: 2; }
.vg-hud-top > .vg-score { order: 3; }
.vg-hud-top > .vg-clock { order: 4; }
.vg-hud-top > .vg-kills { order: 5; }
.vg-shell .vg-hud-top,
.vg-shell.is-revive .vg-hud-top {
    align-items: stretch;
}
.vg-shell .vg-hp,
.vg-shell.is-revive .vg-hp {
    width: 100%;
    min-height: 36px;
}
.vg-shell .vg-hp-bar,
.vg-shell.is-revive .vg-hp-bar {
    flex: 1 1 auto;
    width: auto;
    min-width: 88px;
    height: 16px;
}
.vg-shell .vg-score,
.vg-shell.is-revive .vg-score {
    width: 100%;
    min-height: 36px;
}
.vg-clock {
    color: #ffe082;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.08em;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: rgba(4,10,24,.78);
    border-radius: 10px;
    padding: 3px 10px;
    border: 1px solid rgba(255,213,79,.35);
    text-shadow: 0 0 10px rgba(255, 213, 79, 0.45);
}
.vg-clock[hidden] { display: none !important; }
.vg-bots-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    font-size: 0.82rem;
    color: #c8f6ff;
    cursor: pointer;
}
.vg-fill-hint, .vg-online-status {
    margin: 4px 0 8px;
    font-size: 0.75rem;
    color: rgba(180, 230, 255, 0.75);
    line-height: 1.35;
}
.vg-room-panel {
    margin: 8px 0 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(122, 246, 255, 0.28);
    background: rgba(0, 20, 36, 0.55);
}
.vg-room-code { letter-spacing: 0.14em; font-weight: 800; color: #7af6ff; }
.vg-lobby-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.vg-lobby-row .vg-lobby-btn, .vg-lobby-row .vg-lobby-input { flex: 1; min-width: 90px; margin: 0; }
.vg-lock-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #d7f6ff;
    white-space: nowrap;
}
.vg-public-rooms { margin: 8px 0 4px; text-align: left; }
.vg-public-head {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(122, 246, 255, 0.8);
    margin-bottom: 6px;
}
.vg-room-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow: auto; }
.vg-room-empty { margin: 0; font-size: 0.75rem; color: rgba(180, 230, 255, 0.7); }
.vg-room-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(122, 246, 255, 0.28);
    background: rgba(0, 24, 40, 0.72);
    color: #e9fbff;
    cursor: pointer;
}
.vg-room-card b { font-size: 0.92rem; }
.vg-room-card span { grid-column: 1; font-size: 0.72rem; color: rgba(180, 230, 255, 0.75); }
.vg-room-card em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7af6ff; }
.vg-room-card.is-mine { border-color: rgba(255, 214, 90, 0.7); }
.vg-room-card.is-mine em { color: #ffd65a; }
.vg-lobby-mp { font-size: 0.75rem; opacity: 0.65; margin: 12px 0; }
.vg-lobby-link {
    margin-top: 12px;
    background: none;
    border: none;
    color: rgba(0, 229, 255, 0.8);
    cursor: pointer;
    font-size: 0.85rem;
}
/* ===== VS v2: HUD, analog stick, weapon bar ===== */
.vg-shell { padding-bottom: 0 !important; }
.vg-hud-top { position: absolute; top: 8px; left: 8px; right: auto; width: max-content; max-width: min(72vw, 460px); display: flex; flex-direction: column; gap: 3px; align-items: stretch; flex-wrap: nowrap; z-index: 5; pointer-events: none; background: rgba(255,255,255,0.06); padding: 6px 8px; border-radius: 12px; }
.vg-hud-top .vg-hud-nav { pointer-events: auto; }
.vg-hp { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; box-sizing: border-box; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.vg-hp-ico { color: #ff4d6d; font-size: 16px; flex: 0 0 auto; }
.vg-hp-bar { flex: 1 1 auto; width: auto; min-width: 88px; height: 16px; background: rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; }
.vg-hp-bar > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,#00e676,#00e5ff); transition: width .2s; }
.vg-hp-bar > i.is-low { background: linear-gradient(90deg,#ff1744,#ff9100); animation: vgPulse .6s infinite alternate; }
.vg-hp b { color: #fff; font-size: 13px; min-width: 28px; text-align: right; flex: 0 0 auto; }
.vg-score { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 36px; box-sizing: border-box; background: rgba(4,10,24,.78); border-radius: 12px; padding: 4px 10px; border: 1px solid rgba(255,255,255,.15); font-weight: 900; white-space: nowrap; flex: 0 0 auto; }
.vg-sc-g, .vg-sc-f, .vg-sc-vs { white-space: nowrap; }
.vg-sc-g b { color: #00e5ff; } .vg-sc-f b { color: #ff3d71; } .vg-sc-vs { color: #ffd54f; font-size: 11px; }
.vg-kills { background: rgba(4,10,24,.78); border-radius: 12px; padding: 5px 10px; color: #ffd54f; font-weight: 800; font-size: 12px; border: 1px solid rgba(255,213,79,.35); white-space: nowrap; flex: 0 0 auto; width: 100%; box-sizing: border-box; text-align: center; }
.vg-shell.is-revive .vg-kills { text-align: center; padding: 3px 10px; }
@keyframes vgPulse { from { opacity: 1; } to { opacity: .45; } }
.vg-right-col {
    position: absolute;
    top: var(--vg-radar-top, calc(max(6px, env(safe-area-inset-top, 0px)) + var(--vg-nav-h, 40px) + 2px));
    right: max(0px, env(safe-area-inset-right, 0px));
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    gap: 6px;
    max-width: min(54vw, 260px);
}
.vg-feed {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
    width: max-content;
    max-width: 100%;
    margin: 0;
}
.vg-feed:empty { display: none; margin: 0; }
.vg-feed-row { background: rgba(0,0,0,.62); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 8px; border-right: 3px solid #ffd54f; text-align: right; transition: opacity .4s, transform .4s; }
.vg-feed-row.out { opacity: 0; transform: translateX(20px); }
.vg-minimap-wrap { position: absolute; top: 8px; right: 8px; z-index: 6; text-align: center; pointer-events: none; overflow: visible; }
.vg-mm-frame { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(0,229,255,.7); box-shadow: 0 0 18px rgba(0,229,255,.45), inset 0 0 22px rgba(0,0,0,.8); background: #020812; }
.vg-minimap { width: 100% !important; height: 100% !important; display: block; }
.vg-mm-n { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); color: #ffd54f; font-size: 10px; font-weight: 900; }
.vg-minimap-label { margin-top: 3px; font-size: 9px; letter-spacing: 2px; color: rgba(0,229,255,.85); font-weight: 800; }
.vg-weapons { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--vg-pad, 0px) + 8px); z-index: 6; display: flex; flex-direction: column; gap: 6px; align-items: center; overflow: visible; }
.vg-weapon-row { display: flex; gap: 6px; align-items: flex-end; }
.vg-ex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 4px; margin: 0; }
.vg-act-rail {
    position: absolute;
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(var(--vg-pad, 0px) + 92px);
    z-index: 12;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;
    pointer-events: auto;
}
.vg-act-inline {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    pointer-events: auto;
}
.vg-act-rail[hidden] { display: none !important; }
@media (orientation: portrait) {
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell .vg-act-rail,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-act-rail {
        bottom: calc(var(--vg-pad, 0px) + 148px);
    }
}
.vg-act-rail .vg-ex-act {
    min-height: 40px;
    padding: 8px 12px;
    border-color: rgba(0, 229, 255, 0.7);
    background: rgba(4, 18, 36, 0.92);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.28);
}
.vg-ex-item { display: flex; flex-direction: row; align-items: center; gap: 3px; background: rgba(4,10,24,.82); border-radius: 8px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 11px; font-weight: 800; }
.vg-ex-item img, .vg-ex-item span { width: 18px; height: 18px; font-size: 14px; line-height: 18px; text-align: center; object-fit: contain; }
body.mobile-touch-device .vg-shell .vg-weapons,
body.vg-compact-ui .vg-shell .vg-weapons {
    bottom: calc(var(--vg-pad, 0px) + 12px);
    z-index: 8;
}
.vg-slot { position: relative; width: 56px; height: 56px; border-radius: 12px; background: rgba(4,10,24,.82); border: 2px solid rgba(255,255,255,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s, border-color .15s; }
.vg-slot img { width: 40px; height: 26px; object-fit: contain; }
.vg-slot.is-active { border-color: #ffd54f; box-shadow: 0 0 14px rgba(255,213,79,.6); transform: translateY(-5px); }
.vg-slot.is-empty { opacity: .35; }
.vg-slot-key { position: absolute; top: 1px; left: 4px; font-size: 9px; color: #ffd54f; font-weight: 900; }
.vg-slot-name { font-size: 8px; color: #fff; text-transform: uppercase; font-weight: 800; }
.vg-ex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 4px; margin: 0; }
.vg-ex-item { display: flex; align-items: center; gap: 3px; background: rgba(4,10,24,.82); border-radius: 8px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.2); }
.vg-ex-item img { width: 20px; height: 20px; }
.vg-ex-item b { color: #fff; font-size: 12px; }
.vg-ex-nuke { border-color: rgba(255,213,0,.7); }
.vg-ex-item.is-zero { opacity: .35; }
.vg-keys {
    display: none;
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    pointer-events: auto;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    max-width: min(96vw, 980px);
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(6, 14, 28, 0.82), rgba(3, 8, 16, 0.92));
    border: 1px solid rgba(122, 246, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body:not(.mobile-touch-device):not(.vg-compact-ui) .vg-keys { display: flex; }
body.vg-hide-keys .vg-keys,
body.gi-device-desktop.vg-hide-keys .vg-keys { display: none !important; }
.vg-keys-hide {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(122, 246, 255, 0.45);
    border-radius: 7px;
    background: rgba(4, 14, 28, 0.92);
    color: #9ff7ff;
    font: 800 12px "Segoe UI", sans-serif;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}
.vg-keys-hide:hover { filter: brightness(1.18); }
.vg-keys-show {
    display: none;
    position: absolute;
    left: 0;
    top: 42%;
    z-index: 14;
    margin: 0;
    padding: 16px 6px;
    border: 1px solid rgba(122, 246, 255, 0.45);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, rgba(6, 14, 28, 0.94), rgba(3, 8, 16, 0.96));
    color: #7af6ff;
    font: 800 11px "Segoe UI", sans-serif;
    letter-spacing: 0.16em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.4);
}
.vg-keys-show:hover { filter: brightness(1.16); }
body.vg-hide-keys:not(.mobile-touch-device):not(.vg-compact-ui) .vg-keys-show {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1100px) and (pointer: fine) {
    .vg-keys {
        left: 16px;
        right: auto;
        bottom: 18px;
        transform: none;
        max-width: min(560px, calc(100vw - 240px));
        gap: 6px;
        padding: 10px 12px;
    }
    .vg-key { height: 48px; min-width: 42px; }
    .vg-key b { font-size: 13px; }
    .vg-key small { font-size: 8px; }
    .vg-key-cluster { grid-template-columns: repeat(3, 42px); grid-template-rows: 36px 36px; }
    .vg-key-cluster .vg-key { height: 36px; }
}
.vg-key-cluster {
    display: grid;
    grid-template-columns: repeat(3, 36px);
    grid-template-rows: 32px 32px;
    gap: 4px;
}
.vg-key {
    min-width: 36px;
    height: 44px;
    padding: 4px 7px 5px;
    border: 1px solid rgba(122, 246, 255, 0.35);
    border-bottom-width: 3px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1a2b44, #0c1624);
    color: #d7f7ff;
    font: 800 11px "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
.vg-key b { font-size: 12px; color: #7af6ff; }
.vg-key small {
    margin-top: 3px;
    font-size: 7px;
    letter-spacing: 0.08em;
    color: rgba(220, 245, 255, 0.7);
}
.vg-key--wide { min-width: 72px; }
.vg-key--hot { border-color: rgba(255, 83, 112, 0.55); }
.vg-key--hot b { color: #ff8a9e; }
.vg-key--ghost {
    visibility: hidden;
    pointer-events: none;
    min-width: 0;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.vg-key-cluster .vg-key { height: 32px; min-width: 0; padding: 0; }
.vg-key:hover { filter: brightness(1.12); }
.vg-key.is-down,
.vg-key:active {
    transform: translateY(2px);
    border-bottom-width: 1px;
    background: linear-gradient(180deg, #12384a, #0a1c28);
}
.vg-toast { position: absolute; top: 34%; left: max(8px, env(safe-area-inset-left, 0px)); right: auto; transform: translateX(-10px); opacity: 0; z-index: 8; display: flex; align-items: center; gap: 10px; background: rgba(4,10,24,.88); border: 1px solid #00e5ff; border-left: 3px solid #00e5ff; border-radius: 8px; padding: 6px 10px; color: #fff; max-width: min(44vw, 240px); transition: opacity .25s, transform .25s; pointer-events: none; }
.vg-toast.show { opacity: 1; transform: translateX(0); }
.vg-toast.is-nuke { border-color: #ffd600; box-shadow: 0 0 30px rgba(255,214,0,.6); }
.vg-toast img { width: 56px; height: 36px; object-fit: contain; }
.vg-toast small { display: block; font-size: 10px; color: #ffd54f; letter-spacing: 1px; }
.vg-toast b { font-size: 16px; }
.vg-slot-swap {
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    background: #ffd54f;
    color: #1a1408;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 6px;
    line-height: 1.2;
    z-index: 2;
    pointer-events: none;
}
.vg-slot.is-swap { border-color: #ffd54f; }
body.mobile-touch-device .vg-shell .vg-toast,
body.vg-compact-ui .vg-shell .vg-toast {
    top: 32%;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: auto;
    transform: translateX(-8px);
    padding: 4px 8px;
    gap: 6px;
    border-width: 1px;
    border-left-width: 3px;
    border-radius: 8px;
    max-width: min(42vw, 200px);
    z-index: 9;
}
body.mobile-touch-device .vg-shell .vg-toast.show,
body.vg-compact-ui .vg-shell .vg-toast.show {
    transform: translateX(0);
}
body.mobile-touch-device .vg-shell .vg-toast img,
body.vg-compact-ui .vg-shell .vg-toast img { width: 26px; height: 18px; }
body.mobile-touch-device .vg-shell .vg-toast small,
body.vg-compact-ui .vg-shell .vg-toast small { font-size: 8px; letter-spacing: 0.3px; }
body.mobile-touch-device .vg-shell .vg-toast b,
body.vg-compact-ui .vg-shell .vg-toast b { font-size: 11px; }
.vg-gboy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; overflow: visible; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg,#2a2f45,#151a2c); border-top: 3px solid #3d4466; border-radius: 22px 22px 0 0; }
.vg-gboy-top { display: flex; align-items: center; justify-content: space-between; color: #9fa8da; font-size: 10px; font-weight: 900; letter-spacing: 2px; margin-bottom: 4px; }
.vg-gboy-plate { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.vg-stick-zone { position: relative; width: 148px; height: 148px; display: grid; place-items: center; touch-action: none; -webkit-tap-highlight-color: transparent; justify-self: start; }
.vg-stick { position: relative; width: 118px; height: 118px; border-radius: 50%; background: radial-gradient(circle,#1d2238 55%,#0d1020); border: 3px solid #3d4466; box-shadow: inset 0 4px 12px rgba(0,0,0,.7); touch-action: none; pointer-events: none; }
.vg-stick-zone .vg-stick { pointer-events: auto; }
.vg-stick-ring { position: absolute; inset: 14px; border-radius: 50%; border: 2px dashed rgba(0,229,255,.3); }
.vg-stick.is-active .vg-stick-ring { border-color: rgba(0,229,255,.8); }
.vg-stick-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 35% 30%,#6b7399,#2b3150); border: 2px solid #8890b8; box-shadow: 0 5px 10px rgba(0,0,0,.6); pointer-events: none; }
.vg-sel { display: flex; flex-direction: column; gap: 8px; }
.vg-pill-btn { min-width: 64px; padding: 6px 10px; border-radius: 14px; border: 1px solid #555d85; background: #2b3150; color: #cfd8ff; font-size: 10px; font-weight: 900; letter-spacing: 1px; touch-action: none; }
.vg-pill-nukebtn { background: #4a3d00; color: #ffd600; border-color: #ffd600; }
.vg-ab { display: flex; gap: 12px; align-items: center; justify-self: end; }
.vg-ab-btn, .vg-btn-a { width: 62px; height: 62px; border-radius: 50%; border: 3px solid rgba(0,0,0,.4); color: #fff; font-size: 10px; font-weight: 900; touch-action: none; box-shadow: 0 5px 0 rgba(0,0,0,.45); }
.vg-btn-b { background: radial-gradient(circle at 35% 30%,#ffb74d,#e65100); margin-top: 26px; }
.vg-btn-a { width: 74px; height: 74px; background: radial-gradient(circle at 35% 30%,#ff5c8a,#c2002f); }
.is-down { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.45) !important; filter: brightness(1.2); }
body:not(.mobile-touch-device):not(.vg-compact-ui) .vg-gboy { display: none; }

/* ===== VS v3: escudo, nuke lanzable, torneo por juegos, racha chat ===== */
.vg-ar .vg-hp-bar > i { background: linear-gradient(90deg,#2979ff,#80d8ff); }
.vg-ar-ico { color: #40c4ff; }
.vg-ar.is-empty { opacity: .45; }
button.vg-ex-item { cursor: pointer; font: inherit; color: inherit; touch-action: none; }
.vg-ex-nuke.is-ready { border-color: #ffd600; background: rgba(74,61,0,.92); animation: vgNukeReady .8s infinite alternate; }
.vg-ex-nuke.is-ready b { color: #ffd600; font-size: 11px; letter-spacing: .5px; }
@keyframes vgNukeReady { from { box-shadow: 0 0 4px rgba(255,214,0,.4); transform: scale(1); } to { box-shadow: 0 0 18px rgba(255,214,0,.95); transform: scale(1.08); } }
.vg-pill-nukebtn.is-ready { background: #ffd600; color: #2b1d00; animation: vgNukeReady .8s infinite alternate; }
.mp-game-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-gp-chip { padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(0,229,255,.35); background: rgba(4,14,28,.7); color: #9fb8cc; font-size: 12px; font-weight: 800; cursor: pointer; transition: all .15s; }
.mp-gp-chip.is-on { background: linear-gradient(90deg,#00b8d4,#7c4dff); color: #fff; border-color: transparent; box-shadow: 0 0 12px rgba(0,229,255,.35); }

/* Tarjetas de juegos — modo torneo */
.mp-game-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}
@media (min-width: 640px) {
    .mp-game-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
.mp-game-card {
    position: relative;
    margin: 0; padding: 0;
    border: 2px solid rgba(0, 229, 255, 0.22);
    border-radius: 14px;
    background: rgba(6, 12, 28, 0.75);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    min-height: 118px;
}
.mp-game-card:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 229, 255, 0.15);
}
.mp-game-card.is-on {
    border-color: #00e5ff;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.35), 0 0 22px rgba(124, 77, 255, 0.35), 0 10px 28px rgba(0, 0, 0, 0.5);
}
.mp-game-card-art {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover;
    object-position: center;
}
.mp-game-card-cap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px 10px;
    background: linear-gradient(180deg, rgba(4, 8, 22, 0.15) 0%, rgba(4, 8, 22, 0.92) 100%);
}
.mp-game-card-all-ico {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 170, 60, 0.45);
    box-shadow: 0 0 12px rgba(255, 140, 40, 0.25);
}
.mp-game-card--all .mp-game-card-name { font-size: 11px; }
.mp-game-card-cap .mp-game-card-name { width: 100%; }
.mp-game-card-name {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: #e8f4ff;
    text-transform: uppercase;
}
.mp-game-card-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00e5ff, #7c4dff);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}
.mp-game-card--all {
    grid-column: 1 / -1;
    min-height: auto;
    border-color: rgba(255, 170, 60, 0.45);
    background: linear-gradient(135deg, rgba(40, 20, 8, 0.85) 0%, rgba(12, 8, 32, 0.9) 100%);
}
.mp-game-card--all.is-on {
    border-color: #ffaa3c;
    box-shadow: 0 0 0 2px rgba(255, 170, 60, 0.35), 0 0 20px rgba(255, 120, 40, 0.25);
}
.mp-game-card-all-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    width: 100%;
}
.mp-game-card--all .mp-game-card-name { font-size: 12px; }
.mp-gp-all { border-color: rgba(255,213,79,.6); }
.mp-gp-all.is-on { background: linear-gradient(90deg,#ffb300,#ff6d00); }
.cc-pill-streak { background: linear-gradient(90deg,#ff6d00,#ff1744) !important; color: #fff !important; animation: vgPulse .7s infinite alternate; }
.cc-end-stats { grid-template-columns: repeat(4, 1fr) !important; }
/* ===== GAMER FX: Quiz · Memory · Peligro ===== */
.gx-arena { position: relative; isolation: isolate; }
.gx-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.gx-layer i { position: absolute; inset: 0; }
.gx-arena::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--gx-art) center/cover no-repeat; opacity: .32; filter: saturate(1.3) blur(1px); transform: scale(1.06); animation: gxDrift 18s ease-in-out infinite alternate; }
.gx-arena::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(rgba(0,229,255,.09) 1px, transparent 1px) 0 0/32px 32px, linear-gradient(90deg, rgba(255,64,200,.08) 1px, transparent 1px) 0 0/32px 32px; mask-image: linear-gradient(to top, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%); animation: gxGrid 3s linear infinite; }
.gx-scan { background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.gx-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(0,229,255,.12), transparent); animation: gxSweep 4.5s linear infinite; }
@keyframes gxDrift { from { transform: scale(1.06) translate(-1%, -1%); } to { transform: scale(1.12) translate(1%, 1%); } }
@keyframes gxGrid { to { background-position: 0 32px, 32px 0; } }
@keyframes gxSweep { from { top: -120px; } to { top: 100%; } }
.gx-arena .cq-btn { border: 1px solid rgba(0,229,255,.45) !important; box-shadow: 0 0 0 1px rgba(0,229,255,.12), 0 6px 18px rgba(0,0,0,.45), inset 0 0 18px rgba(0,229,255,.08); transition: transform .12s, box-shadow .2s; }
.gx-arena .cq-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 16px rgba(0,229,255,.55), inset 0 0 22px rgba(0,229,255,.15); }
.gx-arena .cq-btn.cq-correct { box-shadow: 0 0 24px rgba(0,230,118,.85) !important; animation: gxWin .5s ease; }
.gx-arena .cq-btn.cq-wrong { box-shadow: 0 0 24px rgba(255,23,68,.85) !important; }
.gx-arena .cq-question-card { box-shadow: 0 0 0 1px rgba(255,64,200,.35), 0 0 30px rgba(124,77,255,.35); }
.gx-arena .memory-card-inner { box-shadow: 0 0 0 1px rgba(124,77,255,.5), 0 6px 16px rgba(0,0,0,.5); border-radius: 12px; }
.gx-arena .memory-card:hover .memory-card-inner { box-shadow: 0 0 16px rgba(0,229,255,.7); }
.gx-arena .memory-card.matched .memory-card-inner { box-shadow: 0 0 22px rgba(0,230,118,.9); animation: gxWin .5s ease; }
.gx-arena .danger-node.revealed { box-shadow: 0 0 22px rgba(255,214,0,.9) !important; animation: gxWin .5s ease; }
@keyframes gxWin { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.gx-shake { animation: gxShake .38s ease; }
@keyframes gxShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.gx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 99998; }
.gx-pop { position: fixed; left: 50%; top: 38%; z-index: 99999; pointer-events: none; font: 900 clamp(26px, 7vw, 46px)/1 "Segoe UI", sans-serif; letter-spacing: 2px; color: #fff; white-space: nowrap; transform: translate(-50%, -50%); animation: gxPop 1.1s cubic-bezier(.2,1.4,.4,1) forwards; }
.gx-pop-ok { text-shadow: 0 0 14px #00e676, 0 0 34px #00e676, 0 3px 0 #00391a; }
.gx-pop-combo { color: #fff59d; text-shadow: 0 0 14px #ffab00, 0 0 40px #ff6d00, 0 3px 0 #4a2500; }
.gx-pop-bad { color: #ffcdd2; text-shadow: 0 0 14px #ff1744, 0 0 34px #ff1744, 0 3px 0 #3d0010; }
@keyframes gxPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 70% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -85%) scale(.95); } }
.gx-flash { position: fixed; inset: 0; z-index: 99997; pointer-events: none; animation: gxFlash .45s ease-out forwards; }
.gx-flash-ok { background: radial-gradient(circle, transparent 40%, rgba(0,230,118,.35)); }
.gx-flash-bad { background: radial-gradient(circle, transparent 35%, rgba(255,23,68,.45)); }
@keyframes gxFlash { from { opacity: 1; } to { opacity: 0; } }
/* ── Menú en HUD de misión + pantalla casi completa (quiz / memoria / peligro) ── */
.gs-mission-nav-slot { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gs-mission-nav-persist {
    position: fixed;
    top: max(5px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 48px;
    height: 48px;
    z-index: 3850;
    pointer-events: none;
}
.gs-mission-nav-persist .gs-nav-fab {
    pointer-events: auto;
    position: relative !important;
    top: auto !important;
    right: auto !important;
}
.gs-mission-nav-slot .gs-nav-fab,
body.gs-in-mission .gs-mission-nav-slot .gs-nav-fab:not([hidden]) {
    display: grid !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 40px;
    height: 40px;
    margin: 0;
}
.cq-hud { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); }
.mm-hud { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); }
.spy-right-hud { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; }
.spot-danger-game { position: relative; }
body[data-active-section="dangerContainer"] .game-overlay {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit;
    z-index: 50 !important;
}
.runner-hud-nav,
.vg-hud-nav.runner-hud-nav {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}
@media (max-width: 900px) {
    body.gs-in-mission.heavy-gameplay-mode #gameScreen {
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    body.gs-in-mission.heavy-gameplay-mode #gameScreen.active {
        overflow: hidden !important;
    }
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="quizContainer"] #gameScreen .game-content,
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="memoryContainer"] #gameScreen .game-content,
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="dangerContainer"] #gameScreen .game-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="quizContainer"] #quizContainer.active,
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="memoryContainer"] #memoryContainer.active,
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="dangerContainer"] #dangerContainer.active {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="quizContainer"] .cq-wrap,
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="memoryContainer"] .mm-wrap,
    body.gs-in-mission.heavy-gameplay-mode[data-active-section="dangerContainer"] .spot-danger-game {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
/* VS: menú y ajustes arriba a la derecha */
#vsGuardiansContainer .vg-hud-nav-stack { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 14; }
#vsGuardiansContainer .vg-hud-nav { position: relative; top: auto; right: auto; margin: 0; z-index: 9; }
#vsGuardiansContainer .vg-minimap-wrap { top: 8px; right: 8px; z-index: 7; }
#vsGuardians .vg-door-btn[hidden] { display: none !important; }
.vg-size-grid { display: flex; gap: 8px; justify-content: center; margin: 6px 0 12px; flex-wrap: wrap; }
.vg-size-btn { min-width: 72px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(0,229,255,.4); background: rgba(4,12,28,.85); color: #cfefff; font-weight: 900; cursor: pointer; font-size: 12px; }
.vg-size-btn.active, .vg-size-btn.is-selected { background: linear-gradient(135deg,#00e5ff,#7c4dff); color: #fff; border-color: #fff; box-shadow: 0 0 14px rgba(0,229,255,.6); }
@media (max-width: 640px) { #vsGuardians .vg-minimap-wrap { right: 56px; } #vsGuardians .vg-mm-frame { width: 110px; height: 110px; } }

/* VS fix: menú arriba derecha, radar a su izquierda, puerta flotante, logo y fondo */
.vg-shell .vg-hud-nav-stack { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 8px; margin: 0; z-index: 14; }
.vg-shell .vg-hud-nav { position: relative; top: auto; right: auto; margin: 0; z-index: 9; }
.vg-shell .vg-minimap-wrap { top: max(8px, env(safe-area-inset-top)); right: 8px; }
.vg-shell .vg-hud-top { right: auto; }
.vg-size-btn.is-selected { background: linear-gradient(135deg,#00e5ff,#7c4dff); color: #fff; border-color: #fff; box-shadow: 0 0 14px rgba(0,229,255,.6); }
.vg-pill-door { position: absolute; right: 14px; bottom: calc(100% + 10px); min-width: 120px; padding: 12px 16px; font-size: 13px; background: linear-gradient(135deg,#00e5ff,#7c4dff); color: #001018; border: 2px solid #fff; box-shadow: 0 0 18px rgba(0,229,255,.7); z-index: 9; }
.vg-pill-door[hidden] { display: none !important; }
.vg-gboy-logo { height: 26px; width: auto; filter: drop-shadow(0 0 6px rgba(0,229,255,.8)); opacity: .95; pointer-events: none; }
.vg-lobby { background: linear-gradient(rgba(2,8,16,.35), rgba(2,8,16,.6)), url("../img/vs/vg-lobby-bg.svg") center / cover no-repeat; }
.vg-lobby-card { box-shadow: 0 0 40px rgba(0,229,255,.25), 0 0 60px rgba(255,23,68,.15); }

/* Puerta dentro de la consola */
.vg-gboy .vg-sel { gap: 6px; }
.vg-gboy .vg-pill-door { position: static; min-width: 64px; padding: 8px 10px; font-size: 11px; border: 2px solid #fff; animation: vgNukeReady .8s infinite alternate; }
.vg-custom-vs { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 12px; color:#cfefff; font-weight:800; font-size:12px; }
.vg-custom-vs[hidden] { display: none !important; }
.vg-custom-vs label { display:flex; flex-direction:column; gap:4px; }
.vg-custom-vs input { width:78px; padding:8px; text-align:center; border-radius:10px; border:1px solid rgba(0,229,255,.5); background:rgba(4,12,28,.9); color:#fff; font-size:16px; font-weight:900; }
.vg-custom-vs span { color:#ffd54f; margin-top:16px; }

/* VS: radar, pantalla final, tarjeta */
.mission-card[data-game="versus"] { --mc-accent: #ff3d71; --mc-glow: rgba(255,61,113,.45); }
.mission-card[data-game="versus"] > .mc-art { --mc-pan-dur: 16s; --mc-art-focus: 50% center; }
.mission-card[data-game="kart"] { --mc-accent: #7c4dff; --mc-glow: rgba(124,77,255,.45); }
.mission-card[data-game="kart"] > .mc-art { --mc-pan-dur: 16s; --mc-art-focus: 48% center; }
.mission-card[data-game="rpg"] { --mc-accent: #e6c36a; --mc-glow: rgba(230,195,106,.4); }
.mission-card[data-game="rpg"] > .mc-art { --mc-pan-dur: 22s; --mc-art-focus: 42% center; }
.mission-card.is-soon { cursor: default; }
.mission-card.is-soon:active { transform: none !important; }
.mission-card.is-soon .mc-play {
    letter-spacing: 0.08em !important;
    color: #f3e2b0 !important;
    border-color: rgba(230, 195, 106, 0.55) !important;
}
.mc-soon {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(8, 10, 16, 0.82);
    border: 1px solid rgba(230, 195, 106, 0.85);
    color: #f3e2b0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
}
body[data-active-section="kartGuardiansContainer"] #gameScreen,
body[data-active-section="kartGuardiansContainer"] .game-content {
    padding: 0 !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
body[data-active-section="kartGuardiansContainer"] #kartGuardiansContainer {
    position: fixed;
    inset: 0;
    z-index: 3;
    min-height: 100dvh;
    height: 100dvh;
    width: 100%;
}
body[data-active-section="kartGuardiansContainer"] .gs-nav-fab {
    display: none !important;
}
.vg-gboy .vg-sel { gap: 4px; }
.vg-gboy .vg-pill-btn { padding: 5px 8px; }
.vg-pill-scanbtn { background: #06364a; color: #18ffff; border-color: #18ffff; }
.vg-pill-scanbtn.is-ready { background: #18ffff; color: #002a36; animation: vgNukeReady .8s infinite alternate; }
.vg-ex-scan.is-ready { border-color: #18ffff; background: rgba(0,54,74,.92); }
.vg-ex-scan b { color: #18ffff; }
.vg-pill-xraybtn { background: #063322; color: #b9f6ca; border-color: #69f0ae; }
.vg-pill-xraybtn.is-ready { background: #145c40; color: #e8ffef; }
.vg-pill-xraybtn.is-on { background: #69f0ae; color: #003318; animation: vgNukeReady .8s infinite alternate; }
.vg-ex-xray.is-ready { border-color: #69f0ae; background: rgba(6,51,34,.92); }
.vg-ex-xray.is-on { border-color: #b9f6ca; background: rgba(20,92,64,.95); }
.vg-ex-xray b { color: #69f0ae; }
.vg-pill-dronebtn { background: #2a1650; color: #e1bee7; border-color: #b388ff; }
.vg-pill-dronebtn.is-ready { background: #b388ff; color: #1a0830; animation: vgNukeReady .8s infinite alternate; }
.vg-ex-drone.is-ready { border-color: #b388ff; background: rgba(48,16,80,.92); }
.vg-ex-drone b { color: #e1bee7; }
.vg-end { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; overflow: hidden; isolation: isolate; animation: vgEndIn .45s ease-out; }
.vg-end-art { position: absolute; inset: -4%; z-index: 0; background: #05070e center / cover no-repeat; animation: vgEndKen 14s ease-out forwards; }
.vg-end.is-lose .vg-end-art { background-image: url("../img/vs/vg-end-defeat.jpg"); }
.vg-end.is-win .vg-end-art { background-image: url("../img/vs/vg-end-victory.jpg"); }
.vg-end.is-fraud.is-win .vg-end-art { background-image: url("../img/vs/vg-end-fraud-victory.jpg"); }
.vg-end.is-fraud.is-lose .vg-end-art { background-image: url("../img/vs/vg-end-fraud-defeat.jpg"); }
.vg-end-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2,4,10,.62) 0%, rgba(2,4,10,.18) 28%, rgba(2,4,10,.28) 58%, rgba(2,4,10,.78) 100%),
        repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.vg-end.is-lose .vg-end-vignette { box-shadow: inset 0 0 140px rgba(255, 32, 72, .32); }
.vg-end.is-win .vg-end-vignette { box-shadow: inset 0 0 140px rgba(0, 229, 255, .26); }
.vg-end-card {
    position: relative; z-index: 2; width: min(360px, 100%); text-align: center; padding: 22px 18px 16px; color: #fff;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
    background: linear-gradient(165deg, rgba(10,12,24,.78), rgba(4,6,14,.9));
    border: 1px solid var(--vg-end-c, #ff3d71);
    box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 48px var(--vg-end-g, rgba(255,61,113,.5)), inset 0 0 42px rgba(0,0,0,.42);
    backdrop-filter: blur(12px) saturate(1.2);
}
.vg-end.is-win .vg-end-card {
    --vg-end-c: #00e5ff;
    --vg-end-g: rgba(0,229,255,.55);
    border-color: #7af6ff;
    box-shadow: 0 0 0 1px rgba(255,224,130,.35), 0 0 48px rgba(0,229,255,.5), 0 0 72px rgba(255,214,80,.22), inset 0 0 42px rgba(0,0,0,.42);
}
.vg-end.is-win .vg-end-tag {
    color: #061018;
    border-color: transparent;
    background: linear-gradient(90deg, #ffe082, #00e5ff);
}
.vg-end.is-win .vg-end-card h2 {
    background: linear-gradient(90deg, #fff 10%, #ffe082 48%, #7af6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 16px rgba(0,229,255,.85));
}
.vg-end.is-fraud.is-win .vg-end-card {
    --vg-end-c: #ff5370;
    --vg-end-g: rgba(255, 83, 112, .55);
    border-color: #ff8a9e;
    box-shadow: 0 0 0 1px rgba(255, 213, 79, .35), 0 0 48px rgba(255, 61, 113, .5), 0 0 72px rgba(255, 140, 40, .22), inset 0 0 42px rgba(0,0,0,.42);
}
.vg-end.is-fraud.is-win .vg-end-tag {
    color: #1a060c;
    background: linear-gradient(90deg, #ffd54f, #ff5370);
}
.vg-end.is-fraud.is-win .vg-end-card h2 {
    background: linear-gradient(90deg, #fff 8%, #ffd54f 46%, #ff8a9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(255, 83, 112, .8));
}
.vg-end.is-fraud.is-win .vg-end-vignette { box-shadow: inset 0 0 140px rgba(255, 32, 72, .3); }
.vg-end.is-fraud.is-win .vg-end-rank { color: #ffd54f; }
.vg-end-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 6px;
}
.vg-end-head .vg-end-badge { width: 42px; height: 42px; margin: 0; flex: 0 0 auto; }
.vg-end-head .vg-end-tag { margin: 0; letter-spacing: .16em; font-size: 10px; }
.vg-end-rank {
    margin: 0 auto 10px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .28em;
    color: #cfd8ff;
    opacity: .8;
}
.vg-end.is-win .vg-end-rank { color: #ffe082; opacity: 1; text-shadow: 0 0 12px rgba(255,224,130,.55); }
.vg-end-actions { display: flex; flex-direction: column; }
.vg-end-lesson {
    position: relative;
    z-index: 2;
    width: min(360px, 100%);
    margin: 0 auto 10px;
    padding: 10px 12px 11px;
    text-align: left;
    font-family: "Cascadia Mono", "Consolas", "Segoe UI", monospace;
    color: #f3d4dc;
    background: linear-gradient(90deg, rgba(8,4,10,.78), rgba(8,4,10,.42));
    border: 1px solid rgba(255, 61, 113, .45);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    box-shadow: 0 0 18px rgba(255, 61, 113, .18);
}
.vg-end.is-win .vg-end-lesson {
    color: #d7fbff;
    border-color: rgba(0, 229, 255, .45);
    box-shadow: 0 0 18px rgba(0, 229, 255, .16);
}
.vg-end-lesson-k {
    display: block;
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .34em;
    color: var(--vg-end-c, #ff3d71);
    text-shadow: 0 0 10px var(--vg-end-g, rgba(255,61,113,.7));
}
.vg-end.is-win .vg-end-lesson-k { color: #7af6ff; }
.vg-end-lesson-t {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    text-shadow: 0 0 12px rgba(0,0,0,.8);
}
.vg-end-term {
    display: none;
    position: relative;
    z-index: 2;
    width: min(420px, 100%);
    margin: 0 auto 8px;
    background: #05080e;
    border: 1px solid #1cff9a;
    box-shadow: 0 0 24px rgba(28, 255, 154, .18), inset 0 0 40px rgba(0, 0, 0, .55);
    font-family: "Cascadia Mono", "Consolas", "Courier New", monospace;
    overflow: hidden;
}
.vg-end.is-lose .vg-end-term { border-color: #ff5370; box-shadow: 0 0 24px rgba(255, 83, 112, .2), inset 0 0 40px rgba(0, 0, 0, .55); }
.vg-end-term-bar {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 9px;
    letter-spacing: .18em;
    font-weight: 800;
    color: #8cffc8;
    background: rgba(28, 255, 154, .08);
    border-bottom: 1px solid rgba(28, 255, 154, .25);
}
.vg-end.is-lose .vg-end-term-bar { color: #ff8a9e; background: rgba(255, 83, 112, .08); border-bottom-color: rgba(255, 83, 112, .28); }
.vg-end-term-body {
    margin: 0;
    min-height: 72px;
    padding: 10px 12px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: #b9ffd9;
    white-space: pre-wrap;
    word-break: break-word;
}
.vg-end.is-lose .vg-end-term-body { color: #ffd0d8; }
.vg-end-term-caret { animation: vgTermBlink 0.7s step-end infinite; }
@keyframes vgTermBlink { 50% { opacity: 0; } }
@media (orientation: portrait) and (max-width: 900px) {
    .vg-end.has-term { align-content: center; gap: 8px; padding: 12px; }
    .vg-end.has-term .vg-end-term { display: block; }
    .vg-end.has-term .vg-end-lesson { display: none; }
    .vg-end.has-term .vg-end-card { padding: 14px 14px 12px; }
    .vg-end.has-term .vg-end-badge { width: 48px; height: 48px; }
    .vg-end.has-term .vg-end-card h2 { font-size: 2rem; }
}
.vg-end-clip { position: absolute; width: 18px; height: 18px; border-color: var(--vg-end-c, #ff3d71); border-style: solid; pointer-events: none; }
.vg-end-clip--tl { top: 7px; left: 7px; border-width: 2px 0 0 2px; }
.vg-end-clip--tr { top: 7px; right: 7px; border-width: 2px 2px 0 0; }
.vg-end-clip--bl { bottom: 7px; left: 7px; border-width: 0 0 2px 2px; }
.vg-end-clip--br { bottom: 7px; right: 7px; border-width: 0 2px 2px 0; }
.vg-end-badge { width: 68px; height: 68px; object-fit: contain; margin: 2px 0 8px; filter: drop-shadow(0 0 14px var(--vg-end-g, rgba(255,61,113,.85))); }
.vg-end-tag {
    display: inline-block; padding: 5px 12px; margin-bottom: 4px; font-size: 10px; font-weight: 900; letter-spacing: .34em;
    color: var(--vg-end-c, #ff3d71); border: 1px solid var(--vg-end-c, #ff3d71);
    background: rgba(0,0,0,.42);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.vg-end-card h2 { margin: 4px 0 2px; font-size: clamp(2.2rem, 8vw, 3rem); font-weight: 900; font-style: italic; letter-spacing: .1em; text-shadow: 0 0 26px var(--vg-end-c, #ff3d71); animation: vgEndGlitch 2.4s infinite; }
.vg-end-sub { margin: 0 0 12px; font-size: .82rem; opacity: .78; }
.vg-end-name {
    display: inline-block; padding: 6px 16px; margin-bottom: 14px; font-weight: 900; letter-spacing: .1em; color: #ffd54f;
    border: 1px solid rgba(255,213,79,.45); background: rgba(255,213,79,.08);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.vg-end-stats { display: flex; gap: 8px; margin-bottom: 16px; }
.vg-end-stats div { flex: 1; padding: 10px 6px 8px; background: rgba(0,0,0,.38); border-top: 2px solid var(--vg-end-c, #ff3d71); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.vg-end-stats b { display: block; font-size: 1.55rem; color: #fff; text-shadow: 0 0 12px var(--vg-end-c, #ff3d71); }
.vg-end-stats span { font-size: 9px; letter-spacing: .16em; opacity: .7; font-weight: 800; }
.vg-end-btn { display: block; width: 100%; margin-top: 8px; padding: 13px; border: 0; font-weight: 900; letter-spacing: .16em; font-size: 14px; cursor: pointer; }
.vg-end .vg-end-btn { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.vg-end-retry { background: linear-gradient(90deg, #ff3d71, #ff9100); color: #fff; box-shadow: 0 0 22px rgba(255,100,60,.55); animation: vgNukeReady .9s infinite alternate; }
.vg-end.is-win .vg-end-retry { background: linear-gradient(90deg, #00e5ff, #7c4dff); box-shadow: 0 0 22px rgba(0,229,255,.55); }
.vg-end-exit { background: rgba(8,10,18,.55); color: #cfd8ff; border: 1px solid rgba(255,255,255,.22); }
.vg-end .vg-end-retry:hover, .vg-end .vg-end-exit:hover { filter: brightness(1.12); }
.vg-ko-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 28;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.vg-ko-card {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(12, 6, 10, 0.9);
    border: 1px solid rgba(255, 83, 112, 0.45);
    color: #ffdce3;
    font-size: 12px;
}
.vg-ko-card b { letter-spacing: 0.14em; color: #ff5370; }
.vg-ko-card .vg-end-btn { width: auto; margin: 0; padding: 8px 12px; font-size: 11px; }
@keyframes vgEndIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes vgEndKen { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes vgEndGlitch { 0%,92%,100% { transform: none; } 94% { transform: translateX(-3px); } 96% { transform: translateX(3px); } }

@media (orientation: landscape) {
    .vg-end {
        display: grid;
        justify-items: end;
        align-items: center;
        padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }
    .vg-end.is-lose .vg-end-art { background-image: url("../img/vs/vg-end-defeat-wide.jpg"); background-position: center; }
    .vg-end.is-win .vg-end-art { background-image: url("../img/vs/vg-end-victory-wide.jpg"); background-position: center 42%; }
    .vg-end.is-fraud.is-win .vg-end-art { background-image: url("../img/vs/vg-end-fraud-victory-wide.jpg"); background-position: center 40%; }
    .vg-end.is-fraud.is-lose .vg-end-art { background-image: url("../img/vs/vg-end-fraud-defeat-wide.jpg"); background-position: center; }
    .vg-end-vignette {
        background:
            linear-gradient(90deg, rgba(2,4,10,.08) 0%, rgba(2,4,10,.18) 52%, rgba(2,4,10,.72) 100%),
            repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
    }
    .vg-end-card {
        width: min(340px, 44vw);
        max-height: calc(100% - 10px);
        padding: 12px 14px;
        overflow: auto;
    }
    .vg-end-badge { width: 46px; height: 46px; margin: 0 0 4px; }
    .vg-end-card h2 { font-size: clamp(1.55rem, 6.2vh, 2.35rem); margin: 2px 0; }
    .vg-end-sub { margin: 0 0 8px; font-size: .74rem; }
    .vg-end-name { margin-bottom: 8px; padding: 4px 12px; }
    .vg-end-rank { margin-bottom: 6px; }
    .vg-end-stats { margin-bottom: 10px; gap: 6px; }
    .vg-end-stats div { padding: 6px 4px; }
    .vg-end-stats b { font-size: 1.2rem; }
    .vg-end-actions { flex-direction: row; gap: 8px; }
    .vg-end .vg-end-btn { margin-top: 0; width: auto; flex: 1; padding: 10px 8px; font-size: 12px; }
    .vg-end-term { display: none !important; }
    .vg-end-lesson {
        display: block;
        width: 100%;
        margin: 6px 0 10px;
        padding: 8px 10px 9px;
    }
    .vg-end-lesson-t { font-size: .74rem; font-style: italic; letter-spacing: .05em; }
}
@media (orientation: landscape) and (max-height: 430px) {
    .vg-end-head .vg-end-badge { display: block; width: 28px; height: 28px; }
    .vg-end-sub { display: none; }
    .vg-end-card { padding: 10px 12px; }
    .vg-end-lesson { margin: 4px 0 8px; padding: 7px 9px; }
    .vg-end-lesson-t { font-size: .7rem; }
}

/* VS: humo, logo de equipo, fondo del lobby */
.vg-gboy .vg-sel { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; }
.vg-pill-smokebtn { background: #37474f; color: #eceff1; border-color: #90a4ae; }
.vg-pill-smokebtn.is-ready { background: #cfd8dc; color: #1c262b; animation: vgNukeReady .8s infinite alternate; }
.vg-ex-smoke.is-ready { border-color: #cfd8dc; }
.vg-team-logo { height: 28px; width: auto; margin-right: 2px; filter: drop-shadow(0 0 6px rgba(0,229,255,.8)); pointer-events: none; }
.vg-pick-card { position: relative; }
.vg-pick-logo { position: absolute; top: 8px; right: 8px; height: 42px; width: auto; filter: drop-shadow(0 0 8px rgba(0,229,255,.9)); pointer-events: none; }
.vg-lobby { background: linear-gradient(rgba(2,6,16,.35), rgba(2,6,16,.7)), url("../img/ui/home-bg.jpg") center / cover no-repeat; }
@media (orientation: portrait) and (max-width: 900px) { .vg-lobby { background-image: linear-gradient(rgba(2,6,16,.35), rgba(2,6,16,.7)), url("../img/ui/home-bg-mobile.jpg"); } }
.vg-lobby-card { background: linear-gradient(160deg, rgba(8,24,40,.82), rgba(4,12,22,.88)); backdrop-filter: blur(6px); }

/* VS: botones tactiles activos y consola ajustada al ancho */
.vg-gboy .vg-sel, .vg-gboy .vg-sel button { pointer-events: auto; }
.vg-gboy-plate { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 6px !important; }
.vg-stick-zone { width: clamp(96px, 28vw, 140px); height: clamp(96px, 28vw, 140px); }
.vg-stick { width: 82%; height: 82%; }
.vg-gboy .vg-sel { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: center; width: 100%; max-width: 150px; }
.vg-gboy .vg-pill-btn { min-width: 0; padding: 7px 3px; font-size: 9px; letter-spacing: 0; }
.vg-ab { gap: 6px; }
.vg-ab-btn { width: 50px; height: 50px; }
.vg-btn-a { width: 62px; height: 62px; }
.vg-btn-b { margin-top: 18px; }
.vg-team-logo { height: 34px; margin-right: 4px; }

/* VS: radar mas chico, mapa completo dentro del circulo */
.vg-shell .vg-mm-frame { width: 118px; height: 118px; }
.vg-shell .vg-minimap-wrap { right: 8px; }
.vg-shell .vg-right-col {
    top: var(--vg-radar-top, calc(max(6px, env(safe-area-inset-top, 0px)) + var(--vg-nav-h, 40px) + 2px));
    right: max(0px, env(safe-area-inset-right));
    align-items: flex-end;
}
.vg-shell .vg-right-col .vg-minimap-wrap,
#vsGuardiansContainer .vg-right-col .vg-minimap-wrap {
    position: relative !important;
    top: 0 !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: max-content;
    text-align: right;
}
.vg-shell .vg-minimap-label { font-size: 8px; letter-spacing: 1px; }
.vg-shell .vg-hud-top { right: auto; }

/* VS: logo del HUD del tamano del icono rival */
.vg-shell .vg-team-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 26px;
    height: 26px;
    margin: 0 4px 0 0;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    flex-shrink: 0;
    filter: none;
    pointer-events: none;
}
.vg-shell .vg-team-logo-f {
    margin: 0 0 0 4px;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 5px rgba(155, 28, 40, 0.55));
}
.vg-shell .vg-team-logo[hidden] { display: block !important; }

/* VS: botones mas grandes */
.vg-gboy { padding-left: 6px; padding-right: 6px; }
.vg-stick-zone { width: clamp(90px, 26vw, 140px); height: clamp(90px, 26vw, 140px); }
.vg-gboy .vg-sel { max-width: 150px; gap: 6px; }
.vg-gboy .vg-pill-btn { min-height: 46px; padding: 10px 2px; font-size: 10.5px; font-weight: 900; }
.vg-ab-btn { width: 56px; height: 56px; font-size: 12px; }
.vg-btn-a { width: 68px; height: 68px; }
.vg-btn-b { margin-top: 14px; }

/* VS: joystick grande, botones de accion en fila superior */
.vg-gboy-plate { grid-template-columns: 1fr auto !important; grid-template-areas: 'sel sel' 'stick ab'; row-gap: 6px !important; }
.vg-gboy .vg-sel { grid-area: sel; display: flex; flex-direction: row; max-width: none; width: 100%; gap: 5px; }
.vg-gboy .vg-sel .vg-pill-btn { flex: 1 1 0; min-height: 40px; padding: 8px 2px; font-size: 9.5px; }
.vg-gboy .vg-sel .vg-pill-btn[hidden] { display: none; }
.vg-stick-zone { grid-area: stick; width: clamp(140px, 44vw, 200px); height: clamp(140px, 44vw, 200px); }
.vg-stick { width: 88%; height: 88%; }
.vg-stick-knob { width: 64px; height: 64px; }
.vg-ab { grid-area: ab; justify-self: end; align-self: end; }
.vg-ab-btn { width: 62px; height: 62px; }
.vg-btn-a { width: 80px; height: 80px; }
.vg-btn-b { margin-top: 30px; }

/* VS: consola moderna (cristal + neon) */
.vg-gboy { background: linear-gradient(180deg, rgba(6,10,24,.55), rgba(4,8,20,.92)) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0 !important; border-top: 1px solid rgba(0,229,255,.35) !important; box-shadow: 0 -6px 30px rgba(0,229,255,.12) !important; border-radius: 26px 26px 0 0 !important; }
.vg-gboy-top { margin-bottom: 2px; }
.vg-gboy-brand, .vg-gboy-sub { color: rgba(0,229,255,.7) !important; font-size: 9px; letter-spacing: .25em; }
.vg-gboy-led { background: #00e676 !important; box-shadow: 0 0 10px #00e676 !important; }
.vg-gboy .vg-pill-btn { border-radius: 14px; border: 1px solid rgba(0,229,255,.4); background: rgba(10,22,44,.65); color: #d6f6ff; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.35); transition: transform .08s, background .15s; }
.vg-gboy .vg-pill-btn:active, .vg-gboy .vg-pill-btn.is-down { transform: scale(.94); background: rgba(0,229,255,.25); }
.vg-gboy .vg-pill-nukebtn { border-color: rgba(255,214,0,.7); background: rgba(70,52,0,.55); color: #ffe266; }
.vg-gboy .vg-pill-scanbtn { border-color: rgba(24,255,255,.7); background: rgba(0,50,66,.55); }
.vg-gboy .vg-pill-dronebtn { border-color: rgba(179,136,255,.75); background: rgba(48,16,80,.55); color: #e1bee7; }
.vg-gboy .vg-pill-door { border: 1px solid #fff; background: linear-gradient(135deg, rgba(0,229,255,.9), rgba(124,77,255,.9)); color: #001018; }
.vg-stick { background: radial-gradient(circle, rgba(10,22,44,.55) 55%, rgba(0,229,255,.12)) !important; border: 2px solid rgba(0,229,255,.55) !important; box-shadow: 0 0 22px rgba(0,229,255,.25), inset 0 0 24px rgba(0,0,0,.55) !important; backdrop-filter: blur(4px); }
.vg-stick-ring { border: 2px dashed rgba(0,229,255,.28) !important; }
.vg-stick-knob { background: radial-gradient(circle at 35% 30%, #9af3ff, #0097b8 70%) !important; border: 2px solid rgba(255,255,255,.7) !important; box-shadow: 0 0 18px rgba(0,229,255,.7), 0 4px 10px rgba(0,0,0,.5) !important; }
.vg-ab-btn { border: 2px solid rgba(255,255,255,.55) !important; box-shadow: 0 0 18px var(--vg-glow, rgba(255,255,255,.3)), inset 0 2px 0 rgba(255,255,255,.35) !important; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.vg-btn-a { background: radial-gradient(circle at 35% 30%, #ff7aa2, #d4004a 70%) !important; --vg-glow: rgba(255,40,110,.6); }
.vg-btn-b { background: radial-gradient(circle at 35% 30%, #ffc266, #f06400 70%) !important; --vg-glow: rgba(255,140,0,.55); }
.vg-ab-btn:active, .vg-ab-btn.is-down { transform: scale(.92); }

/* VS: A y B al centro del analogico y mas grandes */
.vg-ab { align-self: center !important; align-items: center !important; gap: 8px; }
.vg-ab-btn { width: 72px; height: 72px; font-size: 13px; }
.vg-btn-a { width: 92px; height: 92px; font-size: 14px; }
.vg-btn-b { margin-top: 28px; }

@media (orientation: landscape) {
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell {
        padding-bottom: 0 !important;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
        pointer-events: none;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy-top,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy-top {
        display: none !important;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy-plate,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy-plate {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: 'stick . ab' !important;
        align-items: end !important;
        row-gap: 0 !important;
        pointer-events: none;
        position: relative;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-zone,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-zone {
        grid-area: stick;
        justify-self: start;
        align-self: end;
        width: clamp(108px, 28vh, 148px);
        height: clamp(108px, 28vh, 148px);
        pointer-events: auto;
        opacity: 0.42;
        transition: opacity 0.15s ease;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell .vg-toast,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-toast {
        top: auto !important;
        left: max(12px, env(safe-area-inset-left, 0px));
        right: auto;
        bottom: calc(clamp(108px, 28vh, 148px) + max(12px, env(safe-area-inset-bottom, 0px)) + 10px);
        transform: translateY(6px);
        max-width: clamp(108px, 28vh, 160px);
        width: max-content;
        z-index: 13;
        pointer-events: none;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell .vg-toast.show,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-toast.show {
        transform: translateY(0);
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-zone:active,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick.is-active,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-zone:active,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick.is-active {
        opacity: 0.92;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick {
        background: radial-gradient(circle, rgba(10,22,44,0.22) 52%, rgba(0,229,255,0.08)) !important;
        border: 2px solid rgba(0,229,255,0.28) !important;
        box-shadow: none !important;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-knob,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-knob {
        background: radial-gradient(circle at 35% 30%, rgba(154,243,255,0.55), rgba(0,151,184,0.45) 70%) !important;
        box-shadow: 0 0 10px rgba(0,229,255,0.28) !important;
        width: 48px;
        height: 48px;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-ab,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-ab {
        grid-area: ab;
        justify-self: end;
        align-self: end !important;
        pointer-events: auto;
        margin: 0;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy .vg-sel,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy .vg-sel {
        display: none !important;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell .vg-weapons,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-weapons {
        left: 50%;
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        max-width: min(70vw, 520px);
        gap: 5px;
        z-index: 7;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-slot,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-slot {
        width: 44px;
        height: 44px;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-act-rail,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-act-rail {
        display: none !important;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-act-inline,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-act-inline {
        display: flex;
        min-height: 32px;
        order: -1;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-act,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-act {
        min-height: 30px;
        padding: 5px 12px;
        font-size: 12px;
        letter-spacing: 0.04em;
        border-width: 2px;
        background: rgba(4, 18, 36, 0.94);
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.38);
        white-space: nowrap;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-swap,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-swap {
        white-space: normal;
        flex-direction: column;
        max-width: 148px;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-swap b,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-swap b {
        white-space: normal;
        font-size: 10px;
        line-height: 1.15;
    }
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-act b,
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-act-inline .vg-ex-act b {
        font-size: 12px;
        color: #e8fdff;
    }
}

/* Runner móvil portrait: la pantalla CRT crece y llena el hueco inferior */
@media (orientation: portrait) {
    body.mobile-touch-device[data-active-section="runnerContainer"] .game-content,
    body.runner-compact-ui[data-active-section="runnerContainer"] .game-content {
        height: 100dvh !important;
        height: 100svh !important;
        max-height: 100dvh !important;
        max-height: 100svh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] #runnerContainer,
    body.runner-compact-ui[data-active-section="runnerContainer"] #runnerContainer {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-game,
    body.runner-compact-ui[data-active-section="runnerContainer"] .runner-game {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: max(6px, env(safe-area-inset-top)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        gap: 0 !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .rac-machine,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-machine {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .rac-body,
    body.mobile-touch-device[data-active-section="runnerContainer"] .rac-screen-col,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-body,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-screen-col {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .rac-hud,
    body.runner-compact-ui[data-active-section="runnerContainer"] .rac-hud {
        flex-shrink: 0 !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage.rac-screen-wrap,
    body.runner-compact-ui[data-active-section="runnerContainer"] .runner-stage.rac-screen-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas,
    body.runner-compact-ui[data-active-section="runnerContainer"] #runnerCanvas {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: unset !important;
        object-fit: fill !important;
        border: 8px solid #45504b !important;
        border-radius: 14px !important;
        background: #95a584 !important;
    }

    body.mobile-touch-device[data-active-section="runnerContainer"] .runner-mobile-console,
    body.runner-compact-ui[data-active-section="runnerContainer"] .runner-mobile-console {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
    }
}

body[data-active-section="runnerContainer"] .runner-stage.rac-screen-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}
body[data-active-section="runnerContainer"] #runnerCanvas {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    object-fit: fill !important;
}
body.mobile-touch-device[data-active-section="runnerContainer"] #runnerCanvas,
body.runner-compact-ui[data-active-section="runnerContainer"] #runnerCanvas {
    border: 8px solid #45504b !important;
    border-radius: 14px !important;
    background: #95a584 !important;
}

.runner-title-screen {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 9;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
}
.runner-title-screen.is-visible { display: block; }
.runner-title-screen picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}
.runner-title-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}
.runner-title-copy {
    position: absolute;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    width: min(88%, 420px);
    text-align: center;
    padding: 10px 14px 12px;
    border-radius: 14px;
    background: rgba(5, 8, 16, 0.72);
    border: 1px solid rgba(255, 213, 79, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.runner-title-copy span {
    display: block;
    margin-bottom: 4px;
    color: #7cf3ff;
    font: 800 0.62rem/1.2 'Courier New', monospace;
    letter-spacing: 0.18em;
}
.runner-title-copy strong {
    display: block;
    color: #fff;
    font: 900 0.92rem/1.25 system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(255, 213, 79, 0.45);
}

body[data-active-section="runnerContainer"] .runner-stage-message.is-pause-overlay,
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-stage-message.is-pause-overlay {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(70%, 240px) !important;
    z-index: 12 !important;
    pointer-events: none !important;
}
.runner-pause-card {
    margin: 0;
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
    line-height: 1.2;
    border-radius: 16px !important;
    animation: none !important;
}

body.mobile-touch-device[data-active-section="runnerContainer"] .runner-title-screen,
body.runner-compact-ui[data-active-section="runnerContainer"] .runner-title-screen {
    inset: 26px 24px 22px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-title-screen picture,
body.mobile-touch-device[data-active-section="runnerContainer"] .runner-title-screen img,
body.runner-compact-ui[data-active-section="runnerContainer"] .runner-title-screen picture,
body.runner-compact-ui[data-active-section="runnerContainer"] .runner-title-screen img {
    border-radius: 8px;
}

.vg-pill-pc {
    min-width: 132px;
    padding: 12px 16px;
    font-size: 13px;
    z-index: 12;
    background: linear-gradient(135deg, #14c97a, #00e5ff);
    color: #001018;
    border: 2px solid #fff;
    box-shadow: 0 0 18px rgba(20, 201, 122, 0.55);
}
.vg-pill-pc--float {
    position: absolute;
    right: 12px;
    bottom: 96px;
    left: auto;
}
.vg-pill-pc[hidden] { display: none !important; }
.vg-gboy .vg-pill-pc {
    position: static;
    min-width: 72px;
    padding: 8px 10px;
    font-size: 11px;
    animation: vgNukeReady .8s infinite alternate;
}
body.mobile-touch-device .vg-pill-pc--float,
body.vg-compact-ui .vg-pill-pc--float {
    display: none !important;
}
.vg-pc {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 14, 0.55);
    pointer-events: auto;
}
.vg-pc[hidden] { display: none !important; }
.vg-pc-frame {
    width: min(92vw, 420px);
    max-height: min(78vh, 560px);
}
.vg-pc-bezel {
    border-radius: 16px;
    border: 1px solid rgba(0, 229, 255, 0.4);
    background: linear-gradient(180deg, #0a1628, #050a14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 40px rgba(0, 229, 255, 0.12);
    overflow: hidden;
}
.vg-pc.is-hacker .vg-pc-bezel {
    border-color: rgba(255, 60, 80, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 40, 70, 0.14);
}
.vg-pc-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vg-pc-dots { display: flex; gap: 5px; }
.vg-pc-dots i {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff5f57;
    display: block;
}
.vg-pc-dots i:nth-child(2) { background: #febc2e; }
.vg-pc-dots i:nth-child(3) { background: #28c840; }
.vg-pc-os {
    flex: 1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(0, 229, 255, 0.75);
    text-transform: uppercase;
}
.vg-pc.is-hacker .vg-pc-os { color: rgba(255, 138, 128, 0.9); font-family: ui-monospace, monospace; }
.vg-pc-x {
    width: 32px; height: 32px;
    border: 0; border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.vg-pc-x:hover { background: #ff3d57; }
.vg-pc-screen {
    padding: 18px 18px 20px;
    min-height: 220px;
    color: #e8fdff;
}
.vg-pc.is-hacker .vg-pc-screen {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 70, 0.04) 3px),
        #07140c;
    color: #b9f6ca;
    font-family: ui-monospace, Consolas, monospace;
}
.vg-pc-kicker {
    margin: 0 0 6px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.7);
}
.vg-pc.is-hacker .vg-pc-kicker { color: #69f0ae; }
.vg-pc-screen h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}
.vg-pc-sub {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(232, 253, 255, 0.72);
}
.vg-pc-actions { display: flex; flex-direction: column; gap: 8px; }
.vg-pc-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    background: linear-gradient(135deg, #00e5ff, #2979ff);
    color: #001018;
}
.vg-pc.is-hacker .vg-pc-btn {
    background: linear-gradient(135deg, #00e676, #1b5e20);
    color: #041208;
}
.vg-pc-btn:disabled { opacity: 0.4; cursor: default; }
.vg-pc-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: inherit;
}
.vg-pc-btn--warn {
    background: linear-gradient(135deg, #ff8a65, #d32f2f);
    color: #fff;
}
.vg-pc-hint { margin: 12px 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.45); }
.vg-pc-load { margin-top: 12px; }
.vg-pc-load span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.vg-pc-bar {
    margin: 8px 0 6px;
    height: 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.vg-pc-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #00e5ff, #69f0ae);
    transition: width 0.12s linear;
}
.vg-pc-load b { font-size: 18px; }
.vg-pc.is-watch {
    background: transparent;
    align-items: flex-end;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.vg-pc.is-watch .vg-pc-frame { width: min(94vw, 460px); }
.vg-pc.is-watch .vg-pc-screen { min-height: 0; padding: 12px 14px 14px; }

/* VS: el alto real del celular (plantilla deviceShell) y controles dentro de la pantalla */
body[data-active-section="vsGuardiansContainer"] #gameScreen,
body[data-active-section="vsGuardiansContainer"] .game-content,
body.vg-play-fs[data-active-section="vsGuardiansContainer"] #gameScreen,
body.vg-play-fs[data-active-section="vsGuardiansContainer"] #vsGuardiansContainer,
body[data-active-section="vsGuardiansContainer"] #vsGuardiansContainer {
    height: var(--vg-view-h, 100svh) !important;
    max-height: var(--vg-view-h, 100svh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
body.gi-use-device-chrome[data-active-section="vsGuardiansContainer"] #vsGuardiansContainer,
body.vg-play-fs.gi-use-device-chrome[data-active-section="vsGuardiansContainer"] #vsGuardiansContainer {
    top: var(--gi-chrome-top, 0px) !important;
    right: 0 !important;
    bottom: var(--gi-chrome-bottom, 0px) !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
}
body[data-active-section="vsGuardiansContainer"] .vg-shell,
body.vg-play-fs[data-active-section="vsGuardiansContainer"] .vg-shell {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(8px, var(--gi-safe-left, env(safe-area-inset-left))) !important;
    padding-right: max(8px, var(--gi-safe-right, env(safe-area-inset-right))) !important;
    padding-bottom: max(8px, var(--gi-safe-bottom, env(safe-area-inset-bottom))) !important;
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-gboy-plate,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-gboy-plate {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-zone,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-zone {
    width: clamp(88px, 32vmin, 150px);
    height: clamp(88px, 32vmin, 150px);
    max-width: 46vw;
    max-height: 34svh;
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-knob,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-knob {
    width: 42%;
    height: 42%;
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-ab-btn,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-ab-btn {
    width: clamp(46px, 12vmin, 64px);
    height: clamp(46px, 12vmin, 64px);
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-btn-a,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-btn-a {
    width: clamp(54px, 15vmin, 78px);
    height: clamp(54px, 15vmin, 78px);
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-btn-b,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-btn-b {
    margin-top: clamp(6px, 2vmin, 16px);
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-hud-nav-stack {
    top: max(6px, var(--gi-safe-top, env(safe-area-inset-top))) !important;
    right: max(6px, var(--gi-safe-right, env(safe-area-inset-right))) !important;
}
body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-mm-frame,
body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell .vg-mm-frame {
    width: clamp(64px, 16vmin, 110px) !important;
    height: clamp(64px, 16vmin, 110px) !important;
}
@media (orientation: landscape) {
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-zone,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-zone {
        width: clamp(72px, 36svh, 132px) !important;
        height: clamp(72px, 36svh, 132px) !important;
        max-width: 28vw;
        max-height: calc(100svh - 12px);
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-btn-a,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-btn-a {
        width: clamp(48px, 20svh, 72px) !important;
        height: clamp(48px, 20svh, 72px) !important;
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-ab-btn,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-ab-btn {
        width: clamp(42px, 16svh, 60px) !important;
        height: clamp(42px, 16svh, 60px) !important;
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-btn-b,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-btn-b {
        margin-top: 0 !important;
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-shell .vg-weapons,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-shell .vg-weapons {
        max-width: min(40vw, 260px) !important;
        bottom: max(8px, var(--gi-safe-bottom, env(safe-area-inset-bottom))) !important;
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-slot,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-slot {
        width: clamp(34px, 12svh, 44px) !important;
        height: clamp(34px, 12svh, 44px) !important;
    }
}

/* El radar queda justo debajo del menú y pegado al borde derecho */
@media (min-width: 640px) {
    .vg-shell .vg-right-col {
        top: var(--vg-radar-top, calc(max(6px, env(safe-area-inset-top, 0px)) + var(--vg-nav-h, 40px) + 2px)) !important;
        right: max(0px, env(safe-area-inset-right)) !important;
        align-items: flex-end;
    }
}

/* Celular girado: el radar baja justo debajo del menú y se pega al borde derecho */
@media (orientation: landscape) and (max-height: 540px) {
    .vg-shell .vg-right-col {
        top: var(--vg-radar-top, calc(max(4px, env(safe-area-inset-top, 0px)) + var(--vg-nav-h, 40px) + 2px)) !important;
        right: env(safe-area-inset-right, 0px) !important;
        align-items: flex-end;
    }
    .vg-shell .vg-right-col .vg-minimap-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: max-content;
        text-align: right;
    }
}

/* Vertical: analogico y A/B un poco mas grandes, sin invadir la barra de objetos */
@media (orientation: portrait) {
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-zone,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-zone {
        width: clamp(108px, 38vmin, 168px);
        height: clamp(108px, 38vmin, 168px);
        max-width: 42vw;
        max-height: 30svh;
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-stick-knob,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-stick-knob {
        width: 46%;
        height: 46%;
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-ab-btn,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-ab-btn {
        width: clamp(54px, 14vmin, 72px);
        height: clamp(54px, 14vmin, 72px);
    }
    body.vg-compact-ui[data-active-section="vsGuardiansContainer"] .vg-btn-a,
    body.mobile-touch-device[data-active-section="vsGuardiansContainer"] .vg-btn-a {
        width: clamp(66px, 18vmin, 86px);
        height: clamp(66px, 18vmin, 86px);
    }
}

.mp-match-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 280px;
    overflow: auto;
}
.mp-match-card {
    padding: 12px;
    border-radius: 14px;
    background: rgba(6, 16, 32, 0.88);
    border: 1px solid rgba(0, 229, 255, 0.22);
}
.mp-match-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mp-match-code {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.14em;
    color: #7af6ff;
    font-size: 1.05rem;
}
.mp-match-state {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd54f;
}
.mp-match-meta {
    margin: 6px 0 10px;
    color: rgba(232, 247, 255, 0.72);
    font-size: 0.78rem;
}
.mp-match-manual {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mp-match-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mp-match-actions button {
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.12);
    color: #e8fdff;
    font: 800 0.78rem "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.mp-match-actions button[data-team="fraud"] {
    border-color: rgba(255, 61, 113, 0.55);
    background: rgba(255, 61, 113, 0.14);
}
.mp-match-note {
    min-height: 1.2em;
    margin: 0;
    color: #ffd54f;
    font-size: 0.8rem;
}
.mp-match-join { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-match-join .mp-btn-primary { flex: 1 1 160px; }
button.mp-rl-row {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.mp-rl-row.is-full { opacity: 0.55; cursor: default; }
.mp-rl-row.is-full .mp-rl-join-hint { color: #ff8a9e; }
.vg-down {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 14, 0.45);
}
.vg-down-card {
    width: min(92vw, 420px);
    padding: 22px 18px 16px;
    border-radius: 18px;
    background: rgba(8, 16, 32, 0.92);
    border: 1px solid rgba(122, 246, 255, 0.35);
    color: #e8f7ff;
    text-align: center;
}
.vg-down-card h3 { margin: 0 0 8px; letter-spacing: 0.08em; }
.vg-down-card p { margin: 0 0 14px; }
.vg-observe {
    position: absolute;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 16;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(4, 12, 24, 0.88);
    border: 1px solid rgba(122, 246, 255, 0.4);
    color: #e8f7ff;
    pointer-events: auto;
}
.vg-observe b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-observe button {
    border: 0;
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 800;
    background: #00e5ff;
    color: #021018;
}
@media (orientation: landscape), (max-height: 520px) {
    .vg-shell .vg-observe {
        top: env(safe-area-inset-top, 0px);
        bottom: auto;
        left: 0;
        right: 0;
        width: max-content;
        max-width: calc(100% - 12px);
        margin-inline: auto;
        transform: none;
        z-index: 20;
        border-radius: 0 0 14px 14px;
    }
}