/* Страница GTA 6 — стиль официальной страницы игры. Палитра снята с rockstargames.com/VI */
:root{
  --z1a:#1F1F38; --z1b:#18182D;
  --z2a:#2A2A4A; --z2b:#38365D; --z2c:#4B2F54;
  --z3a:#4B2F54; --z3b:#5A2E5E; --z3c:#4A2A55;
  --z4a:#4A2A55; --z4b:#5E3160; --z4c:#3A2350;
  --z5a:#3A2350; --z5b:#1A1A2E; --z5c:#0C0D1B;
  --pink:#FFB2C6; --orange:#FFAD36; --text:#FDFBFF; --muted:#C9C6D8;
  --line:rgba(255,255,255,.10); --wa:#25D366; --wa-bg:rgba(37,211,102,.14);
  /* подложка блоков (карточки, полосы, подвал). Раньше токена не было вовсе, хотя он
     использовался в 28 правилах — блоки оставались без фона, отсюда «выглядит не как сайт» (Роман, 22.09). */
  --panel:rgba(255,255,255,.045);
  /* затемнение под текст на первом экране: сверху плотнее (заголовок), к горизонту слабее —
     там закатная полоса кадра, и внизу мягко уходим в цвет следующего пояса */
  --scrim1:rgba(12,13,27,.88); --scrim2:rgba(12,13,27,.30); --scrim3:var(--z1b);
}
/* шрифт Rubik — локальные файлы лабы (assets/fonts). Раньше здесь стоял несуществующий
   «RubikX», из-за чего вся страница падала на системный шрифт. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-hebrew.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-ar.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-latin.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/rubik-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:var(--z1b);
  font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
/* иврит и арабский — толще: канон PCone требует вес не ниже 500, иначе буквы «худеют» */
html[dir="rtl"] body,html[dir="rtl"] .lead,html[dir="rtl"] .hero-sub,html[dir="rtl"] .fact,html[dir="rtl"] .hero-card{font-weight:500}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* ЗОНА 1 — первый экран: небо и закат */
.zone1{position:relative;padding:22px 0 54px;
  background:
   radial-gradient(1200px 620px at 50% -6%, rgba(255,223,128,.22), rgba(244,113,124,.16) 46%, rgba(233,99,199,.12) 72%, rgba(0,0,0,0) 100%) top center/100% 760px no-repeat,
   linear-gradient(180deg,var(--z1a) 0%,var(--z1b) 100%)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 0}
/* верхняя строка внутренней страницы: возврат на GTA 6 и переключатель языка (Роман, 20.09) */
.backtop{display:inline-block;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;
  border:1px solid var(--line);border-radius:1000px;padding:8px 16px;background:rgba(255,255,255,.05)}
.backtop:hover{border-color:var(--orange);color:var(--orange)}
.langsw{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--muted);justify-content:flex-end}
.langsw a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
html[dir="rtl"] .langsw,html[dir="rtl"] .backtop{font-weight:500}
.langsw .cur{color:var(--orange);font-weight:700}
/* доступность: видимый фокус с клавиатуры и уважение к «меньше движения» (Роман, 20.09) */
a:focus-visible,button:focus-visible,summary:focus-visible,details:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.hdr img{height:30px;width:auto}
.langbar{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}
.langbar a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.langbar .cur{color:var(--orange);font-weight:700}
.btn{display:inline-block;padding:14px 34px;border-radius:1000px;font-weight:800;font-size:15px;
  text-decoration:none;background:var(--orange);color:#17110A;border:1px solid transparent;cursor:pointer}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:28px 0}
h1{font-size:clamp(34px,6vw,74px);line-height:1.05;margin:34px 0 12px;font-weight:800;letter-spacing:-.01em}
.accent{color:var(--orange)}
.hero-sub{font-size:clamp(16px,2.1vw,22px);color:var(--muted);max-width:640px;margin:0 auto}
.hero{text-align:center}
.countdown{display:inline-flex;gap:8px;align-items:baseline;margin-top:24px;padding:12px 24px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);
  color:var(--muted);font-size:15px}
.countdown #clock{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.countdown b{font-size:26px;color:var(--orange);font-weight:800}
/* самый узкий экран (320–380): счётчик ужимаем, чтобы он не вылезал за край (Роман, 21.09) */
@media (max-width:380px){.countdown{padding:10px 12px;gap:6px;margin-top:18px}.countdown b{font-size:22px}}
.hero-cta{text-align:center;margin-top:34px}
/* блок «Мир игры»: четыре кадра с подписями на малиновой зоне */
.world{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
/* названия сборок — плашками, чтобы текст не сливался в стену */
.build-name{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;margin:26px 0 12px;color:var(--orange);font-weight:700;font-size:18px}
/* сборки — карточками, а не сплошным текстом */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 0}
.cards>*{min-width:0}
.build-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  min-width:0;overflow-wrap:anywhere}
.build-name{color:var(--orange);font-size:19px;font-weight:700;margin:0 0 10px}
.build-card p{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 8px}
@media(max-width:700px){.cards{grid-template-columns:minmax(0,1fr)}}

/* таблицы (уровни требований и т.п.): на телефоне не выпирают за экран —
   длинные слова переносятся, а если всё равно не влезло, прокрутка внутри блока */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* Таблица уровней требований — тремя карточками: без таблицы читается на телефоне (правка Романа 20.09) */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 0}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px;min-width:0}
.tier h4{margin:0 0 12px;color:var(--orange);font-size:18px;font-weight:700}
.trow{display:flex;gap:12px;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.trow:last-child{border-bottom:0}
.trow span{color:var(--muted)}
.trow b{color:var(--text);text-align:end}
@media(max-width:760px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tbl table{width:100%;border-collapse:collapse;min-width:0}
.tbl td,.tbl th{overflow-wrap:anywhere;word-break:break-word}
.wshot{margin:0}
/* вместо голого адреса в тексте — кнопка-источник (правка Романа 20.09) */
.srcrow{margin:18px 0 0}
.srcbtn{display:inline-block;padding:10px 20px;border:1px solid var(--line);border-radius:1000px;
  background:var(--panel);color:var(--pink);font-weight:600;text-decoration:none}
.srcbtn:hover{border-color:var(--pink)}
/* кадр в блоке ограниченной ширины — ВСЕГДА по центру: и в LTR, и в RTL, и на телефоне, и на компьютере
   (Роман 20.09: «часть кадров сбита не по центру, в иврите иначе, чем в английском») */
.wshot--solo{max-width:760px;margin:24px auto 0}
.wshot img{width:100%;height:auto;display:block;border-radius:18px}
.wshot figcaption{margin-top:10px;color:var(--muted);font-size:14px}
@media(max-width:860px){.world{grid-template-columns:1fr}}
.hero-banner{width:100%;margin:0 auto;border-radius:20px}
/* наши баннеры внутри страницы: полоса во всю ширину и пара квадратов */
.bandwrap{padding:26px 0}
.band-banner{width:100%;height:auto;display:block;border-radius:20px}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.pairs img{width:100%;height:auto;border-radius:20px;display:block}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:26px}
/* КАДРЫ — ОДНО ПРАВИЛО (взято с аудио-видео сайта): окно кадра задаётся пропорцией, а не высотой
   в пикселях; фото всегда заполняет окно по центру. Тогда кадр выглядит одинаково
   на телефоне и на компьютере, в иврите и в английском. */
.shots img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:16px;display:block}
@media(max-width:760px){.pairs{grid-template-columns:1fr}}

/* ЗОНЫ 2–5: гамма меняется волной, каждый пояс продолжает цвет предыдущего */
.zone{padding:30px 0}
.zone2{background:linear-gradient(180deg,var(--z1b) 0%,var(--z2b) 46%,var(--z2c) 100%)}
/* первый экран: фоновая фотография видна ЦЕЛИКОМ (Роман 20.09: «обрезал — нехорошо»).
   Окно подогнано под пропорции кадра (1920×600 → 31.25vw), поэтому фотография не режется. */
.zone1{background:linear-gradient(180deg,var(--scrim1) 0%,var(--scrim2) 55%,var(--scrim3) 100%),
  url(hero-band.webp) center bottom/100% auto no-repeat;min-height:31.25vw}
.zone3{background:linear-gradient(180deg,var(--z2c) 0%,var(--z3b) 52%,var(--z3c) 100%)}
.zone4{background:linear-gradient(180deg,var(--z3c) 0%,var(--z4b) 46%,var(--z4c) 100%)}
.zone5{background:linear-gradient(180deg,var(--z4c) 0%,var(--z5b) 55%,var(--z5c) 100%)}
h2{font-size:clamp(24px,3.4vw,38px);margin:0 0 10px;font-weight:800}
/* Текст читается как страница, а не как простыня: короткие абзацы, узкая строка, воздух (правка Романа 20.09) */
.zone p{max-width:74ch;margin:0 0 14px;line-height:1.75;font-size:16px}
.zone p:last-child{margin-bottom:0}
.build-card p{max-width:none}
.lead{color:var(--muted);font-size:17px;max-width:760px;margin:0 0 26px}
.caps{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:10px}
.caps li{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--text);background:rgba(255,255,255,.05)}
.sub-h{font-size:clamp(20px,2.6vw,28px);margin:6px 0 14px;font-weight:800}
.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.hero-card{border:1px solid var(--line);border-radius:18px;padding:18px 20px;background:rgba(255,255,255,.05);color:var(--text);font-size:16px;line-height:1.5}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.fact{display:block;background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;text-decoration:none;color:var(--text);transition:border-color .2s ease,background .2s ease}
.fact:hover,.fact:focus-visible{border-color:var(--orange);background:rgba(255,173,54,.10)}
.fact:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.fact-a{display:block;margin-top:10px;font-style:normal;font-size:13.5px;color:var(--muted)}
.fact b{display:block;font-size:20px;margin-bottom:4px}
.fact span{color:var(--muted);font-size:14px}
/* пометка «это прогноз, а не данные Rockstar» — плашкой слева (Роман, 20.09) */
.note{border-inline-start:3px solid var(--orange);background:rgba(255,255,255,.05);border-radius:12px;
  padding:12px 16px;margin:18px 0;color:var(--text);font-size:15px;max-width:74ch}
/* ЧЕМ ЗАНИМАЕШЬСЯ В ИГРЕ — короткая полоса-чипы (тексты из присланных материалов, 20.09) */
.acts-h{margin:34px 0 12px;font-size:20px;font-weight:700;color:var(--text)}
/* 23.09: это перечисление занятий, а не кнопки — раньше выглядели как кнопки и не нажимались (замечание Романа) */
.acts{display:block;color:var(--muted);font-size:15px;line-height:1.9}
.acts span{display:inline;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:15px}
.acts span+span::before{content:"·";margin-inline:9px;color:var(--line)}
html[dir="rtl"] .acts span{font-weight:500}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.shot{margin:0}
.shot img{border-radius:18px;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}
.videotop{margin:30px auto 6px}   /* auto: блок обязан центрироваться (был прижат влево) */
.videobox video{width:100%;border-radius:20px;background:#000}
/* сборки под игру: карточки на тёмной зоне, светлый текст */
.builds{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.build{background:rgba(15,10,22,.52);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.build b{display:block;font-size:17px;margin-bottom:8px}
.build .spec{display:block;color:var(--muted);font-size:13px;line-height:1.45;min-height:52px}
.build .price{display:block;font-size:20px;font-weight:800;color:var(--orange);margin:10px 0 6px}
.build .ord{display:inline-block;font-size:13px;color:var(--pink);font-weight:700}
.qa{margin-top:8px}
.qa details{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;margin-bottom:10px}
.qa summary{font-weight:700;cursor:pointer}
.qa p{color:var(--muted);margin:10px 0 0}
footer{padding:40px 0 calc(56px + env(safe-area-inset-bottom));background:var(--z5c)}
.foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}
.foot a{text-decoration:none;border-bottom:1px solid var(--line)}
@media(max-width:720px){
  /* высоту кадра на телефоне НЕ переопределяем: пропорция 3/2 держит кадр одинаковым везде */
  .zone{padding:26px 0}
}

/* внутренние страницы игры: вторая панорама, тоже целиком (Роман, 20.09) */
.zone1--alt{background:linear-gradient(180deg,var(--scrim1) 0%,var(--scrim2) 55%,var(--scrim3) 100%),
  url(hero-band-2.webp) center bottom/100% auto no-repeat;min-height:31.25vw}

/* длинная полоса раздела (кадры Романа, 20.09) */
.bandwide{margin:22px 0 0}
.bandwide img{width:100%;height:auto;border-radius:18px;display:block}
.fig-square{width:min(560px,100%);height:auto;border-radius:22px;border:1px solid var(--line);
  display:block;margin-inline:auto}

/* РАЗДЕЛЫ ИГРЫ: карточки с кадром и названием (Роман 20.09: длинный текст разложить по страницам) */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.hubcard{display:block;position:relative;text-decoration:none;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.05)}
/* кадр карточки-перехода целиком: пропорция кадра 3:2, окно сжимается по нему, без обрезки
   (Роман 20.09: «если картинки обрезал — это нехорошо») */
.hubcard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
/* подпись карточки читается как ссылка: название слева, стрелка справа (23.09, замечание Романа
   «непонятно что эти кнопки») — стрелка разворачивается для иврита и арабского */
.hubcard span{display:block;padding:14px 16px;font-size:16px;font-weight:700;color:var(--text)}
.hubcard span::after{content:"";display:block;width:26px;height:2px;margin-top:9px;border-radius:2px;
  background:var(--orange);opacity:.55;transition:width .25s ease,opacity .25s ease}
.hubcard:hover span::after,.hubcard:focus-visible span::after{width:46px;opacity:1}
html[dir="rtl"] .hubcard:hover,.hubcard:focus-visible{border-color:var(--orange);background:rgba(255,255,255,.08)}
.hubcard.cur{border-color:var(--orange);background:rgba(255,173,54,.10)}
.hubcard.cur span{color:var(--orange)}
@media (prefers-reduced-motion:reduce){.hubcard span::after{transition:none}}
@media(max-width:720px){
  /* на телефоне карточки разделов — в две колонки, а полоса кадров — в одну строку:
     иначе главная растягивается на восемь экранов (замечание Романа 20.09) */
  .hubgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hubcard span{padding:10px 12px;font-size:13.5px;gap:8px}
    .shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  /* полоса кадров на телефоне: колонки, но без смены пропорции кадра */
}

/* телефон: вертикальные кадры целиком — окно равно пропорциям кадра (1080×1935 → 179.2vw,
   1080×1918 → 177.6vw), фотография не режется (Роман, 20.09) */
@media(max-width:760px){
  .zone1{background:linear-gradient(180deg,var(--scrim1) 0%,var(--scrim2) 55%,var(--scrim3) 100%),url(hero-band-mobile.webp) center bottom/100% auto no-repeat;min-height:179.2vw}
  .zone1--alt{background:linear-gradient(180deg,var(--scrim1) 0%,var(--scrim2) 55%,var(--scrim3) 100%),url(hero-band-mobile-2.webp) center bottom/100% auto no-repeat;min-height:177.6vw}
}

/* телефон: кадр первого экрана опущен ниже (просьба Романа 20.09) */
@media(max-width:760px){
  .hero-banner{margin-top:0}
}

/* телефон: вертикальный ролик вместо широкого (Роман, 20.09) */
.v-phone{display:none}
@media(max-width:760px){
  .v-phone{display:block}
  .v-desk{display:none}
}

/* кадр первого экрана — отдельной полосой ПОД первым экраном, с запасом, чтобы не читался
   как часть фона (Роман 20.09: «убери эту фотографию ниже») */
.herocard{padding:28px 0 0}
.herocard img{width:100%;height:auto;border-radius:20px;display:block}

/* ── Переходы-подсказки, баннер-мост, оживление блоков (Роман, 21.09) ── */
.nextlink{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:22px 0 0;padding:14px 20px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.05);color:var(--text);text-decoration:none;font-size:16px;font-weight:600}
.nextlink:hover{border-color:var(--orange)}
.nextlink b{color:var(--orange);font-size:20px;line-height:1}
.bridge{display:block;position:relative;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--text)}
.bridge img{width:100%;height:auto;display:block;transition:transform .5s ease}
.bridge:hover img{transform:scale(1.03)}
.bridge-t{position:absolute;inset:auto 0 0 0;padding:22px 24px;display:block;
  background:linear-gradient(transparent,rgba(12,13,27,.88) 65%)}
.bridge-t b{display:block;font-size:clamp(19px,2.6vw,28px);font-weight:800}
.bridge-t i{display:block;font-style:normal;color:var(--muted);font-size:15px;margin-top:6px}
.bridge-a{position:absolute;top:18px;inset-inline-end:18px;width:44px;height:44px;border-radius:50%;
  background:rgba(12,13,27,.72);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:20px;color:var(--orange)}
/* кадры карточек-переходов: мягкое увеличение при наведении (только мышь) */
.hubcard img{transition:transform .45s ease}
.hubcard:hover img{transform:scale(1.04)}
/* подписи к кадрам мира — аккуратной плашкой, всегда видимой (на телефоне всплывающие мешают) */
/* плавное появление блоков при прокрутке; при «меньше движения» — без анимации */
.reveal{opacity:0;transform:translateY(22px) scale(.994);filter:blur(3px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1),
  filter .6s ease}
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}}

/* Баннеры-переходы: кадр сверху, подпись отдельной строкой под ним — без наложений
   (Роман, 23.09: «всё наползает друг на друга») */
.glassrow{display:flex;flex-direction:column;gap:16px}
.glassbanner{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.04);text-decoration:none;color:var(--text)}
.glassbanner img{display:block;width:100%;height:auto;transition:transform .4s ease}
.glassbanner .glass{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.glassbanner .glass-t{min-width:0}
.glassbanner .glass-t b{display:block;font-size:17px;font-weight:800;color:var(--text)}
.glassbanner .glass-t i{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:3px}
.glassbanner .glass-a{flex:0 0 auto;font-size:20px;line-height:1;color:var(--orange);
  transition:transform .25s ease}
.glassbanner:hover{border-color:var(--orange)}
.glassbanner:hover img,.glassbanner:focus-visible img{transform:scale(1.03)}
.glassbanner:hover .glass-a,.glassbanner:focus-visible .glass-a{transform:translateX(4px)}
html[dir="rtl"] .glassbanner:hover .glass-a,html[dir="rtl"] .glassbanner:focus-visible .glass-a{transform:translateX(-4px)}
.glassbanner:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:640px){
  .glassbanner .glass{padding:12px 14px;gap:10px}
  .glassbanner .glass b{font-size:15.5px}
  .glassbanner .glass i{font-size:13.5px}
  .glassbanner .glass-a{font-size:18px}}
@media (prefers-reduced-motion:reduce){
  .glassbanner img,.glassbanner .glass-a{transition:none}}

/* контакт магазина в подвале страниц игры (Роман, 23.09) */
.foot .shopline{line-height:1.65}
.foot .shopline a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.foot .shopline a:hover{color:var(--orange);border-color:var(--orange)}

/* Подписи под кадрами: крупно и заметно (Роман, 23.09: «мелкий шрифт не притягивает глаз») */
.shot figcaption,.bandwide figcaption,.wshot figcaption,.world .shot figcaption,.herocard figcaption{
  margin-top:10px;padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-inline-start:3px solid var(--orange);
  color:var(--text);font-size:clamp(16px,2.1vw,19px);font-weight:700;line-height:1.35}
@media (max-width:640px){
  .shot figcaption,.bandwide figcaption,.wshot figcaption,.world .shot figcaption,.herocard figcaption{
    padding:10px 13px;font-size:16.5px;margin-top:8px}}
html[dir="rtl"] .shot figcaption,html[dir="rtl"] .bandwide figcaption,html[dir="rtl"] .wshot figcaption,
html[dir="rtl"] .world .shot figcaption{font-weight:700}

/* Блок «готов ли компьютер»: кнопки-варианты и вывод (Роман, 23.09) */
.pcq{display:flex;flex-wrap:wrap;gap:12px 10px;margin:16px 0 0}
.pcq-btn{font:inherit;font-size:15px;font-weight:600;line-height:1.35;word-break:break-word;
  cursor:pointer;text-align:center;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:1000px;padding:10px 18px;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.pcq-btn:hover{border-color:var(--orange);color:var(--orange)}
.pcq-btn.on{background:rgba(255,173,54,.14);border-color:var(--orange);color:var(--orange)}
.pcq-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.pcq-out{display:none;margin:16px 0 0;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-inline-start:3px solid var(--orange);color:var(--text);font-size:16px;line-height:1.5}
.pcq-out.on{display:block}
.pcq-out bdi,.pcq-note bdi{unicode-bidi:isolate;font-weight:600}
.pcq-note{color:var(--muted);font-size:14px;margin:12px 0 0}
.nextlink{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:12px 18px;
  border:1px solid var(--line);border-radius:1000px;background:rgba(255,255,255,.05);
  color:var(--text);text-decoration:none;font-weight:700;font-size:16px}
.nextlink:hover{border-color:var(--orange);color:var(--orange)}
.nextlink:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.nextlink::after{content:"";display:inline-block;width:22px;height:2px;border-radius:2px;
  background:var(--orange);transition:width .25s ease}
.nextlink:hover::after{width:34px}

/* Первый экран: атмосферная строка и строка фактов (Роман, 23.09: «используй это место с пользой») */
.hero-tag{font-size:clamp(17px,2.4vw,21px);font-weight:700;color:var(--pink);
  max-width:760px;margin:12px auto 8px;line-height:1.35}
.hero-sub{font-size:14px;color:var(--muted);max-width:760px;margin:0 auto}
html[dir="rtl"] .hero-tag{font-weight:700}

/* Списки в тексте: строки с оранжевым маркером вместо «стены текста» (Роман, 23.09) */
.ticks{list-style:none;margin:14px 0;padding:0}
.ticks li{position:relative;margin:0 0 12px;padding-inline-start:24px;
  color:var(--text);font-size:16px;line-height:1.55}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--orange)}
.ticks li b{font-weight:700}
@media (max-width:640px){.ticks li{font-size:15.5px}}

/* Кнопки связи в подвале страниц игры: WhatsApp и звонок (Роман, 23.09) */
.shopbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.sbtn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:1000px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);
  text-decoration:none;font-size:15px;font-weight:700}
.sbtn:hover{border-color:var(--orange);color:var(--orange)}
.sbtn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sbtn-wa{background:var(--wa-bg);border-color:var(--wa);color:var(--text)}
.sbtn-wa:hover{border-color:var(--wa);color:var(--wa)}
/* Телефон: кнопки связи — в столбик, каждая во всю ширину.
   Роман 21.09: «налазят кнопки друг на друга» — в строку им было тесно (зазор 8 px),
   в столбике они соприкасаться не могут ни на какой ширине экрана. */
@media (max-width:640px){
  .shopbtns{flex-direction:column;align-items:stretch;flex:1 1 100%;gap:12px;margin-top:18px}
  .shopbtns .sbtn{justify-content:center;white-space:nowrap;padding:13px 16px;font-size:15px}
}

/* Безопасные зоны телефонов с вырезом (Роман, 21.09). Пока страница открывается обычным
   окном, эти отступы равны нулю и вид не меняется; если её откроют «во весь экран»,
   текст и подвал не заедут под вырез и под полосу жеста. */
@supports (padding: env(safe-area-inset-top)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* «Хлебные крошки» на внутренних страницах игры (Роман, 21.09): видно, где находишься,
   и одним нажатием назад к главной странице раздела. Размер — вспомогательный (14px). */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0;font-size:14px;color:var(--muted)}
.crumbs a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--orange);border-color:var(--orange)}
.crumbs .sep{opacity:.55}
html[dir="rtl"] .crumbs .sep{transform:scaleX(-1);display:inline-block}
html[dir="rtl"] .crumbs{font-weight:500}
@media (max-width:640px){.crumbs{margin-top:12px;font-size:13.5px}}

/* строка-приглашение в подписи баннера */
.cap-hint{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--muted)}
.herocard figcaption{margin-inline:16px}

/* кадр первого экрана — ссылка на следующий раздел (Роман, 23.09) */
.hero-link{display:block;text-decoration:none}
.hero-link img{transition:transform .4s ease}
.hero-link:hover img,.hero-link:focus-visible img{transform:scale(1.02)}
.hero-link:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:18px}
.cap-hint b{color:var(--orange)}

/* Верхний кадр как настоящий баннер: надпись внутри изображения (Роман, 23.09) */
.hero-link{position:relative;display:block;overflow:hidden;border-radius:18px}
.hero-link picture{display:block}
.banner-cap{position:absolute;inset-inline:0;inset-block-end:0;display:flex;flex-direction:column;gap:4px;
  padding:22px 18px 16px;text-align:start;
  background:linear-gradient(180deg,rgba(12,13,27,0) 0%,rgba(12,13,27,.72) 45%,rgba(12,13,27,.94) 100%)}
.banner-cap>b{font-size:clamp(19px,2.7vw,27px);font-weight:800;color:var(--text);line-height:1.2}
.banner-next{display:inline-block;margin-top:8px;font-style:normal;font-size:14px;color:var(--text);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:1000px;
  padding:8px 15px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-link:hover .banner-next{background:var(--orange);border-color:var(--orange);color:#12060F}
@media (max-width:640px){
  .banner-cap{padding:16px 14px 12px}
  .banner-cap>b{font-size:19px}
  .banner-next{font-size:13.5px}}

/* Кадры-ссылки: нажатие на фото или подпись ведёт в раздел (Роман, 23.09) */
.shot-link{display:block;text-decoration:none;color:inherit;border-radius:18px}
.shot-link figure{margin:0}
.shot-link img{transition:transform .4s ease}
.shot-link:hover img,.shot-link:focus-visible img{transform:scale(1.02)}
.shot-link:hover figcaption,.shot-link:focus-visible figcaption{border-color:var(--orange)}
.shot-link:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* плавная прокрутка (Роман, 23.09) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* кнопка возврата на основной сайт лаборатории (Роман, 23.09) */
.sbtn-lab{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.sbtn-lab:hover{border-color:var(--orange);color:var(--orange)}

/* Два баннера на странице сборок: готовые ПК и апгрейд (Роман, 23.09) */
.promo-row{display:flex;flex-direction:column;gap:16px;margin:24px 0 6px}
.glass-cta{flex:0 0 auto;align-self:center;padding:10px 16px;border-radius:1000px;
  background:var(--orange);color:#12060F;font-size:14.5px;font-weight:800;white-space:nowrap}
.glassbanner:hover .glass-cta{filter:brightness(1.06)}
@media (max-width:640px){
  .glass-cta{padding:9px 13px;font-size:13.5px}
  .glassbanner .glass{flex-wrap:wrap}}

/* пасхалка VICE: подсветка таймера и скрытая строка (Роман, 23.09) */
.easter-note{display:none}
body.easter .countdown b{color:var(--pink);text-shadow:0 0 18px rgba(255,178,198,.55)}
body.easter .easter-note{display:block;margin:14px auto 0;max-width:620px;font-size:15px;color:var(--pink);
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;text-align:center}

/* Первый экран: пустое место в кадре заполняем кнопкой и строкой-пояснением
   (Роман, 23.09: «куча места, не хватает надписи») */
.hero-hint{margin:14px auto 0;max-width:640px;font-size:15.5px;line-height:1.5;color:var(--muted)}
html[dir="rtl"] .hero-hint{font-weight:500}
@media (max-width:640px){.hero-cta{margin-top:26px}.hero-hint{font-size:14.5px;max-width:34ch}}
/* подпись баннера лежит ВНУТРИ кадра — фотография не выглядит пустой */
.hc-media{position:relative;border-radius:20px;overflow:hidden}
.hc-cap{position:absolute;inset-inline:0;inset-block-end:0;display:block;
  padding:30px 24px 20px;text-align:start;
  background:linear-gradient(180deg,rgba(12,13,27,0) 0%,rgba(12,13,27,.70) 46%,rgba(12,13,27,.93) 100%)}
.hc-cap>b{display:block;font-size:clamp(18px,2.6vw,26px);font-weight:800;color:var(--text);line-height:1.25}
.hc-cap>i{display:block;font-style:normal;margin-top:6px;font-size:14.5px;color:var(--muted)}
@media (max-width:640px){.hc-cap{padding:22px 15px 14px}.hc-cap>b{font-size:19px}.hc-cap>i{font-size:13.5px}}

/* Картинка компьютера в карточке сборки (Роман, 21.09) */
.build-shot{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.build-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:640px){.build-shot img{aspect-ratio:4/3}}

/* Блок «Подготовься заранее» (Роман, 21.09) */
.prep-lead{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 18px;max-width:900px}
.prep-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 18px}
.prep-step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.prep-step h3{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--orange)}
.prep-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.prep-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.btn.prep-wa{background:var(--wa);border-color:var(--wa);color:#04240f}
@media(max-width:900px){.prep-steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.build-shot img{aspect-ratio:9/16;object-fit:cover;height:auto}}
.shot-note{margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.5;opacity:.85}
.foot-imgnote{margin:10px 0 0;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5;opacity:.8}

/* «Подготовься заранее»: кадр в каждом шаге */
.prep-shot{margin:0 0 10px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.prep-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Кнопка заказа в карточке сборки (аудит 21.09) */
.build-cta{margin:14px 0 0}
.build-cta .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px}

/* Таблица сравнения сборок (аудит 21.09) */
.cmpw{margin-top:8px}
.cmpscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
table.cmp th,table.cmp td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--line)}
table.cmp thead th{color:var(--muted);font-weight:500;font-size:14px;white-space:nowrap}
table.cmp tbody th{color:var(--orange);font-weight:700}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none}
@media (max-width:700px){table.cmp{min-width:0}table.cmp thead{display:none}
table.cmp tbody tr{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
table.cmp tbody td{display:grid;grid-template-columns:auto 1fr;gap:10px;border:none;padding:2px 14px;font-size:14px}
table.cmp tbody td:before{content:attr(data-l);color:var(--muted)}
table.cmp tbody th{padding:6px 14px 8px}}

/* Подпись под таймером: к чему относится дата (аудит 21.09) */
.count-note{margin:10px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:56ch}

/* Кнопки заказа в карточках сборок — на одной линии (Роман, 21.09: «кнопки не стоят ровно»).
   Карточка — колонка на всю высоту строки, кнопка прижата к низу: в паре карточки разной высоты,
   поэтому без этого кнопки «плавали» на разной высоте. */
.build-card{display:flex;flex-direction:column;height:100%}
.build-card>.build-cta{margin-top:auto}
.build-cta .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.3}
.cards{align-items:stretch}

/* Переключатель языков в шапке: на телефоне все пять языков — в одну строку (Роман, 21.09:
   «шапка поломана, арабский стоит второй строчкой»). При нехватке места — аккуратная прокрутка,
   без переноса и без обрезки. */
@media (max-width:700px){
  .langbar{margin-top:12px;font-size:12.5px;line-height:1.5;white-space:nowrap;
           overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 2px}
  .langbar::-webkit-scrollbar{display:none}
  .langbar a{border-bottom-width:1px}
}

/* Блок «Подготовься заранее» — оформление как на остальном сайте (Роман, 21.09: «не нравится,
   выглядит не как весь сайт»): одна широкая полоса, компактные карточки-шаги с номерами 01–03. */
.prep{margin-top:6px}
.prep-band{margin:0 0 20px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.prep-band img{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover}
.prep-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px}
.prep-gal figure{margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.prep-gal img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.prep-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px}
.prep-step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px}
.prep-num{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--orange);margin:0 0 8px}
.prep-step h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--text)}
.prep-step p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.prep-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
@media (max-width:700px){
  .prep-band img{aspect-ratio:16/9}
  .prep-gal{grid-template-columns:minmax(0,1fr);gap:12px}
  .prep-steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .prep-step{padding:16px}
}

/* Переключатель языков в шапке раздела: на телефоне — одна строка (Роман, 21.09:
   «шапка поломана», на разделе переносился на 3 строки). */
@media (max-width:700px){
  .langsw{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;white-space:nowrap;
          font-size:12.5px;line-height:1.5;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .langsw::-webkit-scrollbar{display:none}
  .langsw a,.langsw .cur{flex:0 0 auto}
}

/* Подвал страниц игры: кликабельный телефон и WhatsApp (аудит 21.09, P0) */
.foot-contacts{width:100%;margin:0 0 4px;font-size:14px;color:var(--muted)}
.foot-contacts a{text-decoration:none;border-bottom:1px solid var(--line)}
.foot-wa{color:var(--wa)}
/* Плавающая кнопка WhatsApp на страницах игры (аудит 21.09, P1): как на лабе */
.chat-fab{position:fixed;inset-inline-end:16px;inset-block-end:calc(16px + env(safe-area-inset-bottom));
  z-index:60;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#08240f;box-shadow:0 10px 26px rgba(0,0,0,.35);text-decoration:none}
.chat-fab svg{width:28px;height:28px;display:block}
@media(max-width:720px){.chat-fab{inset-inline-end:12px;inset-block-end:calc(12px + env(safe-area-inset-bottom));width:52px;height:52px}}

/* Квиз GTA 6 (спека 21.09) — цвета только через токены */
.quiz-sub{color:var(--muted);margin:8px 0 18px}
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px 18px}
.quiz-q{font-weight:700;font-size:19px;margin:0 0 14px}
.quiz-opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.quiz-opt{text-align:start;background:transparent;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;color:var(--text);font:inherit;font-size:16px;cursor:pointer;
  transition:border-color .15s,background .15s}
.quiz-opt:hover{border-color:var(--orange);background:color-mix(in srgb, var(--orange) 8%, transparent)}
.quiz-back,.quiz-restart{margin:14px 0 0}
.quiz-again{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;
  text-decoration:underline;padding:0}
.quiz-res-name{font-size:24px;font-weight:800;margin:0 0 8px}
.quiz-res-why{color:var(--muted);margin:0 0 10px;font-size:16px}
.quiz-res-price{font-weight:700;font-size:18px;margin:0 0 14px}
.quiz-res-btns{margin:0 0 12px;display:flex;gap:10px;flex-wrap:wrap}
.quiz-note{color:var(--muted);font-size:14px;margin:12px 0 0}
@media(max-width:720px){.quiz{padding:16px 14px}.quiz-q{font-size:17px}
  .quiz-opt{font-size:15px;padding:13px 14px}}

/* Панель WhatsApp на телефоне (спека 21.09): показывается после первого экрана, закрывается на сессию */
.wa-bar{position:fixed;inset-inline:10px;inset-block-end:calc(10px + env(safe-area-inset-bottom));z-index:70;display:none;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--z5c);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wa-bar{flex-wrap:wrap}
.wa-bar-note{flex:0 0 100%;text-align:center;color:var(--muted);font-size:12px;line-height:1.25;margin-top:5px}
.wa-bar.on{display:flex}
.wa-bar-btn{flex:1 1 auto;text-align:center;text-decoration:none;border-radius:12px;padding:12px 10px;
  font-size:14px;font-weight:600;line-height:1.25}
.wa-bar-btn.primary{background:var(--wa);color:#08240f}
.wa-bar-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.wa-bar-x{flex:0 0 auto;width:34px;border-radius:12px;background:transparent;color:var(--muted);
  border:1px solid var(--line);font-size:18px;line-height:1;cursor:pointer}
body.wa-bar-on{padding-block-end:calc(var(--wa-bar-h,112px) + 18px)}
body.wa-bar-on .chat-fab{display:none}
@media(min-width:761px){.wa-bar,.wa-bar.on{display:none!important}}
@media(max-width:420px){.wa-bar-btn{font-size:12.5px;padding:10px 8px;line-height:1.2}.wa-bar{padding:8px}.wa-bar-note{font-size:11.5px;margin:0 0 5px}}

/* ── Подвал страниц игры = подвал остального сайта (Роман, 22.09: «всё это некрасиво»).
   Разметка берётся из подвала лабы (единый вид), стили переведены на токены страниц игры. ── */
footer{background:var(--panel);border-top:1px solid var(--line);color:var(--muted);padding:34px 0 24px}
footer .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:34px;margin-bottom:20px}
.foot{text-align:start}
.foot h4{color:var(--text);font-size:15px;font-weight:600;margin:0 0 12px}
.foot a{display:block;color:var(--muted);text-decoration:none;font-size:15px;padding:4px 0;transition:color .2s}
.foot a:hover{color:var(--orange)}
.foot p{font-size:14px;margin:0 0 8px;line-height:1.55}
.foot .logo{display:inline-flex}
.foot-ctc{display:inline!important;padding:0!important;color:var(--text)!important;font-weight:500}
.foot-social{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.fs-link{width:38px;height:38px;border-radius:50%;display:inline-flex!important;align-items:center;justify-content:center;background:transparent!important;border:1px solid var(--line)!important;color:var(--text)!important}
.fs-link svg{width:19px!important;height:19px!important}
.fs-link:hover{border-color:var(--orange)!important;color:var(--orange)!important;transform:translateY(-2px)}
.foot-nav a{display:inline-block;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px}
.foot-nav a:hover{border-color:var(--orange);color:var(--orange)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:22px}.foot{text-align:start}}

/* Внутренняя перелинковка кластера: чипы-ссылки (22.09) — цвета через токены */
.linkrow{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0}
.linkchip{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:999px;
  color:var(--text);text-decoration:none;font-size:15px;background:var(--panel)}
.linkchip:hover{border-color:var(--orange)}

/* ── Настроение страниц игры (идея Романа, 22.09.2026) ─────────────────────────
   По умолчанию — текущий ночной вид. «Закат в Леониде» — тёплая гамма, тот же
   набор токенов, вёрстка и сетка не меняются. Пасхалка (режим Vice City) —
   неоновая подсветка, включается секретной комбинацией, по умолчанию выключена. */
html[data-gta-mood="sunset"]{
  --z1a:#2A1B2E; --z1b:#23182A;
  --z2a:#3A2334; --z2b:#5A2F3C; --z2c:#7A3B44;
  --z3a:#7A3B44; --z3b:#8F463E; --z3c:#6B3340;
  --z4a:#6B3340; --z4b:#8A4740; --z4c:#4A2740;
  --z5a:#4A2740; --z5b:#2A1B2E; --z5c:#1A1220;
  --pink:#FFC7A8; --orange:#FF9A3C;
}
html[data-gta-egg="on"]{ --orange:#FF5FD2; --pink:#7BF3FF; --line:rgba(123,243,255,.24); }

.mood-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mood{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);
  color:var(--text);border-radius:999px;padding:7px 14px;font:500 13px/1 Rubik,sans-serif;cursor:pointer;
  transition:border-color .2s ease,color .2s ease}
.mood:hover{border-color:var(--orange)}
.mood[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}

/* Хронология ожидания */
.tl{margin-top:8px;border-inline-start:1px solid var(--line);padding-inline-start:20px;display:grid;gap:16px}
.tl-i{position:relative}
.tl-i::before{content:"";position:absolute;inset-inline-start:-25px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.tl-d{font:600 13px/1 Rubik,sans-serif;letter-spacing:.03em;color:var(--muted)}
.tl-t{font-weight:600;margin:5px 0 3px}
.tl-x{color:var(--muted);font-size:14px;margin:0;line-height:1.5}

/* Сообщение секретного режима (пасхалка) */
.egg-toast{position:fixed;inset-block-end:104px;inset-inline:14px;z-index:86;max-width:520px;margin-inline:auto;
  background:rgba(12,13,27,.94);border:1px solid var(--line);border-radius:14px;padding:11px 15px;
  color:var(--text);font-size:14px;line-height:1.45;opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.egg-toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.egg-toast{transition:none}}

/* Шаги-карточки и таблица на страницах кластера (Роман, 22.09: «нет стиля оформления»).
   Цвета — только токены. Шкала размеров как на остальных страницах игры. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:6px 0 4px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px 16px}
.step-n{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--orange);margin-bottom:6px}
.step h3{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--text);line-height:1.35}
.step p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:700px){.steps{grid-template-columns:1fr}.step{padding:16px}}

/* Широкий кадр на страницах кластера (не только «подготовься заранее»): тот же вид, что у полосы prep. */
.bandimg{margin:0 0 20px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.bandimg img{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover}
@media(max-width:700px){.bandimg img{aspect-ratio:16/9}}

/* Карточки персонажей (образец Романа со страницы Rockstar, 22.09): имя крупно акцентом, роль — тише. */
.cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.castcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.castcard b{display:block;font-size:20px;font-weight:700;color:var(--orange);letter-spacing:.01em;line-height:1.25}
.castcard span{display:block;margin-top:6px;color:var(--muted);font-size:15px;line-height:1.5}
@media(max-width:700px){.cast{grid-template-columns:1fr}.castcard b{font-size:19px}}

/* 25.09.2026 (Роман): аккуратная ссылка «на главную лаборатории» в шапке страниц GTA 6. */
.lab-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:inherit;
  font-size:13px;font-weight:700;text-decoration:none}
.lab-back:hover{background:rgba(255,255,255,.14)}

/* Карточки сборок: кадр всегда 16:9, без растягивания (мобильная версия тоже) */
.build-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:16px;display:block;margin:0 0 12px}
@media(max-width:640px){.build-card img{aspect-ratio:16/9;height:auto}}

/* Миф vs Факт — парные карточки (LAB) */
.myths{display:grid;gap:14px;margin-top:18px}
.myth-card{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.myth-side{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--surface)}
.myth-side.m{border-inline-start:4px solid var(--danger,var(--accent))}
.myth-side.f{border-inline-start:4px solid var(--accent)}
.myth-side b{display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.myth-side p{margin:0;font-size:15px;font-weight:400;line-height:1.65;color:var(--ink)}
@media(max-width:620px){.myth-card{grid-template-columns:1fr}}

/* Списки в зонах: номерные и маркированные — обычный текст, а не заголовок */
.zone ol,.zone ul{margin:0 0 14px;padding-inline-start:22px;display:grid;gap:8px}
.zone ol li,.zone ul li{font-size:16px;font-weight:400;line-height:1.7;color:var(--ink)}
.zone ol li b,.zone ul li b{font-weight:700}
/* 14.10.2026 (Роман, десктоп): GTA6 — логотип не растягивать, скриншоты держать 16:9 */
.logo img{width:auto!important;height:36px!important;max-width:100%!important;object-fit:contain!important}
.world{align-items:start}
.world .shot img,.shot img{height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important}