/*
 * IMPERA — responsive BEM layout
 * Static template styles: fluid layout from 320px to ultrawide screens
 */

@font-face {
    font-family: "TT Ramillas Trl";
    src: url("../fonts/tt-ramillas-medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-cyrillic.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    --color-ink: #181f22;
    --color-ink-80: rgb(24 31 34 / 80%);
    --color-ink-60: rgb(24 31 34 / 60%);
    --color-ink-20: rgb(24 31 34 / 20%);
    --color-ink-10: rgb(24 31 34 / 10%);
    --color-white: #fff;
    --color-accent: #087fbd;
    --color-accent-dark: #0054ad;
    --color-accent-light: #48d3ff;
    --color-accent-ghost: rgb(5 127 209 / 8%);
    --gradient-accent: linear-gradient(to top, rgb(11, 169, 226) 0%, rgb(4, 126, 207) 100%);
    --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "TT Ramillas Trl", Georgia, serif;
    --font-h1: clamp(2.5rem, 1.563rem + 3.75vw, 5rem);
    --font-h2: clamp(2rem, 1.625rem + 1.5vw, 3rem);
    --font-h3: clamp(1.5rem, 1.313rem + 0.75vw, 2rem);
    --font-h4: clamp(1.25rem, 1.156rem + 0.375vw, 1.5rem);
    --font-body: clamp(0.9375rem, 0.914rem + 0.094vw, 1rem);
    --line-body: 1.5;
    --container: 106.25rem;
    --gutter: clamp(1rem, 3vw, 2.5rem);
    --section-space: clamp(5rem, 7.5vw, 8.75rem);
    --header-height: clamp(4rem, 3.75rem + 0.625vw, 4.5rem);
    --duration-fast: 160ms;
    --duration: 280ms;
    --duration-slow: 520ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow: 0 1.5rem 3.75rem rgb(24 31 34 / 16%);
    --scrollbar-size: 0.5rem;
    --scrollbar-track: #edf7fb;
    --scrollbar-opacity: 0.5;
}

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

html {
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: rgb(8 127 189 / var(--scrollbar-opacity)) rgb(237 247 251 / var(--scrollbar-opacity));
    scrollbar-width: thin;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.site-page--modal-open {
    scrollbar-gutter: auto;
}

html::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

html::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgb(248 252 254 / var(--scrollbar-opacity)) 0%, rgb(237 247 251 / var(--scrollbar-opacity)) 100%);
    box-shadow: inset 1px 0 rgb(8 127 189 / 4%);
}

html::-webkit-scrollbar-thumb {
    min-height: 3rem;
    border: 1px solid rgb(237 247 251 / var(--scrollbar-opacity));
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(72 211 255 / var(--scrollbar-opacity)) 0%, rgb(8 127 189 / var(--scrollbar-opacity)) 48%, rgb(0 84 173 / var(--scrollbar-opacity)) 100%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), 0 0 0.625rem rgb(8 127 189 / 14%);
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgb(113 221 255 / var(--scrollbar-opacity)) 0%, rgb(7 149 217 / var(--scrollbar-opacity)) 48%, rgb(0 100 196 / var(--scrollbar-opacity)) 100%);
}

html::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgb(8 127 189 / var(--scrollbar-opacity)) 0%, rgb(0 84 173 / var(--scrollbar-opacity)) 100%);
}

html::-webkit-scrollbar-corner {
    background: rgb(237 247 251 / var(--scrollbar-opacity));
}

html.site-page--preloading {
    scrollbar-color: transparent transparent;
}

html.site-page--preloading::-webkit-scrollbar-track,
html.site-page--preloading::-webkit-scrollbar-thumb,
html.site-page--preloading::-webkit-scrollbar-corner {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

html.has-lenis {
    scroll-behavior: auto;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent-horizontal],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.lenis.lenis-autoToggle {
    transition-duration: 1ms;
    transition-property: overflow;
    transition-behavior: allow-discrete;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--color-white);
    color: var(--color-ink);
    font-family: var(--font-main);
    font-size: var(--font-body);
    line-height: var(--line-body);
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

html.site-page--locked,
body.site-page--locked {
    overflow-y: hidden;
}

body.site-page--locked {
    padding-right: var(--scrollbar-width, 0px);
}

h1,
h2,
h3,
p,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

img,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 0.1875rem solid var(--color-accent);
    outline-offset: 0.1875rem;
}

.container {
    width: min(100%, calc(var(--container) + var(--gutter) + var(--gutter)));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Preloader */
.preloader {
    display: none;
}

.js .preloader {
    --preloader-progress: 0.06;
    position: fixed;
    z-index: 4000;
    inset: 0;
    isolation: isolate;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 50% 43%, rgb(72 211 255 / 16%) 0, rgb(72 211 255 / 5%) 23%, transparent 52%),
        linear-gradient(145deg, #fff 0%, #f7fcff 48%, #edf8fd 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 560ms var(--ease-out), visibility 0s linear 560ms;
    animation: preloader-failsafe 560ms var(--ease-out) 8s forwards;
}

.js .preloader::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.js .preloader::before {
    inset: -18%;
    background:
        linear-gradient(90deg, transparent 49.85%, rgb(8 127 189 / 7%) 50%, transparent 50.15%),
        linear-gradient(0deg, transparent 49.85%, rgb(8 127 189 / 7%) 50%, transparent 50.15%);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgb(0 0 0 / 72%) 30%, transparent 68%);
    mask-image: radial-gradient(circle, #000 0%, rgb(0 0 0 / 72%) 30%, transparent 68%);
    transform: rotate(45deg) scale(0.78);
    animation: preloader-grid-breathe 3.2s ease-in-out infinite;
}

.js .preloader.preloader--managed {
    animation: none;
}

.preloader__content {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 21rem);
    justify-items: center;
    transform: translateY(-1.5vh);
    transition: opacity 360ms ease, transform 560ms var(--ease-out);
}

.preloader__logo {
    filter: drop-shadow(0 0.75rem 1.5rem rgb(24 31 34 / 8%));
    animation: preloader-logo-arrive 720ms var(--ease-out) both;
}

.preloader__meter {
    position: relative;
    width: min(100%, 17rem);
    height: 0.25rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    overflow: hidden;
    background: rgb(24 31 34 / 10%);
    box-shadow: inset 0 0 0 1px rgb(24 31 34 / 3%);
}

.preloader__meter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 86%), transparent);
    transform: skewX(-18deg);
    animation: preloader-meter-shine 1.45s ease-in-out infinite;
}

.preloader__bar {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent), var(--color-accent-light));
    box-shadow: 0 0 1rem rgb(72 211 255 / 65%);
    transform: scaleX(var(--preloader-progress));
    transform-origin: 0 50%;
    transition: transform 220ms linear;
    will-change: transform;
}

.preloader__status {
    margin-top: 0.875rem;
    color: var(--color-ink-60);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.js .preloader--hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.preloader--hidden .preloader__content {
    opacity: 0;
    transform: translateY(-1rem) scale(0.98);
}

@keyframes preloader-logo-arrive {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes preloader-grid-breathe {
    0%,
    100% {
        opacity: 0.48;
        transform: rotate(45deg) scale(0.76);
    }
    50% {
        opacity: 0.82;
        transform: rotate(45deg) scale(0.82);
    }
}

@keyframes preloader-meter-shine {
    0% { left: -35%; }
    70%,
    100% { left: 112%; }
}

@keyframes preloader-failsafe {
    to {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: max(0.75rem, env(safe-area-inset-top));
    left: max(0.75rem, env(safe-area-inset-left));
    padding: 0.75rem 1rem;
    transform: translateY(-180%);
    background: var(--color-ink);
    color: var(--color-white);
    transition: transform var(--duration-fast) ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.scroll-progress {
    position: fixed;
    z-index: 1500;
    top: 0;
    right: 0;
    left: 0;
    height: 0.1875rem;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast);
}

.has-scroll-effects .scroll-progress,
.has-native-progress .scroll-progress {
    opacity: 1;
}

.site-page[data-scroll-locked] .scroll-progress {
    opacity: 0.5;
}

.scroll-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-light));
    box-shadow: 0 0 0.75rem rgb(72 211 255 / 75%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* Header */
.header {
    position: relative;
    z-index: 100;
    min-height: var(--header-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-ink-10);
}

.header__inner {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 1.6vw, 2rem);
    width: min(100%, 120rem);
    min-height: var(--header-height);
    margin-inline: auto;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
}

.header__logo {
    flex: 0 0 auto;
}

.header__logo-image {
    width: clamp(6.6rem, 7vw, 7.625rem);
}

.lang {
    position: relative;
    min-width: 0;
}

.lang__toggle {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.45rem 0.75rem;
    box-shadow: inset 0 0 0 1px var(--color-ink-20);
    color: var(--color-ink-80);
    white-space: nowrap;
    transition: color var(--duration-fast), box-shadow var(--duration-fast);
}

.lang__chevron {
    width: 0.625rem;
    height: auto;
    transition: transform var(--duration) var(--ease-out);
}

.lang--open .lang__toggle,
.lang[data-open] .lang__toggle {
    color: var(--color-ink);
    box-shadow: inset 0 0 0 1px var(--color-ink);
}

.lang--open .lang__chevron,
.lang[data-open] .lang__chevron {
    transform: rotate(180deg);
}

.lang__list {
    position: absolute;
    z-index: 120;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 100%;
    padding-block: 0.25rem;
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-ink-20), 0 0.75rem 2rem rgb(24 31 34 / 14%);
}

.lang--up .lang__list {
    top: auto;
    bottom: calc(100% + 0.35rem);
}

.lang__option {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--color-ink-80);
    text-align: left;
    transition: color var(--duration-fast), background-color var(--duration-fast);
}

.lang__option--active {
    color: var(--color-ink);
    font-weight: 500;
}

.online {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.online__label {
    color: var(--color-ink-80);
}

.online__value {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.online__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.online__count {
    background: var(--gradient-accent);
    background-clip: text;
    color: transparent;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.nav {
    min-width: 0;
    justify-self: start;
    margin-left: clamp(0.3rem, 0.48vw, 0.6rem);
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2.5rem);
}

.nav__link {
    position: relative;
    display: block;
    color: var(--color-ink-60);
    white-space: nowrap;
    transition: color var(--duration-fast);
}

.nav__auth {
    display: none;
}

.nav__auth-link {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem;
    overflow: hidden;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    transition: color var(--duration-fast), filter var(--duration-fast), box-shadow var(--duration), transform var(--duration) var(--ease-out);
}

.nav__auth-link--login {
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-ink-20);
    color: var(--color-ink-80);
}

.nav__auth-link--register {
    color: var(--color-white);
    background: url("../images/ui/button-texture.webp") center / cover, var(--gradient-accent);
    background-blend-mode: color-burn;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%), 0 0.75rem 1.75rem rgb(8 127 189 / 18%);
}

.nav__auth-link--register::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -55%;
    bottom: -55%;
    left: -65%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 72%), transparent);
    opacity: 0;
    transform: skewX(-18deg);
    transition: left 620ms var(--ease-out), opacity var(--duration-fast);
}

.nav__auth-text {
    position: relative;
    z-index: 1;
}

.auth {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: clamp(1rem, 1.6vw, 2rem);
}

.auth__login {
    position: relative;
    color: var(--color-ink-80);
    white-space: nowrap;
    transition: color var(--duration-fast);
}

.auth__register {
    position: relative;
    isolation: isolate;
    display: grid;
    align-self: stretch;
    place-items: center;
    min-width: 10rem;
    padding-inline: clamp(1rem, 1.7vw, 2rem);
    overflow: hidden;
    color: var(--color-white);
    font-weight: 500;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), filter var(--duration-fast);
}

.auth__register::before,
.auth__register::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.auth__register::before {
    background: url("../images/ui/button-texture.webp") center / cover, var(--gradient-accent);
    background-blend-mode: color-burn;
}

.auth__register::after {
    inset: -55% auto -55% -65%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 72%), transparent);
    opacity: 0;
    transform: skewX(-18deg);
    transition: left 620ms var(--ease-out), opacity var(--duration-fast);
}

.auth__register-text {
    position: relative;
    z-index: 1;
}

.burger {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: background-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.burger__line {
    display: block;
    width: 1.5rem;
    height: 0.125rem;
    background: var(--color-ink);
    transition: transform var(--duration), opacity var(--duration);
}

.burger--open .burger__line:nth-child(1) {
    transform: translateY(0.425rem) rotate(45deg);
}

.burger--open .burger__line:nth-child(2) {
    opacity: 0;
}

.burger--open .burger__line:nth-child(3) {
    transform: translateY(-0.425rem) rotate(-45deg);
}

/* Hero */
.site-page__main {
    position: relative;
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(42rem, 58vw, 58rem);
    overflow: hidden;
}

.hero__media,
.hero__poster,
.hero__video,
.hero__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__media {
    z-index: -2;
    overflow: hidden;
    background: #eff9fc;
}

.hero__poster,
.hero__video {
    object-fit: cover;
    object-position: 50% 0%;
}

.hero__video {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms ease;
}

.hero__video--ready {
    opacity: 1;
}

.hero__video--unavailable {
    display: none;
}

.hero__overlay {
    z-index: 2;
    background: linear-gradient(90deg, rgb(255 255 255 / 75%) 0%, rgb(255 255 255 / 22%) 48%, transparent 72%),
    linear-gradient(0deg, var(--color-white) 0%, rgb(255 255 255 / 90%) 7%, transparent 42%);
}

.hero__container {
    position: relative;
    min-height: inherit;
}

.hero__content {
    display: flex;
    min-height: inherit;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: clamp(6rem, 11vw, 12.5rem);
    padding-bottom: clamp(11rem, 20vw, 16rem);
}
@media (max-width: 1024px) {
    .hero__content {
        gap: 1rem;
    }
}

.hero__text {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: min(100%, 45rem);
}

.hero__title,
.news__title,
.promo__heading,
.forum__heading,
.rating__title,
.streams__heading,
.modal__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-wrap: balance;
}

.hero__title {
    max-width: 13ch;
    font-size: var(--font-h1);
    line-height: 1;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.hero__subtitle {
    max-width: 31rem;
    color: var(--color-ink-80);
}

.hero__actions {
    display: grid;
    max-width: 100%;
    grid-template-columns: max-content max-content;
    align-items: center;
    gap: clamp(0.1rem, 1vw, 1rem);
}

.btn-play {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-height: 4.25rem;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
    background: var(--gradient-accent);
    box-shadow: inset 0 0 0 2px var(--color-accent-light);
    color: var(--color-white);
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), filter var(--duration-fast);
}

.btn-play::before,
.file__btn::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -60%;
    bottom: -60%;
    left: -72%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 76%), transparent);
    opacity: 0;
    transform: skewX(-18deg);
    transition: left 650ms var(--ease-out), opacity var(--duration-fast);
}

.btn-play__frame {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.btn-play__text {
    position: relative;
    z-index: 2;
}

.hero__gift {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(8.625rem, 11.25vw, 11.25rem);
    aspect-ratio: 1;
    border-radius: 50%;
    transition: filter var(--duration) var(--ease-out);
}

.hero__gift-glow {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: gift-glow 3.2s ease-in-out infinite;
}

.hero__gift-box {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.hero__gift-image {
    width: 65%;
    height: 65%;
    object-fit: contain;
    animation: gift-float 3.2s ease-in-out infinite;
}

@keyframes gift-float {
    0%, 100% {
        transform: translateY(0) rotate(11deg);
    }
    50% {
        transform: translateY(-0.625rem) rotate(4deg);
    }
}

@keyframes gift-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.07);
        opacity: 1;
    }
}

.hero__gift-popover {
    position: absolute;
    left: calc(100% + 1rem);
    top: 50%;
    transform: translateY(-50%) translateX(0.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 15rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    color: #1a1a2e;
    font-size: 0.8125rem;
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-out);
    z-index: 10;
    text-align: left;
}

.hero__gift-popover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -7px;
    transform: translateY(-50%) rotate(45deg);
    width: 13px;
    height: 13px;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.hero__gift-popover-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1a1a2e;
}

.hero__gift-popover-body {
    color: #4a5568;
    line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
    .hero__gift:hover .hero__gift-popover,
    .hero__gift:focus-visible .hero__gift-popover {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@media (max-width: 47.99rem) {
    .hero__gift-popover {
        display: none;
    }
}

/* Shared section elements */
.news,
.promo,
.forum,
.rating,
.streams {
    position: relative;
}

.promo,
.forum,
.rating,
.streams {
    margin-top: var(--section-space);
}

.news {
    padding-top: clamp(1rem, 3vw, 3rem);
}

.news__title,
.promo__heading,
.forum__heading,
.rating__title,
.streams__heading {
    font-size: var(--font-h2);
    line-height: 1;
    letter-spacing: -0.04em;
}

.news__desc,
.rating__desc,
.promo__desc {
    color: var(--color-ink-80);
}

.btn-outline {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    min-height: 4rem;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--color-ink-20);
    color: var(--color-ink-80);
    transition: color var(--duration-fast), box-shadow var(--duration), transform var(--duration) var(--ease-out);
}

.btn-outline::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, var(--color-accent-ghost), rgb(72 211 255 / 14%));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--duration) var(--ease-out);
}

.btn-outline__icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}

.btn-outline__text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* News */
.news__container {
    display: grid;
    grid-template-columns: minmax(15rem, 0.95fr) minmax(0, 3fr);
    gap: clamp(1rem, 1.2vw, 1.25rem);
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.2vw, 1.25rem);
    align-items: stretch;
}

.news__intro {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 3vw, 3rem);
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem) 0;
    border-right: 1px solid var(--color-ink-20);
}

.rating__intro {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2rem, 3vw, 3rem);
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem) 0;
    border-right: 1px solid var(--color-ink-20);
}

.news__intro-text,
.rating__intro-text {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
}

.news-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.5rem;
}

.news-card__media,
.stream__media {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-accent-light);
    aspect-ratio: 41 / 24;
    transition: border-color var(--duration-fast), box-shadow var(--duration);
}

.news-card__image,
.stream__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.news-card__media--crop .news-card__image {
    object-position: 35% center;
}

.news-card__body {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.news-card__title {
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--font-h3);
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.news-card__link {
    transition: color var(--duration-fast);
}

.news-card__date {
    color: var(--color-ink-80);
    font-size: 0.875rem;
}

/* Promo */
.promo__heading {
    width: min(calc(100% - var(--gutter) - var(--gutter)), 38rem);
    margin-inline: auto;
    text-align: center;
}

.promo__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: clamp(2rem, 4vw, 4rem);
}

.promo__video {
    position: relative;
    min-width: 0;
    aspect-ratio: 20 / 11;
    overflow: hidden;
    background: #d9eef5;
}

.promo__video-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--duration);
}

.promo[aria-busy="true"] .promo__video-image {
    opacity: 0.55;
}

.promo__play,
.stream__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.promo__play {
    width: clamp(4rem, 7vw, 6rem);
    aspect-ratio: 1;
}

.promo__play-icon,
.stream__play-icon {
    width: 100%;
    height: 100%;
}

.promo__play--unavailable,
.stream__play--unavailable {
    cursor: not-allowed;
    opacity: 0.58;
    filter: grayscale(0.65);
}

.promo__play--unavailable::after,
.stream__play--unavailable::after {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: min(12rem, 72vw);
    padding: 0.35rem 0.6rem;
    transform: translateX(-50%);
    background: rgb(24 31 34 / 82%);
    color: var(--color-white);
    content: "Видео недоступно";
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.stream__play--unavailable::after {
    content: "Плеер недоступен";
}

.promo__panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1rem, 1.5vw, 1.5rem);
    padding: clamp(1.5rem, 2.52vw, 2.5rem) clamp(1.25rem, 1.6vw, 2.5rem);
    border: 1px solid var(--color-ink-20);
    border-left: 0;
}

.promo__head {
    display: grid;
    grid-template-columns: clamp(4rem, 6.3vw, 7rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(0.875rem, 1.5vw, 2rem);
}

.promo__badge {
    position: relative;
    aspect-ratio: 1;
}
@media (max-width: 768px) {
    .promo__badge {
        display: none;
    }
}
.promo__badge-inner,
.promo__badge-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(45deg);
}

.promo__badge-inner {
    width: 72%;
    border: 0.3rem solid var(--color-accent);
}

.promo__badge-outer {
    width: 82%;
    border: 0.4rem solid var(--color-accent-ghost);
}

.promo__badge-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 39%;
    height: 39%;
    transform: translate(-50%, -50%);
}

.promo__text {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.promo__title {
    font-family: var(--font-display);
    font-size: var(--font-h3);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.promo__desc {
    overflow-wrap: anywhere;
}

.promo__gallery-nav {
    display: grid;
    gap: clamp(0.25rem, 0.4vw, 0.375rem);
    margin-top: auto;
}

.promo__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 1rem);
    margin-left: min(11vw, 8.75rem);
}

.promo__thumb {
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 105 / 68;
    opacity: 0.68;
    transition: opacity var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.promo__thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo__thumb--active {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

.promo__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--duration-fast);
    pointer-events: none;
}

.promo__thumb--has-video {
    position: relative;
}

.promo__thumb--has-video .promo__thumb-play {
    opacity: 0.7;
}

.promo__underline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.5rem, 1vw, 1rem);
    margin-left: min(11vw, 8.75rem);
}

.promo__marker {
    position: relative;
    height: 0.55rem;
}

.promo__marker::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.125rem;
    background: var(--color-ink-10);
}

.promo__marker--active::before {
    height: 0.25rem;
    background: var(--gradient-accent);
}

.promo__marker--active::after {
    content: "";
    position: absolute;
    bottom: 0.125rem;
    left: 50%;
    width: 0.875rem;
    height: 0.4375rem;
    transform: translateX(-50%);
    background: var(--color-accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.promo__indicator {
    --promo-indicator-x: 0px;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.55rem;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--promo-indicator-x), 0, 0);
    transition: width 420ms var(--ease-out), transform 420ms var(--ease-out), opacity var(--duration-fast);
    will-change: width, transform;
}

.promo__indicator::before,
.promo__indicator::after {
    content: "";
    position: absolute;
}

.promo__indicator::before {
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.25rem;
    background: var(--gradient-accent);
    box-shadow: 0 0 0.625rem rgb(72 211 255 / 34%);
    transition: box-shadow var(--duration-fast);
}

.promo__indicator::after {
    bottom: 0.125rem;
    left: 50%;
    width: 0.875rem;
    height: 0.4375rem;
    background: var(--color-accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
    transition: transform 220ms var(--ease-out), filter 220ms var(--ease-out);
}

.promo__underline--ready .promo__marker--active::before {
    height: 0.125rem;
    background: var(--color-ink-10);
}

.promo__underline--ready .promo__marker--active::after { display: none; }
.promo__underline--ready .promo__indicator { opacity: 1; }
.promo__indicator--instant { transition: none; }

.promo__indicator--hovered::before {
    box-shadow: 0 0 0.9rem rgb(72 211 255 / 58%);
}

.promo__indicator--hovered::after {
    filter: brightness(1.12);
    transform: translate(-50%, 0.2rem) scale(0.92);
}

.promo__videos {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 1.125rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--color-ink-20);
}

.promo__video-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-ink-20);
    background: transparent;
    color: var(--color-ink-80);
    font-size: 0.875rem;
    line-height: 1.3;
    text-align: left;
    transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}

.promo__video-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity var(--duration-fast);
    pointer-events: none;
}

.promo__video-btn:hover {
    border-color: var(--color-accent-light);
    color: var(--color-white);
}

.promo__video-btn:hover::before {
    opacity: 0.07;
}

.promo__video-btn-icon {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.promo__video-btn-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Forum */
.forum__container {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
}

.forum__heading {
    text-align: center;
}

.forum__body {
    display: grid;
    grid-template-areas: "panels tabs";
    grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 12.2rem);
    gap: clamp(1rem, 1.2vw, 1.25rem);
    align-items: start;
}

.forum__tabs {
    grid-area: tabs;
    display: grid;
    gap: 0.5rem;
}

.forum__tab {
    min-width: 0;
    min-height: 4rem;
    padding: 1rem;
    box-shadow: inset 0 0 0 1px var(--color-ink-20);
    color: var(--color-ink-80);
    text-align: center;
    white-space: normal;
    transition: color var(--duration-fast), box-shadow var(--duration), background var(--duration-fast), transform var(--duration) var(--ease-out);
}

.forum__tab--active {
    background: var(--gradient-accent);
    box-shadow: none;
    color: var(--color-white);
}

.forum__panels,
.forum__panel,
.forum__columns,
.forum__col,
.topic,
.topic__row,
.topic__text {
    min-width: 0;
}

.forum__panels {
    grid-area: panels;
}

.js .forum__panel:not(.forum__panel--active) {
    display: none;
}

.forum__panel {
    animation: panel-in var(--duration-slow) var(--ease-out);
}

.forum__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 2fr));
    gap: clamp(1rem, 2vw, 2.5rem);
}

.forum__col {
    display: grid;
    align-content: start;
    gap: clamp(1.25rem, 2vw, 2rem);
}

.topic {
    display: grid;
    gap: 1.25rem;
}

.topic__rule {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-ink-20);
}

.topic--first .topic__rule {
    background: var(--color-accent);
}

.topic__row {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.topic__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.topic__avatar-init {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    user-select: none;
}
.forum__tab--link {
    text-decoration: none;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}

.topic__text {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.topic__heading {
    min-width: 0;
    font-weight: inherit;
}

.topic__title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--font-h4);
    line-height: 1.3;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    transition: color var(--duration-fast);
}

.topic__date {
    color: var(--color-ink-80);
    font-size: 0.875rem;
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rating */
.rating__grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.95fr) minmax(0, 3fr);
    gap: clamp(1rem, 1.2vw, 1.25rem);
}

.rating__content {
    min-width: 0;
}

.rating__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
}

.rating__cards[hidden] {
    display: none;
}

.rating__controls,
.streams__controls {
    display: none;
}

.rating__control,
.streams__control {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-ink-20);
    background: var(--color-white);
    color: var(--color-ink);
    font-size: 1.25rem;
    transition: border-color var(--duration-fast), background-color var(--duration-fast), box-shadow var(--duration), color var(--duration-fast), opacity var(--duration-fast), transform var(--duration) var(--ease-out);
}

.rating__control:focus-visible,
.streams__control:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.rating__control:disabled,
.streams__control:disabled {
    cursor: default;
    opacity: 0.35;
}

.rating__control:disabled > span,
.streams__control:disabled > span {
    transform: none !important;
}

.rating__pagination,
.streams__pagination {
    min-width: 3.5rem;
    color: var(--color-ink-80);
    text-align: center;
}

.player {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    transition: box-shadow var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

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

.player::before {
    z-index: 3;
    top: -55%;
    bottom: -55%;
    left: -70%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 58%), transparent);
    opacity: 0;
    transform: skewX(-18deg);
    transition: left 700ms var(--ease-out), opacity var(--duration-fast);
}

.player::after {
    z-index: 4;
    inset: 0;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow var(--duration-fast);
}

.player__photo {
    width: 100%;
    aspect-ratio: 1.01;
    object-fit: cover;
    transition: filter var(--duration), transform var(--duration-slow) var(--ease-out);
}

.player__score {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--gradient-accent);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    letter-spacing: -0.02em;
    transition: box-shadow var(--duration), filter var(--duration-fast);
}

.player__score-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.player__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    min-height: 3.5rem;
    border: solid var(--color-ink-20);
    border-width: 0 1px 1px;
}

.player__nick {
    min-width: 0;
    align-self: center;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player__prof {
    display: grid;
    place-items: center;
    border-left: 1px solid var(--color-ink-20);
}

.player__prof-icon {
    width: 2rem;
    max-height: 2rem;
    object-fit: contain;
    transition: filter var(--duration-fast), transform var(--duration) var(--ease-out);
}

.player__clan {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: solid var(--color-ink-20);
    border-width: 0 1px 1px;
    color: var(--color-ink-80);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.player__clan-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.rating__empty,
.streams__empty {
    padding: clamp(2rem, 5vw, 5rem);
    border: 1px dashed var(--color-ink-20);
    color: var(--color-ink-80);
    text-align: center;
}

/* Streams */
.streams__heading {
    padding-inline: var(--gutter);
    text-align: center;
}

.streams__content {
    width: min(100%, calc(var(--container) + var(--gutter) + var(--gutter)));
    margin: clamp(2rem, 4vw, 4rem) auto 0;
    padding-inline: var(--gutter);
}

.streams__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 25.625rem));
    justify-content: center;
    gap: clamp(1rem, 1.2vw, 1.25rem);
}

.stream {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.stream__media {
    aspect-ratio: 41 / 24;
}

.stream__play {
    width: clamp(3.5rem, 5vw, 4rem);
    aspect-ratio: 1;
}

.stream__title {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: var(--font-h4);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.stream__count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--color-ink-80);
    font-size: 0.875rem;
}

.stream__viewers-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.stream--placeholder {
    pointer-events: none;
}

.stream--placeholder .stream__media {
    border-style: dashed;
}

.stream--placeholder .stream__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.58) 100%);
}

.stream__offline {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    color: var(--color-white);
}

.stream__offline-icon {
    width: 2.25rem;
    height: 2.25rem;
    opacity: 0.38;
}

.stream__offline-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.35;
}

.stream--placeholder .stream__title {
    color: var(--color-ink-80);
    opacity: 0.25;
}

.stream--placeholder .stream__count {
    opacity: 0.18;
}

/* Footer */
.footer {
    margin-top: var(--section-space);
    border-top: 1px solid var(--color-ink-20);
}

.footer__inner {
    display: grid;
    grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(3rem, 7vw, 8rem);
    padding-top: clamp(3rem, 5vw, 4rem);
    padding-bottom: max(clamp(2rem, 4vw, 3.75rem), env(safe-area-inset-bottom));
}

.footer__brand,
.footer__nav,
.footer-col {
    min-width: 0;
}

.footer__logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
}

.footer__logo {
    width: 10.875rem;
    height: auto;
}

.footer__copy {
    margin-top: 2rem;
    color: var(--color-ink-80);
    overflow-wrap: anywhere;
}

.footer__socials {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
}

.footer__social-link {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    transition: opacity var(--duration-fast), transform var(--duration-fast);
}

.footer__social-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
}

.footer-col__title {
    font-family: var(--font-display);
    font-size: var(--font-h4);
    font-weight: 500;
    line-height: 1.3;
}

.footer-col__list {
    display: grid;
    gap: 0.75rem;
    margin-top: 2rem;
}

.footer-col__link {
    display: inline-block;
    color: var(--color-ink-80);
    overflow-wrap: anywhere;
    transition: color var(--duration-fast);
}

/* Modal */
.modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--duration);
}

.modal--open {
    opacity: 1;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgb(24 31 34 / 72%);
    backdrop-filter: blur(0.2rem);
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 37.5rem);
    max-height: 100%;
    overflow: auto;
    overscroll-behavior-y: contain;
    background: var(--color-white);
    box-shadow: var(--shadow);
    transform: translateY(1rem) scale(0.98);
    transition: transform var(--duration) var(--ease-out);
}

.modal--open .modal__dialog {
    transform: none;
}

.modal__title {
    min-height: 4.5rem;
    padding: 1.15rem 4rem 1.15rem 1.5rem;
    background: var(--gradient-accent);
    color: var(--color-white);
    font-size: var(--font-h4);
    line-height: 1.3;
}

.modal__close {
    position: absolute;
    z-index: 2;
    top: 0.875rem;
    right: 0.875rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    color: var(--color-white);
    font-size: 2rem;
    line-height: 1;
    transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.modal__content {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.modal__dialog--player {
    width: min(100%, 56rem);
    overflow: visible;
}

.modal__player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.player__iframe,
.player__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.file {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-ink-20);
}

.file:first-child {
    padding-top: 0;
}

.file:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.file__info {
    min-width: 0;
}

.file__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.file__size {
    margin-top: 0.25rem;
    color: var(--color-ink-60);
    font-size: 0.875rem;
}

.file__btn {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    padding: 0.7rem 1rem;
    overflow: hidden;
    background: var(--gradient-accent);
    color: var(--color-white);
    font-weight: 500;
    transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), filter var(--duration-fast);
}

.file__btn-text {
    position: relative;
    z-index: 1;
}

/* Progressive reveal */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.js.has-scroll-effects [data-reveal] {
    transition: none;
}

.nav__link::after,
.auth__login::after,
.footer-col__link::after,
.news-card__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.3rem;
    left: 0;
    height: 0.125rem;
    background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent-light));
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform var(--duration) var(--ease-out);
}

.footer-col__link,
.news-card__link {
    position: relative;
}

.btn-play:focus-visible,
.hero__gift:focus-visible,
.auth__register:focus-visible,
.nav__auth-link:focus-visible,
.file__btn:focus-visible {
    outline-color: var(--color-white);
    box-shadow: 0 0 0 0.22rem var(--color-accent);
}

.btn-play:active,
.auth__register:active,
.nav__auth-link:active,
.file__btn:active,
.btn-outline:active,
.forum__tab:active,
.rating__control:not(:disabled):active,
.streams__control:not(:disabled):active,
.burger:active {
    transform: translateY(0.0625rem) scale(0.98);
}

/* Interaction enhancements only for hover-capable devices */
@media (hover: hover) and (pointer: fine) {
    .nav__link:hover,
    .auth__login:hover,
    .footer-col__link:hover,
    .news-card__link:hover,
    .topic__title:hover {
        color: var(--color-accent);
    }

    .nav__link:hover::after,
    .nav__link:focus-visible::after,
    .auth__login:hover::after,
    .auth__login:focus-visible::after,
    .footer-col__link:hover::after,
    .footer-col__link:focus-visible::after,
    .news-card__link:hover::after,
    .news-card__link:focus-visible::after {
        transform: scaleX(1);
    }

    .lang__toggle:hover,
    .forum__tab:hover {
        background: var(--color-accent-ghost);
        box-shadow: inset 0 0 0 1px var(--color-accent);
        color: var(--color-ink);
    }

    .lang__toggle:hover {
        background: var(--color-accent-ghost);
    }

    .forum__tab:hover {
        transform: translateY(-0.125rem);
    }

    .forum__tab--active:hover {
        background: var(--gradient-accent);
        box-shadow: none;
        color: var(--color-white);
    }

    .lang__option:hover {
        background: rgb(24 31 34 / 6%);
        color: var(--color-ink);
    }

    .nav__auth-link--login:hover {
        color: var(--color-accent-dark);
        box-shadow: inset 0 0 0 1px var(--color-accent), 0 0.75rem 1.75rem rgb(8 127 189 / 12%);
        transform: translateY(-0.125rem);
    }

    .btn-play:hover,
    .auth__register:hover,
    .nav__auth-link--register:hover,
    .file__btn:hover {
        filter: saturate(1.12) brightness(1.04);
        transform: translateY(-0.1875rem);
        box-shadow: 0 1rem 2.25rem rgb(0 84 173 / 25%), inset 0 0 0 1px rgb(255 255 255 / 32%);
    }

    .btn-play:hover::before,
    .file__btn:hover::before {
        left: 135%;
        opacity: 1;
    }

    .hero__gift:hover {
        filter: saturate(1.12) brightness(1.05) drop-shadow(0 0.75rem 1.1rem rgb(234 56 124 / 24%));
    }

    .auth__register:hover::after {
        left: 135%;
        opacity: 1;
    }

    .nav__auth-link--register:hover::after {
        left: 135%;
        opacity: 1;
    }

    .btn-outline:hover {
        color: var(--color-accent-dark);
        box-shadow: inset 0 0 0 1px var(--color-accent), 0 0.75rem 1.75rem rgb(8 127 189 / 13%);
        transform: translateY(-0.125rem);
    }

    .btn-outline:hover::before {
        transform: scaleX(1);
    }

    .burger:hover {
        background: var(--color-accent-ghost);
        box-shadow: inset 0 0 0 1px var(--color-accent);
        transform: translateY(-0.0625rem);
    }

    .burger:hover .burger__line {
        background: var(--color-accent);
    }

    .rating__control:hover:not(:disabled),
    .streams__control:hover:not(:disabled) {
        border-color: var(--color-accent);
        background: var(--color-accent-ghost);
        box-shadow: 0 0.65rem 1.5rem rgb(8 127 189 / 18%);
        color: var(--color-accent);
        transform: translateY(-0.125rem);
    }

    .news-card:hover .news-card__image,
    .stream:hover .stream__image {
        transform: scale(1.035);
    }

    .news-card:hover .news-card__media,
    .stream:hover .stream__media {
        border-color: var(--color-accent);
        box-shadow: 0 1rem 2rem rgb(8 127 189 / 15%);
    }

    .player:hover {
        box-shadow: 0 1.35rem 2.75rem rgb(0 84 173 / 20%);
        transform: translateY(-0.5rem);
    }

    .player:hover::before {
        left: 138%;
        opacity: 0.7;
    }

    .player:hover::after {
        box-shadow: inset 0 0 0 1px rgb(8 127 189 / 0.16), inset 0 0 1.5rem rgb(72 211 255 / 8%);
    }

    .player:hover .player__photo {
        filter: saturate(1.08) contrast(1.03);
        transform: scale(1.035);
    }

    .player:hover .player__score {
        filter: saturate(1.12) brightness(1.05);
        box-shadow: 0 0.45rem 1.2rem rgb(0 84 173 / 24%);
    }

    .player:hover .player__prof-icon {
        filter: drop-shadow(0 0.25rem 0.45rem rgb(8 127 189 / 24%));
        transform: rotate(6deg) scale(1.08);
    }

    .promo__play:not(.promo__play--unavailable):hover,
    .stream__play:not(.stream__play--unavailable):hover {
        transform: translate(-50%, -50%) scale(1.08);
    }

    .promo__thumb:hover {
        opacity: 1;
        box-shadow: inset 0 0 0 2px var(--color-accent), 0 0.65rem 1.5rem rgb(8 127 189 / 18%);
        transform: translateY(-0.125rem);
    }

    .footer__social-link:hover {
        opacity: 0.65;
        transform: translateY(-0.125rem);
    }

    .modal__close:hover {
        transform: rotate(90deg);
        opacity: 0.8;
    }

    .btn-play:hover:active,
    .auth__register:hover:active,
    .nav__auth-link:hover:active,
    .file__btn:hover:active,
    .btn-outline:hover:active,
    .forum__tab:hover:active,
    .rating__control:hover:not(:disabled):active,
    .streams__control:hover:not(:disabled):active,
    .burger:hover:active {
        transform: translateY(0.0625rem) scale(0.98);
    }
}

/* Large desktop: prevent over-stretched cards */
@media (min-width: 120rem) {
    :root {
        --gutter: 2.5rem;
    }
}

/* Compact desktop / navigation collapse */
@media (max-width: 74.99rem) {
    .header__inner {
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        padding-right: var(--gutter);
    }

    .header__nav {
        position: fixed;
        z-index: 110;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        display: flex;
        width: min(24rem, 100%);
        flex-direction: column;
        padding: 1.5rem max(var(--gutter), env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior-y: contain;
        background: var(--color-white);
        box-shadow: -1rem 1.5rem 3rem rgb(24 31 34 / 14%);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform var(--duration) var(--ease-out), visibility 0s linear var(--duration);
    }

    .header__nav.nav--open {
        transform: none;
        visibility: visible;
        transition-delay: 0s;
    }

    .nav__list {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .nav__link {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--color-ink-10);
        font-size: 1.125rem;
    }

    .header__burger {
        display: flex;
    }

    .header__auth {
        grid-column: 4;
    }

    .header__burger {
        grid-column: 5;
    }

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

    .promo__panel {
        padding: clamp(1.5rem, 3vw, 2.5rem);
    }

    .promo__head {
        grid-template-columns: clamp(4.75rem, 7vw, 7rem) minmax(0, 1fr);
    }

    .promo__thumbs,
    .promo__underline {
        margin-left: min(5vw, 5rem);
    }
}

@media (max-width: 74.99rem) {
    .online__label {
        display: none;
    }

    .news__container {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3rem);
    }

    .news__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.25rem;
    }

    .news__intro {
        min-height: 0;
        align-items: flex-end;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
        border-right: 0;
        border-bottom: 1px solid var(--color-ink-20);
    }

    .promo__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .promo__video {
        aspect-ratio: 16 / 9;
    }

    .promo__panel {
        border-top: 0;
        border-left: 1px solid var(--color-ink-20);
    }

    .promo__thumbs,
    .promo__underline {
        margin-left: clamp(0rem, 10vw, 7rem);
    }

    .rating__grid {
        grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 2.25fr);
    }

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

    .footer__inner {
        grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
        gap: 3rem;
    }
}

/* Tablet */
@media (max-width: 63.99rem) {
    .header__inner {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 0.75rem;
    }

    .header__online {
        justify-self: end;
    }

    .header__auth {
        display: none;
    }

    .nav__auth {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: auto;
        padding-top: clamp(1.75rem, 5vw, 2.5rem);
        border-top: 1px solid var(--color-ink-10);
    }

    .header__burger {
        grid-column: 4;
    }

    .hero {
        min-height: clamp(39rem, 82svh, 48rem);
    }

    .hero__poster,
    .hero__video {
        object-position: 58% top;
    }

    .hero__overlay {
        background: linear-gradient(90deg, rgb(255 255 255 / 78%) 0%, rgb(255 255 255 / 18%) 68%), linear-gradient(0deg, #fff 0%, rgb(255 255 255 / 88%) 8%, transparent 45%);
    }

    .hero__content {
        padding-top: clamp(5rem, 12vw, 8rem);
    }

    .forum__body {
        grid-template-areas: "tabs" "panels";
        grid-template-columns: 1fr;
    }

    .forum__tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .forum__tab {
        min-height: 3.5rem;
        padding: 0.75rem;
    }

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

    .rating__intro {
        min-height: 0;
        padding: 0 0 2rem;
        border-right: 0;
        border-bottom: 1px solid var(--color-ink-20);
    }

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

    .footer__nav {
        gap: 2rem;
    }
}

/* Mobile landscape and phones */
@media (max-width: 47.99rem) {
    :root {
        --section-space: clamp(4.5rem, 16vw, 6rem);
    }

    .header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .header__lang {
        justify-self: end;
    }

    .header__online {
        display: none;
    }

    .header__burger {
        grid-column: 3;
    }

    .hero {
        min-height: clamp(38rem, 90svh, 46rem);
    }

    .hero__poster,
    .hero__video {
        object-position: 64% top;
    }

    .hero__overlay {
        background: linear-gradient(90deg, rgb(255 255 255 / 86%) 0%, rgb(255 255 255 / 38%) 100%), linear-gradient(0deg, #fff 0%, rgb(255 255 255 / 92%) 9%, transparent 50%);
    }

    .hero__content {
        padding-top: clamp(4rem, 16vw, 7rem);
        padding-bottom: 12rem;
    }

    .hero__title {
        max-width: 11ch;
    }

    .news__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .news__intro {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 0 0 2rem;
        border-right: 0;
        border-bottom: 1px solid var(--color-ink-20);
    }

    .news-card {
        gap: 1rem;
    }

    .promo__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .promo__badge {
        width: 5.5rem;
    }

    .promo__thumbs,
    .promo__underline {
        margin-left: 0;
    }

    .forum__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
        overscroll-behavior-inline: auto;
    }

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

    .forum__col + .forum__col {
        margin-top: 1.25rem;
    }

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

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

    .footer-col--other {
        grid-column: 1 / -1;
    }
}

@media (max-width: 35.99rem) {
    .hero__content {
        justify-content: flex-end;
        padding-top: 4.5rem;
        padding-bottom: clamp(4.25rem, 12vw, 5rem);
    }

    .hero__title {
        font-size: clamp(2.35rem, 12vw, 3.6rem);
    }

    .hero__actions {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .btn-play {
        width: 100%;
    }

    .hero__gift {
        display: none;
    }

    .promo__panel {
        padding: 1.25rem;
    }

    .promo__thumbs,
    .promo__underline {
        gap: 0.4rem;
    }

    .topic__row {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.75rem;
    }

    .topic__avatar {
        width: 3.5rem;
        height: 3.5rem;
    }

    .rating__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-inline: 0;
        padding-inline: 0;
        overflow: hidden;
        touch-action: pan-y;
    }

    .player {
        grid-area: 1 / 1;
        width: 100%;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.5rem) scale(0.985);
        transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility 0s linear var(--duration);
    }

    .rating__cards:not(.rating__cards--ready) .player:first-child,
    .player.player--active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }

    .rating__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.25rem;
    }

    .streams__container {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        overflow: hidden;
        touch-action: pan-y;
    }

    .stream {
        grid-area: 1 / 1;
        width: 100%;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(0.5rem) scale(0.985);
        transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility 0s linear var(--duration);
    }

    .streams__container:not(.streams__container--ready) .stream:first-child,
    .stream.stream--active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }

    .streams__controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.25rem;
    }

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

    .file__btn {
        align-self: flex-start;
    }
}

@media (max-width: 27.49rem) {
    .header__logo-image {
        width: 5.9rem;
    }

    .lang__toggle {
        min-height: 2.75rem;
        padding-inline: 0.6rem;
    }

    .header__inner {
        gap: 0.35rem;
    }

    .hero__content {
        padding-top: 4.5rem;
        padding-bottom: 4.25rem;
    }

    .promo__badge {
        display: none;
    }

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

    .footer-col--other {
        grid-column: auto;
    }
}

/* Short screens keep hero content visible without fixed-height collisions */
@media (max-height: 42rem) and (min-width: 48rem) {
    .hero {
        min-height: 37rem;
    }

    .hero__content {
        padding-top: 4rem;
        padding-bottom: 9rem;
    }

    .hero__gift {
        width: 9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-progress {
        display: none;
    }

    .preloader::before,
    .preloader__logo,
    .preloader__meter::after {
        animation: none !important;
    }

    .preloader__logo {
        opacity: 1;
        transform: none;
    }

    .hero__video {
        display: none !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .btn-play::before,
    .auth__register::after,
    .nav__auth-link--register::after,
    .file__btn::before,
    .btn-outline::before,
    .nav__link::after,
    .auth__login::after,
    .footer-col__link::after,
    .news-card__link::after {
        display: none;
    }

    .btn-play:hover,
    .auth__register:hover,
    .nav__auth-link:hover,
    .file__btn:hover,
    .btn-outline:hover,
    .forum__tab:hover,
    .rating__control:hover,
    .streams__control:hover,
    .burger:hover,
    .promo__thumb:hover,
    .footer__social-link:hover {
        transform: none !important;
    }

    .news-card:hover .news-card__image,
    .stream:hover .stream__image {
        transform: none !important;
    }

    .player:hover,
    .player:hover .player__photo,
    .player:hover .player__prof-icon {
        transform: none !important;
    }

    .promo__play:not(.promo__play--unavailable):hover,
    .stream__play:not(.stream__play--unavailable):hover {
        transform: translate(-50%, -50%) !important;
    }

    .modal__close:hover {
        transform: none !important;
    }

    .has-magnetic-content > * {
        transform: none !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --color-ink-20: rgb(24 31 34 / 48%);
        --color-ink-60: rgb(24 31 34 / 82%);
        --color-ink-80: #181f22;
    }
}

@media print {
    .preloader,
    .header__burger,
    .hero__video,
    .hero__gift,
    .scroll-progress,
    .promo__play,
    .stream__play,
    .modal {
        display: none !important;
    }

    .hero {
        min-height: auto;
    }

    .hero__content {
        min-height: auto;
        padding-block: 3rem;
    }

    [data-reveal] {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Forum section */
.forum-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--color-bg, #050912);
}
.forum-section__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
}
.forum-section__body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: start;
}
/* Thread grid */
.forum-threads {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.forum-thread {
    border-bottom: 1px solid var(--color-ink-10);
}
.forum-thread:nth-child(-n+2) {
    border-top: 1px solid var(--color-ink-10);
}
.forum-thread[hidden] { display: none; }
.forum-thread__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0.5rem;
    text-decoration: none;
    transition: background var(--duration-fast);
    border-radius: 0.5rem;
}
/* Avatar */
.forum-thread__avatar {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: var(--color-accent);
}
.forum-thread__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.forum-thread__avatar-init {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    inset: 0;
}
/* Thread body */
.forum-thread__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.forum-thread__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink-80);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--duration-fast);
}
.forum-thread__date {
    font-size: 0.75rem;
    color: var(--color-ink-40);
}
/* Category filters sidebar */
.forum-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 9rem;
}
.forum-filter {
    display: block;
    width: 100%;
    padding: 0.625rem 1.125rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-ink-10);
    background: transparent;
    color: var(--color-ink-60);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
    text-decoration: none;
    font-family: inherit;
    line-height: 1.4;
}
.forum-filter.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.forum-filter--all {
    border-color: var(--color-accent);
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}
@media (hover: hover) and (pointer: fine) {
    .forum-thread__link:hover .forum-thread__title { color: var(--color-white); }
    .forum-filter:hover:not(.is-active) {
        background: var(--color-ink-5);
        color: var(--color-white);
    }
}
@media (max-width: 63.99rem) {
    .forum-section__body { grid-template-columns: 1fr; }
    .forum-filters { flex-direction: row; flex-wrap: wrap; }
    .forum-filter { width: auto; }
}
@media (max-width: 47.99rem) {
    .forum-threads { grid-template-columns: 1fr; }
    .forum-thread:nth-child(2) { border-top: none; }
}