.equip-dialog{border:0;padding:0;margin:0;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;overflow:clip;background:radial-gradient(ellipse at 50% 58%,#577144 0,#244a38 40%,#123a2e 85%);color:#fff0bf;outline:none}.equip-dialog[open]{display:grid;place-items:center}.equip-dialog::backdrop{background:#102d24db}
.equip-content{width:min(520px,100%);padding:28px 24px;text-align:center;isolation:isolate}.equip-copy{position:relative;z-index:2}.equip-eyebrow{font-size:10px;letter-spacing:2.5px;color:#d6c992;font-weight:700}.equip-copy h2{font:700 clamp(24px,4vw,36px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-1px;min-height:2.3em;display:grid;place-items:center;margin:9px 0 0;text-wrap:balance}
.equip-skip{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:max(16px,env(safe-area-inset-top,0px));min-height:44px;min-width:70px;padding:10px 14px;border:1px solid #c8d1a638;border-radius:30px;background:#143b2d;color:#d5dcba;font-size:12px;z-index:3}.equip-skip span{margin-left:7px}.equip-skip:focus-visible{outline:3px solid #ffe39b;outline-offset:3px}
.equip-stage{position:relative;width:min(360px,100%);height:clamp(210px,calc(100dvh - 300px),390px);margin:0 auto;perspective:800px}.equip-hand{position:absolute;inset:0;z-index:2;animation:equip-hand-rise .65s .16s cubic-bezier(.16,.8,.2,1) both}.equip-hand canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 8px #051e2545)}
.equip-halo{position:absolute;inset:0 -20%;border-radius:50%;background:radial-gradient(ellipse,#efd47435,transparent 64%);opacity:.2;transform:scale(.75);transition:opacity .4s,transform .7s}.is-impact .equip-halo{opacity:1;transform:scale(1.3)}
.equip-impact{position:absolute;left:50%;top:78%;width:0;height:0;z-index:1;pointer-events:none}.equip-impact b{position:absolute;width:110px;height:110px;margin:-55px;border:2px solid #f5d88d;border-radius:50%;opacity:0}.is-impact .equip-impact b{animation:equip-ring .7s ease-out both}.is-impact .equip-impact b:nth-child(2){animation-delay:.12s}.equip-impact i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:2px;background:#f3d387;opacity:0}.is-impact .equip-impact i{animation:equip-spark .8s var(--delay) ease-out both}.is-impact .equip-hand{animation:equip-hit .42s ease-out both}
.equip-caption{position:relative;z-index:2;min-height:70px;margin-top:10px}.equip-caption strong{display:block;font:700 24px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.5px;color:#e8d59b}.equip-caption span{display:block;font-size:12px;color:#bdccab;margin-top:8px}.is-equipped .equip-caption strong{color:#ffe59b;text-shadow:0 2px 0 #756333;animation:equip-word .3s ease-out both}
.equip-hand img{width:100%;height:100%;object-fit:contain}
@keyframes equip-hand-rise{from{opacity:0;transform:translateY(90px) scale(.8)}to{opacity:1;transform:none}}
@keyframes equip-ring{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(3)}}
@keyframes equip-spark{0%{opacity:1;transform:rotate(var(--angle)) translateX(16px) scale(1.2)}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(.2)}}
@keyframes equip-hit{0%{transform:scale(1.02)}25%{transform:translateY(-7px) scale(1.08)}100%{transform:none}}
@keyframes equip-word{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@media(max-height:500px) and (orientation:landscape){.equip-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:0 20px;width:min(760px,100%);height:100dvh;padding:12px 50px}.equip-stage{grid-column:1;grid-row:1/3;height:100%;width:100%}.equip-copy{grid-column:2;grid-row:1;align-self:end}.equip-copy h2{font-size:26px;margin-top:7px;min-height:0}.equip-caption{grid-column:2;grid-row:2;min-height:0;margin:18px 0 0;align-self:start}.equip-caption strong{font-size:23px}.equip-caption span{font-size:11px}.equip-skip{top:8px;right:12px;min-height:44px;font-size:11px}}
.equip-reduced .equip-hand,.equip-reduced .equip-caption strong{animation:none}.equip-reduced .equip-impact{display:none}.equip-reduced .equip-halo{transition:none}
@media(prefers-reduced-motion:reduce){.equip-dialog *{animation:none!important;transition:none!important}.equip-impact{display:none}}
/* Match the impact light to the equipment material. */
.equip-content{--gear-light:#f3d387;--gear-halo:#efd47435}.equip-content[data-style="neon"]{--gear-light:#8affd5;--gear-halo:#5cfdcd45}.equip-content[data-style="steel"],.equip-content[data-style="platinum"]{--gear-light:#d5efff;--gear-halo:#addbff40}.equip-halo{background:radial-gradient(ellipse,var(--gear-halo),transparent 64%)}.equip-impact b{border-color:var(--gear-light)}.equip-impact i{background:var(--gear-light)}.is-equipped .equip-caption strong{color:var(--gear-light)}
/* Each fantasy transformation has one short ritual around the same live hand. */
.equip-content[data-style=witch]{--gear-light:#c0efa6;--gear-halo:#91dca940}.equip-content[data-style=wizard]{--gear-light:#ddbdff;--gear-halo:#ab71f54a}.equip-content[data-style=stormcaller]{--gear-light:#b9ecff;--gear-halo:#79cafa4a}.equip-magic{position:absolute;inset:0;z-index:1;pointer-events:none}.equip-magic i,.equip-magic b{position:absolute;opacity:0}.equip-magic b{display:none}.equip-content[data-style=witch] .equip-magic i{width:110px;height:160px;border-radius:50%;background:radial-gradient(ellipse,#a8d69360,transparent 68%);filter:blur(12px);bottom:0;left:25%;animation:witch-smoke 2s .6s ease-out both}.equip-content[data-style=witch] .equip-magic i:nth-child(2){left:45%;animation-delay:.85s}.equip-content[data-style=witch] .equip-magic i:nth-child(3){left:5%;animation-delay:1s}.equip-content[data-style=wizard] .equip-magic i{width:240px;height:240px;left:50%;top:48%;margin:-120px;border:2px solid #bc9be98c;border-radius:50%;animation:wizard-circle 2.4s .3s ease-in-out both}.equip-content[data-style=wizard] .equip-magic i:nth-child(2){width:210px;height:210px;margin:-105px;border-style:dashed;animation-delay:.45s}.equip-content[data-style=wizard] .equip-magic i:nth-child(3){width:165px;height:165px;margin:-82.5px;border-radius:12%;animation-delay:.6s}.equip-content[data-style=wizard] .equip-magic b{display:block;left:calc(50% - 12px);top:1%;font-size:30px;color:#dbb9ff;animation:wizard-circle 2s .4s ease both}.equip-content[data-style=stormcaller] .equip-magic{z-index:3}.equip-content[data-style=stormcaller] .equip-magic i{width:25px;height:88%;left:39%;top:-5%;background:linear-gradient(#a3e7ff,#edffff,#81ddff);clip-path:polygon(65% 0,100% 0,44% 39%,92% 34%,28% 71%,60% 67%,0 100%,15% 54%,52% 57%,24% 37%);filter:drop-shadow(0 0 5px #99e9ff);animation:storm-strike .65s 1.58s ease-out both}.equip-content[data-style=stormcaller] .equip-magic i:nth-child(2){left:60%;height:65%;transform:scaleX(-1);animation-delay:1.7s}.equip-content[data-style=stormcaller] .equip-magic i:nth-child(3){display:none}
@keyframes witch-smoke{0%{opacity:0;transform:translateY(35px) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-170px) scale(1.8)}}
@keyframes wizard-circle{0%{opacity:0;transform:scale(.5) rotate(-50deg)}35%{opacity:.8}70%{opacity:.8}100%{opacity:0;transform:scale(1.2) rotate(30deg)}}
@keyframes storm-strike{0%{opacity:0;transform:translateY(-35px) scaleY(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(12px) scaleY(1)}}
.equip-reduced .equip-magic{display:none}@media(prefers-reduced-motion:reduce){.equip-magic{display:none}}

.equip-content[data-style=banyan]{--gear-light:#ebcb8b;--gear-halo:#e0ba6540}
.equip-content[data-style=emberforged]{--gear-light:#ffc18a;--gear-halo:#fa632c40}
.equip-content[data-style=voidwalker]{--gear-light:#c2d3ff;--gear-halo:#7a80ff40}
.equip-content[data-style=banyan] .equip-magic i{width:125px;height:160px;left:calc(50% - 62px);top:30%;border-radius:80% 12% 75% 20%;border:2px solid #a5b97770;transform-origin:50% 100%;animation:banyan-rise 2s .45s ease-out both}
.equip-content[data-style=banyan] .equip-magic i:nth-child(2){left:calc(50% - 112px);animation-delay:.65s;rotate:-30deg}
.equip-content[data-style=banyan] .equip-magic i:nth-child(3){left:calc(50% - 12px);animation-delay:.85s;rotate:30deg}
.equip-content[data-style=banyan] .equip-impact i{border-radius:70% 10% 65% 15%;background:#b4bd75}
.equip-content[data-style=emberforged] .equip-magic i{width:150px;height:150px;left:calc(50% - 75px);bottom:2%;border-radius:50%;background:radial-gradient(ellipse,#ff7b2e55,transparent 65%);filter:blur(8px);animation:forge-heat 1.8s .45s ease-out both}
.equip-content[data-style=emberforged] .equip-magic i:nth-child(2){width:100px;left:25%;animation-delay:.7s}
.equip-content[data-style=emberforged] .equip-magic i:nth-child(3){width:100px;left:48%;animation-delay:.9s}
.equip-content[data-style=emberforged] .equip-impact b{border-radius:24%;rotate:45deg}
.equip-content[data-style=emberforged] .equip-impact i{width:3px;height:8px;border-radius:50%;box-shadow:0 0 5px #ff6d2d}
.equip-content[data-style=voidwalker] .equip-magic{z-index:3}
.equip-content[data-style=voidwalker] .equip-magic i{height:85%;width:2px;top:10%;left:50%;background:linear-gradient(transparent,#bbd4ff,#eeeaff,#bbd4ff,transparent);box-shadow:0 0 18px 3px #858eff66;animation:void-rift 1.5s .7s cubic-bezier(.2,.7,.3,1) both}
.equip-content[data-style=voidwalker] .equip-magic i:nth-child(2){z-index:-1;width:190px;height:190px;left:calc(50% - 95px);top:22%;border:1px solid #c2ceff77;background:none;box-shadow:none;border-radius:50%;animation:void-orbit 2s .45s ease-out both}
.equip-content[data-style=voidwalker] .equip-magic i:nth-child(3){display:none}
.equip-content[data-style=voidwalker] .equip-impact{top:70%}
.equip-content[data-style=voidwalker] .equip-impact i{width:3px;height:3px;border-radius:50%;box-shadow:0 0 5px #c9dbff}
@keyframes banyan-rise{0%{opacity:0;transform:translateY(45px) scale(.25)}40%{opacity:.65}100%{opacity:0;transform:translateY(-30px) scale(1.3)}}
@keyframes forge-heat{0%{opacity:0;transform:translateY(20px) scale(.6)}45%{opacity:.8}100%{opacity:0;transform:translateY(-110px) scale(1.6)}}
@keyframes void-rift{0%{opacity:0;transform:translateX(-85px) scaleY(.2)}18%{opacity:.85}80%{opacity:.6}100%{opacity:0;transform:translateX(85px) scaleY(.8)}}
@keyframes void-orbit{0%{opacity:0;transform:scale(.65) rotateX(65deg)}40%{opacity:.7}100%{opacity:0;transform:scale(1.25) rotateX(65deg) rotateZ(80deg)}}

.equip-dialog[data-style=banyan]{background:radial-gradient(ellipse at 50% 58%,#646c3d 0,#343f2c 42%,#182c25 85%)}
.equip-dialog[data-style=emberforged]{background:radial-gradient(ellipse at 50% 60%,#6b3b2a 0,#32272a 42%,#1c2126 85%)}
.equip-dialog[data-style=voidwalker]{background:radial-gradient(ellipse at 50% 58%,#3b3b70 0,#22263f 42%,#141c2d 85%)}