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

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --orange: #FFFFFF;
    --orange-hot: #E0E0E4;
    --orange-glow: rgba(255, 255, 255, 0.25);
    --ios-blue: #0A84FF;
    --ios-blue-glow: rgba(10, 132, 255, 0.45);
    --maroon: #7A1F1F;
    --neon-green: #39FF14;
    --neon-violet: #B794F6;
    --neon-cyan: #00FFE5;
    --bg-page: #08080A;
    --bg-card: rgba(22, 22, 26, 0.45);
    --bg-elev: rgba(30, 30, 36, 0.75);
    --bg-sidebar: #050505;
    --bg-input: #0E0E12;
    --text-hi: #FFFFFF;
    --text-mid: #A1A1AA;
    --text-lo: #71717A;
    --border-edge: rgba(255, 255, 255, 0.06);
    --border-card: rgba(255, 255, 255, 0.09);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 180ms;
    --line-soft: rgba(255,255,255,0.07);
    /* Rarity tiers */
    --tier-common: #71717A;
    --tier-rare: #3B82F6;
    --tier-epic: #A855F7;
    --tier-legendary: #FBBF24;
    --tier-mythic: #BFFF00;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased
}

body {
    font-family: var(--font-sans);
    background: var(--bg-page);
    color: var(--text-hi);
    overflow-x: hidden;
    line-height: 1.5;
    min-height: 100vh
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit
}

input,
textarea {
    font-family: inherit;
    color: inherit
}

img,
video {
    display: block;
    max-width: 100%
}

ul,
ol {
    list-style: none
}

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

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px
}

::selection {
    background: rgba(255,255,255,0.2);
    color: #fff
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes macOsScaleUp {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(40px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(255,255,255,0.15)
    }

    50% {
        box-shadow: 0 0 20px rgba(255,255,255,0.25)
    }
}

@keyframes breathe {

    0%,
    100% {
        filter: drop-shadow(0 0 4px var(--glow-color, rgba(255,255,255,0.4)))
    }

    50% {
        filter: drop-shadow(0 0 12px var(--glow-color, rgba(255,255,255,0.5)))
    }
}

@keyframes kenBurns {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes grainShift {
    0% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-5%, -10%)
    }

    50% {
        transform: translate(7%, -5%)
    }

    75% {
        transform: translate(-3%, 8%)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes gradientDrift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes dotPulse {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0
    }

    40% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes waveform {

    0%,
    100% {
        height: 4px
    }

    50% {
        height: 100%
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes textShine {
    0% {
        background-position: 0% 50%
    }

    100% {
        background-position: 200% 50%
    }
}

.glass {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-card)
}

.glass-elevated {
    background: var(--bg-elev);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-card)
}

.film-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 128px;
    animation: grainShift .8s steps(4) infinite;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: overlay
}

@keyframes bubblePopIn {
    from { transform:scale(0.96); opacity:0 }
    to   { transform:scale(1);    opacity:1 }
}
@keyframes badgeFloat {
    0%,100% { transform:translateY(0) }
    50%     { transform:translateY(-2px) }
}

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