.opening-cinematic{position:absolute;inset:0;z-index:90;overflow:hidden;background:#061219;color:#f6ebce;isolation:isolate;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;touch-action:manipulation;overscroll-behavior:none;user-select:none}
.opening-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto;pointer-events:none}
.opening-top{position:absolute;inset:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) auto max(24px,env(safe-area-inset-left));display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.opening-heading{display:flex;flex-direction:column;gap:7px;text-shadow:0 2px 10px #000}
.opening-eyebrow{color:#d5b47c;font-size:11px;font-weight:600;letter-spacing:.22em}
.opening-scene-title{font-size:20px;font-family:"Noto Serif TC","Songti TC","Microsoft JhengHei",serif;letter-spacing:.14em}
.opening-controls{display:flex;gap:9px;align-items:center}
.opening-cinematic button,.opening-transcript summary{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
.opening-control{min-height:42px;min-width:62px;padding:8px 13px;border:1px solid #a8b6a43b;border-radius:5px;background:#0b1d25bd;box-shadow:0 4px 18px #0002;font-size:12px!important;letter-spacing:.04em;backdrop-filter:blur(6px)}
.opening-control:hover,.opening-control:focus-visible{background:#29433fe6;border-color:#c7b37c}
.opening-control:focus-visible,.opening-next:focus-visible,.opening-transcript summary:focus-visible{outline:2px solid #f3d89c;outline-offset:4px}
.opening-skip{color:#c8d2c6!important}
.opening-caption{position:absolute;left:50%;bottom:max(76px,calc(env(safe-area-inset-bottom) + 56px));transform:translateX(-50%);width:min(700px,calc(100% - 170px));text-align:center;text-shadow:0 2px 3px #000,0 0 14px #000;pointer-events:none}
.opening-speaker{font-size:13px;color:#ebca8c;min-height:18px;letter-spacing:.12em;margin-bottom:8px}
.opening-line{margin:0;font-size:clamp(17px,2.1vw,23px);line-height:1.7;letter-spacing:.045em;text-wrap:balance;font-weight:500}
.opening-bottom{position:absolute;left:max(26px,env(safe-area-inset-left));right:max(26px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:24px}
.opening-steps{display:flex;gap:7px;align-items:center;padding:10px 0}
.opening-step{display:block;height:3px;width:22px;background:#6d827d60;border-radius:2px;transition:background .2s,width .2s}
.opening-step.is-active{width:36px;background:#e5c78c;box-shadow:0 0 7px #f0d59755}
.opening-step.is-done{background:#91b1a1}
.opening-next{min-height:44px;padding:9px 20px;border:1px solid #d1bd7f6b;border-radius:4px;background:linear-gradient(120deg,#40504be6,#253831e6);font-size:13px!important;letter-spacing:.08em;box-shadow:0 4px 20px #0004}
.opening-next::after{content:'›';display:inline-block;margin-left:16px;color:#e9d19d;font-size:18px;line-height:1}
.opening-next:hover{background:#4a5b4e}
.opening-transcript{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);max-width:min(660px,75%);font-size:11px;color:#c1cfc3}
.opening-transcript summary{list-style:none;text-align:center;padding:8px;opacity:.72}
.opening-transcript summary::-webkit-details-marker{display:none}
.opening-transcript[open]{width:min(660px,75%);background:#0d212bf5;border:1px solid #617366;padding:8px 14px;border-radius:6px;box-shadow:0 16px 60px #0009;user-select:text}
.opening-transcript[open] summary{color:#f2deb4;opacity:1}
.opening-transcript-body{max-height:60vh;overflow:auto;overscroll-behavior:contain;padding:2px 16px 14px;font-size:14px;line-height:1.8}
.opening-transcript-body h3{font-size:14px;color:#ddc28b;font-weight:500;margin:20px 0 8px}
.opening-transcript-body p{margin:8px 0}
.opening-cinematic.is-paused .opening-eyebrow::after{content:' · 已暫停';letter-spacing:0;color:#bacdc1}
@media(max-height:500px){.opening-top{top:max(12px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}.opening-heading{gap:3px}.opening-scene-title{font-size:15px}.opening-eyebrow{font-size:9px}.opening-control{min-height:36px;font-size:11px!important;padding:7px 11px}.opening-caption{bottom:max(55px,calc(env(safe-area-inset-bottom) + 43px));width:min(650px,calc(100% - 125px))}.opening-speaker{font-size:11px;margin-bottom:3px;min-height:14px}.opening-line{font-size:clamp(14px,2.2vw,18px);line-height:1.55}.opening-bottom{bottom:max(9px,env(safe-area-inset-bottom));left:max(17px,env(safe-area-inset-left));right:max(17px,env(safe-area-inset-right))}.opening-next{min-height:38px;padding:6px 14px;font-size:12px!important}.opening-transcript{bottom:12px;font-size:10px}.opening-step{width:15px}.opening-step.is-active{width:25px}.opening-transcript-body{max-height:54vh}}
@media(max-width:560px) and (min-height:501px){.opening-top{left:18px;right:18px}.opening-caption{width:calc(100% - 40px);bottom:22%}.opening-line{font-size:18px}.opening-controls{gap:5px}.opening-control{padding:7px 9px}.opening-scene-title{font-size:17px}.opening-transcript{bottom:83px;max-width:90%}.opening-transcript[open]{width:88%}.opening-bottom{bottom:max(25px,env(safe-area-inset-bottom))}.opening-step{width:13px}.opening-step.is-active{width:23px}}
@media(prefers-reduced-motion:reduce){.opening-step{transition:none}}