/* Base styles and resets */
@font-face {
    font-family: 'fontvippro';
    src: url('../assets/icon/font/fontvippro.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'fontvippro', sans-serif !important;
}

/* Allow text selection for input elements */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Allow checkbox interaction */
input[type="checkbox"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #0a0a0a 100%);
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove any white space at bottom */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* Global Black Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1a1a1a;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #000000 #000000;
}

/* Ensure all buttons and interactive elements have proper touch handling on mobile */
button, a, [role="button"], [onclick], .clickable, .interactive,
.minimap-button, .menu-dropdown-item, .chat-toggle, .settings-toggle, .inventory-btn,
.action-btn, .attack-btn, .skill-slot, .close-btn {
    touch-action: manipulation !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Global popup animation for all UI menus, dialogs, and panels */
@keyframes popupOpenZoom {
    0% {
        opacity: 0;
        scale: 0.85;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}

/* Applies to all .active panels and dynamically displayed modals */
.inventory-panel.active,
.chat-panel.active,
.settings-container.active,
.guide-container.active,
.ranking-container.active,
.battlepass-container.active,
.shop-container.active,
.vongquay-container.active,
.checkin-container.active,
.pet-container.active,
.guild-panel.active,
.guild-own-container.active,
.guild-design-container.active,
.guild-contribution-container.active,
.guild-upgrade-container.active,
.guild-approval-container.active,
.buy-ruby-container.active,
.buy-ruby-qr-modal.active,
.stats-modal.active,
.fullscreen-map-modal.active,
.first-topup-modal.active,
.confirm-modal.active,
#world-chat-modal.active,
/* Modals that just use style.display = 'block' without .active */
#npc-menu-modal,
#npc-quest-modal,
#npc-main-quest-modal,
#npc-enhancement-modal,
#npc-teleport-modal,
#npc-dungeon-modal,
#npc-rankup-modal,
#npc-shop-modal,
#npc-dialogue-dialog {
    animation: popupOpenZoom 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}