/* Variables CSS para colores más brillantes y llamativos */
:root {
    --color-fondo-principal: #3f0071; /* Púrpura oscuro vibrante */
    --color-fondo-secundario: #5c00a3; /* Púrpura medio vibrante */
    --color-fondo-terciario: #7e00e6; /* Púrpura más claro para detalles */
    --color-texto-principal: #e0e0e0; /* Blanco grisáceo */

    /* Tonos de amarillo y naranja/rosa brillante */
    --color-acento-amarillo: #ffea00; /* Amarillo eléctrico */
    --color-acento-rosa: #ff1493; /* Rosa neón (Deep Pink) */

    /* Colores de contraste y hover */
    --color-borde-boton: #ff7f50; /* Coral brillante */
    --color-hover-boton: #ffd700; /* Oro para hover */
    --color-social-icon: #ffea00; /* Amarillo para iconos sociales */
    --color-social-hover: #ff1493; /* Rosa para hover de iconos sociales */

    --color-player-x: #ff4500; /* Naranja rojizo vibrante para X */
    --color-player-o: #00ffff; /* Cian brillante para O */
    --color-win-highlight: #32cd32; /* Verde lima para celdas ganadoras */
}

/* Animación de fondo: Multiples capas de gradientes para un efecto dinámico */
@keyframes backgroundFlow1 {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    /* Múltiples gradientes para un fondo más complejo y animado */
    background:
        linear-gradient(135deg, var(--color-fondo-principal) 0%, var(--color-fondo-secundario) 50%, var(--color-fondo-principal) 100%),
        radial-gradient(circle at top left, var(--color-fondo-terciario) 0%, transparent 50%),
        radial-gradient(circle at bottom right, var(--color-acento-rosa) 0%, transparent 50%);
    background-size: 400% 400%, 100% 100%, 100% 100%;
    animation: backgroundFlow1 30s ease infinite alternate, backgroundFlow2 40s ease infinite;
    color: var(--color-texto-principal);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Evita barras de desplazamiento */
    position: relative; /* Necesario para que los círculos se posicionen correctamente */
    z-index: 0; /* Asegura que el body esté detrás de los círculos */
}

/* Estilos para las partículas de fondo animadas (X y O) */
.background-particles {
    position: fixed; /* Fijo en la ventana */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Detrás de todo el contenido */
    pointer-events: none; /* No interactúa con el ratón */
}

.particle {
    position: absolute;
    border-radius: 50%; /* Para que las X y O puedan tener forma de círculo si se desea, aunque ahora son texto */
    opacity: 0.15; /* Ligeramente transparentes */
    animation: moveParticles 40s infinite linear; /* Animación más lenta y general */
    display: flex; /* Para centrar el texto X/O */
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 3em; /* Tamaño base de las partículas X/O */
}

/* Definición de partículas individuales con diferentes tamaños, posiciones iniciales y retrasos */
.particle:nth-child(1) {
    width: 70px; height: 70px;
    left: 10%; top: 20%;
    animation-delay: 0s;
    font-size: 3.5em; /* Tamaño variado */
}
.particle:nth-child(2) {
    width: 110px; height: 110px;
    left: 80%; top: 10%;
    animation-delay: 7s;
    font-size: 5em;
}
.particle:nth-child(3) {
    width: 50px; height: 50px;
    left: 30%; top: 70%;
    animation-delay: 14s;
    font-size: 2.5em;
}
.particle:nth-child(4) {
    width: 90px; height: 90px;
    left: 50%; top: 5%;
    animation-delay: 5s;
    font-size: 4.5em;
}
.particle:nth-child(5) {
    width: 60px; height: 60px;
    left: 5%; bottom: 15%;
    animation-delay: 6s;
    font-size: 3em;
}
.particle:nth-child(6) {
    width: 100px; height: 100px;
    left: 90%; bottom: 20%;
    animation-delay: 2s;
    font-size: 4.8em;
}
.particle:nth-child(7) { /* Nueva partícula 7 (X) */
    width: 80px; height: 80px;
    left: 20%; top: 5%;
    animation-delay: 1s;
    font-size: 4em;
}
.particle:nth-child(8) { /* Nueva partícula 8 (O) */
    width: 115px; height: 115px;
    left: 70%; top: 60%;
    animation-delay: 3.5s;
    font-size: 5.2em;
}
.particle:nth-child(9) { /* Nueva partícula 9 (X) */
    width: 65px; height: 65px;
    left: 40%; bottom: 5%;
    animation-delay: 4.8s;
    font-size: 3.2em;
}
.particle:nth-child(10) { /* Nueva partícula 10 (O) */
    width: 95px; height: 95px;
    left: 15%; bottom: 70%;
    animation-delay: 7.3s;
    font-size: 4.6em;
}


/* Colores específicos para X y O en el fondo */
.x-particle {
    color: var(--color-player-x);
}
.o-particle {
    color: var(--color-player-o);
}

/* Animación para el movimiento de las partículas (dentro del viewport) */
@keyframes moveParticles {
    10% { transform: translate(10vw, 15vh) scale(1); }
    25% { transform: translate(20vw, 30vh) scale(1.1); }
    50% { transform: translate(50vw, 10vh) scale(1.2); }
    75% { transform: translate(70vw, 40vh) scale(1.1); }
    100% { transform: translate(0vw, 0vh) scale(1); } /* Vuelve al punto de partida relativo */
}


.game-container {
    background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro y semi-transparente */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* Sombra más pronunciada */
    text-align: center;
    max-width: 90%;
    width: 500px;
    border: 3px solid var(--color-acento-amarillo); /* Borde más grueso y amarillo */
    position: relative; /* Para que el z-index funcione correctamente */
    z-index: 1; /* Asegura que esté por encima del fondo */
}

.game-title {
    font-size: 3.5em;
    color: var(--color-acento-amarillo);
    margin-bottom: 25px;
    text-shadow: 3px 3px 8px rgba(255, 255, 0, 0.7); /* Sombra luminosa */
    letter-spacing: 3px;
}

.difficulty-selection {
    margin-bottom: 30px;
}

.difficulty-selection h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--color-texto-principal);
}

.difficulty-btn {
    background-color: var(--color-acento-rosa); /* Botones de dificultad en rosa */
    color: var(--color-texto-principal);
    padding: 12px 25px;
    margin: 0 8px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.difficulty-btn:hover:not(.active) {
    background-color: var(--color-borde-boton); /* Coral para hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.difficulty-btn.active {
    background-color: var(--color-acento-amarillo); /* Activo en amarillo */
    color: var(--color-fondo-principal); /* Texto en púrpura oscuro */
    border: 2px solid var(--color-acento-rosa);
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: default; /* Cursor normal cuando está activo/desactivado */
}

/* Estilo para botones de dificultad deshabilitados */
.difficulty-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    background-color: var(--color-acento-rosa); /* Mantener color base */
}

.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 330px; /* Tamaño de la cápsula del tablero aumentado de 300px a 330px */
    height: 330px; /* Tamaño de la cápsula del tablero aumentado de 300px a 330px */
    margin: 30px auto;
    background-color: var(--color-fondo-secundario); /* Fondo del tablero */
    border-radius: 10px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
    padding: 10px;
    border: 2px solid var(--color-acento-rosa); /* Borde del tablero */
}

.cell {
    width: 100%;
    height: 100%;
    background-color: var(--color-fondo-principal); /* Fondo de las celdas */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5em; /* Tamaño de fuente ajustado para X y O (más pequeño aún) */
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    color: var(--color-texto-principal); /* Color por defecto, se sobrescribe por JS */
    /* Asegura que el tamaño de la celda no cambie */
    flex-shrink: 0;
    flex-grow: 0;
    line-height: 0; /* Asegura que el texto se centre verticalmente sin espacio extra */
    padding: 0; /* Elimina cualquier padding interno */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
}

.cell:hover:not(.x):not(.o) {
    background-color: rgba(var(--color-acento-amarillo), 0.2); /* Ligero brillo amarillo al pasar el ratón */
    transform: scale(1.02);
}

.cell.x {
    color: var(--color-player-x);
    text-shadow: 0 0 15px var(--color-player-x); /* Sombra más intensa */
}

.cell.o {
    color: var(--color-player-o);
    text-shadow: 0 0 15px var(--color-player-o); /* Sombra más intensa */
}

.cell.win {
    background-color: var(--color-win-highlight);
    color: white;
    animation: winPulse 0.5s infinite alternate;
}

@keyframes winPulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.05); opacity: 0.9; }
}

.game-status {
    font-size: 1.6em;
    margin-top: 25px;
    color: var(--color-acento-amarillo);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

.restart-btn {
    background-color: var(--color-acento-amarillo);
    color: var(--color-fondo-principal); /* Texto oscuro para contraste */
    padding: 15px 30px;
    margin: 25px auto 0 auto; /* Centrar el botón */
    display: block; /* Necesario para que margin: auto funcione para centrar */
    border: none;
    border-radius: 10px;
    font-size: 1.3em;
    font-weight: bold;
    /* Cursor y opacidad por defecto para el estado deshabilitado */
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra más suave para deshabilitado */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Estilos para el botón de reiniciar cuando NO está deshabilitado y botón de regresar al inicio */
.restart-btn:not([disabled]) {
    opacity: 1; /* Opacidad normal */
    cursor: pointer;
}

.restart-btn:not([disabled]):hover {
    background-color: var(--color-hover-boton);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}

.restart-btn:not([disabled]):active {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.back-home-btn {
    background-color: var(--color-fondo-terciario); /* Un color de fondo diferente para distinguirlo */
    color: var(--color-texto-principal);
    padding: 15px 30px;
    margin: 15px auto 0 auto; /* Margen superior para separarlo del botón de reiniciar */
    display: block; /* Para que ocupe su propia línea y se pueda centrar */
    border: none;
    border-radius: 10px;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none; /* Quitar el subrayado del enlace */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.back-home-btn:hover {
    background-color: var(--color-acento-rosa); /* Cambiar a rosa al pasar el ratón */
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.back-home-btn:active {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Media Queries para responsividad */
@media (max-width: 600px) {
    .game-container {
        padding: 20px;
        width: 95%;
    }

    .game-title {
        font-size: 2.8em;
    }

    .difficulty-btn {
        padding: 10px 18px;
        margin: 5px;
        font-size: 0.95em;
    }

    .game-board {
        width: 270px; /* Ajuste para pantallas pequeñas */
        height: 270px; /* Ajuste para pantallas pequeñas */
        grid-gap: 8px;
    }

    .cell {
        font-size: 3em;
    }

    .game-status {
        font-size: 1.3em;
    }

    .restart-btn {
        padding: 12px 25px;
        font-size: 1.1em;
    }
}

@media (max-width: 400px) {
    .game-title {
        font-size: 2.2em;
    }

    .game-board {
        width: 240px;
        height: 240px;
        grid-gap: 6px;
    }

    .cell {
        font-size: 2.5em;
    }
    .difficulty-btn {
        display: block; /* Apilar botones de dificultad en pantallas muy pequeñas */
        margin: 10px auto;
        width: 80%;
    }
}