/* Layout is authored at a fixed 1920x1080 stage, then scaled to fit the window. */
:root {
  --ink: #fff6e6;
  --ink-dim: #d8cbb2;
  --panel: rgba(20, 24, 38, 0.94);
  --panel-soft: rgba(20, 24, 38, 0.82);
  --gold: #f0c470;
  --gold-dark: #6b5426;
  --sim: #b996ff;
  --sim-bg: rgba(185, 150, 255, 0.16);
  --teal: #47d0c6;
  --terracotta: #e07650;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0e15; overflow: hidden; }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }

#viewport { position: fixed; inset: 0; overflow: hidden; background: #0d0e15; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 50% 50%;
  overflow: hidden; background: #1a1c26;
}
#world, .pixel {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
#world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }

.hidden { display: none !important; }

kbd {
  font: 700 0.8em var(--font);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 0.4em;
  margin: 0 0.15em;
  white-space: nowrap;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 32px; right: 32px; top: 24px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
#hudLeft { display: flex; gap: 14px; align-items: stretch; }
#chapterChip {
  display: flex; align-items: center; gap: 16px;
  background: var(--panel); border: 3px solid var(--gold); border-radius: 8px;
  padding: 10px 20px 10px 16px;
}
#chapterChip .t { font-size: 25px; font-weight: 700; }
#objective {
  background: var(--panel); border: 3px solid rgba(240, 196, 112, 0.5); border-radius: 8px;
  padding: 9px 22px 11px; max-width: 800px;
}
#objective .label { font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
#objective .text { font-size: 27px; font-weight: 650; line-height: 1.2; margin-top: 2px; }
#objective .sub { font-size: 20px; color: var(--ink-dim); margin-top: 3px; }
#objective.pulse { animation: pulse 1.4s ease-out 1; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 196, 112, 0.9); }
  100% { box-shadow: 0 0 0 26px rgba(240, 196, 112, 0); }
}

#hudRight { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: auto; }
#buttons { display: flex; gap: 8px; }
#buttons button {
  font: 650 18px var(--font); color: var(--ink);
  background: var(--panel-soft); border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
  padding: 7px 10px 7px 14px; cursor: pointer;
}
#buttons button:hover { border-color: var(--gold); }
#buttons button.on { border-color: var(--sim); background: rgba(70, 52, 120, 0.9); }
#keyhint { font-size: 17px; color: var(--ink-dim); background: var(--panel-soft); padding: 6px 12px; border-radius: 8px; }
.ui-quiet #buttons, .ui-quiet #keyhint { display: none; }

/* ---------- Shared panel look ---------- */
.panel {
  position: absolute;
  background: var(--panel);
  border: 4px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(14, 10, 4, 0.55), inset 0 0 0 2px var(--gold-dark);
}
.sim-chip {
  display: inline-flex; align-items: center;
  font: 800 14px var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  color: #ece3ff; background: var(--sim-bg);
  border: 2px solid var(--sim); border-radius: 999px; padding: 3px 11px;
}

/* ---------- Dialogue (bottom-left; bottom-right corner is reserved for the webcam) ---------- */
#dialogue {
  position: absolute; left: 32px; bottom: 32px; width: 1356px; min-height: 214px;
  background: var(--panel); border: 4px solid var(--gold); border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(14, 10, 4, 0.55), inset 0 0 0 2px var(--gold-dark);
  display: flex; gap: 26px; padding: 24px 34px 26px 24px; cursor: pointer;
}
#dialogue .portrait {
  width: 136px; height: 136px; flex: none;
  background: linear-gradient(#3a4562, #262d42);
  border: 3px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
#dialogue .portrait canvas { width: 128px; height: 104px; }
#dialogue.narration .portrait { display: none; }
#dialogue .body { flex: 1; min-width: 0; }
#dialogue .speaker { font-size: 26px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 14px; min-height: 32px; }
#dialogue .text { font-size: 36px; line-height: 1.32; font-weight: 500; }
#dialogue .text .rest { color: transparent; }
#dialogue.narration .text { font-style: italic; color: #f6e8cc; }
#dialogue .advance { position: absolute; right: 22px; bottom: 12px; font-size: 18px; color: var(--ink-dim); }
#dialogue.choosing .advance, #dialogue.typing .advance { visibility: hidden; }
#dialogue .choices { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
#dialogue .choices:empty { display: none; }
.choice {
  font-size: 30px; font-weight: 600; padding: 10px 18px;
  border: 3px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  display: flex; gap: 16px; align-items: center; cursor: pointer;
}
.choice .n { font-weight: 800; color: var(--gold); min-width: 26px; }
.choice.sel { border-color: var(--gold); background: rgba(240, 196, 112, 0.15); }

/* ---------- Memory stream panel (right side, above the webcam area) ---------- */
#memoryPanel { right: 32px; top: 136px; width: 470px; max-height: 410px; padding: 14px 18px 12px; overflow: hidden; }
#memoryPanel h3 { margin: 0 0 4px; font-size: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#memoryPanel .why { font-size: 17px; color: var(--ink-dim); margin-bottom: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem { padding: 7px 12px; border-radius: 8px; margin-bottom: 7px; background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; }
.mem .meta { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-dim); font-weight: 700; letter-spacing: 0.03em; }
.mem .txt { font-size: 19px; line-height: 1.28; margin-top: 2px; }
.mem.key { border-color: rgba(240, 196, 112, 0.7); }
.mem.retrieved { background: rgba(71, 208, 198, 0.13); border-color: var(--teal); }
.mem.fresh { animation: fresh 2.2s ease-out 1; }
@keyframes fresh { 0% { background: rgba(185, 150, 255, 0.55); } 100% { background: rgba(255, 255, 255, 0.05); } }
.dots { letter-spacing: 1px; color: var(--gold); }
#memoryPanel .foot { font-size: 18px; margin-top: 6px; color: var(--ink); }
#memoryPanel .empty { font-size: 19px; color: var(--ink-dim); font-style: italic; }

/* ---------- Breakdown ("why did Mara say that?") ---------- */
#breakdown { left: 32px; top: 136px; width: 1356px; height: 912px; padding: 26px 36px 22px; display: flex; flex-direction: column; }
#breakdown .head { display: flex; align-items: center; justify-content: space-between; }
#breakdown .head h2 { margin: 0; font-size: 34px; }
.pipe { display: flex; align-items: center; gap: 10px; margin: 18px 0 20px; }
.pipe .step { font-size: 20px; font-weight: 700; padding: 8px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--ink-dim); border: 2px solid transparent; }
.pipe .step.done { color: var(--ink); }
.pipe .step.cur { color: #1b1a22; background: var(--gold); }
.pipe .arrow { color: var(--ink-dim); font-size: 20px; }
#breakdown .content { flex: 1; overflow: hidden; }
#breakdown .content h3 { font-size: 30px; margin: 4px 0 14px; }
#breakdown .lead { font-size: 26px; line-height: 1.38; margin: 0 0 16px; }
#breakdown .small { font-size: 21px; line-height: 1.4; color: var(--ink-dim); }
#breakdown .quote {
  font-size: 34px; line-height: 1.35; font-weight: 600;
  background: rgba(255, 255, 255, 0.06); border-left: 6px solid var(--gold);
  padding: 18px 24px; border-radius: 8px; margin: 6px 0 18px;
}
#breakdown .card { background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(240, 196, 112, 0.6); border-radius: 10px; padding: 18px 22px; margin-bottom: 18px; }
#breakdown .card .meta { font-size: 20px; color: var(--ink-dim); font-weight: 700; }
#breakdown .card .txt { font-size: 30px; line-height: 1.32; margin: 6px 0; font-weight: 600; }
#breakdown .facts { font-size: 22px; color: var(--ink); display: flex; gap: 28px; flex-wrap: wrap; }
#breakdown .foot { display: flex; justify-content: space-between; font-size: 19px; color: var(--ink-dim); padding-top: 10px; border-top: 2px solid rgba(255, 255, 255, 0.1); }

table.rank { width: 100%; border-collapse: collapse; font-size: 21px; }
table.rank th { text-align: left; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); padding: 4px 8px 8px; }
table.rank td { padding: 7px 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); vertical-align: middle; }
table.rank tr.top td { background: rgba(71, 208, 198, 0.11); }
table.rank tr.top td:first-child { box-shadow: inset 5px 0 0 var(--teal); }
table.rank .mtxt { font-size: 21px; }
table.rank .tag { font-size: 14px; font-weight: 800; color: var(--teal); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 8px; }
.bar { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 19px; }
.bar i { display: block; height: 14px; border-radius: 3px; background: var(--gold); min-width: 2px; }
.bar.rec i { background: #7fb6ff; }
.bar.imp i { background: var(--terracotta); }
.bar.rel i { background: var(--teal); }
td.score { font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 14px; }
.legend div { font-size: 20px; line-height: 1.3; background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 10px 14px; }
.legend b { display: block; font-size: 21px; }
.legend .rec b { color: #9cc6ff; } .legend .imp b { color: #ff9a76; } .legend .rel b { color: var(--teal); }
.statelist { font: 600 24px ui-monospace, "SF Mono", Menlo, monospace; background: rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 14px 20px; line-height: 1.6; margin: 8px 0 16px; }
.statelist .k { color: var(--ink-dim); }
.statelist .v { color: var(--teal); }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.twocol > div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 16px 20px; font-size: 22px; line-height: 1.4; }
.twocol h4 { margin: 0 0 6px; font-size: 22px; }

/* ---------- World-anchored labels ---------- */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wlabel { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; }
.prompt { font-size: 21px; font-weight: 700; background: rgba(20, 24, 38, 0.9); border: 2px solid var(--gold); border-radius: 999px; padding: 4px 14px; }
.tag { font-size: 18px; font-weight: 700; background: rgba(32, 22, 58, 0.9); border: 2px solid var(--sim); border-radius: 8px; padding: 3px 10px; text-align: center; line-height: 1.25; }
.tag small { display: block; font-size: 15px; font-weight: 600; color: #ddd0ff; }
.floater { font-size: 22px; font-weight: 800; color: #f1e9ff; background: rgba(105, 70, 190, 0.92); border-radius: 999px; padding: 4px 14px; }

/* ---------- Toast + hint ---------- */
#toast { position: absolute; left: 710px; top: 140px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toastItem { font-size: 23px; font-weight: 700; background: var(--panel); border: 2px solid var(--gold); border-radius: 999px; padding: 8px 20px; display: flex; gap: 12px; align-items: center; animation: toastIn 0.25s ease-out; }
.toastItem.sim { border-color: var(--sim); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#hint { position: absolute; left: 710px; bottom: 44px; transform: translateX(-50%); font-size: 24px; font-weight: 600; background: var(--panel-soft); border-radius: 999px; padding: 10px 24px; white-space: nowrap; }

/* ---------- Full-screen cards ---------- */
#title, #chapterCard, #endCard, #chapterMenu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#title { background: linear-gradient(rgba(12, 12, 22, 0.55), rgba(12, 12, 22, 0.86)); flex-direction: column; text-align: center; padding-bottom: 60px; }
#title .kicker { font-size: 22px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 800; margin-bottom: 30px; }
#title .lines { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#title .subtitle { font-size: 40px; font-weight: 650; margin-top: 40px; }
#title .note { font-size: 24px; color: var(--ink-dim); margin-top: 16px; max-width: 1100px; line-height: 1.4; }
#title .start { font-size: 28px; margin-top: 54px; display: flex; gap: 40px; }
#chapterCard { background: rgba(10, 10, 20, 0.45); flex-direction: column; gap: 22px; text-align: center; }
#chapterCard .t { font-size: 48px; font-weight: 700; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
#chapterCard .s { font-size: 24px; color: var(--ink-dim); }
#endCard { background: rgba(10, 10, 20, 0.6); flex-direction: column; gap: 18px; text-align: center; }
#endCard .t { font-size: 52px; font-weight: 800; }
#endCard .s { font-size: 28px; color: var(--ink-dim); }
#endCard .k { font-size: 24px; margin-top: 24px; }

#chapterMenu { background: rgba(8, 8, 16, 0.86); justify-content: flex-start; padding-left: 230px; z-index: 5; }
#chapterMenu .box { width: 960px; padding: 30px 36px 24px; position: relative; }
#chapterMenu h2 { margin: 0 0 18px; font-size: 36px; display: flex; justify-content: space-between; align-items: center; }
.chap { display: flex; align-items: center; gap: 20px; font-size: 29px; padding: 10px 16px; border-radius: 10px; border: 3px solid transparent; cursor: pointer; }
.chap .n { width: 44px; font-weight: 800; color: var(--gold); }
.chap .ti { flex: 1; font-weight: 650; }
.chap .st { font-size: 19px; font-weight: 700; color: var(--teal); }
.chap.off { color: rgba(255, 246, 230, 0.42); cursor: default; }
.chap.off .n { color: rgba(240, 196, 112, 0.4); }
.chap.off .st { color: rgba(255, 246, 230, 0.4); }
.chap.sel { border-color: var(--gold); background: rgba(240, 196, 112, 0.12); }
.chap.cur .ti::after { content: "  · current"; font-size: 19px; color: var(--ink-dim); font-weight: 600; }
#chapterMenu .foot { margin-top: 16px; font-size: 19px; color: var(--ink-dim); display: flex; justify-content: space-between; }

/* ---------- Webcam guide (toggle with G) ---------- */
#webcamGuide {
  position: absolute; right: 0; bottom: 0; width: 500px; height: 300px;
  border: 4px dashed rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 24px; font-weight: 700; color: rgba(255, 255, 255, 0.85); z-index: 6;
}

/* ======================================================================
   Presentation view (slides). Light, PowerPoint-like, article palette.
   Body ends at y=780 and the footer stops at x=1356, so the bottom-right
   500x300 webcam area stays empty.
   ====================================================================== */
#slides { position: absolute; inset: 0; background: #fbfaf6; color: #1f2128; z-index: 4; }
#slides.fadein, .sl-body.fadein { animation: slIn 0.2s ease-out; }
@keyframes slIn { from { opacity: 0; } to { opacity: 1; } }
.sl-top { position: absolute; left: 96px; right: 96px; top: 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sl-kicker { font-size: 24px; font-weight: 700; color: #6b6f7c; letter-spacing: 0.03em; }
.sl-chip { font-size: 20px; font-weight: 750; color: #4f35a3; background: #efe8ff; border: 2px solid #b9a3ef; border-radius: 999px; padding: 6px 18px; }
.sl-title { position: absolute; left: 96px; top: 92px; margin: 0; font-size: 58px; font-weight: 800; letter-spacing: -0.01em; }
.sl-body { position: absolute; left: 96px; top: 220px; width: 1728px; height: 560px; }
.dia { position: relative; width: 1728px; height: 560px; }
.arrows { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.arrows polyline { fill: none; stroke: #2b2b33; stroke-width: 5; stroke-linejoin: round; }
.dia [data-step] { transition: opacity 0.22s ease; }
.dia .off { opacity: 0; }

.bx { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 3px solid; border-radius: 14px; font-size: 34px; font-weight: 650; line-height: 1.15; padding: 8px 18px; }
.bx small { font-size: 25px; font-weight: 500; color: #4a4d57; margin-top: 6px; }
.bx .k { font-size: 19px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #5d606b; margin-bottom: 10px; }
.bx.hdr { font-size: 40px; font-weight: 800; }
.bx.big .l { font-size: 36px; }
.bx.row { flex-direction: row; justify-content: flex-start; gap: 18px; font-size: 31px; font-weight: 500; padding-left: 26px; }
.bx.row b { font-weight: 800; min-width: 200px; text-align: left; }
.bx.quote .l { font-size: 35px; font-style: italic; font-weight: 600; }
.bx.soft { font-weight: 600; }
.c-red { background: #fdd8d8; border-color: #e58b8b; }
.c-blue { background: #d3e8fb; border-color: #6aa3d8; }
.c-purple { background: #e7dcfb; border-color: #9a7fd6; }
.c-green { background: #d9f1d4; border-color: #73b36c; }
.c-yellow { background: #fbefbe; border-color: #d9b94a; }
.divider { position: absolute; left: 863px; top: 0; width: 2px; height: 450px; background: #d0d0d6; }
.pick { position: absolute; left: 300px; top: 206px; font-size: 24px; font-weight: 700; color: #6b6f7c; }
.bubble { position: absolute; left: 0; top: 150px; width: 470px; height: 230px; background: #fff; border: 4px solid #2b2b33; border-radius: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 40px; font-weight: 750; }
.bubble .k { font-size: 19px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #5d606b; margin-bottom: 10px; }
.frame { position: absolute; border: 5px solid; border-radius: 14px; overflow: hidden; background: #fff; }
.frame span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); font-size: 28px; font-weight: 750; text-align: center; padding: 6px; }
.f-blue { border-color: #6aa3d8; } .f-green { border-color: #73b36c; }
.loop-l { position: absolute; left: 790px; top: 380px; font-size: 26px; color: #6b6f7c; font-weight: 700; background: #fbfaf6; padding: 0 12px; }

.gen-map { position: absolute; left: 0; top: 8px; width: 968px; height: 552px; border: 4px solid #d0d0d6; border-radius: 12px; overflow: hidden; }
.gen-map canvas { width: 960px; height: 544px; display: block; }
.gen-side { position: absolute; left: 1050px; top: 0; }
.gen-seed-l { font-size: 28px; color: #6b6f7c; font-weight: 700; }
.gen-seed { font-size: 88px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gen-hint { font-size: 24px; color: #6b6f7c; margin-top: 10px; }
.gen-hint kbd, .sl-foot kbd { background: #eceae4; border-color: #c9c6bd; color: #1f2128; }
.gen-rules { position: absolute; left: 1050px; top: 230px; display: flex; flex-direction: column; gap: 18px; width: 678px; }
.rule { font-size: 34px; font-weight: 650; background: #d9f1d4; border: 3px solid #73b36c; border-radius: 14px; padding: 14px 22px; display: flex; gap: 18px; align-items: center; }
.rule b { color: #2f7a2a; font-size: 38px; }
.rule.bad { background: #fdd8d8; border-color: #e58b8b; } .rule.bad b { color: #b03030; }
.prev { position: absolute; left: 720px; top: 0; width: 968px; height: 548px; border: 4px solid #d0d0d6; border-radius: 12px; overflow: hidden; }
.prev img { width: 960px; height: 540px; display: block; image-rendering: pixelated; }
.prev .sim { position: absolute; left: 16px; top: 16px; font-size: 22px; font-weight: 800; color: #fff; background: rgba(79, 53, 163, 0.92); border-radius: 999px; padding: 6px 16px; }

.plain { font-size: 28px; margin: 0 0 18px; }
.plain.small { font-size: 22px; color: #555a66; margin-top: 18px; }
table.score { border-collapse: collapse; width: 1500px; font-size: 26px; }
table.score th { text-align: left; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6f7c; padding: 6px 14px; }
table.score td { padding: 9px 14px; border-top: 1px solid #ddd; font-variant-numeric: tabular-nums; }
table.score tr.top td { background: #d9f1d4; }
table.score em { font-style: normal; font-size: 16px; font-weight: 800; color: #2f7a2a; letter-spacing: 0.08em; text-transform: uppercase; }

.sl-foot { position: absolute; left: 96px; bottom: 30px; width: 1260px; }
.sl-refs { font-size: 19px; line-height: 1.35; color: #5d606b; margin-bottom: 12px; }
.sl-nav { display: flex; gap: 28px; align-items: center; font-size: 20px; color: #6b6f7c; }
.sl-count { font-weight: 800; color: #1f2128; }
.sl-return { display: none; }
#slides.ended .sl-keys { display: none; }
#slides.ended .sl-return { display: inline-block; background: #1f2128; color: #fff; font-size: 26px; font-weight: 700; padding: 10px 24px; border-radius: 999px; animation: retPulse 1.6s ease-in-out infinite; }
#slides.ended .sl-return kbd { background: #fff; color: #1f2128; }
@keyframes retPulse { 50% { box-shadow: 0 0 0 10px rgba(31, 33, 40, 0.12); } }

/* In-game banner for labeled demonstrations (failure example, imagined integration). */
#banner { position: absolute; left: 710px; top: 140px; transform: translateX(-50%); max-width: 1100px; background: #fbfaf6; color: #1f2128;
  border: 4px solid #9a7fd6; border-radius: 14px; padding: 14px 26px; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
#banner .t { font-size: 28px; font-weight: 800; }
#banner .s { font-size: 22px; color: #4a4d57; margin-top: 4px; }
#banner.warn { border-color: #e58b8b; }
.route-l { font-size: 18px; font-weight: 800; color: #1f2128; background: #fbefbe; border: 2px solid #d9b94a; border-radius: 8px; padding: 2px 10px; }
.route-l.dest { background: #d3e8fb; border-color: #6aa3d8; }
.route-l.act { background: #d9f1d4; border-color: #73b36c; }
.chap .inh { font-size: 17px; color: var(--ink-dim); font-weight: 600; margin-left: 10px; }

/* ---- Milestone 3 slide elements ---- */
.c-gray { background: #ecebe7; border-color: #b9b7b0; }
.dia .art { position: absolute; border: 3px solid; border-radius: 14px; padding: 10px; display: flex; align-items: center; justify-content: center; }
.dia .art.c-red { background: #fdeaea; } .dia .art.c-blue { background: #e6f1fc; } .dia .art.c-green { background: #e9f7e6; } .dia .art.c-yellow { background: #fdf6dc; }
.dia .cap { position: absolute; text-align: center; font-size: 28px; font-weight: 650; color: #3a3d47; }
.range { position: absolute; left: 740px; top: 392px; width: 988px; height: 168px; }
.minis { display: flex; gap: 14px; height: 120px; }
.mini { position: relative; flex: 1; background: #fff; border: 2px solid #d0d0d6; border-radius: 10px; padding: 6px; }
.mini.bad { border-color: #e58b8b; background: #fdeaea; }
.mini b { position: absolute; right: 8px; top: 2px; color: #b03030; font-size: 30px; }
.rcap { font-size: 20px; color: #5d606b; margin-top: 10px; text-align: center; }
.qmark { position: absolute; left: 790px; top: 120px; width: 150px; text-align: center; font-size: 150px; font-weight: 800; color: #9a7fd6; line-height: 1; }
.frame .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 100%; padding: 30px 12px 50px; }
#slides.slide-final .sl-title { display: none; }
.closing { position: absolute; left: 60px; right: 60px; top: 40px; font-size: 64px; font-weight: 800; line-height: 1.2; text-align: center; color: #1f2128; }
.closing-note { position: absolute; left: 0; right: 0; top: 330px; text-align: center; font-size: 28px; color: #5d606b; }
ol.fullrefs { margin: 0; padding-left: 52px; font-size: 25px; line-height: 1.38; color: #2b2d36; }
ol.fullrefs li { margin-bottom: 18px; padding-left: 8px; }
/* Transition overlay (ferry, return to town) */
#transition { position: absolute; inset: 0; background: rgba(10, 10, 20, 0.92); display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 700; color: #fff6e6; z-index: 3; }

/* Enlarged workshop view of the car (Chapter 6). Sits below the disclosure banner,
   above the dialogue box, and left of the webcam area. */
#carView { position: absolute; left: 210px; top: 252px; width: 1000px; height: 566px; background: var(--panel); border: 4px solid var(--gold);
  border-radius: 10px; box-shadow: 0 0 0 4px rgba(14, 10, 4, 0.55), inset 0 0 0 2px var(--gold-dark); padding: 16px 24px; display: flex; flex-direction: column; }
#carView .cv-head { display: flex; align-items: center; gap: 18px; }
#carView .cv-step { font-size: 22px; font-weight: 800; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
#carView .cv-name { font-size: 36px; font-weight: 800; flex: 1; }
#carView .cv-stage { flex: 1; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(0deg, #d4c5a6 0 3px, #ece2cb 3px 44px), #ece2cb; border-radius: 8px; margin: 10px 0; }
#carView .cv-art { position: relative; }
#carView .cv-art canvas { display: block; }
#carView .cv-cap { font-size: 28px; font-weight: 600; text-align: center; }
.cv-l { position: absolute; transform: translate(-50%, -50%); font-size: 24px; font-weight: 800; padding: 3px 12px; border-radius: 8px; white-space: nowrap; }
.cv-l.body { background: #d3e8fb; color: #1f2128; border: 3px solid #6aa3d8; }
.cv-l.wh { background: #fbefbe; color: #1f2128; border: 3px solid #d9b94a; }
.cv-l.wh.up { transform: translate(-50%, -100%); }
.cv-l.wh.dn { transform: translate(-50%, 0); }