:root{
  --night:#0e1319;
  --deep:#141b24;
  --wood:#7a4a24;
  --wood-dark:#5e3618;
  --wood-frame:#2e1a0c;
  --plank:rgba(0,0,0,.14);
  --cream:#f6e7ce;
  --cream-dim:#c9b79a;
  --amber:#f0a132;
  --amber-hot:#ffc06a;
  --green:#2f7d4f;
  --green-hi:#57b47a;
  --ink:#1a1008;
  --line:rgba(246,231,206,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font:17px/1.65 "Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hot)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

.board{
  position:relative;
  background:
    repeating-linear-gradient(90deg,transparent 0 78px,var(--plank) 78px 80px),
    linear-gradient(180deg,#8a5529,#6b3f1d);
  border:5px solid var(--wood-frame);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.14);
  padding:30px 32px;
}
.btn{
  display:inline-block;
  background:linear-gradient(180deg,#f8c877,#e39a2c);
  color:var(--ink);
  border:3px solid rgba(0,0,0,.45);
  border-radius:14px;
  padding:13px 34px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 6px 0 rgba(0,0,0,.3);
  transition:transform .08s,box-shadow .08s;
}
.btn:hover{color:var(--ink);transform:translateY(2px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.btn.ghost{
  background:transparent;color:var(--cream);
  border-color:rgba(246,231,206,.35);box-shadow:none;
}
.btn.ghost:hover{color:var(--amber-hot);border-color:var(--amber)}

.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(14,19,25,.82);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{font-weight:800;letter-spacing:.2em;font-size:16px;color:var(--cream)}
.brand b{color:var(--amber)}
.topbar nav{margin-left:auto;display:flex;gap:22px;font-size:14px;letter-spacing:.06em}
.topbar nav a{color:var(--cream-dim);text-transform:uppercase}
.topbar nav a:hover{color:var(--amber)}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero.plain{background:linear-gradient(180deg,#151d27,#0e1319)}
.hero.plain .inner{padding:86px 0 74px}
.hero .shot{
  position:absolute;inset:0;
  background:url(/img/hero.jpg) center 42%/cover no-repeat;
  transform:scale(1.04);
}
.hero .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 12%,rgba(14,19,25,0) 30%,rgba(14,19,25,.72) 100%),
    linear-gradient(180deg,rgba(14,19,25,.55),rgba(14,19,25,.1) 34%,rgba(14,19,25,.92));
}
.hero .inner{position:relative;padding:112px 0 96px;text-align:center}
.hero h1{
  margin:22px 0 10px;
  font-size:clamp(34px,6.6vw,66px);
  letter-spacing:.2em;
  font-weight:800;
  text-shadow:0 5px 0 rgba(0,0,0,.35),0 0 36px rgba(0,0,0,.5);
}
.hero h1 b{color:var(--amber)}
.hero p{
  margin:0 auto;max-width:640px;font-size:clamp(16px,2.2vw,20px);
  color:#f2e3c8;text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.hero .logo{width:100%;max-width:520px;margin:0 auto 6px}
.hero .acts{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.rift{display:block;width:100%;height:26px}
.rift path{fill:var(--night)}

section{padding:74px 0}
.eyebrow{color:var(--cream-dim);letter-spacing:.24em;text-transform:uppercase;font-size:13px;margin:0 0 12px}
h2{font-size:clamp(24px,3.4vw,34px);margin:0 0 18px;letter-spacing:.04em}
.lead{color:var(--cream-dim);max-width:720px;font-size:18px}

.games{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:34px}
.game{display:flex;gap:22px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(246,231,206,.03)}
.game img.ico{width:104px;height:104px;border-radius:24px;border:3px solid rgba(0,0,0,.5);flex:0 0 auto}
.game h3{margin:2px 0 8px;font-size:24px;letter-spacing:.04em}
.game p{margin:0 0 14px;color:#f0dfc2}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tag{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.4);
  color:#f0dfc2;border-radius:999px;padding:4px 12px;
}

.feats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:30px}
.feat{border-left:3px solid var(--amber);padding:2px 0 2px 18px}
.feat h4{margin:0 0 6px;font-size:18px;letter-spacing:.03em}
.feat p{margin:0;color:var(--cream-dim);font-size:16px}

.specs{display:grid;gap:10px 30px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:26px;
  color:var(--cream-dim);font-size:16px}
.specs div{border-top:1px solid var(--line);padding-top:10px}
.specs b{color:var(--cream);font-weight:600}

footer{border-top:1px solid var(--line);padding:38px 0 54px;color:var(--cream-dim);font-size:15px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}

/* ‼️ ДОКУМЕНТЫ - ТОТ ЖЕ НАБОР, ЧТО И ОСТАЛЬНЫЕ СТРАНИЦЫ (16.09.2026, замечание игрока
   «конфиденциальность отличается по дизайну»). Заголовки были янтарные, текст - своего
   оттенка, и страница читалась как чужая. Цвета и кегли теперь общие с разделами сайта,
   отдельной остаётся только ширина колонки: длинный документ читают в узкой. */
.doc{max-width:820px;margin:0 auto;padding:56px 22px 70px}
.doc h1{font-size:clamp(24px,3.4vw,34px);margin:0 0 6px;letter-spacing:.04em}
.doc .upd{color:var(--cream-dim);font-size:14px;margin-bottom:34px}
.doc h2{font-size:clamp(18px,2.2vw,22px);margin:38px 0 10px;letter-spacing:.04em;color:var(--cream)}
.doc p,.doc li{color:var(--cream-dim)}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.back{display:inline-block;margin-bottom:24px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:640px){
  .topbar .wrap{height:auto;flex-wrap:wrap;gap:6px 14px;padding-top:9px;padding-bottom:9px}
  .topbar nav{margin-left:0;width:100%;justify-content:space-between;gap:10px;font-size:12px}
  .hero .inner{padding:78px 0 64px}
  .board{padding:22px 20px}
  .game{flex-direction:column}
  section{padding:54px 0}
}