a, 
button, 
input, 
select, 
.mega-card, 
.custom-select, 
.custom-option,
.profile-trigger-btn,
.mode-btn,
.btn-primary,
.btn-secondary,
.btn-join {
    transition: background-color 0.2s ease, 
                border-color 0.2s ease, 
                color 0.2s ease, 
                opacity 0.2s ease, 
                outline-color 0.2s ease, 
                transform 0.2s ease !important;
}

.custom-select:hover,
.slider-container:hover,
.profile-trigger-btn:hover,
.donate-btn:hover,
.server-card:hover,
.mega-card:hover {
    background-color: #121212 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.dropdown-panel,
.custom-options {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    background-color: #000000 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

.profile-menu-container.active .dropdown-panel,
.custom-select-wrapper.open .custom-options {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overscroll-behavior-x: none;
}

img,
canvas,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea,
[role="button"] {
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
}

button,
a,
.custom-select,
.custom-option,
[role="button"] {
    touch-action: manipulation;
}

:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (pointer: coarse) {
    button,
    input,
    select,
    .btn-join,
    .chat-btn,
    .custom-select,
    .custom-option,
    .profile-trigger-btn {
        min-height: 44px !important;
    }
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        min-height: 100dvh;
    }

    /* iOS zooms the viewport when a focused field is below 16px. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .dropdown-panel,
    .custom-options {
        max-height: min(60dvh, 420px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}