/* ===== ESTILOS PARA LA UI DE GEMAS ===== */

.gemas-ui-container {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #FFB7CE 0%, #FF9AA2 100%);
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    font-family: 'Fredoka One', 'Varela Round', 'Outfit', sans-serif;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 10px;
    vertical-align: middle;
}

.gemas-ui-icon {
    margin-right: 8px;
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.gemas-counter-text {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Modal for Ads (Cuando se quedan sin gemas) */
#gemas-ad-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: none; /* Flex when active */
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.gemas-ad-content {
    background: white;
    padding: 40px;
    border-radius: 25px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.gemas-ad-content h2 {
    color: #FF6B6B;
    font-family: 'Fredoka One', 'Outfit', sans-serif;
    margin-bottom: 15px;
}

.gemas-ad-content p {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

#btn-ver-video-gemas {
    background: linear-gradient(135deg, #4ECDC4 0%, #30A49C 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
    transition: transform 0.2s;
    font-family: 'Fredoka One', 'Outfit', sans-serif;
}

#btn-ver-video-gemas:hover {
    transform: scale(1.05);
}

.close-gemas-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    background: none;
    border: none;
}
.close-gemas-modal:hover {
    color: #555;
}

/* Modal Interno para Anuncios (Iframe) */
#gemas-internal-ad-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

.gemas-internal-ad-content {
    background: white;
    width: 95%;
    max-width: 600px;
    height: 80vh;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gemas-ad-iframe {
    width: 100%;
    flex: 1;
    border: none;
}

.gemas-ad-header {
    padding: 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-family: 'Fredoka', sans-serif;
    position: relative;
}

.gemas-timer-text {
    font-weight: bold;
    color: #FF6B6B;
}

/* =====================================================================
   SAFE AREA INSET — Barra de estado / notch del móvil
   Se aplica a todos los patrones de cabecera conocidos en la app.
   Requiere viewport-fit=cover en el meta viewport de cada página.
   ===================================================================== */

/*
  Definimos la variable CSS una vez en :root.
  - En móvil con notch: env(safe-area-inset-top) devuelve el valor real (ej: 24px, 44px).
  - En móvil sin notch ni Capacitor: puede devolver 0px; usamos 0px como fallback.
  - El padding ya existente del header se suma mediante box-sizing: border-box.
*/
:root {
    --safe-top: env(safe-area-inset-top, 0px);
}

/*
  Aplicamos padding-top a todos los selectores de header/navbar que existen
  en la aplicación. Usamos !important sólo donde haya conflictos de especificidad,
  porque hay muchos CSS distintos por juego.
*/
@supports (padding-top: env(safe-area-inset-top)) {
    /* Página principal */
    header {
        padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Juegos — selectores comunes de cabecera */
    #ui-header,
    .game-header,
    #game-header,
    .kawaii-header,
    .top-nav,
    nav.top-nav,
    .settings-bar,
    .header-bar,
    .header-controls,
    #header-controls,
    .controls-top,
    .top-bar,
    .top-controls,
    nav[class*="header"],
    div[class*="header"]:not(.header-content):not(.header-logo):not(.rankings-header) {
        padding-top: calc(var(--safe-top) + 8px) !important;
    }
}

/* Fallback sin @supports: garantiza al menos 20px en móvil si la variable no está disponible */
@media (max-width: 1024px) {
    header {
        padding-top: max(env(safe-area-inset-top, 0px), 0px);
        padding-top: max(env(safe-area-inset-top, 0px), 0px); /* doble por compatibilidad */
    }
}