/* Game Codex — публичная страница объекта знания.
   Без CDN, без внешних шрифтов: страница обязана открываться офлайн. */

:root {
  --bg: #0d1117;
  --bg-card: #131a23;
  --bg-soft: #182029;
  --line: #263140;
  --text: #e2e6ea;
  --muted: #8b98a6;
  --accent: #4d9de0;
  --green: #27ae60;
  --purple: #9b59b6;
  --orange: #e67e22;
  --teal: #1abc9c;
  --yellow: #d4b106;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.wrap { max-width: 780px; margin: 0 auto; }

.observatory-callout {
  display: grid;
  gap: .2rem;
  margin: 1rem 0 1.5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: .9rem;
}

.observatory-callout strong { color: var(--teal); }
.observatory-callout span { color: var(--muted); }

a { color: var(--accent); }
a:hover { color: #7bb8ea; }

code, pre, .mono {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
}

/* ── шапка ───────────────────────────────────────────────── */

header { padding: 2.5rem 0 1.25rem; border-bottom: 1px solid var(--line); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.75rem; }

.claim {
  font-size: 1.05rem;
  margin: 0 0 1rem;
  color: var(--text);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  background: var(--bg-soft);
  white-space: nowrap;
}

/* ── состояния ───────────────────────────────────────────── */

.state {
  margin: 2rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--muted);
}
.state.error { border-color: #6b2d2d; color: #e0a3a3; }
.state code { color: var(--text); }
[hidden] { display: none !important; }

/* ── слои ────────────────────────────────────────────────── */

.layer {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 1.1rem 1.2rem 1.3rem;
}

.layer > h2 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.15rem;
  font-weight: 600;
}
.layer > h2 .n { color: var(--accent); margin-right: 0.5rem; }
.layer > .sub { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--muted); }

#layer-answer   { border-left-color: var(--accent); }
#layer-evidence { border-left-color: var(--green); }
#layer-model    { border-left-color: var(--purple); }
#layer-play     { border-left-color: var(--orange); }
#layer-quiz     { border-left-color: var(--yellow); }
#layer-machine  { border-left-color: var(--teal); }

.layer p:last-child { margin-bottom: 0; }

blockquote {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--green);
  background: var(--bg-soft);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #cfd6dd;
}

.kv { font-size: 0.88rem; color: var(--muted); margin: 0.2rem 0; }
.kv b { color: var(--text); font-weight: 600; }

ul.pre-list { margin: 0.4rem 0 0.9rem; padding-left: 1.1rem; }
ul.pre-list li { margin: 0.25rem 0; }
ul.pre-list li code { font-size: 0.85rem; color: #d9c8ea; }

pre {
  margin: 0.5rem 0 0;
  padding: 0.8rem 0.9rem;
  background: #0a0f16;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.8rem;
  color: #b9e6db;
  line-height: 1.5;
}

/* ── доска ───────────────────────────────────────────────── */

.board-outer { overflow-x: auto; padding-bottom: 0.3rem; }

.board {
  display: grid;
  grid-template-columns: 1.2rem repeat(8, minmax(2rem, 2.6rem));
  grid-auto-rows: minmax(2rem, 2.6rem);
  width: max-content;
  margin: 0.6rem 0 0.4rem;
  user-select: none;
}

.sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sq.light { background: #b9c3cd; color: #10151b; }
.sq.dark  { background: #5d6b7a; color: #10151b; }
.sq.black-piece { color: #10151b; }
.sq.white-piece { color: #fbfdff; text-shadow: 0 0 2px #000, 0 0 1px #000; }
.sq.hl { box-shadow: inset 0 0 0 3px var(--orange); }
.sq:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.sq.selected { box-shadow: inset 0 0 0 4px var(--yellow); }
.play-status { min-height: 1.4rem; margin: 0.55rem 0 0; font-weight: 600; }
.play-status.success { color: var(--green); }
.play-answer { margin-top: 0.7rem; color: var(--muted); }
.play-answer summary { cursor: pointer; }

.coord {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--muted);
}

.legend { font-size: 0.8rem; color: var(--muted); margin: 0.4rem 0 0; }

/* ── квиз ────────────────────────────────────────────────── */

.q { margin: 0 0 1.1rem; }
.q:last-child { margin-bottom: 0; }
.q > .qt { font-weight: 600; margin: 0 0 0.5rem; }
.q ol { margin: 0 0 0.6rem; padding-left: 1.4rem; }
.q ol li { margin: 0.2rem 0; }
.q ol li.right { color: var(--green); font-weight: 600; }

details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  padding: 0.5rem 0.8rem;
}
details summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.88rem;
}
details[open] summary { margin-bottom: 0.5rem; }
details .expl { font-size: 0.9rem; margin: 0; }

/* ── подвал ──────────────────────────────────────────────── */

footer {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.idbox {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  padding: 0.5rem 0.9rem;
  margin: 0.2rem 0 1rem;
  font-size: 1rem;
  color: var(--text);
}
footer p { margin: 0.35rem 0; }

.provenance-footer {
  margin-top: 3rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 0.85rem;
  color: var(--muted);
}
.provenance-footer p { margin: 0.3rem 0; }
.provenance-footer a { color: var(--accent); text-decoration: none; }
.provenance-footer a:hover { text-decoration: underline; }
.prov-label {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-right: 0.4rem;
}

.dash { color: var(--muted); }

@media (max-width: 480px) {
  h1 { font-size: 1.35rem; }
  .layer { padding: 0.9rem 0.85rem 1.05rem; }
  .board { grid-template-columns: 1rem repeat(8, 2rem); grid-auto-rows: 2rem; }
  .sq { font-size: 1.25rem; }
}