.zona-juego {
    max-width: 700px;
    margin: var(--space-4) auto var(--space-6);
    padding: 0 var(--space-4);
}

.info-partida {
    display: none;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.estado-superior {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

#mensaje-estado {
    font-weight: 600;
    text-align: center;
}

#mensaje-estado.mensaje-error {
    color: var(--color-danger);
}

#temporizador-turno {
    color: var(--color-highlight);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

#barra-controles {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.replay-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.replay-boton {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.replay-boton:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.replay-boton:disabled {
    opacity: 0.4;
    cursor: default;
}

.replay-boton-grande {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.2rem;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.replay-boton-grande:hover:not(:disabled) {
    color: #fff;
    opacity: 0.9;
}

.replay-slider {
    flex: 1 1 160px;
    max-width: 300px;
    accent-color: var(--color-accent);
}

.replay-contador {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
    min-width: 5rem;
}

.analisis-bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.analisis-progreso {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 400px;
}

.analisis-progreso-barra {
    flex: 1;
    height: 8px;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.analisis-progreso-relleno {
    height: 100%;
    width: 0%;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.analisis-progreso span {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.analisis-anotacion {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.analisis-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.analisis-badge-MEJOR {
    background-color: var(--color-accent);
}

.analisis-badge-BUENA {
    background-color: #4a7fb5;
}

.analisis-badge-IMPRECISION {
    background-color: var(--color-highlight);
    color: #3a2f10;
}

.analisis-badge-ERROR {
    background-color: #c07a2e;
}

.analisis-badge-ERROR_GRAVE {
    background-color: var(--color-danger);
}

.oculto {
    display: none;
}

.tablero-fila {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.panel-jugadores {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

.panel-jugador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    min-width: 0;
}

.panel-jugadores > .panel-jugador {
    flex: 1;
}

.columna-jugador-izquierda {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

#fichas-restantes-j1, #fichas-restantes-j2 {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.controles-online {
    display: inline-flex;
    align-self: flex-start;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}

.control-online {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-3);
    cursor: pointer;
    white-space: nowrap;
}

.control-online:hover {
    color: var(--color-text);
    background-color: var(--color-accent-soft);
}

.control-online + .control-online {
    border-left: 1px solid var(--color-border);
}

.control-online-icono {
    font-size: 0.9rem;
    line-height: 1;
}

@media (min-width: 1200px) {
    .zona-juego {
        max-width: 1300px;
    }
    .estado-superior, #barra-controles, .info-partida {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    .tablero-fila {
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: var(--space-4);
    }

    .panel-jugadores {
        display: contents;
    }
    .panel-jugadores > .panel-jugador, .columna-jugador-izquierda {
        flex: 1 1 240px;
        max-width: 300px;
    }
    .panel-jugador {
        flex-direction: column;
        padding: var(--space-4);
    }
    .columna-jugador-izquierda {
        order: 0;
    }
    #tablero {
        order: 1;
        flex: 0 1 700px;
    }
    .panel-jugadores > .panel-jugador:last-child {
        order: 2;
    }
}

.modal-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    pointer-events: none;
    padding: var(--space-4);
}

.modal-overlay.oculto {
    display: none;
}

.modal-contenido {
    pointer-events: auto;
    position: relative;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: var(--sombra-tarjeta);
}

.modal-cerrar {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.3rem;
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
}

.modal-cerrar:hover {
    color: var(--color-text);
}

.modal-contenido p {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 var(--space-4);
}

.modal-botones {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

#tablero {
    background-color: var(--color-board);
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    width: 100%;
    position: relative;
    box-shadow: var(--sombra-tarjeta);
    display: flex;
    align-items: center;
    justify-content: center;
}

#cuadrado-grande {
    width: 80%;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cuadrado-peque {
    width: 50%;
    aspect-ratio: 1 / 1;
    position: relative;
}

.cuadrado {
    border: 3px solid var(--color-piece-light);
    box-sizing: border-box;
    border-radius: 4px;
}

.linea-mill {
    position: absolute;
    background-color: var(--color-highlight);
    opacity: 0;
    pointer-events: none;
    border-radius: 2px;
}

.linea-mill.horizontal-superior { top: -3px; left: 0; width: 100%; height: 6px; }
.linea-mill.horizontal-inferior { bottom: -3px; left: 0; width: 100%; height: 6px; }
.linea-mill.vertical-izquierda { left: -3px; top: 0; width: 6px; height: 100%; }
.linea-mill.vertical-derecha { right: -3px; top: 0; width: 6px; height: 100%; }

.linea-mill.destello {
    animation: parpadeoLinea 0.9s ease-in-out infinite;
}

@keyframes parpadeoLinea {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.linea-horizontal, .linea-vertical {
    position: absolute;
    background-color: var(--color-piece-light);
}

.linea-horizontal {
    width: 2px;
    height: 25%;
}

.linea-vertical {
    height: 2px;
    width: 25%;
}

#horizontal1 {
    top: 0;
}

#horizontal2 {
    bottom: 0;
}

#vertical1 {
    left: 0;
}

#vertical2 {
    right: 0;
}

.casilla {
    position: absolute;
    width: 9%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s ease, outline-color 0.15s ease;

    background-color: var(--color-board);
    border: 3px solid rgba(255, 255, 255, 0.55);
    box-sizing: border-box;
    padding: 0;
    font: inherit;
}

.casilla:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

.casilla:focus-visible {
    outline: 3px solid var(--color-highlight);
    outline-offset: 2px;
}

.casilla-0 { top: -4.5%; left: -4.5%; }
.casilla-1 { top: -4.5%; left: 50%; transform: translateX(-50%); }
.casilla-2 { top: -4.5%; left: 100%; transform: translateX(-50%); }
.casilla-3 { top: 50%; left: -4.5%; transform: translateY(-50%); }
.casilla-4 { top: 50%; right: -4.5%; transform: translateY(-50%); }
.casilla-5 { bottom: -4.5%; left: -4.5%; }
.casilla-6 { bottom: -4.5%; left: 50%; transform: translateX(-50%); }
.casilla-7 { bottom: -4.5%; left: 100%; transform: translateX(-50%); }

.casilla-etiqueta {
    position: absolute;
    top: 100%;
    left: 100%;
    margin: 2px 0 0 2px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}

.casilla-mejor-jugada {
    outline: 3px solid var(--color-highlight);
    outline-offset: 2px;
}

.ficha-movil {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: top 0.4s ease, left 0.4s ease;
    box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.4),
            inset 0 -3px 6px rgba(0, 0, 0, 0.25),
            inset 0 3px 4px rgba(255, 255, 255, 0.35);
}

.ficha-movil.blancas {
    background: radial-gradient(circle at 35% 30%, #ffffff, #e4ded2 65%, #cfc6b8 100%);
    border: 1px solid #b8ae9c;
}

.ficha-movil.negras {
    background: radial-gradient(circle at 35% 30%, #4a4a4a, #1c1c1c 65%, #000000 100%);
    border: 1px solid #000;
    box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.5),
            inset 0 -3px 6px rgba(0, 0, 0, 0.4),
            inset 0 3px 4px rgba(255, 255, 255, 0.15);
}

#capa-fichas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.ficha-movil.apareciendo {
    animation: aparecerFicha 0.25s ease-out;
}

.ficha-movil.desapareciendo {
    animation: desaparecerFicha 0.25s ease-in forwards;
}

@keyframes aparecerFicha {
    from { transform: scale(0.3); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes desaparecerFicha {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.3); opacity: 0; }
}

.casilla.seleccionada {
    outline: 3px solid var(--color-highlight);
    outline-offset: 2px;
}

.casilla.capturable {
    outline: 3px solid var(--color-danger);
    outline-offset: 2px;
}

@keyframes pulsoLinea {
    0%, 100% { box-shadow: 0 0 0 4px var(--color-highlight); }
    50% { box-shadow: 0 0 0 7px var(--color-highlight); }
}

.casilla.en-linea {
    animation: pulsoLinea 1.2s ease-in-out infinite;
}

@keyframes destelloCambio {
    0% { box-shadow: 0 0 0 6px var(--color-highlight); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes destelloCaptura {
    0% { box-shadow: 0 0 0 6px var(--color-danger); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.casilla.recien-cambiada {
    animation: destelloCambio 0.8s ease-out;
}

.casilla.recien-capturada {
    animation: destelloCaptura 0.8s ease-out;
}