/* Effect art is isolated from content and does not intercept interaction. */
.sakura-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.profile-banner:has(.sakura-canvas)::before,.profile-banner:has(.sakura-canvas)::after,
.detail-banner:has(.sakura-canvas)::before,.studio-banner:has(.sakura-canvas)::before,
.studio-banner:has(.sakura-canvas)::after{content:none}
.profile-banner:has(.sakura-canvas),.detail-banner:has(.sakura-canvas),.studio-banner:has(.sakura-canvas){background:radial-gradient(circle at 78% 40%,#6d294e 0,#292046 47%,#10172d 100%)}
.detail-banner:has(.sakura-canvas){background:radial-gradient(circle at 78% 46%,#793355 0,#3b2449 43%,#11192f 100%)}
.avatar[class*="flame-"]:not(.flame-none){position:relative;isolation:isolate}
.avatar[class*="flame-"]:not(.flame-none)::before{content:'';position:absolute;inset:-12%;border-radius:50%;filter:blur(7px);z-index:-1;pointer-events:none;background:radial-gradient(circle,transparent 54%,var(--flame-tip) 72%,transparent 79%);opacity:.72}
.avatar.flame-ember{--flame-tip:#ff873f}.avatar.flame-violet{--flame-tip:#b56bff}.avatar.flame-azure{--flame-tip:#36ceff}.avatar.flame-lime{--flame-tip:#b4f548}.avatar.flame-rose{--flame-tip:#ff75ae}
.avatar.has-webgl-flame::before{opacity:.4}
.flame-canvas{position:absolute;width:185%;height:185%;max-width:none;left:-42.5%;top:-42.5%;z-index:4;pointer-events:none}
.avatar .avatar-face,.avatar .discord-avatar{position:relative;z-index:2}
.detail-avatar,.studio-preview>.avatar{position:relative;display:block}
.studio-preview,.studio-controls{align-self:start}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.set-card{min-height:106px;border:1px solid #38415b;border-radius:10px;padding:9px;text-align:center;color:#f4edff;background:linear-gradient(125deg,#29223d,#1b253c);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .2s,border-color .2s,box-shadow .2s}
.set-card:hover{transform:translateY(-2px);border-color:#b99aff}.set-card.active{border-color:#d1adff;box-shadow:inset 0 0 0 1px #d1adff,0 0 18px #b56bff35}
.set-card .set-art{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:22px;color:var(--set-ink);background:var(--set-bg);box-shadow:0 0 18px var(--set-glow)}
.set-card strong{font-size:11px}.set-card small{font-size:9px;color:#b9c3d7;line-height:1.25}
.set-sakura{--set-ink:#ffb7d6;--set-bg:#572844;--set-glow:#ff77b4}.set-inferno{--set-ink:#ffab51;--set-bg:#532b26;--set-glow:#ff6a30}.set-ion{--set-ink:#69e6ff;--set-bg:#143d5e;--set-glow:#39d8ff}.set-wisp{--set-ink:#c494ff;--set-bg:#372359;--set-glow:#9d5aff}
.studio-controls p.set-hint{margin:8px 0 14px;color:#8fa3c3;font-size:10px}
.flame-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.flame-choice{min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#1c2438;border:1px solid #34405c;border-radius:9px;color:#d6def0;font-size:10px;font-weight:700;cursor:pointer}
.flame-choice:hover{border-color:var(--flame-tip,#9c80d6)}.flame-choice.active{border-color:var(--flame-tip,#b58bff);box-shadow:inset 0 0 0 1px var(--flame-tip,#b58bff),0 0 14px color-mix(in srgb,var(--flame-tip,#b58bff),transparent 75%)}
.flame-choice i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#182035 45%,var(--flame-tip,#556078) 54%,transparent 76%);box-shadow:0 0 9px var(--flame-tip,#556078)}
.flame-choice.flame-none i{box-shadow:none;background:#182035;border:1px solid #68748e}
.studio-controls .control-label{margin-top:20px}
@media(max-width:520px){.set-card{min-height:80px}.flame-grid{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.set-card{transition:none}.set-card:hover{transform:none}}
/* Avatar decorations: 1.2 x the avatar. The wrapper has no z-index, so its back layer sits under the avatar image and its front layer over it. */
.deco{position:absolute;inset:-10%;pointer-events:none}
.deco>.deco-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;object-fit:contain;box-shadow:none;pointer-events:none;user-select:none}
.deco>.deco-back{z-index:1}.deco>.deco-front{z-index:5}
.deco>.deco-layer.is-waiting{visibility:hidden}
.pulse-dots .deco{display:none}
.deco-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.deco-choice{min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#1c2438;border:1px solid #34405c;border-radius:9px;color:#d6def0;font-size:10px;font-weight:700;cursor:pointer}
.deco-choice:hover{border-color:#b99aff}.deco-choice.active{border-color:#d1adff;box-shadow:inset 0 0 0 1px #d1adff,0 0 14px #b56bff40}
.deco-choice .avatar{width:34px;height:34px}
.shop-art .shop-preview-avatar.is-deco{width:76px;height:76px;border:0;box-shadow:none;overflow:visible}
.shop-art .shop-preview-avatar.is-deco>.shop-preview-face{width:100%;height:100%;border:0;box-shadow:none}
.shop-art .shop-preview-avatar.is-deco>.deco{position:absolute;inset:-10%;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;display:block}
.shop-art.art-ember-crown{--shop-color:#ff7a35}.shop-art.art-sakura-wreath{--shop-color:#ff91bd}
.shop-art:has(.is-deco){overflow:visible}
/* Effect sets: banner scenes and the background under the banner. Canvases never take input. */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.profile-banner:has(.fx-canvas)::before,.profile-banner:has(.fx-canvas)::after,.detail-banner:has(.fx-canvas)::before,.detail-banner:has(.fx-canvas)::after,.studio-banner:has(.fx-canvas)::before,.studio-banner:has(.fx-canvas)::after{content:none}
:is(.profile-banner,.detail-banner,.studio-banner):has(.fx-canvas[data-fx="arcane"]){background:radial-gradient(circle at 76% 52%,#3b2a7a 0,#1d1846 45%,#0b0f24 100%)}
:is(.profile-banner,.detail-banner,.studio-banner):has(.fx-canvas[data-fx="shadow"]){background:radial-gradient(circle at 74% 48%,#3a1f5e 0,#170d2b 42%,#06050c 100%)}
:is(.profile-banner,.detail-banner,.studio-banner):has(.fx-canvas[data-fx="stardust"]){background:linear-gradient(160deg,#0a0f2c,#1d1d52 55%,#3b2766)}
:is(.profile-banner,.detail-banner,.studio-banner):has(.fx-canvas[data-fx="mist"]){background:linear-gradient(180deg,#1a2240,#3a4870 60%,#5d6c94)}
:is(.profile-banner,.detail-banner,.studio-banner):has(.fx-canvas[data-fx="neon-city"]){background:linear-gradient(180deg,#07040f,#1a0a33 52%,#3b0d4c)}
/* Background: fills the profile behind everything; the opaque banner covers its top, so it shows from the banner edge down.
   No containment or filters on the head: the phone action bar inside it is position:fixed. */
.pp.has-fx-bg{position:relative;isolation:isolate}
.pp>.fx-background{z-index:0}
.pp.has-fx-bg>:not(.fx-background){position:relative;z-index:1}
.pp.has-fx-bg>.pp-head{z-index:3}
.pp.has-fx-bg .pp-identity{background:color-mix(in srgb,var(--white) 78%,transparent)}
.pp.has-fx-bg .pp-module{background:color-mix(in srgb,#11172a 84%,transparent);backdrop-filter:blur(6px)}
.pp.has-fx-bg:has(.fx-background[data-fx="arcane"]){background:linear-gradient(180deg,#0e1030,#0c0f22)}
.pp.has-fx-bg:has(.fx-background[data-fx="shadow"]){background:linear-gradient(180deg,#0d0818,#07060d)}
.pp.has-fx-bg:has(.fx-background[data-fx="stardust"]){background:linear-gradient(180deg,#0b1030,#0a0d1f)}
.pp.has-fx-bg:has(.fx-background[data-fx="mist"]){background:linear-gradient(180deg,#151c33,#0e1324)}
.pp.has-fx-bg:has(.fx-background[data-fx="pixel-night"]){background:linear-gradient(180deg,#0c0f2e,#18183f)}
/* Studio: the avatar hangs 47 px under the banner, the background starts right at the banner edge. */
.studio-content.has-fx-bg{position:relative;isolation:isolate}
.studio-content>.fx-background{top:-47px;height:auto;bottom:0;z-index:-1}
.studio-preview:has(.fx-background[data-fx="arcane"]){background:#0e1030}.studio-preview:has(.fx-background[data-fx="shadow"]){background:#0b0714}
.studio-preview:has(.fx-background[data-fx="stardust"]){background:#0b1030}.studio-preview:has(.fx-background[data-fx="mist"]){background:#141b31}.studio-preview:has(.fx-background[data-fx="pixel-night"]){background:#0f1234}
.set-arcane{--set-ink:#8fe6ff;--set-bg:#272257;--set-glow:#8a6bff}.set-shadow{--set-ink:#d6a6ff;--set-bg:#140b22;--set-glow:#7a3dff}
.set-stardust{--set-ink:#ffe2a0;--set-bg:#1b1d4a;--set-glow:#ffd27a}.set-mist{--set-ink:#d9e6ff;--set-bg:#2c3757;--set-glow:#9fb7e6}
/* Shop previews of the scenes play while the pointer rests on the card. */
.shop-art.has-scene{position:relative;padding:0}
.shop-art.has-scene>.shop-scene{position:absolute;inset:0;display:block;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:var(--scene-bg,#10142a)}
.shop-art.has-scene .shop-preview-avatar{position:absolute;left:16px;bottom:10px;z-index:2}
.shop-art.art-arcane{--shop-color:#8a6bff;--scene-bg:radial-gradient(circle at 76% 52%,#3b2a7a 0,#1d1846 45%,#0b0f24 100%)}
.shop-art.art-shadow{--shop-color:#7a3dff;--scene-bg:radial-gradient(circle at 74% 48%,#3a1f5e 0,#170d2b 42%,#06050c 100%)}
.shop-art.art-stardust{--shop-color:#ffd27a;--scene-bg:linear-gradient(160deg,#0a0f2c,#1d1d52 55%,#3b2766)}
.shop-art.art-mist{--shop-color:#9fb7e6;--scene-bg:linear-gradient(180deg,#1a2240,#3a4870 60%,#5d6c94)}
.shop-art.art-neon-city{--shop-color:#ff3fb4;--scene-bg:linear-gradient(180deg,#07040f,#1a0a33 52%,#3b0d4c)}.shop-art.art-pixel-night{--shop-color:#7cf0ff;--scene-bg:linear-gradient(180deg,#0c0f2e,#18183f)}
.shop-art.art-cyber-hud{--shop-color:#3ff2ff}.shop-art.art-volt-ring{--shop-color:#7fb6ff}
.shop-art.art-arcane-sigil{--shop-color:#8a6bff}.shop-art.art-shadow-veil{--shop-color:#7a3dff}.shop-art.art-stardust-halo{--shop-color:#ffd27a}.shop-art.art-mist-wreath{--shop-color:#9fb7e6}
.shop-group.group-sets .shop-items{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-item.is-set .shop-art{height:150px}
.shop-set-note{color:var(--muted);font-size:12px;margin:-4px 0 10px}
.shop-set-parts{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.shop-set-parts i{font-style:normal;font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid #39456a;color:#c9d3ea}
.shop-save{color:#c8ff59;font-weight:800;font-size:11px;margin-left:6px}
.shop-rarity.is-free{color:#c8ff59}
@media(max-width:620px){.shop-group.group-sets .shop-items{grid-template-columns:1fr}}