:root {
    /* Colores para elementos internos sobre fondos de jugador VARIABLES */
    /* Mantenemos estos porque dependen del fondo dinámico */
    --control-button-bg: rgba(255, 255, 255, 0.1);
    --control-button-hover-bg: rgba(255, 255, 255, 0.18);
    --control-button-active-bg: rgba(255, 255, 255, 0.25);
    --control-button-10-bg: rgba(255, 255, 255, 0.05);
    --control-button-10-hover-bg: rgba(255, 255, 255, 0.1);
    --control-button-10-active-bg: rgba(255, 255, 255, 0.15);
    --control-button-10-border: rgba(255, 255, 255, 0.15);
    --corner-button-bg: rgba(50, 50, 50, 0.6);
    --corner-button-hover-bg: rgba(80, 80, 80, 0.75);
    --corner-button-active-bg: rgba(100, 100, 100, 0.85);

    /* Colores para texto oscuro sobre fondos CLAROS de jugador */
    /* Mantenemos estos porque son la contraparte dinámica */
    --dark-text-color: #222222; /* Similar a --color-negro pero específico */
    --dark-text-control-button-bg: rgba(0, 0, 0, 0.08);
    --dark-text-control-button-hover-bg: rgba(0, 0, 0, 0.12);
    --dark-text-control-button-active-bg: rgba(0, 0, 0, 0.15);
    --dark-text-control-button-10-bg: rgba(0, 0, 0, 0.05);
    --dark-text-control-button-10-hover-bg: rgba(0, 0, 0, 0.08);
    --dark-text-control-button-10-active-bg: rgba(0, 0, 0, 0.12);
    --dark-text-control-button-10-border: rgba(0, 0, 0, 0.15);
    --dark-text-corner-button-bg: rgba(220, 220, 220, 0.6);
    --dark-text-corner-button-hover-bg: rgba(200, 200, 200, 0.75);
    --dark-text-corner-button-active-bg: rgba(180, 180, 180, 0.85);

    --transition-speed-fast: 0.15s;
    --transition-speed-medium: 0.25s;
}

/* --- Estilos Globales Específicos --- */
body {
    overscroll-behavior: none;
    touch-action: manipulation;
    /* overflow es controlado por JS (updateBodyScroll) y .column-mode */
}

/* Quitar padding del body cuando el scoreboard está activo */
body:has(.app-container.scoreboard-active) {
    padding: 0;
}

/* --- Contenedor Principal --- */
/* Estilo para cuando el marcador está activo (ocupa toda la pantalla) */
.app-container.scoreboard-active {
    width: 100%;
    height: 100vh;   /* Ocupa toda la altura de la ventana */
    padding: 0;      /* Sin padding global */
    margin: 0;       /* Sin margen */
}

/* Ocultar título H1 cuando el marcador está activo */
.app-container.scoreboard-active > h1 {
    display: none;
}

/* --- Pantalla de Selección --- */
#player-selection {
    /* display: flex; establecido por JS */
    flex-direction: column; /* Asegura disposición vertical de los hijos */
}

#player-selection h1 { /* Este es el H1 interno si existiera, NO el principal */
    font-size: clamp(1.8rem, 5vw, 2.2rem); /* Mantenemos ajuste dinámico */
    margin-bottom: 1.5rem;
}

#player-selection #player-count-value {
     min-width: 2em; /* Para asegurar espacio para "12" */
     display: inline-block; /* Para que el min-width funcione bien */
     text-align: center;
}

#player-selection #start-puntuador-button {
    margin-top: 1.5rem; /* Asegurar buen espacio superior */
}

/* --- Marcador de Puntos --- */
#scoreboard {
    width: 100%; height: 100%;
    position: relative;
    /* El fondo base será el del body o el del player-section en modo 1 jugador */
    display: none; /* Controlado por JS */
    overflow: hidden; /* Evita scroll interno */
}

/* Modo Grid */
#scoreboard.grid-mode {
    display: grid;
    gap: 1px;
    background-color: var(--border-color); /* Color de separación usa variable global */
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-rows-1 { grid-template-rows: 1fr; }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }


/* Modo 1 Jugador */
#scoreboard.single-player-mode {
    display: flex;
}

/* Modo Columna */
#scoreboard.column-mode {
    display: flex !important; /* Forzar flex */
    flex-direction: column !important;
    width: 100% !important; height: auto !important;
    background-color: var(--border-color) !important; /* Color separación global */
    overflow: visible !important; /* Permite scroll del body */
    position: static; /* Para que no interfiera con el flujo normal */
}

/* --- Sección de Jugador --- */
.player-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: clamp(5px, 1vh, 8px) 8px clamp(8px, 1.5vh, 15px);
    text-align: center;
    transition: background-color var(--transition-speed-medium) ease, color var(--transition-speed-medium) ease;
    overflow: hidden;
    color: var(--text-color); /* Color texto global por defecto */
    position: relative;
    /* background-color es dinámico (JS) */
    /* En modo grid/columna, necesita un fondo explícito si el global es oscuro */
    background-color: var(--section-bg); /* Fondo por defecto para grid/columna */
}
/* En modo 1 jugador, el fondo dinámico ya cubre todo */
.single-player-mode .player-section {
    background-color: transparent; /* Hereda el color del body O es sobreescrito por JS */
}

/* --- Botones de esquina --- */
.corner-btn {
    position: absolute;
    top: clamp(4px, 0.8vh, 7px);
    background-color: var(--corner-button-bg);
    color: var(--text-color); /* Color texto base */
    border: none; /* Sin borde estándar */
    border-radius: 50%; /* Círculo */
    width: clamp(28px, 6vw, 40px); height: clamp(28px, 6vw, 40px);
    font-size: clamp(1rem, 3.5vw, 1.6rem);
    cursor: pointer;
    transition: background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
    display: inline-flex; align-items: center; justify-content: center;
    user-select: none; z-index: 5; line-height: 1;
    box-shadow: var(--box-shadow-sm); /* Sombra global pequeña */
    outline: none; /* Anillo de foco abajo */
}
.corner-btn.back-to-selection-btn { left: clamp(8px, 1.5vw, 12px); }
.corner-btn.btn-color { right: clamp(8px, 1.5vw, 12px); }

/* Estilos hover/active/focus para botones de esquina */
.player-section:not(.dark-text-required) .corner-btn:hover { background-color: var(--corner-button-hover-bg); transform: scale(1.08); }
.player-section:not(.dark-text-required) .corner-btn:active { background-color: var(--corner-button-active-bg); transform: scale(0.96); }

/* Usar focus-visible global */
.corner-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring-color); /* Anillo de foco global */
    transform: scale(1.05); /* Feedback visual */
}

/* --- Texto Oscuro para Fondos Claros (Sin cambios lógicos, usa variables locales) --- */
.player-section.dark-text-required { color: var(--dark-text-color); }
.player-section.dark-text-required .player-name:hover,
.player-section.dark-text-required .score-display .score:hover { background-color: rgba(0, 0, 0, 0.08); }
/* Botones de control */
.player-section.dark-text-required .btn-control:not(.corner-btn) { color: var(--dark-text-color); background-color: var(--dark-text-control-button-bg); }
.player-section.dark-text-required .btn-control:not(.corner-btn):hover { background-color: var(--dark-text-control-button-hover-bg); }
.player-section.dark-text-required .btn-control:not(.corner-btn):active { background-color: var(--dark-text-control-button-active-bg); }
.player-section.dark-text-required .btn-control.btn-10 { background-color: var(--dark-text-control-button-10-bg); border-color: var(--dark-text-control-button-10-border); }
.player-section.dark-text-required .btn-control.btn-10:hover { background-color: var(--dark-text-control-button-10-hover-bg); }
.player-section.dark-text-required .btn-control.btn-10:active { background-color: var(--dark-text-control-button-10-active-bg); }
/* Botones de esquina */
.player-section.dark-text-required .corner-btn { color: var(--dark-text-color); background-color: var(--dark-text-corner-button-bg); }
.player-section.dark-text-required .corner-btn:hover { background-color: var(--dark-text-corner-button-hover-bg); }
.player-section.dark-text-required .corner-btn:active { background-color: var(--dark-text-corner-button-active-bg); }
.player-section.dark-text-required .corner-btn:focus-visible { background-color: var(--dark-text-corner-button-hover-bg); /* Mantiene feedback visual */ }

/* --- Estilos Específicos 1 JUGADOR --- */
.single-player-mode .player-section {
    flex-grow: 1;
    padding: clamp(10px, 2vh, 15px) 20px clamp(25px, 4vh, 40px); /* Padding inferior mayor */
    justify-content: space-around;
    /* background-color seteado por JS */
}
.single-player-mode .corner-btn {
     width: clamp(40px, 9vw, 55px); height: clamp(40px, 9vw, 55px);
     font-size: clamp(1.5rem, 5vw, 2.1rem);
     top: clamp(8px, 1.5vh, 12px);
}
.single-player-mode .corner-btn.back-to-selection-btn { left: clamp(10px, 2vw, 15px); }
.single-player-mode .corner-btn.btn-color { right: clamp(10px, 2vw, 15px); }

/* --- Cabecera y Nombre --- */
.player-header {
    display: flex; justify-content: center; align-items: center;
    width: calc(100% - 70px); /* Espacio botones esquina */
    max-width: 350px; margin: 0 auto;
    min-height: clamp(28px, 6vw, 40px);
}
.player-name {
    font-size: clamp(0.8rem, 2.2vw + 0.3rem, 1.2rem);
    font-weight: 600;
    padding: 4px 8px; cursor: pointer; border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed-fast);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center; width: 100%; display: inline-block;
}
/* Hover Nombre */
.player-section:not(.dark-text-required) .player-name:hover { background-color: rgba(255, 255, 255, 0.08); }
/* Ajustes Nombre 1 Jugador */
.single-player-mode .player-header { width: calc(100% - 90px); max-width: 500px; min-height: clamp(40px, 9vw, 55px); }
.single-player-mode .player-name { font-size: clamp(1.6rem, 5vw, 2.6rem); padding: 10px 15px; }

/* --- Puntuación --- */
.score-display {
    font-size: clamp(1.8rem, 8vh + 0.5rem, 4.5rem);
    font-weight: bold;
    margin: clamp(15px, 3vh, 25px) 0 8px; /* Margen ajustado */
    line-height: 1; flex-grow: 1;
    display: flex; align-items: center; justify-content: center;
    min-height: 35px; width: 100%;
}
.score-display .score {
    cursor: pointer; padding: 2px 8px; border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed-fast);
    user-select: none;
}
/* Hover Puntuación */
.player-section:not(.dark-text-required) .score-display .score:hover { background-color: rgba(255, 255, 255, 0.08); }
/* Ajustes Puntuación 1 Jugador */
.single-player-mode .score-display {
    font-size: clamp(6rem, 22vh, 11rem);
    margin: clamp(30px, 6vh, 50px) 0 20px; /* Margen ajustado */
}
.single-player-mode .score-display .score { padding: 5px 18px; }

/* --- Controles (+1, -1, +10, -10) --- */
.controls {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%; gap: clamp(5px, 1.2vw, 10px);
    margin-top: 8px; padding-top: 5px;
}
.single-player-mode .controls { margin-top: 20px; padding-top: 10px; gap: 18px; }

/* Estilo base botones de control interno */
.btn-control { /* Clase común para +/- y esquina */
    border: none; cursor: pointer;
    transition: background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
    display: inline-flex; align-items: center; justify-content: center;
    user-select: none; line-height: 1; font-weight: normal;
    outline: none; /* Foco abajo */
}
/* Botones +/- 1 (Circulares) */
.btn-control.score-adjust {
    background-color: var(--control-button-bg); color: inherit;
    border-radius: 50%; /* Círculo */
    width: clamp(35px, 7vw, 50px); height: clamp(35px, 7vw, 50px);
    font-size: clamp(1.4rem, 4.5vw, 2.2rem); font-weight: bold;
}
.single-player-mode .btn-control.score-adjust {
    width: clamp(70px, 16vw, 100px); height: clamp(70px, 16vw, 100px);
    font-size: clamp(3.5rem, 9vw, 5rem);
}
/* Botones +/- 10 (Rectangulares) */
.btn-control.btn-10 {
    background-color: var(--control-button-10-bg); color: inherit;
    border: 1px solid var(--control-button-10-border);
    border-radius: var(--border-radius-md);
    width: clamp(40px, 8vw, 55px); height: clamp(30px, 5.5vw, 40px);
    font-size: clamp(0.75rem, 2.8vw, 1.1rem); font-weight: bold;
}
.single-player-mode .btn-control.btn-10 {
    width: clamp(80px, 18vw, 110px); height: clamp(55px, 11vw, 75px);
    font-size: clamp(1.6rem, 5.5vw, 2.2rem);
}

/* Estados Hover/Active/Focus para botones de control INTERNOS */
/* Usar focus-visible global */
.btn-control:not(.corner-btn):focus-visible {
     box-shadow: 0 0 0 3px var(--focus-ring-color);
     transform: scale(1.05);
}
/* Hover/Active (sin texto oscuro) */
.player-section:not(.dark-text-required) .btn-control:not(.corner-btn):not(.btn-10):hover { background-color: var(--control-button-hover-bg); transform: scale(1.05);}
.player-section:not(.dark-text-required) .btn-control:not(.corner-btn):not(.btn-10):active { background-color: var(--control-button-active-bg); transform: scale(0.95); }
.player-section:not(.dark-text-required) .btn-control.btn-10:hover { background-color: var(--control-button-10-hover-bg); transform: scale(1.03);}
.player-section:not(.dark-text-required) .btn-control.btn-10:active { background-color: var(--control-button-10-active-bg); transform: scale(0.97); }


/* --- Media Query para layout de COLUMNA --- */
body:has(#scoreboard.column-mode) {
    overflow-y: auto; /* Permite scroll del body SOLO si está en modo columna */
}
.app-container:has(#scoreboard.column-mode) {
    height: auto; /* Permite que crezca */
    justify-content: flex-start; /* Alinea arriba */
}

/* Estilos cuando scoreboard tiene .column-mode */
.column-mode .player-section {
     padding: clamp(10px, 1.8vh, 18px) 12px 20px;
     min-height: 180px;
     justify-content: space-around;
     border-radius: 0;
}
.column-mode .corner-btn {
     top: clamp(8px, 1.5vh, 12px);
     width: 36px; height: 36px; font-size: 1.4rem; }
.column-mode .corner-btn.back-to-selection-btn { left: 10px; }
.column-mode .corner-btn.btn-color { right: 10px; }

.column-mode .player-header {
     width: calc(100% - 80px); max-width: 90%;
     min-height: 36px; margin-top: 0; }
.column-mode .player-name {
     font-size: clamp(1.2rem, 4vw + 0.5rem, 1.8rem); padding: 6px 10px; }

.column-mode .score-display {
     font-size: clamp(3.5rem, 12vh, 6.5rem);
     flex-grow: 0;
     margin: clamp(18px, 4vh, 35px) 0 10px;
}
.column-mode .controls {
    margin-top: 12px; padding-top: 8px; margin-bottom: 12px; gap: 12px;
}
.column-mode .controls .btn-control.score-adjust { width: clamp(50px, 13vw, 70px); height: clamp(50px, 13vw, 70px); font-size: clamp(2rem, 7vw, 3rem); }
.column-mode .controls .btn-control.btn-10 { width: clamp(55px, 14vw, 75px); height: clamp(40px, 9vw, 50px); font-size: clamp(1rem, 4vw, 1.5rem); }

/* --- Ajustes finos para landscape MUY BAJO --- */
@media (max-height: 350px) and (min-width: 769px) and (orientation: landscape) {
     #scoreboard.grid-mode .player-section { padding: 3px 5px 5px; }
     #scoreboard.grid-mode .corner-btn {
         top: 3px; width: 22px; height: 22px; font-size: 0.9rem; }
     #scoreboard.grid-mode .corner-btn.back-to-selection-btn { left: 4px; }
     #scoreboard.grid-mode .corner-btn.btn-color { right: 4px; }
     #scoreboard.grid-mode .player-header { width: calc(100% - 50px); min-height: 22px; margin-top: 0; }
     #scoreboard.grid-mode .player-name { font-size: 0.75rem; padding: 2px 4px; }
     #scoreboard.grid-mode .score-display { font-size: 1.6rem; margin: 6px 0 3px; min-height: 22px; }
     #scoreboard.grid-mode .score-display .score { padding: 0 4px; }
     #scoreboard.grid-mode .controls { margin-top: 3px; padding-top: 3px; gap: 4px; }
     #scoreboard.grid-mode .btn-control.score-adjust { width: 28px; height: 28px; font-size: 1.1rem; }
     #scoreboard.grid-mode .btn-control.btn-10 { width: 32px; height: 22px; font-size: 0.65rem; border-radius: var(--border-radius-sm);}
}

/* --- Ocultar navegación cuando el scoreboard está activo --- */
.app-container.scoreboard-active #puntuador-nav {
    display: none;
}