/* Game Dev Canon — конспекты. Mobile-first, self-contained, no CDN. */
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --border:#2a3038;
  --text:#d7dce2; --muted:#8b949e; --soft:#aeb6c0;
  --accent:#58a6ff; --green:#3fb950; --yellow:#d29922; --red:#f85149;
  --purple:#bc8cff; --teal:#39c5cf; --pink:#f778ba;
  /* эпохи/модули */
  --era1:#e3b341; --era2:#58a6ff; --era3:#3fb950; --era4:#bc8cff; --era5:#f778ba; --era6:#39c5cf;
  --maxw:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  padding:0 0 64px;
}
a{color:var(--accent);text-decoration:none}
a:active{opacity:.7}
code,pre,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:rgba(13,17,23,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);font-size:14px}
.topbar a{color:var(--muted)}
.topbar .crumb{display:flex;gap:8px;align-items:center;min-width:0}
.topbar .crumb b{color:var(--soft);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sp{flex:1}

/* ---------- index ---------- */
.wrap{max-width:920px;margin:0 auto;padding:0 16px}
.idx-hero{padding:26px 0 8px}
.idx-hero h1{font-size:26px;line-height:1.2;letter-spacing:-.3px}
.idx-lead{color:var(--soft);margin-top:8px;font-size:16px}
.idx-lead code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-size:13px;color:var(--teal)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.badge{font-size:12px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);white-space:nowrap}
.badge.FULL{color:var(--red);border-color:#6e2b28}
.badge.KEY{color:var(--yellow);border-color:#6b521a}
.badge.GIST{color:var(--accent);border-color:#274b6b}
.badge.HOME{color:var(--green);border-color:#1f6f3f}

.idxprog{margin:16px 0 6px}
.idxprog .pt{font-size:13px;color:var(--muted);margin-bottom:6px}
.idxprog .pbar{height:8px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.idxprog .pf{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--teal));transition:width .4s}

.era-sec{margin:26px 0;border-left:3px solid var(--era-c,var(--accent));padding-left:14px}
.era-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.era-h .yr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.era-h h2{font-size:18px;color:var(--era-c,var(--text))}
.era-th{color:var(--muted);font-size:14px;margin:4px 0 12px}
.cards{display:grid;grid-template-columns:1fr;gap:10px}
.card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:13px 15px;transition:border-color .15s,transform .05s}
.card:active{transform:scale(.995)}
a.card:hover{border-color:#46505e}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card .nm{font-weight:600;font-size:15.5px;color:var(--text)}
.card .yr{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.card .desc{font-size:13.5px;color:var(--muted)}
.card .dn{align-self:flex-start;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--border);color:var(--muted)}
.card .dn.FULL{color:var(--red)} .card .dn.KEY{color:var(--yellow)} .card .dn.GIST{color:var(--accent)} .card .dn.HOME{color:var(--green)}
.card.done{border-color:#1f6f3f;background:linear-gradient(180deg,#11231a,var(--panel))}
.card.done .nm::after{content:" ✓";color:var(--green)}
.card.soon{opacity:.5;pointer-events:none}
.card.soon .dn{color:var(--muted)}

/* ---------- lesson page ---------- */
.lesson{max-width:var(--maxw);margin:0 auto;padding:18px 16px 0}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--era-c,var(--teal));font-weight:700}
.lesson h1{font-size:25px;line-height:1.22;margin:6px 0;letter-spacing:-.3px}
.lesson .sub{color:var(--muted);font-size:14.5px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 4px}
.meta .badge{font-size:11.5px}
.meta .orig{margin-left:auto}
.meta .orig a{font-size:13px}

.lesson h2{font-size:19px;margin:28px 0 8px;padding-top:6px;letter-spacing:-.2px}
.lesson h3{font-size:16px;margin:20px 0 6px;color:var(--soft)}
.lesson p{margin:10px 0}
.lesson ul,.lesson ol{margin:10px 0 10px 22px}
.lesson li{margin:5px 0}
.lesson strong{color:#eef2f6}

.tldr{background:linear-gradient(180deg,#13202e,var(--panel));border:1px solid #294a6b;border-radius:12px;
  padding:14px 16px;margin:16px 0}
.tldr .h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700;margin-bottom:4px}

details.box{border:1px solid var(--border);border-radius:12px;margin:14px 0;background:var(--panel);overflow:hidden}
details.box>summary{cursor:pointer;list-style:none;padding:11px 15px;font-size:13.5px;font-weight:600;
  color:var(--soft);display:flex;align-items:center;gap:8px;background:var(--panel2)}
details.box>summary::-webkit-details-marker{display:none}
details.box>summary::before{content:"▸";color:var(--muted)}
details.box[open]>summary::before{content:"▾"}
details.box .body{padding:6px 15px 14px}
.tag{font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--border);color:var(--muted);margin-left:auto}

pre{background:#0b0f15;border:1px solid var(--border);border-radius:10px;padding:12px;overflow-x:auto;
  font-size:13px;line-height:1.5;margin:8px 0;-webkit-overflow-scrolling:touch}
code{font-size:.92em}
p code,li code{background:var(--panel2);padding:1px 6px;border-radius:5px;color:var(--teal);font-size:.86em}
.eq{background:#0b0f15;border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin:8px 0;
  overflow-x:auto;font-family:ui-monospace,Menlo,monospace;font-size:14px;color:#e6edf3}

math{font-size:1.05em}
math[display="block"]{display:block;margin:14px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.diagram{margin:16px 0;text-align:center}
.diagram svg{max-width:100%;height:auto}
.cap{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:center}

.lesson table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lesson th,.lesson td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.lesson th{background:var(--panel2);color:var(--soft);font-weight:600;font-size:12.5px;white-space:nowrap}
.lesson td strong{color:#eef2f6}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:560px){.cols2{grid-template-columns:1fr}}
.cols2 .col{border:1px solid var(--border);border-radius:10px;padding:11px 13px;font-size:13.7px;line-height:1.55;color:var(--soft);background:var(--panel2)}
.cols2 .col .ct{display:block;font-weight:600;margin-bottom:5px;font-size:13px}
.cols2 .col.good{border-color:#2ea04366;background:#0f1f14}
.cols2 .col.bad{border-color:#f8514966;background:#1f1314}
.cols2 .col.good .ct{color:#3fb950}
.cols2 .col.bad .ct{color:#f85149}

.analogy{border-left:3px solid var(--purple);background:var(--panel);border-radius:0 10px 10px 0;padding:10px 14px;margin:16px 0}
.analogy .h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);font-weight:700;margin-bottom:3px}
.why{border-left:3px solid var(--teal);background:var(--panel);border-radius:0 10px 10px 0;padding:10px 14px;margin:16px 0}
.why .h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);font-weight:700;margin-bottom:3px}

/* home-lab callout */
.homelab{border:1px solid #1f6f3f;background:linear-gradient(180deg,#0f2419,var(--panel));border-radius:12px;padding:14px 16px;margin:18px 0}
.homelab .h{font-weight:700;color:var(--green);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.homelab .meta2{font-size:12.5px;color:var(--muted);margin-top:6px}

/* 🎮 play / debug / test — третий кит: запусти настоящую игру */
.playblock{border:1px solid #6e4a2d;background:linear-gradient(180deg,#241a12,var(--panel));border-radius:12px;padding:14px 16px;margin:18px 0;font-size:14px}
.playblock>.h{font-weight:700;color:#e3934a;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.playblock .tier{margin:11px 0;border-top:1px solid #3a2c1c;padding-top:9px}
.playblock .tier:first-of-type{border-top:0;padding-top:2px}
.playblock .tier .tl{font-weight:650;color:var(--soft);font-size:13.5px}
.playblock .tier .tl .tag{font-size:11px;color:var(--muted);font-weight:500;margin-left:6px}
.playblock ul{margin:6px 0 4px 20px}
.playblock li{margin:4px 0;font-size:13.5px}
.playblock .meta2{font-size:12.5px;color:var(--muted);margin-top:8px;border-top:1px solid #3a2c1c;padding-top:8px}

/* 🕹 в какие игры поиграть: case studies с конкретным «сыграй и заметь» */
.cases{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.case{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:0 10px 10px 0;padding:10px 14px}
.case .cn{font-weight:650;color:var(--soft);font-size:15px;margin-bottom:2px}
.case .cn .ct{font-size:11px;font-weight:500;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:1px 8px;margin-left:8px;white-space:nowrap;display:inline-block}
.case p{margin:6px 0;font-size:13.5px}
.case p.play{background:var(--panel2);border-radius:8px;padding:7px 10px;color:var(--soft)}
.case p.play strong{color:#e3934a}

/* 🔁 transfer-блок: перенос геймдев-приёма на другие сферы (ML и т.д.) */
.transfer{border:1px solid #294a6b;background:linear-gradient(180deg,#101c2b,var(--panel));border-radius:12px;padding:14px 16px;margin:18px 0;font-size:14px}
.transfer>.h{font-weight:700;color:#58a6ff;margin-bottom:4px}
.transfer .dom{margin:7px 0;font-size:13.5px}
.transfer .dom b{color:var(--soft)}
.transfer .dom.ml{background:var(--panel2);border-radius:8px;padding:7px 10px;border-left:3px solid var(--pink)}
.transfer .dom.ml strong{color:var(--pink)}

/* connections */
.connections{margin:20px 0}
.connections .h{font-size:13px;font-weight:700;color:var(--soft);margin-bottom:8px}
.conn{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);font-size:14px}
.conn:last-child{border-bottom:0}
.conn .rel{flex:0 0 auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;border:1px solid var(--border);text-transform:uppercase;letter-spacing:.03em}
.conn .rel.pre{color:var(--accent)} .conn .rel.next{color:var(--green)} .conn .rel.vs{color:var(--yellow)}

/* Q&A */
.qa{margin:22px 0}
.qa>.h{font-size:13px;font-weight:700;color:var(--soft);margin-bottom:8px}
details.q{border-bottom:1px solid var(--border);padding:4px 0}
details.q>summary{cursor:pointer;list-style:none;padding:9px 0;font-weight:600;font-size:15px;color:var(--text);display:flex;gap:9px}
details.q>summary::-webkit-details-marker{display:none}
details.q>summary::before{content:"?";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--border);color:var(--yellow);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
details.q[open]>summary{color:var(--accent)}
details.q .a{padding:2px 0 12px 29px;color:var(--soft);font-size:14.5px}

/* хардкор — опциональная вкладка с математикой/теорией, можно скипнуть */
details.hardcore{border:1px solid #4a3a6e;border-left:3px solid var(--purple);border-radius:12px;margin:18px 0;
  background:linear-gradient(180deg,#181426,var(--panel));overflow:hidden}
details.hardcore>summary{cursor:pointer;list-style:none;padding:12px 15px;font-weight:700;font-size:14px;
  color:var(--purple);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
details.hardcore>summary::-webkit-details-marker{display:none}
details.hardcore>summary::before{content:"🔬";font-size:15px}
details.hardcore>summary .skip{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);
  border:1px solid var(--border);padding:1px 8px;border-radius:20px}
details.hardcore[open]>summary{border-bottom:1px solid #2e2545}
details.hardcore .body{padding:10px 16px 16px;font-size:14.5px}
details.hardcore .body h4{margin:14px 0 5px;font-size:13.5px;color:var(--soft)}
details.hardcore .body .eq{font-size:13px}
details.hardcore .body ul,details.hardcore .body ol{margin:8px 0 8px 20px}
/* флейворы хардкора: 🛠 инженерия / 🎲 дизайн / 💰 экономика / ☁ хостинг (теория — дефолт, фиолетовая) */
details.hardcore.eng{border-color:#2d4f6e;border-left-color:var(--accent);background:linear-gradient(180deg,#10202e,var(--panel))}
details.hardcore.eng>summary{color:var(--accent)}
details.hardcore.eng>summary::before{content:"🛠"}
details.hardcore.design{border-color:#1f5f3a;border-left-color:var(--green);background:linear-gradient(180deg,#102419,var(--panel))}
details.hardcore.design>summary{color:var(--green)}
details.hardcore.design>summary::before{content:"🎲"}
details.hardcore.econ{border-color:#6b561a;border-left-color:var(--yellow);background:linear-gradient(180deg,#211c0d,var(--panel))}
details.hardcore.econ>summary{color:var(--yellow)}
details.hardcore.econ>summary::before{content:"💰"}
details.hardcore.ops{border-color:#1f5d63;border-left-color:var(--teal);background:linear-gradient(180deg,#0f2427,var(--panel))}
details.hardcore.ops>summary{color:var(--teal)}
details.hardcore.ops>summary::before{content:"☁"}

.readmore{margin:22px 0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.readmore .h{font-size:13px;font-weight:700;color:var(--soft);margin-bottom:6px}
.readmore ul{margin-left:18px}
.readmore li{font-size:14px;margin:6px 0}

/* lesson nav */
.lessonnav{display:flex;align-items:center;gap:10px;margin:30px 0 10px;flex-wrap:wrap}
.lessonnav a{flex:1;min-width:130px;background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;font-size:13.5px;color:var(--soft)}
.lessonnav a.next{text-align:right}
.lessonnav a .l{display:block;font-size:11px;color:var(--muted)}
.readbtn{display:block;width:100%;margin:14px 0 0;padding:12px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel2);color:var(--soft);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.readbtn.done{background:#0f2e1c;border-color:var(--green);color:var(--green)}

footer{max-width:var(--maxw);margin:26px auto 0;padding:16px;border-top:1px solid var(--border);color:var(--muted);font-size:12.5px}

@media(min-width:760px){
  body{font-size:18px}
  .cards{grid-template-columns:1fr 1fr}
  .idx-hero h1{font-size:32px}
  .lesson h1{font-size:30px}
}

/* --- language switch (RU ↔ EN mirror) --- */
.topbar .lang{flex:0 0 auto;font-weight:600;letter-spacing:.04em;font-size:12px;
  color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:3px 8px;line-height:1.4}
.topbar .lang:hover{color:var(--text);border-color:var(--muted)}