:root {
  --paper: #f3efe7;
  --paper-2: #e9e3d7;
  --ink: #23201b;
  --muted: #7a7267;
  --line: rgba(35, 32, 27, 0.12);
  --card: rgba(251, 249, 245, 0.86);
  --accent: #c2410c;
  --good: #3f7d4e;
  --bad: #b3261e;
  --serif: Fraunces, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow: 0 10px 30px rgba(60, 45, 20, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse at 50% 42%, #faf8f3 0%, var(--paper) 55%, var(--paper-2) 100%);
  color: var(--ink);
  font: 14px/1.45 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.glass {
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* ---------- brand ---------- */
.brand { position: fixed; top: 22px; left: 26px; pointer-events: none; }
.brand h1 { margin: 0; font: 600 26px/1 var(--serif); letter-spacing: -0.01em; }
.brand p { margin: 6px 0 0; font: 11px var(--mono); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- search ---------- */
.search { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); z-index: 5; }
.search input {
  width: 100%; padding: 11px 16px; border-radius: 12px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); outline: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.search input:focus { border-color: rgba(194, 65, 12, 0.45); }
.search ul {
  list-style: none; margin: 6px 0 0; padding: 6px; border-radius: 12px; max-height: 50vh; overflow: auto;
  background: rgba(251, 249, 245, 0.97); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.search li { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.search li .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.search li .n { margin-left: auto; font: 11px var(--mono); color: var(--muted); }
.search li.on, .search li:hover { background: rgba(35, 32, 27, 0.06); }
.search li.empty { color: var(--muted); cursor: default; }

/* ---------- systems ---------- */
.systems {
  position: fixed; top: 92px; left: 20px; width: 220px; max-height: calc(100% - 180px); overflow: auto;
  padding: 14px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.systems h2, .card .chip, .quiz-label {
  margin: 0 0 10px; font: 500 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
#layerList, #systemList { list-style: none; margin: 0; padding: 0; }
#layerList li {
  display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 10px; cursor: pointer; user-select: none;
  color: var(--muted); font-size: 14.5px; transition: background 0.15s, color 0.15s;
}
#layerList li:hover { background: rgba(35, 32, 27, 0.05); }
#layerList li.on { color: var(--ink); font-weight: 500; }
#layerList .sw { width: 16px; height: 16px; border-radius: 5px; flex: none; opacity: 0.25; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#layerList li.on .sw { opacity: 1; }
#layerList .check { margin-left: auto; width: 30px; height: 18px; border-radius: 999px; background: rgba(35, 32, 27, 0.14); position: relative; transition: background 0.2s; }
#layerList .check::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#layerList li.on .check { background: var(--accent); }
#layerList li.on .check::after { transform: translateX(12px); }
.more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.more summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 6px; }
.more[open] summary { margin-bottom: 4px; }
#systemList li {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: pointer; user-select: none;
  color: var(--muted); transition: background 0.15s, color 0.15s;
}
#systemList li:hover { background: rgba(35, 32, 27, 0.05); }
#systemList li.on { color: var(--ink); }
#systemList .sw { width: 12px; height: 12px; border-radius: 4px; flex: none; opacity: 0.3; transition: opacity 0.15s; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#systemList li.on .sw { opacity: 1; }
#systemList .n { margin-left: auto; font: 11px var(--mono); color: var(--muted); }
#systemList li.loading .n::after { content: " …"; }
.systems-toggle { display: none; }

/* ---------- info card ---------- */
.card {
  position: fixed; top: 92px; right: 20px; width: 300px; padding: 18px 18px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: rise 0.25s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.card .chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.card .chip i { width: 8px; height: 8px; border-radius: 50%; }
.card h2 { margin: 0; font: 600 21px/1.2 var(--serif); }
.card .meta { margin: 6px 0 0; font: 11px var(--mono); color: var(--muted); }
.card .desc { margin: 12px 0 0; color: #4a443b; font-size: 13px; }
.card .close { position: absolute; top: 10px; right: 12px; font-size: 20px; color: var(--muted); line-height: 1; padding: 4px; }
.partof { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.partof:empty { display: none; }
.partof::before { content: "Part of"; width: 100%; font: 10.5px var(--mono); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.partof button { padding: 3px 9px; border-radius: 999px; background: rgba(35, 32, 27, 0.06); font-size: 12px; }
.partof button:hover { background: rgba(194, 65, 12, 0.12); color: var(--accent); }
.actions { display: flex; gap: 6px; margin-top: 14px; }
.actions button, .dock button, .banner button, .quiz button {
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); font-size: 12.5px; background: rgba(255, 255, 255, 0.5);
}
.actions button:hover, .dock button:hover, .banner button:hover, .quiz button:hover { border-color: rgba(35, 32, 27, 0.35); }
.actions button { flex: 1; }

/* ---------- welcome / tour ---------- */
.welcome, .tour {
  position: fixed; z-index: 7; border-radius: 18px; padding: 22px 22px 18px;
  background: rgba(251, 249, 245, 0.95); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(60, 45, 20, 0.22);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fade 0.3s ease;
}
@keyframes fade { from { opacity: 0; } }
/* centred with margins, not transform, so the fade-in can't fight the centring */
.welcome { inset: 0; margin: auto; height: fit-content; width: min(400px, calc(100% - 32px)); }
.welcome h2, .tour h2 { margin: 0; font: 600 24px/1.2 var(--serif); }
.welcome p, .tour p { margin: 8px 0 0; color: #4a443b; }
.welcome ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.welcome li { padding-left: 18px; position: relative; }
.welcome li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.welcome .row, .tour .row { display: flex; gap: 8px; margin-top: 18px; }
.welcome .row button, .tour .row button {
  flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); font-weight: 500;
}
button.primary { background: var(--ink) !important; color: var(--paper); border-color: var(--ink) !important; }
.tour { right: 20px; top: 92px; width: 320px; }
.tour .close { position: absolute; top: 10px; right: 12px; font-size: 20px; color: var(--muted); line-height: 1; padding: 4px; }
.tour-step { font: 500 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.hint {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; color: var(--muted); pointer-events: none; transition: opacity 0.6s;
}
.hint.gone { opacity: 0; }

/* ---------- banner / quiz ---------- */
.banner, .quiz {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.banner { display: flex; gap: 12px; align-items: center; padding: 6px 6px 6px 14px; font-size: 13px; }
.quiz { padding: 14px 16px; text-align: center; width: 280px; top: 92px; left: auto; right: 20px; transform: none; }
.quiz-label { margin: 0; }
.quiz-target { font: 600 22px/1.25 var(--serif); margin: 2px 0 10px; }
.quiz-row { display: flex; gap: 6px; justify-content: center; align-items: center; }
.quiz-score { font: 12px var(--mono); color: var(--muted); margin-right: auto; }
.quiz.good { box-shadow: 0 0 0 2px var(--good), var(--shadow); }
.quiz.bad { box-shadow: 0 0 0 2px var(--bad), var(--shadow); }

/* ---------- dock ---------- */
.dock {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.explode { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.explode input { width: 130px; accent-color: var(--accent); }
.explode span, .dock button { white-space: nowrap; }
#quizBtn.on { background: var(--ink); color: var(--paper); }

.tooltip {
  position: fixed; z-index: 6; pointer-events: none; padding: 4px 9px; border-radius: 7px; font-size: 12px;
  background: rgba(35, 32, 27, 0.88); color: #fbf8f2; transform: translate(14px, 10px); white-space: nowrap;
}
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s, opacity 0.6s; }
.progress.done i { opacity: 0; }

.credit {
  position: fixed; left: 0; right: 0; bottom: 10px; text-align: center; padding: 0 16px;
  font-size: 10.5px; color: var(--muted);
}
.credit a { color: inherit; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .brand { top: 14px; left: 16px; }
  .brand h1 { font-size: 20px; }
  .brand p { display: none; }
  .search { top: 12px; left: auto; right: 16px; transform: none; width: calc(100% - 150px); }
  .search input { padding: 9px 12px; }
  .systems-toggle {
    display: block; position: fixed; top: 60px; left: 16px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .systems { top: 100px; left: 16px; right: 16px; width: auto; max-height: 55vh; display: none; z-index: 5; }
  .systems.open { display: block; }
  .card { top: auto; bottom: 96px; left: 16px; right: 16px; width: auto; max-height: 45vh; overflow: auto; }
  .banner { top: 58px; max-width: calc(100% - 32px); }
  .tour { top: auto; bottom: 96px; left: 16px; right: 16px; width: auto; padding: 16px; }
  .tour h2 { font-size: 20px; }
  .hint { display: none; }
  .quiz { top: auto; bottom: 96px; left: 16px; right: 16px; width: auto; }
  .dock { bottom: 36px; max-width: calc(100% - 32px); }
  .explode input { width: 64px; }
  .dock { gap: 5px; padding-left: 10px; }
  .dock button { padding: 7px 9px; }
  .credit { font-size: 9.5px; }
}