/* Local navy-only opening. Canvas images keep their aspect ratio throughout. */
.fortune-box-scene.is-box-pending .fortune-box-choice:not(.is-box-picked){opacity:.25;filter:saturate(.45);transition:opacity .22s,filter .22s}
.fortune-box-scene.is-box-pending .fortune-box-choice.is-box-picked{transform:none}
.fortune-box-choice.is-opening-source{visibility:hidden}
.fortune-box-scene.is-box-pending .fortune-box-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fortune-box-scene.is-box-pending .fortune-box-choice.is-box-picked:after{content:'';position:absolute;inset:-4px;border:1px solid #f1cf8b99;border-radius:12px;pointer-events:none}
.fortune-opening{position:fixed;inset:0 auto 0 max(0px,calc((100vw - 450px)/2));width:min(450px,100vw);height:100vh;height:100dvh;z-index:85;isolation:isolate;overflow:hidden;color:#fff0d7;font-family:'Noto Serif KR',serif;text-align:center}
.fortune-opening *{box-sizing:border-box}
.fortune-opening-wash{position:absolute;inset:0;background:linear-gradient(#08122638,#08122612 55%,#08122660),url('/images/fortune/five-boxes-v1/background.webp') center top/cover;opacity:0;z-index:-1}
.fortune-opening-heading{position:absolute;top:calc(32px + env(safe-area-inset-top));left:10px;right:10px;opacity:0;text-shadow:0 2px 14px #07101f}
.fortune-opening-heading p{font-size:15px;letter-spacing:5px;margin:0 0 15px}
.fortune-opening-heading h2{margin:0!important;font:700 clamp(30px,9vw,40px)/1.4 'Noto Serif KR',serif;color:#fff0d7}
.fortune-opening-heading h2:after{content:'✤';display:block;font-size:17px;color:#e7b565;line-height:1.6}
.fortune-opening-heading span{font-size:13px;line-height:1.8}
.fortune-opening-actor{position:absolute;left:11%;top:58%;width:78%;aspect-ratio:1150/700;transform-origin:50% 50%;z-index:1}
.fortune-opening-actor .fortune-box-frame{overflow:visible}
.fortune-opening-open{display:block;position:absolute;max-width:none!important;width:109.0434782609%!important;height:auto!important;left:-5.7391304348%;top:calc(-46.1428571429% - 28.43%);opacity:0}
.fortune-opening-shadow{position:absolute;left:5%;width:90%;bottom:-3%;height:13%;background:#020613a6;border-radius:50%;filter:blur(8px);z-index:-1}
.fortune-opening-glow{position:absolute;left:6%;top:34%;width:88%;height:44%;background:radial-gradient(ellipse,#fff0b0a3 0%,#ffc45b38 38%,transparent 72%);filter:blur(12px);mix-blend-mode:screen;pointer-events:none;opacity:0;z-index:2}
.fortune-opening-aperture{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.fortune-opening-rolled{position:absolute;display:block;left:13%;width:74%;height:auto;max-width:none;opacity:0}
.fortune-opening-paper{position:absolute;top:21%;width:min(90%,360px,49dvh);left:50%;transform:translateX(-50%);aspect-ratio:1;opacity:0;clip-path:inset(47% 0 47% 0);z-index:4}
.fortune-opening-paper>img{display:block;width:100%;height:auto;aspect-ratio:1;max-width:none}
.fortune-opening-copy{position:absolute;inset:21% 19% 19%;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:auto;overscroll-behavior:contain;opacity:0;color:#14203a;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;scrollbar-width:thin}
.fortune-opening-copy p{margin:0}
.fortune-opening-copy .fortune-opening-category{font-size:12px;color:#77502d}
.fortune-opening-copy h3{font:700 22px/1.5 'Noto Serif KR',serif;margin:0;color:#12203c}
.fortune-opening-copy .fortune-opening-summary{font-size:13px;line-height:1.75}
.fortune-opening-controls{position:absolute;left:7%;right:7%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:8;display:flex;flex-direction:column;gap:9px;align-items:center}
.fortune-opening-controls button{display:flex;justify-content:center;align-items:center;gap:18px;width:100%;max-width:330px;min-height:48px;padding:10px 18px;border:1px solid #e3b76e;border-radius:999px;background:#0c1835d9;color:#ffecd3;font:500 17px/1.5 'Noto Serif KR',serif;cursor:pointer}
.fortune-opening-controls button:focus-visible{outline:2px solid #fff2c9;outline-offset:4px}
.fortune-opening-controls p{margin:0;color:#efddc6;font:12px/1.7 system-ui,sans-serif}
@media(max-height:720px){.fortune-opening-heading{top:calc(18px + env(safe-area-inset-top))}.fortune-opening-heading p{font-size:12px;margin-bottom:5px}.fortune-opening-heading h2{font-size:30px}.fortune-opening-heading span{font-size:12px}.fortune-opening-paper{top:22%;width:min(87%,46dvh)}.fortune-opening-actor{left:14%;width:72%;top:58%}.fortune-opening-copy{gap:7px}.fortune-opening-copy h3{font-size:20px}.fortune-opening-controls{bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(max-height:480px){.fortune-opening-heading{left:12px;right:auto;top:18px;width:40%}.fortune-opening-heading h2{font-size:23px}.fortune-opening-heading span{display:none}.fortune-opening-paper{top:6%;left:69%;width:min(45vw,64dvh)}.fortune-opening-actor{left:9%;top:48%;width:35%}.fortune-opening-controls{left:9%;right:55%;bottom:16px}.fortune-opening-controls p{display:none}.fortune-opening-controls button{font-size:13px}.fortune-opening-copy h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.fortune-box-scene.is-box-pending .fortune-box-choice:not(.is-box-picked){transition:none}}
html.reduce-motion .fortune-box-scene.is-box-pending .fortune-box-choice:not(.is-box-picked){transition:none}