:root {
  --paper: #ece9df;
  --ink: #e3e9dd;
  --muted-ink: #aab4a9;

  --bg-main: var(--dna-emerald-graphite);
  --bg-accent: var(--dna-jade-mineral);

  --shadow-soft: var(--shadow-depth-1);
  --shadow-strong: var(--shadow-depth-2);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  background:
    radial-gradient(1200px 720px at 50% -12%, rgba(63, 122, 108, 0.2), transparent 66%),
    linear-gradient(148deg, var(--dna-emerald-graphite) 0%, var(--dna-emerald-graphite-deep) 52%, #11231f 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card,
.glass {
  border-radius: var(--glass-radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(150deg, rgba(24, 46, 40, 0.78), rgba(17, 34, 29, 0.66));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-soft), var(--shadow-inner);
}

.btn,
button {
  border: 1px solid rgba(216, 207, 184, 0.34);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(34, 63, 56, 0.92), rgba(23, 45, 39, 0.84));
  color: var(--dna-platinum-ivory);
  font-weight: 600;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.btn:hover,
button:hover,
.btn:focus-visible,
button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(7, 15, 13, 0.44), 0 0 0 1px var(--dna-gold-muted-soft);
  border-color: rgba(180, 154, 103, 0.56);
  outline: none;
}

input,
select,
textarea {
  border: 1px solid rgba(213, 220, 207, 0.26);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(20, 40, 34, 0.86), rgba(16, 33, 28, 0.76));
  color: var(--dna-platinum-ivory);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(52, 140, 118, 0.7);
  box-shadow: 0 0 0 1px rgba(52, 140, 118, 0.26), 0 0 18px rgba(52, 140, 118, 0.2);
}

.profile-control-option {
  display: none !important;
}

.status-cheer {
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.status-cheer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.16) 40%, transparent 70%);
  transform: translateX(-125%);
}

.status-cheer.is-cheer-loading {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

.status-cheer.is-cheer-loading::after {
  opacity: 1;
  animation: statusCheerSweep 1450ms ease-in-out infinite;
}

.status-cheer.is-cheer-swap {
  animation: statusCheerPop 340ms cubic-bezier(0.22, 0.86, 0.38, 1);
}

@keyframes statusCheerSweep {
  0% {
    transform: translateX(-125%);
  }
  65% {
    transform: translateX(125%);
  }
  100% {
    transform: translateX(125%);
  }
}

@keyframes statusCheerPop {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-1px) scale(1.018);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}








html.cheer-page-loading body {
  filter: saturate(1.04) contrast(1.02) brightness(0.95);
  transition: filter 260ms ease;
}

.cheer-overlay {
  --cheer-bg-a: rgba(9, 18, 36, 0.84);
  --cheer-bg-b: rgba(4, 9, 20, 0.94);
  --cheer-atmos: rgba(124, 197, 255, 0.22);
  --cheer-frame: rgba(196, 220, 248, 0.34);
  --cheer-frame-glow: rgba(133, 181, 255, 0.28);

  --cheer-skin-hi: #f5d9bd;
  --cheer-skin-mid: #d7aa7e;
  --cheer-skin-low: #b48157;
  --cheer-skin-rim: rgba(255, 225, 192, 0.58);

  --cheer-hair-hi: #2a1812;
  --cheer-hair-mid: #180d09;
  --cheer-hair-low: #090505;

  --cheer-eye-white: #f8fbff;
  --cheer-eye-iris-hi: #86ace2;
  --cheer-eye-iris-mid: #355687;
  --cheer-eye-iris-low: #132748;
  --cheer-eye-pupil: #0a1019;

  --cheer-cheek: rgba(227, 145, 128, 0.2);
  --cheer-mouth: #6f4434;

  --cheer-coat-hi: #edf2fb;
  --cheer-coat-mid: #bccbe0;
  --cheer-coat-low: #8097ba;
  --cheer-shirt: #f8fbff;
  --cheer-tie: #2a4476;
  --cheer-glasses: rgba(208, 229, 255, 0.86);

  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

.cheer-overlay.is-active {
  opacity: 1;
}

.cheer-overlay.is-exit {
  opacity: 0;
}

.cheer-overlay__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 40% at 50% 56%, rgba(105, 155, 238, 0.24), transparent 74%),
    radial-gradient(80% 58% at 50% 14%, rgba(137, 178, 255, 0.08), transparent 68%),
    linear-gradient(158deg, var(--cheer-bg-a), var(--cheer-bg-b));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.cheer-overlay::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  background:
    radial-gradient(40% 24% at 50% 18%, var(--cheer-atmos), transparent 76%),
    radial-gradient(18% 11% at 24% 66%, rgba(153, 255, 224, 0.12), transparent 72%),
    radial-gradient(18% 11% at 78% 62%, rgba(255, 217, 171, 0.12), transparent 72%);
  animation: cheerAtmosDrift 8s ease-in-out infinite;
}

.cheer-overlay[data-scene="atelier"] {
  --cheer-bg-a: rgba(9, 18, 36, 0.84);
  --cheer-bg-b: rgba(4, 9, 20, 0.94);
  --cheer-atmos: rgba(124, 197, 255, 0.22);
}

.cheer-overlay[data-scene="sunrise"] {
  --cheer-bg-a: rgba(43, 26, 17, 0.84);
  --cheer-bg-b: rgba(18, 10, 12, 0.94);
  --cheer-atmos: rgba(255, 181, 122, 0.24);
}

.cheer-overlay[data-scene="royal-night"] {
  --cheer-bg-a: rgba(14, 16, 34, 0.86);
  --cheer-bg-b: rgba(6, 8, 18, 0.96);
  --cheer-atmos: rgba(163, 174, 228, 0.2);
}

.cheer-overlay[data-scene="emerald"] {
  --cheer-bg-a: rgba(7, 29, 32, 0.84);
  --cheer-bg-b: rgba(5, 12, 24, 0.94);
  --cheer-atmos: rgba(111, 255, 208, 0.22);
}

.cheer-overlay[data-role-persona="teacher"] {
  --cheer-atmos: rgba(255, 199, 112, 0.24);
  --cheer-frame-glow: rgba(255, 186, 96, 0.24);
}

.cheer-overlay[data-role-persona="viewer_admin"] {
  --cheer-atmos: rgba(143, 240, 210, 0.22);
  --cheer-frame: rgba(190, 234, 224, 0.34);
  --cheer-frame-glow: rgba(120, 214, 188, 0.2);
}

.cheer-overlay[data-role-persona="admin"] {
  --cheer-atmos: rgba(255, 194, 136, 0.22);
  --cheer-frame-glow: rgba(246, 177, 109, 0.24);
}

.cheer-overlay[data-role-persona="super_admin"] {
  --cheer-atmos: rgba(255, 215, 142, 0.28);
  --cheer-frame: rgba(244, 225, 176, 0.4);
  --cheer-frame-glow: rgba(255, 217, 126, 0.34);
}

.cheer-overlay[data-palette="porcelain"] {
  --cheer-skin-hi: #f8ddc5;
  --cheer-skin-mid: #dfb892;
  --cheer-skin-low: #bf8f66;
}

.cheer-overlay[data-palette="golden"] {
  --cheer-skin-hi: #f3d0a6;
  --cheer-skin-mid: #d8a572;
  --cheer-skin-low: #aa7248;
}

.cheer-overlay[data-palette="olive"] {
  --cheer-skin-hi: #e4c3a2;
  --cheer-skin-mid: #c69775;
  --cheer-skin-low: #906646;
}

.cheer-overlay[data-palette="amber"] {
  --cheer-skin-hi: #dcb08a;
  --cheer-skin-mid: #b57e57;
  --cheer-skin-low: #7f5537;
}

.cheer-overlay[data-palette="ebony"] {
  --cheer-skin-hi: #c5926c;
  --cheer-skin-mid: #915f42;
  --cheer-skin-low: #623d2a;
}

.cheer-stage {
  position: relative;
  width: min(430px, calc(100vw - 20px));
  aspect-ratio: 14 / 19;
  display: grid;
  place-items: center;
  overflow: hidden;
  filter: drop-shadow(0 32px 58px rgba(2, 8, 21, 0.64));
}

.cheer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 34px;
  border: 1px solid var(--cheer-frame);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.08), rgba(16, 30, 54, 0.2) 38%, rgba(8, 16, 31, 0.36)),
    radial-gradient(84% 56% at 50% 0%, rgba(180, 210, 255, 0.16), transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 22px 38px rgba(124, 167, 232, 0.14),
    inset 0 -24px 36px rgba(6, 14, 31, 0.52),
    0 0 22px var(--cheer-frame-glow);
}

.cheer-stage::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 28px;
  border: 1px solid rgba(178, 205, 240, 0.18);
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.06), transparent 36%, rgba(148, 196, 255, 0.05));
  mix-blend-mode: screen;
  animation: cheerPanelSheen 7.8s ease-in-out infinite;
}

.cheer-stage__ring,
.cheer-stage__pulse,
.cheer-stage__dust,
.cheer-stage__spark {
  position: absolute;
  pointer-events: none;
}

.cheer-stage__ring {
  width: 74%;
  height: 16%;
  top: 13%;
  border-radius: 999px;
  border: 2px solid rgba(193, 216, 252, 0.38);
  box-shadow: inset 0 0 14px rgba(170, 198, 248, 0.24), 0 0 20px rgba(170, 198, 248, 0.14);
  animation: cheerRingOrbit 8.2s ease-in-out infinite;
}

.cheer-stage__ring::before,
.cheer-stage__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cheer-stage__ring::before {
  border: 1px dashed rgba(210, 233, 255, 0.3);
  transform: scale(1.1);
  opacity: 0.66;
  animation: cheerRingSpin 7s linear infinite;
}

.cheer-stage__ring::after {
  inset: 10% 5%;
  border: 1px solid rgba(160, 198, 255, 0.34);
  filter: blur(0.3px);
}

.cheer-stage__pulse {
  width: 54%;
  height: 54%;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 236, 255, 0.28), rgba(157, 200, 255, 0.08) 44%, transparent 72%);
  filter: blur(1.5px);
  animation: cheerPulseBeat 2.8s ease-in-out infinite;
}

.cheer-stage__dust {
  inset: 14% 14% 12%;
  border-radius: 26px;
  opacity: 0.4;
  background-image:
    radial-gradient(rgba(210, 229, 255, 0.56) 0.8px, transparent 0.8px),
    radial-gradient(rgba(140, 182, 242, 0.34) 0.8px, transparent 0.8px);
  background-size: 15px 15px, 18px 18px;
  background-position: 0 0, 8px 9px;
  animation: cheerDustShift 7s linear infinite;
}

.cheer-stage__spark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 238, 0.96), rgba(255, 230, 173, 0.08));
  box-shadow: 0 0 16px rgba(255, 231, 177, 0.4);
  animation: cheerSparkDrift 3.8s ease-in-out infinite;
}

.cheer-stage__spark--a {
  top: 18%;
  left: 18%;
  animation-delay: -460ms;
}

.cheer-stage__spark--b {
  top: 16%;
  right: 18%;
  animation-delay: -1320ms;
}

.cheer-stage__spark--c {
  bottom: 22%;
  right: 26%;
  animation-delay: -2180ms;
}

.cheer-avatar {
  position: relative;
  z-index: 2;
  width: 74%;
  height: 90%;
  transform: translate3d(0, 0, 0);
}

.cheer-overlay[data-bob="float"] .cheer-avatar {
  animation: cheerAvatarFloat 3.8s ease-in-out infinite;
}

.cheer-overlay[data-bob="sway"] .cheer-avatar {
  animation: cheerAvatarSway 3.4s ease-in-out infinite;
}

.cheer-overlay[data-bob="bounce"] .cheer-avatar {
  animation: cheerAvatarBounce 2.4s cubic-bezier(0.28, 0.9, 0.42, 1) infinite;
}

.cheer-avatar__halo {
  position: absolute;
  left: 50%;
  top: 7.5%;
  width: 58%;
  height: 22%;
  margin-left: -29%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 243, 255, 0.3), rgba(166, 207, 255, 0.08) 58%, transparent 76%);
  filter: blur(0.8px);
  animation: cheerHaloPulse 2.6s ease-in-out infinite;
}

.cheer-avatar__hair-back {
  position: absolute;
  left: 50%;
  top: 13%;
  width: 66%;
  height: 16%;
  margin-left: -33%;
  border-radius: 50% 50% 38% 38% / 76% 76% 24% 24%;
  background:
    radial-gradient(32% 26% at 24% 24%, rgba(255, 255, 255, 0.12), transparent 70%),
    linear-gradient(180deg, var(--cheer-hair-hi), var(--cheer-hair-mid) 50%, var(--cheer-hair-low));
  box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.34);
}

.cheer-avatar__head {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 66%;
  height: 54%;
  margin-left: -33%;
  border-radius: 47% 47% 43% 43% / 40% 40% 58% 58%;
  border: 1.8px solid var(--cheer-skin-rim);
  background:
    radial-gradient(38% 24% at 32% 24%, rgba(255, 255, 255, 0.36), transparent 82%),
    radial-gradient(34% 20% at 74% 66%, rgba(99, 58, 36, 0.12), transparent 78%),
    linear-gradient(166deg, var(--cheer-skin-hi), var(--cheer-skin-mid) 56%, var(--cheer-skin-low));
  box-shadow:
    inset 0 -8px 12px rgba(107, 72, 46, 0.16),
    0 10px 16px rgba(4, 11, 24, 0.28);
}

.cheer-avatar__hair-front {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 10.8%;
  width: 64%;
  height: 14%;
  margin-left: -32%;
  border-radius: 54% 46% 40% 38% / 78% 78% 22% 22%;
  background: linear-gradient(180deg, rgba(46, 27, 20, 0.98), rgba(23, 12, 9, 0.98) 68%, rgba(8, 5, 4, 0));
  clip-path: polygon(0 90%, 10% 72%, 22% 62%, 36% 64%, 50% 52%, 64% 60%, 78% 54%, 92% 66%, 100% 82%, 100% 100%, 0 100%);
}

.cheer-overlay[data-hair="sweep"] .cheer-avatar__hair-front {
  top: 9.6%;
  height: 14%;
  clip-path: polygon(0 88%, 10% 62%, 22% 58%, 36% 26%, 52% 54%, 70% 36%, 86% 60%, 100% 80%, 100% 100%, 0 100%);
}

.cheer-overlay[data-hair="crown"] .cheer-avatar__hair-front {
  top: 8.8%;
  height: 15%;
  clip-path: polygon(0 92%, 8% 58%, 20% 70%, 30% 30%, 44% 66%, 56% 30%, 70% 66%, 80% 34%, 92% 68%, 100% 86%, 100% 100%, 0 100%);
}

.cheer-overlay[data-hair="spiky"] .cheer-avatar__hair-front {
  top: 8.5%;
  height: 16%;
  clip-path: polygon(0 94%, 6% 54%, 16% 66%, 24% 26%, 36% 58%, 46% 20%, 58% 56%, 70% 24%, 82% 62%, 94% 40%, 100% 84%, 100% 100%, 0 100%);
}

.cheer-avatar__ear,
.cheer-avatar__brow,
.cheer-avatar__eye,
.cheer-avatar__pupil,
.cheer-avatar__cheek,
.cheer-avatar__nose,
.cheer-avatar__mustache,
.cheer-avatar__mouth,
.cheer-avatar__glasses {
  position: absolute;
}

.cheer-avatar__ear {
  top: 46%;
  width: 8.8%;
  height: 13%;
  border-radius: 46%;
  background: linear-gradient(180deg, var(--cheer-skin-mid), var(--cheer-skin-low));
  box-shadow: inset -2px 0 3px rgba(95, 58, 35, 0.2);
}

.cheer-avatar__ear--left {
  left: -3%;
}

.cheer-avatar__ear--right {
  right: -3%;
  box-shadow: inset 2px 0 3px rgba(95, 58, 35, 0.2);
}

.cheer-avatar__brow {
  top: 29%;
  width: 16%;
  height: 2.2%;
  border-radius: 999px;
  background: rgba(58, 40, 30, 0.78);
  transform-origin: 50% 50%;
  transition: transform 180ms ease, top 180ms ease;
}

.cheer-avatar__brow--left {
  left: 23%;
  transform: rotate(-8deg);
}

.cheer-avatar__brow--right {
  right: 23%;
  transform: rotate(8deg);
}

.cheer-avatar__eye {
  top: 38.6%;
  width: 16%;
  height: 10.2%;
  border-radius: 45% 45% 52% 52%;
  background: linear-gradient(180deg, #ffffff, var(--cheer-eye-white));
  box-shadow:
    inset 0 0 0 1px rgba(43, 68, 108, 0.18),
    inset 0 2px 3px rgba(255, 255, 255, 0.48);
  overflow: hidden;
  transform-origin: 50% 50%;
  animation: cheerBlink 4.8s ease-in-out infinite;
}

.cheer-avatar__eye::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24%;
  background: linear-gradient(180deg, rgba(51, 35, 27, 0.14), transparent);
}

.cheer-avatar__eye--left {
  left: 21.8%;
}

.cheer-avatar__eye--right {
  right: 21.8%;
}

.cheer-avatar__pupil {
  left: 26%;
  top: 13%;
  width: 50%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, var(--cheer-eye-iris-hi), var(--cheer-eye-iris-mid) 55%, var(--cheer-eye-iris-low));
  transition: transform 220ms ease;
}

.cheer-avatar__pupil::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 24%;
  width: 38%;
  height: 44%;
  border-radius: 50%;
  background: var(--cheer-eye-pupil);
}

.cheer-avatar__pupil::before {
  content: "";
  position: absolute;
  left: 58%;
  top: 20%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
}

.cheer-avatar__cheek {
  top: 58.8%;
  width: 10.4%;
  height: 4.8%;
  border-radius: 999px;
  background: radial-gradient(circle at 46% 44%, rgba(255, 201, 214, 0.9), var(--cheer-cheek));
  opacity: 0.34;
  filter: blur(0.2px);
}

.cheer-avatar__cheek--left {
  left: 16%;
}

.cheer-avatar__cheek--right {
  right: 16%;
}

.cheer-overlay[data-look="left"] .cheer-avatar__pupil {
  transform: translateX(-1.4px);
}

.cheer-overlay[data-look="right"] .cheer-avatar__pupil {
  transform: translateX(1.4px);
}

.cheer-overlay[data-look="up"] .cheer-avatar__pupil {
  transform: translateY(-1.2px);
}

.cheer-overlay[data-look="down"] .cheer-avatar__pupil {
  transform: translateY(1.2px);
}

.cheer-avatar__glasses {
  inset: 0;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cheer-avatar__glass {
  position: absolute;
  top: 36.7%;
  width: 20.4%;
  height: 12%;
  border-radius: 8px;
  border: 1px solid var(--cheer-glasses);
  background: rgba(216, 239, 255, 0.06);
}

.cheer-avatar__glass--left {
  left: 16%;
}

.cheer-avatar__glass--right {
  right: 16%;
}

.cheer-avatar__bridge {
  position: absolute;
  left: 50%;
  top: 42.6%;
  width: 8%;
  height: 1px;
  margin-left: -4%;
  background: var(--cheer-glasses);
}

.cheer-overlay[data-accessory="rimless"] .cheer-avatar__glasses {
  opacity: 1;
  transform: translateY(0);
}

.cheer-overlay[data-accessory="shades"] .cheer-avatar__glasses {
  opacity: 1;
  transform: translateY(0);
}

.cheer-overlay[data-accessory="shades"] .cheer-avatar__glass {
  border-color: rgba(158, 194, 248, 0.8);
  background: linear-gradient(180deg, rgba(31, 56, 94, 0.75), rgba(15, 26, 47, 0.86));
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.08), inset 0 -3px 6px rgba(2, 8, 18, 0.3);
}

.cheer-overlay[data-accessory="shades"] .cheer-avatar__bridge {
  height: 2px;
}

.cheer-overlay[data-accessory="moustache"] .cheer-avatar__mustache {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cheer-avatar__nose {
  left: 50%;
  top: 49%;
  width: 5.8%;
  height: 10%;
  margin-left: -2.9%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(221, 175, 139, 0.16), rgba(145, 101, 71, 0.28)),
    radial-gradient(60% 40% at 42% 18%, rgba(255, 255, 255, 0.14), transparent 80%);
}

.cheer-avatar__mustache {
  left: 50%;
  top: 62.8%;
  width: 16%;
  height: 5%;
  margin-left: -8%;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-1px) scale(0.86);
  transition: opacity 180ms ease, transform 180ms ease;
  background:
    radial-gradient(36% 80% at 30% 50%, rgba(44, 27, 20, 0.95), transparent 76%),
    radial-gradient(36% 80% at 70% 50%, rgba(44, 27, 20, 0.95), transparent 76%);
}

.cheer-avatar__mouth {
  left: 50%;
  top: 69.2%;
  width: 15%;
  height: 4.4%;
  margin-left: -7.5%;
  border: 0;
  border-bottom: 1.8px solid var(--cheer-mouth);
  border-radius: 0 0 999px 999px;
  background: transparent;
  transform-origin: 50% 50%;
  transition: transform 180ms ease, width 180ms ease, margin-left 180ms ease, height 180ms ease;
}

.cheer-avatar__mouth::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 52%;
  height: 34%;
  margin-left: -26%;
  border-radius: 0 0 999px 999px;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.cheer-avatar__mouth::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 30%;
  border-radius: 0 0 999px 999px;
  background: rgba(168, 75, 86, 0.16);
  opacity: 0.14;
}

.cheer-avatar__neck {
  position: absolute;
  left: 50%;
  top: 67.8%;
  width: 16%;
  height: 11%;
  margin-left: -8%;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--cheer-skin-mid), var(--cheer-skin-low));
  box-shadow: inset 0 -4px 5px rgba(95, 60, 39, 0.2);
}

.cheer-avatar__coat {
  position: absolute;
  left: 50%;
  bottom: 4.2%;
  width: 74%;
  height: 24%;
  margin-left: -37%;
  border-radius: 24px 24px 13px 13px;
  border: 1px solid rgba(226, 238, 255, 0.54);
  background: linear-gradient(180deg, var(--cheer-coat-hi), var(--cheer-coat-mid) 56%, var(--cheer-coat-low));
  box-shadow: inset 0 8px 14px rgba(255, 255, 255, 0.24), inset 0 -8px 14px rgba(38, 63, 102, 0.2);
  overflow: hidden;
}

.cheer-avatar__coat::before,
.cheer-avatar__coat::after {
  content: "";
  position: absolute;
  top: 0;
  width: 32%;
  height: 54%;
  background: linear-gradient(180deg, rgba(236, 243, 253, 0.92), rgba(170, 188, 217, 0.9));
}

.cheer-avatar__coat::before {
  left: 17%;
  transform: skewX(-10deg);
}

.cheer-avatar__coat::after {
  right: 17%;
  transform: skewX(10deg);
}

.cheer-avatar__shirt {
  position: absolute;
  left: 50%;
  bottom: 8.2%;
  width: 21%;
  height: 10.8%;
  margin-left: -10.5%;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(226, 236, 248, 0.92));
  z-index: 1;
}

.cheer-avatar__tie {
  position: absolute;
  left: 50%;
  bottom: 4.2%;
  width: 6.4%;
  height: 10.4%;
  margin-left: -3.2%;
  border-radius: 2px 2px 10px 10px;
  background: linear-gradient(180deg, #3c629f, var(--cheer-tie));
  z-index: 2;
}

.cheer-overlay[data-expression="smile"] .cheer-avatar__mouth {
  width: 17%;
  margin-left: -8.5%;
}

.cheer-overlay[data-expression="grin"] .cheer-avatar__mouth {
  width: 18.6%;
  margin-left: -9.3%;
  border-bottom-width: 2px;
}

.cheer-overlay[data-expression="grin"] .cheer-avatar__mouth::before {
  opacity: 0.95;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(219, 229, 243, 0.9));
}

.cheer-overlay[data-expression="focus"] .cheer-avatar__brow {
  top: 31%;
}

.cheer-overlay[data-expression="focus"] .cheer-avatar__mouth {
  width: 12.4%;
  height: 2.8%;
  margin-left: -6.2%;
  border-bottom-width: 1.5px;
}

.cheer-overlay[data-expression="smirk"] .cheer-avatar__mouth {
  width: 15.4%;
  margin-left: -7.7%;
  transform: rotate(5deg) translateY(-0.6px);
}

.cheer-overlay[data-expression="smirk"] .cheer-avatar__brow--right {
  transform: rotate(12deg);
}

.cheer-overlay[data-expression="laugh"] .cheer-avatar__mouth {
  width: 18.2%;
  height: 7.8%;
  margin-left: -9.1%;
  border: 1.8px solid var(--cheer-mouth);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(172, 81, 91, 0.12), rgba(124, 49, 58, 0.08));
}

.cheer-overlay[data-expression="laugh"] .cheer-avatar__brow--left {
  transform: rotate(-12deg) translateY(-1px);
}

.cheer-overlay[data-expression="laugh"] .cheer-avatar__brow--right {
  transform: rotate(12deg) translateY(-1px);
}

.cheer-overlay[data-expression="surprised"] .cheer-avatar__mouth {
  width: 8.6%;
  height: 8.6%;
  margin-left: -4.3%;
  border: 1.8px solid var(--cheer-mouth);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 54, 64, 0.2), rgba(132, 54, 64, 0.06));
}

.cheer-overlay[data-expression="surprised"] .cheer-avatar__brow--left {
  transform: rotate(-16deg) translateY(-1.8px);
}

.cheer-overlay[data-expression="surprised"] .cheer-avatar__brow--right {
  transform: rotate(16deg) translateY(-1.8px);
}

.cheer-overlay[data-expression="sleepy"] .cheer-avatar__eye {
  height: 5.2%;
  top: 41.6%;
}

.cheer-overlay[data-expression="sleepy"] .cheer-avatar__pupil {
  transform: translateY(1.4px) scaleY(0.9);
}

.cheer-overlay[data-expression="sleepy"] .cheer-avatar__brow {
  top: 30.4%;
  opacity: 0.74;
}

.cheer-overlay[data-expression="sleepy"] .cheer-avatar__mouth {
  width: 11.8%;
  height: 2.4%;
  margin-left: -5.9%;
}

.cheer-overlay[data-expression="goofy"] .cheer-avatar__eye--left {
  transform: translateY(-0.7px) scale(1.05);
}

.cheer-overlay[data-expression="goofy"] .cheer-avatar__eye--right {
  transform: translateY(0.8px) scale(0.92);
}

.cheer-overlay[data-expression="goofy"] .cheer-avatar__mouth {
  width: 16.6%;
  height: 6.8%;
  margin-left: -8.3%;
  border: 1.8px solid var(--cheer-mouth);
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.cheer-overlay[data-expression="goofy"] .cheer-avatar__mouth::before {
  opacity: 0.92;
  width: 40%;
  height: 48%;
  margin-left: -20%;
  background: linear-gradient(180deg, rgba(241, 124, 157, 0.86), rgba(190, 78, 111, 0.9));
  border-radius: 0 0 999px 999px;
  transform: translateY(1px);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__eye--left {
  transform: translateY(-1px) scale(1.12);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__eye--right {
  transform: translateY(1px) scale(0.88);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__pupil {
  transform: translateX(0.8px);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__brow--left {
  transform: rotate(-22deg) translateY(-2px);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__brow--right {
  transform: rotate(18deg) translateY(1px);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__mouth {
  width: 14.8%;
  height: 6.2%;
  margin-left: -7.4%;
  border: 1.8px solid var(--cheer-mouth);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  transform: rotate(11deg) translateY(1px);
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__mouth::before {
  opacity: 0.8;
  width: 22%;
  height: 34%;
  margin-left: -11%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(226, 234, 246, 0.92));
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__cheek {
  opacity: 0.46;
}

.cheer-overlay[data-expression="oops"] .cheer-avatar__tie {
  animation: cheerTieWobble 520ms ease-in-out infinite alternate;
}

.cheer-overlay[data-expression="wink"] .cheer-avatar__eye--left {
  animation: none;
  height: 2.2%;
  top: 43.8%;
}

.cheer-overlay[data-expression="wink"] .cheer-avatar__eye--left .cheer-avatar__pupil {
  opacity: 0;
}

.cheer-overlay[data-expression="wink"] .cheer-avatar__brow--left {
  transform: rotate(-12deg);
}

.cheer-overlay[data-expression="wink"] .cheer-avatar__mouth {
  transform: rotate(-5deg) translateY(-0.4px);
}

.cheer-overlay[data-expression="focus"] .cheer-avatar__cheek,
.cheer-overlay[data-expression="surprised"] .cheer-avatar__cheek {
  opacity: 0.16;
}

.cheer-overlay[data-mood="composed"] .cheer-avatar__cheek {
  opacity: 0.2;
}

.cheer-overlay[data-mood="playful"] .cheer-avatar__cheek {
  opacity: 0.42;
}

.cheer-overlay[data-mood="playful"] .cheer-avatar__brow--left {
  transform: rotate(-10deg);
}

.cheer-overlay[data-mood="playful"] .cheer-avatar__brow--right {
  transform: rotate(10deg);
}

.cheer-overlay[data-mood="chaotic"] .cheer-stage__ring::before {
  animation-duration: 2.1s;
}

.cheer-overlay[data-mood="chaotic"] .cheer-avatar {
  animation-duration: 1.9s;
}

.cheer-overlay[data-mood="chaotic"] .cheer-stage__spark--a,
.cheer-overlay[data-mood="chaotic"] .cheer-stage__spark--b,
.cheer-overlay[data-mood="chaotic"] .cheer-stage__spark--c {
  animation-duration: 1.1s;
}

.cheer-overlay[data-energy="calm"] .cheer-stage__spark,
.cheer-overlay[data-energy="calm"] .cheer-avatar__halo,
.cheer-overlay[data-energy="calm"] .cheer-stage__pulse {
  animation-duration: 3400ms;
}

.cheer-overlay[data-energy="hype"] .cheer-stage__spark,
.cheer-overlay[data-energy="hype"] .cheer-avatar__halo,
.cheer-overlay[data-energy="hype"] .cheer-stage__pulse {
  animation-duration: 1900ms;
}

.cheer-overlay[data-energy="hype"] .cheer-stage__spark {
  opacity: 0.94;
}

.cheer-overlay[data-energy="turbo"] .cheer-stage__spark,
.cheer-overlay[data-energy="turbo"] .cheer-avatar__halo,
.cheer-overlay[data-energy="turbo"] .cheer-stage__pulse,
.cheer-overlay[data-energy="turbo"] .cheer-stage__ring::before {
  animation-duration: 1300ms;
}

.cheer-overlay[data-energy="turbo"] .cheer-stage__spark {
  opacity: 1;
}

.cheer-overlay[data-stage="4"] .cheer-stage::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 22px 38px rgba(144, 188, 255, 0.2),
    inset 0 -24px 36px rgba(6, 14, 31, 0.52),
    0 0 32px rgba(154, 198, 255, 0.34);
}

.cheer-overlay[data-edition="platinum"] .cheer-stage::before {
  border-color: rgba(214, 230, 255, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 24px 38px rgba(175, 208, 255, 0.2),
    inset 0 -24px 36px rgba(8, 17, 35, 0.5),
    0 0 26px rgba(170, 206, 255, 0.24);
}

.cheer-overlay[data-edition="platinum"] .cheer-stage::after {
  border-color: rgba(209, 227, 254, 0.3);
}

@keyframes cheerAtmosDrift {
  0%,
  100% {
    transform: translateX(-2.2%) translateY(0);
  }
  50% {
    transform: translateX(2.2%) translateY(-1.2%);
  }
}

@keyframes cheerPanelSheen {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(1);
  }
  50% {
    opacity: 0.84;
    transform: scale(1.01);
  }
}

@keyframes cheerRingOrbit {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
    opacity: 0.62;
  }
  50% {
    transform: translateY(-4px) scaleX(1.03);
    opacity: 0.92;
  }
}

@keyframes cheerRingSpin {
  0% {
    transform: scale(1.1) rotate(0deg);
  }
  100% {
    transform: scale(1.1) rotate(360deg);
  }
}

@keyframes cheerPulseBeat {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.54;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.82;
  }
}

@keyframes cheerDustShift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-14px);
  }
}

@keyframes cheerHaloPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.78;
    transform: scale(1.04);
  }
}

@keyframes cheerSparkDrift {
  0%,
  100% {
    opacity: 0.48;
    transform: translateY(0) scale(0.78);
  }
  50% {
    opacity: 0.94;
    transform: translateY(-4px) scale(1.08);
  }
}

@keyframes cheerAvatarFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes cheerAvatarSway {
  0%,
  100% {
    transform: translateY(-1px) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) rotate(-1deg);
  }
  75% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes cheerAvatarBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-7px) scale(1.015);
  }
  55% {
    transform: translateY(0) scale(0.995);
  }
  75% {
    transform: translateY(-3px) scale(1.005);
  }
}

@keyframes cheerTieWobble {
  0% {
    transform: rotate(-5deg) translateY(0);
  }
  100% {
    transform: rotate(7deg) translateY(1px);
  }
}

@keyframes cheerBlink {
  0%,
  45%,
  100% {
    transform: scaleY(1);
  }
  48% {
    transform: scaleY(0.16);
  }
  52% {
    transform: scaleY(1);
  }
}

@media (max-width: 720px) {
  .cheer-stage {
    width: min(348px, calc(100vw - 14px));
  }

  .cheer-avatar {
    width: 76%;
  }

  .cheer-stage__spark {
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cheer-page-loading body,
  .status-cheer,
  .status-cheer::after,
  .cheer-overlay,
  .cheer-overlay::before,
  .cheer-stage::after,
  .cheer-stage__ring,
  .cheer-stage__ring::before,
  .cheer-stage__pulse,
  .cheer-stage__dust,
  .cheer-stage__spark,
  .cheer-avatar,
  .cheer-avatar__halo,
  .cheer-avatar__eye {
    animation: none !important;
    transition: none !important;
  }
}