/* ═══════════════════════════════════════════════════════════
   MASTUR FIGHTERS — Hoja de estilos principal
   Motor de peleas 2D en HTML5 Canvas
   ═══════════════════════════════════════════════════════════ */

/* ── Fuentes personalizadas ── */
@font-face {
    font-family: 'Digitag';
    src: url('assets/fonts/Digitag.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EditUndo';
    src: url('assets/fonts/edit-undo.brk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── Variables CSS ── */
:root {
    --bg-abyss: #050510;
    --bg-dark: #0a0a1a;
    --bg-card: #12122a;
    --bg-card-hover: #1a1a3a;
    --accent-fire: #ff2244;
    --accent-fire-dim: rgba(255, 34, 68, 0.35);
    --accent-cyan: #00e5ff;
    --accent-cyan-dim: rgba(0, 229, 255, 0.25);
    --accent-gold: #ffd700;
    --accent-gold-dim: rgba(255, 215, 0, 0.3);
    --text-primary: #eeeef6;
    --text-secondary: #7777aa;
    --p1-color: #00aaff;
    --p1-glow: rgba(0, 170, 255, 0.45);
    --p2-color: #ff4477;
    --p2-glow: rgba(255, 68, 119, 0.45);
    --p3-color: #00ffaa;
    --p3-glow: rgba(0, 255, 170, 0.45);
    --p4-color: #aa00ff;
    --p4-glow: rgba(170, 0, 255, 0.45);
    --font-title: 'Digitag', 'Bebas Neue', 'Impact', sans-serif;
    --font-impact: 'EditUndo', 'Bebas Neue', 'Impact', sans-serif;
    --font-display: 'EditUndo', 'Oswald', 'Bebas Neue', sans-serif;
    --font-tech: 'EditUndo', 'Orbitron', 'Segoe UI', monospace, sans-serif;
    --font-heading: 'EditUndo', var(--font-impact);
    --font-body: 'EditUndo', 'Rajdhani', 'Segoe UI', sans-serif;
    --skew: -10deg;
    --hud-ghost: #ffb300;
    --radius: 8px;
    --transition-fast: 0.18s ease;

    /* ── Piezas compartidas por todos los menús ──
       Paneles, cartas y botones salen de aquí: esquinas rectas, borde fino oscuro,
       canto grueso de color y sombra dura desplazada (sin difuminar). */
    --line: #2a2a44;                 /* borde de paneles, cartas y botones */
    --line-soft: #444;               /* borde de controles pequeños (teclas, campos) */
    --panel-bg: linear-gradient(135deg, rgba(22, 22, 54, 0.88), rgba(10, 10, 28, 0.94));
    --field-bg: rgba(0, 0, 0, 0.5);  /* fondo de campos, teclas y deslizadores */
    --shadow-hard: 6px 6px 0 rgba(0, 0, 0, 0.45);
    --shadow-hard-sm: 4px 4px 0 rgba(0, 0, 0, 0.45);
    --laser: linear-gradient(90deg, transparent, var(--accent-fire), transparent);
    --ease-pop: cubic-bezier(0.2, 1.3, 0.4, 1);
}

/* ── Reset y base (Ventana y elementos 100% fijos, sin arrastre) ── */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    touch-action: none;
    overscroll-behavior: none;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

img, canvas, button, a, div, span, select, input {
    -webkit-user-drag: none;
    user-drag: none;
}

body {
    background: var(--bg-abyss);
    color: var(--text-primary);
    font-family: var(--font-body);
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none; /* Bebas Neue solo tiene peso 400: evita la negrita falsa */
}

/* ── Contenedor principal (fijo y escalado por JS) ──
   Mide SIEMPRE 1024x576: quien lo ajusta a la ventana es el scale() de script.js.
   flex-shrink: 0 impide que el body lo estreche en ventanas más pequeñas. */
#game-container {
    position: relative;
    flex-shrink: 0;
    width: 1024px;
    height: 576px;
    background: #000;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), 0 0 120px rgba(255, 34, 68, 0.08);
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
}

/* ══════════════════════════════
   SISTEMA DE PANTALLAS
   ══════════════════════════════ */
.screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.screen.active {
    display: flex;
}

/* ══════════════════════════════
   PANTALLA DE TÍTULO
   ══════════════════════════════ */
#title-screen {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 34, 68, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, #08081a 0%, #100820 40%, #0a0a1a 100%);
    overflow: hidden;
}

/* Destello luminoso de impacto detrás del logo (estalla al caer las letras rojas) */
.title-bg-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 520px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255, 40, 75, 0.55) 0%, rgba(255, 170, 0, 0.22) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

#title-screen:not(.play-intro) .prompt-text {
    opacity: 1;
    animation: blinkPulse 1.4s ease-in-out infinite;
}

#title-screen.play-intro .title-bg-flare {
    animation: titleFlareImpact 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.9s both;
}

@keyframes titleFlareImpact {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.15); filter: blur(0); }
    35%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.4); filter: blur(6px); }
    100% { opacity: 0.28; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

.title-content {
    text-align: center;
    position: relative;
    z-index: 2;
    transform-origin: center center;
}

/* Micro-sacudida de impacto al estrellarse las letras rojas (~2.0s) */
#title-screen.play-intro .title-content {
    animation: titleContentShake 0.75s ease-out 1.95s both;
}

@keyframes titleContentShake {
    0%, 30%   { transform: translate(0, 0); }
    38%       { transform: translate(-8px, 5px) rotate(-0.6deg); }
    48%       { transform: translate(8px, -5px) rotate(0.5deg); }
    58%       { transform: translate(-5px, 3px) rotate(-0.3deg); }
    70%       { transform: translate(3px, -2px) rotate(0.1deg); }
    84%       { transform: translate(-1px, 1px); }
    100%      { transform: translate(0, 0); }
}

.game-title {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 68px;
    line-height: 1.05;
    color: var(--text-primary);
    text-shadow:
        0 0 20px var(--accent-fire-dim),
        0 0 60px rgba(255, 34, 68, 0.15);
    letter-spacing: 4px;
}

/* ─── FASE 1: PRIMERO APARECE EL LOGO ENTERO ("JUEGO DE PELEAS DE LA") ─── */
.title-prefix {
    display: block;
    transform-origin: center bottom;
    opacity: 0;
}

#title-screen.play-intro .title-prefix {
    animation: titleLogoEntrance 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes titleLogoEntrance {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.85);
        filter: blur(16px);
        letter-spacing: 18px;
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.8), 0 0 80px rgba(0, 229, 255, 0.4);
    }
    45% {
        opacity: 0.85;
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        letter-spacing: 8px;
        text-shadow: 0 0 20px var(--accent-fire-dim), 0 0 60px rgba(255, 34, 68, 0.15);
    }
}

/* ─── FASE 2: AL IMPACTO DEL AUDIO, APARECEN LAS LETRAS ROJAS ("MASTURBANDA") ─── */
.title-accent {
    color: var(--accent-fire);
    font-size: 88px;
    letter-spacing: 10px;
    display: block;
    transform-origin: center center;
    opacity: 0;
    text-shadow:
        0 0 25px var(--accent-fire-dim),
        0 2px 40px rgba(255, 34, 68, 0.25);
}

#title-screen.play-intro .title-accent {
    animation:
        titleAccentSlam 0.95s cubic-bezier(0.18, 0.89, 0.32, 1.25) 1.9s both,
        accentGlowPulse 3s ease-in-out 2.85s infinite;
}

@keyframes titleAccentSlam {
    0% {
        opacity: 0;
        transform: scale(3.5) translateY(-40px);
        filter: blur(22px);
        text-shadow: 0 0 140px #ff2244, 0 0 200px #ffaa00, 0 0 50px #ffffff;
    }
    38% {
        opacity: 1;
        transform: scale(0.92) translateY(4px);
        filter: blur(0);
        text-shadow:
            0 0 80px #ff2244,
            0 0 140px rgba(255, 215, 0, 0.9),
            0 0 40px #ffffff;
    }
    62% {
        transform: scale(1.08) translateY(-2px);
        text-shadow:
            0 0 50px var(--accent-fire-dim),
            0 2px 70px rgba(255, 34, 68, 0.5);
    }
    82% {
        transform: scale(0.98) translateY(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        text-shadow:
            0 0 25px var(--accent-fire-dim),
            0 2px 40px rgba(255, 34, 68, 0.25);
    }
}

@keyframes accentGlowPulse {
    0%, 100% {
        text-shadow: 0 0 25px var(--accent-fire-dim), 0 2px 40px rgba(255, 34, 68, 0.25);
    }
    50% {
        text-shadow: 0 0 45px rgba(255, 34, 68, 0.65), 0 0 75px rgba(255, 170, 0, 0.35);
    }
}

/* Flotación continua del logo completo tras completarse la entrada */
#title-screen.play-intro .game-title {
    animation: titleFloat 3.2s ease-in-out 3.2s infinite;
}

@keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ─── FASE 3: AL APARECER LAS LETRAS ROJAS, APARECE EL RESTO DE COSAS ─── */

/* 1. Líneas decorativas láser que se expanden hacia los lados */
.title-decoration {
    width: 320px;
    height: 2px;
    margin: 20px auto;
    background: linear-gradient(90deg, transparent, var(--accent-fire), transparent);
    opacity: 0;
    transform-origin: center center;
}

#title-screen.play-intro .title-decoration.top-dec {
    animation: titleLineExpand 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.15s both;
}

#title-screen.play-intro .title-decoration.bottom-dec {
    animation: titleLineExpand 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.25s both;
}

@keyframes titleLineExpand {
    0% {
        opacity: 0;
        transform: scaleX(0);
        box-shadow: 0 0 0 transparent;
    }
    45% {
        opacity: 1;
        box-shadow: 0 0 30px var(--accent-fire), 0 0 50px var(--accent-gold);
    }
    100% {
        opacity: 0.6;
        transform: scaleX(1);
        box-shadow: 0 0 10px var(--accent-fire-dim);
    }
}

/* 2. Subtítulo: Aparece con expansión de letras tras las letras rojas */
.subtitle {
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 8px;
    color: var(--accent-gold);
    margin-top: 18px;
    opacity: 0;
    text-shadow: 0 0 12px var(--accent-gold-dim);
}

#title-screen.play-intro .subtitle {
    animation: subtitleEntrance 0.85s cubic-bezier(0.16, 1, 0.3, 1) 2.45s both;
}

@keyframes subtitleEntrance {
    0% {
        opacity: 0;
        transform: translateY(18px);
        letter-spacing: 22px;
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 10px;
        filter: blur(0);
    }
}

/* 3. Prompt de inicio: "Presiona ENTER para comenzar" */
.prompt-text {
    font-size: 18px;
    margin-top: 50px;
    opacity: 0;
}

#title-screen.play-intro .prompt-text {
    animation:
        promptEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) 2.95s both,
        blinkPulse 1.4s ease-in-out 3.7s infinite;
}

@keyframes promptEntrance {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.blink {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-secondary);
}

@keyframes blinkPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

/* ══════════════════════════════
   SELECTOR DE MODO Y RED
   ══════════════════════════════ */
#mode-select-screen, #network-screen, #waiting-screen, #options-screen {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #0b0b20 0%, #08081a 100%);
}

.screen-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: var(--accent-gold);
    text-shadow: 0 0 15px var(--accent-gold-dim);
    margin-bottom: 22px;
    letter-spacing: 3px;
}

/* Opciones se ancla arriba: título y pestañas no saltan al cambiar de pestaña */
#options-screen {
    justify-content: flex-start;
    padding-top: 36px;
}

/* ── Reasignación de teclas: un panel por jugador, en rejilla 2x2 ──
   Cada panel lleva el color de su jugador (--pc), igual que pedestales y HUD. */
.options-container {
    display: grid;
    grid-template-columns: repeat(2, 440px);
    gap: 12px 16px;
}

.controls-panel {
    --pc: var(--line-soft);
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--pc);
    box-shadow: var(--shadow-hard);
    padding: 9px 14px 11px;
    text-align: left;
}

.controls-panel:nth-child(1) { --pc: var(--p1-color); --pg: var(--p1-glow); }
.controls-panel:nth-child(2) { --pc: var(--p2-color); --pg: var(--p2-glow); }
.controls-panel:nth-child(3) { --pc: var(--p3-color); --pg: var(--p3-glow); }
.controls-panel:nth-child(4) { --pc: var(--p4-color); --pg: var(--p4-glow); }

/* Dos columnas: el orden del HTML deja las acciones emparejadas
   (arriba/abajo · izquierda/derecha · ataque normal/especial · definitiva). */
.control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 3px 0 8px;
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid color-mix(in srgb, var(--pc) 55%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* La fila entera se enciende cuando su tecla tiene el foco (teclado, mando o ratón) */
.control-row:focus-within,
.control-row:hover {
    background: color-mix(in srgb, var(--pc) 16%, rgba(0, 0, 0, 0.28));
    border-left-color: var(--pc);
}

.ctrl-label {
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    text-transform: uppercase;
}

.control-row:focus-within .ctrl-label,
.control-row:hover .ctrl-label {
    color: var(--text-primary);
}

/* Tecla asignada: mismo aspecto de tecla que .key-badge */
.ctrl-btn {
    background: var(--field-bg);
    border: 1px solid var(--line-soft);
    border-bottom-width: 3px;
    border-radius: 4px;
    padding: 0 6px;
    height: 20px;
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.5px;
    min-width: 78px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ctrl-btn:hover,
.ctrl-btn:focus {
    border-color: var(--accent-cyan);
    background: rgba(0, 229, 255, 0.14);
    color: #fff;
    box-shadow: 0 0 10px var(--accent-cyan-dim);
    outline: none;
}

.ctrl-btn:active {
    border-bottom-width: 1px;
    transform: translateY(2px);
}

.ctrl-btn.listening {
    background: rgba(0, 229, 255, 0.2);
    border-color: var(--accent-cyan);
    color: #fff;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { box-shadow: 0 0 5px var(--accent-cyan-dim); }
    to { box-shadow: 0 0 15px var(--accent-cyan); }
}

.mode-btn {
    position: relative;
    background: linear-gradient(135deg, rgba(22, 22, 54, 0.88), rgba(10, 10, 28, 0.92));
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-fire);
    border-radius: 0;
    padding: 20px 46px;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 1.3, 0.4, 1), background 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 220px;
    font-family: var(--font-body);
    overflow: hidden;
    transform: skewX(var(--skew)); /* botón inclinado típico de juegos de pelea */
}

/* El contenido se des-inclina para que el texto quede recto */
.mode-btn > * {
    position: relative;
    z-index: 1;
    transform: skewX(calc(var(--skew) * -1));
}

/* Destello que cruza el botón al hacer hover/foco */
.mode-btn::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -70%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}

.mode-btn:hover,
.mode-btn:focus {
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.34), rgba(22, 22, 54, 0.96));
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 26px var(--accent-cyan-dim), 10px 10px 0 rgba(0, 0, 0, 0.45);
    transform: skewX(var(--skew)) translateX(8px) scale(1.05);
}

.mode-btn:hover::before,
.mode-btn:focus::before {
    left: 135%;
}

.mode-btn:hover,
.mode-btn:focus {
    outline: none;
}

.mode-btn:active {
    transform: skewX(var(--skew)) translateX(4px) scale(0.98);
    box-shadow: 0 0 26px var(--accent-cyan-dim), 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.mode-btn:disabled {
    cursor: not-allowed;
}

.mode-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.mode-name {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.mode-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

.net-instruction {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.5;
}

.net-instruction code {
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--accent-gold);
    font-family: monospace;
}

.net-actions {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* Panel estándar de menú (mismo acabado que los pedestales del selector) */
.net-card {
    --pc: var(--accent-cyan);
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--pc);
    box-shadow: var(--shadow-hard);
    padding: 22px 24px 24px;
    width: 280px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* La segunda tarjeta del lobby es el espejo de la primera, como los pedestales P1/P2 */
.net-actions .net-card:last-child {
    --pc: var(--accent-gold);
    border-left: 2px solid var(--line);
    border-right: 8px solid var(--pc);
    box-shadow: -6px 6px 0 rgba(0, 0, 0, 0.45);
}
.net-actions .net-card:last-child .net-card-title { color: var(--accent-gold); }

.net-card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--p1-color);
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.net-card-desc {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.4;
    flex-grow: 1;
}

.net-btn {
    padding: 12px;
    width: 100%;
    min-width: auto;
}

.net-btn .mode-name {
    font-size: 18px;
    margin-bottom: 0;
}

.net-divider {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 18px;
    font-family: var(--font-heading);
}

.net-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Campo de texto: fuente del juego, esquinas rectas y canto de color como los botones */
.net-input {
    background: var(--field-bg);
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-cyan);
    border-radius: 0;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.net-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.55;
}

.net-input:hover {
    border-color: var(--line-soft);
    border-left-color: var(--accent-cyan);
}

.net-input:focus {
    background: rgba(0, 229, 255, 0.08);
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 14px var(--accent-cyan-dim), var(--shadow-hard-sm);
}

.net-status {
    height: 20px;
    margin-top: 20px;
    color: var(--accent-fire);
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
}

/* ── Botón secundario (Volver / Salir): la versión pequeña de .mode-btn ── */
.back-btn {
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.2), rgba(22, 22, 54, 0.8));
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-fire);
    border-radius: 0;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    padding: 9px 24px;
    box-shadow: var(--shadow-hard-sm);
    transition: transform 0.2s var(--ease-pop), background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    transform: skewX(var(--skew));
    letter-spacing: 1px;
}

.back-btn:hover,
.back-btn:focus {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.4), rgba(22, 22, 54, 0.9));
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 15px var(--accent-fire-dim), var(--shadow-hard);
    transform: skewX(var(--skew)) translateX(4px) scale(1.05);
    outline: none;
}

.back-btn:active {
    transform: skewX(var(--skew)) translateX(2px) scale(0.97);
    box-shadow: 0 0 15px var(--accent-fire-dim), 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.scroll-btn {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 0, 0, 0.6));
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-cyan);
    border-radius: 0;
    color: var(--accent-cyan);
    font-size: 22px;
    padding: 10px 13px;
    cursor: pointer;
    box-shadow: var(--shadow-hard-sm);
    transition: transform 0.2s var(--ease-pop), background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 80px;
    transform: skewX(var(--skew));
}

.scroll-btn:hover,
.scroll-btn:focus {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.4), rgba(0, 0, 0, 0.8));
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    color: #fff;
    box-shadow: 0 0 15px var(--accent-cyan-dim), var(--shadow-hard);
    transform: skewX(var(--skew)) scale(1.05);
    outline: none;
}

.scroll-btn:active {
    transform: skewX(var(--skew)) scale(0.95);
}

.waiting-content {
    text-align: center;
    margin-top: 40px;
}

.waiting-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(0, 229, 255, 0.1);
    border-top: 4px solid var(--accent-cyan);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.waiting-msg {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.waiting-detail {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ══════════════════════════════
   SELECTOR DE PERSONAJES
   Mismo lenguaje visual que los menús y el HUD: tipografía pixel (--font-heading),
   esquinas rectas, inclinación --skew, sombras duras y colores de jugador --p1..--p4.
   ══════════════════════════════ */
#char-select-screen {
    padding: 0;
    justify-content: flex-start;
    overflow: hidden;
}

/* Color (--pc) y glow (--pg) de cada jugador, igual que .hud-slot */
.p1-pedestal, .p1-tag, .cursor-tag.p1, .char-card.p1-locked, .char-card.p1-cursor { --pc: var(--p1-color); --pg: var(--p1-glow); }
.p2-pedestal, .p2-tag, .cursor-tag.p2, .char-card.p2-locked, .char-card.p2-cursor { --pc: var(--p2-color); --pg: var(--p2-glow); }
.p3-pedestal, .p3-tag, .cursor-tag.p3, .char-card.p3-locked, .char-card.p3-cursor { --pc: var(--p3-color); --pg: var(--p3-glow); }
.p4-pedestal, .p4-tag, .cursor-tag.p4, .char-card.p4-locked, .char-card.p4-cursor { --pc: var(--p4-color); --pg: var(--p4-glow); }

/* ── Barra superior ── */
.charselect-top-bar {
    width: 100%;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    background: linear-gradient(180deg, rgba(5, 5, 16, 0.92) 0%, rgba(8, 8, 26, 0.6) 100%);
    position: relative;
    z-index: 10;
}

/* Línea láser, como las de la pantalla de título */
.charselect-top-bar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-fire), transparent);
    box-shadow: 0 0 10px var(--accent-fire-dim);
    opacity: 0.8;
}

/* Mismo botón secundario que .back-btn, en tamaño de barra superior */
.charselect-back-icon {
    justify-self: start;
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.2), rgba(22, 22, 54, 0.8));
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-fire);
    border-radius: 0;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    padding: 5px 14px;
    cursor: pointer;
    box-shadow: var(--shadow-hard-sm);
    transition: transform 0.2s var(--ease-pop), background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
    transform: skewX(var(--skew));
}

.charselect-back-icon:hover,
.charselect-back-icon:focus {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.4), rgba(22, 22, 54, 0.9));
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 15px var(--accent-fire-dim), var(--shadow-hard-sm);
    transform: skewX(var(--skew)) scale(1.05);
    outline: none;
}

.charselect-back-icon:active {
    transform: skewX(var(--skew)) scale(0.97);
}

.charselect-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.charselect-top-bar .banner-title {
    font-size: 32px;
    line-height: 1;
    letter-spacing: 3px;
    margin: 0;
}

.charselect-header-controls {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
}

.charselect-mode-badge,
.stocks-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-left: 4px solid var(--accent-cyan);
    font-family: var(--font-heading);
    transform: skewX(var(--skew));
}

.stocks-bar { border-left-color: var(--accent-gold); }

.mode-key {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0 5px;
    color: var(--accent-gold);
    font-size: 12px;
    line-height: 16px;
}

.mode-label,
.stocks-label {
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 1px;
}

.mode-val {
    color: var(--accent-cyan);
    font-size: 15px;
    letter-spacing: 1px;
}

/* Deslizador de vidas: la barra arcade común (ver «DESLIZADORES»), en dorado.
   No se inclina porque ya hereda la inclinación de .stocks-bar. */
.stocks-bar .stocks-range {
    --fill: var(--accent-gold);
    width: 66px;
    height: 12px;
}

.stocks-bar:focus-within {
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 10px var(--accent-cyan-dim);
}

.stocks-val {
    color: var(--accent-gold);
    font-size: 18px;
    min-width: 12px;
    text-align: center;
}

/* ── Layout principal: pedestales | parrilla | pedestales ── */
.charselect-main {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 8px;
    position: relative;
    z-index: 5;
}

/* ── Pedestales laterales (P1/P3 a la izquierda, P2/P4 a la derecha) ── */
.pedestal-side-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 224px;
    flex-shrink: 0;
    min-height: 0;
}

.pedestal-side {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(22, 22, 54, 0.88), rgba(10, 10, 28, 0.94));
    border: 2px solid var(--line);
    border-left: 8px solid var(--pc);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}

/* El lado derecho es el espejo del izquierdo (como los slots derechos del HUD) */
.right-side .pedestal-side {
    border-left: 2px solid var(--line);
    border-right: 8px solid var(--pc);
    box-shadow: -6px 6px 0 rgba(0, 0, 0, 0.45);
}

.pedestal-header-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 4px 10px 3px;
    background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 25%, transparent));
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1;
    letter-spacing: 2px;
    color: #000;
}

.right-side .pedestal-header-banner {
    justify-content: flex-end;
    background: linear-gradient(270deg, var(--pc), color-mix(in srgb, var(--pc) 25%, transparent));
}

.p-banner-tag {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ilustración grande del luchador */
.pedestal-art {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0 6px, transparent 6px 14px),
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--pc) 40%, transparent) 0%, transparent 72%);
}

.pedestal-art::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pc), transparent);
    z-index: 3;
}

/* Sin luchador (esperando turno o ALEATORIO): incógnita gigante */
.pedestal-side.is-empty .pedestal-art::before {
    content: '?';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 130px;
    line-height: 1;
    color: var(--pc);
    opacity: 0.22;
    text-shadow: 4px 4px 0 #000;
}

.pedestal-art .sprite-silhouette {
    width: 92%;
    height: 95%;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 2;
}

.pedestal-classic-canvas {
    display: none !important; /* El pedestal nunca muestra el canvas de cuadrados */
}

/* Ficha del luchador */
.pedestal-info {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.45);
    z-index: 4;
}

.pedestal-char-name {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 2px 2px 0 #000, 0 0 12px var(--pg);
    text-transform: uppercase;
}

.pedestal-char-subtitle {
    font-family: var(--font-display);
    font-size: 11px;
    line-height: 1.15;
    color: var(--accent-gold);
    letter-spacing: 1px;
    margin-top: 4px;
}

.pedestal-char-style {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--accent-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 3px;
}

.pedestal-char-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--text-secondary);
}

.pedestal-char-subtitle:empty,
.pedestal-char-style:empty,
.pedestal-char-stats:empty {
    display: none;
}

/* Barras de atributos (HP / DMG / SPD) */
.stat-row {
    --sc: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.stat-hp  { --sc: var(--accent-fire); }
.stat-dmg { --sc: var(--accent-gold); }
.stat-spd { --sc: var(--accent-cyan); }

.stat-label {
    width: 26px;
    text-align: left;
    letter-spacing: 1px;
    color: var(--sc);
}

.stat-pips {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.stat-pips i {
    height: 6px;
    background: rgba(255, 255, 255, 0.09);
    transform: skewX(-20deg);
}

.stat-pips i.on {
    background: var(--sc);
    box-shadow: 0 0 6px var(--sc);
}

/* ── Selector de aspecto dentro del pedestal ── */
.pedestal-skin-picker {
    flex-shrink: 0;
    margin: 6px 8px 0;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--accent-gold);
    border-left-width: 4px;
    box-shadow: 0 0 14px var(--accent-gold-dim);
    animation: skinPickerPop 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: 10;
}

@keyframes skinPickerPop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.skin-picker-header {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.skin-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.skin-option-tile {
    background: rgba(18, 18, 42, 0.9);
    border: 1px solid #444;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}

.skin-option-tile.selected {
    background: rgba(0, 229, 255, 0.2);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan-dim);
}

.skin-option-tile.selected .skin-tile-name {
    color: #fff;
    text-shadow: 0 0 6px var(--accent-cyan);
}

.skin-option-tile.selected .skin-tile-badge {
    display: block;
    background: var(--accent-cyan);
    color: #000;
}

.skin-tile-icon {
    font-size: 14px;
    line-height: 1;
}

.skin-tile-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.skin-tile-name {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    line-height: 1.1;
}

.skin-tile-desc {
    font-family: var(--font-display);
    font-size: 8px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.skin-tile-badge {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-heading);
    font-size: 7px;
    line-height: 9px;
    padding: 0 3px;
}

.skin-picker-legend {
    font-family: var(--font-display);
    font-size: 8px;
    color: var(--text-secondary);
    text-align: center;
    letter-spacing: 0.5px;
}

.legend-atk {
    color: var(--accent-gold);
}

/* Dispositivo de entrada de cada jugador */
.pedestal-players {
    flex-shrink: 0;
    width: 100%;
    padding: 7px 10px 8px;
}

.pedestal-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.right-side .pedestal-player-row {
    flex-direction: row-reverse;
}

.p-tag {
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 18px;
    padding: 0 8px;
    letter-spacing: 1px;
    background: var(--pc);
    color: #000;
    transform: skewX(var(--skew));
}

.input-select {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.5);
    color: var(--accent-gold);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 3px 6px;
    font-family: var(--font-display);
    font-size: 11px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-select:hover,
.input-select:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan-dim);
}

.input-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ── 4 jugadores: dos pedestales por lado, en formato compacto (retrato + ficha) ── */
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-side {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.pedestal-side-wrapper.right-side:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-side {
    grid-template-columns: minmax(0, 1fr) 86px;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) :is(.pedestal-header-banner, .pedestal-skin-picker) {
    grid-column: 1 / -1;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-art {
    grid-column: 1;
    grid-row: 2 / 4;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-info {
    grid-column: 2;
    grid-row: 2;
    background: none;
    padding: 6px 8px 0;
    align-self: center;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-players {
    grid-column: 2;
    grid-row: 3;
    padding: 5px 8px 6px;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-skin-picker {
    grid-row: 4;
    margin: 0 6px 6px;
}
.pedestal-side-wrapper.right-side:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-art {
    grid-column: 2;
}
.pedestal-side-wrapper.right-side:has(.pedestal-side:nth-child(2):not([style*="none"])) :is(.pedestal-info, .pedestal-players) {
    grid-column: 1;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-char-name {
    font-size: 15px;
    letter-spacing: 1px;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-char-subtitle {
    font-size: 9px;
    letter-spacing: 0.5px;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-char-style {
    font-size: 8px;
    letter-spacing: 1px;
}
.pedestal-side-wrapper:has(.pedestal-side:nth-child(2):not([style*="none"])) .pedestal-side.is-empty .pedestal-art::before {
    font-size: 70px;
}

/* ── Centro: parrilla de luchadores ── */
.charselect-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.char-grid-wrapper {
    position: relative;
    padding: 13px 16px;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-fire);
    box-shadow: var(--shadow-hard);
}

/* 4x4: 13 luchadores + ALEATORIO + emblema (2 huecos). Las 4 columnas las repite
   GRID_COLS en Game.updateCharSelect (script.js); 92 px es lo que cabe en alto a 1024x576 */
.char-grid {
    display: grid;
    grid-template-columns: repeat(4, 92px);
    grid-template-rows: repeat(4, 92px);
    gap: 8px 9px;
}

/* Carta de luchador: paralelogramo, igual que los botones de menú */
.char-card {
    --pc: var(--line);
    --pg: transparent;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
    border: 2px solid var(--line);
    transform: skewX(var(--skew));
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
    transition: transform 0.2s cubic-bezier(0.2, 1.3, 0.4, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.char-card:hover {
    border-color: var(--accent-cyan);
}

.char-card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Miniatura (muestra el aspecto elegido: sprites o geometría) sobre el color del luchador */
.char-preview {
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    background:
        radial-gradient(ellipse 62% 48% at 50% 58%, color-mix(in srgb, var(--char-color, #555) 55%, #fff 0%) 0%, transparent 78%),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 4px, transparent 4px 9px),
        linear-gradient(170deg, color-mix(in srgb, var(--char-color, #555) 78%, #05050f) 0%, color-mix(in srgb, var(--char-color, #555) 30%, #05050f) 100%);
}

/* El lienzo se dibuja a 3x: se reduce suavizado (los sprites pixel ya vienen ampliados sin suavizar) */
.char-preview-canvas {
    display: block;
    height: 100%;
    width: auto;
    image-rendering: auto;
    transform: skewX(calc(var(--skew) * -1)); /* des-inclinar para no deformar el sprite */
}

.char-skin-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-heading);
    font-size: 8px;
    line-height: 11px;
    padding: 0 4px;
    letter-spacing: 0.5px;
    display: none;
    z-index: 5;
    color: #000;
}

.char-skin-badge.pixel   { display: block; background: var(--accent-cyan); }
.char-skin-badge.clasico { display: block; background: var(--accent-gold); }

/* Destello que cruza la carta bajo el cursor (como en .mode-btn) */
.char-card-glow {
    position: absolute;
    top: 0; bottom: 0;
    left: -70%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.55s ease;
}

.char-card:is(.p1-cursor, .p2-cursor, .p3-cursor, .p4-cursor) .char-card-glow,
.char-card:hover .char-card-glow {
    left: 135%;
}

.char-card .char-name-banner {
    flex-shrink: 0;
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    background: rgba(5, 5, 16, 0.92);
    border-top: 2px solid var(--line);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 12px;
    line-height: 0.9;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.char-name-text {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1)); /* des-inclinar el texto */
}

/* Slots especiales: Aleatorio y Emblema */
.char-card-special {
    border-style: dashed;
}

.char-card-random {
    border-color: var(--accent-gold);
}

.char-card-random .char-name-banner {
    color: var(--accent-gold);
}

.char-card-emblem {
    grid-column: span 2; /* rellena el final de la última fila */
    cursor: default;
    opacity: 0.55;
}

.char-card-emblem:hover {
    border-color: var(--line);
}

.special-preview {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.14), #05050f 88%);
}

.special-preview > * {
    transform: skewX(calc(var(--skew) * -1));
}

.emblem-preview {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), #05050f 88%);
}

.random-icon {
    font-size: 22px;
    line-height: 1;
}

.random-question {
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000, 0 0 10px var(--accent-gold-dim);
    animation: blinkPulse 1.4s ease-in-out infinite;
}

.emblem-logo {
    font-size: 26px;
    line-height: 1;
}

.emblem-sub {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-secondary);
}

/* Etiquetas P1..P4 sobre la carta */
.char-card-tags {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 2px;
    z-index: 10;
}

.cursor-tag {
    font-family: var(--font-heading);
    font-size: 11px;
    line-height: 14px;
    padding: 0 6px 0 5px;
    letter-spacing: 1px;
    background: var(--pc);
    color: #000;
}

/* Cursor de un jugador sobre la carta */
.char-card:is(.p1-cursor, .p2-cursor, .p3-cursor, .p4-cursor) {
    border-color: var(--pc);
    box-shadow: 0 0 0 2px #000, 0 0 22px var(--pg), 8px 8px 0 rgba(0, 0, 0, 0.45);
    transform: skewX(var(--skew)) scale(1.07);
    z-index: 10;
    animation: csCursorPulse 0.7s ease-in-out infinite alternate;
}

.char-card:is(.p1-cursor, .p2-cursor, .p3-cursor, .p4-cursor) .char-name-banner {
    background: var(--pc);
    border-top-color: var(--pc);
    color: #000;
}

@keyframes csCursorPulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.22); }
}

/* Selección confirmada */
.char-card:is(.p1-locked, .p2-locked, .p3-locked, .p4-locked) {
    border-color: var(--pc);
    box-shadow: 0 0 0 2px #000, 0 0 14px var(--pg);
}

.char-card:is(.p1-locked, .p2-locked, .p3-locked, .p4-locked) .char-name-banner {
    border-top-color: var(--pc);
    color: var(--pc);
}

/* Cubre solo la miniatura: el nombre (banda de 24 px) sigue leyéndose */
.char-locked-overlay {
    display: none;
    position: absolute;
    inset: 0 0 24px 0;
    background: color-mix(in srgb, var(--pc) 20%, rgba(0, 0, 0, 0.62));
    align-items: center;
    justify-content: center;
    z-index: 8;
}

.char-card.is-locked .char-locked-overlay {
    display: flex;
}

.locked-icon {
    font-size: 34px;
    line-height: 1;
    color: var(--accent-gold);
    text-shadow: 3px 3px 0 #000, 0 0 14px var(--accent-gold-dim);
    transform: skewX(calc(var(--skew) * -1));
    animation: lockPop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes lockPop {
    from { transform: skewX(calc(var(--skew) * -1)) scale(0.4); opacity: 0; }
    to   { transform: skewX(calc(var(--skew) * -1)) scale(1); opacity: 1; }
}

/* ── Botón ¡A PELEAR! (se superpone al borde inferior de la parrilla, sin moverla) ── */
.ready-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 34px 5px;
    background: linear-gradient(135deg, var(--accent-fire), #6d0c20);
    border: 2px solid var(--accent-gold);
    border-left: 8px solid var(--accent-gold);
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transform: translateX(-50%) skewX(var(--skew));
    box-shadow: 0 0 26px var(--accent-fire-dim), 8px 8px 0 rgba(0, 0, 0, 0.45);
    animation: readyPulse 0.7s ease-in-out infinite alternate;
}

.ready-btn:hover,
.ready-btn:focus {
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    outline: none;
}

.ready-btn > * {
    transform: skewX(calc(var(--skew) * -1));
}

.ready-btn .ready-txt {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 3px;
    text-shadow: 3px 3px 0 #000;
}

.ready-btn .ready-hint {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--accent-gold);
    margin-top: 3px;
    text-transform: uppercase;
}

@keyframes readyPulse {
    from { transform: translateX(-50%) skewX(var(--skew)) scale(1); filter: brightness(1); }
    to   { transform: translateX(-50%) skewX(var(--skew)) scale(1.04); filter: brightness(1.2); }
}

/* ── Barra inferior: leyenda de controles ── */
.charselect-bottom-bar {
    width: 100%;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 20px;
    background: rgba(5, 5, 16, 0.85);
    border-top: 1px solid var(--line);
    z-index: 10;
}

.cs-bottom-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.key-badge {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
    border-radius: 4px;
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 11px;
    line-height: 16px;
    padding: 0 6px;
}

@media (prefers-reduced-motion: reduce) {
    .char-card, .ready-btn, .random-question, .pedestal-skin-picker, .locked-icon { animation: none; }
    .char-card-glow { display: none; }
}

/* ══════════════════════════════
   SELECTOR DE ESCENARIO
   ══════════════════════════════ */
#stage-select-screen {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #0b0b20 0%, #08081a 100%);
    padding: 30px 12px;
}

/* El relleno deja sitio a la escala, el aro y el brillo de la carta elegida:
   overflow-x: auto recorta también en vertical, así que sin él se cortaba. */
.stage-grid {
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    margin: -8px 0 0;
    padding: 34px 40px 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    max-width: 860px;
}
.stage-grid::-webkit-scrollbar { display: none; }
.stage-grid { -ms-overflow-style: none; scrollbar-width: none; }

/* Carta de escenario: el mismo paralelogramo que .char-card (marco, banda de nombre,
   destello y pulso de selección), con la miniatura a 16:9 sin deformar. */
.stage-card {
    flex: none;
    width: 248px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
    border: 2px solid var(--line);
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
    transition: transform 0.2s var(--ease-pop), border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

/* La miniatura se des-inclina y sobresale 14 px por lado para rellenar las esquinas */
.stage-card canvas {
    display: block;
    flex: none;
    width: calc(100% + 28px);
    max-width: none;
    height: auto;
    margin-left: -14px;
    transform: skewX(calc(var(--skew) * -1));
    filter: brightness(0.62) saturate(0.8);
    transition: filter 0.2s ease;
}

/* Destello que cruza la carta (como .char-card-glow) */
.stage-card::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -70%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.55s ease;
}

.stage-label {
    flex: none;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: rgba(5, 5, 16, 0.92);
    border-top: 2px solid var(--line);
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.stage-label .stage-name {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1)); /* des-inclinar el texto */
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.stage-card:hover {
    border-color: var(--accent-cyan);
}

.stage-card:hover canvas,
.stage-card.selected canvas {
    filter: none;
}

.stage-card:hover::after,
.stage-card.selected::after {
    left: 135%;
}

/* Escenario bajo el cursor: mismo tratamiento que la carta con cursor de jugador */
.stage-card.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px #000, 0 0 22px var(--accent-gold-dim), 8px 8px 0 rgba(0, 0, 0, 0.45);
    transform: skewX(var(--skew)) translateY(-6px) scale(1.06);
    z-index: 2;
    animation: csCursorPulse 0.7s ease-in-out infinite alternate;
}

.stage-card.selected .stage-label {
    background: var(--accent-gold);
    border-top-color: var(--accent-gold);
}

.stage-card.selected .stage-name {
    color: #000;
}

/* Leyenda de teclas reutilizable fuera del selector de personajes */
.screen-hints {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .stage-card.selected { animation: none; }
    .stage-card::after { display: none; }
}

/* ══════════════════════════════
   CANVAS DE JUEGO
   ══════════════════════════════ */
#gameCanvas {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

#gameCanvas.active {
    display: block;
    z-index: 5;
}

/* ══════════════════════════════
   PANTALLA DE VICTORIA
   ══════════════════════════════ */
/* Overlay oscuro semitransparente: el combate sigue visible detrás */
#victory-screen {
    --winner-color: var(--accent-gold);
    background: rgba(3, 1, 10, 0.72);
    backdrop-filter: blur(2px) saturate(0.7);
    overflow: hidden;
    align-items: stretch;
}

.winner-reveal-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 80px;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 5px 5px 0 #000, 0 0 20px var(--accent-gold-dim), 0 0 50px rgba(255, 215, 0, 0.5);
    letter-spacing: 10px;
    text-align: center;
    z-index: 10;
    animation: revealPulse 0.5s infinite alternate, revealShake 0.1s infinite;
}

@keyframes revealPulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes revealShake {
    0% { margin-left: -2px; margin-top: 1px; }
    50% { margin-left: 2px; margin-top: -1px; }
    100% { margin-left: -1px; margin-top: 2px; }
}

/* Fogonazo blanco del impacto */
.ko-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    pointer-events: none;
    z-index: 5;
    animation: koFlash 0.6s ease-out 0.05s both;
}

@keyframes koFlash {
    0%   { opacity: 0.95; }
    100% { opacity: 0; }
}

/* Foco de luz sobre el ganador + viñeta oscura en los bordes */
.ko-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 48% 78% at 76% 62%, color-mix(in srgb, var(--winner-color) 42%, transparent) 0%, transparent 72%),
        radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.82) 100%);
}

/* Retrato del ganador */
.victory-portrait {
    position: absolute;
    right: 3%;
    bottom: 0;
    width: 38%;
    height: 94%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom right;
    filter: drop-shadow(0 0 3px var(--winner-color)) drop-shadow(0 0 26px var(--winner-color));
    opacity: 0;
    pointer-events: none;
}

#victory-screen.has-winner .victory-portrait {
    animation: portraitIn 0.65s cubic-bezier(0.2, 0.9, 0.3, 1) 0.5s both;
}

@keyframes portraitIn {
    0%   { opacity: 0; transform: translateX(120px) skewX(-8deg); }
    100% { opacity: 1; transform: translateX(0) skewX(0); }
}

.victory-content {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 100%;
    text-align: center;
    animation: koShake 0.65s linear 0.18s both; /* temblor violento al caer el K.O. */
}

#victory-screen.has-winner .victory-content {
    align-self: flex-start;
    margin: auto 0 auto 4%;
    width: 58%;
    text-align: left;
}

@keyframes koShake {
    0%   { transform: translate(0, 0) rotate(0); }
    8%   { transform: translate(-16px, 10px) rotate(-1.2deg); }
    16%  { transform: translate(14px, -12px) rotate(1deg); }
    24%  { transform: translate(-12px, -8px) rotate(-0.8deg); }
    32%  { transform: translate(12px, 10px) rotate(0.8deg); }
    42%  { transform: translate(-8px, 6px) rotate(-0.5deg); }
    54%  { transform: translate(7px, -5px) rotate(0.4deg); }
    68%  { transform: translate(-4px, 3px); }
    82%  { transform: translate(3px, -2px); }
    100% { transform: translate(0, 0) rotate(0); }
}

/* "K.O." gigante */
.ko-text {
    display: inline-block;
    font-family: var(--font-impact);
    font-size: 250px;
    line-height: 0.82;
    letter-spacing: 6px;
    color: #fff;
    -webkit-text-stroke: 5px #000;
    paint-order: stroke fill;
    text-shadow: 10px 10px 0 var(--accent-fire), 0 0 70px rgba(255, 34, 68, 0.85);
    transform-origin: 50% 60%;
    animation: koSlam 0.55s cubic-bezier(0.12, 1.5, 0.3, 1) both;
}

.ko-text.long {
    font-size: 150px;
}

@keyframes koSlam {
    0%   { opacity: 0; transform: skewX(-10deg) scale(7) rotate(-8deg); filter: blur(10px); }
    50%  { opacity: 1; filter: blur(0); }
    68%  { transform: skewX(-10deg) scale(0.88) rotate(1deg); }
    100% { opacity: 1; transform: skewX(-10deg) scale(1) rotate(0); }
}

/* Banner inclinado con el nombre del ganador */
.victory-banner {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 34px 10px 22px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--winner-color) 55%, #000) 0%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
    border-left: 9px solid var(--winner-color);
    transform: skewX(var(--skew));
    animation: bannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.55s both;
}

.victory-banner > * {
    transform: skewX(calc(var(--skew) * -1));
}

@keyframes bannerIn {
    0%   { opacity: 0; translate: -140% 0; }
    100% { opacity: 1; translate: 0 0; }
}

.victory-crown {
    font-size: 34px;
    line-height: 1;
    animation: crownBounce 1s ease-in-out infinite;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.12); }
}

.victory-title {
    font-family: var(--font-impact);
    font-weight: 400;
    font-size: 66px;
    line-height: 1;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 3px 3px 0 #000, 0 0 28px var(--winner-color);
    animation: victoryGlow 2s ease-in-out infinite;
}

@keyframes victoryGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.victory-sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: #e8e8f8;
    margin-top: 4px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Marcador de eliminaciones: una ficha por luchador (la rellena Game.showVictory) */
.victory-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 12px;
    margin-top: 16px;
    opacity: 0;
}

.victory-stats:empty {
    display: none;
}

#victory-screen:not(.has-winner) .victory-stats {
    justify-content: center;
}

#victory-screen.has-winner .victory-stats {
    animation: bannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.75s both;
}

.vs-chip {
    --pc: var(--line-soft);
    --pg: transparent;
    display: flex;
    align-items: stretch;
    gap: 9px;
    height: 28px;
    padding-right: 11px;
    background: rgba(5, 5, 16, 0.8);
    border: 2px solid var(--line);
    font-family: var(--font-heading);
    line-height: 24px;
    white-space: nowrap;
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
}
.vs-chip.p1 { --pc: var(--p1-color); --pg: var(--p1-glow); }
.vs-chip.p2 { --pc: var(--p2-color); --pg: var(--p2-glow); }
.vs-chip.p3 { --pc: var(--p3-color); --pg: var(--p3-glow); }
.vs-chip.p4 { --pc: var(--p4-color); --pg: var(--p4-glow); }

.vs-chip.winner {
    border-color: var(--pc);
    box-shadow: 0 0 14px var(--pg), var(--shadow-hard-sm);
}

.vs-tag {
    padding: 0 8px;
    background: var(--pc);
    color: #000;
    font-size: 14px;
    letter-spacing: 1px;
}

.vs-name {
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vs-kills {
    color: var(--pc);
    font-size: 20px;
    text-shadow: 2px 2px 0 #000;
}

.vs-kills small {
    margin-left: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-secondary);
    text-shadow: none;
}

/* ══════════════════════════════
   ESTILOS PARA OPCIONES
   ══════════════════════════════ */
/* Fila de ajuste: etiqueta arriba, deslizador y valor debajo (no parte línea) */
.game-settings {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    align-items: center;
    gap: 7px 12px;
    text-align: left;
}

.settings-label {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 13px;
    letter-spacing: 1px;
    font-family: var(--font-body);
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.game-settings:focus-within .settings-label {
    color: var(--accent-gold);
}

.settings-slider {
    width: 100%;
    transform: skewX(var(--skew));
}

.settings-value {
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1;
    text-align: right;
    text-shadow: 2px 2px 0 #000;
}

/* ══════════════════════════════
   DESLIZADORES (volumen y vidas)
   Barra arcade como la de definitiva del HUD: pista oscura, relleno de color y
   tope blanco. El relleno es la sombra del tope recortada por overflow: hidden,
   así sigue al valor aunque lo cambie el JS sin lanzar eventos.
   El editor debug también usa .settings-slider, con --fill en el color de cada caja.
   ══════════════════════════════ */
.settings-slider,
.stocks-range {
    --fill: var(--accent-cyan);
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    margin: 0;
    padding: 0;
    background: #06121c;
    border: 2px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-slider::-webkit-slider-runnable-track,
.stocks-range::-webkit-slider-runnable-track {
    height: 100%;
    background: transparent;
}

.settings-slider::-webkit-slider-thumb,
.stocks-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 100%;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: -408px 0 0 400px var(--fill);
}

.settings-slider::-moz-range-track,
.stocks-range::-moz-range-track {
    height: 100%;
    background: transparent;
}

.settings-slider::-moz-range-progress,
.stocks-range::-moz-range-progress {
    height: 100%;
    background: var(--fill);
}

.settings-slider::-moz-range-thumb,
.stocks-range::-moz-range-thumb {
    width: 8px;
    height: 100%;
    background: #fff;
    border: 0;
    border-radius: 0;
}

.settings-slider:hover,
.settings-slider:focus,
.stocks-range:hover,
.stocks-range:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan-dim);
}

/* El resto de deslizadores (editor debug) conservan su aviso de foco */
input[type="range"]:focus {
    box-shadow: 0 0 10px var(--accent-cyan-dim);
    outline: none;
}

/* «Volver» de Opciones: el .back-btn de siempre, anclado arriba a la izquierda */
.options-back-btn {
    position: absolute;
    top: 22px;
    left: 26px;
    margin-top: 0;
    font-size: 15px;
    padding: 7px 18px;
}

/* ══════════════════════════════
   LEGACY - Paneles de jugador
   ══════════════════════════════ */
.player-info {
    width: 170px;
    text-align: center;
    padding: 18px 14px;
    border-radius: var(--radius);
    border: 2px solid #333;
    background: rgba(15, 15, 30, 0.8);
    flex-shrink: 0;
}

.p1-info { border-color: var(--p1-color); box-shadow: inset 0 0 30px rgba(0, 170, 255, 0.06); }
.p2-info { border-color: var(--p2-color); box-shadow: inset 0 0 30px rgba(255, 68, 119, 0.06); }
.p3-info { border-color: var(--p3-color); box-shadow: inset 0 0 30px rgba(0, 255, 170, 0.06); flex: 1; margin: 0 10px; }
.p4-info { border-color: var(--p4-color); box-shadow: inset 0 0 30px rgba(170, 0, 255, 0.06); flex: 1; margin: 0 10px; }

.player-label {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}
/* En Opciones, el rótulo toma el color del jugador de su panel */
.controls-panel .player-label {
    margin-bottom: 7px;
    line-height: 1;
    color: var(--pc);
    text-shadow: 2px 2px 0 #000, 0 0 12px var(--pg);
}
.p1-info .player-label { color: var(--p1-color); }
.p2-info .player-label { color: var(--p2-color); }
.p3-info .player-label { color: var(--p3-color); }
.p4-info .player-label { color: var(--p4-color); }

.selected-char-name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    min-height: 24px;
    color: var(--text-primary);
}

.selected-char-style {
    font-size: 12px;
    color: var(--accent-gold);
    min-height: 18px;
    margin-top: 4px;
}

.hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 14px;
    line-height: 1.6;
}

/* ══════════════════════════════
   SELECTOR DE ESCENARIO (layout)
   ══════════════════════════════ */
.stage-scroll-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ══════════════════════════════
   VICTORIA (layout)
   ══════════════════════════════ */
.victory-prompt {
    margin-top: 30px;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
}

/* ══════════════════════════════
   INDICADOR DE GAMEPAD
   ══════════════════════════════ */
/* Una etiqueta inclinada por mando (como .p-tag), con su P1..P4 DENTRO:
   antes el rótulo colgaba por debajo y quedaba fuera de los 576 px. */
.gamepad-indicator {
    position: absolute;
    bottom: 7px;
    right: 12px;
    display: flex;
    gap: 4px;
    align-items: center;
    z-index: 20;
    pointer-events: none;
}

.gamepad-dot {
    width: 22px;
    height: 13px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-soft);
    background: var(--field-bg);
    transform: skewX(var(--skew));
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    opacity: 0.55;
}

.gamepad-dot.connected {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan-dim), 0 0 16px rgba(0, 229, 255, 0.15);
    opacity: 1;
    animation: gamepadPulse 2s ease-in-out infinite;
}

.gamepad-dot::after {
    content: attr(data-label);
    font-size: 9px;
    line-height: 1;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    white-space: nowrap;
}

.gamepad-dot.connected::after {
    color: #000;
}

@keyframes gamepadPulse {
    0%, 100% { box-shadow: 0 0 8px var(--accent-cyan-dim); }
    50% { box-shadow: 0 0 14px var(--accent-cyan), 0 0 24px rgba(0, 229, 255, 0.2); }
}

.gamepad-toast {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 20, 40, 0.9);
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-cyan);
    padding: 10px 18px;
    color: var(--accent-cyan);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 25;
    box-shadow: 0 0 20px var(--accent-cyan-dim), var(--shadow-hard-sm);
    animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.4s ease-in 2.6s forwards;
    pointer-events: none;
}

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

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

/* ══════════════════════════════
   PESTAÑAS DE OPCIONES Y AUDIO
   ══════════════════════════════ */
.options-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
    justify-content: center;
}

/* Pestaña: botón inclinado pequeño. Activa = rellena en cian con canto dorado;
   con foco = borde cian y brillo (se pueden dar las dos a la vez). */
.tab-btn {
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 6px solid var(--line-soft);
    border-radius: 0;
    padding: 7px 22px;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-hard-sm);
    transform: skewX(var(--skew));
    transition: transform 0.2s var(--ease-pop), background 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover,
.tab-btn:focus {
    color: var(--text-primary);
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-cyan);
    box-shadow: 0 0 15px var(--accent-cyan-dim), var(--shadow-hard-sm);
    transform: skewX(var(--skew)) scale(1.05);
    outline: none;
}

.tab-btn:active {
    transform: skewX(var(--skew)) scale(0.97);
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(22, 22, 54, 0.96));
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}

.tab-icon {
    font-size: 18px;
    line-height: 1;
}

.tab-content {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.tab-content.active {
    display: flex;
}

.audio-panel {
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    box-shadow: var(--shadow-hard);
    padding: 22px 30px 26px;
    width: 440px;
    text-align: center;
}

.audio-icon-large {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.audio-title {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    margin-bottom: 6px;
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 #000;
    text-transform: uppercase;
}

.audio-settings {
    margin-top: 18px;
}

/* ══════════════════════════════
   MENÚ DE PAUSA
   ══════════════════════════════ */
.pause-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(5, 5, 16, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

/* ── Votación de pausa online ── */
.pause-vote-banner {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translate(-50%, -20px) skewX(var(--skew));
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 440px;
    padding: 14px 26px 18px;
    background: linear-gradient(100deg, rgba(10, 10, 26, 0.94) 0%, rgba(26, 18, 4, 0.94) 100%);
    border: 2px solid var(--accent-gold);
    border-left-width: 6px;
    box-shadow: 0 0 28px var(--accent-gold-dim), inset 0 0 18px rgba(255, 215, 0, 0.06);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}
.pause-vote-banner.show {
    opacity: 1;
    transform: translate(-50%, 0) skewX(var(--skew));
}
.pause-vote-banner.resume {
    top: auto;
    bottom: 22px;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 28px var(--accent-cyan-dim), inset 0 0 18px rgba(0, 229, 255, 0.06);
    background: linear-gradient(100deg, rgba(10, 10, 26, 0.94) 0%, rgba(2, 22, 30, 0.94) 100%);
}
.pause-vote-banner > * { transform: skewX(calc(var(--skew) * -1)); }
.pv-icon {
    font-size: 34px;
    color: var(--accent-gold);
    text-shadow: 0 0 12px var(--accent-gold-dim);
    animation: pvPulse 1s ease-in-out infinite;
}
.pause-vote-banner.resume .pv-icon { color: var(--accent-cyan); text-shadow: 0 0 12px var(--accent-cyan-dim); }
@keyframes pvPulse {
    0%, 100% { transform: skewX(10deg) scale(1); opacity: 1; }
    50% { transform: skewX(10deg) scale(1.15); opacity: 0.7; }
}
.pv-body { display: flex; flex-direction: column; gap: 4px; }
.pv-title {
    font-family: var(--font-impact);
    font-size: 26px;
    letter-spacing: 2px;
    color: var(--text-primary);
    line-height: 1;
}
.pv-title .pv-player { color: var(--accent-gold); }
.pause-vote-banner.resume .pv-title .pv-player { color: var(--accent-cyan); }
.pv-sub {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 1px;
}
.pv-sub kbd {
    font-family: var(--font-tech);
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--text-primary);
}
.pv-pips { display: flex; gap: 6px; margin-top: 4px; }
.pv-pip {
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}
.pv-pip.ok { color: #050510; border-color: transparent; }
.pv-pip.ok.p1 { background: var(--p1-color); box-shadow: 0 0 8px var(--p1-glow); }
.pv-pip.ok.p2 { background: var(--p2-color); box-shadow: 0 0 8px var(--p2-glow); }
.pv-pip.ok.p3 { background: var(--p3-color); box-shadow: 0 0 8px var(--p3-glow); }
.pv-pip.ok.p4 { background: var(--p4-color); box-shadow: 0 0 8px var(--p4-glow); }
.pv-timer {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    transform: none;
}
.pv-timer-fill {
    height: 100%;
    width: 100%;
    background: var(--accent-gold);
    transform-origin: left center;
}
.pause-vote-banner.resume .pv-timer-fill { background: var(--accent-cyan); }
.pause-btn.voted {
    opacity: 0.55;
    pointer-events: none;
}

/* Panel estándar de menú, en dorado. Compacto para que el banner de
   «continuar» (abajo) no tape el último botón. */
.pause-modal {
    position: relative;
    background: linear-gradient(135deg, rgba(22, 22, 54, 0.96), rgba(10, 10, 28, 0.98));
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    box-shadow: 0 0 30px var(--accent-gold-dim), 8px 8px 0 rgba(0, 0, 0, 0.5);
    padding: 22px 44px 28px 40px;
    text-align: center;
    min-width: 370px;
    animation: pausePopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: translate 0.25s ease;
}

/* Línea láser bajo el título, como en el selector de personajes */
.pause-modal::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 84px;
    height: 2px;
    background: var(--laser);
    box-shadow: 0 0 10px var(--accent-fire-dim);
    opacity: 0.7;
}

/* Votación de «continuar» en online: el banner sale abajo, así que el menú sube */
#game-container:has(.pause-vote-banner.resume.show) .pause-modal {
    translate: 0 -46px;
}

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

.pause-title {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: var(--accent-gold);
    margin-bottom: 30px;
    letter-spacing: 6px;
    text-shadow: 3px 3px 0 #000, 0 0 18px var(--accent-gold-dim);
    transform: skewX(var(--skew));
}

.pause-btn {
    padding: 10px 30px;
    margin-bottom: 11px;
    width: 100%;
    min-width: 250px;
    background: rgba(0, 0, 0, 0.6);
}

.pause-btn:last-child {
    margin-bottom: 0;
}

.pause-btn .mode-name {
    font-size: 18px;
    margin-bottom: 0;
}

/* Salir es la acción destructiva: se enciende en rojo, con ratón o con foco */
.pause-btn-exit:hover,
.pause-btn-exit:focus {
    border-color: var(--accent-fire);
    border-left-color: var(--accent-fire);
    box-shadow: 0 0 26px var(--accent-fire-dim), 10px 10px 0 rgba(0, 0, 0, 0.45);
}
.pause-btn-exit:hover .mode-name,
.pause-btn-exit:focus .mode-name {
    color: var(--accent-fire);
}

/* Dentro de la pausa el panel de audio no se enmarca otra vez */
.pause-modal .audio-panel {
    width: 300px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.pause-back-btn {
    margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════
   FONDO DINÁMICO DE MENÚS
   <canvas id="menu-bg"> (animado por menu-bg.js) o un <video id="menu-bg">.
   Las pantallas de menú usan fondos semitransparentes para dejarlo ver.
   ═══════════════════════════════════════════════════════════ */
#menu-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

#title-screen {
    background: radial-gradient(ellipse at 50% 45%, rgba(5, 2, 15, 0.1) 0%, rgba(5, 2, 15, 0.72) 100%);
}

#mode-select-screen, #network-screen, #waiting-screen, #options-screen, #stage-select-screen, #char-select-screen {
    background: linear-gradient(180deg, rgba(8, 8, 26, 0.7) 0%, rgba(5, 5, 16, 0.88) 100%);
}

/* Viñeta global sobre todo el juego */
#game-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}

/* ═══════════════════════════════════════════════════════════
   TIPOGRAFÍA DE IMPACTO (Bebas Neue / Oswald)
   ═══════════════════════════════════════════════════════════ */
.game-title      { font-size: 86px; letter-spacing: 8px; line-height: 0.95; }
.title-accent    { font-size: 150px; letter-spacing: 12px; }
.subtitle        { font-family: var(--font-display); font-size: 18px; letter-spacing: 10px; }
.screen-title    { font-size: 48px; letter-spacing: 6px; transform: skewX(var(--skew)); text-shadow: 3px 3px 0 #000, 0 0 18px var(--accent-gold-dim); }
.mode-name       { font-size: 34px; letter-spacing: 3px; }
.mode-desc       { font-family: var(--font-display); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.pause-title     { font-size: 52px; letter-spacing: 8px; }
.player-label    { font-size: 24px; letter-spacing: 3px; }
.audio-title     { font-size: 28px; letter-spacing: 3px; }

/* ═══════════════════════════════════════════════════════════
   HUD DE COMBATE  (controlado por hud.js)
   Se dibuja encima del canvas; todo es CSS puro (clip-path, transform, opacity).
   ═══════════════════════════════════════════════════════════ */
#combat-hud {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    grid-template-columns: 1fr 128px 1fr;
    align-items: start;
    column-gap: 14px;
    padding: 12px 16px 0;
    pointer-events: none;
    font-family: var(--font-impact);
    text-transform: uppercase;
}

#combat-hud.active {
    display: grid;
    animation: hudIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

/* Velo oscuro tras la franja superior: nombres y puntos se leen también
   sobre escenarios claros (roca, cielo). Va por detrás de todo el HUD. */
#combat-hud::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 132px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
    pointer-events: none;
}

@keyframes hudIn {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: none; }
}

.hud-col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.hud-col-left  { align-items: flex-start; }
.hud-col-right { align-items: flex-end; }

/* ── Slot de jugador ── */
.hud-slot {
    --pc: #fff;                     /* color del jugador */
    --pg: rgba(255, 255, 255, 0.4); /* glow del jugador */
    --sk: -10deg;                   /* inclinación (P1/P3: "/"  ·  P2/P4: "\") */
    display: flex;
    gap: 9px;
    width: 100%;
    max-width: 392px;
    transition: opacity 0.3s, filter 0.3s;
}
.hud-slot.right { flex-direction: row-reverse; --sk: 10deg; }
.hud-slot.compact { max-width: 300px; gap: 7px; }

.hud-slot[data-p="1"] { --pc: var(--p1-color); --pg: var(--p1-glow); }
.hud-slot[data-p="2"] { --pc: var(--p2-color); --pg: var(--p2-glow); }
.hud-slot[data-p="3"] { --pc: var(--p3-color); --pg: var(--p3-glow); }
.hud-slot[data-p="4"] { --pc: var(--p4-color); --pg: var(--p4-glow); }

.hud-slot.dead { opacity: 0.45; filter: grayscale(0.75); }

/* ── Retrato ── */
.hud-portrait {
    position: relative;
    flex: none;
    width: 68px;
    height: 68px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--char-color, #555), #000 88%);
    border: 2px solid var(--pc);
    box-shadow: 0 0 0 2px #000, 0 0 16px var(--pg), inset 0 0 12px rgba(0, 0, 0, 0.7);
    transform: skewX(var(--sk));
}

.hud-portrait-img {
    position: absolute;
    inset: -6px;
    background-repeat: no-repeat;
    background-size: cover;         /* los retratos son caras recortadas */
    background-position: 50% 30%;
    transform: skewX(calc(var(--sk) * -1));
}

.hud-ptag {
    position: absolute;
    bottom: 0; left: 0;
    padding: 0 8px 0 6px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
    color: #000;
    background: var(--pc);
}
.hud-slot.right .hud-ptag { left: auto; right: 0; padding: 0 6px 0 8px; }

/* ── Columna de información ── */
.hud-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.hud-nameline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 1.5px;
    color: #fff;
    /* contorno negro por los cuatro lados + sombra dura + brillo del jugador */
    text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 12px var(--pg);
}
.hud-slot.right .hud-nameline { flex-direction: row-reverse; }

.hud-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hud-pts-wrap { flex: none; display: inline-flex; align-items: baseline; gap: 4px; }
.hud-pts-wrap small { font-family: var(--font-display); font-size: 10px; letter-spacing: 2px; opacity: 0.9; }
.hud-pts { display: inline-block; color: var(--pc); font-size: 24px; }
.hud-pts.bump { animation: ptsBump 0.4s cubic-bezier(0.2, 1.8, 0.4, 1); }

@keyframes ptsBump {
    0%   { transform: scale(2); filter: brightness(2); }
    100% { transform: scale(1); filter: none; }
}

/* ── Barra de salud: marco metálico + capas (fondo · daño residual · vida · marcas · brillo) ── */
.hud-hp {
    position: relative;
    height: 26px;
    padding: 3px;
    transform: skewX(calc(var(--sk) * 1.8));
    background: linear-gradient(180deg, #f3f7ff 0%, #9aa7ba 28%, #4a5568 50%, #8e9bb0 78%, #d5deec 100%);
    box-shadow: 0 0 0 1px #000, 0 5px 14px rgba(0, 0, 0, 0.65), 0 0 14px var(--pg);
}

.hud-hp-track {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #14040a;
    box-shadow: inset 0 2px 6px #000;
}

.hud-hp-ghost, .hud-hp-fill, .hud-hp-ticks, .hud-hp-gloss {
    position: absolute;
    inset: 0;
}

/* DAÑO RESIDUAL: baja con retardo (transition-delay) respecto a la barra principal */
.hud-hp-ghost {
    background: linear-gradient(180deg, #ffffff 0%, #ffe14d 45%, #f5b800 100%);
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.7s cubic-bezier(0.3, 0.1, 0.2, 1) 0.55s;
}

/* VIDA ACTUAL: degradado rojo → naranja → amarillo → verde (anclado al borde exterior) */
.hud-hp-fill {
    background: linear-gradient(90deg, #ff2d55 0%, #ff8a00 22%, #ffe600 42%, #7dff3a 68%, #00ff9d 100%);
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.09s linear;
}
.hud-slot.right .hud-hp-fill {
    background: linear-gradient(270deg, #ff2d55 0%, #ff8a00 22%, #ffe600 42%, #7dff3a 68%, #00ff9d 100%);
}

.hud-hp-ticks {
    background: repeating-linear-gradient(90deg,
        transparent 0, transparent calc(10% - 2px),
        rgba(0, 0, 0, 0.5) calc(10% - 2px), rgba(0, 0, 0, 0.5) 10%);
}

.hud-hp-gloss {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 46%,
        transparent 50%, rgba(0, 0, 0, 0.28) 100%);
}

/* Vida baja: el marco late en rojo */
.hud-slot.low .hud-hp { animation: hpLow 0.55s ease-in-out infinite alternate; }
@keyframes hpLow {
    from { box-shadow: 0 0 0 1px #000, 0 5px 14px rgba(0, 0, 0, 0.65), 0 0 10px rgba(255, 30, 60, 0.4); }
    to   { box-shadow: 0 0 0 1px #000, 0 5px 14px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 30, 60, 1); }
}

/* Impacto: la info vibra y el retrato se enciende */
.hud-slot.hit .hud-info { animation: hudHit 0.3s linear; }
.hud-slot.hit .hud-portrait { animation: portraitHit 0.3s linear; }

@keyframes hudHit {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
@keyframes portraitHit {
    0%   { transform: skewX(var(--sk)) scale(1.1); filter: brightness(2.6) saturate(0) ; box-shadow: 0 0 0 2px #fff, 0 0 26px #fff; }
    100% { transform: skewX(var(--sk)) scale(1); filter: none; }
}

/* ── Definitiva + vidas ── */
.hud-subline {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 11px;
}
.hud-slot.right .hud-subline { flex-direction: row-reverse; }

.hud-ult {
    position: relative;
    width: 58%;
    height: 10px;
    overflow: hidden;
    background: #06121c;
    border: 1px solid #2f5470;
    transform: skewX(calc(var(--sk) * 1.8));
}
.hud-ult-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0077aa, #00e5ff);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
}
.hud-slot.right .hud-ult-fill {
    background: linear-gradient(270deg, #0077aa, #00e5ff);
    transform-origin: right center;
}
.hud-ult-text {
    position: absolute;
    inset: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 8px;
    line-height: 8px;
    letter-spacing: 3px;
    color: #021018;
    opacity: 0;
}
.hud-ult.ready { border-color: #fff; animation: ultReady 0.5s ease-in-out infinite alternate; }
.hud-ult.ready .hud-ult-text { opacity: 1; }
.hud-ult.active .hud-ult-fill { background: linear-gradient(90deg, #ff9900, #ffee00); }
@keyframes ultReady {
    from { box-shadow: 0 0 4px #00e5ff; filter: brightness(1); }
    to   { box-shadow: 0 0 16px #00e5ff, 0 0 4px #fff; filter: brightness(1.5); }
}

.hud-stocks { display: flex; gap: 4px; }
.hud-stocks .pip {
    width: 11px;
    height: 11px;
    background: var(--pc);
    border: 1px solid #fff;
    box-shadow: 0 0 6px var(--pg);
    transform: skewX(-18deg);
    transition: opacity 0.3s, background 0.3s;
}
.hud-stocks .pip.lost { background: transparent; border-color: #555; box-shadow: none; opacity: 0.5; }

/* ── Variante compacta (P3/P4) ── */
.hud-slot.compact .hud-portrait { width: 46px; height: 46px; }
.hud-slot.compact .hud-ptag     { font-size: 10px; line-height: 12px; padding: 0 5px; }
.hud-slot.compact .hud-nameline { font-size: 17px; }
.hud-slot.compact .hud-pts      { font-size: 17px; }
.hud-slot.compact .hud-pts-wrap small { display: none; }
.hud-slot.compact .hud-hp       { height: 17px; padding: 2px; }
.hud-slot.compact .hud-ult      { height: 6px; }
.hud-slot.compact .hud-ult-text { display: none; }
.hud-slot.compact .hud-subline  { min-height: 8px; }
.hud-slot.compact .hud-stocks .pip { width: 8px; height: 8px; }

/* ── Temporizador central ── */
.hud-center { display: flex; justify-content: center; }

.hud-timer {
    position: relative;
    width: 128px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.35));
}

.hud-timer-frame {
    position: relative;
    height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffe27a, #c58a00 50%, #ffe27a);
    clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
}
.hud-timer-frame::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: linear-gradient(180deg, rgba(28, 20, 56, 0.94), rgba(8, 6, 22, 0.97));
    clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
}

.hud-timer-label {
    position: relative;
    margin-bottom: -4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 5px;
    text-indent: 5px;
    color: var(--accent-gold);
}

.hud-timer-num {
    position: relative;
    display: block;
    min-width: 2ch;
    text-align: center;
    font-size: 64px;
    line-height: 0.92;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 3px 3px 0 #000, 0 0 16px rgba(255, 215, 0, 0.6);
}

/* < 10 s: rojo + latido */
.hud-timer.danger {
    animation: timerThrob 0.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 30, 50, 0.85));
}
.hud-timer.danger .hud-timer-frame { background: linear-gradient(180deg, #ff8585, #b0001e 50%, #ff8585); }
.hud-timer.danger .hud-timer-label { color: #ff5a5a; }
.hud-timer.danger .hud-timer-num   { color: #ff3b3b; text-shadow: 3px 3px 0 #000, 0 0 24px rgba(255, 40, 40, 1); }
.hud-timer-num.tick { animation: timerTick 0.45s cubic-bezier(0.2, 1.8, 0.4, 1); }

@keyframes timerThrob {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
@keyframes timerTick {
    0%   { transform: scale(1.55); }
    100% { transform: scale(1); }
}

/* ── Contador de combos (laterales) ── */
.hud-combo {
    --cc: #fff;
    --cg: rgba(255, 255, 255, 0.55);
    position: absolute;
    top: 172px;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    line-height: 1;
    transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 1.3, 0.3, 1), visibility 0s linear 0.25s;
}
.hud-combo-left  { left: 18px;  text-align: left;  transform: translateX(-70px); }
.hud-combo-right { right: 18px; text-align: right; transform: translateX(70px); }

.hud-combo.show {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.hud-combo[data-tier="2"] { --cc: #ffd400; --cg: rgba(255, 212, 0, 0.65); }
.hud-combo[data-tier="3"] { --cc: #ff3b1f; --cg: rgba(255, 59, 31, 0.8); }
.hud-combo.shake { animation: comboShake 0.25s linear; }
.hud-combo.end   { opacity: 0.8; }

.combo-num {
    display: inline-block;
    font-size: 108px;
    line-height: 0.85;
    color: #fff;
    -webkit-text-stroke: 3px #000;
    paint-order: stroke fill;
    text-shadow: 5px 5px 0 var(--cc), 0 0 30px var(--cg);
    transform: skewX(-10deg);
    transform-origin: left bottom;
}
.hud-combo-right .combo-num { transform-origin: right bottom; }
.hud-combo[data-tier="2"] .combo-num { font-size: 124px; }
.hud-combo[data-tier="3"] .combo-num { font-size: 142px; }
.hud-combo.end .combo-num { filter: saturate(0.4) brightness(0.8); }

.combo-num.pop { animation: comboPop 0.34s cubic-bezier(0.2, 1.7, 0.4, 1); }

@keyframes comboPop {
    0%   { transform: skewX(-10deg) scale(2.2); filter: brightness(2.6); }
    55%  { transform: skewX(-10deg) scale(0.86); }
    100% { transform: skewX(-10deg) scale(1); filter: none; }
}
@keyframes comboShake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-5px, 3px); }
    50%  { transform: translate(5px, -3px); }
    75%  { transform: translate(-3px, -2px); }
    100% { transform: translate(0, 0); }
}

.combo-label {
    display: block;
    font-size: 42px;
    letter-spacing: 7px;
    color: var(--cc);
    text-shadow: 3px 3px 0 #000, 0 0 14px var(--cg);
    transform: skewX(-10deg);
}

.combo-dmg {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-left: 4px solid var(--cc);
    transform: skewX(-10deg);
}
.hud-combo-right .combo-dmg { border-left: 0; border-right: 4px solid var(--cc); }

@media (prefers-reduced-motion: reduce) {
    .ko-text, .ko-flash, .victory-content, .hud-combo.shake, .hud-timer.danger { animation: none; }
}

/* ══════════════════════════════
   ONLINE: CUENTA, LOBBY Y BUSCADOR DE SALAS
   ══════════════════════════════ */
.net-panel[hidden],
.turn-indicator[hidden],
#btn-start-charselect[hidden] { display: none !important; }

.net-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: netPanelIn 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

@keyframes netPanelIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.net-card-wide { width: 420px; }
.net-card-wide .net-card-desc { margin-bottom: 18px; }

.net-input-small { font-size: 13px; padding: 7px 8px; margin-top: 8px; width: 100%; border-left-width: 4px; }

.net-advanced {
    text-align: left;
    color: var(--text-secondary);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.net-advanced summary { cursor: pointer; user-select: none; outline: none; transition: color 0.2s ease; }
.net-advanced summary:hover,
.net-advanced summary:focus { color: var(--accent-cyan); }

.net-welcome {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.net-username {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000, 0 0 10px var(--accent-gold-dim);
    letter-spacing: 1px;
}

/* Acción menor (cambiar nombre, actualizar): etiqueta inclinada con la fuente del juego */
.net-link-btn {
    background: var(--field-bg);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0;
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    cursor: pointer;
    transform: skewX(var(--skew));
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.net-link-btn:hover,
.net-link-btn:focus {
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    background: var(--accent-cyan-dim);
    color: #fff;
    box-shadow: 0 0 10px var(--accent-cyan-dim);
    outline: none;
}
.net-link-btn:active { transform: skewX(var(--skew)) scale(0.96); }

.room-browser {
    width: 580px;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-cyan);
    box-shadow: var(--shadow-hard);
    padding: 16px 18px 18px;
}
.room-browser-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--line);
}
.room-browser-head .net-card-title { margin: 0; }

.room-list {
    list-style: none;
    max-height: 230px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 8px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) rgba(0, 0, 0, 0.4);
}
.room-list::-webkit-scrollbar { width: 6px; }
.room-list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.room-list::-webkit-scrollbar-thumb { background: var(--accent-cyan); }

.room-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 26px 0;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    border: 2px dashed var(--line);
}
.room-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 8px 16px 8px 12px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.07), rgba(0, 0, 0, 0.25));
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent-cyan);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
/* La fila responde igual al ratón que al foco de su botón (teclado / mando) */
.room-item:hover,
.room-item:focus-within {
    transform: translateX(4px);
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.16), rgba(0, 0, 0, 0.3));
    border-color: var(--accent-cyan);
}
.room-item.full, .room-item.playing { border-left-color: #555; opacity: 0.6; }
.room-item.full:hover, .room-item.playing:hover { transform: none; border-color: var(--line); border-left-color: #555; }
.room-name { font-weight: 700; color: var(--text-primary); letter-spacing: 1px; text-transform: uppercase; }
.room-host { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); letter-spacing: 0.5px; }
.room-count {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    font-size: 18px;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #000;
}
.room-join-btn {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(0, 0, 0, 0.5));
    border: 2px solid var(--line);
    border-left: 4px solid var(--accent-cyan);
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    padding: 5px 14px;
    cursor: pointer;
    transform: skewX(var(--skew));
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
    transition: transform 0.2s var(--ease-pop), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.room-join-btn:hover:not(:disabled),
.room-join-btn:focus:not(:disabled) {
    color: #fff;
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-cyan-dim), 3px 3px 0 rgba(0, 0, 0, 0.45);
    outline: none;
    transform: skewX(var(--skew)) scale(1.06);
}
.room-join-btn:active:not(:disabled) { transform: skewX(var(--skew)) scale(0.96); }
.room-join-btn:disabled { border-color: #555; color: #777; cursor: not-allowed; background: none; box-shadow: none; }

/* ── Sala de espera ── */
.waiting-room-name {
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--accent-cyan);
    letter-spacing: 3px;
    margin: -10px 0 16px;
    text-shadow: 2px 2px 0 #000;
    text-transform: uppercase;
}
.lobby-player-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 280px);
    gap: 12px 16px;
}
/* Ranura de jugador: bloque con su P1..P4 en el color del jugador (como .hud-ptag) */
.lobby-player {
    --pc: #444;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 24%, transparent), rgba(10, 10, 28, 0.9));
    border: 2px solid var(--line);
    box-shadow: var(--shadow-hard-sm);
    min-height: 46px;
    animation: netPanelIn 0.3s ease both;
}
.lobby-player.p1 { --pc: var(--p1-color); }
.lobby-player.p2 { --pc: var(--p2-color); }
.lobby-player.p3 { --pc: var(--p3-color); }
.lobby-player.p4 { --pc: var(--p4-color); }
/* Ranura libre: hueca y discontinua, para que no compita con las ocupadas */
.lobby-player.empty {
    --pc: #3a3a55;
    color: var(--text-secondary);
    background: rgba(5, 5, 16, 0.45);
    border-style: dashed;
    box-shadow: none;
}
.lobby-slot {
    align-self: stretch;
    display: grid;
    place-items: center;
    min-width: 44px;
    background: var(--pc);
    color: #000;
    font-family: var(--font-heading);
    font-size: 17px;
    letter-spacing: 1px;
}
.lobby-player.empty .lobby-slot {
    background: none;
    color: var(--pc);
    border-right: 2px dashed var(--line);
}
.lobby-name {
    flex: 1;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lobby-player.empty .lobby-name { font-size: 13px; opacity: 0.7; }

/* El HOST (puesto 0) va en dorado: aro, brillo y etiqueta maciza con estrella */
.lobby-player:has(.lobby-tag:not(.you)) {
    border-color: var(--accent-gold);
    box-shadow: 0 0 16px var(--accent-gold-dim), var(--shadow-hard-sm);
}
.lobby-tag {
    flex: none;
    font-family: var(--font-heading);
    font-size: 11px;
    line-height: 16px;
    padding: 0 7px;
    background: var(--accent-gold);
    color: #000;
    letter-spacing: 1px;
    transform: skewX(var(--skew));
}
.lobby-tag:not(.you)::before { content: '★ '; }
.lobby-tag.you { background: var(--accent-cyan); color: #000; }

.waiting-content { margin-top: 18px; }
.waiting-msg { letter-spacing: 2px; text-shadow: 2px 2px 0 #000; }
.waiting-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}
#btn-start-charselect { width: 500px; }
#btn-start-charselect .mode-name { white-space: nowrap; }
#btn-start-charselect:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.7); }
#btn-start-charselect:disabled:hover { transform: skewX(var(--skew)); box-shadow: none; }
.waiting-actions .back-btn { margin-top: 16px; }

/* ── Indicador de turno (selector de personajes online) ── */
.turn-indicator {
    --tc: var(--accent-gold);
    position: relative;
    isolation: isolate;
    align-self: center;
    margin-top: 6px;
    padding: 4px 22px 4px 26px;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    z-index: 6;
    animation: turnPulse 1.2s ease-in-out infinite;
}
/* El fondo inclinado va en un pseudo-elemento para que el texto quede recto */
.turn-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 30%, rgba(10, 10, 28, 0.94)), rgba(10, 10, 28, 0.94) 70%);
    border: 2px solid var(--line);
    border-left: 6px solid var(--tc);
    box-shadow: var(--shadow-hard-sm);
    transform: skewX(var(--skew));
}
.turn-indicator .turn-player { color: var(--tc); }
.turn-indicator.mine { color: var(--tc); }
@keyframes turnPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    .net-panel, .lobby-player, .turn-indicator, .pause-modal, .ctrl-btn.listening,
    .gamepad-dot.connected, #victory-screen.has-winner .victory-stats { animation: none; }
    #victory-screen.has-winner .victory-stats { opacity: 1; }
    .pause-modal { transition: none; }
}

/* ══════════════════════════════
   MENÚ PRINCIPAL
   Lista de opciones inclinadas | panel de subopciones | ilustración del luchador.
   Cada opción se tiñe con el color de su luchador (--oc, lo pone el JS desde MAIN_MENU);
   la pantalla entera hereda el de la opción actual y lo funde al cambiar.
   ══════════════════════════════ */
@property --oc {
    syntax: '<color>';
    inherits: true;
    initial-value: #ff2244;
}

#mode-select-screen {
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    transition: --oc 0.35s ease;
}

/* Halo del color actual detrás de la ilustración */
#mode-select-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 84% 58%, color-mix(in srgb, var(--oc) 24%, transparent) 0%, transparent 55%);
    pointer-events: none;
}

.mm-top-bar, .mm-body, .mm-bottom-bar { position: relative; z-index: 1; }

/* ── Barra superior: logo + rol de red ── */
.mm-top-bar {
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px 0 40px;
    background: linear-gradient(180deg, rgba(5, 5, 16, 0.92) 0%, rgba(8, 8, 26, 0.55) 100%);
}

.mm-top-bar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--laser);
    box-shadow: 0 0 10px var(--accent-fire-dim);
    opacity: 0.8;
}

.mm-logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-family: var(--font-title);
}

.mm-logo-prefix {
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--text-primary);
    text-shadow: 2px 2px 0 #000;
}

.mm-logo-accent {
    font-size: 34px;
    letter-spacing: 5px;
    color: var(--accent-fire);
    text-shadow: 3px 3px 0 #000, 0 0 18px var(--accent-fire-dim);
}

.mm-role {
    --rc: var(--accent-cyan);
    padding: 4px 14px;
    background: color-mix(in srgb, var(--rc) 14%, rgba(5, 5, 16, 0.85));
    border: 1px solid var(--line-soft);
    border-left: 5px solid var(--rc);
    color: var(--rc);
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000;
    transform: skewX(var(--skew));
}
.mm-role.is-host  { --rc: var(--accent-gold); }
.mm-role.is-guest { --rc: var(--p2-color); }

/* ── Cuerpo ── */
.mm-body {
    flex: 1;
    min-height: 0;
}

/* Columna de opciones: se reparte sola en vertical (4 o 5 opciones, sin huecos) */
.mm-list {
    position: absolute;
    left: 40px;
    top: 0; bottom: 0;
    width: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.mm-opt {
    --oc: var(--accent-fire);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 18px;
    align-items: center;
    width: 100%;
    height: 62px;
    padding: 0 14px 0 22px;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-body);
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--oc);
    border-radius: 0;
    box-shadow: var(--shadow-hard-sm);
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transform: skewX(var(--skew));
    transition: transform 0.2s var(--ease-pop), background 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, opacity 0.2s ease;
}

/* El contenido se des-inclina */
.mm-opt > * {
    position: relative;
    z-index: 1;
    transform: skewX(calc(var(--skew) * -1));
}

/* Destello que cruza la opción al seleccionarla (como .mode-btn) */
.mm-opt::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -70%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}

.mm-opt-text { min-width: 0; }

.mm-opt-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #000;
}

.mm-opt-desc {
    display: block;
    margin-top: 5px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-secondary);
}

.mm-opt-arrow {
    font-size: 13px;
    color: var(--oc);
    opacity: 0.45;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Opción actual: se rellena con el color de su luchador y salta hacia delante */
.mm-opt.is-current {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--oc) 55%, transparent) 0%,
        color-mix(in srgb, var(--oc) 16%, rgba(10, 10, 28, 0.95)) 55%,
        rgba(10, 10, 28, 0.95) 100%);
    border-color: var(--oc);
    box-shadow: 0 0 22px color-mix(in srgb, var(--oc) 45%, transparent), 8px 8px 0 rgba(0, 0, 0, 0.45);
    transform: skewX(var(--skew)) translateX(16px) scale(1.03);
}
.mm-opt.is-current::before { left: 135%; }
.mm-opt.is-current .mm-opt-desc { color: var(--text-primary); }
.mm-opt.is-current .mm-opt-arrow { opacity: 1; color: #fff; }
.mm-opt.is-open .mm-opt-arrow { transform: skewX(calc(var(--skew) * -1)) translateX(4px); }

/* Con un submenú abierto, el resto de la lista pasa a segundo plano */
.mm-list:has(.is-open) .mm-opt:not(.is-open) { opacity: 0.45; }

/* ── Panel de subopciones ── */
.mm-panel {
    position: absolute;
    left: 404px;
    top: 50%;
    width: 312px;
    transform: translateY(-50%);
    padding: 14px 16px 12px;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--oc);
    box-shadow: var(--shadow-hard);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mm-panel.is-open {
    border-color: color-mix(in srgb, var(--oc) 55%, var(--line));
    box-shadow: 0 0 24px color-mix(in srgb, var(--oc) 32%, transparent), var(--shadow-hard);
}

.mm-panel > * { animation: mmPanelIn 0.25s cubic-bezier(0.2, 1.2, 0.4, 1) both; }

@keyframes mmPanelIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: none; }
}

.mm-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 9px;
    margin-bottom: 11px;
}

.mm-panel-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--oc), transparent);
}

.mm-panel-title {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

.mm-panel-desc {
    margin: 2px 0 4px;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.mm-panel-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

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

.mm-sub {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 5px 12px 5px 16px;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-body);
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid var(--line);
    border-left: 5px solid color-mix(in srgb, var(--oc) 60%, transparent);
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transform: skewX(var(--skew));
    transition: transform 0.2s var(--ease-pop), background 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, opacity 0.2s ease;
}

.mm-sub > * { transform: skewX(calc(var(--skew) * -1)); }

/* Vista previa (cursor en la columna principal): subopciones atenuadas */
.mm-panel:not(.is-open) .mm-sub { opacity: 0.7; }

.mm-sub-text { min-width: 0; }

.mm-sub-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 17px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #000;
}

.mm-sub-desc {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* Subopción con el cursor: color del luchador y canto dorado, como el foco del resto de menús */
.mm-panel.is-open .mm-sub.is-current {
    background: linear-gradient(100deg, color-mix(in srgb, var(--oc) 42%, transparent), rgba(10, 10, 28, 0.9) 75%);
    border-color: var(--oc);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 16px color-mix(in srgb, var(--oc) 40%, transparent), var(--shadow-hard-sm);
    transform: skewX(var(--skew)) translateX(8px);
}
.mm-panel.is-open .mm-sub.is-current .mm-sub-desc { color: var(--text-primary); }

/* Aún sin implementar: se puede recorrer, pero avisa en lugar de entrar */
.mm-sub.is-soon .mm-sub-name { color: var(--text-secondary); }

.mm-soon {
    position: absolute;
    top: 5px;
    right: 8px;
    padding: 1px 5px;
    background: var(--accent-gold);
    color: #000;
    font-family: var(--font-heading);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 1px;
}

.mm-sub.nope { animation: mmNope 0.35s ease; }

@keyframes mmNope {
    0%, 100% { translate: 0; }
    25% { translate: -6px 0; }
    50% { translate: 5px 0; }
    75% { translate: -3px 0; }
}

/* Indicadores de estado del panel DEBUG */
.mm-status {
    list-style: none;
    display: grid;
    gap: 4px;
    margin-bottom: 11px;
}

.mm-status-row {
    --sc: var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--sc);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
}
.mm-status-row.is-ok   { --sc: var(--p3-color); }
.mm-status-row.is-warn { --sc: var(--accent-gold); }

.mm-status-key { color: var(--text-secondary); }

.mm-status-val {
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--sc);
    white-space: nowrap;
}
.mm-status-row.is-off .mm-status-val { color: var(--text-secondary); }
.mm-status-val::before { content: '● '; }

/* ── Ilustración del luchador ── */
.mm-art {
    position: absolute;
    right: 0;
    top: 0; bottom: 0;
    width: 330px;
    pointer-events: none;
}

/* Losa inclinada del color del luchador, con las rayas de los pedestales */
.mm-art-slab {
    position: absolute;
    left: 46px; right: -60px;
    top: 26px; bottom: 30px;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 14px),
        linear-gradient(165deg,
            color-mix(in srgb, var(--oc) 62%, transparent) 0%,
            color-mix(in srgb, var(--oc) 20%, rgba(10, 10, 28, 0.9)) 58%,
            rgba(10, 10, 28, 0.85) 100%);
    border-left: 8px solid var(--oc);
    box-shadow: -8px 8px 0 rgba(0, 0, 0, 0.45);
    transform: skewX(var(--skew));
}

.mm-art-img {
    position: absolute;
    left: 20px; right: 0;
    bottom: 30px;
    height: 430px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.55));
}

/* Nombre del luchador: banda inclinada como las cabeceras de los pedestales */
.mm-art-name {
    position: absolute;
    right: 24px;
    bottom: 42px;
    padding: 5px 16px 4px;
    background: var(--oc);
    color: #000;
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: var(--shadow-hard-sm);
    transform: skewX(var(--skew));
}

.mm-art-name:empty { display: none; }

.mm-art.swap .mm-art-img  { animation: mmArtIn 0.35s var(--ease-pop) both; }
.mm-art.swap .mm-art-name { animation: mmArtName 0.3s ease 0.08s both; }

@keyframes mmArtIn {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: none; }
}

@keyframes mmArtName {
    from { opacity: 0; transform: skewX(var(--skew)) translateX(30px); }
    to   { opacity: 1; transform: skewX(var(--skew)); }
}

/* ── Barra inferior: leyenda de teclas ── */
.mm-bottom-bar {
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 40px;
    background: rgba(5, 5, 16, 0.85);
    border-top: 1px solid var(--line);
}

/* Aviso breve (Próximamente, ajustes recargados...) */
.mm-toast {
    position: absolute;
    left: 404px;
    bottom: 44px;
    z-index: 5;
    max-width: 312px;
    padding: 6px 16px;
    background: rgba(10, 10, 28, 0.95);
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
    box-shadow: var(--shadow-hard-sm);
    transform: skewX(var(--skew));
    opacity: 0;
    pointer-events: none;
}
.mm-toast.is-error { border-left-color: var(--accent-fire); color: var(--accent-fire); }
.mm-toast.show { animation: mmToast 2.4s ease both; }

@keyframes mmToast {
    0%   { opacity: 0; translate: 0 10px; }
    10%, 82% { opacity: 1; translate: 0; }
    100% { opacity: 0; translate: 0 -6px; }
}

/* ══════════════════════════════
   EDITOR DEBUG (solo host)
   Barra lateral con indicadores, pestañas por tipo de caja (cada una en el color con
   que se dibuja en el lienzo: --tc) y acciones rápidas fijas abajo.
   ══════════════════════════════ */
#debug-screen {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--bg-abyss);
}

.dbg-sidebar {
    position: relative;
    z-index: 2;
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-dark) 100%);
    border-right: 2px solid var(--line);
    box-shadow: 6px 0 0 rgba(0, 0, 0, 0.45);
    text-align: left;
}

.dbg-head {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px 16px;
}

.dbg-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--laser);
    opacity: 0.8;
}

.dbg-title {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-shadow: 3px 3px 0 #000, 0 0 14px var(--accent-gold-dim);
    transform: skewX(var(--skew));
}

.back-btn.dbg-back {
    margin-top: 0;
    padding: 5px 12px;
    font-size: 13px;
}

/* Indicadores: rol, guardado en disco, cambios pendientes */
.dbg-status {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 14px 8px 16px;
}

.dbg-chip {
    --sc: var(--line-soft);
    padding: 3px 8px;
    background: var(--field-bg);
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--sc);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 1px;
    transform: skewX(var(--skew));
}
.dbg-chip.is-ok   { --sc: var(--p3-color); color: var(--p3-color); }
.dbg-chip.is-warn { --sc: var(--accent-gold); color: var(--accent-gold); }

.dbg-pickers {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    padding: 0 14px 10px 16px;
}

.dbg-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.dbg-field-wide { grid-column: 1 / -1; }

.dbg-select,
.dbg-input {
    width: 100%;
    padding: 4px 6px;
    background: var(--field-bg);
    border: 2px solid var(--line);
    border-left: 4px solid var(--accent-cyan);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.5px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dbg-select option { background: var(--bg-card); }
.dbg-select:hover, .dbg-input:hover { border-color: var(--line-soft); border-left-color: var(--accent-cyan); }
.dbg-select:focus, .dbg-input:focus {
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 10px var(--accent-cyan-dim);
}

/* Pestañas: canto superior en el color de la caja; el punto se enciende si se dibuja */
.dbg-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    padding: 0 14px 0 16px;
    border-bottom: 2px solid var(--line);
}

.dbg-tab {
    position: relative;
    flex: 1;
    padding: 7px 2px 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
    border-top: 3px solid color-mix(in srgb, var(--tc) 35%, transparent);
    border-bottom: 0;
    border-radius: 0;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    outline: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dbg-tab[data-chk]::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    background: var(--line-soft);
}
.dbg-tab.on::after { background: var(--tc); box-shadow: 0 0 6px var(--tc); }

.dbg-tab:hover,
.dbg-tab:focus-visible {
    color: var(--text-primary);
    border-top-color: var(--tc);
}

.dbg-tab.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 24%, transparent), rgba(0, 0, 0, 0.2));
    border-color: color-mix(in srgb, var(--tc) 45%, var(--line));
    border-top-color: var(--tc);
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.dbg-pages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-soft) rgba(0, 0, 0, 0.4);
}

.dbg-page { display: none; }

.dbg-page.active {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: netPanelIn 0.25s ease both;
}

.dbg-group-title {
    margin-top: 2px;
    padding-bottom: 3px;
    border-bottom: 1px solid color-mix(in srgb, var(--tc) 35%, transparent);
    color: var(--tc);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000;
}
.dbg-page > .dbg-group-title ~ .dbg-group-title { margin-top: 6px; }

.dbg-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 8px;
    padding: 4px 8px 6px;
    background: rgba(0, 0, 0, 0.28);
    border-left: 2px solid color-mix(in srgb, var(--tc) 50%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.dbg-row:hover,
.dbg-row:focus-within {
    background: color-mix(in srgb, var(--tc) 12%, rgba(0, 0, 0, 0.28));
    border-left-color: var(--tc);
}

.dbg-row label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.dbg-row:hover label, .dbg-row:focus-within label { color: var(--text-primary); }

.dbg-val {
    min-width: 36px;
    text-align: right;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--accent-gold);
    text-shadow: 1px 1px 0 #000;
}

.dbg-row .settings-slider {
    --fill: var(--tc);
    grid-column: 1 / -1;
    height: 12px;
}

/* Interruptor de visibilidad de la caja */
.dbg-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--tc) 10%, rgba(0, 0, 0, 0.35));
    border: 1px solid var(--line);
    border-left: 4px solid var(--tc);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.dbg-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.dbg-toggle-ui {
    position: relative;
    flex: none;
    width: 34px;
    height: 16px;
    background: var(--field-bg);
    border: 1px solid var(--line-soft);
    transform: skewX(var(--skew));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dbg-toggle-ui::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 10px;
    background: var(--text-secondary);
    transition: left 0.15s ease, background 0.15s ease;
}

.dbg-toggle input:checked + .dbg-toggle-ui {
    border-color: var(--tc);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 50%, transparent);
}
.dbg-toggle input:checked + .dbg-toggle-ui::after { left: 18px; background: var(--tc); }
.dbg-toggle input:focus-visible + .dbg-toggle-ui { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.dbg-note {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.dbg-url { margin: 2px 0; }
.dbg-url .dbg-input { font-size: 12px; border-left-color: var(--tc); }

/* Acciones rápidas */
.dbg-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 6px 8px;
    padding: 10px 14px 9px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 2px solid var(--line);
}

.dbg-action {
    padding: 7px 4px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.22), rgba(22, 22, 54, 0.9));
    border: 2px solid var(--line);
    border-left: 5px solid var(--accent-cyan);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    box-shadow: var(--shadow-hard-sm);
    transform: skewX(var(--skew));
    transition: transform 0.2s var(--ease-pop), border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.dbg-action-main {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.28), rgba(22, 22, 54, 0.9));
    border-left-color: var(--accent-gold);
}

.dbg-action-warn {
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.26), rgba(22, 22, 54, 0.9));
    border-left-color: var(--accent-fire);
}

.dbg-action:hover:not(:disabled),
.dbg-action:focus-visible:not(:disabled) {
    border-color: var(--accent-cyan);
    border-left-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-cyan-dim), var(--shadow-hard-sm);
    transform: skewX(var(--skew)) scale(1.04);
}

.dbg-action:active:not(:disabled) { transform: skewX(var(--skew)) scale(0.97); }

.dbg-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.6);
    box-shadow: none;
}

.dbg-msg {
    grid-column: 1 / -1;
    min-height: 13px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.dbg-msg.is-ok    { color: var(--p3-color); }
.dbg-msg.is-error { color: var(--accent-fire); }

/* Lienzo de vista previa */
.dbg-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

#debug-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Leyenda: qué cajas se están dibujando */
.dbg-legend {
    position: absolute;
    top: 12px;
    left: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.dbg-legend li {
    padding: 3px 8px;
    background: rgba(5, 5, 16, 0.82);
    border: 1px solid var(--line);
    border-left: 4px solid var(--tc);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.6;
    transform: skewX(var(--skew));
    transition: opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dbg-legend li.on {
    color: #fff;
    opacity: 1;
    box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #mode-select-screen { transition: none; }
    .mm-opt, .mm-sub, .mm-opt::before { transition: none; }
    .mm-panel > *, .mm-art.swap .mm-art-img, .mm-art.swap .mm-art-name,
    .mm-sub.nope, .dbg-page.active { animation: none; }
    .mm-toast.show { animation-name: mmToastFade; }
}

@keyframes mmToastFade {
    0%, 100% { opacity: 0; }
    8%, 85%  { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════
   PROGRESIÓN Y CAMPAÑA
   Candados del selector (progression.js), escalera de la Campaña
   (#campaign-screen, campaign.js) y pantalla de recompensa
   (#reward-screen, progression.js › RewardScreen).
   ═══════════════════════════════════════════════════════════ */

#campaign-screen, #reward-screen {
    background: linear-gradient(180deg, rgba(8, 8, 26, 0.7) 0%, rgba(5, 5, 16, 0.88) 100%);
}

/* ── Selector: luchador bloqueado ── */
.char-card.is-blocked .char-preview {
    filter: grayscale(0.9) brightness(0.5);
}

.char-card.is-blocked:not(.p1-cursor, .p2-cursor, .p3-cursor, .p4-cursor) .char-name-banner {
    color: var(--text-secondary);
}

.char-blocked-overlay {
    display: none;
    position: absolute;
    inset: 0 0 24px 0;
    align-items: center;
    justify-content: center;
    z-index: 7;
    pointer-events: none;
}

.char-card.is-blocked .char-blocked-overlay {
    display: flex;
}

.blocked-icon {
    font-size: 26px;
    line-height: 1;
    transform: skewX(calc(var(--skew) * -1));
    filter: drop-shadow(2px 2px 0 #000);
}

/* Sacudida de «no se puede» (Game.flashDenied): usa `translate` para no pisar el transform */
.char-card.is-denied,
.skin-option-tile.is-denied {
    animation: deniedShake 0.32s ease;
}

.char-card.is-denied {
    border-color: var(--accent-fire);
}

@keyframes deniedShake {
    0%, 100% { translate: 0 0; }
    20% { translate: -6px 0; }
    40% { translate: 6px 0; }
    60% { translate: -4px 0; }
    80% { translate: 3px 0; }
}

/* Pedestal sobre un luchador bloqueado: silueta */
.pedestal-side.is-blocked .sprite-silhouette {
    filter: brightness(0) drop-shadow(0 0 2px var(--pc)) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
}

.pedestal-side.is-blocked .pedestal-char-subtitle {
    color: var(--accent-gold);
}

/* Skin Clásica sin ganar */
.skin-option-tile.is-blocked {
    border-style: dashed;
    opacity: 0.6;
    cursor: not-allowed;
}

.skin-option-tile.is-blocked .skin-tile-desc {
    color: var(--accent-gold);
}

/* ── Victoria: aviso de desbloqueo ── */
.victory-unlock {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    opacity: 0;
}

.victory-unlock[hidden] {
    display: none;
}

#victory-screen.has-winner .victory-unlock {
    animation: bannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) 0.95s both;
}

.vu-chip {
    display: inline-block;
    padding: 4px 16px 4px 12px;
    background: rgba(5, 5, 16, 0.88);
    border: 2px solid var(--accent-gold);
    border-left-width: 8px;
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 17px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    transform: skewX(var(--skew));
    box-shadow: 0 0 16px var(--accent-gold-dim), var(--shadow-hard-sm);
    animation: vuGlow 1.2s ease-in-out infinite alternate;
}

@keyframes vuGlow {
    from { box-shadow: 0 0 8px var(--accent-gold-dim), var(--shadow-hard-sm); }
    to   { box-shadow: 0 0 22px var(--accent-gold), var(--shadow-hard-sm); }
}

/* ══════════════════════════════
   CAMPAÑA: ESCALERA DE RIVALES
   ══════════════════════════════ */
#campaign-screen {
    justify-content: flex-start;
    padding: 14px 32px 42px;
}

.cp-top-bar {
    width: 100%;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#campaign-screen .cp-title {
    margin: 0;
}

.cp-progress {
    padding: 4px 18px 4px 14px;
    background: rgba(5, 5, 16, 0.85);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 18px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000;
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
}

#campaign-screen.is-complete .cp-progress {
    border-color: var(--accent-gold);
    box-shadow: 0 0 14px var(--accent-gold-dim), var(--shadow-hard-sm);
}

/* Escalera: una carta por rival, unidas por una línea láser */
.cp-ladder {
    position: relative;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 0 6px;
}

.cp-ladder::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50px;
    height: 2px;
    background: var(--laser);
    opacity: 0.7;
}

.cp-rung {
    width: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cp-rung-card {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    border: 2px solid var(--line);
    background: linear-gradient(170deg, color-mix(in srgb, var(--char-color) 70%, #05050f) 0%, color-mix(in srgb, var(--char-color) 22%, #05050f) 100%);
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
    transition: transform 0.2s var(--ease-pop), border-color 0.2s ease;
}

/* Retrato ampliado para que se lea la cara (los *_full.png son de cuerpo entero) */
.cp-rung-art {
    position: absolute;
    inset: 0 -14px;
    background-repeat: no-repeat;
    background-size: auto 210%;
    background-position: center 4%;
    transform: skewX(calc(var(--skew) * -1));
}

.cp-rung-num {
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    padding: 0 6px;
    background: #000;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 11px;
    line-height: 15px;
}

.cp-rung:last-child .cp-rung-num {
    background: var(--accent-fire);
    color: #fff;
}

.cp-rung-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    height: 17px;
    background: rgba(5, 5, 16, 0.9);
    border-top: 2px solid var(--line);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.cp-rung-mark {
    position: absolute;
    inset: 0 0 17px 0;
    z-index: 2;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1;
    text-shadow: 3px 3px 0 #000;
    transform: skewX(calc(var(--skew) * -1));
}

.cp-rung-mark:empty {
    display: none;
}

.cp-rung-diff {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000;
}

/* Colores de dificultad: verde · cian · naranja · rojo */
.lvl-1 { --dc: #44dd77; }
.lvl-2 { --dc: var(--accent-cyan); }
.lvl-3 { --dc: #ff9922; }
.lvl-4 { --dc: var(--accent-fire); }
.cp-rung-diff, .cp-diff { color: var(--dc); }

/* Estados de cada rival */
.cp-rung.is-mystery .cp-rung-art {
    filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.35));
}

.cp-rung.is-mystery .cp-rung-mark {
    color: var(--accent-gold);
    opacity: 0.8;
}

/* Vencido: retrato apagado y ✓ encima (el filtro va solo al retrato para que el ✓ brille) */
.cp-rung.is-done .cp-rung-card {
    background: #15152a;
    border-color: #2f5f3f;
}

.cp-rung.is-done .cp-rung-art {
    filter: grayscale(1) brightness(0.4);
}

.cp-rung.is-done .cp-rung-mark {
    color: #44dd77;
    font-size: 46px;
}

.cp-rung.is-done .cp-rung-diff {
    opacity: 0.45;
}

.cp-rung.is-current .cp-rung-card {
    border-color: var(--accent-gold);
    transform: skewX(var(--skew)) scale(1.1);
    box-shadow: 0 0 0 2px #000, 0 0 20px var(--accent-gold-dim), 6px 6px 0 rgba(0, 0, 0, 0.45);
    animation: csCursorPulse 0.7s ease-in-out infinite alternate;
    z-index: 2;
}

.cp-rung.is-current .cp-rung-name {
    background: var(--accent-gold);
    border-top-color: var(--accent-gold);
    color: #000;
}

.cp-rung.is-current .cp-rung-diff {
    margin-top: 5px;
}

#campaign-screen.is-loss .cp-rung.is-current .cp-rung-card {
    border-color: var(--accent-fire);
    box-shadow: 0 0 0 2px #000, 0 0 20px var(--accent-fire-dim), 6px 6px 0 rgba(0, 0, 0, 0.45);
}

/* Cuerpo: cara a cara | información y botones */
.cp-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    gap: 22px;
    margin-top: 16px;
}

.cp-versus {
    position: relative;
    width: 430px;
    flex-shrink: 0;
    display: flex;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-fire);
    box-shadow: var(--shadow-hard);
    overflow: hidden;
}

.cp-fighter {
    --char-color: #888;
    position: relative;
    flex: 1;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 70%, color-mix(in srgb, var(--char-color) 45%, transparent) 0%, transparent 75%);
}

.cp-fighter-art {
    position: absolute;
    inset: 8px 0 26px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 0 2px var(--char-color)) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
}

/* El rival mira hacia el jugador */
.cp-rival .cp-fighter-art {
    transform: scaleX(-1);
}

.cp-fighter.is-mystery .cp-fighter-art {
    filter: brightness(0) drop-shadow(0 0 2px var(--accent-gold)) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
}

.cp-fighter-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26px;
    background: rgba(5, 5, 16, 0.9);
    border-top: 2px solid var(--char-color);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.cp-fighter-tag {
    position: absolute;
    top: 8px;
    z-index: 3;
    padding: 0 8px;
    color: #000;
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 1px;
}

.cp-me .cp-fighter-tag    { left: 8px; background: var(--p1-color); }
.cp-rival .cp-fighter-tag { right: 8px; background: var(--p2-color); }

.cp-vs {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 4;
    translate: -50% -50%;
    font-family: var(--font-impact);
    font-size: 64px;
    line-height: 1;
    color: var(--accent-gold);
    -webkit-text-stroke: 3px #000;
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 var(--accent-fire), 0 0 24px var(--accent-gold-dim);
    transform: skewX(var(--skew));
}

.cp-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-info {
    flex: 1;
    min-height: 0;
    padding: 10px 18px 12px;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    box-shadow: var(--shadow-hard);
}

#campaign-screen.is-loss .cp-info {
    border-left-color: var(--accent-fire);
}

.cp-info-kicker {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--accent-gold);
}

.cp-info-kicker.is-loss {
    color: var(--accent-fire);
}

.cp-info-name {
    font-family: var(--font-impact);
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-info-sub {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.cp-info-rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 14px;
    margin: 10px 0 0;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
}

.cp-info-rows dt {
    color: var(--text-secondary);
}

.cp-info-rows dd {
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-diff {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-pips {
    display: inline-flex;
    gap: 3px;
}

.cp-pips i {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.12);
    transform: skewX(var(--skew));
}

.cp-pips i.on {
    background: var(--dc);
    box-shadow: 0 0 6px var(--dc);
}

.cp-reward {
    color: var(--accent-gold) !important;
    text-shadow: 0 0 10px var(--accent-gold-dim);
}

.cp-reward.is-none {
    color: var(--text-secondary) !important;
    text-shadow: none;
}

/* Botones: el principal ocupa la fila de arriba entera */
.cp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 0 10px 0 6px;
}

.mode-btn.cp-btn {
    min-width: 0;
    padding: 8px 14px;
}

.cp-btn .mode-name {
    font-size: 18px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.cp-btn.is-primary {
    grid-column: 1 / -1;
    padding: 10px 14px;
    border-left-color: var(--accent-gold);
}

.cp-btn.is-primary .mode-name {
    font-size: 26px;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000;
}

.cp-btn.is-danger {
    border-left-color: #662233;
}

.cp-btn.is-danger .mode-name {
    color: var(--text-secondary);
}

.cp-btn.is-danger.is-confirm {
    border-color: var(--accent-fire);
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.45), rgba(22, 22, 54, 0.96));
}

.cp-btn.is-danger.is-confirm .mode-name {
    color: #fff;
}

.cp-bottom-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: rgba(5, 5, 16, 0.85);
    border-top: 1px solid var(--line);
}

/* ══════════════════════════════
   RECOMPENSA: NUEVO DESBLOQUEO
   ══════════════════════════════ */
#reward-screen {
    --reward-color: var(--accent-gold);
    overflow: hidden;
}

/* Rayos de luz girando detrás del luchador */
.reward-rays {
    position: absolute;
    left: 31%;
    top: 52%;
    width: 1300px;
    height: 1300px;
    translate: -50% -50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--reward-color) 30%, transparent) 0deg 9deg, transparent 9deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 52%);
    mask-image: radial-gradient(circle, #000 0%, transparent 52%);
    animation: rewardRays 26s linear infinite;
    pointer-events: none;
}

@keyframes rewardRays {
    to { rotate: 360deg; }
}

.reward-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

#reward-screen.reveal .reward-flash {
    animation: rewardFlash 0.9s ease-out 1s both;
}

/* Los rayos y las brasas se encienden cuando revienta el candado */
#reward-screen.reveal .reward-rays {
    animation: rewardRays 26s linear infinite, rwFadeIn 0.6s ease-out 1s both;
}

#reward-screen.reveal .reward-embers {
    animation: rwFadeIn 0.8s ease-out 1.1s both;
}

@keyframes rwFadeIn {
    from { opacity: 0; }
}

/* Viene del gacha: la pantalla nace del fogonazo blanco con el que acaba la invocación */
#reward-screen.reveal.from-gacha::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    background: #fff;
    pointer-events: none;
    animation: rwFromWhite 0.5s ease-out both;
}

@keyframes rwFromWhite {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Brasas del color del luchador que suben sin parar */
.reward-embers {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.reward-embers > i {
    position: absolute;
    bottom: -10px;
    width: var(--s);
    height: var(--s);
    background: var(--reward-color);
    box-shadow: 0 0 8px var(--reward-color);
    opacity: 0;
    animation: rwEmber var(--t) linear var(--w) infinite;
}

@keyframes rwEmber {
    0%   { translate: 0 0; opacity: 0; }
    15%  { opacity: 0.85; }
    100% { translate: var(--x) -600px; opacity: 0; }
}

@keyframes rewardFlash {
    0%   { opacity: 0; }
    12%  { opacity: 0.85; }
    100% { opacity: 0; }
}

.reward-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 56px 30px;
}

/* Sacudida de pantalla cuando revienta el candado */
#reward-screen.reveal .reward-stage {
    animation: rwShake 0.4s linear 1s both;
}

@keyframes rwShake {
    0%, 100% { translate: 0 0; }
    15% { translate: -9px 5px; }
    30% { translate: 8px -6px; }
    45% { translate: -6px -3px; }
    60% { translate: 5px 4px; }
    80% { translate: -2px 1px; }
}

.reward-art-wrap {
    position: relative;
    width: 340px;
    height: 440px;
    flex-shrink: 0;
}

.reward-art {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 0 3px var(--reward-color)) drop-shadow(0 0 26px var(--reward-color));
}

.reward-skin-canvas {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 250px;
    height: 300px;
    translate: -50% 0;
    filter: drop-shadow(0 0 3px var(--reward-color)) drop-shadow(0 0 26px var(--reward-color));
}

.reward-skin-canvas[hidden] {
    display: none;
}

/* Revelado (lo usa también el final del Torneo) */
@keyframes rewardReveal {
    0%   { opacity: 0; transform: scale(0.8); filter: brightness(0); }
    25%  { opacity: 1; }
    50%  { transform: scale(1.04); filter: brightness(0) drop-shadow(0 0 6px var(--reward-color)); }
    62%  { filter: brightness(2.4) drop-shadow(0 0 30px var(--reward-color)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 3px var(--reward-color)) drop-shadow(0 0 26px var(--reward-color)); }
}

/* Desbloqueo: silueta en sombra tras el candado; cuando revienta (1 s) sale en blanco
   y se colorea. Todos los pasos llevan la misma lista de filtros para que se interpolen */
#reward-screen.reveal :is(.reward-art, .reward-skin-canvas) {
    animation: rwArtUnlock 1.75s ease-out both;
}

@keyframes rwArtUnlock {
    0%   { opacity: 0; transform: scale(0.92); filter: brightness(0) invert(0) drop-shadow(0 0 0 var(--reward-color)) drop-shadow(0 0 0 var(--reward-color)); }
    14%  { opacity: 0.5; transform: scale(1); filter: brightness(0) invert(0) drop-shadow(0 0 2px var(--reward-color)) drop-shadow(0 0 10px var(--reward-color)); }
    54%  { opacity: 0.5; transform: scale(1); filter: brightness(0) invert(0) drop-shadow(0 0 2px var(--reward-color)) drop-shadow(0 0 10px var(--reward-color)); }
    57%  { opacity: 1; transform: scale(1.14); filter: brightness(0) invert(1) drop-shadow(0 0 6px #fff) drop-shadow(0 0 40px var(--reward-color)); }
    74%  { transform: scale(0.97); filter: brightness(1.7) invert(0) drop-shadow(0 0 4px var(--reward-color)) drop-shadow(0 0 34px var(--reward-color)); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1) invert(0) drop-shadow(0 0 3px var(--reward-color)) drop-shadow(0 0 26px var(--reward-color)); }
}

/* ── Candado: cae (0–0,35 s), tiembla cada vez más (–0,95 s) y revienta (1 s) ── */
.reward-padlock {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 3;
    width: 120px;
    height: 150px;
    margin: -75px 0 0 -60px;
    opacity: 0;
    pointer-events: none;
}

#reward-screen.reveal .reward-padlock {
    animation: rwLockIn 0.35s var(--ease-pop) both, rwLockShake 0.6s linear 0.35s both;
}

@keyframes rwLockIn {
    0%   { opacity: 0; transform: translateY(-170px) scale(1.5); }
    100% { opacity: 1; transform: none; }
}

@keyframes rwLockShake {
    0%   { translate: 0 0;      rotate: 0deg;  filter: drop-shadow(0 0 4px var(--reward-color)); }
    12%  { translate: -1px 0;   rotate: -1deg; }
    24%  { translate: 2px -1px; rotate: 1.5deg; }
    36%  { translate: -3px 1px; rotate: -2deg; }
    48%  { translate: 3px -2px; rotate: 3deg; }
    60%  { translate: -5px 1px; rotate: -4deg; }
    72%  { translate: 5px -2px; rotate: 5deg; }
    84%  { translate: -6px 2px; rotate: -6deg; }
    100% { translate: 0 -4px;   rotate: 0deg;  filter: drop-shadow(0 0 18px var(--reward-color)) drop-shadow(0 0 4px #fff); }
}

.reward-padlock-shackle {
    position: absolute;
    left: 22px;
    top: 0;
    width: 76px;
    height: 76px;
    border: 16px solid #d8d8ec;
    border-bottom: none;
    box-shadow: 0 0 0 3px #000, inset 0 0 0 3px #000, inset 4px 0 0 3px #8888aa;
}

.reward-padlock-body {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 92px;
}

.reward-padlock-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(180deg, #ffe866 0%, var(--accent-gold) 40%, #b8860b 100%);
    border: 4px solid #000;
    box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), 6px 6px 0 rgba(0, 0, 0, 0.45);
}

.reward-padlock-half.is-left  { left: 0;  border-right: none; }
.reward-padlock-half.is-right { right: 0; border-left: none; }

/* Ojo de la cerradura */
.reward-padlock-body::before,
.reward-padlock-body::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    background: #1a1000;
}

.reward-padlock-body::before {
    top: 22px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
}

.reward-padlock-body::after {
    top: 38px;
    width: 10px;
    height: 26px;
    margin-left: -5px;
}

#reward-screen.reveal .reward-padlock-body::before,
#reward-screen.reveal .reward-padlock-body::after {
    animation: rwGone 0.01s linear 0.98s both;
}

@keyframes rwGone {
    to { opacity: 0; }
}

#reward-screen.reveal .reward-padlock-shackle {
    animation: rwShackleOff 0.55s cubic-bezier(0.3, 0.6, 0.6, 1) 0.95s both;
}

@keyframes rwShackleOff {
    0%   { transform: none; opacity: 1; }
    25%  { transform: translateY(-34px); opacity: 1; }
    100% { transform: translate(70px, -170px) rotate(50deg); opacity: 0; }
}

#reward-screen.reveal .reward-padlock-half.is-left {
    animation: rwHalfLeft 0.65s cubic-bezier(0.3, 0, 0.7, 0.6) 1s both;
}

#reward-screen.reveal .reward-padlock-half.is-right {
    animation: rwHalfRight 0.65s cubic-bezier(0.3, 0, 0.7, 0.6) 1s both;
}

@keyframes rwHalfLeft {
    0%   { transform: none; opacity: 1; }
    100% { transform: translate(-110px, 150px) rotate(-55deg); opacity: 0; }
}

@keyframes rwHalfRight {
    0%   { transform: none; opacity: 1; }
    100% { transform: translate(110px, 150px) rotate(55deg); opacity: 0; }
}

/* Onda (rombo, como los paneles) y chispas del estallido */
.reward-shock {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 3;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 6px solid var(--reward-color);
    box-shadow: 0 0 24px var(--reward-color), inset 0 0 24px var(--reward-color);
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
}

#reward-screen.reveal .reward-shock {
    animation: rwShock 0.6s ease-out 1s forwards; /* forwards: invisible hasta que revienta */
}

@keyframes rwShock {
    0%   { scale: 0.2; opacity: 1; }
    100% { scale: 3.4; opacity: 0; border-width: 1px; }
}

.reward-burst {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 4;
    width: 0;
    height: 0;
    pointer-events: none;
}

.reward-burst > i {
    position: absolute;
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    opacity: 0;
}

#reward-screen.reveal .reward-burst > i {
    animation: rwBurst var(--t) cubic-bezier(0.1, 0.7, 0.3, 1) 1s forwards;
}

@keyframes rwBurst {
    0%   { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0deg) scale(1.3); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(180deg) scale(0.3); }
}

.reward-text {
    flex: 1;
    min-width: 0;
}

#reward-screen.reveal .reward-text > * {
    animation: bannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
#reward-screen.reveal .reward-text > :nth-child(1) { animation-delay: 1.1s; }
#reward-screen.reveal .reward-text > :nth-child(2) { animation-delay: 1.2s; }
#reward-screen.reveal .reward-text > :nth-child(3) { animation-delay: 1.45s; }
#reward-screen.reveal .reward-text > :nth-child(4) { animation-delay: 1.55s; }
#reward-screen.reveal .reward-text > :nth-child(n+5) { animation-delay: 1.65s; }

/* El título cae de golpe, como un sello */
#reward-screen.reveal .reward-text > .reward-title {
    animation: rwStamp 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) 1.2s both;
}

@keyframes rwStamp {
    0%   { opacity: 0; transform: scale(2.4); }
    60%  { opacity: 1; transform: scale(0.94); }
    100% { opacity: 1; transform: scale(1); }
}

.reward-kicker {
    display: inline-block;
    padding: 4px 18px 4px 12px;
    background: rgba(5, 5, 16, 0.9);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 16px;
    letter-spacing: 3px;
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
}

.reward-title {
    margin: 12px 0 10px;
    font-family: var(--font-impact);
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 4px 4px 0 #000, 0 0 26px var(--reward-color);
}

.reward-name-banner {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 6px 34px 8px 20px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--reward-color) 60%, #000) 0%, rgba(0, 0, 0, 0.55) 75%, transparent 100%);
    border-left: 9px solid var(--reward-color);
    transform: skewX(var(--skew));
}

/* Destello que cruza el nombre cuando termina de entrar */
.reward-name-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    translate: -100% 0;
    pointer-events: none;
}

#reward-screen.reveal .reward-name-banner::after {
    animation: rwShine 0.7s ease-in-out 1.9s both;
}

@keyframes rwShine {
    from { translate: -100% 0; }
    to   { translate: 100% 0; }
}

.reward-name-banner > span {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1));
    font-family: var(--font-impact);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
}

.reward-sub {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 2px;
    color: #e8e8f8;
    text-transform: uppercase;
}

.reward-note {
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent-cyan);
}

.reward-count {
    margin-top: 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--text-secondary);
}

.reward-count:empty {
    display: none;
}

.reward-prompt {
    position: absolute;
    bottom: 26px;
    left: 0; right: 0;
    z-index: 2;
    margin: 0;
    text-align: center;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    opacity: 1; /* .prompt-text nace invisible: cada pantalla decide cuándo se ve */
    animation: blinkPulse 1.4s ease-in-out 1.4s infinite;
}

#reward-screen.reveal .reward-prompt {
    animation: rwFadeIn 0.3s ease-out 2s both, blinkPulse 1.4s ease-in-out 2.3s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .char-card.is-denied, .skin-option-tile.is-denied, .vu-chip,
    .cp-rung.is-current .cp-rung-card, .reward-rays,
    #reward-screen.reveal .reward-flash,
    #reward-screen.reveal :is(.reward-art, .reward-skin-canvas, .reward-stage, .reward-embers),
    #reward-screen.reveal .reward-text > *, #reward-screen.reveal .reward-text > .reward-title,
    #reward-screen.reveal .reward-prompt,
    #reward-screen.reveal .reward-name-banner::after { animation: none; }
    .reward-padlock, .reward-shock, .reward-burst, .reward-embers,
    #reward-screen.reveal.from-gacha::after { display: none; }
    #victory-screen.has-winner .victory-unlock { animation: none; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   TORNEO
   Cuadro eliminatorio (#tournament-screen) y pantalla de final de
   torneo (#tournament-result-screen). Lo pinta tournament.js
   (TournamentBracketUI); la geometría del árbol está en
   BRACKET_GEOMETRY y aquí solo va el aspecto.
   ═══════════════════════════════════════════════════════════ */

#tournament-screen, #tournament-result-screen {
    background: linear-gradient(180deg, rgba(8, 8, 26, 0.7) 0%, rgba(5, 5, 16, 0.88) 100%);
}

/* Quinto nivel de dificultad: el JEFE de la Gran Final */
.lvl-5 { --dc: #ff3df0; }

/* ══════════════════════════════
   CUADRO DEL TORNEO
   ══════════════════════════════ */
#tournament-screen {
    justify-content: flex-start;
    padding: 12px 32px 40px;
}

.tb-top-bar {
    width: 100%;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

#tournament-screen .tb-title {
    margin: 0;
}

.tb-debug {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.mode-btn.cp-btn.tb-debug-btn {
    padding: 4px 12px;
    border-left-color: #9944cc;
}

.tb-debug-btn .mode-name {
    font-size: 12px;
    letter-spacing: 1px;
    color: #cc88ff;
}

.tb-round {
    margin-left: auto;
    font-size: 16px;
}

/* Árbol: casillas en posición absoluta sobre un <svg> con las líneas */
.tb-bracket {
    position: relative;
    flex-shrink: 0;
    width: 960px;
    height: 352px;
    margin-top: 6px;
}

.tb-lines {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.tb-line {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
    stroke-linejoin: miter;
}

.tb-line.is-dead {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-dasharray: 4 5;
}

/* Camino del ganador: iluminado con el color de su luchador */
.tb-line.is-lit {
    stroke: var(--c);
    stroke-width: 4;
    filter: drop-shadow(0 0 4px var(--c));
}

/* Recién decidido: la línea se dibuja hacia la ronda siguiente */
.tb-line.is-lit.is-fresh {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tbDraw 0.8s ease-out 0.5s forwards;
}

@keyframes tbDraw {
    to { stroke-dashoffset: 0; }
}

.tb-head {
    position: absolute;
    top: 0;
    height: 18px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--text-secondary);
}

.tb-head.is-current {
    color: var(--accent-gold);
    text-shadow: 0 0 10px var(--accent-gold-dim);
}

.tb-head.is-done {
    opacity: 0.5;
}

/* Casilla de un participante: retrato + nombre, con el color del luchador en el canto */
.tb-slot {
    --c: #888;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 28, 0.94);
    border: 2px solid var(--line);
    border-left: 6px solid var(--c);
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Mitad derecha del cuadro: espejo (retrato y canto de color a la derecha) */
.tb-slot.is-right {
    flex-direction: row-reverse;
    border-left: 2px solid var(--line);
    border-right: 6px solid var(--c);
}

.tb-portrait {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(170deg, color-mix(in srgb, var(--c) 70%, #05050f) 0%, color-mix(in srgb, var(--c) 20%, #05050f) 100%);
}

.tb-portrait-img {
    position: absolute;
    inset: 0 -10px;
    background-repeat: no-repeat;
    background-size: auto 185%;
    background-position: center 0%;
    transform: skewX(calc(var(--skew) * -1));
}

.tb-slot-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding-right: 6px;
    transform: skewX(calc(var(--skew) * -1));
}

.tb-slot.is-right .tb-slot-text {
    padding: 0 0 0 6px;
}

.tb-slot.is-right .tb-slot-text {
    align-items: flex-end;
}

.tb-slot-name {
    max-width: 100%;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 2px 2px 0 #000;
}

.tb-slot-tag {
    font-family: var(--font-heading);
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.tb-slot.is-player .tb-slot-tag {
    padding: 0 6px;
    background: var(--p1-color);
    color: #000;
}

.tb-slot-mark {
    position: absolute;
    left: 34px;
    bottom: 1px;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: 20px;
    line-height: 1;
    padding: 1px 3px 0;
    background: rgba(0, 0, 0, 0.78);
    text-shadow: 2px 2px 0 #000;
    transform: skewX(calc(var(--skew) * -1));
}

.tb-slot.is-right .tb-slot-mark {
    left: auto;
    right: 34px;
}

/* Ganó esta llave */
.tb-slot.is-win {
    border-color: var(--c);
    box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent), var(--shadow-hard-sm);
}

.tb-slot.is-win .tb-slot-mark {
    color: var(--c);
}

/* Eliminado en esta llave: atenuado y en gris */
.tb-slot.is-out {
    border-left-color: #333;
    background: rgba(8, 8, 18, 0.9);
}

.tb-slot.is-out.is-right {
    border-left-color: var(--line);
    border-right-color: #333;
}

.tb-slot.is-out :is(.tb-portrait, .tb-slot-text) {
    filter: grayscale(1) brightness(0.5);
}

.tb-slot.is-out .tb-slot-mark {
    color: var(--accent-fire);
    opacity: 0.85;
}

/* La llave que va a jugar el jugador */
.tb-slot.is-current {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px #000, 0 0 18px var(--accent-gold-dim), var(--shadow-hard-sm);
    animation: csCursorPulse 0.7s ease-in-out infinite alternate;
}

/* Recién decidida: el ganador destella y el perdedor se apaga */
.tb-slot.is-fresh.is-win {
    animation: tbWinPop 0.5s var(--ease-pop) 0.9s both;
}

.tb-slot.is-fresh.is-out :is(.tb-portrait, .tb-slot-text) {
    animation: tbFadeOut 0.7s ease 0.4s both;
}

@keyframes tbWinPop {
    0%   { scale: 1; filter: brightness(1); }
    40%  { scale: 1.08; filter: brightness(1.6); }
    100% { scale: 1; filter: brightness(1); }
}

@keyframes tbFadeOut {
    from { filter: none; }
    to   { filter: grayscale(1) brightness(0.5); }
}

.tb-slot.is-empty {
    justify-content: center;
    border: 2px dashed var(--line);
    background: rgba(5, 5, 16, 0.6);
    box-shadow: none;
}

.tb-slot-tbd {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-secondary);
    opacity: 0.7;
    transform: skewX(calc(var(--skew) * -1));
}

/* Centro: trofeo, VS de la final y casilla del campeón */
.tb-trophy {
    position: absolute;
    top: 24px;
    height: 88px;
    display: grid;
    place-items: center;
    font-size: 54px;
    line-height: 1;
    filter: grayscale(0.7) brightness(0.6);
}

.tb-trophy.is-won {
    filter: drop-shadow(0 0 16px var(--accent-gold));
    animation: crownBounce 1s ease-in-out infinite;
}

.tb-final-vs {
    position: absolute;
    z-index: 1;
    text-align: center;
    font-family: var(--font-impact);
    font-size: 18px;
    line-height: 18px;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000;
}

.tb-champion {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 2px dashed var(--line);
    background: rgba(5, 5, 16, 0.6);
    transform: skewX(var(--skew));
}

.tb-champion > * {
    transform: skewX(calc(var(--skew) * -1));
}

.tb-champion-label {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-secondary);
}

.tb-champion-name {
    font-family: var(--font-impact);
    font-size: 20px;
    color: var(--text-secondary);
}

.tb-champion.is-set {
    border: 2px solid var(--c);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, #000), rgba(5, 5, 16, 0.9));
    box-shadow: 0 0 20px color-mix(in srgb, var(--c) 60%, transparent), var(--shadow-hard-sm);
}

.tb-champion.is-set .tb-champion-name {
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}

.tb-champion.is-set .tb-champion-label {
    color: var(--accent-gold);
}

.tb-champion-crown {
    font-size: 16px;
    line-height: 1;
}

/* Pie: el combate que viene y los botones */
.tb-footer {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
}

.tb-info {
    flex: 1;
    min-width: 0;
    padding: 6px 14px 7px;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    box-shadow: var(--shadow-hard-sm);
}

.tb-info-kicker {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--accent-gold);
}

.tb-info-match {
    font-family: var(--font-impact);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 2px 2px 0 #000;
}

.tb-info-match small {
    font-size: 14px;
    color: var(--text-secondary);
}

.tb-info-rows {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.tb-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 8px;
}

.tb-actions .cp-btn.is-primary .mode-name {
    font-size: 22px;
}

.tb-actions .cp-btn .mode-name {
    font-size: 15px;
}

/* ══════════════════════════════
   FINAL DE TORNEO: ¡CAMPEÓN! / ELIMINADO
   ══════════════════════════════ */
#tournament-result-screen {
    --reward-color: var(--accent-gold);
    overflow: hidden;
}

#tournament-result-screen.is-eliminated {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(255, 34, 68, 0.16) 0%, transparent 60%),
        linear-gradient(180deg, rgba(14, 4, 10, 0.82) 0%, rgba(5, 3, 8, 0.94) 100%);
}

#tournament-result-screen.is-eliminated .tr-rays {
    display: none;
}

.tr-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 56px;
}

.tr-art-wrap {
    position: relative;
    width: 340px;
    height: 450px;
    flex-shrink: 0;
}

.tr-art {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    filter: drop-shadow(0 0 3px var(--reward-color)) drop-shadow(0 0 26px var(--reward-color));
}

#tournament-result-screen.is-champion.reveal .tr-art {
    animation: rewardReveal 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

#tournament-result-screen.is-eliminated .tr-art {
    filter: grayscale(1) brightness(0.55) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.6));
    transform: rotate(-4deg);
    transform-origin: bottom center;
}

.tr-text {
    flex: 1;
    min-width: 0;
}

#tournament-result-screen.reveal .tr-text > * {
    animation: bannerIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
#tournament-result-screen.reveal .tr-text > :nth-child(1) { animation-delay: 0.4s; }
#tournament-result-screen.reveal .tr-text > :nth-child(2) { animation-delay: 0.5s; }
#tournament-result-screen.reveal .tr-text > :nth-child(3) { animation-delay: 0.6s; }
#tournament-result-screen.reveal .tr-text > :nth-child(4) { animation-delay: 0.7s; }
#tournament-result-screen.reveal .tr-text > :nth-child(n+5) { animation-delay: 0.85s; }

.tr-kicker {
    display: inline-block;
    padding: 4px 18px 4px 12px;
    background: rgba(5, 5, 16, 0.9);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 3px;
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
}

.is-eliminated .tr-kicker {
    border-left-color: var(--accent-fire);
    color: var(--accent-fire);
}

.tr-title {
    margin: 12px 0 10px;
    font-family: var(--font-impact);
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-shadow: 4px 4px 0 #000, 0 0 26px var(--accent-gold-dim);
    white-space: nowrap;
}

.is-eliminated .tr-title {
    color: #fff;
    text-shadow: 4px 4px 0 var(--accent-fire), 0 0 26px var(--accent-fire-dim);
}

.tr-name-banner {
    display: inline-block;
    padding: 6px 34px 8px 20px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--reward-color) 60%, #000) 0%, rgba(0, 0, 0, 0.55) 75%, transparent 100%);
    border-left: 9px solid var(--reward-color);
    transform: skewX(var(--skew));
}

.is-eliminated .tr-name-banner {
    background: linear-gradient(90deg, #2a2a33 0%, rgba(0, 0, 0, 0.55) 75%, transparent 100%);
    border-left-color: #555;
}

.tr-name-banner > span {
    display: inline-block;
    transform: skewX(calc(var(--skew) * -1));
    font-family: var(--font-impact);
    font-size: 36px;
    line-height: 1;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
}

.tr-sub {
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 2px;
    color: #e8e8f8;
    text-transform: uppercase;
}

/* Camino del jugador: un rival por ronda */
.tr-path {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tr-step {
    --c: #888;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 420px;
    height: 34px;
    padding-right: 12px;
    background: rgba(5, 5, 16, 0.85);
    border: 2px solid var(--line);
    border-left: 6px solid var(--c);
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
}

.tr-step > * {
    transform: skewX(calc(var(--skew) * -1));
}

.tr-step-round {
    width: 76px;
    padding-left: 8px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent-gold);
}

.tr-step-face {
    width: 30px;
    height: 30px;
    background-color: color-mix(in srgb, var(--c) 40%, #05050f);
    background-repeat: no-repeat;
    background-size: auto 230%;
    background-position: center 4%;
}

.tr-step-name {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
}

.tr-step-mark {
    font-family: var(--font-heading);
    font-size: 20px;
    color: #44dd77;
    text-shadow: 2px 2px 0 #000;
}

.tr-step.is-lost {
    border-color: color-mix(in srgb, var(--accent-fire) 60%, var(--line));
}

.tr-step.is-lost .tr-step-mark {
    color: var(--accent-fire);
}

/* Botones apilados (los textos son largos) */
.tr-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
}

.tr-actions .cp-btn.is-primary .mode-name {
    font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .tb-line.is-lit.is-fresh { animation: none; stroke-dashoffset: 0; }
    .tb-slot.is-current, .tb-slot.is-fresh.is-win, .tb-trophy.is-won,
    .tb-slot.is-fresh.is-out :is(.tb-portrait, .tb-slot-text),
    #tournament-result-screen.reveal .tr-art,
    #tournament-result-screen.reveal .tr-text > * { animation: none; }
}

/* Panel DEBUG del menú: con las herramientas de Progreso y Torneo ya no cabía; se compacta */
.mm-panel.is-debug .mm-status { gap: 2px; margin-bottom: 8px; }
.mm-panel.is-debug .mm-sub-list { gap: 5px; }
.mm-panel.is-debug .mm-sub { min-height: 41px; padding-block: 3px; }
.mm-panel.is-debug .mm-panel-hint { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════
   TOKENS Y TIENDA
   Moneda (.coin), saldo del menú principal (#mm-wallet) y pantalla
   de la tienda (#shop-screen, shop.js). Precios en progression.js.
   ═══════════════════════════════════════════════════════════ */

/* Moneda de token: se usa junto a cualquier cifra de tokens */
.coin {
    display: inline-block;
    flex-shrink: 0;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.35em;
    vertical-align: -0.12em;
    border: 2px solid #5a3d00;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6b0 0 14%, #ffd700 38%, #c08a00 100%);
    box-shadow: 1px 1px 0 #000;
}

/* Saldo en la barra superior del menú principal (pegado a la etiqueta de rol) */
.mm-wallet {
    margin-left: auto;
    margin-right: 14px;
    padding: 4px 14px;
    background: color-mix(in srgb, var(--accent-gold) 12%, rgba(5, 5, 16, 0.85));
    border: 1px solid var(--line-soft);
    border-left: 5px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    transform: skewX(var(--skew));
}

/* Premios en tokens dentro de Campaña y Torneo */
.cp-reward small {
    font-size: 11px;
    color: var(--accent-cyan);
}

.tb-info-prize {
    color: var(--accent-gold);
}

.tr-tokens {
    margin-top: 8px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000;
}

/* ══════════════════════════════
   PANTALLA DE TIENDA
   ══════════════════════════════ */
#shop-screen {
    justify-content: flex-start;
    padding: 12px 32px 40px;
    background: linear-gradient(180deg, rgba(8, 8, 26, 0.7) 0%, rgba(5, 5, 16, 0.88) 100%);
}

.sh-top-bar {
    width: 100%;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

#shop-screen .sh-title {
    margin: 0;
}

.mode-btn.cp-btn.sh-back {
    margin-left: auto;
    padding: 5px 14px;
}

.sh-back .mode-name {
    font-size: 14px;
}

.sh-wallet {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 18px 4px 14px;
    background: rgba(5, 5, 16, 0.9);
    border: 2px solid var(--accent-gold);
    border-left-width: 8px;
    color: var(--accent-gold);
    font-family: var(--font-impact);
    font-size: 28px;
    line-height: 1;
    text-shadow: 2px 2px 0 #000;
    transform: skewX(var(--skew));
    box-shadow: 0 0 14px var(--accent-gold-dim), var(--shadow-hard-sm);
}

.sh-wallet small {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 2px;
}

.sh-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    gap: 20px;
    margin-top: 12px;
}

.sh-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 14px;
    background: var(--panel-bg);
    border: 2px solid var(--line);
    border-left: 8px solid var(--accent-fire);
    box-shadow: var(--shadow-hard);
}

.sh-gacha { flex: 1.3; min-width: 0; }
.sh-skins { flex: 1; min-width: 0; border-left-color: var(--accent-gold); }

.sh-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sh-panel-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000;
}

.sh-price {
    padding: 2px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--line-soft);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 15px;
    transform: skewX(var(--skew));
}

.sh-panel-desc {
    margin: 0;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Gacha: siluetas de los luchadores que aún puede dar */
.sh-pool {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: center;
    gap: 10px 12px;
    padding: 4px 6px;
}

.sh-pool-card {
    --c: #888;
    position: relative;
    height: 104px;
    overflow: hidden;
    background: linear-gradient(170deg, #1a1a34 0%, #08081a 100%);
    border: 2px solid var(--line);
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
    transition: border-color 0.1s ease, box-shadow 0.1s ease, scale 0.1s ease;
}

.sh-pool-art {
    position: absolute;
    inset: 0 -12px;
    background-repeat: no-repeat;
    background-size: auto 200%;
    background-position: center 2%;
    filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
    transform: skewX(calc(var(--skew) * -1));
    transition: filter 0.5s ease;
}

.sh-pool-q {
    position: absolute;
    inset: 0 0 18px 0;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 38px;
    color: var(--accent-gold);
    opacity: 0.75;
    text-shadow: 3px 3px 0 #000;
    transform: skewX(calc(var(--skew) * -1));
}

.sh-pool-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 18px;
    background: rgba(5, 5, 16, 0.9);
    border-top: 2px solid var(--line);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* La luz del gacha pasa por esta carta */
.sh-pool-card.is-roll {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px #000, 0 0 18px var(--accent-gold), var(--shadow-hard-sm);
    scale: 1.06;
    z-index: 2;
}

.sh-pool-card.is-roll .sh-pool-q {
    color: #fff;
    opacity: 1;
}

/* Le ha tocado: se enciende con su color, todavía en silueta (se revela en la invocación) */
.sh-pool-card.is-picked {
    border-color: var(--c);
    background: linear-gradient(170deg, color-mix(in srgb, var(--c) 70%, #05050f) 0%, color-mix(in srgb, var(--c) 22%, #05050f) 100%);
    box-shadow: 0 0 0 2px #000, 0 0 26px var(--c), var(--shadow-hard-sm);
    z-index: 3;
    animation: shPicked 0.7s var(--ease-pop) both;
}

.sh-pool-card.is-picked .sh-pool-art { filter: brightness(0) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--c)); }
.sh-pool-card.is-picked .sh-pool-q { color: #fff; opacity: 1; text-shadow: 3px 3px 0 #000, 0 0 14px var(--c); }
.sh-pool-card.is-picked .sh-pool-name { color: #fff; border-top-color: var(--c); }

@keyframes shPicked {
    0%   { scale: 1.06; filter: brightness(2.5); }
    40%  { scale: 1.2; }
    100% { scale: 1.14; filter: brightness(1); }
}

#shop-screen.is-rolling .sh-pool-card:not(.is-roll):not(.is-picked) {
    opacity: 0.55;
}

.sh-pool-done {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    font-size: 72px;
    filter: drop-shadow(0 0 18px var(--accent-gold));
}

.sh-gacha-actions {
    display: flex;
    justify-content: center;
    min-height: 0;
}

.sh-gacha-actions .cp-btn.is-primary {
    min-width: 300px;
}

#shop-screen.is-rolling .sh-buy {
    opacity: 0.45;
}

/* ══ INVOCACIÓN DEL GACHA (shop.js › summon) ══
   .is-on: la carta vuela desde su silueta (--from-x/-y/-s) en 0,5 s y se carga 1,25 s
   (anillos y chispas hacia dentro, temblor creciente). .is-burst (1,75 s): estalla en
   blanco. Después, la pantalla de recompensa entra desde ese mismo blanco. */
.sh-summon {
    --c: var(--accent-gold);
    --from-x: 0px;
    --from-y: 0px;
    --from-s: 0.4;
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    grid-template: 100% / 100%;
    place-items: center;
    overflow: hidden;
}

.sh-summon[hidden] {
    display: none;
}

.sh-summon > * {
    grid-area: 1 / 1;
}

.sh-summon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 30%, transparent) 0%, rgba(3, 3, 10, 0.9) 55%, rgba(3, 3, 10, 0.97) 100%);
    opacity: 0;
}

.sh-summon.is-on::before {
    animation: rwFadeIn 0.35s ease-out both;
    opacity: 1;
}

.sh-summon-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 1100px;
    height: 1100px;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 35%, transparent) 0deg 8deg, transparent 8deg 20deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 50%);
    mask-image: radial-gradient(circle, #000 0%, transparent 50%);
    opacity: 0;
}

.sh-summon.is-on .sh-summon-rays {
    animation: rewardRays 5s linear infinite, shSumRays 1.3s ease-in 0.45s both;
}

@keyframes shSumRays {
    0%   { opacity: 0; scale: 0.5; }
    100% { opacity: 1; scale: 1.15; }
}

/* Anillos (con la inclinación de los paneles) que se cierran sobre la carta */
.sh-summon-rings,
.sh-summon-sparks {
    position: relative;
    width: 0;
    height: 0;
}

.sh-summon-rings > i {
    position: absolute;
    width: 230px;
    height: 300px;
    margin: -150px 0 0 -115px;
    border: 4px solid var(--c);
    box-shadow: 0 0 18px var(--c), inset 0 0 18px var(--c);
    transform: skewX(var(--skew));
    opacity: 0;
}

.sh-summon.is-on .sh-summon-rings > i { animation: shSumRing 0.8s ease-in 0.5s infinite; }
.sh-summon.is-on .sh-summon-rings > i:nth-child(2) { animation-delay: 0.77s; }
.sh-summon.is-on .sh-summon-rings > i:nth-child(3) { animation-delay: 1.04s; }

@keyframes shSumRing {
    0%   { scale: 2.6; opacity: 0; }
    45%  { opacity: 0.9; }
    100% { scale: 0.95; opacity: 0; }
}

.sh-summon.is-burst .sh-summon-rings > i,
.sh-summon.is-burst .sh-summon-rings > i:nth-child(n) {
    animation: shSumRingOut 0.35s ease-out both;
}

@keyframes shSumRingOut {
    0%   { scale: 1; opacity: 1; border-width: 8px; }
    100% { scale: 3.2; opacity: 0; border-width: 1px; }
}

/* Chispas: rayitas que viajan desde fuera hasta la carta */
.sh-summon-sparks > i {
    position: absolute;
    width: 18px;
    height: 3px;
    margin-top: -1.5px;
    background: linear-gradient(90deg, #fff, var(--c));
    box-shadow: 0 0 6px var(--c);
    transform-origin: 0 50%;
    opacity: 0;
}

.sh-summon.is-on .sh-summon-sparks > i {
    animation: shSumSpark var(--t) ease-in calc(0.45s + var(--w)) infinite;
}

@keyframes shSumSpark {
    0%   { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scaleX(2.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateX(110px) scaleX(0.6); }
}

.sh-summon.is-burst .sh-summon-sparks { display: none; }

/* La carta */
.sh-summon-card {
    position: relative;
    width: 200px;
    height: 270px;
    overflow: hidden;
    background: linear-gradient(170deg, color-mix(in srgb, var(--c) 55%, #05050f) 0%, #08081a 100%);
    border: 4px solid var(--c);
    box-shadow: 0 0 0 3px #000, 0 0 30px var(--c), var(--shadow-hard);
    transform: skewX(var(--skew));
    opacity: 0;
}

.sh-summon.is-on .sh-summon-card {
    animation: shSumFly 0.5s cubic-bezier(0.3, 0.9, 0.4, 1) both, shSumCharge 1.25s linear 0.5s both;
}

.sh-summon.is-burst .sh-summon-card {
    animation: shSumFly 0.5s cubic-bezier(0.3, 0.9, 0.4, 1) both, shSumCharge 1.25s linear 0.5s both, shSumBurst 0.35s ease-in both;
}

@keyframes shSumFly {
    0%   { opacity: 1; translate: var(--from-x) var(--from-y); scale: var(--from-s); }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes shSumCharge {
    0%   { translate: 0 0;      rotate: 0deg;    scale: 1;    filter: brightness(1); }
    10%  { translate: -1px 0;   rotate: -0.5deg; }
    20%  { translate: 1px -1px; rotate: 0.8deg; }
    30%  { translate: -2px 1px; rotate: -1.2deg; }
    40%  { translate: 2px 0;    rotate: 1.6deg; }
    50%  { translate: -3px -1px; rotate: -2deg; }
    60%  { translate: 3px 1px;  rotate: 2.5deg; }
    70%  { translate: -4px 0;   rotate: -3deg; }
    80%  { translate: 4px -1px; rotate: 3.5deg; }
    90%  { translate: -5px 1px; rotate: -4deg; }
    100% { translate: 0 0;      rotate: 0deg;    scale: 1.08; filter: brightness(1.6); }
}

@keyframes shSumBurst {
    0%   { scale: 1.08; filter: brightness(1.6); }
    100% { scale: 1.7;  filter: brightness(6); }
}

.sh-summon-art {
    position: absolute;
    inset: 0 -26px;
    background-repeat: no-repeat;
    background-size: auto 140%;
    background-position: center 0%;
    filter: brightness(0) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    transform: skewX(calc(var(--skew) * -1));
}

.sh-summon.is-burst .sh-summon-art {
    animation: shSumArtWhite 0.3s ease-in both;
}

@keyframes shSumArtWhite {
    to { filter: brightness(0) invert(1) drop-shadow(0 0 8px #fff); }
}

.sh-summon-q {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 110px;
    color: var(--accent-gold);
    text-shadow: 5px 5px 0 #000, 0 0 24px var(--c);
    transform: skewX(calc(var(--skew) * -1));
}

.sh-summon.is-on .sh-summon-q {
    animation: shSumQ 0.32s ease-in-out 0.5s infinite alternate;
}

@keyframes shSumQ {
    to { scale: 1.14; color: #fff; }
}

/* Destello que cruza la carta mientras se carga */
.sh-summon-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
    translate: -120% 0;
}

.sh-summon.is-on .sh-summon-card::after {
    animation: shSumShine 0.6s ease-in-out 0.5s infinite;
}

@keyframes shSumShine {
    from { translate: -120% 0; }
    to   { translate: 120% 0; }
}

.sh-summon-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.sh-summon.is-burst .sh-summon-flash {
    animation: shSumFlash 0.35s ease-in forwards;
}

@keyframes shSumFlash {
    to { opacity: 1; }
}

.sh-summon-skip {
    position: absolute;
    right: 28px;
    bottom: 18px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-shadow: 2px 2px 0 #000;
}

/* Skins: tarjeta-botón con el muñeco de la skin y su precio */
.sh-skin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 10px 0 4px;
}

.sh-skin {
    --c: #888;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 84px;
    padding: 0 16px 0 6px;
    background: rgba(5, 5, 16, 0.85);
    border: 2px solid var(--line);
    border-left: 6px solid var(--c);
    color: var(--text-primary);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    outline: none;
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
    transition: transform 0.2s var(--ease-pop), border-color 0.2s ease, box-shadow 0.2s ease;
}

.sh-skin > * {
    transform: skewX(calc(var(--skew) * -1));
}

.sh-skin:hover,
.sh-skin:focus {
    border-color: var(--accent-cyan);
    border-left-color: var(--c);
    box-shadow: 0 0 20px var(--accent-cyan-dim), 8px 8px 0 rgba(0, 0, 0, 0.45);
    transform: skewX(var(--skew)) translateX(6px);
}

.sh-skin-canvas {
    width: 60px;
    height: 72px;
    flex-shrink: 0;
}

.sh-skin-texts {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sh-skin-name {
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 2px 2px 0 #000;
}

.sh-skin-kind {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.sh-skin-price {
    margin-left: auto;
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--accent-gold);
    white-space: nowrap;
    text-shadow: 2px 2px 0 #000;
}

.sh-skin.is-owned .sh-skin-price { color: #44dd77; }
.sh-skin.is-owned { opacity: 0.75; }

.sh-skin.is-unavailable {
    opacity: 0.5;
    border-style: dashed;
}

.sh-skin.is-unavailable .sh-skin-price {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Compra armada: falta la segunda pulsación */
.sh-skin.is-confirm,
.mode-btn.sh-buy.is-confirm {
    border-color: var(--accent-fire);
    background: linear-gradient(135deg, rgba(255, 34, 68, 0.4), rgba(22, 22, 54, 0.96));
}

.sh-skin.is-confirm .sh-skin-price,
.mode-btn.sh-buy.is-confirm .mode-name {
    color: #fff;
}

.sh-skin.is-denied,
.mode-btn.sh-buy.is-denied {
    animation: deniedShake 0.32s ease;
}

/* Aviso corto (falta de tokens, ya la tienes…) */
.sh-toast {
    position: absolute;
    left: 50%;
    bottom: 46px;
    z-index: 5;
    translate: -50% 0;
    padding: 6px 18px;
    background: rgba(10, 10, 28, 0.95);
    border: 2px solid var(--line);
    border-left: 6px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
    box-shadow: var(--shadow-hard-sm);
    transform: skewX(var(--skew));
    opacity: 0;
    pointer-events: none;
}

.sh-toast.is-error { border-left-color: var(--accent-fire); color: var(--accent-fire); }
.sh-toast.show { animation: mmToast 2.4s ease both; }

@media (prefers-reduced-motion: reduce) {
    .sh-pool-card.is-picked, .sh-skin.is-denied, .mode-btn.sh-buy.is-denied { animation: none; }
    .sh-summon.is-on .sh-summon-card, .sh-summon.is-burst .sh-summon-card,
    .sh-summon.is-on .sh-summon-q, .sh-summon.is-on .sh-summon-card::after { animation: none; opacity: 1; }
    .sh-summon-rays, .sh-summon-rings, .sh-summon-sparks { display: none; }
    .sh-toast.show { animation-name: mmToastFade; }
}

/* ══════════════════════════════
   PERFIL (profiles.js)
   Ventana para entrar / crear perfil y etiqueta de guardado.
   Reutiliza .net-card, .net-input, .net-btn y .net-link-btn.
   ══════════════════════════════ */
.profile-overlay {
    position: absolute;
    inset: 0;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(5, 5, 16, 0.88);
    backdrop-filter: blur(4px);
}
.profile-overlay[hidden] { display: none; }

.profile-card { width: 460px; animation: profile-in 0.25s var(--ease-pop) both; }
.profile-card .net-card-desc { flex-grow: 0; }
@keyframes profile-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.profile-who {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.profile-status {
    min-height: 20px;
    margin: 10px 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
}
.profile-status.error { color: var(--accent-fire); }

.profile-row { display: flex; gap: 12px; }
.profile-row .net-btn { flex: 1; }
.profile-row .net-btn .mode-name { font-size: 16px; }
.profile-btn-alt { border-left-color: var(--accent-gold); }

.profile-skip { align-self: center; margin-top: 16px; }

/* Etiqueta de guardado (esquina inferior izquierda), nunca tapa clics */
.profile-badge {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 290;
    padding: 3px 10px;
    background: var(--panel-bg);
    border-left: 3px solid var(--accent-cyan);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.profile-badge.show { opacity: 1; }
.profile-badge.error { border-left-color: var(--accent-fire); color: var(--accent-fire); }
@media (prefers-reduced-motion: reduce) {
    .profile-card { animation: none; }
}

/* ══════════════════════════════
   PERFIL › FICHA DEL JUGADOR (profiles.js › renderAccount)
   Tokens, estadísticas y logros (progression.js › Achievements).
   Medidas para 1024x576: la ficha mide 900 x ~510 px.
   ══════════════════════════════ */
.pf-card {
    --pc: var(--accent-gold);
    width: 900px;
    max-height: 548px;
    padding: 16px 24px 18px;
    text-align: left;
    justify-content: flex-start;
}

.pf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
    position: relative;
}

/* Línea láser bajo la cabecera, como las de los títulos */
.pf-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--laser);
}

.pf-id { min-width: 0; }

.pf-kicker {
    display: inline-block;
    padding: 2px 12px 2px 8px;
    background: rgba(5, 5, 16, 0.9);
    border-left: 5px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 3px;
    transform: skewX(var(--skew));
}

.pf-name {
    margin: 6px 0 0;
    font-family: var(--font-impact);
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 3px 3px 0 #000, 0 0 18px var(--accent-gold-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-wallet { flex-shrink: 0; }

.pf-body {
    display: flex;
    gap: 22px;
    margin-top: 14px;
    min-height: 0;
}

.pf-col { display: flex; flex-direction: column; min-width: 0; }
.pf-col-stats { width: 310px; flex-shrink: 0; }
.pf-col-ach { flex: 1; }

.pf-sec {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-shadow: 2px 2px 0 #000;
}

.pf-sec-count {
    margin-left: auto;
    color: var(--text-primary);
    font-size: 14px;
}

/* Estadísticas: una tarjeta por cifra, con el borde izquierdo de color */
.pf-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.pf-stat {
    --sc: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 6px 16px 6px 14px;
    background: rgba(0, 0, 0, 0.42);
    border: 2px solid var(--line);
    border-left: 6px solid var(--sc);
    box-shadow: var(--shadow-hard-sm);
}

.pf-stat.is-campaign { --sc: var(--accent-fire); }
.pf-stat.is-tourney  { --sc: var(--p4-color); }
.pf-stat.is-ach      { --sc: var(--accent-gold); }

.pf-stat dt {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    line-height: 1.2;
}

.pf-stat dd {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.pf-num {
    font-family: var(--font-impact);
    font-size: 30px;
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

.pf-wdl { display: flex; align-items: baseline; gap: 5px; }
.pf-w { color: #44dd77; }
.pf-d { color: var(--accent-gold); }
.pf-l { color: var(--accent-fire); }
.pf-sep { color: var(--text-secondary); font-size: 18px; }

.pf-stat-hint {
    margin-top: 2px;
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.pf-status {
    margin: 10px 0 8px;
    min-height: 16px;
    font-size: 12px;
}

.pf-col-stats .profile-row { margin-top: auto; }
.pf-col-stats .profile-row .net-btn { padding: 9px 8px; }
.pf-col-stats .profile-row .net-btn .mode-name { font-size: 13px; white-space: nowrap; }

/* Logros: una fila por logro; los conseguidos, en dorado */
.pf-ach-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-ach {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 41px;
    padding: 0 12px 0 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-soft);
}

.pf-ach-icon {
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 16px;
    filter: grayscale(1) brightness(0.8);
}

.pf-ach-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-ach-name {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-primary);
    white-space: nowrap;
}

.pf-ach-desc {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-ach-bar {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.pf-ach-bar > i {
    display: block;
    height: 100%;
    background: var(--accent-cyan);
    box-shadow: 0 0 6px var(--accent-cyan);
}

.pf-ach-count {
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--text-secondary);
}

.pf-ach.is-done {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.16), rgba(0, 0, 0, 0.35) 70%);
    border-color: rgba(255, 215, 0, 0.35);
    border-left-color: var(--accent-gold);
}

.pf-ach.is-done .pf-ach-icon { filter: drop-shadow(0 0 6px var(--accent-gold)); }
.pf-ach.is-done .pf-ach-name { color: var(--accent-gold); text-shadow: 2px 2px 0 #000; }
.pf-ach.is-done .pf-ach-count { color: #44dd77; font-size: 16px; }

/* ── Cartel «¡LOGRO DESBLOQUEADO!» (progression.js › Achievements.toast) ── */
.ach-toast {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 280;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 620px;
    padding: 8px 22px 8px 14px;
    background: var(--panel-bg);
    border: 2px solid var(--accent-gold);
    border-left-width: 8px;
    box-shadow: 0 0 22px var(--accent-gold-dim), var(--shadow-hard);
    translate: -50% 0;
    transform: skewX(var(--skew));
    opacity: 0;
    pointer-events: none;
}

.ach-toast > * { transform: skewX(calc(var(--skew) * -1)); }

.ach-toast.show { animation: achToast 4.2s var(--ease-pop) both; }

@keyframes achToast {
    0%   { opacity: 0; translate: -50% -40px; }
    8%   { opacity: 1; translate: -50% 0; }
    90%  { opacity: 1; translate: -50% 0; }
    100% { opacity: 0; translate: -50% -20px; }
}

.ach-toast-icon {
    font-size: 30px;
    filter: drop-shadow(0 0 8px var(--accent-gold));
}

.ach-toast-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ach-toast-kicker {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--accent-gold);
}

.ach-toast-name {
    font-family: var(--font-impact);
    font-size: 22px;
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap;
}

.ach-toast-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ach-toast.show { animation: achToastFade 4.2s linear both; }
}

@keyframes achToastFade {
    0%, 100% { opacity: 0; }
    5%, 92%  { opacity: 1; }
}

/* ══════════════════════════════
   PERFIL › AJUSTES, RECORDAR USUARIO Y BOTÓN DE LA ESQUINA
   (profiles.js › renderSettings, rememberBox, renderChip)
   ══════════════════════════════ */
.pf-col-stats .pf-btn-settings { margin: 0 0 8px; padding: 8px; }
.pf-col-stats .pf-btn-settings .mode-name { font-size: 13px; white-space: nowrap; }
.pf-card.is-settings .pf-btn-settings { border-left-color: var(--accent-gold); }

.pf-col-settings { flex: 1; gap: 9px; }
.pf-col-settings .pf-sec { margin-bottom: 2px; }

.pf-set-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-set-label {
    width: 86px;
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.pf-set-row.is-pin {
    padding: 6px 8px 6px 0;
    background: rgba(255, 215, 0, 0.06);
    border-left: 4px solid var(--accent-gold);
}

.pf-set-row.is-pin .pf-set-label { width: 82px; padding-left: 8px; color: var(--accent-gold); }

.net-input.pf-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 4px 10px;
    font-size: 14px;
    text-align: left;
}

.pf-set-btn.net-btn {
    width: 104px;
    flex-shrink: 0;
    padding: 7px 6px;
}

.pf-set-btn .mode-name { font-size: 12px; white-space: nowrap; }

.pf-set-note {
    margin: -4px 0 0 94px;
    font-size: 10px;
    color: var(--text-secondary);
}

/* Casilla «Recordar usuario»: cuadro de borde recto con ✓, como el resto del juego */
.pf-remember {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.pf-remember input {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
}

.pf-remember-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--field-bg);
    border: 2px solid var(--line-soft);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
    color: #000;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1;
}

.pf-remember input:checked + .pf-remember-mark {
    background: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.pf-remember input:checked + .pf-remember-mark::before { content: '✓'; }

.pf-remember input:focus-visible + .pf-remember-mark,
.pf-remember input:focus + .pf-remember-mark {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.pf-remember-text {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--text-primary);
}

/* En el formulario de entrada, centrada bajo el PIN */
.profile-card form .pf-remember { justify-content: center; margin-top: 2px; }

/* Zona peligrosa: borrar perfil */
.pf-danger {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
    padding: 8px 10px;
    background: rgba(255, 34, 68, 0.07);
    border: 1px solid rgba(255, 34, 68, 0.35);
    border-left: 4px solid var(--accent-fire);
}

.pf-danger-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.pf-danger-title {
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--accent-fire);
    text-shadow: 2px 2px 0 #000;
}

.pf-danger-desc { font-size: 10px; line-height: 1.35; color: var(--text-secondary); }

.pf-btn-danger.net-btn { border-left-color: var(--accent-fire); width: 150px; }
.pf-btn-danger .mode-name { color: var(--accent-fire); }
.pf-btn-danger.is-confirm { background: color-mix(in srgb, var(--accent-fire) 30%, rgba(5, 5, 16, 0.9)); }
.pf-btn-danger.is-confirm .mode-name { color: #fff; }

.pf-set-msg { margin: 0; min-height: 16px; font-size: 12px; }
.pf-set-msg.ok { color: #44dd77; }

/* ── Botón del perfil en la esquina superior derecha del menú principal ── */
.mm-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: 14px;
    padding: 4px 10px 4px 5px;
    background: color-mix(in srgb, var(--accent-gold) 10%, rgba(5, 5, 16, 0.9));
    border: 1px solid var(--line-soft);
    border-left: 5px solid var(--accent-gold);
    color: var(--text-primary);
    transform: skewX(var(--skew));
    box-shadow: var(--shadow-hard-sm);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.mm-profile[hidden] { display: none; }
.mm-profile > * { transform: skewX(calc(var(--skew) * -1)); }

.mm-profile:hover,
.mm-profile:focus-visible {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold-dim), var(--shadow-hard-sm);
}

.mm-profile-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #ffe866 0%, var(--accent-gold) 45%, #b8860b 100%);
    border: 2px solid #000;
    color: #000;
    font-family: var(--font-impact);
    font-size: 20px;
    line-height: 1;
}

.mm-profile-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 150px;
}

.mm-profile-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}

.mm-profile-sub {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--accent-gold);
    white-space: nowrap;
}

.mm-profile-key { margin-left: 2px; }

.mm-profile.is-guest { border-left-color: var(--text-secondary); }
.mm-profile.is-guest .mm-profile-avatar { background: var(--bg-card); color: var(--text-secondary); border-color: var(--line-soft); }
.mm-profile.is-guest .mm-profile-sub { color: var(--accent-cyan); }