/*
 * V8 reading and input layout. Loaded after the original scene styles.
 * Ordinary scenes and the title only: the ending director owns its own layout.
 * The picture and input host always share the same rectangle. No portrait crop.
 */

#game:not(.ending) {
  --ui-panel-bottom: max(8px, env(safe-area-inset-bottom));
  --scene-top: calc(56px + env(safe-area-inset-top));
  /* game.js measures dialogue height + 44px. Keep an 8px picture-to-panel gap. */
  --scene-bottom: max(0px, calc(var(--panel-reserve, 240px) - 44px + var(--ui-panel-bottom) + 8px));
  height: 100dvh;
  min-height: 0;
}

#game:not(.on-title):not(.ending) #scene-frame,
#game:not(.on-title):not(.ending) #scene-touch.scene-interaction-host {
  top: var(--scene-top);
  right: 0;
  bottom: var(--scene-bottom);
  left: 0;
}

#game:not(.on-title):not(.ending) #scene-frame {
  background: #070707;
  transition: none;
}

#game:not(.on-title):not(.ending) #scene-photo,
#game:not(.on-title):not(.ending) #scene-video {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
}

/* A quiet, shallow header; all three controls retain a real finger-sized target. */
#game:not(.ending) #hud {
  height: var(--scene-top);
  gap: 10px;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  background: #080808;
}

#game:not(.ending) #hud .brand {
  min-width: 0;
  max-width: calc(100% - 152px);
  color: #d4d0c7;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 1.5px;
}

#game:not(.ending) #hud .brand span {
  display: block;
  margin: 2px 0 0;
  color: #9d9990;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .15px;
  overflow-wrap: anywhere;
}

#game:not(.ending) #hud nav {
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

#game:not(.ending) #hud nav button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #bdb7a62e;
  background: #111110;
  color: #e6e1d5;
}

#game:not(.ending) #hud #journal-btn {
  width: auto;
  min-width: 54px;
  padding: 0 9px;
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
}

/*
 * Keep the speaker, dialogue and causal direction as distinct reading levels.
 * The existing wrappers become grid contents, allowing the three utility buttons
 * to share one 44px row instead of consuming a second header-sized strip.
 */
#game:not(.on-title):not(.ending) #dialogue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto;
  column-gap: 6px;
  row-gap: 0;
  left: 50%;
  bottom: var(--ui-panel-bottom);
  width: calc(100% - 20px);
  max-width: 760px;
  padding: 10px 12px 0;
  transform: translateX(-50%);
  background: #0b0b0b;
  border: 0;
  border-top: 1px solid #b4ac943e;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  transition: opacity .22s ease;
}

#game:not(.on-title):not(.ending) #dialogue .dialogue-head,
#game:not(.on-title):not(.ending) #dialogue .dialogue-foot {
  display: contents;
}

#game:not(.on-title):not(.ending) #dialogue #speaker {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 4px;
  color: #c2b69d;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1px;
}

#game:not(.on-title):not(.ending) #dialogue #speaker:empty {
  display: none;
}

#game:not(.on-title):not(.ending) #dialogue #dialogue-text {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  margin: 1px 0 7px;
  color: #f4f0e7;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: .1px;
  overflow-wrap: anywhere;
  text-shadow: none;
}

#game:not(.on-title):not(.ending) #dialogue #scene-direction {
  display: block !important;
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0 0 10px;
  color: #b8b3a9;
  font-size: 13px;
  line-height: 1.58;
  letter-spacing: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

#game:not(.on-title):not(.ending) #dialogue #dialogue-text:empty,
#game:not(.on-title):not(.ending) #dialogue #scene-direction:empty {
  display: none !important;
  min-height: 0;
  margin: 0;
}

#game:not(.on-title):not(.ending) #dialogue #interaction {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 3px;
}

#game:not(.on-title):not(.ending) #dialogue #interaction > button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .25px;
  text-wrap: pretty;
}

#game:not(.on-title):not(.ending) #dialogue #interaction > .primary {
  background: #292722;
  border: 1px solid #b7aa8b91;
  color: #f4eddf;
}

#game:not(.on-title):not(.ending) #dialogue #interaction > .secondary {
  background: #111110;
  border: 1px solid #938a7752;
  color: #c8c1b4;
}

#game:not(.on-title):not(.ending) #dialogue #interaction:has(> .secondary) > .primary {
  flex: 1.25 1 0;
}

#game:not(.on-title):not(.ending) #dialogue #voice-replay,
#game:not(.on-title):not(.ending) #dialogue #skip-voice,
#game:not(.on-title):not(.ending) #dialogue #hint-btn {
  grid-row: 5;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 5px 3px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #b0a99a;
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

#game:not(.on-title):not(.ending) #dialogue #voice-replay { grid-column: 1; }
#game:not(.on-title):not(.ending) #dialogue #skip-voice { grid-column: 2; }
#game:not(.on-title):not(.ending) #dialogue #hint-btn { grid-column: 3; }
#game:not(.on-title):not(.ending) #dialogue #save-status { display: none; }

#game:not(.ending) button:focus-visible,
#game:not(.ending) input:focus-visible {
  outline: 2px solid #e5d09d;
  outline-offset: 3px;
}

#game:not(.ending) button:disabled { opacity: .43; }

/* Interaction assistance avoids the face and the actual white seam on the cap. */
#game:not(.ending) #scene-touch .di-trace-assist {
  top: 60%;
  bottom: auto;
  width: min(89%, 330px);
  gap: 8px;
  padding: 6px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: #090908e8;
}

#game:not(.ending) #scene-touch .di-trace-progress,
#game:not(.ending) #scene-touch .di-root.has-assist .di-trace-progress {
  top: 44px;
  right: 10px;
  bottom: auto;
  font-size: 11px;
}

#game:not(.ending) #scene-touch .di-focus-panel {
  bottom: 52px;
  width: min(92%, 350px);
  padding: 8px 10px 5px;
  border-radius: 4px;
  background: #11120ff2;
}

#game:not(.ending) #scene-touch .di-focus-heading { font-size: 12px; }
#game:not(.ending) #scene-touch .di-focus-status { font-size: 11px; }
#game:not(.ending) #scene-touch .di-focus-range { height: 44px; }

#game:not(.ending) #scene-touch .di-button,
#game:not(.ending) #scene-touch .ci-button,
#game:not(.ending) #scene-touch .ci-knock .ci-replay {
  min-height: 44px;
  font-size: 12px;
  line-height: 1.35;
}

#game:not(.ending) #scene-touch .di-trace-assist .di-button { min-height: 46px; }
#game:not(.ending) #scene-touch .di-adjust { font-size: 23px; }

#game:not(.ending) #scene-touch .ci-hint,
#game:not(.ending) #scene-touch .di-hint {
  bottom: 5px;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border-radius: 3px;
  background: #090908e8;
  color: #e2dacb;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0;
}

#game:not(.ending) #scene-touch .ci-sweep .ci-dock {
  top: 63%;
  bottom: auto;
  width: min(90%, 360px);
  transform: translate(-50%, -50%);
}

#game:not(.ending) #scene-touch .ci-knock .ci-dock { bottom: 52px; }
#game:not(.ending) #scene-touch .ci-slot,
#game:not(.ending) #scene-touch .ci-piece { font-size: 12px; }

#game:not(.on-title):not(.ending) #sound-caption {
  top: calc(var(--scene-top) + 8px);
  bottom: auto;
  max-width: min(84%, 460px);
  padding: 5px 8px;
  color: #d5cebd;
  background: #080808d9;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .2px;
}

/* The title keeps an uncluttered hierarchy over the empty opening room. */
#game.on-title #hud { background: linear-gradient(#080808db, #0808088a); }
#game.on-title #hud .brand { max-width: calc(100% - 60px); }
#game.on-title #scene-frame { inset: 0; }
#game.on-title #scene-photo { object-fit: cover; }
#game.on-title #shade {
  background: linear-gradient(90deg, #050505c9, #05050540 80%),
    linear-gradient(0deg, #050505ed, #05050533 70%);
}

#game.on-title #title-screen {
  top: 50%;
  left: 7%;
  width: 86%;
  max-width: 600px;
  transform: translateY(-44%);
  text-shadow: 0 2px 18px #000;
}

#game.on-title .title-kicker {
  margin: 0 0 17px;
  color: #cbc3b2;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 2px;
}

#game.on-title .title-kicker::before { width: 22px; margin-right: 10px; }

#game.on-title h1 {
  margin: 0 0 21px;
  color: #f1eee4;
  font-size: clamp(58px, 17vw, 72px);
  line-height: 1.12;
  letter-spacing: 4px;
}

#game.on-title .title-quote {
  margin: 0 0 24px;
  color: #c3beb4;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 1px;
}

#game.on-title #start-btn,
#game.on-title #continue-btn {
  width: min(100%, 310px);
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1.5px;
}

#game.on-title #start-btn { background: #d3bd8e; border-color: #d3bd8e; color: #242118; }
#game.on-title #start-btn span { float: right; margin-left: 16px; }
#game.on-title #continue-btn { display: block; margin: 10px 0 0; background: #090908b8; }
#game.on-title .title-meta { margin: 13px 0 0; font-size: 11px; color: #a8a195; letter-spacing: 1px; }

#game.on-title .title-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 350px);
  margin: 18px 0 0;
  font-size: 10px;
  line-height: 1.65;
  color: #a59e92;
}

#game.on-title #about-btn {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 44px;
  padding: 7px 5px;
  color: #c5bba5;
  font-size: 11px;
  text-decoration-color: #98876580;
  text-underline-offset: 5px;
}

/* Desktop: a full-height cinema image beside a quiet reading column. */
@media (min-width: 900px) and (min-height: 600px) {
  #game:not(.ending) {
    --ui-shell-inset: max(28px, calc((100vw - 1480px) / 2));
    --ui-reading-width: clamp(320px, 30vw, 420px);
    --ui-stage-right: calc(var(--ui-shell-inset) + var(--ui-reading-width) + 40px);
    --scene-top: 82px;
    --scene-bottom: 30px;
  }

  #game:not(.on-title):not(.ending) #scene-frame,
  #game:not(.on-title):not(.ending) #scene-touch.scene-interaction-host {
    left: var(--ui-shell-inset);
    right: var(--ui-stage-right);
    top: var(--scene-top);
    bottom: var(--scene-bottom);
  }

  #game:not(.on-title):not(.ending) #scene-frame {
    background: radial-gradient(ellipse at 50% 45%, #141310, #060606 76%);
    border-top: 1px solid #aaa0841c;
    border-bottom: 1px solid #aaa0841c;
  }

  #game:not(.ending) #hud {
    left: var(--ui-shell-inset);
    right: var(--ui-shell-inset);
    height: 72px;
    padding: 10px 0;
  }

  #game:not(.ending) #hud .brand { max-width: 60%; font-size: 14px; letter-spacing: 2px; }
  #game:not(.ending) #hud .brand span { display: inline-block; margin: 0 0 0 16px; font-size: 11px; }
  #game:not(.ending) #hud nav { gap: 8px; }

  #game:not(.on-title):not(.ending) #dialogue {
    left: auto;
    right: var(--ui-shell-inset);
    bottom: 50%;
    width: var(--ui-reading-width);
    max-height: calc(100dvh - 148px);
    padding: 24px 4px 12px 24px;
    transform: translateY(50%);
    border-top: 0;
    border-left: 1px solid #a39a8238;
    background: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6e6652 transparent;
    overscroll-behavior: contain;
  }

  #game:not(.on-title):not(.ending) #dialogue #speaker { margin-bottom: 12px; font-size: 12px; }
  #game:not(.on-title):not(.ending) #dialogue #dialogue-text { margin-bottom: 18px; font-size: 24px; line-height: 1.6; }
  #game:not(.on-title):not(.ending) #dialogue #scene-direction { margin-bottom: 24px; font-size: 14px; line-height: 1.8; }
  #game:not(.on-title):not(.ending) #dialogue #interaction { margin-bottom: 9px; }
  #game:not(.on-title):not(.ending) #dialogue #interaction > button { min-height: 48px; font-size: 14px; }
  #game:not(.on-title):not(.ending) #dialogue #voice-replay,
  #game:not(.on-title):not(.ending) #dialogue #skip-voice,
  #game:not(.on-title):not(.ending) #dialogue #hint-btn { font-size: 12px; }

  #game:not(.on-title):not(.ending) #sound-caption {
    left: calc((100% + var(--ui-shell-inset) - var(--ui-stage-right)) / 2);
    max-width: min(38vw, 460px);
  }

  #game.on-title #title-screen { left: max(7%, var(--ui-shell-inset)); transform: translateY(-44%); }
  #game.on-title h1 { font-size: clamp(82px, 7vw, 108px); margin-bottom: 25px; }
  #game.on-title .title-kicker { font-size: 12px; letter-spacing: 3px; margin-bottom: 24px; }
  #game.on-title .title-quote { font-size: 16px; margin-bottom: 28px; }
  #game.on-title .title-bottom { margin-top: 24px; font-size: 11px; }
}

/* Short landscape windows keep the image and actions in separate columns too. */
@media (min-width: 700px) and (max-height: 599px) {
  #game:not(.ending) { --scene-top: 54px; --scene-bottom: 12px; }
  #game:not(.ending) #hud { height: 50px; padding: 3px 16px; }
  #game:not(.on-title):not(.ending) #scene-frame,
  #game:not(.on-title):not(.ending) #scene-touch.scene-interaction-host { left: 12px; right: 44%; }
  #game:not(.on-title):not(.ending) #dialogue {
    left: auto;
    right: 12px;
    bottom: 12px;
    width: calc(44% - 24px);
    max-height: calc(100dvh - 70px);
    padding: 8px 8px 0;
    transform: none;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #game:not(.on-title):not(.ending) #dialogue #dialogue-text { font-size: 17px; }
  #game:not(.on-title):not(.ending) #dialogue #scene-direction { font-size: 12px; line-height: 1.5; }
  #game:not(.on-title):not(.ending) #sound-caption { left: 29%; max-width: 48%; }
  #game.on-title #title-screen { top: 54%; left: 6%; transform: translateY(-50%); max-width: 82%; }
  #game.on-title h1 { font-size: 46px; margin-bottom: 10px; }
  #game.on-title .title-kicker { margin-bottom: 8px; }
  #game.on-title .title-quote { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
  #game.on-title #start-btn,
  #game.on-title #continue-btn { display: inline-block; width: 230px; min-height: 46px; margin: 0 8px 0 0; }
  #game.on-title .title-meta { margin-top: 8px; }
  #game.on-title .title-bottom { margin-top: 3px; }
}

/* Settings are always in the browser's modal top layer, with a reachable close. */
#modal {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  margin: auto;
  border: 1px solid #aaa08455;
  border-radius: 5px;
  background: #111110;
  color: #ede8dc;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #746b56 transparent;
}

#modal::backdrop { background: #000b; backdrop-filter: blur(6px); }
#modal #modal-inner { padding: 0 20px 24px; }
#modal .modal-top {
  position: sticky;
  top: 0;
  z-index: 3;
  gap: 12px;
  min-height: 68px;
  margin: 0 0 10px;
  padding: 10px 0;
  background: #111110;
  border-bottom: 1px solid #9e947a30;
}

#modal .modal-top h2 { font-size: 22px; line-height: 1.4; }
#modal .close-modal { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; font-size: 28px; border-radius: 3px; }
#modal .modal-copy, #modal .item-card p { font-size: 13px; line-height: 1.85; }
#modal .settings-row { gap: 10px; min-height: 44px; margin: 12px 0; font-size: 13px; }
#modal .settings-row label { flex: 0 0 82px; width: 82px; }
#modal .settings-row input[type="range"] { min-width: 50px; height: 44px; margin: 0; accent-color: #cfba8c; }
#modal .settings-row output { flex: 0 0 34px; width: 34px; font-size: 12px; }
#modal .toggle { min-height: 44px; gap: 12px; margin: 6px 0; font-size: 13px; }
#modal .toggle input { flex: 0 0 20px; width: 20px; height: 20px; }
#modal .modal-actions { gap: 10px; margin-top: 20px; }
#modal .modal-actions button { min-width: 110px; min-height: 46px; padding: 10px 12px; font-size: 13px; border-radius: 3px; }
#modal .small-button { min-height: 44px; padding: 10px 0; font-size: 12px; line-height: 1.6; }
#modal .cue-number { min-height: 44px; font-size: 16px; }
#modal .upload-control { padding: 12px; font-size: 13px; }
#modal .upload-control input { min-height: 44px; font-size: 12px; }
#modal .muted-label { font-size: 11px; line-height: 1.8; }
#modal .muted-label a { display: inline-block; min-height: 40px; padding: 10px 0; }
#modal .item-card { padding: 16px 0; }
#modal .item-card h3 { font-size: 15px; line-height: 1.5; }
#modal .memory-pair { gap: 10px; }
#modal .memory-pair figcaption { font-size: 11px; padding: 7px 4px; }

@media (hover: hover) {
  #game:not(.on-title):not(.ending) #dialogue #interaction > .primary:hover:not(:disabled) { background: #3c3528; }
  #game:not(.ending) #hud nav button:hover { background: #24211b; }
  #game:not(.on-title):not(.ending) #dialogue #voice-replay:hover,
  #game:not(.on-title):not(.ending) #dialogue #skip-voice:hover,
  #game:not(.on-title):not(.ending) #dialogue #hint-btn:hover { background: #27241d; color: #e0d5bd; }
}

@media (max-width: 370px) {
  #game:not(.ending) #hud { padding-left: 10px; padding-right: 10px; }
  #game:not(.on-title):not(.ending) #dialogue { width: calc(100% - 16px); padding-left: 10px; padding-right: 10px; }
  #game:not(.on-title):not(.ending) #dialogue #dialogue-text { font-size: 18px; }
  #game:not(.on-title):not(.ending) #dialogue #scene-direction { font-size: 12.5px; }
  #modal #modal-inner { padding-right: 16px; padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #game:not(.on-title):not(.ending) #dialogue { transition: none; }
}

#game.reduced-motion:not(.on-title):not(.ending) #dialogue { transition: none; }
/* Leave room for the bandage to turn inside the phone image. */
@media (max-width: 760px) {
  #scene-touch .ci-bandage[data-interaction="yanqiu"] .ci-flap {
    margin-left: -32px;
  }
}