/* shared: bottom navigation + avatars with frames */
.bnav-sp{height:96px}
.bnav{position:fixed;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 12px);bottom:calc(10px + env(safe-area-inset-bottom));z-index:2147483000;display:flex;gap:2px;padding:6px;background:#12101c;border:1px solid #2a2240;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.55);max-width:calc(100vw - 20px)}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;padding:7px 8px 5px;border-radius:999px;color:#a79fc0;text-decoration:none;font:700 10px/1 Manrope,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.bnav a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bnav a.on{background:#14f195;color:#04140d}
html.play .bnav,html.play .bnav-sp,body.nobar .bnav{display:none!important}
.av{--ring:#2a2240;--pad:3px;display:inline-block;flex:none;width:44px;height:44px;border-radius:50%;padding:var(--pad);position:relative}
.av::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ring);z-index:0}
.av img,.av .pa{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#12101c}
.av .pa{display:flex;align-items:center;justify-content:center;font:800 19px/1 Manrope,system-ui,sans-serif;color:#fff}
.av.xl .pa{font-size:44px}.av.sm .pa{font-size:14px}
.av.xl{width:96px;height:96px}.av.sm{width:34px;height:34px}
.av.fr-none{--pad:2px}
.av[class*=" fr-fr_"]{--pad:6px;--bd:16px}.av.sm[class*=" fr-fr_"]{--pad:4px;--bd:12px}.av.xl[class*=" fr-fr_"]{--pad:11px;--bd:34px}.fo .av[class*=" fr-fr_"]{--pad:7px;--bd:18px}
.av[class*=" fr-fr_"] img,.av[class*=" fr-fr_"] .pa{box-shadow:0 0 0 2px #0b0914}
.av[class*=" fr-fr_"]::after{position:absolute;z-index:2;font-size:var(--bd);line-height:1;right:-.3em;top:-.35em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.av.fr-fr_gold::before{background:conic-gradient(from 30deg,#fff6bf,#ffb938,#b87a00,#ffe27a,#fff6bf);box-shadow:0 0 14px rgba(255,185,56,.6)}
.av.fr-fr_gold::after{content:"⭐"}
.av.fr-fr_violet::before{background:conic-gradient(from 0deg,#e9d5ff,#9945ff,#4a14b8,#c084fc,#e9d5ff);box-shadow:0 0 16px rgba(153,69,255,.75);animation:frpulse 2.4s ease-in-out infinite}
.av.fr-fr_violet::after{content:"🔮"}
.av.fr-fr_flame::before{background:conic-gradient(from 0deg,#ffd54a,#ff4d2e,#ffb938,#ff2e63,#ff7a1a,#ffd54a);box-shadow:0 0 18px rgba(255,110,40,.8);animation:frspin 3s linear infinite}
.av.fr-fr_flame::after{content:"🔥"}
.av.fr-fr_rainbow::before{background:conic-gradient(from 0deg,#14f195,#4fd8ff,#9945ff,#ff5fa8,#ffb938,#14f195);box-shadow:0 0 20px rgba(79,216,255,.6);animation:frspin 5s linear infinite}
.av.fr-fr_rainbow::after{content:"👑"}
@keyframes frspin{to{transform:rotate(360deg)}}
@keyframes frpulse{50%{box-shadow:0 0 26px rgba(153,69,255,1)}}
@media (prefers-reduced-motion:reduce){.av::before{animation:none!important}}