/* Cat Casino — чёрно-золотой lobby. Вёрстка по скриншотам папки «кэт». */
:root{
  --ink:#0b0908; --ink-2:#0e0b09; --ink-3:#100d0a;
  --card:#15110d; --card-2:#191410; --line:#241d15; --line-2:#2f261b;
  --gold:#e9b949; --gold-2:#f3cf76; --gold-3:#9a7320;
  --cream:#f6ecd8; --text:#cdbfa9; --muted:#9b8c78;
  --jade:#2fbf8f;
  --rail:56px; --hdr:84px; --pad:28px; --max:1360px;
  --r:14px; --r-s:10px;
  --f: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-d:"Helvetica Neue",Arial Black,var(--f);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font:400 16px/1.62 var(--f);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;color:var(--cream);font-family:var(--f-d);letter-spacing:-.02em;line-height:1.06}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0 0 1em;padding-left:1.1em}
li{margin:.35em 0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99}
.skip:focus{left:8px;top:8px;padding:10px 16px;background:var(--gold);color:#120e08;border-radius:8px}

/* ---------------------------------------------------------- боковая рейка */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;
  background:var(--ink-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:26px 0;
}
.rail__c{
  color:var(--gold);font:700 17px/1 var(--f-d);letter-spacing:.02em;flex:none;
}
.rail__i{
  width:26px;height:26px;color:var(--gold-3);flex:none;
  transition:color .18s ease,transform .18s ease;
}
.rail__i svg{width:100%;height:100%;fill:currentColor}
.rail__i:hover{color:var(--gold);transform:translateY(-1px)}
.rail__age{
  margin-top:6px;color:var(--gold);font:700 14px/1 var(--f);letter-spacing:.02em;
}

/* ---------------------------------------------------------- шапка */
.hdr{
  position:sticky;top:0;z-index:35;
  background:rgba(12,10,8,.94);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--jade);
}
.hdr__in{
  max-width:var(--max);margin:0 auto;height:var(--hdr);
  display:flex;align-items:center;gap:26px;padding:0 var(--pad);
}
.logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.logo__m{width:26px;height:26px;color:var(--gold);flex:none}
.logo__m svg{width:100%;height:100%;fill:currentColor}
.logo__t{
  font:800 20px/1 var(--f-d);color:var(--cream);letter-spacing:.09em;
  white-space:nowrap;
}
.nav{display:flex;gap:26px}
.nav a{color:var(--text);font-size:15px;transition:color .18s ease}
.nav a:hover{color:var(--gold)}
.hdr__act{display:flex;gap:12px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 26px;border-radius:999px;white-space:nowrap;
  font:700 15px/1 var(--f);letter-spacing:.01em;transition:.18s ease;
}
.btn--ghost{color:var(--cream);border:1.5px solid var(--jade);background:transparent}
.btn--ghost:hover{background:rgba(47,191,143,.12)}
.btn--gold{color:#120e08;background:var(--gold);box-shadow:0 0 0 0 rgba(233,185,73,.45)}
.btn--gold:hover{background:var(--gold-2);box-shadow:0 8px 26px -10px rgba(233,185,73,.8)}
.btn--lg{height:54px;padding:0 34px;font-size:16px}

/* ---------------------------------------------------------- каркас */
.page{margin-left:var(--rail)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:66px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.shead{display:flex;align-items:flex-start;gap:26px;margin-bottom:30px}
.shead__n{
  font:800 46px/1 var(--f-d);color:var(--gold);flex:none;letter-spacing:-.03em;
}
.shead__n--plus{font-size:34px;line-height:1.25;width:30px;height:30px;margin-top:6px}
.shead__n--plus svg{width:100%;height:100%;fill:currentColor;display:block}
.shead__k{
  display:block;margin-bottom:9px;color:var(--gold);
  font:700 12px/1 var(--f);letter-spacing:.20em;text-transform:uppercase;
}
.shead h2{font-size:clamp(28px,3.5vw,44px);font-weight:800}
.more{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  color:var(--gold);font-weight:700;font-size:15px;
}
.more:hover{color:var(--gold-2)}

/* ---------------------------------------------------------- hero */
.hero{
  margin:28px 0 0;background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.hero__body{padding:60px 54px}
.hero__k{
  display:block;margin-bottom:20px;color:var(--gold);
  font:700 12px/1 var(--f);letter-spacing:.20em;text-transform:uppercase;
}
.hero h1{font-size:clamp(34px,4.6vw,60px);font-weight:800;margin-bottom:24px}
.hero__p{max-width:52ch;color:var(--text);font-size:16px}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__art{position:relative;min-height:420px;background:#0d0a07}
.hero__art img{width:100%;height:100%;object-fit:cover}
.stats{
  position:absolute;right:20px;bottom:20px;left:20px;
  display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;
}
.stat{
  background:rgba(11,9,8,.90);border:1px solid var(--line-2);
  border-radius:var(--r-s);padding:12px 16px;min-width:104px;
}
.stat b{display:block;color:var(--gold);font:800 19px/1.1 var(--f-d)}
.stat span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.35}

/* ---------------------------------------------------------- панель перехода */
.qnav{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:24px 0 0}
.qnav a{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:20px 22px;transition:.18s ease;
}
.qnav a:hover{border-color:var(--gold-3);background:var(--card-2)}
.qnav i{font:700 12px/1 var(--f);font-style:normal;color:var(--gold);letter-spacing:.12em}
.qnav b{color:var(--cream);font:700 16px/1 var(--f)}

/* ---------------------------------------------------------- маршруты */
.routes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.route{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:18px 22px;font-size:15px;line-height:1.6;
}
.route b{color:var(--cream);font-weight:700}

/* ---------------------------------------------------------- каталог */
.lead{max-width:96ch;margin-bottom:28px;color:var(--text)}
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.game{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s ease;
}
.game:hover{border-color:var(--gold-3);transform:translateY(-2px)}
.game__pic{aspect-ratio:4/3;background:#0d0a07}
.game__pic a{display:block;width:100%;height:100%}
.game__pic img{width:100%;height:100%;object-fit:cover}
.game__b{padding:16px 18px 18px}
.game__k{
  display:block;margin-bottom:9px;color:var(--muted);
  font:700 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
}
.game__k i{color:var(--gold);font-style:normal}
.game h3{font-size:18px;font-weight:800;margin-bottom:7px}
.game__m{color:var(--muted);font-size:13px}
.game__go{margin-top:12px;display:inline-block;color:var(--gold);font-weight:700;font-size:14px}
.note{
  margin-top:26px;background:var(--card);border-left:3px solid var(--gold);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:24px 28px;
  display:grid;grid-template-columns:180px 1fr;gap:18px;
}
.note b{
  color:var(--gold);font:700 13px/1.4 var(--f);letter-spacing:.16em;text-transform:uppercase;
}

/* ---------------------------------------------------------- две колонки */
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 46px}
.cols p{font-size:15px}

/* ---------------------------------------------------------- полевой журнал */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  padding:24px 26px 26px;
}
.jcard i{
  display:block;margin-bottom:14px;color:var(--gold);
  font:700 12px/1 var(--f);font-style:normal;letter-spacing:.14em;
}
.jcard p{font-size:15px}

/* ---------------------------------------------------------- FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px}
.faq__t h2{font-size:clamp(28px,3.6vw,46px);font-weight:800}
.faq__k{
  display:block;margin-bottom:16px;color:var(--gold);
  font:700 12px/1 var(--f);letter-spacing:.18em;
}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa__q{
  width:100%;display:flex;align-items:center;gap:12px;
  background:none;border:0;padding:20px 0;cursor:pointer;text-align:left;
  color:var(--gold);font:700 16px/1.4 var(--f);
}
.qa__q svg{width:13px;height:13px;fill:currentColor;flex:none;transition:transform .2s ease}
.qa.is-open .qa__q svg{transform:rotate(180deg)}
.qa__a{display:none;padding:0 0 20px 25px;font-size:15px}
.qa.is-open .qa__a{display:block}

/* ---------------------------------------------------------- финальный блок */
.cta{
  margin:0 0 70px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:46px 50px;
  display:flex;align-items:center;gap:34px;flex-wrap:wrap;
}
.cta__b{flex:1 1 460px}
.cta__k{
  display:block;margin-bottom:16px;color:var(--gold);
  font:700 12px/1 var(--f);letter-spacing:.18em;
}
.cta h2{font-size:clamp(26px,3.2vw,40px);font-weight:800}
.cta__act{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------------------------------------------------- футер */
.foot{
  border-top:1px solid var(--line);
  background:var(--ink-2);padding:30px 0;
}
.foot__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.foot__logo{font:800 16px/1 var(--f-d);color:var(--cream);letter-spacing:.09em}
.foot__n{flex:1 1 420px;color:var(--muted);font-size:13px;line-height:1.6}
.foot__l{display:flex;gap:20px;flex-wrap:wrap}
.foot__l a{color:var(--muted);font-size:13px}
.foot__l a:hover{color:var(--gold)}

/* ---------------------------------------------------------- адаптив */
@media (max-width:1180px){
  .games{grid-template-columns:repeat(2,1fr)}
  .journal{grid-template-columns:repeat(2,1fr)}
  .hero__body{padding:46px 38px}
}
@media (max-width:960px){
  :root{--pad:20px;--hdr:70px}
  .hero{grid-template-columns:1fr}
  .hero__art{min-height:0;order:-1}
  .hero__art img{height:auto;aspect-ratio:4/3}
  .stats{position:static;padding:16px 20px 4px;justify-content:flex-start}
  .qnav{grid-template-columns:repeat(2,1fr);gap:14px}
  .routes{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr;gap:16px}
  .faq{grid-template-columns:1fr;gap:24px}
  .note{grid-template-columns:1fr;gap:10px}
  .nav{display:none}
  .cta{padding:34px 26px}
}
@media (max-width:640px){
  :root{--rail:0px;--pad:16px}
  .rail{display:none}
  .hdr__in{gap:10px}
  .logo{gap:8px}
  .logo__m{width:22px;height:22px}
  .logo__t{font-size:16px;letter-spacing:.05em}
  .hdr__act{gap:8px}
  .stat{min-width:0;padding:10px 12px}
  .games{grid-template-columns:1fr}
  .journal{grid-template-columns:1fr}
  .hero__body{padding:34px 22px}
  .btn{height:40px;padding:0 14px;font-size:13px}
  .btn--lg{height:48px;padding:0 22px;font-size:15px}
  .sec{padding:46px 0}
  .shead{gap:16px}
  .shead__n{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}