:root {
    --bg: #050505;
    --bg-soft: #0b0b0d;
    --panel: #111114;
    --panel-strong: #17171b;
    --line: rgba(255, 255, 255, 0.12);
    --line-red: rgba(218, 17, 39, 0.42);
    --text: #f5f5f5;
    --muted: #a7a7ad;
    --red: #df102b;
    --red-dark: #8b0717;
    --white: #ffffff;
    --max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--text);
    font-family: "Rajdhani", Arial, Helvetica, sans-serif;
    background:
        linear-gradient(180deg, rgba(5, 5, 5, 0.72), #050505 36%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 90px),
        #050505;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(115deg, transparent 0 58%, rgba(153, 0, 21, 0.18) 58% 59%, transparent 59% 100%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.04), transparent 28%),
        #050505;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.sickness-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.018) 18% 18.35%, transparent 18.35% 100%),
        linear-gradient(90deg, transparent 0 47%, rgba(223, 16, 43, 0.055) 47% 47.2%, transparent 47.2% 100%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px);
    background-size: 100% 34px, 620px 100%, 100% 6px;
    opacity: 0.42;
    mix-blend-mode: screen;
    animation: page-scan 9s linear infinite;
}

.scroll-reveal-ready .reveal-on-scroll {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(8px);
    transition:
        opacity 680ms ease,
        transform 680ms cubic-bezier(.2, .8, .2, 1),
        filter 680ms ease;
}

.scroll-reveal-ready .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.scroll-reveal-ready .reveal-on-scroll .world-card,
.scroll-reveal-ready .reveal-on-scroll .status-item,
.scroll-reveal-ready .reveal-on-scroll .story-grid article,
.scroll-reveal-ready .reveal-on-scroll .opening-card {
    animation-play-state: paused;
}

.scroll-reveal-ready .reveal-on-scroll.is-visible .world-card,
.scroll-reveal-ready .reveal-on-scroll.is-visible .status-item,
.scroll-reveal-ready .reveal-on-scroll.is-visible .story-grid article,
.scroll-reveal-ready .reveal-on-scroll.is-visible .opening-card {
    animation-play-state: running;
}

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

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

.sickness-page {
    overflow: hidden;
}

.top-announcement {
    position: relative;
    z-index: 30;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 20px;
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(132, 0, 19, 0.82), rgba(0, 0, 0, 0.86));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 38px rgba(0, 0, 0, 0.36);
    isolation: isolate;
    overflow: hidden;
}

.top-announcement::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.18) 48%, transparent 62% 100%);
    transform: translateX(-110%);
    animation: belt-shine 7s ease-in-out infinite;
}

.top-announcement span,
.top-announcement a {
    color: var(--red);
    font-size: 12.5px;
    font-weight: 900;
    text-transform: uppercase;
}

.top-announcement p {
    margin: 0;
    color: #dedede;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.top-announcement a {
    color: var(--white);
    border-bottom: 1px solid var(--red);
}

.top-announcement .top-announcement__premium {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 64, 91, .38);
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
    box-shadow: inset 0 0 16px rgba(223, 16, 43, .08);
}

.top-announcement__premium i {
    color: #ff2445;
    font-size: 12px;
    font-style: normal;
    filter: drop-shadow(0 0 6px rgba(255, 36, 69, .8));
    animation: premium-star-pulse 1.8s ease-in-out infinite;
}

@keyframes premium-star-pulse {
    50% {
        opacity: .45;
        transform: scale(.72) rotate(45deg);
    }
}

.site-header {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    width: min(100% - 40px, var(--max));
    height: 90px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.08), transparent 22% 78%, rgba(223, 16, 43, 0.08)),
        linear-gradient(180deg, rgba(5, 5, 5, 0.94), rgba(5, 5, 5, 0.64));
    backdrop-filter: blur(12px);
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.9), rgba(255, 255, 255, 0.32), rgba(223, 16, 43, 0.9), transparent);
    transform: scaleX(0.48);
    transform-origin: center;
    opacity: 0.62;
    animation: header-line 4.8s ease-in-out infinite;
}

.brand-mark {
    display: flex;
    align-items: center;
    width: 168px;
    filter: drop-shadow(0 0 18px rgba(223, 16, 43, 0.18));
    transition: filter 220ms ease, transform 220ms ease;
}

.brand-mark:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 28px rgba(223, 16, 43, 0.36));
}

.site-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.site-nav a,
.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav a {
    position: relative;
    padding: 0 15px;
    color: var(--muted);
    transition: color 180ms ease, text-shadow 180ms ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.site-nav a:hover {
    color: var(--white);
    text-shadow: 0 0 18px rgba(223, 16, 43, 0.42);
}

.site-nav a:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.header-actions,
.hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 38px;
    place-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(5, 5, 5, 0.74);
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 18px;
    height: 2px;
    display: block;
    background: var(--white);
    box-shadow: 0 0 12px rgba(223, 16, 43, 0.35);
    transition: transform 180ms ease, opacity 180ms ease;
}

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

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

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

.mobile-site-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    justify-items: end;
    padding: 14px;
    background:
        radial-gradient(circle at 78% 20%, rgba(223, 16, 43, 0.2), transparent 36%),
        rgba(0, 0, 0, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.mobile-menu-open .mobile-site-menu {
    opacity: 1;
    pointer-events: auto;
}

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

.mobile-site-menu__panel {
    width: min(360px, 100%);
    min-height: 100%;
    display: grid;
    align-content: start;
    gap: 24px;
    padding: 22px;
    border: 1px solid rgba(223, 16, 43, 0.36);
    background:
        linear-gradient(180deg, rgba(18, 18, 22, 0.98), rgba(5, 5, 6, 0.98)),
        url("../img/sickness/blood-scratches.png") right -90px bottom -80px / 260px auto no-repeat;
    box-shadow:
        -24px 0 80px rgba(0, 0, 0, 0.44),
        0 0 38px rgba(223, 16, 43, 0.14);
    transform: translateX(24px);
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.mobile-menu-open .mobile-site-menu__panel {
    transform: translateX(0);
}

.mobile-site-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.mobile-site-menu__top img {
    width: 150px;
}

.mobile-menu-close {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 20px;
    height: 2px;
    background: var(--white);
}

.mobile-menu-close::before {
    transform: rotate(45deg);
}

.mobile-menu-close::after {
    transform: rotate(-45deg);
}

.mobile-site-menu nav {
    display: grid;
    gap: 8px;
}

.mobile-site-menu nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    background: rgba(255, 255, 255, 0.045);
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-site-menu nav a:hover {
    border-color: rgba(223, 16, 43, 0.52);
    background: rgba(223, 16, 43, 0.12);
}

.mobile-site-menu__actions {
    display: grid;
    gap: 10px;
}

.language-switcher {
    position: relative;
    z-index: 6;
}

.language-switcher::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 10px;
}

.language-switcher .nav__langs-item {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    color: var(--white);
    background: rgba(5, 5, 5, 0.72);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.language-switcher img {
    width: 20px;
    height: 14px;
    object-fit: cover;
}

.language-switcher .nav__langs-stroke {
    position: absolute;
    top: 100%;
    right: 0;
    display: grid;
    gap: 6px;
    min-width: 74px;
    margin: 0;
    padding: 7px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(5, 5, 5, 0.94);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.language-switcher:hover .nav__langs-stroke,
.language-switcher:focus-within .nav__langs-stroke {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.hero-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    animation: hero-rise 900ms cubic-bezier(.2, .8, .2, 1) both 285ms;
}

.social-brand {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    color: var(--white);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045)),
        rgba(5, 5, 5, 0.72);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.social-brand::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 0 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65% 100%);
    transform: translateX(-120%);
    transition: transform 520ms ease;
}

.social-brand svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: var(--brand-color);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

.social-brand:hover {
    transform: translateY(-3px);
    border-color: var(--brand-color);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 26px rgba(255, 255, 255, 0.12);
}

.social-brand:hover::after {
    transform: translateX(120%);
}

.social-brand:hover svg {
    animation: social-pop 520ms ease;
}

.social-brand--facebook {
    --brand-color: #1877f2;
    border-color: rgba(24, 119, 242, 0.55);
    background: linear-gradient(180deg, rgba(24, 119, 242, 0.22), rgba(255, 255, 255, 0.045)), rgba(5, 5, 5, 0.72);
    box-shadow: 0 12px 30px rgba(24, 119, 242, 0.18);
}

.social-brand--discord {
    --brand-color: #5865f2;
    border-color: rgba(88, 101, 242, 0.55);
    background: linear-gradient(180deg, rgba(88, 101, 242, 0.24), rgba(255, 255, 255, 0.045)), rgba(5, 5, 5, 0.72);
    box-shadow: 0 12px 30px rgba(88, 101, 242, 0.2);
}

.social-brand--tiktok {
    --brand-color: #00f2ea;
    border-color: rgba(255, 0, 80, 0.5);
    box-shadow:
        0 12px 30px rgba(0, 242, 234, 0.18),
        0 0 18px rgba(255, 0, 80, 0.16);
}

.social-brand--tiktok svg {
    fill: #ffffff;
    filter:
        drop-shadow(-1px 0 0 #00f2ea)
        drop-shadow(1px 0 0 #ff0050)
        drop-shadow(0 0 8px rgba(0, 242, 234, 0.45));
}

.btn {
    position: relative;
    overflow: hidden;
    padding: 0 18px;
    border-radius: 3px;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 35%, rgba(255, 255, 255, 0.2) 50%, transparent 65% 100%);
    transform: translateX(-115%);
    transition: transform 420ms ease;
}

.btn:hover::before {
    transform: translateX(115%);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-red {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, #ff1936, #a9081c);
    box-shadow: 0 12px 34px rgba(218, 17, 39, 0.28);
}

.btn-red:hover {
    box-shadow: 0 16px 44px rgba(218, 17, 39, 0.42);
}

.btn-ghost,
.btn-dark {
    color: var(--white);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.055);
}

.btn-large {
    min-height: 54px;
    padding-inline: 26px;
    font-size: 13px;
}

.hero-section {
    position: relative;
    min-height: 82vh;
    display: grid;
    align-items: center;
    padding: 112px 20px 40px;
    border-bottom: 1px solid var(--line);
    perspective: 1000px;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 32%, rgba(223, 16, 43, 0.22), transparent 32%),
        radial-gradient(circle at 82% 46%, rgba(223, 16, 43, 0.12), transparent 22%),
        radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.05), transparent 22%),
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.035) 34.2% 34.4%, transparent 34.8% 100%),
        linear-gradient(68deg, transparent 0 62%, rgba(223, 16, 43, 0.08) 62.2% 62.5%, transparent 63% 100%),
        linear-gradient(180deg, transparent 0 68%, rgba(5, 5, 5, 0.94) 100%);
    animation: hero-light-shift 10s ease-in-out infinite alternate;
}

.hero-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 34px;
    width: min(740px, 70vw);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.72), transparent);
    transform: translateX(-50%);
    opacity: 0.72;
    box-shadow: 0 0 30px rgba(223, 16, 43, 0.46);
    animation: hero-ground-line 4.6s ease-in-out infinite;
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-atmosphere img {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.horror-clouds {
    inset: -8% auto auto 0;
    width: 100%;
    height: 68%;
    object-fit: cover;
    opacity: 0.5;
    mix-blend-mode: screen;
    filter: saturate(0.4) contrast(1.3);
    animation: cloud-drift 18s ease-in-out infinite alternate, cloud-pulse 7s ease-in-out infinite;
}

.horror-fog {
    left: -10%;
    right: -10%;
    bottom: -10px;
    width: 120%;
    height: 34%;
    object-fit: cover;
    opacity: 0.42;
    filter: grayscale(1) contrast(1.4);
    animation: fog-breathe 9s ease-in-out infinite alternate;
}

.horror-scratches {
    top: 24%;
    right: 10%;
    width: min(330px, 33vw);
    opacity: 0.42;
    filter:
        drop-shadow(0 0 44px rgba(223, 16, 43, 0.34))
        drop-shadow(-26px 24px 70px rgba(223, 16, 43, 0.14))
        brightness(0.9);
    transform: rotate(-7deg) translateY(10px);
    animation: scratches-breathe 5.8s ease-in-out infinite alternate;
}

.horror-embers {
    right: 16%;
    bottom: 22%;
    width: min(360px, 42vw);
    opacity: 0.42;
    mix-blend-mode: screen;
    animation: ember-float 7s ease-in-out infinite alternate;
}

.slash {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), var(--red), transparent);
    transform: rotate(-15deg);
    opacity: 0.9;
    animation: slash-glow 5.6s ease-in-out infinite;
}

.slash-one {
    top: 29%;
    left: -8%;
    width: 56%;
}

.slash-two {
    top: 48%;
    right: -14%;
    width: 54%;
    animation-delay: 1.4s;
}

.slash-three {
    bottom: 19%;
    left: 28%;
    width: 34%;
    opacity: 0.42;
    animation-delay: 2.6s;
}

.smoke {
    position: absolute;
    width: 46%;
    height: 70%;
    top: 18%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
    filter: blur(36px);
    opacity: 0.34;
}

.smoke-left {
    left: -18%;
    animation: smoke-drift-left 12s ease-in-out infinite alternate;
}

.smoke-right {
    right: -20%;
    transform: scaleX(-1);
    animation: smoke-drift-right 14s ease-in-out infinite alternate;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, 930px);
    margin: 0 auto;
    text-align: center;
    animation: hero-rise 850ms cubic-bezier(.2, .8, .2, 1) both;
}

.hero-content::before {
    content: "L2S";
    position: absolute;
    left: 50%;
    top: 5%;
    z-index: -1;
    color: rgba(255, 255, 255, 0.035);
    font-family: "Cinzel", Georgia, serif;
    font-size: min(22vw, 250px);
    font-weight: 900;
    line-height: 1;
    transform: translateX(-50%);
    pointer-events: none;
    animation: watermark-breathe 7s ease-in-out infinite;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--red);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(223, 16, 43, 0.52);
}

.hero-logo-wrap {
    position: relative;
    width: min(720px, 92vw);
    margin: -8px auto 0;
    transform-style: preserve-3d;
}

.hero-logo-wrap::before {
    content: "";
    position: absolute;
    inset: 14% 8% 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 18%),
        radial-gradient(circle, rgba(223, 16, 43, 0.4), transparent 62%);
    filter: blur(28px);
    opacity: 0.72;
    animation: logo-aura 3.8s ease-in-out infinite;
}

.hero-logo-wrap::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.9), transparent);
    opacity: 0.5;
    animation: scan-line 4.5s ease-in-out infinite;
    box-shadow: 0 0 24px rgba(223, 16, 43, 0.5);
}

.hero-logo {
    position: relative;
    z-index: 2;
    width: min(720px, 92vw);
    margin: 0 auto;
    filter:
        drop-shadow(0 24px 70px rgba(220, 0, 32, 0.26))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.12));
    animation: logo-pulse 4s ease-in-out infinite, logo-tilt 8s ease-in-out infinite;
    transform-origin: center;
}

.blood-particle {
    position: absolute;
    z-index: 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow:
        0 0 14px rgba(223, 16, 43, 0.95),
        0 0 30px rgba(223, 16, 43, 0.42);
    opacity: 0;
    pointer-events: none;
    animation: blood-float 4.2s ease-in-out infinite;
}

.blood-particle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 1px;
    height: 16px;
    background: linear-gradient(var(--red), transparent);
    transform: translateX(-50%);
    opacity: 0.55;
}

.particle-1 { left: 18%; top: 38%; animation-delay: 0s; }
.particle-2 { left: 26%; top: 70%; width: 6px; height: 6px; animation-delay: 0.45s; animation-duration: 3.6s; }
.particle-3 { left: 38%; top: 24%; width: 5px; height: 5px; animation-delay: 0.95s; }
.particle-4 { right: 23%; top: 34%; width: 7px; height: 7px; animation-delay: 0.2s; animation-duration: 3.8s; }
.particle-5 { right: 16%; top: 62%; width: 6px; height: 6px; animation-delay: 1.15s; }
.particle-6 { left: 48%; bottom: 16%; width: 5px; height: 5px; animation-delay: 1.6s; animation-duration: 3.5s; }
.particle-7 { right: 36%; bottom: 22%; width: 7px; height: 7px; animation-delay: 2.05s; }
.particle-8 { left: 12%; top: 58%; width: 5px; height: 5px; animation-delay: 2.45s; animation-duration: 3.7s; }
.particle-9 { left: 58%; top: 18%; width: 4px; height: 4px; animation-delay: 0.7s; animation-duration: 3.2s; }
.particle-10 { right: 9%; top: 48%; width: 9px; height: 9px; animation-delay: 1.75s; animation-duration: 4.4s; }
.particle-11 { left: 7%; top: 44%; width: 6px; height: 6px; animation-delay: 2.85s; animation-duration: 3.4s; }
.particle-12 { right: 44%; top: 76%; width: 4px; height: 4px; animation-delay: 3.25s; animation-duration: 3.9s; }

.blood-streak {
    position: absolute;
    z-index: 3;
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.95), transparent);
    box-shadow: 0 0 18px rgba(223, 16, 43, 0.55);
    opacity: 0;
    transform: rotate(-18deg);
    pointer-events: none;
    animation: blood-streak 3.8s ease-in-out infinite;
}

.streak-1 { left: 15%; top: 32%; animation-delay: 0.3s; }
.streak-2 { right: 18%; top: 55%; width: 92px; animation-delay: 1.4s; transform: rotate(-11deg); }
.streak-3 { left: 40%; bottom: 18%; width: 58px; animation-delay: 2.4s; transform: rotate(8deg); }

.blood-mist {
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 16, 43, 0.22), transparent 68%);
    filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    animation: blood-mist 5.2s ease-in-out infinite;
}

.mist-1 { left: 8%; top: 42%; animation-delay: 0.9s; }
.mist-2 { right: 10%; top: 46%; animation-delay: 2.7s; }

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    width: min(980px, 100%);
    margin-inline: auto;
    margin-bottom: 14px;
    font-size: clamp(46px, 5.4vw, 78px);
    line-height: 0.82;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow:
        0 18px 48px rgba(0, 0, 0, 0.66),
        0 0 26px rgba(223, 16, 43, 0.16);
    animation: text-focus 780ms ease both 140ms;
}

.season-label {
    width: fit-content;
    margin: 0 auto 10px;
    padding: 7px 18px;
    color: var(--red);
    border: 1px solid rgba(223, 16, 43, 0.46);
    background:
        linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.14), transparent),
        rgba(0, 0, 0, 0.32);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    box-shadow:
        inset 0 0 20px rgba(223, 16, 43, 0.08),
        0 0 22px rgba(223, 16, 43, 0.1);
    animation: label-flicker 5.4s ease-in-out infinite;
}

.hero-lead {
    width: min(690px, 100%);
    margin: 0 auto 10px;
    color: #d3d3d8;
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 600;
    line-height: 1.48;
    animation: hero-rise 900ms cubic-bezier(.2, .8, .2, 1) both 120ms;
}

.hero-warline {
    width: fit-content;
    margin: 0 auto 22px;
    color: var(--white);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(223, 16, 43, 0.42);
    animation: hero-rise 900ms cubic-bezier(.2, .8, .2, 1) both 180ms;
}

.hero-actions {
    justify-content: center;
    flex-wrap: wrap;
    animation: hero-rise 900ms cubic-bezier(.2, .8, .2, 1) both 240ms;
}

.countdown-panel {
    position: relative;
    overflow: hidden;
    width: min(960px, 100%);
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: minmax(310px, 0.92fr) minmax(420px, 1.08fr);
    gap: 1px;
    border: 1px solid rgba(223, 16, 43, 0.45);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.42), rgba(255, 255, 255, 0.08), rgba(223, 16, 43, 0.28));
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.36),
        0 0 42px rgba(223, 16, 43, 0.16);
    animation: hero-rise 900ms cubic-bezier(.2, .8, .2, 1) both 330ms, panel-glow 6s ease-in-out infinite;
}

.countdown-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--red), rgba(255, 255, 255, 0.72), var(--red), transparent);
    opacity: 0.86;
    animation: edge-pulse 2.8s ease-in-out infinite;
}

.countdown-panel::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 0;
    width: 34%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.13), transparent);
    transform: skewX(-18deg);
    animation: launch-scan 4.8s ease-in-out infinite;
}

.countdown-meta,
.countdown-grid > div {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.96), rgba(7, 7, 9, 0.96));
}

.countdown-meta {
    display: grid;
    align-content: center;
    padding: 18px 22px;
    text-align: left;
}

.countdown-meta span,
.countdown-grid span {
    color: var(--red);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.countdown-meta strong {
    display: block;
    margin-top: 6px;
    color: var(--white);
    font-size: 18px;
    line-height: 1.15;
    text-transform: uppercase;
}

.launch-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 15px;
}

.launch-flags em {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: #d8d8dc;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(255, 255, 255, 0.045);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
}

.countdown-grid > div {
    min-height: 92px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 14px;
    transition: background 200ms ease, transform 200ms ease;
}

.countdown-grid > div:hover {
    transform: translateY(-2px);
    background:
        radial-gradient(circle at 50% 0, rgba(223, 16, 43, 0.17), transparent 60%),
        linear-gradient(180deg, rgba(30, 30, 35, 0.98), rgba(8, 8, 10, 0.98));
}

.countdown-grid strong {
    color: var(--white);
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 0.9;
    text-shadow: 0 0 24px rgba(223, 16, 43, 0.28);
    animation: number-glow 2.8s ease-in-out infinite;
}

.countdown-panel.is-live .countdown-meta strong::after {
    content: " - Servidor abierto";
    color: var(--red);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    width: min(760px, 100%);
    margin: 30px auto 0;
    border: 1px solid var(--line);
    background: var(--line);
}

.hero-stats div,
.status-item,
.feature-card,
.combat-list article,
.timeline article {
    background: linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(10, 10, 12, 0.94));
}

.hero-stats div {
    min-height: 82px;
    display: grid;
    align-content: center;
    padding: 18px;
}

.hero-stats span,
.status-item p,
.feature-card p,
.combat-list p,
.timeline p,
.final-cta p {
    color: var(--muted);
}

.hero-stats span,
.status-item p {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-stats strong,
.status-item strong {
    font-size: 18px;
}

.worlds-section {
    width: min(100% - 40px, var(--max));
    margin: -34px auto 0;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.16fr 0.92fr 0.92fr;
    gap: 16px;
    counter-reset: world;
}

.world-card {
    counter-increment: world;
    min-height: 330px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 18px;
    align-content: end;
    padding: 34px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.08), transparent 28%),
        radial-gradient(circle at 10% 22%, rgba(223, 16, 43, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(22, 22, 27, 0.97), rgba(7, 7, 9, 0.98));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    transform: translateY(0);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, filter 260ms ease;
    animation: card-enter 700ms cubic-bezier(.2, .8, .2, 1) both;
}

.world-card:nth-child(2) {
    animation-delay: 110ms;
}

.world-card:nth-child(3) {
    animation-delay: 210ms;
}

.world-card::before {
    content: "0" counter(world);
    position: absolute;
    right: 22px;
    top: 16px;
    color: rgba(255, 255, 255, 0.045);
    font-family: "Cinzel", Georgia, serif;
    font-size: 82px;
    font-weight: 900;
    line-height: 1;
}

.world-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red), transparent 70%);
    opacity: 0.66;
    transition: opacity 260ms ease, height 260ms ease;
}

.world-card > div::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -18px;
    width: 42px;
    height: 2px;
    background: var(--red);
    box-shadow: 54px 0 0 rgba(255, 255, 255, 0.18);
    opacity: 0.86;
}

.world-card::before,
.world-card > div,
.world-actions {
    position: relative;
    z-index: 2;
}

.world-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(223, 16, 43, 0.52);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.5),
        0 0 38px rgba(223, 16, 43, 0.12);
    filter: saturate(1.08) contrast(1.04);
}

.world-card:hover::after {
    height: 5px;
    opacity: 0.96;
}

.world-card-main {
    border-color: var(--line-red);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96) 0%, rgba(7, 7, 9, 0.74) 45%, rgba(7, 7, 9, 0.2) 100%),
        linear-gradient(180deg, rgba(7, 7, 9, 0.1), rgba(7, 7, 9, 0.92)),
        url("../img/sickness/web-sickness-warrior.jpg") center center / cover no-repeat,
        linear-gradient(180deg, rgba(22, 22, 27, 0.97), rgba(7, 7, 9, 0.98));
}

.world-card:nth-child(2) {
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96) 0%, rgba(7, 7, 9, 0.76) 48%, rgba(7, 7, 9, 0.24) 100%),
        linear-gradient(180deg, rgba(7, 7, 9, 0.12), rgba(7, 7, 9, 0.94)),
        url("../img/sickness/web-blood-castle.jpg") center center / cover no-repeat,
        linear-gradient(180deg, rgba(22, 22, 27, 0.97), rgba(7, 7, 9, 0.98));
}

.world-card:nth-child(3) {
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96) 0%, rgba(7, 7, 9, 0.76) 48%, rgba(7, 7, 9, 0.24) 100%),
        linear-gradient(180deg, rgba(7, 7, 9, 0.04), rgba(7, 7, 9, 0.94)),
        url("../img/sickness/web-dark-valakas.png") center center / cover no-repeat,
        linear-gradient(180deg, rgba(22, 22, 27, 0.97), rgba(7, 7, 9, 0.98));
}

.world-card-main,
.world-card:nth-child(2),
.world-card:nth-child(3) {
    background-blend-mode: normal, normal, luminosity, normal;
}

.world-card img {
    display: none;
}

.world-card > div {
    max-width: 260px;
}

.world-card span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.world-card h2 {
    margin: 10px 0 4px;
    font-size: 36px;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.72);
}

.world-card p {
    margin: 0 0 10px;
    color: #c8c8ce;
    font-size: 16px;
}

.world-card strong {
    display: block;
    margin-top: 14px;
    color: var(--white);
    font-size: 13px;
    text-transform: uppercase;
}

.world-card small {
    display: inline-flex;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.world-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: end;
    margin-top: 18px;
}

.world-actions a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.world-actions a:hover {
    color: var(--white);
    border-color: var(--line-red);
    background: rgba(223, 16, 43, 0.13);
    transform: translateY(-1px);
}

.preregister-promo {
    position: relative;
    overflow: hidden;
    width: min(1180px, calc(100% - 40px));
    margin: 38px auto 18px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid #df102b;
    background:
        radial-gradient(circle at 8% 50%, rgba(223, 16, 43, .24), transparent 24%),
        linear-gradient(105deg, rgba(22, 5, 9, .96), rgba(7, 7, 9, .96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.preregister-promo::after {
    content: "PREMIUM";
    position: absolute;
    right: 25%;
    top: 50%;
    color: rgba(255, 255, 255, .025);
    font-family: "Cinzel", serif;
    font-size: 78px;
    font-weight: 900;
    transform: translateY(-50%);
    pointer-events: none;
}

.preregister-promo__icon {
    position: relative;
    z-index: 1;
    width: 108px;
    height: 108px;
    display: grid;
    place-content: center;
    border: 1px solid rgba(255, 55, 84, .5);
    background: radial-gradient(circle, rgba(223, 16, 43, .2), rgba(0, 0, 0, .32));
    box-shadow: inset 0 0 28px rgba(223, 16, 43, .12), 0 0 32px rgba(223, 16, 43, .12);
    text-align: center;
}

.preregister-promo__icon span {
    color: #fff;
    font-family: "Cinzel", serif;
    font-size: 48px;
    font-weight: 900;
    line-height: .9;
}

.preregister-promo__icon small {
    margin-top: 5px;
    color: #ff2445;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
}

.preregister-promo__copy,
.preregister-promo__action {
    position: relative;
    z-index: 1;
}

.preregister-promo__copy h2 {
    margin: 4px 0 3px;
    color: #fff;
    font-family: "Cinzel", serif;
    font-size: clamp(24px, 3vw, 38px);
    text-transform: uppercase;
}

.preregister-promo__copy strong {
    display: block;
    margin-bottom: 8px;
    color: #ff2445;
    font-size: 20px;
    text-transform: uppercase;
}

.preregister-promo__copy > p:last-child {
    max-width: 660px;
    margin: 0;
    color: #b8bac2;
    line-height: 1.5;
}

.preregister-promo__action {
    display: grid;
    gap: 11px;
    justify-items: center;
}

.preregister-promo__action span {
    color: #8d8f98;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.preregister-promo__action a {
    min-width: 180px;
    min-height: 48px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 68, 94, .55);
    background: linear-gradient(180deg, #ed1e3e, #a90922);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 14px 32px rgba(223, 16, 43, .24);
}

.preregister-promo__action a:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

@media (max-width: 800px) {
    .preregister-promo {
        grid-template-columns: 90px 1fr;
        padding: 24px;
    }

    .preregister-promo__icon {
        width: 82px;
        height: 82px;
    }

    .preregister-promo__icon span {
        font-size: 38px;
    }

    .preregister-promo__action {
        grid-column: 1 / -1;
        justify-items: stretch;
    }
}

@media (max-width: 540px) {
    .preregister-promo {
        width: min(100% - 28px, 1180px);
        grid-template-columns: 1fr;
        text-align: center;
    }

    .preregister-promo__icon {
        margin: auto;
    }
}

.status-strip {
    width: min(100% - 40px, var(--max));
    margin: 16px auto 0;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.28), rgba(255, 255, 255, 0.08), rgba(223, 16, 43, 0.2));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
    animation: strip-reveal 800ms ease both;
}

.status-item {
    position: relative;
    overflow: hidden;
    min-height: 120px;
    padding: 26px 24px;
    background:
        linear-gradient(180deg, rgba(19, 19, 23, 0.97), rgba(7, 7, 9, 0.98));
    transition: transform 220ms ease, background 220ms ease;
    animation: card-enter 650ms cubic-bezier(.2, .8, .2, 1) both;
}

.status-item:nth-child(2) {
    animation-delay: 80ms;
}

.status-item:nth-child(3) {
    animation-delay: 160ms;
}

.status-item:nth-child(4) {
    animation-delay: 240ms;
}

.status-item:hover {
    transform: translateY(-3px);
    background:
        radial-gradient(circle at 80% 0, rgba(223, 16, 43, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(23, 23, 28, 0.98), rgba(7, 7, 9, 0.98));
}

.status-item::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    opacity: 0.38;
}

.status-item::before {
    content: "";
    position: absolute;
    right: -42px;
    top: -44px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(223, 16, 43, 0.18);
    transform: rotate(45deg);
}

.status-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 24px rgba(223, 16, 43, 0.8);
    animation: status-pulse 2.1s ease-in-out infinite;
}

.story-section,
.community-cta {
    width: min(100% - 40px, var(--max));
    margin: 70px auto 0;
}

.story-section .section-heading {
    margin-bottom: 18px;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.story-grid article {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: grid;
    align-content: end;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 88% 10%, rgba(223, 16, 43, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(7, 7, 9, 0.98));
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
    animation: card-enter 700ms cubic-bezier(.2, .8, .2, 1) both;
}

.story-grid article:nth-child(2) {
    animation-delay: 120ms;
}

.story-grid article:nth-child(3) {
    animation-delay: 240ms;
}

.story-grid article::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58% 100%);
    transform: translateX(-120%);
    transition: transform 560ms ease;
}

.story-grid article::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    width: 32px;
    height: 3px;
    background: var(--red);
    box-shadow: 46px 0 0 rgba(255, 255, 255, 0.18);
}

.story-grid article:hover {
    transform: translateY(-6px);
    border-color: rgba(223, 16, 43, 0.5);
    box-shadow:
        0 28px 82px rgba(0, 0, 0, 0.46),
        0 0 34px rgba(223, 16, 43, 0.12);
}

.story-grid article:hover::before {
    transform: translateX(120%);
}

.story-grid span,
.community-cta span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.story-grid h3 {
    margin: 12px 0 10px;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
}

.story-grid p,
.community-cta p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.community-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 34px;
    border: 1px solid rgba(223, 16, 43, 0.34);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.68)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
    box-shadow: 0 24px 82px rgba(0, 0, 0, 0.44);
}

.community-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58% 100%);
    transform: translateX(-100%);
    animation: panel-sweep-wide 8s ease-in-out infinite;
}

.community-cta > * {
    position: relative;
    z-index: 1;
}

.community-cta h2 {
    margin: 10px 0 12px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
    text-transform: uppercase;
}

.community-cta__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.announcement-panel {
    position: relative;
    overflow: hidden;
    width: min(100% - 40px, var(--max));
    margin: 70px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    padding: 42px;
    border: 1px solid var(--line-red);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(17, 17, 21, 0.98), rgba(5, 5, 6, 0.98));
    box-shadow:
        0 26px 90px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: section-fade-up 850ms ease both;
}

.announcement-panel::before {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -60%;
    width: 74%;
    height: 130%;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0 42%, rgba(255, 255, 255, 0.045) 48%, transparent 54% 100%),
        radial-gradient(circle, rgba(223, 16, 43, 0.16), transparent 58%);
    animation: panel-sweep 8s ease-in-out infinite;
}

.announcement-panel::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -50px;
    width: 430px;
    height: 430px;
    pointer-events: none;
    background: url("../img/sickness/blood-scratches.png") center / contain no-repeat;
    opacity: 0.36;
    filter: drop-shadow(0 0 34px rgba(223, 16, 43, 0.28));
    animation: scratches-breathe 7s ease-in-out infinite alternate;
}

.announcement-panel > * {
    position: relative;
    z-index: 1;
}

.announcement-panel h2 {
    width: min(820px, 100%);
    margin-bottom: 22px;
    font-size: clamp(38px, 4.8vw, 70px);
    line-height: 1;
    text-transform: uppercase;
}

.announcement-panel p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}

.opening-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.opening-highlights span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: #e8e8ec;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.opening-highlights span:hover {
    transform: translateY(-2px);
    border-color: rgba(223, 16, 43, 0.5);
    background: rgba(223, 16, 43, 0.12);
}

.opening-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: end;
    min-height: 330px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.82)),
        url("../img/sickness/blood-scratches.png") right -74px bottom -70px / 260px auto no-repeat,
        rgba(0, 0, 0, 0.46);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.opening-card:hover {
    transform: translateY(-5px);
    border-color: rgba(223, 16, 43, 0.58);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(223, 16, 43, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.opening-card::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.opening-card::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    width: 34px;
    height: 3px;
    background: var(--red);
    box-shadow: 48px 0 0 rgba(255, 255, 255, 0.2);
    animation: short-line-pulse 3.4s ease-in-out infinite;
}

.opening-card > * {
    position: relative;
    z-index: 1;
}

.opening-card span,
.opening-card a {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.opening-card strong {
    display: block;
    margin: 14px 0 16px;
    font-size: 32px;
    line-height: 0.95;
    text-transform: uppercase;
}

.opening-card a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    padding: 0 16px;
    color: var(--white);
    border: 1px solid rgba(223, 16, 43, 0.66);
    background: rgba(223, 16, 43, 0.16);
}

.mini-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.1);
}

.mini-countdown span {
    min-height: 56px;
    display: grid;
    place-items: center;
    padding: 8px 6px;
    color: var(--muted);
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    font-size: 11px;
    line-height: 1;
}

.mini-countdown b {
    display: block;
    color: var(--white);
    font-size: 20px;
    line-height: 1;
}

.live-section {
    padding: 64px 0 20px;
}

.live-board {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1px;
    border: 1px solid rgba(223, 16, 43, 0.34);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.34), rgba(255, 255, 255, 0.08));
    box-shadow: 0 22px 80px rgba(0, 0, 0, 0.34);
}

.live-header,
.live-grid article {
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(8, 8, 10, 0.96));
}

.live-header {
    position: relative;
    overflow: hidden;
    padding: 28px;
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.68), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.live-header h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}

.live-grid article {
    position: relative;
    overflow: hidden;
    min-height: 176px;
    padding: 28px;
}

.live-grid article::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(223, 16, 43, 0.16), transparent 66%);
    pointer-events: none;
}

.live-grid span,
.ranking-card span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.live-grid strong {
    display: block;
    margin: 12px 0;
    font-size: 22px;
    text-transform: uppercase;
}

.live-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.horror-copy {
    position: relative;
    min-height: 520px;
    display: grid;
    align-content: end;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(223, 16, 43, 0.28);
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.18), rgba(7, 7, 9, 0.96)),
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.42)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.horror-copy > img {
    display: none;
}

.section-block {
    width: min(100% - 40px, var(--max));
    margin: 0 auto;
    padding: 112px 0;
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 70px;
    align-items: start;
}

.section-copy h2,
.section-heading h2,
.final-cta h2 {
    margin-bottom: 20px;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.section-copy p,
.section-heading p,
.final-cta p {
    font-size: 17px;
    line-height: 1.65;
}

.combat-list {
    display: grid;
    gap: 14px;
}

.combat-list article {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 0 20px;
    padding: 24px;
    border: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.08), transparent 46%),
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(8, 8, 10, 0.96));
    transition: transform 180ms ease, border-color 180ms ease;
}

.combat-list article::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.72));
}

.combat-list article:hover,
.ranking-list article:hover,
.progression-steps article:hover,
.feature-card:hover,
.news-grid article:hover,
.timeline article:hover {
    transform: translateY(-3px);
    border-color: rgba(223, 16, 43, 0.5);
}

.combat-list span {
    grid-row: span 2;
    color: var(--red);
    font-weight: 900;
    font-size: 28px;
}

.combat-list h3,
.feature-card h3,
.timeline h3 {
    margin-bottom: 10px;
    font-size: 21px;
    text-transform: uppercase;
}

.combat-list p,
.feature-card p,
.timeline p {
    margin-bottom: 0;
    line-height: 1.55;
}

.feature-band {
    border-top: 1px solid var(--line-red);
    border-bottom: 1px solid var(--line-red);
}

.server-rules {
    padding-top: 18px;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    border: 1px solid var(--line);
    background: var(--line);
}

.rules-grid article {
    position: relative;
    overflow: hidden;
    min-height: 178px;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(8, 8, 10, 0.96));
}

.rules-grid article:nth-child(1) { background: linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.97)), url("../img/sickness/world-sickness-sword.png") right -30px bottom -42px / 120px auto no-repeat; }
.rules-grid article:nth-child(2) { background: linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.97)), url("../img/sickness/embers.png") right -18px bottom -18px / 120px auto no-repeat; }
.rules-grid article:nth-child(3) { background: linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.97)), url("../img/sickness/soul-ember.png") right 18px bottom 18px / 66px auto no-repeat; }
.rules-grid article:nth-child(4) { background: linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.97)), url("../img/sickness/web-rule-weapon.png") right -20px bottom -24px / 120px auto no-repeat; }
.rules-grid article:nth-child(5) { background: linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.97)), url("../img/sickness/soul-shilen.png") right 20px bottom 20px / 68px auto no-repeat; }
.rules-grid article:nth-child(6) { background: linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.97)), url("../img/sickness/world-siege-castle.png") right 18px bottom 18px / 70px auto no-repeat; }

.rules-grid article::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 32%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.rules-grid article:hover::after {
    opacity: 1;
}

.rules-grid span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.rules-grid strong {
    display: block;
    margin: 16px 0 12px;
    color: var(--red);
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}

.rules-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.ranking-preview {
    padding-top: 28px;
    position: relative;
}

.ranking-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 14px;
}

.ranking-card,
.ranking-list article {
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(8, 8, 10, 0.96));
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ranking-card-large {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    padding: 34px;
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.58)),
        linear-gradient(180deg, rgba(7, 7, 9, 0.18), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.ranking-card-large::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 360px;
    height: 360px;
    background: url("../img/sickness/blood-scratches.png") center / contain no-repeat;
    opacity: 0.28;
    pointer-events: none;
}

.ranking-card-large > * {
    position: relative;
    z-index: 1;
}

.ranking-card h3 {
    margin: 18px 0 14px;
    font-size: 42px;
    line-height: 1;
    text-transform: uppercase;
}

.ranking-card p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.58;
}

.ranking-card a {
    display: inline-flex;
    margin-top: 22px;
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 1px solid var(--red);
}

.ranking-list {
    display: grid;
    gap: 14px;
}

.ranking-list article {
    min-height: 110px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px;
}

.ranking-list article:nth-child(1) {
    background:
        linear-gradient(90deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.92)),
        url("../img/sickness/world-sickness-sword.png") right -24px center / 120px auto no-repeat;
}

.ranking-list article:nth-child(2) {
    background:
        linear-gradient(90deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.92)),
        url("../img/sickness/world-siege-castle.png") right 18px center / 76px auto no-repeat;
}

.ranking-list article:nth-child(3) {
    background:
        linear-gradient(90deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.92)),
        url("../img/sickness/web-blood-castle.jpg") right center / 190px auto no-repeat;
}

.operations-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: 16px;
    padding-top: 34px;
}

.operations-hero {
    min-height: 390px;
    display: grid;
    align-content: end;
    padding: 38px;
    border: 1px solid rgba(223, 16, 43, 0.34);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.94), rgba(7, 7, 9, 0.44)),
        linear-gradient(180deg, rgba(7, 7, 9, 0.1), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.operations-hero h2 {
    margin-bottom: 18px;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1;
    text-transform: uppercase;
}

.operations-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.62;
}

.operations-grid {
    display: grid;
    gap: 1px;
    border: 1px solid var(--line);
    background: var(--line);
}

.operations-grid article {
    min-height: 128px;
    display: grid;
    align-content: center;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.98));
}

.operations-grid span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
}

.operations-grid strong {
    margin: 8px 0;
    font-size: 24px;
    text-transform: uppercase;
}

.operations-grid p {
    margin: 0;
    color: var(--muted);
}

.ranking-list strong {
    color: var(--red);
    font-size: 32px;
}

.ranking-list h3 {
    margin: 0 0 6px;
    font-size: 24px;
    text-transform: uppercase;
}

.ranking-list p {
    margin: 0;
    color: var(--muted);
}

.cursed-zones {
    padding-top: 18px;
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 50px;
    align-items: end;
    margin-bottom: 34px;
}

.zone-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.zone-grid article {
    min-height: 390px;
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--line-red);
    background:
        linear-gradient(180deg, rgba(17, 17, 20, 0.34), rgba(5, 5, 5, 0.98)),
        var(--panel);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.zone-grid article:nth-child(1) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.22), rgba(7, 7, 9, 0.98)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.zone-grid article:nth-child(2) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.22), rgba(7, 7, 9, 0.98)),
        url("../img/sickness/web-dark-valakas.png") center / cover no-repeat;
}

.zone-grid article:nth-child(3) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.22), rgba(7, 7, 9, 0.98)),
        url("../img/sickness/blood-scratches.png") center / cover no-repeat;
}

.zone-grid article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(223, 16, 43, 0.22), transparent 46%);
    opacity: 0.9;
}

.zone-grid article::after {
    content: "";
    position: absolute;
    inset: auto 24px 22px;
    height: 1px;
    background: linear-gradient(90deg, rgba(223, 16, 43, 0.72), transparent);
    opacity: 0.62;
}

.zone-grid article:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.44);
}

.zone-grid img {
    display: none;
}

.zone-grid span,
.zone-grid h3,
.zone-grid p {
    position: relative;
    z-index: 1;
}

.zone-grid span {
    display: block;
    margin-bottom: 10px;
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.zone-grid h3 {
    margin-bottom: 12px;
    font-size: 24px;
    text-transform: uppercase;
}

.zone-grid p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.58;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.progression-section {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 44px;
    align-items: start;
    padding-top: 46px;
}

.progression-copy {
    position: sticky;
    top: 110px;
    min-height: 460px;
    display: grid;
    align-content: end;
    padding: 34px;
    border: 1px solid rgba(223, 16, 43, 0.3);
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.16), rgba(7, 7, 9, 0.96)),
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.44)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.progression-copy h2,
.event-card h2,
.community-section h2 {
    margin-bottom: 18px;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.progression-copy p,
.event-card p,
.community-section p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.progression-steps {
    display: grid;
    gap: 14px;
}

.progression-steps article {
    min-height: 160px;
    padding: 26px;
    border: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(223, 16, 43, 0.12), transparent 44%),
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(10, 10, 12, 0.94));
    transition: transform 180ms ease, border-color 180ms ease;
}

.progression-steps article:nth-child(1) {
    background:
        linear-gradient(90deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.9)),
        url("../img/sickness/soul-ember.png") right 22px center / 70px auto no-repeat;
}

.progression-steps article:nth-child(2) {
    background:
        linear-gradient(90deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.9)),
        url("../img/sickness/world-sickness-sword.png") right -22px center / 130px auto no-repeat;
}

.progression-steps article:nth-child(3) {
    background:
        linear-gradient(90deg, rgba(23, 23, 27, 0.96), rgba(8, 8, 10, 0.9)),
        url("../img/sickness/web-dark-valakas.png") right -20px center / 140px auto no-repeat;
}

.progression-steps span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.progression-steps h3 {
    margin: 12px 0 10px;
    font-size: 26px;
    text-transform: uppercase;
}

.progression-steps p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.feature-card {
    min-height: 300px;
    padding: 26px;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease;
    display: grid;
    align-content: end;
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.18), rgba(7, 7, 9, 0.96)),
        linear-gradient(90deg, rgba(7, 7, 9, 0.88), rgba(7, 7, 9, 0.42)),
        var(--panel);
}

.feature-card::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(223, 16, 43, 0.13), transparent 66%);
    pointer-events: none;
}

.feature-card::before {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-bottom: 22px;
    background: var(--red);
}

.feature-card img {
    display: none;
}

.feature-card:nth-child(1) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.12), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.feature-card:nth-child(2) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.12), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-dark-valakas.png") center / cover no-repeat;
}

.feature-card:nth-child(3) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.12), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.feature-card:nth-child(4) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.12), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/city.png") center / cover no-repeat;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.event-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    padding-top: 64px;
}

.event-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    min-height: 430px;
    align-content: end;
    padding: 38px;
    border: 1px solid var(--line-red);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.94), rgba(7, 7, 9, 0.42)),
        linear-gradient(180deg, rgba(7, 7, 9, 0.08), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-dark-valakas.png") center / cover no-repeat;
}

.event-card::after {
    content: "";
    position: absolute;
    inset: auto 30px 26px auto;
    width: 170px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 16, 43, 0.82));
}

.event-card > img {
    display: none;
}

.event-list {
    display: grid;
    gap: 1px;
    border: 1px solid var(--line);
    background: var(--line);
}

.event-list article {
    display: grid;
    align-content: center;
    min-height: 118px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(10, 10, 12, 0.94));
}

.event-list span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.event-list strong {
    margin-top: 8px;
    font-size: 22px;
    text-transform: uppercase;
}

.community-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    padding-top: 58px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.community-actions {
    display: grid;
    gap: 10px;
    min-width: 240px;
}

.timeline article {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 28px;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.94), rgba(8, 8, 10, 0.96));
}

.timeline article:nth-child(1) {
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.98)),
        url("../img/sickness/soul-shilen.png") right 22px bottom 22px / 74px auto no-repeat;
}

.timeline article:nth-child(2) {
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.98)),
        url("../img/sickness/world-sickness-sword.png") right -28px bottom -18px / 140px auto no-repeat;
}

.timeline article:nth-child(3) {
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(8, 8, 10, 0.98)),
        url("../img/sickness/web-blood-castle.jpg") right bottom / 180px auto no-repeat;
}

.timeline span {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 44px;
    border: 1px solid var(--line-red);
    color: var(--red);
    font-weight: 900;
}

.final-cta {
    width: min(100% - 40px, var(--max));
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    padding: 52px;
    border: 1px solid var(--line-red);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.55)),
        linear-gradient(180deg, rgba(7, 7, 9, 0.1), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.final-cta h2 {
    font-size: clamp(30px, 4vw, 52px);
}

.vote-section {
    width: min(1180px, calc(100% - 40px));
    margin: 42px auto 0;
    padding: 34px clamp(22px, 4vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 3px solid #df102b;
    background: linear-gradient(110deg, rgba(223, 16, 43, .12), rgba(8, 8, 10, .94) 44%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

.vote-section__copy {
    max-width: 660px;
}

.vote-section__copy h2 {
    margin: 5px 0 10px;
    color: #fff;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(25px, 3vw, 38px);
    text-transform: uppercase;
}

.vote-section__copy > p:last-child {
    margin: 0;
    color: #bfc1c9;
    line-height: 1.55;
}

.vote-section__sites {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.vote-site {
    min-width: 190px;
    min-height: 88px;
    padding: 14px 18px;
    display: grid;
    place-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .46);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.vote-site span {
    color: #8e919c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.vote-site img {
    display: block;
    max-width: 100%;
    height: auto;
}

.vote-site:hover {
    border-color: rgba(223, 16, 43, .75);
    background: rgba(223, 16, 43, .08);
    transform: translateY(-2px);
}

@media (max-width: 720px) {
    .vote-section {
        width: min(100% - 28px, 1180px);
        padding: 28px 20px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .vote-site {
        width: 100%;
    }
}

.site-footer {
    width: min(100% - 40px, var(--max));
    margin: 0 auto;
    padding: 34px 0 46px;
    display: grid;
    grid-template-columns: 170px 1fr auto;
    gap: 24px;
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.site-footer img {
    width: 150px;
}

.site-footer p {
    margin: 0;
}

.site-footer nav {
    display: flex;
    gap: 18px;
}

.site-footer a {
    color: var(--muted);
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
}

.site-footer a:hover {
    color: var(--white);
}

.status-strip.reveal-on-scroll,
.announcement-panel.reveal-on-scroll,
.site-footer.reveal-on-scroll {
    animation: none;
}

@keyframes logo-pulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 24px 70px rgba(220, 0, 32, 0.24))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.1));
    }
    50% {
        transform: translateY(-4px) scale(1.012);
        filter:
            drop-shadow(0 28px 82px rgba(220, 0, 32, 0.38))
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.18));
    }
}

@keyframes logo-aura {
    0%, 100% {
        opacity: 0.38;
        transform: scale(0.96);
    }
    50% {
        opacity: 0.82;
        transform: scale(1.06);
    }
}

@keyframes scan-line {
    0%, 100% {
        transform: translateY(0) scaleX(0.64);
        opacity: 0.18;
    }
    50% {
        transform: translateY(-22px) scaleX(1);
        opacity: 0.58;
    }
}

@keyframes blood-float {
    0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.45);
    }
    14% {
        opacity: 1;
    }
    58% {
        opacity: 0.9;
        transform: translate3d(16px, -22px, 0) scale(1.18);
    }
    100% {
        opacity: 0;
        transform: translate3d(-14px, -64px, 0) scale(0.35);
    }
}

@keyframes blood-streak {
    0%, 100% {
        opacity: 0;
        transform: translateX(-30px) rotate(-18deg) scaleX(0.4);
    }
    20% {
        opacity: 0.85;
    }
    52% {
        opacity: 0.45;
        transform: translateX(42px) rotate(-18deg) scaleX(1);
    }
    78% {
        opacity: 0;
        transform: translateX(78px) rotate(-18deg) scaleX(0.5);
    }
}

@keyframes blood-mist {
    0%, 100% {
        opacity: 0;
        transform: scale(0.6);
    }
    35% {
        opacity: 0.72;
        transform: scale(1);
    }
    70% {
        opacity: 0.2;
        transform: scale(1.28);
    }
}

@keyframes cloud-drift {
    from {
        transform: translateX(-18px) scale(1.02);
    }
    to {
        transform: translateX(18px) scale(1.05);
    }
}

@keyframes fog-breathe {
    from {
        opacity: 0.28;
        transform: translateY(8px) scale(1);
    }
    to {
        opacity: 0.52;
        transform: translateY(-8px) scale(1.04);
    }
}

@keyframes ember-float {
    from {
        opacity: 0.22;
        transform: translateY(18px) rotate(-2deg);
    }
    to {
        opacity: 0.48;
        transform: translateY(-16px) rotate(3deg);
    }
}

@keyframes slash-glow {
    0%, 100% {
        opacity: 0.48;
        filter: drop-shadow(0 0 0 rgba(223, 16, 43, 0));
    }
    48% {
        opacity: 0.96;
        filter: drop-shadow(0 0 16px rgba(223, 16, 43, 0.44));
    }
}

@keyframes launch-scan {
    0%, 100% {
        transform: translateX(0) skewX(-18deg);
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    62% {
        transform: translateX(430%) skewX(-18deg);
        opacity: 0.64;
    }
}

@keyframes page-scan {
    from {
        background-position: 0 0, 0 0, 0 0;
    }
    to {
        background-position: 0 34px, 620px 0, 0 6px;
    }
}

@keyframes belt-shine {
    0%, 46%, 100% {
        transform: translateX(-110%);
        opacity: 0;
    }
    58% {
        opacity: 0.9;
    }
    72% {
        transform: translateX(110%);
        opacity: 0;
    }
}

@keyframes header-line {
    0%, 100% {
        transform: scaleX(0.42);
        opacity: 0.42;
    }
    50% {
        transform: scaleX(0.86);
        opacity: 0.82;
    }
}

@keyframes hero-light-shift {
    0% {
        filter: saturate(0.95);
        background-position: 0 0, 0 0, 0 0, -120px 0, 120px 0, 0 0;
    }
    100% {
        filter: saturate(1.08);
        background-position: 0 0, 0 0, 0 0, 120px 0, -120px 0, 0 0;
    }
}

@keyframes hero-ground-line {
    0%, 100% {
        opacity: 0.44;
        transform: translateX(-50%) scaleX(0.76);
    }
    50% {
        opacity: 0.88;
        transform: translateX(-50%) scaleX(1);
    }
}

@keyframes cloud-pulse {
    0%, 100% {
        filter: saturate(0.34) contrast(1.28) brightness(0.86);
    }
    50% {
        filter: saturate(0.58) contrast(1.42) brightness(1.04);
    }
}

@keyframes scratches-breathe {
    from {
        opacity: 0.26;
        filter:
            drop-shadow(0 0 26px rgba(223, 16, 43, 0.2))
            brightness(0.84);
    }
    to {
        opacity: 0.5;
        filter:
            drop-shadow(0 0 48px rgba(223, 16, 43, 0.42))
            brightness(1.05);
    }
}

@keyframes smoke-drift-left {
    from {
        transform: translateX(-12px) translateY(18px) scale(1);
    }
    to {
        transform: translateX(42px) translateY(-16px) scale(1.08);
    }
}

@keyframes smoke-drift-right {
    from {
        transform: scaleX(-1) translateX(-10px) translateY(14px) scale(1);
    }
    to {
        transform: scaleX(-1) translateX(38px) translateY(-18px) scale(1.1);
    }
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes watermark-breathe {
    0%, 100% {
        opacity: 0.72;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.035);
    }
}

@keyframes logo-tilt {
    0%, 100% {
        rotate: 0deg;
    }
    50% {
        rotate: -0.45deg;
    }
}

@keyframes text-focus {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes label-flicker {
    0%, 100% {
        border-color: rgba(223, 16, 43, 0.36);
        opacity: 0.9;
    }
    48% {
        border-color: rgba(255, 255, 255, 0.24);
        opacity: 1;
    }
    52% {
        border-color: rgba(223, 16, 43, 0.72);
        opacity: 0.86;
    }
}

@keyframes panel-glow {
    0%, 100% {
        box-shadow:
            0 24px 80px rgba(0, 0, 0, 0.36),
            0 0 32px rgba(223, 16, 43, 0.12);
    }
    50% {
        box-shadow:
            0 30px 92px rgba(0, 0, 0, 0.48),
            0 0 58px rgba(223, 16, 43, 0.24);
    }
}

@keyframes edge-pulse {
    0%, 100% {
        opacity: 0.54;
        transform: scaleX(0.78);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes number-glow {
    0%, 100% {
        text-shadow: 0 0 18px rgba(223, 16, 43, 0.18);
    }
    50% {
        text-shadow:
            0 0 26px rgba(223, 16, 43, 0.42),
            0 0 2px rgba(255, 255, 255, 0.4);
    }
}

@keyframes strip-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes status-pulse {
    0%, 100% {
        transform: scale(0.92);
        box-shadow: 0 0 14px rgba(223, 16, 43, 0.42);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 28px rgba(223, 16, 43, 0.88);
    }
}

@keyframes section-fade-up {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes panel-sweep {
    0%, 100% {
        transform: translateX(-12%);
        opacity: 0.58;
    }
    50% {
        transform: translateX(10%);
        opacity: 0.88;
    }
}

@keyframes panel-sweep-wide {
    0%, 100% {
        transform: translateX(-120%);
        opacity: 0;
    }
    45% {
        opacity: 0.8;
    }
    70% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes social-pop {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    45% {
        transform: scale(1.16) rotate(-4deg);
    }
}

@keyframes short-line-pulse {
    0%, 100% {
        width: 34px;
        opacity: 0.78;
    }
    50% {
        width: 62px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

.news-section {
    padding-top: 62px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.news-grid article {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(22, 22, 27, 0.96), rgba(7, 7, 9, 0.98));
}

.news-grid article:nth-child(1) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.2), rgba(7, 7, 9, 0.97)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.news-grid article:nth-child(2) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.2), rgba(7, 7, 9, 0.97)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.news-grid article:nth-child(3) {
    background:
        linear-gradient(180deg, rgba(7, 7, 9, 0.2), rgba(7, 7, 9, 0.97)),
        url("../img/sickness/blood-scratches.png") center / cover no-repeat;
}

.news-grid article::before {
    content: "";
    width: 48px;
    height: 3px;
    margin-bottom: 30px;
    background: var(--red);
}

.news-grid span,
.news-grid a {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.news-grid h3 {
    margin: 12px 0;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
}

.news-grid p {
    margin-bottom: 28px;
    color: var(--muted);
    line-height: 1.58;
}

.news-grid a {
    margin-top: auto;
    align-self: flex-start;
    border-bottom: 1px solid var(--red);
}

.news-grid time {
    margin-top: 18px;
    color: #6f6f76;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.download-sickness-page {
    min-height: 100vh;
}

.download-sickness-main {
    width: min(100% - 40px, var(--max));
    margin: 0 auto;
    padding: 168px 0 72px;
}

.download-sickness-hero {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: end;
    padding: 54px;
    border: 1px solid var(--line-red);
    background:
        linear-gradient(90deg, rgba(5, 5, 5, 0.94), rgba(5, 5, 5, 0.62)),
        linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.95)),
        url("../img/sickness/web-sickness-warrior.jpg") center / cover no-repeat;
}

.download-sickness-hero > * {
    position: relative;
    z-index: 1;
}

.download-sickness-hero__content {
    max-width: 760px;
}

.download-sickness-hero h1 {
    margin: 14px 0 18px;
    font-size: clamp(44px, 6vw, 82px);
    line-height: 0.92;
    text-transform: uppercase;
}

.download-sickness-hero p {
    margin: 0;
    max-width: 680px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.58;
}

.download-sickness-card {
    padding: 26px;
    border: 1px solid rgba(223, 16, 43, 0.44);
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/soul-ember.png") right 16px bottom 16px / 92px auto no-repeat;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.download-sickness-card span,
.download-sickness-section .section-heading span,
.download-sickness-file > span,
.download-sickness-panel > span,
.download-sickness-support span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.download-sickness-card strong {
    display: block;
    margin: 10px 0 12px;
    color: var(--white);
    font-family: "Cinzel", serif;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}

.download-sickness-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.download-sickness-steps article,
.download-sickness-file,
.download-sickness-panel,
.download-sickness-support {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(23, 23, 27, 0.9), rgba(7, 7, 9, 0.96));
}

.download-sickness-steps article {
    min-height: 174px;
    padding: 24px;
}

.download-sickness-steps span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(223, 16, 43, 0.36);
    color: var(--red);
    font-weight: 900;
}

.download-sickness-steps h2,
.download-sickness-file h3,
.download-sickness-panel h2,
.download-sickness-support h2 {
    margin: 0 0 12px;
    color: var(--white);
    font-family: "Cinzel", serif;
    line-height: 1;
    text-transform: uppercase;
}

.download-sickness-steps p,
.download-sickness-file p,
.download-sickness-panel li,
.download-sickness-support p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.download-sickness-section,
.download-sickness-info,
.download-sickness-support {
    margin-top: 72px;
}

.download-sickness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.download-sickness-file {
    position: relative;
    overflow: hidden;
    min-height: 342px;
    display: flex;
    flex-direction: column;
    padding: 26px;
}

.download-sickness-file::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background: var(--file-bg, url("../img/sickness/web-blood-castle.jpg")) center / cover no-repeat;
}

.download-sickness-file::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 7, 9, 0.36), rgba(7, 7, 9, 0.98));
}

.download-sickness-file:nth-child(2) {
    --file-bg: url("../img/sickness/city.png");
}

.download-sickness-file:nth-child(3) {
    --file-bg: url("../img/sickness/fortress.png");
}

.download-sickness-file > * {
    position: relative;
    z-index: 1;
}

.download-sickness-file h3 {
    margin-top: 14px;
    font-size: 28px;
}

.download-sickness-file strong {
    margin-top: auto;
    padding-top: 26px;
    color: #f4d8d8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.download-sickness-file__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.download-sickness-file__links a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(223, 16, 43, 0.52);
    color: var(--white);
    background: linear-gradient(180deg, rgba(223, 16, 43, 0.22), rgba(255, 255, 255, 0.04));
    font-weight: 900;
    text-transform: uppercase;
}

.download-sickness-file__links a:hover {
    border-color: var(--red);
    transform: translateY(-1px);
}

.download-sickness-file__links a[href="#"] {
    cursor: default;
    opacity: 0.72;
}

.download-sickness-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
}

.download-sickness-panel {
    padding: 30px;
}

.download-sickness-panel ul {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.download-sickness-panel li {
    position: relative;
    min-height: 48px;
    padding: 12px 14px 12px 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.download-sickness-panel li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 19px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 14px rgba(223, 16, 43, 0.54);
}

.download-sickness-panel--compact {
    background:
        linear-gradient(180deg, rgba(23, 23, 27, 0.88), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/bone.png") right 18px bottom 18px / 84px auto no-repeat;
}

.download-sickness-reqs {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.download-sickness-reqs div {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border: 1px solid rgba(223, 16, 43, 0.22);
    background: rgba(0, 0, 0, 0.42);
}

.download-sickness-reqs small {
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
}

.download-sickness-reqs strong {
    color: var(--white);
    font-family: "Cinzel", serif;
    text-transform: uppercase;
}

.download-sickness-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 26px;
    align-items: center;
    padding: 34px;
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.58)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.download-sickness-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.donate-video-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background: #050505;
}

.donate-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.1) brightness(0.45);
}

.donate-video-veil {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 22%, rgba(223, 16, 43, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(5, 5, 5, 0.58) 0%, rgba(5, 5, 5, 0.86) 48%, rgba(5, 5, 5, 0.98) 100%);
}

.donate-page {
    width: min(100% - 40px, var(--max));
    margin: 0 auto;
    padding: 168px 0 82px;
}

.donate-page .wrap {
    width: 100%;
    margin: 0;
}

.donate-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin-bottom: 28px;
}

.donate-kicker {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.donate-hero h1 {
    margin: 12px 0 14px;
    font-size: clamp(44px, 6vw, 78px);
    line-height: 0.92;
    text-transform: uppercase;
}

.donate-hero p,
.donate-title-block p,
.donate-step p,
.donate-panel label,
.bonus-item p,
.curr-item p {
    color: var(--muted);
}

.donate-hero p {
    max-width: 720px;
    margin: 0;
    font-size: 19px;
    line-height: 1.58;
}

.donate-hero__coin {
    min-width: 220px;
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(223, 16, 43, 0.34);
    background: linear-gradient(180deg, rgba(23, 23, 27, 0.9), rgba(7, 7, 9, 0.96));
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
}

.donate-hero__coin img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.donate-hero__coin span {
    color: var(--white);
    font-family: "Cinzel", serif;
    font-weight: 900;
    text-transform: uppercase;
}

#payment-form.donate-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 18px;
    align-items: start;
}

.donate-panel {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 88% 10%, rgba(223, 16, 43, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(23, 23, 27, 0.92), rgba(7, 7, 9, 0.97));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.donate-summary {
    position: sticky;
    top: 154px;
}

.donate-title {
    color: var(--white);
    font-family: "Cinzel", serif;
    font-size: 26px;
    line-height: 1.05;
    text-transform: uppercase;
}

.donate-title-block {
    margin-bottom: 20px;
}

.price_donate span,
.orange,
.curr_symbol,
.bonus-item span {
    color: var(--red);
}

.donate-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 22px 0 24px;
}

.donate-step {
    min-height: 90px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.donate-step span {
    display: block;
    color: var(--red);
    font-weight: 900;
    margin-bottom: 8px;
}

.donate-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.donate-page .form-group {
    margin-bottom: 18px;
}

.donate-panel label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.donate-page .form-control {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(223, 16, 43, 0.26);
    color: var(--white);
    background: rgba(5, 5, 5, 0.72);
    padding: 0 14px;
    font: inherit;
}

.donate-page .form-control:focus {
    border-color: rgba(223, 16, 43, 0.72);
    box-shadow: 0 0 0 3px rgba(223, 16, 43, 0.14);
}

.donate-page select.form-control {
    appearance: none;
}

.payment__input {
    display: flex;
    align-items: stretch;
}

.payment__input input {
    border-right: 0;
}

.payment_bonus_price {
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(223, 16, 43, 0.34);
    color: var(--white);
    background: linear-gradient(180deg, rgba(223, 16, 43, 0.28), rgba(139, 7, 23, 0.34));
    font-weight: 900;
}

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

.pay_method {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.pay_method:hover,
.pay_method.active {
    border-color: rgba(223, 16, 43, 0.68);
    background: rgba(223, 16, 43, 0.12);
}

.pay_method:hover {
    transform: translateY(-1px);
}

.pay_method img {
    max-width: 88px;
    max-height: 28px;
    object-fit: contain;
}

.pay_method span {
    font-size: 12px;
}

.payment__range.noUi-target {
    border: 1px solid rgba(223, 16, 43, 0.28);
    background: rgba(0, 0, 0, 0.58);
    box-shadow: none;
}

.payment__range.noUi-horizontal {
    height: 10px;
}

.payment__range.noUi-horizontal .noUi-connect {
    background: var(--red);
}

.payment__range.noUi-horizontal .noUi-handle {
    width: 24px;
    height: 24px;
    right: -12px;
    top: -8px;
    border: 0;
    border-radius: 50%;
    background: #ff1936;
    box-shadow: 0 0 18px rgba(223, 16, 43, 0.55);
}

.payment__range .noUi-handle::before,
.payment__range .noUi-handle::after {
    display: none;
}

.donate-total-box {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: 1px solid rgba(223, 16, 43, 0.28);
    background: rgba(223, 16, 43, 0.08);
}

.donate-total-box small {
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
}

.donate-total-box strong {
    color: var(--white);
    font-family: "Cinzel", serif;
    font-size: 30px;
}

.pay-currency {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.curr-item {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.bonus-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bonus-item:last-child {
    border-bottom: 0;
}

.donate-submit {
    margin: 24px 0 0;
}

.donate-submit .btn {
    width: 100%;
    border: 0;
}

.donate-error {
    margin-top: 8px;
    color: #ff9ca8;
}

.download-section {
    padding-top: 52px;
}

.download-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr) auto;
    gap: 28px;
    align-items: center;
    padding: 36px;
    border: 1px solid var(--line-red);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.55)),
        linear-gradient(180deg, rgba(7, 7, 9, 0.1), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.download-panel > * {
    position: relative;
    z-index: 1;
}

.download-panel h2 {
    margin-bottom: 14px;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1;
    text-transform: uppercase;
}

.download-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.download-steps {
    display: grid;
    gap: 10px;
}

.download-steps article {
    min-height: 64px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.54);
}

.community-section {
    min-height: 360px;
    padding: 44px;
    border: 1px solid rgba(223, 16, 43, 0.3);
    background:
        linear-gradient(90deg, rgba(7, 7, 9, 0.96), rgba(7, 7, 9, 0.5)),
        linear-gradient(180deg, rgba(7, 7, 9, 0.12), rgba(7, 7, 9, 0.96)),
        url("../img/sickness/web-blood-castle.jpg") center / cover no-repeat;
}

.download-steps span {
    color: var(--red);
    font-weight: 900;
}

.download-steps strong {
    text-transform: uppercase;
}

@media (max-width: 960px) {
    .site-header {
        grid-template-columns: auto auto;
        height: auto;
        min-height: 78px;
        padding: 14px 0;
        gap: 12px;
    }

    .site-nav {
        order: 3;
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .header-actions {
        justify-content: end;
        gap: 8px;
    }

    .brand-mark {
        width: 142px;
    }

    .language-switcher .nav__langs-item {
        min-height: 36px;
        padding-inline: 9px;
    }

    .hero-section {
        padding-top: 150px;
    }

    .status-strip,
    .feature-grid,
    .zone-grid,
    .worlds-section,
    .story-grid,
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .intro-grid,
    .section-heading,
    .final-cta {
        grid-template-columns: 1fr;
    }

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

    .announcement-panel,
    .community-cta,
    .progression-section,
    .operations-section,
    .event-section,
    .community-section,
    .site-footer,
    .live-board,
    .ranking-layout,
    .download-panel,
    .download-sickness-hero,
    .download-sickness-info,
    .download-sickness-support,
    .donate-hero,
    #payment-form.donate-form {
        grid-template-columns: 1fr;
    }

    .download-sickness-steps,
    .download-sickness-grid {
        grid-template-columns: 1fr;
    }

    .download-sickness-card {
        max-width: 520px;
    }

    .download-sickness-socials {
        justify-content: flex-start;
    }

    .donate-summary {
        position: static;
    }

    .community-cta__links {
        justify-content: flex-start;
    }

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

    .countdown-panel {
        grid-template-columns: 1fr;
    }

    .countdown-meta {
        text-align: center;
    }

    .launch-flags {
        justify-content: center;
    }

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

    .progression-copy {
        position: static;
    }
}

@media (max-width: 640px) {
    .top-announcement {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
        min-height: 54px;
        padding: 8px 12px;
    }

    .top-announcement span,
    .top-announcement a {
        font-size: 10.5px;
        line-height: 1;
    }

    .top-announcement p {
        display: none;
    }

    .top-announcement .top-announcement__premium {
        flex: 1 1 auto;
        justify-content: center;
        padding: 5px 7px;
        font-size: 9.5px;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
    }

    .site-header {
        top: 54px;
        width: min(100% - 24px, var(--max));
        grid-template-columns: auto 1fr;
        gap: 10px;
        min-height: 74px;
        padding: 10px 0 8px;
    }

    .brand-mark {
        width: 106px;
    }

    .header-actions {
        justify-content: flex-end;
        gap: 6px;
    }

    .header-actions .btn-red,
    .header-actions .btn-ghost {
        display: none;
    }

    .language-switcher .nav__langs-item {
        min-height: 34px;
        padding: 0 8px;
        font-size: 11px;
    }

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

    .language-switcher .nav__langs-stroke {
        min-width: 68px;
    }

    .site-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: grid;
    }

    .hero-section {
        min-height: auto;
        padding: 166px 14px 44px;
    }

    h1 {
        font-size: clamp(36px, 11vw, 48px);
        line-height: 0.9;
    }

    .hero-logo-wrap,
    .hero-logo {
        width: min(500px, 98vw);
    }

    .hero-logo-wrap {
        margin-top: 2px;
    }

    .hero-logo-wrap::before {
        inset: 20% 10% 12%;
        filter: blur(22px);
    }

    .horror-scratches {
        right: -18%;
        width: 260px;
        opacity: 0.24;
    }

    .horror-embers {
        right: -12%;
        bottom: 38%;
        width: 270px;
        opacity: 0.28;
    }

    .slash {
        opacity: 0.48;
    }

    .smoke {
        opacity: 0.2;
    }

    .hero-warline {
        font-size: 13px;
        line-height: 1.25;
        width: min(100%, 360px);
    }

    .season-label {
        font-size: 12px;
        max-width: calc(100vw - 28px);
        white-space: normal;
        line-height: 1.16;
        text-align: center;
    }

    .hero-lead {
        font-size: 15px;
        line-height: 1.45;
    }

    .hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .hero-actions .btn {
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .hero-socials {
        gap: 8px;
        margin-top: 14px;
    }

    .social-brand {
        min-height: 38px;
        padding: 0 11px;
        font-size: 11px;
    }

    .social-brand svg {
        width: 18px;
        height: 18px;
    }

    .countdown-panel {
        margin-top: 24px;
        width: min(100%, 390px);
    }

    .countdown-meta {
        padding: 16px 14px;
        text-align: center;
    }

    .countdown-meta strong {
        font-size: 15px;
    }

    .launch-flags em {
        min-height: 24px;
        padding: 0 8px;
        font-size: 9px;
    }

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

    .countdown-grid > div {
        min-height: 74px;
        padding: 10px 6px;
    }

    .countdown-grid strong {
        font-size: 32px;
    }

    .hero-stats,
    .status-strip,
    .feature-grid,
    .zone-grid,
    .worlds-section,
    .story-grid,
    .news-grid {
        grid-template-columns: 1fr;
    }

    .world-card {
        grid-template-columns: 1fr;
        min-height: 250px;
        padding: 26px 22px;
    }

    .world-card img {
        display: none;
    }

    .section-block {
        width: min(100% - 28px, var(--max));
        padding: 72px 0;
    }

    .combat-list article {
        grid-template-columns: 1fr;
    }

    .combat-list span {
        margin-bottom: 12px;
    }

    .final-cta {
        width: min(100% - 28px, var(--max));
        padding: 30px;
    }

    .btn-large {
        width: 100%;
    }

    .announcement-panel,
    .story-section,
    .community-cta,
    .event-card,
    .download-panel,
    .download-sickness-hero,
    .download-sickness-panel,
    .download-sickness-support {
        width: min(100% - 28px, var(--max));
        grid-template-columns: 1fr;
        padding: 26px;
    }

    .story-grid article {
        min-height: 220px;
        padding: 24px;
    }

    .story-grid h3 {
        font-size: 24px;
    }

    .community-cta__links {
        justify-content: stretch;
    }

    .community-cta__links .social-brand {
        width: 100%;
    }

    .download-sickness-main {
        width: 100%;
        padding-top: 194px;
    }

    .download-sickness-hero h1 {
        font-size: 40px;
    }

    .download-sickness-section,
    .download-sickness-info,
    .download-sickness-support {
        width: min(100% - 28px, var(--max));
        margin-left: auto;
        margin-right: auto;
        margin-top: 44px;
    }

    .download-sickness-steps,
    .download-sickness-grid {
        width: min(100% - 28px, var(--max));
        margin-left: auto;
        margin-right: auto;
    }

    .download-sickness-steps article,
    .download-sickness-file {
        padding: 22px;
    }

    .download-sickness-socials .social-brand,
    .download-sickness-hero .btn,
    .donate-hero__coin,
    .donate-submit .btn {
        width: 100%;
    }

    .donate-page {
        width: min(100% - 28px, var(--max));
        padding-top: 194px;
    }

    .donate-panel {
        padding: 22px;
    }

    .donate-steps,
    .donate-fields,
    .payment_select,
    .pay-currency {
        grid-template-columns: 1fr;
    }

    .payment__input {
        flex-direction: column;
        gap: 8px;
    }

    .payment__input input {
        border-right: 1px solid rgba(223, 16, 43, 0.26);
    }

    .payment_bonus_price {
        min-height: 48px;
    }

    .bonus-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

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

    .site-footer nav {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .top-announcement {
        min-height: 58px;
    }

    .top-announcement p {
        font-size: 10px;
    }

    .top-announcement a {
        display: none;
    }

    .top-announcement > span:first-child {
        display: none;
    }

    .site-header {
        top: 58px;
        width: min(100% - 18px, var(--max));
    }

    .brand-mark {
        width: 96px;
    }

    .site-nav a {
        padding-inline: 9px;
    }

    .hero-section {
        padding-top: 170px;
    }

    .countdown-grid strong {
        font-size: 29px;
    }

    .worlds-section,
    .status-strip,
    .announcement-panel,
    .site-footer {
        width: min(100% - 24px, var(--max));
    }
}

.shilen-discord-popup[hidden] {
    display: none;
}

.shilen-discord-popup {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.shilen-discord-popup.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.shilen-discord-popup__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(134, 0, 20, 0.28), transparent 31%),
        rgba(1, 1, 3, 0.82);
    backdrop-filter: blur(9px) saturate(0.72);
}

.shilen-discord-popup__panel {
    position: relative;
    width: min(384px, 100%);
    min-height: 438px;
    padding: 28px 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 0%, rgba(237, 27, 55, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(32, 24, 26, 0.98), rgba(11, 11, 17, 0.98));
    box-shadow:
        0 30px 92px rgba(0, 0, 0, 0.68),
        0 0 34px rgba(237, 27, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
    text-align: center;
    transform: translateY(18px) scale(.96);
    transition: transform .22s ease;
    overflow: hidden;
}

.shilen-discord-popup__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(88, 101, 242, 0.16), transparent 42%);
    pointer-events: none;
}

.shilen-discord-popup.is-visible .shilen-discord-popup__panel {
    transform: translateY(0) scale(1);
}

.shilen-discord-popup__close {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #aeb2c0;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.shilen-discord-popup__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: translateY(-1px);
}

.shilen-discord-popup__logo {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border: 1px solid rgba(237, 27, 55, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237, 27, 55, 0.22), rgba(8, 8, 12, 0.94));
    box-shadow: 0 18px 40px rgba(237, 27, 55, 0.18);
    overflow: hidden;
}

.shilen-discord-popup__logo img {
    width: 94px;
    max-width: none;
    height: auto;
    transform: translateY(1px);
}

.shilen-discord-popup__panel h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #f0f2fb;
    font-family: var(--font-bold), sans-serif;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: 0;
}

.shilen-discord-popup__mark {
    position: relative;
    z-index: 1;
    margin: 17px auto 24px;
    color: #aeb4c4;
    font-size: 23px;
}

.shilen-discord-popup__stats {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 22px;
}

.shilen-discord-popup__stats span {
    display: grid;
    gap: 3px;
    min-width: 92px;
}

.shilen-discord-popup__stats b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #f0c44b;
    font-family: var(--font-bold), sans-serif;
    font-size: 23px;
    line-height: 1;
}

.shilen-discord-popup__stats b strong {
    font: inherit;
    color: inherit;
}

.shilen-discord-popup__stats b i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #1ed760;
    box-shadow: 0 0 14px rgba(30, 215, 96, 0.6);
}

.shilen-discord-popup__stats span + span b i {
    background: #737989;
    box-shadow: none;
}

.shilen-discord-popup__stats small {
    color: #7f8493;
    font-family: var(--font), sans-serif;
    font-size: 12px;
}

.shilen-discord-popup__panel p {
    position: relative;
    z-index: 1;
    max-width: 310px;
    margin: 0 auto;
    color: #b9bdca;
    font-size: 15px;
    line-height: 1.55;
}

.shilen-discord-popup__actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 11px;
    margin-top: 22px;
}

.shilen-discord-popup__actions .shilen-btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ff2145, #c80b27);
    box-shadow: 0 12px 32px rgba(237, 27, 55, 0.32);
    color: #fff;
    font-family: var(--font-bold), sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shilen-discord-popup__actions .shilen-btn:hover {
    background: linear-gradient(180deg, #ff3152, #df0f2e);
    transform: translateY(-1px);
}

.shilen-discord-popup__later {
    justify-self: center;
    color: #666c7b;
    font-family: var(--font-bold), sans-serif;
    font-size: 12px;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s ease;
}

.shilen-discord-popup__later:hover {
    color: #b8bdca;
}