/**
 * Filter tabs — "Все" (active) / "Топ" (locked).
 *
 * Every dimension derives from a single scale unit `--u`, which equals one
 * pixel of the design reference. Changing `--u` rescales the whole component
 * while keeping the measured proportions exact.
 */

:root {
    /**
     * 1u == one reference pixel.
     * - At ~1280px / 100% zoom → ~0.93px (compact, not oversized)
     * - When zoomed out (large CSS viewport) → grows up to 2.4px so UI
     *   doesn't collapse into a thin strip over empty page.
     * Uses min(vw, 1.55*vh) so extreme wide+short zoom-out still scales.
     */
    --u: clamp(0.88px, calc(min(100vw, 155vh) / 1450), 2.4px);

    /** Safe areas for notched phones */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /** Surface */
    --app-bg: #0C0C1A;

    /**
     * Active tab: a near-flat vertical gradient. Endpoints are the linear fit
     * of the reference's own vertical profile, extrapolated to both edges.
     */
    --tab-active-top: #1E86F8;
    --tab-active-bottom: #4BA4FF;
    --tab-active-fg: #FFFFFF;

    /** Shared accent fills — soft top→bottom gradients on coloured controls. */
    --blue-top: #1E86F8;
    --blue-bottom: #4BA4FF;
    --orange-top: #E88912;
    --orange-bottom: #F5B03A;
    --green-top: #25A049;
    --green-bottom: #3DC86A;

    /**
     * Flat control fills — no glass sheen / inset “3D” edges.
     */
    --gloss-sheen: none;
    --gloss-blue: linear-gradient(
        180deg,
        #4BA4FF 0%,
        #1E86F8 55%,
        #1676E0 100%
    );
    --gloss-orange: linear-gradient(
        180deg,
        #F5B03A 0%,
        #E88912 55%,
        #D4780A 100%
    );
    --gloss-green: linear-gradient(
        180deg,
        #3DC86A 0%,
        #25A049 55%,
        #1E8B3D 100%
    );
    --gloss-dark: linear-gradient(
        180deg,
        #2A2A44 0%,
        #1E1E34 55%,
        #161628 100%
    );
    --gloss-shadow: none;

    /**
     * Locked tab: the reference profile is not a straight ramp — it holds two
     * flat plateaus with a short transition at ~52-70% of the height, plus a
     * darker top edge that melts into the page background.
     */
    --tab-locked-edge: #131324;
    --tab-locked-top: #1A1A2C;
    --tab-locked-bottom: #1E1D32;
    --tab-locked-fg: #4B4B66;

    /** Geometry (reference units) */
    --tab-width: calc(96 * var(--u));
    --tab-height: calc(33 * var(--u));
    --tab-radius: calc(10.2 * var(--u));
    --tab-stack-gap: calc(9.6 * var(--u));
    --tab-icon-gap: calc(6.8 * var(--u));
    --tab-font-size: calc(12 * var(--u));

    /** Offset of the stack from the top-left corner of the viewport. */
    --stack-inset: calc(12 * var(--u));

    /** State cross-fade: short and eased, in line with native UI timings. */
    --tab-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    /**
     * Drop-card hover timings.
     * Out is faster so the card clears before the profile lands;
     * in uses a soft overshoot curve for the avatar pop.
     */
    --card-hover: 320ms cubic-bezier(0.16, 1, 0.3, 1);
    --card-hover-out: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --card-hover-pop: 420ms cubic-bezier(0.34, 1.4, 0.64, 1);

    /**
     * Drop feed. Measured off the reference screenshot, which is 0.8125x the
     * scale of the tab reference; every figure below is already converted to
     * the shared 1u grid. A card is exactly as wide as a tab, and the feed
     * reuses the tab stack's gap as its own.
     */
    --card-width: var(--tab-width);
    --card-radius: calc(16 * var(--u));
    --card-gap: var(--tab-stack-gap);

    /**
     * The reference card measures 75.1u tall, which is the height of the tab
     * stack to within half a pixel. Deriving it keeps the feed flush with the
     * stack at any value of `--u`.
     */
    --card-height: calc(2 * var(--tab-height) + var(--tab-stack-gap));

    --card-pad-left: calc(10.1 * var(--u));
    --card-pad-bottom: calc(10.1 * var(--u));
    --card-kind-size: calc(8.9 * var(--u));
    --card-kind-line: calc(10.8 * var(--u));
    --card-name-size: calc(11 * var(--u));

    /** Clipped highlight bar sitting on the card's top edge. */
    --card-sheen-width: calc(24 * var(--u));
    --card-sheen-height: calc(3.2 * var(--u));
}

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

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html,
body {
    height: 100%;
    max-width: 100%;
    overflow-x: clip;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /**
     * Gap feed → stage measured off the reference (~8px under a 61px card
     * row → ~10u on our grid).
     */
    gap: calc(10 * var(--u));
    padding:
        calc(var(--stack-inset) + var(--safe-top))
        calc(var(--stack-inset) + var(--safe-right))
        calc(var(--stack-inset) + var(--safe-bottom))
        calc(var(--stack-inset) + var(--safe-left));
    background: var(--app-bg);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

img {
    /** Prefer sharp downscale when browser zoom/DPI changes */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

button,
input,
textarea,
select {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}

button {
    touch-action: manipulation;
}

.drop-panel {
    /** Tab stack on the left, drop feed continuing to the right. */
    display: flex;
    align-items: flex-start;
    gap: var(--card-gap);

    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
}

/**
 * Stage under the drop row. Sized off the reference header
 * (height ≈ 0.9 × card). Brand cluster left, actions right.
 */
.page-stage {
    --stage-ctrl: calc(38 * var(--u));

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12 * var(--u));

    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    height: calc(1.05 * var(--card-height));
    padding: 0 calc(18 * var(--u));

    background: #121222;
    border-radius: calc(20 * var(--u));
}

/**
 * Left brand strip — logo + SKINRUSH + nav + mode + online.
 */
.stage-brand {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    min-width: 0;
    flex-shrink: 1;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: calc(9 * var(--u));
    flex: 0 0 auto;
    height: var(--stage-ctrl);
    margin-right: calc(16 * var(--u));
    text-decoration: none;
    color: inherit;
}

.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--stage-ctrl);
    height: var(--stage-ctrl);
    flex: 0 0 auto;
    overflow: hidden;

    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);
}

.brand__logo {
    display: block;
    width: calc(18 * var(--u));
    height: auto;
}

.brand__name {
    display: inline-flex;
    align-items: center;
    height: var(--stage-ctrl);
    font-family: inherit;
    font-size: calc(32 * var(--u));
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.045em;
    color: #FFFFFF;
    white-space: nowrap;
}

.nav-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    z-index: 25;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(7 * var(--u));

    height: var(--stage-ctrl);
    padding: 0 calc(16 * var(--u));
    overflow: hidden;

    border: 0;
    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);

    font-family: inherit;
    font-size: var(--tab-font-size);
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: filter 160ms ease, background-color 160ms ease;
}

.nav-btn:hover,
.nav-btn[aria-expanded="true"] {
    filter: brightness(1.06);
}

.nav-btn__icon {
    display: block;
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    flex: 0 0 auto;
    align-self: center;
}

.nav-btn__label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    /* Cap height sits slightly high vs square icon — nudge text down */
    transform: translateY(calc(0.6 * var(--u)));
}

.nav-overlay {
    --nav-open: 240ms;
    --nav-close: 180ms;
    --nav-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nav-ease-in: cubic-bezier(0.4, 0, 1, 1);

    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20 * var(--u));

    background: rgba(6, 6, 16, 0.62);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity var(--nav-close) var(--nav-ease-in),
        visibility 0s linear var(--nav-close);
}

.nav-overlay.nav-overlay--visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
        opacity var(--nav-open) var(--nav-ease-out),
        visibility 0s linear 0s;
}

.nav-overlay[hidden] {
    display: none;
}

.nav-modal {
    width: min(720px, 100%);
    max-height: min(90vh, 640px);
    overflow: auto;
    padding: calc(22 * var(--u));

    border-radius: calc(22 * var(--u));
    background:
        radial-gradient(90% 70% at 12% 0%, rgba(65, 155, 255, 0.16) 0%, transparent 50%),
        linear-gradient(180deg, #1A1A30 0%, #121222 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);

    opacity: 0;
    transform: translateY(calc(10 * var(--u))) scale(0.97);
    transform-origin: center center;

    transition:
        opacity var(--nav-close) var(--nav-ease-in),
        transform var(--nav-close) var(--nav-ease-in);
}

.nav-overlay--visible .nav-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity var(--nav-open) var(--nav-ease-out),
        transform var(--nav-open) var(--nav-ease-out);
}

.nav-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(12 * var(--u));
    margin-bottom: calc(18 * var(--u));
}

.nav-modal__heading {
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    min-width: 0;
}

.nav-modal__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    margin-top: calc(2 * var(--u));
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.88);
}

.nav-modal__home svg {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
}

.nav-modal__titles {
    min-width: 0;
}

.nav-modal__title {
    margin: 0;
    font-size: calc(22 * var(--u));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.nav-modal__subtitle {
    margin: calc(5 * var(--u)) 0 0;
    font-size: calc(12.5 * var(--u));
    font-weight: 600;
    line-height: 1.3;
    color: rgba(170, 190, 230, 0.72);
}

.nav-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: calc(10 * var(--u));
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, color 140ms ease;
}

.nav-modal__close svg {
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
}

.nav-modal__close:hover,
.nav-modal__close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    outline: none;
}

.nav-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10 * var(--u));
}

.nav-card {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    min-width: 0;
    padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));

    border-radius: calc(14 * var(--u));
    background: rgba(8, 10, 22, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        transform 140ms ease;
}

.nav-card:hover,
.nav-card:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    outline: none;
}

.nav-card:hover .nav-card__arrow,
.nav-card:focus-visible .nav-card__arrow {
    opacity: 0.85;
    transform: translateX(calc(2 * var(--u)));
}

.nav-card:active {
    transform: scale(0.985);
}

.nav-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(46 * var(--u));
    height: calc(46 * var(--u));
    flex: 0 0 auto;
    border-radius: calc(12 * var(--u));
    border: 1px solid transparent;
}

.nav-card__icon svg {
    display: block;
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
}

.nav-card__icon--cases {
    color: #6BB6FF;
    background: rgba(65, 155, 255, 0.16);
    border-color: rgba(65, 155, 255, 0.22);
}

.nav-card__icon--upgrade {
    color: #5EE0A0;
    background: rgba(46, 196, 120, 0.14);
    border-color: rgba(46, 196, 120, 0.24);
}

.nav-card__icon--crash {
    color: #FF7EB0;
    background: rgba(230, 70, 130, 0.14);
    border-color: rgba(230, 70, 130, 0.24);
}

.nav-card__icon--bonus {
    color: #FFC45C;
    background: rgba(253, 175, 48, 0.14);
    border-color: rgba(253, 175, 48, 0.24);
}

.nav-card__icon--contract {
    color: #B4A6FF;
    background: rgba(124, 108, 230, 0.16);
    border-color: rgba(124, 108, 230, 0.24);
}

.nav-card__icon--refs {
    color: #7AD0FF;
    background: rgba(70, 170, 235, 0.14);
    border-color: rgba(70, 170, 235, 0.24);
}

.nav-card__text {
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--u));
    min-width: 0;
    flex: 1 1 auto;
}

.nav-card__title {
    font-size: calc(15 * var(--u));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.nav-card__desc {
    font-size: calc(11.5 * var(--u));
    font-weight: 600;
    line-height: 1.25;
    color: rgba(170, 190, 230, 0.7);
}

.nav-card__arrow {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    flex: 0 0 auto;
    margin-right: calc(2 * var(--u));
    border-right: 1.7px solid rgba(255, 255, 255, 0.7);
    border-top: 1.7px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    opacity: 0.35;
    transition:
        opacity 160ms ease,
        transform 160ms ease;
}

@media (max-width: 640px) {
    .nav-overlay {
        padding: calc(12 * var(--u));
        align-items: flex-end;
    }

    .nav-modal {
        width: 100%;
        max-height: 86vh;
        padding: calc(16 * var(--u));
        border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
    }

    .nav-modal__grid {
        grid-template-columns: 1fr;
        gap: calc(8 * var(--u));
    }

    .nav-modal__title {
        font-size: calc(18 * var(--u));
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-overlay,
    .nav-modal {
        transition: none;
        transform: none;
    }

    .nav-card:active {
        transform: none;
    }

    .nav-card:hover .nav-card__arrow,
    .nav-card:focus-visible .nav-card__arrow {
        transform: rotate(45deg);
    }
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--stage-ctrl);
    height: var(--stage-ctrl);
    padding: 0;

    border: 0;
    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-orange);
    box-shadow: var(--gloss-shadow);
    overflow: hidden;

    color: #FFFFFF;
    line-height: 0;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.mode-btn__icon {
    display: block;
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    margin: auto;
    object-fit: contain;
    object-position: center center;
    transform: translate(calc(1 * var(--u)), calc(0 * var(--u)));
}

.online-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(7 * var(--u));

    height: var(--stage-ctrl);
    padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u));
    box-sizing: border-box;
    overflow: hidden;

    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-green);
    box-shadow: var(--gloss-shadow);

    font-family: inherit;
    font-size: var(--tab-font-size);
    color: #FFFFFF;
    white-space: nowrap;
    line-height: 1;
}

.online-pill__dot {
    position: relative;
    display: block;
    width: 1.167em;
    height: 1.167em;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.online-pill__dot::after {
    content: "";
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: #FFFFFF;
}

.online-pill__count {
    display: block;

    font-size: 1em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: translateY(0.06em);
}

.promo-banner {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    height: var(--stage-ctrl);
    padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    pointer-events: auto;

    border: 0;
    border-radius: calc(16 * var(--u));
    background-image:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0) 40%
        ),
        linear-gradient(
            180deg,
            #26253C 0%,
            #1E1D32 52%,
            #1B1A2E 100%
        );
    box-shadow: none;
}

.promo-banner__timer {
    display: inline-flex;
    align-items: center;
    gap: calc(7 * var(--u));
    min-width: 0;
    color: #FFFFFF;
}

.promo-banner__refresh {
    display: block;
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    flex: 0 0 auto;
}

.promo-banner__time {
    font-family: inherit;
    font-size: var(--tab-font-size);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.promo-banner__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 calc(14 * var(--u));
    margin: 0;
    border: 0;
    border-radius: calc(var(--tab-radius) - 3 * var(--u));
    background-image:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0) 42%
        ),
        linear-gradient(
            180deg,
            #62B6FF 0%,
            #3FA0F8 55%,
            #3494EE 100%
        );
    box-shadow: none;

    font-family: inherit;
    font-size: var(--tab-font-size);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;
    user-select: all;
    -webkit-user-select: all;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: filter 120ms ease;
}

.promo-banner__code:hover {
    filter: brightness(1.04);
}

.promo-banner__code:active {
    filter: brightness(0.97);
}

.promo-banner__code.is-copied {
    filter: none;
}

/**
 * Right-aligned actions. Auth radius / type match the «Все» / «Топ» tabs.
 */
.stage-actions {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    min-width: 0;
    flex-shrink: 1;
    margin-left: auto;
}

@media (max-width: 1280px) {
    .brand__name {
        font-size: calc(26 * var(--u));
    }

    .brand {
        margin-right: calc(8 * var(--u));
    }
}

@media (max-width: 1100px) {
    .nav-btn__label {
        display: none;
    }

    .nav-btn {
        width: var(--stage-ctrl);
        padding: 0;
    }
}

@media (max-width: 860px) {
    .brand__name {
        display: none;
    }

    .mode-btn {
        display: none;
    }

    .page-stage {
        gap: calc(8 * var(--u));
        padding: 0 calc(12 * var(--u));
    }

    .stage-brand,
    .stage-actions {
        min-width: 0;
    }
}

.stage-actions[data-auth="user"] .auth-btn {
    display: none;
}

.stage-actions[data-auth="guest"] .stage-actions__user {
    display: none;
}

.stage-actions__user {
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    flex: 0 0 auto;
    min-width: 0;
}

.stage-actions__icons {
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
    flex: 0 0 auto;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: var(--stage-ctrl);
    padding: 0 calc(28 * var(--u));
    overflow: hidden;

    border: 0;
    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);

    font-family: inherit;
    font-size: var(--tab-font-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: #FFFFFF;
    white-space: nowrap;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--stage-ctrl);
    height: var(--stage-ctrl);
    padding: calc(2 * var(--u));
    flex: 0 0 auto;

    border: 0;
    border-radius: var(--tab-radius);
    overflow: hidden;
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.user-avatar__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--tab-radius) - 2 * var(--u));
    border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.2);
}


.wallet-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    z-index: 20;
}

.wallet {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    width: max-content;
    height: var(--stage-ctrl);
    padding: 0 calc(5 * var(--u)) 0 calc(12 * var(--u));
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;

    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);

    color: #FFFFFF;
    font-family: inherit;
    line-height: 1;
}

.wallet__value {
    display: inline-flex;
    align-items: center;
    gap: calc(5 * var(--u));
    min-width: 0;
    white-space: nowrap;
}

.wallet__amount {
    display: inline-block;

    font-size: calc(14.5 * var(--u));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 40, 100, 0.2);
}

.wallet__currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: calc(24 * var(--u));
    min-width: calc(24 * var(--u));
    height: calc(24 * var(--u));
    padding: 0;

    border: 0;
    border-radius: var(--tab-radius);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;

    font-family: inherit;
    font-size: calc(11.5 * var(--u));
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.wallet__currency:hover,
.wallet__currency[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.28);
}

.currency-menu,
.lang-menu {
    --stage-dropdown-radius: calc(14 * var(--u));
}

.currency-menu {
    --stage-dropdown-radius: var(--tab-radius);
    --currency-menu-open: 220ms;
    --currency-menu-close: 160ms;
    --currency-menu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --currency-menu-ease-in: cubic-bezier(0.4, 0, 1, 1);

    position: absolute;
    top: calc(100% + 6 * var(--u));
    left: 0;
    z-index: 40;

    display: flex;
    flex-direction: column;
    gap: calc(3 * var(--u));
    width: max(100%, calc(182 * var(--u)));
    width: var(--stage-dropdown-width);
    min-width: calc(182 * var(--u));
    padding: calc(9 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
    box-sizing: border-box;

    border-radius: var(--stage-dropdown-radius);
    overflow: hidden;
    background-image: linear-gradient(
        180deg,
        #22223A 0%,
        #171728 55%,
        #121222 100%
    );
    box-shadow: none;
    border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.35);
    outline: 1px solid rgba(255, 255, 255, 0.03);
    outline-offset: -1px;

    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, calc(-5 * var(--u)), 0);
    transform-origin: top left;
    pointer-events: none;

    transition:
        opacity var(--currency-menu-close) var(--currency-menu-ease-in),
        transform var(--currency-menu-close) var(--currency-menu-ease-in),
        visibility 0s linear var(--currency-menu-close);
}

.currency-menu.currency-menu--visible {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;

    transition:
        opacity var(--currency-menu-open) var(--currency-menu-ease-out),
        transform var(--currency-menu-open) var(--currency-menu-ease-out),
        visibility 0s linear 0s;
}

.currency-menu[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .currency-menu {
        transition: none;
        transform: none;
    }
}

.currency-menu__head {
    padding: 0 calc(6 * var(--u)) calc(5 * var(--u));
    font-size: calc(10.5 * var(--u));
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.currency-menu__option {
    display: flex;
    align-items: center;
    gap: calc(9 * var(--u));
    width: 100%;
    padding: calc(7 * var(--u)) calc(8 * var(--u));

    border: 0;
    border-radius: calc(10 * var(--u));
    background: transparent;

    font-family: inherit;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease;
}

.currency-menu__option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.currency-menu__option[aria-selected="true"] {
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);
}

.currency-menu__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
    flex: 0 0 auto;

    border-radius: calc(8 * var(--u));
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
    font-size: calc(14.5 * var(--u));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.currency-menu__option[aria-selected="true"] .currency-menu__symbol {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: #FFFFFF;
}

.currency-menu__meta {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--u));
    min-width: 0;
    flex: 1 1 auto;
}

.currency-menu__code {
    font-size: calc(12.5 * var(--u));
    font-weight: 600;
    line-height: 1.1;
}

.currency-menu__name {
    font-size: calc(10 * var(--u));
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.48);
}

.currency-menu__option[aria-selected="true"] .currency-menu__name {
    color: rgba(255, 255, 255, 0.88);
}

.currency-menu__check {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 50%;
    background: transparent;
}

.currency-menu__option[aria-selected="true"] .currency-menu__check {
    background: #FFFFFF;
    box-shadow: none;
}

.wallet__sep {
    display: block;
    width: 1px;
    height: calc(16 * var(--u));
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.28);
}

.wallet__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    margin: 0;
    padding: 0;
    flex: 0 0 auto;

    border: 0;
    border-radius: calc(8 * var(--u));
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    color: #FFFFFF;
    line-height: 0;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.wallet__plus-svg {
    display: block;
    width: calc(12 * var(--u));
    height: calc(12 * var(--u));
}

.wallet__plus:hover {
    background: rgba(255, 255, 255, 0.24);
}

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: var(--stage-ctrl);
    height: var(--stage-ctrl);
    padding: 0;

    border: 0;
    border-radius: var(--tab-radius);
    background-image: var(--gloss-sheen), var(--gloss-dark);
    box-shadow: var(--gloss-shadow);
    overflow: visible;

    color: #6B6B88;
    line-height: 0;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.icon-btn__flag,
.icon-btn__glyph {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    width: calc(17 * var(--u));
    height: calc(17 * var(--u));
}

.icon-btn__glyph--bell {
    /**
     * Bell path has more empty padding in the viewBox than gear/flag,
     * so the box is larger to match their apparent size.
     */
    width: calc(20.5 * var(--u));
    height: calc(20.5 * var(--u));
}

.icon-btn__badge {
    position: absolute;
    top: calc(-2.5 * var(--u));
    right: calc(-2.5 * var(--u));
    z-index: 1;

    display: block;
    width: calc(12.5 * var(--u));
    height: calc(12.5 * var(--u));
    padding: 0;

    border-radius: 50%;
    box-shadow: 0 0 0 calc(1.6 * var(--u)) #121222;
    line-height: 0;
    pointer-events: none;
}

.icon-btn__badge-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.filter-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tab-stack-gap);
    flex: 0 0 auto;
}

.filter-tab {
    /** Shared shell: both states are identical in size, radius and layout. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tab-icon-gap);

    /**
     * The inactive gradient is the permanent base layer; the active one rides
     * on `::before` and cross-fades over it. Two gradients with a different
     * number of colour stops are not interpolable, so transitioning
     * `background-image` directly would snap instead of fade.
     */
    position: relative;
    isolation: isolate;
    background-image:
        var(--gloss-sheen),
        linear-gradient(
            180deg,
            var(--tab-locked-edge) 0%,
            var(--tab-locked-top) 13%,
            var(--tab-locked-top) 52%,
            var(--tab-locked-bottom) 70%,
            var(--tab-locked-bottom) 100%
        );
    box-shadow: var(--gloss-shadow);

    width: var(--tab-width);
    height: var(--tab-height);
    padding: 0;

    border: 0;
    border-radius: var(--tab-radius);
    overflow: hidden;

    font-family: inherit;
    font-size: var(--tab-font-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;

    /** Drives the label and, through `currentColor`, the icon. */
    transition: color var(--tab-transition);
}

.filter-tab::before {
    /** Active blue fill, faded in when the tab becomes selected. */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: inherit;
    background-image: var(--gloss-sheen), var(--gloss-blue);
    box-shadow: var(--gloss-shadow);

    opacity: 0;
    transition: opacity var(--tab-transition);
}

.filter-tab__icon {
    display: block;
    flex: 0 0 auto;
    width: calc(13.7 * var(--u));
    height: calc(13.7 * var(--u));
}

.filter-tab__icon--crown {
    width: calc(16.2 * var(--u));
    height: calc(13.2 * var(--u));
}

.filter-tab__label {
    display: block;
}

/** ---------------------------------------------------------------- active */

.filter-tab--active {
    color: var(--tab-active-fg);
}

.filter-tab--active::before {
    opacity: 1;
}

/** --------------------------------------------------------------- inactive */

.filter-tab--locked {
    color: var(--tab-locked-fg);
}

/** ------------------------------------------------------------- drop feed */

.drop-feed {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--card-gap);

    /**
     * Takes whatever width is left of the tab stack. `min-width: 0` lets it
     * shrink below its content, and the clip absorbs sub-pixel rounding so a
     * card can never poke past the edge.
     */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.drop-feed__probe {
    /** Measuring stick for the reference card width; see app.js. */
    position: absolute;
    top: 0;
    left: 0;
    width: var(--card-width);
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

.drop-feed > .drop-card { flex: 0 0 var(--feed-card-width, var(--card-width)); }
.drop-feed > .drop-card--leaving { position:absolute; top:0; pointer-events:none; }
.drop-feed__empty { display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--card-height); padding:12px; color:#9393b3; font-size:calc(12 * var(--u)); text-align:center; border-radius:var(--tab-radius); background:#151526; }
.pending-result-notice { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1100; padding:12px 18px; max-width:calc(100vw - 32px); border:1px solid #4599ed; border-radius:var(--tab-radius); background:#155da5; color:#fff; font:600 14px Inter,sans-serif; cursor:pointer; box-shadow:0 6px 24px #0005; }
.pending-result-notice[hidden] { display:none; }

.filter-tab--locked { color:#9393b3; }

.drop-card {
    position: relative;

    /**
     * Cards share the row equally: app.js picks a count that keeps each one
     * within half a gap of `--card-width`, and the flex basis of 0 spreads
     * the remainder so the row ends exactly at the viewport edge.
     */
    flex: 1 1 0;
    min-width: 0;

    height: var(--card-height);
    border-radius: var(--card-radius);

    /** The card is a link to the owner's profile. */
    display: block;
    text-decoration: none;
    color: inherit;

    /** Clips the weapon render and the sheen to the rounded corners. */
    overflow: hidden;

    background-image: linear-gradient(
        180deg,
        var(--card-top) 0%,
        var(--card-bottom) 100%
    );
    box-shadow: none;
}

.drop-card::before {
    /**
     * Rarity sheen: a short opaque bar clipped by the card's top edge.
     * No blur — the reference reads as a sharp highlight, not a glow.
     */
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;

    width: var(--card-sheen-width);
    height: var(--card-sheen-height);
    margin-left: calc(var(--card-sheen-width) / -2);

    border-radius: 0 0 calc(1.6 * var(--u)) calc(1.6 * var(--u));
    background: var(--card-sheen);
    pointer-events: none;
}

.drop-card::after {
    /**
     * Site logo watermark — black mark, centred, low opacity.
     */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: url("assets/brand/logo.png") center center / 54% no-repeat;
    opacity: 0.04;
    pointer-events: none;
}

/** ------------------------------------------------------- rarity palettes */

/**
 * Official CS2 rarity hex (items_game.txt). Gradients darken the catalogue
 * colour at the top so the card still has depth; sheen is a lighter tint.
 *
 *  extraordinary — ★ редкий спецпредмет (нож), золото кейса #e4ae39
 *  covert        — тайное          #eb4b4b
 *  classified    — засекреченное   #d32ce6
 *  restricted    — запрещённое     #8847ff
 *  milspec       — армейское       #4b69ff
 */

.drop-card--extraordinary {
    --card-top: #9A6E14;
    --card-bottom: #E4AE39;
    --card-sheen: #F0C75A;
}

.drop-card--covert {
    --card-top: #8B1E1E;
    --card-bottom: #EB4B4B;
    --card-sheen: #FF6B6B;
}

.drop-card--classified {
    --card-top: #7A1588;
    --card-bottom: #D32CE6;
    --card-sheen: #E85AF5;
}

.drop-card--restricted {
    --card-top: #4A2088;
    --card-bottom: #8847FF;
    --card-sheen: #A56BFF;
}

.drop-card--milspec,
.drop-card--mil-spec {
    --card-top: #2439B0;
    --card-bottom: #4B69FF;
    --card-sheen: #6B85FF;
}

.drop-card--industrial {
    --card-top: #25476B;
    --card-bottom: #5E98D9;
    --card-sheen: #85BBF2;
}

.drop-card--consumer {
    --card-top: #3C4959;
    --card-bottom: #B0C3D9;
    --card-sheen: #D0DFEF;
}

/** ------------------------------------------------------- card typography */

.drop-card__labels {
    position: absolute;
    left: var(--card-pad-left);
    bottom: var(--card-pad-bottom);
    z-index: 2;

    display: flex;
    flex-direction: column;
    text-align: left;
    white-space: nowrap;
}

.drop-card__kind {
    display: block;
    font-family: inherit;
    font-size: var(--card-kind-size);
    line-height: var(--card-kind-line);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
}

.drop-card__name {
    display: block;
    font-family: inherit;
    font-size: var(--card-name-size);
    line-height: 1;
    font-weight: 600;
    color: #FFFFFF;
}

/** --------------------------------------------------------- item renders */

.drop-card__item {
    /**
     * Steam CDN renders share one slot: centred above the labels, same box
     * for every weapon so the feed reads even. `object-fit: contain` keeps
     * knives and rifles at a matching visual weight without per-skin poses.
     * A slight scale punches through Steam's transparent padding.
     */
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 42%;
    display: block;

    width: 90%;
    height: 62%;
    transform: translate(-50%, -50%) scale(1.14);
    transform-origin: 50% 45%;

    object-fit: contain;
    object-position: center;
    pointer-events: none;

    transition:
        opacity var(--card-hover-out),
        transform var(--card-hover-out),
        filter var(--card-hover-out);
    will-change: opacity, transform, filter;
}

/** ----------------------------------------------------------- owner layer */

/**
 * Hover: skin leaves; avatar + nick on the left, case art on the right.
 */

.drop-card__labels {
    transition:
        opacity 140ms cubic-bezier(0.4, 0, 1, 1),
        transform 140ms cubic-bezier(0.4, 0, 1, 1);
    will-change: opacity, transform;
}

.drop-card__owner {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.drop-card:hover .drop-card__labels,
.drop-card:focus-visible .drop-card__labels {
    opacity: 0;
    transform: translateY(calc(5 * var(--u))) scale(0.96);
}

.drop-card:hover .drop-card__item,
.drop-card:focus-visible .drop-card__item {
    opacity: 0;
    filter: none;
    transform: translate(-50%, -50%) scale(1.22) translateY(calc(-5 * var(--u)));
}

.drop-card__avatar {
    position: absolute;
    left: var(--card-pad-left);
    top: calc(16 * var(--u));
    z-index: 4;
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));

    border-radius: 50%;
    object-fit: cover;

    box-shadow: 0 0 0 calc(1.4 * var(--u)) rgba(255, 255, 255, 0.95);

    opacity: 0;
    transform: scale(0.6) translateY(calc(6 * var(--u)));
    filter: none;

    transition:
        opacity 150ms ease,
        transform 150ms ease,
        filter 150ms ease;
    will-change: opacity, transform, filter;
}

.drop-card:hover .drop-card__avatar,
.drop-card:focus-visible .drop-card__avatar {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    transition:
        opacity 280ms ease,
        transform var(--card-hover-pop),
        filter 280ms ease;
    transition-delay: 50ms;
}

.drop-card__nick {
    position: absolute;
    left: var(--card-pad-left);
    bottom: var(--card-pad-bottom);
    z-index: 5;

    max-width: calc(44 * var(--u));
    font-size: var(--card-name-size);
    line-height: 1;
    font-weight: 600;
    color: #FFFFFF;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    opacity: 0;
    transform: translateY(calc(6 * var(--u)));

    transition:
        opacity 150ms ease,
        transform 150ms ease;
    will-change: opacity, transform;
}

.drop-card:hover .drop-card__nick,
.drop-card:focus-visible .drop-card__nick {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--card-hover),
        transform var(--card-hover);
    transition-delay: 110ms;
}

.drop-card__case {
    /**
     * Larger bottom-right case art (preferred size), may clip long nicks.
     */
    position: absolute;
    right: calc(-21 * var(--u));
    bottom: calc(-4 * var(--u));
    z-index: 1;

    height: calc(66 * var(--u));
    width: auto;
    max-width: calc(58 * var(--u));

    opacity: 0;
    transform: translateX(calc(14 * var(--u))) scale(0.94);
    filter: none;

    transition:
        opacity 150ms ease,
        transform 150ms ease;
    will-change: opacity, transform;
    pointer-events: none;
}

.drop-card:hover .drop-card__case,
.drop-card:focus-visible .drop-card__case {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition:
        opacity var(--card-hover),
        transform var(--card-hover-pop);
    transition-delay: 70ms;
}

.drop-card:not(:hover):not(:focus-visible) .drop-card__avatar,
.drop-card:not(:hover):not(:focus-visible) .drop-card__nick,
.drop-card:not(:hover):not(:focus-visible) .drop-card__case {
    transition-delay: 0ms;
}

.drop-card:not(:hover):not(:focus-visible) .drop-card__item,
.drop-card:not(:hover):not(:focus-visible) .drop-card__labels {
    transition-delay: 70ms;
}

.promo-board {
    display: grid;
    flex: 0 0 auto;
    /**
     * Blue + orange fixed. Right side = 5 equal tracks for staggered 2x2:
     * top 2+3, bottom 3+2 (narrow/wide swapped like the reference).
     */
    grid-template-columns:
        minmax(0, 2.12fr)
        minmax(0, 0.78fr)
        minmax(0, 0.5fr)
        minmax(0, 0.5fr)
        minmax(0, 0.5fr)
        minmax(0, 0.5fr)
        minmax(0, 0.5fr);
    grid-template-rows: 1fr 1fr;
    gap: calc(12 * var(--u));
    width: 100%;
    height: calc(348 * var(--u));
}

.promo-hero {
    position: relative;
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;

    border: 0;
    border-radius: calc(16 * var(--u));
    background-color: #1E86F8;
    background-image: var(--gloss-sheen), var(--gloss-blue);
}

/**
 * Site logo watermark — same as drop-card feed.
 */
.promo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("assets/brand/logo.png") 44% 48% / 32% no-repeat;
    opacity: 0.035;
    pointer-events: none;
}

.promo-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    padding: calc(26 * var(--u));
    overflow: hidden;
    border-radius: calc(16 * var(--u));
}

.promo-slot__title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: calc(24 * var(--u));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.promo-slot__badge {
    position: absolute;
    z-index: 3;
    top: calc(18 * var(--u));
    right: calc(18 * var(--u));
    height: calc(28 * var(--u));
    padding: 0 calc(12 * var(--u));
    border-radius: calc(10 * var(--u));
    background: #0C0C1A;
    font-size: calc(12 * var(--u));
    font-weight: 700;
    line-height: calc(28 * var(--u));
    color: #FFFFFF;
}

.promo-giveaway {
    position: relative;
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: calc(34 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
    overflow: hidden;
    isolation: isolate;

    border-radius: calc(16 * var(--u));
    background-color: #FE7620;
    background-image: linear-gradient(180deg, #FE7620 0%, #FD9B35 100%);
    background-repeat: no-repeat;
    box-shadow: none;
}

/* Broad concentric bands behind the prize, matching the reference. */
.promo-giveaway::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 64%;
    width: 120%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
        rgba(255, 232, 181, 0.42) 0% 38%,
        rgba(255, 232, 181, 0.30) 38% 55%,
        rgba(255, 232, 181, 0.20) 55% 72%,
        rgba(255, 232, 181, 0.10) 72% 89%,
        transparent 89% 100%
    );
}

.promo-giveaway__title {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    font-size: calc(23 * var(--u));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-align: center;
}

.promo-giveaway__timer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(6 * var(--u));
    margin-top: calc(12 * var(--u));
    flex: 0 0 auto;
}

.promo-giveaway__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--u));
}

.promo-giveaway__value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(48 * var(--u));
    height: calc(34 * var(--u));
    border-radius: calc(10 * var(--u));
    background: rgba(90, 48, 12, 0.18);
    box-shadow: none;
    font-size: calc(16 * var(--u));
    font-weight: 800;
    line-height: 1;
    color: #FFFFFF;
}

.promo-giveaway__label {
    font-size: calc(10 * var(--u));
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.78);
}

.promo-giveaway__stage {
    position: absolute;
    left: 50%;
    bottom: calc(-56 * var(--u));
    z-index: 1;
    width: 96%;
    height: auto;
    max-height: 68%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    line-height: 0;
}

.promo-giveaway__table {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: none;
}

/* Anchor the prize to the tabletop so both scale together. */
.promo-giveaway__knife {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 90%;
    width: 57%;
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.promo-giveaway__join {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(7 * var(--u));
    width: calc(100% - 34 * var(--u));
    max-width: calc(176 * var(--u));
    height: calc(36 * var(--u));
    margin-top: auto;
    margin-bottom: calc(6 * var(--u));
    padding: 0 calc(12 * var(--u));
    flex: 0 0 auto;

    border: 0;
    border-radius: calc(12 * var(--u));
    background: #FFAA35;
    background-image: linear-gradient(180deg, #FF8C2A 0%, #FFA334 48%, #FFD34E 100%);
    box-shadow: none;

    font-family: inherit;
    font-size: calc(12.5 * var(--u));
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.promo-giveaway__join:hover {
    filter: brightness(1.06);
}

.promo-giveaway__join:active {
    filter: brightness(0.96);
}

.promo-giveaway__join-icon {
    display: block;
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    flex: 0 0 auto;
}

.promo-giveaway__dots {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    margin-top: calc(10 * var(--u));
    flex: 0 0 auto;
}

.promo-giveaway__dot {
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(80, 40, 10, 0.28);
    appearance: none;
    cursor: pointer;
}

.promo-giveaway__dot--active {
    background: #FFFFFF;
}

.promo-slot--contract {
    grid-column: 3 / span 2;
    grid-row: 1;
    background: linear-gradient(165deg, #20ADA5 25%, #35CBC1 100%);
}

.promo-slot--crash {
    text-decoration: none;
    color: #fff;
    grid-column: 5 / span 3;
    grid-row: 1;
    background: linear-gradient(165deg, #DF2E32 20%, #FF5055 100%);
}

.promo-slot--upgrade {
    text-decoration: none;
    color: #fff;
    grid-column: 3 / span 3;
    grid-row: 2;
    background: linear-gradient(165deg, #607A8B 15%, #90A5B3 100%);
}

.promo-slot--battle {
    grid-column: 6 / span 2;
    grid-row: 2;
    background: linear-gradient(165deg, #3F628B 20%, #6694C3 100%);
}

.promo-slot::before {
    content: "";
    position: absolute;
    width: calc(98 * var(--u));
    height: calc(98 * var(--u));
    right: calc(38 * var(--u));
    top: calc(32 * var(--u));
    background: url("assets/brand/logo.png") center / contain no-repeat;
    opacity: 0.035;
    pointer-events: none;
}

.promo-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/promo/card-grain.svg");
    opacity: 0.065;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.promo-slot__stats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: calc(7 * var(--u));
    margin-top: calc(13 * var(--u));
}

.promo-slot__stat {
    display: inline-flex;
    align-items: center;
    gap: calc(3 * var(--u));
    height: calc(32 * var(--u));
    padding: 0 calc(13 * var(--u));
    border-radius: calc(11 * var(--u));
    background: rgba(22, 47, 62, 0.13);
    color: #fff;
    font-size: calc(13 * var(--u));
    font-weight: 700;
    white-space: nowrap;
}

.promo-slot__stat svg {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    flex: none;
    fill: currentColor;
}

.promo-slot__currency {
    flex: none;
    text-align: center;
    font-size: calc(15 * var(--u));
    line-height: 1;
}

.promo-slot__art {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.promo-slot--contract .promo-slot__art {
    width: calc(145 * var(--u));
    right: calc(-23 * var(--u));
    bottom: calc(-8 * var(--u));
}

.promo-slot--crash .promo-slot__art {
    width: calc(160 * var(--u));
    right: calc(-54 * var(--u));
    bottom: calc(-61 * var(--u));
}

.promo-slot--upgrade .promo-slot__art {
    width: calc(188 * var(--u));
    right: calc(-66 * var(--u));
    bottom: calc(-78 * var(--u));
}

.promo-slot--battle .promo-slot__art {
    width: calc(154 * var(--u));
    right: calc(-43 * var(--u));
    bottom: calc(-36 * var(--u));
}

.promo-hero__content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc(11 * var(--u));
    width: min(46%, calc(320 * var(--u)));
    padding: calc(28 * var(--u)) calc(12 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
    pointer-events: auto;
}

.promo-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    height: calc(28 * var(--u));
    padding: 0 calc(11 * var(--u));

    border-radius: var(--tab-radius);
    background: rgba(10, 28, 70, 0.34);
    color: #FFFFFF;
    line-height: 1;
}

.promo-hero__badge-icon {
    display: block;
    width: calc(13 * var(--u));
    height: calc(13 * var(--u));
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.promo-hero__badge-text {
    font-size: calc(12 * var(--u));
    font-weight: 700;
    letter-spacing: 0.01em;
}

.promo-hero__title {
    margin: calc(2 * var(--u)) 0 0;
    padding: 0;
    font-size: calc(40 * var(--u));
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    white-space: nowrap;
}

.promo-hero__subtitle {
    margin: 0;
    padding: 0;
    max-width: calc(270 * var(--u));
    font-size: calc(14 * var(--u));
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

.promo-hero__deposit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--u));
    height: calc(40 * var(--u));
    min-width: calc(124 * var(--u));
    margin-top: calc(8 * var(--u));
    padding: 0 calc(18 * var(--u));

    border: 0;
    border-radius: var(--tab-radius);
    background: #419BFF;
    background-image: linear-gradient(180deg, #62B0FF 0%, #419BFF 48%, #2E8AF5 100%);
    box-shadow: none;

    font-family: inherit;
    font-size: calc(13 * var(--u));
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;

    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.promo-hero__deposit:hover {
    filter: brightness(1.06);
}

.promo-hero__deposit:active {
    filter: brightness(0.96);
}

.promo-hero__deposit-icon {
    display: block;
    width: calc(17 * var(--u));
    height: calc(14 * var(--u));
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.promo-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.promo-hero__character {
    position: absolute;
    right: 7%;
    top: 50%;
    z-index: 2;
    width: auto;
    height: 92%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    transform: translateY(-50%);
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
    isolation: isolate;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    user-select: none;
    -webkit-user-drag: none;
}

.promo-hero__dots {
    position: absolute;
    right: calc(16 * var(--u));
    top: 50%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
    transform: translateY(-50%);
}

.promo-hero__dot {
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 40, 100, 0.32);
    appearance: none;
    cursor: pointer;
}

.promo-hero__dot--active {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    background: #FFFFFF;
}

@media (max-width: 1100px) {
    .promo-board {
        grid-template-columns:
            minmax(0, 2.05fr)
            minmax(0, 0.78fr)
            minmax(0, 0.47fr)
            minmax(0, 0.47fr)
            minmax(0, 0.47fr)
            minmax(0, 0.47fr)
            minmax(0, 0.47fr);
        height: calc(300 * var(--u));
        gap: calc(10 * var(--u));
    }

    .promo-hero__title {
        font-size: calc(36 * var(--u));
    }

    .promo-hero__content {
        width: min(48%, calc(320 * var(--u)));
        padding-left: calc(24 * var(--u));
    }

    .promo-slot__title {
        font-size: calc(15 * var(--u));
    }

    .promo-slot {
        padding: calc(16 * var(--u));
    }

    .promo-slot__stat {
        padding: 0 calc(8 * var(--u));
        font-size: calc(11 * var(--u));
        gap: calc(3 * var(--u));
    }

    .promo-slot__badge {
        top: calc(8 * var(--u));
        right: calc(8 * var(--u));
        font-size: calc(9 * var(--u));
        height: calc(20 * var(--u));
        line-height: calc(20 * var(--u));
    }
}

@media (max-width: 900px) {
    .promo-board {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .promo-hero {
        grid-column: 1 / -1;
        grid-row: auto;
        height: calc(260 * var(--u));
    }

    .promo-giveaway {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: calc(300 * var(--u));
    }

    .promo-slot--contract,
    .promo-slot--crash,
    .promo-slot--upgrade,
    .promo-slot--battle {
        grid-column: auto;
        grid-row: auto;
        grid-column-end: auto;
        min-height: calc(155 * var(--u));
    }

    .promo-hero__title {
        font-size: calc(34 * var(--u));
    }

    .promo-hero__content {
        width: min(50%, calc(300 * var(--u)));
        padding-left: calc(22 * var(--u));
    }
}

@media (max-width: 640px) {
    :root {
        /** Phone: compact but readable */
        --u: clamp(0.95px, calc(100vw / 420), 1.15px);
        --stack-inset: calc(10 * var(--u));
    }

    body {
        gap: calc(12 * var(--u));
    }

    .page-stage {
        flex-wrap: nowrap;
        height: auto;
        min-height: calc(52 * var(--u));
        padding: calc(8 * var(--u)) calc(10 * var(--u));
        gap: calc(8 * var(--u));
    }

    .stage-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .stage-actions {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: auto;
        justify-content: flex-end;
    }

    .stage-actions__user {
        gap: calc(6 * var(--u));
    }

    .drop-panel {
        gap: calc(8 * var(--u));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .drop-panel::-webkit-scrollbar {
        display: none;
    }

    .promo-board {
        grid-template-columns: 1fr;
        gap: calc(10 * var(--u));
    }

    .promo-hero {
        height: auto;
        min-height: calc(340 * var(--u));
    }

    .promo-hero__content {
        position: relative;
        width: auto;
        max-width: none;
        padding: calc(22 * var(--u));
    }

    .promo-hero__visual {
        position: relative;
        height: calc(200 * var(--u));
    }

    .promo-hero__character {
        right: 6%;
        top: auto;
        bottom: -4%;
        height: 68%;
        transform: none;
    }

    .promo-hero::after {
        background-position: 44% 48%;
        background-size: 32%;
        opacity: 0.035;
    }

    .promo-giveaway {
        grid-column: 1;
        min-height: calc(320 * var(--u));
    }

    .promo-slot--contract,
    .promo-slot--crash,
    .promo-slot--upgrade,
    .promo-slot--battle {
        grid-column: 1;
        min-height: calc(155 * var(--u));
    }

    .promo-giveaway__join,
    .promo-hero__deposit,
    .nav-btn,
    .auth-btn,
    .wallet__plus {
        min-height: calc(40 * var(--u));
    }
}

/* Smooth hover lighting in both directions. */
.promo-banner__code,
.promo-giveaway__join,
.promo-hero__deposit {
    transition: filter 300ms ease-in-out;
}

.wallet__currency,
.wallet__plus {
    transition: background-color 300ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .promo-banner__code,
    .promo-giveaway__join,
    .promo-hero__deposit,
    .wallet__currency,
    .wallet__plus {
        transition: none;
    }
}
/** -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .filter-tab,
    .filter-tab::before,
    .drop-card__item,
    .drop-card__labels,
    .drop-card__avatar,
    .drop-card__nick,
    .drop-card__case {
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
        filter: none !important;
    }

    .drop-card:hover .drop-card__avatar,
    .drop-card:focus-visible .drop-card__avatar,
    .drop-card:hover .drop-card__nick,
    .drop-card:focus-visible .drop-card__nick,
    .drop-card:hover .drop-card__case,
    .drop-card:focus-visible .drop-card__case {
        opacity: 1;
        transform: none;
    }
}

/* Match the initial site reveal to the shared page transition. */
@keyframes site-quick-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){body{animation:site-quick-fade 180ms ease-out}}

/* Reference glyphs have tight viewBoxes, so use the same apparent icon size. */
.icon-btn__glyph--bell,.icon-btn__glyph--gear{width:calc(17 * var(--u));height:calc(17 * var(--u));color:#55556f}
.wallet__plus-svg{width:calc(14 * var(--u));height:calc(14 * var(--u))}
.game-odds{margin:24px 0 0;border:1px solid #ffffff0b;border-radius:12px;background:#171727;font-size:11px;color:#a6acc5;text-align:left}.game-odds summary{cursor:pointer;padding:13px 16px;font-weight:600;color:#9eb9dd}.game-odds-body{padding:0 16px 14px;max-height:290px;overflow:auto}.game-odds-body>p{font-size:11px;line-height:1.7;margin:0 0 12px;color:#838ea9}.game-odds-body>div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-top:1px solid #ffffff06;font-size:11px}.game-odds-body strong{white-space:nowrap;font-weight:600;color:#b8cbee}.ct-odds{margin-top:17px}.ct-odds summary{font-size:10px;padding:11px 13px}

.player-limit-notice{margin:16px 0;padding:16px 18px;border:1px solid #3d5578;border-radius:12px;background:#152032;color:#d5e8ff;font-size:12px;line-height:1.65;text-align:left}.player-limit-notice strong{font-size:13px}.player-limit-notice p{margin:6px 0}.player-limit-notice small{color:#9bb1cd;font-size:11px}.player-limit-notice[hidden]{display:none!important}.profile-main>.player-limit-notice{margin:0}