html {
    -webkit-text-size-adjust: 100%;
    cursor: default;
    overflow-x: clip;
    scrollbar-gutter: stable;
    font-size: clamp(1rem, 0.35vw + 0.35vh + 0.3rem, 1.375rem);
}

body {
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100svh;
    overflow-x: hidden;
    transition: color 0.4s ease;
}

body,
.page {
    background-size: min(2560px, 100%) auto;
}
header {
    min-height: calc(98vh - var(--navigation-height));
    min-height: calc(98dvh - var(--navigation-height));
}

/* Hero social/contact rail — right edge, vertically centered, tooltip on hover.
   Links are placeholders (Discord/VK/Telegram/forum) — swap in real ones. */
.hero-social {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
}

.hero-social__item {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 35% 30%, rgba(60, 48, 32, .9), rgba(18, 15, 13, .9));
    box-shadow:
        0 0 0 1px rgba(255, 200, 130, .55),
        0 0 0 3px rgba(0, 0, 0, .55),
        0 0 0 4px rgba(255, 183, 81, .3),
        inset 0 0 .375rem rgba(0, 0, 0, .6),
        0 .25rem .625rem rgba(0, 0, 0, .4);
    transition: box-shadow .3s, transform .3s, background .3s;
    text-decoration: none;
    color: #ffb751;
    font-size: 1.25rem;
}

.hero-social__item:hover {
    background: radial-gradient(circle at 35% 30%, rgba(80, 62, 38, .95), rgba(24, 19, 15, .95));
    box-shadow:
        0 0 0 1px rgba(255, 215, 150, .9),
        0 0 0 3px rgba(0, 0, 0, .55),
        0 0 0 4px rgba(255, 183, 81, .6),
        0 0 1.125rem rgba(255, 183, 81, .6),
        inset 0 0 .375rem rgba(0, 0, 0, .5),
        0 .25rem .625rem rgba(0, 0, 0, .4);
    transform: translateX(-.25rem);
}

.hero-social__pic {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
    transition: filter .3s;
}

.hero-social__item:hover .hero-social__pic {
    filter: brightness(130%);
}

.hero-social__ico {
    line-height: 1;
}

.hero-social__item:before {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + .75rem);
    top: 50%;
    transform: translateY(-50%) translateX(.5rem);
    background: #12100f;
    border: 1px solid rgba(255, 183, 81, .4);
    color: #fff8ed;
    font-size: .75rem;
    font-family: "DIN Next W1G", Tahoma, Arial, sans-serif;
    font-family: var(--font-0);
    white-space: nowrap;
    padding: .375rem .75rem;
    border-radius: .375rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.hero-social__item:hover:before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 61.25rem) {
    .hero-social {
        display: none;
    }
}

/* Hero ember/spark animation — pure CSS, no assets. Two particle layers rising at
   different speeds so the static bg photo reads as if it has live embers drifting up. */
[data-section=hero] {
    position: relative;
    overflow: hidden;
}

[data-section=hero]:before,
[data-section=hero]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
    animation: hero-embers linear infinite;
}

[data-section=hero]:before {
    animation-duration: 9s;
    box-shadow:
        2vw 88vh 2px 1px rgba(255, 183, 81, 1),
        7vw 62vh 2px 1px rgba(255, 140, 60, .9),
        13vw 95vh 1px 1px rgba(255, 200, 120, .95),
        18vw 40vh 2px 1px rgba(255, 160, 70, .8),
        24vw 78vh 1px 1px rgba(255, 190, 100, 1),
        30vw 55vh 2px 1px rgba(255, 150, 60, .9),
        36vw 90vh 1px 1px rgba(255, 170, 90, .7),
        41vw 35vh 2px 1px rgba(255, 180, 100, .9),
        47vw 70vh 1px 1px rgba(255, 200, 130, .8),
        53vw 50vh 2px 1px rgba(255, 140, 60, .95),
        59vw 85vh 1px 1px rgba(255, 160, 80, .8),
        64vw 60vh 2px 1px rgba(255, 190, 110, .9),
        70vw 40vh 1px 1px rgba(255, 175, 90, .85),
        76vw 92vh 2px 1px rgba(255, 150, 65, .9),
        82vw 55vh 1px 1px rgba(255, 200, 125, .8),
        87vw 80vh 2px 1px rgba(255, 165, 85, .95),
        93vw 45vh 1px 1px rgba(255, 185, 105, .8),
        97vw 68vh 2px 1px rgba(255, 155, 70, .9),
        9vw 20vh 1px 1px rgba(255, 175, 90, .7),
        16vw 48vh 2px 1px rgba(255, 195, 115, .8),
        22vw 72vh 1px 1px rgba(255, 150, 65, .75),
        34vw 15vh 2px 1px rgba(255, 185, 105, .8),
        44vw 88vh 1px 1px rgba(255, 160, 80, .75),
        50vw 30vh 2px 1px rgba(255, 200, 120, .8),
        57vw 65vh 1px 1px rgba(255, 170, 90, .75),
        66vw 20vh 2px 1px rgba(255, 195, 115, .8),
        73vw 82vh 1px 1px rgba(255, 150, 65, .75),
        80vw 33vh 2px 1px rgba(255, 185, 105, .8),
        90vw 90vh 1px 1px rgba(255, 165, 85, .75),
        99vw 30vh 2px 1px rgba(255, 175, 90, .8),
        4vw 55vh 1px 1px rgba(255, 190, 110, .7),
        60vw 42vh 2px 1px rgba(255, 155, 70, .8);
}

[data-section=hero]:after {
    animation-duration: 14s;
    animation-delay: -5s;
    box-shadow:
        5vw 75vh 2px 1px rgba(255, 150, 70, .8),
        11vw 45vh 1px 1px rgba(255, 190, 110, .85),
        20vw 88vh 2px 1px rgba(255, 170, 90, .7),
        26vw 60vh 1px 1px rgba(255, 140, 60, .8),
        33vw 92vh 2px 1px rgba(255, 195, 115, .8),
        39vw 50vh 1px 1px rgba(255, 160, 80, .7),
        45vw 80vh 2px 1px rgba(255, 200, 120, .8),
        51vw 42vh 1px 1px rgba(255, 170, 90, .8),
        58vw 88vh 2px 1px rgba(255, 150, 70, .75),
        64vw 58vh 1px 1px rgba(255, 185, 105, .7),
        70vw 92vh 2px 1px rgba(255, 165, 85, .8),
        77vw 48vh 1px 1px rgba(255, 195, 115, .75),
        83vw 78vh 2px 1px rgba(255, 155, 75, .75),
        90vw 55vh 1px 1px rgba(255, 180, 100, .8),
        95vw 85vh 2px 1px rgba(255, 145, 65, .75),
        14vw 30vh 1px 1px rgba(255, 175, 95, .7),
        29vw 68vh 2px 1px rgba(255, 190, 110, .75),
        36vw 22vh 1px 1px rgba(255, 150, 70, .7),
        48vw 95vh 2px 1px rgba(255, 200, 120, .75),
        62vw 33vh 1px 1px rgba(255, 165, 85, .7),
        68vw 70vh 2px 1px rgba(255, 195, 115, .75),
        85vw 40vh 1px 1px rgba(255, 155, 75, .7),
        93vw 18vh 2px 1px rgba(255, 180, 100, .75),
        3vw 42vh 1px 1px rgba(255, 145, 65, .7),
        56vw 60vh 2px 1px rgba(255, 175, 95, .75);
}

.hero {
    position: relative;
}

.hero:before,
.hero:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
    animation: hero-embers linear infinite;
}

.hero:before {
    animation-duration: 11s;
    animation-delay: -2s;
    box-shadow:
        3vw 30vh 2px 1px rgba(255, 190, 110, .75),
        15vw 15vh 1px 1px rgba(255, 160, 80, .7),
        28vw 25vh 2px 1px rgba(255, 200, 125, .8),
        35vw 10vh 1px 1px rgba(255, 150, 70, .7),
        48vw 20vh 2px 1px rgba(255, 175, 95, .75),
        60vw 12vh 1px 1px rgba(255, 195, 115, .7),
        72vw 28vh 2px 1px rgba(255, 155, 75, .75),
        85vw 15vh 1px 1px rgba(255, 185, 105, .7),
        92vw 32vh 2px 1px rgba(255, 165, 85, .75),
        8vw 55vh 1px 1px rgba(255, 175, 95, .65),
        20vw 40vh 2px 1px rgba(255, 195, 115, .7),
        42vw 8vh 1px 1px rgba(255, 150, 70, .65),
        54vw 35vh 2px 1px rgba(255, 185, 105, .7),
        66vw 18vh 1px 1px rgba(255, 165, 85, .65),
        78vw 42vh 2px 1px rgba(255, 175, 95, .7),
        90vw 22vh 1px 1px rgba(255, 195, 115, .65),
        98vw 12vh 2px 1px rgba(255, 155, 75, .7);
}

.hero:after {
    animation-duration: 17s;
    animation-delay: -9s;
    box-shadow:
        8vw 18vh 2px 1px rgba(255, 170, 90, .65),
        22vw 8vh 1px 1px rgba(255, 200, 120, .7),
        40vw 22vh 2px 1px rgba(255, 150, 65, .65),
        55vw 6vh 1px 1px rgba(255, 190, 110, .7),
        68vw 20vh 2px 1px rgba(255, 160, 80, .65),
        80vw 10vh 1px 1px rgba(255, 195, 115, .7),
        96vw 24vh 2px 1px rgba(255, 175, 95, .65),
        14vw 12vh 1px 1px rgba(255, 150, 65, .6),
        30vw 30vh 2px 1px rgba(255, 190, 110, .65),
        48vw 15vh 1px 1px rgba(255, 160, 80, .6),
        62vw 28vh 2px 1px rgba(255, 200, 120, .65),
        76vw 14vh 1px 1px rgba(255, 175, 95, .6),
        88vw 30vh 2px 1px rgba(255, 155, 70, .65);
}

.hero__box:before,
.hero__content:before,
[data-container=hero]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
    animation: hero-embers linear infinite;
}

.hero__box:before {
    animation-duration: 12.5s;
    animation-delay: -3.5s;
    box-shadow:
        6vw 50vh 2px 1px rgba(255, 175, 95, .7),
        16vw 68vh 1px 1px rgba(255, 145, 65, .65),
        27vw 33vh 2px 1px rgba(255, 195, 115, .7),
        38vw 58vh 1px 1px rgba(255, 160, 80, .65),
        50vw 82vh 2px 1px rgba(255, 200, 125, .7),
        63vw 38vh 1px 1px rgba(255, 155, 75, .65),
        74vw 65vh 2px 1px rgba(255, 180, 100, .7),
        89vw 48vh 1px 1px rgba(255, 170, 90, .65),
        12vw 20vh 2px 1px rgba(255, 195, 115, .6),
        33vw 10vh 1px 1px rgba(255, 150, 70, .6),
        45vw 25vh 2px 1px rgba(255, 185, 105, .65),
        58vw 65vh 1px 1px rgba(255, 165, 85, .6),
        70vw 12vh 2px 1px rgba(255, 175, 95, .65),
        82vw 30vh 1px 1px rgba(255, 195, 115, .6),
        95vw 60vh 2px 1px rgba(255, 155, 75, .65);
}

.hero__content:before {
    animation-duration: 16s;
    animation-delay: -7s;
    box-shadow:
        10vw 60vh 2px 1px rgba(255, 190, 110, .65),
        23vw 82vh 1px 1px rgba(255, 150, 70, .6),
        31vw 45vh 2px 1px rgba(255, 200, 120, .65),
        44vw 90vh 1px 1px rgba(255, 165, 85, .6),
        56vw 52vh 2px 1px rgba(255, 180, 100, .65),
        66vw 78vh 1px 1px rgba(255, 155, 75, .6),
        81vw 60vh 2px 1px rgba(255, 195, 115, .65),
        91vw 88vh 1px 1px rgba(255, 145, 65, .6),
        4vw 30vh 2px 1px rgba(255, 175, 95, .55),
        18vw 15vh 1px 1px rgba(255, 195, 115, .55),
        38vw 22vh 2px 1px rgba(255, 150, 70, .6),
        52vw 12vh 1px 1px rgba(255, 185, 105, .55),
        70vw 28vh 2px 1px rgba(255, 165, 85, .6),
        86vw 18vh 1px 1px rgba(255, 175, 95, .55);
}

[data-container=hero]:before {
    animation-duration: 19s;
    animation-delay: -11s;
    box-shadow:
        4vw 42vh 2px 1px rgba(255, 165, 85, .55),
        19vw 20vh 1px 1px rgba(255, 195, 115, .6),
        32vw 72vh 2px 1px rgba(255, 150, 70, .55),
        46vw 30vh 1px 1px rgba(255, 185, 105, .6),
        61vw 66vh 2px 1px rgba(255, 160, 80, .55),
        75vw 15vh 1px 1px rgba(255, 200, 120, .6),
        88vw 55vh 2px 1px rgba(255, 170, 90, .55),
        10vw 12vh 1px 1px rgba(255, 190, 110, .5),
        27vw 48vh 2px 1px rgba(255, 155, 75, .55),
        42vw 65vh 1px 1px rgba(255, 195, 115, .5),
        55vw 45vh 2px 1px rgba(255, 165, 85, .55),
        68vw 82vh 1px 1px rgba(255, 175, 95, .5),
        93vw 35vh 2px 1px rgba(255, 150, 70, .55);
}

@keyframes hero-embers {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    85% {
        opacity: .7;
    }
    100% {
        transform: translateY(-100vh) translateX(1.5vw);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-section=hero]:before,
    [data-section=hero]:after,
    .hero:before,
    .hero:after,
    .hero__box:before,
    .hero__content:before,
    [data-container=hero]:before {
        animation: none;
        display: none;
    }
}


[data-section=navigation]:after {
    background-image: none !important;
    background: linear-gradient(180deg, #1c1712 0%, #100d0a 100%) !important;
}

[data-section=news],
[data-section=events],
[data-section=store],
[data-section=footer] {
    position: relative;
}

[data-section=news]:before,
[data-section=events]:before,
[data-section=store]:before,
[data-section=footer]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 183, 81, .55) 50%, transparent) top / 100% 1px no-repeat,
        linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent) top / 100% 100% no-repeat;
}

[data-section=news]:after,
[data-section=events]:after,
[data-section=store]:after,
[data-section=footer]:after {
    content: "";
    position: absolute;
    top: -.25rem;
    left: 50%;
    width: .5rem;
    height: .5rem;
    background: rgba(255, 183, 81, .9);
    box-shadow: 0 0 .625rem rgba(255, 183, 81, .8);
    transform: translateX(-50%) rotate(45deg);
    z-index: 3;
    pointer-events: none;
}

.btn_size_large {
    --btn-img-url: url(../images/btn/btn-new.png);
    --btn-h: 6rem;
    color: #ffdca8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.navigation .btn {
    --btn-img-url: url(../images/btn/btn-new-1.png);
    --btn-w: 11.9375rem;
    --btn-h: 3.919rem;
    color: #ffdca8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.navigation .btn__icon {
    filter: brightness(0) saturate(100%) invert(90%) sepia(28%) saturate(700%) hue-rotate(340deg) brightness(103%) contrast(101%);
}

@media (max-width: 36rem) {
    .btn_size_large {
        --btn-fs: 1.1875rem;
    }
}

@media (max-width: 74.9375rem) {
    .navigation__auth {
        display: none;
    }
}

.event {
    background-image: none;
    background-color: #000;
    position: relative;
    min-height: auto;
    padding: 1rem!important;
    aspect-ratio: 13 / 9;
    border-radius: .5rem;
    overflow: hidden;
}

.event__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

.event__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.event_empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .625rem;
    padding: 2rem 1.5rem;
    aspect-ratio: auto;
    height: auto;
    min-height: 16.25rem;
    overflow: visible;
    background:
        radial-gradient(ellipse at center, rgba(255, 183, 81, .1), transparent 70%),
        rgba(255, 183, 81, .03);
    border: .125rem dashed rgba(255, 183, 81, .3);
    transition: background-color .3s, border-color .3s, transform .3s, box-shadow .3s;
}

.event.event_promo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    background-color: transparent;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    aspect-ratio: auto;
    height: auto;
    min-height: 20rem;
    padding: 1.75rem .875rem !important;
    overflow: visible;
    box-sizing: border-box;
}

.event_promo .event__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.375rem;
    flex-shrink: 0;
}

.event_promo .event__img {
    max-width: 100%;
    max-height: 100%;
}

.event_promo .event__title {
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 1.25rem 0 0;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff8ed;
}

.event_promo .event__desc {
    margin: 1rem 0 0;
    font-size: 1rem;
    text-align: center;
    color: #c1b9af;
    line-height: 1.4;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.event_promo .event__btns {
    margin-top: auto;
    padding-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event_empty:hover,
.event_empty:focus-within {
    border-color: rgba(255, 183, 81, .7);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
    transform: translateY(-.1875rem);
}

.event_empty__icon {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: .125rem solid rgba(255, 183, 81, .6);
    box-shadow: 0 0 .9375rem rgba(255, 183, 81, .25);
    transition: box-shadow .3s;
}

.event_empty__icon:before,
.event_empty__icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ffb751;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}

.event_empty__icon:before {
    width: 1.125rem;
    height: .1875rem;
}

.event_empty__icon:after {
    width: .1875rem;
    height: 1.125rem;
}

.event_empty:hover .event_empty__icon,
.event_empty:focus-within .event_empty__icon {
    box-shadow: 0 0 1.25rem rgba(255, 183, 81, .5);
}

.event_empty .event__title {
    color: #fff8ed;
}

.event_empty__subtitle {
    font-size: .75rem;
    font-family: "DIN Next W1G", Tahoma, Arial, sans-serif;
    font-family: var(--font-0);
    color: rgba(255, 248, 237, .55);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 500;
}

.event_empty .event__desc {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-width: 16.25rem;
}

.events__subtitle {
    font-size: .875rem;
    font-family: "DIN Next W1G", Tahoma, Arial, sans-serif;
    font-family: var(--font-0);
    color: rgba(255, 248, 237, .55);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
    margin-top: -.375rem;
}

.events-swiper {
    width: 100%;
    overflow: hidden;
}

.events-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.events-swiper .swiper-slide .event {
    width: 100%;
}

.events-swiper__nav {
    margin-top: 1.375rem;
}

.events-swiper__prev.swiper-button-disabled,
.events-swiper__next.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
}

/* Tablet/desktop: show the full set as a static grid (as before) — the slider is mobile-only */
@media (min-width: 40rem) {
    .events-swiper,
    .events-swiper .swiper-wrapper {
        overflow: visible;
        height: auto !important;
    }

    .events-swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
        transform: none !important;
    }

    .events-swiper .swiper-slide {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .events-swiper__nav {
        display: none;
    }
}

@media (min-width: 65.625rem) {
    .events-swiper .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.3125rem;
    }
}


.countdown_corner {
    position: absolute;
    left: .9rem;
    top: 6.25rem;
    z-index: 60;
    background: linear-gradient(180deg, rgba(30, 25, 20, .92), rgba(14, 12, 10, .92));
    border-radius: .625rem;
    padding: 1rem 1.375rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow:
        0 .625rem 1.875rem rgba(0, 0, 0, .5),
        inset 0 0 0 1px rgba(255, 183, 81, .3),
        inset 0 0 0 2px rgba(0, 0, 0, .5);
}

.countdown_corner_right {
    left: auto;
    right: .9rem;
}

@media (max-width: 768px) {
    .countdown_corner {
        display: none;
    }
}

.countdown_corner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 183, 81, .8), transparent);
}

.countdown_corner .countdown__heading {
    font-size: .8125rem;
    color: #fff8ed;
    margin-bottom: .5rem;
    white-space: nowrap;
}

.countdown_corner .countdown__item {
    width: 2.75rem;
    min-width: 2.75rem;
}

.countdown_corner .countdown__amount {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.countdown_corner .countdown__desc {
    font-size: .625rem;
}

.countdown_corner .countdown__devider {
    font-size: 1.5rem;
    margin: 0 .1875rem;
    color: rgba(255, 183, 81, .5);
}

@media (max-width: 36rem) {
    .countdown_corner {
        left: .625rem;
        bottom: .625rem;
        padding: .75rem 1rem;
    }

    .countdown_corner .countdown__amount {
        font-size: 1.125rem;
    }

    .countdown_corner .countdown__item {
        min-width: 2.125rem;
    }
}

.promo-card {
    position: relative;
    width: 100%;
    max-width: 25rem;
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(22, 20, 19, .88), rgba(22, 20, 19, .94)),
        url(../images/event/bg-0.jpg);
    background-size: cover;
    background-position: 50%;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 183, 81, .1),
        0 .5rem 1.5rem rgba(0, 0, 0, .45);
    transition: box-shadow .35s ease, transform .35s ease;
}

.promo-card:hover {
    box-shadow:
        0 0 0 1px rgba(255, 183, 81, .28),
        0 0 2rem rgba(255, 183, 81, .1),
        0 .75rem 2rem rgba(0, 0, 0, .5);
    transform: translateY(-.125rem);
}

.promo-card__popular {
    position: absolute;
    top: .875rem;
    right: .875rem;
    z-index: 2;
    background: linear-gradient(135deg, #ffdca3, #c8933b);
    color: #211a12;
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-family: var(--font-1);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3125rem .75rem;
    border-radius: .25rem;
    box-shadow: 0 .1875rem .5rem rgba(0, 0, 0, .35);
}

.promo-card__header {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1.5rem 1.375rem 1.125rem;
}

.promo-card__avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #3a332c, #17130f 75%);
    border: 1px solid rgba(77, 63, 50, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.promo-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-card__avatar svg {
    width: 1.75rem;
    height: 1.75rem;
    color: #ffb751;
}

.promo-card__tier {
    display: block;
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-family: var(--font-1);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffb751;
    margin-bottom: .25rem;
}

.promo-card__title {
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-family: var(--font-1);
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff8ed;
    text-transform: uppercase;
    line-height: 1.25;
}

.promo-card__divider {
    height: 1px;
    background: rgba(77, 63, 50, .5);
    margin: 0 1.375rem;
}

.promo-card__items {
    list-style: none;
    max-height: 16.25rem;
    overflow-y: auto;
    padding: .375rem 1.375rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: rgba(15, 13, 12, .45);
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 71, 37, .6) transparent;
}

.promo-card__items::-webkit-scrollbar {
    width: .25rem;
    background-color: transparent;
}

.promo-card__items::-webkit-scrollbar-thumb {
    background-color: rgba(107, 71, 37, .6);
    border-radius: 1rem;
}

.promo-card__items::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 71, 37, .85);
}

.promo-card__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .5rem;
    margin: 0 -.5rem;
    border-radius: .375rem;
    border-bottom: 1px solid rgba(77, 63, 50, .5);
    cursor: help;
    transition: background .2s;
}

.promo-card__item:hover {
    background: rgba(255, 183, 81, .06);
}

.promo-card__item:last-child {
    border-bottom: 0;
}

.promo-card__item-icon {
    max-width: 2.25rem;
    max-height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #3a332c, #17130f 75%);
    border: 1px solid rgba(77, 63, 50, .5);
}

.promo-card__item-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    color: #ffb751;
}

.promo-card__item-text {
    flex: 1;
    min-width: 0;
}

.promo-card__item-name {
    display: block;
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-family: var(--font-1);
    font-size: .875rem;
    font-weight: 700;
    color: #fff8ed;
    text-transform: uppercase;
    line-height: 1.3;
}

.promo-card__item-type {
    font-size: .6875rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--rarity-color, #736f69);
}

.promo-card__item-type_rare { --rarity-color: #b08a5a; }
.promo-card__item-type_epic { --rarity-color: #ffb751; }
.promo-card__item-type_legend { --rarity-color: #ff7a51; }

.promo-card__item-qty {
    flex-shrink: 0;
    color: #fff8ed;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .3125rem .625rem;
    white-space: nowrap;
}

.promo-card__footer {
    position: relative;
    z-index: 1;
    background: #161413;
    padding: 1.125rem 1.375rem;
    margin-top: .375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.promo-card__price {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.promo-card__price-old {
    font-size: .75rem;
    color: #736f69;
    text-decoration: line-through;
}

.promo-card__price-new {
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-family: var(--font-1);
    font-size: 1.375rem;
    font-weight: 700;
    color: #ffb751;
    line-height: 1;
}

.promo-card__price-new small {
    font-size: .75rem;
    font-weight: 400;
    color: #bab2a8;
    margin-left: .3125rem;
}

.promo-card__buy {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(180deg, #ffcf8a, #e6a54c);
    color: #241b10;
    font-family: BeaufortforLOL, Philosopher, Times New Roman, Times, serif;
    font-family: var(--font-1);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: .75rem 1.25rem;
    border-radius: .375rem;
    text-decoration: none;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3);
    transition: box-shadow .25s ease, transform .25s ease;
    flex-shrink: 0;
}

.promo-card__buy:hover {
    box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .35), 0 0 1rem rgba(255, 183, 81, .25);
    transform: translateY(-.0625rem);
}

.promo-card__buy svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.tippy-box[data-theme~='item'] {
    background-color: #16130f;
    color: #f5eee4;
    border: 1px solid rgba(255, 183, 81, .25);
    border-radius: .375rem;
    font-size: .875rem;
    line-height: 1.5;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .4),
        0 .625rem 1.875rem rgba(0, 0, 0, .55);
    max-width: 18rem !important;
}

.tippy-box[data-theme~='item'] > .tippy-content {
    padding: .625rem .875rem;
}

.tippy-box[data-theme~='item'] p {
    margin: 0;
}

.tippy-box[data-theme~='item'] p + p {
    margin-top: .25rem;
}

.tippy-box[data-theme~='item'] > .tippy-arrow {
    color: #12100f;
}

.tippy-box[data-theme~='item'][data-placement^='top'] > .tippy-arrow:before {
    border-top-color: #12100f;
}

.tippy-box[data-theme~='item'][data-placement^='bottom'] > .tippy-arrow:before {
    border-bottom-color: #12100f;
}