/* A small playable cartoon inside the real scene, with quiet subtitles. */
.opening-active > header,.opening-active > footer,.opening-active #targets,.opening-active #toast,.opening-active #actions{visibility:hidden!important;pointer-events:none!important}
#world-opening{position:absolute;inset:0;z-index:8;color:#fff4dc;background:linear-gradient(180deg,#20332c3d,transparent 23%,transparent 66%,#162d2acc 100%);overflow:hidden}
#world-opening[data-world=lantern]{background:linear-gradient(180deg,#22243a38,transparent 23%,transparent 66%,#20243be0 100%)}
.opening-top{position:absolute;top:max(18px,env(safe-area-inset-top));left:17px;right:17px;display:flex;align-items:center;gap:7px}
.opening-top button{min-height:44px;border:1px solid #f5e2b72e;border-radius:24px;background:#20372c54;color:#fff4da;padding:0 12px;font:11px Arial,sans-serif;backdrop-filter:blur(8px)}
#opening-sound{display:inline-flex;gap:6px;align-items:center}#opening-sound svg{width:14px;height:14px}#opening-sound[aria-pressed=false] svg{opacity:.5}#opening-skip{margin-left:auto}
#opening-heading{position:absolute;top:max(88px,calc(env(safe-area-inset-top) + 72px));left:25px;right:25px;text-shadow:0 2px 18px #223a2f}
#opening-chapter{font:9px Arial,sans-serif;letter-spacing:2.6px;text-transform:uppercase;margin:0 0 9px;color:#f6d5a0}#opening-title{font:29px/1.1 Georgia,serif;letter-spacing:-.5px;margin:0;color:#fff5dc}
#opening-copy{position:absolute;left:21px;right:21px;bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));text-shadow:0 1px 8px #14241d}
.opening-caption{display:flex;gap:12px;align-items:flex-start}
#opening-portrait{width:43px;height:52px;object-fit:cover;border-radius:45% 45% 35% 35%;border:1px solid #d6b97b88;box-shadow:0 2px 12px #152f2855;flex-shrink:0;margin-top:2px}
#opening-speaker{font:11px/1.3 Arial,sans-serif;letter-spacing:1px;color:#f1d09d;margin:0 0 6px}
#opening-line{font:16px/1.45 Georgia,'Palatino Linotype',serif;margin:0;text-wrap:pretty;max-width:370px}
#opening-hint{font:11px/1.45 Arial,sans-serif;margin:13px 0 0 55px;color:#e3ddc5}
#opening-next{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:46px;padding:0 19px;margin-top:16px;background:linear-gradient(110deg,#f5e2b9,#dcc08c);border:1px solid #e8cf98a3;border-radius:7px 17px 17px 7px;color:#354b41;font:14px Georgia,serif}
#opening-next svg{width:18px;height:18px}
#opening-choices{display:flex;flex-direction:column;gap:7px;margin-top:13px}
#opening-choices button{font:14px/1.35 Georgia,serif;text-align:left;color:#fff2d8;padding:11px 15px;min-height:44px;border:1px solid #dec28b70;border-radius:8px;background:#25443dc7;backdrop-filter:blur(8px)}
#opening-choices button:hover{background:#516354e8}#opening-choices button::before{content:'›';margin-right:9px;color:#e6be79}
#opening-touch{position:absolute;transform:translate(-50%,-50%);width:74px;height:74px;padding:0;border:1px solid #fff4c8c7;border-radius:50%;background:transparent;box-shadow:0 0 0 6px #fff2bd19,0 0 25px #f6d27b45;cursor:pointer;touch-action:manipulation}
#opening-touch svg{position:absolute;right:-8px;bottom:-8px;width:28px;height:28px;background:#f5e3b9;border-radius:50%;color:#53634b;padding:6px;box-shadow:0 2px 8px #24382b44}
#opening-touch:hover{box-shadow:0 0 0 9px #fff2bd2a,0 0 30px #f6d27b77}
#replay-opening{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;padding:8px 14px;min-height:44px;background:none;border:1px solid #b99a6145;border-radius:20px;font:12px Georgia,serif;color:#6d7558}#replay-opening svg{height:16px;width:16px}
@media(max-width:350px),(max-height:650px){#opening-copy{left:17px;right:17px;bottom:17px}#opening-line{font-size:14px;line-height:1.4}#opening-title{font-size:25px}#opening-portrait{width:36px;height:44px}.opening-caption{gap:9px}#opening-hint{margin-left:45px}.opening-top{top:max(10px,env(safe-area-inset-top))}.opening-top button{padding:0 10px;font-size:10px}#opening-choices button{font-size:13px;padding:9px 12px}}

#opening-copy.cinematic-silent .opening-caption{visibility:hidden;pointer-events:none}
#world-opening[data-beat=flight] #opening-heading{pointer-events:none}
@media(prefers-reduced-motion:reduce){#world-opening[data-beat=flight] #opening-heading{animation:none}}