/* =========================================================================
 * 1. ESTILOS BASE Y DE LAYOUT
 * ========================================================================= */
#budi-game-viewport { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 1000; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; }
#budi-main-container { display: flex; position: relative; width: 100%; height: 100%; align-items: center; justify-content: center; z-index: 1010; flex-grow: 1; transition: filter 0.5s ease-out, transform 0.5s ease-out; }
#budi-modals-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#budi-modals-container > .modal.is-active { pointer-events: auto; }

#budi-main-container.slow-motion {
    filter: blur(5px) brightness(0.7);
    transform: scale(1.05);
}
#budi-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1200;
    display: none;
}

/* =========================================================================
 * 2. PANELES Y ÁREA DE JUEGO
 * ========================================================================= */
@media (orientation: landscape) {
    #budi-main-container { justify-content: space-between; padding: 15px; gap: 15px; box-sizing: border-box; }
    #budi-left-panel { display: flex; flex-direction: column; gap: 10px; width: 135px; flex-shrink: 0; justify-content: flex-start; }
    .budi-left-band { display: flex; align-items: center; justify-content: flex-start; gap: 8px; background-color: rgba(253, 126, 20, 0.85); color: white; padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
    .budi-band-label { font-size: 0.8em; font-weight: 500; text-transform: uppercase; }
    .budi-band-value { font-size: 1.1em; font-weight: 700; }
    #budi-right-actions { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100px; flex-shrink: 0; }
    .budi-icon-buttons-group { display: flex; gap: 10px; margin-top: 15px; }
    .btn.btn--icon { padding: 8px; width: auto; aspect-ratio: 1/1; border-radius: 50%; }
}
@media (orientation: portrait) {
    #budi-game-area-wrapper { padding-left: 0; padding-right: 0; }
    .budi-left-panel, #budi-right-actions, .budi-ui-banner { display: none !important; }
}
#budi-game-area-wrapper { flex-grow: 1; height: 100%; position: relative; box-sizing: border-box; padding: 0; }
#budi-game-area { position: absolute; }
#budi-canvas { display: block; width: 100%; height: 100%; }
#budi-loupe { position: absolute; display: none; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1020; pointer-events: none; }
.budi-ui-banner { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-120%); z-index: 1050; background-color: rgba(255, 193, 7, 0.9); color: #333; padding: 10px 20px; border-radius: 0 0 8px 8px; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: transform 0.5s ease-in-out; pointer-events: none; }
.budi-ui-banner.visible { transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* =========================================================================
 * 3. COMPONENTES GENÉRICOS (BOTONES Y MODALES)
 * ========================================================================= */
.btn { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: none; border-radius: 6px; font-size: 0.9em; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; color: #fff !important; box-sizing: border-box; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
.btn[disabled] { background-color: #6c757d; cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.65; }
.btn--green { background-color: #28a745; } .btn--orange { background-color: #fd7e14; } .btn--blue { background-color: #0d6efd; } .btn--yellow { background-color: #ffc107; color: #333 !important; } .btn--red { background-color: #dc3545; }
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; display: none; justify-content: center; align-items: center; padding: 5vh 15px; box-sizing: border-box; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.modal.is-active { display: flex; pointer-events: auto; opacity: 1; }
.modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: -1; }
.modal__content { position: relative; background-color: #f9f9f9; border-radius: 12px; width: 90%; max-width: 420px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); padding: 20px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; gap: 15px; max-height: 95vh; overflow-y: auto; transition: max-width 0.4s ease, min-height 0.4s ease; }
.modal__title { margin: 0; color: #333; font-size: 1.4em; font-weight: bold; }
.modal__image { max-width: 100%; max-height: 100px; height: auto; border-radius: 5px; object-fit: contain; align-self: center; }
.modal__footer { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ========================================================================
 * 8. ESTILOS: INTERCEPCIÓN DEL SEÑUELO Y OTROS OVERLAYS
 * ========================================================================= */
.modal.is-corrupting .modal__content { animation: static-glitch 0.2s steps(1, end) infinite; }
.modal.is-shaking .modal__content { animation: violent-shake 0.1s linear infinite; }
.modal.is-disintegrating .modal__content { transition: transform 0.5s ease-in, opacity 0.5s ease-in; transform: scale(0.1) rotate(30deg); opacity: 0; }

.budi-universal-overlay.is-decoy-domain {
    background: radial-gradient(ellipse at center, #4c1d95 0%, #1e1b4b 100%);
    animation: decoy-pulse 8s ease-in-out infinite;
    z-index: 1199;
    overflow: hidden;
    position: relative;
}
.budi-universal-overlay.is-decoy-domain::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px );
    background-size: 100% 4px;
    animation: scanline 10s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}
.budi-universal-overlay.overlay-glitching {
    animation: decoy-pulse 8s ease-in-out infinite, glitch-fast 0.5s steps(1, end) infinite;
}

#budi-ghost-prize-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; animation: fade-in-out 3s ease-in-out forwards; }
#budi-ghost-prize-image { max-width: 40vw; max-height: 40vh; object-fit: contain; opacity: 0; filter: drop-shadow(0 0 15px #a78bfa); }
#budi-typewriter-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1200; display: flex; justify-content: center; align-items: center; pointer-events: none; }
#budi-typewriter-text { font-family: 'Courier New', Courier, monospace; font-size: clamp(1.2rem, 4vw, 2.5rem); color: #e0e0e0; text-shadow: 0 0 5px #a78bfa, 0 0 10px #a78bfa; text-align: center; padding: 20px; max-width: 80%; }
#budi-typewriter-text.flicker { animation: text-flicker 0.3s linear; }

.budi-universal-overlay.is-milestone-reveal {
    background: radial-gradient(ellipse at center, rgba(255, 223, 0, 0.7) 0%, rgba(245, 158, 11, 0.4) 40%, transparent 70%);
    animation: golden-glow-pulse 2s ease-in-out infinite;
    z-index: 1250; 
}
#budi-game-viewport.viewport-shake {
    animation: violent-shake 0.3s linear infinite;
}

/* ========================================================================
 * 12. KEYFRAMES Y OTROS ESTILOS
 * ========================================================================= */
@keyframes shake-reveal { 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); } }
@keyframes prize-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 10px 15px rgba(253, 126, 20, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); } }
@keyframes static-glitch { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } 60% { clip-path: inset(50% 0 51% 0); } 80% { clip-path: inset(20% 0 21% 0); } }
@keyframes violent-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5px, 5px); } 50% { transform: translate(-5px, -5px); } 75% { transform: translate(5px, -5px); } }
@keyframes fade-in-out { 0% { opacity: 0; transform: scale(0.9); } 20% { opacity: 0.3; transform: scale(1); } 80% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes text-flicker { 0% { opacity: 1; } 50% { opacity: 0.2; text-shadow: none; } 100% { opacity: 1; } }
@keyframes prize-glow-final { 0% { filter: brightness(1) drop-shadow(0 0 5px #fff); } 50% { filter: brightness(2) drop-shadow(0 0 20px #f59e0b); } 100% { filter: brightness(1) drop-shadow(0 0 5px #fff); } }
@keyframes gleam-effect { 0% { transform: translate(-250%, -50%) rotate(25deg); } 100% { transform: translate(250%, 50%) rotate(25deg); } }
.budi-universal-overlay.is-duel-challenge { background: radial-gradient(ellipse at center, #8B0000 0%, #1A0000 100%); animation: fiery-pulse 4s ease-in-out infinite; z-index: 1199; }
@keyframes fiery-pulse { 0% { background-size: 100% 100%; opacity: 0.9; } 50% { background-size: 110% 110%; opacity: 1; } 100% { background-size: 100% 100%; opacity: 0.9; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes golden-glow-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

.glitch-text-effect {
    text-shadow: 
        0 0 1px rgba(255,255,255,0.5),
        2px 2px 2px rgba(255,0,255,0.4), 
        -2px -2px 2px rgba(0,255,255,0.4);
}

@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

@keyframes decoy-pulse {
    0% { background-size: 100% 100%; opacity: 0.9; }
    50% { background-size: 110% 110%; opacity: 1; }
    100% { background-size: 100% 100%; opacity: 0.9; }
}

@keyframes glitch-fast {
    0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    10% { transform: translate(-1px, 1px); }
    20% { transform: translate(1px, -1px); }
    30% { transform: translate(-1px, -1px); }
    40% { transform: translate(1px, 1px); }
    50% { clip-path: inset(20% 0 78% 0); }
    60% { clip-path: inset(90% 0 2% 0); }
    70% { transform: translate(1px, -1px); }
    80% { transform: translate(-1px, 1px); }
    90% { clip-path: inset(45% 0 46% 0); }
}

/* ========================================================================
 * 13. AJUSTES RESPONSIVE Y DE SCROLL
 * ========================================================================= */
.modal__body, .start-modal-col-right { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) { .modal__content { padding: 15px; gap: 12px; width: 95%; } .modal__title { font-size: 1.25em; } .modal__image { max-height: 90px; } .btn { padding: 12px 10px; font-size: 0.95em; } }

/* =========================================================================
 * 14. ESTILOS PARA EL CONTENEDOR DE LOGIN (CUANDO EL JUEGO ESTÁ OCULTO)
 * ========================================================================= */
.budi-game-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f0f2f5; /* Un color de fondo neutro */
}

/* En móvil horizontal, ajustamos el padding para que no sea tan grande */
@media (orientation: landscape) {
    .budi-game-login-wrapper {
        min-height: 100vh;
    }
}

/* --- ESTILOS PARA EL PUNTO DE NOTIFICACIÓN --- */
#budi-profile-btn, #budi-messages-btn {
    position: relative; /* Contexto para el punto de notificación */
}

#budi-profile-btn.has-notification::after,
#budi-messages-btn.has-notification::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background-color: #dc3545; /* Rojo de notificación */
    border-radius: 50%;
    border: 2px solid white; /* Borde para que destaque sobre el botón */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    animation: notification-pulse 1.5s infinite;
}

@keyframes notification-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}