/* ==================== RESET & GLOBALES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(145deg, #1a472a 0%, #0e2a1a 100%);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* ==================== OVERLAY DE LOGIN (DOS COLUMNAS) ==================== */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* flex-start para que no quede cortado en pantallas bajas */
    overflow-y: auto;           /* permite scroll si la tarjeta es más alta que la pantalla */
    padding: 1.5rem 0;
}

.login-card {
    background: #2c2c2e;
    border-radius: 2rem;
    width: 90%;
    max-width: 1000px;
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.login-header {
    display: flex;
    flex-direction: row;         /* siempre horizontal, nunca colapsa */
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: #ffd966;
}

.login-header h2 {
    font-size: 1.6rem;
    font-weight: bold;
    flex: 1;                     /* ocupa todo el ancho disponible */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-icon {
    font-size: 1.3rem;
    cursor: pointer;
    background: #2563eb;         /* azul como en la imagen 2 */
    color: white;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;          /* rectangular con esquinas redondeadas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;              /* no se encoge */
    transition: background 0.15s;
}
.info-icon:hover { background: #1d4ed8; }

/* Layout de dos columnas */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.login-panel, .register-panel {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 1.5rem;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-panel h3, .register-panel h3 {
    color: #ffd966;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    text-align: center;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    color: #ddd;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: #1c1c1e;
    border-radius: 2rem;
    border: 1px solid #444;
    transition: all 0.2s;
}

.input-wrapper:focus-within {
    border-color: #ffd966;
    box-shadow: 0 0 5px rgba(255, 217, 102, 0.5);
}

.input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 1rem;
    outline: none;
}

.input-wrapper .toggle-pwd {
    padding: 0 0.8rem;
    cursor: pointer;
    font-size: 1.2rem;
    user-select: none;
}

.btn-primary {
    width: 100%;
    background: #ffd966;
    border: none;
    padding: 0.75rem;
    border-radius: 2rem;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
    color: #1a2a1a;
    margin-top: 0.5rem;
}

.btn-primary:hover {
    background: #ffcd38;
    transform: scale(0.98);
}

.error-msg {
    color: #ffaaaa;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    text-align: center;
}

/* Lista de usuarios */
.users-section {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 1rem;
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    color: #ffd966;
    font-weight: bold;
}

.refresh-btn {
    background: none;
    border: none;
    color: #ffd966;
    font-size: 1.3rem;
    cursor: pointer;
}

.user-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.3rem 0;
}

.user-btn {
    background: #3a3a3c;
    border: none;
    border-radius: 2rem;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: 0.1s;
    color: white;
}

.user-btn:hover {
    background: #ffd966;
    color: #1a2a1a;
}

.user-avatar {
    background: #ffd966;
    color: #1a2a1a;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Responsive: en móvil (teléfono) se apilan las columnas */
@media (max-width: 560px) {
    .two-col-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .login-card {
        width: 95%;
        padding: 1rem;
    }
    .user-list {
        max-height: 150px;
    }
    .login-header h2 {
        font-size: 1.2rem;
    }
}

/* ==================== CONTENEDOR DEL JUEGO ==================== */
.game-container {
    display: none;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.game-wrap {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2rem;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

/* Estadísticas superiores */
.stats-bar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: #1e2a1a;
    padding: 0.8rem 1.2rem;
    border-radius: 3rem;
    margin-bottom: 1rem;
    color: white;
}

.stat-item {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.stat-label {
    color: #ffd966;
}

.stat-value {
    font-weight: bold;
}

/* Mano de la IA */
.ai-area {
    background: #1a2a1a;
    border-radius: 1.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ai-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    min-height: 90px;
}

/* Tablero */
.board-area {
    background: #0f1a0f;
    border-radius: 1.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.board-empty {
    text-align: center;
    color: #aaa;
    padding: 2rem;
}

.board-scroll {
    padding-bottom: 0.5rem;
}

.board-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    align-items: center;
}

/* Mano del humano */
.player-area {
    background: #1a2a1a;
    border-radius: 1.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.player-hand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    min-height: 110px;
}

/* Fichas verticales (mano) */
.tile {
    width: 60px;
    background: #f5f5f0;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: 0.1s;
}

.tile:hover {
    transform: translateY(-4px);
}

.tile-selected {
    box-shadow: 0 0 0 3px #ffd966, 0 0 0 6px #ffb347;
}

.tile-valid {
    box-shadow: 0 0 0 2px #22c55e;
}

.tile-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.4rem;
}

.divider {
    height: 2px;
    background: #aaa;
}

/* Fichas horizontales (tablero) */
.tile-board {
    background: #f5f5f0;
    border-radius: 8px;
    display: inline-flex;
    width: 55px;
    height: 32px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.half-board {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.extremo-highlight {
    box-shadow: 0 0 0 2px #ffd966;
    cursor: pointer;
}

.double-vertical {
    flex-direction: column;
    width: 32px;
    height: 55px;
}

/* Botones de control */
.control-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin: 1rem 0;
}

.btn {
    background: #2c3e2b;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 2rem;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.1s;
}

.btn-gold {
    background: #ffd966;
    color: #1a2a1a;
}

.btn-red {
    background: #c2410c;
}

.btn:hover {
    transform: scale(0.97);
}

/* Indicador de turno */
.turn-pill {
    text-align: center;
    background: #2c3e2b;
    padding: 0.5rem;
    border-radius: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.turn-human {
    background: #ffd966;
    color: #1a2a1a;
}

.turn-ai {
    background: #3b82f6;
}

/* Mensajes */
.msg-box {
    background: rgba(0,0,0,0.7);
    border-radius: 1rem;
    padding: 0.8rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: #ffd966;
}

/* Overlays de celebración */
.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s;
}

.celebration-card {
    background: #1e2a1a;
    padding: 2rem;
    border-radius: 2rem;
    text-align: center;
    font-size: 1.8rem;
    color: #ffd966;
    border: 2px solid gold;
    min-width: 280px;
}

.victory-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1500;
    animation: flashAnim 0.5s;
}

.flash-red {
    background: radial-gradient(circle, rgba(255,0,0,0.4), transparent);
}

.flash-blue {
    background: radial-gradient(circle, rgba(0,100,255,0.4), transparent);
}

/* Animaciones */
@keyframes popIn {
    0% { transform: scale(0.2); opacity: 0; }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Scrollbar */
::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #1a2a1a;
}
::-webkit-scrollbar-thumb {
    background: #ffd966;
    border-radius: 10px;
}
/* ==================== CLASES DE JUEGO (complemento al CSS nuevo) ==================== */
.header { background:rgba(0,0,0,0.55); border-radius:1.5rem; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:0.8rem; }
.header-left { display:flex; align-items:center; gap:10px; }
.header-right { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.help-icon, .current-user-badge, .gen-date { background:rgba(0,0,0,0.4); padding:5px 10px; border-radius:40px; font-size:0.8rem; color:#ffd966; cursor:pointer; }
.log-date-selector { display:flex; gap:6px; align-items:center; }
.log-date-selector input[type="date"] { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:40px; padding:6px 10px; color:white; font-size:0.78rem; }
.difficulty-panel { background:rgba(0,0,0,0.35); padding:8px 16px; border-radius:1.5rem; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:0.82rem; color:#eee; margin-bottom:0.8rem; }
.difficulty-panel label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.info-badge { background:rgba(0,0,0,0.4); padding:3px 8px; border-radius:40px; font-size:0.8rem; cursor:pointer; }
.score-bar { background:rgba(0,0,0,0.45); border-radius:1.5rem; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:0.8rem; }
.scores { display:flex; gap:10px; flex-wrap:wrap; }
.score-pill { background:rgba(0,0,0,0.5); border-radius:40px; padding:5px 12px; font-size:0.85rem; font-weight:bold; cursor:pointer; color:#eee; }
.score-pill .val { color:#ffd966; font-size:1rem; margin-left:3px; }
.turn-wait { background:#475569; color:white; }
.area-title { font-size:0.88rem; font-weight:bold; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; color:#ffd966; }
.area-stats, .last-badge { background:rgba(0,0,0,0.4); padding:3px 10px; border-radius:40px; font-size:0.72rem; color:#ddd; font-weight:normal; }
.hand-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:80px; align-items:center; }
.tile-back { width:48px; height:72px; border-radius:10px; background:linear-gradient(145deg,#2a7a4a,#1b5e32); display:flex; align-items:center; justify-content:center; font-size:20px; color:rgba(255,255,255,0.3); box-shadow:0 4px 0 #0a2f1f; border:1px solid rgba(255,255,255,0.2); }
.tile-forced { box-shadow:0 0 0 2px #ffd966,0 4px 0 #6b4226; }
.board-section { background:rgba(0,0,0,0.45); border-radius:1.5rem; padding:12px; border:2px solid #c49a5c; margin-bottom:0.8rem; }
.extremo-highlight { border:2px solid #ffd966 !important; box-shadow:0 0 8px gold; cursor:pointer; }
.side-hint { text-align:center; font-size:0.8rem; color:#ffd966; font-weight:bold; margin-top:8px; display:none; }
.side-hint.visible { display:block; }
.extremo-badge { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; font-size:1.1rem; font-weight:bold; color:white; background:#333; box-shadow:0 2px 5px rgba(0,0,0,0.3); margin:0 3px; }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:rgba(0,0,0,0.4); border-radius:1.5rem; padding:10px 14px; margin-bottom:0.8rem; }
.pile-badge { background:rgba(0,0,0,0.5); padding:8px 14px; border-radius:40px; font-size:0.88rem; color:#eee; white-space:nowrap; }
.message-box { flex:1; background:rgba(255,215,0,0.12); border:1px solid rgba(255,215,0,0.35); border-radius:1rem; padding:8px 12px; font-size:0.82rem; font-weight:bold; line-height:1.45; color:#ffd966; min-width:0; }
.next-hand-sticky { position:sticky; bottom:10px; background:rgba(0,0,0,0.75); backdrop-filter:blur(12px); border-radius:60px; padding:6px; margin-top:8px; margin-bottom:20px; z-index:100; width:100%; }
.btn-next { background:white; color:#1a2a1a; border-radius:60px; padding:16px 24px; width:100%; border:none; font-size:1.1rem; font-weight:bold; cursor:pointer; min-height:56px; transition:0.1s; }
.btn-next:active { transform:scale(0.98); }
.feedback-section { background:rgba(0,0,0,0.35); border-radius:1rem; padding:10px 16px; margin-top:8px; cursor:pointer; display:flex; justify-content:space-between; font-size:0.8rem; color:rgba(255,255,255,0.65); }
.feedback-content { display:none; background:rgba(0,0,0,0.6); border-radius:1rem; padding:12px; margin-top:8px; }
.feedback-content.open { display:block; }
.feedback-content textarea { width:100%; background:#fef7e0; border:none; border-radius:1rem; padding:12px; font-family:inherit; font-size:0.9rem; margin-bottom:8px; }
.btn-blue { background:#3b82f6; color:white; }
.btn-slate { background:#475569; color:white; }
.btn-sm { padding:6px 12px !important; font-size:0.82rem !important; min-height:unset !important; }
.empty-users-msg { text-align:center; font-size:0.75rem; opacity:0.6; margin-top:8px; color:white; }
@media (max-width:550px) { .score-pill { font-size:0.72rem; padding:4px 8px; } .tile { width:44px; } }