/* Chest ceremony: the native award already exists; this layer only reveals it.
   The portrait uses the shared Corsair framing. All stars use the same asset. */
body #chestshow{
 --reveal-card-w:min(clamp(240px,20.2vw,320px),56vw,calc((100svh - 300px)*.7142857));
 --reveal-star:clamp(22px,5.8vw,34px);
 background:radial-gradient(ellipse at 50% 47%,#233c50 0,#102437 37%,#040d19 83%);
}
body #chestshow.reveal{background:radial-gradient(ellipse at 50% 44%,#263f50 0,#102437 35%,#040d19 82%)}
body #chestshow .cs-backdrop{background:radial-gradient(ellipse at 50% 46%,#b4a16910,transparent 60%)}
body #chestshow .cs-tier{font-size:clamp(19px,2vw,26px);text-transform:none;letter-spacing:.025em}
body #chestshow .cs-chest{width:min(360px,76vw,52vh);filter:drop-shadow(0 22px 28px #0008)}
body #chestshow.reveal .cs-chest{top:49%;opacity:0;transform:translate(-50%,-50%) scale(.48)}
body #chestshow.reveal .cs-rays,body #chestshow.reveal .cs-glow,body #chestshow.reveal .cs-floor{opacity:0}
/* Light stays near the lid; no white flash across the entire screen. */
body #chestshow .cs-impact{display:none}
body #chestshow .cs-flash{width:min(500px,90vw);background:radial-gradient(circle,#fff4cebf 0,#ffdda65e 22%,#e5b66321 45%,transparent 69%);filter:blur(7px)}
body #chestshow .cs-pillar{max-width:230px;filter:blur(20px)}
body #chestshow.reveal .cs-stage,body #chestshow.card-only .cs-stage{top:50%}
body #chestshow .cs-card-item{gap:12px;position:relative;padding-bottom:34px}
body #chestshow .cs-card3{width:var(--reveal-card-w);aspect-ratio:5/7;perspective:1000px;isolation:isolate}
body #chestshow .cs-face{border-radius:9px;border:0;backface-visibility:hidden;box-shadow:0 18px 32px #0008}
body #chestshow .cs-back{transform:rotateY(0);transition:transform .68s cubic-bezier(.45,0,.2,1)}
body #chestshow .cs-front{transform:rotateY(-180deg);transition:transform .68s cubic-bezier(.45,0,.2,1);background:#101c2b;container-type:inline-size}
body #chestshow .cs-card3.flip .cs-back{transform:rotateY(180deg)}
body #chestshow .cs-card3.flip .cs-front{transform:rotateY(0)}
body #chestshow .cs-front::after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#fff1c726 46%,#fff4d936 49%,transparent 65%);transform:translateX(-130%)}
body #chestshow .cs-card3.flip .cs-front::after{animation:cs-foil 1.3s .45s ease-out both}
@keyframes cs-foil{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
body #chestshow .cs-portrait{position:absolute;inset:4.5% 4.5% 15%;overflow:hidden}
body #chestshow .cs-portrait .artclip{inset:0;border-radius:2px}
body #chestshow .cs-card-name{position:absolute;inset:auto 4% 3.7%;height:12%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 9px;background:linear-gradient(#29384b,#111d2e);border-top:1px solid #b4bfd04d;color:#f5ecdb;font:500 clamp(13px,7cqw,21px)/1.15 var(--font-display);z-index:5}
body #chestshow .shell-frame{display:block;position:absolute;inset:0;border:18px solid transparent;border-width:clamp(12px,5.8cqw,18px)!important;border-image:url('illustrated/frame.webp') 16% stretch;z-index:6;pointer-events:none}
body #chestshow .shell-frame[data-rarity="uncommon"]{filter:sepia(.8) saturate(1.7) hue-rotate(65deg)}
body #chestshow .shell-frame[data-rarity="rare"]{filter:sepia(1) saturate(2.4) hue-rotate(166deg)}
body #chestshow .shell-frame[data-rarity="heroic"]{filter:sepia(1) saturate(2.2) hue-rotate(220deg)}
body #chestshow .shell-frame[data-rarity="legendary"]{filter:sepia(1) saturate(2)}
body #chestshow .cs-crest,body #chestshow .cs-mana{position:absolute;top:3%;width:15%;aspect-ratio:1;z-index:7;filter:drop-shadow(0 2px 2px #000a)}
body #chestshow .cs-crest{left:3%}
body #chestshow .cs-crest img{width:100%;height:100%;object-fit:contain}
body #chestshow .cs-mana{right:3%;background:url('illustrated/mana-drop.webp') center/contain no-repeat;display:grid;place-items:center}
body #chestshow .cs-mana b{padding-top:12%;color:#fff;font:600 clamp(13px,6.8cqw,21px)/1 var(--font-ui);text-shadow:0 1px 3px #032439,0 0 5px #032439}
body #chestshow .cs-cardw{isolation:isolate}
body #chestshow .cs-lbl{color:#ddcda8;font:500 15px/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;min-height:17px}
body #chestshow .ps-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:90vw;text-align:center;color:#a5b7c7;font:400 15px/1.4 var(--font-ui);transition:opacity .4s}
body #chestshow .cs-item:has(.ps-result.is-visible) .ps-caption{opacity:0}
body #chestshow .ps-result{position:absolute!important;top:auto!important;bottom:0!important;left:50%;transform:translate(-50%,5px);width:90vw!important;height:auto!important;min-height:20px!important;margin:0!important;overflow:visible!important;clip-path:none!important;white-space:normal!important;text-align:center;color:#f4dfaf;font:400 15px/1.4 var(--font-ui);opacity:0;transition:opacity .5s,transform .5s}
body #chestshow .ps-result.is-visible{opacity:1;transform:translate(-50%,0)}
body #chestshow .ps-crown{top:-58px;height:var(--reveal-star);opacity:1;gap:0;filter:drop-shadow(0 4px 9px #0009)}
body #chestshow .ps-crown::before{content:'';position:absolute;left:-12%;right:-12%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#e3c58038 25%,#e3c58038 75%,transparent);z-index:-1}
body #chestshow .ps-seat{width:var(--reveal-star);height:var(--reveal-star);flex-basis:var(--reveal-star)}
body #chestshow .ps-seat::before{filter:grayscale(1) brightness(.52);opacity:.68;transition:filter .18s,opacity .18s}
body #chestshow .ps-seat.is-lit::before{filter:drop-shadow(0 0 7px #eebe61a6);opacity:1}
body #chestshow .ps-seat.is-lit::after{content:'';position:absolute;inset:-20%;border:1px solid #ffdfab99;border-radius:50%;animation:ps-ring .7s ease-out forwards}
body #chestshow .ps-seat.is-last::after{animation-duration:1s}
body #chestshow .ps-flight{width:var(--star-size,34px);height:var(--star-size,34px);margin:calc(var(--star-size,34px)*-.5);background:radial-gradient(circle,#ffcd6b4d,transparent 68%)}
body #chestshow .ps-flight::before,body #chestshow .ps-flight.ps-ivory::before{inset:0;background:url('illustrated/potential.webp') center/contain no-repeat;clip-path:none;filter:drop-shadow(0 0 5px #ffdb9580)}
body #chestshow .ps-flight.ps-trail::before{inset:22%;border-radius:50%;background:radial-gradient(circle,#fff1cd,#d8b96b55 40%,transparent 72%);filter:none}
body #chestshow .ps-halo{width:220%;height:150%;background:radial-gradient(ellipse,#d5b66e1c 8%,#d6a6520f 34%,#81b1d810 51%,transparent 70%)}
body #chestshow .ps-orbit{width:151%;height:73%;border-color:#f7d58c1f;border-top-color:#f9e2b166;border-right-color:#e7d0a94d;box-shadow:0 0 12px #ffc85b0d}
body #chestshow .ps-orbit.ps-orbit-cool{width:157%;height:81%;border-color:#b5d9f01a;border-bottom-color:#d6e8ed4d}
body #chestshow .ps-wave{border-color:#ffe7af66;background:radial-gradient(circle,transparent 51%,#ffd9960c 65%,transparent 70%)}
body #chestshow .ps-complete::after{content:'';position:absolute;inset:-10px;border-radius:16px;box-shadow:0 0 36px #e5c5721c;pointer-events:none;z-index:-1}
body #chestshow.card-kept .cs-row,body #chestshow.card-kept .cs-title{display:none}
body #chestshow.fin.card-kept .cs-stage{top:50%}
body #chestshow.fin .cs-face{transition:none}
body #chestshow.fin .cs-card-item{opacity:1;transform:none}
body #chestshow .cs-btn{bottom:calc(36px + env(safe-area-inset-bottom,0px));min-width:230px;background:linear-gradient(#3c5262,#203448);border-color:#d7bc7899;box-shadow:0 4px 20px #0006,inset 0 1px #f6e4b72b}
@media(max-width:600px){
 body #chestshow{--reveal-card-w:min(244px,58vw,calc((100svh - 300px)*.7142857))}
 body #chestshow .ps-crown{top:-49px}
 body #chestshow .cs-lbl{font-size:15px}
 body #chestshow .ps-caption,body #chestshow .ps-result{font-size:15px}
}
@media(max-height:560px){
 body #chestshow{--reveal-card-w:min(170px,38vw,calc((100svh - 190px)*.7142857));--reveal-star:20px}
 body #chestshow .cs-tier{top:12px;font-size:17px}
 body #chestshow .cs-card-item{gap:6px;padding-bottom:23px}
 body #chestshow .cs-card-name{font-size:11px}
 body #chestshow .ps-crown{top:-32px}
 body #chestshow.reveal .cs-stage,body #chestshow.card-only .cs-stage,body #chestshow.fin.card-kept .cs-stage{top:52%}
 body #chestshow .cs-lbl{font-size:15px;min-height:12px}
 body #chestshow .ps-result,body #chestshow .ps-caption{font-size:15px}
 body #chestshow .cs-btn{bottom:12px;min-height:38px;padding:8px 24px}
}
@media(prefers-reduced-motion:reduce){
 body #chestshow .cs-card-item,body #chestshow .ps-result{transition:none}
 body #chestshow .cs-front{transform:none}
 body #chestshow .cs-back{display:none}
}
/* The starter gift has several rewards. Keep its collected cards below the
   active reveal; portrait sizing must never enlarge the small potential icons. */
body #chestshow .cs-row{width:max-content;max-width:calc(100% - 32px);gap:8px}
body #chestshow .cs-chip .potential-stars{gap:1px}
body #chestshow .cs-chip .potential-stars .pstar{width:11px;height:11px;flex:0 0 11px;object-fit:contain}
body #chestshow .cs-chip.mini.loot-card{padding:5px 5px 18px}
body #chestshow .cs-chip.mini img{width:40px;height:40px}
body #chestshow .cs-chip.mini .potential-stars .pstar{width:8px;height:8px;flex-basis:8px}
body #chestshow.cs-gift{--reveal-card-w:min(276px,58vw,calc((100svh - 350px)*.7142857))}
body #chestshow.cs-gift.reveal .cs-stage{top:48%}
body #chestshow.cs-gift:not(.fin) .cs-row{bottom:54px}
@media(max-height:560px){
 body #chestshow.cs-gift{--reveal-card-w:min(150px,38vw,calc((100svh - 240px)*.7142857))}
 body #chestshow.cs-gift.reveal .cs-stage{top:46%}
 body #chestshow.cs-gift .cs-chip.mini img{width:30px;height:30px}
 body #chestshow.cs-gift:not(.fin) .cs-row{bottom:35px}
}