@property --sh-prism { syntax: '<color>'; inherits: true; initial-value: #C084FC; }
@property --sh-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sh-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sh-balance { height: 2.75rem; }
.sh-top { margin-top: 0.5rem; }
.sh-card-wrap { --pf-card: rgb(var(--color-voon-card)); }
.sh-card-wrap .pf-card { margin-top: 1rem; }
.sh-card-body { padding-bottom: 1.5rem; }

.sh-nav { position: sticky; top: 0.5rem; z-index: 6; display: flex; gap: 0.5rem; margin-top: 1.5rem; padding: 0.6rem; overflow-x: auto; border-radius: 1rem; border: 1px solid rgb(var(--color-indigo-500) / 0.3); background: rgb(10 4 22 / 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scrollbar-width: thin; }
.sh-nav-link { display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; padding: 0.5rem 0.85rem; border-radius: 0.75rem; font-size: 0.82rem; font-weight: 600; color: rgb(255 255 255 / 0.72); white-space: nowrap; }
.sh-nav-link i { color: #B24BF3; }
.sh-nav-link:hover, .sh-nav-link:focus-visible { background: rgb(178 75 243 / 0.15); color: #fff; }

.sh-section { scroll-margin-top: 5rem; }
.sh-lead { margin: -0.4rem 0 1rem; font-size: 0.85rem; color: rgb(255 255 255 / 0.65); }
.sh-season { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 0.8rem; border: 1px solid rgb(178 75 243 / 0.35); background: rgb(178 75 243 / 0.1); font-size: 0.85rem; color: #fff; }
.sh-season i { color: #C084FC; }
.sh-foot { margin: 1.5rem 0 0; font-size: 0.82rem; color: rgb(255 255 255 / 0.6); }
.sh-foot a, .sh-link { color: rgb(var(--color-indigo-300)); text-decoration: underline; }

.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem; }
.sh-item { scroll-margin-top: 6rem; display: flex; flex-direction: column; min-width: 0; border-radius: 1rem; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.03); overflow: hidden; transition: border-color .15s ease; }
.sh-item:hover { border-color: rgb(178 75 243 / 0.45); }
.sh-item.is-owned { border-color: rgb(178 75 243 / 0.35); }
.sh-item.is-equipped { border-color: #B24BF3; box-shadow: 0 0 0 2px rgb(178 75 243 / 0.25); }
.sh-item:target { border-color: #C084FC; box-shadow: 0 0 0 3px rgb(192 132 252 / 0.35); }
.sh-art { position: relative; display: grid; place-items: center; height: 6.5rem; background: radial-gradient(120% 90% at 50% 0%, rgb(178 75 243 / 0.16), transparent 65%), rgb(10 4 22 / 0.65); border-bottom: 1px solid rgb(255 255 255 / 0.06); overflow: hidden; }
.sh-art-banner { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #07020f; }
.sh-art img { width: 3.5rem; height: 3.5rem; border-radius: 0.7rem; image-rendering: pixelated; }
.sh-art-theme { position: absolute; inset: 0.65rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; padding: 0.7rem; border-radius: 0.8rem; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(var(--color-voon-card)); }
.sh-art-theme span { display: block; height: 0.45rem; width: 55%; border-radius: 99px; background: rgb(255 255 255 / 0.18); }
.sh-art-theme span + span { width: 35%; background: var(--pf-accent); opacity: 0.7; }
.sh-art-title { padding: 0 1rem; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; color: var(--pf-accent); text-align: center; }
.sh-art-accent { display: flex; align-items: center; gap: 0.75rem; width: 70%; }
.sh-art-dot { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pf-accent); box-shadow: 0 0 18px color-mix(in srgb, var(--pf-accent) 60%, transparent); }
.sh-art-bar { flex: 1 1 auto; height: 0.5rem; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--pf-accent) 70%, #fff), var(--pf-accent)); }
.sh-art--upgrade { height: auto; min-height: 6.5rem; padding: 0.85rem 0 0.95rem; }
.sh-art-upgrade { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; line-height: 1; }
.sh-art-upgrade-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-bottom: 0.35rem; border-radius: 0.65rem; border: 1px solid rgb(178 75 243 / 0.35); background: rgb(178 75 243 / 0.16); color: #C084FC; font-size: 0.95rem; }
.sh-art-upgrade-from { font-size: 0.95rem; font-weight: 700; color: rgb(255 255 255 / 0.55); font-variant-numeric: tabular-nums; }
.sh-art-upgrade-arrow { font-size: 0.7rem; color: #B24BF3; }
.sh-art-upgrade-to { font-size: 1.65rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.sh-item-body { display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 auto; padding: 0.85rem 0.95rem 1rem; }
.sh-item-name { margin: 0; font-size: 0.95rem; font-weight: 700; }
.sh-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sh-tags:empty { display: none; }
.sh-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: 99px; font-size: 0.7rem; font-weight: 700; color: #E9D5FF; background: rgb(178 75 243 / 0.14); border: 1px solid rgb(178 75 243 / 0.3); }
.sh-tag--on { color: #fff; background: rgb(178 75 243 / 0.35); border-color: #B24BF3; }
.sh-tag--own { color: rgb(var(--color-indigo-300)); }
.sh-price { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 800; font-size: 1rem; color: #fff; }
.sh-price i { color: #FACC15; font-size: 0.9rem; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; }
.sh-actions form { margin: 0; }
.sh-note { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.75rem; color: rgb(255 255 255 / 0.55); }

.sh-award-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.sh-award-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1rem; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--sh-award) 40%, transparent); background: color-mix(in srgb, var(--sh-award) 8%, transparent); }
.sh-award-tier-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; color: var(--sh-award); background: color-mix(in srgb, var(--sh-award) 18%, rgb(10 4 22 / 0.6)); font-size: 1.1rem; }

.sh-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.sh-award-list { display: contents; list-style: none; margin: 0; padding: 0; }
.sh-award { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700; color: var(--sh-award, #C084FC); background: color-mix(in srgb, var(--sh-award, #C084FC) 14%, rgb(10 4 22 / 0.5)); border: 1px solid color-mix(in srgb, var(--sh-award, #C084FC) 35%, transparent); }
.sh-award span { color: #fff; }
.sh-award.is-mine { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh-award, #C084FC) 50%, transparent); }
.sh-award-give { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.75rem; padding: 0.15rem 0.65rem; border-radius: 99px; font: inherit; font-size: 0.75rem; font-weight: 700; color: #E9D5FF; background: rgb(178 75 243 / 0.12); border: 1px dashed rgb(178 75 243 / 0.5); cursor: pointer; }
.sh-award-give:hover { background: rgb(178 75 243 / 0.25); color: #fff; }
.sh-award-give:focus-visible { outline: 2px solid #C084FC; outline-offset: 2px; }

.sh-modal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 1rem; }
.sh-modal[hidden] { display: none; }
.sh-modal-backdrop { position: absolute; inset: 0; background: rgb(6 2 14 / 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sh-modal-card { position: relative; width: min(25rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem 1.4rem 1.3rem; border-radius: 1.1rem; text-align: center; border: 1px solid rgb(var(--color-indigo-500) / 0.45); background: radial-gradient(120% 80% at 50% 0%, rgb(var(--color-indigo-500) / 0.18), transparent 60%), rgb(var(--color-voon-card)); color: #fff; box-shadow: 0 30px 80px -30px rgb(178 75 243 / 0.55); animation: sh-pop .18s ease; }
.sh-modal-card--wide { width: min(58rem, 100%); padding: 1.25rem; text-align: left; }
.sh-modal-close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.7rem; border: 1px solid rgb(255 255 255 / 0.12); background: rgb(10 4 22 / 0.7); color: rgb(255 255 255 / 0.75); cursor: pointer; }
.sh-modal-close:hover { color: #fff; border-color: rgb(var(--color-indigo-500) / 0.6); }
.sh-modal-close:focus-visible, .sh-modal-ok:focus-visible, .sh-pick-award:focus-visible { outline: 2px solid rgb(var(--color-indigo-300)); outline-offset: 2px; }
.sh-modal-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 999px; background: rgb(var(--color-indigo-500) / 0.18); color: rgb(var(--color-indigo-300)); font-size: 1.15rem; }
.sh-modal-title { margin: 0 0 0.35rem; font-size: 1.15rem; font-weight: 800; padding: 0 1.5rem; }
.sh-modal-text { margin: 0; color: rgb(255 255 255 / 0.8); line-height: 1.5; font-weight: 700; }
.sh-modal-detail { margin: 0.35rem 0 0; color: rgb(255 255 255 / 0.6); font-size: 0.85rem; }
.sh-modal-actions { display: flex; justify-content: center; margin-top: 1.2rem; }
.sh-modal-ok { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 8rem; min-height: 2.75rem; padding: 0.6rem 1.3rem; border-radius: 0.9rem; border: 0; background: #B24BF3; color: #fff; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.sh-modal-ok:hover { filter: brightness(1.1); }
.sh-modal-ok[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }
.sh-modal-error { margin: 0.75rem 0 0; font-size: 0.82rem; color: #E9D5FF; }
.sh-modal-preview .sh-card-wrap .pf-card { margin-top: 0.5rem; }
.sh-modal-note { margin: 0 2.5rem 0 0; font-size: 0.82rem; color: rgb(255 255 255 / 0.65); }
.sh-modal-preview .sh-modal-actions { justify-content: flex-end; }
.sh-pick-list { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; text-align: left; }
.sh-pick-award { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.85rem; border-radius: 0.9rem; border: 1px solid color-mix(in srgb, var(--sh-award) 40%, transparent); background: color-mix(in srgb, var(--sh-award) 8%, rgb(10 4 22 / 0.4)); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.sh-pick-award:hover:not([disabled]) { background: color-mix(in srgb, var(--sh-award) 18%, rgb(10 4 22 / 0.4)); }
.sh-pick-award[disabled] { opacity: 0.5; cursor: not-allowed; }
.sh-pick-award > i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: 0.7rem; color: var(--sh-award); background: color-mix(in srgb, var(--sh-award) 18%, transparent); }
.sh-pick-award strong { display: block; font-size: 0.9rem; }
.sh-pick-award small { display: block; font-size: 0.75rem; color: rgb(255 255 255 / 0.6); }
.sh-pick-award em { margin-left: auto; font-style: normal; font-weight: 800; white-space: nowrap; }
.sh-pick-award em i { color: #FACC15; margin-right: 0.3rem; }
html.sh-modal-open { overflow: hidden; }

.pt-chip-group { display: inline-flex; flex: 0 0 auto; }
.pt-chip-group .pt-chip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pt-chip-shop { display: inline-grid; place-items: center; width: 2.6rem; height: 2.75rem; border-radius: 0 0.85rem 0.85rem 0; border: 1px solid rgb(178 75 243 / 0.35); border-left: 0; background: rgb(178 75 243 / 0.16); color: #E9D5FF; font-size: 0.9rem; }
.pt-chip-shop:hover { background: rgb(178 75 243 / 0.3); color: #fff; }
.pt-chip-shop:focus-visible { outline: 2px solid #B24BF3; outline-offset: 2px; }
.sh-chip { --pf-chip: #FACC15; }
.sh-chip:hover { filter: brightness(1.15); }

.sh-pick { gap: 0.6rem; }
.sh-pick img { width: 2rem; height: 2rem; border-radius: 0.5rem; image-rendering: pixelated; }
.sh-pick-theme { display: inline-block; width: 2.2rem; height: 1.6rem; border-radius: 0.45rem; border: 1px solid rgb(255 255 255 / 0.15); background: rgb(var(--color-voon-card)); }

.sh-frame { box-shadow: 0 0 0 2px var(--sh-f1, #B24BF3), 0 0 0 4px var(--sh-f2, #4c1d95), 0 0 12px 3px var(--sh-glow, rgb(178 75 243 / 0.4)); }
.pf-avatar.sh-framed { isolation: isolate; }
.pf-avatar.sh-framed img { box-shadow: 0 0 18px 4px var(--sh-glow, rgb(178 75 243 / 0.4)); }
.pf-avatar.sh-framed img { z-index: 1; }
.pf-avatar.sh-framed::after { content: ""; position: absolute; inset: -5px; z-index: 2; padding: 4px; border-radius: 1.7rem; background: var(--sh-border, linear-gradient(160deg, #E9D5FF, #B24BF3 45%, #4c1d95)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }

.sh-fr-amethyst { --sh-f1: #C084FC; --sh-f2: #4c1d95; --sh-glow: rgb(178 75 243 / 0.45); --sh-border: linear-gradient(160deg, #F3E8FF, #B24BF3 40%, #4c1d95); }
.sh-fr-void { --sh-f1: #0b0418; --sh-f2: #7C3AED; --sh-glow: rgb(124 58 237 / 0.75); --sh-border: linear-gradient(180deg, #8B5CF6, #0b0418 55%, #6d28d9); }
.sh-fr-runic { --sh-f1: #E9D5FF; --sh-f2: #581c87; --sh-glow: rgb(192 132 252 / 0.4); --sh-border: repeating-conic-gradient(from 0deg, #C084FC 0 9deg, rgb(88 28 135 / 0.6) 9deg 18deg); }
.sh-frame.sh-fr-runic { outline: 2px dashed #C084FC; outline-offset: 3px; box-shadow: 0 0 0 2px #581c87, 0 0 12px 4px rgb(192 132 252 / 0.35); }
.sh-fr-starlit { --sh-f1: #F0ABFC; --sh-f2: #7C3AED; --sh-glow: rgb(240 171 252 / 0.45); --sh-border: linear-gradient(135deg, #FDF4FF, #F0ABFC 30%, #A855F7 65%, #3b0764); }
.sh-fr-gilded { --sh-f1: #FACC15; --sh-f2: #6d28d9; --sh-glow: rgb(250 204 21 / 0.35); --sh-border: linear-gradient(160deg, #FEF08A, #FACC15 30%, #7C3AED 70%, #2e1065); }
.sh-fr-pulse { --sh-f1: #D946EF; --sh-f2: #3b0764; --sh-glow: rgb(217 70 239 / 0.6); --sh-border: linear-gradient(160deg, #F5D0FE, #D946EF 45%, #3b0764); }
.sh-fr-lantern { --sh-f1: #FB923C; --sh-f2: #4c1d95; --sh-glow: rgb(249 115 22 / 0.45); --sh-border: linear-gradient(160deg, #FED7AA, #F97316 40%, #4c1d95); }
.sh-fr-bloodbound { --sh-f1: #F43F5E; --sh-f2: #4c0519; --sh-glow: rgb(225 29 72 / 0.45); --sh-border: linear-gradient(160deg, #FECDD3, #E11D48 40%, #4c0519 80%, #1a0208); }
.sh-fr-rime { --sh-f1: #BAE6FD; --sh-f2: #1e3a8a; --sh-glow: rgb(125 211 252 / 0.4); --sh-border: linear-gradient(160deg, #F0F9FF, #7DD3FC 35%, #1e3a8a 75%, #0b1030); }
.sh-fr-venom { --sh-f1: #34D399; --sh-f2: #064e3b; --sh-glow: rgb(16 185 129 / 0.45); --sh-border: repeating-linear-gradient(45deg, #6EE7B7 0 5px, #064e3b 5px 10px); }
.sh-fr-vortex { --sh-f1: #2DD4BF; --sh-f2: #6d28d9; --sh-glow: rgb(45 212 191 / 0.45); --sh-border: conic-gradient(#5EEAD4, #0e7490 25%, #7C3AED 50%, #1e0b3a 75%, #5EEAD4); }
.sh-frame.sh-fr-pulse { animation: sh-frame-pulse 2.4s ease-in-out infinite; }
.pf-avatar.sh-framed.sh-fr-pulse::after { animation: sh-glow-pulse 2.4s ease-in-out infinite; }
.sh-frame.sh-fr-vortex { animation: sh-vortex-ring 6s linear infinite; }
.pf-avatar.sh-framed.sh-fr-vortex::after { background: conic-gradient(from var(--sh-spin), #5EEAD4, #0e7490 25%, #7C3AED 50%, #1e0b3a 75%, #5EEAD4); animation: sh-spin 6s linear infinite; }

.sh-theme.sh-th-starfield { background: radial-gradient(circle, rgb(255 255 255 / 0.55) 0 1px, transparent 1.6px) 0 0 / 38px 38px, radial-gradient(circle, rgb(192 132 252 / 0.5) 0 1px, transparent 1.6px) 19px 23px / 53px 53px, linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 12%, var(--pf-card, #12082a)) 0%, var(--pf-card, #12082a) 55%); }
.sh-theme.sh-th-grid { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--pf-accent) 14%, transparent) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--pf-accent) 14%, transparent) 0 1px, transparent 1px 32px), linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 10%, var(--pf-card, #12082a)) 0%, var(--pf-card, #12082a) 50%); }
.sh-theme.sh-th-veins { background: repeating-linear-gradient(125deg, transparent 0 34px, color-mix(in srgb, var(--pf-accent) 18%, transparent) 34px 35px, transparent 35px 70px), radial-gradient(60% 50% at 85% 100%, color-mix(in srgb, var(--pf-accent) 25%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 8%, var(--pf-card, #12082a)) 0%, var(--pf-card, #12082a) 60%); }
.sh-theme.sh-th-voidglow { background: radial-gradient(80% 60% at 50% 110%, color-mix(in srgb, var(--pf-accent) 38%, transparent), transparent 70%), radial-gradient(40% 40% at 0% 0%, color-mix(in srgb, var(--pf-accent) 18%, transparent), transparent 70%), #06020d; }
.sh-theme.sh-th-ripples { background: repeating-radial-gradient(circle at 100% 0%, transparent 0 28px, color-mix(in srgb, var(--pf-accent) 15%, transparent) 28px 29px), radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--pf-accent) 22%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 8%, var(--pf-card, #12082a)) 0%, var(--pf-card, #12082a) 60%); }
.pf-card.sh-th-voidglow { border-color: color-mix(in srgb, var(--pf-accent) 60%, transparent); box-shadow: 0 0 60px -10px color-mix(in srgb, var(--pf-accent) 55%, transparent), 0 24px 60px -30px color-mix(in srgb, var(--pf-accent) 70%, transparent); }
.pf-card.sh-th-starfield, .pf-card.sh-th-grid, .pf-card.sh-th-veins, .pf-card.sh-th-ripples { border-color: color-mix(in srgb, var(--pf-accent) 50%, transparent); }

.pf-banner.sh-nc-aurora, .sh-art-banner.sh-nc-aurora, .pf-swatch.sh-nc-aurora { background-size: 300% 100%; animation: sh-aurora 18s ease-in-out infinite alternate; }
.pf-banner.sh-nc-riftstorm, .sh-art-banner.sh-nc-riftstorm, .pf-swatch.sh-nc-riftstorm { background-size: 120px 120px, 160px 160px, 100% 100%, 100% 100%; animation: sh-rift 9s linear infinite; }

.pf-title.sh-t-shimmer, .sh-art-title.sh-t-shimmer { background: linear-gradient(90deg, var(--pf-accent) 0%, #fff 50%, var(--pf-accent) 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sh-shimmer 5s linear infinite; }

.sh-ac-prism { --pf-accent: var(--sh-prism); animation: sh-prism 12s linear infinite; }
.sh-ac-embertide { --sh-prism: #F43F5E; --pf-accent: var(--sh-prism); animation: sh-embertide 10s linear infinite; }

.pf-showcase:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-showcase:has(> li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@keyframes sh-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sh-aurora { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes sh-rift { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 120px 0, -160px 0, 0 0, 0 0; } }
@keyframes sh-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes sh-prism { 0% { --sh-prism: #C084FC; } 33% { --sh-prism: #60A5FA; } 66% { --sh-prism: #F472B6; } 100% { --sh-prism: #C084FC; } }
@keyframes sh-frame-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--sh-f1), 0 0 0 4px var(--sh-f2), 0 0 8px 2px var(--sh-glow); } 50% { box-shadow: 0 0 0 2px var(--sh-f1), 0 0 0 4px var(--sh-f2), 0 0 18px 6px var(--sh-glow); } }
@keyframes sh-glow-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes sh-embertide { 0% { --sh-prism: #F43F5E; } 33% { --sh-prism: #F59E0B; } 66% { --sh-prism: #A855F7; } 100% { --sh-prism: #F43F5E; } }
@keyframes sh-spin { to { --sh-spin: 360deg; } }
@keyframes sh-vortex-ring { 0%, 100% { box-shadow: 0 0 0 2px #2DD4BF, 0 0 0 4px #6d28d9, 0 0 12px 3px rgb(45 212 191 / 0.45); } 50% { box-shadow: 0 0 0 2px #A78BFA, 0 0 0 4px #0e7490, 0 0 12px 3px rgb(124 58 237 / 0.5); } }

@media (max-width: 1023.98px) {
  .pf-showcase:has(> li:nth-child(5)), .pf-showcase:has(> li:nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .pf-avatar.sh-framed::after { border-radius: 1.45rem; }
  .pt-chip-shop { height: 2.5rem; width: 2.3rem; }
  .sh-modal-card--wide { padding: 1rem 0.75rem; }
  .sh-modal-note { margin-right: 2.5rem; }
  .sh-art--upgrade { min-height: 6rem; padding: 0.75rem 0 0.85rem; }
  .sh-art-upgrade-icon { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
  .sh-art-upgrade-to { font-size: 1.5rem; }
}
@media (max-width: 380px) {
  .pt-chip-shop { display: none; }
  .pt-chip-group .pt-chip { border-radius: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-modal-card, .sh-frame.sh-fr-pulse, .pf-avatar.sh-framed.sh-fr-pulse::after, .pf-banner.sh-nc-aurora, .sh-art-banner.sh-nc-aurora, .pf-swatch.sh-nc-aurora, .pf-banner.sh-nc-riftstorm, .sh-art-banner.sh-nc-riftstorm, .pf-swatch.sh-nc-riftstorm, .pf-title.sh-t-shimmer, .sh-art-title.sh-t-shimmer, .sh-ac-prism, .sh-ac-embertide, .sh-frame.sh-fr-vortex, .pf-avatar.sh-framed.sh-fr-vortex::after { animation: none; }
  .sh-item { transition: none; }
}