/* ═══════════════════════════════════════════════════════════════════
   «Игра за выходные» — единая дизайн-система сайта и курса.
   Один источник правды: токены, типографика, компоненты, ритм секций.
   Подключать первым: <link rel="stylesheet" href="/css/site.css">
   Дисциплина цвета (не нарушать!):
     мятный  — ТОЛЬКО главные действия (primary CTA, «сделано»)
     золотой — ТОЛЬКО награды/звания/родительский блок
     красный — ТОЛЬКО таймер цены запуска и ошибки
     синий   — ТОЛЬКО текстовые ссылки и подзаголовки-кики
   ═══════════════════════════════════════════════════════════════════ */

/* ── шрифты: самохост, кириллица, не зависим от Google ── */
@font-face{font-family:'Unbounded';src:url('/font/unbounded.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('/font/manrope.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;}

:root{
  /* фон: не плоский, а три слоя глубины */
  --bg:#0B1020; --bg2:#0E1526; --card:#161F35; --card2:#1B2540;
  --line:#233150; --line2:#2C3A5C;
  /* акценты */
  --green:#37E0A6; --green-d:#1FB483; --green-glow:rgba(55,224,166,.22);
  --blue:#7AA2FF; --gold:#FFC94A; --red:#FF7A90; --violet:#A98BFF;
  /* текст */
  --white:#F3F7FF; --text:#DCE6F7; --muted:#93A4C0; --dim:#6C7C99;
  /* геометрия */
  --r:16px; --r-sm:10px; --r-lg:22px; --r-pill:999px;
  --sh:0 18px 48px rgba(3,7,18,.55); --sh-sm:0 8px 24px rgba(3,7,18,.4);
  --disp:'Unbounded','Manrope',system-ui,sans-serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1080px; --wrap-narrow:820px;
  --navh:56px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 14px);}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  font-weight:400;letter-spacing:-.005em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* атмосфера: сетка + зерно поверх фона, но под контентом */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(122,162,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(122,162,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");}
body>*{position:relative;z-index:1;}

/* ── типографика ─────────────────────────────────────────────── */
h1,h2,h3,.disp{font-family:var(--disp);font-weight:800;color:var(--white);
  letter-spacing:-.035em;line-height:1.06;margin:0 0 .5em;}
h1{font-size:clamp(30px,5.2vw,58px);}
h2{font-size:clamp(24px,3.4vw,38px);letter-spacing:-.03em;}
h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.025em;font-weight:700;}
p{margin:0 0 1em;}
strong,b{color:var(--white);font-weight:700;}
a{color:var(--blue);text-decoration:none;transition:color .15s;}
a:hover{color:#A9C4FF;}
.lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--text);max-width:62ch;}
.muted{color:var(--muted);}
.small{font-size:14.5px;}
.fine{font-size:13.5px;color:var(--dim);}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.kicker,.kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;}
.kicker::before,.kick::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px var(--blue);}
.hl{color:var(--green);}
.hl-gold{color:var(--gold);}

/* ── каркас и ритм секций ────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.wrap.narrow{max-width:var(--wrap-narrow);}
.sec{padding-top:clamp(48px,7vw,86px);padding-bottom:clamp(48px,7vw,86px);}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sec-glow{position:relative;overflow:hidden;}
.sec-glow::before{content:'';position:absolute;left:50%;top:-40%;width:min(900px,120%);
  height:520px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--green-glow),transparent 72%);filter:blur(6px);}
.grid-60-40{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,54px);align-items:center;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* ── навбар ──────────────────────────────────────────────────── */
.gdnav{position:sticky;top:0;z-index:120;background:rgba(11,16,32,.78);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);}
.gdnav-in{max-width:var(--wrap);margin:0 auto;height:var(--navh);display:flex;
  align-items:center;gap:8px;padding:0 20px;}
.gdnav-brand{display:flex;align-items:center;gap:10px;color:var(--white);
  font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.03em;margin-right:auto;}
.gdnav-brand img{width:26px;height:26px;border-radius:8px;display:block;}
.gdnav-brand span{white-space:nowrap;}
.gdnav .gdnav-link,.gdnav .gdnav-sup{color:var(--muted);font-weight:700;font-size:14px;
  padding:10px 12px;border-radius:var(--r-sm);min-height:44px;display:inline-flex;align-items:center;}
.gdnav .gdnav-link:hover,.gdnav .gdnav-sup:hover{color:var(--white);background:rgba(122,162,255,.09);}
/* на тренажёрах в шапке две ссылки (свой трек и карта) — на телефоне ужимаем,
   иначе строка не влезает: у названия остаётся только значок */
@media (max-width:560px){
  .gdnav-in{gap:4px;padding:0 12px;}
  .gdnav-brand span{display:none;}
  .gdnav .gdnav-link,.gdnav .gdnav-sup{padding:10px 8px;font-size:13px;}
}

/* ── кнопки: мятная одна на экран ────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:16px;font-weight:800;letter-spacing:-.01em;
  padding:15px 26px;min-height:52px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;text-align:center;transition:transform .14s,box-shadow .18s,background .18s,border-color .18s;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:linear-gradient(180deg,var(--green),var(--green-d));color:#04150E;
  box-shadow:0 10px 30px rgba(55,224,166,.28),inset 0 1px 0 rgba(255,255,255,.35);}
.btn.primary:hover{color:#04150E;box-shadow:0 14px 40px rgba(55,224,166,.42);}
.btn.ghost,.btn.secondary{background:rgba(255,255,255,.03);border-color:var(--line2);color:var(--white);}
.btn.ghost:hover,.btn.secondary:hover{border-color:var(--blue);background:rgba(122,162,255,.08);color:var(--white);}
.btn.gold{background:transparent;border-color:var(--gold);color:var(--gold);}
.btn.wide{width:100%;}
.btn[disabled]{opacity:.5;cursor:default;}
.cta{display:inline-flex;}
a.cta,.cta a{text-decoration:none;}
.link-arrow{font-weight:800;border-bottom:1.5px solid rgba(122,162,255,.4);padding-bottom:1px;}

/* ── карточки и блоки ────────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-sm);}
.card.flat{background:var(--card);box-shadow:none;}
.card>:first-child{margin-top:0;}
.card>:last-child{margin-bottom:0;}
.card-hover{transition:transform .16s,border-color .16s;}
.card-hover:hover{transform:translateY(-3px);border-color:var(--line2);}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;min-height:38px;
  border:1px solid var(--line2);border-radius:var(--r-pill);background:rgba(255,255,255,.02);
  font-size:13.5px;font-weight:600;color:var(--text);}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.badge.green{background:var(--green);color:#04150E;}
.badge.gold{background:var(--gold);color:#231702;}
.badge.red{background:var(--red);color:#2A0A11;}
.badge.soft{background:rgba(122,162,255,.14);color:var(--blue);}
/* врезки-заметки: цвет = смысл */
.note,.quote,.box{border-left:3px solid var(--blue);background:rgba(122,162,255,.07);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;margin:16px 0;}
.note.green,.quote.green{border-left-color:var(--green);background:rgba(55,224,166,.07);}
.note.gold,.quote.gold{border-left-color:var(--gold);background:rgba(255,201,74,.07);}
.note.red,.quote.red{border-left-color:var(--red);background:rgba(255,122,144,.07);}
.note>:last-child,.quote>:last-child,.box>:last-child{margin-bottom:0;}
/* нумерованный шаг: крупная цифра дисплейным */
.num-badge{font-family:var(--disp);font-weight:900;color:var(--green);
  font-size:clamp(28px,4vw,44px);line-height:1;letter-spacing:-.04em;}
h2 .num,h2 .n{font-family:var(--mono);color:var(--green);font-size:.62em;font-weight:700;}

/* ── таблицы: без сетки рамок, только тонкие линии ───────────── */
.tblwrap,.tartbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);}
table{width:100%;border-collapse:collapse;font-size:15px;}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);}
thead th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:rgba(255,255,255,.02);}
tbody tr:last-child td{border-bottom:0;}
td.yes,.yes{color:var(--green);font-weight:800;}
td.no,.no{color:var(--dim);}

/* ── формы ───────────────────────────────────────────────────── */
input,select,textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--white);
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-sm);
  padding:14px 15px;min-height:50px;transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(55,224,166,.16);}
textarea{min-height:120px;line-height:1.55;resize:vertical;}
label{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:7px;}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:22px;accent-color:var(--green);}
.agree{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:6px 0;cursor:pointer;}
.agree span{font-size:14.5px;color:var(--text);}

/* ── прогресс уроков ─────────────────────────────────────────── */
.gdprog{display:flex;gap:6px;align-items:center;padding:9px 0;}
.gdprog a{flex:1;min-height:36px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--dim);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-sm);}
.gdprog a.done{color:var(--green);border-color:rgba(55,224,166,.35);background:rgba(55,224,166,.09);}
.gdprog a.cur{color:#04150E;background:var(--green);border-color:var(--green);font-weight:800;}

/* ── медиа ───────────────────────────────────────────────────── */
img,video,iframe,canvas,svg{max-width:100%;}
video,img{border-radius:var(--r);display:block;}
figure{margin:0;}
figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;}
/* игровые фреймы масштабируются transform — им max-width мешает */
.stage iframe{max-width:none;}

/* ── подвал ──────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);background:var(--bg2);
  padding:34px 0 42px;margin-top:clamp(40px,6vw,80px);}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  justify-content:space-between;font-size:13.5px;color:var(--dim);}
.site-foot a{color:var(--muted);}
.site-foot a:hover{color:var(--white);}

/* ── вход первого экрана: один хорошо поставленный ───────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.rise{animation:rise .6s cubic-bezier(.22,.9,.28,1) both;}
.rise:nth-child(1){animation-delay:.02s}.rise:nth-child(2){animation-delay:.08s}
.rise:nth-child(3){animation-delay:.14s}.rise:nth-child(4){animation-delay:.2s}
.rise:nth-child(5){animation-delay:.26s}.rise:nth-child(6){animation-delay:.32s}

/* ── мобильный ───────────────────────────────────────────────── */
@media (max-width:760px){
  .grid-60-40,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  body{font-size:16px;line-height:1.6;}
  .sec{padding-top:40px;padding-bottom:40px;}
  .wrap{padding:0 16px;}
}
@media (pointer:coarse),(max-width:640px){
  a,button,.btn,summary{-webkit-tap-highlight-color:rgba(122,162,255,.18);}
  .btn{min-height:52px;}
  input,select,textarea{font-size:16px;}   /* iOS не зумит страницу */
}
@media (hover:none){
  .card-hover:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;}
}
@media print{
  body::before,body::after,.gdnav,.site-foot{display:none;}
  body{background:#fff;color:#000;}
}