/* Native dialog keeps the castle visible and keyboard focus inside the chest. */
.summon-window{padding:0;width:min(580px,calc(100% - 20px));max-width:none;max-height:calc(100dvh - 108px - env(safe-area-inset-bottom));border:2px solid #9aadd4;border-radius:13px 13px 8px 8px;background:#484b68;color:#fff;box-shadow:0 7px 0 #28314b,0 24px 75px #0009;overflow:hidden;margin:auto}
.summon-window::backdrop{background:#071620a6}
.summon-window .hub-shell{display:flex;flex-direction:column;min-height:0;max-width:none;margin:0;border:0;background:none}
.summon-titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:7px 12px;background:linear-gradient(#a0b0d8 0%,#7e8cb7 18%,#66729e 85%,#515b84 86%);border-bottom:3px solid #323b60;box-shadow:inset 0 2px #d2dcfa;flex-shrink:0}
.summon-titlebar>span{color:#d9e8ff;border:1px solid #bacff3;border-radius:5px;padding:3px 7px;background:linear-gradient(#647ca5,#3d537b);font-size:21px}
.summon-titlebar h1{font:800 24px/1.15 Inter,Arial,sans-serif;color:#fff;margin:0;text-align:center;text-shadow:0 2px 2px #182644}
#summon-back{width:39px;height:39px;flex-shrink:0;border:2px solid #973d69;border-radius:7px;background:linear-gradient(#f489b3,#d74076 70%,#af285b);box-shadow:inset 0 2px #ffcadd,0 2px 2px #253054;color:white;font:bold 34px/1 Arial;cursor:pointer;text-shadow:0 2px #9f2f59}
.summon-window .hub-presentation{display:none}
body[data-screen=summon] .summon-window .hub-details{display:block;padding:8px;gap:0;background:linear-gradient(135deg,#535671ed,#42435f);max-height:calc(100dvh - 168px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9b9fcc #414665}
.summon-window .hub-details>:is(.eyebrow,h2,#section-description,.journey,#hero-detail,#summon-clock,.collection-count){display:none}
.summon-panels{display:grid;gap:10px}
.call-panel{border:2px solid #7a9ed1;border-radius:4px;overflow:hidden;box-shadow:0 3px 0 #26324a;background:radial-gradient(ellipse at 25% 70%,#679bbcb0,transparent 60%),linear-gradient(120deg,#546997,#353e6b 70%);color:white}
.call-panel.grand{border-color:#ba70ed;background:radial-gradient(ellipse at 25% 60%,#c488eab0,transparent 60%),linear-gradient(120deg,#6b418e,#392456 75%)}
.call-panel header{display:flex;align-items:center;gap:9px;min-height:39px;padding:6px 10px;background:linear-gradient(100deg,#6593d9,#4077b9 60%,#476488);border-bottom:2px solid #273659;box-shadow:inset 0 2px #adcfffaa}
.call-panel.grand header{background:linear-gradient(100deg,#a924ed,#c350f7 60%,#70369b);box-shadow:inset 0 2px #e6aeffaa}
.summon-window .call-panel header h2{font:800 17px/1.2 Inter,Arial,sans-serif;color:#fff;margin:0;text-shadow:0 2px 1px #27314d}
.summon-window .call-panel.grand header h2{color:#fff4a6}
.call-panel header button{border:1px solid #c1cced;border-radius:3px;background:linear-gradient(#93a6d3,#566894);color:#fff;font:bold 18px Georgia;box-shadow:0 1px 2px #2228;width:25px;height:25px;flex-shrink:0;cursor:pointer}
.call-balance{margin-left:auto;display:flex;align-items:center;gap:6px;padding:0 5px;font-size:14px;min-width:56px;justify-content:flex-end;text-shadow:0 2px #242d49}
.call-balance img{width:27px;height:27px}
.call-content{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 14px 8px;align-items:center}
.call-art{position:relative;min-width:0;text-align:center;isolation:isolate}
.call-art::before{content:'';position:absolute;inset:20% 2% 10%;z-index:-1;background:radial-gradient(ellipse,#bdf6ff60,transparent 68%)}
.grand .call-art::before{background:radial-gradient(ellipse,#f1c8ff80,transparent 68%)}
.summon-chest{width:100%;aspect-ratio:1;background-image:url('/art/summoning/chest-atlas.webp');background-size:200% 200%;background-repeat:no-repeat;background-position:0 0;filter:drop-shadow(0 7px 4px #11183b66)}
.summon-chest.normal{background-position:100% 0}.summon-chest.grand.open{background-position:0 100%}.summon-chest.normal.open{background-position:100% 100%}
.call-art-caption{display:block;position:relative;margin-top:-17px;color:#d3e3ff;font-size:9px;font-weight:800;letter-spacing:1.5px;text-shadow:0 2px 3px #142142}
.grand .call-art-caption{color:#f5d9ff}
.call-actions{display:grid;gap:8px;min-width:0}
.summon-window .call-pool{font-size:12px;font-weight:700;color:#f2efff;text-align:center;line-height:1.5;margin:0 0 2px}
.call-pool em{color:#ffe699;font-style:normal}.call-pool small{display:block;font-size:10px;font-weight:400;color:#d1cee5;margin-top:2px}
.call-key-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.summon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:57px;padding:6px 5px;border:2px solid #b78024;border-radius:5px;background:linear-gradient(#fff397 0%,#ffdf4c 46%,#ffc51b 48%,#ffba0d 89%,#eb880f 90%);box-shadow:inset 0 2px #fff9c7,0 2px 1px #1b203e99;font:800 13px/1.2 Inter,Arial,sans-serif;color:#413725;text-shadow:0 1px #ffffcc;cursor:pointer}
.summon-button>span{display:flex;align-items:center;gap:5px;font-weight:800;line-height:1.2}.summon-button img{width:23px;height:23px;object-fit:contain}
.summon-button.free-call{min-height:38px;border-color:#679436;background:linear-gradient(#e4ffb0,#bdf366 45%,#9ddd39 48%,#8ec629 89%,#679c1f 90%);box-shadow:inset 0 2px #f5ffd5,0 2px 1px #1b203e99;color:#30451c;text-shadow:0 1px #eaffb4}
.summon-button:hover:not(:disabled){filter:brightness(1.1)}.summon-button:active:not(:disabled){transform:translateY(1px)}
.summon-button:disabled{filter:saturate(.55);opacity:.56;cursor:default}
.call-actions>small{font-size:10px;text-align:center;color:#bfff9c;line-height:1.3;font-variant-numeric:tabular-nums}
.call-panel>footer{font-size:10px;text-align:center;padding:6px;background:#15254744;color:#d4e5ff;border-top:1px solid #b9cded24}
.call-panel.grand>footer{color:#edceff;background:#29144066}
.summon-window p.summon-footnote{font-size:10px;line-height:1.5;text-align:center;color:#dddfee;padding:2px 5px}
#call-info{max-width:500px}#call-info p,#call-info li{font-size:13px;line-height:1.8}#loot-key-progress{font-size:12px;color:#dfcb8c}
#call-results{display:flex;flex-direction:column;height:min(610px,calc(100dvh - 202px));min-height:0;padding-top:10px;background:radial-gradient(ellipse at 50% 70%,#8984b455,transparent 65%)}
.summon-window .call-result-intro h2{font:800 19px/1.3 Inter,Arial,sans-serif;color:#fff;text-align:center;text-shadow:0 2px #313652}
.summon-window .call-result-intro p{font-size:12px;color:#ecedfa;text-align:center;margin:5px 0 12px}
.call-result-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 7px;padding:0 8px}
.call-result-grid.single{grid-template-columns:minmax(0,125px);justify-content:center;padding:8px}
.call-hero-card{min-width:0;padding:0;border:0;background:none;color:#fff;cursor:pointer;text-align:center;--quality:#abbcce}
.call-hero-card.quality-rare{--quality:#42c5ef}.call-hero-card.quality-elite{--quality:#b978ff}.call-hero-card.quality-legend{--quality:#ffca6a}
.call-hero-face{position:relative;display:block;aspect-ratio:1;border:2px solid var(--quality);border-radius:3px;background:radial-gradient(ellipse at 50% 70%,#9cafd1,#373956 85%);box-shadow:0 0 8px color-mix(in srgb,var(--quality) 40%,transparent),inset 0 0 5px #101a3b}
.call-hero-face img{width:100%;height:100%;object-fit:cover;object-position:center}
.call-hero-card>strong{display:block;font-size:9px;font-weight:600;line-height:1.3;margin-top:5px;overflow-wrap:anywhere}
.call-hero-card>small{font-size:8px;color:var(--quality)}.single .call-hero-card>strong{font-size:14px}.single .call-hero-card>small{font-size:11px}
.call-hero-faction{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;width:22px;height:22px;border:1px solid #d8e4ff;border-radius:6px;background:#6573a0;box-shadow:0 1px 3px #12142e;color:#fff;font-size:16px;text-shadow:0 2px #28334d}
.call-hero-level{position:absolute;top:1px;right:3px;font-size:11px;font-weight:800;text-shadow:0 2px 2px #000}
.call-hero-stars{position:absolute;bottom:-4px;left:-2px;right:-2px;color:#ffe578;font-size:clamp(10px,2.8vw,16px);white-space:nowrap;letter-spacing:-1px;text-shadow:0 2px #775121}
.single .call-hero-stars{font-size:23px}
.call-portrait-placeholder{display:grid;place-items:center;height:100%;color:#d8c2ef;font-size:28px}
.summon-window p.call-result-hint{text-align:center;color:#c4c9df;font-size:10px;margin:7px 0 0;line-height:1.5}
.call-result-art{position:relative;isolation:isolate;flex:1;min-height:clamp(72px,11dvh,106px);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
/* Explicit dimensions prevent the shared 100%-wide sprite from filling the result. */
.call-result-art .summon-chest{width:clamp(64px,10dvh,96px);height:clamp(64px,10dvh,96px);flex:none;--chest-x:0%;transform-origin:50% 85%}
.call-result-art .summon-chest.normal{--chest-x:100%}
.call-result-art::before{content:'';position:absolute;z-index:-1;width:130px;height:110px;bottom:0;left:calc(50% - 65px);background:radial-gradient(ellipse,#ffe8b4bb,transparent 65%);opacity:0;pointer-events:none}
.call-result-art.is-opening .summon-chest{animation:summon-chest-bounce .9s ease-out,summon-chest-unseal .9s steps(1,end)}
.call-result-art.is-opening::before{animation:summon-chest-flare .9s ease-out}
@keyframes summon-chest-bounce{0%{transform:scale(.88)}15%{transform:rotate(-5deg) scale(.94)}28%{transform:rotate(5deg) scale(.94)}40%{transform:rotate(-3deg)}52%{transform:translateY(-5px) scale(1.07)}76%{transform:translateY(1px) scale(.97)}100%{transform:none}}
@keyframes summon-chest-unseal{0%,44%{background-position:var(--chest-x) 0%}45%,100%{background-position:var(--chest-x) 100%}}
@keyframes summon-chest-flare{0%,35%{opacity:0;transform:scale(.6)}55%{opacity:.85;transform:scale(1.05)}100%{opacity:0;transform:scale(1.2)}}
.call-result-actions{display:flex;justify-content:center;gap:22px;padding:14px 20px 6px;border-top:1px solid #a2a8cc45;background:#3a3b5655}
.call-result-actions .summon-button{flex:1;max-width:190px;min-height:53px}
.summon-window .summon-load-status p:empty{display:none}.summon-load-status{font-size:10px;text-align:center}
.summon-window #asset-status{font-size:10px;color:#e2e1ed;line-height:1.4;margin-top:4px}
.summon-window :focus-visible{outline:3px solid #fff3ac;outline-offset:3px}
.summon-panels[hidden],#call-results[hidden],.summon-window [hidden]{display:none!important}
@media(max-width:600px){
 .summon-titlebar{min-height:46px;padding:5px 8px}.summon-titlebar h1{font-size:19px}#summon-back{height:33px;width:33px;font-size:30px}
 body[data-screen=summon] .summon-window .hub-details{padding:6px}
 .call-panel header{min-height:32px;padding:4px 7px;gap:6px}.summon-window .call-panel header h2{font-size:14px}.call-balance{font-size:12px;gap:3px;min-width:40px}.call-balance img{width:23px;height:23px}
 .call-content{padding:8px 7px;grid-template-columns:1fr 1.15fr;gap:5px}.call-art-caption{font-size:7px;letter-spacing:.8px;margin-top:-9px}.call-actions{gap:6px}.summon-window .call-pool{font-size:10px}.call-pool small{font-size:8px}.call-key-buttons{gap:5px}
 .summon-button{min-height:49px;font-size:11px;padding:4px}.summon-button img{width:20px;height:20px}.summon-button.free-call{min-height:33px}.call-actions>small{font-size:9px}.call-panel>footer{font-size:9px;padding:5px}
 .summon-panels{gap:8px}.call-result-grid{gap:12px 6px;padding:0 3px}.call-result-grid.single{grid-template-columns:105px}.call-hero-faction{width:17px;height:17px;font-size:12px;top:-4px;left:-3px}.call-hero-card>strong{font-size:8px}.call-hero-card>small{font-size:7px}
 .call-result-actions{padding:10px 15px 4px;gap:16px}.call-result-actions .summon-button{min-height:49px}
}
@media(prefers-reduced-motion:reduce){.summon-window *{animation:none!important;transition:none!important}}
/* Reserve the result footer; the chest illustration yields space on short screens. */
.call-result-intro,.call-result-grid,.call-result-hint,.call-result-actions{flex-shrink:0}
#call-info{background:linear-gradient(130deg,#565b7b,#393e5c);border:2px solid #9aaad3;color:#edf0ff;border-radius:10px}
#call-info h2{font:800 20px Inter,Arial,sans-serif;color:white}
#call-info .dialog-close{background:linear-gradient(#e578a3,#b63466);color:white;border:1px solid #f3a9c9}
#call-info p{color:#e2e5f2}
.summon-window h1:focus{outline:none}