/* --- ESTÉTICA GLOBAL --- */
html, body {
    background-color: #f7f9fb;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #4a4a4a;
    margin: 0;
    padding: 0;
    height: 100%;
}

body.ice-mode {
    background-color: #e0f7fa !important;
    box-shadow: inset 0 0 100px #00bcd4;
}

/* NAVBAR GLOBAL */
.navbar {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: space-around;
    padding: 10px 5px;
    background: white;
    border-bottom: 1px solid #eaeaea;
    margin: 0 auto;
}

.navbar a {
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 0.2s;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.navbar a span { font-size: 1.4rem; margin-bottom: 2px; }
.navbar a.active { color: #1565c0; background: #e3f2fd; }

.container { max-width: 500px; width: 100%; text-align: center; padding: 20px; box-sizing: border-box; margin: 0 auto; }
#pantalla-como-jugar { max-width: 650px !important; }

/* ✨ APP LAYOUT PARA BLOQUEAR LA PANTALLA ✨ */
.app-layout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: #f7f9fb;
    display: flex;
    flex-direction: column;
    z-index: 2000;
}

body.ice-mode .app-layout {
    background-color: #e0f7fa;
}

/* BLOQUE 1: CABECERA INAMOVIBLE */
.cabecera-juego {
    flex-shrink: 0;
    text-align: center;
    padding: 15px 10px;
    border-bottom: 2px dashed #cfd8dc;
    background-color: transparent;
}

body.ice-mode .cabecera-juego { border-bottom-color: #80deea; }

/* BLOQUE 2: ZONA MEDIA (LA ÚNICA QUE HACE SCROLL) */
.zona-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
}

.contenido-centrado {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.caja-escritura {
    background: #ffffff;
    padding: 20px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* BOTONES UI BLINDADOS */
button { font-family: inherit; border: none; border-radius: 12px; padding: 15px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; }
button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.05); }
button:active:not(:disabled) { transform: scale(0.95); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-jugar { width: 100%; padding: 18px; font-size: 1.1rem; margin-bottom: 15px; }
.btn-casual { background: #e3f2fd; color: #1565c0; border: 2px solid #bbdefb !important; }
.btn-ranked { background: linear-gradient(135deg, #ff9800, #ff5722); color: white; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3); }
.btn-disabled { background: #eeeeee; color: #999; cursor: not-allowed; box-shadow: none; border: none; }

/* 🔥 FIX: REDISEÑO DE BOTÓN RENDIRSE PARA EVITAR CONFUSIONES 🔥 */
#btn-rendirse {
    background-color: #ffebee !important; 
    color: #c62828 !important; 
    border: 2px solid #ef5350 !important; 
    font-weight: 900 !important; 
    text-transform: uppercase !important;
    letter-spacing: 1px;
}

/* JUEGO: FEEDBACK */
.shake { animation: shake 0.4s both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

.pulse-clock { animation: clockBeat 0.8s infinite alternate; color: #ff1744 !important; text-shadow: 0 0 10px rgba(255, 23, 68, 0.5); }
@keyframes clockBeat { from { transform: scale(1); } to { transform: scale(1.15); } }

/* ESTRUCTURAS SECUNDARIAS */
.jugador-fila { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }

.progress-container { width: 100%; background-color: #ddd; border-radius: 10px; height: 12px; margin-top: 10px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a); width: 0%; transition: width 1s ease-in-out; }
.progress-text { font-size: 0.75rem; color: #555; margin-top: 5px; display: block; font-weight: bold; }

.tut-box { background: #f9f9f9; padding: 20px; border-radius: 15px; margin-bottom: 15px; border: 1px solid #eee; text-align: left; }
.tut-box h3 { margin-top: 0; color: #1565c0; font-size: 1.1rem; }
.tabla-rangos { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.82rem; background: white; border-radius: 8px; overflow: hidden; border: 1px solid #eee; }
.tabla-rangos th, .tabla-rangos td { padding: 10px 5px; text-align: center; border-bottom: 1px solid #eee; }

/* ✨ PISTAS EN FORMATO PASTILLA GLOBAL ✨ */
#pistas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
}

.pista-card {
    background-color: #ffffff; 
    padding: 8px 16px; 
    margin: 0; 
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    border-left: 4px solid #b2dfdb; 
    font-weight: bold; 
    text-align: center;
    display: inline-block; 
    width: auto;
    font-size: 0.95rem;
    animation: slideInClue 0.4s forwards;
}

@keyframes slideInClue { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* 🔥 CAJAS DE AHORCADO DINÁMICAS 🔥 */
#palabra-cajas-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}

.palabra-grupo {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: 4px;
    width: 100%;
    max-width: 100%;
}

.caja-letra {
    flex: 0 1 45px;
    min-width: 0 !important;
    width: 100%;
    aspect-ratio: 3/4;
    height: auto !important;
    font-size: clamp(1rem, 5vw, 1.8rem) !important;
    text-align: center;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    border-radius: 6px;
    border: 2px solid #b0bec5;
    background: #fff;
    color: #1565c0;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
    font-family: inherit;
}

.caja-letra:focus { border-color: #ff9800 !important; box-shadow: 0 0 8px rgba(255, 152, 0, 0.4) !important; transform: translateY(-2px); background-color: #fff3e0; }
.caja-letra:read-only { cursor: not-allowed; }

/* 🔥 FIX: NUEVAS CLASES PARA COLORES DE VICTORIA/DERROTA CORRECTOS 🔥 */
.caja-revelada { background-color: #fff8e1 !important; border-color: #ffca28 !important; color: #f57f17 !important; animation: popElemento 0.4s ease; pointer-events: none; }
.caja-victoria { background-color: #e8f5e9 !important; border-color: #4caf50 !important; color: #2e7d32 !important; animation: popElemento 0.4s ease; pointer-events: none; }
.caja-derrota { background-color: #ffebee !important; border-color: #e53935 !important; color: #c62828 !important; animation: popElemento 0.4s ease; pointer-events: none; }

.intento-tag { display: inline-block; padding: 8px 12px; border-radius: 8px; margin: 4px; background-color: #ffebee; border-left: 4px solid #f44336; color: #c62828; font-weight: bold; text-transform: uppercase; font-size: 0.9rem; }

/* --- ANIMACIONES PREMIUM DE BONOS --- */
.contenedor-bonos { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 15px 0; }
.popup-bono { padding: 10px 20px; border-radius: 12px; font-weight: bold; font-size: 1.1rem; display: inline-block; text-align: center; }
.ticket-animacion { background: linear-gradient(45deg, #FFD700, #FF8C00); color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); animation: popElemento 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, brilloTicket 2s infinite alternate; }
.on-fire { color: #ff5722; font-weight: bold; text-shadow: 0 2px 4px rgba(255, 87, 34, 0.4); animation: fireFlicker 1s infinite alternate; }

@keyframes brilloTicket { 0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); } 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 10px rgba(255, 140, 0, 0.8); } }
@keyframes popElemento { 0% { transform: scale(0) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes fireFlicker { 0% { text-shadow: 0 0 5px #ff5722; } 100% { text-shadow: 0 0 15px #ffeb3b, 0 0 25px #ff9800; } }

/* --- MEDALLAS GLOBALES --- */
.medal-gold {
    background: linear-gradient(90deg, #fffdf0, #fff8c4) !important;
    border-left: 5px solid #fbc02d !important;
    box-shadow: 0 0 12px rgba(251, 192, 45, 0.6) !important;
    animation: glowGold 2s infinite alternate;
    border-radius: 8px;
    padding: 12px 10px !important;
    margin-bottom: 5px;
}
.medal-silver {
    background: linear-gradient(90deg, #fafafa, #f5f5f5) !important;
    border-left: 5px solid #9e9e9e !important;
    box-shadow: 0 0 10px rgba(158, 158, 158, 0.4) !important;
    border-radius: 8px;
    padding: 12px 10px !important;
    margin-bottom: 5px;
}
.medal-bronze {
    background: linear-gradient(90deg, #fff6f0, #efebe9) !important;
    border-left: 5px solid #d84315 !important;
    box-shadow: 0 0 10px rgba(216, 67, 21, 0.3) !important;
    border-radius: 8px;
    padding: 12px 10px !important;
    margin-bottom: 5px;
}

@keyframes glowGold {
    from { box-shadow: 0 0 5px rgba(251, 192, 45, 0.4); }
    to { box-shadow: 0 0 20px rgba(251, 192, 45, 0.9); }
}

/* --- TECLADO VIRTUAL FIJO AL FONDO DEL FLEX --- */
#teclado-virtual {
    flex-shrink: 0;
    width: 100%;
    background-color: #d1d5db;
    padding: 10px 4px calc(15px + env(safe-area-inset-bottom, 0px)) 4px; 
    display: none; 
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.fila-teclado { display: flex; justify-content: center; gap: 4px; }
.tecla {
    background-color: #f8f9fa; border: none; border-radius: 6px; font-weight: bold; font-size: 1.1rem; color: #37474f; cursor: pointer; height: 50px; flex: 1; display: flex; align-items: center; justify-content: center; touch-action: manipulation; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.tecla:active { transform: scale(0.92); background-color: #b0bec5; box-shadow: none; }
.tecla.accion { flex: 1.5; font-size: 0.85rem; background-color: #9ca3af; color: white; }

/* --- RESPONSIVE MÓVIL --- */
@media screen and (max-width: 600px) {
    #timer-container { font-size: 1.4rem !important; margin-bottom: 2px !important; }
    #tematica-display { font-size: 0.9rem !important; }
    
    .pista-card { font-size: 0.85rem !important; padding: 6px 12px !important; }

    #mercado-negro { margin-top: 5px !important; margin-bottom: 5px !important; gap: 5px !important; width: 100%; }
    #mercado-negro button { flex: 1 1 48% !important; padding: 10px 4px !important; font-size: 0.75rem !important; border-radius: 8px !important; }

    .caja-escritura { padding: 12px 8px !important; margin-bottom: 5px !important; }
    
    #btn-adivinar { display: none !important; } 
    #btn-rendirse { flex: 1 !important; width: 100%; padding: 12px !important; margin-top: 10px !important; }

    .intento-tag { padding: 4px 8px !important; font-size: 0.75rem !important; margin: 2px !important; border-radius: 12px !important; }
    
    #teclado-virtual.activo { display: flex !important; }
    .tecla { height: 55px !important; font-size: 1.2rem !important; }
}

/* ==========================================
   📱 MENÚ INFERIOR EXCLUSIVO PARA MÓVILES
   ========================================== */
@media (max-width: 768px) {
    body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
    
    .navbar {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.08);
        z-index: 9999;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .navbar a { width: 16.66% !important; font-size: 0.65rem !important; padding: 8px 2px !important; }
    .navbar a span { font-size: 1.3rem !important; margin-bottom: 3px !important; }
}

/* ========================================================
   📱 SOLUCIÓN RESPONSIVE PARA IPHONE Y PANTALLAS CHICAS
   ======================================================== */
body, html { min-height: -webkit-fill-available; }
body { min-height: 100dvh; }

#pantalla-juego {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 80px !important; 
}

#tematica-display, 
#mercado-negro, 
#timer-container,
.palabra-grupo {
    flex-shrink: 0 !important; 
    z-index: 10;
}

@media screen and (max-width: 430px) {
    #mercado-negro button { padding: 8px 4px !important; font-size: 0.75rem !important; }
    #timer-container { font-size: 1.2rem !important; }
}

/* ========================================================
   🎨 SISTEMA DE ALERTAS Y CARGA PROFESIONAL
   ======================================================== */
#loader-global {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    z-index: 10000;
}
.spinner {
    width: 50px; height: 50px;
    border: 5px solid #e0e0e0; border-top: 5px solid #1565c0;
    border-radius: 50%;
    animation: girar 1s linear infinite;
    margin-bottom: 15px;
}
@keyframes girar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#modal-alerta-global {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    z-index: 10001; animation: fadeIn 0.2s ease;
}
.modal-caja {
    background: white; padding: 25px 20px; border-radius: 16px;
    text-align: center; width: 85%; max-width: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: popUp 0.3s ease;
}
.modal-caja h3 { margin: 0 0 10px 0; font-size: 1.4rem; }
.modal-caja p { color: #555; font-size: 1rem; margin-bottom: 20px; line-height: 1.4; }
.btn-modal { width: 100%; padding: 12px; border: none; border-radius: 8px; font-weight: bold; font-size: 1.05rem; cursor: pointer; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popUp { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#toast-container {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: #323232; color: white; padding: 12px 24px; border-radius: 25px;
    font-size: 0.9rem; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10002; display: none; opacity: 0; transition: opacity 0.3s;
}

/* ========================================================
   💻 OCULTAR TECLADO VIRTUAL EN PC
   ======================================================== */
@media screen and (min-width: 801px) {
    #teclado-virtual { display: none !important; }
}