/* Successful cosmetic receipts only. Confirmation, price changes and short wallets keep their plain dialogs. */
.colDlg.rewardDialog{width:min(48rem,100%)}
.unlockBox.rewardBox{width:min(48rem,calc(100vw - 2rem));padding:1.25rem;max-height:calc(100dvh - 2rem);overflow-y:auto}
.unlockBox.rewardBox .unlockBtns{margin-top:1rem}
.colDlg.rewardDialog .cdShort{font-size:.8125rem}
.rewardReveal{--rrGlow:#7deaff;position:relative;isolation:isolate;color:#f5f7ff;overflow:hidden;text-align:left}
.rewardReveal[data-rarity=epic]{--rrGlow:#b47aff}
.rewardReveal[data-rarity=legendary]{--rrGlow:#ffcd78}
.rewardReveal .rrEyebrow{display:block;padding:.25rem 4rem .75rem 0;color:#b7c2e1;font-family:var(--disp);font-size:.75rem;font-weight:800;font-style:italic;letter-spacing:.08em}
.rewardReveal .rrEyebrow::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.6rem;background:#ff9f1c;transform:rotate(45deg)}
.rewardReveal .rrSkip{position:absolute;right:0;top:0;z-index:8}   /* the game's one Skip (style.css .skipBtn, 2026-10-28) */
.rewardReveal .rrStage{position:relative;min-height:19rem;display:grid;grid-template-columns:43fr 57fr;align-items:center;gap:1.25rem;padding:1.5rem .75rem 2rem}
.rewardReveal .rrEffects{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.rewardReveal .rrHero{position:relative;width:min(100%,13rem);aspect-ratio:1;justify-self:center;border:2px solid #ffd17c;background:#11192f;box-shadow:0 0 2rem #f8625828;transform:rotate(-3deg)}
.rewardReveal .rrHero img{display:block;width:100%;height:100%;object-fit:contain}
.rewardReveal .rrMissing{display:grid;place-items:center;height:100%;font-size:4rem;color:var(--rrGlow)}
.rewardReveal .rrCopy{position:relative;min-width:0;z-index:2}
.rewardReveal .rrRarity{display:block;margin-bottom:.5rem;color:var(--rrGlow);font:800 .75rem/1.4 var(--disp);text-transform:uppercase;letter-spacing:.14em}
.rewardReveal h2,.rewardReveal #cdTitle{margin:0;color:#fff;text-align:left;font:900 italic clamp(1.8rem,4vw,2.8rem)/1.03 var(--disp);text-transform:uppercase;overflow-wrap:anywhere}
.rewardReveal .rrCopy p{margin:.8rem 0 0;color:#bbc7e5;font-size:.875rem;line-height:1.4}
.rewardReveal .rrSlash{position:absolute;left:-10%;top:51%;width:120%;height:3px;background:linear-gradient(90deg,transparent,#e95758,#ffd17c,transparent);transform:rotate(-14deg);box-shadow:0 0 1.25rem #f86258;opacity:.35}
.rewardReveal .rrHalo{position:absolute;left:0;top:0;width:50%;height:100%;background:radial-gradient(ellipse,#f8625820,transparent 66%)}
.rewardReveal .rrRing{display:none}
.rewardReveal .rrShard{position:absolute;left:50%;top:48%;width:.3rem;height:.7rem;background:var(--rrGlow);opacity:0;clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%);transform:rotate(var(--a)) translateY(8rem)}
/* Haki Break: slash, portrait impact, name. */
.rewardReveal.rrPlay.rr-haki .rrSlash{animation:rrSlash 1.1s both}
.rewardReveal.rrPlay.rr-haki .rrHero{animation:rrPortrait 1.25s both}
.rewardReveal.rrPlay.rr-haki .rrCopy{animation:rrName 1.35s both}
.rewardReveal.rrPlay .rrShard{animation:rrSpark 1.5s ease-out both;animation-delay:calc(var(--i)*18ms)}
/* Shard Forge: converge, light the ring, raise the Captain perk. */
.rewardReveal.rr-forge .rrStage{display:flex;flex-direction:column;gap:1rem;min-height:24rem;padding-top:1rem;text-align:center}
.rewardReveal.rr-forge .rrHero{width:min(100%,24rem);aspect-ratio:16/10;border:0;box-shadow:none;background:transparent;transform:none}
.rewardReveal.rr-forge .rrCopy{width:100%}
.rewardReveal.rr-forge h2,.rewardReveal.rr-forge #cdTitle{text-align:center}
.rewardReveal.rr-forge .rrSlash{display:none}
.rewardReveal.rr-forge .rrHalo{left:15%;width:70%;height:80%;background:radial-gradient(ellipse,#ffd17c26,transparent 68%)}
.rewardReveal.rr-forge .rrRing{display:block;position:absolute;width:76%;height:30%;left:12%;top:39%;border:1px solid color-mix(in srgb,var(--rrGlow) 60%,transparent);border-radius:50%;transform:rotate(-7deg);box-shadow:0 0 1.5rem #ffd17c18}
.rewardReveal.rr-forge .rrShard{height:1.1rem;width:.55rem;left:50%;top:31%;background:linear-gradient(125deg,#fff1cd,#ffd17c,#b47aff)}
.rewardReveal.rrPlay.rr-forge .rrShard{animation:rrForgeShard 1.8s both;animation-delay:0s}
.rewardReveal.rrPlay.rr-forge .rrRing{animation:rrForgeRing 2.1s both}
.rewardReveal.rrPlay.rr-forge .rrHero{animation:rrForgeRise 2.1s both}
.rewardReveal.rrPlay.rr-forge .rrCopy{animation:rrForgeName 2.3s both}
/* Captain Showcase: full banner plus the player's real name over its profile crop. */
.rewardReveal.rr-showcase .rrStage{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1.25rem 1.5rem;padding-block:1.5rem}
.rewardReveal.rr-showcase .rrHero{grid-column:1;grid-row:1;width:100%;aspect-ratio:3/1;transform:none;border-width:1px;box-shadow:0 0 1.5rem #7deaff18}
.rewardReveal.rr-showcase .rrCopy{grid-column:1;grid-row:2;align-self:start}
.rewardReveal.rr-showcase .rrSlash{display:none}
.rewardReveal .rrPreview{grid-column:2;grid-row:1/3;min-width:0;position:relative;z-index:2}
.rewardReveal .rrPreviewLabel{display:block;margin-bottom:.75rem;color:#b9c7eb;font:700 .6875rem/1.4 var(--disp);letter-spacing:.13em}
.rewardReveal .rrProfile{position:relative;min-height:10rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:1.1rem;border:1px solid #3a4c77;border-left:3px solid #ff9f1c;background:#17213d}
.rewardReveal .rrProfile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.rewardReveal .rrProfile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a102beb,#0a102b18 90%);z-index:1}
.rewardReveal .rrPlayer{font:900 italic 1.8rem/1.1 var(--disp);color:#fff;overflow-wrap:anywhere;z-index:2}
.rewardReveal .rrProfile small{color:#d3def6;font-size:.75rem;z-index:2;margin-top:.35rem}
.rewardReveal.rrPlay.rr-showcase .rrHero{animation:rrShowHero 1.6s both}
.rewardReveal.rrPlay.rr-showcase .rrPreview{animation:rrShowPreview 1.8s both}
.rewardReveal.rrPlay.rr-showcase .rrCopy{animation:rrForgeName 1.9s both}
/* The existing Capsule owns throw/burst/audio; its settled receipt uses the same static layout. */
.capOv .capCard.hasReward{width:min(48rem,100%);padding:1.25rem;gap:.5rem;animation:none}
.capOv .capCard.hasReward .capCardGlow{display:none}
.capOv .capCard.hasReward[data-kind=banner]{width:min(56rem,100%)}
.capOv .capCard.hasReward .rewardReveal{width:100%}
.capOv .capCard.hasReward .capMeta,.capOv .capCard.hasReward .capStatus{position:relative;z-index:3}
@keyframes rrSlash{0%,12%{transform:translateX(-90%) rotate(-14deg);opacity:0}27%{opacity:1}42%{transform:translateX(0) rotate(-14deg);opacity:1}100%{opacity:.35}}
@keyframes rrPortrait{0%,20%{opacity:0;transform:scale(.7) rotate(-8deg);filter:brightness(.35)}40%{opacity:1;transform:scale(1.06) rotate(-3deg);filter:brightness(1.2)}70%,100%{opacity:1;transform:scale(1) rotate(-3deg);filter:brightness(1)}}
@keyframes rrName{0%,32%{opacity:0;transform:translateX(2rem)}55%{opacity:1;transform:translateX(-.2rem)}100%{opacity:1;transform:none}}
@keyframes rrSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(2rem)}25%{opacity:.75}100%{opacity:0;transform:rotate(var(--a)) translateY(11rem)}}
@keyframes rrForgeShard{0%{opacity:0;transform:rotate(var(--a)) translateY(8rem)}18%{opacity:1}46%{transform:rotate(var(--a)) translateY(0);opacity:1}59%,100%{transform:scale(.1);opacity:0}}
@keyframes rrForgeRing{0%{opacity:.1;transform:scale(.5) rotate(-7deg)}40%{opacity:1;transform:scale(.8) rotate(7deg)}65%{transform:scale(1.08) rotate(-7deg)}100%{transform:scale(1) rotate(-7deg)}}
@keyframes rrForgeRise{0%,35%{opacity:0;transform:translateY(3rem) scale(.55);filter:brightness(.3)}70%{opacity:1;transform:translateY(-.5rem) scale(1.02);filter:brightness(1.15)}100%{opacity:1;transform:none;filter:brightness(1)}}
@keyframes rrForgeName{0%,62%{opacity:0;transform:translateY(.7rem)}100%{opacity:1;transform:none}}
@keyframes rrShowHero{0%,8%{opacity:0;transform:scale(.8) rotate(-4deg)}40%{opacity:1;transform:scale(1.03) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes rrShowPreview{0%,25%{opacity:0;transform:translateX(2.5rem)}70%,100%{opacity:1;transform:none}}
@media(max-width:600px){
 .colDlg.rewardDialog,.unlockBox.rewardBox{padding:1rem}
 .rewardReveal .rrStage{display:flex;flex-direction:column;gap:1.5rem;min-height:0;padding:1rem .25rem 1.5rem}
 .rewardReveal .rrHero{width:10rem;flex-shrink:0}
 .rewardReveal .rrCopy{text-align:center;width:100%}
 .rewardReveal h2,.rewardReveal #cdTitle{text-align:center;font-size:2rem}
 .rewardReveal .rrSkip{min-height:2.75rem}
 .rewardReveal.rr-showcase .rrStage{display:flex;gap:1.2rem;padding-block:1rem}
 .rewardReveal.rr-showcase .rrHero{width:100%;max-width:27rem}
 .rewardReveal .rrPreview{width:100%}
 .rewardReveal .rrProfile{min-height:8rem}
 .rewardReveal.rr-forge .rrStage{min-height:0;gap:.75rem}
 .rewardReveal.rr-forge .rrHero{width:100%}
 .rewardReveal.rr-forge .rrRing{top:30%;height:24%}
}
.reduced .rewardReveal.rrPlay *,.reduced .rewardReveal.rrPlay *::before,.reduced .rewardReveal.rrPlay *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.rewardReveal.rrPlay *,.rewardReveal.rrPlay *::before,.rewardReveal.rrPlay *::after{animation:none!important}}