:root {
  --bg: #14120f;
  --panel: #1c1915;
  --ink: #e8e0d0;
  --dim: #9a917e;
  --accent: #d9a548;
  --accent-dim: #8a6a30;
  --tap: #c9b98a;
  --rule: #2e2a22;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

header {
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
}
header .brand {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
header .game-title { font-style: italic; color: var(--dim); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header .stats { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }

/* ---------- two-column layout ---------- */
#layout {
  flex: 1;
  display: flex;
  min-height: 0;
}
#left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px 12px;
}
#story { max-width: 620px; margin: 0 auto; }

#story p, .detail-body p { margin-bottom: 0.9em; }
#story .room-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.2em 0 0.5em;
}
#story .echo {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-dim);
  margin: 1.1em 0 0.5em;
}
#story .echo::before { content: "> "; }
.turn { transition: opacity 0.4s ease; }
.turn.old { opacity: 0.5; }
.turn.old:hover { opacity: 0.85; }
#story em, .detail-body em { color: var(--dim); }

.tap {
  color: var(--tap);
  border-bottom: 1px dotted var(--accent-dim);
  cursor: pointer;
}
.tap:active { color: var(--accent); }

.hotcmd {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  cursor: pointer;
}
.hotcmd:active { background: rgba(217, 165, 72, 0.15); }

/* ---------- investigation panel ---------- */
#panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--rule);
  background: var(--panel);
  overflow-y: auto;
  padding: 0 14px 20px;
}
.panel-section { padding-top: 14px; }
.panel-section + .panel-section { margin-top: 18px; border-top: 1px solid var(--rule); }
.panel-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.panel-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.panel-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 14px 0 6px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--tap);
  background: rgba(217, 165, 72, 0.06);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.chips button:active { color: var(--accent); border-color: var(--accent-dim); }
#do-detail .chips { flex-direction: column; align-items: flex-start; }
#do-detail .chips button, .chips button.idea { border-color: var(--accent-dim); color: var(--accent); }
.chips button.asked { border-color: var(--rule) !important; color: var(--dim) !important; opacity: 0.75; }
.chips button.meta { color: var(--dim); border-color: var(--rule); background: transparent; }
.detail-body { font-size: 15px; margin-bottom: 4px; }

/* ---------- input bar ---------- */
#inputbar { flex-shrink: 0; }
#cmdform {
  border-top: 1px solid var(--rule);
  background: var(--panel);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
#nav, #acts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
#nav::-webkit-scrollbar, #acts::-webkit-scrollbar { display: none; }
#nav:empty { display: none; }
#nav button, #acts button.idea {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tap);
  background: rgba(217, 165, 72, 0.07);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
}
#nav button { color: var(--accent); }
#nav button:active, #acts button.idea:active { color: var(--accent); background: rgba(217, 165, 72, 0.15); }
#acts button.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
}
#acts button.meta:active { color: var(--accent); border-color: var(--accent-dim); }
#cmdform.hidden { display: none; }

#cmdform { display: flex; gap: 8px; max-width: 620px; margin: 0 auto; width: 100%; align-items: center; }
#prompt { font-family: var(--mono); color: var(--accent); font-size: 15px; }
#cmd {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  padding: 6px 0;
  caret-color: var(--accent);
}
#go {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  background: var(--accent-dim);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
}

.continue-wrap { margin: 2em 0; text-align: center; }
#continue-btn {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 14px 34px;
  cursor: pointer;
}
#continue-btn:active { background: var(--accent-dim); }

.endcard {
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 16px;
  margin: 1.5em 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--tap);
  white-space: pre-wrap;
}

/* ---------- mobile: story above, panel as the lower deck ---------- */
@media (max-width: 899px) {
  #layout { flex-direction: column; }
  #left { min-height: 0; flex: 1 1 auto; }      /* story scrolls; it must not push the deck away */
  #panel {
    width: auto;
    height: 52dvh;
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--accent-dim);
  }
  .chips button { font-size: 13px; padding: 9px 14px; }   /* thumb-sized targets */
  .panel-head { position: sticky; top: 0; background: var(--panel); padding: 6px 0; z-index: 2; }
}

@media (min-width: 900px) {
  body { font-size: 18px; }
}

.chips button.solve { border-color: var(--accent); color: var(--accent); background: rgba(217,165,72,.14); font-weight: 600; }
.chips button.locked { opacity: .55; border-style: dashed; }
.evidence-note { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--accent); margin-top: .4em; }
#do-detail .chips, #do-ideas .chips, #do-nav .chips { flex-direction: column; align-items: flex-start; }
.chips button { text-align: left; white-space: normal; max-width: 100%; }

/* ================= PALETTES =================
   paper    — inkle (80 Days), Choice of Games, Parchment: cream page, ink type. Easiest on older eyes.
   casefile  — manila folder, typewriter ink, evidence-stamp red.
   night     — the current one: candlelit leather and gold.
   slate     — modern cool dark, the Lifeline register.
   terminal  — amber phosphor on black, the Zork/VT100 nod.
   ============================================ */
:root[data-theme="paper"] {
  --bg:#f4efe5; --panel:#eae2d2; --ink:#1e1c18; --dim:#635d51;
  --accent:#8c2f22; --accent-dim:#a8695c; --tap:#403a30; --rule:#d5cbb7;
}
:root[data-theme="paper"] .chips button,
:root[data-theme="casefile"] .chips button { background: rgba(255,255,255,.55); }
:root[data-theme="paper"] .chips button.idea,
:root[data-theme="casefile"] .chips button.idea { border-color: var(--accent-dim); color: var(--accent); }
:root[data-theme="paper"] .turn.old, :root[data-theme="casefile"] .turn.old { opacity: .62; }
:root[data-theme="paper"] #continue-btn, :root[data-theme="casefile"] #continue-btn { color: #f6f2e8; }
:root[data-theme="casefile"] {
  --bg:#ded3b8; --panel:#cdc0a2; --ink:#2b2721; --dim:#6d6553;
  --accent:#a8321e; --accent-dim:#8d6a3f; --tap:#463f31; --rule:#b8aa8a;
}
:root[data-theme="slate"] {
  --bg:#171a1f; --panel:#1f242b; --ink:#dfe4ea; --dim:#8b949e;
  --accent:#6fb3c7; --accent-dim:#3f6b7a; --tap:#b6c2cf; --rule:#2b323b;
}
:root[data-theme="terminal"] {
  --bg:#0a0a08; --panel:#12100a; --ink:#ffb000; --dim:#8a6000;
  --accent:#ffcf5a; --accent-dim:#7a5400; --tap:#ffb000; --rule:#2a2000;
}
:root[data-theme="paper"] body, :root[data-theme="casefile"] body { font-size: 18px; }
#themepick {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--dim); border: 1px solid var(--rule);
  border-radius: 999px; padding: 3px 8px; margin-left: 10px; cursor: pointer;
}