/**
 * mesa3d.css — el aspecto de una mesa de tablero, en un solo sitio
 * ═══════════════════════════════════════════════════════════════════════════
 * Estas reglas estaban copiadas —idénticas— dentro de `chess.html`, `go.html`,
 * `reversi.html`, `checkers.html`, `mancala.html` y `xiangqi.html`. Unas 35
 * líneas por página, seis veces.
 *
 * No es sólo repetición: es la vía por la que las páginas se separan. Cuando
 * alguien retocaba un color lo retocaba en una, y las otras cinco se quedaban
 * como estaban sin que nadie lo viera.
 * ═══════════════════════════════════════════════════════════════════════════
 */
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #05050A; }
#canvas-container { width: 100vw; height: 100vh; position: absolute; z-index: 1; touch-action: none; }

.overlay {
    position: absolute; z-index: 10; pointer-events: none;
    padding: 20px; display: flex; flex-direction: column; gap: 15px;
}

.hud-panel {
    background: rgba(12, 12, 22, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 14px;
    padding: 18px;
    color: #E2E2F0;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 0 30px rgba(138, 43, 226, 0.03);
    max-width: 320px;
    pointer-events: auto; /* ← CRÍTICO: permite interactuar dentro del overlay */
}

.hud-header {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; user-select: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px; margin-bottom: 10px;
}
.hud-header h1 {
    font-family: 'Inter', sans-serif; margin: 0; font-size: 18px;
    background: linear-gradient(135deg, #c8b8ff, #fff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 800; letter-spacing: -0.5px;
}
.collapse-btn {
    background: none; border: none; color: rgba(138,43,226,0.7);
    cursor: pointer; font-family: 'JetBrains Mono', monospace;
    font-size: 14px; font-weight: bold; transition: color 0.2s;
}
.collapse-btn:hover { color: #fff; }

#hud-content {
    transition: max-height 0.35s ease-out, opacity 0.25s ease-out;
    overflow: hidden; max-height: 600px; opacity: 1;
}
.collapsed #hud-content { max-height: 0; opacity: 0; }

.hud-panel .status-row {
    display: flex; justify-content: space-between;
    font-size: 11px; margin-bottom: 5px; color: #8a8a9e;
}
.hud-panel .val { color: #fff; font-weight: bold; }
.val.turn-white { color: #a180ff; }
.val.turn-black { color: #FF4081; }

#minimapCanvas {
    width: 128px; height: 128px;
    background: rgba(5,5,10,0.9);
    border: 1px solid rgba(138,43,226,0.25);
    border-radius: 6px;
    image-rendering: pixelated;
    margin: 0 auto; display: block;
}
.minimap-block { margin: 8px 0 12px; }

.captured-row {
    display: flex; justify-content: center; gap: 1px;
    min-height: 18px; padding: 2px 4px;
    font-size: 14px; line-height: 1;
}
.captured-row.white-captures { color: #c060ff; }
.captured-row.black-captures { color: #b0b0b0; }

.legal-moves {
    margin-top: 10px; font-size: 9px; color: rgba(255,255,255,0.3);
    max-height: 60px; overflow-y: auto;
    word-wrap: break-word; line-height: 1.5;
}

/*
 * Las jugadas, como BOTONES.
 *
 * `.legal-moves` de arriba las enseña como texto gris a 9px, que es informativo
 * y nada más: la mesa de casino en 3D se veía preciosa y no dejaba jugar. Estos
 * son los mismos `legal_moves` que recibe un agente por la puerta de texto —
 * misma lista, mismo juego— pero pulsables.
 */
.mesa-jugadas {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-wrap: wrap; gap: 5px;
    max-height: 190px; overflow-y: auto;
}
.mesa-jugada {
    font: inherit; font-size: 11px; line-height: 1;
    padding: 6px 9px; border-radius: 6px; cursor: pointer;
    color: #e8e8f0; background: rgba(138,43,226,0.16);
    border: 1px solid rgba(161,128,255,0.35);
}
.mesa-jugada:hover:not(:disabled) { background: rgba(138,43,226,0.34); border-color: #a180ff; }
.mesa-jugada:disabled { opacity: 0.35; cursor: default; }
.mesa-jugadas .dato { font-size: 11px; color: rgba(255,255,255,0.4); }

/**
 * ═══ EN UN MÓVIL, LA MESA ES LA PANTALLA ═══════════════════════════════════
 *
 * El panel mide 320 px y ocupa un tercio de un teléfono en vertical: tapa
 * justamente lo que hay que mirar para jugar. Aquí se hace estrecho, se pega
 * arriba y arranca PLEGADO (eso lo decide el motor), de modo que por defecto se
 * ve un título y nada más.
 *
 * Y los botones pasan a tamaño de DEDO. Los de ratón miden 11 px de alto: en un
 * teléfono eso no es un botón pequeño, es un botón que se falla. Con `cambiar:3`
 * y `cambiar:4` pegados, fallar significa jugar otra cosa — y en este juego una
 * casilla de diferencia son doce puntos.
 */
@media (max-width: 820px) {
    .overlay { padding: 8px; gap: 8px; }
    .hud-panel {
        max-width: none; width: calc(100vw - 16px);
        padding: 10px 12px; border-radius: 10px;
    }
    .hud-header { padding-bottom: 6px; margin-bottom: 8px; }
    .hud-header h1 { font-size: 15px; }
    .collapse-btn { font-size: 20px; padding: 4px 10px; }

    .hud-panel .status-row { font-size: 11px; }
    .mesa-jugadas { max-height: 34vh; gap: 7px; }
    .mesa-jugada { font-size: 13px; padding: 10px 13px; }
}

/* Resplandor de fondo */
body::before {
    content: ''; position: fixed; inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(138,43,226,0.04) 0%, transparent 60%);
    z-index: 0; pointer-events: none;
}