/* User dropdown must be above everything - CRITICAL FIX */
#user-dropdown {
    z-index: 99999 !important;
    position: absolute !important;
}

.mobile-navbar {
    z-index: 9999 !important;
    position: relative !important;
}

/* Custom Scrollbar for side panel */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Hide scrollbar for history bar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Glow effects */
.text-neon-red {
    color: #ff003c;
    text-shadow: 0 0 10px rgba(255, 0, 60, 0.5);
}

.text-neon-green {
    color: #00ff41;
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.text-neon-blue {
    color: #00f3ff;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

.glow-border:focus-within {
    border-color: #00f3ff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

/* Canvas Plane Animation classes (if using DOM elements alongside canvas, but we will use Canvas) */

/* Button States */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.crashed-text-anim {
    color: #ff003c;
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    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);
    }
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

/* Mobile-first base styles */
html,
body {
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Prevent pull-to-refresh on mobile */
body {
    overscroll-behavior-y: contain;
}

/* Mobile optimizations */
@media (max-width: 767px) {

    /* Hide sidebar on mobile by default */
    .mobile-hidden-sidebar {
        display: none !important;
    }

    /* Full height game container */
    .mobile-game-container {
        height: calc(100vh - 56px) !important;
        height: calc(100dvh - 56px) !important;
        /* Dynamic viewport height for mobile */
    }

    /* Compact navbar on mobile */
    .mobile-navbar {
        height: 56px !important;
        padding: 0 12px !important;
    }

    /* Smaller multiplier display on mobile */
    .mobile-multiplier {
        font-size: 3rem !important;
        line-height: 1 !important;
    }

    /* Compact control panel on mobile */
    .mobile-controls {
        padding: 8px 12px !important;
        min-height: auto !important;
        height: auto !important;
    }

    /* Bet panel adjustments */
    .mobile-bet-panel {
        padding: 10px !important;
        gap: 8px !important;
    }

    /* History bar compact */
    .mobile-history-bar {
        height: 32px !important;
        padding: 0 8px !important;
    }

    .mobile-history-bar span {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Canvas container full width */
    .mobile-canvas-container {
        min-height: 200px !important;
        flex: 1 !important;
    }

    /* Action button responsive */
    .mobile-action-btn {
        width: 100px !important;
        height: 70px !important;
        font-size: 1rem !important;
    }

    /* Quick bet buttons responsive */
    .mobile-quick-bets button {
        padding: 6px 2px !important;
        font-size: 10px !important;
    }

    /* Bet input styling */
    .mobile-bet-input {
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Toast notification position */
    .mobile-toast {
        bottom: 120px !important;
        left: 50% !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
    }

    /* Loader text size */
    .mobile-loader-text {
        font-size: 10px !important;
    }
}

/* Small mobile devices (phones) */
@media (max-width: 374px) {
    .mobile-multiplier {
        font-size: 2.5rem !important;
    }

    .mobile-action-btn {
        width: 80px !important;
        height: 60px !important;
    }

    .mobile-bet-panel {
        padding: 8px !important;
    }
}

/* Tablet specific */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-sidebar {
        width: 240px !important;
    }

    .tablet-multiplier {
        font-size: 5rem !important;
    }
}

/* Landscape phone mode */
@media (max-width: 896px) and (orientation: landscape) {
    .landscape-layout {
        flex-direction: row !important;
    }

    .landscape-controls {
        flex-direction: column !important;
        width: 200px !important;
        padding: 8px !important;
    }

    .landscape-canvas {
        flex: 1 !important;
    }

    .mobile-multiplier {
        font-size: 2.5rem !important;
    }

    .landscape-bet-panel {
        width: 100% !important;
        max-width: none !important;
    }

    .mobile-action-btn {
        width: 100% !important;
        height: 50px !important;
    }

    .mobile-navbar {
        height: 44px !important;
    }

    .mobile-game-container {
        height: calc(100vh - 44px) !important;
        height: calc(100dvh - 44px) !important;
    }
}

/* Touch-friendly button styles */
@media (hover: none) and (pointer: coarse) {
    button {
        min-height: 44px;
        min-width: 44px;
    }

    .touch-target {
        min-height: 48px;
        min-width: 48px;
    }
}

/* Safe area insets for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }

    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .safe-area-left {
        padding-left: env(safe-area-inset-left);
    }

    .safe-area-right {
        padding-right: env(safe-area-inset-right);
    }
}

/* Smooth transitions */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent zoom on input focus (iOS) */
input[type="number"],
input[type="text"],
select,
textarea {
    font-size: 16px !important;
}

/* Sidebar toggle button for mobile */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 60px;
    left: 8px;
    z-index: 100;
    width: 40px;
    height: 40px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    background: #334155;
}

@media (max-width: 767px) {
    .sidebar-toggle {
        display: flex;
    }
}

/* Mobile sidebar overlay */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile sidebar slide-in */
.mobile-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-sidebar.active {
    transform: translateX(0);
}

/* Quick preset buttons row */
.preset-row {
    display: flex;
    gap: 4px;
}

.preset-row button {
    flex: 1;
    min-width: 0;
}