:root {
    --bg-black: #080808;
    --neon-aqua: #00ffff;
    --neon-green: #39ff14;
    --neon-orange: #ff8c00;
    --neon-pink: #ff00ff;
    --neon-purple: #bc13fe;
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.03);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-black);
    color: var(--white);
    overflow-x: hidden;
}

/* Common Neon Glow Text */
.neon-aqua {
    color: var(--neon-aqua);
    text-shadow: 0 0 10px var(--neon-aqua);
}

.neon-green {
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
}

/* Global Mobile Overflow Protection & Fluid Typography */
html, body {
    max-width: 100vw;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, canvas, svg, iframe {
    max-width: 100% !important;
    height: auto;
}

h1, h2, h3, h4, h5, h6, .brand h1, .title, [class*="-title"], [class*="-glow"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* Touch Friendly Minimums for interactive elements */
button, input, select, textarea, .nav-link, .btn-claim, .btn-complete, .action-btn {
    touch-action: manipulation;
}

/* Universal Table Scrolling Utility */
.table-responsive-wrapper, .table-responsive, [class*="-table-wrapper"], [class*="-table-container"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Base Mobile Overrides (<= 768px) */
@media (max-width: 768px) {
    h1, .header-title {
        font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
        letter-spacing: 1px !important;
    }
    h2 {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
    }
    h3 {
        font-size: clamp(1.05rem, 3.5vw, 1.25rem) !important;
    }

    /* Universal Modal & Popup Responsiveness */
    [class*="modal-content"], [class*="modal-card"], [class*="modal-dialog"], .aura-modal, .aura-modal-content, .rules-modal-card {
        width: min(94vw, 520px) !important;
        max-width: 94vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        margin: auto !important;
        padding: 20px 15px !important;
        border-radius: 16px !important;
    }

    /* Universal Form & Input Bounds */
    input, select, textarea, .form-control {
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevents auto-zoom on iOS safari */
    }

    /* Universal Touch Scroll Containers for Multi-Pill & Filter Bars */
    .filter-tabs, .category-pills, .console-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 6px !important;
        scrollbar-width: none;
    }
    .filter-tabs::-webkit-scrollbar, .category-pills::-webkit-scrollbar, .console-tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-tabs > *, .category-pills > *, .console-tabs > * {
        flex-shrink: 0 !important;
    }
}

/* Tablet Device Breakpoints (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-view {
        padding: 20px 18px !important;
    }
}




