.creator-bio{grid-template-columns:280px minmax(0,1fr)}
.avatar-arena{--arena-ink:#eee9df;--arena-bg:#111014;--arena-line:#ffffff24;--aim-x:50%;--aim-y:50%;width:280px;max-width:100%;padding:14px;border:1px solid var(--arena-line);border-radius:20px;background:var(--arena-bg);color:var(--arena-ink);box-shadow:0 14px 40px #0002;isolation:isolate}
.arena-heading,.arena-hud{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 10px/1.5 ui-monospace,monospace;letter-spacing:.08em}
.arena-indicator{color:#db757b;font-size:9px}.arena-heading{margin-bottom:12px}
.avatar-arena .arena-stage{position:relative;display:block;width:100%;height:282px;padding:0;overflow:hidden;isolation:isolate;border:1px solid var(--arena-line);border-radius:14px;background:radial-gradient(ellipse at 50% 80%,#6c2538 0%,#20161e 45%,#0a0a0d 85%);cursor:crosshair;perspective:700px;touch-action:pan-y;color:#fff}
.arena-grid{position:absolute;inset:45% -50% -40%;background-image:linear-gradient(#df526e35 1px,transparent 1px),linear-gradient(90deg,#df526e35 1px,transparent 1px);background-size:25px 25px;transform:rotateX(60deg);mask-image:linear-gradient(transparent,#000)}
.arena-orbit{position:absolute;inset:16% 7% 10%;border:1px solid #eb889551;border-radius:50%;box-shadow:0 0 25px #cd315327,inset 0 0 25px #cd315315;transform:rotate(-25deg) scaleY(.72)}
.arena-character{position:absolute;left:12%;top:11%;width:76%;height:78%;border-radius:26px;overflow:hidden;box-shadow:0 12px 30px #0008;transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .4s,scale .45s,filter .4s;pointer-events:none;will-change:transform}
.arena-character img{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.arena-horse img{background:#929292}.arena-horse{opacity:0;scale:.72;filter:blur(5px)}
[data-active="horse"] .arena-horse{opacity:1;scale:1;filter:none}
[data-active="horse"] .arena-panda{opacity:0;scale:.72;filter:blur(5px)}
.arena-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arena-crosshair{position:absolute;left:var(--aim-x);top:var(--aim-y);width:24px;height:24px;margin:-12px;border:1px solid #f2b3b8;border-radius:50%;box-shadow:0 0 12px #ff405a80;opacity:0;pointer-events:none;transition:opacity .2s}
.arena-crosshair:after{content:'+';position:absolute;inset:0;display:grid;place-items:center;font:14px monospace;color:#fff}.is-aiming .arena-crosshair{opacity:1}
.arena-flare{position:absolute;inset:0;pointer-events:none;border:2px solid #ee7180;border-radius:14px;opacity:0}.is-burst .arena-flare{animation:arena-wave .65s ease-out}
.arena-combo{position:absolute;bottom:19px;inset-inline:0;text-align:center;font:800 21px/1 ui-monospace,monospace;letter-spacing:.1em;color:#ffe8d3;text-shadow:0 0 20px #ef3a58;opacity:0;transform:translateY(12px);transition:.35s;pointer-events:none}
.is-duo .arena-combo{opacity:1;transform:none}.is-duo .arena-character{opacity:1;filter:none;scale:.7}.is-duo .arena-panda{left:-9%;rotate:-10deg}.is-duo .arena-horse{left:34%;rotate:10deg}
.arena-hud{margin-top:12px;letter-spacing:0;font-size:11px}.avatar-arena .arena-motion{width:28px;height:28px;padding:0;border:1px solid var(--arena-line);border-radius:50%;background:transparent;color:var(--arena-ink);cursor:pointer}
.arena-energy{height:3px;background:var(--arena-line);margin-top:9px;overflow:hidden;border-radius:4px}.arena-energy>span{display:block;width:var(--charge,0%);height:100%;background:linear-gradient(90deg,#a92b44,#f29c8c);transition:width .25s}
.avatar-arena .arena-hint{margin:10px 0 0;font-size:11px;line-height:1.6;color:#b3a8aa;text-align:center}
.arena-stage:focus-visible,.arena-motion:focus-visible{outline:2px solid #d84b62;outline-offset:4px}
html[data-theme="light"] .avatar-arena{--arena-ink:#30272a;--arena-bg:#fffaf7;--arena-line:#46202e25}html[data-theme="light"] .avatar-arena .arena-hint{color:#75666b}
.arena-paused .arena-character{transform:none!important;transition:none;will-change:auto}.arena-paused .arena-crosshair,.arena-paused .arena-particles,.arena-paused .arena-flare{display:none}
@keyframes arena-wave{0%{opacity:.85;box-shadow:inset 0 0 32px #ce305864}100%{opacity:0;box-shadow:inset 0 0 0 transparent}}
.arena-supernova{position:absolute;inset:0;pointer-events:none;opacity:0;overflow:hidden;background:radial-gradient(ellipse at center,#f4546538,transparent 70%)}
.arena-supernova i{position:absolute;width:190px;height:190px;left:calc(50% - 95px);top:calc(50% - 95px);border:3px solid #ffbb9c;border-radius:50%;box-shadow:0 0 22px #fa647f,inset 0 0 16px #ef345780}
.arena-supernova i:nth-child(2){border-style:dashed;border-color:#ed657e}.arena-supernova i:nth-child(3){border-width:1px;border-color:#ffe6c0}
.arena-supernova b{position:absolute;inset-inline:0;bottom:48px;text-align:center;color:#ffe6c0;font:900 22px/1.2 ui-monospace,monospace;text-shadow:0 3px 10px #a30034;letter-spacing:.06em}
.is-powered .arena-supernova{opacity:1;animation:arena-supernova-fade 3.2s both}
.is-powered .arena-supernova i{animation:arena-shockwave 1.5s cubic-bezier(.16,1,.3,1) both}
.is-powered .arena-supernova i:nth-child(2){animation-delay:.18s}.is-powered .arena-supernova i:nth-child(3){animation-delay:.36s}
.is-powered .arena-stage{box-shadow:0 0 28px #d7314955;animation:arena-impact .5s ease-out}
.is-powered .arena-combo{bottom:20px;font-size:13px;letter-spacing:.3em}
.is-charging .arena-orbit{border-color:#ffb4a4;box-shadow:0 0 45px #f2386d85,inset 0 0 30px #e9215650;transition:.55s;transform:rotate(35deg) scale(.8)}
.arena-paused .arena-supernova{display:none}
@keyframes arena-shockwave{0%{transform:scale(.12) rotate(0);opacity:0}15%{opacity:1}100%{transform:scale(2.3) rotate(110deg);opacity:0}}
@keyframes arena-supernova-fade{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}
@keyframes arena-impact{0%,100%{transform:none}20%{transform:translateY(3px)}40%{transform:translateY(-2px)}60%{transform:translateY(1px)}}
@media(max-width:900px){.creator-bio{grid-template-columns:1fr}.creator-identity{justify-self:center}}
@media(prefers-reduced-motion:reduce){.avatar-arena *{animation:none!important;transition:none!important}.arena-character{will-change:auto}}
/* Compact portrait: keep the reference layout, reveal effects only on interaction. */
.creator-bio{grid-template-columns:220px minmax(0,1fr)}
.avatar-arena{width:220px;padding:0;border:0;border-radius:16px;background:transparent!important;box-shadow:none}
.arena-heading,.arena-hud,.arena-energy,.avatar-arena .arena-hint{display:none}
.avatar-arena .arena-stage{height:192px;border:0;border-radius:16px;background:#000}
.arena-character{left:0;top:0;width:100%;height:100%;border-radius:16px;box-shadow:none}
.arena-grid,.arena-orbit{opacity:0;transition:opacity .3s}
.is-aiming .arena-grid,.is-aiming .arena-orbit,.is-duo .arena-grid,.is-powered .arena-orbit{opacity:1}
.is-duo .arena-panda{left:-24%}.is-duo .arena-horse{left:24%}
.arena-supernova b{bottom:32px;font-size:20px}.arena-combo{font-size:14px;bottom:10px}
.creator-identity{gap:10px;align-self:start}
@media(max-width:760px){.creator-bio{grid-template-columns:1fr}.creator-identity{justify-self:center}}