/* Avatar decorations — sit around .p-ava / .ava-blank */
.ava-deco{position:relative;display:inline-grid;place-items:center;width:112px;height:112px;margin:0 auto 10px;overflow:visible}
.ava-deco .p-ava,.ava-deco .ava-blank{width:72px;height:72px;font-size:28px;margin:0 !important;z-index:1;position:relative}
.ava-deco .deco-layer{position:absolute;inset:0;pointer-events:none;z-index:2}
.ava-deco .deco-layer svg{width:100%;height:100%;display:block;overflow:visible}
/* picker tiles */
.deco-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin:8px 0 16px}
.deco-pick{appearance:none;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:8px 6px 10px;cursor:pointer;color:inherit;text-align:center}
.deco-pick.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.deco-pick[disabled]{opacity:.4;cursor:not-allowed}
.deco-pick .ava-deco{width:72px;height:72px;margin:0 auto 6px}
.deco-pick .ava-deco .p-ava,.deco-pick .ava-blank{width:48px;height:48px;font-size:18px}
.deco-pick small{display:block;font-size:11px;color:var(--muted)}
.deco-pick .tier{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* pixel */
.deco-pixel .px{fill:#f4f4f5}
.deco-pixel .px.a,.deco-pixel .px.c{fill:var(--accent,#e11d2e)}
.deco-pixel .px-frame{animation:px-crawl 2.8s steps(4) infinite}
@keyframes px-crawl{0%{opacity:1}50%{opacity:.65}100%{opacity:1}}

/* halo */
.deco-halo .halo-ring{stroke:#fff;stroke-width:1.4;fill:none;opacity:.85}
.deco-halo .halo-soft{stroke:rgba(255,255,255,.35);stroke-width:6;fill:none;filter:blur(1px);animation:halo-pulse 3.2s ease-in-out infinite}
.deco-halo .halo-rays{opacity:.55;transform-origin:50px 50px;animation:halo-spin 12s linear infinite}
@keyframes halo-pulse{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes halo-spin{to{transform:rotate(360deg)}}

/* orbit */
.deco-orbit .orbit-spin{transform-origin:50px 50px;animation:orbit 6.5s linear infinite}
.deco-orbit .star{filter:drop-shadow(0 0 2px #fff)}
@keyframes orbit{to{transform:rotate(360deg)}}

/* flame at the base */
.flame-base{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:70%;height:28%;display:flex;align-items:flex-end;justify-content:center;gap:3px;z-index:2}
.flame-base i{display:block;width:8px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#fff 0%,#e11d2e 55%,#7a0c16 100%);transform-origin:bottom center;animation:flicker 0.7s ease-in-out infinite alternate;height:80%}
.flame-base i:nth-child(2){height:100%;animation-duration:.55s;width:10px}
.flame-base i:nth-child(3){height:120%;animation-duration:.8s;width:12px}
.flame-base i:nth-child(4){height:95%;animation-duration:.6s}
.flame-base i:nth-child(5){height:70%;animation-duration:.9s}
@keyframes flicker{from{transform:scaleY(.85) scaleX(1);filter:brightness(1)}to{transform:scaleY(1.1) scaleX(.9);filter:brightness(1.2)}}

/* glitch */
.deco-glitch .g-r{fill:none;stroke:#e11d2e;stroke-width:2;animation:g-shift 2.4s steps(2) infinite}
.deco-glitch .g-c{fill:none;stroke:#fff;stroke-width:1.2;opacity:.7}
.deco-glitch .g-b{fill:none;stroke:#3b82f6;stroke-width:2;animation:g-shift 2.4s steps(2) infinite reverse}
@keyframes g-shift{0%{transform:translate(0,0)}25%{transform:translate(1.5px,-1px)}50%{transform:translate(-1.5px,1px)}100%{transform:translate(0,0)}}

/* spark */
.sparks{position:absolute;inset:0}
.sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;opacity:0;animation:spark 2.2s ease-in-out infinite}
.sparks i:nth-child(1){top:6%;left:48%}
.sparks i:nth-child(2){top:18%;left:82%;animation-delay:.3s}
.sparks i:nth-child(3){top:50%;left:94%;animation-delay:.6s}
.sparks i:nth-child(4){top:82%;left:80%;animation-delay:.9s}
.sparks i:nth-child(5){top:90%;left:48%;animation-delay:1.1s}
.sparks i:nth-child(6){top:80%;left:16%;animation-delay:.4s}
.sparks i:nth-child(7){top:48%;left:4%;animation-delay:.7s}
.sparks i:nth-child(8){top:16%;left:14%;animation-delay:1.3s}
@keyframes spark{0%,20%,100%{opacity:0;transform:scale(.4)}40%,55%{opacity:1;transform:scale(1)}}

/* snow crown */
.deco-snow-crown .crown{filter:drop-shadow(0 1px 0 #8b919e)}
.deco-snow-crown .crown-sparkle{animation:spark 2.8s ease-in-out infinite}

/* frost */
.deco-frost .frost-ring{fill:none;stroke:#d9e3ee;stroke-width:2.2;opacity:.9;animation:frost-shimmer 3.6s ease-in-out infinite}
.deco-frost .frost-crystals{opacity:.85}
@keyframes frost-shimmer{0%,100%{opacity:.55}50%{opacity:1}}

/* icicles */
.deco-icicles .d1,.deco-icicles .d2,.deco-icicles .d3{transform-box:fill-box;transform-origin:top center}
.deco-icicles .d2{animation:drip 3.4s ease-in-out infinite}
.deco-icicles .d1{animation:drip 2.8s ease-in-out .4s infinite}
.deco-icicles .d3{animation:drip 3.1s ease-in-out .8s infinite}
@keyframes drip{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}

@media (prefers-reduced-motion: reduce){
  .ava-deco *{animation:none !important}
}