/* Quiet case-file layout. Prefixes keep the legacy cinematic styles from taking over. */
body.reading-ui,#app { overflow-anchor:none; }
.reading-ui #bd { display:flow-root; }
.econ-pick { display:block;width:100%;text-align:left;font:inherit;color:var(--text); }
.econ-description { display:block;margin-top:3px;font-size:.82rem;line-height:1.7;color:#c3cecd; }
#current-objective {
  margin:18px 0;
  padding:10px 14px;
  background:#1b2925;
  border-radius:0 7px 7px 0;
}

#current-objective p {
  font-size:.83rem;
  margin:5px 0 0;
  line-height:1.7;
  color:#dce1df;
}

.new-clue {
  display:inline-block;
  padding:1px 6px;
  border:1px solid #688b82;
  border-radius:4px;
  color:#bfe1d2;
  font-size:.65rem;
  font-weight:500;
}

#compact-scene {
  display:none;
}

@media(max-width:760px) {
  #compact-scene {
    display:block;
    position:absolute;
    bottom:9px;
    right:9px;
    z-index:5;
    padding:7px 10px;
    min-height:36px;
    border:1px solid #ffffff50;
    border-radius:6px;
    background:#10171be6;
    color:#f0eee6;
    font:inherit;
    font-size:.7rem;
  }

  .reading-ui #scene.scene-compact {
    height:54px;
  }

  .scene-compact :is(#sv,.vig,.grain,#cap,#obj,#expand-scene) {
    display:none!important;
  }

  #scene.scene-compact #compact-scene {
    inset:0;
    width:100%;
    border:0;
    background:#1b252b;
  }
}

#save-warning {
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:50;
  max-width:760px;
  margin:auto;
  padding:12px 16px;
  border:1px solid #d5b77e;
  border-radius:8px;
  background:#30291d;
  color:#fff0ce;
  font-size:.85rem;
  line-height:1.6;
  box-shadow:0 8px 24px #0008;
}

#save-warning[hidden] {
  display:none;
}

:root {
  --gold:#d5b77e;
  --red:#95b5ac;
}

body.reading-ui {
  --panel:#151e23;
  --line:#303c42;
  --text:#e7e8e3;
  --mute:#a6b1b4;
  background:#10171b;
  line-height:1.85;
}

body.reading-ui::before {
  background:linear-gradient(145deg,#172126,#10171b 65%)!important;
}

.reading-ui button,.reading-ui summary {
  -webkit-tap-highlight-color:transparent;
}

.reading-ui :is(button,input,summary,select):focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px;
}

.reading-ui button:disabled {
  cursor:default;
  opacity:.5;
}

.reading-ui #app {
  max-width:1220px;
  padding:28px 28px 48px;
}

.reading-ui #bar {
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  backdrop-filter:none;
  padding:0 0 22px;
  margin:0 0 28px;
  gap:22px;
  flex-wrap:wrap;
}

.reading-ui #logo {
  display:flex;
  align-items:center;
  gap:12px;
  letter-spacing:0;
  font-family:inherit;
  font-size:.93rem;
  font-weight:600;
  color:var(--text);
  line-height:1.5;
}

.reading-ui #logo small {
  display:block;
  color:var(--mute);
  font-size:.7rem;
  font-weight:400;
}

.brand-mark {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--gold);
}

.brand-mark img {display:block;width:100%;height:100%;}
.home-brand {display:flex;align-items:center;gap:17px;margin-bottom:28px;}
.home-brand img {width:64px;height:64px;flex-shrink:0;}
.home-brand strong {display:block;color:#eee5cf;font:600 1.9rem 'Playfair Display',Georgia,serif;letter-spacing:.03em;line-height:1.2;}
.home-brand small {display:block;color:var(--mute);font-size:.73rem;margin-top:7px;letter-spacing:.05em;}
@media(max-width:760px){.home-brand{gap:13px;margin-bottom:22px}.home-brand img{width:54px;height:54px}.home-brand strong{font-size:1.6rem}.home-brand small{font-size:.67rem}}

.reading-ui #hud {
  flex:1;
  justify-content:flex-start;
  gap:18px;
  font-size:.75rem;
  text-align:left;
}

.hud-item {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.hud-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#9bb9ad;
}

.toolbar-actions {
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

.reading-ui .ib {
  width:36px;
  height:36px;
  border-radius:6px;
  background:transparent;
  border-color:var(--line);
  font-size:.95rem;
}

.reading-ui .tool-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  height:auto;
  min-height:44px;
  padding:0 11px;
  font-size:.78rem;
  color:var(--text);
  white-space:nowrap;
}

.tool-icon {
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
}

.reading-ui .tool-button:hover {
  background:#243037;
  border-color:#667980;
}

.hint-count {
  color:var(--gold);
  font-size:.7rem;
  padding-left:2px;
}

.toolbar-more {
  position:relative;
  font-size:.78rem;
}

.toolbar-more>summary {
  cursor:pointer;
  list-style:none;
  padding:8px 10px;
  color:var(--mute);
}

.toolbar-popover {
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  width:230px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#1a252b;
  padding:9px 15px;
  box-shadow:0 14px 30px #0005;
  z-index:15;
}

.toolbar-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:7px 0;
}

#play-layout {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
}

#case-panel {
  position:sticky;
  top:24px;
  min-width:0;
}

#notes-container {
  display:contents;
}

#notes-container>summary {
  display:none;
}

.reading-ui #scene {
  height:clamp(280px,40svh,420px);
  border:1px solid var(--line);
  border-radius:9px;
  box-shadow:none!important;
  background:#0b1114;
}

.reading-ui #scene::after {
  display:none;
}

.reading-ui #sv svg,.reading-ui #sv .ph {
  filter:saturate(.95) brightness(1.04)!important;
}

.reading-ui .vig {
  box-shadow:inset 0 -42px 35px #08101480;
}

.reading-ui #cap {
  bottom:12px;
  left:14px;
  right:14px;
  font-size:.7rem;
  letter-spacing:.03em;
  color:#e5ece7;
  text-shadow:0 1px 3px #000;
}

#expand-scene {
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 11px;
  border:1px solid #ffffff50;
  border-radius:6px;
  background:#10171be6;
  color:#f0eee6;
  font-size:.72rem;
}

#expand-scene:hover {
  background:#2b3940;
}

.reading-ui .box:has(.scene-enlarged) {
  width:min(1100px,100%);
}

.scene-enlarged {
  position:relative;
  width:100%;
  height:min(65svh,680px);
  background:#0b1114;
  border-radius:7px;
  overflow:hidden;
}

.scene-enlarged :is(svg,img,video) {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none!important;
  animation:none!important;
  transform:none!important;
}

.scene-description {
  margin-top:12px;
}

.reading-ui #obj {
  text-shadow:none!important;
  font-size:27px;
  letter-spacing:0;
}

#case-context {
  padding:23px 0 18px;
}

.sidebar-kicker {
  display:block;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.64rem;
  color:var(--mute);
  font-weight:600;
}

#case-context h2 {
  font-family:inherit;
  font-size:1.06rem;
  line-height:1.5;
  font-weight:600;
  margin:6px 0 18px;
  color:var(--text);
}

.objective {
  border-left:2px solid var(--gold);
  padding:0 0 0 14px;
}

.objective .sidebar-kicker {
  color:var(--gold);
}

.objective p {
  font-size:.83rem;
  margin-top:7px;
  line-height:1.75;
  color:#ced6d6;
}

.case-section {
  border-top:1px solid var(--line);
}

.case-section>summary {
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer;
  padding:13px 0;
  font-size:.8rem;
  color:#d4dcdb;
  font-weight:500;
}

.case-section>summary>span {
  margin-left:auto;
  color:var(--mute);
}

.case-section>summary small {
  color:var(--mute);
  font-weight:400;
  font-size:.68rem;
}

.case-section[open]>summary>span {
  transform:rotate(45deg);
}

.note-list,.journal {
  padding:0 0 13px;
  list-style:none;
  font-size:.78rem;
  color:var(--mute);
}

.note-list li {
  padding:7px 0;
  line-height:1.65;
}

.note-list b {
  display:block;
  color:var(--text);
  font-weight:500;
}

.note-list span {
  display:block;
  margin-top:4px;
  font-size:.73rem;
}

.journal li {
  padding:5px 0 5px 13px;
  position:relative;
}

.journal li::before {
  content:'';
  position:absolute;
  left:0;
  top:15px;
  width:4px;
  height:4px;
  background:var(--gold);
  border-radius:50%;
}

.empty-note {
  font-size:.77rem;
  color:var(--mute);
  line-height:1.75;
  padding-bottom:15px;
}

.timeline {
  list-style:none;
  padding:0 0 15px;
}

.timeline li {
  display:flex;
  gap:12px;
  padding:9px 0;
  font-size:.74rem;
}

.timeline time {
  font-variant-numeric:tabular-nums;
  color:var(--gold);
  min-width:51px;
}

.timeline div {
  border-left:1px solid var(--line);
  padding-left:11px;
  color:var(--text);
}

.timeline small {
  display:block;
  color:var(--mute);
  font-size:.65rem;
}

#reading {
  min-width:0;
}

#reader-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--mute);
  font-size:.72rem;
  padding:0 0 13px;
  border-bottom:1px solid var(--line);
}

#reader-mode {
  font-size:.65rem;
  color:#a8c4b7;
}

.reading-ui #tm {
  height:3px;
  margin:12px 0 -4px;
  visibility:hidden;
}

.reading-ui #tm i {
  background:var(--gold);
}

.reading-ui #card {
  padding:28px 32px 30px;
  margin-top:16px;
  background:#1a242a;
  border:1px solid #354148;
  border-radius:9px;
  border-image:none;
  box-shadow:none;
  backdrop-filter:none;
}

.reading-ui #ch {
  font-size:.67rem;
  letter-spacing:.08em;
  color:var(--gold);
  font-weight:500;
  line-height:1.6;
}

.reading-ui #tt {
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.35;
  margin:9px 0 24px;
  color:#f0eee6;
  text-shadow:none!important;
  font-weight:600;
}

.reading-ui #tx {
  border:0;
  padding:0;
  font-size:1em;
  line-height:1.9;
  color:#dce1df;
  overflow-wrap:anywhere;
}

#bd p {
  margin:0 0 18px;
}

#bd p:last-child {
  margin-bottom:0;
}

.reading-ui #tx b {
  color:#e6d6b3;
  font-weight:600;
}

#bd blockquote {
  padding:16px 20px;
  margin:20px 0;
  background:#101a20;
  border-left:2px solid #688b82;
  border-radius:0 5px 5px 0;
}

.speaker {
  display:block;
  font:500 .68rem 'Be Vietnam Pro',sans-serif;
  letter-spacing:.06em;
  color:#9ab9b0;
  margin-bottom:5px;
}

.reading-ui #tx i {
  color:#e0e5e1;
  font-style:normal;
}

#bd>i {
  display:block;
  margin:15px 0;
  padding:12px 16px;
  background:#101a20;
  border-left:2px solid #688b82;
}

.reading-ui .pre {
  background:#26342f;
  border:1px solid #42554a;
  color:#d5e3d8;
  border-radius:6px;
  padding:12px 15px;
  margin-bottom:21px;
  font-size:.8rem;
  line-height:1.75;
}

#choice-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:27px;
  gap:12px;
  font-size:.8rem;
  font-weight:500;
}

#choice-heading small {
  font-size:.69rem;
  color:var(--mute);
  font-weight:400;
}

.reading-ui #op {
  margin:12px 0 0;
  gap:9px;
}

.reading-ui .ch {
  min-width:0;
  background:#172127;
  border:1px solid #3b484f;
  border-radius:7px;
  padding:13px 16px;
  font-size:.86rem;
  line-height:1.65;
  transition:background .15s,border-color .15s;
  animation:none;
  box-shadow:none;
}

.reading-ui .ch:hover {
  background:#253139;
  border-color:#b89f71;
  transform:none;
  box-shadow:none!important;
}

.reading-ui .ch .n {
  width:25px;
  height:25px;
  font-family:inherit;
  font-size:.7rem;
  font-weight:400;
  border:1px solid #46555b;
  border-radius:4px;
  background:transparent;
  color:#aebdbf;
}

.reading-ui .ch.ev {
  border-color:#4d6860!important;
  color:#d7e2dc!important;
  background:#1b2925;
}

#reading-help {
  color:#a0abad;
  font-size:.65rem;
  margin-top:20px;
  text-align:center;
}

.reading-ui .stat {
  border-top:1px solid var(--line);
  line-height:1.8;
}

.result-details {
  margin-top:24px;
  border-top:1px solid var(--line);
  font-size:.82rem;
}

.result-details summary {
  padding:14px 0;
  cursor:pointer;
  color:var(--gold);
  list-style:none;
  display:flex;
  justify-content:space-between;
}

.result-details .stat {
  font-size:.78rem;
}

.reading-ui .box {
  border-radius:10px;
  box-shadow:0 24px 80px #0006;
  background:#1a242a!important;
  border-color:#3b494f;
  width:min(720px,100%);
}

.reading-ui .mh {
  background:#1a242a!important;
  padding:18px 24px;
}

.reading-ui .mh h2 {
  font-family:inherit;
  font-size:1.12rem;
  font-weight:500;
  color:var(--text);
}

.reading-ui .mb {
  padding:0 24px 24px;
}

.reading-ui .mb h3 {
  color:var(--gold);
  letter-spacing:.08em;
  font-size:.7rem;
  margin-top:24px;
}

.reading-ui .mb p {
  font-size:.86rem;
  color:#c7d1d0;
}

.reading-ui .cl {
  background:#172127;
  border-color:var(--line);
  border-radius:7px;
  padding:13px 16px;
}

.reading-ui .cl p {
  color:#c3cecd;
  font-size:.82rem;
}

.reading-ui .cl.lock {
  opacity:.65;
}

.reading-ui .btn {
  background:#202d33;
  border:1px solid #43535a;
  color:#dfe5e1;
  border-radius:6px;
  padding:12px 16px;
  font-size:.83rem;
  text-align:left;
  transition:background .15s;
}

.reading-ui .btn:hover {
  background:#2b3940;
  box-shadow:none;
  transform:none;
}

.reading-ui .btn.pri,.reading-ui .sm {
  background:var(--gold)!important;
  color:#172024!important;
  font-weight:600;
  border-color:var(--gold);
}

.reading-ui .btn.dng {
  color:#efb1a6;
}

.reading-ui .seg button {
  font-size:.75rem;
  padding:8px 11px;
}

.reading-ui .row {
  font-size:.85rem;
  gap:16px;
}

.reading-ui .sw {
  flex-shrink:0;
}

.reading-ui .mgr {
  gap:9px;
  margin:12px 0;
}

.reading-ui .mgi {
  color:var(--mute);
  letter-spacing:.04em;
  font-size:.74rem;
}

.reading-ui .rune {
  border-radius:7px;
  background:#203038;
  color:var(--text);
  border-color:#4a5e65;
  box-shadow:none;
}

.reading-ui .rune:hover {
  box-shadow:none;
  transform:none;
  border-color:var(--gold);
}

.reading-ui .rune.ok {
  background:#345447;
}

.reading-ui .rune.no {
  background:#623c3c;
}

.reading-ui .rune.big {
  box-shadow:none;
  animation:none;
}

.reading-ui #toast {
  background:#d9c59d;
  border:1px solid #ecdbb8;
  border-radius:7px;
  box-shadow:0 5px 20px #0004;
  font-size:.8rem;
}

/* Landing screen */
.reading-ui #menu {
  display:block;
  overflow-y:auto;
  background:#10171b;
  padding:clamp(28px,7vh,84px) 36px;
}

.reading-ui #menu::after {
  background:linear-gradient(90deg,#10171bef,#10171bb3 55%,#10171bfa);
}

.reading-ui #menuart {
  position:fixed;
  opacity:.2;
  filter:saturate(.5);
}

.reading-ui #mc {
  width:min(1110px,100%);
  margin:auto;
  text-align:left;
  min-height:calc(100dvh - 160px);
  display:flex;
  align-items:center;
}

.menu-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:clamp(30px,7vw,110px);
  align-items:center;
  width:100%;
}

.menu-kicker {
  font-size:.66rem;
  letter-spacing:.17em;
  color:#aebbb9;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px;
}

.menu-kicker>span {
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
}

.reading-ui #mc h1 {
  font-size:clamp(3.2rem,6.3vw,5.7rem);
  font-weight:600;
  line-height:1.09;
  letter-spacing:-.035em;
  text-shadow:none;
  margin:0;
  color:#ece9df;
}

.reading-ui #mc h1 em {
  font-style:normal;
  color:var(--gold);
}

.menu-description {
  font-size:.9rem;
  color:#b7c1be;
  line-height:1.95;
  max-width:420px;
  margin-top:30px;
}

.menu-facts {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:28px;
  color:#b5c2bd;
  font-size:.7rem;
}

.menu-facts b {
  color:#e2ddd0;
  font-weight:500;
  margin-right:3px;
}

.menu-signature {
  font-size:.65rem;
  letter-spacing:.14em;
  color:var(--gold);
  margin-top:50px;
}

.menu-signature span {
  display:block;
  letter-spacing:.03em;
  color:#93a19e;
  margin-top:4px;
  font-size:.65rem;
}

.menu-start {
  padding:28px;
  border:1px solid #3d4b50;
  background:#1b252bdd;
  border-radius:10px;
  box-shadow:0 24px 50px #0002;
}

.menu-start h2 {
  font-family:inherit;
  font-weight:500;
  font-size:1.2rem;
  line-height:1.5;
  color:#e4e9e5;
  margin:8px 0 10px;
}

.menu-start>p {
  font-size:.78rem;
  color:#adbdb8;
  margin-bottom:20px;
  line-height:1.8;
}

.reading-ui .menu-primary .btn {
  min-height:49px;
  text-align:center;
}

.menu-primary .btn:first-child {
  margin-top:0;
}

.profile-strip {
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  font-size:.67rem;
  color:#a8b8b3;
  margin:22px 0;
  padding:15px 0;
  border-top:1px solid #3c494e;
  border-bottom:1px solid #3c494e;
}

.profile-strip b {
  color:#d6dfda;
  font-weight:500;
}

.menu-utilities summary {
  display:flex;
  justify-content:space-between;
  list-style:none;
  font-size:.78rem;
  color:#d3ddd8;
  cursor:pointer;
}

.utility-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px;
}

.reading-ui .utility-grid .btn {
  margin:0;
  padding:10px;
  font-size:.72rem;
  text-align:center;
}

.menu-footer {
  font-size:.63rem;
  color:#9daea8;
  margin-top:22px;
}

/* Quiet mode suppresses page effects while the illustration keeps animating. */
.reading-ui.quiet-reading :is(#fx,#fl,.grain,.fxl,#scene::after) {
  display:none!important;
}

.reading-ui.quiet-reading :is(#menuart,#tm,#card) * {
  animation:none!important;
  transition:none!important;
}

.reading-ui.quiet-reading #scene {
  animation:none!important;
}

.scene-no-rain :is(#sv,.scene-enlarged) [data-scene-effect='rain'],
.scene-no-flash :is(#sv,.scene-enlarged) [data-scene-effect='flash'] {
  display:none!important;
}

@media(max-width:1050px) {
  .reading-ui #app {
    padding:22px;
  }

  .reading-ui #bar {
    gap:15px;
  }

  .reading-ui #hud {
    order:3;
    flex-basis:100%;
    gap:24px;
  }

  .toolbar-actions {
    margin-left:auto;
  }

  #play-layout {
    grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    gap:25px;
  }

  .menu-layout {
    grid-template-columns:minmax(0,1fr) 350px;
    gap:40px;
  }

  .menu-start {
    padding:24px;
  }
}

@media(max-width:760px) {
  .reading-ui #app {
    padding:15px;
  }

  .reading-ui #bar {
    padding-bottom:16px;
    margin-bottom:20px;
  }

  .reading-ui #logo {
    font-size:.8rem;
  }

  .brand-mark {
    width:31px;
    height:35px;
  }

  .reading-ui #logo small {
    font-size:.64rem;
  }

  .toolbar-actions {
    gap:5px;
  }

  .reading-ui .tool-button {
    padding:0 9px;
    min-height:36px;
  }

  .toolbar-more>summary {
    font-size:.72rem;
    padding:8px;
  }

  .tool-label {
    display:none;
  }

  #play-layout {
    display:flex;
    flex-direction:column;
  }

  #case-panel {
    position:static;
    width:100%;
    grid-template-columns:120px minmax(0,1fr);
    gap:15px;
  }

  .reading-ui #cap {
    letter-spacing:0;
  }

  #case-context h2 {
    font-size:.9rem;
    margin:4px 0 9px;
  }

  .objective {
    padding-left:10px;
  }

  .objective p {
    font-size:.76rem;
    line-height:1.6;
    margin-top:4px;
  }

  .sidebar-kicker {
    font-size:.58rem;
  }

  #investigation {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 16px;
  }

  .case-section>summary {
    font-size:.75rem;
    padding:10px 0;
  }

  .case-section[open] {
    grid-column:1/-1;
  }

  #reading {
    width:100%;
  }

  #reader-heading {
    font-size:.67rem;
  }

  #reader-mode {
    font-size:.59rem;
  }

  .reading-ui #card {
    padding:23px 22px;
  }

  .reading-ui #tt {
    margin-bottom:20px;
  }

  .reading-ui #tx {
    font-size:.95em;
  }

  #bd blockquote {
    padding:13px 15px;
  }

  .reading-ui .ch {
    font-size:.83rem;
    padding:12px;
  }

  #choice-heading {
    margin-top:22px;
  }

  .reading-ui #menu {
    padding:35px 22px;
  }

  .reading-ui #mc {
    min-height:0;
  }

  .menu-layout {
    grid-template-columns:1fr;
    gap:30px;
  }

  .menu-kicker {
    margin-bottom:18px;
  }

  .reading-ui #mc h1 {
    font-size:3.3rem;
  }

  .menu-description {
    font-size:.85rem;
    margin-top:20px;
  }

  .menu-facts {
    margin-top:18px;
  }

  .menu-signature {
    display:none;
  }

  .menu-start {
    padding:23px;
  }

  .reading-ui .mb {
    padding:0 18px 20px;
  }

  .reading-ui .mh {
    padding:14px 18px;
  }
}

@media(max-width:420px) {
  .reading-ui #logo small {
    display:none;
  }

  .reading-ui #logo {
    font-size:.72rem;
    gap:7px;
  }

  .brand-mark {
    width:25px;
    height:30px;
    font-size:19px;
  }

  .reading-ui #bar {
    gap:9px;
  }

  .reading-ui .tool-button {
    padding:0 7px;
    gap:4px;
  }

  .toolbar-more>summary {
    padding:8px 5px;
  }

  .reading-ui #hud {
    gap:18px;
    font-size:.68rem;
  }

  #case-panel {
    grid-template-columns:95px minmax(0,1fr);
    gap:12px;
  }

  .reading-ui #scene {
    height:110px;
  }

  #reader-mode {
    display:none;
  }

  .reading-ui #card {
    padding:21px 18px;
  }

  .reading-ui #tt {
    font-size:1.45rem;
  }

  #choice-heading small {
    font-size:.61rem;
  }

  .reading-ui .rune {
    width:48px;
    height:48px;
    font-size:1.3rem;
  }

  .reading-ui .row {
    flex-wrap:wrap;
  }

  .reading-ui .seg {
    max-width:100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .reading-ui *,.reading-ui *::before,.reading-ui *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

@media(max-width:760px) {
  #notes-container {
    grid-column:1/-1;
    border-bottom:1px solid var(--line);
  }

  #notes-container>summary {
    list-style:none;
  }

  #notes-container[open]>summary span {
    transform:rotate(180deg);
  }

  #notes-container #investigation {
    padding:0 0 10px;
  }
}

/* Case catalogue and interactive evidence boards. */
.reading-ui #mc:has(.case-home) {
  display:block;
  min-height:0;
  width:min(1160px,100%);
}

.home-actions {
  display:flex;
  justify-content:flex-end;
  margin-bottom:18px;
  order:-1;
}

.reading-ui .home-settings.btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-height:44px;
  margin:0;
  padding:9px 16px;
  font-size:.8rem;
  border:1px solid #46565f;
  border-radius:8px;
  background:#1b282f;
  color:var(--text);
}

.case-home-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:70px;
  align-items:center;
  padding-bottom:38px;
  border-bottom:1px solid var(--line);
}

.reading-ui .case-home #mc h1,.reading-ui #mc .case-home h1 {
  font-size:clamp(2.7rem,4vw,4.2rem);
  line-height:1.15;
}

.case-home .menu-kicker {
  margin-bottom:20px;
}

.case-home .menu-description {
  max-width:580px;
  margin-top:20px;
  font-size:.85rem;
}

.home-profile {
  padding:22px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#1b252b;
}

.reading-ui .mobile-resume {
  display:none;
}

.home-profile .profile-strip {
  margin:0 0 18px;
  padding:0 0 16px;
  border-top:0;
}

.home-profile .menu-primary .btn {
  font-size:.76rem;
  line-height:1.75;
}

.home-profile .menu-utilities {
  margin-top:20px;
}

.catalog-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin:35px 0 19px;
}

.catalog-heading h2 {
  font:500 1.35rem 'Be Vietnam Pro',sans-serif;
  margin-top:8px;
  color:#e5ebe6;
}

.catalog-heading>p {
  font-size:.72rem;
  color:var(--mute);
}

.catalog-intro {
  font-size:.77rem;
  line-height:1.8;
  color:var(--mute);
  margin:15px 0;
}

.case-filters {
  display:flex;
  gap:8px;
  margin:20px 0;
}

.case-filter {
  padding:8px 15px;
  background:transparent;
  border:1px solid #415158;
  border-radius:6px;
  color:#b8c8c2;
  font:500 .75rem 'Be Vietnam Pro',sans-serif;
  cursor:pointer;
}

.case-filter.on {
  border-color:var(--gold);
  color:var(--gold);
  background:#d5b77e0d;
}

.case-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.case-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:left;
  min-height:256px;
  padding:23px;
  background:#1b252b;
  border:1px solid #3a494f;
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
  transition:border-color .15s,background .15s;
}

.case-card:hover {
  border-color:#b6a075;
  background:#223037;
}

.case-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.6rem;
  letter-spacing:.1em;
  color:#9caaa8;
}

.case-card-top>span:last-child {
  padding:3px 8px;
  border:1px solid #4b6459;
  border-radius:4px;
  letter-spacing:0;
  color:#b9d0c2;
}

.case-card h3 {
  font:600 1.25rem 'Playfair Display',Georgia,serif;
  line-height:1.4;
  color:#eeeade;
  margin:17px 0 12px;
}

.case-card p {
  font-size:.78rem;
  line-height:1.8;
  color:#b7c5c1;
  margin:0 0 18px;
}

.case-mechanics {
  margin-top:auto;
  font-size:.65rem;
  color:#a8b9b2;
}

.case-card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.72rem;
  color:var(--gold);
  border-top:1px solid #35454a;
  margin-top:16px;
  padding-top:13px;
}

.reading-ui #mb .case-grid {
  grid-template-columns:1fr 1fr;
}

.reading-ui #mb .case-card {
  padding:18px;
  min-height:240px;
}

.reading-ui #mb .case-card h3 {
  font-size:1.13rem;
}

.reading-ui #mb .case-card p {
  font-size:.75rem;
}

.selected-case-banner {
  padding:17px;
  border:1px solid #5c6e5d;
  background:#26362e;
  border-radius:7px;
  margin-top:17px;
}

.selected-case-banner>b {
  display:block;
  color:#dfdfce;
  font-size:1rem;
  margin-top:7px;
}

.selected-case-banner .btn {
  max-width:150px;
  margin-top:12px;
  text-align:center;
  padding:7px;
  font-size:.73rem;
}

.puzzle-instruction {
  color:#c4d2cc;
  font-size:.83rem;
  line-height:1.8;
  margin-bottom:8px;
}

.puzzle-board {
  padding:20px;
  background:#19252b;
  border:1px solid #3a4e54;
  border-radius:8px;
}

.puzzle-progress {
  font-size:.75rem;
  color:#c6b88c;
  margin-bottom:14px;
  line-height:1.7;
}

.puzzle-card-list {
  display:grid;
  gap:10px;
}

.puzzle-card {
  padding:14px 15px;
  background:#213239;
  border:1px solid #50666d;
  border-radius:6px;
  font:400 .81rem 'Be Vietnam Pro',sans-serif;
  color:#e2e8e2;
  text-align:left;
  line-height:1.8;
  cursor:pointer;
  overflow-wrap:anywhere;
}

.puzzle-card.selected {
  border-color:var(--gold);
  background:#3c3b2c;
}

.puzzle-card:hover:enabled {
  border-color:var(--gold);
}

.puzzle-actions {
  display:flex;
  gap:10px;
  margin-top:14px;
}

.reading-ui .puzzle-actions .btn {
  margin:0;
  flex:1;
  text-align:center;
  font-size:.75rem;
}

.evidence-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.evidence-column {
  display:grid;
  gap:10px;
  align-content:start;
}

.evidence-column:first-child::before {
  content:'LỜI KHẲNG ĐỊNH';
  font-size:.62rem;
  letter-spacing:.08em;
  color:#9bb9ad;
}

.evidence-column:last-child::before {
  content:'CHỨNG CỨ';
  font-size:.62rem;
  letter-spacing:.08em;
  color:#9bb9ad;
}

.route-map {
  display:block;
  width:100%;
  height:auto;
  margin-bottom:20px;
}

.route-map line {
  stroke:#658a80;
  stroke-width:2;
}

.route-map circle {
  fill:#bcd4c3;
}

.route-map .blocked {
  fill:#d08f82;
}

.route-map text {
  fill:#d8e1d9;
  font:8px 'Be Vietnam Pro',sans-serif;
}

.route-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.cipher-word {
  border:1px solid #496057;
  border-radius:6px;
  margin:12px 0;
  padding:13px 16px;
}

.cipher-word legend {
  font-size:.73rem;
  color:#b5cbbf;
  padding:0 6px;
}

.cipher-word output {
  display:block;
  font:600 1.3rem 'Be Vietnam Pro',sans-serif;
  letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:5px;
}

.cipher-word small {
  font-size:.7rem;
  color:#a0b8ad;
}

.cipher-controls {
  display:flex;
  gap:10px;
  margin-top:12px;
}

.cipher-controls button {
  font-size:.71rem;
  padding:8px 11px;
}

@media(max-width:1000px) {
  .case-home-header {
    gap:35px;
    grid-template-columns:minmax(0,1fr) 300px;
  }

  .case-grid {
    grid-template-columns:1fr 1fr;
  }

  .catalog-heading {
    align-items:start;
  }

  .catalog-heading>p {
    display:none;
  }
}

@media(max-width:760px) {
  .case-home-header {
    grid-template-columns:1fr;
    gap:24px;
    padding-bottom:28px;
  }

  .reading-ui #mc .case-home h1 {
    font-size:2.8rem;
  }

  .case-home .menu-description {
    font-size:.8rem;
    line-height:1.85;
  }

  .home-profile {
    padding:17px;
  }

  .home-profile .profile-strip {
    font-size:.66rem;
  }

  .case-home .menu-kicker {
    font-size:.6rem;
    margin-bottom:16px;
  }

  .case-grid {
    grid-template-columns:1fr;
  }

  .catalog-heading {
    margin-top:27px;
  }

  .catalog-heading h2 {
    font-size:1.12rem;
  }

  .case-card {
    min-height:0;
    padding:21px;
  }

  .case-card h3 {
    font-size:1.25rem;
  }

  .case-mechanics {
    margin-top:0;
  }

  .reading-ui #mb .case-grid {
    grid-template-columns:1fr;
  }

  .case-filter {
    padding:8px 13px;
    font-size:.72rem;
  }

  .puzzle-board {
    padding:14px;
  }

  .puzzle-card {
    font-size:.74rem;
    padding:11px;
  }

  .evidence-grid {
    gap:9px;
  }

  .puzzle-actions {
    flex-wrap:wrap;
  }

  .reading-ui .puzzle-actions .btn {
    flex-basis:140px;
  }

  .puzzle-instruction {
    font-size:.77rem;
  }
}

@media(max-width:760px) {
  .case-home {
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  .case-home-header {
    display:contents;
  }

  .case-home-header>div {
    order:0;
  }

  .home-profile {
    order:2;
  }

  .home-catalog {
    order:1;
  }

  .case-home>.menu-footer {
    order:3;
  }

  .reading-ui .mobile-resume {
    display:block;
    margin-top:20px;
    text-align:center;
  }

  .home-catalog .catalog-heading {
    margin-top:0;
  }

  .home-catalog .catalog-intro {
    display:none;
  }

  .home-catalog .case-filters {
    margin:15px 0;
  }
}

.scene-hint>b {
  display:block;
  font-size:.78rem;
  margin-bottom:6px;
}

.scene-hint>div {
  font-size:.8rem;
  line-height:1.85;
}

.hint-stages {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.hint-stage {
  min-height:42px;
  padding:7px 12px;
  background:#152720;
  border:1px solid #698574;
  border-radius:5px;
  font:500 .7rem 'Be Vietnam Pro',sans-serif;
  color:#d5e3d8;
}

.hint-stage[aria-pressed="true"] {
  background:#415548;
  border-color:#a2b79e;
  color:#f3ecd8;
}

.puzzle-feedback {
  padding:12px 15px;
  margin-top:12px;
  border-left:2px solid #d5b77e;
  border-radius:0 6px 6px 0;
  background:#2a2d22;
  color:#e2dac3;
  font-size:.77rem;
  line-height:1.85;
}

.gear-guide {
  margin-top:20px;
  padding:14px 16px;
  border:1px solid #516158;
  border-radius:7px;
  background:#182720;
}

.gear-guide>b {
  display:block;
  font-size:.8rem;
  color:#ddca9f;
}

.gear-guide p {
  font-size:.77rem;
  line-height:1.8;
  margin:8px 0 0;
  color:#cbd7cc;
}

.reading-ui .gear-back {
  margin-top:15px;
  width:100%;
  text-align:center;
}

.case-review {
  margin-top:24px;
  border:1px solid #52685e;
  border-radius:8px;
  background:#14221c;
}

.case-review>summary {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  cursor:pointer;
  list-style:none;
  padding:15px 17px;
  color:var(--gold);
  font-size:.84rem;
  font-weight:500;
}

.case-review>summary small {
  font-size:.65rem;
  font-weight:400;
  color:#bdc9bf;
}

.case-review>summary span {
  margin-left:auto;
}

.case-review-body {
  padding:0 18px 20px;
  color:#d4dfd7;
  font-size:.8rem;
  line-height:1.9;
}

.case-review-body h3 {
  font:500 .79rem 'Be Vietnam Pro',sans-serif;
  color:#decda8;
  margin:20px 0 9px;
}

.case-review-body p {
  margin:9px 0;
}

.case-review-body ol {
  padding-left:22px;
}

.case-review-body li {
  padding:6px 0;
}

.review-evidence {
  list-style:none;
  padding:0;
}

.review-evidence li {
  display:grid;
  gap:3px;
  border-bottom:1px solid #3a4c41;
}

.review-evidence span {
  font-size:.72rem;
  color:#b0c5b6;
}

.review-gear {
  border-top:1px solid #3a4c41;
  padding-top:12px;
}

@media(max-width:420px) {
  .case-review>summary {
    padding:13px;
    font-size:.77rem;
  }

  .case-review-body {
    padding:0 13px 16px;
  }
}

/* Evidence gathering: large touch targets and a readable record of discoveries. */
.investigation-board {
  display:grid;
  gap:16px;
}

.investigation-board .puzzle-instruction,.investigation-board .puzzle-progress {
  margin:0;
}

.inspection-map {
  position:relative;
  border:1px solid #647975;
  border-radius:7px;
  overflow:hidden;
  background:#101c23;
}

.inspection-map svg {
  display:block;
  width:100%;
  height:auto;
}

.inspection-hotspot {
  position:absolute;
  transform:translate(-50%,-50%);
  min-height:44px;
  max-width:45%;
  padding:9px 12px;
  border:1px solid #e0c18b;
  border-radius:6px;
  background:#15222bf2;
  color:#f1e5ce;
  font:500 .72rem 'Be Vietnam Pro',sans-serif;
  line-height:1.4;
  box-shadow:0 3px 12px #0006;
}

.inspection-hotspot:hover {
  background:#35463f;
}

.inspection-hotspot.found {
  background:#29493f;
  border-color:#9ac3b1;
  color:#e1f0e8;
}

.inspection-discoveries {
  display:grid;
  gap:10px;
}

.inspection-clue {
  padding:12px 14px;
  border-left:2px solid #92b6a4;
  background:#101b20;
  border-radius:0 5px 5px 0;
}

.inspection-clue b {
  display:block;
  color:#dcc89f;
  font-size:.8rem;
  font-weight:500;
}

.inspection-clue p {
  font-size:.76rem;
  line-height:1.85;
  color:#cbd9d2;
  margin-top:5px;
}

.investigation-answers {
  display:grid;
  gap:10px;
}

.investigation-feedback {
  color:#dcc89f;
  font-size:.78rem;
  line-height:1.8;
  min-height:0;
}

.investigation-feedback:empty {
  display:none;
}

.dossier-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.dossier-tabs .puzzle-card {
  font-size:.72rem;
  padding:11px 9px;
  text-align:center;
  min-height:48px;
}

.dossier-tabs .read {
  border-color:#92b6a4;
}

.dossier-tabs [aria-pressed="true"] {
  background:#35463f;
  color:#f0e3c7;
}

.dossier-paper {
  padding:20px;
  border:1px solid #716b55;
  border-radius:7px;
  background:#232921;
}

.dossier-paper h3 {
  color:#ead9b7;
  font-size:1rem;
  margin:7px 0 14px;
}

.dossier-paper p {
  color:#d3dacb;
  font-size:.8rem;
  line-height:1.9;
  margin:9px 0;
}

.dossier-paper .sidebar-kicker {
  color:#b7bda9;
}

@media(max-width:420px) {
  .inspection-hotspot {
    font-size:.64rem;
    padding:8px;
    max-width:47%;
  }

  .dossier-paper {
    padding:15px;
  }

  .dossier-tabs .puzzle-card {
    font-size:.64rem;
    padding:10px 6px;
  }
}

/* Keep illustrations alongside the story, including while reading on a phone. */
@media(max-width:760px) {
  #play-layout {
    gap:16px;
  }

  #case-panel {
    display:contents;
  }

  .reading-ui #scene {
    order:0;
    position:sticky;
    top:8px;
    z-index:4;
    width:100%;
    height:clamp(180px,27svh,240px);
    flex-shrink:0;
    box-shadow:0 8px 20px #0005!important;
  }

  #reading {
    order:1;
  }

  #case-context {
    order:2;
    width:100%;
    padding:10px 0;
  }

  #notes-container {
    order:3;
    display:block;
    width:100%;
    border-top:1px solid var(--line);
  }

  #notes-container>summary {
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    padding:12px 0;
    font-size:.8rem;
    color:var(--gold);
  }

  #notes-container:not([open])>#investigation {
    display:none;
  }

  .reading-ui #cap {
    font-size:.67rem;
    right:14px;
  }

  #expand-scene {
    top:9px;
    right:9px;
    min-height:38px;
    font-size:.68rem;
  }

  .scene-enlarged {
    height:60svh;
  }
}

@media(max-height:500px) and (orientation:landscape) {
  .reading-ui #scene {
    height:200px;
    position:relative;
    top:0;
  }

  #case-panel {
    position:static;
  }
}

/* Keep action names visible on phones; each control has a generous touch target. */
@media(max-width:760px) {
  .reading-ui #logo {
    order:0;
  }

  .reading-ui #hud {
    order:1;
    flex:0 0 100%;
    flex-wrap:wrap;
    gap:6px 18px;
  }

  .reading-ui .toolbar-actions {
    order:2;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin:0;
  }

  .reading-ui .toolbar-actions>.tool-button {
    grid-column:span 2;
    min-width:0;
    min-height:46px;
    padding:8px 6px;
    gap:6px;
    font-size:.78rem;
    border:1px solid #46565f;
    background:#1b282f;
    border-radius:8px;
  }

  .reading-ui .tool-label {
    display:inline;
  }

  .reading-ui .toolbar-actions>#pz,.reading-ui .toolbar-more {
    grid-column:span 3;
  }

  .reading-ui .toolbar-more>summary {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:8px;
    box-sizing:border-box;
    border:1px solid #46565f;
    border-radius:8px;
    background:#1b282f;
    font-size:.78rem;
    color:var(--text);
  }

  .toolbar-more>summary::-webkit-details-marker {
    display:none;
  }

  .reading-ui .toolbar-more[open]>summary {
    border-color:var(--gold);
  }

  .reading-ui .hint-count {
    display:grid;
    place-items:center;
    min-width:20px;
    height:20px;
    padding:0 3px;
    box-sizing:border-box;
    border-radius:5px;
    background:#334047;
    font-size:.75rem;
    font-weight:600;
  }

  .reading-ui .toolbar-actions>.tool-button:disabled {
    opacity:1;
    color:#9ba7ad;
    background:#172127;
    border-color:#34434a;
  }

  .reading-ui .toolbar-option .ib {
    width:44px;
    height:44px;
  }
}