@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Spectral:wght@400;500;600;700&family=Tiny5&display=swap");

:root {
    --font-display: "Tiny5", "Press Start 2P", system-ui, sans-serif;
    --font-pixel: "Press Start 2P", "Tiny5", system-ui, sans-serif;
    --font-body: "Spectral", Georgia, "Times New Roman", serif;
    --section-black: #0d0d0e;
    --section-black-soft: #151515;
    --section-white: #f8f5ef;
    --section-muted: #c7c3bc;
    --section-orange: #ff9d48;
    --section-brown: #b7722f;
    --section-line: rgba(255, 255, 255, 0.08);
    --ragged-edges: polygon(0 4%, 8% 3%, 14% 0, 25% 3%, 35% 1%, 47% 4%, 58% 2%, 70% 4%, 82% 1%, 93% 3%, 100% 2%, 99% 28%, 100% 48%, 98% 66%, 100% 97%, 87% 98%, 72% 100%, 56% 98%, 43% 100%, 29% 98%, 15% 100%, 0 97%, 1% 75%, 0 52%, 1% 31%);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
}

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

img,
picture,
svg {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

.site-header {
    min-height: 94px;
    border-top: 2px solid #0788d8;
    background: rgba(7, 8, 8, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--section-white);
    font-family: var(--font-display);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
}

.site-header__inner {
    width: min(1280px, calc(100% - 56px));
    min-height: 92px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 34px;
}

.site-header__brand {
    display: inline-flex;
    align-items: baseline;
    width: max-content;
    font-family: var(--font-display);
    color: var(--section-white);
    font-size: clamp(3rem, 5.1vw, 3.85rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 3px 0 #000, 0 0 16px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

.site-header__brand span + span {
    color: var(--section-orange);
    margin-left: 13px;
}

.site-header__nav {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 9px;
}

.site-header__nav-link {
    min-width: 106px;
    min-height: 39px;
    padding: 10px 17px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--section-white);
    font-family: var(--font-display);
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.06) 31%, rgba(0, 0, 0, 0.34) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 15% 82%, rgba(0, 0, 0, 0.32)),
        url("../img/stone-button-texture-ui.png") center / 138px 138px;
    border: 1px solid rgba(0, 0, 0, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 1px 0 0 rgba(255, 255, 255, 0.13),
        inset 0 -4px 0 rgba(0, 0, 0, 0.38),
        0 2px 0 #111,
        0 8px 18px rgba(0, 0, 0, 0.32);
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000;
    transition: transform 150ms ease, filter 150ms ease, color 150ms ease;
}

.site-header__nav-link span {
    position: relative;
    z-index: 2;
}

.site-header__nav-link::before,
.site-header__nav-link::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.site-header__nav-link::before {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 21%, rgba(0, 0, 0, 0.25) 22% 23%, transparent 24% 58%, rgba(255, 255, 255, 0.16) 59% 60%, transparent 61%),
        linear-gradient(0deg, transparent 0 22%, rgba(0, 0, 0, 0.22) 23% 24%, transparent 25% 68%, rgba(255, 255, 255, 0.14) 69% 70%, transparent 71%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 16px);
    z-index: 0;
    opacity: 0.8;
}

.site-header__nav-link::after {
    inset: 3px;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.24);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.site-header__nav-link:hover,
.site-header__nav-link.is-active {
    color: #fff7ed;
    filter: brightness(1.18) saturate(1.08);
    transform: translateY(-1px);
}

.site-header__profile {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    min-width: 145px;
}

.site-header__icon-tile,
.site-header__language,
.site-header__player {
    flex: 0 0 auto;
}

.site-header__icon-tile {
    width: 42px;
    height: 42px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0.34)),
        #191a1b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.38),
        0 2px 10px rgba(0, 0, 0, 0.36);
}

.site-header__language {
    width: 44px;
    height: 42px;
    padding: 12px 6px;
    cursor: pointer;
}

.site-header__icon-tile img,
.site-header__language img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-header__player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 5px 6px 5px 10px;
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 32%, rgba(0, 0, 0, 0.24)),
        rgba(14, 15, 16, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 14px rgba(0, 0, 0, 0.26);
    transition: transform 150ms ease, filter 150ms ease;
}

.site-header__player:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.site-header__player-copy {
    display: block;
    font-family: var(--font-display);
    font-size: 1.04rem;
    line-height: 1;
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__player-copy strong {
    font-family: var(--font-display);
    font-size: 1.04rem;
    letter-spacing: 0;
}

.site-header__player-copy span {
    font-family: var(--font-display);
    color: var(--section-orange);
    font-weight: 700;
}

.site-header__avatar {
    width: 58px;
    height: 58px;
    display: inline-block;
    clip-path: var(--ragged-edges);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 16px rgba(63, 255, 185, 0.08);
}

.site-header__profile--guest {
    min-width: 318px;
    gap: 10px;
}

.site-header__profile--guest .site-header__language {
    width: 54px;
    height: 50px;
    padding: 16px 7px;
}

.site-header__auth-link {
    min-width: 116px;
    min-height: 50px;
    padding: 12px 15px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%, rgba(0, 0, 0, 0.28)),
        #151617;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.78rem;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 3px 0 #000, 0 8px 12px rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 0 rgba(0, 0, 0, 0.36),
        0 2px 12px rgba(0, 0, 0, 0.36);
}

.site-header__auth-link--primary {
    min-width: 108px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 32%, rgba(0, 0, 0, 0.15)),
        var(--section-brown);
}

.site-header__menu {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 36%, rgba(0, 0, 0, 0.32)),
        #171819;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -3px 0 rgba(0, 0, 0, 0.34),
        0 8px 14px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.site-header__menu span {
    width: 23px;
    height: 3px;
    margin: 5px auto;
    display: block;
    background: var(--section-white);
    box-shadow: 0 2px 0 #000;
    transition: transform 160ms ease, opacity 160ms ease;
}

.site-header.is-menu-open .site-header__menu span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

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

.site-header.is-menu-open .site-header__menu span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.site-header__mobile-nav {
    display: none;
}

.site-footer {
    position: relative;
    z-index: 2;
    margin-top: 70px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(180deg, rgba(8, 9, 9, 0.74), rgba(6, 7, 7, 0.9)),
        rgba(8, 9, 9, 0.76);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--section-muted);
    font-family: var(--font-body);
}

.site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 157, 72, 0.7), transparent);
    box-shadow: 0 0 18px rgba(255, 157, 72, 0.16);
}

.site-footer__inner {
    width: min(1360px, calc(100% - 64px));
    margin: 0 auto;
    padding: 34px 0 38px;
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(180px, 0.7fr) minmax(260px, 1fr) minmax(150px, 0.55fr);
    align-items: start;
    gap: 34px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: baseline;
    margin-bottom: 12px;
    color: var(--section-white);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 4vw, 3.55rem);
    line-height: 0.86;
    text-shadow: 0 3px 0 #000, 0 0 18px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}

.site-footer__logo span + span {
    color: var(--section-orange);
    margin-left: 10px;
}

.site-footer p {
    margin: 0;
    color: rgba(248, 245, 239, 0.72);
    font-family: var(--font-body);
    font-size: 1.04rem;
    line-height: 1.24;
    text-shadow: none;
}

.site-footer__brand p {
    max-width: 360px;
}

.site-footer__nav {
    display: grid;
    gap: 9px;
}

.site-footer__nav a,
.site-footer__social-links a {
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 36%, rgba(0, 0, 0, 0.32)),
        #171819;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -3px 0 rgba(0, 0, 0, 0.34),
        0 8px 14px rgba(0, 0, 0, 0.22);
    color: #fff;
    font-family: var(--font-display);
    text-shadow: 0 2px 0 #000;
    transition: transform 150ms ease, filter 150ms ease;
}

.site-footer__nav a:hover,
.site-footer__social-links a:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.site-footer__nav a {
    width: min(150px, 100%);
    min-height: 33px;
    padding: 7px 13px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.32rem;
}

.site-footer__legal strong,
.site-footer__social strong {
    display: block;
    margin: 0 0 10px;
    color: #f7d95e;
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: none;
}

.site-footer__legal {
    display: grid;
    gap: 9px;
}

.site-footer__social-links {
    display: flex;
    gap: 10px;
}

.site-footer__social-links a {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--section-orange);
    font-size: 1.35rem;
}

.site-footer__social-links span {
    transform: translateY(1px);
}

.site-footer__payments {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.site-footer__payment-card {
    width: 66px;
    height: 32px;
    padding: 6px 8px;
    display: block;
    object-fit: contain;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(232, 235, 241, 0.9)),
        #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 14px rgba(0, 0, 0, 0.28);
}

.site-footer__payment-card--mastercard {
    padding-inline: 11px;
}

.site-footer__cookie-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f7d95e;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cookie-consent {
    position: fixed;
    inset: auto 18px 18px;
    z-index: 1600;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.cookie-consent.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cookie-consent__panel {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    gap: 22px;
    clip-path: var(--ragged-edges);
    background:
        radial-gradient(circle at 16% 0%, rgba(63, 255, 185, 0.16), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(255, 157, 72, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%, rgba(0, 0, 0, 0.34)),
        rgba(8, 10, 11, 0.96);
    border: 1px solid rgba(255, 157, 72, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 22px 44px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 157, 72, 0.08);
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cookie-consent__copy {
    min-width: 0;
}

.cookie-consent__eyebrow {
    margin: 0 0 6px;
    color: #f7d95e;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.1;
}

.cookie-consent h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 400;
    line-height: 0.82;
    text-shadow: 0 3px 0 #000;
}

.cookie-consent p {
    max-width: 680px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1.03rem;
    line-height: 1.25;
}

.cookie-consent a {
    display: inline-flex;
    margin-top: 10px;
    color: #63ffb9;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cookie-consent__actions button {
    min-width: 138px;
    min-height: 44px;
    padding: 10px 14px 8px;
    border: 0;
    clip-path: var(--ragged-edges);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 34%, rgba(0, 0, 0, 0.24)),
        #171819;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 150ms ease, filter 150ms ease;
}

.cookie-consent__actions button[data-cookie-choice="accept"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%, rgba(0, 0, 0, 0.18)),
        #b7722f;
}

.cookie-consent__actions button:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

@media (max-width: 980px) {
    .site-header__inner {
        grid-template-columns: 1fr max-content;
        gap: 16px;
        padding: 18px 0;
    }

    .site-header__nav {
        grid-column: 1 / -1;
        order: 3;
        justify-content: center;
        flex-wrap: wrap;
    }

    .site-header__profile {
        justify-self: end;
    }

    .site-header__profile--guest {
        min-width: 0;
        grid-column: 2;
    }

    .site-header__profile--guest .site-header__language {
        width: 46px;
        height: 46px;
        padding: 14px 6px;
    }

    .site-header__auth-link {
        min-width: 94px;
        min-height: 46px;
        padding: 11px 11px 9px;
        font-size: 1.28rem;
    }

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .site-header__inner {
        width: min(100% - 28px, 1180px);
        min-height: 88px;
        grid-template-columns: 1fr max-content;
    }

    .site-header__brand {
        font-size: clamp(1.72rem, 9vw, 2.25rem);
    }

    .site-header__nav {
        display: none;
    }

    .site-header__profile {
        display: none;
    }

    .site-header__menu {
        display: block;
    }

    .site-header__mobile-nav {
        width: min(100% - 28px, 390px);
        max-height: 0;
        margin: 0 auto;
        padding: 0 14px;
        display: flex;
        flex-direction: column;
        gap: 9px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        border: 1px solid rgba(255, 157, 72, 0);
        clip-path: var(--ragged-edges);
        background:
            radial-gradient(circle at 22% 0%, rgba(63, 255, 185, 0.18), transparent 34%),
            radial-gradient(circle at 80% 18%, rgba(255, 157, 72, 0.16), transparent 32%),
            linear-gradient(180deg, rgba(21, 23, 23, 0.88), rgba(6, 7, 7, 0.94)),
            url("../img/stone-button-texture-ui.png") center / 160px 160px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 -12px 24px rgba(0, 0, 0, 0.42),
            0 18px 32px rgba(0, 0, 0, 0.45),
            0 0 30px rgba(255, 157, 72, 0.08);
        transform: translateY(-8px) scale(0.98);
        transition: max-height 220ms ease, padding 220ms ease, margin 220ms ease, opacity 180ms ease, transform 220ms ease, border-color 220ms ease;
    }

    .site-header.is-menu-open .site-header__mobile-nav {
        max-height: 440px;
        margin: 0 auto 16px;
        padding: 16px 14px 17px;
        opacity: 1;
        pointer-events: auto;
        border-color: rgba(255, 157, 72, 0.2);
        transform: translateY(0) scale(1);
    }

    .site-header__mobile-nav a {
        min-height: 42px;
        padding: 10px 14px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        clip-path: var(--ragged-edges);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 36%, rgba(0, 0, 0, 0.32)),
            #171819;
        color: #fff;
        font-size: 1.45rem;
        text-shadow: 0 2px 0 #000;
        transition: transform 150ms ease, filter 150ms ease, color 150ms ease;
    }

    .site-header__mobile-nav a:hover {
        color: #fff7ed;
        filter: brightness(1.14);
        transform: translateX(3px);
    }

    .site-footer__inner {
        width: min(100% - 36px, 1360px);
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 30px 0 34px;
    }

    .site-footer__logo {
        font-size: clamp(2.05rem, 10vw, 2.8rem);
        white-space: normal;
        flex-wrap: wrap;
    }

    .site-footer p {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: 1rem;
    }

    .site-footer__nav a {
        width: min(170px, 100%);
    }

    .site-footer__legal strong,
    .site-footer__social strong {
        font-size: 1.38rem;
    }

    .cookie-consent {
        inset: auto 10px 10px;
    }

    .cookie-consent__panel {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }

    .cookie-consent__actions {
        justify-content: stretch;
    }

    .cookie-consent__actions button {
        flex: 1 1 150px;
    }
}