/* ============================================
   Race Your Lucky Block Wiki — Main Styles
   ============================================ */

/* --- CSS Variables --- */
:root {
    /* Primary - Lucky Block Gold */
    --color-primary: #FFD700;
    --color-primary-light: #FFE44D;
    --color-primary-dark: #CC9900;
    --color-primary-glow: rgba(255, 215, 0, 0.25);

    /* Background */
    --color-bg-darkest: #0A0A0F;
    --color-bg-dark: #111118;
    --color-bg-card: #1A1A24;
    --color-bg-card-hover: #222230;
    --color-bg-elevated: #252535;
    --color-bg-input: #16161E;

    /* Text */
    --color-text-primary: #F0F0F5;
    --color-text-secondary: #A0A0B0;
    --color-text-muted: #606070;

    /* Rarity colors */
    --rarity-common: #AAAAAA;
    --rarity-rare: #2196F3;
    --rarity-epic: #9C27B0;
    --rarity-legendary: #FF9800;
    --rarity-mythic: #E91E63;
    --rarity-secret: #FF4444;
    --rarity-divine: #FFD700;
    --rarity-cosmic: #00BCD4;
    --rarity-admin: #FF0000;

    /* Mutation colors */
    --mutation-normal: #FFFFFF;
    --mutation-candy: #E88BFF;
    --mutation-gold: #FFDB25;
    --mutation-diamond: #2AE3FF;
    --mutation-void: #A527FF;

    /* Layout */
    --nav-height: 80px;
    --max-width: 1400px;
    --border-radius: 12px;
    --border-radius-sm: 8px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Fredoka One', cursive;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

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

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

/* App-shell hardening: clamp any rogue horizontal overflow so a single
   over-wide element can't make the whole page scroll sideways on mobile.
   Individual containers can still set their own overflow as needed. */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-darkest);
    background-image:
        radial-gradient(ellipse 95% 65% at 50% 0%, rgba(255, 215, 0, 0.35), transparent 65%),
        radial-gradient(ellipse 60% 55% at 12% 35%, rgba(255, 180, 40, 0.22), transparent 70%),
        radial-gradient(ellipse 60% 55% at 88% 65%, rgba(255, 200, 60, 0.20), transparent 70%),
        radial-gradient(ellipse 130% 90% at 50% 115%, rgba(0, 0, 0, 0.80), transparent 55%),
        linear-gradient(rgba(10, 10, 15, 0.65), rgba(10, 10, 15, 0.65)),
        url('../game-assets/ui/Pattern_Floor.webp');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
    /* `background-attachment: fixed` was forcing 6 full-viewport bg repaints
       on every scroll frame (Chrome cannot promote multi-layer fixed bgs to
       a composited layer reliably). That tanked scroll perf across every
       route — the issue had nothing to do with content cards specifically.
       Letting the bg scroll naturally lets the compositor cache it as a
       single rasterized image, with zero repaint cost during scroll. */
    color: var(--color-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Animated background FX (aurora blobs + shimmer) ===== */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    /* filter: blur removed — replaced with wider/softer gradient stops on
       each blob below so the soft-aurora look is achieved by the gradient
       itself instead of GPU rasterizing a blurred layer. Effectively zero
       blur cost while keeping the visual feel. */
    will-change: transform;
    transform: translateZ(0);
    opacity: 0.55;
}

/* Rainbow aurora — evokes lucky block mystery palette. Gradient stops
   are spread out (transparent at 90% instead of 70%) to mimic the soft
   edge previously provided by filter:blur. */
/* Single blob, halved in size (was 60vw → now 30vw). Cuts the layer
   memory footprint by ~75% (area scales with width²). Keeps the
   warm aurora colour wash without the big GPU memory hit. */
.bg-blob-1 {
    width: 30vw;
    height: 30vw;
    top: -9vw;
    left: -6vw;
    background: radial-gradient(circle, rgba(255, 70, 70, 0.55), rgba(255, 140, 40, 0.25) 50%, transparent 90%);
    animation: bg-drift-a 55s ease-in-out infinite;
}

.bg-blob-2 { display: none; }

/* Blobs 3 + 4 hidden — two large mix-blend-mode-free blobs are enough
   for the colour wash, the other two were doubling GPU paint cost
   without adding much visual depth. */
.bg-blob-3 { display: none; }

.bg-blob-4 { display: none; }

/* Floating lucky block cubes — signature prop, clearly visible.
   Cubes are layered in 3 depth tiers (fg / mid / bg) to create parallax-like
   separation when they overlap — far ones are smaller, more blurred, less
   opaque, behind; near ones are sharp and in front. */
.bg-cube {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    user-select: none;
    /* The base double-drop-shadow was overridden by the more specific
       .bg-cube-1..4 rule below (single shadow). Removed to avoid dead
       filter declarations holding GPU layers when CSS order shifts. */
    /* Default to "mid" tier; individual cubes override via z-index/opacity */
    opacity: 0.6;
    z-index: 2;
}

/* 4 cubes — one anchored in each quadrant (top-left, top-right,
   bottom-left, bottom-right). Each cube drifts in a bounded orbit
   toward the centre of the viewport (using a direction-matched
   keyframe) so they never wander out of their quadrant.
   animation-delay: 2s holds each cube at its anchor position for 2
   seconds after page load before movement begins. Different durations
   keep them from syncing visually once they\'re all moving. */

.bg-cube-1, .bg-cube-2, .bg-cube-3, .bg-cube-4 {
    opacity: 0.72;
    z-index: 3;
    /* drop-shadow removed entirely — was forcing one extra compositing
       layer per cube (4 layers total). Cubes still read clearly against
       the dark page background without a glow. */
}

/* Each cube now has its OWN distinct movement style so they don\'t
   all feel like the same loop at different phases:
     cube-1  = slow orbital rotation (spin-heavy, big ellipse)
     cube-2  = bobbing hop with gentle tilt (vertical-focused)
     cube-3  = figure-8 loop (horizontal serpentine)
     cube-4  = tumbling full-spin (fast rotation, drift)
   Durations spread 52-72s to keep them out of phase. */

/* Top-left quadrant — slow wide orbital */
.bg-cube-1 {
    width: 220px;
    top: 8%;
    left: 4%;
    animation: bg-cube-orbit 72s ease-in-out 2s infinite;
}
/* Top-right quadrant — soft bobbing hop */
.bg-cube-2 {
    width: 200px;
    top: 10%;
    right: 4%;
    animation: bg-cube-bob 52s ease-in-out 2s infinite;
}
/* Bottom-left quadrant — figure-8 loop */
.bg-cube-3 {
    width: 210px;
    bottom: 8%;
    left: 5%;
    animation: bg-cube-figure8 64s ease-in-out 2s infinite;
}
/* Bottom-right quadrant — drift with a soft sway (no spin). */
.bg-cube-4 {
    width: 210px;
    bottom: 10%;
    right: 5%;
    animation: bg-cube-tumble 58s ease-in-out 2s infinite;
}

/* Sparkle starfield — tiny twinkling dots across the viewport */
.bg-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.5px, transparent 2.5px),
        radial-gradient(circle, rgba(255, 230, 120, 0.85) 1px, transparent 2px),
        radial-gradient(circle, rgba(200, 230, 255, 0.7) 1px, transparent 2px);
    background-size: 280px 280px, 170px 170px, 120px 120px;
    background-position: 10px 20px, 80px 160px, 30px 90px;
    /* Twinkle animation + mix-blend-mode removed — the screen blend over
       the entire viewport every frame was a major paint cost. Sparkles
       remain visible as a static starfield. */
    opacity: 0.7;
}

/* bg-shine removed — was sweeping across the full viewport every 9s
   with a filter:blur. The cost of repeatedly translating a half-screen
   blurred element exceeds its visual contribution. */
.bg-shine { display: none; }

/* Big viewport-relative wandering — fills the screen edge-to-edge.
   Long durations (~50-65s) keep the apparent speed close to the old feel. */
@keyframes bg-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(45vw, 25vh) scale(1.12); }
    66%      { transform: translate(-30vw, -18vh) scale(0.95); }
}
@keyframes bg-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-50vw, -25vh) scale(1.15); }
    75%      { transform: translate(30vw, 20vh) scale(0.92); }
}
@keyframes bg-drift-c {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-30%, -70%) scale(1.18); }
}
@keyframes bg-drift-d {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40vw, -35vh) scale(1.12); }
}
@keyframes bg-shine-sweep {
    0%   { transform: translateX(0); }
    100% { transform: translateX(280vw); }
}
/* 4-direction drift keyframes: each stays within ~22vw × 22vh of anchor
   so cubes keep inside their quadrant and don't leave the viewport. */
@keyframes bg-cube-float-a {
    0%   { transform: translate(0, 0) rotate(-8deg) scale(1); }
    25%  { transform: translate(14vw, 8vh) rotate(8deg) scale(1.06); }
    50%  { transform: translate(20vw, 22vh) rotate(14deg) scale(1.10); }
    75%  { transform: translate(6vw, 16vh) rotate(-4deg) scale(1.04); }
    100% { transform: translate(0, 0) rotate(-8deg) scale(1); }
}
@keyframes bg-cube-float-b { /* -x +y */
    0%   { transform: translate(0, 0) rotate(5deg) scale(1); }
    25%  { transform: translate(-12vw, 10vh) rotate(-10deg) scale(1.06); }
    50%  { transform: translate(-20vw, 22vh) rotate(-16deg) scale(1.12); }
    75%  { transform: translate(-5vw, 14vh) rotate(6deg) scale(1.05); }
    100% { transform: translate(0, 0) rotate(5deg) scale(1); }
}
@keyframes bg-cube-float-c { /* +x -y */
    0%   { transform: translate(0, 0) rotate(-4deg) scale(1); }
    25%  { transform: translate(12vw, -10vh) rotate(8deg) scale(1.06); }
    50%  { transform: translate(20vw, -22vh) rotate(14deg) scale(1.12); }
    75%  { transform: translate(6vw, -16vh) rotate(-3deg) scale(1.04); }
    100% { transform: translate(0, 0) rotate(-4deg) scale(1); }
}
@keyframes bg-cube-float-d { /* -x +y, mirror of a */
    0%   { transform: translate(0, 0) rotate(6deg) scale(1); }
    25%  { transform: translate(-14vw, 8vh) rotate(-9deg) scale(1.06); }
    50%  { transform: translate(-20vw, 20vh) rotate(-15deg) scale(1.10); }
    75%  { transform: translate(-6vw, 14vh) rotate(3deg) scale(1.04); }
    100% { transform: translate(0, 0) rotate(6deg) scale(1); }
}
@keyframes bg-cube-float-e { /* -x -y, for bottom-right cubes */
    0%   { transform: translate(0, 0) rotate(-6deg) scale(1); }
    25%  { transform: translate(-12vw, -10vh) rotate(10deg) scale(1.06); }
    50%  { transform: translate(-20vw, -20vh) rotate(16deg) scale(1.12); }
    75%  { transform: translate(-6vw, -14vh) rotate(-4deg) scale(1.04); }
    100% { transform: translate(0, 0) rotate(-6deg) scale(1); }
}
/* bg-cube-spin removed — full 360° rotations didn\'t look right on the
   Lucky Block cubes. All motion keyframes below cap rotation at ±22°. */
/* === Per-cube motion variants — each visibly different so the four
       cubes don\'t look like the same loop at staggered phases. All
       rotation is capped at ±22° so cubes just *tilt* / wobble instead
       of doing full spins (user found spins distracting). === */
@keyframes bg-cube-orbit {
    0%   { transform: translate(0, 0)         rotate(-6deg)  scale(1); }
    20%  { transform: translate(16vw, 4vh)    rotate(10deg)  scale(1.05); }
    45%  { transform: translate(22vw, 18vh)   rotate(18deg)  scale(1.10); }
    65%  { transform: translate(10vw, 24vh)   rotate(8deg)   scale(1.08); }
    85%  { transform: translate(-2vw, 12vh)   rotate(-10deg) scale(1.04); }
    100% { transform: translate(0, 0)         rotate(-6deg)  scale(1); }
}
@keyframes bg-cube-bob {
    0%   { transform: translate(0, 0)      rotate(4deg)   scale(1); }
    30%  { transform: translate(-3vw, 8vh) rotate(-6deg)  scale(1.02); }
    50%  { transform: translate(-6vw, 14vh) rotate(-12deg) scale(1.05); }
    70%  { transform: translate(-3vw, 8vh) rotate(-6deg)  scale(1.02); }
    100% { transform: translate(0, 0)      rotate(4deg)   scale(1); }
}
@keyframes bg-cube-figure8 {
    0%   { transform: translate(0, 0)        rotate(-4deg) scale(1); }
    25%  { transform: translate(14vw, -8vh)  rotate(6deg)  scale(1.06); }
    50%  { transform: translate(20vw, 0)     rotate(16deg) scale(1.10); }
    75%  { transform: translate(14vw, -16vh) rotate(6deg)  scale(1.06); }
    100% { transform: translate(0, 0)        rotate(-4deg) scale(1); }
}
/* "Tumble" rewritten as a drift with a tiny sway — no more 720° spin.
   Keeps the drift shape so cubes still move around their quadrant,
   just without the cartwheel. */
@keyframes bg-cube-tumble {
    0%   { transform: translate(0, 0)         rotate(0deg)   scale(1); }
    25%  { transform: translate(-8vw, -10vh)  rotate(-14deg) scale(1.05); }
    50%  { transform: translate(-14vw, -18vh) rotate(18deg)  scale(1.10); }
    75%  { transform: translate(-6vw, -8vh)   rotate(-6deg)  scale(1.04); }
    100% { transform: translate(0, 0)         rotate(0deg)   scale(1); }
}
@keyframes bg-sparkle-twinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Make sure page content stacks above the FX layer
   (nav already has position:fixed + z-index:1000, don't override) */
main, #content, footer, .scroll-top-btn {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .bg-blob, .bg-shine, .bg-cube, .bg-sparkles { animation: none; }
}

/* Mobile: shrink the 4 corner cubes so they don\'t crowd the viewport. */
@media (max-width: 768px) {
    .bg-cube-1, .bg-cube-2, .bg-cube-3, .bg-cube-4 { width: 95px; }
    .bg-cube { opacity: 0.45; }

    /* Aurora blobs: smaller. Blur removed (the desktop rules now use
       wider gradient stops instead). */
    .bg-blob-1, .bg-blob-2, .bg-blob-3, .bg-blob-4 { width: 80vw; height: 80vw; }

    /* Sparkles sparser */
    .bg-sparkles { background-size: 200px 200px, 140px 140px, 100px 100px; opacity: 0.7; }
    .bg-shine { display: none; }
}

/* Trade hub shows the same main .bg-fx the homepage does (lucky block
   cubes + rainbow aurora blobs + sparkles + shine) so both routes
   feel visually consistent. We still hide the duplicate tfx cube
   injections so there are only 4 lucky blocks on screen, not 8. */
body.route-trade-hub .bg-fx-trade .tfx-brainrot { display: none; }

.bg-fx-trade {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
}
body.route-trade-hub .bg-fx-trade { display: block; }

/* Cyber grid — static (drift animation removed; was animating
   background-position which forces a paint every frame). */
.tfx-grid {
    position: absolute;
    inset: -10% -10% -10% -10%;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px, 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 85%);
}

/* tfx-scan removed — vertical sweep across the trade hub bg. */
.tfx-scan { display: none; }

/* tfx-orb removed — was a single cyan orb pulsing on the trade hub bg. */
.tfx-orb { display: none; }

/* Diagonal data streaks — hidden. The slide animation was animating
   background-position which forces a paint per frame; the streaks are
   barely visible and don't earn that cost. */
.tfx-streaks { display: none; }

@keyframes tfx-grid-drift {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 60px 60px, 60px 60px; }
}
@keyframes tfx-scan-sweep {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(130vh); opacity: 0; }
}
@keyframes tfx-orb-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(15vw, 12vh) scale(1.15); }
}
@keyframes tfx-orb-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-10vw, -10vh) scale(1.1); }
}
@keyframes tfx-orb-c {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-30%, -40%) scale(1.2); }
}
@keyframes tfx-streaks-slide {
    0%   { background-position: 0 0; }
    100% { background-position: 400px 0; }
}

/* ===== Trade Hub floating items (brainrots + coins) ===== */
.tfx-item {
    position: absolute;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    /* The base drop-shadow stack was overridden by the more specific
       .tfx-b-N rule below; removed to drop dead-code overhead. */
}

.tfx-brainrot {
    opacity: 0.55;
}

/* Depth tiers — drop-shadow removed entirely (was 1 extra layer per
   item). Trade hub bg still has the floating lucky-blocks visible
   against the dark page background. */
.tfx-b-1, .tfx-b-2, .tfx-b-3, .tfx-b-4 {
    opacity: 0.65;
    z-index: 2;
}

/* 4 lucky-block slots — one per viewport quadrant. Each drifts toward
   centre via a direction-matched keyframe so they stay in their own
   corner. 2s delay across the board defers movement until 2 seconds
   after load; different durations keep them out of sync afterwards. */
.tfx-b-1 { width: 130px; top: 8%;    left: 4%;  animation: tfx-drift-a 58s ease-in-out 2s infinite; }
.tfx-b-2 { width: 130px; top: 8%;    right: 4%; animation: tfx-drift-b 60s ease-in-out 2s infinite; }
.tfx-b-3 { width: 130px; bottom: 8%; left: 4%;  animation: tfx-drift-c 62s ease-in-out 2s infinite; }
.tfx-b-4 { width: 130px; bottom: 8%; right: 4%; animation: tfx-drift-d 56s ease-in-out 2s infinite; }

/* Trade-hub brainrot drift — 4 direction variants with ~18vw/20vh bounded orbits */
@keyframes tfx-drift-a { /* +x +y (right-down) — for top-left area */
    0%   { transform: translate(0, 0) rotate(-6deg) scale(1); }
    25%  { transform: translate(12vw, 8vh) rotate(8deg) scale(1.06); }
    50%  { transform: translate(18vw, 18vh) rotate(14deg) scale(1.10); }
    75%  { transform: translate(5vw, 12vh) rotate(-3deg) scale(1.04); }
    100% { transform: translate(0, 0) rotate(-6deg) scale(1); }
}
@keyframes tfx-drift-b { /* -x +y (left-down) — for top-right area */
    0%   { transform: translate(0, 0) rotate(4deg) scale(1); }
    25%  { transform: translate(-12vw, 10vh) rotate(-10deg) scale(1.06); }
    50%  { transform: translate(-18vw, 20vh) rotate(-16deg) scale(1.12); }
    75%  { transform: translate(-5vw, 12vh) rotate(4deg) scale(1.05); }
    100% { transform: translate(0, 0) rotate(4deg) scale(1); }
}
@keyframes tfx-drift-c { /* +x -y (right-up) — for bottom-left area */
    0%   { transform: translate(0, 0) rotate(-3deg) scale(1); }
    25%  { transform: translate(10vw, -12vh) rotate(10deg) scale(1.05); }
    50%  { transform: translate(16vw, -22vh) rotate(16deg) scale(1.10); }
    75%  { transform: translate(4vw, -14vh) rotate(-3deg) scale(1.03); }
    100% { transform: translate(0, 0) rotate(-3deg) scale(1); }
}
@keyframes tfx-drift-d { /* -x -y (left-up) — for bottom-right area */
    0%   { transform: translate(0, 0) rotate(5deg) scale(1); }
    25%  { transform: translate(-10vw, -12vh) rotate(-10deg) scale(1.05); }
    50%  { transform: translate(-16vw, -22vh) rotate(-16deg) scale(1.10); }
    75%  { transform: translate(-4vw, -14vh) rotate(3deg) scale(1.03); }
    100% { transform: translate(0, 0) rotate(5deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .tfx-grid, .tfx-scan, .tfx-orb, .tfx-streaks, .tfx-item { animation: none; }
}

/* Mobile: shrink the 4 remaining lucky blocks so they don\'t dominate. */
@media (max-width: 768px) {
    .tfx-b-1, .tfx-b-2, .tfx-b-3, .tfx-b-4 { width: 70px; opacity: 0.4; }

    /* Orb blur removed mobile-side too — desktop rule already swapped
       to a wide gradient instead of a runtime blur. */
    .tfx-grid { background-size: 40px 40px, 40px 40px; }
    .tfx-scan { display: none; }
    .tfx-streaks { display: none; }
}

/* Trade hub: matches the homepage background mood — the heavy dark
   override was dropped so the gold top-wash + rainbow aurora blobs
   + pattern floor all show the same brightness as the rest of the
   site. No body-specific override here means the base `body` rule
   (~0.65 darkener, 35% gold radial) applies on this route too. */

/* Trade hub content gets a protected glass container so the cyber bg FX
   stay decorative without reducing readability of the actual UI */
body.route-trade-hub #content {
    /* Roblox-style chunky gold gradient frame with a soft outer glow —
       reads like a game-panel container instead of a quiet webpage card.
       Revert to original: swap back to
         `background: rgba(10,10,16,0.78); border: 1px solid rgba(255,255,255,0.05)`
       and drop the gold glow from box-shadow. */
    /* Genuinely transparent interior — no gradient-border hack. The
       gold ring is a solid 3px border (no gradient, no mask trick) so
       there\'s zero chance of an opaque layer bleeding through. The
       outer shadow + inner top-highlight carry the "panel" feel. */
    position: relative;
    /* ~12% more opaque than 0.08 — still see-through, just gives the
       gold-framed panel more presence (user request). */
    background: rgba(14, 10, 22, 0.20);
    border: 3px solid #FFB800;
    border-radius: 20px;
    box-shadow:
        0 20px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 42px rgba(255, 160, 30, 0.28),
        0 0 0 1px rgba(255, 235, 150, 0.14) inset;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Keep the existing top-padding that clears the nav; the box itself now floats
       so add a little margin-top for visual breathing room */
    margin-top: var(--space-md);
    padding-top: calc(var(--nav-height) + var(--space-lg));
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

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

/* --- Typography --- */
h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-primary);
}

h2 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--color-text-primary);
}

h3 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--color-text-secondary);
}

/* --- Navigation --- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.25s ease;
    will-change: transform, opacity;
    pointer-events: none; /* let background show through; logos/button re-enable */
}

/* Hide the top nav (both logos) on any downward scroll, reveal on any
   upward scroll / when back at the top. app.js toggles the class; this
   rule provides the actual visual effect. Translate off-screen rather
   than display:none so the reveal animation stays smooth. */
.nav.nav-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none !important;
}

.nav-inner, .nav-logos, .nav-launcher-trigger, .nav-logo-link {
    pointer-events: auto;
}

/* nav is always transparent now (logos float free, no dark chase bg) */


.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: 0 var(--space-lg);
}

/* Desktop: RYLB launcher trigger sits to the LEFT of the xFrozen logo
   (both pinned close together on the left side). Mobile keeps
   the launcher trigger on the right via space-between above. */
@media (min-width: 769px) {
    .nav-inner {
        justify-content: flex-start;
        gap: var(--space-sm);
    }
    .nav-launcher-trigger { order: -1; }
}

.nav-logos {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-logo-img {
    height: 55px;
    width: auto;
    object-fit: contain;
}

.nav-logo-xfrozen { user-select: none; }
.nav-logo-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }

/* Launcher trigger — RYLB logo acts as the menu button */
.nav-launcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 14px;
    color: var(--color-text-primary);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.nav-launcher-trigger:hover {
    background: rgba(255, 215, 0, 0.08);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.nav-launcher-trigger:active { transform: scale(0.97); }

/* Chevron chip — small rounded gold pill hosting the arrow */
.nav-launcher-chevron-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 170, 40, 0.14));
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow:
        0 3px 10px rgba(255, 170, 40, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    flex-shrink: 0;
}

.nav-launcher-chevron {
    color: #1a1a24;
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 1px 2px rgba(255, 215, 0, 0.6));
}

.nav-launcher-trigger:hover .nav-launcher-chevron-chip {
    background: linear-gradient(135deg, #FFE98A, #FFD700 50%, #FFB347);
    border-color: rgba(255, 215, 0, 0.9);
    box-shadow: 0 6px 18px rgba(255, 170, 40, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transform: translateY(-1px);
}

.nav-launcher-trigger[aria-expanded="true"] .nav-launcher-chevron-chip {
    background: linear-gradient(135deg, #FFE98A, #FFD700 50%, #FFB347);
    border-color: rgba(255, 215, 0, 0.9);
}

.nav-launcher-trigger[aria-expanded="true"] .nav-launcher-chevron {
    transform: rotate(180deg);
}

/* ===== Launcher panel (dropdown menu) ===== */
.launcher {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
}

.launcher[aria-hidden="false"] { pointer-events: auto; }

.launcher-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
    opacity: 0;
    transition: opacity 240ms ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.launcher[aria-hidden="false"] .launcher-scrim { opacity: 1; }

.launcher-panel {
    position: absolute;
    top: calc(var(--nav-height) - 6px);
    right: var(--space-lg);
    max-width: 780px;
    width: calc(100% - var(--space-lg) * 2);
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(22, 22, 30, 0.92), rgba(16, 16, 22, 0.92));
    border: 1px solid rgba(255, 215, 0, 0.18);
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 215, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    /* 8px blur is enough to read as a frosted-glass panel without
       forcing the GPU to re-blur the entire viewport each frame as the
       launcher animates in. Was 18px which stacked with body-bg blur
       and made the open animation feel sluggish. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    transform-origin: top right;
    transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.launcher[aria-hidden="false"] .launcher-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.launcher-panel::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 44px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, rgba(22, 22, 30, 0.92), rgba(22, 22, 30, 0.92));
    border-left: 1px solid rgba(255, 215, 0, 0.18);
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    transform: rotate(45deg);
    border-top-left-radius: 4px;
}

/* Desktop: launcher trigger moved to the left, so anchor the panel left */
@media (min-width: 769px) {
    .launcher-panel {
        left: var(--space-lg);
        right: auto;
        transform-origin: top left;
    }
    .launcher-panel::before {
        left: 44px;
        right: auto;
    }
}

.launcher-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.launcher-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    opacity: 0;
    transform: translateY(8px);
}

.launcher[aria-hidden="false"] .launcher-card {
    animation: launcher-card-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.launcher-card img,
.launcher-card svg {
    width: 44px;
    height: 44px;
    object-fit: contain;
    /* drop-shadow filter removed — was forcing 15 simultaneous filter
       compositing layers when the launcher staggered open, which was the
       biggest single cost of the menu animation. The cards already have
       a card background + border so the icons read clearly without it. */
    transition: transform 220ms ease;
}

.launcher-card .launcher-emoji {
    font-size: 32px;
    line-height: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Replaced expensive drop-shadow filter with text-shadow — same
       visual depth, fraction of the GPU cost (no compositing layer). */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
    transition: transform 220ms ease;
}

.launcher-card:hover {
    background: rgba(255, 215, 0, 0.10);
    border-color: rgba(255, 215, 0, 0.35);
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.15);
}

.launcher-card:hover img,
.launcher-card:hover svg,
.launcher-card:hover .launcher-emoji {
    transform: scale(1.12) rotate(-4deg);
}

.launcher-card.active {
    background: rgba(255, 215, 0, 0.14);
    border-color: rgba(255, 215, 0, 0.45);
    color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.3) inset, 0 6px 18px rgba(255, 215, 0, 0.2);
}

/* Discord launcher card — blurple branded treatment */
.launcher-card-discord {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.22), rgba(139, 92, 246, 0.14));
    border-color: rgba(88, 101, 242, 0.45);
    color: #c7cbff;
}
.launcher-card-discord:hover {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.35), rgba(139, 92, 246, 0.25));
    border-color: rgba(138, 148, 255, 0.75);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.35);
}
.launcher-discord-icon {
    color: #ffffff;
    fill: currentColor;
}
.launcher-card-discord:hover .launcher-discord-icon {
    color: #ffffff;
    transform: scale(1.12) rotate(-4deg);
}

@keyframes launcher-card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger reveal */
.launcher-card:nth-child(1)  { animation-delay: 30ms; }
.launcher-card:nth-child(2)  { animation-delay: 50ms; }
.launcher-card:nth-child(3)  { animation-delay: 70ms; }
.launcher-card:nth-child(4)  { animation-delay: 90ms; }
.launcher-card:nth-child(5)  { animation-delay: 110ms; }
.launcher-card:nth-child(6)  { animation-delay: 130ms; }
.launcher-card:nth-child(7)  { animation-delay: 150ms; }
.launcher-card:nth-child(8)  { animation-delay: 170ms; }
.launcher-card:nth-child(9)  { animation-delay: 190ms; }
.launcher-card:nth-child(10) { animation-delay: 210ms; }
.launcher-card:nth-child(11) { animation-delay: 230ms; }
.launcher-card:nth-child(12) { animation-delay: 250ms; }
.launcher-card:nth-child(13) { animation-delay: 270ms; }
.launcher-card:nth-child(14) { animation-delay: 290ms; }
.launcher-card:nth-child(15) { animation-delay: 310ms; }

@media (max-width: 720px) {
    .launcher-panel { left: var(--space-md); right: var(--space-md); width: auto; max-width: none; }
    .launcher-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .launcher-card { padding: 12px 6px; font-size: 0.72rem; }
    .launcher-card img, .launcher-card svg { width: 40px; height: 40px; }
    .launcher-card .launcher-emoji { font-size: 28px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .launcher-card { animation: none !important; opacity: 1; transform: none; }
    .launcher-panel { transition: opacity 160ms ease; transform: none; }
}

/* Launcher settings row (motion toggle) */
.launcher-settings {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 215, 0, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Discord chip — lives next to the Background animations toggle instead
   of taking up a full launcher card. Pill-shaped with Discord blurple
   hover treatment; matches the toggle\'s visual weight. */
.launcher-discord-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(88, 101, 242, 0.08);
    border: 1px solid rgba(88, 101, 242, 0.35);
    border-radius: 999px;
    color: #a6b0ff;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.launcher-discord-chip:hover {
    background: rgba(88, 101, 242, 0.18);
    border-color: rgba(88, 101, 242, 0.7);
    color: #c7cfff;
}

.launcher-discord-chip svg {
    width: 18px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.launcher-motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.launcher-motion-toggle:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.35);
    color: var(--color-primary);
}

/* Indicator dot — green when ON, dim when OFF */
.launcher-motion-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #43B581;
    box-shadow: 0 0 8px rgba(67, 181, 129, 0.7);
    flex-shrink: 0;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.launcher-motion-toggle[aria-pressed="true"] .launcher-motion-indicator {
    background: #606070;
    box-shadow: none;
}

.launcher-motion-state {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(67, 181, 129, 0.18);
    color: #43B581;
    border: 1px solid rgba(67, 181, 129, 0.35);
}

.launcher-motion-toggle[aria-pressed="true"] .launcher-motion-state {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-muted);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Kill all floating bg FX when motion is disabled — saves GPU + battery.
   UI transitions (hover, modal, etc.) are left intact on purpose so the
   page still feels responsive. */
html[data-motion="off"] .bg-fx,
html[data-motion="off"] .bg-fx-trade {
    display: none;
}

/* Also stop any persistent paint-loop animations when motion is off.
   These were continuously repainting box-shadow / background — every
   home or trade-hub frame paid a paint cost even with the heavy bg FX
   already disabled. Hover/modal/click transitions still run normally. */
html[data-motion="off"] .hero-nav,
html[data-motion="off"] .page-header h1,
html[data-motion="off"] .page-header h1::after {
    animation: none !important;
}
/* Launcher cards default to opacity:0 + translateY(8px) and rely on the
   `launcher-card-in` animation to reveal themselves. With motion off we
   skip the animation but must still force the final visible state, or
   the entire menu would render invisible. */
html[data-motion="off"] .launcher[aria-hidden="false"] .launcher-card {
    animation: none !important;
    opacity: 1;
    transform: none;
}

/* Globally strip backdrop-filter. Each instance forced Chrome to re-blur
   the layers behind the element on every paint, and there were 30+
   instances across the UI (modals, tab bars, launcher, header, cards…).
   Visual cost is a slightly less frosted feel; perf gain is large and
   universal. The semi-opaque backgrounds on each surface already provide
   the contrast needed to read content clearly without the blur. */
*, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.nav-group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.nav-group::after {
    content: '';
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 var(--space-sm);
}

.nav-group:last-child::after {
    display: none;
}

.nav-link {
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.08);
}

.nav-link.active {
    color: var(--color-primary);
    background: rgba(255, 215, 0, 0.12);
}

/* Nav dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-arrow {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--border-radius-sm);
    padding: var(--space-xs);
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
}

.nav-dropdown:hover .nav-arrow {
    transform: rotate(180deg);
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Hide mobile menu on desktop */
.mobile-menu {
    display: none;
}

/* --- Main Content --- */
.content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: calc(var(--nav-height) + var(--space-sm)) var(--space-lg) var(--space-2xl);
    min-height: calc(100vh - 120px);
    box-sizing: border-box;
}

/* Mobile: trade hub should feel like an app, not a website with margins.
   - Drop the side gutters so the content edge meets the viewport edge.
   - Trim the gold frame's chrome (border thickness, top padding) so the
     usable area inside grows.
   - Force every trade hub child to box-sizing:border-box and constrain
     its max-width so a stray inline width can't push horizontal scroll. */
@media (max-width: 600px) {
    .content {
        padding-left: 4px;
        padding-right: 4px;
    }
    body.route-trade-hub #content {
        border-width: 2px;
        border-radius: 14px;
        margin-top: 4px;
        padding-top: calc(var(--nav-height) + var(--space-sm));
    }
    body.route-trade-hub #content > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Make trade UI scaffolding use the full inner width on phones. */
    .trade-tab-content,
    .trade-page,
    .trade-tab-bar,
    .trade-grid,
    .trade-card,
    .trade-modal-overlay,
    .trade-mm-queue,
    .trade-mm-ongoing,
    .trade-mm-history,
    .trade-mm-section-toggle {
        max-width: 100%;
        box-sizing: border-box;
    }
    .trade-card {
        margin-left: 0;
        margin-right: 0;
        padding: var(--space-sm);
    }
    /* Ensure the auth/profile card fills available width instead of
       collapsing to fit-content on narrow viewports. The Roblox-linked
       layout adds an extra row, which used to push the inline min-width
       past the available space — `min-width: 0` lets the card shrink
       cleanly; `width: 100%` makes it span the inner area. */
    .trade-auth-logged-in {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* The header row (leaderboard column + auth card) is forced to
       flex-wrap: nowrap by an inline <style> tag, so on small phones the
       Roblox-linked card gets crushed. Drop nowrap + stack vertically
       so the buttons sit on top of a full-width identity card.
       text-align:center kills the left/right asymmetry between the
       Discord row and the Roblox row — both rows now center-align. */
    .trade-auth-section {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }
    /* Both button columns flatten — their children become direct flex
       items of the section. The auth card has width:100% so it takes
       its own row, then the 4 buttons (MM, Traders, LB, Notif) line
       up below in a single strip. */
    .trade-auth-section > div:first-of-type,
    .trade-auth-section > .trade-auth-right-buttons {
        display: contents !important;
    }
    .trade-auth-logged-in {
        order: 0 !important;
        width: 100% !important;
    }
    #tradeMiddlemenBtn { order: 1 !important; }
    #tradeTradersBtn { order: 2 !important; }
    #tradeLeaderboardBtn { order: 3 !important; }
    #tradeNotificationsBtn { order: 4 !important; }
    #tradeLeaderboardBtn,
    #tradeNotificationsBtn,
    #tradeMiddlemenBtn,
    #tradeTradersBtn {
        width: 64px !important;
        height: 64px !important;
        flex-shrink: 0 !important;
    }
    #tradeLeaderboardBtn img {
        width: 38px !important;
        height: 38px !important;
    }
    #tradeMiddlemenBtn svg,
    #tradeTradersBtn svg {
        width: 34px !important;
        height: 34px !important;
    }
    #tradeNotificationsBtn > span:first-child {
        font-size: 1.9rem !important;
    }
    /* Center the Discord + Roblox row content as a whole so the
       avatar+text pair sits in the middle of the row, matching across
       both rows regardless of text length. */
    .trade-auth-self-profile {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    .trade-auth-self-profile > div {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        /* overflow:visible (was hidden) so the nickname's text-shadow
           glow + animation render outside the text box on mobile, the
           same way they do on desktop. Padding gives the glow vertical
           breathing room so it doesn't get clipped by the row above. */
        overflow: visible !important;
        padding: 2px 0 !important;
        align-items: center !important;
        text-align: center !important;
    }
    .trade-auth-self-profile > div > span {
        text-align: center !important;
    }
}

/* Very narrow phones (< 360px CSS px) — kill the gold frame entirely
   so the usable inner area = viewport. The frame is decorative, not
   structural; on a 320px screen it just steals 30+ px of width. */
@media (max-width: 360px) {
    body.route-trade-hub #content {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .content {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Reusable pill-style section title (gradient text + icon chip) */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 22px;
    margin: var(--space-xl) auto var(--space-md);
    width: fit-content;
    max-width: 100%;
    background: rgba(10, 10, 16, 0.82);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 999px;
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 215, 0, 0.05) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-title-icon {
    font-size: 1.35rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.section-title-text {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #FFE98A 0%, #FFD700 45%, #FFB347 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* page-header-shimmer removed — was animating background-position
       on a gradient, which paints every frame. The static gradient text
       still looks vivid without the moving shimmer. */
}

/* --- Page sections --- */
.page-header {
    margin-bottom: var(--space-lg);
    position: relative;
    padding: var(--space-md) var(--space-lg);
    background: rgba(10, 10, 16, 0.72);
    border: 1px solid rgba(255, 215, 0, 0.16);
    border-radius: var(--border-radius);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 215, 0, 0.04) inset;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-header h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #FFE98A 0%, #FFD700 35%, #FFB347 65%, #FF8EC7 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Single light drop-shadow — was two stacked shadows (one with 40px
       blur radius), each forcing its own GPU compositing layer. Reduced
       to a single 8px-blur shadow which gives the same readable depth
       at a fraction of the paint cost. */
    filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.28));
    display: inline-block;
    position: relative;
    /* page-header-shimmer removed — was animating background-position
       on a gradient, which paints every frame. The static gradient text
       still looks vivid without the moving shimmer. */
}

.page-header h1::after {
    content: '';
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #FFD700 0%, #FF8EC7 60%, rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 0 18px rgba(255, 215, 0, 0.55),
        0 0 4px rgba(255, 142, 199, 0.4);
    transform-origin: left;
    animation: page-header-bar-grow 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-header p {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    max-width: 600px;
    margin-top: var(--space-sm);
}

/* Center alignment when inline-styled */
.page-header[style*="text-align:center"] h1,
.page-header h1[style*="text-align:center"] { display: inline-block; }
.page-header[style*="text-align:center"] h1::after,
.page-header h1[style*="text-align:center"]::after {
    margin-left: auto;
    margin-right: auto;
    transform-origin: center;
}

@keyframes page-header-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes page-header-bar-grow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .page-header h1 { animation: none; }
    .page-header h1::after { animation: none; }
}

.page-section {
    margin-bottom: var(--space-2xl);
}

/* Reusable section-intro panel (for section headers + short descriptions)
   so they stay readable on the animated background */
.section-panel {
    max-width: 760px;
    margin: 0 auto var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(10, 10, 16, 0.82);
    border: 1px solid rgba(255, 215, 0, 0.22);
    border-radius: var(--border-radius);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 215, 0, 0.04) inset;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
}
.section-panel h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}
.section-panel p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-text-primary);
    opacity: 0.92;
    line-height: 1.5;
    font-weight: 500;
}

/* --- Discord Banner --- */
.discord-banner-wrap {
    position: relative;
    z-index: 1;
    padding: 0 0 var(--space-lg);
    max-width: 760px;
    margin: var(--space-xl) auto 0;
}

.discord-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 14px 20px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #14141c 0%, #1a1a28 55%, #201a30 100%);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid rgba(88, 101, 242, 0.35);
    box-shadow:
        0 10px 40px -10px rgba(88, 101, 242, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    isolation: isolate;
}

.discord-banner:hover {
    transform: translateY(-3px);
    border-color: rgba(88, 101, 242, 0.7);
    box-shadow:
        0 18px 55px -12px rgba(88, 101, 242, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.discord-banner-glow {
    position: absolute;
    inset: -40% -10%;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 40%, rgba(88, 101, 242, 0.30), transparent 75%),
        radial-gradient(circle at 85% 70%, rgba(139, 92, 246, 0.24), transparent 80%),
        radial-gradient(circle at 55% 20%, rgba(255, 215, 0, 0.08), transparent 80%);
    /* filter:blur removed — wider gradient stops above (transparent at
       75-80% instead of 55-60%) provide the soft aura look without the
       GPU rasterization cost. */
    animation: discord-glow-pulse 6s ease-in-out infinite;
    pointer-events: none;
}

.discord-banner-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(88, 101, 242, 0.10) 45%,
        rgba(140, 150, 255, 0.22) 50%,
        rgba(88, 101, 242, 0.10) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: discord-shine-sweep 5.5s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.discord-banner-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 50%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow:
        0 4px 12px rgba(88, 101, 242, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    animation: discord-icon-bob 4s ease-in-out infinite;
}

.discord-banner-icon svg {
    width: 26px;
    height: auto;
}

.discord-banner-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.discord-banner-eyebrow {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.discord-banner-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.discord-banner-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.35;
    margin-top: 2px;
}

.discord-banner-cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow:
        0 4px 12px rgba(88, 101, 242, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.discord-banner:hover .discord-banner-cta {
    background: linear-gradient(135deg, #6a76ff 0%, #8b9cff 100%);
    transform: translateX(4px);
    box-shadow:
        0 8px 24px rgba(88, 101, 242, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

.discord-banner-arrow {
    display: inline-block;
    transition: transform 180ms ease;
}

.discord-banner:hover .discord-banner-arrow {
    transform: translateX(4px);
}

.discord-banner-live {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
}

.discord-banner-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43B581;
    position: relative;
    /* The expanding-ring pulse used to animate `box-shadow: 0 0 0 Npx`
       which forces a paint per frame. Now we use a pseudo-element with
       a static box-shadow + animated transform/opacity (composited,
       effectively free). */
}
.discord-banner-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(67, 181, 129, 0.7);
    opacity: 0.7;
    transform: scale(1);
    animation: discord-pulse-ring 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes discord-shine-sweep {
    0%   { transform: translateX(0) skewX(-18deg); }
    100% { transform: translateX(280%) skewX(-18deg); }
}
@keyframes discord-glow-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes discord-icon-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-4px) rotate(3deg); }
}
@keyframes discord-pulse-ring {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(2.6);  opacity: 0; }
    100% { transform: scale(2.6);  opacity: 0; }
}

@media (max-width: 640px) {
    .discord-banner {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: var(--space-md);
    }
    .discord-banner-content { align-items: center; }
    .discord-banner-title { font-size: 1.25rem; }
    .discord-banner-desc { font-size: 0.85rem; }
    .discord-banner-live { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .discord-banner-shine,
    .discord-banner-glow,
    .discord-banner-icon,
    .discord-banner-pulse { animation: none; }
}

/* --- Footer --- */
/* Translucent bottom bar so the floating Lucky Blocks / gold wash
   bleed through instead of a hard opaque wall. 4px backdrop blur
   keeps text sharp while still showing the moving background. */
.footer {
    position: relative;
    z-index: 1;
    background: rgba(17, 17, 24, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-top: 1px solid rgba(255, 215, 0, 0.22);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center;
}

.footer-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
}

.footer-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    width: 100%;
    max-width: 780px;
}

.footer-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 14px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(22, 22, 30, 0.88), rgba(16, 16, 24, 0.92));
    border: 1px solid rgba(255, 215, 0, 0.22);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 40%, rgba(255, 215, 0, 0.14), transparent 65%);
    pointer-events: none;
    opacity: 0.8;
}

/* Play now on Roblox — Roblox brand-blue treatment so it reads as an
   "Entering Roblox" button instead of a dark gold panel. Gradient fill
   + bright blue border + blue glow + pulse. The ::before radial is
   overridden here; the ::after overlay adds a subtle angled sheen that
   sweeps across the button. Specific rules below override the default
   gold .footer-cta-title gradient text, the grey eyebrow, and the
   gold arrow so the whole button reads in one cohesive blue. */
.footer-cta-play {
    background: linear-gradient(135deg, #00A2FF 0%, #0082E0 45%, #005CB8 100%);
    border: 2px solid #00B8FF;
    box-shadow:
        0 8px 22px rgba(0, 140, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset,
        inset 0 -3px 0 rgba(0, 0, 0, 0.18);
    /* footer-cta-play-pulse removed — was animating a 3-layer box-shadow
       infinitely, repainting the entire button every frame. The sheen
       sweep on ::after still gives a sense of liveliness. */
}

.footer-cta-play::before {
    background: radial-gradient(ellipse at 25% 30%, rgba(255, 255, 255, 0.28), transparent 70%), radial-gradient(ellipse at 80% 90%, rgba(0, 60, 140, 0.55), transparent 60%);
}

/* Angled sheen — sweeps across the Play CTA every 3.5s. Fire-and-forget
   animation; no layout impact (just a gradient inside the pseudo). */
.footer-cta-play::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.22) 52%, transparent 65%);
    transform: translateX(-110%);
    animation: footer-cta-play-sheen 3.5s ease-in-out infinite;
    pointer-events: none;
}

.footer-cta-play:hover {
    transform: translateY(-3px);
    border-color: #7FD8FF;
    box-shadow:
        0 14px 30px rgba(0, 140, 255, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* Override the default gold gradient title with solid white so the
   button reads as a single blue block with crisp white lettering. */
.footer-cta-play .footer-cta-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #fff;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 60, 140, 0.6);
}

.footer-cta-play .footer-cta-eyebrow {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 60, 140, 0.55);
}

.footer-cta-play .footer-cta-icon {
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 60, 140, 0.55));
}

.footer-cta-play .footer-cta-arrow {
    color: #fff;
}

@keyframes footer-cta-play-pulse {
    0%, 100% {
        box-shadow:
            0 8px 22px rgba(0, 140, 255, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.15) inset,
            inset 0 -3px 0 rgba(0, 0, 0, 0.18);
    }
    50% {
        box-shadow:
            0 8px 30px rgba(0, 170, 255, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.22) inset,
            inset 0 -3px 0 rgba(0, 0, 0, 0.18);
    }
}

@keyframes footer-cta-play-sheen {
    0%   { transform: translateX(-110%); }
    60%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
}

.footer-cta-community::before {
    background: radial-gradient(ellipse at 20% 40%, rgba(88, 101, 242, 0.2), transparent 65%), radial-gradient(ellipse at 80% 70%, rgba(156, 39, 176, 0.18), transparent 65%);
}

.footer-cta:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 215, 0, 0.08) inset;
}

.footer-cta > * { position: relative; z-index: 1; }

.footer-cta-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.footer-cta-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.footer-cta-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
}

.footer-cta-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.1;
    background: linear-gradient(135deg, #FFE98A 0%, #FFD700 50%, #FFB347 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.footer-cta-arrow {
    color: var(--color-primary);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 180ms ease;
    flex-shrink: 0;
}

.footer-cta:hover .footer-cta-arrow {
    transform: translateX(4px);
}

.footer-socials {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.footer-social svg { width: 20px; height: 20px; }

/* Brand colours live on the BASE class now (not just :hover) so the
   Discord blurple, Instagram gradient, and Twitter/X black show by
   default on desktop and mobile. Hover still adds a soft lift + glow
   so the button feels interactive. */
.footer-social-discord {
    color: #fff;
    background: #5865F2;
    border-color: #5865F2;
}

.footer-social-instagram {
    color: #fff;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
}

.footer-social-twitter {
    color: #fff;
    background: #000;
    border-color: rgba(255, 255, 255, 0.25);
}

.footer-social:hover {
    transform: translateY(-2px);
}

.footer-social-discord:hover {
    box-shadow: 0 6px 18px rgba(88, 101, 242, 0.55);
}

.footer-social-instagram:hover {
    box-shadow: 0 6px 18px rgba(220, 39, 67, 0.55);
}

.footer-social-twitter:hover {
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.18);
}

.footer-meta p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.footer-about-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    transition: color 180ms ease;
}

.footer-about-link:hover { color: var(--color-primary-light); text-decoration: underline; }

.footer-sub {
    margin-top: var(--space-xs) !important;
    font-size: 0.75rem !important;
    opacity: 0.6;
}

@media (max-width: 640px) {
    .footer-ctas { grid-template-columns: 1fr; }
    .footer-cta { padding: 12px 14px; }
    .footer-cta-title { font-size: 1rem; }
}

/* --- Scroll to top --- */
.scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg-darkest);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
    z-index: 900;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
}

/* --- Utility classes --- */
.text-gold { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* --- Loading state --- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    color: var(--color-text-muted);
}

.loading::after {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 215, 0, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: var(--space-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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