/* Runtime adds these states at actual scene boundaries. No evidence or mask
   state is inferred here. Load after the existing game and campaign styles. */
.dialogue-shade {
  --direction-ink: #f0eef3;
  --direction-accent: #e5d4ae;
}

/* The full text reserves its final height; the visible layer reveals it. */
.dialogue-text {
  --direction-text-end: 26px;
  position: relative;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.dialogue-text:has(>.dialogue-visible) {
  color: transparent;
  text-shadow: none;
}
.dialogue-text>.dialogue-visible {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  min-height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-right: var(--direction-text-end);
  color: var(--direction-ink);
  font: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  text-shadow: 1px 1px 1px #000;
  pointer-events: none;
}
.dialogue-next {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--direction-accent);
  font-size: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dialogue-next::after {
  content: '';
  width: 12px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0,100% 0,50% 100%);
  animation: direction-next-breath 1.4s ease-in-out infinite;
}
.dialogue-shade.is-typing .dialogue-next::after {
  opacity: .4;
  animation: none;
}
.dialogue-shade .choices[hidden],
.dialogue-shade .dialogue-next[hidden] {
  display: none!important;
}
.dialogue-next:focus-visible {
  outline: 2px solid var(--direction-accent);
  outline-offset: -8px;
  border-radius: 50%;
}
.dialogue-next:active::after {
  transform: translateY(2px);
}
.dialogue-box .dialogue-text {
  padding-right: var(--direction-text-end);
}

/* Entrance belongs to a new person, not every line of their dialogue. */
.dialogue-portrait {
  --direction-portrait-opacity: 1;
  transform-origin: 50% 100%;
  transition: filter .22s ease-out, opacity .22s ease-out;
}
.dialogue-portrait.speaking {
  --direction-portrait-opacity: 1;
  filter: brightness(1);
  opacity: 1;
}
.dialogue-portrait.listening {
  --direction-portrait-opacity: .86;
  filter: brightness(.72);
  opacity: .86;
}
.dialogue-portrait.is-entering {
  animation: direction-portrait-enter .28s ease-out both;
}
.dialogue-box .speaker {
  color: var(--direction-accent);
}
.choices .choice {
  min-height: 44px;
  min-width: 44px;
  line-height: 1.7;
  touch-action: manipulation;
  transition: color .12s ease-out;
}
.choices .choice:focus-visible {
  outline: 0;
  color: #f4d59b;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* The engine controls cover/reveal and stops movement during the transition. */
.direction-stage-transition {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #080b10;
  opacity: 0;
  transition: opacity .32s ease-in-out;
  pointer-events: auto;
  touch-action: none;
}
.direction-stage-transition.is-covered {
  opacity: 1;
}

/* Contained artwork and controls occupy separate rows, including on phones. */
.campaign-cinematic.panel {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  min-height: 0;
  overflow: hidden;
}
.campaign-cinematic>.panel-content {
  min-height: 0;
  height: auto;
  overflow: hidden;
}
.campaign-cinematic>.panel-content>img {
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  transform-origin: var(--direction-pan-origin,50% 50%);
}
.campaign-cinematic>.panel-content:has(>.direction-cg-caption) {
  grid-template-rows: minmax(0,1fr) auto;
}
.direction-cg-caption {
  grid-row: 2;
  align-self: end;
  width: min(72ch,100%);
  max-height: 24svh;
  margin: 0 auto;
  padding: 8px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #877c65 transparent;
  border: 0;
  background: none;
  box-shadow: none;
  color: #e0d8c9;
  font: 15px/1.75 Nanum,sans-serif;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.campaign-cinematic>.panel-actions {
  position: relative;
  inset: auto;
  min-height: 52px;
  margin: 0;
  padding: 4px max(16px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background: linear-gradient(0deg,#080c12,rgba(8,12,18,.75));
}
.campaign-cinematic.direction-cg-pan>.panel-content>img {
  animation: direction-cg-pan var(--direction-pan-duration,8s) ease-out both;
}
.direction-clue-spotlight {
  position: relative;
  isolation: isolate;
}
.direction-clue-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at var(--direction-focus-x,50%) var(--direction-focus-y,50%),transparent 0%,transparent 24%,rgba(2,5,9,.25) 72%);
  pointer-events: none;
  animation: direction-clue-light 1.2s ease-out both;
}

/* A brief pause stays skippable; it never disables the player's next action. */
.direction-choice-pause {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  align-content: end;
  justify-items: end;
  padding: max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background: linear-gradient(0deg,rgba(8,12,18,.28),transparent 45%);
  animation: direction-pause-enter .18s ease-out both;
}
.direction-choice-pause button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: #e7e0ce;
  font: 15px/1.5 Nanum,sans-serif;
  text-shadow: 1px 1px 2px #000;
  touch-action: manipulation;
}
.direction-choice-pause button:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.direction-settings {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 16px 0 0;
  padding: 8px 0;
  border: 0;
  background: none;
}
.direction-settings .direction-setting {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 9px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: #e7e0ce;
  font: 15px/1.7 Nanum,sans-serif;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.direction-settings .direction-setting[aria-pressed="false"] {
  color: #c3c0b8;
}
.direction-settings .direction-setting:hover,
.direction-settings .direction-setting:focus-visible {
  outline: 0;
  color: #f4d59b;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Compact views reserve a row for each element, so a long choice never covers
   a face or the text. The exploration room and controls keep their own layout. */
@media (max-width:640px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  #overlay:has(>.dialogue-shade) {
    position: fixed;
    inset: 0;
    z-index: 40;
  }
  .dialogue-shade {
    display: grid;
    grid-template-rows: minmax(0,1fr) auto auto;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(0deg,#080c12 0%,rgba(8,12,18,.72) 37%,transparent 75%);
  }
  .dialogue-shade .dialogue-portrait {
    grid-area: 1/1;
    position: relative;
    inset: auto;
    align-self: end;
    justify-self: start;
    width: 42%;
    height: 100%;
    min-height: 0;
    max-height: 48svh;
    object-fit: contain;
    object-position: bottom;
  }
  .dialogue-shade .dialogue-portrait.protagonist {
    left: auto;
    right: auto;
    justify-self: start;
  }
  .dialogue-shade .dialogue-portrait.partner {
    left: auto;
    right: auto;
    justify-self: end;
  }
  .dialogue-shade .choices {
    grid-area: 2/1;
    position: relative;
    left: auto;
    bottom: auto!important;
    width: 100%;
    max-height: 36svh;
    margin: 0;
    padding: 6px max(22px,env(safe-area-inset-right)) 6px max(22px,env(safe-area-inset-left));
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #877c65 transparent;
  }
  .dialogue-shade .choice {
    font-size: 15px;
    padding: 9px 14px;
  }
  .dialogue-shade .dialogue-box {
    grid-area: 3/1;
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    max-height: 42svh;
    margin: 0;
    padding: 20px max(22px,env(safe-area-inset-right)) max(52px,calc(env(safe-area-inset-bottom) + 44px)) max(22px,env(safe-area-inset-left));
    border: 0;
    box-shadow: none;
    background: linear-gradient(0deg,#080c12,rgba(8,12,18,.9) 80%,transparent);
  }
  .dialogue-shade .speaker {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .dialogue-shade .dialogue-text {
    --direction-text-end: 0px;
    min-height: 3.7em;
    max-height: min(25svh,11em);
    padding-right: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #877c65 transparent;
    font-size: 16px;
    line-height: 1.85;
  }
  .dialogue-shade .dialogue-next {
    right: max(16px,env(safe-area-inset-right));
    bottom: max(4px,env(safe-area-inset-bottom));
  }
}
@media (max-height:500px) and (orientation:landscape) {
  .direction-cg-caption {
    max-height: 20svh;
    padding-block: 4px;
    font-size: 13px;
    line-height: 1.6;
  }
  .dialogue-shade .choices {
    max-height: 40svh;
  }
  .dialogue-shade .dialogue-box {
    max-height: 45svh;
    padding-top: 10px;
    padding-bottom: max(44px,env(safe-area-inset-bottom));
  }
  .dialogue-shade .dialogue-text {
    min-height: 2.9em;
    max-height: 21svh;
    font-size: 14px;
    line-height: 1.65;
  }
  .dialogue-shade .speaker {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .dialogue-shade .choice {
    font-size: 14px;
    padding-block: 7px;
  }
}

@keyframes direction-next-breath {
  0%,100% { opacity: .7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(1px); }
}
@keyframes direction-portrait-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: var(--direction-portrait-opacity); transform: translateY(0); }
}
@keyframes direction-cg-pan {
  from { transform: scale(1) translate(0,0); }
  to { transform: scale(var(--direction-pan-scale,1.012)) translate(var(--direction-pan-x,0%),var(--direction-pan-y,-.4%)); }
}
@keyframes direction-clue-light {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes direction-pause-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion:reduce) {
  .dialogue-portrait,
  .dialogue-portrait.is-entering,
  .dialogue-next::after,
  .direction-stage-transition,
  .campaign-cinematic.direction-cg-pan>.panel-content>img,
  .direction-clue-spotlight::after,
  .direction-choice-pause,
  .choices .choice {
    animation: none!important;
    transition: none!important;
  }
  .dialogue-next::after { opacity: 1; transform: none; }
  .dialogue-shade.is-typing .dialogue-next::after { opacity: .4; }
  .direction-clue-spotlight::after { display: none; }
}
.direction-reduced-motion :is(.dialogue-portrait,.direction-stage-transition,.direction-choice-pause,.choices .choice),
.direction-reduced-motion .dialogue-next::after,
.direction-reduced-motion .campaign-cinematic.direction-cg-pan>.panel-content>img,
.direction-reduced-motion .direction-clue-spotlight::after {
  animation: none!important;
  transition: none!important;
}
.direction-reduced-motion .dialogue-next::after { opacity: 1; transform: none; }
.direction-reduced-motion .dialogue-shade.is-typing .dialogue-next::after { opacity: .4; }
.direction-reduced-motion .direction-clue-spotlight::after { display: none; }

.direction-ending-frame .panel-content>img{filter:brightness(.42);animation:none}
.direction-ending-caption{position:absolute;left:10%;right:10%;top:38%;text-align:center;color:#f3ead6;max-height:45%;overflow:auto;text-shadow:1px 2px 4px #000}
.direction-ending-caption h2{font-size:clamp(22px,4vw,38px);letter-spacing:.12em;font-weight:400;line-height:1.5;margin:0 0 22px}
.direction-ending-caption p{font-size:clamp(13px,2.3vw,18px);line-height:1.9;max-width:38em;margin:auto}

/* Ending CGs remain visible under the subsequent dialogue. */
.campaign-cinematic.ending-special{background:#080b10;grid-template-rows:minmax(0,1fr)}
.campaign-cinematic.ending-special>.panel-content>img{width:100%;height:100%;max-height:none;object-fit:contain;filter:none;animation:none;image-rendering:auto}
.ending-special>.panel-actions{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,#080b10c7,transparent);padding:12px 5%}
.ending-special .direction-ending-caption{top:auto;bottom:12%;left:5%;right:24%;max-height:none;text-align:left;text-shadow:0 2px 8px #000}
.ending-special .direction-ending-caption h2{font-size:clamp(18px,3vw,28px);letter-spacing:.08em;margin:0;line-height:1.4}
.ending-special .direction-ending-caption>p:not(.direction-cg-caption){display:none}
.ending-special .direction-cg-caption{font-size:14px;line-height:1.5;margin:0 0 6px}
.ending-dialogue-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080b10;pointer-events:none;image-rendering:auto}
.ending-dialogue .dialogue-box,.ending-dialogue .choices{z-index:2}
.ending-dialogue .dialogue-box{background:linear-gradient(0deg,#080b10ee,#080b107d,transparent)}