/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

body {
    margin: 0;
    padding: 0;
}

.bgboard {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000d1;
    display: none; /* Controlado por JS cuando el juego inicia */
    z-index: 999998;
}

.board {
    width: 480px; /* Ancho por defecto para pantallas grandes */
    height: 480px; /* Alto para que sea cuadrado */
    border: .5rem solid #ffffff;
    position: fixed; /* Crucial para centrar en la pantalla */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el tablero */
    display: none; /* Controlado por JS cuando el juego inicia */
    z-index: 999999;
    margin-top: 0; /* Resetear el margen para el centrado */
    margin-left: 0; /* Resetear el margen para el centrado */
    /* IMPORTANTE: Eliminamos 'position: relative;' de aquí para evitar conflictos con 'fixed'.
       Los '.board-controls' seguirán posicionándose correctamente porque 'fixed' también es un tipo de posicionamiento. */
}

.piece-box {
    height: 60px; /* Alto por defecto para pantallas grandes */
    width: 60px; /* Ancho por defecto para pantallas grandes */
    font-size: 50px; /* Tamaño de fuente por defecto para pantallas grandes */
    display: flex;
    justify-content: center;
    align-items: center;
}

.black-cell {
    background-color: #434343;
}

.white-cell {
    background-color: #bababa;
}

.row {
    display: flex;
}

/* Estilos para resaltar el movimiento de las piezas */
.highlight-start {
    /* Color para la casilla de inicio (azul muy claro) */
    background-color: #B0E0E6 !important; /* PowderBlue */
    transition: background-color 0.3s ease-out;
}

.highlight-end {
    /* Color para la casilla de destino (gris muy claro) */
    background-color: #D3D3D3 !important; /* LightGrey */
    transition: background-color 0.3s ease-out;
}

/* Opcional: Si quieres un efecto de sombra o borde */
.highlight-start,
.highlight-end {
    box-shadow: 0px 0px 10px 5px rgba(0,255,255,0.75) inset; /* Un brillo suave */
}

/* Nuevos estilos para el contenedor del cronómetro, el botón de información y el botón de cerrar */
.board-controls {
    position: absolute; /* Posición relativa al .board (que ahora es fijo, pero es el ancestro posicionado) */
    top: -4rem; /* Ajusta según sea necesario para colocarlo encima del tablero */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: center; /* Alinea los elementos verticalmente en el centro */
    padding: 0 0.5rem; /* Añade un poco de relleno a los lados */
    box-sizing: border-box; /* Incluye el relleno en el ancho total del elemento */
    z-index: 1000000; /* Asegura que esté por encima del tablero */
}

/* Estilos para el temporizador */
.timer {
    padding: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 0.5rem solid #ffffff;
    height: 2rem;
    width: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 2rem;
    font-family: 'Orbitron', sans-serif;
    position: static; /* Se posiciona con Flexbox, no absoluto */
    margin-right: auto; /* Empuja a la izquierda */
}

/* Estilos para el botón de cerrar */
.close {
    padding: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 0.5rem solid #ffffff;
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 2rem;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    position: static; /* Se posiciona con Flexbox, no absoluto */
    margin-left: 0.5rem; /* Espacio desde el botón de información */
}

/* Estilos para el botón de información */
.info {
    padding: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: 0.5rem solid #ffffff;
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1863dc;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    position: static; /* Se posiciona con Flexbox, no absoluto */
    margin-left: auto; /* Empuja a la derecha, junto al botón de cerrar */
}

/* --- Adaptación para diferentes tamaños de pantalla (Media Queries) --- */

/* Para móviles pequeños (hasta 540px de ancho) */
@media (max-width: 540px) {
    .board {
        width: 90vw; /* El 90% del ancho de la pantalla visible */
        height: 90vw; /* Mantiene la proporción cuadrada */
        max-width: 480px; /* Evita que crezca demasiado en tablets en vertical */
        max-height: 480px;
        border-width: 0.2rem; /* Borde más fino para pantallas pequeñas */
    }

    .piece-box {
        width: calc(90vw / 8); /* Calcula el ancho de cada casilla (90% de la pantalla dividido por 8 casillas) */
        height: calc(90vw / 8); /* Mantiene las casillas cuadradas */
        font-size: calc(90vw / 8 * 0.8); /* Ajusta el tamaño de la pieza según la casilla */
    }

    .board-controls {
        top: -3.5rem; /* Ajusta este valor según sea necesario para pantallas más pequeñas */
        padding: 0 0.2rem;
    }
    .timer, .close, .info {
        font-size: 1.5rem; /* Fuente más pequeña para los controles en pantallas pequeñas */
        height: 1.5rem;
        padding: 0.3rem;
        border-width: 0.2rem;
    }
    .timer {
        width: 6rem;
    }
}

/* Para móviles más grandes y tablets pequeñas (entre 541px y 768px de ancho) */
@media (min-width: 541px) and (max-width: 768px) {
    .board {
        width: 70vw; /* El 70% del ancho de la pantalla visible */
        height: 70vw; /* Mantiene la proporción cuadrada */
        max-width: 480px;
        max-height: 480px;
    }

    .piece-box {
        width: calc(70vw / 8);
        height: calc(70vw / 8);
        font-size: calc(70vw / 8 * 0.8);
    }

    .board-controls {
        top: -4rem; /* Ajusta este valor según sea necesario */
    }
}

/* Para tablets grandes y ordenadores (a partir de 769px de ancho) */
@media (min-width: 769px) {
    .board {
        width: 480px; /* Ancho fijo para pantallas grandes */
        height: 480px;
    }

    .piece-box {
        width: 60px;
        height: 60px;
        font-size: 50px;
    }

    .board-controls {
        top: -4rem; /* Valor original o ajusta según sea necesario */
        justify-content: space-between; /* Asegura space-between en pantallas grandes */
    }

    .info {
        margin-left: auto; /* Lo empuja a la derecha, junto al botón de cerrar */
        margin-right: 0.5rem; /* Espacio antes del botón de cerrar */
        border-radius: 0.5rem 0.5rem 0 0; /* Revierte al borde normal si lo habías cambiado */
    }
    .close {
        margin-left: 0; /* Asegura que no tenga margen izquierdo si el info ya tiene margin-right */
    }
}