/* ============================================
   📱 PWA OPTIMIZATIONS - Boxing Timer Pro
   ============================================
   
   Optimizaciones para:
   - Safe areas (notch, home indicator)
   - Modo standalone
   - iOS específico
   - Pantalla completa
   
   ============================================ */

/* ============================================
   1️⃣ SAFE AREAS - NOTCH Y HOME INDICATOR
   ============================================ */

/* Aplicar padding para áreas seguras */
/* Aplicar padding para áreas seguras */
html {
    /* padding-top: env(safe-area-inset-top, 0); */ /* QUITADO */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    overflow: hidden;
    overscroll-behavior: none;
    /* Impide que el WebView de Android escale el texto según accesibilidad del sistema */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
        min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;

    /* padding-top: env(safe-area-inset-top, 0); */ /* QUITADO */

    /* Bloqueo de scroll raíz — sobreescribe overflow-y:auto de boxing-timer.css.
       pwa-optimizations.css carga después, por lo que gana el cascade aunque ambos usen !important. */
    overflow: hidden !important;
    overscroll-behavior: none;
    /* Deshabilita el bounce elástico en el nivel de touch del WebView nativo */
    touch-action: pan-x pan-y;
}

/* ============================================
   2️⃣ MODO PWA STANDALONE
   ============================================ */

/* Cuando la app está instalada */
body.pwa-mode {
    /* Prevenir selección de texto accidental */
    -webkit-user-select: none;
    user-select: none;
    
    /* Prevenir callout en iOS */
    -webkit-touch-callout: none;
    
    /* Optimizar para touch */
    touch-action: manipulation;
}

/* Ajustes del contenedor principal en PWA */
body.pwa-mode .container {
    /* Respetar safe areas */
    padding-top: calc(75px + env(safe-area-inset-top, 0));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}

/* ============================================
   3️⃣ FULLSCREEN TIMER - SAFE AREAS
   ============================================ */

.fullscreen-timer {
    /* Cubrir toda la pantalla incluyendo safe areas */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Pero el contenido debe respetar safe areas */
    padding-top: env(safe-area-inset-top, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 20px);
    padding-right: env(safe-area-inset-right, 20px);
}

/* Contenido del timer centrado en área segura */
.fs-content {
    /* Área segura para el contenido principal */
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    max-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
}

/* ============================================
   4️⃣ CONTROLES FLOTANTES - SAFE AREA INFERIOR
   ============================================ */

.floating-controls {
    /* Posicionar sobre el home indicator */
    bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;

    /* Asegurar que esté centrado */
    left: 50%;
    transform: translateX(-50%);

    /* Safe area lateral — max() garantiza mínimo 10px incluso sin notch */
    padding-left:  max(10px, env(safe-area-inset-left,  0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

/* ============================================
   5️⃣ TOP CONTROLS - SAFE AREA SUPERIOR
   ============================================ */

/* ── Fila superior izquierda: top-controls fixed ── */
.top-controls {
    position:    fixed !important;
    top:         max(10px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
    z-index:     500 !important;
    display:     flex !important;
    align-items: center !important;
    height:      40px !important;
    gap:         8px !important;
}

/* ── Ocultar contenedor antiguo — botones ya están sueltos en el DOM ── */
.bottom-right-btns {
    display: none !important;
}

/* ══════════════════════════════════════════════
   BOTONES ESQUINA DERECHA — orden izq→der:
   [ Música @110 | Trofeo @60 | Luna @10 ]
   ══════════════════════════════════════════════ */

/* Trofeo (🏆) — centro del grupo derecho */
#trophyBtn {
    position: fixed !important;
    top:      max(10px, calc(env(safe-area-inset-top,   0px) + 10px)) !important;
    right:    max(60px, calc(env(safe-area-inset-right, 0px) + 60px)) !important;
    z-index:  500 !important;
}

#trophyBtn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.1) !important;
}

/* ── Tamaño uniforme para TODOS los botones circulares del header ── */
.icon-btn,
.music-btn,
.darkmode-btn,
#trophyBtn,
#leagueBtn {
    width:           40px !important;
    height:          40px !important;
    min-width:       unset !important;
    min-height:      unset !important;
    font-size:       18px !important;
    line-height:     1 !important;
    padding:         0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    border-radius:   50% !important;
    box-sizing:      border-box !important;
}

/* Sol/Luna (🌙/☀️) — extremo derecho */
.darkmode-btn {
    position: fixed !important;
    top:   max(10px, calc(env(safe-area-inset-top,   0px) + 10px)) !important;
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px)) !important;
    z-index: 500 !important;
}

/* Música (🎵) — extremo izquierdo del grupo derecho */
.music-btn {
    position: fixed !important;
    top:   max(10px, calc(env(safe-area-inset-top,   0px) + 10px)) !important;
    right: max(110px, calc(env(safe-area-inset-right, 0px) + 110px)) !important;
    z-index: 500 !important;
}

/* Liga/Kimono (🥋) — centro superior, protagonista visual (52px)
   Alineación: transform Y = 20px (centro de 40px) - 50% (centro de 52px = 26px) = -6px */
#leagueBtn {
    position:        fixed !important;
    top:             max(10px, calc(env(safe-area-inset-top, 0px) + 10px)) !important;
    left:            50% !important;
    transform:       translate(-50%, calc(20px - 50%)) !important;
    bottom:          unset !important;
    right:           unset !important;
    z-index:         500 !important;
    width:           52px !important;
    height:          52px !important;
    min-width:       unset !important;
    min-height:      unset !important;
    border-radius:   50% !important;
    padding:         0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       23px !important;
}

/* Ocultar durante el timer activo (el anuncio nativo NO se incluye: rota durante el combate) */
body.timer-active #leagueBtn,
body.timer-active #trophyBtn,
body.timer-active .music-btn,
body.timer-active .darkmode-btn,
body.timer-active .top-controls,
body.timer-active .icon-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Modales siempre por encima de los controles fijos */
.modal-overlay,
.settings-panel,
.stats-modal,
.profile-modal,
.trophy-modal,
#leagueModal,
#achievementTooltip {
    z-index: 10000 !important;
}

/* padding-top: empuja START/SETTINGS por debajo de los iconos superiores en cualquier dispositivo.
   padding-bottom: deja aire al final del panel de Settings para scroll cómodo. */
.container {
    padding-top:    max(75px, calc(env(safe-area-inset-top, 0px) + 60px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}


/* ============================================
   6️⃣ SETTINGS PANEL — SCROLL DESBLOQUEADO
   ============================================ */

/* body acotado a 100dvh → el contenido del panel lo desborda → overflow-y:auto activa scroll táctil */
body.settings-open {
    overflow-y: auto !important;
    max-height: 100dvh !important;
    overscroll-behavior-y: contain;
}

/* Margen inferior para que el último botón no quede pegado al borde físico */
.settings-panel.show {
    padding-bottom: 48px !important;
}

/* ============================================
   7️⃣ iOS ESPECÍFICO
   ============================================ */

/* Ajustes para dispositivos iOS */
body.ios-device {
    /* Prevenir bounce scroll */
    overscroll-behavior: none;
    
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Status bar en iOS standalone */
@supports (padding-top: env(safe-area-inset-top)) {
    body.pwa-mode.ios-device {
        /* Espacio extra para status bar de iOS */
        padding-top: calc(env(safe-area-inset-top, 0) + 10px);
    }
}

/* ============================================
   7️⃣ SCROLL SELECTIVO — solo los contenedores que lo necesitan
   ============================================ */

/* Con body overflow:hidden, los contenedores internos necesitan
   declarar su propio scroll. overscroll-behavior-y:contain atrapa
   el bounce DENTRO del elemento, sin propagarlo al body ni al WebView. */
.modal-scroll-body,
.league-leaderboard,
.achievements-grid,
.settings-panel.show {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    flex-shrink: 0;
}

/* ============================================
   8️⃣ MODALES - SAFE AREAS
   ============================================ */

.modal,
.settings-panel,
.stats-modal,
.profile-modal,
.trophy-modal {
    /* Respetar safe areas en modales */
    padding-top: env(safe-area-inset-top, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 20px);
    padding-right: env(safe-area-inset-right, 20px);
}

/* Contenido del modal (settings-panel excluido: crece con el body) */
.modal-content,
[class*="-content"] {
    /* Máxima altura respetando safe areas */
    max-height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 40px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 40px);
    overflow-y: auto;
}

/* ============================================
   8️⃣ LANDSCAPE MODE
   ============================================ */

@media (orientation: landscape) {
    /* En landscape, las safe areas laterales son más importantes */
    .fullscreen-timer {
        padding-left: calc(env(safe-area-inset-left, 0) + 40px);
        padding-right: calc(env(safe-area-inset-right, 0) + 40px);
    }
    
    /* Timer más pequeño en landscape */
    .fs-time {
        font-size: clamp(80px, 15vh, 120px) !important;
    }
    
    .fs-status {
        font-size: 8vh !important;
    }
    
    /* Controles en el lateral en landscape */
    .floating-controls {
        flex-direction: column;
        right: calc(20px + env(safe-area-inset-right, 0));
        bottom: 50%;
        left: auto;
        transform: translateY(50%);
    }
}

/* ============================================
   9️⃣ ANIMACIÓN DE INSTALACIÓN
   ============================================ */

/* Botón de instalación PWA */
#installBtn {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    
    background: linear-gradient(135deg, #ff4500, #ff6600);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4);
    z-index: 10000;
    
    animation: installPulse 2s ease-in-out infinite;
}

@keyframes installPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 6px 30px rgba(255, 69, 0, 0.6);
    }
}

#installBtn:hover {
    background: linear-gradient(135deg, #ff6600, #ff8800);
}

/* ============================================
   🔟 VIEWPORT UNITS FALLBACK
   ============================================ */

/* Fallback para navegadores que no soportan dvh */
@supports not (height: 100dvh) {
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    .fullscreen-timer {
        height: 100vh;
        height: -webkit-fill-available;
    }
}

/* ============================================
   1️⃣1️⃣ SPLASH SCREEN STYLES
   ============================================ */

/* Mientras carga la app */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    
    /* Safe areas */
    padding: env(safe-area-inset-top, 0) 
             env(safe-area-inset-right, 0) 
             env(safe-area-inset-bottom, 0) 
             env(safe-area-inset-left, 0);
}

.splash-screen .logo {
    font-size: 80px;
    animation: splashBounce 1s ease-in-out infinite;
}

@keyframes splashBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.splash-screen .loading {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* ============================================
   1️⃣2️⃣ INSTALL BANNER
   ============================================ */

.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    z-index: 10000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease-out;
    
    /* Safe area */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    padding-left: calc(20px + env(safe-area-inset-left, 0));
    padding-right: calc(20px + env(safe-area-inset-right, 0));
}

.install-banner.show {
    display: flex;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.install-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.install-banner-icon {
    font-size: 2em;
}

.install-banner-text h4 {
    margin: 0 0 2px 0;
    font-size: 1em;
    font-weight: 700;
}

.install-banner-text p {
    margin: 0;
    font-size: 0.85em;
    opacity: 0.9;
}

.install-banner-btn {
    background: white;
    color: #667eea;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s;
}

.install-banner-btn:hover {
    transform: scale(1.05);
}

.install-banner-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    opacity: 0.7;
    line-height: 1;
}

.install-banner-close:hover {
    opacity: 1;
}

/* ============================================
   1️⃣3️⃣ OFFLINE INDICATOR
   ============================================ */

.offline-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ff6b6b;
    color: white;
    text-align: center;
    padding: 8px;
    font-size: 0.9em;
    font-weight: 600;
    z-index: 10001;
    display: none;
    
    /* Safe area */
    padding-top: calc(8px + env(safe-area-inset-top, 0));
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.offline-indicator.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ============================================
   1️⃣4️⃣ UPDATE TOAST
   ============================================ */

.update-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    display: none;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Safe area */
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
}

.update-toast.show {
    display: flex;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.update-toast button {
    background: #667eea;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.update-toast button:hover {
    background: #5568d3;
}

/* ============================================
   1️⃣5️⃣ RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 600px) {
    .install-banner {
        padding: 12px 15px;
        flex-wrap: wrap;
    }
    
    .install-banner-icon {
        font-size: 1.5em;
    }
    
    .install-banner-text h4 {
        font-size: 0.9em;
    }
    
    .install-banner-text p {
        font-size: 0.75em;
    }
    
    .install-banner-btn {
        padding: 8px 16px;
        font-size: 0.9em;
    }
    
    .update-toast {
        bottom: 60px;
        padding: 10px 16px;
        font-size: 0.85em;
    }
}

/* ============================================
   1️⃣6️⃣ SETTINGS PANEL & MODAL SCROLL FIX
   ============================================
   
   CRITICAL FIX: Prevents settings panel and modals
   from being cut off or too small. Ensures proper
   scrolling on all devices, especially mobile.
   ============================================ */

/* Force full viewport height for settings and modals */
.modal,
.stats-modal,
.profile-modal,
.trophy-modal {
    height: 100dvh !important;
    height: 100vh !important; /* Fallback */
    max-height: none !important;
    overflow-y: auto !important;
    
    /* Critical: Add bottom padding to prevent content
       from being hidden behind home indicator/notch */
    padding-bottom: 80px !important;
}

/* Ensure modal content containers also scroll properly */
.modal-content,
.settings-panel-content,
.stats-content,
.profile-content,
.trophy-content,
[class*="-content"] {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Solo aplicar espacio extra a los modales (controles flotantes los necesitan) */
/* settings-panel excluido: su close-wrap ya gestiona el safe-area inferior */
.modal-content {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0)) !important;
}

/* ============================================
   FIGHTER DASHBOARD — Rediseño del Modal Stats
   ============================================ */

/* ── Overlay ── */
#statsModal {
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Tarjeta ── */
#statsModal .modal-content {
    background: rgba(30, 35, 45, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 229, 255, 0.12) !important;
    border-radius: 24px !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.05),
        0 24px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}

#statsModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 229, 255, 0.6) 30%,
        #00e5ff 50%,
        rgba(0, 229, 255, 0.6) 70%,
        transparent);
}

/* ── Título ── */
#statsModal .modal-title {
    color: #ffffff !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.35) !important;
}

/* ── Sección de nivel — glassmorphism ── */
#statsModal .level-display {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 14px !important;
}

#statsModal .level-name {
    /* color & text-shadow set dynamically by updateLevel() per belt */
    font-size: 1.05em !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

/* Barra XP — track oscuro + relleno cyan neón */
#statsModal .level-progress-container {
    background: rgba(255, 255, 255, 0.07) !important;
    height: 8px !important;
    border-radius: 4px !important;
}

#statsModal .level-progress-bar {
    /* background & box-shadow set dynamically by updateLevel() per belt */
    border-radius: 4px !important;
}

#statsModal .level-progress-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.78em !important;
}

/* ── Tarjetas de métricas — dark con borde sutil ── */
#statsModal .stat-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
}

#statsModal .stat-value {
    color: #ffffff !important;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.4) !important;
    font-size: 2em !important;
    font-weight: 900 !important;
}

#statsModal .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.72em !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
}

/* ── Sección kcal — borde rojo/naranja oscuro ── */
#statsModal .kcal-stats {
    background: rgba(255, 60, 0, 0.08) !important;
    border: 1px solid rgba(255, 100, 0, 0.25) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 150, 0, 0.08) !important;
    border-radius: 14px !important;
}

#statsModal .kcal-stat-row:first-child {
    border-bottom: 1px solid rgba(255, 100, 0, 0.15) !important;
}

#statsModal .kcal-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85em !important;
}

#statsModal .kcal-stat-value {
    color: #ff6b35 !important;
    text-shadow: 0 0 12px rgba(255, 107, 53, 0.5) !important;
    font-size: 1.15em !important;
}

/* ── Botón Cerrar — ghost rojo ── */
#statsModal .btn-close {
    background: transparent !important;
    color: rgba(255, 80, 80, 0.8) !important;
    border: 1.5px solid rgba(255, 80, 80, 0.35) !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-size: 0.85em !important;
    box-shadow: none !important;
    transition: all 0.2s !important;
}

#statsModal .btn-close:hover {
    background: rgba(255, 80, 80, 0.08) !important;
    border-color: rgba(255, 80, 80, 0.7) !important;
    color: #ff5050 !important;
}

/* ============================================
   FIGHTER CARD — Rediseño del Modal de Perfil
   ============================================ */

/* ── Overlay oscuro con blur ── */
#profileModal {
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Tarjeta principal ── */
#profileModal .modal-content {
    background: rgba(30, 35, 45, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-radius: 24px !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.06),
        0 24px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: 28px 24px 24px !important;
    position: relative;
    overflow: hidden;
}

/* Línea de acento cyan en la parte superior */
#profileModal .modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 229, 255, 0.7) 30%,
        #00e5ff 50%,
        rgba(0, 229, 255, 0.7) 70%,
        transparent);
    border-radius: 0 0 4px 4px;
}

/* ── Título ── */
#profileModal .modal-title {
    color: #ffffff !important;
    font-size: 1.1em !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.4) !important;
}

/* ── Filas del formulario ── */
#profileModal .form-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 0 !important;
}

#profileModal .form-row:last-child {
    border-bottom: none !important;
}

/* ── Labels ── */
#profileModal .form-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.75em !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* ── Inputs — solo línea inferior, fondo oscuro ── */
#profileModal .form-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1.5px solid rgba(0, 229, 255, 0.3) !important;
    border-radius: 6px 6px 0 0 !important;
    color: #ffffff !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    width: 120px !important;
    text-align: right !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#profileModal .form-input:focus {
    outline: none !important;
    border-bottom-color: #00e5ff !important;
    box-shadow: 0 3px 12px rgba(0, 229, 255, 0.2) !important;
    background: rgba(0, 229, 255, 0.05) !important;
}

#profileModal .form-input::placeholder {
    color: rgba(255, 255, 255, 0.2) !important;
    font-weight: 400 !important;
}

/* ── Fighter name input — ancho completo ── */
#profileModal .fighter-name-input {
    width: 100% !important;
    text-align: left !important;
    letter-spacing: 1.5px !important;
    font-size: 1.1em !important;
}

/* ── Tag — placa metálica dorada ── */
#profileModal .fighter-tag {
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 45%, #b8860b 100%) !important;
    color: #1a1000 !important;
    font-size: 0.78em !important;
    font-weight: 900 !important;
    letter-spacing: 1.5px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    border: none !important;
    opacity: 1 !important;
    box-shadow:
        0 2px 8px rgba(255, 215, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
}

/* ── Botones de Sexo — pills de videojuego ── */
#profileModal .sex-btn {
    padding: 8px 18px !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.85em !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

#profileModal .sex-btn.active {
    background: rgba(0, 229, 255, 0.15) !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
    box-shadow:
        0 0 12px rgba(0, 229, 255, 0.35),
        inset 0 0 8px rgba(0, 229, 255, 0.1) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
}

/* ── Dashboard IMC ── */
#profileModal .imc-display {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin: 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#profileModal .imc-label {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.7em !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

#profileModal .imc-value {
    font-size: 2.4em !important;
    font-weight: 900 !important;
    color: #00e5ff !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.5) !important;
    line-height: 1 !important;
}

#profileModal .imc-status {
    font-size: 0.8em !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: right !important;
}

/* Colores de estado del IMC */
#profileModal .imc-status.underweight { color: #4fc3f7 !important; text-shadow: 0 0 10px rgba(79,195,247,0.5) !important; }
#profileModal .imc-status.normal      { color: #69ff47 !important; text-shadow: 0 0 10px rgba(105,255,71,0.5) !important; }
#profileModal .imc-status.overweight  { color: #ffb300 !important; text-shadow: 0 0 10px rgba(255,179,0,0.5) !important; }
#profileModal .imc-status.obese       { color: #ff4444 !important; text-shadow: 0 0 10px rgba(255,68,68,0.5) !important; }

/* ── Botón Guardar — misma energía que el botón EMPEZAR ── */
#profileModal .btn-save {
    width: 100% !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #00b4d8 0%, #00e5ff 50%, #0077b6 100%) !important;
    color: #001a24 !important;
    font-size: 0.95em !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    margin-bottom: 10px !important;
    box-shadow:
        0 4px 20px rgba(0, 229, 255, 0.40),
        0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
    transition: transform 0.15s, box-shadow 0.2s !important;
}

#profileModal .btn-save:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(0, 229, 255, 0.55) !important;
}

#profileModal .btn-save:active {
    transform: scale(0.97) !important;
}

/* ── Botón Cerrar — outline rojo discreto ── */
#profileModal .btn-close {
    width: 100% !important;
    padding: 12px !important;
    background: transparent !important;
    color: rgba(255, 80, 80, 0.8) !important;
    font-size: 0.85em !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border: 1.5px solid rgba(255, 80, 80, 0.35) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
}

#profileModal .btn-close:hover {
    background: rgba(255, 80, 80, 0.08) !important;
    border-color: rgba(255, 80, 80, 0.7) !important;
    color: #ff5050 !important;
}

/* ============================================
   ONBOARDING MODAL — PREMIUM ÉLITE
   ============================================ */

/* 1. OVERLAY — Glassmorphism */
#onboardingModal {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.80) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 10000 !important;
}

#onboardingModal.show {
    display: flex !important;
    animation: onboardingFadeIn 0.35s ease-out both;
}

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

/* 2. CARD — gradiente carbón-negro + borde dorado */
.onboarding-content {
    position: relative;
    text-align: center;
    padding: 44px 32px 36px !important;
    max-width: 360px;
    width: 88%;

    background: linear-gradient(160deg,
        #1c1c1c 0%,
        #111111 55%,
        #0a0a0a 100%) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 215, 0, 0.30) !important;
    box-shadow:
        0 0  0   1px rgba(255, 215, 0, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.70),
        0 2px 8px  rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

    animation: onboardingSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.05s;

    /* Línea decorativa dorada en la parte superior */
    overflow: hidden;
}

/* Línea de acento superior */
.onboarding-content::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 215, 0, 0.8) 30%,
        rgba(255, 180, 0, 1)   50%,
        rgba(255, 215, 0, 0.8) 70%,
        transparent);
    border-radius: 0 0 4px 4px;
}

/* 6. ANIMACIÓN — fade in + slide desde abajo */
@keyframes onboardingSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0)   scale(1);
    }
}

/* 3. ICONO */
.onboarding-icon {
    font-size: 3.2em;
    margin-bottom: 6px;
    display: block;
    filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.5));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-5px); }
}

/* 3. TÍTULO — dorado brillante, mayúsculas */
#onboardingTitle {
    font-size: 1.25em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #ffd700 !important;
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

/* SUBTÍTULO */
.onboarding-subtitle {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
    margin: 0 0 24px;
}

/* SEPARADOR DECORATIVO */
.onboarding-divider {
    color: rgba(255, 215, 0, 0.35);
    font-size: 0.75em;
    letter-spacing: 4px;
    margin: 0 0 20px;
    user-select: none;
}

/* 4. INPUT — oscuro con glow dorado en focus */
.onboarding-input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 1.35em !important;
    font-weight: 700 !important;
    letter-spacing: 3px;
    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 215, 0, 0.35) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 14px 16px !important;
    margin-bottom: 24px !important;
    outline: none !important;
    transition:
        border-color 0.25s,
        box-shadow 0.25s,
        background 0.25s !important;
}

.onboarding-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: none;
}

.onboarding-input:focus {
    background: rgba(255, 215, 0, 0.06) !important;
    border-bottom-color: rgba(255, 215, 0, 0.9) !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.20) !important;
}

.onboarding-input.input-error {
    border-bottom-color: #ff4444 !important;
    box-shadow: 0 4px 20px rgba(255, 60, 60, 0.25) !important;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0);   }
    20%       { transform: translateX(-8px); }
    40%       { transform: translateX(8px);  }
    60%       { transform: translateX(-6px); }
    80%       { transform: translateX(6px);  }
}

/* 5. BOTÓN — gradiente dorado-ámbar, imponente */
.onboarding-btn {
    display: block !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 1.05em !important;
    font-weight: 900 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #1a1000 !important;

    background: linear-gradient(135deg,
        #f5c518 0%,
        #ffb700 40%,
        #ff8c00 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    cursor: pointer;

    box-shadow:
        0 4px 20px rgba(255, 180, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.15) inset !important;

    transition:
        transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease !important;
}

.onboarding-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 8px 28px rgba(255, 180, 0, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.20) inset !important;
}

.onboarding-btn:active {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 10px rgba(255, 180, 0, 0.35) !important;
}

/* ============================================
   FIGHTER NAME ROW (in profile modal)
   ============================================ */

.fighter-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.fighter-name-input {
    flex: 1;
    font-weight: 700;
    letter-spacing: 1px;
}

.fighter-tag {
    font-size: 0.85em;
    font-weight: 700;
    opacity: 0.5;
    white-space: nowrap;
    padding: 6px 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    letter-spacing: 1px;
    user-select: none;
}

/* ============================================
   TROPHY CABINET — Pulido Premium del Modal Logros
   ============================================ */

/* Borde glassmorphism sobre el degradado existente */
#trophyModal .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 -10px 20px rgba(11, 165, 49, 0.5),
        0 20px 50px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Grid con más aire */
#trophyModal .achievements-grid {
    gap: 10px !important;
}

/* Logros bloqueados — ranura vacía tallada */
#trophyModal .achievement.locked {
    background: rgba(0, 0, 0, 0.35) !important;
    filter: grayscale(100%) !important;
    opacity: 0.45 !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    transform: scale(0.95) !important;
}

/* Logros desbloqueados — medalla que sobresale */
#trophyModal .achievement.unlocked {
    transform: scale(1.06) !important;
    box-shadow:
        0 0 12px rgba(167, 105, 255, 0.7),
        0 0 24px rgba(100, 60, 200, 0.4),
        0 4px 10px rgba(0, 0, 0, 0.5) !important;
    filter: none !important;
    opacity: 1 !important;
}

#trophyModal .achievement.unlocked:hover {
    transform: scale(1.18) !important;
    box-shadow:
        0 0 18px rgba(0, 229, 255, 0.8),
        0 0 36px rgba(0, 180, 216, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.5) !important;
}

/* Botón Cerrar — elegante con pulso al presionar */
#trophyModal .btn-close {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    font-size: 0.82em !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 9px 28px !important;
    box-shadow: none !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s !important;
}

#trophyModal .btn-close:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

#trophyModal .btn-close:active {
    transform: scale(0.94) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================
   LANGUAGE DROPDOWN — Dark Glassmorphism
   ============================================ */

/* Contenedor del menú desplegable */
.lang-menu {
    background: rgba(10, 12, 20, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 229, 255, 0.06) !important;
    padding: 6px !important;
    min-width: 160px !important;

    /* Estado cerrado — igual que antes pero con nueva animación */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(0.97) !important;
    transition:
        opacity 0.25s ease-out,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.25s !important;
    transform-origin: top left !important;
}

/* Estado abierto — fade in + slide down */
.lang-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* Cada opción de idioma */
.lang-option {
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.9em !important;
    font-weight: 500 !important;
    border-left: 2px solid transparent !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
    gap: 10px !important;
}

/* Hover */
.lang-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-left-color: rgba(0, 229, 255, 0.5) !important;
}

/* Idioma activo / seleccionado */
.lang-option.active {
    background: rgba(0, 229, 255, 0.10) !important;
    color: #00e5ff !important;
    font-weight: 700 !important;
    border-left-color: #00e5ff !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4) !important;
}

/* Emoji de bandera — tamaño fijo */
.lang-option span:first-child {
    font-size: 1.2em !important;
}

/* ============================================
   🔥 HEAT LEVEL SYSTEM — 5 Niveles de Inercia
   Azul Hielo → Morado → Rojo → Naranja → Dorado
   Efecto en texto + contenedor (glassmorphism)
   ============================================ */

/* Base del contenedor — oscuro siempre, los niveles tinen el fondo */
.logo {
    backdrop-filter:         blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius:           14px !important;
    padding:                 6px 16px 6px 12px !important;
}

/* Texto — transición suave cuando no está animado */
.logo-text {
    font-weight: 900;
    transition: color 1s ease, text-shadow 1s ease !important;
    will-change: color, text-shadow;
}
.logo {
    transition: background 1s ease, border-color 1s ease, box-shadow 1s ease !important;
}

/* ═══════════════════════════════════════════════
   NIVEL 1 — Azul Hielo | Estático, casi apagado
   ═══════════════════════════════════════════════ */
.logo-text.heat-1 {
    color: #4facfe !important;
    text-shadow:
        0 0  8px rgba(79,172,254,0.80),
        0 0 22px rgba(79,172,254,0.50),
        0 0 45px rgba(79,172,254,0.25) !important;
    animation: none !important;
}
.logo.heat-1 {
    background:  rgba(5, 20, 55, 0.20) !important;
    border:      1px solid rgba(79,172,254,0.30) !important;
    box-shadow:  0 0 18px rgba(79,172,254,0.22),
                 0 0 40px rgba(79,172,254,0.10),
                 inset 0 1px 0 rgba(255,255,255,0.06) !important;
    animation: none !important;
}

/* ═══════════════════════════════════════════════
   NIVEL 2 — Morado/Violeta | Brillo ascendente
   ═══════════════════════════════════════════════ */
.logo-text.heat-2 {
    color: #a18cd1 !important;
    text-shadow:
        0 0 10px rgba(161,140,209,0.90),
        0 0 28px rgba(161,140,209,0.60),
        0 0 55px rgba(110,70,200,0.35) !important;
    animation: none !important;
}
.logo.heat-2 {
    background:  rgba(40, 15, 90, 0.20) !important;
    border:      1px solid rgba(161,140,209,0.40) !important;
    box-shadow:  0 0 24px rgba(110,70,200,0.38),
                 0 0 55px rgba(110,70,200,0.18),
                 inset 0 1px 0 rgba(255,255,255,0.07) !important;
    animation: none !important;
}

/* ═══════════════════════════════════════════════
   NIVEL 3 — Naranja Fuego | Respiración sutil
   ═══════════════════════════════════════════════ */
@keyframes heat4TextBreathe {
    0%, 100% {
        text-shadow:
            0 0 12px rgba(255,144,104,0.90),
            0 0 32px rgba(255,144,104,0.60),
            0 0 65px rgba(220,70,0,0.35);
    }
    50% {
        text-shadow:
            0 0 20px rgba(255,144,104,1.0),
            0 0 50px rgba(255,144,104,0.80),
            0 0 90px rgba(220,70,0,0.55);
    }
}
@keyframes heat4ContainerBreathe {
    0%, 100% {
        box-shadow: 0 0 28px rgba(255,144,104,0.42),
                    0 0 65px rgba(200,55,0,0.22),
                    inset 0 1px 0 rgba(255,255,255,0.07);
        border-color: rgba(255,144,104,0.50);
    }
    50% {
        box-shadow: 0 0 45px rgba(255,144,104,0.65),
                    0 0 90px rgba(200,55,0,0.38),
                    inset 0 1px 0 rgba(255,255,255,0.10);
        border-color: rgba(255,144,104,0.75);
    }
}
.logo-text.heat-3 {
    color:      #ff9068 !important;
    animation:  heat4TextBreathe 3.5s ease-in-out infinite !important;
    transition: none !important;
}
.logo.heat-3 {
    background:  rgba(100, 28, 5, 0.20) !important;
    border:      1px solid rgba(255,144,104,0.36) !important;
    animation:   heat4ContainerBreathe 3.5s ease-in-out infinite !important;
    transition:  none !important;
}

/* ═══════════════════════════════════════════════
   NIVEL 4 — Rojo Intenso | Aura ilumina bordes
   ═══════════════════════════════════════════════ */
.logo-text.heat-4 {
    color: #ff4b2b !important;
    text-shadow:
        0 0 12px rgba(255,75,43,1.0),
        0 0 35px rgba(255,75,43,0.75),
        0 0 65px rgba(200,25,0,0.48) !important;
    animation: none !important;
}
.logo.heat-4 {
    background:  rgba(80, 8, 5, 0.22) !important;
    border:      1px solid rgba(255,75,43,0.55) !important;
    box-shadow:  0 0 30px rgba(255,75,43,0.50),
                 0 0 65px rgba(180,20,0,0.28),
                 inset 0 1px 0 rgba(255,255,255,0.06) !important;
    animation: none !important;
}

/* NIVEL 5 — gestionado completamente en custom-quality.css */
/* ============================================================
   PC VIEW RESTRAINTS (Boxing Timer Elite)
   Fix for wide screens: Keeps floating icons constrained to the 
   max-width (500px) layout of the main container, instead of 
   flying out to the extreme edges of the PC monitor.
   ============================================================ */
@media (min-width: 501px) {
    .top-controls {
        left: calc(50vw - 240px) !important; /* 50vw - 250px (container half) + 10px padding */
    }
    .amazon-ad-wrapper.left-align {
        left: calc(50vw - 248px) !important; /* 50vw - 250px + 2px offset */
    }
    
    .darkmode-btn {
        right: max(calc(50vw - 240px), calc(env(safe-area-inset-right, 0px) + 10px)) !important;
    }
    #trophyBtn {
        right: max(calc(50vw - 190px), calc(env(safe-area-inset-right, 0px) + 60px)) !important;
    }
    .music-btn {
        right: max(calc(50vw - 140px), calc(env(safe-area-inset-right, 0px) + 110px)) !important;
    }

    /* Opcional: Asegurar que el modal se vea bien alineado si es muy ancho */
    .modal-content, .theme-selector-content, .review-content, .reward-content {
        max-width: 500px !important;
        margin: 0 auto !important;
    }
}

/* Hide ad during all combat states — ID correcto */
body.preparing #admob-native-container,
body.fighting  #admob-native-container,
body.resting   #admob-native-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}