/**
 * ============================================
 * MEMORY MATRIX - ESTILOS CHESSARCADE
 * ============================================
 * Diseño: Neón futurista, mobile first
 * Colores: Negro, morado, cyan neón
 * Fuente: Orbitron
 */

/* ============================================
   VARIABLES CSS
   ============================================ */
:root {
    /* Colores neón */
    --neon-cyan: #00ffff;
    --neon-green: #00ff80;
    --neon-pink: #ff0080;
    --neon-orange: #ff8000;
    --neon-purple: #9d4edd;
    --gold: #ffd700;
    --neon-yellow: #FFD700;
    --dark-bg: #0a0a0a;
    --text-secondary: rgba(255, 255, 255, 0.7);

    /* Fondo degradado */
    --bg-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a0033 50%, #330066 100%);

    /* Espaciado */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;

    /* Bordes */
    --border-radius: 12px;
}

/* ============================================
   RESET Y BASE
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    /* Fuente principal: Orbitron (futurista) */
    font-family: 'Orbitron', 'Arial', monospace;

    /* Fondo degradado oscuro */
    background: var(--bg-gradient);
    background-attachment: fixed;

    /* Color de texto por defecto */
    color: white;

    /* Suavizar fuentes */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   FONDO CON GRID ANIMADO
   Efecto de grid neón que se mueve
   ============================================ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Grid de líneas cyan semi-transparentes */
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);

    /* Tamaño del grid: 50px x 50px */
    background-size: 50px 50px;

    /* No interfiere con clicks */
    pointer-events: none;

    /* Animación: mover el grid */
    animation: gridMove 20s linear infinite;

    /* Detrás de todo el contenido */
    z-index: 0;
}

/* Animación del grid */
@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

/* ============================================
   CONTAINER PRINCIPAL
   ============================================ */
.game-container {
    /* Posición relativa para que el contenido esté sobre el grid */
    position: relative;
    z-index: 1;

    /* Centrado y espaciado */
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md);

    /* Altura mínima para centrar verticalmente */
    min-height: 100vh;

    /* Flexbox para organizar elementos verticalmente */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Reducido de lg a md para mobile */
}

/* ============================================
   HEADER: Botones de navegación
   ============================================ */
.header {
    display: flex;
    justify-content: center; /* Centrado en mobile (sin hint) */
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap; /* Permitir wrap si es necesario */
}

/* ============================================
   BOTONES ICONO (HOME, SONIDO)
   ============================================ */
.btn-icon {
    /* Flexbox para centrar icono + texto */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);

    /* Tamaño y espaciado */
    padding: 10px 16px;
    min-height: 44px;  /* Touch target mínimo */

    /* Fondo semi-transparente */
    background: rgba(0, 0, 0, 0.6);

    /* Borde neón */
    border: 2px solid var(--neon-cyan);
    border-radius: var(--border-radius);

    /* Color de texto */
    color: var(--neon-cyan);

    /* Fuente */
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;

    /* Sin borde de botón por defecto */
    outline: none;

    /* Cursor pointer */
    cursor: pointer;

    /* Transición suave */
    transition: all 0.3s ease;

    /* Glow sutil */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* Hover: brillo más intenso */
.btn-icon:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Active: presionado */
.btn-icon:active {
    transform: translateY(0);
}

/* SVG dentro de botones */
.btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* ============================================
   COORDENADAS EN CASILLAS (HINT)
   ============================================ */

/* Coordenada centrada en casilla vacía */
.square-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Tipografía */
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(16px, 3vw, 24px); /* Tamaño moderado, cabe en casilla */
    font-weight: 900;

    /* Color neón cyan brillante */
    color: var(--neon-cyan);
    text-shadow:
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan),
        0 0 30px rgba(0, 255, 255, 0.5);

    /* Fondo oscuro semitransparente para contraste */
    background: rgba(0, 0, 0, 0.75);
    padding: 4px 10px;
    border-radius: 6px;

    /* Borde neón sutil */
    border: 2px solid var(--neon-cyan);
    box-shadow:
        0 0 15px rgba(0, 255, 255, 0.6),
        0 0 25px rgba(0, 255, 255, 0.4),
        inset 0 0 10px rgba(0, 255, 255, 0.2);

    /* Backdrop blur (desenfoque del fondo) */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* Z-index sobre coordenadas de borde */
    z-index: 15;

    /* No seleccionable */
    user-select: none;
    pointer-events: none;

    /* Animación de entrada */
    animation: hintAppear 0.3s ease-out;
}

/* Animación de aparición (escala) */
@keyframes hintAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Clase para fade-out */
.square-hint.fade-out {
    animation: hintFadeOut 0.8s ease-out forwards;
}

/* Animación de desaparición */
@keyframes hintFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Label del botón (oculto en mobile muy pequeño) */
.btn-label {
    display: none;
}

/* Mostrar label en pantallas ≥500px */
@media (min-width: 500px) {
    .btn-label {
        display: inline;
    }
}

/* Botón HOME: cyan */
.btn-home {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}

.btn-home:hover {
    box-shadow: 0 0 20px var(--neon-cyan);
}

/* Botón SONIDO: naranja */
.btn-sound {
    border-color: var(--neon-orange);
    color: var(--neon-orange);
}

.btn-sound:hover {
    box-shadow: 0 0 20px var(--neon-orange);
}

/* Botón LEADERBOARD: amarillo/gold */
.btn-leaderboard {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-leaderboard:hover {
    box-shadow: 0 0 20px var(--gold);
}

/* Botón HINT: amarillo/gold */
.btn-hint {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-hint:hover:not(:disabled) {
    box-shadow: 0 0 20px var(--gold);
}

.btn-hint:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* Hint mobile: Compacto, solo icono + número */
.btn-hint-mobile {
    /* Ocultar label, mostrar solo icono + número */
    padding: 8px 12px;
    min-width: auto;
    gap: 4px;
}

.btn-hint-mobile .btn-label {
    display: none; /* Ocultar texto "HINT" */
}

.btn-hint-mobile .hint-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
}

/* Mobile: Ocultar hint y undo del header, mostrar versiones mobile junto al timer */
@media (max-width: 767px) {
    .btn-hint:not(.btn-hint-mobile) {
        display: none;
    }

    .btn-undo-desktop {
        display: none;
    }

    /* AUMENTAR ÁREA TÁCTIL del banco de piezas en mobile */
    .bank-piece-slot {
        /* Aumentar padding interno para área táctil más grande */
        padding: 4px;
        /* Aumentar gap entre slots */
        margin: 2px;
    }

    .bank-piece-slot .piece {
        /* Pieza más grande = más fácil arrastrar */
        width: 95%;
        height: 95%;
    }

    /* Aumentar gap del grid del banco */
    .piece-bank {
        gap: 8px; /* antes: var(--spacing-sm) que es 4px */
        padding: 12px; /* antes: var(--spacing-sm) que es 4px */
    }
}

/* Separador de fila en header (solo visible en desktop) */
.header-break {
    display: none; /* Oculto en mobile */
}

/* Desktop: Ocultar hint/undo mobile, mostrar versiones desktop en header */
@media (min-width: 768px) {
    .btn-hint-mobile {
        display: none;
    }

    .btn-undo-mobile {
        display: none;
    }

    .timer-hint-container {
        justify-content: center; /* Timer centrado en desktop */
        display: flex;
        align-items: center;
    }

    .header {
        justify-content: center; /* Centrado en desktop */
        gap: var(--spacing-md);
    }

    /* Separador para forzar nueva fila */
    .header-break {
        display: block;
        width: 100%; /* Ancho completo para forzar salto */
        height: 0;
    }
}

/* Boton DESHACER - Color naranja */
.btn-undo {
    border-color: #ff8000;
    color: #ff8000;
}

.btn-undo:hover:not(:disabled) {
    box-shadow: 0 0 20px #ff8000;
}

.btn-undo:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* Boton LIMPIAR - Color rojo */
.btn-clear {
    border-color: #ff0055;
    color: #ff0055;
}

.btn-clear:hover:not(:disabled) {
    box-shadow: 0 0 20px #ff0055;
}

.btn-clear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================
   SELECTOR DE ESTILO DE PIEZAS
   Destacado con borde brillante y tamaño más grande
   ============================================ */
.piece-style-selector {
    /* Flexbox para organizar label + select */
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

    /* Fondo semi-transparente */
    background: rgba(157, 78, 221, 0.15);

    /* Borde neón magenta (más visible) */
    border: 3px solid var(--neon-pink);
    border-radius: var(--border-radius);

    /* Padding más generoso */
    padding: 10px 16px;

    /* Glow intenso */
    box-shadow:
        0 0 15px rgba(255, 0, 128, 0.5),
        0 0 30px rgba(255, 0, 128, 0.2);

    /* Transición */
    transition: all 0.3s ease;
}

.piece-style-selector:hover {
    box-shadow:
        0 0 25px rgba(255, 0, 128, 0.8),
        0 0 40px rgba(255, 0, 128, 0.4);
    background: rgba(255, 0, 128, 0.2);
    transform: translateY(-1px);
}

/* Label del selector */
.selector-label {
    /* Flexbox para icono + texto */
    display: flex;
    align-items: center;
    gap: 8px;

    /* Color magenta brillante */
    color: var(--neon-pink);

    /* Fuente */
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    font-weight: 900;

    /* Cursor */
    cursor: pointer;

    /* No margin */
    margin: 0;

    /* Text shadow para más brillo */
    text-shadow: 0 0 10px var(--neon-pink);
}

.selector-label svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 8px var(--neon-pink));
}

/* Select dropdown */
.style-select {
    /* Fondo oscuro */
    background: rgba(0, 0, 0, 0.9);

    /* Borde magenta */
    border: 2px solid var(--neon-pink);
    border-radius: 8px;

    /* Color de texto magenta */
    color: var(--neon-pink);

    /* Fuente */
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;

    /* Padding */
    padding: 8px 12px;

    /* Cursor */
    cursor: pointer;

    /* Sin outline */
    outline: none;

    /* Transición */
    transition: all 0.3s ease;

    /* Ancho mínimo */
    min-width: 140px;

    /* Text shadow */
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
}

.style-select:hover {
    background: rgba(255, 0, 128, 0.2);
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}

.style-select:focus {
    outline: none;
    box-shadow: 0 0 15px var(--neon-pink);
}

/* Opciones del select */
.style-select option {
    background: #1a0033;
    color: var(--neon-pink);
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    padding: 10px;
}

/* Mobile: ajustar tamaños */
@media (max-width: 500px) {
    .piece-style-selector {
        padding: 8px 12px;
        gap: 6px;
    }

    .selector-label {
        font-size: 13px;
    }

    .selector-label svg {
        width: 20px;
        height: 20px;
    }

    .style-select {
        min-width: 110px;
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Contenedor timer + hint (mobile) */
.timer-hint-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribuir: espaciador | timer | hint */
    gap: var(--spacing-sm);
    width: 100%;

    /* Order: En mobile va arriba */
    order: 1;
}

/* Botón undo mobile: Compacto, solo icono */
.btn-undo-mobile {
    padding: 8px;
    min-width: auto;
}

.btn-undo-mobile svg {
    margin: 0;
}

/* Timer Global (tiempo de sesión) */
.global-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    border-radius: var(--border-radius);
    font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.global-timer .timer-icon {
    font-size: 18px;
}

.global-timer .timer-display {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
    min-width: 50px;
    text-align: center;
}

/* Desktop: Timer global más grande */
@media (min-width: 900px) {
    .global-timer {
        margin-top: 20px;
        padding: 12px 18px;
    }

    .global-timer .timer-icon {
        font-size: 22px;
    }

    .global-timer .timer-display {
        font-size: 20px;
        min-width: 60px;
    }
}

/* ============================================
   TÍTULO PRINCIPAL
   ============================================ */
.title-section {
    text-align: center;
    margin: var(--spacing-sm) 0; /* Reducido margen vertical */

    /* Centrar con el tablero usando flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-title {
    /* Tamaño de fuente responsive (reducido en mobile) */
    font-size: clamp(1.8rem, 7vw, 4rem);
    font-weight: 900;

    /* Color cyan neón */
    color: var(--neon-cyan);

    /* Efecto de glow neón */
    text-shadow:
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan),
        0 0 30px var(--neon-cyan),
        0 0 40px var(--neon-cyan);

    /* Animación de pulso */
    animation: neonGlow 2s ease-in-out infinite alternate;

    /* Spacing entre letra */
    letter-spacing: 2px;

    /* Ancho máximo para alinearse con tablero */
    max-width: 90vw;
}

/* Subtítulo descriptivo del juego */
.game-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--neon-cyan);
    text-align: center;
    margin: -0.5rem 0 1.5rem 0;
    opacity: 0.9;
    letter-spacing: 0.05em;
}

/* Animación de glow pulsante */
@keyframes neonGlow {
    from {
        text-shadow:
            0 0 10px var(--neon-cyan),
            0 0 20px var(--neon-cyan),
            0 0 30px var(--neon-cyan);
    }
    to {
        text-shadow:
            0 0 15px var(--neon-cyan),
            0 0 30px var(--neon-cyan),
            0 0 45px var(--neon-cyan),
            0 0 60px var(--neon-cyan);
    }
}

/* Icono del cerebro */
.brain-icon {
    display: inline-block;
    font-size: 1.2em;
    margin-right: 0.2em;

    /* Animación de rebote sutil */
    animation: bounce 2s ease-in-out infinite;
}

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

/* ============================================
   ÁREA DE JUEGO
   Donde irán tablero y banco de piezas
   ============================================ */
.game-area {
    /* Flexbox para centrar contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);

    /* Espacio para crecer */
    flex: 1;
}

/* Desktop: layout horizontal (tablero + banco lado a lado) */
@media (min-width: 768px) {
    .game-area {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: var(--spacing-xl);
    }
}

/* ============================================
   BOTONES LATERALES (solo desktop)
   HINT y ATRAS a la izquierda del tablero
   ============================================ */

/* Oculto en mobile */
.side-buttons-container {
    display: none;
}

/* Visible solo en desktop */
@media (min-width: 768px) {
    .side-buttons-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-self: center;
    }
}

/* Estilo de los botones laterales */
.btn-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 12px 16px;
    min-width: 80px;

    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--neon-cyan);
    border-radius: 10px;

    color: var(--neon-cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;

    cursor: pointer;
    transition: all 0.3s ease;

    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.btn-side:hover:not(:disabled) {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    transform: scale(1.05);
}

.btn-side:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #555;
    color: #555;
    box-shadow: none;
}

.btn-side svg {
    stroke: currentColor;
}

.btn-side-label {
    font-size: 9px;
    letter-spacing: 0.5px;
}

/* Puntaje / Score (panel lateral desktop) */
.side-buttons-container .score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    min-width: 80px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--neon-yellow);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    margin-bottom: 6px;
}

.side-buttons-container .score-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: var(--neon-yellow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.side-buttons-container .score-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px var(--neon-yellow);
    letter-spacing: 1px;
}

/* Animación cuando sube el score */
.side-buttons-container .score-value.pulse {
    animation: scorePulse 0.4s ease-out;
}

@keyframes scorePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: var(--neon-yellow); }
    100% { transform: scale(1); }
}

/* Indicador de Nivel y Progreso (panel lateral desktop) - Compacto */
.side-buttons-container .level-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    min-width: 80px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--neon-cyan);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    margin-bottom: 6px;
}

.side-buttons-container .level-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px !important;
    font-weight: 700;
    color: var(--neon-cyan) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px var(--neon-cyan);
    background: none !important;
    -webkit-text-fill-color: var(--neon-cyan) !important;
    margin: 0 !important;
}

.side-buttons-container .progress-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
}

.side-buttons-container .progress-bar {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.side-buttons-container .progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-cyan), #00ff88);
    border-radius: 3px;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 6px var(--neon-cyan);
}

.side-buttons-container .progress-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

/* Animación al completar progreso */
.side-buttons-container .progress-fill.complete {
    background: linear-gradient(90deg, #00ff88, var(--neon-yellow));
    animation: progressPulse 0.5s ease-in-out;
}

@keyframes progressPulse {
    0%, 100% { box-shadow: 0 0 6px #00ff88; }
    50% { box-shadow: 0 0 15px #00ff88; }
}

/* Contador de Vidas (desktop) */
.lives-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    min-width: 80px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--neon-pink);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 0, 128, 0.3);
    margin-bottom: 8px;
}

.lives-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: var(--neon-pink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lives-hearts {
    font-size: 16px;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 5px rgba(255, 0, 128, 0.5));
    transition: all 0.3s ease;
}

/* Animación cuando pierde una vida */
.lives-hearts.pulse {
    animation: heartPulse 0.5s ease-in-out;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Botón HINT lateral - color amarillo */
.btn-hint-side {
    border-color: var(--neon-yellow);
    color: var(--neon-yellow);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.btn-hint-side:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* Botón UNDO lateral - color magenta */
.btn-undo-side {
    border-color: var(--neon-magenta);
    color: var(--neon-magenta);
    box-shadow: 0 0 10px rgba(255, 0, 128, 0.3);
}

.btn-undo-side:hover:not(:disabled) {
    background: rgba(255, 0, 128, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.6);
}

/* Ocultar botones HINT y UNDO del header en desktop (ahora están al lado) */
@media (min-width: 768px) {
    .header .btn-hint,
    .header .btn-undo-desktop {
        display: none !important;
    }
}

/* ============================================
   TABLERO DE AJEDREZ
   Grid 8x8 con coordenadas y borde neón
   ============================================ */

/* Contenedor del tablero */
.board-container {
    /* Centrar tablero */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);

    /* Padding */
    padding: var(--spacing-md);

    /* Fondo semi-transparente */
    background: rgba(0, 0, 0, 0.4);

    /* Borde neón cyan */
    border: 3px solid var(--neon-cyan);
    border-radius: var(--border-radius);

    /* Glow neón */
    box-shadow:
        0 0 20px var(--neon-cyan),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.05);
}

/* Wrapper del tablero - para posicionar el indicador "Click para Empezar" */
.board-wrapper {
    position: relative;
    display: inline-block;
}

/* El tablero 8x8 */
.chessboard {
    /* Grid 8x8 */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);

    /* Tamaño del tablero (mobile first) */
    width: 90vw;
    max-width: 400px;
    aspect-ratio: 1; /* Mantener cuadrado */

    /* Borde del tablero */
    border: 2px solid #333;

    /* Sombra interna sutil */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

    /* Posición relativa para coordenadas absolutas */
    position: relative;
}

/* Tablet y desktop: tablero más grande */
@media (min-width: 600px) {
    .chessboard {
        max-width: 450px;
    }
}

@media (min-width: 900px) {
    .chessboard {
        max-width: 500px;
    }
}

/* ============================================
   CASILLAS DEL TABLERO
   Colores alternados beige/marrón
   ============================================ */
.square {
    /* Centrar contenido (para piezas) */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Tamaño se define por el grid */
    width: 100%;
    height: 100%;

    /* Posición relativa para piezas absolutas */
    position: relative;

    /* Cursor pointer cuando sea draggable */
    cursor: default;

    /* Transición suave */
    transition: background-color 0.2s ease;
}

/* Color de casillas claras (beige) */
.square.light {
    background-color: #f0d9b5;
}

/* Color de casillas oscuras (marrón) */
.square.dark {
    background-color: #b58863;
}

/* Hover en casillas (feedback visual) */
.square:hover {
    filter: brightness(1.1);
}

/* ============================================
   COORDENADAS DEL TABLERO (a-h, 1-8)
   Posicionadas en el BORDE NEGRO del tablero
   ============================================ */

/* Coordenadas horizontales (a-h) - En el borde inferior */
.coord-file {
    position: absolute;
    bottom: -18px; /* Fuera de la casilla, en el padding del tablero */
    left: 50%;
    transform: translateX(-50%);

    /* Texto blanco fuerte, sin neón */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;

    pointer-events: none;
    user-select: none;
    z-index: 20;
}

/* Coordenadas verticales (1-8) - En el borde izquierdo */
.coord-rank {
    position: absolute;
    left: -12px; /* Fuera de la casilla, con más separación del borde */
    top: 50%;
    transform: translateY(-50%);

    /* Texto blanco fuerte, sin neón */
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;

    pointer-events: none;
    user-select: none;
    z-index: 20;
}

/* ELIMINAR colores según casilla - ahora siempre blanco */
/* (las reglas anteriores quedan comentadas/eliminadas) */

/* Tamaño de coordenadas responsive */
@media (min-width: 600px) {
    .coord-file {
        bottom: -20px;
        font-size: 13px;
    }

    .coord-rank {
        left: -14px;
        font-size: 13px;
    }
}

@media (min-width: 900px) {
    .coord-rank {
        left: -16px;
        font-size: 14px;
    }
}

/* ============================================
   PIEZAS DE AJEDREZ
   Imágenes SVG desde CDN Lichess
   ============================================ */

/**
 * Pieza: Imagen dentro de casilla
 *
 * IMPORTANTE: Las piezas son imágenes <img> con clase .piece
 * Se colocan dentro de las casillas .square
 * Tamaño aumentado para mejor visibilidad (95%)
 */
.piece {
    /* Tamaño: ocupar 95% de la casilla (más grande que antes) */
    width: 95%;
    height: 95%;

    /* Object-fit para mantener proporción */
    object-fit: contain;

    /* Cursor pointer para indicar que es interactiva */
    cursor: pointer;

    /* Transición suave para animaciones futuras */
    transition: transform 0.2s ease, filter 0.2s ease;

    /* No seleccionable como texto */
    user-select: none;
    -webkit-user-drag: none;

    /* Z-index para que esté sobre coordenadas */
    position: relative;
    z-index: 10;

    /* Imagen nítida */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Hover en pieza: escalar ligeramente */
.piece:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

/* Active: pieza siendo arrastrada (PASO 6) */
.piece.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* ============================================
   PASO 5: BANCO DE PIEZAS
   Panel lateral con piezas disponibles
   ============================================ */

/* Contenedor del banco */
.piece-bank-container {
    /* Posicionamiento relativo para el timer */
    position: relative;

    /* Centrar contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);

    /* Fondo semi-transparente */
    background: rgba(0, 0, 0, 0.4);

    /* Borde neón naranja */
    border: 3px solid var(--neon-orange);
    border-radius: var(--border-radius);

    /* Padding */
    padding: var(--spacing-md);

    /* Glow */
    box-shadow:
        0 0 20px var(--neon-orange),
        0 0 40px rgba(255, 128, 0, 0.3),
        inset 0 0 20px rgba(255, 128, 0, 0.05);

    /* Ancho en mobile */
    width: 100%;
    max-width: 400px;
}

/* Título del banco */
.bank-title {
    /* Color naranja neón */
    color: var(--neon-orange);

    /* Fuente */
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(16px, 4vw, 20px);
    font-weight: 900;

    /* Text shadow */
    text-shadow:
        0 0 10px var(--neon-orange),
        0 0 20px var(--neon-orange);

    /* Sin margen */
    margin: 0;

    /* Uppercase */
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Order: En mobile va abajo (después del banco) */
    order: 3;
}

/* Grid del banco */
.piece-bank {
    /* Grid de piezas: 6 columnas (6 tipos de piezas) */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);

    /* Order: En mobile va en el medio */
    order: 2;

    /* Ancho completo */
    width: 100%;

    /* Padding */
    padding: var(--spacing-sm);

    /* Fondo más oscuro */
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;

    /* SCROLL para más de 12 piezas (niveles 9+) */
    max-height: 250px;  /* ~3+ filas en mobile para niveles altos */
    overflow-y: auto;
    overflow-x: hidden;

    /* Scrollbar estilizado */
    scrollbar-width: thin;
    scrollbar-color: var(--neon-orange) rgba(0, 0, 0, 0.3);
}

/* Scrollbar para webkit (Chrome, Safari, Edge) */
.piece-bank::-webkit-scrollbar {
    width: 8px;
}

.piece-bank::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.piece-bank::-webkit-scrollbar-thumb {
    background: var(--neon-orange);
    border-radius: 4px;
}

.piece-bank::-webkit-scrollbar-thumb:hover {
    background: #ff9933;
}

/* Slot de pieza en el banco */
.bank-piece-slot {
    /* Aspect ratio cuadrado */
    aspect-ratio: 1;

    /* Centrar pieza */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Fondo de casilla - más visible cuando está vacío */
    background: rgba(255, 128, 0, 0.05);

    /* Borde sutil - patrón de líneas punteadas cuando vacío */
    border: 2px dashed rgba(255, 128, 0, 0.4);
    border-radius: 8px;

    /* Cursor para drag */
    cursor: grab;

    /* Transición */
    transition: all 0.3s ease;

    /* Posición relativa para pieza */
    position: relative;

    /* PREVENIR SCROLL en touch devices durante drag */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Slot con pieza: borde sólido */
.bank-piece-slot:has(.piece) {
    border-style: solid;
    border-color: rgba(255, 128, 0, 0.6);
    background: rgba(255, 128, 0, 0.15);
}

/* Slots extra (creados dinámicamente para niveles 9+) */
.bank-piece-slot.extra-slot {
    border-color: rgba(255, 200, 0, 0.4);
}

.bank-piece-slot.extra-slot:has(.piece) {
    border-color: rgba(255, 200, 0, 0.7);
    background: rgba(255, 200, 0, 0.15);
}

.bank-piece-slot:hover {
    background: rgba(255, 128, 0, 0.2);
    border-color: var(--neon-orange);
    box-shadow: 0 0 15px rgba(255, 128, 0, 0.5);
    transform: translateY(-2px);
}

.bank-piece-slot:active {
    cursor: grabbing;
}

/* Pieza dentro del banco */
.bank-piece-slot .piece {
    /* Tamaño 90% para el banco */
    width: 90%;
    height: 90%;

    /* IMPORTANTE: Permitir eventos para drag & drop */
    pointer-events: auto;
    cursor: grab;

    /* Transición suave para efectos de selección */
    transition: filter 0.3s ease, transform 0.2s ease;
}

.bank-piece-slot .piece:active {
    cursor: grabbing;
}

/* Pieza seleccionada con tap-tap (mobile) */
.bank-piece-slot .piece.selected {
    filter: drop-shadow(0 0 20px gold);
    transform: scale(1.1);
}

/* Label de tipo de pieza (opcional, para debug) */
.piece-label {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 9px;
    color: var(--neon-orange);
    opacity: 0.6;
    font-weight: 700;
    pointer-events: none;
}

/* Responsive: Desktop */
@media (min-width: 768px) {
    .piece-bank-container {
        /* Ancho fijo en desktop */
        width: 300px;
        max-width: none;
    }

    .piece-bank {
        /* 3 columnas en desktop */
        grid-template-columns: repeat(3, 1fr);
        order: 0;
        /* Más altura en desktop para scroll con más piezas (niveles 9-15) */
        max-height: 450px;
    }

    /* En desktop: Orden normal (título arriba, banco medio, timer abajo) */
    .bank-title {
        order: 0;
        text-align: center; /* Centrado en desktop */
    }

    .timer-hint-container {
        order: 0;
        justify-content: center; /* Centrar timer en desktop */
    }

    .global-timer {
        margin-top: 15px;
        margin-bottom: 0;
    }
}

/* ============================================
   MENSAJE DE ESTADO
   ============================================ */
.status-section {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md); /* Reducido padding vertical */
}

.status-message {
    /* Fondo semi-transparente */
    background: rgba(0, 0, 0, 0.6);

    /* Borde dorado */
    border: 2px solid var(--gold);
    border-radius: var(--border-radius);

    /* Padding reducido en mobile */
    padding: var(--spacing-sm);

    /* Color dorado */
    color: var(--gold);

    /* Fuente */
    font-size: clamp(13px, 3vw, 18px);
    font-weight: 500;

    /* Glow sutil */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);

    /* Text shadow */
    text-shadow: 0 0 10px var(--gold);

    /* Transición suave para cambios de color */
    transition: all 0.3s ease;
}

/* Estado de error - Cambia a rosa neón y se infla */
.status-message.error {
    /* Color rosa neón */
    color: var(--neon-pink);
    border-color: var(--neon-pink);
    background: rgba(255, 0, 128, 0.15);

    /* Glow intenso rosa */
    box-shadow:
        0 0 25px rgba(255, 0, 128, 0.6),
        0 0 40px rgba(255, 0, 128, 0.4);

    /* Text shadow rosa */
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink);

    /* Font más bold */
    font-weight: 700;

    /* Animación de inflado/desinflado */
    animation: statusPulse 1.5s ease-in-out;
}

/* Estado de success - Cambia a verde neón y se infla */
.status-message.success {
    /* Color verde neón */
    color: var(--neon-green);
    border-color: var(--neon-green);
    background: rgba(0, 255, 128, 0.15);

    /* Glow intenso verde */
    box-shadow:
        0 0 25px rgba(0, 255, 128, 0.6),
        0 0 40px rgba(0, 255, 128, 0.4);

    /* Text shadow verde */
    text-shadow:
        0 0 10px var(--neon-green),
        0 0 20px var(--neon-green);

    /* Font más bold */
    font-weight: 700;

    /* Animación de inflado/desinflado */
    animation: statusPulse 1.5s ease-in-out;
}

/* Animación de "respiración" - infla y desinfla */
@keyframes statusPulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(1.08);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ============================================
   BOTÓN PRIMARIO (Comenzar, etc.)
   ============================================ */
.action-section {
    text-align: center;
    padding: var(--spacing-sm) 0; /* Padding reducido */
}

.btn-primary {
    /* Tamaño más compacto en mobile */
    padding: 14px 36px;
    min-height: 52px;
    min-width: 180px;

    /* Fondo degradado */
    background: linear-gradient(45deg, var(--neon-pink), var(--neon-orange));

    /* Borde */
    border: 2px solid var(--neon-pink);
    border-radius: var(--border-radius);

    /* Texto */
    color: white;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;

    /* Cursor */
    cursor: pointer;

    /* Sin outline */
    outline: none;

    /* Transición */
    transition: all 0.3s ease;

    /* Glow */
    box-shadow:
        0 0 20px var(--neon-pink),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Hover: elevarse */
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 30px var(--neon-pink),
        0 5px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Active: presionar */
.btn-primary:active {
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE: MOBILE FIRST
   ============================================ */

/* Mobile pequeño (≤350px) */
@media (max-width: 350px) {
    .game-container {
        padding: var(--spacing-xs);
        gap: var(--spacing-sm); /* Gap más pequeño */
    }

    .game-title {
        font-size: 1.6rem;
    }

    .game-subtitle {
        font-size: 0.85rem;
        margin: -0.25rem 0 1rem 0;
    }

    .btn-primary {
        padding: 12px 28px;
        font-size: 16px;
        min-width: 160px;
        min-height: 48px;
    }

    .status-message {
        font-size: 12px;
        padding: var(--spacing-xs);
    }
}

/* Mobile general (≤767px) - Reducir espacios verticales */
@media (max-width: 767px) {
    /* Reducir espacio entre header y título */
    .title-section {
        margin: 0.25rem 0; /* Antes: var(--spacing-sm) = 1rem */
    }

    /* Reducir espacio del título al tablero */
    .game-area {
        gap: 0.5rem; /* Antes: var(--spacing-lg) = 2rem */
        margin-top: 0.5rem;
    }

    /* Reducir margen del subtítulo */
    .game-subtitle {
        margin: -0.25rem 0 0.5rem 0; /* Reducir margen inferior */
    }
}

/* Desktop: Restaurar gaps más grandes */
@media (min-width: 768px) {
    .game-container {
        gap: var(--spacing-lg);
    }

    .btn-primary {
        padding: 16px 48px;
        min-height: 60px;
        min-width: 200px;
        font-size: 20px;
    }
}

/* Tablet y desktop (≥768px) */
@media (min-width: 768px) {
    .game-container {
        padding: var(--spacing-xl);
    }
}

/* ============================================
   BOTÓN COMENZAR EN HEADER
   Movido desde abajo para mejor UX mobile
   ============================================ */

.btn-start-header {
    /* Adaptarse al tamaño del header */
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;

    /* Eliminar margin que podría romper el layout */
    margin: 0;

    /* Asegurar que se vea bien en el header */
    flex-shrink: 0;
}

/* Responsive: En mobile, hacer el botón más compacto */
@media (max-width: 600px) {
    .btn-start-header {
        padding: 8px 16px;
        font-size: 14px;
    }

    .btn-start-header .btn-label {
        display: none; /* Ocultar label en mobile si es necesario */
    }
}

/* ============================================
   SELECTOR DE PIEZAS ABAJO
   Movido desde header para evitar scroll en mobile
   ============================================ */

.piece-style-selector-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    margin: 20px auto;
    max-width: 400px;

    /* Fondo con borde neón */
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--neon-pink);
    border-radius: var(--border-radius);

    /* Glow neón magenta */
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.4);
}

.piece-style-selector-bottom .selector-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
}

.piece-style-selector-bottom .style-select {
    width: 100%;
    max-width: 250px;
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--neon-cyan);
    border: 2px solid var(--neon-pink);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.piece-style-selector-bottom .style-select:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.piece-style-selector-bottom .style-select:focus {
    outline: none;
    box-shadow: 0 0 15px var(--neon-pink);
}

/* ============================================
   CONTADOR DE TIEMPO (TIMER)
   Círculo con cuenta regresiva estilo neón
   POSICIONADO SOBRE LA BARRA LATERAL (no mueve layout)
   ============================================ */

.timer-container {
    /* Centrado sobre el banco (tanto mobile como desktop) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;

    pointer-events: none; /* No bloquea clics */
}

.timer-container.hidden {
    opacity: 0;
    visibility: hidden;
    /* NO cambiar height (eso mueve el layout) */
}

.timer-circle {
    position: relative;
    width: 120px;
    height: 120px;
}

.timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Empezar desde arriba */
}

/* Círculo de fondo (gris oscuro) */
.timer-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 6;
}

/* Círculo de progreso (neón cyan) */
.timer-progress {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283; /* 2 * PI * 45 */
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 8px var(--neon-cyan));
    transition: stroke-dashoffset 0.1s linear;
}

/* Texto del contador (número) */
.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow:
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan);
}

/* Animación de pulso cuando quedan pocos segundos */
@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.timer-circle.warning {
    animation: timerPulse 0.5s ease-in-out infinite;
}

.timer-circle.warning .timer-progress {
    stroke: var(--neon-pink);
    filter: drop-shadow(0 0 12px var(--neon-pink));
}

.timer-circle.warning .timer-text {
    color: var(--neon-pink);
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink);
}

/* ============================================
   OVERLAY DE ERROR
   Mensaje grande semitransparente cuando hay error
   ============================================ */

.error-overlay {
    /* Posición fija cubriendo toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    /* Fondo semitransparente oscuro */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);

    /* Centrar contenido */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Z-index alto para estar sobre todo */
    z-index: 9999;

    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Transición suave */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Estado visible del overlay */
.error-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Contenedor del mensaje de error */
.error-content {
    /* Fondo con degradado neón */
    background: linear-gradient(135deg, rgba(255, 0, 128, 0.2), rgba(138, 43, 226, 0.2));

    /* Borde neón rojo/rosa */
    border: 3px solid var(--neon-pink);
    border-radius: 20px;

    /* Padding generoso */
    padding: 40px 50px;

    /* Centrar texto */
    text-align: center;

    /* Sombra neón intensa */
    box-shadow:
        0 0 30px rgba(255, 0, 128, 0.6),
        0 0 60px rgba(255, 0, 128, 0.4),
        inset 0 0 40px rgba(255, 0, 128, 0.1);

    /* Ancho máximo */
    max-width: 500px;
    width: 90%;

    /* Animación de entrada */
    animation: errorPulse 0.5s ease-out;
}

/* Icono de error grande */
.error-icon {
    font-size: 80px;
    margin-bottom: 20px;
    animation: shake 0.5s ease-in-out;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.error-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.3);
}

/* Título del error */
.error-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 900;
    color: var(--neon-pink);
    text-shadow:
        0 0 10px var(--neon-pink),
        0 0 20px var(--neon-pink),
        0 0 30px var(--neon-pink);
    margin: 0 0 15px 0;
}

/* Mensaje descriptivo */
.error-message {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(14px, 3vw, 18px);
    color: var(--neon-cyan);
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    margin: 0;
    line-height: 1.5;
}

/* Animación de pulso del error */
@keyframes errorPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animación de shake del icono */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Responsive mobile */
@media (max-width: 500px) {
    .error-content {
        padding: 30px 25px;
    }

    .error-icon {
        font-size: 60px;
    }
}

/* ============================================
   ANIMACIÓN SHAKE - Error sutil sin overlay
   ============================================ */

/* Shake del tablero cuando hay error + borde rojo */
.board-container.shake {
    animation: boardShake 0.5s ease-in-out, borderErrorPulse 1.5s ease-in-out;
}

@keyframes boardShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}

/* Animación del borde: cyan → rojo inflado → cyan */
@keyframes borderErrorPulse {
    0% {
        border-color: var(--neon-cyan);
        box-shadow:
            0 0 20px rgba(0, 255, 255, 0.5),
            0 0 40px rgba(0, 255, 255, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.05);
    }
    25% {
        border-color: #ff0040; /* Rojo neón */
        box-shadow:
            0 0 30px rgba(255, 0, 64, 0.8),   /* Más grande */
            0 0 50px rgba(255, 0, 64, 0.6),   /* Más intenso */
            0 0 70px rgba(255, 0, 64, 0.4),   /* Halo extra */
            inset 0 0 25px rgba(255, 0, 64, 0.15);
        border-width: 5px; /* Borde más grueso */
    }
    50% {
        border-color: #ff0040;
        box-shadow:
            0 0 30px rgba(255, 0, 64, 0.8),
            0 0 50px rgba(255, 0, 64, 0.6),
            0 0 70px rgba(255, 0, 64, 0.4),
            inset 0 0 25px rgba(255, 0, 64, 0.15);
        border-width: 5px;
    }
    100% {
        border-color: var(--neon-cyan);
        box-shadow:
            0 0 20px rgba(0, 255, 255, 0.5),
            0 0 40px rgba(0, 255, 255, 0.3),
            inset 0 0 20px rgba(0, 255, 255, 0.05);
    }
}

/* Piezas incorrectas - se tiñen de rojo y se sacuden */
.piece.incorrect-flash {
    animation: incorrectPulse 1.5s ease-in-out, pieceShake 0.5s ease-in-out;
}

@keyframes incorrectPulse {
    0% {
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }
    20%, 60% {
        filter: brightness(0.2) sepia(1) hue-rotate(-50deg) saturate(10)
                drop-shadow(0 0 20px rgba(255, 0, 0, 1))
                drop-shadow(0 0 40px rgba(255, 0, 0, 0.8));
        transform: scale(1.15);
    }
    100% {
        filter: drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }
}

@keyframes pieceShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10% { transform: translateX(-8px) rotate(-5deg); }
    20% { transform: translateX(8px) rotate(5deg); }
    30% { transform: translateX(-8px) rotate(-5deg); }
    40% { transform: translateX(8px) rotate(5deg); }
    50% { transform: translateX(-6px) rotate(-3deg); }
    60% { transform: translateX(6px) rotate(3deg); }
    70% { transform: translateX(-4px) rotate(-2deg); }
    80% { transform: translateX(4px) rotate(2deg); }
    90% { transform: translateX(-2px) rotate(-1deg); }
}

/* Sidebar (banco de piezas) parpadea rojo en error */
.piece-bank-container.error-flash {
    animation: sidebarErrorPulse 1.5s ease-in-out;
}

@keyframes sidebarErrorPulse {
    0% {
        border-color: var(--neon-orange);
        box-shadow:
            0 0 20px var(--neon-orange),
            0 0 40px rgba(255, 128, 0, 0.3),
            inset 0 0 20px rgba(255, 128, 0, 0.05);
    }
    25%, 50% {
        border-color: #ff0040;
        box-shadow:
            0 0 30px rgba(255, 0, 64, 0.8),
            0 0 50px rgba(255, 0, 64, 0.6),
            0 0 70px rgba(255, 0, 64, 0.4),
            inset 0 0 25px rgba(255, 0, 64, 0.15);
        border-width: 5px;
    }
    100% {
        border-color: var(--neon-orange);
        box-shadow:
            0 0 20px var(--neon-orange),
            0 0 40px rgba(255, 128, 0, 0.3),
            inset 0 0 20px rgba(255, 128, 0, 0.05);
    }
}

/* Casillas incorrectas se vuelven rojas */
.square.error-flash {
    animation: squareErrorFlash 1.5s ease-in-out;
}

@keyframes squareErrorFlash {
    0% {
        background-color: inherit;
    }
    25%, 50% {
        background-color: rgba(255, 0, 64, 0.7) !important;
        box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.8);
    }
    100% {
        background-color: inherit;
    }
}

/* ============================================
   CONFETI - Celebración de victoria
   ============================================ */

/* Contenedor de confeti */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* Pieza de confeti individual */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--neon-green);
    opacity: 0;
    animation: confettiFall 2s ease-out forwards;
}

/* Variantes de colores */
.confetti.cyan { background: var(--neon-cyan); }
.confetti.pink { background: var(--neon-pink); }
.confetti.orange { background: var(--neon-orange); }
.confetti.gold { background: var(--gold); }

/* Animación de caída del confeti */
@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* ============================================
   PARTÍCULAS DE HINT
   Efecto de desintegración dorado
   ============================================ */

.hint-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    box-shadow:
        0 0 10px var(--gold),
        0 0 20px var(--gold),
        0 0 30px rgba(255, 215, 0, 0.5);
}

/* Animación de desintegración */
@keyframes hintDisintegrate {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* ============================================
   LEVEL TRANSITION - Transición entre niveles
   ============================================ */

.level-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.5s ease-out;
}

.level-transition-overlay.hidden {
    display: none;
}

.level-transition-content {
    text-align: center;
    animation: levelZoomIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.level-icon {
    font-size: clamp(60px, 15vw, 120px);
    margin-bottom: 20px;
    animation: iconPulse 1.5s ease-in-out infinite;
}

.level-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 6vw, 48px);
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow:
        0 0 20px var(--neon-cyan),
        0 0 40px var(--neon-cyan),
        0 0 60px rgba(0, 255, 255, 0.5);
    margin-bottom: 30px;
    animation: neonFlicker 2s ease-in-out infinite;
}

.level-number {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(48px, 12vw, 96px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink), var(--neon-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 20px 0;
    animation: gradientShift 3s ease-in-out infinite;
}

.level-name {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(18px, 4vw, 32px);
    font-weight: 700;
    color: var(--gold);
    text-shadow:
        0 0 15px var(--gold),
        0 0 30px rgba(255, 215, 0, 0.5);
    margin-bottom: 40px;
}

.level-progress-bar {
    width: clamp(200px, 60vw, 400px);
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.level-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
    width: 0%;
    animation: progressFill 2s ease-out forwards;
    box-shadow: 0 0 20px var(--neon-cyan);
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes levelZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes neonFlicker {
    0%, 100% {
        text-shadow:
            0 0 20px var(--neon-cyan),
            0 0 40px var(--neon-cyan),
            0 0 60px rgba(0, 255, 255, 0.5);
    }
    50% {
        text-shadow:
            0 0 30px var(--neon-cyan),
            0 0 60px var(--neon-cyan),
            0 0 90px rgba(0, 255, 255, 0.8);
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes progressFill {
    from { width: 0%; }
    to { width: 100%; }
}

/* ============================================
   ANIMACIÓN GLITCH MATRIX
   Efecto de parpadeo sutil para piezas que van a desaparecer
   ============================================ */

/* Clase para piezas con efecto glitch */
.piece.glitch-warning {
    animation: glitchMatrix 2.5s ease-in-out infinite;
}

/* Animación tipo TV descompuesto / error en Matrix */
@keyframes glitchMatrix {
    0% {
        opacity: 1;
        filter: none;
    }

    /* Parpadeo sutil inicial */
    15% {
        opacity: 0.95;
    }
    16% {
        opacity: 1;
    }

    /* Distorsión leve (horizontal shift) */
    30% {
        opacity: 0.9;
        filter: hue-rotate(0deg);
    }
    31% {
        opacity: 1;
        transform: translateX(1px);
        filter: hue-rotate(90deg);
    }
    32% {
        transform: translateX(0);
        filter: none;
    }

    /* Parpadeo más intenso */
    50% {
        opacity: 0.85;
    }
    51% {
        opacity: 0.3;
    }
    52% {
        opacity: 1;
    }

    /* Glitch cromático (RGB split sutil) */
    70% {
        filter: drop-shadow(2px 0 0 rgba(255, 0, 0, 0.5))
                drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.5));
    }
    72% {
        filter: none;
    }

    /* Parpadeo final más rápido */
    85% {
        opacity: 0.7;
    }
    86% {
        opacity: 0.4;
    }
    87% {
        opacity: 1;
    }

    90% {
        opacity: 0.6;
    }
    91% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        filter: none;
    }
}

/* Versión más intensa para últimos segundos */
.piece.glitch-critical {
    animation: glitchMatrixIntense 1s ease-in-out infinite;
}

@keyframes glitchMatrixIntense {
    0%, 100% {
        opacity: 1;
        transform: translateX(0);
        filter: none;
    }

    10% {
        opacity: 0.4;
        transform: translateX(-2px);
    }

    20% {
        opacity: 1;
        transform: translateX(2px);
        filter: hue-rotate(180deg);
    }

    30% {
        opacity: 0.3;
        transform: translateX(0);
        filter: drop-shadow(3px 0 0 rgba(255, 0, 0, 0.7))
                drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.7));
    }

    40% {
        opacity: 1;
        filter: none;
    }

    50% {
        opacity: 0.2;
    }

    60% {
        opacity: 1;
        transform: translateX(1px);
    }

    70% {
        opacity: 0.5;
        transform: translateX(-1px);
    }

    80% {
        opacity: 1;
        transform: translateX(0);
        filter: brightness(1.3);
    }
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Ocultar elemento */
.hidden {
    display: none !important;
}

/* Deshabilitar elemento */
.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed !important;
}

/* ============================================
   HOW TO PLAY - INSTRUCTIONS
   ============================================ */
.how-to-play-section {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.instructions {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--neon-cyan);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    box-shadow:
        0 0 20px var(--neon-cyan),
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.05);
}

.instructions h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 900;
    color: var(--neon-cyan);
    text-shadow:
        0 0 10px var(--neon-cyan),
        0 0 20px var(--neon-cyan);
    margin: 0 0 var(--spacing-lg) 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.instructions p {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin: var(--spacing-md) 0;
    text-align: left;
}

.instructions p strong {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px var(--neon-cyan);
}

/* Responsive */
@media (max-width: 600px) {
    .how-to-play-section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .instructions {
        padding: var(--spacing-md);
    }

    .instructions p {
        font-size: 14px;
    }
}

/* COIN COUNTER */
.neon-coin-counter {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(26,0,51,0.8));
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    border: 3px solid var(--neon-yellow);
    color: var(--neon-yellow);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1001;
    transition: all 0.3s ease;
}

.neon-coin-counter:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

@media (max-width: 767px) {
    .neon-coin-counter {
        top: 70px;
        right: 10px;
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
        gap: 0.5rem;
    }

    .floating-games-menu {
        top: 130px;
        right: 10px;
    }
}

.neon-coin-icon {
    width: 25px;
    height: 25px;
    background: var(--neon-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-bg);
    font-weight: 900;
    animation: neonCoinSpin 3s linear infinite;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

@keyframes neonCoinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* FLOATING GAMES MENU */
.floating-games-menu {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

.games-menu-dropdown {
    background: rgba(26, 0, 51, 0.95);
    border: 2px solid var(--neon-yellow);
    border-radius: 10px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    backdrop-filter: blur(10px);
}

.games-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.game-menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.game-menu-item:last-child {
    border-bottom: none;
}

.game-menu-item:hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--neon-yellow);
    padding-left: 2rem;
}

.game-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.game-name {
    font-weight: 600;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* ============================================
   RANKING ANIMATION COMPONENT
   ============================================
   Este componente muestra una animación de "descenso en el ranking"
   cuando el jugador termina un juego. Su score aparece en la cima
   y "desciende" hasta encontrar su posición real en el leaderboard.

   NOTA EDUCATIVA: Esta técnica de animación usa CSS transitions
   y JavaScript async/await para crear un efecto secuencial.
   Cada fila aparece con un pequeño delay, creando sensación de movimiento.
   ============================================ */

/* Container principal de la animación */
.ranking-animation-container {
    /* Fondo oscuro semi-transparente para contraste */
    background: rgba(0, 0, 0, 0.9);

    /* Borde neón cyan para destacar */
    border: 2px solid var(--neon-cyan, #00ffff);
    border-radius: 8px;

    /* Espaciado interno compacto */
    padding: 0.75rem;
    margin: 0.75rem 0;

    /* Estado inicial: oculto y desplazado hacia arriba */
    opacity: 0;
    transform: translateY(-20px);

    /* Transición suave para la entrada */
    transition: all 0.5s ease;
}

/* Estado visible de la animación */
.ranking-animation-container.show {
    opacity: 1;
    transform: translateY(0);
}

/* Header: muestra "TU POSICIÓN" y el score */
.ranking-animation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

.ranking-animation-title {
    color: var(--neon-cyan, #00ffff);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ranking-animation-score {
    color: var(--neon-yellow, #ffd700);
    font-size: 1.2rem;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Lista de posiciones del ranking */
.ranking-list {
    max-height: 200px;
    overflow-y: auto;
}

/* Cada fila del ranking */
.ranking-list-row {
    display: grid;
    /* 3 columnas: posición | nombre | score */
    grid-template-columns: 50px 1fr 80px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

/* Fila del jugador actual - destacada con gradiente y borde neón */
.ranking-list-row.player-row {
    background: linear-gradient(90deg, rgba(255, 0, 128, 0.3), rgba(0, 255, 255, 0.3));
    border: 2px solid var(--neon-pink, #ff0080);

    /* Animación de brillo pulsante */
    animation: pulseGlow 1s ease-in-out infinite;
}

/* Animación de brillo pulsante para la fila del jugador */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 128, 0.5); }
    50% { box-shadow: 0 0 30px rgba(255, 0, 128, 0.8); }
}

/* Fila cuando encuentra su posición final */
.ranking-list-row.found-position {
    /* Escala un poco para destacar */
    transform: scale(1.02);
}

/* Posición (#1, #2, etc) */
.rank-position {
    color: var(--neon-cyan, #00ffff);
    font-weight: bold;
}

/* Nombre del jugador */
.rank-name {
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Score del jugador */
.rank-score {
    color: var(--neon-yellow, #ffd700);
    text-align: right;
    font-weight: bold;
}

/* Mensaje motivacional al final */
.ranking-animation-message {
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--neon-green, #00ff80);

    /* Estado inicial: oculto */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ranking-animation-message.show {
    opacity: 1;
}

/* ============================================
   INPUT DE NOMBRE DESTACADO
   ============================================
   Cuando aparece la animación de ranking, el input de nombre
   se destaca con una animación de "latido" para llamar la atención.

   NOTA EDUCATIVA: La clase 'highlight-input' se agrega dinámicamente
   desde JavaScript después de que la animación de ranking termina.
   ============================================ */

.highlight-input,
#victoryPlayerNameInput.highlight-input,
#gameOverPlayerNameInput.highlight-input {
    /* Animación de latido para llamar la atención */
    animation: inputPulse 1.5s ease-in-out infinite;

    /* Borde más prominente */
    border-color: var(--neon-pink, #ff0080) !important;
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.5) !important;
}

@keyframes inputPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 0, 128, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 25px rgba(255, 0, 128, 0.6);
    }
}

/* ============================================
   ANIMACIÓN DE VICTORIA (glow text)
   ============================================ */
@keyframes victoryGlow {
    0% {
        text-shadow: 0 0 10px var(--neon-yellow, #ffd700);
    }
    100% {
        text-shadow: 0 0 30px var(--neon-yellow, #ffd700), 0 0 60px var(--neon-yellow, #ffd700);
    }
}

/* ============================================
   MOBILE PORTRAIT - Modales compactos
   ============================================
   Los modales de victoria y game over se crean dinámicamente
   con estilos inline, por eso usamos !important para sobrescribir.
   ============================================ */
@media (max-width: 480px) and (orientation: portrait) {
    /* Modal content - más compacto */
    .victory-modal-content {
        padding: 1rem !important;
        max-height: 85vh !important;
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Título más pequeño */
    .victory-modal-content > div:first-of-type {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Stats más compactos */
    #victoryStats, #gameOverStats {
        font-size: 0.85rem !important;
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.5 !important;
    }

    /* Botón de cerrar más pequeño */
    .victory-modal-content .modal-close {
        top: 5px !important;
        right: 10px !important;
        font-size: 1.5rem !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* Input de nombre */
    #victoryPlayerNameInput, #gameOverPlayerNameInput {
        font-size: 14px !important;
        padding: 8px !important;
    }

    /* Ranking animation compacto */
    .ranking-animation-container {
        padding: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }

    .ranking-list-row {
        padding: 0.4rem !important;
        font-size: 0.8rem !important;
    }

    .ranking-animation-message {
        font-size: 0.9rem !important;
    }

    /* Botón submit más compacto */
    #victorySubmitScoreBtn, #gameOverSubmitScoreBtn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   CLICK TO START INDICATOR (v2)
   ============================================ */

.click-to-start-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;

    display: flex;
    flex-direction: column; /* Changed to column for vertical alignment */
    align-items: center;
    gap: 12px; /* Adjusted gap */
    
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(16px, 4vw, 28px);
    font-weight: 900;
    color: var(--neon-cyan); /* Changed color to neon-cyan */
    white-space: nowrap; /* Mantener texto en una sola línea */
    
    /* COMENTARIO EDUCATIVO (ESP):
       Se usa una sombra de texto múltiple para crear un 'contorno' oscuro y un 'brillo' neón.
       La sombra negra (0 0 5px rgba(0,0,0,0.8)) se dibuja primero y se difumina, creando un borde suave
       que garantiza el contraste del texto blanco sobre cualquier color del tablero (claro u oscuro).
       Luego, se añade el brillo de neón (cyan en este caso) para integrarlo con el estilo del juego.
    */
    text-shadow: 
        0 0 5px rgba(0,0,0,0.8), /* Dark outline */
        0 0 15px var(--neon-cyan), 
        0 0 25px var(--neon-cyan);

    pointer-events: none;
    user-select: none;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.click-to-start-indicator.visible {
    opacity: 1;
    visibility: visible;
    animation: neonFlickerText 2.5s ease-in-out infinite alternate; /* New animation name */
}

.click-to-start-indicator .icon {
    font-size: 1.8em; /* Slightly larger icon */
    animation: iconPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 15px var(--neon-cyan)); /* Changed color to neon-cyan */
}

/* Nueva animación de flicker específica para el texto del indicador */
@keyframes neonFlickerText {
    0%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 5px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8),
            0 0 15px var(--neon-cyan), 0 0 25px var(--neon-cyan);
    }
    50% {
        opacity: 0.8;
        text-shadow: 
            0 0 5px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8),
            0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    }
}

.chessboard.clickable {
    cursor: pointer;
}

/* ============================================
   CORRECTION COUNTER (cuando fallas)
   Muestra 3... 2... 1... en naranja
   ============================================ */

.correction-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    pointer-events: none;
    user-select: none;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.correction-counter.visible {
    opacity: 1;
    visibility: visible;
}

.correction-label {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 700;
    color: #ff8c00;
    letter-spacing: 0.2em;
    text-shadow:
        0 0 5px rgba(0,0,0,0.9),
        0 0 10px #ff8c00,
        0 0 20px #ff6600;
    animation: correctionPulse 0.8s ease-in-out infinite;
}

.correction-number {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(60px, 15vw, 120px);
    font-weight: 900;
    color: #ff6600;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(0,0,0,0.9),
        0 0 20px #ff8c00,
        0 0 40px #ff6600,
        0 0 60px #ff4500;
    animation: numberPop 1s ease-out;
}

@keyframes correctionPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes numberPop {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    30% {
        transform: scale(0.9);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .correction-counter {
        gap: 4px;
    }

    .correction-label {
        font-size: 12px;
        letter-spacing: 0.15em;
    }

    .correction-number {
        font-size: clamp(50px, 12vw, 80px);
    }
}

/* ============================================
   HINT BUTTON - NO POINTS STATE
   Botón gris cuando no hay puntos suficientes
   ============================================ */

.btn-hint.no-points,
.btn-hint-mobile.no-points,
.btn-hint-side.no-points,
button.no-points {
    background: linear-gradient(180deg, #555 0%, #333 100%) !important;
    border-color: #666 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-hint.no-points:hover,
.btn-hint-mobile.no-points:hover,
.btn-hint-side.no-points:hover,
button.no-points:hover {
    transform: none !important;
    box-shadow: none !important;
    background: linear-gradient(180deg, #555 0%, #333 100%) !important;
}

/* Icono del hint gris cuando no hay puntos */
.btn-hint.no-points .hint-icon,
.btn-hint-side.no-points .hint-icon {
    filter: grayscale(100%) !important;
    opacity: 0.5 !important;
}

/* ============================================
   VICTORY MODAL - Juego completado (nivel 15)
   ============================================ */

.victory-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(20, 0, 50, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.victory-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.victory-content {
    text-align: center;
    padding: 2rem;
    max-width: 500px;
}

/* Trofeo animado */
.victory-trophy {
    font-size: clamp(80px, 20vw, 150px);
    animation: trophyBounce 1s ease-out, trophyGlow 2s ease-in-out infinite 1s;
    filter: drop-shadow(0 0 30px gold);
    margin-bottom: 1rem;
}

@keyframes trophyBounce {
    0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
    }
    70% {
        transform: scale(0.9) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes trophyGlow {
    0%, 100% {
        filter: drop-shadow(0 0 30px gold) drop-shadow(0 0 60px rgba(255, 215, 0, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 50px gold) drop-shadow(0 0 100px rgba(255, 215, 0, 0.8));
    }
}

/* Título VICTORIA */
.victory-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(40px, 10vw, 72px);
    font-weight: 900;
    color: #ffd700;
    text-shadow:
        0 0 10px #ffd700,
        0 0 20px #ffd700,
        0 0 40px #ff8c00,
        0 0 80px #ff6600;
    margin: 0;
    animation: victoryTitlePop 0.8s ease-out 0.3s both;
    letter-spacing: 4px;
}

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

/* Subtítulo */
.victory-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(14px, 4vw, 20px);
    color: var(--neon-cyan);
    text-shadow: 0 0 10px var(--neon-cyan);
    margin: 1rem 0 2rem;
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

@keyframes fadeInUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Stats container */
.victory-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 2rem 0;
    animation: fadeInUp 0.6s ease-out 0.9s both;
}

.victory-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    min-width: 140px;
}

.victory-stat .stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.victory-stat .stat-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.victory-stat .stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-top: 0.3rem;
}

/* Texto "Dios del Ajedrez" */
.victory-rank-text {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(12px, 3.5vw, 16px);
    color: var(--neon-magenta);
    text-shadow: 0 0 10px var(--neon-magenta);
    margin: 1.5rem 0;
    animation: fadeInUp 0.6s ease-out 1.2s both;
}

/* Botón Ver Ranking */
.victory-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 700;
    padding: 1rem 2.5rem;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease-out 1.5s both, btnPulse 2s ease-in-out infinite 2s;
}

.victory-btn:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 30px rgba(255, 215, 0, 0.8),
        0 6px 20px rgba(0, 0, 0, 0.4);
}

.victory-btn:active {
    transform: scale(0.98);
}

@keyframes btnPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 0.5),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255, 215, 0, 0.8),
            0 4px 15px rgba(0, 0, 0, 0.3);
    }
}