:root {
  --tools-height: 54px;
  --tools-floor: calc(var(--tools-height) + env(safe-area-inset-bottom, 0px));
  --tool-ink: #fae9cf;
  --tool-edge: #ab8157;
}

#investigation {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
}

#scene-stage {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.tool-start, .tool-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scene-tools {
  position: fixed;
  z-index: 3;
  inset: auto 0 0;
  height: var(--tools-floor);
  padding: 0 max(18px, env(safe-area-inset-right)) env(safe-area-inset-bottom)
    max(18px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  color: var(--tool-ink);
  background:
    repeating-linear-gradient(1deg, transparent 0 3px, #e1b5860c 4px, transparent 6px 11px),
    linear-gradient(180deg, #4b3226, #2d211c);
  border-top: 1px solid #9c704e;
  box-shadow: inset 0 1px 0 #fff0cf18, 0 -3px 10px #20150f32;
}

.tool-end { justify-content: end; }

#observe-scene {
  display: none;
  -webkit-tap-highlight-color: transparent;
}
@media (any-pointer: coarse) {
  #observe-scene { display: inline-flex; }
}
@media (any-pointer: coarse) and (max-width: 360px) {
  .scene-tools .tool-button svg { display: none; }
}

#investigation:not(.investigation-blocked) #scene-viewport:not(.panning) :is(.scene-hotspot, .scene-sign-hit) {
  cursor: url("investigate-cursor.svg") 11 11, pointer;
}

/* The scene sign follows the same hint rules as a paper. Its collection flash
   and keyboard focus ring still use the existing word styles. */
.scene-sign-hit .word-mark .word-outline { display: none; }

.scene-inspection {
  visibility: hidden;
  pointer-events: none;
}

#scene-world.observing .scene-inspection { visibility: visible; }

.scene-inspection polygon {
  fill: #ffda8e18;
  stroke: #ffe2a4e6;
  stroke-width: 1.4px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 calc(2 * var(--word-unit, 1px)) #f4c879a6);
}

.tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  min-width: 44px;
  padding: 3px 11px;
  border: 1px solid #9a7451;
  border-radius: 5px;
  color: var(--tool-ink);
  background: linear-gradient(#604330, #443025);
  font-size: .86rem;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fae9cf1c, 0 1px 2px #211510;
}

.tool-button:hover, .tool-button[aria-pressed="true"] {
  color: #fff5e3;
  background: linear-gradient(#78533a, #523829);
}

.tool-button:focus-visible, #open-book:focus-visible, #scene-dialogue button:focus-visible {
  outline-color: #f7d9a4;
}

.tool-button svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.audio-cross, [aria-pressed="true"] .audio-wave { display: none; }
[aria-pressed="true"] .audio-cross { display: inline; }

#open-book {
  position: relative;
  align-self: end;
  width: 96px;
  height: 60px;
  margin-bottom: 4px;
  padding: 0;
  border: 0;
  background: none;
}

.book-object, .book-cover {
  position: absolute;
  inset: 0;
  display: grid;
  border-radius: 7px 5px 5px 7px;
  pointer-events: none;
}

.book-object {
  background: linear-gradient(90deg, #4a291b 0 14%, transparent 14%),
    repeating-linear-gradient(0deg, #bba17b 0 1px, #f0d6a9 1px 3px);
  border: 1px solid #7c573b;
  box-shadow: inset 0 -2px 0 #573321, 0 3px 6px #160d09a0;
}

.book-cover {
  bottom: 4px;
  place-items: center;
  padding-left: 11%;
  color: #f5deb0;
  background:
    repeating-linear-gradient(129deg, transparent 0 2px, #d0a26c0c 3px 4px),
    linear-gradient(90deg, #4a291b, #775034 9%, #3d2116 15%, #68442e 17%, #4d2e20 100%);
  box-shadow: inset 0 0 0 1px #b48658, inset 0 0 0 3px #3f2519;
}

.book-cover::before {
  content: "";
  position: absolute;
  inset: 11% 7% 11% 24%;
  border: 1px solid #c597644f;
  border-radius: 3px;
  pointer-events: none;
}

.book-cover-title {
  position: relative;
  font: 700 16px/1 "LXGW WenKai TC", "霞鶩文楷 TC", PMingLiU, "Microsoft JhengHei", serif;
  letter-spacing: .09em;
  text-shadow: 0 1px 1px #332014;
}

#open-book .book-object { transition: translate .14s, filter .14s; }
#open-book:hover .book-object { translate: 0 -2px; filter: brightness(1.12); }
#open-book:active .book-object { translate: 0 1px; }
.book-away #open-book { visibility: hidden; }

.tool-feedback {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 7px 11px;
  background: #31221bef;
  border: 1px solid var(--tool-edge);
  border-radius: 5px;
  font-size: .82rem;
  pointer-events: none;
}

#tools-overlay {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #97734e;
  border-radius: 9px;
  color: #3f2a1e;
  background: #f3e5ca;
  box-shadow: inset 0 0 0 3px #e5d0a9, 0 6px 24px #170f0b75;
}

#tools-overlay::backdrop { background: #17130db0; }
.tools-panel { padding: 12px 17px 15px; }
.tools-panel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tools-panel h2 { margin: 0; font-size: 1.17rem; }
#close-tools { width: 44px; height: 44px; padding: 0; font-size: 1.25rem; }
.audio-settings { min-width: 0; margin: 8px 0 0; padding: 3px 0 0; border: 0; border-top: 1px solid #cdb28b; }
.audio-settings legend { padding: 0 8px 0 0; font-weight: bold; }
.audio-level { display: grid; grid-template-columns: max-content minmax(0, 1fr) 4ch; align-items: center; gap: 8px; min-height: 40px; }
.audio-settings input { accent-color: #795037; }
.audio-level input { min-width: 0; width: 100%; height: 36px; margin: 0; }
.audio-level output { text-align: right; font-variant-numeric: tabular-nums; }
.audio-mute { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 40px; }
.audio-mute input { width: 17px; height: 17px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 10px; }
.settings-actions button { min-height: 44px; }
#fullscreen-status { margin: 0 0 9px; color: #6c4a31; }
#restart-panel p { margin: 8px 0; }
#restart-details { color: #624932; }
#confirm-restart { color: #fff4df; background: #69402f; border-color: #543125; }
#restart-error, #settings-panel .chapter-save-status { color: #783423; }
#clear-answer { min-height: 32px; padding: 3px 7px; font-size: inherit; }
#investigation .chapter-save-status, #book-overlay .chapter-save-status {
  position: fixed;
  z-index: 5;
  top: 8px;
  left: 50%;
  translate: -50%;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 12px;
  color: #fff2d7;
  background: #38261f;
  border: 1px solid #96754e;
  border-radius: 5px;
  font-size: .875rem;
  pointer-events: none;
}

#book-overlay[data-flight] .book-layout { pointer-events: none; }
#book-overlay[data-flight="opening"] #close-book { pointer-events: auto; }
#book-overlay[data-flight] .book-shell { transform-origin: left top; }
.book-flight {
  position: absolute;
  z-index: 3;
  inset: 0;
  perspective: clamp(2000px, 210vw, 3800px);
  perspective-origin: left center;
  pointer-events: none;
}

.book-hinge {
  position: absolute;
  inset: 0 0 4px;
  transform-origin: left center;
  transform-style: preserve-3d;
}

.book-hinge > .book-cover, .book-cover-inside {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.book-hinge > .book-cover {
  transform: translateZ(.75px);
  box-shadow: inset 0 0 0 1px #b48658, inset 0 0 0 3px #3f2519, 5px 2px 8px #301d1459;
}

.book-cover-inside {
  transform: rotateY(180deg) translateZ(.75px);
  border: 1px solid #8b6445;
  border-radius: 5px 7px 7px 5px;
  background:
    repeating-linear-gradient(125deg, transparent 0 3px, #d0a26c12 4px 5px),
    linear-gradient(90deg, #6c4a33, #876547 92%, #4b2d1e);
  box-shadow: inset 0 0 0 3px #694530;
}

.book-cover-inside::before {
  content: "";
  position: absolute;
  inset: 5% 6% 5% 5%;
  border: 1px solid #d1a77975;
  border-radius: 3px;
}

.book-hinge::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 2px;
  background: #ae8255;
  transform: translateX(1px) rotateY(90deg);
}

#scene-dialogue {
  --dialogue-opacity: .72;
  -webkit-tap-highlight-color: transparent;
  inset: auto max(22px, 2.1vw) calc(var(--tools-floor) + 17px);
  gap: 13px;
  min-height: 84px;
  max-height: calc(100% - var(--tools-floor) - 24px);
  padding: 10px 14px;
  color: #fff5e7;
  background: rgb(31 24 21 / var(--dialogue-opacity));
  border: 1px solid #d3b18c;
  box-shadow: inset 0 1px 0 #f9dfb629, 0 4px 13px #140e0bd6;
}

#scene-dialogue.lighter { --dialogue-opacity: .62; }
.dialogue-copy { flex: 1; min-width: 0; max-height: min(105px, 26dvh); overflow-y: auto; }
#dialogue-line { font-size: 20px; font-weight: 500; line-height: 1.65; text-shadow: 0 1px 2px #160e0ac4; }
#advance-dialogue {
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff1df;
  background: #795d454d;
  border-color: #cba780;
}
#advance-dialogue:hover { background: #795d45a6; }
#scene-dialogue .word-mark .word-outline { fill: #c89c5c32; stroke: #f3c889; }
#scene-dialogue .word-mark .word-focus { stroke: #fff1df; }
#scene-dialogue [data-collected="true"] .word-mark .word-outline { fill: none; stroke: #e4caa8a0; }

@media (max-height: 500px) {
  :root { --tools-height: 47px; }
  #open-book { width: 82px; height: 52px; margin-bottom: 3px; }
  #scene-dialogue { inset-inline: 11px; gap: 7px; min-height: 56px; padding: 5px 8px 5px 11px; bottom: calc(var(--tools-floor) + 15px); }
  #dialogue-line { font-size: 17px; line-height: 1.55; }
}

@media (max-width: 480px) {
  .scene-tools { padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  .tool-button { padding-inline: 5px; gap: 3px; font-size: .78rem; }
  .tool-button svg { width: 15px; height: 15px; }
  .tool-end { gap: 4px; }
  #open-book { width: 82px; height: 53px; }
  #scene-dialogue { inset-inline: 9px; }
  #dialogue-line { font-size: 17px; }
}

.illustrated-mode #scene-stage::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: var(--scene-backdrop) center / cover no-repeat;
  filter: blur(17px) brightness(.48);
  pointer-events: none;
}

@media (orientation: portrait) {
  .illustrated-mode .scene-arrow { bottom: calc(var(--tools-floor) + 15px); }
}

@media (prefers-reduced-motion: reduce) {
  #open-book .book-object { transition: none; }
}