/* The opening is a temporary top layer; it never participates in pane layout. */
.opening-boot-cover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #f5f2e9;
  pointer-events: none;
  animation: opening-fail-open 0s 2.2s forwards;
}
.opening-boot-cover[hidden] { display: none; }
@keyframes opening-fail-open { to { visibility: hidden; } }
dialog.review-opening {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  color: #496066;
  background: #f5f2e9;
  opacity: 1;
  transition: opacity 520ms ease;
  isolation: isolate;
}
dialog.review-opening:not([open]) { display: none; }
.review-opening::backdrop { background: #f5f2e9; transition: opacity 520ms ease; }
#openingDescription { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.opening-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 44%, #fffdf8 0%, #f5f1e6 44%, #e4e7de 100%);
}
.opening-world::before, .opening-world::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid #a59c7545;
  inset: 28px;
}
.opening-world::after { inset: 34px; border-color: #a59c7524; }
.opening-aura {
  position: absolute;
  inset: 9% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fffffcbb, #cfcae13d 48%, transparent 70%);
  filter: blur(18px);
}
.opening-actor {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(68vh, 70vw);
  aspect-ratio: 1;
  clip-path: inset(6px 1px 2px);
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 96%, transparent 100%);
  opacity: 0;
}
.opening-actor canvas { display: block; width: 100%; height: 100%; }
.opening-playing .opening-actor { animation: opening-arrive 640ms ease-out forwards; }
@keyframes opening-arrive { from { opacity: 0; transform: translate(-50%, -49%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.opening-caption {
  position: absolute;
  bottom: max(7vh, 46px);
  left: 20px;
  right: 20px;
  text-align: center;
  pointer-events: none;
}
.opening-caption span { font: 11px Georgia, serif; letter-spacing: .28em; color: #8b7f5e; }
.opening-caption h2 { margin: 12px 0 0; font: 400 18px "Songti SC", "STSong", serif; letter-spacing: .24em; color: #405b62; }
.opening-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #fffefb;
  opacity: 0;
  transition: opacity 850ms cubic-bezier(.3, 0, .2, 1);
}
.opening-white .opening-light { opacity: 1; }
.review-opening.opening-leaving, .review-opening.opening-leaving::backdrop { opacity: 0; }
.opening-skip {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 32px;
  min-height: 38px;
  border: 1px solid #b7b298;
  border-radius: 24px;
  padding: 9px 18px;
  background: #fffff7d9;
  color: #526267;
  font: 12px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .04em;
}
.opening-skip:hover { background: #fffefb; }
.opening-skip:focus-visible { outline: 2px solid #476f73; outline-offset: 4px; }
.opening-settings { margin-top: 22px; }
.opening-settings .opening-settings-copy { margin: 5px 0 0; grid-column: 1 / -1; font-size: 12px; line-height: 1.7; color: var(--skin-muted, #71808a); }
.opening-settings .button { justify-self: end; }
@media (max-width: 600px) {
  .opening-actor { width: min(70vh, 96vw); }
  .opening-world::before { inset: 14px; }
  .opening-world::after { inset: 19px; }
  .opening-skip { top: 25px; right: 26px; }
  .opening-caption { bottom: 10vh; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-boot-cover { display: none; }
  .review-opening, .review-opening::backdrop, .opening-light { transition: none; }
  .opening-playing .opening-actor { animation: none; opacity: 1; }
}