:root {
    --bg-color: #000000;
    --menu-panel-bg: #1E241E;
    --menu-border: #343D34;
    --btn-primary-bg: #C5A059;
    --btn-primary-text: #000000;
    --btn-secondary-bg: #343D34;
    --text-bone: #F4F1DE;
    --input-bg: #151A15;
    --input-placeholder: rgba(244, 241, 222, 0.5);
    --error-color: #FF5E5B;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-bone);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.screen {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    text-align: center;
}

.hidden {
    display: none !important;
}

.panel {
    background-color: var(--menu-panel-bg);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--menu-border);
}

input, button {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    margin: 5px;
}

button {
    background-color: #88c0d0;
    color: #2e3440;
    cursor: pointer;
    font-weight: bold;
}

button:hover { background-color: #81a1c1; }

/* La mesa de juego */
.table {
    background-color: #26734d; /* Verde tapete */
    border: 10px solid #5c4033; /* Borde de madera */
    border-radius: 20px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

.player-area {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
}

.center-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.carta { display: inline-block; margin: 5px; cursor: pointer; transition: transform 0.2s; width: 80px; }
.carta img { width: 100%; border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); border: 2px solid transparent; }
.carta.seleccionada img { border-color: #ebcb8b; transform: translateY(-15px); box-shadow: 0 10px 15px rgba(235, 203, 139, 0.6); }

#action-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}


.turno-indicador {
    color: #ebcb8b;
    font-weight: bold;
    margin: 5px 0;
    font-size: 1.1em;
    animation: parpadeo 1.5s infinite;
}

@keyframes parpadeo {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

#betting-log {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

#betting-log p {
    margin: 5px 0;
    font-size: 1.2em;
}

.apuesta-grupo {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.apuesta-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

input[type="number"] {
    background-color: #4c566a;
    color: white;
    border: 1px solid #88c0d0;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
    width: 60px;
    font-weight: bold;
    font-size: 1.1em;
}

/* Marca de agua del creador */
.watermark {
    position: fixed;
    bottom: 10px;
    right: 15px;
    color: rgba(255, 255, 255, 0.2); /* Blanco muy transparente */
    font-size: 14px;
    font-weight: bold;
    pointer-events: none; /* Permite hacer clics a través del texto por si pisa un botón */
    z-index: 9999;
}

/* ========================================= */
/* LAYOUT Y RESPONSIVO (Móvil y Escritorio)  */
/* ========================================= */

body {
    margin: 0 !important; /* CRÍTICO: Elimina el margen por defecto que corta la pantalla en PC */
    padding: 0;
    overscroll-behavior-y: none; 
}

#game-screen:not(.hidden) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;      
    height: 100dvh;     
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px; /* Margen interior seguro para que nada toque los bordes */
}

#opponent-area, #my-area {
    flex-shrink: 0;
    width: 100%;
    max-width: 800px;     
    margin: 0 auto;       
}


/* Arreglo del scroll negativo para el menú principal */
#menu-screen:not(.hidden) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Obliga a empezar desde arriba */
    align-items: center;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto; /* Permite deslizar si el menú es muy largo */
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

/* El mismo truco del "muelle invisible" para centrar el menú si sobra espacio */
#menu-screen::before,
#menu-screen::after {
    content: "";
    margin: auto;
}

/* Evitamos que el panel central se aplaste */
#menu-screen .panel {
    flex-shrink: 0;
    width: 100%;
    max-width: 500px;
}


#center-table {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /*center*/
    align-items: center;
    min-height: 0; /* CRÍTICO: Permite que la tabla encoja en móviles y active el scroll interno */
    overflow-y: auto; 
    width: 100%;
    padding: 10px 0;
}

#center-table::before,
#center-table::after {
    content: "";
    margin: auto;
}

/* Hacemos que los botones se adapten como un puzzle si no caben en una línea */
#action-buttons, .panel-apuestas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 600px;
}

.cards-placeholder, #my-cards {
    display: flex !important;
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: 5px;
    width: 100%;
}

.carta {
    flex: 0 1 22%; 
    min-width: 0;
    max-width: 90px;
}

.carta img {
    width: 100%;
    height: auto;
    max-height: 15vh;
    object-fit: contain;
}

#turno-rival.hidden, #mi-turno.hidden {
    display: block !important;
    visibility: hidden; 
}

/* Ajustes para móviles. Lo que había aquí para el tanteador y los botones de la
   mesa (paddings y tamaños de letra con !important) lo pone ahora game.css, con
   su propio bloque responsivo; dejarlo sólo lo pisaba. */
@media screen and (max-width: 600px) {
    #center-table {
        padding: 5px 0 !important;
    }
}

/* Ampliación de cartas al pasar el ratón en ordenador */
@media screen and (min-width: 769px) {
    .cartas-ampliadas, .cartas-ampliadas-rival {
        z-index: 100;
        position: relative;
    }
    .cartas-ampliadas .carta, .cartas-ampliadas-rival .carta {
        position: relative;
        z-index: 100;
    }
    .cartas-ampliadas .carta {
        transform-origin: bottom center; /* Crecen hacia arriba para que el ratón no se salga de ellas */
    }
    .cartas-ampliadas-rival .carta {
        transform-origin: top center; /* Crecen hacia abajo para que no se corten por arriba */
    }
    .cartas-ampliadas .carta:nth-child(1), .cartas-ampliadas-rival .carta:nth-child(1) { transform: scale(1.6) translateX(-30px); }
    .cartas-ampliadas .carta:nth-child(2), .cartas-ampliadas-rival .carta:nth-child(2) { transform: scale(1.6) translateX(-10px); }
    .cartas-ampliadas .carta:nth-child(3), .cartas-ampliadas-rival .carta:nth-child(3) { transform: scale(1.6) translateX(10px); }
    .cartas-ampliadas .carta:nth-child(4), .cartas-ampliadas-rival .carta:nth-child(4) { transform: scale(1.6) translateX(30px); }
}

/* ========================================= */
/* TEMA "TAPETE PREMIUM" (MODALES ANTIGUOS)  */
/* ========================================= */
/* Estas reglas nacieron para uniformar los estilos en línea del HTML antiguo.
   Antes apuntaban a `div[id^="modal-"]`, que también casa con #modal-overlay y
   por tanto con TODO lo que hay dentro: sus !important se colaban en el diseño
   nuevo (menú, ventana de Jugar, clasificación y "Acerca de", que pinta
   static/menu.css). Ahora la lista de ventanas afectadas es explícita: sólo las
   que todavía no se han rediseñado. */

/* Sobrescribir fondos de modales y contenedores internos */
#modal-login, #modal-signup {
    background-color: var(--menu-panel-bg) !important;
    border-color: var(--menu-border) !important;
}

:is(#modal-login, #modal-signup, #modal-verify, #modal-forgot, #modal-reset,
    #modal-social, #modal-settings, #modal-tutorial) div[style*="border"] {
    border-color: var(--menu-border) !important;
}

/* Textos unificados (Evitamos pisar el color de game-screen) */
:is(#modal-login, #modal-signup, #modal-verify, #modal-forgot, #modal-reset,
    #modal-social, #modal-settings, #modal-tutorial) :is(h2, label, span, td, th) {
    color: var(--text-bone) !important;
}

/* Errores integrados con el color de Ko-fi para mantener coherencia */
#msg-login, #msg-signup {
    color: var(--error-color) !important;
}

/* Botones Primarios */
#btn-submit-login, #btn-submit-signup {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: none !important;
}
#btn-submit-login:hover, #btn-submit-signup:hover {
    background-color: #D6B575 !important;
}

/* Botones Secundarios */
#btn-logout, #btn-lang, .btn-cerrar-modal:not(.cm-close) {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--text-bone) !important;
    border: 1px solid var(--menu-border) !important;
}
#btn-logout:hover, #btn-lang:hover, .btn-cerrar-modal:not(.cm-close):hover {
    background-color: #424E42 !important;
}

/* Campos de Entrada */
:is(#modal-login, #modal-signup, #modal-verify, #modal-forgot, #modal-reset,
    #modal-social, #modal-settings, #modal-tutorial) input {
    background-color: var(--input-bg) !important;
    color: var(--text-bone) !important;
    border: 1px solid var(--menu-border) !important;
}
:is(#modal-login, #modal-signup, #modal-verify, #modal-forgot, #modal-reset,
    #modal-social, #modal-settings, #modal-tutorial) input::placeholder {
    color: var(--input-placeholder) !important;
}

/* Tablas (Leaderboard / Públicas) */
:is(#modal-login, #modal-signup, #modal-verify, #modal-forgot, #modal-reset,
    #modal-social, #modal-settings, #modal-tutorial) thead {
    background-color: var(--menu-border) !important;
}
:is(#modal-login, #modal-signup, #modal-verify, #modal-forgot, #modal-reset,
    #modal-social, #modal-settings, #modal-tutorial) :is(th, td) {
    border-bottom: 1px solid var(--menu-border) !important;
}

/* ========================================= */
/* ENTORNO DE PARTIDA                        */
/* ========================================= */
/* El aspecto de las dos mesas (1v1 y 2v2) vive ahora en static/game.css, que se
   carga después y sigue el mismo lenguaje visual que el menú. Aquí sólo queda
   lo que es de todos: la retícula (más arriba) y el giro del spinner. */

/* Reconexión: giro del spinner del overlay de pausa por caída de un jugador. */
@keyframes girar-reconexion {
    to { transform: rotate(360deg); }
}

/* ==========================================================
   Salida de partida y sustituciones
   Botón «✕» permanente en ambas mesas + overlays compartidos
   (confirmar salida / alguien se fue / buscando sustituto).
   ========================================================== */
/* Sitio del botón «✕» de abandonar: a la izquierda del de pantalla completa
   (fixed, right:15px) para que no se solapen. Su aspecto lo pone game.css. */
.btn-salir-mesa {
    position: fixed;
    top: 13px;
    right: 62px;
    z-index: 1000;
    line-height: 1;
    cursor: pointer;
}

.overlay-partida {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 24, 32, 0.88);
}
.overlay-partida.hidden { display: none; }

/* Caja y botonera del overlay: aquí sólo la colocación; los colores, la
   tipografía y el filete de oro los pone static/game.css. */
.acciones-overlay {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}
.acciones-overlay button {
    flex: 1 1 auto;
    cursor: pointer;
}

/* Fila de partida en curso con hueco libre, en las listas públicas. */
.fila-en-curso td { background-color: rgba(235, 203, 139, 0.08); }
.badge-en-curso {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #ebcb8b;
    color: #2e3440;
    font-size: 0.75em;
    font-weight: bold;
    vertical-align: middle;
}

/* ==========================================================
   Ventana de ajustes (idioma + cuenta)
   Vive dentro de #modal-overlay, como el resto de modales.
   ========================================================== */
#modal-settings {
    position: relative;
    background: #2e3440;
    border: 1px solid #4c566a;
    border-radius: 8px;
    padding: 26px 22px 20px 22px;
    width: 420px;
    max-width: 95vw;
    max-height: 85vh;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}
#modal-settings.hidden { display: none; }

#modal-settings h2 {
    color: #88c0d0;
    margin: 5px 0 16px 0;
    text-align: center;
}

.settings-cuerpo {
    overflow-y: auto;
    padding-right: 4px;
    text-align: left;
}

.settings-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #4c566a;
    border-radius: 6px;
    color: #eceff4;
}
.settings-fila-col {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.settings-fila label { font-size: 0.9em; color: #d8dee9; }
.settings-fila #btn-lang {
    background: #3b4252;
    border: 1px solid #d8dee9;
    color: #d8dee9;
    padding: 5px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.settings-resumen {
    margin: 0 0 14px 0;
    text-align: center;
    line-height: 1.5;
}
#settings-username {
    display: block;
    color: #ebcb8b;
    font-weight: bold;
    font-size: 1.15em;
}
.settings-nota {
    display: block;
    color: #d8dee9;
    opacity: 0.75;
    font-size: 0.82em;
    line-height: 1.45;
    margin: 6px 0;
}

/* Código público permanente (#A7K2QX). Se pincha para copiarlo. */
.settings-codigo {
    margin: 0 0 14px 0;
    text-align: center;
}
#settings-codigo {
    display: inline-block;
    font-family: monospace;
    font-size: 1.05em;
    letter-spacing: 1px;
    color: #88c0d0;
    background: #3b4252;
    border: 1px solid #4c566a;
    border-radius: 5px;
    padding: 3px 10px;
    cursor: pointer;
    user-select: all;
}
#settings-codigo:hover {
    border-color: #88c0d0;
}

.settings-seccion {
    border: 1px solid #4c566a;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
}
.settings-seccion > summary {
    padding: 11px 12px;
    cursor: pointer;
    color: #eceff4;
    font-size: 0.95em;
    list-style: none;
    user-select: none;
}
.settings-seccion > summary::-webkit-details-marker { display: none; }
.settings-seccion > summary::after {
    content: '▾';
    float: right;
    opacity: 0.6;
    transition: 0.2s;
}
.settings-seccion[open] > summary::after { transform: rotate(180deg); }
.settings-seccion > summary:hover { background: #3b4252; }
.settings-seccion.peligro > summary { color: #bf616a; }

.settings-panel {
    padding: 4px 12px 14px 12px;
    border-top: 1px solid #4c566a;
}
.settings-panel input[type="text"],
.settings-panel input[type="email"],
.settings-panel input[type="password"],
#settings-nombre-invitado {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 9px;
    font-size: 0.95em;
    background: #3b4252;
    color: white;
    border: 1px solid #4c566a;
    border-radius: 4px;
}
.settings-panel button {
    width: 100%;
    padding: 9px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.95em;
    cursor: pointer;
    margin-top: 4px;
}
.settings-panel button:hover { filter: brightness(1.12); }
.settings-panel button:disabled { opacity: 0.5; cursor: default; }

.settings-panel .btn-ok      { background: #a3be8c; color: #2e3440; }
.settings-panel .btn-peligro { background: #bf616a; color: #eceff4; }

.settings-msg {
    margin: 10px 0 0 0;
    font-size: 0.86em;
    font-weight: bold;
    color: #bf616a;
    min-height: 1em;
}
.settings-msg.ok { color: #a3be8c; }

.credencial-link {
    display: inline-block;
    margin: 2px 0 4px 0;
    color: #88c0d0;
    font-size: 0.8em;
    text-decoration: underline;
    cursor: pointer;
}

.settings-acciones {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 6px;
}
.settings-acciones button {
    flex: 1 1 auto;
    padding: 9px 14px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}
.settings-acciones .btn-ok     { background: #a3be8c; color: #2e3440; }
.settings-acciones .btn-neutro { background: #4c566a; color: #eceff4; }
.settings-acciones button:hover { filter: brightness(1.12); }

/* ==========================================================================
   SOPORTE Y AVISOS DEL ADMINISTRADOR (Roadmap #13)
   Estilos del buzón de soporte dentro de Ajustes y de los mensajes fijados
   que el administrador cuelga en el menú principal.
   ========================================================================== */

.settings-panel select,
.settings-panel textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    padding: 9px;
    font-size: 0.95em;
    font-family: inherit;
    background: #3b4252;
    color: white;
    border: 1px solid #4c566a;
    border-radius: 4px;
    resize: vertical;
}
.settings-panel .btn-neutro { background: #4c566a; color: #eceff4; }

/* Enlace al panel de administración (solo lo ve una cuenta con is_admin). */
#settings-fila-admin { justify-content: center; }
#settings-link-admin {
    color: #b48ead;
    font-weight: bold;
    font-size: 0.92em;
    text-decoration: none;
    border: 1px solid #b48ead;
    border-radius: 5px;
    padding: 6px 14px;
}
#settings-link-admin:hover { background: rgba(180, 142, 173, 0.15); }

/* Contador de respuestas de soporte sin leer, sobre el botón ⚙ del menú. */
#settings-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: #bf616a;
    color: white;
    border-radius: 50%;
    min-width: 17px;
    height: 17px;
    font-size: 0.65em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* --- Lista de incidencias del jugador --- */
.soporte-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 6px 0;
    padding: 9px 10px;
    background: #3b4252;
    border: 1px solid #4c566a;
    border-radius: 5px;
    color: #eceff4;
    font-size: 0.9em;
    text-align: left;
    cursor: pointer;
}
.soporte-fila:hover { background: #434c5e; }
.soporte-asunto {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soporte-estado {
    font-size: 0.78em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.soporte-estado.abierto    { background: #ebcb8b; color: #2e3440; }
.soporte-estado.respondido { background: #88c0d0; color: #2e3440; }
.soporte-estado.resuelto   { background: #4c566a; color: #d8dee9; }
.soporte-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #bf616a;
    flex: 0 0 auto;
}

/* --- Conversación con el administrador --- */
#soporte-hilo-titulo { margin: 10px 0 6px 0; color: #88c0d0; font-size: 1em; }
#soporte-hilo-mensajes {
    max-height: 240px;
    overflow-y: auto;
    background: #2e3440;
    border: 1px solid #4c566a;
    border-radius: 5px;
    padding: 10px;
}
.soporte-burbuja {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.88em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 88%;
}
.soporte-burbuja.user  { background: #434c5e; }
.soporte-burbuja.admin { background: #5e81ac; margin-left: auto; }
.soporte-meta {
    display: block;
    font-size: 0.75em;
    opacity: 0.7;
    margin-bottom: 3px;
}

/* --- Mensajes fijados en el menú principal --- */
#anuncios-fijados { width: 100%; max-width: 520px; margin: 0 auto 16px auto; }
.anuncio-fijado {
    background: #3b4252;
    border: 1px solid #ebcb8b;
    border-left: 4px solid #ebcb8b;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 10px;
    text-align: left;
}
.anuncio-fijado.mantenimiento {
    border-color: #bf616a;
    border-left-color: #bf616a;
    background: rgba(191, 97, 106, 0.12);
}
.anuncio-fijado h4 {
    margin: 0 0 5px 0;
    color: #ebcb8b;
    font-size: 0.98em;
}
.anuncio-fijado.mantenimiento h4 { color: #bf616a; }
.anuncio-fijado p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.5;
    color: #d8dee9;
    white-space: pre-wrap;
}