@font-face {
    font-family: 'Colus';
    src: url('assets/fonts/Colus-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --black: #050708;
    --ink: #0b0d0e;
    --gold: #d99a24;
    --gold-bright: #ffd56d;
    --green: #31e58d;
    --paper: #eee5d5;
    --hero-cream: #d7bd8e;
    --muted: #b6b0a6;
    --line: rgba(204, 139, 30, .52);
    --display: 'Colus', 'Bodoni MT', 'Book Antiqua', Georgia, 'Times New Roman', serif;
    --heading: Georgia, 'Times New Roman', serif;
    --body: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--paper); background: radial-gradient(ellipse at 50% 12%, rgba(24, 62, 51, .24), transparent 34rem), radial-gradient(ellipse at 50% 88%, rgba(108, 67, 25, .16), transparent 36rem), linear-gradient(180deg, #071011 0%, #040708 54%, #0a0806 100%); font-family: var(--body); }
body, a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.landing-page {
    width: min(100%, 520px);
    margin-inline: auto;
    min-height: 100vh;
    overflow: hidden;
    background: var(--black);
    border: 1px solid rgba(204, 139, 30, .34);
    border-radius: 15px;
}

.section,
.footer { width: min(100%, 520px); margin-inline: auto; }
.section { padding: 38px 16px 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; }
h1 em, h2 em { color: var(--green); font-style: normal; }

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    background: #030506;
}
.hero__background,
.hero__atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__background {
    z-index: -2;
    object-fit: cover;
    object-position: center top;
    filter: saturate(.92) contrast(1.1);
}
.hero__atmosphere {
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(2, 4, 4, .03) 2%, rgba(2, 4, 4, .04) 35%, rgba(3, 5, 5, .44) 58%, rgba(3, 5, 5, .98) 84%, var(--black) 100%),
        radial-gradient(ellipse at 50% 40%, transparent 22%, rgba(0, 0, 0, .52) 100%);
}

.site-header {
    width: min(100%, 520px);
    margin: 0 auto;
    min-height: 104px;
    padding: 18px 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.brand { display: block; line-height: 0; }
.brand img { display: block; width: min(250px, 62vw); height: auto; }
.site-header__actions { position: absolute; z-index: 2; top: 52%; right: 14px; transform: translateY(-50%); }
.language-switcher { display: inline-flex; align-items: center; gap: 4px; color: rgba(238, 229, 213, .55); font: 10px var(--body); letter-spacing: .16em; }
.language-switcher button { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; letter-spacing: inherit; }
.language-switcher button.is-active,
.language-switcher button:hover,
.language-switcher button:focus-visible { color: var(--gold-bright); }

.hero__content { width: min(100%, 490px); margin: auto auto 0; padding: 0 22px clamp(42px, 12svh, 108px); text-align: center; }
.hero h1 {
    margin: 0 auto 26px;
    color: var(--paper);
    font-family: var(--display);
    font-size: clamp(40px, 10.2vw, 64px);
    letter-spacing: -.01em;
    line-height: .92;
    text-transform: uppercase;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .75);
}
.hero h1 span,
.hero h1 em { display: block; }
.hero h1 span {
    color: var(--hero-cream);
    text-shadow: 0 3px 0 rgba(77, 45, 17, .72), 0 0 1px rgba(255, 231, 179, .36), 0 5px 18px rgba(0, 0, 0, .78);
}
.hero h1 em {
    color: #118b4b;
    background: linear-gradient(180deg, #45bd73 0%, #159451 52%, #08723c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(0, 39, 22, .76)) drop-shadow(0 4px 15px rgba(0, 0, 0, .65));
}
.button {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(86%, 360px);
    min-height: 78px;
    margin-inline: auto;
    padding: 15px 22px;
    border: 0;
    border-radius: 0;
    font: clamp(19px, 5.8vw, 29px) var(--display);
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .2s ease, filter .2s ease;
}
.button--primary {
    color: #261702;
    background: transparent url('assets/landing/cta-button-gold-clean.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 7px 0 rgba(73, 39, 5, .85)) drop-shadow(0 0 18px rgba(223, 157, 34, .42));
}
.button--primary span { position: relative; z-index: 1; }
.button--primary:hover { filter: brightness(1.09) drop-shadow(0 8px 0 rgba(73, 39, 5, .78)) drop-shadow(0 0 24px rgba(255, 190, 52, .58)); transform: translateY(-2px); }
.button--primary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.button--primary:active { filter: brightness(.9) drop-shadow(0 3px 0 rgba(73, 39, 5, .9)); transform: translateY(3px) scale(.985); }
.scroll-cue { align-self: center; padding: 0 18px 20px; color: rgba(238, 229, 213, .58); font: 10px var(--body); letter-spacing: .18em; text-transform: uppercase; }
.scroll-cue::after { content: ''; display: inline-block; width: 45px; height: 1px; margin-left: 13px; vertical-align: middle; background: var(--gold); }

.features { position: relative; isolation: isolate; padding-top: 24px; padding-bottom: 44px; background: linear-gradient(180deg, rgba(4, 11, 10, .78), rgba(4, 8, 9, .9)), url('assets/images/bg/loading.webp') center 42% / cover no-repeat; }
.features::before { content: '◆'; display: block; width: min(86%, 390px); height: 1px; margin: 0 auto 18px; color: var(--gold); background: linear-gradient(90deg, transparent 0%, var(--gold) 42%, var(--gold) 58%, transparent 100%); font-size: 7px; line-height: 1px; text-align: center; text-shadow: 0 0 10px rgba(217,154,36,.55); }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 30px; }
.section-heading::before,
.section-heading::after { content: ''; flex: 1 1 58px; max-width: 84px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); box-shadow: 0 0 10px rgba(217,154,36,.48); }
.section-heading::after { background: linear-gradient(90deg, var(--gold), transparent); }
.section-heading h2 { margin: 0; color: var(--gold-bright); font-size: clamp(20px, 5.6vw, 30px); letter-spacing: -.05em; line-height: .92; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.4); white-space: nowrap; }
.section-heading h2 em { color: var(--gold-bright); }
.section-heading h2 span,
.section-heading h2 em { display: block; }

.feature-slider { width: 100%; margin-inline: auto; }
.feature-stage { display: grid; grid-template-columns: 98px minmax(0, 1fr) 98px; grid-template-areas: 'prev active next'; align-items: center; gap: 7px; }
.feature-active { grid-area: active; z-index: 2; min-width: 0; }
.feature-active__art { position: relative; aspect-ratio: .62; overflow: hidden; border: 1px solid rgba(218, 151, 33, .66); border-radius: 14px; background: var(--ink); box-shadow: 0 15px 35px rgba(0,0,0,.48); }
.feature-active__art > img:first-child { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.08); }
.feature-active__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.08) 45%, rgba(0,0,0,.42)); pointer-events: none; }
.feature-active__art[data-feature-kind="loot"] { border-color: rgba(236, 173, 63, .82); box-shadow: 0 0 0 1px rgba(255, 210, 115, .15), 0 15px 35px rgba(0,0,0,.48), 0 0 28px rgba(73, 220, 167, .2); }
.feature-active__art[data-feature-kind="loot"] > img:first-child { filter: brightness(1.04) saturate(1.08) contrast(1.04); }
.feature-active__art[data-feature-kind="loot"]::after { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.04) 55%, rgba(0,0,0,.18)); }
.feature-preview { aspect-ratio: .72; overflow: hidden; border: 1px solid rgba(216, 150, 33, .34); border-radius: 13px; background: var(--ink); opacity: .66; box-shadow: 0 10px 24px rgba(0,0,0,.32); }
.feature-preview img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.75) brightness(.72); }
.feature-preview--prev { grid-area: prev; }
.feature-preview--next { grid-area: next; }
.feature-arrow { position: relative; z-index: 4; width: 42px; height: 58px; padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; font: 50px/.8 Georgia, serif; transition: color .2s ease, transform .2s ease; }
.feature-arrow--prev { grid-area: prev; justify-self: center; }
.feature-arrow--next { grid-area: next; justify-self: center; }
.feature-arrow:hover, .feature-arrow:focus-visible { color: var(--gold-bright); transform: scale(1.08); }
.feature-copy { min-height: 152px; display: flex; flex-direction: column; align-items: center; padding: 20px 12px 0; text-align: center; }
.feature-copy h3 { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 0 10px; color: var(--gold-bright); font-size: 30px; letter-spacing: -.04em; line-height: 1; }
.feature-copy p { max-width: 400px; height: 62px; display: flex; align-items: flex-start; justify-content: center; margin: 0 auto; color: var(--paper); font-size: 14px; line-height: 1.46; }
.feature-dots { display: flex; justify-content: center; gap: 7px; padding-top: 18px; }
.feature-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #3b3d3d; cursor: pointer; }
.feature-dot.is-active { background: var(--green); box-shadow: 0 0 12px rgba(49, 229, 141, .65); }

.platforms { position: relative; isolation: isolate; padding: 34px 32px; background: linear-gradient(180deg, rgba(5,7,8,.92), rgba(5,7,8,.62) 64%, rgba(5,7,8,.38)), url('assets/images/bg/rating.webp') center bottom / cover no-repeat; }
.section-heading--platforms { margin-bottom: 24px; }
.platform-list { display: grid; gap: 7px; }
.platform-link { min-height: 64px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 7px 0 7px 13px; border: 1px solid rgba(199, 135, 27, .6); border-radius: 12px; background: linear-gradient(135deg, rgba(30, 30, 27, .9), rgba(10, 11, 11, .96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 13px rgba(0,0,0,.18); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.platform-link:hover, .platform-link:focus-visible { border-color: var(--gold-bright); background: linear-gradient(135deg, rgba(52, 43, 25, .9), rgba(11, 12, 12, .96)); transform: translateY(-2px); }
.platform-logo { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; }
.platform-logo svg, .platform-logo img { width: 100%; height: 100%; display: block; }
.platform-logo img { object-fit: cover; border-radius: inherit; }
.platform-name { color: var(--paper); font: clamp(17px, 4.6vw, 24px) var(--heading); letter-spacing: -.025em; }
.platform-badge { align-self: center; min-width: 70px; padding: 8px 10px 8px 16px; color: #2a1602; background: linear-gradient(180deg, #ffe08a 0%, #e7a725 54%, #b96e09 100%); box-shadow: inset 0 1px 0 rgba(255,247,184,.78), 0 0 12px rgba(223,157,34,.2); clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%); font-family: "Arial Black", Arial, Helvetica, sans-serif; font-size: 9px; font-weight: 900; line-height: 1; letter-spacing: .01em; text-align: center; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: .15px currentColor; }

.footer { position: relative; isolation: isolate; min-height: 250px; padding: 70px 18px 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; border-top: 1px solid rgba(245,234,212,.13); color: var(--muted); text-align: center; background: linear-gradient(180deg, rgba(5,7,8,.7), rgba(5,7,8,.5)), url('assets/images/bg/game_over.webp') center 38% / cover no-repeat; }
.footer::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(5,7,8,.16), rgba(5,7,8,.32)); }
.footer__logo { width: 220px; height: auto; }
.footer p { max-width: 100%; margin: 0; color: var(--muted); font: 16px var(--heading); text-align: center; }
.footer .language-switcher { color: rgba(238, 229, 213, .52); }
.footer a { color: var(--gold-bright); font: 10px var(--body); letter-spacing: .13em; text-transform: uppercase; }

@media (min-width: 700px) {
    .section, .footer, .site-header { width: min(100%, 640px); }
    .hero { min-height: 100vh; min-height: 100svh; }
    .site-header { padding-top: 24px; }
    .brand img { width: min(320px, 62vw); }
    .site-header__actions { right: 20px; }
    .hero__content { padding-bottom: clamp(54px, 10svh, 96px); }
    .hero h1 { font-size: 64px; letter-spacing: -.02em; }
    .features { padding-top: 32px; padding-bottom: 56px; }
    .platforms { padding-top: 34px; padding-bottom: 34px; }
    .feature-stage { grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 10px; }
    .feature-active__art { aspect-ratio: .54; }
    .feature-arrow { width: 50px; }
    .platform-link { min-height: 76px; grid-template-columns: 52px minmax(0,1fr) auto; }
    .platform-logo { width: 48px; height: 48px; }
    .platform-name { font-size: 24px; }
}

@media (max-width: 360px) {
    .brand img { width: min(210px, 58vw); }
    .site-header__actions { right: 10px; }
    .hero h1 { font-size: clamp(34px, 11vw, 40px); letter-spacing: -.035em; line-height: .9; }
    .button--primary { min-height: 0; aspect-ratio: 1200 / 347; padding: 10px 18px; font-size: clamp(17px, 5.4vw, 20px); }
    .feature-stage { grid-template-columns: 72px minmax(0, 1fr) 72px; }
    .platform-link { gap: 8px; padding-left: 9px; }
    .platform-logo { width: 40px; height: 40px; }
    .platform-name { font-size: 16px; line-height: 1.04; }
    .platform-badge { min-width: 62px; padding-left: 13px; padding-right: 7px; font-size: 8px; }
}

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