/* Floating pastel choices; the existing full-screen dark backdrop is retained. */
#modal:has(.roll-delight){inset:0!important;margin:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden!important;transform:none!important}
#modal:has(.roll-delight) #modalContent{height:100%;display:grid;place-items:center;overflow:auto;border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important}
.relic-upgrade.roll-delight{position:relative;width:min(1000px,96vw);box-sizing:border-box;background:none;color:#fff5fb;outline:none;padding:22px 34px 28px}
.roll-delight h2{color:#fff0fa;text-shadow:0 2px 3px #48354c}
.roll-delight header p,.roll-delight footer{color:#fff5fb;text-shadow:0 1px 3px #48354c}
.roll-delight .relic-kicker{display:none}
#modal .roll-delight>header{border-bottom:0!important}
.roll-delight .relic-level{background:#b99be3;color:#fff;border:2px solid #eee2ff;-webkit-text-stroke:.55px #674984;paint-order:stroke fill;text-shadow:0 1px 1px #674984}
.roll-delight>header,.roll-delight>.relic-choices,.roll-delight>footer{position:relative;z-index:1}
.roll-delight>.relic-choices{gap:18px;padding:8px 7px;margin:12px 0 16px;align-items:stretch}
.roll-delight .relic-card{--card:#fae4ee;--edge:#d9a9c0;border:2px solid #fff7fb;border-radius:16px;padding:13px 10px 10px;background:linear-gradient(160deg,#fffaf9,var(--card));color:#654f6b;outline:none;transform:none;box-shadow:inset 0 0 0 3px #ffffff77,0 5px 0 var(--edge),0 8px 14px #23142f38;transition:transform .2s cubic-bezier(.2,1.5,.4,1),box-shadow .15s;transform-origin:50% 65%}
.roll-delight .relic-card:nth-child(3n+2){--card:#eee2fa;--edge:#bcafd4}
.roll-delight .relic-card:nth-child(3n){--card:#def4ec;--edge:#a6cdbd}
.roll-delight .relic-card:before{display:none}
.roll-delight .relic-number{color:#826981;letter-spacing:.03em}
.roll-delight .relic-card>small{color:#705c76}
.roll-delight .relic-select{background:#ffffffa8;color:#725471;border-radius:9px;border:1px solid #e4ccde}
.roll-delight .relic-emblem{color:#fff;text-shadow:0 2px 1px var(--roll-ink);-webkit-text-stroke:.7px var(--roll-ink);paint-order:stroke fill}
.roll-delight .relic-art{margin:8px 0;border:1px solid #ffffffcc;border-radius:11px;background:#ffffff70;overflow:hidden}
.roll-delight .relic-card:hover:not(:focus-visible){outline:none;border-color:#fff7fb}
.roll-delight .relic-card:focus-visible{transform:translateY(-3px) scale(1.035);z-index:2;outline:3px solid #ead2fb;outline-offset:3px;border-color:#fff}
@media(hover:hover) and (pointer:fine){.roll-delight .relic-card:hover{transform:translateY(-3px) scale(1.045);z-index:2;box-shadow:inset 0 0 0 3px #fff9,0 7px 0 var(--edge),0 0 18px #f8dcfa88}}
@media(hover:none){.roll-delight .relic-card:hover:not(:focus-visible){transform:none}}
.roll-delight .relic-card:active{transform:scale(.98)}
/* Base button:hover rules replace background images; rarity rules also used a
   dark palette. Keep every interaction state opaque with the same pastel fill. */
#modal .roll-delight .relic-card{--card:#67cbb8;--edge:#479888;--roll-ink:#386c62;background-color:var(--card);background-image:none;color:white;opacity:1}
#modal .roll-delight .relic-card:nth-child(3n+2){--card:#7ac8e1;--edge:#569ab9;--roll-ink:#3d637f}
#modal .roll-delight .relic-card:nth-child(3n){--card:#a8ce70;--edge:#819e51;--roll-ink:#506a36}
#modal .roll-delight .relic-card[data-rarity="rare"]{--card:#b99be3;--edge:#9376bb;--roll-ink:#674984}
#modal .roll-delight .relic-card[data-rarity="epic"]{--card:#eea0c7;--edge:#c77fa1;--roll-ink:#864662}
#modal .roll-delight .relic-card[data-rarity="legendary"]{--card:#ecd477;--edge:#bfaa54;--roll-ink:#776022}
#modal .roll-delight .relic-card[data-rarity]:not([data-rarity="normal"]){border-color:#fff5fc;box-shadow:inset 0 0 0 3px #ffffff77,0 5px 0 var(--edge),0 8px 14px #23142f38}
#modal .roll-delight .relic-card :is(.relic-number,b,small,.relic-select){color:#fff;-webkit-text-stroke:.55px var(--roll-ink);paint-order:stroke fill;text-shadow:0 1px 1px var(--roll-ink)}
#modal .roll-delight .relic-card>b{-webkit-text-stroke:1px var(--roll-ink)}
#modal .roll-delight .relic-card .relic-art{background:#ffffff25}
#modal .roll-delight .relic-card .relic-select{background:#ffffff20;border-color:#ffffff99}
.roll-delight,.roll-delight *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.roll-delight button{touch-action:manipulation}
.roll-delight-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:paint}
.roll-spray{position:absolute;top:43%;left:0;width:1px;height:1px}
.roll-spray-right{left:auto;right:0;transform:scaleX(-1)}
.roll-spray i{position:absolute;width:11px;height:17px;border-radius:5px;background:var(--tint);opacity:0;animation:roll-pastel-arrive 1.25s calc(var(--i)*.045s) ease-out 1 both}
.roll-spray i:nth-child(3n){width:14px;height:14px;border-radius:50%}
.roll-spray i:nth-child(3n + 1){clip-path:polygon(50% 0,64% 34%,100% 50%,64% 64%,50% 100%,36% 64%,0 50%,36% 34%)}
.roll-caviar{position:absolute;bottom:12px;left:12px;width:260px;height:130px;animation:none}
.roll-caviar-right{left:auto;right:12px}
.roll-caviar canvas{display:block;width:100%;height:100%;animation:roll-caviar-wobble 6.4s ease-in-out infinite;transform-origin:50% 75%}
.roll-caviar-right canvas{animation-delay:-3.2s}
#modal .roll-delight>footer{padding:0 75px!important;min-height:64px}
#modal .roll-delight footer button{background:#e6a17f;color:#fff;border:2px solid #ffe1ce;box-shadow:0 3px 0 #b77c65;-webkit-text-stroke:.6px #805140;paint-order:stroke fill;text-shadow:0 1px 1px #805140}
@keyframes roll-pastel-arrive{0%{opacity:0;transform:translate(-16px,0) rotate(0)}15%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(var(--travel),var(--rise)) rotate(240deg) scale(.65)}}
@keyframes roll-caviar-wobble{0%,76%,100%{transform:scale(1)}80%{transform:scale(1.045,.957)}84%{transform:scale(.975,1.026)}88%{transform:scale(1.016,.984)}92%{transform:scale(.993,1.007)}96%{transform:scale(1)}}
@media(max-height:550px){
 .relic-upgrade.roll-delight{padding:8px 15px 12px}
 #modal .roll-delight>header{padding:0 45px 4px!important}
 .roll-delight .relic-kicker{display:none}
 .roll-delight h2{font-size:18px;margin:2px 0}
 .roll-delight header p{font-size:11px;margin:3px 0}
 .roll-delight .relic-level{top:0;padding:3px 6px;font-size:8px}
 .roll-delight .relic-level b{font-size:20px}
 .roll-delight>.relic-choices{gap:9px;margin:4px 0 7px;padding:5px}
 .roll-delight .relic-card{padding:6px 5px;border-radius:12px}
 .roll-delight .relic-art{margin:4px 0;height:50px}
 #modal .roll-delight>footer{min-height:47px;font-size:9px;padding:0 50px!important}
 .roll-delight footer button{margin:3px;min-height:34px;padding:5px 12px}
 .roll-delight .relic-card>small{line-height:1.35;margin:3px 0 5px}
 .roll-caviar{width:174px;height:87px;bottom:8px;left:8px}
 .roll-caviar-right{left:auto;right:8px}
}
@media(max-width:550px){
 .relic-upgrade.roll-delight{padding:12px}
 .roll-delight>.relic-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:6px}
 .roll-delight .relic-card>b{font-size:14px}
 .roll-delight .relic-card>small{font-size:11px;min-height:0}
 .roll-delight .relic-art{height:62px}
 .roll-delight .relic-select{font-size:11px;padding:7px 2px}
 #modal .roll-delight>footer{padding:0 25px!important}
 .roll-caviar{width:132px;height:66px;bottom:8px;left:8px}
 .roll-caviar-right{left:auto;right:8px}
}
@media(prefers-reduced-motion:reduce){
 .roll-delight .relic-card{transition:none!important}
 .roll-spray{display:none}
 .roll-caviar,.roll-caviar canvas{animation:none}
}