/* ============================================================================
   LIZARD WARS — стили сайта.

   Палитра и шрифт взяты ИЗ ИГРЫ (wars-client/DESIGN_SYSTEM.md), а не придуманы
   заново: сайт и игра должны читаться как одна вещь. Джунгли как подложка,
   кремовые «пергаментные» панели, медные канты, толстые тёмные контуры,
   округлый жирный M PLUS Rounded 1c — та же ДНК, что в интерфейсе игры.

   Двуязычность держится на CSS, а не на JS: обе версии текста лежат в разметке
   (<span lang="ru"> / <span lang="en">), а прячется ненужная — правилом ниже.
   Так страница остаётся читаемой без JS и целиком видна поисковику.
   ========================================================================= */

:root {
    /* Подложка — джунгли ночью: зелёный уведён в тень, но не в серый */
    --jungle-900: #10241a;
    --jungle-800: #16301f;
    --jungle-700: #1d3d28;
    --bark: #24180f;

    --cream: #fff6e3;
    --cream-deep: #f3e3bc;
    --ink: #3a2a20;
    --ink-outline: #2a1a12;

    --gold: #ffc53d;
    --gold-deep: #d9930d;
    --leaf: #6bc94c;
    --leaf-hi: #8fe06f;
    --leaf-deep: #3e8f27;
    --copper: #a8623a;
    --copper-hi: #d08a52;

    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
    --outline: 3px solid var(--ink-outline);

    --page-max: 1180px;
    --font: "M PLUS Rounded 1c", "Trebuchet MS", system-ui, -apple-system, sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--jungle-900);
    color: var(--cream);
    font-family: var(--font);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* ЯЗЫК. Оба текста лежат в разметке, лишний скрыт. */
html[data-lang="ru"] [lang="en"],
html[data-lang="en"] [lang="ru"] { display: none; }

/* height: auto ОБЯЗАТЕЛЕН. В разметке у картинок проставлены width/height —
   они резервируют место и не дают странице дёргаться при загрузке, но это
   ПРЕЗЕНТАЦИОННЫЕ атрибуты: если CSS задаёт только ширину, высота берётся из
   атрибута, и `aspect-ratio` уже ничего не решает — обе стороны заданы. Так
   скриншоты 1560x720 показывались коробкой 560x720, то есть вертикально. */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

a { color: var(--gold); }

h1, h2, h3 {
    font-weight: 800;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 0.4em 0;
}

h2 {
    font-size: clamp(30px, 4.2vw, 44px);
    color: var(--cream);
}

h3 { font-size: 24px; }

p { margin: 0 0 1em 0; }

.wrap {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 22px;
}

.eyebrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

/* Ссылка «к содержимому» для клавиатуры */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--cream);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 0 0 12px 0;
    z-index: 50;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==================== ШАПКА ==================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(12, 26, 18, 0.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 246, 227, 0.12);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
}

.topbar__mark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--cream);
    text-decoration: none;
}

/* Знак — фигура целиком, а не портрет: на 34px ящер с топором читался пятном,
   40 хватает, чтобы различить топор и щит, и шапка (62px) это переносит. */
.topbar__mark img { width: auto; height: 40px; }

.topbar__spacer { flex: 1 1 auto; }

.topbar__nav {
    display: flex;
    gap: 20px;
    font-size: 16px;
}

.topbar__nav a {
    color: var(--cream-deep);
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}

.topbar__nav a:hover { border-bottom-color: var(--gold); }

@media (max-width: 720px) {
    .topbar__nav { display: none; }
}

/* Переключатель языка — две половинки одной капсулы */
.lang {
    display: inline-flex;
    border: 2px solid rgba(255, 246, 227, 0.28);
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
}

.lang button {
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    background: transparent;
    color: var(--cream-deep);
    border: 0;
    cursor: pointer;
}

.lang button[aria-pressed="true"] {
    background: var(--gold);
    color: var(--ink);
}

/* ==================== ГЕРОЙ ==================== */

.hero {
    position: relative;
    padding: 54px 0 66px;
    text-align: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image: url("../img/hero.webp");
    background-size: cover;
    background-position: center 38%;
}

/* Затемнение снизу — под ним лежит текст, и без него кремовый по светлой
   траве не читается (проверено на самой светлой части арта) */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 22%, rgba(16, 36, 26, 0) 40%, rgba(16, 36, 26, 0.72) 100%),
        linear-gradient(to bottom, rgba(16, 36, 26, 0.35), rgba(16, 36, 26, 0.94));
}

.hero__inner { position: relative; }

.hero__logo {
    width: min(620px, 84vw);
    margin: 0 auto 18px;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.5));
}

.hero__tagline {
    font-size: clamp(19px, 2.4vw, 24px);
    max-width: 620px;
    margin: 0 auto 26px;
    color: var(--cream);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.hero__note {
    margin-top: 18px;
    font-size: 16px;
    color: var(--cream-deep);
    opacity: 0.9;
}

/* ==================== КНОПКИ СТОРОВ ==================== */

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

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 246px;
    padding: 12px 22px;
    text-align: left;
    text-decoration: none;
    color: var(--cream);
    background: linear-gradient(180deg, #2f2016, #1d1109);
    border: var(--outline);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 246, 227, 0.14);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.store-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 246, 227, 0.2);
}

.store-btn:active {
    transform: translateY(3px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 246, 227, 0.14);
}

.store-btn__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: var(--gold);
}

.store-btn__text { display: flex; flex-direction: column; line-height: 1.25; }

.store-btn__small {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream-deep);
    opacity: 0.85;
}

.store-btn__big { font-size: 21px; font-weight: 800; }

/* Пока ссылок нет, кнопка приглушена и не притворяется рабочей */
.store-btn[aria-disabled="true"] {
    cursor: default;
    opacity: 0.72;
}

.store-btn[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 246, 227, 0.14);
}

/* Кнопка телеграм-канала.
 *
 * ЗЕЛЁНАЯ, а не коричневая как кнопки магазинов, и это не украшение: до релиза
 * это единственное на странице, что реально работает — магазины стоят
 * заглушками с надписью «скоро». Зелёный здесь тот же, что у активных кнопок в
 * самой игре, так что цвет читается как «сюда можно нажать».
 * Форма, обводка и толстая тень — общие со .store-btn, чтобы кнопки выглядели
 * роднёй, а не деталями из разных наборов. */
.tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 12px 26px;
    font-size: 19px;
    font-weight: 800;
    text-decoration: none;
    color: var(--ink-outline);
    background: linear-gradient(180deg, var(--leaf-hi), var(--leaf-deep));
    border: var(--outline);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.tg-btn:active {
    transform: translateY(3px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35);
}

.tg-btn__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

/* ==================== СЕКЦИИ ==================== */

.section { padding: 72px 0; }

.section--dark { background: var(--jungle-800); }

.section__head {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
}

.section__head p {
    color: var(--cream-deep);
    font-size: 19px;
}

/* ==================== КАРТОЧКИ ВОЗМОЖНОСТЕЙ ==================== */

/* 250, а не 268: полезная ширина страницы 1136, и при 268 четвёртая карточка
   не влезала в ряд (1138) — «Питомник» оставался сиротой на второй строке */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.feature {
    background: linear-gradient(180deg, var(--cream), var(--cream-deep));
    color: var(--ink);
    border: var(--outline);
    border-radius: var(--radius-lg);
    padding: 26px 24px 24px;
    box-shadow: var(--shadow-card);
}

.feature h3 { color: var(--ink); margin-bottom: 8px; }

.feature p { margin: 0; font-size: 17px; }

.feature__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    color: var(--copper);
}

/* ==================== ШАГИ ==================== */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 26px 24px 24px 26px;
    background: rgba(255, 246, 227, 0.06);
    border: 2px solid rgba(255, 246, 227, 0.16);
    border-radius: var(--radius-lg);
}

/* Номера здесь не украшение: шаги идут ПО ПОРЯДКУ, и порядок — часть смысла */
.step::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    background: var(--gold);
    border: var(--outline);
    border-radius: 50%;
}

.step h3 { margin-bottom: 6px; }

.step p { margin: 0; color: var(--cream-deep); font-size: 17px; }

/* ==================== ВОПРОСЫ ==================== */

.faq { max-width: 760px; margin: 0 auto; }

.faq details {
    background: rgba(255, 246, 227, 0.06);
    border: 2px solid rgba(255, 246, 227, 0.16);
    border-radius: var(--radius-md);
    padding: 4px 20px;
    margin-bottom: 12px;
}

.faq summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 19px;
    padding: 14px 0;
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "+";
    float: right;
    color: var(--gold);
    font-size: 24px;
    line-height: 1;
}

.faq details[open] summary::after { content: "–"; }

.faq p { color: var(--cream-deep); font-size: 17px; padding-bottom: 8px; }

/* ==================== ФИНАЛЬНЫЙ ПРИЗЫВ ==================== */

.cta {
    text-align: center;
    padding: 76px 0 84px;
    background:
        linear-gradient(rgba(16, 36, 26, 0.82), rgba(16, 36, 26, 0.94)),
        url("../img/hero.webp") center/cover;
}

/* ==================== ПОДВАЛ ==================== */

.footer {
    background: var(--bark);
    padding: 34px 0;
    font-size: 16px;
    color: var(--cream-deep);
}

.footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    align-items: center;
}

.footer a { color: var(--cream-deep); }

.footer__spacer { flex: 1 1 auto; }

/* ==================== ТЕКСТОВЫЕ СТРАНИЦЫ ==================== */

/* Политика и поддержка: тот же мир, но читать нужно длинный текст —
   поэтому кремовый лист и строка в 65 знаков, а не «джунгли» во весь экран */
.doc {
    max-width: 820px;
    margin: 40px auto 60px;
    background: var(--cream);
    color: var(--ink);
    border: var(--outline);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 5vw, 52px);
    box-shadow: var(--shadow-card);
}

.doc h1 { font-size: clamp(28px, 4vw, 40px); }

.doc h2 {
    font-size: 24px;
    color: var(--ink);
    margin-top: 34px;
}

.doc p, .doc li { font-size: 17px; }

.doc ul { padding-left: 22px; }

.doc li { margin-bottom: 6px; }

.doc__updated {
    font-size: 15px;
    color: #7a6656;
}

/* Незаполненное место в черновике видно СРАЗУ: иначе плейсхолдер уедет в
   продакшен незамеченным */
.todo {
    background: #ffe6a8;
    border-bottom: 2px dashed var(--gold-deep);
    padding: 0 4px;
    font-weight: 700;
}

.doc__back {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--copper);
    font-weight: 700;
    text-decoration: none;
}

.doc__back:hover { text-decoration: underline; }

/* ==================== ДВИЖЕНИЕ ==================== */

/* На телефоне вертикальные отступы секций режем: 72+66 между героем и первой
   секцией давали почти пустой экран прокрутки */
@media (max-width: 720px) {
    .section { padding: 48px 0; }
    .hero { padding-bottom: 42px; }
    .cta { padding: 54px 0 60px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}