/* Скрытое — скрыто всегда: класс с display:flex/block не должен перебивать атрибут hidden (так висели «Need Help?» и «≈ € …») */
[hidden] { display: none !important; }
/* Две темы: тёмная (по умолчанию) и светлая. Все цвета — только через эти переменные. */
:root, [data-theme="dark"] {  /* «Aurora» (владелец 23.10.2026): ночное небо, золото руны, бирюзово-синие кнопки */
  color-scheme: dark;
  --bg: #080C14; --surface: #111725; --band: #0C111B; --line: #1F2736; --line-soft: #182030; --line-strong: #2C3648;
  --text: #F2F5FA; --text-2: #C9D2E0; --muted: #9AA6BC; --chip: #172033;
  --accent: #3F6FEF; --accent-hover: #5281FF; --accent-soft: #18233A; --link: #8DB8FF; --link-2: #B5D0FF;
  --on-accent-soft: #F2F5FA;
  --good: #5EE0A8; --good-bg: #10291F; --warn: #E8C46C; --warn-bg: #2A2414; --warn-line: #4A4020;
  --bad: #FF8A8A; --bad-bg: #351A1E;
  --c-usdt: #6FD3B0; --c-btc: #F2A65A; --c-eth: #A9B4FF; --c-ltc: #C7CCD6;
  --shadow: rgba(0,0,0,.5);
  --g-aion: #B49CFF; --g-classic: #E8B84E; --g-retail: #E58A52;  /* фирменный оттенок игр */
  --gold: #F3D58A;
  --cta: linear-gradient(135deg, #2EE6AA, #4E7BFF); --cta-text: #061018;
  --sky-a: rgba(46,230,170,.42); --sky-b: rgba(90,120,255,.38); --sky-c: rgba(170,90,255,.32); --star: rgba(255,255,255,.9);
  --radius: 12px;
}
[data-theme="light"] {  /* как у FunPay: белый фон, светло-серые блоки, мягкий чёрный текст (владелец 23.10.2026) */
  color-scheme: light;
  --bg: #FFFFFF; --surface: #F7F7F7; --band: #F5F5F5; --line: #E4E4E4; --line-soft: #ECECEC; --line-strong: #CFCFCF;
  --text: #222222; --text-2: #444444; --muted: #6B6B6B; --chip: #EEEEEE;
  --accent: #2F6FE0; --accent-hover: #2862CC; --accent-soft: #E8EFFB; --link: #1F5CC7; --link-2: #174AA3;
  --on-accent-soft: #14171C;
  --good: #187A4B; --good-bg: #E2F4EA; --warn: #855F00; --warn-bg: #FFF4D6; --warn-line: #E6CF8F;
  --bad: #B83232; --bad-bg: #FDE7E7;
  --c-usdt: #12805F; --c-btc: #A9590A; --c-eth: #4253C9; --c-ltc: #4A5160;
  --shadow: rgba(20,23,28,.14);
  --g-aion: #6A4FD8; --g-classic: #A87708; --g-retail: #B8551C;
  --gold: #A87708;
  --cta: linear-gradient(135deg, #12A87E, #3F6FEF); --cta-text: #FFFFFF;
  --sky-a: rgba(46,200,150,.16); --sky-b: rgba(90,120,255,.14); --sky-c: rgba(170,90,255,.10); --star: transparent;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 Inter, system-ui, sans-serif; }
a { color: var(--link); } a:hover { color: var(--link-2); }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; margin: 0 0 12px; letter-spacing: -0.5px; }
h2 { font-size: 22px; margin: 0 0 14px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); } .small { font-size: 14px; } .center { text-align: center; } .strong { font-weight: 600; }
.lead { color: var(--muted); font-size: 18px; margin: 0 0 16px; max-width: 620px; }

/* Шапка: две строки, чтобы ничего не слипалось */
.site-header { border-bottom: 1px solid var(--line-soft); }
.header-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 20px; }
.logo svg { color: var(--link); }
.search { position: relative; flex: 1 1 280px; max-width: 560px; }
.field { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.field { flex-direction: row; } /* общий label — колонкой; у поля поиска значок и ввод в одну строку */
.field input:not([type=radio]):not([type=checkbox]) { flex: 1; min-width: 0; min-height: 44px; padding: 0; background: transparent; border: 0; border-radius: 0; color: var(--text); font: inherit; outline: none; }
.field input:focus { outline: none; }
.field.small input:not([type=radio]):not([type=checkbox]) { min-height: 36px; font-size: 14px; }
.field:focus-within { border-color: var(--accent); }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 52px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px var(--shadow); }
.suggest a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.suggest a:hover, .suggest a.active { background: var(--accent-soft); }
.suggest .hint { display: block; font-size: 13px; color: var(--muted); }
.suggest .kind { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--link-2); white-space: nowrap; }
.suggest .empty { padding: 12px; color: var(--muted); font-size: 14px; }
.header-actions { display: flex; gap: 10px; margin-left: auto; }
.ghost { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.ghost:hover { background: var(--surface); color: var(--text); }
.header-cats { border-top: 1px solid var(--line-soft); }
.cat-wrap { position: relative; }
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.cat { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.cat:hover { background: var(--surface); border-color: var(--line); color: var(--text); }
.cat-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--chip); color: var(--text-2); }
.cat:hover .cat-ic { background: var(--accent); color: #fff; } /* без сдвигов: только цвет */
.cat span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cat b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cat small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-soon .cat-ic { color: var(--muted); }

/* Первый экран */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 56px; padding-bottom: 40px; } /* как в макете G: текст по центру рядом с заказом */
.hero-text { flex: 999 1 480px; min-width: 0; }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--link-2); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.perks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-2); font-size: 15px; }
.perks li { display: flex; align-items: center; gap: 8px; } .perks svg { color: var(--link); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.quick { flex: 0 1 420px; display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.quick h2 { margin: 0; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
input:not([type=radio]):not([type=checkbox]), select { min-height: 48px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 16px; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
select:disabled { opacity: .8; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); }
.total-row b { font-size: 28px; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-hover); color: #fff; }
.btn-lg { padding: 15px; font-size: 16px; width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 14px; }

.status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.status .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }
.status.on .dot { background: var(--good); } .status.off .dot { background: var(--warn); }

.block { padding-top: 40px; padding-bottom: 40px; }
.block.narrow > * { max-width: 720px; } /* узкий текст, но по левому краю, как шапка */
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 12px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs .cur { color: var(--text); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chip { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: 14px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.table-box { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.offers { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.offers th { padding: 12px 18px; text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); }
.offers td { padding: 12px 18px; border-top: 1px solid var(--line); }
.offers .num { text-align: right; } .offers td.num:last-child { padding-top: 8px; padding-bottom: 8px; }
.offers tr.hl td { background: var(--accent-soft); }
.tag { font-size: 11px; color: var(--warn); border: 1px solid var(--warn-line); border-radius: 999px; padding: 1px 6px; font-weight: 500; }

.band { background: var(--band); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.two-col { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 48px; padding-bottom: 48px; }
.two-col > div { flex: 1 1 340px; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--text-2); }
.steps b { color: var(--text); }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 500; } details p { margin: 10px 0 0; color: var(--muted); }

/* Оформление заказа */
.checkout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-top: 32px; padding-bottom: 56px; }
.checkout > form, .checkout > .card:first-child { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.checkout h1 { font-size: 28px; margin: 0; }
.summary { flex: 1 1 300px; }
.summary .item { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.summary dl { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.summary dl div { display: flex; justify-content: space-between; gap: 12px; } .summary dt { color: var(--muted); } .summary dd { margin: 0; text-align: right; }
.summary .sum { font-size: 20px; font-weight: 700; padding-top: 8px; } .summary .sum dt { color: var(--text); }
.ticks { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.ticks li { display: flex; gap: 8px; align-items: center; } .ticks svg { color: var(--good); }
.coins { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.coins legend { font-weight: 600; margin-bottom: 8px; color: var(--text); }
.coin { flex: 1 1 120px; flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; color: var(--text); cursor: pointer; }
.coin:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.coin input { accent-color: var(--accent); }
.check { flex-direction: row; align-items: center; gap: 10px; } .check input { width: 18px; height: 18px; accent-color: var(--accent); }
.error { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); }
.notice { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); }
.track { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.track li { flex: 1 1 130px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.track li.on { background: var(--accent-soft); border-color: var(--accent); color: var(--link-2); font-weight: 600; }

.site-footer { border-top: 1px solid var(--line-soft); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px 48px; padding-top: 40px; padding-bottom: 24px; }
.footer-cols .foot-brand { flex: 2 1 260px; } .footer-cols .foot-brand p { max-width: 320px; }
.footer-cols nav { flex: 1 1 160px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-cols h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.footer-cols nav a { color: var(--text-2); text-decoration: none; } .footer-cols nav a:hover { color: var(--text); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }

/* Карточки игр: своя эмблема, сколько серверов, цена «от» */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } /* карточки растягиваются на всю ширину, без пустого хвоста */
.game { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; }
.game:hover { border-color: var(--line-strong); color: var(--text); }
.game-badge { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 14px; background: var(--chip); color: var(--on-accent-soft); display: flex; align-items: center; justify-content: center; }
.game:hover .game-badge { background: var(--accent); }
.game-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game .from { font-size: 14px; color: var(--text-2); } .game .from b { color: var(--text); }

/* Блок доверия */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 0; }
@media (max-width: 860px) { .trust { grid-template-columns: minmax(0, 1fr); } }
.trust-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.trust-card > svg { color: var(--link); flex: 0 0 auto; margin-top: 2px; }
.trust-card p { margin: 4px 0 0; font-size: 14px; }
.coins-row { display: flex; flex-wrap: wrap; gap: 6px; }
.coin-chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); }
.c-usdt { color: var(--c-usdt); } .c-btc { color: var(--c-btc); } .c-eth { color: var(--c-eth); } .c-ltc { color: var(--c-ltc); }

textarea { padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 16px; resize: vertical; }
textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); }
.prose h2 { margin-top: 28px; }

.side-m { display: none; }
@media (max-width: 640px) {
  .offers { min-width: 0; }
  .board { display: none; } /* на телефоне главное — быстрый заказ, табло его не отодвигает */
  .roles .coin { flex-basis: 100%; } /* варианты «Работа с нами» — списком, без одинокого в строке */
  .offers th, .offers td { padding-left: 12px; padding-right: 12px; }
  .offers .col-side { display: none; }
  .side-m { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
  .header-actions { margin-left: auto; }
  .search { order: 3; flex-basis: 100%; max-width: none; } /* логотип и «Track order» в одну строку, поиск — под ними */
  .cats { grid-template-columns: repeat(6, minmax(150px, 1fr)); overflow-x: auto; }
  .hero { padding-top: 28px; gap: 24px; }
}

/* Выпадающее меню раздела: игра слева, её товары справа */
.mega { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 460px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px var(--shadow); flex-direction: column; gap: 2px; }
.cat-wrap:hover .mega, .cat-wrap:focus-within .mega { display: flex; }
/* Меню не пропадает, пока ведёшь курсор вниз: «мостик» над щелью + закрытие с задержкой 0,3 с */
.mega { display: flex; visibility: hidden; opacity: 0; transition: opacity .15s ease .25s, visibility 0s linear .4s; }
.cat-wrap:hover .mega, .cat-wrap:focus-within .mega { visibility: visible; opacity: 1; transition-delay: 0s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mega-game { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; }
.mega-game:hover { background: var(--accent-soft); }
.mega-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); white-space: nowrap; }
.mega-links { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.mega-links a { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: 14px; white-space: nowrap; }
.mega-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: none), (max-width: 1000px) { .mega { display: none !important; } }

.btn:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.error-page { padding-top: 80px; padding-bottom: 96px; }
.big-search { margin: 8px 0 20px; padding-right: 6px; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.results a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
.results a:hover { border-color: var(--accent); }
.results a > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.results .kind { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--link-2); white-space: nowrap; }
.check a { color: var(--link); }

/* Мелочи: без стрелочек у чисел, без синего крестика в поиске, заметный фокус с клавиатуры */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 8px; }
.warn { color: var(--warn) !important; }

/* Пульсирующие точки: зелёная — мы в сети, красная — нет, синяя — цены живые. Пульс — кольцом, ничего не сдвигает. */
.pulse { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 1.8s ease-out infinite; }
.pulse.green { background: #3DDC84; } .pulse.red { background: #F25F5C; } .pulse.blue { background: var(--link); width: 8px; height: 8px; margin-right: 8px; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; } }
.quick-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.quick-head h2 { margin: 0; }
.live { font-size: 13px; color: var(--muted); white-space: nowrap; }
.flash { color: var(--good) !important; transition: color .2s; }
.game-badge.small { width: 44px; height: 44px; border-radius: 10px; }

/* Табло «лучшие цены сейчас» — слева от быстрого заказа, на тот же посыл: живые цены */
.board { margin-top: 28px; max-width: 560px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 13px; color: var(--text-2); background: var(--band); border-bottom: 1px solid var(--line); }
.board-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text); text-decoration: none; }
.board-row + .board-row { border-top: 1px solid var(--line-soft); }
.board-row:hover { background: var(--surface); color: var(--text); }
.board-game { width: 32px; height: 32px; border-radius: 8px; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--text-2); }
.board-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.board-name b { font-size: 15px; } .board-name .muted { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-price { white-space: nowrap; font-variant-numeric: tabular-nums; } .board-price b { font-size: 16px; } .board-price .muted { font-size: 13px; }

/* Новости рынка */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.news-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; }
.news-card:hover { border-color: var(--line-strong); color: var(--text); }
.news-card > span[class^="tag-"] { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }  /* метка новости — таблеткой, даже когда сверху картинка */
.tag-down { background: var(--good-bg); color: var(--good); } .tag-up { background: var(--bad-bg); color: var(--bad); }
.tag-new, .tag-today { background: var(--accent-soft); color: var(--link-2); }

/* Страница сервера */
.server-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "info buy" "others buy"; column-gap: 48px; align-items: start; }
.server-info { grid-area: info; min-width: 0; } .server-others { grid-area: others; min-width: 0; } .server-buy { grid-area: buy; }
@media (max-width: 900px) { .server-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "buy" "others"; row-gap: 28px; } }
.server-info h1 { font-size: clamp(28px, 4vw, 40px); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 28px; max-width: 640px; }
.facts div { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.facts dt { font-size: 13px; color: var(--muted); } .facts dd { margin: 4px 0 0; font-size: 16px; } .facts dd b { font-size: 20px; }
.others { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.others a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.others a:hover { border-color: var(--accent); color: var(--text); }
.others a > span:first-child { display: flex; flex-direction: column; }
.row-link { color: var(--text); text-decoration: none; } .row-link:hover { color: var(--link); text-decoration: underline; }

.icon-btn { background: transparent; border: 0; cursor: pointer; padding: 10px; }

/* Список игр по нажатию на поиск (как на FunPay — просто: игра и её разделы) */
.browse-head { padding: 8px 12px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.browse-game { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; border-radius: 10px; }
.browse-game:hover { background: var(--accent-soft); }
.browse-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); }
.browse-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.suggest .browse-links a { display: inline-block; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
.suggest .browse-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.browse-soon { padding: 8px 12px 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-soft); margin-top: 4px; }

/* Выбор игры кнопками в быстром заказе */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.game-tabs { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.game-tab { cursor: pointer; }
.game-tab input { position: absolute; opacity: 0; pointer-events: none; }
.game-tab span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; color: var(--text-2); font-weight: 600; font-size: 14px; text-align: center; }
.game-tab small { font-weight: 400; font-size: 12px; color: var(--muted); }
.game-tab span { white-space: nowrap; } @media (max-width: 400px) { .game-tab span { font-size: 13px; padding: 10px 2px; } }
.game-tab input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.game-tab input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

/* Нижнее меню на телефоне — под большой палец */
.tabbar { display: none; }
@media (max-width: 640px) {
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
  .tabbar [aria-current="page"] { color: var(--link); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .hide-phone { display: none; }
}
.checkout .card > p { margin: 0; } /* ровные отступы внутри карточек заказа — их задаёт gap */

/* Опыт команды — первая карточка доверия */
.trust-main { align-items: center; grid-column: 1 / -1; gap: 20px; padding: 20px 24px; }
.trust-main p { max-width: 560px; }
.trust-num { font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Баг 360px: выпадающий список растягивался по самому длинному серверу и выдавливал страницу вбок */
select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.quick, .card { min-width: 0; }

/* ===== Выбор сервера с поиском ===== */
.picker-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.picker-btn:hover { border-color: var(--line-strong); }
.picker-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-btn svg { color: var(--muted); flex: 0 0 auto; }
.picker-native { display: none; }
.sheet { width: min(520px, calc(100vw - 32px)); max-height: min(640px, 86vh); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px var(--shadow); }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .18s ease-out; }
.sheet::backdrop { background: rgba(5, 7, 10, .55); backdrop-filter: blur(2px); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.sheet .field { margin: 6px 16px 0; }
.sheet-list { margin-top: 10px; }
.sheet-list { overflow-y: auto; padding: 0 8px 12px; overscroll-behavior: contain; }
.sheet-group { position: sticky; top: 0; z-index: 1; padding: 8px 10px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); background: var(--surface); box-shadow: 0 -12px 0 var(--surface); } /* закрываем и щель над заголовком — строки под ним не просвечивают */
.sheet-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sheet-item:hover, .sheet-item:focus-visible { background: var(--accent-soft); }
.sheet-item.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sheet-price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-price small { font-weight: 400; font-size: 12px; color: var(--muted); }
.sheet-empty { padding: 16px; color: var(--muted); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .sheet { width: 100vw; max-width: 100vw; height: 90vh; height: 90dvh; max-height: none; margin: auto 0 0; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ===== Таблица: сортировка и фильтр ===== */
.sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.sort::after { content: " ↕"; opacity: .45; }
th[aria-sort="ascending"] .sort::after { content: " ↑"; opacity: 1; }
th[aria-sort="descending"] .sort::after { content: " ↓"; opacity: 1; }
button.chip { background: none; font: inherit; cursor: pointer; }
.chip.on, .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ===== Шапка «прилипает» с размытием; плавные переходы между страницами ===== */
.header-top-wrap { position: sticky; top: 0; z-index: 35; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line-soft); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .sheet[open] { animation: none; } }

/* ===== Страница заказа ===== */
.copy-row { align-items: center; justify-content: space-between; }

/* ===== Телефон: компактные разделы, короткий подвал, кнопка оплаты всегда видна ===== */
@media (max-width: 640px) {
  .cats { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-height: 54px; align-items: center; }
  .header-cats { position: relative; }
  .header-cats::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg)); } /* край строки — затемнением сверху, а не маской: маску iPhone рисует пустой */
  .cats::-webkit-scrollbar { display: none; }
  .cat-wrap { flex: 0 0 auto; }
  .cat { padding: 6px 12px 6px 6px; gap: 8px; border: 1px solid var(--line); border-radius: 999px; }
  .cat .cat-ic { width: 28px; height: 28px; border-radius: 50%; }
  .cat small { display: none; }
  .cat b { font-size: 14px; }
  .footer-cols { gap: 20px 16px; padding-top: 28px; }
  .footer-cols .foot-brand { flex-basis: 100%; }
  .footer-cols nav { flex: 1 1 40%; gap: 8px; }
  .checkout form[data-checkout] > .btn-lg { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 8px 24px var(--shadow); }
}
@media (max-width: 640px) { .hero .lead { display: none; } .hero h1 { margin-bottom: 14px; } } /* на телефоне быстрый заказ — ближе к верху */

/* ===== Язык и валюта ===== */
.header-actions { align-items: center; }
.locale { position: relative; }
.locale summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.locale summary::-webkit-details-marker { display: none; }
.locale summary:hover, .locale[open] summary { border-color: var(--line-strong); color: var(--text); }
.locale .dot-sep { color: var(--muted); font-weight: 400; }
.locale-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 240px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px var(--shadow); animation: sheet-in .15s ease-out; }
.locale-title { padding: 8px 10px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.locale-opt { display: flex; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.locale-opt:hover:not(:disabled) { background: var(--accent-soft); }
.locale-opt.on { background: var(--accent-soft); color: var(--link-2); font-weight: 600; }
.locale-opt.on::after { content: "✓"; }
.locale-opt:disabled { color: var(--muted); cursor: default; }
.locale-opt small { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.locale-note { margin: 6px 10px 4px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.fx-note { font-size: 13px; }

/* ===== Тумблер темы: солнце · луна, кружок плавно переезжает ===== */
.theme-switch { padding: 6px; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.ts-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 58px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); color: var(--muted); }
.ts-track svg { position: relative; z-index: 1; transition: color .25s; }
.ts-knob { position: absolute; z-index: 1; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 6px var(--shadow); transform: translateX(28px); transition: transform .25s cubic-bezier(.3,.7,.4,1); }
[data-theme="light"] .ts-knob { transform: none; }  /* кружок — под активным значком: тёмная = луна справа, светлая = солнце слева */
.ts-track svg { z-index: 2; }
[data-theme="dark"] .ts-moon, [data-theme="light"] .ts-sun { color: #fff; }
.theme-switch:hover .ts-track { border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .ts-knob { transition: none; } }
@media (max-width: 640px) { .locale summary { padding: 6px 10px; } .locale-menu { right: -50px; } }
.locale { background: none; border: 0; padding: 0; margin: 0; } /* не наследуем вид блоков FAQ (тот же тег details) */

/* iPhone увеличивает страницу, если шрифт поля меньше 16px. Все поля — 16px: страница стоит спокойно, как на FunPay */
input:not([type=radio]):not([type=checkbox]), select, textarea, .field input:not([type=radio]):not([type=checkbox]),
.field.small input:not([type=radio]):not([type=checkbox]) { font-size: 16px; }
.kk-hint { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--text-2); font-size: 13px; white-space: nowrap; }
.offers th { white-space: nowrap; }

/* На телефоне шапка не «прилипает»: она высокая (логотип + поиск), а iPhone двигает прилипшие блоки рывками.
   Поиск и так всегда под рукой — кнопка «Search» в нижнем меню. */
@media (max-width: 640px) { .header-top-wrap { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); } }
@media (max-width: 640px) {
  .offers th, .offers td { padding-left: 8px; padding-right: 8px; }
  .offers th:first-child, .offers td:first-child { padding-left: 12px; }
  .offers td.num:last-child { padding-right: 10px; }
  .offers .btn-sm { padding: 8px 12px; }
  .sort::after { content: ""; } th[aria-sort] .sort::after { content: " ↑"; } th[aria-sort="descending"] .sort::after { content: " ↓"; }
}
@media (max-width: 380px) { .offers { font-size: 14px; } .offers .btn-sm { padding: 7px 10px; } }

/* ===== Быстрый заказ: «живые» значки и заметный запас ===== */
.quick-title { margin: 0; }
.quick-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.badge { display: inline-flex; align-items: center; gap: 0; padding: 5px 10px 5px 9px; border-radius: 999px; font-size: 13px; color: var(--text-2); background: var(--chip); border: 1px solid var(--line); white-space: nowrap; }
.badge .pulse { width: 8px; height: 8px; margin-right: 7px; }
.badge-live { color: var(--text); border-color: color-mix(in srgb, #3DDC84 45%, var(--line)); background: color-mix(in srgb, #3DDC84 10%, var(--chip)); }
.badge-live b { letter-spacing: .6px; color: #3DDC84; }
[data-theme="light"] .badge-live b { color: #158a4f; }
.badge-on { color: var(--text); }
.badge-off { color: var(--muted); }
.stock-line { display: flex; align-items: center; gap: 8px; margin-top: -6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #3DDC84 8%, var(--bg)); border: 1px solid color-mix(in srgb, #3DDC84 30%, var(--line)); font-size: 15px; color: var(--text-2); }
.stock-line b { color: var(--text); font-size: 16px; }
.stock-line .muted { margin-left: auto; }
.stock-ic { display: inline-flex; color: #3DDC84; }
[data-theme="light"] .stock-ic { color: #158a4f; }
.stock-line.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.stock-line.warn b, .stock-line.warn .stock-ic { color: var(--warn); }

/* ===== Статус «в сети» — точка на логотипе, как на аватарке в мессенджере ===== */
.brand { position: relative; display: flex; align-items: center; }
.presence { position: absolute; left: 12px; top: 16px; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
.presence i { position: absolute; inset: 3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.presence.on i { background: #3DDC84; }
.presence.off i { background: #F25F5C; }
.presence.on i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DDC84; animation: pulse 1.8s ease-out infinite; }
.presence::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: -12px; z-index: 60; width: max-content; max-width: 240px; padding: 8px 12px; border-radius: 10px; background: var(--text); color: var(--bg); font: 500 13px/1.4 Inter, system-ui, sans-serif; text-align: left; white-space: normal; box-shadow: 0 8px 24px var(--shadow); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.presence:hover::after, .presence:focus-visible::after, .presence.show::after { opacity: 1; transform: none; }
.header-top-wrap .presence i { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 92%, transparent); }
@media (prefers-reduced-motion: reduce) { .presence.on i::after { animation: none; } }

/* ===== Плавность: смена игры и значений без «скачков» ===== */
.game-tab span { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.swap { animation: swap-in .28s ease-out; }
@keyframes swap-in { from { opacity: .35; } to { opacity: 1; } }  /* только проявление, без сдвига (владелец: «скачок») */
.stock-line { transition: background-color .25s ease, border-color .25s ease; }
@media (prefers-reduced-motion: reduce) { .swap { animation: none; } .game-tab span, .stock-line { transition: none; } }

/* ===== Оформление: ошибки у поля, монеты со значками, кнопка с загрузкой ===== */
.field-error { color: var(--bad); font-size: 13px; min-height: 0; }
.field-error:empty { display: none; }
[data-field].invalid input { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
[data-field].invalid .hint { display: none; }
.agree-error { margin-top: -8px; }
.coin { gap: 10px; padding: 10px 12px; }
.coin input { position: absolute; opacity: 0; pointer-events: none; }
.coin-ic { flex: 0 0 auto; border-radius: 50%; }
.coin-name { display: flex; flex-direction: column; line-height: 1.2; }
.coin-name small { color: var(--muted); font-size: 12px; }
.coin:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.btn .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.loading .spinner { display: inline-block; }
.btn.loading .btn-text { opacity: .75; }
.btn.loading { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .spinner { animation-duration: 1.6s; } }

/* ===== Лента статусов заказа ===== */
.stepper { list-style: none; margin: 4px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stepper li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.now::before { background: var(--accent); }
.step-dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; transition: all .3s ease; }
.stepper li.done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper li.now .step-dot { border-color: var(--accent); color: var(--link); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: ring 1.8s ease-out infinite; }
.step-label { font-size: 13px; color: var(--muted); }
.stepper li.done .step-label, .stepper li.now .step-label { color: var(--text); font-weight: 600; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.done-mark { display: flex; justify-content: center; }
.done-mark svg { width: 64px; height: 64px; }
.done-mark circle { fill: none; stroke: #3DDC84; stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .6s ease-out forwards; }
.done-mark path { fill: none; stroke: #3DDC84; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .35s .5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .stepper li.now .step-dot { animation: none; } .done-mark circle, .done-mark path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 400px) { .step-label { font-size: 12px; } .step-dot { width: 28px; height: 28px; } .stepper li::before { top: 13px; } }

/* ===== Всплывающие сообщения и отклик на нажатие ===== */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 500;
  box-shadow: 0 10px 30px var(--shadow); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.btn:active { filter: brightness(.9); }
.game-tab:active span, .coin:active, .chip:active, .cat:active, .sheet-item:active, .board-row:active, .tabbar a:active, .tabbar button:active { background-color: var(--accent-soft); }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }
@media (max-width: 640px) { .coins:not(.roles) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .coins:not(.roles) legend { grid-column: 1 / -1; } .coin { padding: 10px 8px; gap: 8px; } } /* 5 монет: 3 + 2, без одинокой в строке */
.tag { white-space: nowrap; }
@media (max-width: 640px) { td.num .tag { display: block; width: max-content; margin: 4px 0 0 auto; } }
/* Выбор сервера: регионы вкладками (без «липких» заголовков — на iPhone под ними просвечивали строки) */
.sheet-regions { display: flex; gap: 8px; margin: 12px 16px 0; }
.sheet-regions .chip { padding: 6px 16px; }
.sheet-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-name small { font-size: 12px; color: var(--muted); }
/* Фракция — кнопками под сервером */
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.seg-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.seg-btn small { font-weight: 500; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg-btn:hover:not(:disabled) { border-color: var(--line-strong); }
.seg-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.seg-btn.on small { color: var(--text-2); }
.seg-btn:disabled { opacity: .45; cursor: default; }
.seg-btn:active:not(:disabled) { background-color: var(--accent-soft); }
.seg[hidden], .sheet-regions[hidden] { display: none; }
/* Узкий телефон: «600 000» в запасе — мельче, чтобы «Buy» не уезжала за край; «auto-updated» — лишнее (есть LIVE) */
@media (max-width: 400px) {
  .offers td.stock { font-size: 13px; white-space: nowrap; }
  .offers th, .offers td { padding-left: 6px; padding-right: 6px; }
  .offers td.strong { overflow-wrap: anywhere; }
  .stock-line .muted { display: none; }
}
/* «Buy again» в быстром заказе: прошлый заказ одной кнопкой */
.again { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.again[hidden] { display: none; }
.again:hover { border-color: var(--accent); }
.again:active { background-color: var(--accent-soft); }
.again-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--link-2); flex: 0 0 auto; }
.again-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.again-text small { font-size: 12px; color: var(--muted); }
.again-text b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.again-go { margin-left: auto; color: var(--link-2); flex: 0 0 auto; }
/* Мои заказы на этом устройстве (/track) */
.recent { margin: 20px 0 24px; }
.recent h2 { font-size: 16px; margin: 0 0 10px; color: var(--text-2); font-weight: 600; }
.recent-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.recent-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.recent-item + .recent-item { border-top: 1px solid var(--line); }
.recent-item:hover, .recent-item:active { background: var(--accent-soft); }
.recent-item > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-item small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-status { flex: 0 0 auto; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--chip); color: var(--text-2); }
.recent-status.s-delivered { background: var(--good-bg); color: var(--good); }
.recent-status.s-paid, .recent-status.s-delivering { background: var(--accent-soft); color: var(--link-2); }
/* «Призраки» строк, пока ждём ответ (медленный интернет) */
.skel-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.skel-row i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 0%, var(--line) 50%, var(--chip) 100%); background-size: 200% 100%; animation: skel 1.1s ease-in-out infinite; }
.skel-row i:first-child { width: 55%; height: 14px; } .skel-row i:last-child { width: 35%; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-row i { animation: none; } }
.again-go { display: flex; align-items: center; gap: 6px; }
.again-go b { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.recent-item b { color: var(--text); }
.again-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
/* Главная: «Top servers» — вкладки игр (листаются вбок) */
.top-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 2px; }
.top-tabs::-webkit-scrollbar { display: none; }
.top-tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.top-tab:hover { border-color: var(--line-strong); }
.top-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.top-tab:active { background-color: var(--accent-soft); }
.top-tab.on:active { background-color: var(--accent-hover); }
.top-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; }
@media (max-width: 640px) { .top-tabs { margin-right: -10px; padding-right: 10px; } }  /* = боковой отступ .wrap на телефоне */
/* Фирменный оттенок игры: тонкий отлив на карточке и цвет значка — везде, где есть игра */
.g-aion-2-kinah { --g: var(--g-aion); } .g-wow-gold { --g: var(--g-classic); } .g-wow-retail-gold { --g: var(--g-retail); }
.hue .glyph { color: var(--g, currentColor); }
.game.hue { background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--g) 14%, transparent), transparent 55%), var(--surface);
  border-color: color-mix(in srgb, var(--g) 22%, var(--line)); }
.game.hue:hover { border-color: color-mix(in srgb, var(--g) 55%, var(--line)); }
.game.hue .game-badge { background: color-mix(in srgb, var(--g) 14%, var(--chip)); }
.game.hue:hover .game-badge { background: color-mix(in srgb, var(--g) 24%, var(--chip)); }
.top-tab.on .glyph, .game:hover .glyph { color: var(--g); }
.top-tab.on .glyph { color: #fff; }
/* Мягкое появление при прокрутке (app.js добавляет .reveal только блокам ниже экрана) */
.reveal { opacity: 0; transition: opacity .6s ease; }
.reveal.in { opacity: 1; }
/* Заказ «как чек»: квитанция с номером, датой и суммой, зубчатый край снизу */
.receipt { position: relative; padding-bottom: 30px; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
                radial-gradient(circle 6px at 50% 100%, transparent 97%, #000) bottom / 14px 8px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat,
                radial-gradient(circle 6px at 50% 100%, transparent 97%, #000) bottom / 14px 8px repeat-x; }
.receipt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.receipt-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--text); }
.receipt-brand svg { color: var(--link); }
.receipt-no { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.receipt-no small { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.receipt-no b { font-size: 17px; font-variant-numeric: tabular-nums; }
.receipt-date { margin: 4px 0 14px; }
.receipt-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px dashed var(--line-strong); }
.receipt .receipt-item + dl { border-top: 1px dashed var(--line-strong); }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-size: 18px; font-weight: 600; }
.receipt-total b { font-size: 26px; font-variant-numeric: tabular-nums; }
.receipt-foot { margin: 12px 0 0; text-align: center; }
/* Цены и суммы — Space Grotesk: ровные «игровые» цифры; остальной текст — Inter */
:root { --font-num: "Space Grotesk", Inter, system-ui, sans-serif; }
[data-quick-total], .total-row b, .board-price b, .game .from b, .offers td.num.strong, .sheet-price, .seg-btn small,
.receipt-total b, .trust-num, .summary .sum dd, .again-go b, [data-one-total], .btn [data-total] {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
/* Коробочка «In stock» — кнопка: по нажатию объясняет цифры */
button.stock-line { width: 100%; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
button.stock-line:focus:not(:focus-visible) { outline: none; }  /* без синей рамки после нажатия */
/* Игры в быстром заказе — листаются пальцем вбок, когда их больше трёх */
.game-tabs { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(82px, 1fr);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }  /* без «магнита» к кнопке — владелец 24.10.2026: на телефоне «доталкивание» мешало */
.game-tabs::-webkit-scrollbar { display: none; }
.game-tab { position: relative; }  /* скрытая радиокнопка остаётся внутри полосы, не растягивает страницу */
.game-tabs { min-width: 0; max-width: 100%; }  /* fieldset по умолчанию растягивается под содержимое — тогда не листается */
/* Разделы: подсветка при наведении — плавно; пока открыто меню игр, «Currency» остаётся подсвеченным */
.cat { transition: background-color .25s ease, border-color .25s ease; }
.cat-ic { transition: background-color .25s ease, color .25s ease; }
.cat-wrap:hover > .cat { background: var(--surface); border-color: var(--line); }
.cat-wrap:hover > .cat .cat-ic { background: var(--accent); color: #fff; }
/* Мягкие тени у выпадающих меню */
.mega, .locale-menu { box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 45%, transparent); }
/* «In stock»: по наведению/нажатию текст в коробочке плавно сменяется пояснением (1kk = 1 000 000 …) */
.stock-text { display: grid; flex: 1 1 auto; min-width: 0; }
.stock-main, .stock-alt { grid-area: 1 / 1; transition: opacity .25s ease; }
.stock-alt { opacity: 0; align-self: center; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-line.alt .stock-main { opacity: 0; }
.stock-line.alt .stock-alt { opacity: 1; }
/* Компьютер: верхняя строка (логотип, поиск) стоит наверху всю прокрутку. Раньше она «прилипала» только в
   пределах шапки — проезжала вниз на высоту строки разделов и уезжала (владелец 23.10.2026). */
@media (min-width: 641px) {
  .site-header { display: contents; }
  .header-cats { border-bottom: 1px solid var(--line-soft); }
}

/* ================= «Aurora» (владелец 23.10.2026: «это шедевр») ================= */
body { position: relative; }
.logo-mark { color: var(--gold) !important; }
.logo { font-weight: 800; letter-spacing: -0.4px; }
/* Небо: северное сияние + звёзды за шапкой и первым экраном; плавно уходит в фон */
.sky { position: absolute; left: 0; right: 0; top: 0; height: 460px; overflow: hidden; pointer-events: none; z-index: 0; }
.sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--bg)); }
.sky .aurora { position: absolute; left: -15%; right: -15%; top: -10%; height: 90%; filter: blur(22px);
  background: radial-gradient(35% 50% at 15% 25%, var(--sky-a), transparent 70%), radial-gradient(32% 45% at 55% 8%, var(--sky-c), transparent 70%),
              radial-gradient(35% 50% at 85% 28%, var(--sky-b), transparent 70%);
  animation: aurora 16s ease-in-out infinite; }
.sky .stars { position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 8% 20%, var(--star), transparent), radial-gradient(1px 1px at 22% 9%, var(--star), transparent),
    radial-gradient(1px 1px at 37% 31%, var(--star), transparent), radial-gradient(1px 1px at 51% 14%, var(--star), transparent),
    radial-gradient(1px 1px at 66% 36%, var(--star), transparent), radial-gradient(1px 1px at 78% 11%, var(--star), transparent),
    radial-gradient(1px 1px at 91% 27%, var(--star), transparent), radial-gradient(1px 1px at 14% 44%, var(--star), transparent); opacity: .8; }
@keyframes aurora { 0%, 100% { transform: translateX(-4%) scaleY(1); } 50% { transform: translateX(4%) scaleY(1.12); } }
.site-header, .header-top-wrap, .ticker, main, .site-footer { position: relative; }
.header-cats { position: relative; z-index: 5; }
main, .ticker, .site-footer { z-index: 1; }
.header-top-wrap { background: color-mix(in srgb, var(--bg) 55%, transparent); }
@media (max-width: 640px) { .header-top-wrap { background: transparent; } .sky { height: 380px; } }

/* Бегущая строка цен ▲▼ (настоящее изменение нашей лучшей цены к вчера) */
.ticker { overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg) 45%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 45s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; gap: 30px; padding: 8px 30px 8px 0; }
.ticker-set:first-child { padding-left: 20px; }
.tick { white-space: nowrap; font-size: 13px; color: var(--muted); text-decoration: none; letter-spacing: .3px; }
.tick:hover { color: var(--text-2); }
.tick b { color: var(--text); font-family: var(--font-num); font-weight: 600; letter-spacing: 0; }
.chg { font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--good); } .chg.down { color: var(--bad); } .chg.flat { color: var(--muted); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Первый экран: золотая руна-монета, заголовок, цифры, «мы в сети» */
.hero { position: relative; z-index: 1; padding-top: 52px; }
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.hero-head { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 58px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.02; margin: 0 0 14px; }
.hero .lead { margin: 0; color: var(--text-2); }
.lead-short { display: none; }
.coin-big { position: relative; overflow: hidden; flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: #5A3A08;
  background: radial-gradient(circle at 35% 30%, #FFE7A8, #D9A440 55%, #8A5E14 100%);
  box-shadow: 0 0 50px rgba(243,213,138,.38), inset 0 -5px 12px rgba(0,0,0,.35); }
.coin-big svg { width: 54%; height: 54%; }
.coin-big .glint { position: absolute; top: -20%; left: 0; width: 22%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: glint 5s ease-in-out infinite; }
@keyframes glint { 0%, 70% { transform: translateX(-160%) rotate(20deg); } 100% { transform: translateX(520%) rotate(20deg); } }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.hero-stats span { display: flex; flex-direction: column; gap: 2px; }
.hero-stats span + span { padding-left: 28px; border-left: 1px solid var(--line); }
.hero-stats b { font-family: var(--font-num); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.1; }
.hero-stats b.gold { color: var(--gold); }
.hero-stats small { font-size: 13px; color: var(--muted); }
.online-card { display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--good) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 22%, transparent);
  transition: background-color .25s ease, box-shadow .25s ease; }
.online-card:hover { color: var(--text); background: color-mix(in srgb, var(--good) 11%, transparent); }
.online-card.off { background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.online-ava { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--gold); }
.online-ava i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #2EE6AA; box-shadow: 0 0 0 2px var(--bg); animation: ping 2s infinite; }
.online-card.off .online-ava i { background: #F06A6A; animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 2px rgba(46,230,170,.55); } 70% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 9px rgba(46,230,170,0); } 100% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 2px rgba(46,230,170,0); } }
.online-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.online-text b { font-size: 15px; }
.online-text small { font-size: 13px; color: var(--muted); }
.online-card > svg { color: var(--muted); flex: 0 0 auto; }

/* Быстрый заказ — «стекло» над небом; главные кнопки — бирюзово-синий градиент */
.quick { background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 22px; box-shadow: 0 30px 60px -34px var(--shadow); }
.btn-lg:not(:disabled), .btn-cta { background: var(--cta); color: var(--cta-text); }
.btn-lg:not(:disabled):hover, .btn-cta:hover { background: var(--cta); color: var(--cta-text); filter: brightness(1.08); }
.btn-lg .spinner { border-color: color-mix(in srgb, var(--cta-text) 35%, transparent); border-top-color: var(--cta-text); }

/* Лента «Just delivered» */
.feed-box { height: 52px; overflow: hidden; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); }
.feed-track { display: flex; flex-direction: column; }
.feed-row { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; font-size: 15px; }
.feed-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.feed-what b { color: var(--text); }
.feed-ago { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--good); white-space: nowrap; }

/* Плитки игр: мини-график лучшей цены за 7 дней */
.game { padding: 18px; border-radius: 18px; }
.spark { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.spark svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke: var(--muted); }
.spark.up svg path { stroke: var(--good); } .spark.down svg path { stroke: var(--bad); }
.spark small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.spark.up small { color: var(--good); } .spark.down small { color: var(--bad); }
.offers .chg { margin-right: 4px; font-weight: 500; }

/* Без повторов: на компьютере «7,000+» уже в первом экране — блок доверия его не повторяет */
@media (min-width: 641px) { .trust-main { display: none; } }

/* FAQ: «+» вместо стандартных треугольников, без коробок */
details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 2px; margin: 0; }
summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--muted); transition: transform .2s ease; }
details[open] summary::after { transform: rotate(45deg); }
.locale summary::after { content: none; }

/* Телефон: компактный первый экран — монета сбоку, быстрый заказ виден сразу */
@media (max-width: 640px) {
  .hero { padding-top: 22px; gap: 18px; }
  .hero-text { gap: 14px; }
  .hero-head { flex-direction: row; align-items: center; gap: 14px; }
  .coin-big { width: 64px; height: 64px; }
  .hero h1 { font-size: 26px; letter-spacing: -0.8px; line-height: 1.08; margin-bottom: 6px; }
  .lead-long, .hero-stats { display: none; }
  .lead-short { display: block; font-size: 14px; color: var(--text-2); }
  .online-card { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sky .aurora, .coin-big .glint, .online-ava i { animation: none; }
  .ticker-track { animation: none; } .ticker { overflow-x: auto; } .ticker-set[aria-hidden] { display: none; }
}
/* Небо на компьютере — на весь первый экран; горы внизу, как в макете */
.sky .mountains { position: absolute; left: 0; bottom: 18%; width: 100%; height: 150px; }
.sky .m1 { fill: color-mix(in srgb, var(--bg) 70%, var(--sky-b)); opacity: .55; }
.sky .m2 { fill: color-mix(in srgb, var(--bg) 85%, var(--sky-a)); opacity: .6; }
@media (min-width: 641px) { .sky { height: 860px; } .sky .aurora { height: 70%; } .sky::after { background: linear-gradient(180deg, transparent 55%, var(--bg) 92%); } }
@media (max-width: 640px) { .sky .mountains { height: 90px; bottom: 16%; } }
@media (min-width: 641px) { .sky .aurora { top: 6%; height: 62%; } }
.trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .trust { grid-template-columns: minmax(0, 1fr); } }
.coins-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coins-row .coin-ic { width: 26px; height: 26px; }

/* Владелец 23.10.2026 (телефон): «перед покупкой лишняя информация с монеткой», «разделы потерялись» */
/* Статус «в сети» — значком в быстром заказе (только на телефоне; на компьютере есть карточка в первом экране) */
.badge-online { display: none; align-items: center; gap: 6px; }
.badge-online i { width: 7px; height: 7px; border-radius: 50%; background: #2EE6AA; box-shadow: 0 0 6px #2EE6AA; }
.badge-online.off i { background: #F06A6A; box-shadow: none; }
@media (max-width: 640px) {
  .coin-big, .online-card, .lead-short { display: none; }
  .hero { padding-top: 16px; gap: 14px; }
  .hero h1 { font-size: 21px; letter-spacing: -0.5px; margin: 0; }
  .hero h1 br { display: none; }
  .badge-online { display: inline-flex; }
}
/* Разделы: работающий (Currency) — выделен, «скоро» — приглушены с меткой */
.header-cats { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.cat:not(.cat-soon) { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cat:not(.cat-soon) .cat-ic { background: var(--cta); color: var(--cta-text); }
.cat:not(.cat-soon) b { color: var(--text); }
.cat-soon { opacity: .62; }
.cat-soon:hover, .cat-wrap:hover > .cat-soon { opacity: .9; }
.soon-tag { display: none; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-left: 2px; vertical-align: 1px; }
@media (max-width: 640px) {
  .soon-tag { display: inline; }
  .cat-soon { border-color: var(--line-soft); }
  .cat-soon .cat-ic { background: transparent; }
}
.quick-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Retail: выбор фракции на оформлении */
.faction-pick { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.faction-pick legend { padding: 0; margin-bottom: 6px; font-size: 15px; }
.faction-pick .field-error { grid-column: 1 / -1; }
.faction-opt { position: relative; cursor: pointer; }
.faction-opt input { position: absolute; opacity: 0; pointer-events: none; }
.faction-opt span { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; font-weight: 600; color: var(--text-2); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.faction-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.faction-opt input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
[data-field].invalid .faction-opt span { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }
/* Телефон: без заголовка над быстрым заказом (для поиска он остаётся в коде, но не на экране) */
@media (max-width: 640px) {
  .hero-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero { padding-top: 14px; }
  /* игры в быстром заказе — листаются пальцем вбок: третья выглядывает, видно, что можно листать */
  .game-tabs { grid-auto-columns: 40%; }  /* ~2.5 игры на экране — третья видна наполовину, ясно, что листается */
}
/* «Just delivered» — список последних выдач (владелец: одна узкая строка «вроде есть и как бы нету») */
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.feed-list .feed-row { height: auto; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); gap: 14px; }
.feed-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--g, var(--accent)) 14%, var(--chip)); flex: 0 0 auto; }
.feed-list .feed-what { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.feed-list .feed-what b { font-family: var(--font-num); font-size: 17px; }
.feed-list .feed-what small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Телефон: быстрый заказ шире — почти до краёв экрана */
@media (max-width: 640px) {
  .hero.wrap { padding-left: 8px; padding-right: 8px; }
  .quick { padding: 20px 16px; border-radius: 20px; }
}
/* Телефон: все блоки одной ширины — как быстрый заказ (владелец: «чтобы все были одинаковые в ширину») */
@media (max-width: 640px) {
  .wrap, .hero.wrap { padding-left: 10px; padding-right: 10px; }
  .block-head, .block > h2, .block > h1, .block > .lead, .block > p, .crumbs, .product-head, .site-footer .wrap { padding-left: 6px; padding-right: 6px; }
  .block.narrow, .site-footer .wrap { padding-left: 16px; padding-right: 16px; }
}
/* Способ выдачи на оформлении: карточки с пояснением; у Aion — одна строка-пояснение */
.method-pick { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.method-pick legend { padding: 0; margin-bottom: 6px; font-size: 15px; }
.method-opt { position: relative; cursor: pointer; }
.method-opt input { position: absolute; opacity: 0; pointer-events: none; }
.method-opt span { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 12px; transition: background-color .2s ease, border-color .2s ease; }
.method-opt b { font-size: 15px; color: var(--text); }
.method-opt small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.method-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.method-opt input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.method-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--chip); font-size: 14px; color: var(--text-2); line-height: 1.45; }
.method-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--link); }
/* «Sell to us»: переключатель Buy | Sell в быстром заказе */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); }
.mode-switch[hidden] { display: none; }
.mode-switch button { min-height: 38px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.mode-switch button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.quick.selling .mode-switch button.on { color: var(--gold); }
.sell-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 14px; }
.sell-note[hidden] { display: none; }
.sell-note svg { flex: 0 0 auto; margin-top: 2px; }
.sell-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.done-mark.small svg { width: 52px; height: 52px; }
.stock-line[hidden] { display: none; }
/* Связь: Telegram | Discord + ник */
.contact-pick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-pick legend { padding: 0; margin-bottom: 6px; font-size: 15px; }
.contact-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--chip); }
.contact-kind { position: relative; cursor: pointer; }
.contact-kind input { position: absolute; opacity: 0; pointer-events: none; }
.contact-kind span { display: flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 9px; font-weight: 600; font-size: 15px; color: var(--muted); transition: background-color .25s ease, color .25s ease; }
.contact-kind input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.contact-kind input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
/* Кнопки «Join our Discord / Telegram» */
.join { display: flex; flex-direction: column; gap: 8px; }
.join p { margin: 0; }
.join-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.join-discord { background: #5865F2; color: #fff; }
.join-discord:hover { background: #4752C4; color: #fff; }
.picker-region { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.picker-region:empty { display: none; }
/* Плавный переход шапка → небо (владелец 23.10.2026): без подложек и линий, сияние идёт от самого верха.
   Подложка с размытием — только когда шапка прилипла при прокрутке (класс .scrolled на <html>). */
.site-header, .header-cats { border: 0; background: transparent; }
.header-cats::after { display: none; }
.header-top-wrap { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .3s ease, border-color .3s ease; }
@media (min-width: 641px) {
  .scrolled .header-top-wrap { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: var(--line-soft);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
}
/* Шапка на компьютере снова прилипает (правило «Aurora» про position: relative случайно отменяло sticky) */
@media (min-width: 641px) { .header-top-wrap { position: sticky; top: 0; z-index: 35; } }
/* Окно серверов: метка региона перед названием, как на FunPay — «NA East  Fregion» */
.sheet-head-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rg-tag { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 2px 7px; border-radius: 6px;
  background: var(--chip); color: var(--text-2); white-space: nowrap; }
/* Запас в кнопке сервера: «Beritra  📦 74kk  EU  🔍» */
.picker-btn [data-picker-label] { flex: 1 1 auto; min-width: 0; }
.picker-stock { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px;
  background: color-mix(in srgb, #3DDC84 10%, transparent); color: var(--good); font-size: 13px; }
.picker-stock b { color: var(--text); font-family: var(--font-num); font-weight: 600; }
.picker-stock.warn { background: var(--warn-bg); color: var(--warn); }
.picker-stock.warn b { color: var(--warn); }
.picker-stock[hidden] { display: none; }
.picker-btn .picker-region { margin-left: 0; }
/* Умная шапка (компьютер): при прокрутке вниз уезжает вверх, при прокрутке вверх — возвращается */
@media (min-width: 641px) {
  .header-top-wrap { transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, border-color .3s ease; }
  .head-hidden .header-top-wrap { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) { .header-top-wrap { transition: none; } }
/* Отсвет сияния у подвала — страница «закрывается» тем же небом, что и открывается */
.site-footer { overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -40px; height: 240px; pointer-events: none; z-index: -1;
  background: radial-gradient(40% 60% at 25% 100%, var(--sky-a), transparent 70%), radial-gradient(40% 60% at 75% 100%, var(--sky-b), transparent 70%);
  filter: blur(30px); opacity: .9; }
/* Battle.net Gifts: шаги и форма */
.gifts { display: flex; flex-direction: column; gap: 18px; }
.gifts > * { max-width: 820px; }
.gifts h1 { margin-bottom: 0; }
.gift-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .gift-steps { grid-template-columns: minmax(0, 1fr); } }
.gift-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); }
.gift-steps li > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.gift-steps small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.gs-n { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cta); color: var(--cta-text); font-weight: 700; font-size: 14px; }
.gift-form { display: flex; flex-direction: column; gap: 16px; }
.gift-form h2 { margin: 0; }
/* «Главное сейчас» под заголовком: большая карточка, сама перелистывается, на телефоне — пальцем */
.featured { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.feat-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 22px; overscroll-behavior-x: contain; }
.feat-track::-webkit-scrollbar { display: none; }
.feat { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 150px; box-sizing: border-box; padding: 22px 24px; border-radius: 22px; color: var(--text); text-decoration: none; overflow: hidden;
  background: radial-gradient(70% 120% at 100% 50%, color-mix(in srgb, var(--g, var(--gold)) 24%, transparent), transparent 65%),
              radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--sky-a) 60%, transparent), transparent 70%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--g, var(--gold)) 28%, var(--line)); }
.feat:hover { color: var(--text); }
.feat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; z-index: 1; }
.feat-tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--g, var(--gold)) 22%, transparent); color: var(--g, var(--gold)); }
.feat-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; }
.feat-price { font-size: 15px; color: var(--text-2); } .feat-price b { font-family: var(--font-num); font-size: 20px; color: var(--text); }
.feat-sub { font-size: 14px; color: var(--muted); }
.feat-art { flex: 0 0 auto; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; color: var(--g, var(--gold));
  background: radial-gradient(circle, color-mix(in srgb, var(--g, var(--gold)) 22%, transparent), transparent 70%);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--g, var(--gold)) 45%, transparent)); }
.feat-art .glyph { color: var(--g, var(--gold)); }
.feat-dots { display: flex; gap: 6px; justify-content: center; }
.feat-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.feat-dots button.on { width: 22px; background: var(--text-2); }
.hero-h1 { margin: 0; }
/* Телефон: заголовок скрыт (для поиска остаётся в коде), «главное сейчас» — компактно над быстрым заказом */
@media (max-width: 640px) {
  .hero-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; gap: 0; }
  .hero-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-stats, .online-card { display: none; }
  .feat { min-height: 112px; padding: 16px 18px; }
  .feat-title { font-size: 19px; }
  .feat-art { width: 72px; height: 72px; }
  .feat-art svg { width: 46px; height: 46px; }
  .featured { gap: 8px; }
}
.hero h1.hero-h1 { font-size: clamp(30px, 3.6vw, 50px); text-wrap: balance; }
/* Телефон: игры и услуги раздела — панелью под строкой разделов (по нажатию) */
.cat-panel { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; padding-bottom: 10px; }
.cat-panel[hidden] { display: none; }
.cat-panel .mega-game { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); }
.cat-panel .mega-game + .mega-game { margin-top: 6px; }
.cat-panel .mega-links a { padding: 7px 12px; }
.cat-panel-all { align-self: flex-start; margin: 8px 4px 0; font-weight: 600; font-size: 14px; }
.cat.on-panel, .cat[aria-expanded="true"] { border-color: var(--accent); }
/* Компьютер, средняя ширина: рабочие разделы шире, у «скоро» — метка SOON вместо обрезанной подписи */
.cats { grid-template-columns: repeat(2, minmax(0, 1.35fr)) repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) and (min-width: 641px) {
  .cat-soon small { display: none; }  /* «скоро» и так видно по приглушённости — без обрезанной подписи */
}
/* Телефон: заголовок снова виден (владелец: «верни в мобильную версию») */
@media (max-width: 640px) {
  .hero-h1 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    font-size: 26px !important; letter-spacing: -0.8px; line-height: 1.1; margin: 0 0 14px !important; }
  .hero-h1 br { display: none; }
}
@media (max-width: 1000px) and (min-width: 641px) {  /* планшет: строка разделов листается, а не сжимается */
  .cats { grid-template-columns: repeat(2, minmax(190px, 1.35fr)) repeat(4, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
}

/* Меню разделов на компьютере — только по клику (владелец 23.10.2026), без появления при наведении */
.cat-wrap:hover .mega, .cat-wrap:focus-within .mega { visibility: hidden; opacity: 0; }
.cat-wrap.open .mega { visibility: visible; opacity: 1; transition-delay: 0s; }
.cat-wrap.open > .cat { background: var(--surface); border-color: var(--accent); }
/* Меню разделов — «стекло»: полупрозрачное, фон за ним размыт (владелец: «чуть прозрачнее») */
.mega { background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.mega-links a { background: color-mix(in srgb, var(--bg) 35%, transparent); }
/* Buy | Sell — режим видно сразу (владелец: «на миг задался вопросом, покупаю или продаю») */
.mode-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; }
.mode-switch button.on[data-mode="buy"] { background: var(--accent); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.mode-switch button.on[data-mode="sell"] { background: linear-gradient(180deg, #F3D58A, #D9A440); color: #1A1206; box-shadow: 0 2px 10px rgba(217,164,64,.35); }
.quick.selling .mode-switch button.on { color: #1A1206; }
.mode-switch button:not(.on):hover { color: var(--text); }
.quick { transition: border-color .3s ease, box-shadow .3s ease; }
.quick.selling { border-color: color-mix(in srgb, #D9A440 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, #D9A440 30%, transparent), 0 30px 60px -34px var(--shadow); }
/* Баннер с картинкой (промо-арт, присланный боту): картинка на всю карточку, текст — поверх тёмного градиента */
.feat.has-img { min-height: 190px; align-items: flex-end; border-color: var(--line); }
.feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.feat.has-img::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(5,8,14,.88) 0%, rgba(5,8,14,.55) 55%, rgba(5,8,14,.1) 100%), linear-gradient(0deg, rgba(5,8,14,.6), transparent 60%); }
.feat.has-img .feat-text { z-index: 1; color: #F2F5FA; }
.feat.has-img .feat-sub { color: #C9D2E0; }
@media (max-width: 640px) { .feat.has-img { min-height: 170px; } }
/* Телефон: больше воздуха между блоками (владелец 23.10.2026: «как будто всё сжато») */
@media (max-width: 640px) {
  .header-top { gap: 16px 12px; padding-top: 16px; padding-bottom: 12px; }
  .cats { padding-top: 6px; padding-bottom: 14px; gap: 8px; }
  .hero { padding-top: 26px; gap: 22px; }
  .hero-h1 { margin: 0 0 20px !important; }
  .feat { padding: 18px 20px; }
  .quick { padding: 24px 18px; gap: 18px; border-radius: 22px; }
  .quick-badges { margin-top: -6px; }
  .block { padding-top: 48px; padding-bottom: 12px; }
  .block > h2, .block-head { margin-bottom: 16px; }
}
/* Баннер с артом — крупно, как на FunPay (владелец 23.10.2026): картинка главная, текст внизу поверх */
.feat.has-img { min-height: 320px; align-items: flex-end; padding: 26px; }
.feat.has-img::after { background: linear-gradient(0deg, rgba(5,8,14,.92) 0%, rgba(5,8,14,.55) 38%, rgba(5,8,14,0) 70%); }
.feat.has-img .feat-title { font-size: 28px; }
@media (max-width: 640px) { .feat.has-img { min-height: 300px; padding: 20px; } .feat.has-img .feat-title { font-size: 22px; } }
/* Арт игры — полу-фоном за верхом страницы (владелец 23.10.2026: «не блоком, а как полу-фон», как у FunPay).
   Растворяется в фон книзу и к левому краю (там текст); поверх — сияние не мешает, контент читается. */
.hero-art { position: absolute; left: 0; right: 0; top: 0; height: 820px; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-art img { position: absolute; right: 0; top: 0; width: min(100%, 1400px); height: 100%; object-fit: cover; object-position: center 30%; opacity: .6; }
.hero-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 35%, transparent 70%),
              linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 40%, transparent 75%); }
[data-theme="light"] .hero-art img { opacity: .35; }
@media (max-width: 640px) {
  .hero-art { height: 560px; }
  .hero-art img { object-position: 70% 30%; opacity: .42; }
  .hero-art::after { background: linear-gradient(0deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 55%, transparent) 50%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); }
}
.hero-art { top: -160px; height: 900px; }  /* заходит и за шапку — как у FunPay, картинка с самого верха */
@media (max-width: 640px) { .hero-art { top: -200px; height: 640px; } }
main { isolation: auto; }
@media (min-width: 641px) { .hero-art img { opacity: .5; } }
/* Страница игры: официальный арт полу-фоном за заголовком и таблицей (поверх сияния), растворяется книзу и влево */
.page-art { position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: 0; pointer-events: none; overflow: hidden; }
.page-art img { position: absolute; right: 0; top: 0; width: min(100%, 1300px); height: 100%; object-fit: cover; object-position: center 35%; opacity: .5; }
.page-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 75%, transparent) 30%, transparent 70%),
              linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 50%, transparent) 45%, color-mix(in srgb, var(--bg) 25%, transparent) 100%); }
[data-theme="light"] .page-art img { opacity: .28; }
@media (max-width: 640px) {
  .page-art { height: 460px; }
  .page-art img { object-position: 60% 30%; opacity: .42; }
  .page-art::after { background: linear-gradient(0deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 60%, transparent) 55%, color-mix(in srgb, var(--bg) 35%, transparent) 100%); }
}
/* Новости: картинка игры сверху карточки */
.news-card.has-art { padding-top: 0; overflow: hidden; }
.news-art { display: block; margin: 0 -18px 12px; height: 110px; position: relative; overflow: hidden; }
.news-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.news-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--surface), transparent 70%); }
.news-card .news-art { align-self: stretch; padding: 0; border-radius: 0; font-size: inherit; }
/* Без зелёных обводок (владелец 23.10.2026): «LIVE» и «We're Online» — спокойный фон, зелёной остаётся только точка */
.badge-live { border-color: transparent !important; background: var(--chip) !important; }
.badge-live b { color: var(--good); }
.online-card { background: var(--chip); box-shadow: inset 0 0 0 1px var(--line-soft); }
.online-card:hover { background: color-mix(in srgb, var(--chip) 80%, var(--line)); }
/* Buy | Sell — ровная заливка, без свечения и рамки после нажатия (владелец 23.10.2026) */
.mode-switch button.on[data-mode="buy"], .mode-switch button.on[data-mode="sell"] { box-shadow: none; }
.mode-switch button.on[data-mode="sell"] { background: #E2B551; }
.mode-switch button:focus { outline: none; }
.mode-switch button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* «Главное сейчас» — тонкая плашка в одну строку, без свечения и большой иконки (владелец: «слишком большой акцент»).
   Первый экран снова как в выбранном макете: заголовок → короткий текст → цифры. */
.hero-lead { margin: -4px 0 0 !important; max-width: 560px; color: var(--text-2); }
.featured { max-width: 560px; gap: 0; }
.feat-track { border-radius: 999px; }
.feat { min-height: 0; padding: 9px 16px 9px 10px; border-radius: 999px; gap: 10px; justify-content: flex-start; align-items: center;
  background: var(--chip); border: 1px solid var(--line-soft); }
.feat:hover { border-color: var(--line-strong); }
.feat-text { flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.feat-tag { padding: 2px 8px; font-size: 10px; flex: 0 0 auto; }
.feat-title { font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-price { font-size: 14px; white-space: nowrap; } .feat-price b { font-size: 14px; }
.feat-sub, .feat-art, .feat-dots { display: none; }
.feat::after { content: "→"; margin-left: auto; color: var(--muted); padding-left: 6px; }
@media (max-width: 640px) {
  .hero-lead { display: none; }
  .feat { padding: 8px 14px 8px 8px; }
  .feat-price { font-size: 13px; } .feat-price b { font-size: 13px; }
  .feat-tag { display: none; }  /* на телефоне место дороже: метка не нужна, цена важнее */
}
/* Без обводок в режиме Sell (владелец 23.10.2026): ни золотой рамки у блока, ни рамки у нажатой кнопки */
.quick.selling { border-color: var(--line); box-shadow: 0 30px 60px -34px var(--shadow); }
.mode-switch button, .mode-switch button:focus, .mode-switch button:focus-visible { outline: none; box-shadow: none; }
/* Разделы (владелец 23.10.2026: «кнопки как будто всегда активные; загорались и тушились плавно, без резкости»).
   В покое — спокойно; при наведении/открытом меню/на своей странице — мягко загораются. Всё через переходы .35 с. */
.cat, .cat:not(.cat-soon) { background: transparent; border-color: transparent;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease; }
.cat-ic { position: relative; overflow: hidden; transition: background-color .35s ease, color .35s ease; }
.cat-ic::before { content: ""; position: absolute; inset: 0; background: var(--cta); opacity: 0; transition: opacity .35s ease; }
.cat-ic svg { position: relative; z-index: 1; }
.cat:not(.cat-soon) .cat-ic { background: var(--chip); color: var(--link); }
/* загорается: наведение, открытое меню, «вы здесь» */
.cat:not(.cat-soon):hover, .cat-wrap:hover > .cat:not(.cat-soon), .cat-wrap.open > .cat, .cat.cat-here, .cat[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.cat:not(.cat-soon):hover .cat-ic, .cat-wrap:hover > .cat:not(.cat-soon) .cat-ic, .cat-wrap.open > .cat .cat-ic, .cat.cat-here .cat-ic, .cat[aria-expanded="true"] .cat-ic { color: var(--cta-text); }
.cat:not(.cat-soon):hover .cat-ic::before, .cat-wrap:hover > .cat:not(.cat-soon) .cat-ic::before, .cat-wrap.open > .cat .cat-ic::before,
.cat.cat-here .cat-ic::before, .cat[aria-expanded="true"] .cat-ic::before { opacity: 1; }
.cat-soon:hover, .cat-wrap:hover > .cat-soon { background: transparent; border-color: transparent; }
@media (max-width: 640px) {  /* телефон: таблетки — тонкая рамка в покое, чтобы было видно, что это кнопки */
  .cat:not(.cat-soon) { border-color: var(--line); }
}
@media (prefers-reduced-motion: reduce) { .cat, .cat-ic, .cat-ic::before { transition: none; } }
/* Мягкая обводка полей при нажатии (владелец 24.10.2026): тонкая и полупрозрачная вместо яркой синей */
.field:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
input:focus, select:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.field, input, select { transition: border-color .25s ease, box-shadow .25s ease; }
/* «Just Delivered» — одной тихой строкой под быстрым заказом (вместо отдельного блока с карточками) */
.recent-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.recent-line svg { color: var(--good); flex: 0 0 auto; }
.recent-line b { color: var(--text-2); font-weight: 600; }
/* Картинки новостей — в родных пропорциях (без обрезки сверху/снизу — «сжатость» была от неё) */
.news-art { height: auto; aspect-ratio: 1200 / 630; }
.news-art img { object-fit: cover; object-position: center; }
.news-art::after { background: linear-gradient(0deg, var(--surface), transparent 35%); }
.news-date { margin-top: auto; }
/* Страница новости */
.post > * { max-width: 760px; }
.post h1 { font-size: clamp(28px, 4vw, 42px); margin: 4px 0 16px; text-wrap: balance; }
.post-date { margin: 0; }
.post-img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 18px; margin-bottom: 18px; }
.post-body p { font-size: 17px; line-height: 1.65; color: var(--text-2); margin: 0 0 14px; }
.post-more { margin-top: 40px; }
.post .news { max-width: none; }
/* Телефон, первый экран: ещё больше воздуха (владелец 24.10.2026) */
@media (max-width: 640px) {
  .header-top { padding-top: 20px; padding-bottom: 16px; gap: 18px 12px; }
  .cats { padding-top: 8px; padding-bottom: 20px; }
  .hero { padding-top: 34px; gap: 28px; }
  .hero-h1 { margin: 0 0 24px !important; }
  .quick { padding: 26px 20px; gap: 20px; }
}
.recent-line[hidden] { display: none; }
/* Поиск: подсвечивается только внешняя рамка; у самого поля внутри — без своей рамки (был двойной контур) */
.field input:focus, .field input:focus-visible { box-shadow: none; border-color: transparent; outline: none; }
/* Колонка «24 h» — изменение нашей цены за сутки (0% — серым) */
.offers .col-24 { white-space: nowrap; }
.offers .col-24 .chg { font-size: 13px; }
@media (max-width: 640px) { .offers .col-24 { padding-left: 2px; padding-right: 2px; } .offers .col-24 .chg { font-size: 12px; } }
/* Стрелки «↕» у заголовков таблицы убраны (владелец 24.10.2026); после нажатия — тихая ↑/↓, чтобы было видно порядок */
.sort::after { content: "" !important; }
th[aria-sort="ascending"] .sort::after { content: " ↑" !important; }
th[aria-sort="descending"] .sort::after { content: " ↓" !important; }
.sort:hover { color: var(--text-2); }
.offers .row-link .rg-tag { margin-right: 6px; vertical-align: 1px; }
.offers .row-link:has(.rg-tag) { white-space: nowrap; }
@media (max-width: 420px) {
  .offers .row-link:has(.rg-tag) { white-space: normal; }
  .offers .row-link .rg-tag { display: table; margin: 0 0 3px; }
}
/* Версии WoW Classic — кнопками (быстрый заказ и страница игры) */
.ver-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ver-pick[hidden] { display: none; }
.ver-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.ver-btn:hover { border-color: var(--line-strong); color: var(--text); }
.ver-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.ver-page { flex-basis: 100%; }
tr.ver-off { display: none; }
/* Поиск как у Eldorado: пустой — «Popular» (по продажам), при вводе — «Search Results» и «Servers» */
.pop-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; transition: background-color .2s ease; }
.pop-row:hover, .pop-row:focus-visible { background: var(--accent-soft); color: var(--text); }
.pop-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--g, var(--accent)) 16%, var(--chip)); flex: 0 0 auto; }
.pop-row b { font-weight: 600; }
.pop-hint { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.suggest .browse-head + a, .suggest a + .browse-head { margin-top: 4px; }
.suggest a.with-ic { justify-content: flex-start; gap: 12px; }
.suggest a.with-ic .kind { margin-left: auto; }
/* Значки игр плитками, как у Eldorado (владелец 24.10.2026) */
.tile { display: inline-block; flex: 0 0 auto; border-radius: 22%; object-fit: cover; background: var(--chip); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); vertical-align: middle; }
.tile-gift { background: none; box-shadow: none; }
.game-badge { background: none !important; width: auto; height: auto; }
.game-badge .tile { border-radius: 16px; }
.game-badge.small .tile { border-radius: 10px; }
.pop-ic { background: none !important; width: auto; height: auto; }
.game-tab span .tile { border-radius: 8px; margin-bottom: 2px; }
.top-tab .tile { border-radius: 6px; }
.mega-title, .browse-title { gap: 12px; }
.mega-title .tile, .browse-title .tile { border-radius: 7px; }
.games { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }  /* 4 игры — в один ряд, без сироты на второй строке */
@media (min-width: 641px) and (max-width: 1000px) { .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 641px) { .game-tabs { grid-auto-columns: minmax(118px, 1fr); } }  /* 4+ игры: названия не прижаты, ряд листается */
/* Официальные значки WoW (круглые эмблемы с прозрачным фоном) — без серой подложки плитки */
img.tile[src*="/icons/wow-"] { background: none; box-shadow: none; }
@media (min-width: 641px) { .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* 4 игры — 2×2: просторно и без сироты */
.g-wow-forever-gold { --g: #3FB8C4; }
[data-theme="light"] .g-wow-forever-gold { --g: #17808A; }
/* Ряды, листающиеся вбок: стрелки ‹ › на компьютере + затемнение у края, где есть ещё */
.hscroll { position: relative; min-width: 0; }
.hs-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s ease, background-color .2s ease; box-shadow: 0 4px 12px var(--shadow); }
.hs-btn:hover { background: var(--surface); border-color: var(--line-strong); }
.hs-prev { left: -10px; } .hs-next { right: -10px; }
.hscroll.can-prev .hs-prev, .hscroll.can-next .hs-next { opacity: 1; pointer-events: auto; }
.hscroll::before, .hscroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.hscroll::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.hscroll::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.hscroll.can-prev::before, .hscroll.can-next::after { opacity: .9; }
.top-tabs + .hs-btn, .hscroll:has(.top-tabs)::before { background: linear-gradient(90deg, var(--bg), transparent); }
.hscroll:has(.top-tabs)::after { background: linear-gradient(270deg, var(--bg), transparent); }
@media (hover: none) { .hs-btn { display: none; } }  /* телефон — листаем пальцем, стрелки не нужны */
/* Курсор не мелькает «ладошка ↔ палец» (владелец 24.10.2026): обычный «палец» над кнопками; «кулак» — только пока тянешь */
@media (hover: hover) { .game-tabs.dragging, .top-tabs.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .dragging * { cursor: grabbing; } }
/* Место под полосу прокрутки зарезервировано всегда — при смене Buy/Sell и т.п. страница не прыгает вбок (владелец 24.10.2026) */
html { scrollbar-gutter: stable; }
.picker-stock.ghost { visibility: hidden; }
/* Одна кнопка-меню ☰ в правом верхнем углу (владелец 24.10.2026): заказы, поддержка, валюта, язык, тема, ссылки */
.menu-wrap summary { gap: 8px; padding: 7px 12px 7px 14px; }
.menu-cur { font-weight: 700; color: var(--text-2); font-family: var(--font-num); }
.site-menu { width: 270px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sm-link { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; transition: background-color .2s ease; }
.sm-link svg { color: var(--muted); }
.sm-link:hover { background: var(--accent-soft); color: var(--text); }
.sm-link.small { padding: 7px 10px; font-size: 14px; color: var(--text-2); font-weight: 400; }
.sm-sep { height: 1px; margin: 6px 4px; background: var(--line-soft); }
.sm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; margin: 0 6px 4px; border-radius: 10px; background: var(--chip); }
.sm-seg .locale-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 4px; margin: 0; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 600; color: var(--text-2); width: auto; transition: background-color .2s ease, color .2s ease; }
.sm-seg .locale-opt.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.sm-seg .locale-opt:disabled { opacity: .45; cursor: default; }
.site-menu .locale-note { margin: 0 10px 6px; font-size: 11px; }
.site-menu .locale-title { padding: 8px 10px 4px; }
@media (max-width: 640px) { .site-menu { right: 0; width: min(300px, calc(100vw - 32px)); } }
/* Язык и валюта — отдельной кнопкой «🌐 EN · $» слева от ☰ (владелец 24.10.2026) */
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-wrap summary { gap: 6px; padding: 7px 12px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.lang-wrap summary svg { color: var(--muted); }
.lang-wrap .lc-dot { color: var(--muted); }
.lang-wrap [data-cur-label] { font-family: var(--font-num); }
.menu-wrap summary { padding: 7px 10px; }
.lang-menu { width: 260px; }
@media (max-width: 640px) { .lang-menu { right: -52px; width: min(280px, calc(100vw - 32px)); } .lang-wrap summary { padding: 7px 10px; } }
/* ===== 24.10.2026: ввод суммы в $, отзывы, время выдачи, оповещения о цене, «не нашли?», гайды ===== */
/* Звёзды: выбранные — золото, остальные — тихие */
.rate-stars { color: var(--gold); letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.rate-stars i { font-style: normal; color: var(--line-strong); }
.review-box { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.review-form { display: flex; flex-direction: column; gap: 10px; }
.review-form textarea { width: 100%; resize: vertical; }
.review-form .btn { align-self: flex-start; }
.review-done { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.review-own { margin: 6px 0 0; }
.stars-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0; }
.stars-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-pick label { font-size: 30px; line-height: 1; padding: 2px; color: var(--line-strong); cursor: pointer; transition: color .15s ease, transform .15s ease; }
.stars-pick label:hover, .stars-pick label:hover ~ label, .stars-pick input:checked ~ label { color: var(--gold); }
.stars-pick input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.stars-pick label:active { transform: scale(.9); }
/* Отзывы на главной */
.rating-sum { display: inline-flex; align-items: baseline; gap: 8px; }
.rating-sum b { font-family: var(--font-num); font-size: 20px; }
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.review-card { margin: 0; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.review-card blockquote { margin: 0; line-height: 1.5; }
.review-card figcaption { display: flex; align-items: center; gap: 6px; margin-top: auto; }
/* Страница сервера: справа покупка и под ней оповещение о цене */
.server-side { grid-area: buy; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.server-side > .quick { grid-area: auto; flex: none; }
.alert-card { display: flex; flex-direction: column; gap: 12px; }
.alert-head { display: flex; gap: 12px; align-items: center; }
.alert-head span:last-child { display: flex; flex-direction: column; gap: 2px; }
.alert-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--link-2); }
.alert-ic.big { width: 52px; height: 52px; border-radius: 14px; }
.alert-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.alert-row .btn { height: 48px; }
.narrow-card > .card { max-width: 620px; }
.alert-done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ask-line { margin-top: 14px; }
/* Гайды */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.guide-list { display: flex; flex-direction: column; gap: 10px; }
.guide-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.guide-card:hover { border-color: var(--line-strong); }
.guide-card > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--link-2); }
.guide { max-width: 760px; }
.guide h1 { font-size: clamp(26px, 4vw, 36px); text-wrap: balance; }
.guide h2 { font-size: 21px; margin: 30px 0 10px; }
.guide p, .guide li { line-height: 1.65; color: var(--text-2); }
.guide ol, .guide ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.guide-meta { margin-top: -6px; }
.guide-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--text); }
.guide-tip svg { flex: none; margin-top: 3px; color: var(--link-2); }
.guide-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.guide-more { margin-top: 40px; }
.suggest .empty-ask { color: var(--link); text-decoration: none; font-weight: 600; white-space: nowrap; }
/* Кнопка связи внизу справа (владелец 24.10.2026: «Telegram или Discord — обычно внизу») */
.help-fab { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.help-btn { width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: var(--accent); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .2s ease, background-color .2s ease; }
.help-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.help-pop { width: 290px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -14px var(--shadow); animation: sheet-in .18s ease-out; }
.help-head { display: flex; gap: 12px; align-items: center; padding: 2px 2px 6px; }
.help-head > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-head small { font-size: 12px; line-height: 1.35; }
.help-ava { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--gold); }
.help-ava i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: #E5484D; }
.help-ava i.on { background: #2BB673; }
.help-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--chip); color: var(--text); text-decoration: none; font-weight: 600; transition: background-color .2s ease; }
.help-link span { flex: 1; }
.help-link svg:last-child { color: var(--muted); }
.help-link:hover { background: var(--accent-soft); }
.help-link.tg svg:first-child { color: #2AABEE; }
.help-link.dc svg:first-child { color: #5865F2; }
.help-more { padding: 6px 4px 2px; font-size: 13px; color: var(--muted); text-decoration: none; text-align: center; }
.help-more:hover { color: var(--text); }
@media (max-width: 640px) {
  .help-btn { display: none; }  /* на телефоне — «Support» в нижнем меню */
  .help-fab { left: 10px; right: 10px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .help-pop { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .help-pop { animation: none; } .help-btn { transition: none; } }
.tabbar [aria-expanded="true"] { color: var(--link); }
.brand-ic { flex: none; }
.help-pop[hidden] { display: none; }
/* Таблица серверов на телефоне (владелец 24.10.2026, iPhone: не влезала). Колонка «24 h» остаётся (владелец: «с ней красивее»);
   метка региона — над названием на любом телефоне; заголовок «Price/1k» */
@media (max-width: 640px) {
  .offers .row-link:has(.rg-tag) { white-space: normal; }
  .offers .row-link .rg-tag { display: table; margin: 0 0 3px; }
  .offers td.strong { overflow-wrap: anywhere; }
}
/* Телефон (владелец 24.10.2026: «увеличить»): между полоской «главное сейчас» и быстрым заказом 40px вместо 28px */
@media (max-width: 640px) { .hero { row-gap: 40px; } }
/* «How It Works» — три карточки со значками (владелец 24.10.2026: список выглядел бедно рядом с остальными блоками) */
.how { padding-top: 48px; }
.how h2, .faq-wrap h2 { margin: 0 0 18px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.how-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line-soft); }
.how-step b { font-size: 18px; color: var(--text); }
.how-step p { margin: 0; color: var(--text-2); line-height: 1.5; }
.how-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px;
  background: var(--accent-soft); color: var(--link-2); }
.how-n { position: absolute; top: 20px; right: 22px; font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .5px; }
/* тонкая стрелка между карточками — шаги идут по порядку */
.how-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -21px; width: 14px; height: 14px;
  border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.faq-wrap { padding-top: 40px; padding-bottom: 48px; }
.faq-wrap details { max-width: 760px; }  /* вопросы — узкой колонкой по левому краю, как текст */
@media (max-width: 760px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .how-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; align-items: start; }
  .how-ic { grid-row: span 2; margin: 0; width: 40px; height: 40px; }
  .how-step b { font-size: 16px; padding-right: 28px; }
  .how-n { top: 16px; right: 16px; }
  .how-step::after { display: none; }
  .how { padding-top: 36px; } .faq-wrap { padding-top: 32px; padding-bottom: 36px; }
}
@media (max-width: 640px) { .how > h2, .faq-wrap > h2 { padding-left: 6px; padding-right: 6px; } }  /* как заголовки других блоков */
/* Соцсети в подвале — круглые кнопки в фирменных цветах (владелец 24.10.2026, как у Starvell) */
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.soc { --c: var(--link); display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  transition: background-color .2s ease, transform .2s ease; }
.soc:hover { background: color-mix(in srgb, var(--c) 26%, var(--surface)); transform: translateY(-2px); }
.soc-telegram { --c: #2AABEE; } .soc-discord { --c: #5865F2; } .soc-youtube { --c: #FF3B30; } .soc-tiktok { --c: #FE2C55; }
.foot-support { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.foot-support .dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; flex: none; }
.foot-support .dot.on { background: #2BB673; }
@media (prefers-reduced-motion: reduce) { .soc { transition: none; } }
/* Блоки доверия с картинками (владелец 24.10.2026: «как на Eldorado — свои картинки»): картинка слева, текст и кнопка справа */
.trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust-card.ill { align-items: center; gap: 18px; padding: 22px 22px 22px 16px; border-color: var(--line-soft); border-radius: 18px; }
.trust-card.ill b { font-size: 17px; }
.trust-card.ill p { margin: 6px 0 0; line-height: 1.45; }
.trust-card.ill .btn { margin-top: 14px; }
.trust-card.ill .coins-row { margin-top: 12px; }
.trust-art { flex: 0 0 auto; }
@media (max-width: 1100px) and (min-width: 861px) { .trust-art { width: 84px; height: 84px; } .trust-card.ill { gap: 12px; } }
@media (max-width: 860px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust-card.ill { padding: 16px; gap: 14px; }
  .trust-art { width: 76px; height: 76px; }
}
.trust-art .ta-ring { stroke: var(--surface); }  /* кольцо вокруг точки «в сети» — цвета карточки в обеих темах */
/* Логотип-ворон и двухцветное слово «odin» + «loot» золотом (владелец 24.10.2026: «ну давай попробуем») */
.logo { gap: 8px; }
.brand-mark, .brand-head { flex: none; display: block; }
.wordmark b { color: var(--gold); font-weight: inherit; }
.online-ava, .help-ava { background: none; }
.online-ava .brand-head, .help-ava .brand-head { width: 100%; height: 100%; }
.brand:has(.brand-mark) .presence { left: 22px; top: 21px; }  /* точка «в сети» — справа внизу под клювом, не на крыле */
@media (max-width: 640px) { .brand:has(.brand-mark) .presence { left: 23px; top: 22px; width: 14px; height: 14px; } }  /* на телефоне точка чуть меньше — не закрывает лапы */
.method-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: #5FD69A; background: color-mix(in srgb, #2BB673 16%, transparent); vertical-align: 1px; }
[data-theme="light"] .method-tag { color: #158a4f; }  /* как другие зелёные метки светлой темы */
/* «Sell Gold» в шапке — золотая обводка в цвет «loot»; потом на этом месте будет «Sign In» (владелец 24.10.2026) */
.sell-cta { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--gold); text-decoration: none; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent); transition: background-color .2s ease, border-color .2s ease; white-space: nowrap; }
.sell-cta:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
@media (max-width: 859px) { .sell-cta { display: none; } }  /* узкий планшет и телефон: места нет — «Sell» есть в быстром заказе */

/* Кнопки справа в шапке — одной высоты (владелец 24.10.2026: «Sell Gold» казалась больше): 36px у всех, «Sell Gold» легче */
.header-actions .sell-cta, .header-actions .locale > summary { height: 36px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.header-actions .sell-cta { padding: 0 13px; gap: 6px; border-color: color-mix(in srgb, var(--gold) 32%, transparent); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.header-actions .sell-cta svg { width: 15px; height: 15px; }
.header-actions .menu-wrap > summary { width: 36px; padding: 0; justify-content: center; }
/* на время своей анимации и перетаскивания «магнит» к карточкам выключен — иначе браузер дёргает ряд обратно */
.hscroll .gliding, .hscroll .dragging { scroll-snap-type: none !important; scroll-behavior: auto !important; }
/* Телефон: ряд «Top Servers» заходит на 10px за край блока (до края экрана) — затемнение тоже до края, иначе там яркая полоса */
@media (max-width: 640px) { .hscroll:has(.top-tabs)::after { right: -10px; } }
/* «Why OdinLoot» (владелец 24.10.2026: суть сайта — забота и ответственность, а не «нет комиссии»): боль бирж слева — наш ответ справа */
.why-grid { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; background: var(--surface); }
.why-head, .why-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.why-head span { padding: 14px 20px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.why-head span:last-child { color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.why-row { border-top: 1px solid var(--line-soft); }
.why-row > span { display: flex; align-items: flex-start; gap: 10px; padding: 15px 20px; line-height: 1.45; }
.why-bad { color: var(--muted); }
.why-bad svg { flex: none; margin-top: 3px; color: #E5484D; opacity: .7; }
.why-good { color: var(--text); font-weight: 500; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.why-good svg { flex: none; margin-top: 3px; color: var(--gold); }
@media (max-width: 640px) {
  .why-head span, .why-row > span { padding: 12px 12px; font-size: 14px; }
  .why-head span { font-size: 11px; }
  .why-row > span { gap: 7px; }
}
.hero-h1 .nw { white-space: nowrap; }  /* фраза заголовка не рвётся посередине («No / Silence») — переносы только между фразами */
/* Новости — спокойной сеткой (владелец 24.10.2026: карусель «бьёт в голову»): компьютер до 3 в ряд,
   телефон — компактный список: картинка слева 112px, заголовок и дата справа, без анонса */
.news-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.news-list .news-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.news-list .news-date { margin-top: auto; }
@media (max-width: 640px) {
  .news-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .news-list .news-card.has-art, .news-list .news-card { flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; }
  .news-list .news-art { flex: 0 0 112px; width: 112px; height: auto; aspect-ratio: 1200 / 630; margin: 0; border-radius: 10px; align-self: center; }
  .news-list .news-art::after { display: none; }
  .news-list .news-text { gap: 4px; padding: 2px 4px 2px 0; }
  .news-list .news-text b { font-size: 15px; line-height: 1.3; }
  .news-list .news-sum { display: none; }
}
/* Пока тянешь ряд мышью — стрелки исчезают и не ловят курсор (владелец 24.10.2026: «случайно задеваешь стрелочку — жесть») */
.hscroll.is-dragging .hs-btn { opacity: 0 !important; pointer-events: none !important; }
/* Ряд зажат мышью — стрелки не реагируют сразу; пока тянешь — прячутся, кнопки под курсором не подсвечиваются (нет мигания) */
.hscroll.pressing .hs-btn { pointer-events: none !important; }
.hscroll .dragging > * { pointer-events: none; }
.game-tabs, .top-tabs { -webkit-user-select: none; user-select: none; }  /* в рядах нечего выделять — выделение и мешало перетаскиванию */
/* Подсказка о минимальном заказе — только после нажатия Continue (владелец 24.10.2026): спокойный текст + «Set 1 800» */
.min-hint { margin: -6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.link-btn { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--link-2); }