/* 3D character avatar (CharacterAvatar.razor) — live model on cards + full "stage" modal. */
.char-av {
    position: relative; cursor: pointer; border-radius: 50%; display: grid; place-items: center;
    overflow: hidden; flex: 0 0 auto;
    background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.07), rgba(0,0,0,.18));
}
.char-av model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.char-av-sm { width: 46px; height: 46px; }
.char-av-md { width: 84px; height: 84px; }
.char-av-lg { width: 150px; height: 150px; }
.char-av-monogram {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; background: radial-gradient(circle at 35% 20%, #625388, #28223d);
    font-size: 1.5rem; font-weight: 700; letter-spacing: .04em;
}
.char-av-sm .char-av-monogram { font-size: .9rem; }
.char-av-lg .char-av-monogram { font-size: 2.5rem; }
/* The light-DOM poster also remains visible if the external viewer script fails. */
.char-av model-viewer:not(:defined) { display: block; position: relative; }
.char-av-ring {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 2px var(--av-glow, #7c5cff), 0 0 14px var(--av-glow, #7c5cff); opacity: .75;
    transition: box-shadow .2s, opacity .2s;
}
.char-av:hover { transform: translateY(-1px); }
.char-av:hover .char-av-ring { opacity: 1; box-shadow: 0 0 0 2px var(--av-glow), 0 0 24px var(--av-glow); }
.char-av-empty { color: var(--av-glow, #7c5cff); box-shadow: inset 0 0 0 2px rgba(124,92,255,.4); font-size: 1.3rem; }

/* The clicked 3D stage */
.char-stage-scrim {
    position: fixed; inset: 0; z-index: 1200; background: rgba(6,8,20,.7);
    backdrop-filter: blur(6px); display: grid; place-items: center; animation: char-fade .2s;
}
.char-stage {
    position: relative; width: min(520px, 92vw); height: min(620px, 86vh); border-radius: 24px; overflow: hidden;
    background: radial-gradient(120% 80% at 50% 0%, #2a2550 0%, #14122a 55%, #0b0a18 100%);
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 90px rgba(0,0,0,.6);
    animation: char-rise .3s cubic-bezier(.2,.9,.3,1.2);
}
.char-stage::after { /* glow pad under the figure */
    content: ""; position: absolute; left: 50%; bottom: 92px; width: 62%; height: 26px; transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(124,92,255,.5), transparent 70%); filter: blur(7px);
}
.char-stage-mv { width: 100%; height: 100%; background: transparent; }
.char-stage-x {
    position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255,255,255,.12); border: none;
    color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
}
.char-stage-x:hover { background: rgba(255,255,255,.22); }
.char-stage-info {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px 20px; text-align: center; color: #fff;
    background: linear-gradient(to top, rgba(8,8,20,.88), transparent);
}
.char-stage-name { font-size: 1.4rem; font-weight: 700; letter-spacing: .4px; }
.char-stage-sub { font-size: .85rem; color: #b9bce0; margin-top: 2px; }
.char-stage-badge {
    display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #fff;
    background: color-mix(in srgb, var(--av-glow, #7c5cff) 30%, transparent);
    box-shadow: 0 0 0 1px var(--av-glow, #7c5cff), 0 0 16px color-mix(in srgb, var(--av-glow, #7c5cff) 50%, transparent);
}
.char-stage-empty { display: grid; place-items: center; height: 100%; color: #8b90bf; gap: 8px; font-size: 3rem; }

@keyframes char-fade { from { opacity: 0; } }
@keyframes char-rise { from { opacity: 0; transform: translateY(20px) scale(.96); } }