/* Native top-layer dialog keeps the main archive intact beneath the opening. */
#opening-credits {
  box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-width:none;
  max-height:calc(100dvh - 24px);max-height:calc(var(--visual-viewport-height,100dvh) - 24px);
  margin:auto;padding:18px;border:1px solid #a68b57;border-radius:10px;
  color:#eee7d9;background:#111714;box-shadow:0 28px 100px #000b;overflow:auto;
}
#opening-credits::backdrop {background:rgba(3,8,6,.82);backdrop-filter:blur(5px)}
.opening-credits-top {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.opening-credits-kicker {font-size:10px;letter-spacing:.15em;color:#bda678;margin:0 0 5px}
#opening-credits-title {font-family:Georgia,serif;font-size:20px;line-height:1.2;margin:0}
.opening-credits-close {flex:none;min-height:44px;padding:8px 12px;border:1px solid #baa273;border-radius:4px;background:#202820;color:#fff1d5;font:inherit;font-size:13px;cursor:pointer}
.opening-credits-close:hover {background:#354032}
#opening-credits :focus-visible {outline:2px solid #f2ce86;outline-offset:3px}
.opening-credits-stage {display:flex;justify-content:center;background:#050806;border-radius:4px;overflow:hidden}
.opening-credits-stage iframe {display:block;width:clamp(200px,calc(var(--visual-viewport-height,100dvh) * .36),360px);max-width:100%;height:auto;aspect-ratio:9 / 16;min-height:200px;border:0;background:#000}
.opening-credits-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.opening-credits-actions:has(button:not([hidden])) {min-height:44px}
#opening-credits [hidden] {display:none!important}
.opening-credits-status {font-size:12px;line-height:1.5;text-align:center;color:#cbc8bc;margin:10px 0 0}
@media(max-width:480px) {#opening-credits {padding:12px;width:calc(100vw - 16px);max-height:calc(var(--visual-viewport-height,100dvh) - 16px)}.opening-credits-top{gap:8px}.opening-credits-kicker{font-size:9px}#opening-credits-title{font-size:18px}.opening-credits-close{font-size:12px;padding:8px}}
@media(max-height:480px) {.opening-credits-top{margin-bottom:6px}.opening-credits-status{margin-top:6px}.opening-credits-actions{margin-top:6px}}

.opening-credits-external,.opening-credits-privacy {font-size:12px;line-height:1.5;text-align:center;color:#cbc8bc;margin:10px 0 0}
.opening-credits-external a {display:inline-flex;align-items:center;min-height:44px;color:#f1d39c;text-underline-offset:3px}
.opening-credits-privacy {font-size:11px;color:#aaa99e}