@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Outfit', sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

:root {
    --mtn-yellow: #FFCC00;
    --mtn-yellow-dark: #E6B800;
    --mtn-black: #000000;
    --mtn-dark: #0A0A0A;
    --mtn-charcoal: #151515;
    --mtn-card: #181818;
    --mtn-white: #FFFFFF;
    --mtn-muted: #A1A1A1;
    --mtn-green: #22C55E;
    --mtn-red: #EF4444;
}

html {
    background: #000;
}

body {
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(255, 204, 0, 0.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #000000 0%,
            #080808 50%,
            #000000 100%
        );

    color: #fff;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ================================
   SCROLLBAR
================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #080808;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mtn-yellow);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

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

/* ================================
   GLASS / CARDS
================================ */

.glass-card {
    background: rgba(22, 22, 22, 0.94);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);
}

.glass-card-hover {
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.glass-card-hover:hover {
    border-color: rgba(255, 204, 0, 0.55);

    background: rgba(28, 28, 28, 0.98);

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.50),
        0 0 28px rgba(255, 204, 0, 0.08);
}

/* ================================
   NAVIGATION
================================ */

.glass-nav {
    background: rgba(0, 0, 0, 0.94);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border-bottom: 1px solid rgba(255, 204, 0, 0.14);
}

/* ================================
   HERO
================================ */

.hero-mesh {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 204, 0, 0.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(255, 255, 255, 0.04),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #1A1A1A 0%,
            #090909 52%,
            #000000 100%
        );

    border-color: rgba(255, 204, 0, 0.14);
}

/* ================================
   MTN BUTTON
================================ */

.mtn-button {
    background: var(--mtn-yellow);
    color: #000;

    font-weight: 900;

    box-shadow:
        0 8px 25px rgba(255, 204, 0, 0.18);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}

.mtn-button:hover {
    filter: brightness(1.05);

    box-shadow:
        0 12px 32px rgba(255, 204, 0, 0.28);
}

.mtn-button:active {
    transform: scale(.97);
}

/* ================================
   ACCENTS
================================ */

.mtn-accent {
    color: var(--mtn-yellow);
}

.mtn-bg {
    background: var(--mtn-yellow);
    color: #000;
}

.mtn-border {
    border-color: rgba(255, 204, 0, 0.45);
}

.neon-border-purple,
.neon-border-cyan {
    box-shadow:
        0 0 22px rgba(255, 204, 0, 0.12);
}

/* ================================
   MTN ACTIVE STATES
================================ */

.mtn-active {
    background: var(--mtn-yellow) !important;
    color: #000 !important;
    border-color: var(--mtn-yellow) !important;
}

/* ================================
   GAME CARD IMAGE
================================ */

.game-image-overlay {
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.15),
            transparent
        );
}

/* ================================
   SUBTLE YELLOW GLOW
================================ */

.mtn-glow {
    box-shadow:
        0 0 35px rgba(255, 204, 0, 0.10);
}

/* ================================
   SELECTION
================================ */

::selection {
    background: var(--mtn-yellow);
    color: #000;
}

/* ================================
   INPUTS
================================ */

input:focus {
    border-color: var(--mtn-yellow) !important;

    box-shadow:
        0 0 0 2px rgba(255, 204, 0, 0.08);
}

/* ================================
   MOBILE NAV
================================ */

.mobile-active {
    color: var(--mtn-yellow) !important;
}

/* ================================
   3D CARD
================================ */

.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
    transition: transform .5s ease;
}

.backface-hidden {
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}