:root {
  --parchment: #e8dcc0;
  --ink: #2a2118;
  --panel-bg: rgba(24, 18, 12, 0.92);
  --accent: #d4a349;
  --accent-dim: #8a6a2f;
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  width: 100%;
  height: 100%;
}

canvas { display: block; }

.hidden { display: none !important; }

/* ---------- Loading ---------- */
#loading-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #1c150d 0%, #0a0705 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  transition: opacity 0.6s ease;
}
#loading-screen.fade-out { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; color: var(--parchment); width: 320px; }
.loading-inner h1 { letter-spacing: 0.12em; font-weight: normal; margin-bottom: 1.4em; }
#loading-bar-track {
  height: 8px; background: #3a2e1e; border: 1px solid var(--accent-dim);
  border-radius: 4px; overflow: hidden;
}
#loading-bar {
  height: 100%; width: 0%; background: var(--accent);
  transition: width 0.25s ease;
}
#loading-status { margin-top: 0.9em; font-size: 0.85em; color: #b9a884; font-style: italic; }

/* ---------- Panels (start / riddle / journal / accusation) ----------
 * `safe center` and not `center` (#132). These scroll now: the journal holds
 * up to 39 clues and the accusation panel holds thirteen names and the whole
 * journal under them, so both are taller than the window on any short screen.
 * A centred flex child that overflows puts its own top ABOVE the scroll
 * origin, where no scrollbar can reach it — Torchbearer's title screen lost its
 * top three buttons to exactly this. `safe` makes an overflowing child align to
 * the start instead, and the padding keeps it off the edge. */
#start-overlay, #riddle-overlay, #journal-overlay, #accusation-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: safe center; justify-content: safe center;
  overflow-y: auto;
  padding: 2em 1em;
  background: rgba(0, 0, 0, 0.55);
  z-index: 50;
}
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  color: var(--parchment);
  max-width: 460px;
  padding: 2em 2.4em;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}
#journal-overlay .panel, #accusation-overlay .panel { max-width: 620px; text-align: left; }
.panel h1, .panel h2 { font-weight: normal; letter-spacing: 0.08em; color: var(--accent); margin-top: 0; }
.controls-hint { font-size: 0.8em; color: #b9a884; }

button {
  font-family: inherit;
  font-size: 1em;
  color: var(--ink);
  background: var(--accent);
  border: none;
  border-radius: 4px;
  padding: 0.6em 1.6em;
  cursor: pointer;
  margin-top: 0.6em;
}
button:hover { background: #e6bb63; }

/* THE START PANEL'S THREE CONTROLS, EACH ON ITS OWN LINE (#755). `SPECS.md`'s
   word for where the second door goes is "under" the first, and a button is
   inline by default: the panel is 460 px wide with 2.4em of padding a side, so
   "Walk the castle", "Straight to the day of the death" and "Touch controls:
   off" left to flow come out as two ragged lines with the second door beside
   the first rather than below it. Scoped to this panel, because the riddle's
   two buttons and the journal's one are laid out side by side on purpose. */
#start-overlay .panel button { display: block; margin-left: auto; margin-right: auto; }

/* ---------- HUD ---------- */
#crosshair {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,0.7);
  font-size: 28px;
  z-index: 10;
  pointer-events: none;
}

#quest-tracker {
  position: fixed; top: 16px; right: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 5px;
  color: var(--parchment);
  padding: 0.7em 1em;
  max-width: 260px;
  font-size: 0.85em;
  z-index: 10;
}
.tracker-title { color: var(--accent); font-size: 0.8em; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.3em; }
/* The bell the castle is on. Sits above the objective because it is the thing
   that changes under the player rather than the thing they are doing. */
.tracker-watch { color: var(--accent); font-size: 1.05em; margin-bottom: 0.35em; }
/* Where the player is, by the mystery's own room names (#515). Under the
   objective, dimmer than it: a bearing, not a task. */
.tracker-room { color: var(--parchment); opacity: 0.7; font-size: 0.9em; margin-top: 0.45em; font-style: italic; }

#interact-prompt {
  position: fixed; bottom: 22%; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: var(--parchment);
  padding: 0.4em 1em;
  border-radius: 4px;
  font-size: 0.9em;
  z-index: 10;
  pointer-events: none;
}

/* ---------- Dialogue ---------- */
#dialogue-box {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  width: min(640px, 90vw);
  background: var(--panel-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  color: var(--parchment);
  padding: 1em 1.4em 0.8em;
  z-index: 20;
}
#dialogue-name { color: var(--accent); letter-spacing: 0.1em; font-size: 0.85em; text-transform: uppercase; margin-bottom: 0.4em; }
#dialogue-text { line-height: 1.5; min-height: 2.6em; white-space: pre-wrap; }
#dialogue-continue { text-align: right; font-size: 0.75em; color: #b9a884; margin-top: 0.5em; }

/* ---------- Riddle ---------- */
#riddle-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.05em;
  padding: 0.55em 0.8em;
  background: #14100b;
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  color: var(--parchment);
  outline: none;
  margin-top: 0.8em;
}
#riddle-input:focus { border-color: var(--accent); }
.riddle-buttons { display: flex; gap: 0.8em; justify-content: center; }
#riddle-feedback { min-height: 1.4em; color: #d98f6a; font-style: italic; font-size: 0.9em; }

/* ---------- Toast: what the castle says back ---------- */
#toast {
  position: fixed;
  top: 58%; left: 50%;
  transform: translateX(-50%);
  max-width: min(520px, 86vw);
  text-align: center;
  background: var(--panel-bg);
  border: 1px solid var(--accent-dim);
  color: var(--parchment);
  padding: 0.5em 1.1em;
  border-radius: 4px;
  font-size: 0.95em;
  z-index: 25;
  pointer-events: none;
}

/* The open-quests tab (#595): a finished errand stays on the page, under its
 * own heading and struck through, rather than vanishing the moment it is done. */
.journal-done-head {
  color: var(--accent-dim);
  font-size: 0.85em; font-weight: normal;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 1.2em 0 0.5em;
}
.journal-row.quest-done b { text-decoration: line-through; }
.journal-row.quest-done { opacity: 0.68; }

/* ---------- The caption band: a sermon, a song (#592) ----------
 * Top centre, clear of the tracker (top right), the toast (58%), the interact
 * prompt (bottom 22%) and the dialogue box (bottom 32px), because a sermon runs
 * for the better part of a minute and every one of those can happen over it.
 * No border and no panel: this is a voice in the room, not a thing on the HUD. */
#caption {
  position: fixed;
  top: 13%; left: 50%;
  transform: translateX(-50%);
  width: min(620px, 88vw);
  text-align: center;
  color: var(--parchment);
  text-shadow: 0 1px 4px #000, 0 0 12px #000;
  z-index: 15;
  pointer-events: none;
}
#caption-name {
  color: var(--accent);
  font-size: 0.8em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.35em;
}
#caption-line { font-size: 1.05em; font-style: italic; line-height: 1.45; }

/* ---------- The journal, and the same list offered as a picker ---------- */
#dialogue-present { margin-top: 0; padding: 0.35em 1em; font-size: 0.85em; }
#journal-list { max-height: min(52vh, 480px); overflow-y: auto; margin: 1em 0; }
.journal-row {
  display: block; width: 100%; text-align: left;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  color: var(--parchment);
  font-family: inherit; font-size: 0.9em;
  padding: 0.6em 0.9em;
  margin: 0 0 0.5em;
}
button.journal-row { cursor: pointer; }
button.journal-row:hover { background: rgba(212, 163, 73, 0.18); border-color: var(--accent); }
.journal-row b { display: block; color: var(--accent); margin-bottom: 0.2em; }
.journal-row span { line-height: 1.45; }
.journal-empty { color: #b9a884; font-style: italic; }

/* Two tabs (#551), shown only when the journal is opened cold on J; a
   conversation's Present picker keeps the plain h2 it always had. */
.journal-tabs { display: flex; gap: 0.5em; margin-bottom: 0.8em; }
.journal-tab {
  flex: 1; font-family: inherit; font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--accent-dim); border-radius: 4px;
  color: #b9a884; padding: 0.5em 0.6em; cursor: pointer;
}
.journal-tab.active { color: var(--accent); border-color: var(--accent); background: rgba(212, 163, 73, 0.12); }

/* The map, the journal's third tab (#589): one SVG per storey in world
   metres, the rooms the plan builds as the shapes the plan gives them. A
   visited room is filled; the one the HUD names is ringed; the rest are
   outlines, and their names are withheld under the drawing so the list is a
   count of what is left rather than a spoiler of where it is. */
.journal-map-count { color: #b9a884; font-style: italic; margin: 0 0 0.6em; }
.map-storey { margin-bottom: 1em; }
.map-storey h3 { font-weight: normal; font-size: 0.85em; letter-spacing: 0.06em; text-transform: uppercase; color: #b9a884; margin: 0.4em 0 0.3em; }
.map-plan { display: block; width: 100%; height: auto; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--accent-dim); border-radius: 4px; }
.map-plan .map-room { fill: rgba(0, 0, 0, 0); stroke: var(--accent-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-plan .map-room.visited { fill: rgba(212, 163, 73, 0.45); stroke: var(--accent); }
.map-plan .map-room.here { stroke: var(--parchment); stroke-width: 2; }
/* A room outside the walls (#726): seen, never stood in, so never filled. */
.map-plan .map-room.seen { fill: none; stroke-dasharray: 4 3; }
.map-names { display: flex; flex-wrap: wrap; gap: 0.25em 0.6em; margin-top: 0.4em; font-size: 0.8em; }
.map-names .map-room { color: #7d6d52; }
.map-names .map-room.visited { color: var(--parchment); }
.map-names .map-room.here { color: var(--accent); }

/* ---------- The accusation ---------- */
#accusation-note { color: #d98f6a; font-style: italic; min-height: 1.2em; }
#accusation-count { color: #b9a884; font-size: 0.8em; letter-spacing: 0; text-transform: none; }
.pick-grid { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.6em 0 1.2em; }
#accusation-clues { max-height: min(34vh, 300px); overflow-y: auto; }
.pick-person, .pick-clue {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--accent-dim);
  color: var(--parchment);
  font-size: 0.85em;
  padding: 0.4em 0.8em;
  margin-top: 0;
}
.pick-person:hover, .pick-clue:hover { background: rgba(212, 163, 73, 0.18); border-color: var(--accent); }
.pick-person.on, .pick-clue.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
#accusation-say:disabled { background: #6b5a3a; color: #2a2016; cursor: default; }
#accusation-pick h3 { font-weight: normal; letter-spacing: 0.08em; color: var(--accent); font-size: 0.95em; margin-bottom: 0; }
#verdict-pane { text-align: center; }
#verdict-pane p { line-height: 1.55; }
#verdict-epilogue { color: #c6b892; font-style: italic; }
/* Quieter than the epilogue and separated from it: the sheet is the verdict,
   and this is the thing the sheet does not carry (BACKLOG.md rank 8). */
#verdict-reputation { color: #9a8f77; font-size: 0.92em; border-top: 1px solid rgba(198, 184, 146, 0.22); padding-top: 0.9em; margin-top: 1.1em; }

/* ---------- The thumb's HUD (#530) ----------
 * Hidden unless the page decides it is on a touch device or the start panel's
 * toggle says so. The sticks are halves of the canvas, not elements: what is
 * here is the ring that follows the left thumb and the two buttons that are E
 * and J. `touch-action: none` on the HUD and the canvas is what stops the
 * browser turning a drag into a scroll before the page ever sees the move.
 */
#touch-hud {
  position: fixed;
  inset: 0;
  pointer-events: none; /* the sticks are the canvas underneath; only the buttons take taps */
  z-index: 40;
  touch-action: none;
}
body.touch canvas { touch-action: none; }
#touch-ring {
  position: absolute;
  width: 112px; height: 112px;
  margin: -56px 0 0 -56px;
  border: 2px solid rgba(212, 163, 73, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}
#touch-knob {
  position: absolute;
  width: 46px; height: 46px;
  left: 33px; top: 33px;
  border-radius: 50%;
  background: rgba(212, 163, 73, 0.38);
  border: 1px solid rgba(212, 163, 73, 0.7);
}
#touch-e, #touch-j {
  position: absolute;
  pointer-events: auto;
  margin: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--accent-dim);
  color: var(--parchment);
  font-family: inherit;
  letter-spacing: 0.04em;
}
#touch-e {
  right: 5vw; bottom: 16vh;
  width: 92px; height: 92px;
  font-size: 0.82em;
  line-height: 1.15;
  padding: 0 0.4em;
}
#touch-j {
  right: 5vw; bottom: 5vh;
  width: 66px; height: 66px;
  font-size: 0.66em;
}
#touch-e:active, #touch-j:active { background: rgba(212, 163, 73, 0.3); }
.link-button {
  background: none;
  border: none;
  color: var(--accent-dim);
  font-family: inherit;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 0.6em;
  padding: 0.3em;
}
.link-button:hover { color: var(--accent); }