.celestial-summon{background:url('./assets/summon-observatory-v1.webp?v=20261028-panteon153-v17') center/cover no-repeat;isolation:isolate}.celestial-summon:before{content:'';position:absolute;inset:0;background:linear-gradient(#04102055,transparent 25%,#04102022 70%,#04102088);z-index:-1;pointer-events:none}.summon-fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.celestial-summon .scene-heading{z-index:6}.draw-instruction{position:absolute;top:22%;left:5%;right:5%;text-align:center;font-size:14px;color:#d6e5e9;text-shadow:0 2px 5px #000;margin:0;z-index:5}.draw-instruction b{font:600 11px sans-serif;color:#e6cc8f;margin-left:10px}.summon-invitation{position:absolute;left:10%;right:10%;top:42%;text-align:center;color:#e5e5df;font:500 20px/1.8 'Noto Serif KR',serif;text-shadow:0 2px 8px #000}
.draw-spread{left:4%;right:4%;top:29%;bottom:23%;overflow-x:auto;overflow-y:hidden;align-items:center;gap:0;padding:8px 18px 24px;perspective:1200px;z-index:3;justify-content:safe center}
.draw-result-card{position:relative;flex:0 0 auto;width:min(26dvh,190px);aspect-ratio:2/3;transform:translateY(var(--fan-rise)) rotate(var(--fan-angle));transform-origin:center 110%;z-index:1}.draw-spread[data-count="10"] .draw-result-card{width:clamp(76px,8.8vw,126px);margin-left:-5px}.draw-result-card.just-revealed{z-index:7;animation:card-reveal-emphasis 1.15s ease-out both}.draw-flipper{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(0);transition:transform .65s cubic-bezier(.18,.8,.2,1)}.is-revealed .draw-flipper{transform:rotateY(180deg)}
.draw-front,.draw-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.draw-front{transform:rotateY(180deg)}.draw-front>.soul-card{width:100%!important;height:100%!important}.draw-back{border:0;padding:0;display:block;background:none!important}.draw-back:before{display:none!important}.draw-back img{width:100%;height:100%;display:block;object-fit:fill;filter:drop-shadow(0 0 9px #98d9ff88);border-radius:3px}.draw-front,.draw-back{filter:none}.draw-front>.soul-card{filter:drop-shadow(0 0 10px var(--reveal-color))}.draw-back:disabled{opacity:1}.draw-back:disabled img{filter:drop-shadow(0 0 8px #a3ddff55)}.draw-result-label{position:absolute;top:100%;left:-10%;width:120%;text-align:center;white-space:nowrap;font-size:10px;margin:9px 0 0;color:#c7dfe4;text-shadow:0 2px 4px #000}.is-revealed .draw-result-label{color:var(--reveal-color)}
.draw-arriving:not(.draw-ready) .draw-result-card{animation:star-card-arrive .9s cubic-bezier(.15,.7,.22,1) both;animation-delay:var(--arrival-delay)}.draw-ready .draw-result-card{opacity:1}.draw-actions{left:8%;right:8%;bottom:10%;z-index:6;gap:22px}.draw-actions .seal-action{min-width:215px}.draw-actions b{display:inline-flex;align-items:center}.celestial-summon .summon-disclosure{font-size:10px;z-index:5;bottom:2%}.draw-arrival-skip[hidden]{display:none}
@keyframes star-card-arrive{from{opacity:0;transform:translate(var(--origin-x),var(--origin-y)) scale(.12) rotate(20deg)}to{opacity:1;transform:translateY(var(--fan-rise)) rotate(var(--fan-angle))}}
@keyframes card-reveal-emphasis{0%,100%{transform:translateY(var(--fan-rise)) rotate(var(--fan-angle)) scale(1)}40%{transform:translateY(-12px) rotate(0deg) scale(1.13)}}
@media(max-height:450px) and (orientation:landscape){.celestial-summon .scene-heading{top:43px}.celestial-summon .scene-heading h1{font-size:22px}.draw-instruction{top:24%;font-size:11px}.draw-spread{top:29%;bottom:23%;padding:11px 10px 23px}.draw-result-card{width:min(24dvh,155px)}.draw-result-label{font-size:8px;margin-top:4px}.draw-actions{bottom:9%;gap:15px}.draw-actions .seal-action{min-height:32px;font-size:13px;min-width:180px}.draw-actions .text-link{font-size:12px;min-height:30px}.celestial-summon .summon-disclosure{font-size:8px;line-height:1.4;bottom:1%;left:2%}.summon-invitation{font-size:16px;top:38%}}
@media(orientation:portrait){.celestial-summon .scene-heading{align-items:flex-start}.celestial-summon .scene-heading h1{font-size:23px}.celestial-summon .scene-heading>.text-link{font-size:10px}.draw-instruction{top:27%;font-size:12px}.draw-spread{top:33%;bottom:24%;left:1%;right:1%;justify-content:safe center}.draw-spread[data-count="10"]{justify-content:flex-start}.draw-spread[data-count="10"] .draw-result-card{width:94px;--fan-angle:0deg!important;--fan-rise:0px!important}.draw-actions{bottom:14%;left:5%;right:5%;gap:12px}.draw-actions .seal-action{min-width:165px;font-size:14px}.summon-invitation{top:40%;font-size:18px}.celestial-summon .summon-disclosure{bottom:3%;font-size:9px}.draw-result-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.draw-flipper{transition:none}.draw-arriving .draw-result-card,.draw-result-card.just-revealed{animation:none}}
.draw-result-skip[hidden],.draw-rarity-announcement[hidden]{display:none}
.draw-rarity-active .draw-instruction{visibility:hidden}
.draw-spread[data-count="1"] .draw-result-card.just-revealed{animation:single-card-focus 1.15s ease-out both}
@keyframes single-card-focus{0%,100%{transform:scale(1)}40%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.draw-spread[data-count="1"] .draw-result-card.just-revealed{animation:none}}
.draw-spread{container-type:size}
.celestial-summon[data-draw-count="1"] .draw-spread{top:28%;bottom:18%}
@supports(width:1cqh){.draw-spread[data-count="1"] .draw-result-card{width:min(190px,calc((100cqh - 38px) * .666667))}}
.draw-skipped .draw-flipper{transition:none}
.draw-skipped .draw-result-card{animation:none!important}
.draw-rarity-announcement{position:absolute;z-index:7;left:15%;right:15%;top:12%;text-align:center;pointer-events:none;color:#e3c0ff;text-shadow:0 0 12px #6f24b0,0 2px 6px #000;font-family:'Noto Serif KR',serif;animation:rare-constellation-arrive 1.8s ease both}
.draw-rarity-announcement strong{display:block;font-size:clamp(20px,3vw,38px);letter-spacing:.14em;line-height:1.4}
.draw-rarity-announcement span{display:block;font-size:clamp(11px,1.3vw,16px);margin-top:3px}
.draw-rarity-announcement[data-grade="3"]{color:#ffedb2;text-shadow:0 0 15px #d18c26,0 2px 6px #000}
@keyframes rare-constellation-arrive{0%{opacity:0;transform:translateY(8px) scale(.9)}18%,78%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-5px) scale(1.02)}}
@media(max-height:450px) and (orientation:landscape){.draw-rarity-announcement{top:25%}.draw-rarity-announcement strong{font-size:21px}.draw-rarity-announcement span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.draw-rarity-announcement{animation:none}}

@media(max-height:450px) and (orientation:landscape){.draw-spread[data-count="10"] .draw-result-card{--fan-rise:0px!important}}