/* Base Styles using System Fonts for offline compatibility */
:root {
    --bg-dark: #121212;
    --glass-bg: rgba(20, 20, 20, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --primary: #3498db;
    --accent: #e74c3c;

    --p1-color: #ffffff;
    --p2-color: #f1c40f;
    --p3-color: #e74c3c;

    --font-stack: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    /* Prevent selection for touch app feel */
}

body {
    font-family: var(--font-stack);
    background-color: var(--bg-dark);
    color: white;
    height: 100vh;
    overflow: hidden;
}

/* Webcam Background */
#webcam {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scaleX(-1);
    /* Mirror effect */
    opacity: 0;
    /* Hidden by default until active */
    transition: opacity 0.5s ease;
}

#webcam.active {
    opacity: 1;
}

/* App Overlay */
#app-overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    transition: background 0.5s ease;
}

#app-overlay.camera-mode {
    background: rgba(0, 0, 0, 0.2);
    /* Transparent when camera is on */
}

/* Top Bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

/* Todos los controles de la partida (Iniciar/Pausar, Deshacer, Terminar
   Partida, grabar, pantalla completa), siempre visibles como iconos —
   ver la nota junto a .icon-btn más abajo. */
.controls-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Separa visualmente los controles de la partida (Iniciar/Pausar,
   Reiniciar Tiempo, Deshacer, Terminar Partida) de los de la grabación
   (grabar, pantalla completa) — dos grupos distintos, antes sin ninguna
   frontera entre ellos. */
.icon-group-separator {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 2px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary);
    letter-spacing: 2px;
}

/* Símbolo "El Arrabal" (rombo de banda + bola roja) a una tinta:
   hereda var(--primary) vía currentColor, así se mantiene el azul actual
   de la barra sin tocar la UI vigente. Si en el futuro se decide pasar la
   barra a marfil (#EFE7D4), basta con cambiar var(--primary) aquí o el
   color de .logo — el símbolo no necesita tocarse. */
.logo-symbol {
    flex-shrink: 0;
    color: inherit;
}

.match-info {
    display: flex;
    gap: 20px;
}

/* ID de partida + árbitro apilados verticalmente en vez de en línea: hay
   espacio vertical de sobra en la cabecera, y así ocupan un único hueco en
   anchura junto a Modo/Entrada/Tiempo en vez de dos. */
.match-id-referee-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-badge .label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
}

.info-badge .value {
    font-size: 4.5rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.info-badge .highlight {
    color: var(--accent);
}

/* Contador de entradas (BIL-4): el número grande con los botones ◀/▶ de
   corrección a los lados, discretos pero clicables con el ratón. */
.inning-counter {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Selector con .info-badge delante para ganar a .icon-btn (declarado
   más abajo, misma especificidad), que si no dejaba el icono en 1.5rem. */
.info-badge .inning-adjust-btn {
    font-size: 2.6rem;
    color: #bbb;
    padding: 5px 8px;
}

.info-badge .inning-adjust-btn:hover:not(:disabled) {
    color: white;
}

/* Pasado el límite de entradas (EXTRA +n): naranja, para que se vea de
   un vistazo que la partida está en desempate. */
.info-badge .value.inning-extra {
    color: #f39c12;
}

/* ID de partida: texto corto editable, no un número gigante como el
   resto de .value de esta barra — fuente mucho más pequeña, y con pinta
   de campo editable (borde inferior sutil que se resalta al enfocar). */
.info-badge .value-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-family: var(--font-stack);
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    width: 140px;
    padding: 2px 0;
}

.info-badge .value-input:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

/* Scoreboard Layouts */
#scoreboard {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 20px;
    transition: all 0.5s ease;
}

/* Standard Layout (Center) */
.layout-camera-off .player-card {
    min-width: 300px;
    transform: scale(1);
}

/* Camera Layout (Corners) */
#scoreboard.layout-camera-on {
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 40px;
}

#scoreboard.layout-camera-on .player-card {
    transform: scale(0.85);
    /* Slightly smaller */
    background: rgba(0, 0, 0, 0.6);
    /* More transparent */
}

#scoreboard.layout-camera-on .controls-player {
    opacity: 0;
    /* Hide controls to clean up view, show on hover? Or make smaller */
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* Player Card */
.player-card {
    background: var(--glass-bg);
    border: 8px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.player-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.4);
}

/* Límite de carambolas alcanzado (BIL-4): solo se resalta, no se para
   nada. Con outline y no con border porque render() pone el color del
   borde en línea (jugador activo/inactivo) y lo pisaría. */
.player-card.limit-reached {
    outline: 6px solid #f1c40f;
    outline-offset: 4px;
}

/* Confirmación visual de Deshacer: un pulso breve en la tarjeta del
   jugador activo, sin diálogos ni elementos nuevos permanentes. Termina
   en el mismo aspecto que .active para no dejar un estado "atascado". */
.player-card.undo-flash {
    animation: undoFlash 0.6s ease;
}

@keyframes undoFlash {
    0% {
        border-color: #16a085;
        box-shadow: 0 0 20px rgba(22, 160, 133, 0.6);
    }
    100% {
        border-color: var(--primary);
        box-shadow: 0 0 20px rgba(52, 152, 219, 0.4);
    }
}

.player-name {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    font-family: var(--font-stack);
    font-weight: bold;
}

/* Barra de tiempo del turno, dentro de la tarjeta del jugador con el
   turno activo — reemplaza la idea de ponerla en la cabecera: así vive
   junto al jugador al que de verdad afecta. Solo visible en la tarjeta
   .active (ver render()); las otras dos se quedan ocultas pero mantienen
   su hueco reservado, para que las tarjetas no salten de tamaño al pasar
   el turno. El color pasa de verde a naranja y a rojo según baja el
   tiempo restante (ver updateTurnTimerBar() en app.js). */
.turn-timer-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
    visibility: hidden;
}

.player-card.active .turn-timer-bar {
    visibility: visible;
}

.turn-timer-fill {
    height: 100%;
    width: 100%;
    background: #27ae60;
    transition:
        width 1s linear,
        background-color 0.3s ease;
}

.score-box {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px 0;
    margin-bottom: 20px;
}

.score {
    font-size: 8rem;
    font-weight: bold;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Player Colors */
.p1 .score,
.p1 .player-name {
    color: var(--p1-color);
}

.p2 .score,
.p2 .player-name {
    color: var(--p2-color);
}

.p3 .score,
.p3 .player-name {
    color: var(--p3-color);
}

.stats-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin-bottom: 15px;
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 4px;
}

.stat-label {
    font-size: 0.75rem;
    color: #aaa;
}

.stat-cell b {
    font-size: 1rem;
    color: white;
    font-variant-numeric: tabular-nums;
}

/* Controls */
.controls-player {
    display: flex;
    gap: 10px;
    justify-content: center;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.1s;
}

button:active {
    transform: scale(0.95);
}

.btn-score {
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.2rem;
    flex: 2;
}

.btn-foul {
    background: #555;
    color: white;
    padding: 10px;
    border-radius: 5px;
    flex: 1;
}

.btn-minus {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 40px;
}

/* Todos los controles de partida son iconos en la cabecera (.controls-top
   más abajo), siempre visibles — también mientras se graba, a propósito:
   antes había una barra inferior con botones grandes (con texto) que se
   ocultaba entera al grabar más una pestaña para revelarla; se sustituyó
   por este juego de iconos, lo bastante pequeño como para no hacer falta
   ocultarlo nunca. */
.icon-btn {
    background: transparent;
    /* Los <button> no heredan el color: white del body por defecto (el
       user-agent stylesheet les da su propio "buttontext", normalmente
       negro) — sin esto, iconos que no son emoji a todo color (como ⛶/🗗)
       quedan invisibles sobre el fondo oscuro. */
    color: white;
    font-size: 1.5rem;
    padding: 5px;
}

.icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Terminar Partida: rojo, para que se lea como una acción distinta
   (irreversible) del resto de iconos de la cabecera. */
.end-match-icon-btn {
    color: #e74c3c;
}

.hidden {
    display: none !important;
}

/* Barra de aviso fija y ancha, compartida por los avisos de fallo del
   MediaRecorder (ver TODO #19) y de fallo al guardar la partida en
   IndexedDB (ver TODO #18). No se autodesvanece: se queda hasta que se
   cierra a mano con la ×. Vive fuera de #app-overlay (ver index.html), así
   que se ve siempre, más crítico que cualquier otro control en pantalla.
   z-index por encima incluso de los modales (100): es más crítico que
   cualquier otra cosa en pantalla. */
.fixed-warning-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    background: var(--accent);
    color: white;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.fixed-warning-bar-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Pantalla de Nueva Partida (punto 34): pantalla propia, no un modal
   superpuesto — mismo z-index y centrado que #home-screen (por encima del
   marcador, por debajo de Estadísticas/Ayuda/Configuración, que se siguen
   abriendo igual encima si hiciera falta). Solo el Home y esta pantalla
   compiten por ese z-index 50, y nunca están visibles los dos a la vez. */
.setup-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
}

.setup-screen.hidden {
    display: none !important;
}

.setup-panel {
    width: 900px;
    height: 600px;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid #444;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    border-radius: 12px;
}

.setup-header {
    background: #111;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.setup-header h2 {
    margin: 0;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-btn {
    background: none;
    font-size: 2rem;
    color: #888;
    padding: 0;
}

.close-btn:hover {
    color: white;
}

.setup-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Pie fijo: siempre visible, nunca dentro del área con scroll de
   .setup-body — así "Comenzar Partida" no requiere hacer scroll. */
.setup-footer {
    padding: 20px 30px;
    border-top: 1px solid #333;
    background: #1a1a1a;
}

/* Config Area */
.setup-config {
    flex: 1;
    min-height: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.setup-config h3 {
    margin-bottom: 25px;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    padding-bottom: 5px;
}

/* Divisores de sección (Partida/Jugadores/Modo de grabación, punto 39):
   separación extra respecto al contenido de la sección anterior — salvo
   la primera, que ya es lo primero que se ve en la pantalla. */
.setup-section-title {
    margin-top: 15px;
}

.config-grid > .setup-section-title:first-child {
    margin-top: 0;
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: auto;
}

.full-width {
    grid-column: 1 / -1;
}

.config-group label {
    display: block;
    color: #aaa;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Inputs & Widgets */
.player-inputs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.player-inputs input {
    padding: 12px;
    font-size: 1.1rem;
    background: #333;
    border: 1px solid #444;
    color: white;
    border-radius: 6px;
}

.player-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.player-input-row input {
    flex: 1;
    min-width: 0;
}

/* Selector rápido junto al input: elegir con un clic de la lista de
   jugadores ya usados, sin dejar de poder escribir un nombre nuevo. */
.player-picker {
    flex: 0 0 auto;
    max-width: 40%;
    padding: 12px;
    font-size: 0.95rem;
    background: #333;
    border: 1px solid #444;
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
}

.add-p3-btn {
    align-self: flex-start;
    background: #444;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Mismo fondo/borde/color que el resto de campos del formulario
   (.player-inputs input, .player-picker) — solo el tamaño (más grande,
   centrado) distingue a estos tres campos numéricos del resto. Antes
   tenían fondo/borde propios (#111, borde 2px, texto azul) que
   desentonaban con el estilo del resto de la pantalla. */
.big-input {
    width: 100%;
    padding: 15px;
    font-size: 1.5rem;
    text-align: center;
    background: #333;
    border: 1px solid #444;
    border-radius: 8px;
    color: white;
    font-weight: bold;
}

/* Campo deshabilitado por su checkbox (límites/tiempo por turno
   desactivados, ver bindLimitToggle() en app.js) — mismo tratamiento
   visual que .icon-btn:disabled, para que quede claro que no se puede
   editar sin tener que fijarse en el checkbox. */
.big-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Timer Toggle */
.time-control {
    display: flex;
    gap: 10px;
    align-items: center;
}

.toggle-switch {
    display: inline-block;
    flex-shrink: 0;
    width: 50px;
    height: 26px;
    background: #444;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
}

.toggle-switch input {
    display: none;
}

.toggle-switch .slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .slider {
    transform: translateX(24px);
    background: var(--primary);
}

.start-btn-big {
    width: 100%;
    padding: 20px;
    background: var(--primary);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.start-btn-big:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.mt-2 {
    margin-top: 10px;
}

/* Recording Controls */
.record-btn {
    color: #e74c3c;
}

.record-btn.recording {
    animation: pulse 1.5s infinite;
}

/* Icono de sincronización por partida (punto 9), en la tabla de Historial
   de Partidas de Estadísticas. */
.sync-ok {
    color: #2ecc71;
}

.sync-failed {
    color: #e74c3c;
}

.recorder-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 15px;
    background: rgba(255, 0, 0, 0.1);
    padding: 5px 10px;
    border-radius: 20px;
}

.rec-dot {
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
    display: inline-block;
}

.finalizing-indicator {
    font-size: 0.85rem;
    color: #f1c40f;
    margin-right: 15px;
}

/* Botones de uso técnico (developer), discretos frente a los controles
   normales del marcador para no confundir al usuario del club. */
.dev-btn {
    opacity: 0.35;
    font-size: 1.1rem;
}

.dev-btn:hover {
    opacity: 0.9;
}

/* Modal de Configuración */
.settings-content {
    width: 420px;
    max-width: 90%;
}

/* Espaciado entre opciones: este modal no usa .config-grid (con su
   gap:20px), así que sin esto los .config-group iban pegados unos a
   otros sin ningún hueco entre ellos — se notaba sobre todo entre
   "Elegir carpeta de fragmentos" y la opción siguiente, y entre el
   selector de idioma y la de debajo. */
.settings-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Mismo motivo y mismo arreglo que .settings-content .modal-body de
   arriba, para el formulario de "Subir a YouTube": sin este gap, cada
   .config-group solo tenía separación respecto a SU PROPIO campo (los 8px
   de margin-bottom de .config-group label), pero ninguna respecto al
   campo anterior — así que cada etiqueta ("Visibilidad", "Título"...)
   quedaba pegada al valor del campo de arriba en vez de al suyo propio
   justo debajo. No se usa el selector genérico ".modal-body" (como en
   Configuración, vía .settings-content) porque aquí las dos vistas del
   modal (formulario/progreso, ver #youtube-upload-form-view más abajo) son
   hermanas dentro de .modal-body y se alternan con .hidden — el gap tiene
   que ir en el propio formulario, no en el contenedor que las engloba a
   las dos. */
#youtube-upload-form-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Modal de Ayuda (max-height/scroll ya los da .modal-content/.modal-body).
   Mismo estilo de "barra azul" debajo que los títulos de sección de Nueva
   Partida (ver .setup-config h3 más arriba), pero a todo el ancho del
   modal en vez de solo el ancho del texto: en Nueva Partida los títulos
   son hijos directos de un contenedor grid, así que aunque su CSS diga
   display:inline-block el navegador los "blockifica" a ancho completo
   igualmente (regla del propio grid) — aquí no hay grid de por medio, así
   que hace falta decirlo explícitamente con display:block para que las
   dos pantallas lean igual. */
.help-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    /* Mismo tamaño que .setup-config h3, y sin color propio (blanco, el
       mismo por defecto que el resto del texto) — solo la línea de abajo
       va en azul, igual que en Nueva Partida. Antes también el texto iba
       en azul, así que no se leían igual. */
    font-size: 1.5rem;
    border-bottom: 2px solid var(--primary);
    display: block;
    padding-bottom: 5px;
}

.help-content h3:first-of-type {
    margin-top: 0;
}

.help-shortcuts td:first-child {
    white-space: nowrap;
    font-weight: bold;
    color: var(--primary);
}

kbd {
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Selector "label.toggle-row" (no solo ".toggle-row") a propósito: el
   elemento es siempre un <label>, y ".config-group label" (más arriba)
   tiene la misma especificidad que una clase sola — sin el tipo de
   elemento aquí, ese otro selector ganaba el empate por venir antes en
   el archivo y dejaba este display:flex sin efecto (display:block de
   vuelta) en cualquier toggle-row dentro de un .config-group, como el
   de "Iniciar el cronómetro automáticamente al comenzar". Sin ámbito a
   .config-group: los modales de aviso (conectar Google/YouTube) también
   usan .toggle-row fuera de uno, y sin este flex el texto y el
   interruptor quedaban desalineados igual (layout inline por defecto de
   <label>, en vez de fila centrada). */
label.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
    color: white;
}

/* Modales de aviso (conectar Google/YouTube): sin ancho fijo, el modal se
   ensancha para caber el párrafo de arriba, y con eso el
   justify-content:space-between de .toggle-row dejaba el interruptor muy
   lejos de una etiqueta corta ("No volver a preguntar"). Aquí el
   interruptor va pegado a la etiqueta en vez de al borde derecho.
   Selector "label.toggle-row.toggle-row-compact" (no solo
   ".toggle-row-compact") a propósito, mismo motivo que "label.toggle-row"
   más arriba: hace falta más especificidad que esa regla base para poder
   pisar su justify-content, y una sola clase (0,1,0) no le gana a
   "label.toggle-row" (0,1,1). */
label.toggle-row.toggle-row-compact {
    justify-content: flex-start;
}

.settings-hint {
    color: #888;
    font-size: 0.85rem;
    margin-top: 8px;
    line-height: 1.4;
}

.settings-folder-btn {
    margin-top: 10px;
    background: #333;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Botón "Cuenta de Google" (#btn-google-account) con sesión iniciada: el
   propio texto del botón cambia a "Cerrar sesión (email)" (ver
   updateLoginButtonUI() en app.js) — este verde confirma de un vistazo
   que hay sesión, sin tener que leer el texto entero. */
.settings-folder-btn.logged-in {
    color: #2ecc71;
}

/* Botón "Conectar cuenta de YouTube" (punto 10): color de marca de
   YouTube en vez del gris genérico de .settings-folder-btn — si no,
   pasaba desapercibido entre el resto de botones de Configuración. */
.youtube-btn {
    background: #ff0000;
    font-weight: bold;
}

.youtube-btn:hover {
    background: #d90000;
}

#settings-locale {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    background: #333;
    border: 1px solid #444;
    color: white;
    border-radius: 6px;
}

/* Modal de subida a YouTube (punto 10): mismos inputs de Configuración,
   a ancho completo. */
#youtube-upload-visibility,
#youtube-upload-title,
#youtube-upload-description {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    background: #333;
    border: 1px solid #444;
    color: white;
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 6px;
}

#youtube-upload-description {
    resize: vertical;
    font-family: inherit;
}

#youtube-upload-progress-bar {
    width: 100%;
    height: 18px;
    margin-top: 10px;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Modal Enhancements */
.wide {
    width: 800px;
    max-width: 90%;
}

/* Estructura común de todos los modales (estilo Bootstrap): cabecera fija
   con título + botón ×, cuerpo con scroll propio, pie fijo con acciones.
   Así ningún modal depende de la altura de su contenido ni oculta el
   botón de acción por falta de scroll. */
.modal-content {
    background: #1e1e1e;
    border-radius: 12px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #333;
}

.modal-header h2 {
    margin: 0;
}

.modal-body {
    padding: 20px 30px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    padding: 15px 30px;
    border-top: 1px solid #333;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    color: white;
}

th,
td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #444;
}

th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary);
}

tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.btn-primary {
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
}

/* Estadísticas: listado de partidas -> jugadores -> entradas (punto 7).
   Cada nivel es una fila normal de tabla que además navega al pulsarla. */
.stats-row-clickable {
    cursor: pointer;
}

/* Fila del botón "Borrar todo el historial", a la derecha del modal (el
   título ya lo da el <h2> de la cabecera del modal, no hace falta otro
   aquí). */
.stats-header-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Contenedor propio para la tabla de partidas: el scroll horizontal (la
   tabla es más ancha que el modal con todas sus columnas) queda dentro de
   esta capa, respetando los márgenes del modal — antes no existía este
   envoltorio y el scroll horizontal era el de .modal-body entero, así que
   arrastraba consigo el botón "Borrar todo el historial" de arriba en vez
   de dejarlo fijo. */
.stats-table-scroll {
    overflow-x: auto;
}

/* Mismo padding/radio/peso que .btn-primary a propósito: cuando los dos
   se emparejan en un modal-footer (Cancelar/Confirmar, No gracias/
   Conectar...), deben leerse como el mismo tipo de botón y solo cambiar
   de color — no un botón "grande" junto a uno "pequeño". */
.btn-secondary {
    background: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
}

.btn-secondary:hover {
    background: #444;
}

/* Separación respecto a la tabla de debajo, solo para los botones "←
   Partidas"/"← Jugadores" — puesto aquí en vez de en .btn-secondary
   directamente: ese margen desalineaba verticalmente los pares
   Cancelar/Confirmar de los modal-footer (el margin-bottom entraba en
   el cálculo de altura del flex item y el align-items:center del footer
   centraba las dos cajas, no los dos botones, corriendo uno 5px por
   encima del otro). */
.stats-view > .btn-secondary {
    margin-bottom: 10px;
}

/* Acciones destructivas (borrar partida/todo el historial): rojo, para
   distinguirlas del resto de botones secundarios grises. */
.btn-danger {
    background: #7a2418;
    color: #ffb4a8;
}

.btn-danger:hover {
    background: #922b1d;
}

/* Flecha de navegación al final de cada fila clicable de Estadísticas
   (punto 3d del TODO) — sin ella, nada en el diseño insinuaba que esas
   filas se podían pulsar. Puramente decorativa (aria-hidden en el <th> del
   HTML), no aporta información que no dé ya el cursor de .stats-row-clickable. */
.col-nav-arrow {
    width: 24px;
}

.row-nav-arrow {
    color: #666;
    font-size: 1.2rem;
    text-align: center;
}

.stats-row-clickable:hover .row-nav-arrow {
    color: var(--primary);
}

/* Botón "Subir a YouTube" / enlace "Ver vídeo" dentro de una celda de
   tabla (Estadísticas) — mismo aspecto que .btn-secondary/.youtube-btn
   pero más pequeño, para que quepa en una fila sin desbordarla. El <a>
   de "Ver vídeo" usa esta clase en vez de su aspecto de enlace azul por
   defecto (punto 3d): sigue siendo un <a target="_blank"> normal, solo
   cambia el estilo. */
.btn-table-action {
    display: inline-block;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn-table-action:hover {
    background: #444;
}

.btn-table-action.youtube-btn {
    background: #ff0000;
}

.btn-table-action.youtube-btn:hover {
    background: #d90000;
}

/* Botón de borrar una partida individual (columna Acciones). */
.btn-table-action.btn-danger {
    background: #7a2418;
    color: #ffb4a8;
}

.btn-table-action.btn-danger:hover {
    background: #922b1d;
}

/* Pantalla de bienvenida (Home, punto 3a): por encima del marcador
   (#app-overlay, z-index 1) pero por debajo de los modales (z-index 100)
   — así Estadísticas/Ayuda/Configuración se siguen abriendo igual encima,
   y al cerrarlos queda el Home visible debajo, en vez del marcador. */
.home-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
}

.home-screen.hidden {
    display: none !important;
}

.home-logo {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--primary);
    /* Splash: el logo entra grande y se reduce a su tamaño final — se
       reproduce en cada carga (decidido), no solo la primera vez. */
    animation: homeLogoIntro 1s ease forwards;
}

.home-logo-text {
    font-size: 2.6rem;
    font-weight: bold;
    letter-spacing: 4px;
}

@keyframes homeLogoIntro {
    0% {
        transform: scale(1.7);
    }

    55% {
        transform: scale(1.7);
    }

    100% {
        transform: scale(1);
    }
}

.home-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    opacity: 0;
    animation: homeActionsIntro 0.6s ease forwards;
    animation-delay: 0.65s;
}

@keyframes homeActionsIntro {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-logo,
    .home-actions {
        animation: none;
        opacity: 1;
    }
}

.home-btn {
    font-family: var(--font-stack);
    text-align: center;
}

.home-btn-primary {
    width: 320px;
    padding: 20px;
    background: var(--primary);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* Sin movimiento en hover a propósito (decidido): el cambio de color ya
   basta para confirmar el hover, el desplazamiento sobraba. */
.home-btn-primary:hover {
    background: #2980b9;
}

/* Estadísticas/Opciones/Ayuda/Enviar Feedback: mismo ancho y forma que
   "Nueva Partida", apilados uno debajo de otro — pero en gris, nunca
   azul, para que "Nueva Partida" se siga leyendo como la única acción
   principal del Home. Enviar Feedback usa esta misma clase (es un botón
   más de la lista, no un enlace aparte), aunque el elemento siga siendo
   un <a href="mailto:..."> por debajo. */
.home-btn-secondary {
    width: 320px;
    padding: 14px;
    background: #333;
    color: #ddd;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
}

.home-btn-secondary:hover {
    background: #444;
}

.home-lang-row {
    display: flex;
    gap: 12px;
}

.home-lang-btn {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 1.6rem;
    line-height: 1;
}

.home-lang-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}