/* Square Rush CSS - Version 13 - LevelTransition suave estilo Memory Matrix */

:root {
    --neon-yellow: #FFD700;
    --dark-bg: #0a0a0a;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --neon-cyan: #00ffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0033 50%, #330066 100%);
    color: white;
    font-family: 'Orbitron', monospace;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Grid background effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    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);
    background-size: 50px 50px;
    pointer-events: none;
    animation: gridMove 20s linear infinite;
    z-index: 0;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.game-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
}

/* Botones icono (HOME, SONIDO) - Position absolute dentro del container */
.btn-icon {
    position: absolute;
    top: 1rem;
    z-index: 100;

    /* Flexbox para centrar icono + texto */
    display: flex;
    align-items: center;
    gap: 8px;

    /* Tamaño y espaciado */
    padding: 10px 16px;
    min-height: 44px;

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

    /* Borde neón */
    border: 2px solid;
    border-radius: 8px;

    /* Tipografía */
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* 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);
}

.btn-icon:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    transform: translateY(-2px);
}

.btn-icon:active {
    transform: translateY(0);
}

.btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Botón HOME: cyan, esquina izquierda */
.btn-home {
    left: 1rem;
    border-color: #00ffff;
    color: #00ffff;
}

.btn-home:hover {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

/* Botón SOUND: naranja, esquina derecha */
.btn-sound {
    right: 1rem;
    border-color: #ff8000;
    color: #ff8000;
}

.btn-sound:hover {
    box-shadow: 0 0 20px rgba(255, 128, 0, 0.6);
}

.btn-sound.muted {
    border-color: #ff0040;
    color: #ff0040;
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
}

.btn-sound.muted:hover {
    background: rgba(255, 0, 64, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6);
}

/* Header */
.game-header {
    text-align: center;
    margin-bottom: 2rem;
}

.game-title {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    background: linear-gradient(45deg, #ff0080, #00ff80, #0080ff, #ff8000);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 0, 128, 0.5);
}

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

.game-subtitle {
    font-size: 1rem;
    color: #00ffff;
    margin-top: 0.5rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Ocultar salto de línea por defecto (se muestra solo en mobile portrait) */
.mobile-break {
    display: none;
}

/* Game UI */
.game-ui {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid;
    border-image: linear-gradient(45deg, #ff0080, #00ff80) 1;
    border-radius: 10px;
}

.level-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-number {
    font-size: 2rem;
    font-weight: 900;
    color: #ff0080;
    text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
}

.level-name {
    font-size: 0.8rem;
    color: #00ffff;
    text-align: center;
}

.timer {
    font-size: 3rem;
    font-weight: 900;
    color: #00ff80;
    text-shadow: 0 0 20px rgba(0, 255, 128, 0.5);
    animation: pulse 1s ease-in-out infinite;
}

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

.score-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score {
    font-size: 1.5rem;
    color: #ffd700;
    font-weight: 700;
}

.combo {
    font-size: 1rem;
    color: #ff8000;
    margin-top: 0.2rem;
}

/* Target coordinate display */
.target-display {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid #00ff80;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 255, 128, 0.3);
}

.target-label {
    font-size: 1rem;
    color: white;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    animation: targetLabelHighlight 1.5s ease-in-out infinite;
}

@keyframes targetLabelHighlight {
    0%, 100% {
        background: transparent;
        color: #00ffff;
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    }
    50% {
        background: linear-gradient(90deg, rgba(255, 200, 0, 0.8), rgba(255, 100, 0, 0.8));
        color: white;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

.target-coordinate {
    font-size: 4rem;
    font-weight: 900;
    color: #00ff80;
    text-shadow: 0 0 20px rgba(0, 255, 128, 0.8);
    animation: targetGlow 2s ease-in-out infinite;
}

@keyframes targetGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(0, 255, 128, 0.8); }
    50% { text-shadow: 0 0 40px rgba(0, 255, 128, 1); }
}

/* Chess board */
.board-container {
    /* Centrar tablero */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;

    /* Padding */
    padding: 1rem;

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

    /* Borde neón cyan */
    border: 3px solid #00ffff;
    border-radius: 12px;

    /* Glow neón */
    box-shadow:
        0 0 20px #00ffff,
        0 0 40px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.05);

    /* SIN WIDTH - el container se ajusta al contenido automáticamente */
}

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

    /* Tamaño del tablero (mobile first) - IGUAL QUE MEMORY MATRIX */
    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 */
    position: relative;
}

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

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

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

    /* Tamaño definido por grid - IGUAL QUE MEMORY MATRIX */
    width: 100%;
    height: 100%;

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

    /* Cursor pointer */
    cursor: pointer;

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

    /* Fuente para coordenadas */
    font-weight: 900;
    font-size: clamp(10px, 2.5vw, 14px);
}

/* Colores de casillas - IGUAL QUE MEMORY MATRIX */
.square.light {
    background-color: #f0d9b5;
}

.square.dark {
    background-color: #b58863;
}

.square:hover {
    filter: brightness(1.1);
}

.square.correct {
    animation: correctFlash 0.8s ease-out;
}

@keyframes correctFlash {
    0% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(1.2); box-shadow: 0 0 30px #00ff80; background: #00ff80; }
    100% { transform: scale(1); box-shadow: none; }
}

.square.wrong {
    animation: wrongFlash 0.8s ease-out;
}

@keyframes wrongFlash {
    0% { transform: scale(1); box-shadow: none; }
    50% { transform: scale(1.2); box-shadow: 0 0 30px #ff0040; background: #ff0040; }
    100% { transform: scale(1); box-shadow: none; }
}

/* Coordinate labels for kids mode */
.coordinate-label {
    font-size: 14px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
    user-select: none;
}

/* Control buttons */
.game-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Orbitron', monospace;
}

.btn-primary {
    background: linear-gradient(45deg, #ff0080, #ff4040);
    color: white;
    box-shadow: 0 5px 20px rgba(255, 0, 128, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #00ffff;
    border: 2px solid #00ffff;
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.2);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Game over screen */
.game-over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.game-over-content {
    text-align: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid #ff0080;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(255, 0, 128, 0.5);
}

.game-over-title {
    font-size: 3rem;
    color: #ff0080;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 0, 128, 0.8);
}

.final-score {
    font-size: 1.5rem;
    color: #00ffff;
    margin-bottom: 2rem;
}

/* Progress bar */
.progress-container {
    width: 100%;
    max-width: 600px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff0080, #00ff80);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 10px;
}

.progress-text {
    text-align: center;
    font-size: 0.9rem;
    color: #00ffff;
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .game-title {
        font-size: 2rem;
    }
    
    .chess-board {
        grid-template-columns: repeat(8, 45px);
        grid-template-rows: repeat(8, 45px);
    }
    
    .target-coordinate {
        font-size: 3rem;
    }
    
    .timer {
        font-size: 2rem;
    }
    
    .game-ui {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .chess-board {
        grid-template-columns: repeat(8, 35px);
        grid-template-rows: repeat(8, 35px);
    }
    
    .target-coordinate {
        font-size: 2.5rem;
    }
}
/* ============================================
   HOW TO PLAY - INSTRUCTIONS
   ============================================ */
.how-to-play-section {
    margin-top: 40px;
    padding: 40px 20px;
    text-align: center;
}

.instructions {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #00d9ff;
    border-radius: 15px;
    padding: 30px;
    box-shadow:
        0 0 20px #00d9ff,
        0 0 40px rgba(0, 217, 255, 0.3),
        inset 0 0 20px rgba(0, 217, 255, 0.05);
}

.instructions h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 5vw, 32px);
    font-weight: 900;
    color: #00d9ff;
    text-shadow:
        0 0 10px #00d9ff,
        0 0 20px #00d9ff;
    margin: 0 0 25px 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: 15px 0;
    text-align: left;
}

.instructions p strong {
    color: #00d9ff;
    text-shadow: 0 0 8px #00d9ff;
}

/* Responsive */
@media (max-width: 600px) {
    .how-to-play-section {
        padding: 30px 15px;
    }

    .instructions {
        padding: 20px;
    }

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

/* Label de texto en botones */
.btn-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mobile: Ocultar labels de texto */
@media (max-width: 768px) {
    .btn-label {
        display: none;
    }

    .btn-icon {
        padding: 8px;
        min-width: auto;
    }
}

/* 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;
}

/* ============================================
   DESKTOP LAYOUT: BARRA LATERAL (Memory Matrix Style)
   Solo en desktop - No tocar mobile
   ============================================ */
@media (min-width: 768px) {
    /* Container principal: Grid con 2 columnas - Espaciado mínimo */
    .game-container {
        display: grid;
        grid-template-columns: auto 300px; /* Contenido auto-ajustado | Sidebar fijo */
        grid-template-rows: auto;
        column-gap: 1rem; /* Gap entre board y sidebar */
        row-gap: 1rem; /* Gap vertical entre filas */
        align-items: start;
        justify-content: center; /* Centrar todo el contenido */
        padding: 2rem;
        max-width: 1400px;
    }

    /* Old leaderboard button styles removed - now using standard nav menu */

    /* Game header: Reducir margen inferior */
    .game-header {
        margin-bottom: 0.5rem; /* Reducir espacio entre subtitle y board */
    }

    /* Target Display: Cuadrado dentro del sidebar en desktop (primera sección) */
    .target-display {
        width: 100%; /* Ocupa todo el ancho del sidebar */
        height: 300px; /* Cuadrado: mismo ancho que sidebar (300px) */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0; /* Sin márgenes */
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        border: 3px solid #00ff80;
        border-radius: 17px 17px 0 0; /* Solo bordes superiores redondeados */
        box-shadow: 0 0 40px rgba(0, 255, 128, 0.4);
        border-bottom: 2px solid rgba(0, 255, 128, 0.3);
        flex-shrink: 0; /* No reducir */
    }

    .target-label {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .target-coordinate {
        font-size: 3rem;
    }

    /* Game UI: Barra lateral derecha estilo Memory Matrix */
    .game-ui {
        /* Grid positioning - Alineado con board-container (fila 3) */
        grid-column: 2;
        grid-row: 3;

        /* Sticky positioning */
        position: sticky;
        top: 2rem;
        align-self: start;

        /* Layout vertical limpio */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between; /* Distribuir espacio */
        gap: 0;

        /* Tamaño fijo - Misma altura que board-container */
        width: 300px;
        max-width: 300px;
        height: 500px; /* Aproximado al tablero max-width */
        padding: 0;
        margin: 0;

        /* Fondo y borde limpio */
        background: transparent;
        border: 3px solid #ffd700;
        border-radius: 20px;
        box-shadow:
            0 0 30px rgba(255, 215, 0, 0.4),
            inset 0 0 30px rgba(255, 215, 0, 0.1);
    }

    /* Responsive height para diferentes pantallas */
    @media (min-width: 900px) {
        .game-ui {
            height: 550px; /* Más grande en pantallas grandes */
        }
    }

    /* Level Info: Movido abajo, altura reducida pero legible */
    .level-info {
        width: 100%;
        padding: 0.5rem 1rem; /* Agrandado un poco */
        background: linear-gradient(180deg, rgba(138, 43, 226, 0.3), rgba(75, 0, 130, 0.3));
        border-radius: 0 0 17px 17px; /* Ahora está abajo */
        text-align: center;
        border-top: 1px solid rgba(255, 215, 0, 0.3); /* Borde arriba en vez de abajo */
        line-height: 1.2; /* Más espacio */
        display: block !important; /* Override flex-direction: column */
        flex-direction: unset !important;
        min-height: auto !important;
        height: auto !important;
        flex-shrink: 0; /* No reducir */
    }

    .level-number {
        font-size: 1.1rem !important; /* Agrandado */
        font-weight: 700 !important;
        color: #ff0080 !important;
        text-shadow: 0 0 10px rgba(255, 0, 128, 0.6) !important;
        margin: 0 !important; /* Sin márgenes */
        padding: 0 !important;
        display: inline !important; /* En línea con level-name */
        margin-right: 0.4rem !important;
        line-height: 1.2 !important;
    }

    .level-name {
        font-size: 0.8rem !important; /* Agrandado */
        color: #ffd700 !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        display: inline !important; /* En línea con level-number */
        margin: 0 !important; /* Sin márgenes */
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* Timer: Segunda sección - Ocupa espacio flexible */
    .timer {
        width: 100%;
        padding: 2rem 1rem;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
        font-size: 3rem;
        font-weight: 900;
        color: #00ffff;
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
        margin: 0;
        border-bottom: 1px solid rgba(0, 255, 255, 0.3);
        flex-grow: 1; /* Crecer para llenar espacio */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Score Info: Tercera sección */
    .score-info {
        width: 100%;
        padding: 1.5rem 1rem;
        background: linear-gradient(180deg, rgba(0, 100, 100, 0.3), rgba(0, 50, 50, 0.3));
        border-radius: 0; /* Sin bordes redondeados */
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        border-bottom: 1px solid rgba(0, 255, 255, 0.3);
        flex-shrink: 0; /* No reducir */
    }

    .score {
        font-size: 1.3rem;
        color: #ffd700;
        font-weight: 700;
    }

    .combo {
        font-size: 1.1rem;
        color: #ff8000;
        font-weight: 600;
    }

    /* Posicionar otros elementos en la columna izquierda */
    .game-header {
        grid-column: 1;
        grid-row: 1;
    }

    .progress-container {
        grid-column: 1;
        grid-row: 2;
    }

    /* target-display ahora está dentro de game-ui, no necesita grid positioning */

    .board-container {
        grid-column: 1;
        grid-row: 3; /* Cambió de 4 a 3 */
        justify-self: center; /* Centrado en su columna */
        margin-bottom: 0 !important; /* Eliminar margen inferior en desktop */
        padding: 0.75rem !important; /* Reducir padding en desktop */
    }

    .progress-text {
        grid-column: 1;
        grid-row: 4; /* Cambió de 5 a 4 */
    }

    .game-controls {
        grid-column: 1;
        grid-row: 5; /* Cambió de 6 a 5 */
    }

    /* How to Play section: Ocupa ambas columnas */
    .how-to-play-section {
        grid-column: 1 / -1;
        grid-row: 6; /* Cambió de 7 a 6 */
    }
}

/* ============================================
   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.
   ============================================ */

/* Container principal de la animación */
.ranking-animation-container {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--neon-cyan, #00ffff);
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0.75rem 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease;
}

.ranking-animation-container.show {
    opacity: 1;
    transform: translateY(0);
}

.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);
}

.ranking-list {
    max-height: 200px;
    overflow-y: auto;
}

.ranking-list-row {
    display: grid;
    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 */
.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);
    animation: pulseGlow 1s ease-in-out infinite;
}

@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); }
}

.ranking-list-row.found-position {
    transform: scale(1.02);
}

.rank-position {
    color: var(--neon-cyan, #00ffff);
    font-weight: bold;
}

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

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

.ranking-animation-message {
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: var(--neon-green, #00ff80);
    opacity: 0;
    transition: opacity 0.5s ease;
}

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

/* ============================================
   INPUT DE NOMBRE DESTACADO
   ============================================ */

.highlight-input,
#playerNameGameOver.highlight-input,
#playerNameVictory.highlight-input {
    animation: inputPulse 1s ease-in-out infinite;
    border-color: #ff0080 !important;
    border-width: 3px !important;
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.6),
                0 0 40px rgba(255, 0, 128, 0.3),
                inset 0 0 10px rgba(255, 0, 128, 0.2) !important;
    background: rgba(255, 0, 128, 0.15) !important;
}

@keyframes inputPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 0, 128, 0.4),
                    0 0 30px rgba(255, 0, 128, 0.2);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 30px rgba(255, 0, 128, 0.8),
                    0 0 50px rgba(255, 0, 128, 0.4);
    }
}

/* ============================================
   MOBILE PORTRAIT - LAYOUT OPTIMIZADO
   ============================================
   PROBLEMA: En celulares en portrait, el level-info (1 BABY STEPS)
   ocupa espacio vertical valioso, y el tablero queda cortado.

   SOLUCIÓN:
   - Ocultar el level-info (número y nombre del nivel) en portrait
   - Mantener el target display prominente
   - El tablero debe ser completamente visible
   - Mover el botón del leaderboard a una posición que no estorbe

   NOTA EDUCATIVA: En mobile portrait, cada pixel vertical cuenta.
   Es mejor ocultar información secundaria (nivel actual) que
   forzar al usuario a hacer scroll para ver el tablero.
   ============================================ */

@media (max-width: 480px) and (orientation: portrait),
       (max-width: 600px) and (max-height: 800px) {

    /* ====== OCULTAR LEVEL INFO EN PORTRAIT ======
       El número y nombre del nivel ("1 BABY STEPS") no es crítico
       durante el juego - el usuario ya sabe en qué nivel está.
       Esto libera ~80px de espacio vertical. */
    .level-info {
        display: none !important;
    }

    /* ====== HEADER COMPACTO ====== */
    .game-header {
        padding: 0.3rem 0;
        margin-bottom: 0.5rem;
    }

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

    /* Mostrar salto de línea solo en mobile portrait */
    .mobile-break {
        display: inline;
    }

    /* Subtítulo compacto en portrait */
    .game-subtitle {
        display: block;
        font-size: 0.75rem;
        margin-top: 0.2rem;
        margin-bottom: 0.3rem;
    }

    /* ====== GAME UI REORGANIZADO ======
       Sin el level-info, el layout es más limpio */
    .game-ui {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        gap: 0.5rem;
        /* Forzar que target, timer y score estén en una fila */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
    }

    /* Target display prominente */
    .target-display {
        padding: 0.3rem 0.8rem;
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .target-label {
        font-size: 0.65rem;
    }

    .target-coordinate {
        font-size: 2.2rem;
        line-height: 1;
    }

    /* Timer visible */
    .timer {
        font-size: 2rem;
        flex: 0 0 auto;
    }

    /* Score compacto */
    .score-info {
        flex: 0 0 auto;
    }

    .score {
        font-size: 1rem;
    }

    .combo {
        font-size: 0.75rem;
    }

    /* ====== PROGRESS MÁS DELGADO ====== */
    .progress-container {
        height: 8px;
        margin-bottom: 0.3rem;
    }

    .progress-text {
        font-size: 0.75rem;
        margin-bottom: 0.3rem;
    }

    /* ====== BOARD CONTAINER ====== */
    .board-container {
        padding: 0.3rem;
    }

    /* ====== BOTONES DE CONTROL COMPACTOS ====== */
    .game-controls {
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding: 0 0.5rem;
    }

    .game-controls .btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    /* ====== OCULTAR BOTONES DESKTOP EN MOBILE ====== */
    .desktop-only {
        display: none !important;
    }
}

/* ============================================
   MENÚ HAMBURGUESA (MOBILE)
   ============================================
   NOTA: Los estilos del menú hamburguesa ahora están en
   la biblioteca compartida: ../../css/hamburger-menu.css
   ============================================ */