.spell { transition:opacity .16s ease, transform .16s ease, border-color .16s ease; }
.spell.active-pair { opacity:1; transform:translateY(-1px); border-color:color-mix(in srgb,var(--element) 65%,transparent); }
.spell.inactive-pair { opacity:.34; transform:scale(.985); }
.loadout-pill { position:absolute; left:50%; bottom:1.15rem; transform:translateX(-50%); display:flex; align-items:center; gap:.62rem; min-width:176px; padding:.48rem .8rem; border:1px solid #ffffff2b; border-radius:999px; background:#080914d9; box-shadow:0 8px 28px #0008; pointer-events:none; }
.loadout-pill .wheel-icon { display:grid; place-items:center; width:30px; height:30px; border:1px solid #8b82b8; border-radius:99px; color:#dcd3ff; font-size:1.05rem; }
.loadout-pill span:last-child { display:grid; line-height:1.1; }.loadout-pill small{color:#9f9aaf;font-size:.52rem;letter-spacing:.13em}.loadout-pill strong{margin-top:.2rem;color:#f3efff;font-size:.72rem}
.loadout-pill.switching { animation:loadoutPulse .24s ease; }
.wheel-help { position:absolute; right:1rem; bottom:1rem; display:grid; justify-items:end; gap:.15rem; color:#aaa5b7; font-size:.6rem; text-shadow:0 1px 2px #000; pointer-events:none; }
@keyframes loadoutPulse { 50% { transform:translateX(-50%) scale(1.08); border-color:#c8b8ff; box-shadow:0 0 24px #8b68d766; } }
@media(max-width:700px){.loadout-pill{bottom:.55rem}.wheel-help{display:none}}