body {
            background-color: #2c3e50;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            color: white;
        }
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}
/* Este contenedor cubrirá toda la pantalla con tu imagen */
#start-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('texturas/start.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
}
 /* --- ESTILOS DE LOS MENÚS (Start Screen y Lobby) --- */
        .menu-window {
            background-color: #1a252f;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
            text-align: center;
            z-index: 100;
            position: absolute;
            border: 4px solid #f1c40f;
        }

        .menu-window h1 { margin-top: 0; color: #ecf0f1; font-size: 36px; text-transform: uppercase; letter-spacing: 2px;}
        .menu-window h2 { color: #f1c40f; }
        
        .menu-btn {
            display: block; width: 100%; padding: 15px; margin: 15px 0;
            font-size: 18px; font-weight: bold; cursor: pointer;
            border: 2px solid #34495e; border-radius: 8px; 
            background-color: #2c3e50; color: white;
            transition: all 0.2s;
        }
        .menu-btn:hover { background-color: #34495e; border-color: #f1c40f; transform: scale(1.05); }
        .menu-btn.action { background-color: #e74c3c; border-color: #c0392b; }
        .menu-btn.action:hover { background-color: #c0392b; }

        .lobby-section { margin: 20px 0; padding: 20px; background: #2c3e50; border-radius: 8px; }
        input[type="text"] { padding: 10px; font-size: 16px; border-radius: 5px; border: none; width: 80%; text-align: center; }
        #room-code { font-size: 24px; color: #2ecc71; letter-spacing: 2px; font-weight: bold; margin-top: 10px; user-select: all;}
        
        .hidden { display: none !important; }

       /* --- ESTILOS DEL TABLERO Y JUEGO --- */
#turn-indicator {
    background-color: #1a252f; 
    padding: 10px 30px; 
    border-radius: 8px; 
    margin-bottom: 20px;
    font-size: 24px; 
    letter-spacing: 2px; 
    transition: transform 0.15s, color 0.3s; 
    text-align: center;
    border: 2px solid #34495e;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.turn-w { color: #ecf0f1; text-shadow: 0 0 10px rgba(236, 240, 241, 0.5); } 
.turn-b { color: #e74c3c; text-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }

.game-container { position: relative; }

/* El marco del tablero */
#chessboard {
    display: grid; 
    grid-template-columns: repeat(8, 64px); 
    grid-template-rows: repeat(8, 64px);
    border: 8px solid #0f171e; /* Borde más grueso simulando un marco sólido */
    border-radius: 6px; /* Suave redondeo exterior */
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 15px rgba(241, 196, 15, 0.1); 
    background-color: #0f171e; 
}

/* Casillas con transiciones suaves */
.square { 
    width: 64px; 
    height: 64px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    position: relative; 
    transition: all 0.2s ease; 
}

/* Efecto volumen con degradados y sombras interiores */
.white { 
    background: linear-gradient(135deg, #f3f7f7 0%, #d5dbdb 100%); 
    box-shadow: inset 0 0 5px rgba(255,255,255,0.6);
} 
.black { 
    background: linear-gradient(135deg, #48637c 0%, #2c3e50 100%); 
    box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}

/* Efecto Hover para saber dónde apuntamos */
.square:hover::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    z-index: 5;
    pointer-events: none;
}

/* Casilla seleccionada con brillo de energía */
.selected { 
    background: radial-gradient(circle, #f1c40f 0%, #d35400 100%) !important; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 0 15px #f1c40f !important;
    z-index: 2;
}

/* Mejor legibilidad y estilo en las coordenadas */
.coord-rank, .coord-file {
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 900;
    opacity: 0.75;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
}
.coord-rank { position: absolute; top: 3px; left: 4px; }
.coord-file { position: absolute; bottom: 2px; right: 4px; }

/* Animación de las piezas ajustada para encajar mejor en el nuevo fondo */
.alive-piece { 
    max-width: 85%; 
    max-height: 85%; 
    animation: breathe 2.5s infinite ease-in-out; 
    user-select: none; 
    display: block; 
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.6)); /* Sombra proyectada por la pieza */
}

@keyframes breathe { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.06) translateY(-2px); } 
    100% { transform: scale(1); } 
}
   /* --- ESTILOS DE LA PANTALLA DE BATALLA MEJORADOS --- */
#battle-screen { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.95); color: white; 
    display: flex; flex-direction: column; justify-content: center; 
    align-items: center; z-index: 300; 
}

.battle-arena { 
    display: flex; align-items: center; justify-content: center; 
    font-size: 60px; gap: 50px; width: 80%; 
}

.vs { font-size: 80px; color: #f39c12; font-weight: bold; text-shadow: 0 0 20px #e67e22; }

.battle-piece { 
    max-width: 180px; 
    max-height: 180px; 
    display: block; 
}

/* Clases que se añadirán con JavaScript */
.anim-attacker {
    animation: embestida 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.anim-defender {
    animation: recibirGolpe 1.5s ease-in-out forwards;
}

/* El atacante retrocede un poco y luego se lanza con fuerza */
@keyframes embestida {
    0% { transform: translateX(0) scale(1); }
    20% { transform: translateX(-40px) scale(1.1); }
    40% { transform: translateX(120px) scale(1.3); } /* Punto de impacto */
    80% { transform: translateX(0px) scale(1); }
    100% { transform: translateX(0) scale(1); }
}

/* El defensor recibe el impacto (se ilumina en rojo), tiembla y se desvanece cayendo */
@keyframes recibirGolpe {
    0% { transform: translateX(0) scale(1); filter: brightness(1); opacity: 1; }
    35% { transform: translateX(0) scale(1); filter: brightness(1); } /* Espera el golpe */
    40% { transform: translateX(30px) rotate(15deg); filter: brightness(1.5) drop-shadow(0 0 30px red); } /* Impacto */
    45% { transform: translateX(-15px) rotate(-10deg); filter: drop-shadow(0 0 30px red); }
    50% { transform: translateX(10px) rotate(5deg); }
    80% { transform: translateY(150px) rotate(90deg) scale(0.5); opacity: 0; } /* Cae muerto */
    100% { transform: translateY(150px) rotate(90deg) scale(0); opacity: 0; }
}	/* --- ESTILOS DEL POP-UP DE VICTORIA --- */
#victory-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro semitransparente */
    z-index: 250; /* Por encima del start-screen y el juego */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Reutilizamos la animación de los menús para que el pop-up aparezca con estilo */
#victory-overlay:not(.hidden) .menu-window {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
/* --- ESTILO DEL BOTÓN MUTE --- */
#mute-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(26, 37, 47, 0.9);
    border: 2px solid #f1c40f;
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Botón circular */
    cursor: pointer;
    z-index: 500; /* Aseguramos que siempre esté por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

#mute-btn:hover {
    transform: scale(1.1);
    background: #34495e;
}

/* ==========================================
   DISEÑO RESPONSIVE (Móviles y Tablets)
   ========================================== */
@media (max-width: 768px) {
    /* Ajustes del Botón de Audio */
    #mute-btn {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Ajustes de las ventanas de menú */
    .menu-window {
        width: 85%;
        padding: 20px;
    }
    .menu-window h1 { font-size: 26px; }
    .menu-window h2 { font-size: 18px; }
    .menu-btn { font-size: 14px; padding: 12px; }
    #room-code { font-size: 18px; }

    /* Ajustes del Indicador de Turno */
    #turn-indicator {
        font-size: 18px;
        padding: 8px 20px;
        margin-bottom: 15px;
    }

    /* REDIMENSIONAMIENTO DEL TABLERO AL 11% DEL ANCHO DE LA PANTALLA */
    #chessboard {
        grid-template-columns: repeat(8, 11.5vw); 
        grid-template-rows: repeat(8, 11.5vw);
        border-width: 4px; /* Marco más fino para ahorrar espacio */
    }

    .square { 
        width: 11.5vw; 
        height: 11.5vw; 
    }

    /* Ocultamos las coordenadas en móvil si estorban, o las hacemos minúsculas */
    .coord-rank, .coord-file { font-size: 8px; }

    /* Ajustes de la Pantalla de Batalla */
    .battle-arena { gap: 15px; }
    .vs { font-size: 40px; }
    .battle-piece { 
        max-width: 100px; 
        max-height: 100px; 
    }
    
    /* Adaptamos las animaciones de batalla para móviles (menos desplazamiento) */
    @keyframes embestida {
        0% { transform: translateX(0) scale(1); }
        20% { transform: translateX(-15px) scale(1.1); }
        40% { transform: translateX(60px) scale(1.3); } 
        80% { transform: translateX(0px) scale(1); }
        100% { transform: translateX(0) scale(1); }
    }
}