.ability-slots{position:absolute;right:16px;bottom:14px;display:flex;gap:7px;z-index:2}
.wallet-chip{position:absolute;right:16px;top:82px;z-index:4;padding:7px 12px;border:1px solid #ffe58a;background:#10263de8;color:#ffe58a;font-weight:900;letter-spacing:.08em}
.contact-cue{position:absolute;left:50%;bottom:155px;transform:translateX(-50%) skew(-6deg);z-index:5;padding:9px 22px;border:2px solid #ffe76b;background:#16213bea;color:#ffe76b;box-shadow:0 0 28px #ffe76b66;text-align:center;animation:contact-pop .28s infinite alternate}.contact-cue b,.contact-cue small{display:block;letter-spacing:.14em}.contact-cue b{font-size:18px}.contact-cue small{font-size:9px;color:#fff}
.ability-slots button{position:relative;width:126px;height:76px;padding:5px 8px 9px;background:linear-gradient(130deg,#17223eee,#252044ee);border:1px solid var(--skill);border-radius:3px;overflow:hidden;color:#fff;opacity:1;text-align:left}
.ability-slots kbd{position:absolute;left:7px;top:6px;background:#f3eed7;color:#122438;padding:1px 5px;font-weight:900}
.ability-slots b{display:block;text-align:right;color:var(--skill);font-size:24px;line-height:26px}
.ability-slots span{display:block;font-size:10px;font-weight:800}.ability-slots small{font-size:8px;color:var(--skill)}
.ability-slots i{position:absolute;left:0;bottom:0;height:3px;background:var(--skill);transition:width .08s linear}.ability-slots .armed{box-shadow:0 0 16px color-mix(in srgb,var(--skill) 40%,transparent)}
#ability-menu{z-index:20}#ability-menu>div{max-width:930px;background:linear-gradient(145deg,#101d35,#241b3c);border:1px solid #a384d9}.shop-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.shop-head h1{margin-bottom:4px}.shop-wallet{color:#ffe58a;white-space:nowrap}.shop-tabs{display:flex;gap:8px;margin:12px 0}.shop-tabs .active{background:#6b45aa;border-color:#d9bbff}
.ability-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:18px 0}
.ability-collect{border:1px solid var(--skill);border-radius:6px;padding:12px;background:#111a2b}.ability-collect.locked{border-style:dashed}.ability-collect strong,.ability-collect small{display:block}.ability-collect small{color:var(--skill);margin-top:5px;font-size:10px}.ability-collect p{font-size:12px!important;line-height:1.5!important;min-height:72px}.ability-collect button{font-size:11px;padding:6px;margin-right:5px}.skill-icon{float:right;color:var(--skill);font-size:29px}
.loot-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:170px;overflow:hidden;background:radial-gradient(ellipse,#55417b55,transparent 65%)}.loot-track{width:max-content;display:flex;gap:10px;min-height:72px;align-items:center}.loot-track span{display:grid;place-items:center;width:62px;height:62px;background:#151d33;border:2px solid var(--skill);color:var(--skill);font-size:24px;font-weight:900}.opening .loot-track{animation:vault-roll 4.2s cubic-bezier(.08,.72,.12,1) forwards}.revealed .loot-track span:nth-child(30){box-shadow:0 0 32px var(--skill);transform:scale(1.15)}
.loot-cube{position:relative;width:65px;height:65px;display:grid;place-items:center;background:linear-gradient(135deg,#b795ff,#423369);border:3px solid #efe1ff;transform:rotate(-8deg);box-shadow:8px 8px 0 #19172f,0 0 35px #9674d144;font-size:38px;color:#fff}
.loot-cube:before{content:'';position:absolute;top:-10px;left:-6px;right:-6px;height:15px;background:#c8b0ff;border:2px solid #fff;transition:transform .5s,opacity .5s}.loot-result{margin-top:22px;font-size:14px;letter-spacing:1px;text-align:center}
.opening .loot-cube{animation:seal-shake .15s infinite alternate}.opening .loot-cube span{animation:seal-glow .5s infinite alternate}.revealed .loot-cube{background:var(--skill);color:#152138;animation:power-reveal .55s ease-out;box-shadow:0 0 50px var(--skill)}.revealed .loot-cube:before{transform:translateY(-60px) rotate(-25deg);opacity:0}.revealed .loot-result{color:var(--skill)}
@keyframes seal-shake{from{transform:rotate(-12deg) scale(1)}to{transform:rotate(12deg) scale(1.1)}}@keyframes seal-glow{to{opacity:.3}}@keyframes power-reveal{from{transform:scale(.3) rotate(-60deg)}to{transform:scale(1) rotate(-8deg)}}
@keyframes vault-roll{from{transform:translateX(520px)}to{transform:translateX(-390px)}}@keyframes contact-pop{to{filter:brightness(1.3);transform:translateX(-50%) skew(-6deg) scale(1.06)}}
@media(max-width:900px){.ability-slots{right:10px;bottom:114px}.ability-slots button{width:110px;height:70px}.wallet-chip{top:108px}.contact-cue{bottom:205px}.shop-head{align-items:flex-start;flex-direction:column;gap:4px}}@media(prefers-reduced-motion:reduce){.loot-stage *,.contact-cue{animation:none!important;transition:none!important}}

/* Cooldown reveals the right side first, matching the remaining time exactly. */
.ability-slots .cooldown-shade{position:absolute;inset:0 auto 0 0;background:#030814bc;pointer-events:none;transition:width .06s linear;z-index:0}
.ability-slots kbd,.ability-slots b,.ability-slots span,.ability-slots small{position:relative;z-index:1}.ability-slots kbd{position:absolute}.ability-slots span{font-size:12px}.ability-slots small{font-size:12px}.ability-slots button{height:82px;width:140px}

/* Reveal progresses left to right across the entire card. */
.ability-slots .cooldown-shade{inset:0 0 0 auto;background:rgba(0,0,0,.78);z-index:3;height:100%;border-radius:0;pointer-events:none}.ability-slots button:disabled{opacity:1}.ability-slots button>i{display:none}.ability-slots kbd,.ability-slots b,.ability-slots span{z-index:1}.ability-slots small{z-index:4;color:#fff;text-shadow:0 1px 2px #000;font-weight:900}

.style-hud{position:fixed;right:24px;bottom:150px;z-index:8;width:240px;min-height:70px;text-align:left;padding:10px 12px 10px 48px;border:1px solid var(--skill);background:linear-gradient(120deg,#091627ee,#182747ee);color:#fff;box-shadow:0 0 24px var(--skill)}.style-hud kbd{position:absolute;left:10px;top:10px;background:#fff;color:#111;padding:5px 8px}.style-hud b,.style-hud span,.style-hud small{display:block}.style-hud b{color:var(--skill);font-size:15px}.style-hud span{font-size:11px;line-height:1.2;margin:3px 0}.style-hud small{font-size:10px;color:#9fb5c8}.style-statline{display:flex;gap:3px;height:82px;align-items:end;margin:12px 0 28px}.style-statline>span{height:100%;flex:1;position:relative;background:#091526;display:flex;align-items:end}.style-statline i{display:block;width:100%;background:linear-gradient(#fff,var(--skill));opacity:.8}.style-statline small{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%) rotate(-55deg);font-size:8px;text-transform:uppercase}.style-statline b{position:absolute;top:2px;left:2px;font-size:8px}.style-special{display:block;margin:10px 0 8px;padding:8px;border-left:3px solid var(--skill);color:var(--skill);font-style:normal;font-size:11px}.ability-collect{min-height:270px}.ability-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.loot-stage{overflow:hidden}.loot-track span{flex:0 0 92px;height:92px;border:2px solid var(--skill);background:#101627;box-shadow:inset 0 0 20px var(--skill)}@media(max-width:700px){.style-hud{right:8px;bottom:218px;width:190px}}
.loot-stage:after{content:"";display:none;position:absolute;left:50%;top:16px;bottom:42px;width:3px;background:#fff;filter:drop-shadow(0 0 7px #fff);z-index:2;pointer-events:none}.loot-stage.opening:after,.loot-stage.revealed:after{display:block}.loot-track{position:absolute;left:50%;top:18px;transform:translateX(500px)}.revealed .loot-track{transform:translateX(-3004px)}@keyframes vault-roll{0%{transform:translateX(500px)}72%{transform:translateX(-3070px)}88%{transform:translateX(-2982px)}100%{transform:translateX(-3004px)}}
.portrait-reel{position:relative;background-repeat:no-repeat!important;overflow:hidden;text-shadow:0 2px 4px #000}.portrait-reel:after,.style-portrait:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#050914ed);pointer-events:none}.portrait-reel b,.portrait-reel i,.style-portrait b,.style-portrait i{position:absolute;z-index:2;left:5px;right:5px;text-align:left;color:#fff}.portrait-reel b{bottom:17px;font-size:11px;line-height:1.05}.portrait-reel i{bottom:4px;font-size:8px;color:var(--skill);font-style:normal;letter-spacing:.7px}.style-portrait{width:100%;aspect-ratio:1;margin:0 0 10px;position:relative;background-repeat:no-repeat;border:2px solid var(--skill);border-radius:5px;overflow:hidden;box-shadow:inset 0 0 24px #0008}.style-portrait b{bottom:22px;font-size:18px}.style-portrait i{bottom:6px;color:var(--skill);font-size:10px;font-style:normal;letter-spacing:1px}
.skip-roll{display:none;position:absolute;right:18px;bottom:9px;z-index:4;padding:5px 10px;font-size:10px;background:#182c47;border-color:#8cb8d0}.opening .skip-roll{display:block}
/* Compact style collection and a readable winner guide. */
.loot-stage:after{top:27px;bottom:58px;width:2px;background:linear-gradient(transparent,#ffe58a 22%,#fff 50%,#ffe58a 78%,transparent);filter:drop-shadow(0 0 5px #fff);border-radius:3px}.ability-list{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}.ability-collect{min-height:0;padding:10px}.style-portrait{width:96px;height:96px;aspect-ratio:1;float:left;margin:0 10px 8px 0}.style-portrait b{bottom:19px;font-size:13px}.style-portrait i{bottom:5px;font-size:8px}.ability-collect>strong{padding-top:3px}.ability-collect>p{min-height:54px;font-size:11px!important}.style-statline{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;height:auto;margin:8px 0 10px;align-items:center}.style-statline>span{height:14px;display:grid;grid-template-columns:38px 1fr 19px;gap:3px;align-items:center;background:none}.style-statline small{position:static;transform:none;font-size:7px;color:#9fb5c8;margin:0}.style-statline i{height:5px;width:100%;background:#07111f;border-radius:5px;overflow:hidden;opacity:1}.style-statline i em{display:block;height:100%;background:linear-gradient(90deg,var(--skill),#fff);border-radius:5px}.style-statline b{position:static;font-size:8px;text-align:right;color:#fff}.style-special{clear:both;font-size:9px;margin:6px 0}.ability-collect button{font-size:9px;padding:5px}
.style-meter{display:block;height:5px;margin:5px 0 4px;background:#030914;border-radius:5px;overflow:hidden}.style-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--skill),#fff);box-shadow:0 0 9px var(--skill)}

/* Full-screen playstyle synchronization reveal. */
.style-roll-scene{display:none;position:absolute;inset:0;overflow:hidden;text-align:center;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--roll-style,#45d9ff) 32%,transparent),transparent 37%),linear-gradient(180deg,#070d1d,#101a34 58%,#050813);transition:--roll-style .1s}
#ability-menu.style-opening>div,#ability-menu.style-revealed>div{width:min(920px,94vw);max-width:none;height:min(720px,92vh);padding:0;overflow:hidden;border:1px solid var(--roll-style,#8acfff);box-shadow:0 0 70px color-mix(in srgb,var(--roll-style,#45d9ff) 35%,transparent)}
#ability-menu.style-opening .shop-head,#ability-menu.style-opening .shop-tabs,#ability-menu.style-opening .box-controls,#ability-menu.style-opening .loot-odds,#ability-menu.style-opening .ability-list,#ability-menu.style-opening .close,
#ability-menu.style-revealed .shop-head,#ability-menu.style-revealed .shop-tabs,#ability-menu.style-revealed .box-controls,#ability-menu.style-revealed .loot-odds,#ability-menu.style-revealed .ability-list,#ability-menu.style-revealed .close{display:none}
#ability-menu.style-opening .loot-stage,#ability-menu.style-revealed .loot-stage{height:100%;background:#050813}
#ability-menu.style-opening .style-roll-scene,#ability-menu.style-revealed .style-roll-scene{display:block}
#ability-menu.style-opening .loot-track,#ability-menu.style-revealed .loot-track,#ability-menu.style-opening .loot-stage:after,#ability-menu.style-revealed .loot-stage:after{display:none}
.style-roll-heading{position:absolute;top:28px;left:0;right:0;color:#a9bad7;font-size:12px;font-weight:900;letter-spacing:.42em}
.style-roll-names{position:absolute;z-index:4;top:58px;left:4%;right:4%;height:72px;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:20px;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25;background:linear-gradient(90deg,transparent,#0c1639dc,transparent)}
.style-roll-names span{font-size:15px;font-weight:800;color:#667593;letter-spacing:.14em;filter:blur(.5px)}
.style-roll-names b{font-size:clamp(25px,4vw,46px);color:#fff;letter-spacing:.09em;text-shadow:0 0 22px var(--roll-style);white-space:nowrap;animation:name-snap .14s ease-out}
.roll-character{position:absolute;left:50%;top:53%;width:min(440px,88vw);height:430px;transform:translate(-50%,-50%);filter:drop-shadow(0 22px 17px #000c)}
.style-character-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--roll-style) 46%,transparent))}
.roll-aura{position:absolute;left:50%;top:48%;width:310px;height:310px;transform:translate(-50%,-50%);border:2px solid var(--roll-style);border-radius:50%;box-shadow:0 0 34px var(--roll-style),inset 0 0 42px color-mix(in srgb,var(--roll-style) 35%,transparent);animation:roll-aura 1.8s linear infinite}
.roll-aura:before,.roll-aura:after{content:"";position:absolute;inset:24px;border:1px dashed #fff8;border-radius:50%;animation:roll-aura 3.2s linear infinite reverse}.roll-aura:after{inset:58px;border-style:solid;border-color:var(--roll-style)}
.roll-shadow{position:absolute;left:50%;bottom:4px;width:190px;height:35px;transform:translateX(-50%);border-radius:50%;background:#000b;box-shadow:0 0 30px var(--roll-style)}
.roll-head{position:absolute;z-index:3;left:79px;top:22px;width:76px;height:80px;border-radius:18px 18px 25px 25px;background:linear-gradient(135deg,#ffd3ad,#b87d62);border:4px solid #080c17;box-shadow:inset 0 12px 0 #18243d}.roll-head i{position:absolute;left:13px;right:13px;top:40px;height:7px;border-left:11px solid #fff;border-right:11px solid #fff}
.roll-torso{position:absolute;z-index:2;left:55px;top:96px;width:124px;height:132px;border-radius:18px 18px 8px 8px;background:linear-gradient(145deg,#fff 0 19%,var(--roll-style) 20% 76%,#081126 77%);border:5px solid #080c17;box-shadow:inset 0 -15px 0 #0004,0 0 30px color-mix(in srgb,var(--roll-style) 50%,transparent)}.roll-torso b{display:grid;place-items:center;height:100%;font-size:46px;font-style:italic;color:#fff;text-shadow:0 3px 0 #0006}
.roll-arm{position:absolute;z-index:1;top:107px;width:42px;height:145px;border:5px solid #080c17;border-radius:20px;background:linear-gradient(#fff 0 34%,var(--roll-style) 35% 58%,#d59d7e 59%)}.roll-arm.left{left:23px;transform:rotate(16deg)}.roll-arm.right{right:23px;transform:rotate(-16deg)}
.roll-leg{position:absolute;z-index:1;top:218px;width:53px;height:123px;border:5px solid #080c17;border-radius:5px 5px 17px 17px;background:linear-gradient(#111a32 0 46%,#e4b092 47% 73%,#f5f7ff 74%)}.roll-leg.left{left:58px;transform:rotate(3deg)}.roll-leg.right{right:58px;transform:rotate(-3deg)}
.style-roll-role{position:absolute;left:0;right:0;bottom:66px;color:var(--roll-style);font-size:20px;letter-spacing:.16em;text-transform:uppercase}.style-roll-special{position:absolute;left:12%;right:12%;bottom:38px;color:#c9d4e7;font-size:12px}
#ability-menu.style-opening .loot-result,#ability-menu.style-revealed .loot-result{position:absolute;z-index:6;left:0;right:0;bottom:12px;margin:0;color:#fff;text-shadow:0 0 12px var(--roll-style)}
#ability-menu.style-opening .skip-roll{display:block;right:18px;bottom:16px;border-color:var(--roll-style);background:#09142ddd;color:#fff}
#ability-menu.style-revealed .style-roll-scene{animation:style-winner .65s ease-out}.style-roll-scene.jersey-swap .style-character-canvas{animation:jersey-swap .17s ease-out}
#ability-menu.style-revealed .close{display:block;position:absolute;z-index:12;right:18px;top:16px;margin:0;width:auto;padding:10px 18px;background:#152039;border-color:var(--roll-style,#8acfff)}
@keyframes jersey-swap{0%{filter:brightness(3);transform:scale(.94)}100%{filter:brightness(1);transform:scale(1)}}@keyframes name-snap{from{transform:translateY(-12px);opacity:.2}to{transform:none;opacity:1}}@keyframes roll-aura{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes style-winner{0%{filter:brightness(3);transform:scale(1.08)}100%{filter:brightness(1);transform:scale(1)}}
@media(max-width:650px){.style-roll-names{grid-template-columns:.7fr 1.6fr .7fr;gap:5px}.style-roll-names span{font-size:9px}.roll-character{transform:translate(-50%,-50%) scale(.82)}.style-roll-role{font-size:14px}.style-roll-special{font-size:10px;bottom:42px}}