@font-face{
    font-family:Montserrat;
    src:url('../fonts/montserrat-regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap
}

@font-face{
    font-family:Montserrat;
    src:url('../fonts/montserrat-bold.woff2') format('woff2');
    font-weight:700 900;
    font-display:swap
}

body::after {
    background-image: url("../img/granularity.png");
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .8;
}

.hero-smoke {
    position: absolute;
    inset: -7%;
    z-index: 1;
    pointer-events: none;
    opacity: .5;
    transform: translate3d(var(--smoke-x, 0px), var(--smoke-y, 0px), 0);
    mask-image: linear-gradient(to bottom, transparent 4%, #000 25%, #000 70%, transparent 96%);
}

.hero-smoke img { width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hero-smoke { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-smoke { transform: none; }
}

:root {
    --bg: #101110;
    --surface: #191b19;
    --surface2: #20221f;
    --line: #31352c;
    --text: #f3f4ec;
    --muted: #acafa3;
    --gold: #FF9800;
    --gold-light: #ffd044;
    --radius: 12px;
    font-family: Montserrat, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-synthesis: none;
    color-scheme: dark;
}

::-webkit-resizer {
    background-repeat: no-repeat;
    width: 10px;
    height: 0
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-button {
    background-repeat: no-repeat;
    width: 5px;
    height: 0
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: var(--gold);
    -webkit-transition: .5s;
    transition: .5s
}

::-webkit-scrollbar-track {
    background-color: var(--surface2);
}

* {
    box-sizing: border-box;
}

.icon-arrow-up-right {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    vertical-align: -.125em;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
body {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select {
    font: inherit;
}
button,
a,
input,
select {
    touch-action: manipulation;
}
button {
    cursor: pointer;
}
button:disabled {
    cursor: not-allowed;
}
a,
button {
    transition:
            background 0.2s,
            color 0.2s,
            border-color 0.2s,
            transform 0.2s;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 5px;
}

.player-close:focus,
.balance-modal-close:focus,
.cookie-close:focus,
.product-modal-close:focus,
.purchase-cancel-dialog__close:focus {
    outline: none;
}

img {
    display: block;
    max-width: 100%;
}
h1,
h2,
h3,
p {
    margin: 0;
}
h1,
h2,
h3 {
    line-height: 1.15;
}
h2 {
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    letter-spacing: -0.045em;
}
h3 {
    font-size: 1.25rem;
}
em {
    font-style: normal;
    color: var(--gold);
}

.header {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(4vw, 20px);
    gap: 28px;
    border-bottom: 1px solid #ffffff12;
    background: #101110f5;
    position: relative;
    z-index: 10;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.055em;
    white-space: nowrap;
}
.brand-logo {
    width: 44px;
    height: 30px;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
}
.brand-light {
    color: var(--gold);
    margin-left: 4px;
}
.header nav {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 0.875rem;
    color: var(--muted);
}
.header nav a:hover,
.header nav .active {
    color: var(--text);
}
.header nav .active {
    position: relative;
}
.header nav .active:after {
    content: "";
    position: absolute;
    height: 3px;
    background: var(--gold);
    bottom: -33px;
    left: 0;
    right: 0;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 16px 26px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    min-height: 52px;
}
.button span {
    font-size: 1.25rem;
}
.button:hover {
    transform: translateY(-2px);
}
.primary {
    background: var(--gold);
    color: #171910;
}
.primary:hover {
    background: var(--gold-light);
}
.outline {
    border-color: #484b3b;
    background: transparent;
}
.outline:hover {
    border-color: var(--gold);
}
.glass {
    background: #ffffff0c;
    border-color: #ffffff42;
    backdrop-filter: blur(8px);
}
.small {
    padding: 10px 18px;
    min-height: 43px;
}
.hero {
    position: relative;
    min-height: 710px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #171d16;
}
.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
    opacity: 0.7;
}
.hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0e100fe8 0%, #0e100f93 45%, #0e100f18 100%),
    linear-gradient(0deg, #101110 0%, transparent 45%);
}
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 65px max(6vw, 24px) 95px;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 24px;
}
.line {
    width: 34px;
    height: 2px;
    background: var(--gold);
}
.hero h1 {
    font-size: clamp(2.6rem, 6.2vw, 6.5rem);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 1.04;
}
.hero h1 span {
    color: var(--gold);
}
.hero p {
    color: #c3c7bc;
    margin-top: 28px;
    line-height: 1.8;
    font-size: 1rem;
}
.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}
.hero-caption {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 48px;
    color: #b6bba9;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
}
.hero-caption button {
    border: 1px solid #ffffff30;
    border-radius: 50%;
    background: #10111066;
    color: white;
    width: 32px;
    height: 32px;
}

.section {
    max-width: 1440px;
    margin: auto;
    padding: 75px max(4vw, 24px);
}
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px;
    position: relative;
}
.section-head p {
    color: var(--muted);
    font-size: 0.875rem;
}
.section-head .eyebrow {
    margin-bottom: 15px;
}

.servers-decore {
    position: absolute;
    top: -45px;
    right: 0;
}

@media (max-width: 900px) {
    .servers-decore {
        display: none;
    }
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.server-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 25px;
    border-radius: var(--radius);
    overflow: hidden;
}
.server-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 45px;
}
.server-rate {
    font-size: 3.4rem;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: var(--gold);
    line-height: 1;
}
.tag {
    display: inline-flex;
    border: 1px solid #414536;
    background: #292d2480;
    color: #c8cbbf;
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}
.server-card p {
    color: var(--muted);
    font-size: 0.875rem;
    margin-top: 14px;
    min-height: 70px;
}
.server-card .button {
    width: 100%;
    margin-top: 25px;
}
.server-meta {
    font-size: 0.875rem;
    border-top: 1px solid var(--line);
    padding-top: 17px;
    color: #c8cbbf;
    margin-top: 24px;
}
.footer {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(230px, 0.8fr) minmax(320px, 1.3fr);
    align-items: start;
    gap: 40px;
    border-top: 1px solid var(--line);
    padding: 48px max(4vw, 24px);
    font-size: 0.875rem;
    color: var(--muted);
}
.footer-about .brand {
    width: fit-content;
    margin-bottom: 20px;
    color: var(--text);
}
.footer-about p + p {
    margin-top: 8px;
}
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.footer-socials a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 11px 5px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #d4d6ce;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.footer-socials a:hover {
    border-color: #a98127;
    background: #d69f2512;
    color: var(--gold);
}
.footer-socials span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: #d69f251a;
    color: var(--gold);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.footer-links {
    display: grid;
    gap: 10px;
}
.footer-links a:hover {
    color: var(--gold);
}
.footer-company {
    display: grid;
    gap: 8px;
    font-style: normal;
}
.footer-company strong {
    color: var(--text);
}
.footer__indexing-note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.75rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.footer__indexing-note a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer__indexing-note a:hover {
    color: var(--gold);
}
.legal-page {
    min-height: 52vh;
}
.legal-placeholder {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px max(4vw, 24px) 110px;
}
.legal-placeholder h1 {
    margin-bottom: 22px;
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: -0.055em;
}
.legal-placeholder p {
    max-width: 720px;
    color: var(--muted);
}
.legal-page__content {
    display: grid;
    gap: 24px;
    line-height: 1.7;
}
.legal-page__section {
    display: grid;
    gap: 16px;
    padding-top: 8px;
}
.legal-page__section h2 {
    max-width: 820px;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.25;
}
.legal-page__items {
    display: grid;
    gap: 12px;
}
.legal-page__list {
    display: grid;
    gap: 8px;
    max-width: 720px;
    padding-left: 24px;
    color: var(--muted);
}
.legal-page__revision {
    padding-top: 8px;
    font-weight: 700;
}
.legal-page__contact-link {
    color: var(--gold);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: color 0.2s, text-decoration-color 0.2s;
}
.legal-page__contact-link:hover {
    color: var(--gold-light);
    text-decoration-color: currentColor;
}
.toast {
    position: fixed;
    inset: auto auto 24px 50%;
    bottom: 24px;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 20px);
    max-width: calc(100% - 32px);
    width: max-content;
    padding: 14px 24px;
    border: 0;
    background: var(--gold);
    color: #151810;
    border-radius: 8px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}


@media (max-width: 960px) {
    .legal-placeholder {
        padding: 56px 28px 80px;
    }
    .legal-placeholder h1 {
        margin-bottom: 20px;
        font-size: clamp(1.9rem, 6vw, 2.75rem);
        overflow-wrap: anywhere;
    }
    .legal-page__content {
        gap: 20px;
        font-size: 0.9375rem;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }
    .legal-page__section {
        gap: 14px;
    }
    .legal-page__section h2 {
        font-size: clamp(1.2rem, 3.5vw, 1.55rem);
    }
    .header {
        gap: 18px;
        flex-wrap: wrap;
        height: auto;
        padding-top: 18px;
        padding-bottom: 15px;
    }
    .header nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 25px;
    }
    .header nav .active:after {
        bottom: -16px;
    }
    .hero {
        min-height: 640px;
    }
    .server-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .hero h1 {
        font-size: clamp(2.7rem, 7vw, 4.8rem);
    }
    .footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-company {
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px) {
    .legal-placeholder {
        padding: 36px 16px 56px;
    }
    .legal-placeholder h1 {
        margin-bottom: 18px;
        font-size: 1.65rem;
        line-height: 1.15;
        letter-spacing: -0.035em;
    }
    .legal-page__content {
        gap: 18px;
        font-size: 0.875rem;
        line-height: 1.6;
    }
    .legal-page__section {
        gap: 12px;
        padding-top: 4px;
    }
    .legal-page__section h2 {
        font-size: 1.1rem;
        line-height: 1.35;
    }
    .legal-page__items {
        gap: 10px;
    }
    .legal-page__list {
        gap: 6px;
        padding-left: 20px;
    }
    .header > .button {
        font-size: 0.75rem;
        padding: 10px;
    }
    .brand {
        font-size: 1rem;
    }
    .brand-logo {
        width: 36px;
        height: 24px;
    }
    .header nav {
        gap: 20px;
        font-size: 0.875rem;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    .hero {
        min-height: 630px;
    }
    .hero-content {
        padding: 70px 22px 80px;
    }
    .hero h1 {
        font-size: clamp(2.3rem, 8.6vw, 3.3rem);
        letter-spacing: -0.065em;
    }
    .eyebrow {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
    }
    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-actions .button {
        width: 100%;
    }
    .hero p {
        font-size: 0.875rem;
    }
    .hero-caption {
        font-size: 0.75rem;
        letter-spacing: 0.04em;
    }
    .section {
        padding: 55px 20px;
    }
    .server-grid {
        grid-template-columns: 1fr;
    }
    .server-top {
        margin-bottom: 25px;
    }
    .server-card p {
        min-height: auto;
    }
    .footer {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer-company {
        grid-column: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important;
    }
}



/* ==========================================================================
    Module: Store, product and account
    ========================================================================== */

.muted {
    color: var(--muted);
}

.small-text {
    font-size: .875rem;
}

.text-link {
    background: none;
    border: 0;
    color: var(--gold);
    padding: 0;
    font-size: .875rem;
    font-weight: 700;
}

.text-link:hover {
    color: var(--gold-light);
}

.community-section {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    align-items: center;
    gap: clamp(45px,7vw,110px);
    margin: 30px max(4vw,24px);
    padding: clamp(48px,6vw,82px) 6vw;
    border-radius: var(--radius);
    backdrop-filter: blur(10px) saturate(130%);
    border: 0;
    background: #191b1996;
}

.community-copy h2 {
    max-width: 700px;
}

.community-copy p {
    color: var(--muted);
    margin: 24px 0 22px;
    max-width: 580px;
    line-height: 1.75;
}

.community-qr {
    position: relative;
    width: min(100%,500px);
    border-radius: 20px;
    box-shadow: 0 28px 70px #00000055;
    transition: transform .25s ease,box-shadow .25s ease;
}

@media (max-width: 800px) {
    .community-qr {
        display: none;
    }
}

.community-qr:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 34px 85px #00000070;
}

.community-qr-code {
    display: block;
    padding: 10px;
    border-radius: 12px;
}

.community-qr-code img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.page-intro {
    padding: 65px max(0vw,24px) 45px;
}

.page-intro h1 {
    font-size: clamp(2rem,3.8vw,3.5rem);
    letter-spacing: -.055em;
}

.page-intro p {
    color: var(--muted);
    margin-top: 18px;
}

.page-intro .eyebrow {
    margin-bottom: 15px;
}

.page-intro.compact h1 {
    font-size: 2.5rem;
}

.shop-layout,.account-layout {
    display: grid;
    grid-template-columns: 235px minmax(0,1fr);
    gap: 36px;
    padding: 0 max(0vw,24px) 80px;
    max-width: 1540px;
    margin: auto;
}

.shop-sidebar,.catalog-content {
    min-width: 0;
}

label,.sidebar-label {
    display: block;
    font-size: .875rem;
    color: #d9dccf;
}

.shop-sidebar>label,.sidebar-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    margin-bottom: 12px;
}

.sidebar-label {
    margin-top: 35px;
}

.shop-sidebar select {
    width: 100%;
    margin-bottom: 12px;
}

.shop-sidebar>.small-text {
    font-size: .75rem;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.category-list button {
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    font-size: .875rem;
    text-align: left;
    gap: 16px;
}

.category-list button:hover {
    background: var(--surface);
}

.category-list button.selected {
    background: #FFC10713;
    border-color: #FFC10738;
    color: var(--gold);
}

.category-list button span {
    font-size: .75rem;
}

.support-box {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 35px;
    padding: 21px;
    background: #191c17;
}

.support-box span {
    display: block;
    color: var(--muted);
    font-size: .75rem;
    margin-bottom: 8px;
}

.support-box strong {
    font-size: .875rem;
}

.support-box p {
    font-size: .75rem;
    margin-top: 10px;
    color: var(--muted);
}

input,select {
    color: var(--text);
    border: 1px solid #363a31;
    background: #1b1e19;
    border-radius: 6px;
    padding: 12px 14px;
    min-height: 48px;
    max-width: 100%;
    font-size: .875rem;
}

select {
    cursor: pointer;
}

.catalog-toolbar {
    display: flex;
    gap: 18px;
}

.search {
    display: flex;
    align-items: center;
    border: 1px solid #363a31;
    border-radius: 6px;
    background: #191c17;
    flex: 1;
    min-width: 0;
}

.search span {
    font-size: 1.6rem;
    margin-left: 16px;
    color: var(--muted);
}

.search input {
    border: none;
    background: transparent;
    width: 100%;
    min-width: 0;
    outline: none;
}

.catalog-toolbar select {
    min-width: 180px;
}

.store-select {
    position: relative;
}

.store-select-wide,.product-server-select {
    width: 100%;
}

.store-select-wide {
    margin-bottom: 12px;
}

.catalog-sort {
    width: 210px;
    flex: none;
}

.store-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #ffffff22;
    border-radius: 7px;
    background: #ffffff06;
    color: var(--text);
    font-size: .875rem;
    font-weight: 700;
    text-align: left;
}

.store-select-trigger:hover,.store-select-trigger[aria-expanded="true"] {
    border-color: #FFC10770;
    background: #FFC1070d;
    color: var(--gold);
}

.store-select-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-select-trigger svg {
    flex: none;
    color: var(--muted);
    transition: transform .2s;
}

.store-select-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.store-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: grid;
    width: max(100%,220px);
    padding: 8px;
    border: 1px solid #FFC10735;
    border-radius: 10px;
    background: #181c18f5;
    box-shadow: 0 16px 48px #0008;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.catalog-sort .store-select-menu {
    right: 0;
    left: auto;
}

.store-select-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: .875rem;
    text-align: left;
}

.store-select-menu button:hover,.store-select-menu button:focus-visible {
    background: #ffffff09;
}

.store-select-menu button[aria-selected="true"] {
    background: #FFC10712;
    color: var(--gold);
}

.store-select-menu button[aria-selected="true"]::after {
    content: '✓';
    margin-left: auto;
    font-weight: 700;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 22px;
    margin-top: 25px;
}

.product-grid.home-products {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.product-card {
    position: relative;
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #191b19;
    transition: transform .2s, border-color .2s;
}

.product-card--filter-enter {
    animation: product-card-filter-enter .36s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--catalog-card-delay, 0ms);
}

@keyframes product-card-filter-enter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.985);
    }

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

.product-card__discount {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 3;
    display: flex;
}

.product-card__discount-icon {

}

.product-card__discount-value {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: #8b7948;
}

.product-card[role="button"] {
    cursor: pointer;
}

.product-card[role="button"]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

.product-card[hidden] {
    display: none;
}

.product-card-open {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
}

.product-card-open:focus-visible {
    outline-offset: -4px;
}

.product-art {
    position: relative;
    overflow: hidden;
    background: #14171b;
    aspect-ratio: 1.15;
    border-radius: 10px;
}

.product-art img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    margin: 13% auto 0;
    mix-blend-mode: lighten;
    position: relative;
    z-index: 3;
}

.product-art--loading [data-product-image] {
    opacity: 0;
}

.product-art__skeleton {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, #1b1f24 25%, #2a3037 45%, #1b1f24 65%);
    background-size: 250% 100%;
}

.product-art__backlight {
    background-color: #f99400;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    z-index: 2;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(50px);
}

@media (prefers-reduced-motion: no-preference) {
    .product-art__skeleton {
        animation: product-art-skeleton 1.5s ease-in-out infinite;
    }
}

@keyframes product-art-skeleton {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

.product-art__placeholder {
    display: grid;
    place-items: center;
    width: 78%;
    height: 78%;
    margin: 13% auto 0;
    color: #b9bea8;
    border: 1px solid #343a31;
    font-size: 2rem;
    letter-spacing: .12em;
}

.product-art [hidden] {
    display: none;
}

.art-label {
    position: absolute;
    left: 18px;
    top: 16px;
    color: #b9bea8;
    font-size: .75rem;
    letter-spacing: .12em;
    z-index: 1;
}

.product-link {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 1px solid #444b39;
    background: #151812c0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--gold);
}

.product-link:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: #11130f;
    transform: rotate(45deg);
}

.product-info {
    padding: 18px 20px;
}

.product-info>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
}

.product-info h3 {
    font-size: 0.8rem;
    line-height: 1.35;
    max-width: 50%;
    flex-shrink: 0;
}

.product-price {
    display: flex;
    justify-content: flex-end;
    gap: 0;
    flex-wrap: wrap;
    margin-left: auto;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1100px) {
    .product-price {
        flex-direction: row-reverse;
        gap: 6px;
    }
}

.product-price__old {
    color: #ffffffd4;
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration-color: #ffffffd4;
    text-decoration-thickness: 1px;
}

.product-price__current {
    white-space: nowrap;
    font-size: 1rem;
    color: var(--gold);
}

.product-info>.small-text {
    font-size: .75rem;
    background-color: #333333;
    padding: 4px 6px;
    border-radius: 4px;
    color: #8e8e8e;
    font-weight: 700;
}

code {
    color: var(--gold);
    background: #242a20;
    padding: 3px 7px;
}

.product-page {
    max-width: 1400px;
    margin: auto;
    padding: 35px max(4vw,24px) 75px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    font-size: .875rem;
    color: var(--muted);
    margin-bottom: 35px;
}

.breadcrumbs a:hover {
    color: var(--gold);
}

.breadcrumbs strong {
    font-weight: 400;
    color: var(--text);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: start;
}

.detail-art {
    position: relative;
    background: #14171b;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 30px;
}

.detail-art>.eyebrow {
    color: #d7c690;
    margin: 0;
}

.detail-art img {
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: lighten;
}

.detail-art-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: .75rem;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--gold);
}

.detail-art-footer span {
    font-weight: 400;
    color: var(--muted);
}

.detail-content h1 {
    font-size: clamp(2rem,4vw,4.2rem);
    letter-spacing: -.06em;
    margin: 20px 0;
}

.detail-content>.muted {
    font-size: 1rem;
}

.detail-price {
    display: flex;
    align-items: baseline;
    gap: 15px;
    font-size: 2.3rem;
    font-weight: 700;
    margin: 26px 0;
    color: var(--gold);
}

.detail-price span {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 400;
}

.detail-content select {
    width: 100%;
    margin: 10px 0 18px;
}

.product-server-select {
    margin: 10px 0 18px;
}

.duration {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: .875rem;
    margin-bottom: 20px;
}

.duration span {
    color: var(--muted);
}

.buy-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.buy-row>.button {
    flex: 1;
    padding: 14px;
}

.quantity {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 5px;
    width: 124px;
    min-width: 124px;
    overflow: hidden;
}

.quantity input {
    appearance: textfield;
    -moz-appearance: textfield;
    width: 44px;
    padding: 6px 0;
    border: 0;
    text-align: center;
    border-radius: 0;
}

.quantity input::-webkit-inner-spin-button {
    display: none;
}

.quantity button {
    width: 39px;
    border: 0;
    background: #1b1e19;
    color: var(--text);
}

.quantity button:hover {
    color: var(--gold);
    background: #343829;
}

.product-description {
    max-width: 800px;
    margin-top: 65px;
    border-top: 1px solid var(--line);
    padding-top: 35px;
}

.product-description h2 {
    font-size: 1.6rem;
}

.product-description ul {
    padding-left: 22px;
    margin: 25px 0;
    color: var(--muted);
}

.product-description li {
    margin: 10px 0;
}

.product-description>.muted {
    font-size: .875rem;
}

.profile-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 24px 17px;
    text-align: center;
    margin-bottom: 20px;
}

.avatar {
    width: 68px;
    height: 68px;
    border: 1px solid #FFC10755;
    background: #FFC10710;
    color: var(--gold);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0 auto 20px;
}

.profile-card h3 {
    font-size: 1rem;
}

.profile-card p {
    font-size: .75rem;
    color: var(--muted);
    margin: 10px 0 22px;
}

.profile-card .button {
    width: 100%;
    font-size: .75rem;
    padding: 12px 10px;
}

.account-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid #56533a;
    padding: 34px;
    border-radius: 10px;
    background: linear-gradient(100deg,#24281d,#38342480);
    overflow: hidden;
}

.account-welcome h2 {
    font-size: 2rem;
    position: relative;
    z-index: 1;
}

.account-welcome p {
    color: var(--muted);
    font-size: .875rem;
    margin-top: 17px;
}

.account-welcome .eyebrow {
    font-size: .75rem;
    margin-bottom: 18px;
}

.large-g {
    font-size: 8rem;
    color: var(--gold);
    line-height: 1;
    font-weight: 900;
    transform: rotate(-12deg);
    opacity: .4;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin: 22px 0;
}

.account-stats article {
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.account-stats article>span {
    color: var(--muted);
    font-size: .875rem;
}

.account-stats strong {
    display: block;
    font-size: 2.1rem;
    margin: 16px 0;
}

.account-stats small {
    font-size: .875rem;
    color: var(--muted);
    font-weight: 400;
}

.account-stats p {
    font-size: .75rem;
    color: var(--muted);
}

.account-stats button {
    font-size: .75rem;
}

.panel {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.panel>p {
    font-size: .875rem;
    margin-top: 13px;
}

.account-server {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 26px;
}

.account-server strong {
    font-size: .95rem;
}

.account-server span {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    margin-top: 10px;
}

.subheading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 12px 0 28px;
}

.subheading .muted {
    font-size: .75rem;
}

.empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 65px 20px;
    border: 1px dashed #414634;
    border-radius: 10px;
    min-height: 330px;
    margin: 20px 0;
}

.empty-symbol {
    font-size: 2.7rem;
    line-height: 1.5;
    color: var(--gold);
    display: block;
    margin-bottom: 18px;
}

.empty h3 {
    font-size: 1.35rem;
}

.empty p {
    margin: 20px 0 28px;
    color: var(--muted);
    font-size: .875rem;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
}

.cart-name {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
}

.cart-name span {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    margin-top: 6px;
}

.cart-item>strong {
    white-space: nowrap;
    color: var(--gold);
}

.remove {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 5px;
    width: 38px;
    height: 38px;
    color: var(--muted);
    font-size: 1.4rem;
}

.remove:hover {
    color: #ffb298;
    border-color: #af725a;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
}

.cart-total strong {
    font-size: 1.5rem;
}

.balance-panel {
    margin-top: 30px;
}

.balance-panel .button {
    margin-top: 25px;
}

.account-content>h2 {
    margin-top: 12px;
}

@media(min-width:1600px) {
    .page-intro {
        max-width: 1540px;
        margin: auto;
    }

    .community-section {
        max-width: 1280px;
        margin: 30px auto;
    }
}

@media(max-width:1380px) and (min-width:1101px) {
    .catalog-content .product-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }
}

@media(max-width:1100px) {
    .shop-layout,.account-layout {
        grid-template-columns: 210px minmax(0,1fr);
        gap: 25px;
    }

    .catalog-content .product-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .product-grid.home-products {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .product-info>div {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .product-price {
        justify-content: flex-start;
        margin-left: 0;
    }

    .account-stats {
        grid-template-columns: 1fr;
    }

    .account-stats article {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 18px;
    }

    .account-stats strong {
        margin: 0;
        font-size: 1.6rem;
    }

    .account-stats p {
        max-width: 130px;
    }

    .large-g {
        display: none;
    }

    .detail-grid {
        gap: 35px;
    }

    .account-server {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:860px) {
    .catalog-content .product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px) {
    .community-section {
        grid-template-columns: 1fr;
        gap: 45px;
        padding: 40px 28px;
    }

    .community-qr {
        justify-self: start;
    }

    .shop-layout,.account-layout {
        grid-template-columns: 1fr;
    }

    .shop-layout {
        gap: 24px;
        padding: 0 16px 56px;
    }

    .page-intro {
        padding: 36px 16px 28px;
    }

    .page-intro h1 {
        font-size: clamp(1.8rem,9vw,2.65rem);
    }

    .shop-sidebar {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #171a16;
    }

    .shop-sidebar>.support-box {
        display: none;
    }

    .shop-sidebar>.small-text {
        margin-top: 8px;
        line-height: 1.5;
    }

    .shop-sidebar>.sidebar-label {
        margin-top: 20px;
    }

    .shop-sidebar .store-select-menu {
        width: 100%;
        max-height: min(320px,50dvh);
        overflow-y: auto;
    }

    .category-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .category-list button {
        white-space: nowrap;
    }

    .shop-sidebar .category-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -4px;
        padding: 0 4px 8px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: #555b4d transparent;
        overscroll-behavior-inline: contain;
    }

    .shop-sidebar .category-list button {
        flex: 0 0 auto;
        min-height: 43px;
        scroll-snap-align: start;
    }

    .catalog-content .product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .product-grid.home-products {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .home-products .product-card:last-child {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .home-products .product-card:last-child .product-art {
        aspect-ratio: 1.3;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-art {
        max-width: 500px;
        width: 100%;
        justify-self: center;
    }

    .detail-content h1 {
        font-size: 2.5rem;
    }

    .profile-card {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 5px 16px;
        text-align: left;
        align-items: center;
    }

    .profile-card .avatar {
        grid-row: 1/4;
        width: 55px;
        height: 55px;
        margin: 0;
        font-size: 1.8rem;
    }

    .profile-card p {
        margin: 4px 0 10px;
    }

    .profile-card .button {
        grid-column: 2;
        justify-self: start;
        width: auto;
    }

    .account-sidebar .support-box {
        display: none;
    }

    .account-welcome {
        padding: 26px;
    }

    .account-welcome h2 {
        font-size: 1.7rem;
    }

    .account-stats {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px;
    }

    .account-stats article {
        display: block;
        padding: 16px;
    }

    .account-stats strong {
        margin: 14px 0;
    }

    .account-stats article>span {
        font-size: .75rem;
    }

    .product-page {
        padding-top: 25px;
    }
}

@media(max-width:480px) {
    .catalog-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .search input {
        font-size: 1rem;
    }

    .catalog-toolbar select {
        width: 100%;
    }

    .catalog-sort {
        width: 100%;
    }

    .catalog-sort .store-select-menu {
        right: auto;
        left: 0;
        width: 100%;
    }

    .catalog-content .product-grid {
        gap: 12px;
        margin-top: 18px;
    }

    .product-grid.home-products {
        grid-template-columns: minmax(0,1fr);
        gap: 12px;
        margin-top: 18px;
    }

    .product-card__discount {
        top: -10px;
        right: -8px;
        transform: scale(.82);
        transform-origin: top right;
    }

    .product-info {
        padding: 13px;
    }

    .product-info h3 {
        max-width: 100%;
        font-size: .875rem;
    }

    .product-info strong {
        font-size: .95rem;
    }

    .art-label {
        left: 10px;
        top: 10px;
        font-size: .75rem;
        letter-spacing: 0;
    }

    .product-art img {
        width: 90%;
        height: 80%;
        margin-top: 20%;
    }

    .product-link {
        width: 27px;
        height: 27px;
        line-height: 24px;
        right: 9px;
        bottom: 9px;
    }

    .home-products .product-card:last-child {
        display: block;
        grid-column: auto;
    }

    .home-products .product-card:last-child .product-art {
        aspect-ratio: 1.15;
    }

    .buy-row {
        gap: 10px;
    }

    .buy-row>.button {
        font-size: .75rem;
        gap: 10px;
    }

    .account-stats {
        grid-template-columns: 1fr;
    }

    .account-stats article {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .account-stats strong {
        margin: 0;
    }

    .account-stats p {
        max-width: 130px;
    }

    .cart-item {
        gap: 10px;
    }

    .cart-item img {
        width: 48px;
        height: 48px;
    }

    .cart-name {
        font-size: .875rem;
    }

    .cart-item>strong {
        font-size: .875rem;
    }

    .remove {
        width: 30px;
        height: 34px;
    }

    .cart-total {
        font-size: .875rem;
    }

    .cart-total strong {
        font-size: 1.2rem;
    }

    .detail-art-footer {
        font-size: .75rem;
        letter-spacing: 0;
    }

    .category-list button {
        padding: 11px;
        font-size: .75rem;
    }

    .community-section {
        margin: 15px 20px;
    }

    .community-qr {
        grid-template-columns: 1fr;
        gap: 16px;
        width: min(100%,320px);
        padding: 13px;
    }

    .community-qr-code {
        width: min(100%,210px);
        justify-self: center;
        padding: 7px;
    }

    .community-qr-copy {
        justify-items: center;
        text-align: center;
    }

    .page-intro.compact h1 {
        font-size: 2rem;
    }

    .empty {
        min-height: 260px;
        padding: 44px 16px;
    }
}

@media(max-width:360px) {
    .catalog-content .product-grid {
        grid-template-columns: 1fr;
    }
}



/* ==========================================================================
    Module: Header
    ========================================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 600;
    background: rgba(16, 18, 17, 0.68);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    transition:
            background 0.25s,
            box-shadow 0.25s,
            border-color 0.25s;
    gap: 14px;
}
.header.is-scrolled {
    background: rgba(16, 18, 17, 0.84);
    box-shadow: 0 10px 30px #0003;
    border-bottom-color: #ffffff1f;
}
.header nav {
    gap: 24px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.language-picker {
    display: block;
}
.language-picker select {
    min-height: 42px;
    padding: 8px 8px 8px 12px;
    width: 67px;
    background: #ffffff06;
    border: 1px solid #ffffff20;
    border-radius: 6px;
    font-size: 0.875rem;
}
.steam-login {
    background: #ffffff07;
    border: 1px solid #5d6650;
    gap: 10px;
    white-space: nowrap;
    padding: 12px 17px;
}
.steam-login:hover {
    background: #d6e3b515;
    border-color: var(--gold);
}
.steam-login img {
    width: 26px;
    height: 16px;
    object-fit: contain;
}
.steam-login span {
    font-size: 0.875rem;
}
.signed-in-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.guest-actions {
    display: flex;
    align-items: center;
    flex: none;
}
[hidden] {
    display: none !important;
}

.header-topup {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    flex: none;
    border: 1px solid #FFC10755;
    border-radius: 7px;
    background: #FFC1070d;
    color: var(--gold);
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    transition: background .2s,border-color .2s,transform .2s;
}

.header-topup:hover {
    border-color: var(--gold);
    background: #FFC1071c;
    transform: translateY(-1px);
}
.profile-menu {
    position: relative;
}

.header-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    border: none;
    color: var(--text);
    text-align: left;
    background: #ffffff06;
    border-radius: 8px;
    padding: 0 6px 0 0;
}

.header-profile:hover,.header-profile[aria-expanded="true"] {
    background: #FFC1070d;
}

.mini-avatar {
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
/*    border: 1px solid #ffc10770;*/
    border-radius: 6px;
    object-fit: cover;
}

.profile-label {
    font-size: 0.775rem;
    line-height: 1.25;
    text-align: right;
}

.header-profile__balance {
    color: var(--gold);
}

.profile-label strong {
    display: block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-chevron {
    color: var(--muted);
    transition: transform .2s;
}
.header-profile[aria-expanded="true"] .profile-chevron {
    transform: rotate(180deg);
}
.profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 3;
    display: grid;
    width: 220px;
    padding: 8px;
    border: 1px solid #FFC10735;
    border-radius: 10px;
    background: #181c18f5;
    box-shadow: 0 16px 48px #0008;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.profile-menu-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 11px;
    border-radius: 6px;
    color: var(--text);
    font-size: .875rem;
    font-weight: 700;
}
.profile-menu-dropdown a:hover,.profile-menu-dropdown a:focus-visible {
    background: #FFC10712;
    color: var(--gold);
}
.profile-menu-dropdown a span:last-child {
    color: var(--gold);
}

.profile-menu-dropdown .profile-menu-logout {
    grid-template-columns: 18px 1fr;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 6px 6px;
    color: #db8c8c;
}

.profile-menu-dropdown .profile-menu-logout .profile-menu-icon,
.profile-menu-dropdown .profile-menu-logout span:last-child {
    color: currentColor;
}

.profile-menu-dropdown .profile-menu-logout:hover,
.profile-menu-dropdown .profile-menu-logout:focus-visible {
    color: #ffb1b1;
    background: #d85d5d0d;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.steam-dialog {
    width: min(460px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    overflow: auto;
    background: #191c18;
    border: 1px solid #57583d;
    border-radius: 14px;
    padding: 36px;
    color: var(--text);
    box-shadow: 0 25px 100px #0008;
}
.steam-dialog::backdrop {
    background: #080b09b0;
    backdrop-filter: blur(7px);
}
.steam-dialog h2 {
    font-size: 1.75rem;
    margin: 22px 0 18px;
    letter-spacing: -0.03em;
}
.steam-dialog p {
    color: var(--muted);
    font-size: 0.875rem;
}
.steam-dialog .button {
    margin-top: 25px;
    width: 100%;
    font-size: 0.875rem;
}
.dialog-steam {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border: 1px solid #7a826148;
    border-radius: 12px;
    background: #cde2aa0b;
}
.dialog-close {
    position: absolute;
    right: 14px;
    top: 12px;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    color: var(--muted);
    width: 36px;
    height: 36px;
}
.dialog-note {
    display: block;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.75rem;
}
.toast {
    z-index: 99999;
}

html {
    scroll-padding-top: calc(var(--header-height, 90px) + 20px);
}

@supports not (backdrop-filter: blur(20px)) {
    .header {
        background: #101211ed;
    }
}
@media (max-width: 1100px) {
    .header {
        height: auto;
        min-height: 90px;
        flex-wrap: wrap;
        padding-top: 16px;
        padding-bottom: 14px;
        gap: 16px;
    }
    .header nav {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    .header nav .active:after {
        bottom: -15px;
    }
}
@media (max-width: 600px) {
    .header {
        padding-inline: 18px;
        gap: 13px;
    }
    .header-actions {
        gap: 8px;
    }
    .language-picker select {
        width: 60px;
        min-height: 40px;
        padding-left: 8px;
    }
    .steam-login {
        padding: 10px;
        min-height: 40px;
    }
    .steam-login span {
        font-size: 0.75rem;
    }
    .steam-login img {
        width: 23px;
    }
    .header nav {
        justify-content: flex-start;
        gap: 22px;
    }
    .signed-in-actions {
        gap: 8px;
    }
    .profile-label {
        display: none;
    }
    .header-logout {
        min-width: 26px;
    }
    .header .brand {
        font-size: 0.95rem;
        gap: 8px;
    }
}
@media (max-width: 420px) {
    .header > .brand {
        flex: 1;
    }
    .header-actions {
        width: 100%;
        justify-content: space-between;
        order: 2;
    }
    .header nav {
        order: 3;
    }
    .steam-login {
        padding-inline: 14px;
    }
    .steam-login span {
        font-size: 0.875rem;
    }
    .profile-label {
        display: block;
    }
    .signed-in-actions {
        gap: 12px;
    }
    .header .brand-logo {
        width: 30px;
        height: 22px;
    }
    .header .brand {
        font-size: 1rem;
    }
}



/* ==========================================================================
    Module: Controls
    ========================================================================== */

.language-picker {
    position: relative;
    flex: none;
}

.language-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    background: #ffffff06;
    border: 1px solid #ffffff22;
    border-radius: 7px;
    color: var(--text);
    font-size: .875rem;
    font-weight: 700;
}

.language-trigger:hover,.language-trigger[aria-expanded="true"] {
    background: #FFC1070d;
    border-color: #FFC10770;
    color: var(--gold);
}

.language-trigger img,.language-menu img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #ffffff16;
    flex: none;
}

.language-chevron {
    transition: transform .2s;
    color: var(--muted);
}

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

.language-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 2;
    min-width: 200px;
    padding: 8px;
    border: 1px solid #FFC10735;
    border-radius: 10px;
    background: #181c18f5;
    box-shadow: 0 16px 48px #0008;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.language-menu-title {
    display: block;
    padding: 6px 10px 10px;
    color: var(--muted);
    font-size: .75rem;
    letter-spacing: .04em;
}

.language-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: .875rem;
    text-align: left;
}

.language-menu button:hover,.language-menu button:focus-visible {
    background: #ffffff09;
}

.language-menu button[aria-checked="true"] {
    background: #FFC10712;
    color: var(--gold);
}

.language-check {
    margin-left: auto;
    visibility: hidden;
    font-weight: 700;
}

[aria-checked="true"] .language-check {
    visibility: visible;
}

.header-actions {
    gap: 14px;
}

@media(max-width:600px) {
    .header-actions {
        gap: 10px;
    }

    .language-trigger {
        padding: 9px;
        gap: 6px;
        min-height: 42px;
    }

    .language-trigger img {
        width: 21px;
        height: 14px;
    }

    .steam-login {
        padding: 10px;
    }

    .language-menu {
        min-width: 190px;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
        order: 2;
    }

    .header-actions>[data-steam-login],.header-actions>.signed-in-actions {
        margin-left: auto;
    }

    .header nav {
        order: 3;
    }

    .signed-in-actions {
        gap: 8px;
    }
}

@media(max-width:380px) {
    .language-trigger {
        padding: 9px 7px;
        gap: 5px;
        font-size: .75rem;
    }

    .language-trigger img {
        width: 18px;
        height: 12px;
    }

    .language-chevron {
        width: 9px;
    }

    .header-actions {
        gap: 8px;
    }

    .steam-login {
        gap: 7px;
        padding: 10px 8px;
    }

    .steam-login span {
        font-size: .75rem;
    }

    .steam-login img {
        width: 21px;
    }

    .profile-label {
        display: none;
    }
}


/* ==========================================================================
    Module: Hero
    ========================================================================== */

/* The video sets its own height. Content, smoke and shadows never scale the frame. */
.hero {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    min-height: 0;
    align-items: start;
    background: var(--bg);
    isolation: isolate;
}

.hero-media {
    grid-area: 1/1;
    position: relative;
    align-self: start;
    width: 100%;
    min-width: 0;
    pointer-events: none;
}

.hero-video {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: .88;
    transform: none;
}

.hero-shade {
    z-index: 1;
    background: linear-gradient(90deg,rgba(16,17,16,.9) 0%,rgba(16,17,16,.52) 36%,rgba(16,17,16,.1) 70%,rgba(16,17,16,.06) 100%);
}

.hero-media::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(to bottom,rgba(16,17,16,0) 0%,rgba(16,17,16,.15) 26%,rgba(16,17,16,.55) 60%,rgba(16,17,16,.9) 85%,var(--bg) 100%);
}

.hero .hero-smoke {
    inset: auto -6% -4%;
    height: 53%;
    z-index: 2;
    opacity: .42;
    mask-image: linear-gradient(to bottom,transparent 0%,#000 35%,#000 76%,transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 35%,#000 76%,transparent 100%);
}

.hero-smoke img {
    object-position: center bottom;
}

.hero-content {
    grid-area: 1/1;
    align-self: center;
    z-index: 4;
    padding: clamp(45px,5vw,90px) max(6vw,24px) clamp(65px,7vw,110px);
}

@media(max-width:1000px) {
    .hero-content {
        padding: 45px 5vw 65px;
    }

    .hero h1 {
        font-size: clamp(2.6rem,6vw,4.2rem);
    }

    .hero .eyebrow {
        margin-bottom: 18px;
    }

    .hero p {
        margin-top: 20px;
    }

    .hero-actions {
        margin-top: 25px;
    }

    .hero-caption {
        margin-top: 30px;
    }
}

@media(max-width:760px) {
    .hero {
        grid-template-rows: auto auto;
    }

    .hero-media {
        grid-area: 1/1;
    }

    .hero-video {
        height: auto;
        width: 100%;
    }

    .hero-shade {
        background: linear-gradient(180deg,rgba(16,17,16,.08),rgba(16,17,16,0) 65%,rgba(16,17,16,.14));
    }

    .hero-media::after {
        height: 33%;
    }

    .hero .hero-smoke {
        height: 45%;
        bottom: -4%;
        opacity: .36;
    }

    .hero-content {
        grid-area: 2/1;
        padding: 20px 24px 70px;
        align-self: start;
    }

    .hero h1 {
        font-size: clamp(2.3rem,7.6vw,3.7rem);
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-actions .button {
        width: auto;
    }

    .hero-caption {
        margin-top: 30px;
    }

    .hero p {
        font-size: 1rem;
    }
}

@media(max-width:420px) {
    .hero-content {
        padding: 14px 20px 0;
    }

    .hero h1 {
        font-size: clamp(2rem,8vw,2.8rem);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-caption {
        /*font-size: .75rem;
        letter-spacing: .035em;*/
        display: none;
    }
}


/* ==========================================================================
    Module: Servers and online charts
    ========================================================================== */

.server-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px;
    align-items: start;
}

.server-card {
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    backdrop-filter: blur(10px) saturate(130%);
    border: 0;
    background: #191b1996;
}

.server-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.server-type {
    color: #f5b75c;
    border: 1px solid #ffc10742;
    background: #ffc1070b;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.server-rate {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--gold);
    font-weight: 800;
    letter-spacing: -.06em;
}

.server-card h3 {
    font-size: clamp(1.2rem,2vw,1.65rem);
    letter-spacing: -.03em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.server-card .server-description {
    font-size: .875rem;
    line-height: 1.8;
    min-height: 0;
    color: var(--muted);
    margin-bottom: 22px;
}

.server-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: auto;
    padding-bottom: 24px;
    font-size: .7rem;
    color: var(--text);
}

.server-facts span+span {
    color: var(--muted);
}

.server-monitor {
    border-top: 1px solid #ffffff0d;
    padding-top: 22px;
    margin-bottom: 20px;
}

.server-online {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
}

.server-online strong {
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
}

.online-label {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--muted);
}

.online-label i {
    position: relative;
    display: block;
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #85897e;
}

[data-status=online] .online-label i {
    background: var(--gold);
    box-shadow: 0 0 12px #ffc10770;
}

[data-status=online] .online-label i::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--gold);
    border-radius: inherit;
    animation: online-status-wave 1s ease-out infinite;
}

[data-status=offline] .online-label {
    color: #85897e;
}

[data-status=offline] .online-label i {
    background: #676b63;
    box-shadow: 0 0 0 3px #676b6318;
}

[data-status=offline] .server-online strong {
    color: #85897e;
}

[data-status=offline] .server-progress-track {
    background: repeating-linear-gradient(120deg, #ffffff0d 0 8px, #ffffff06 8px 16px);
}

[data-status=offline] .server-progress-fill {
    background: #676b63;
}

@keyframes online-status-wave {
    from {
        opacity: .8;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(3.4);
    }
}

@media(prefers-reduced-motion:reduce) {
    [data-status=online] .online-label i::after {
        animation: none;
    }
}

.server-progress-wrap {
    position: relative;
}

.server-progress-trigger {
    display: block;
    background: none;
    border: 0;
    padding: 12px 0;
    width: 100%;
    min-height: 36px;
    text-align: left;
}

.server-progress-track {
    display: flex;
    height: 6px;
    border-radius: 20px;
    background: #ffffff12;
    overflow: hidden;
}

.server-progress-fill {
    display: block;
    flex: 0 1 auto;
    height: 100%;
    width: 0;
    transition: width .4s ease;
}

.server-progress-fill:first-child {
    border-radius: inherit 0 0 inherit;
}

.server-progress-fill:last-child {
    border-radius: 0 inherit inherit 0;
}

.server-progress-fill--online {
    background: linear-gradient(90deg, #ff8a00, var(--gold));
    box-shadow: 0 0 10px #ff980066;
}

.server-progress-fill--joining {
    background: linear-gradient(90deg, #ffe082, #fff3c4);
    box-shadow: 0 0 10px #ffe08266;
}

.server-progress-fill--queue {
    background: linear-gradient(90deg, #d84315, #ff5d3b);
    box-shadow: 0 0 10px #ff5d3b66;
}

[data-status=unknown] .server-progress-track {
    background: repeating-linear-gradient(120deg,#ffffff0e 0 8px,#ffffff06 8px 16px);
}

.server-tooltip {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translate(-50%,6px);
    width: 220px;
    max-width: 100%;
    padding: 16px 20px;
    border: 1px solid #ffc10742;
    border-radius: 8px;
    background: #24261f;
    box-shadow: 0 12px 40px #0008;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s,transform .15s;
    z-index: 5;
}

.server-tooltip span {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: .75rem;
    color: var(--muted);
    padding-left: 10px;
}

.server-tooltip span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    transform: translateY(-50%);
}

.server-tooltip span:nth-child(2)::before {
    background: #ffe082;
}

.server-tooltip span:nth-child(3)::before {
    background: #ff5d3b;
}

.server-tooltip b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.server-progress-wrap:hover .server-tooltip,.server-progress-wrap:focus-within .server-tooltip,.server-progress-wrap.is-open .server-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0);
}

.server-progress-wrap.is-dismissed .server-tooltip {
    opacity: 0;
    visibility: hidden;
}

.server-history {
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid #ffffff0d;
}

.server-history-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 40px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
}

.server-history-toggle:hover {
    color: var(--gold);
}

.server-history-toggle svg {
    flex: 0 0 auto;
    transition: transform .3s ease;
}

.server-history.is-expanded .server-history-toggle svg {
    transform: rotate(180deg);
}

.server-history-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .38s ease,opacity .25s ease;
}

.server-history-inner {
    min-height: 0;
    overflow: hidden;
}

.server-history.is-expanded .server-history-collapse {
    grid-template-rows: 1fr;
    opacity: 1;
}

.server-history-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.server-history-head>div:first-child {
    display: grid;
    gap: 2px;
}

.server-history-head>div:first-child span {
    color: var(--muted);
    font-size: .65rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.server-history-head strong {
    color: var(--text);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.server-history-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #10111080;
}

.server-history-inner>.server-history-tabs {
    margin: 16px 0 0 auto;
}

.server-history-tabs button {
    min-height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: .6rem;
    font-weight: 700;
    white-space: nowrap;
}

.server-history-tabs button:hover {
    color: var(--text);
}

.server-history-tabs button[aria-pressed=true] {
    background: var(--gold);
    color: #171910;
}

.server-history-meta {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
    color: var(--muted);
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
}

.server-history-meta b {
    color: var(--text);
}

.server-chart {
    position: relative;
    height: 146px;
    margin-top: 8px;
    outline: none;
}

.server-chart:focus-visible {
    border-radius: 5px;
    outline: 1px solid var(--gold);
    outline-offset: 4px;
}

.server-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.server-chart-grid line {
    stroke: #ffffff10;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.server-chart-divisions {
    fill: none;
    stroke: #ffffff16;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.server-chart-area,
.server-chart-line,
.server-chart-divisions,
.server-chart-grid,
.server-chart-cursor,
.server-chart-dot {
    pointer-events: none;
}

.server-chart-area {
    fill: var(--gold);
    opacity: .14;
}

.server-chart-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.server-chart-dot {
    fill: var(--gold);
    stroke: #24261f;
    stroke-width: 3;
    filter: drop-shadow(0 0 5px #ff980099);
    opacity: 0;
    transition: opacity .12s;
    vector-effect: non-scaling-stroke;
}

.server-chart-cursor {
    stroke: var(--gold);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0;
    transition: opacity .12s;
    vector-effect: non-scaling-stroke;
}

.server-chart.is-inspecting .server-chart-cursor,
.server-chart.is-inspecting .server-chart-dot {
    opacity: 1;
}

.server-chart-hit {
    fill: transparent;
    pointer-events: all;
}

.server-chart-tooltip {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 3;
    display: grid;
    gap: 1px;
    min-width: 96px;
    padding: 8px 10px;
    border: 1px solid #ff98004d;
    border-radius: 6px;
    background: #171916f2;
    box-shadow: 0 10px 25px #0007;
    transform: translateX(-50%);
    pointer-events: none;
}

.server-chart-tooltip[data-edge=start] {
    transform: translateX(0);
}

.server-chart-tooltip[data-edge=end] {
    transform: translateX(-100%);
}

.server-chart-tooltip strong {
    color: var(--text);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.server-chart-tooltip span {
    color: var(--muted);
    font-size: .58rem;
    white-space: nowrap;
}

.server-chart-axis {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 6px;
    color: #85897e;
    font-size: .55rem;
    font-variant-numeric: tabular-nums;
}

.server-chart-axis span:nth-child(2) {
    text-align: center;
}

.server-chart-axis span:last-child {
    text-align: right;
}

.server-connect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #101110;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 8px 8px 14px;
}

.server-connect code {
    font-size: .8rem;
    overflow-wrap: anywhere;
    user-select: all;
    color: var(--text);
    border-radius: 4px;
}

.server-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    color: var(--gold);
    background: #ffc1070b;
    border: 1px solid #ffc10730;
    border-radius: 4px;
    min-height: 44px;
}

.server-copy:hover {
    background: #ffc10720;
    border-color: var(--gold);
}

.server-card.is-offline {
    border-color: #3a3d36;
}

.server-card.is-offline .server-rate {
    color: #85897e;
}

.server-card.is-offline .server-connect {
    border-color: #353830;
    background: #0f100f;
}

.server-card.is-offline .server-copy:disabled {
    border-color: #3a3d36;
    background: #ffffff04;
    color: #777b72;
    cursor: not-allowed;
    opacity: .8;
}

.server-copy span {
    font-size: .65rem;
    font-weight: 700;
}

.server-copy svg {
    flex-shrink: 0;
}

@media(max-width:850px) {
    .server-grid {
        grid-template-columns: 1fr;
    }

    .server-card {
        padding: 26px;
    }

    .server-card h3 {
        font-size: 1.5rem;
    }
}

@media(max-width:450px) {
    .server-card {
        padding: 20px;
    }

    .server-copy span {
        display: none;
    }

    .server-card h3 {
        font-size: 1.25rem;
    }

    .server-history-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .server-history-tabs {
        width: 100%;
    }

    .server-history-tabs button {
        flex: 1;
    }

    .server-history-meta {
        width: 100%;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .server-chart {
        height: 125px;
    }
}



/* ==========================================================================
    Module: Daily rewards
    ========================================================================== */

.daily-section {
    padding-top: 25px;
    padding-bottom: 45px;
}

.daily-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: 48px;
    padding: 44px;
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(10px) saturate(130%);
    border: 0;
    background: #191b1996;
}

.daily-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 44px;
    width: 56px;
    height: 3px;
    background: var(--gold);
}

.daily-copy .eyebrow {
    margin-bottom: 20px;
}

.daily-copy h2 {
    font-size: clamp(1.8rem,2.8vw,2.7rem);
}

.daily-lead {
    max-width: 440px;
    margin-top: 22px;
    color: var(--muted);
    font-size: .875rem;
}

.daily-lead strong {
    color: var(--text);
}

.daily-facts {
    display: grid;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 26px 0 30px;
    font-size: .8125rem;
    color: var(--muted);
}

.daily-facts li {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.daily-facts li::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--gold);
    align-self: center;
}

.daily-facts strong {
    color: var(--text);
    font-weight: 400;
}

.daily-connect {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 15px;
}

.daily-connect code {
    background: transparent;
    padding: 0;
    color: var(--muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.daily-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--gold);
    font-size: .75rem;
}

.daily-copy-button:hover {
    color: var(--gold-light);
}

.daily-rewards {
    align-self: center;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.daily-steps {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.daily-steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 4px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #10111066;
}

.daily-steps strong {
    font-size: clamp(.8125rem,1.1vw,1rem);
    white-space: nowrap;
}

.daily-steps span {
    color: var(--muted);
    font-size: .625rem;
    white-space: nowrap;
}

.daily-steps .daily-final {
    border-color: #FFC10766;
    background: #FFC1070d;
}

.daily-final strong {
    color: var(--gold);
}

.daily-bonus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid #FFC10730;
    border-radius: 6px;
    background: #FFC10709;
    font-size: .75rem;
}

.daily-bonus strong {
    color: var(--gold);
    font-size: .9375rem;
    white-space: nowrap;
}

.daily-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.8;
}

@media(max-width:1100px) {
    .daily-panel {
        padding: 32px;
        gap: 32px;
        grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
    }

    .daily-panel::before {
        left: 32px;
    }

    .daily-steps {
        gap: 5px;
    }

    .daily-server {
        max-width: 125px;
    }
}

@media(max-width:900px) {
    .daily-panel {
        grid-template-columns: minmax(0,1fr);
        gap: 32px;
    }

    .daily-lead {
        max-width: 580px;
    }

    .daily-rewards {
        border-top: 1px solid var(--line);
        padding-top: 28px;
    }

    .daily-steps strong {
        font-size: 1rem;
    }

    .daily-steps span {
        font-size: .6875rem;
    }

    .daily-server {
        max-width: none;
    }
}

@media(max-width:600px) {
    .daily-section {
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .daily-panel {
        padding: 28px 20px;
    }

    .daily-panel::before {
        left: 20px;
    }

    .daily-copy>.button {
        width: 100%;
        padding-inline: 14px;
        gap: 14px;
    }

    .daily-steps {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 8px;
    }

    .daily-steps .daily-final {
        grid-column: span 2;
    }

    .daily-steps li {
        gap: 8px;
        padding: 14px 4px;
    }

    .daily-reward-head {
        gap: 12px;
    }

    .daily-server {
        max-width: 112px;
    }

    .daily-bonus {
        flex-wrap: wrap;
        padding: 14px;
    }

    .daily-total {
        font-size: 4rem;
    }

    .daily-facts li {
        display: block;
        padding-left: 15px;
        position: relative;
    }

    .daily-facts li::before {
        position: absolute;
        left: 0;
        top: .65em;
    }

    .daily-connect {
        gap: 3px 12px;
    }
}


/* ==========================================================================
    Module: Partners
    ========================================================================== */

.partner-section {
    padding-top: 15px;
    padding-bottom: 75px;
}

.partner-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
    align-items: center;
    gap: 40px;
    overflow: hidden;
    padding: 44px 48px;
    backdrop-filter: blur(10px) saturate(130%);
    border: 0;
    background: #191b1996;
    border-radius: var(--radius);
}

.partner-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.partner-copy .eyebrow {
    margin-bottom: 20px;
}

.partner-copy h2 {
    font-size: clamp(1.8rem,2.8vw,2.7rem);
}

.partner-description {
    max-width: 550px;
    margin-top: 22px;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.partner-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 24px;
}

.partner-art {
    position: relative;
    min-width: 0;
    justify-self: center;
    width: 100%;
    height: 100%;
    max-width: 500px;
}

.partner-art img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: -43px;
}

.partner-art-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--muted);
    font-size: .625rem;
    letter-spacing: .2em;
}

.partner-art-caption::before,.partner-art-caption::after {
    content: '';
    width: 22px;
    height: 1px;
    background: #FFC10766;
}

@media(max-width:1000px) {
    .partner-panel {
        padding: 36px 32px;
        gap: 24px;
        grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
    }
}

@media(max-width:760px) {
    .partner-panel {
        grid-template-columns: minmax(0,1fr);
        gap: 24px;
    }

    .partner-art {
        /*max-width: 280px;*/
    }

    .partner-art-caption {
        font-size: .5625rem;
    }

    .partner-section {
        padding-bottom: 55px;
    }
}

@media(max-width:480px) {
    .partner-panel {
        padding: 28px 20px;
    }

    .partner-name {
        margin-bottom: 20px;
    }

    .partner-features {
        gap: 10px 16px;
    }

    .partner-actions {
        gap: 14px;
        flex-direction: column;
        align-items: stretch;
    }

    .partner-actions .button {
        padding-inline: 14px;
        gap: 16px;
    }

    .partner-domain {
        text-align: center;
    }

    .partner-art {
        /*max-width: 240px;*/
        filter: blur(2px);
    }
}


/* ==========================================================================
    Module: Cookies
    ========================================================================== */

.cookie-notice {
    position: fixed;
    z-index: 650;
    bottom: max(24px,env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 18px 22px;
    width: max-content;
    max-width: calc(100% - 32px);
    border: 1px solid #ffffff1c;
    border-radius: 12px;
    background: #22251ff5;
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 70px #0007;
}

.cookie-notice[hidden] {
    display: none;
}

.cookie-notice p {
    font-size: .75rem;
    line-height: 1.7;
    color: var(--muted);
}

.cookie-details {
    border: 0;
    padding: 0;
    background: none;
    color: var(--gold);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-notice .button {
    flex-shrink: 0;
    font-size: .75rem;
    min-height: 42px;
}

.cookie-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(560px,calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 36px;
    border: 1px solid #ffffff20;
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 32px 100px #0009;
}

.cookie-dialog::backdrop {
    background: #0009;
    backdrop-filter: blur(5px);
}

.cookie-dialog h2 {
    font-size: 1.6rem;
    padding-right: 28px;
    letter-spacing: -.035em;
    margin: 0 0 24px;
}

.cookie-dialog p {
    font-size: .875rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 18px;
}

.cookie-dialog a,.cookie-instructions summary {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cookie-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface2);
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1;
}

.cookie-close:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.cookie-instructions {
    font-size: .875rem;
    margin: 0 0 24px;
}

.cookie-instructions summary {
    cursor: pointer;
}

.cookie-instructions p {
    margin: 14px 0 0;
}

.footer-links .cookie-reopen {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.footer-links .cookie-reopen:hover {
    color: var(--gold);
}

@media(max-width:520px) {
    .cookie-notice {
        gap: 14px;
        padding: 16px;
        bottom: max(16px,env(safe-area-inset-bottom));
    }

    .cookie-notice p {
        font-size: .7rem;
    }

    .cookie-details {
        display: block;
    }

    .cookie-dialog {
        padding: 30px 22px;
    }

    .cookie-dialog h2 {
        font-size: 1.4rem;
    }

    .cookie-dialog .button {
        width: 100%;
    }
}


/* ==========================================================================
    Module: Navigation
    ========================================================================== */

.header {
    height: 90px;
    min-height: 0;
    flex-wrap: nowrap;
    padding-block: 0;
}

.header>.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 14px;
}

.header-menu>nav {
    width: auto;
    order: 0;
    margin-inline: auto;
    gap: 22px;
    white-space: nowrap;
}

.header-menu>nav .header__support-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 7px;
    position: relative;
}

.header__support-notification {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: var(--gold);
}

.header__support-notification[hidden] {
    display: none;
}

.header__more {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

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

.header__more-trigger {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .875rem;
}

.header__more-trigger:hover,.header__more-trigger[aria-expanded="true"],.header__more-trigger--active {
    color: var(--gold);
}

.header__more-trigger svg {
    -webkit-transition: -webkit-transform .15s;
    transition: transform .15s;
}

.header__more-trigger[aria-expanded="true"] svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.header__more-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #191c17;
    -webkit-box-shadow: 0 14px 35px #0006;
    box-shadow: 0 14px 35px #0006;
}

.header-menu>nav .header__more-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    text-align: left;
}

.header-menu>nav .header__more-menu a:hover,.header-menu>nav .header__more-menu a:focus-visible {
    background: #ff98000d;
    color: var(--gold);
}

.menu-toggle--support-unread {
    position: relative;
}

.menu-toggle--support-unread::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: #191c17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9800' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    pointer-events: none;
}

.header-menu>.header-actions {
    width: auto;
    order: 0;
    flex: none;
}

.menu-toggle,.menu-backdrop {
    display: none;
}

@media(max-width:1100px) {
    .header {
        height: 76px;
        min-height: 76px;
        padding: 0 max(4vw,20px);
        justify-content: space-between;
        gap: 14px;
    }

    .header>.brand {
        flex: none;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        flex: none;
        width: 46px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 7px;
        color: var(--gold);
        background: #ffffff06;
    }

    .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform .2s,opacity .2s;
    }

    .is-menu-open .menu-toggle span:first-child {
    transform: translateY(7px) rotate(45deg);
    }

    .is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
    }

    .is-menu-open .menu-toggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
    }

    .header>.header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 76px);
    padding: 18px max(4vw,20px) 28px;
    overflow-y: auto;
    background: #161914;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px #0004;
    }

    .header.menu-ready:not(.is-menu-open)>.header-menu {
    display: none;
    }

    .header-menu>nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    width: 100%;
    }

    .header-menu>nav a {
    padding: 15px 16px;
    border-radius: 6px;
    font-size: 1rem;
    }

    .header-menu>nav a:hover {
    background: #ffffff06;
    }

    .header-menu>nav a.active {
    background: #FFC10710;
    color: var(--gold);
    }

    .header-menu>nav .active::after {
    display: none;
    }

    .header-menu>.header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding-top: 22px;
    margin-top: 18px;
    border-top: 1px solid var(--line);
    }

    .header-menu .header-actions>[data-steam-login],.header-menu .header-actions>.signed-in-actions {
    margin-left: auto;
    }

    .header-menu .language-menu {
    top: auto;
    bottom: calc(100% + 10px);
    }

    .header-menu .steam-login {
    min-height: 44px;
    padding: 12px;
    gap: 10px;
    }

    .header-menu .steam-login span {
    font-size: .8125rem;
    }

    .is-menu-open>.menu-backdrop {
    display: block;
    position: fixed;
    top: 76px;
    left: 0;
    width: 100%;
    height: 100dvh;
    border: 0;
    background: #0009;
    z-index: 1;
    cursor: default;
    }

    body.mobile-menu-open {
    overflow: hidden;
    }
}

@media(max-width:380px) {
    .header-menu .header-actions>[data-steam-login],.header-menu .header-actions>.signed-in-actions {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    }

    .header-menu>.header-actions {
    gap: 12px;
    }

    .header-menu .profile-label {
    display: block;
    }
}

@media(max-width:1100px) {
    .header > .signed-in-actions {
        order: 1;
        flex: none;
        gap: 8px;
        margin-left: auto;
    }

    .header > .guest-actions {
        order: 1;
        margin-left: auto;
    }

    .header > .menu-toggle {
        order: 2;
    }

    .header > .signed-in-actions .header-topup-label,
    .header > .signed-in-actions .profile-chevron {
        display: none;
    }

    .header > .signed-in-actions .profile-label {
        display: block;
        text-align: left;
    }

    .header > .signed-in-actions .profile-label [data-profile-name] {
        display: none;
    }

    .header > .signed-in-actions .header-topup {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
    }

    .header > .signed-in-actions .header-profile {
        min-height: 44px;
        padding-right: 10px;
    }
}

@media (max-width: 600px) {
    .header {
        gap: 8px;
    }

    .header > .signed-in-actions .header-topup {
        width: 32px;
        height: 32px;
        min-height: 32px;
    }

    .header > .signed-in-actions .header-profile {
        min-height: 32px;
        padding-right: 7px;
    }

    .header > .signed-in-actions .header-profile__balance {
        font-size: .7rem;
    }

    .header > .guest-actions .steam-login {
        min-height: 32px;
        padding: 6px 10px;
    }

    .mini-avatar {
        width: 32px;
        height: 32px;
    }

    .menu-toggle {
        width: 32px;
        height: 32px;
    }

    .menu-toggle span {
        width: 15px;
        height: 1px;
    }

    .header > .brand > span {
        display: none;
    }

    .is-menu-open .menu-toggle span:first-child {
        transform: translateY(6px) rotate(45deg);
    }

    .is-menu-open .menu-toggle span:last-child {
        transform: translateY(-6px) rotate(-45deg);
    }
}


/* ==========================================================================
    Module: Rules
    ========================================================================== */

.rules-intro {
    max-width: 1240px;
    margin: auto;
    padding: 70px 32px 40px;
}

.rules-intro h1 {
    font-size: clamp(2.5rem,5vw,4.7rem);
    letter-spacing: -.055em;
    margin: 18px 0 22px;
}

.rules-intro p {
    color: var(--muted);
}

.rules-layout {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 32px 90px;
    display: grid;
    grid-template-columns: 230px minmax(0,1fr);
    gap: 56px;
    align-items: start;
}

.rules-nav {
    position: sticky;
    top: calc(var(--header-height,90px) + 28px);
    display: grid;
    gap: 8px;
    border-left: 1px solid var(--line);
    padding-left: 20px;
}

.rules-nav a {
    font-size: .8rem;
    padding: 9px 0;
    color: var(--muted);
}

.rules-nav a:hover {
    color: var(--gold);
}

.rules-nav span {
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--gold);
    margin-right: 12px;
}

.rules-section {
    scroll-margin-top: calc(var(--header-height,90px) + 30px);
    padding: 30px 0;
    border-top: 1px solid var(--line);
}

.rules-section h2 {
    font-size: 1.5rem;
    letter-spacing: -.025em;
    margin-bottom: 24px;
}

.rules-section ol {
    padding: 0 0 0 26px;
    margin: 0;
    display: grid;
    gap: 20px;
}

.rules-section li {
    padding-left: 10px;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.85;
}

.rules-section li::marker {
    color: var(--gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rules-section a,.rules-source a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rules-callout {
    border-left: 3px solid var(--gold);
    background: #ffc10708;
    padding: 18px 22px;
    font-size: .875rem;
    margin: 26px 0 0;
    color: var(--text);
}

.rules-source {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    color: var(--muted);
    font-size: .75rem;
}

@media(max-width:800px) {
    .rules-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .rules-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
        border-left: 0;
        padding: 0;
    }

    .rules-nav a {
        white-space: nowrap;
    }

    .rules-intro {
        padding-top: 44px;
    }
}

@media(max-width:520px) {
    .rules-intro,.rules-layout {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rules-section li {
        padding-left: 4px;
    }

    .rules-nav span {
        margin-right: 6px;
    }

    .rules-nav a {
        font-size: .75rem;
    }

    .rules-section h2 {
        font-size: 1.25rem;
    }
}


/* ==========================================================================
    Module: Statistics
    ========================================================================== */

.stats-page {
    max-width: 1440px;
    margin: auto;
    padding: 60px max(4vw,20px) 80px;
}

.stats-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 36px;
}

.stats-intro .eyebrow {
    margin-bottom: 18px;
}

.stats-intro h1 {
    font-size: clamp(2.2rem,4vw,3.6rem);
    letter-spacing: -.055em;
}

.stats-intro p {
    color: var(--muted);
    margin-top: 20px;
    font-size: .875rem;
}

.stats-season {
    flex: none;
    border-left: 2px solid var(--gold);
    padding-left: 18px;
    font-size: .75rem;
    color: var(--muted);
}

.stats-season strong {
    display: block;
    font-size: 1rem;
    color: var(--text);
    margin-top: 6px;
}

.stats-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
}

.stats-server-control {
    width: 290px;
    max-width: 100%;
    flex: none;
}

.stats-server-select {
    width: 100%;
}

.stats-toolbar label {
    font-size: .75rem;
    margin-bottom: 8px;
}

.stats-toolbar select {
    width: 100%;
}

.stats-search-control {
    flex: 1;
    min-width: 0;
}

.stats-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding-left: 14px;
    background: var(--bg);
}

.stats-search-box>svg {
    flex: none;
    color: var(--muted);
}

.stats-search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding-left: 0;
}

.stats-search-box input::-webkit-search-cancel-button {
    display: none;
}

.stats-search-box button {
    width: 44px;
    min-width: 44px;
    min-height: 46px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
}

.stats-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 17px 24px;
    border-inline: 1px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
}

.stats-meta strong {
    color: var(--text);
    font-weight: 400;
}

.stats-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    scrollbar-color: #676343 var(--surface);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.stats-table th {
    background: #20231d;
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 16px 20px;
    white-space: nowrap;
}

.stats-table th button {
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    padding: 0;
    min-height: 28px;
    white-space: nowrap;
}

.stats-table th button:hover,.stats-table th[aria-sort=descending],.stats-table th[aria-sort=ascending] {
    color: var(--gold);
}

.stats-table td {
    padding: 16px 20px;
    border-top: 1px solid #31352c88;
}

.stats-table td:not(:nth-child(2)),.stats-table th:not(:nth-child(2)) {
    text-align: right;
    white-space: nowrap;
}

.stats-table td:first-child,.stats-table th:first-child {
    text-align: center;
    width: 64px;
}

.stats-table tbody tr {
    background: #151713;
    cursor: pointer;
    transition: background .15s;
}

.stats-table tbody tr:nth-child(even) {
    background: #191c17;
}

.stats-table tbody tr:hover,.stats-table tbody tr:focus-within {
    background: #292c20;
}

.stats-rank {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    color: var(--muted);
    font-size: .75rem;
}

.stats-rank[data-top="1"] {
    color: var(--gold);
    background: #FFC10716;
    border: 1px solid #FFC10740;
    border-radius: 5px;
}

.stats-rank[data-top="2"] {
    color: #d0d5ce;
    background: #ffffff16;
    border: 1px solid #acacac;
    border-radius: 5px;
}

.stats-rank[data-top="3"] {
    color: #d9a976;
    background: #d8a8761f;
    border: 1px solid #d9a976;
    border-radius: 5px;
}

.stats-player {
    border: 0;
    background: none;
    color: var(--text);
    padding: 0;
    text-align: left;
    max-width: 280px;
    font-weight: 700;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.stats-player:hover {
    color: var(--gold);
}

.stats-steamid {
    display: block;
    color: var(--muted);
    font-size: .6875rem;
    letter-spacing: .025em;
    margin-top: 5px;
}

.stats-kills {
    color: var(--gold);
    font-weight: 700;
}

.stats-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
}

.stats-page-info {
    color: var(--muted);
    font-size: .75rem;
}

.stats-page-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.stats-page-buttons button {
    min-width: 38px;
    min-height: 40px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font-size: .75rem;
}

.stats-page-buttons button:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
}

.stats-page-buttons button[aria-current=page] {
    background: var(--gold);
    border-color: var(--gold);
    color: #151810;
    font-weight: 700;
}

.stats-page-buttons button:disabled {
    opacity: .35;
}

.stats-page-buttons>span {
    color: var(--muted);
    padding: 0 3px;
}

.stats-source {
    margin-top: 28px;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.8;
}

.stats-source a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.stats-empty {
    text-align: center;
    padding: 65px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.stats-empty p {
    color: var(--muted);
    margin: 12px 0 22px;
    font-size: .875rem;
}

.stats-hint {
    font-size: .75rem;
    color: var(--muted);
    margin-bottom: 12px;
}

.player-dialog {
    width: min(820px,calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    padding: 32px;
    border: 1px solid #54573b;
    border-radius: 14px;
    background: #191c17;
    color: var(--text);
    overflow: auto;
    box-shadow: 0 30px 100px #0008;
}

.player-dialog::backdrop {
    background: #080b0bce;
    backdrop-filter: blur(7px);
}

body:has(.player-dialog[open]) {
    overflow: hidden;
}

.player-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.player-dialog-header h2 {
    font-size: 1.7rem;
    overflow-wrap: anywhere;
}

.player-dialog-header>div {
    min-width: 0;
}

.player-dialog .eyebrow {
    margin-bottom: 12px;
    font-size: .6875rem;
    letter-spacing: .1em;
}

.player-close {
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 1.6rem;
}

.player-summary {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin: 24px 0;
}

.player-summary>div {
    padding: 18px 14px;
    background: #10130f;
    border: 1px solid var(--line);
    border-radius: 7px;
}

.player-summary span {
    display: block;
    font-size: .6875rem;
    color: var(--muted);
    margin-bottom: 9px;
}

.player-summary strong {
    font-size: clamp(1.1rem,2vw,1.65rem);
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.player-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.player-breakdown h3 {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .875rem;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--line);
}

.player-breakdown h3 strong {
    color: var(--gold);
    font-size: .8125rem;
}

.player-breakdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.player-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #31352c80;
    font-size: .75rem;
    color: var(--muted);
}

.player-breakdown li strong {
    color: var(--text);
    font-weight: 400;
    white-space: nowrap;
}

.player-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    border-top: 1px solid var(--line);
    margin-top: 24px;
    padding-top: 20px;
    font-size: .75rem;
    color: var(--gold);
}

@media(max-width:900px) {
    .stats-table {
        min-width: 740px;
    }

    .stats-table th,.stats-table td {
        padding: 14px;
    }

    .stats-intro {
        align-items: flex-start;
    }

    .stats-season {
        max-width: 180px;
    }
}

@media(max-width:600px) {
    .stats-page {
        padding-top: 36px;
        padding-bottom: 55px;
    }

    .stats-intro {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 28px;
    }

    .stats-season {
        max-width: none;
    }

    .stats-toolbar {
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .stats-server-control {
        width: 100%;
    }

    .stats-meta {
        padding: 16px 20px;
        flex-direction: column;
    }

    .stats-pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .stats-page-buttons {
        gap: 4px;
    }

    .stats-page-buttons button {
        min-width: 32px;
        padding: 6px;
    }

    .player-dialog {
        padding: 22px 18px;
    }

    .player-dialog-header h2 {
        font-size: 1.35rem;
    }

    .player-summary {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }

    .player-breakdown {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .player-summary strong {
        font-size: 1.4rem;
    }
}

@media(max-width:600px) {
    .stats-table th,.stats-table td {
        padding: 12px 10px;
        font-size: .8125rem;
    }

    .stats-table th {
        font-size: .6875rem;
    }

    .stats-table th button {
        min-height: 44px;
    }

    .stats-player {
        font-size: .8125rem;
        line-height: 1.5;
    }
}


/* ==========================================================================
    Module: Product preview dialogs
    ========================================================================== */

body.product-modal-open {
    overflow: hidden;
}

.product-modal {
    width: min(1000px, calc(100% - 40px));
    max-height: calc(100dvh - 40px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #ffffff20;
    border-radius: 16px;
    background: #171916;
    color: var(--text);
    box-shadow: 0 38px 120px #000c;
}

.product-modal[open] {
    animation: product-modal-in .24s ease-out both;
}

.product-modal.is-closing {
    animation: product-modal-out .18s ease-in both;
}

.product-modal::backdrop {
    background: #060705d9;
    backdrop-filter: blur(8px);
}

.product-modal-layout {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.28fr);
    max-height: calc(100dvh - 40px);
}

.product-modal-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 570px;
    padding: 56px 34px;
    overflow: hidden;
    border-right: 1px solid var(--line);
    background:
            radial-gradient(circle at 50% 45%, #ff980026 0, transparent 48%),
            linear-gradient(145deg, #20231d, #11130f 72%);
}

.product-modal--kit .product-modal-visual {
    background:
            radial-gradient(circle at 50% 45%, #bf551d2d 0, transparent 48%),
            linear-gradient(145deg, #211e19, #11130f 72%);
}

.product-modal--set .product-modal-visual {
    background:
            radial-gradient(circle at 50% 45%, #bf551d2d 0, transparent 48%),
            linear-gradient(145deg, #211e19, #11130f 72%);
}

.product-modal--command .product-modal-visual {
    background:
            radial-gradient(circle at 50% 45%, #ff980026 0, transparent 48%),
            linear-gradient(145deg, #20231d, #11130f 72%);
}

.product-modal--currency .product-modal-visual {
    background:
            radial-gradient(circle at 50% 45%, #ffc10730 0, transparent 48%),
            linear-gradient(145deg, #222219, #11130f 72%);
}

.product-modal-visual::before {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px solid #ffffff0b;
    border-radius: 10px;
    pointer-events: none;
}

.product-modal-visual img {
    position: relative;
    width: min(100%, 390px);
    height: auto;
    object-fit: contain;
    /*mix-blend-mode: lighten;*/
    filter: drop-shadow(0 30px 48px #0008);
}

.product-modal-type,
.product-modal-duration {
    position: absolute;
    z-index: 1;
    left: 34px;
    padding: 7px 11px;
    border: 1px solid #ffffff18;
    border-radius: 999px;
    background: #11130fc7;
    color: #d7d9ce;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-modal-type {
    top: 32px;
}

.product-modal-duration {
    bottom: 32px;
    color: var(--gold-light);
}

.product-modal-body {
    position: relative;
    padding: 52px 50px 42px;
    overflow-y: auto;
}

.product-modal--purchase .product-modal-layout {
    height: min(720px, calc(100dvh - 40px));
    min-height: 0;
}

.product-modal--purchase .product-modal-visual {
    min-height: 0;
}

.product-modal--purchase .product-modal-body {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    justify-content: space-between;
}

.product-modal__content {
    min-height: 0;
    padding: 22px 50px 26px;
    overflow-y: auto;
    scrollbar-color: #696d5e transparent;
    scrollbar-width: thin;
}

.product-modal__actions {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 18px 50px 42px;
    border-top: 1px solid var(--line);
    background: #171916;
    box-shadow: 0 -14px 30px #0b0c0a80;
}

.product-modal__server {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.product-modal__server span {
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-modal__server strong {
    overflow: hidden;
    color: var(--text);
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-modal__activation {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 0;
    color: #d8dacf;
    font-size: .75rem;
    cursor: pointer;
}

.product-modal__activation[hidden] {
    display: none;
}

.product-modal__activation input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    accent-color: var(--gold);
}

.product-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #20231f;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
}

.product-modal-close:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: rotate(90deg);
}

.product-modal-body .eyebrow {
    margin-bottom: 12px;
}

.product-modal-body h2 {
    padding-right: 48px;
    font-size: clamp(2.15rem, 5vw, 1.5rem);
    letter-spacing: -.055em;
}

@media (max-width: 500px) {
    .product-modal-body h2 {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }
}

.product-modal-lead {
    max-width: 560px;
    margin-top: 17px;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.75;
}

.product-modal__pickup-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #ff980033;
    border-radius: var(--radius);
    background: #ff98000a;
    color: var(--muted);
    font-size: .8125rem;
    line-height: 1.7;
}

.product-modal__pickup-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--gold);
}

.product-modal__pickup-text {
    min-width: 0;
    margin: 0;
}

.product-modal__pickup-command {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid #ff980033;
    border-radius: 4px;
    background: #ff980014;
    color: var(--gold);
    font-family: ui-monospace, monospace;
    font-weight: 600;
    white-space: nowrap;
}

.product-modal-section {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.product-modal-section-title {
    display: block;
    margin-bottom: 16px;
    color: #d3d6cb;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.product-modal-benefits,
.product-modal-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-modal-benefits li,
.product-modal-items li {
    min-height: 58px;
    padding: 14px 15px;
    border: 1px solid #ffffff0e;
    border-radius: 8px;
    background: #ffffff05;
    color: #d8dacf;
    font-size: .75rem;
    line-height: 1.5;
}

.product-modal-items li > span {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.product-modal-items li img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 6px;
    object-fit: contain;
}

.product-modal-benefits li {
    position: relative;
    padding-left: 38px;
}

.product-modal-benefits li::before {
    content: '✓';
    position: absolute;
    top: 14px;
    left: 15px;
    color: var(--gold);
    font-weight: 700;
}

.product-modal-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-modal-items strong {
    color: var(--gold-light);
    white-space: nowrap;
}

.product-modal-items__item--described {
    cursor: help;
}

.product-modal-items__item--described:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 2px;
}

.product-modal-items__tooltip {
    position: fixed;
    inset: auto;
    z-index: 1200;
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(240px, 40dvh);
    margin: 0;
    padding: 12px 14px;
    overflow-y: auto;
    border: 1px solid #ff98004d;
    border-radius: 8px;
    background: #171916f5;
    color: var(--text);
    box-shadow: 0 10px 25px #0007;
    font-family: inherit;
    font-size: .75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.product-modal-items__tooltip[hidden] {
    display: none;
}

.product-modal-kits {
    display: grid;
    gap: 18px;
}

.product-modal-kit {
    display: grid;
    gap: 10px;
}

.product-modal-kit h3 {
    margin: 0;
    color: var(--text);
    font-size: .875rem;
}

.product-modal-kit p {
    margin: 0;
    color: var(--muted);
    font-size: .6875rem;
    line-height: 1.5;
}

.product-modal-purchase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    padding: 14px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff05;
}

.product-modal__actions .product-modal-purchase {
    margin-top: 0;
}

.product-modal-purchase > label {
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-modal-quantity {
    width: 122px;
}

.product-modal-quantity input {
    min-height: 38px;
}

.product-modal-quantity input:focus,
.product-modal-quantity input:focus-visible {
    outline: none;
    box-shadow: none;
}

.product-modal-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.product-modal-price del {
    color: var(--muted);
    font-size: .875rem;
}

[data-product-purchase-form][aria-busy="true"] {
    cursor: progress;
}

.product-modal-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 22px;
}

.product-modal-facts span {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-modal-facts strong {
    color: var(--text);
    font-size: .75rem;
    letter-spacing: 0;
    text-transform: none;
}

.product-modal-balance {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    margin-top: 30px;
    padding: 24px;
    border: 1px solid #ff98002b;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff980010, #ffffff04);
}

.product-modal-balance span {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-modal-balance strong {
    color: var(--gold-light);
    font-size: clamp(2.7rem, 7vw, 4.7rem);
    line-height: 1;
    letter-spacing: -.06em;
}

.product-modal-balance small {
    padding-bottom: 5px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.product-modal__actions .product-modal-footer {
    margin-top: 18px;
    padding-top: 18px;
}

.product-modal-footer > div {
    display: grid;
    gap: 2px;
}

@media (max-width: 520px) {
    .product-modal-footer > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
    }
}

.product-modal-footer span {
    color: var(--muted);
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-modal-footer strong {
    color: var(--gold-light);
    font-size: 1.65rem;
    line-height: 1.2;
}

.product-modal-footer .button {
    min-width: 220px;
}

@keyframes product-modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.975);
    }

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

@keyframes product-modal-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
}

@media(max-width:780px), (max-height:520px) {
    .product-modal {
        width: min(620px, calc(100% - 24px));
        max-height: calc(100dvh - 24px);
    }

    .product-modal-layout {
        display: block;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .product-modal-visual {
        min-height: 260px;
        padding: 38px 26px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .product-modal-visual img {
        width: min(66%, 260px);
    }

    .product-modal-type,
    .product-modal-duration {
        left: 24px;
    }

    .product-modal-type {
        top: 22px;
    }

    .product-modal-duration {
        bottom: 22px;
    }

    .product-modal-body {
        padding: 38px 28px 30px;
        overflow: visible;
    }

    .product-modal--purchase .product-modal-layout {
        height: auto;
    }

    .product-modal--purchase .product-modal-body {
        display: block;
        padding: 0;
        overflow: visible;
    }

    .product-modal__content {
        padding: 38px 28px 22px;
        overflow: visible;
    }

    .product-modal__actions {
        padding: 18px 28px 30px;
        box-shadow: none;
    }

    .product-modal-close {
        position: fixed;
        top: max(20px, env(safe-area-inset-top));
        right: 20px;
        z-index: 2;
        background: #161914eb;
    }
}

@media(max-width:520px) {
    .product-modal-benefits,
    .product-modal-items,
    .product-modal-facts {
        grid-template-columns: 1fr;
    }

    .product-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .product-modal-footer .button {
        width: 100%;
        min-width: 0;
    }

    .product-modal-purchase {}

    .product-modal-quantity {
        width: max-content;
    }
}

@media(prefers-reduced-motion:reduce) {
    .product-modal[open],
    .product-modal.is-closing {
        animation: none;
    }
}


/* ==========================================================================
    Module: Balance top-up dialog
    ========================================================================== */

body.balance-modal-open {
    overflow: hidden;
}

.balance-modal {
    width: min(620px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 1px solid #4a4e42;
    border-radius: 16px;
    background: #171916;
    color: var(--text);
    box-shadow: 0 38px 120px #000d;
}

.balance-modal::-webkit-scrollbar {
    display: none;
}

.balance-modal[open] {
    animation: balance-modal-in .24s ease-out both;
}

.balance-modal.is-closing {
    animation: balance-modal-out .18s ease-in both;
}

.balance-modal::backdrop {
    background: #060705dc;
    backdrop-filter: blur(8px);
}

.balance-modal-card {
    position: relative;
    padding: 38px 40px 34px;
    background:
            radial-gradient(circle at 86% 5%, #ff980012, transparent 25%),
            linear-gradient(145deg, #1b1e1a, #141613 72%);
}

.balance-modal-card::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid #ffffff08;
    border-radius: 10px;
    pointer-events: none;
}

.balance-modal-close {
    position: absolute;
    z-index: 1;
    top: 42px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #242720;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
}

.balance-modal-close:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: rotate(90deg);
}

.balance-modal-card > .eyebrow {
    margin-bottom: 8px;
}

.balance-modal-card h2 {
    padding-right: 54px;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    letter-spacing: -.045em;
}

.balance-modal-lead {
    margin-top: 8px;
    color: var(--muted);
    font-size: .8125rem;
}

.topup-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid #ff980038;
    border-radius: 8px;
    background: linear-gradient(110deg, #ff980014, #ff980006);
    color: var(--gold-light);
    font-size: .8125rem;
    line-height: 1.5;
}

.topup-alert__icon {
    flex: none;
    color: var(--gold);
}

.topup-alert:not([hidden]) + .topup-amount {
    margin-top: 16px;
}

.topup-amount {
    display: grid;
    gap: 8px;
    margin-top: 26px;
    color: #e2e4da;
    font-size: .75rem;
    font-weight: 700;
}

.topup-amount-control {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 54px;
    border: 1px solid #51564a;
    border-radius: 8px;
    background: #ffffff04;
    transition: border-color .2s, box-shadow .2s;
}

.topup-amount-control:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px #ff980012;
}

.topup-amount-control input {
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-weight: 700;
}

.topup-amount-control > span {
    padding-right: 17px;
    color: var(--gold-light);
    font-size: 1rem;
}

.topup-amount small {
    color: var(--muted);
    font-size: .625rem;
    font-weight: 400;
}

.payment-methods {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.payment-methods legend {
    margin-bottom: 10px;
    color: #e2e4da;
    font-size: .75rem;
    font-weight: 700;
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.payment-method {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 12px;
    border: 1px solid #454a3f;
    border-radius: 8px;
    background: #ffffff03;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
    outline: none;
}

.payment-method:hover {
    border-color: #777d6b;
    background: #ffffff06;
    transform: translateY(-1px);
}

.payment-method input:focus {
    outline: none;
}

.payment-method:has(input:checked) {
    border-color: var(--gold);
    background: #ff98000c;
    box-shadow: inset 0 0 0 1px #ff980020;
}

.payment-method input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.payment-method strong {
    overflow: hidden;
    color: #e8eae1;
    font-size: .75rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-mark {
    display: flex;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid #ffffff13;
    border-radius: 6px;
    background: #30332d;
    padding: 6px;
}

.payment-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.payment-check {
    color: var(--gold);
    font-size: .75rem;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s, transform .15s;
}

.payment-method:has(input:checked) .payment-check {
    opacity: 1;
    transform: scale(1);
}

.topup-bonus {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.topup-bonus-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.topup-bonus-heading h3 {
    font-size: .75rem;
    letter-spacing: .02em;
}

.topup-bonus-heading output {
    color: var(--gold-light);
    font-size: 1rem;
    font-weight: 700;
}

.topup-range {
    --bonus-progress: 0%;
    position: relative;
    width: 100%;
    height: 6px;
    margin: 16px 0 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #3b3e36;
    pointer-events: none;
}

.topup-range__progress {
    display: block;
    width: var(--bonus-progress);
    height: 100%;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 18px #ff980080;
    transition: width .2s ease;
}

.topup-marks {
    --topup-mark-count: 1;
    display: grid;
    grid-template-columns: repeat(var(--topup-mark-count), minmax(0, 1fr));
    min-height: 20px;
}

.topup-marks button {
    width: 100%;
    padding: 2px 0;
    border: 0;
    background: none;
    color: #8f9387;
    font-size: .5625rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.topup-marks button:hover,
.topup-marks button.is-reached {
    color: var(--gold-light);
}

.topup-current-bonus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid #ff980066;
    border-radius: 8px;
    background: linear-gradient(90deg, #ff980014, #ffc10708);
    color: #e3e5dc;
    font-size: .75rem;
    font-weight: 700;
}

.topup-current-bonus__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.topup-current-bonus__icon {
    flex: 0 0 auto;
    color: var(--gold);
}

.topup-current-bonus strong {
    color: var(--gold-light);
    font-size: 1rem;
}

.topup-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
    border: 1px solid #ffffff0c;
    border-radius: 8px;
    background: #ffffff03;
}

.topup-summary > div {
    display: grid;
    gap: 4px;
    padding: 17px 18px;
    text-align: center;
}

.topup-summary > div + div {
    border-left: 1px solid var(--line);
}

.topup-summary span {
    color: var(--muted);
    font-size: .625rem;
}

.topup-summary strong {
    color: var(--gold-light);
    font-size: 1.2rem;
}

.balance-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 12px;
    margin-top: 22px;
}

.balance-modal-actions .button {
    width: 100%;
}

.balance-modal-loader {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    border-radius: inherit;
    background: #11130fed;
    backdrop-filter: blur(5px);
    cursor: wait;
}

.balance-modal-loader[hidden] {
    display: none;
}

.balance-modal-loader__spinner {
    width: 46px;
    height: 46px;
    border: 4px solid #ffffff1a;
    border-top-color: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 22px #ff980033;
    animation: balance-modal-loader-spin .75s linear infinite;
}

.balance-modal-loader__text {
    color: var(--gold-light);
    font-size: .8125rem;
    font-weight: 700;
}

@keyframes balance-modal-loader-spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes balance-modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.975);
    }

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

@keyframes balance-modal-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }
}

@media(max-width:560px) {
    .balance-modal {
        width: min(100% - 20px, 620px);
        max-height: calc(100dvh - 20px);
    }

    .balance-modal-card {
        padding: 32px 22px 24px;
    }

    .balance-modal-close {
        top: 16px;
        right: 16px;
    }

    .balance-modal-card h2 {
        font-size: 1.65rem;
    }

    .payment-methods-grid {
        grid-template-columns: 1fr;
    }

    .payment-method {
        min-height: 50px;
    }

    .topup-marks button {
        font-size: .5rem;
    }

    .balance-modal-actions {
        grid-template-columns: 1fr;
    }
}

@media(prefers-reduced-motion:reduce) {
    .balance-modal[open],
    .balance-modal.is-closing {
        animation: none;
    }
}

/* ==========================================================================
   Player profile
   ========================================================================== */

.profile-page {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 28px;
    width: min(1440px, calc(100% - 48px));
    min-height: 70vh;
    margin: 0 auto;
    padding: 70px 0 72px;
}

.profile-sidebar {
    align-self: start;
    position: sticky;
    top: 112px;
}

.profile-sidebar__identity,
.profile-navigation,
.profile-balance,
.profile-panel,
.profile-promo,
.profile-transfer,
.profile-overview__stats a {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(145deg, #191b18e8, #0d0f0de8);
    box-shadow: 0 18px 48px #00000026;
}

.profile-sidebar__identity {
    display: grid;
    justify-items: center;
    padding: 32px 20px 26px;
    text-align: center;
    border-radius: 10px;
}

.profile-sidebar__avatar {
    width: 132px;
    height: 132px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 7px #ff980012, 0 16px 36px #0008;
}

.profile-sidebar__avatar--placeholder {
    display: grid;
    place-items: center;
    color: #111;
    background: var(--gold);
    font-size: 2rem;
    font-weight: 900;
}

.profile-sidebar__identity h1 {
    max-width: 100%;
    margin: 20px 0 8px;
    overflow: hidden;
    color: var(--text);
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-sidebar__steam-id {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.profile-sidebar__steam-id span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-sidebar__steam-id:hover,
.profile-sidebar__steam-id:focus-visible {
    border-color: #ff980055;
    color: var(--gold-light);
    background: #ff98000d;
}

.profile-navigation {
    margin-top: 14px;
    padding: 8px;
    border-radius: 10px;
}

.profile-navigation__link {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border-left: 2px solid transparent;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 8px;
}

.profile-navigation__icon {
    color: #ffffff55;
    transition: color .2s ease;
}

.profile-navigation__link:hover,
.profile-navigation__link--active {
    border-left-color: var(--gold);
    color: var(--text);
    background: #ff98000c;
}

.profile-navigation__link:hover .profile-navigation__icon,
.profile-navigation__link--active .profile-navigation__icon {
    color: var(--gold);
}

.profile-navigation__link--logout {
    position: relative;
    margin-top: 24px;
    color: #db8c8c;
}

.profile-navigation__link--logout .profile-navigation__icon,
.profile-navigation__link--logout:hover .profile-navigation__icon,
.profile-navigation__link--logout:focus-visible .profile-navigation__icon {
    color: currentColor;
}

.profile-navigation__link--logout::before {
    content: '';
    position: absolute;
    top: -13px;
    right: 0;
    left: 0;
    border-top: 1px solid var(--line);
    pointer-events: none;
}

.profile-navigation__link--logout:hover,
.profile-navigation__link--logout:focus-visible {
    border-left-color: #d85d5d;
    color: #ffb1b1;
    background: #d85d5d0d;
}

.profile-content {
    min-width: 0;
}

.profile-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 28px;
    border-radius: 10px;
}

.profile-balance__heading h2 {
    margin: 5px 0 0;
    color: var(--text);
    font-size: clamp(1.45rem, 3vw, 2.25rem);
}

.profile-balance__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 10px;
    min-width: min(100%, 540px);
}

.profile-balance__card {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff05;
}

.profile-balance__card span {
    color: var(--muted);
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.profile-balance__card strong {
    overflow: hidden;
    color: var(--text);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-balance__card--total {
    border-color: #ff98004d;
    background: linear-gradient(135deg, #ff980019, #ff980005);
}

.profile-balance__card--total strong {
    color: var(--gold-light);
}

.profile-alert {
    margin-top: 16px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 8px;
    font-size: .85rem;
}

.profile-alert--success {
    border-color: #4caf5066;
    color: #9fe0a2;
    background: #4caf5014;
}

.profile-alert--error {
    border-color: #f0525266;
    color: #ffadad;
    background: #f0525214;
}

.profile-overview,
.profile-panel {
    margin-top: 20px;
    border-radius: 10px;
}

.profile-promo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    padding: clamp(24px, 4vw, 38px);
    background:
        linear-gradient(90deg, #10120ff2 35%, #10120fa6),
        radial-gradient(circle at 90% 20%, #ff980026, transparent 38%);
}

.profile-transfer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    margin-top: 14px;
    padding: clamp(24px, 4vw, 38px);
    background:
        linear-gradient(90deg, #10120ff2 35%, #10120fa6),
        radial-gradient(circle at 90% 20%, #4caf5021, transparent 38%);
}

.profile-transfer__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #4caf5052;
    border-radius: 10px;
    color: #8fd895;
    background: #4caf500d;
}

.profile-transfer__content {
    min-width: 0;
}

.profile-transfer h3 {
    margin: 7px 0 8px;
    color: var(--text);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.profile-transfer p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.profile-transfer__form {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) minmax(150px, .65fr) auto;
    align-items: end;
    gap: 10px;
    max-width: 800px;
    margin-top: 20px;
}

.profile-transfer__form label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.profile-transfer__form input {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 7px;
    outline: 0;
    color: var(--text);
    background: #090a09cc;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .04em;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.profile-transfer__form input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px #ff980014;
}

.profile-transfer__amount {
    position: relative;
    display: block;
}

.profile-transfer__amount input {
    padding-right: 38px;
}

.profile-transfer__amount > span {
    position: absolute;
    top: 50%;
    right: 15px;
    color: var(--muted);
    transform: translateY(-50%);
}

.profile-transfer__form .button {
    min-width: 145px;
}

.profile-transfer__form[aria-busy="true"] {
    opacity: .72;
}

.profile-transfer__result {
    display: block;
    max-width: 800px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 7px;
    font-size: .76rem;
}

.profile-transfer__result[hidden] {
    display: none;
}

.profile-transfer__result[data-state="success"] {
    border-color: #4caf5052;
    color: #9fe0a2;
    background: #4caf5010;
}

.profile-transfer__result[data-state="error"] {
    border-color: #f0525252;
    color: #ffadad;
    background: #f0525210;
}

.profile-promo__icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #ff980052;
    border-radius: 10px;
    color: var(--gold-light);
    background: #ff98000d;
}

.profile-promo__content {
    min-width: 0;
}

.profile-promo h3 {
    margin: 7px 0 8px;
    color: var(--text);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.profile-promo p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.profile-promo__form {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto;
    gap: 10px;
    max-width: 650px;
    margin-top: 20px;
}

.profile-promo__form input {
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 7px;
    outline: 0;
    color: var(--text);
    background: #090a09cc;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.profile-promo__form input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px #ff980014;
}

.profile-promo__form .button {
    min-width: 145px;
}

.profile-promo__form[aria-busy="true"] {
    opacity: .72;
}

.profile-promo__result {
    display: block;
    max-width: 650px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 7px;
    font-size: .76rem;
}

.profile-promo__result[hidden] {
    display: none;
}

.profile-promo__result[data-state="success"] {
    border-color: #4caf5052;
    color: #9fe0a2;
    background: #4caf5010;
}

.profile-promo__result[data-state="error"] {
    border-color: #f0525252;
    color: #ffadad;
    background: #f0525210;
}

.profile-overview__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.profile-overview__stats a {
    display: grid;
    gap: 7px;
    min-height: 150px;
    padding: 22px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.profile-overview__stats a:hover {
    border-color: #ff980066;
    transform: translateY(-2px);
}

.profile-overview__stats span {
    color: var(--muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.profile-overview__stats strong {
    color: var(--gold-light);
    font-size: 2rem;
}

.profile-overview__stats small {
    align-self: end;
    color: var(--muted);
    line-height: 1.45;
}

.profile-panel {
    padding: 24px;
}

.profile-panel__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.profile-panel__heading h3 {
    margin: 5px 0 0;
    color: var(--text);
    font-size: 1.35rem;
}

.profile-panel__heading > span {
    color: var(--muted);
    font-size: .72rem;
}

.profile-empty {
    padding: 54px 20px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.profile-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.profile-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .67rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.profile-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #ffffff0d;
    color: #d6d8d4;
    vertical-align: top;
}

.profile-table tbody tr:target {
    background: #ff98000d;
}

.profile-table__id,
.profile-table__details strong {
    color: var(--text);
}

.profile-table__amount {
    color: #83d48a !important;
    font-weight: 800;
    white-space: nowrap;
}

.profile-table__amount--outgoing {
    color: #f28a8a !important;
}

.profile-table__amount-values {
    display: grid;
    justify-items: start;
    gap: 5px;
    white-space: nowrap;
}

.profile-table__bonus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f5bd61;
    font-size: .68rem;
    font-weight: 700;
}

.profile-table__details {
    display: grid;
    gap: 5px;
    max-width: 290px;
}

.profile-table__details a {
    color: var(--gold);
}

.profile-table__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: max-content;
}

.profile-table th.profile-table__actions-heading {
    text-align: center;
}

.profile-table__actions form {
    margin: 0;
}

.profile-table__actions .button {
    min-height: 34px;
    padding: 7px 10px;
}

.profile-table__actions .profile-table__details-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    padding: 0;
}

.profile-table__cancel {
    border-color: #f0525260;
    color: #f2a0a0;
    background: #f0525212;
}

.profile-table__cancel:hover,
.profile-table__cancel:focus-visible {
    border-color: #f07171;
    color: #fff;
    background: #b83f3f;
}

.profile-status {
    display: inline-flex;
    padding: 5px 8px;
    border: 1px solid #ffffff18;
    color: #c9cbc7;
    background: #ffffff08;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-radius: 4px;
}

.profile-status--succeeded,
.profile-status--refunded {
    border-color: #4caf504d;
    color: #8fd895;
    background: #4caf5012;
}

.profile-status--pending,
.profile-status--hold {
    border-color: #ff98004d;
    color: var(--gold-light);
    background: #ff980012;
}

.profile-status--cancelled,
.profile-status--failed,
.profile-status--expired {
    border-color: #f052524d;
    color: #f39a9a;
    background: #f0525212;
}

.profile-purchases {
    display: grid;
    gap: 12px;
}

.profile-purchase {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff04;
}

.profile-purchase__image {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 1px solid #ffffff12;
    color: var(--gold);
    background: #090a09;
    font-weight: 900;
    border-radius: 6px;
}

.profile-purchase__image img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
}

.profile-purchase__main {
    min-width: 0;
}

.profile-purchase__title {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.profile-purchase__title span {
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
}

.profile-purchase__title h4 {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 1.05rem;
}

.profile-purchase__title > strong {
    color: var(--gold-light);
    white-space: nowrap;
}

.profile-purchase__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 12px;
    color: var(--muted);
    font-size: .72rem;
}

.profile-purchase__meta a {
    color: var(--gold);
}

.profile-purchase__status {
    margin-top: 12px;
}

.profile-purchase__activation {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
    max-width: 480px;
    margin-top: 16px;
}

.profile-purchase__activation label {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .7rem;
}

.profile-purchase__server-select {
    min-width: 0;
}

.profile-purchase__server-select .store-select-trigger {
    min-height: 40px;
    padding-block: 8px;
}

.profile-purchase__server-select .store-select-menu {
    width: max(100%, 260px);
}

.profile-purchase__cancel {
    padding: 8px 10px;
    border: 1px solid #f0525245;
    color: #ef9696;
    background: #f052520a;
    font: inherit;
    font-size: .7rem;
    cursor: pointer;
    border-radius: 4px;
}

.profile-purchase__cancel:hover,
.profile-purchase__cancel:focus-visible {
    border-color: #f05252aa;
    color: #fff;
    background: #f0525230;
}

.purchase-cancel-dialog {
    width: min(480px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border: 1px solid #f0525245;
    border-radius: 12px;
    background: #171916;
    color: var(--text);
    box-shadow: 0 28px 90px #000a;
}

@media (prefers-reduced-motion: no-preference) {
    .purchase-cancel-dialog[open] {
        animation: product-modal-in .24s ease-out both;
    }
}

.purchase-cancel-dialog::backdrop {
    background: #080a08c7;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.purchase-cancel-dialog__card {
    position: relative;
    display: grid;
    justify-items: start;
    padding: 38px;
    border-radius: inherit;
}

.purchase-cancel-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
}

.purchase-cancel-dialog__close:hover,
.purchase-cancel-dialog__close:focus-visible {
    color: var(--text);
}

.purchase-cancel-dialog__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    border: 1px solid #f052525c;
    border-radius: 10px;
    color: #f39a9a;
    background: #f0525212;
}

.purchase-cancel-dialog h2 {
    margin: 8px 0 10px;
    font-size: clamp(1.65rem, 5vw, 2.25rem);
    letter-spacing: -.035em;
}

.purchase-cancel-dialog__subject {
    color: #f39a9a;
    font-size: .78rem;
    letter-spacing: .04em;
}

.purchase-cancel-dialog p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.65;
}

.purchase-cancel-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
    margin-top: 30px;
}

.purchase-cancel-dialog__actions .button {
    min-width: 0;
}

.purchase-cancel-dialog__confirm {
    border-color: #d95656;
    color: #fff;
    background: #b83f3f;
}

.purchase-cancel-dialog__confirm:hover,
.purchase-cancel-dialog__confirm:focus-visible {
    border-color: #f07171;
    background: #cb4a4a;
}

.purchase-cancel-dialog__confirm[aria-busy="true"] {
    cursor: progress;
    opacity: .7;
}

.transaction-details-dialog {
    width: min(760px, calc(100% - 32px));
    overflow: hidden;
    border-color: #ff980052;
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 0%, #ff980012, transparent 36%),
        #171916;
}

.transaction-details-dialog .purchase-cancel-dialog__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100dvh - 34px);
    overflow: hidden;
}

.transaction-details-dialog .purchase-cancel-dialog__card > * {
    max-width: 100%;
}

.transaction-details-dialog .purchase-cancel-dialog__card > :not(.transaction-details-dialog__content) {
    flex-shrink: 0;
}

.transaction-details-dialog__content {
    flex-shrink: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    margin-top: 20px;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

.transaction-details-dialog__icon {
    border-color: #ff980066;
    color: var(--gold);
    background: #ff980014;
}

.transaction-details-dialog__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

.transaction-details-dialog__summary-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: linear-gradient(135deg, #ffffff08, #ffffff03);
}

.transaction-details-dialog__summary-item > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.transaction-details-dialog__summary-icon,
.transaction-details-dialog__item-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ff98003d;
    border-radius: 9px;
    color: var(--gold);
    background: #ff98000d;
}

.transaction-details-dialog__summary-item--amount,
.transaction-details-dialog__summary-item--bonus {
    border-color: #ff980038;
}

.transaction-details-dialog__summary-item--amount dd,
.transaction-details-dialog__summary-item--bonus dd {
    color: #f5bd61;
    font-size: 1.05rem;
    font-weight: 800;
}

.transaction-details-dialog__summary-item--bonus .transaction-details-dialog__summary-icon {
    border-color: #75c97d4d;
    color: #8fd895;
    background: #4caf5012;
}

.transaction-details-dialog__summary-item--bonus dd {
    color: #8fd895;
}

.transaction-details-dialog__summary-item--status-succeeded .transaction-details-dialog__summary-icon {
    border-color: #75c97d4d;
    color: #8fd895;
    background: #4caf5012;
}

.transaction-details-dialog__summary-item--status-cancelled .transaction-details-dialog__summary-icon,
.transaction-details-dialog__summary-item--status-failed .transaction-details-dialog__summary-icon,
.transaction-details-dialog__summary-item--status-expired .transaction-details-dialog__summary-icon,
.transaction-details-dialog__summary-item--status-refunded .transaction-details-dialog__summary-icon {
    border-color: #f052524d;
    color: #f39a9a;
    background: #f0525212;
}

.transaction-details-dialog__summary-item--uuid {
    grid-column: 1 / -1;
}

.transaction-details-dialog__summary dt {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.transaction-details-dialog__summary dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 650;
}

.transaction-details-dialog__items {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.transaction-details-dialog__items h3 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 1rem;
}

.transaction-details-dialog__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: linear-gradient(135deg, #ffffff07, #ffffff03);
}

.transaction-details-dialog__item div {
    display: grid;
    min-width: 0;
    gap: 4px;
    overflow-wrap: anywhere;
}

.transaction-details-dialog__item span {
    color: var(--muted);
    font-size: .72rem;
}

.transaction-details-dialog__item .transaction-details-dialog__item-status {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
}

.transaction-details-dialog__item .transaction-details-dialog__item-status--delivered {
    border-color: #75c97d40;
    color: #8fd895;
    background: #4caf500d;
}

.transaction-details-dialog__item .transaction-details-dialog__item-status--pending {
    border-color: #ff980040;
    color: #f5bd61;
    background: #ff98000d;
}

.transaction-details-dialog__item .transaction-details-dialog__item-status--refunded {
    border-color: #f0525240;
    color: #f39a9a;
    background: #f052520d;
}

.transaction-details-dialog__actions {
    grid-template-columns: 1fr;
}

.profile-transfer-dialog {
    width: min(620px, calc(100% - 32px));
    border-color: #ff980052;
    background:
        radial-gradient(circle at 12% 0%, #ff980014, transparent 38%),
        #171916;
}

.profile-transfer-dialog .purchase-cancel-dialog__icon {
    border-color: #ff98005c;
    color: var(--gold);
    background: #ff980012;
}

.profile-transfer-dialog__route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-top: 20px;
}

.profile-transfer-dialog__account {
    display: grid;
    justify-items: start;
    min-width: 0;
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff09, #ffffff03);
}

.profile-transfer-dialog__account-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border: 1px solid currentColor;
    border-radius: 10px;
}

.profile-transfer-dialog__account--source {
    border-color: #ff98003d;
}

.profile-transfer-dialog__account--source .profile-transfer-dialog__account-icon {
    color: #f5bd61;
    background: #ff98000d;
}

.profile-transfer-dialog__account--target {
    border-color: #75c97d3d;
}

.profile-transfer-dialog__account--target .profile-transfer-dialog__account-icon {
    color: #8fd895;
    background: #4caf500d;
}

.profile-transfer-dialog__account > span:not(.profile-transfer-dialog__account-icon),
.profile-transfer-dialog__amount span {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.profile-transfer-dialog__account strong {
    margin-top: 4px;
    color: var(--text);
    font-size: .96rem;
}

.profile-transfer-dialog__account small {
    margin-top: auto;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-family: monospace;
    font-size: .68rem;
}

.profile-transfer-dialog__route-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ff98004d;
    border-radius: 50%;
    color: var(--gold);
    background: #ff98000d;
}

.profile-transfer-dialog__amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 18px;
    margin-top: 12px;
    padding: 15px 17px;
    border: 1px solid #ff98003d;
    border-radius: 11px;
    background: linear-gradient(90deg, #ff98000b, #ffffff04);
}

.profile-transfer-dialog__amount strong {
    color: #f5bd61;
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
}

.profile-transfer-dialog__notice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    width: 100%;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #ffffff12;
    border-radius: 10px;
    color: var(--muted);
    background: #ffffff04;
}

.profile-transfer-dialog__notice svg {
    color: #f5bd61;
}

.profile-transfer-dialog__notice p {
    margin: 0;
}

.profile-transfer-dialog__confirm {
    border-color: #ffab36;
    color: #17110a;
    background: var(--gold);
}

.profile-transfer-dialog__confirm:hover,
.profile-transfer-dialog__confirm:focus-visible {
    border-color: #ffc164;
    background: #ffad33;
}

@media(max-width:520px) {
    .purchase-cancel-dialog__card {
        padding: 30px 22px 22px;
    }

    .purchase-cancel-dialog__actions {
        grid-template-columns: 1fr;
    }

    .profile-transfer-dialog__route {
        grid-template-columns: 1fr;
    }

    .profile-transfer-dialog__route-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .profile-transfer-dialog__account {
        width: 100%;
        min-height: 136px;
    }

    .transaction-details-dialog__summary {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .transaction-details-dialog__summary-item--uuid {
        grid-column: auto;
    }

    .transaction-details-dialog__item {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .transaction-details-dialog__item > span:last-child {
        grid-column: 2 / -1;
        justify-self: start;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media(max-width:520px), (max-height:520px) {
    .transaction-details-dialog .purchase-cancel-dialog__card {
        padding: 24px 18px 18px;
    }

    .transaction-details-dialog__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }

    .transaction-details-dialog h2 {
        padding-right: 18px;
        font-size: 1.5rem;
        overflow-wrap: anywhere;
    }

    .transaction-details-dialog__content {
        margin-top: 12px;
    }

    .transaction-details-dialog__actions {
        margin-top: 16px;
    }
}

.profile-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
}

.profile-pagination__button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    background: #ffffff05;
    text-decoration: none;
}

.profile-pagination a.profile-pagination__button:hover,
.profile-pagination__button--active {
    border-color: var(--gold);
    color: #111;
    background: var(--gold);
}

.profile-pagination__button--disabled {
    opacity: .35;
}

@media(max-width:1100px) {
    .profile-balance {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-balance__cards {
        min-width: 0;
    }
}

@media(max-width:820px) {
    .profile-page {
        grid-template-columns: 1fr;
        width: min(100% - 28px, 720px);
        padding-top: 35px;
    }

    .profile-sidebar {
        position: static;
    }

    .profile-sidebar__identity {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        column-gap: 18px;
        text-align: left;
    }

    .profile-sidebar__avatar {
        grid-row: 1 / 3;
        width: 82px;
        height: 82px;
    }

    .profile-sidebar__identity h1 {
        align-self: end;
        margin: 0;
    }

    .profile-navigation {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .profile-navigation__link--logout {
        grid-column: 1 / -1;
        margin-top: 20px;
        padding: 0 14px;
    }

    .profile-navigation__link {
        border-bottom: 2px solid transparent;
        border-left: 0;
    }

    .profile-navigation__link--active {
        border-bottom-color: var(--gold);
    }
}

@media(max-width:620px) {
    .profile-page {
        width: min(100% - 20px, 560px);
        gap: 16px;
    }

    .profile-navigation__link {
        grid-template-columns: 18px auto;
        justify-content: center;
        padding: 0 6px;
        font-size: .66rem;
    }

    .profile-balance,
    .profile-panel {
        padding: 18px;
    }

    .profile-balance__cards,
    .profile-overview__stats {
        grid-template-columns: 1fr;
    }

    .profile-promo {
        grid-template-columns: 1fr;
    }

    .profile-transfer {
        grid-template-columns: 1fr;
    }

    .profile-promo__icon {
        width: 48px;
        height: 48px;
    }

    .profile-transfer__icon {
        width: 48px;
        height: 48px;
    }

    .profile-promo__form {
        grid-template-columns: 1fr;
    }

    .profile-transfer__form {
        grid-template-columns: 1fr;
    }

    .profile-promo__form .button {
        width: 100%;
    }

    .profile-transfer__form .button {
        width: 100%;
    }

    .profile-overview__stats a {
        min-height: 118px;
    }

    .profile-panel__heading {
        align-items: start;
        flex-direction: column;
    }

    .profile-table thead {
        display: none;
    }

    .profile-table,
    .profile-table tbody,
    .profile-table tr,
    .profile-table td {
        display: block;
        width: 100%;
    }

    .profile-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .profile-table td {
        display: grid;
        grid-template-columns: minmax(90px, .7fr) 1fr;
        gap: 10px;
        padding: 6px 0;
        border: 0;
    }

    .profile-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .67rem;
        text-transform: uppercase;
    }

    .profile-purchase {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: 14px;
    }

    .profile-purchase__image {
        width: 64px;
        height: 64px;
    }

    .profile-purchase__image img {
        width: 56px;
        height: 56px;
    }

    .profile-purchase > form {
        grid-column: 1 / -1;
    }

    .profile-purchase__activation {
        grid-template-columns: 1fr;
    }

    .profile-purchase__activation label {
        grid-column: auto;
    }
}

/* Store promo cards */
.bonus-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px 10px;
}

.bonus-content__col {
    width: calc(50% - 30px);
    margin: 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.server-economic {
    width: calc(44% - 30px);
}

.bonus-content__col--daily-bonus {
    width: calc(56% - 30px);
    display: block;
    background: linear-gradient(142deg, rgba(29,30,35,1) 0%, rgba(44,91,36,1) 100%);
    border-radius: 12px;
    padding: 40px 60px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .bonus-content__col--daily-bonus {
        padding: 30px 50px;
    }
}

.daily-bonus-product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: column;
}

.daily-bonus-product__time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 1px;
    font-weight: 500;
}

.daily-bonus-product__time svg {
    width: 16px;
    height: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 6px;
}

.daily-bonus-product__title {
    color: #fff;
    font-weight: 800;
    font-size: 34px;
    text-transform: uppercase;
    line-height: 120%;
}

.daily-bonus-product__subtitle {
    font-size: 18px;
}

.daily-bonus-product__btn {
    color: #fff;
    padding: 10px 30px;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    background: linear-gradient(142deg, rgba(79,204,48,1) 0%, rgba(48,163,8,1) 100%);
    text-transform: uppercase;
    font-weight: 600;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.daily-bonus-product__btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.daily-bonus-product__btn:hover:not(:disabled) {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .daily-bonus-product__title {
        font-size: 32px;
    }

    .daily-bonus-product__subtitle {
        font-size: 16px;
    }
}

@media (min-width: 762px) and (max-width: 991px) {
    .daily-bonus-product__title {
        font-size: 26px;
    }

    .daily-bonus-product__subtitle {
        font-size: 16px;
    }
}

@media (min-width: 0) and (max-width: 761px) {
    .bonus-content__col--daily-bonus {
        width: 100%;
    }

    .daily-bonus-product__title {
        font-size: 26px;
    }

    .daily-bonus-product__subtitle {
        font-size: 16px;
    }

    .bonus-content__col--daily-bonus {
        padding: 30px 40px;
    }
}

.server-economic-card {
    background: linear-gradient(142deg, rgba(85,124,253,1) 0%, rgba(51,88,221,1) 100%);
    border-radius: 12px;
    padding: 40px 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.server-economic-card__title {
    color: #fff;
    font-weight: 800;
    font-size: 34px;
    text-transform: uppercase;
    line-height: 120%;
}

.server-economic-card__subtitle {
    font-size: 18px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .server-economic-card {
        padding: 30px 50px;
    }

    .server-economic-card__title {
        font-size: 32px;
    }

    .server-economic-card__subtitle {
        font-size: 16px;
    }
}

@media (min-width: 762px) and (max-width: 991px) {
    .server-economic-card__title {
        font-size: 26px;
    }

    .server-economic-card__subtitle {
        font-size: 16px;
    }
}

@media (min-width: 0) and (max-width: 761px) {
    .server-economic {
        width: 100%;
    }

    .server-economic-card__title {
        font-size: 26px;
    }

    .server-economic-card__subtitle {
        font-size: 16px;
    }

    .server-economic-card {
        padding: 30px 40px;
    }
}