/* ========================================= */
/* base.css - ESTRUCTURA Y ANIMACIONES BASE  */
/* ========================================= */

.hidden { display: none !important; }

/* Ocultar barras de scroll en todo el juego */
::-webkit-scrollbar {
    display: none !important;
}
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0b1a2e; 
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(77, 208, 225, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        linear-gradient(rgba(77, 208, 225, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 208, 225, 0.15) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: 0 0, 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    display: flex; justify-content: center; align-items: center;
    user-select: none;
}

#game-container {
    width: 100%; max-width: 400px; height: 100vh; height: 100dvh; max-height: 850px; 
    position: relative; overflow: hidden;
    background-color: #0b1a2e;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(77, 208, 225, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(138, 43, 226, 0.12) 0%, transparent 50%),
        linear-gradient(rgba(77, 208, 225, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 208, 225, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: 0 0, 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    border-radius: 24px;
    box-shadow: 0 0 0 12px #0f172a, 0 20px 50px rgba(0,0,0,0.8), 0 0 80px rgba(77, 208, 225, 0.3); 
}

.app-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0d1a24; overflow-y: auto; overflow-x: hidden;
}

/* Permitir scroll táctil y gestos en elementos interactivos y pantallas de scroll */
.app-screen, 
.scrollable-area, 
.modal-content, 
.coliseum-log-box, 
.log-container,
[style*="overflow-y: auto"], 
[style*="overflow-y: scroll"],
input, 
textarea, 
select, 
button, 
a {
    touch-action: auto !important;
    overscroll-behavior-y: contain !important;
}

/* Adaptación responsiva para pantallas móviles (ancho de smartphone) */
@media (max-width: 480px) {
    #game-container {
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-2px, -2px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translate(2px, 2px) rotate(1deg); }
}
.shake-effect { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes healPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(76, 175, 80, 0)); }
    50% { filter: brightness(1.5) drop-shadow(0 0 15px rgba(76, 175, 80, 1)); }
}
.heal-effect { animation: healPulse 0.6s ease-out; }

@keyframes happyJump { 
    0%, 100% { transform: translate(-50%, -50%) scale(1, 1); } 
    30% { transform: translate(-50%, -80px) scale(0.9, 1.1); } 
    50% { transform: translate(-50%, -50%) scale(1.05, 0.95); } 
    70% { transform: translate(-50%, -70px) scale(0.95, 1.05); } 
}
.happy-jump { animation: happyJump 0.5s ease-in-out !important; }

@keyframes wobbleLight { 
    0%, 100% { transform: translate(-50%, -50%) scale(1); } 
    50% { transform: translate(-50%, -50%) scale(0.96); } 
}
.wobble-light { animation: wobbleLight 0.15s ease-in-out; }

@keyframes floatUpHeart { 
    0% { opacity: 1; transform: translateY(0) scale(1); } 
    100% { opacity: 0; transform: translateY(-40px) scale(1.5); } 
}
.heart-particle { 
    position: absolute; color: #E91E63; font-size: 24px; pointer-events: none; 
    animation: floatUpHeart 1s ease-out forwards; z-index: 20; text-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

@keyframes floatBubble {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -4px); }
}