/* Approved item-use effect. Artwork framing stays intact; only decorative layers move. */
/* Daylight needs coloured edges and depth; dark themes retain the approved glow.
   Tokens live on the root so the detached viewport stage shares the card palette. */
:root:not([data-theme="dark"]):not([data-theme="aura"]):not([data-theme="obsidian"]){
 --item-fx-rgb:24,111,190;--item-fx-color:#186fbe;
 --item-fx-particle:#237cc9;--item-fx-star:#d8f1ff;
 --item-fx-neutral-rgb:111,73,164;--item-fx-neutral-color:#6f49a4;--item-fx-neutral-particle:#7950ae;
 --item-fx-orbit-width:1.5px;--item-fx-edge-tip:#e3f5ff;
 --item-fx-orbit-shadow:0 1px 2px #154f922b,inset 0 1px 1px #ffffffb3;
 --item-fx-shell-background:radial-gradient(ellipse at 50% 15%,#e2f7ff9c,transparent 65%),linear-gradient(135deg,#96c7ee,#548dc1);
 --item-fx-shell-shadow:0 18px 35px #234d6240,0 4px 10px #174b5833,inset 0 1px 0 #eaf6ff8c;
 --item-fx-shell-rim:#225c968c;--item-fx-seal:#194f80;
 --item-fx-seal-shadow:0 0 0 14px #eaf6ff1a,0 0 0 28px #f3faff12;
}
.commerce-card>.item-use-content{display:flex;flex-direction:column;flex:1;min-width:0}
.commerce-grid[data-item-inventory]{position:relative;isolation:isolate}
.commerce-grid[data-item-inventory]>.commerce-card{position:relative;isolation:isolate;--item-use-rgb:var(--item-fx-rgb,119,233,239);--item-use-color:var(--item-fx-color,#77e9ef);--item-use-time:1}
.commerce-page .commerce-grid>.commerce-card.is-using-item{z-index:2;box-shadow:0 0 0 1px rgba(var(--item-use-rgb),.4),0 0 32px rgba(var(--item-use-rgb),.12),0 15px 36px #080d2744}
.commerce-grid .is-using-item .item-picture{translate:0 0!important;animation:none!important}
.commerce-grid .item-use-gone{visibility:hidden}
.commerce-page .commerce-grid .item-use-button{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
.item-use-label-size,.item-use-label{grid-area:1/1;max-width:100%}
.item-use-label-size{visibility:hidden}
.commerce-page .commerce-grid .item-use-button[data-item-full]{opacity:1;background:color-mix(in srgb,var(--theme-surface,#f5faf9) 75%,var(--theme-soft,#e9efee));border-color:transparent;color:var(--theme-muted,#657e87);box-shadow:none;cursor:default}
.commerce-page .commerce-grid .item-use-button[data-item-pending]{opacity:1;color:#77e9ef;background:#263d4f;border-color:#527b89;box-shadow:none}
.commerce-grid .item-use-button:disabled{cursor:default}
.commerce-grid .item-use-neutral{--item-use-rgb:var(--item-fx-neutral-rgb,195,176,255);--item-use-color:var(--item-fx-neutral-color,#c3b0ff)}
.item-use-viewport{position:fixed;inset:0;z-index:40;overflow:hidden;pointer-events:none;contain:strict}
.item-use-viewport,.item-use-viewport *,.item-use-viewport *::before,.item-use-viewport *::after{box-sizing:border-box}
.item-use-stage{position:absolute;--item-use-rgb:var(--item-fx-rgb,119,233,239);--item-use-color:var(--item-fx-color,#77e9ef);--item-use-particle:var(--item-fx-particle,#91ffe2);--item-use-time:1;pointer-events:none}
.item-use-stage.item-use-neutral{--item-use-rgb:var(--item-fx-neutral-rgb,195,176,255);--item-use-color:var(--item-fx-neutral-color,#c3b0ff);--item-use-particle:var(--item-fx-neutral-particle,#cfb8ff)}
@property --item-use-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
/* Motion belongs to decorative siblings. No transform or filter is applied to
   the card, its readable contents, or the original artwork during activation. */
.item-use-fx{position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:23px;overflow:visible}
.item-use-wash{position:absolute;inset:0;overflow:hidden;border-radius:inherit;opacity:0;background:radial-gradient(ellipse at 50% 20%,rgba(var(--item-use-rgb),.22),transparent 58%)}
.item-use-sweep{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.item-use-sweep:before{content:'';position:absolute;left:-30%;width:160%;height:46%;bottom:-48%;background:linear-gradient(0deg,transparent,rgba(var(--item-use-rgb),.06) 25%,rgba(var(--item-use-rgb),.2) 65%,rgba(var(--item-use-rgb),.4) 75%,transparent 78%);opacity:0}
.item-use-edge{position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--item-use-angle),transparent 0deg,transparent 245deg,rgba(var(--item-use-rgb),.3) 280deg,rgba(var(--item-use-rgb),1) 318deg,var(--item-fx-edge-tip,white) 327deg,transparent 345deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0}
.item-use-orbit{position:absolute;top:var(--item-use-y,77px);left:50%;width:138px;height:138px;margin:-69px;border-radius:50%;border:var(--item-fx-orbit-width,1px) solid rgba(var(--item-use-rgb),.85);box-shadow:var(--item-fx-orbit-shadow,none);opacity:0}
.item-use-orbit:before,.item-use-orbit:after{content:'';position:absolute;border-radius:50%;width:5px;height:5px;top:18px;left:16px;background:var(--item-use-color);box-shadow:0 0 12px var(--item-use-color)}
.item-use-orbit:after{top:auto;left:auto;right:16px;bottom:18px;width:3px;height:3px}
.item-use-orbit.second{width:166px;height:166px;margin:-83px;border-style:dashed;border-width:1px}
.item-use-focus{position:absolute;top:var(--item-use-y,77px);left:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:rgba(var(--item-use-rgb),.95);box-shadow:0 0 24px 12px rgba(var(--item-use-rgb),.24);opacity:0}
.item-use-result{position:absolute;top:var(--item-use-result-y,121px);left:12px;right:12px;display:flex;justify-content:center;gap:7px;opacity:0;z-index:8;white-space:nowrap}
.item-use-result span{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:5px 9px;border-radius:8px;background:#182a37ed;border:1px solid #76dfd75c;color:#c4fff0;box-shadow:0 4px 14px #111b2866}
.item-use-result .gain-hp{color:#ffd2dc}
.item-use-result .gain-ep{color:#adfcff}
.item-use-result.neutral span{color:#e5dbff;background:#302943ee;border-color:#bda3f055}
.item-use-particles{position:absolute;inset:-50px;width:calc(100% + 100px);height:calc(100% + 100px);pointer-events:none}
.item-use-departure{position:absolute;inset:0;z-index:10;pointer-events:none;perspective:850px}
.item-use-shell{width:100%;height:100%;border:0;border-radius:22px;background:var(--item-fx-shell-background,radial-gradient(ellipse at 50% 18%,#77e9ef3b,transparent 65%),linear-gradient(130deg,var(--theme-surface,#f0faf8),var(--theme-soft,#dceeea)));box-shadow:var(--item-fx-shell-shadow,0 0 22px #77e9ef29,inset 0 0 34px #77e9ef18);transform-origin:50% 50%;display:grid;place-items:center;overflow:hidden;position:relative}
.item-use-seal{width:99px;height:99px;border:1px solid transparent;box-shadow:var(--item-fx-seal-shadow,0 0 0 14px #87e8e908,0 0 0 28px #8bd4fc06);border-radius:50%;display:grid;place-items:center;color:var(--item-fx-seal,var(--theme-accent,#218f94));font-size:37px}
.item-use-shell:before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--item-fx-shell-rim,#a3e8e688);animation:item-use-shell-rim 620ms cubic-bezier(.32,.05,.2,1) both}
.item-use-shell:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#d3fff529 48%,transparent 72%)}
.is-using-item .item-use-wash{animation:item-use-wash calc(1100ms * var(--item-use-time)) ease-out both}
.is-using-item .item-use-sweep:before{animation:item-use-sweep calc(840ms * var(--item-use-time)) calc(170ms * var(--item-use-time)) cubic-bezier(.2,.6,.25,1) both}
.is-using-item .item-use-edge{animation:item-use-edge calc(1030ms * var(--item-use-time)) ease-out both}
.is-using-item .item-use-orbit{animation:item-use-orbit calc(940ms * var(--item-use-time)) cubic-bezier(.16,.7,.2,1) both}
.is-using-item .item-use-orbit.second{animation:item-use-orbit2 calc(950ms * var(--item-use-time)) calc(100ms * var(--item-use-time)) ease-out both}
.is-using-item .item-use-focus{animation:item-use-focus calc(580ms * var(--item-use-time)) calc(160ms * var(--item-use-time)) ease-out both}
.is-using-item .item-use-result{animation:item-use-result calc(770ms * var(--item-use-time)) calc(340ms * var(--item-use-time)) ease-out both}
@keyframes item-use-wash{0%{opacity:0}30%{opacity:1}55%{opacity:.7}100%{opacity:0}}
@keyframes item-use-sweep{0%{opacity:0;translate:0 0}15%{opacity:.8}65%{opacity:.7}100%{opacity:0;translate:0 -520px}}
@keyframes item-use-edge{0%{opacity:0;--item-use-angle:0deg}15%,55%{opacity:.85}100%{opacity:0;--item-use-angle:310deg}}
@keyframes item-use-orbit{0%{opacity:0;transform:scale(.67) rotate(-65deg)}30%{opacity:.85}62%{opacity:.5}100%{opacity:0;transform:scale(1.4) rotate(105deg)}}
@keyframes item-use-orbit2{0%{opacity:0;transform:scale(.7) rotate(80deg)}27%{opacity:.42}100%{opacity:0;transform:scale(1.3) rotate(-55deg)}}
@keyframes item-use-focus{0%{opacity:0;transform:scale(.4)}24%{opacity:.45;transform:scale(2)}75%{opacity:.1}100%{opacity:0;transform:scale(15)}}
@keyframes item-use-result{0%{opacity:0;translate:0 8px}18%,65%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -12px}}

.item-use-reduced .item-use-fx>:not(.item-use-result){display:none}
.item-use-reduced .item-use-result{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.item-use-fx>:not(.item-use-result){display:none}
.item-use-result{opacity:1}}

@keyframes item-use-shell-rim{0%,12%{opacity:1}42%,100%{opacity:0}}