/* Client avatar, levels, and power-up scenes (from draft PR #47, avatar/levels/power-up only). */
:root {
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
}
.app.has-avatar,
.app:has(#avatarPanel) {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-rows: auto 1fr;
}
.app.has-avatar > .top,
.app:has(#avatarPanel) > .top {
  grid-column: 1 / -1;
}
.app.has-avatar > .shell,
.app:has(#avatarPanel) > .shell {
  grid-column: 1;
  grid-row: 2;
}
.avatar-panel {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 16px;
  align-self: start;
  z-index: 7;
  margin: 16px 16px 16px 0;
  padding: 14px 12px 16px;
  background: #101010;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.avatar-stage {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 10px;
}
.avatar-figure {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 16px;
  background: #0A0A0A;
  object-fit: contain;
  transform-origin: 50% 91.8%;
}
.avatar-figure.is-pulse {
  animation: avatar-squash 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-hero-kicker {
  margin: 0 0 4px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.avatar-name {
  margin: 6px 0 0;
  text-align: center;
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #F7931A;
}
.avatar-level-name {
  margin: 0 0 2px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.avatar-level {
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
}
.level-badge {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.level-badge img {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
}
.level-badge-num {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.xp-bar {
  position: relative;
  width: 100%;
  height: 18px;
  margin: 0 0 8px;
  overflow: hidden;
}
.xp-bar-frame,
.xp-bar-fill {
  display: block;
  width: 100%;
  height: 18px;
}
.xp-bar-fill-clip {
  position: absolute;
  left: 1.875%;
  top: 25%;
  width: 0;
  height: 50%;
  overflow: hidden;
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.xp-bar-fill-clip .xp-bar-fill {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: fill;
}
.avatar-next-goal {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.avatar-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.avatar-badges li {
  width: 28px;
  height: 28px;
}
.avatar-badges img {
  display: block;
  width: 28px;
  height: 28px;
}
.avatar-badges .is-earned img {
  filter: drop-shadow(0 0 4px var(--orange));
}
.avatar-panel[data-named-level="1"] .avatar-figure,
.avatar-panel[data-named-level="2"] .avatar-figure {
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.35);
}
.avatar-panel[data-named-level="3"] .avatar-figure,
.avatar-panel[data-named-level="4"] .avatar-figure,
.avatar-panel[data-named-level="5"] .avatar-figure {
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.4);
}
.avatar-topics-kicker {
  margin: 0 0 6px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.avatar-topics {
  list-style: none;
  margin: 0;
  padding: 0;
}
.avatar-topics li {
  color: var(--white);
  font-size: 13px;
  margin: 0 0 4px;
}
.avatar-panel.is-powering .avatar-figure {
  box-shadow: 0 0 22px var(--orange);
}
.powerup-on-avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 16px;
  z-index: 20;
  --powerup-ms: 1200ms;
  pointer-events: none;
}
.powerup-on-avatar[data-tier="small"] { --powerup-ms: 1200ms; }
.powerup-on-avatar[data-tier="medium"] { --powerup-ms: 2000ms; }
.powerup-on-avatar[data-tier="large"] { --powerup-ms: 3200ms; }
.powerup-on-avatar .powerup-scene {
  width: 100%;
  height: 100%;
}
.powerup-on-avatar .powerup-badge {
  bottom: 6%;
  font-size: 12px;
}
.powerup-on-avatar .powerup-skip {
  position: absolute;
  right: 4px;
  top: 4px;
  pointer-events: auto;
  padding: 4px 8px;
  font-size: 11px;
}
.game-progress {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.powerup-new-topic {
  margin: 0 0 10px;
  color: var(--btn);
  font-size: 13px;
  font-weight: 700;
}
.powerup-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(0, 0, 0, 0.85);
}
.powerup-overlay.powerup-scrim-medium {
  background: rgba(0, 0, 0, 0.4);
}
.powerup-overlay.powerup-scrim-large,
.powerup-overlay.powerup-scrim-small {
  background: rgba(0, 0, 0, 0.85);
}
.powerup-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.powerup-scene {
  position: relative;
  width: min(320px, 86vw);
  height: min(320px, 86vw);
  display: flex;
  align-items: center;
  justify-content: center;
  --powerup-ms: 1200ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}
.powerup-scene[data-tier="small"] {
  --powerup-ms: 1200ms;
}
.powerup-scene[data-tier="medium"] {
  --powerup-ms: 2000ms;
  width: min(560px, 86vw);
  height: min(560px, 86vw);
}
.powerup-scene[data-tier="large"] {
  --powerup-ms: 3200ms;
  width: min(1920px, 100vw);
  height: min(1080px, 100vh);
}
.pu-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
}
.powerup-scene[data-tier="large"] .pu-layer {
  object-fit: cover;
}
.pu-large-bulb,
.pu-large-flare,
.pu-large-bulbglow {
  transform-origin: 50% 44.4%;
}
.pu-static { opacity: 1; }
.pu-small-glow { animation: pu-small-glow 1200ms var(--ease-out) both; }
.pu-small-ring { animation: pu-small-ring 1200ms var(--ease-pop) both; }
.pu-small-particles { animation: pu-small-particles 1200ms var(--ease-out) both; }
.pu-small-icon { animation: pu-small-icon 1200ms var(--ease-pop) both; }
.pu-medium-glow { animation: pu-medium-glow 2000ms var(--ease-out) both; }
.pu-medium-burst { animation: pu-medium-burst 2000ms linear both; }
.pu-medium-ring { animation: pu-medium-ring 2000ms var(--ease-pop) both; }
.pu-medium-particles { animation: pu-medium-particles 2000ms var(--ease-out) both; }
.pu-medium-icon { animation: pu-medium-icon 2000ms var(--ease-pop) both; }
.pu-large-glow { animation: pu-large-glow 3200ms var(--ease-out) both; }
.pu-large-rays { animation: pu-large-rays 3200ms linear both; }
.pu-large-ring { animation: pu-large-ring 3200ms var(--ease-out) both; }
.pu-large-particles { animation: pu-large-particles 3200ms var(--ease-out) both; }
.pu-large-bulbglow { animation: pu-large-bulbglow 3200ms var(--ease-pop) both; }
.pu-large-petals { animation: pu-large-petals 3200ms var(--ease-pop) both; }
.pu-large-bulb { animation: pu-large-bulb 3200ms var(--ease-pop) both; }
.pu-large-flare { animation: pu-large-flare 3200ms var(--ease-out) both; }
.powerup-badge {
  position: absolute;
  bottom: 18%;
  margin: 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.powerup-skip {
  color: var(--bg);
  background: var(--btn);
  border: 0;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.powerup-overlay.is-static .pu-layer,
.powerup-on-avatar.is-static .pu-layer {
  animation: none;
  opacity: 1;
}
.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.levelup-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.levelup-scene {
  position: relative;
  width: min(1920px, 100vw);
  height: min(1080px, 100vh);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}
.levelup-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
}
.levelup-static { opacity: 1; }
.levelup-glow { animation: lu-glow 3000ms var(--ease-out) both; }
.levelup-rays { animation: lu-rays 3000ms linear both; }
.levelup-ring { animation: lu-ring 3000ms var(--ease-pop) both; }
.levelup-particles { animation: lu-particles 3000ms var(--ease-out) both; }
.levelup-title { animation: lu-title 3000ms var(--ease-out) both; }
.levelup-avatars {
  position: absolute;
  left: 30%;
  top: 18.52%;
  width: 40%;
  height: 71.11%;
}
.levelup-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 91.8%;
}
.levelup-avatar-old { animation: lu-avatar-old 3000ms linear both; }
.levelup-avatar-new { animation: lu-avatar-new 3000ms var(--ease-pop) both; }
.levelup-overlay.is-same-stage .levelup-avatar-old {
  animation: lu-avatar-old-still 3000ms linear both;
}
.levelup-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: lu-flash 3000ms var(--ease-out) both;
  pointer-events: none;
}
.levelup-badge-art {
  position: absolute;
  left: 57.77%;
  top: 25.85%;
  width: 14.67%;
  height: 26.07%;
  display: grid;
  place-items: center;
  animation: lu-badge 3000ms var(--ease-pop) both;
}
.levelup-badge-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.levelup-badge-num {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(18px, 4vw, 42px);
  font-weight: 800;
  line-height: 1;
}
.levelup-badge {
  position: absolute;
  bottom: 10%;
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--orange);
}
.levelup-skip {
  position: absolute;
  right: 6px;
  top: 6px;
  color: var(--bg);
  background: var(--btn);
  border: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
}
.levelup-overlay.is-static .levelup-layer,
.levelup-overlay.is-static .levelup-avatar,
.levelup-overlay.is-static .levelup-flash,
.levelup-overlay.is-static .levelup-badge-art {
  animation: none;
  opacity: 1;
}
.levelup-overlay.is-static .levelup-flash { opacity: 0; }
.levelup-overlay.is-static .levelup-avatar-old { opacity: 0; }
.avatar-panel.is-leveling .avatar-figure {
  box-shadow: 0 0 26px var(--btn);
}
@keyframes avatar-squash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes pu-small-glow {
  0% { opacity: 0; transform: scale(0.6); }
  20.8% { opacity: 1; transform: scale(1); }
  58.3% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes pu-small-ring {
  0%, 6.7% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  22% { opacity: 1; transform: scale(1.05) rotate(0deg); }
  37.5% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.25) rotate(20deg); }
}
@keyframes pu-small-particles {
  0%, 16.7% { opacity: 0; transform: scale(0.7); }
  41.7% { opacity: 1; transform: scale(1.1); }
  91.7%, 100% { opacity: 0; transform: scale(1.3); }
}
@keyframes pu-small-icon {
  0% { opacity: 0; transform: scale(0); }
  18% { opacity: 1; transform: scale(1.1); }
  29.2% { opacity: 1; transform: scale(1) translateY(0); }
  75% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1) translateY(-24px); }
}
@keyframes pu-medium-glow {
  0% { opacity: 0; transform: scale(0.5); }
  15% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes pu-medium-burst {
  0%, 7.5% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  25% { opacity: 1; transform: scale(1) rotate(0deg); }
  70% { opacity: 1; transform: scale(1) rotate(21deg); }
  100% { opacity: 0; transform: scale(1) rotate(30deg); }
}
@keyframes pu-medium-ring {
  0%, 5% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  15% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  25% { opacity: 1; transform: scale(1) rotate(0deg); }
  65% { opacity: 1; transform: scale(1) rotate(-15deg); }
  80% { opacity: 0; transform: scale(1.3) rotate(-15deg); }
  100% { opacity: 0; transform: scale(1.3) rotate(-15deg); }
}
@keyframes pu-medium-particles {
  0%, 12.5% { opacity: 0; transform: scale(0.5) translateY(0); }
  35% { opacity: 1; transform: scale(1) translateY(0); }
  90%, 100% { opacity: 0; transform: scale(1.35) translateY(-30px); }
}
@keyframes pu-medium-icon {
  0% { opacity: 0; transform: scale(0); }
  12% { opacity: 1; transform: scale(1.12); }
  22.5% { opacity: 1; transform: scale(1) translateY(0); }
  45% { opacity: 1; transform: scale(1) translateY(-6px); }
  70% { opacity: 1; transform: scale(1) translateY(6px); }
  80% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.6) translate(40px, 80px); }
}
@keyframes pu-large-glow {
  0% { opacity: 0; }
  18.75% { opacity: 1; }
  81.25% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pu-large-rays {
  0%, 9.4% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  28.1% { opacity: 1; transform: scale(1) rotate(0deg); }
  81.25% { opacity: 1; transform: scale(1) rotate(20deg); }
  100% { opacity: 0; transform: scale(1) rotate(25deg); }
}
@keyframes pu-large-ring {
  0%, 15.6% { opacity: 0; transform: scale(0.2); }
  34.4% { opacity: 1; transform: scale(1); }
  59.4%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes pu-large-particles {
  0%, 18.75% { opacity: 0; transform: scale(0.6) translateY(0); }
  37.5% { opacity: 1; transform: scale(1) translateY(0); }
  93.75%, 100% { opacity: 0; transform: scale(1.25) translateY(-40px); }
}
@keyframes pu-large-bulbglow {
  0%, 12.5% { opacity: 0; transform: scale(0); }
  21.9% { opacity: 1; transform: scale(1.2); }
  28.1% { opacity: 1; transform: scale(1); }
  40.6% { opacity: 1; transform: scale(1.08); }
  53.1% { opacity: 1; transform: scale(1); }
  65.6% { opacity: 1; transform: scale(1.08); }
  81.25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes pu-large-petals {
  0%, 21.9% { opacity: 0; transform: scale(0); }
  35.9% { opacity: 1; transform: scale(1); }
  84.4% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes pu-large-bulb {
  0%, 6.25% { opacity: 0; transform: translateY(120px) scale(0.4); }
  15.6% { opacity: 1; transform: translateY(0) scale(1.1); }
  21.9% { opacity: 1; transform: translateY(0) scale(1); }
  84.4% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1.15); }
}
@keyframes pu-large-flare {
  0%, 25% { opacity: 0; transform: scaleX(0.1); }
  31.25% { opacity: 1; transform: scaleX(1) scale(1); }
  34.4% { opacity: 1; transform: scaleX(1) scale(0); }
  37.5% { opacity: 0.6; transform: scaleX(1) scale(1); }
  46.9% { opacity: 0.6; transform: scaleX(1) scale(1); }
  62.5% { opacity: 0.6; transform: scaleX(1) scale(0); }
  68.75% { opacity: 0.6; transform: scaleX(1) scale(1); }
  81.25% { opacity: 0.6; transform: scaleX(1) scale(1); }
  100% { opacity: 0; transform: scaleX(1) scale(1); }
}
@keyframes lu-glow {
  0% { opacity: 0; }
  13.3% { opacity: 1; }
  83.3% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lu-rays {
  0%, 31.7% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  46.7% { opacity: 1; transform: scale(1) rotate(0deg); }
  83.3% { opacity: 1; transform: scale(1) rotate(12deg); }
  100% { opacity: 0; transform: scale(1) rotate(15deg); }
}
@keyframes lu-ring {
  0%, 31.7% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  38.3% { opacity: 1; transform: scale(1.05) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(0deg); }
  83.3% { opacity: 1; transform: scale(1) rotate(18deg); }
  100% { opacity: 0; transform: scale(1) rotate(20deg); }
}
@keyframes lu-particles {
  0%, 33.3% { opacity: 0; transform: scale(0.6) translateY(0); }
  50% { opacity: 1; transform: scale(1) translateY(0); }
  93.3%, 100% { opacity: 0; transform: scale(1) translateY(-40px); }
}
@keyframes lu-title {
  0%, 40% { opacity: 0; transform: translateY(30px); }
  51.7% { opacity: 1; transform: translateY(0); }
  86.7% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes lu-avatar-old {
  0% { opacity: 0; transform: translateX(0); filter: brightness(1); }
  10% { opacity: 1; transform: translateX(0); filter: brightness(1); }
  12% { transform: translateX(-4px); filter: brightness(1.3); }
  14% { transform: translateX(4px); filter: brightness(1.6); }
  16% { transform: translateX(-4px); filter: brightness(1.8); }
  18% { transform: translateX(4px); filter: brightness(2); }
  20% { transform: translateX(-4px); filter: brightness(2.1); }
  22% { transform: translateX(4px); filter: brightness(2.2); }
  30% { opacity: 1; transform: translateX(0); filter: brightness(2.2); }
  35%, 100% { opacity: 0; transform: translateX(0); filter: brightness(1); }
}
@keyframes lu-avatar-old-still {
  0%, 10% { opacity: 0; }
  30% { opacity: 1; }
  35%, 100% { opacity: 0; }
}
@keyframes lu-avatar-new {
  0%, 31.7% { opacity: 0; transform: scale(0.8) translateY(0); }
  40% { opacity: 1; transform: scale(1.08) translateY(0); }
  46.7% { opacity: 1; transform: scale(1) translateY(0); }
  56.7% { opacity: 1; transform: scale(1) translateY(-6px); }
  70% { opacity: 1; transform: scale(1) translateY(6px); }
  86.7% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1) translateY(0); }
}
@keyframes lu-flash {
  0%, 31.7% { opacity: 0; }
  35.8% { opacity: 0.8; }
  40%, 100% { opacity: 0; }
}
@keyframes lu-badge {
  0%, 43.3% { opacity: 0; transform: scale(0) rotate(-20deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(-8deg); }
  56.7% { opacity: 1; transform: scale(1) rotate(0deg); }
  86.7% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1) rotate(0deg); }
}
.powerup-preview {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 18px;
}
.powerup-preview-kicker {
  margin: 0 0 8px;
  color: var(--orange);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.powerup-preview-note { color: var(--muted); }
.powerup-preview button {
  margin: 0 8px 8px 0;
  color: var(--bg);
  background: var(--btn);
  border: 0;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .pu-layer,
  .levelup-layer,
  .levelup-avatar,
  .levelup-flash,
  .levelup-badge-art,
  .avatar-figure.is-pulse {
    animation: none;
  }

  .pu-layer,
  .levelup-static { opacity: 1; }
}
@media (max-width: 860px) {




  .app.has-avatar,
  .app:has(#avatarPanel) {
    display: flex;
    flex-direction: column;
  }

  .avatar-panel {
    /* The page header is already sticky on small screens; keep the avatar in flow under it. */
    position: relative;
    top: auto;
    z-index: 1;
    order: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .avatar-stage {
    width: 48px;
    height: 48px;
    margin: 0;
    flex: 0 0 48px;
  }

  .avatar-figure {
    width: 48px;
    height: 48px;
  }

  .avatar-meta { min-width: 0; flex: 1; }

  .avatar-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    max-height: 2.6em;
    overflow: hidden;
  }

  .avatar-topics-kicker { display: none; }

  .avatar-hero-kicker { display: none; }

  .avatar-name {
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.1;
  }

  .avatar-level-name {
    font-size: 14px;
    margin: 0;
  }

  .avatar-level {
    margin: 0 0 4px;
    font-size: 11px;
  }

  .level-badge,
  .level-badge img {
    width: 28px;
    height: 28px;
  }

  .level-badge { right: -4px; top: -4px; }

  .level-badge-num { font-size: 11px; }

  .xp-bar { height: 12px; margin: 0 0 4px; }

  .xp-bar-frame,
  .xp-bar-fill { height: 12px; }

  .avatar-next-goal {
    margin: 0 0 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .avatar-badges { margin: 0; }

  .avatar-badges li,
  .avatar-badges img {
    width: 20px;
    height: 20px;
  }

  .shell { display: block; }

  .sidebar {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .app.show-side .sidebar { display: none; }

  .sfox-table { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-bar-fill-clip,
  .pu-layer,
  .levelup-glow,
  .levelup-rays,
  .levelup-ring,
  .levelup-particles,
  .levelup-title,
  .levelup-avatar,
  .levelup-flash,
  .levelup-badge-art,
  .avatar-figure.is-pulse {
    transition: none;
    animation: none;
  }
}