/* Open the center without changing either portrait's height or eye line. */
.fair-hide-seek-reunion { --reunion-outward-offset: 7vw; }
.fair-hide-seek-reunion__character--left img {
  transform: translate3d(calc(-1 * var(--reunion-outward-offset)), 31vh, 0);
}
.fair-hide-seek-reunion__character--right img {
  transform: translate3d(var(--reunion-outward-offset), 31vh, 0);
}
.fair-reunion-dialogue {
  --frost-outset: clamp(24px, 2vw, 40px);
  position: fixed;
  z-index: 76;
  left: max(24vw, calc(18vw + 12vh));
  right: max(24vw, calc(18vw + 12vh));
  bottom: max(24px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.fair-reunion-dialogue[hidden] { display: none; }
.fair-reunion-dialogue.is-visible { pointer-events: auto; }
.fair-reunion-dialogue__advance {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-family: "I.MingCP", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(20px, 1.75vw, 30px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .08em;
  -webkit-tap-highlight-color: transparent;
}
.fair-reunion-dialogue__advance:focus,
.fair-reunion-dialogue__advance:focus-visible {
  outline: none;
}
.fair-reunion-dialogue .story-dialogue-lines {
  min-height: 0;
  max-height: calc(100dvh - 82px);
  padding: 12px var(--frost-outset) 16px;
  gap: 12px;
}
/* Reserve space inside the clipping container for the entire feathered edge. */
.fair-reunion-dialogue .story-dialogue-line.is-current::after {
  left: calc(2px - var(--frost-outset));
  right: calc(2px - var(--frost-outset));
}
.fair-reunion-dialogue__advance small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .74);
  font: 400 13px/1.2 "Microsoft JhengHei", sans-serif;
  letter-spacing: .08em;
  text-align: right;
}
.fair-reunion-dialogue .speaker-jiayu { color: #ffd4ad; }
.fair-reunion-dialogue .speaker-xinling { color: #fff; }
.fair-reunion-dialogue .speaker-mengjie {
  color: #e4cfff;
  font-family: "Microsoft JhengHei", "Noto Sans TC", "PingFang TC", sans-serif;
  font-weight: 400;
}
.fair-reunion-dialogue:not(.is-visible) .dialogue-frost__content,
.fair-reunion-dialogue:not(.is-visible) .story-dialogue-line.is-current::after {
  opacity: 0;
  transform: translateY(12px);
}
body.has-fair-reunion-dialogue .fair-panorama-shell { pointer-events: none; }

@media (max-width: 760px) {
  /* Keep the player's phone in the foreground, above portraits (72) but
     below dialogue (76), and clear of the bottom mini music player. */
  body:has(.fair-hide-seek-reunion.is-visible:not([hidden])) .panorama-pocket-phone {
    z-index: 75;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px));
  }
  .fair-hide-seek-reunion { --reunion-outward-offset: clamp(10px, 3vw, 18px); }
  .fair-reunion-dialogue {
    --frost-outset: 8px;
    top: auto;
    left: max(4px, env(safe-area-inset-left));
    right: max(4px, env(safe-area-inset-right));
    bottom: max(clamp(96px, 18dvh, 180px), calc(env(safe-area-inset-bottom) + 80px));
  }
  .fair-reunion-dialogue__advance {
    font-size: clamp(16px, 4.3vw, 19px);
    line-height: 1.46;
    letter-spacing: .04em;
  }
  /* Anchor the newest line near the characters' lower bodies, away from
     faces and the bottom controls; older lines extend upward. */
  .fair-reunion-dialogue .story-dialogue-lines {
    max-height: min(38dvh, calc(100dvh - 210px));
    gap: 10px;
    padding: 6px var(--frost-outset);
  }
  .fair-reunion-dialogue__advance small {
    position: absolute;
    top: 100%;
    right: var(--frost-outset);
    margin-top: 6px;
  }
}
@media (max-height: 520px) and (min-width: 761px) {
  .fair-reunion-dialogue__advance { font-size: 16px; line-height: 1.4; }
  .fair-reunion-dialogue { bottom: 12px; }
  .fair-reunion-dialogue .story-dialogue-lines { max-height: calc(100dvh - 50px); }
}