.avatar-portrait.avatar-3d-enabled {
  --avatar-controls-height: 140px;
  display: block;
  min-height: calc(440px + var(--avatar-controls-height));
  overflow: hidden;
  background: #050302;
}

.avatar-furnace-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0 0 var(--avatar-controls-height);
  overflow: hidden;
  background: #050302;
  pointer-events: none;
}

.avatar-furnace-art,
.avatar-furnace-emissive {
  position: absolute;
  inset: -2px;
  background-position: 50% 48%;
  background-repeat: no-repeat;
  background-size: cover;
}

.avatar-furnace-art {
  z-index: 0;
  background-image: url("/assets/avatar/coalcat-furnace-background-v1.jpg?v=48");
  filter: brightness(.52) saturate(.94) contrast(1.08);
  transform: scale(1.012);
}

.avatar-furnace-emissive {
  z-index: 1;
  background-image: url("/assets/avatar/coalcat-furnace-emissive-v1.jpg?v=48");
  filter: brightness(1.22) saturate(1.18);
  mix-blend-mode: screen;
  opacity: .18;
  animation: avatarFurnaceEmissive 1.65s steps(2, end) infinite;
  will-change: filter, opacity;
}

.avatar-furnace-smoke {
  position: absolute;
  z-index: 2;
  top: -13%;
  width: 18%;
  height: 49%;
  background: url("/assets/avatar/paw-smoke-wisp.png?v=48") 50% 100% / contain no-repeat;
  filter: grayscale(1) brightness(.75);
  mix-blend-mode: screen;
  opacity: .14;
  transform-origin: 50% 100%;
  will-change: opacity, transform;
}

.avatar-furnace-smoke-left {
  left: 12%;
  animation: avatarFurnaceSmokeLeft 5.6s ease-in-out infinite;
}

.avatar-furnace-smoke-right {
  right: 12%;
  animation: avatarFurnaceSmokeRight 6.2s ease-in-out -2.1s infinite;
}

.avatar-furnace-backdrop::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(ellipse 39% 57% at 50% 61%, #020101a8 0 34%, #03020268 52%, transparent 76%),
    linear-gradient(180deg, #0001 0, transparent 28%, #0004 100%);
}

.avatar-3d-viewport {
  position: absolute;
  z-index: 2;
  inset: 0 0 var(--avatar-controls-height);
  overflow: hidden;
  isolation: isolate;
}

.avatar-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  filter: brightness(1.05) saturate(1.05);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.avatar-3d-canvas:active { cursor: grabbing; }
.avatar-3d-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }

.avatar-screen-paw {
  position: absolute;
  z-index: 6;
  width: clamp(100px, 42%, 210px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 9px #000a);
  will-change: transform, opacity;
}
.avatar-screen-paw[hidden] { display: none; }

.avatar-3d-enabled > .avatar-cat {
  position: absolute;
  z-index: 1;
  inset: 10px 4% var(--avatar-controls-height);
  width: 92%;
  height: calc(100% - var(--avatar-controls-height) - 10px);
  max-height: none;
  transition: opacity .28s, visibility .28s;
}

.avatar-3d-enabled.avatar-3d-ready > .avatar-cat {
  visibility: hidden;
  opacity: 0;
}

.avatar-3d-enabled.avatar-3d-fallback > .avatar-cat {
  visibility: visible;
  opacity: 1;
}

.avatar-3d-enabled.avatar-3d-fallback .avatar-3d-canvas { visibility: hidden; }

.avatar-3d-loading {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 30px;
  background: #090605bd;
  color: #dca173;
  text-align: center;
}

.avatar-3d-loading[hidden], .avatar-3d-error[hidden] { display: none; }

.avatar-3d-loading i {
  width: 38px;
  height: 38px;
  border: 2px solid #63301e;
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: avatarForgeSpin .8s linear infinite;
}

.avatar-3d-loading strong { font-size: .7rem; letter-spacing: .14em; }
.avatar-3d-loading span { color: #a99282; font-size: .76rem; }

.avatar-3d-loading-track {
  width: min(210px, 65vw);
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #2b211d;
}

.avatar-3d-loading-track b {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ember), var(--gold));
  transition: width .18s ease;
}

.avatar-3d-error {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 16px;
  width: max-content;
  max-width: calc(100% - 28px);
  transform: translateX(-50%);
  padding: 8px 11px;
  border: 1px solid #70402f;
  border-radius: 999px;
  background: #090706db;
  color: #c7b4a8;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.avatar-3d-status, .avatar-3d-focus, .avatar-3d-hint {
  position: absolute;
  z-index: 6;
  border: 1px solid #60402f;
  background: #0b0807bd;
  color: #bea99b;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.avatar-3d-status {
  top: 13px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 999px;
}

.avatar-3d-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7a2e;
  box-shadow: 0 0 10px #ff4d17;
}

.avatar-3d-focus {
  top: 13px;
  right: 13px;
  padding: 7px 9px;
  border-radius: 999px;
  color: var(--gold);
}

.avatar-3d-hint {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  border-color: #493228;
  border-radius: 999px;
  color: #9d887b;
  text-align: center;
}

.avatar-motion-bar {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-top: 1px solid #402a22;
  background: #090707ed;
  backdrop-filter: blur(13px);
}

.avatar-motion-row, .avatar-camera-row, .avatar-emote-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.avatar-camera-row, .avatar-emote-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avatar-emote-row [data-avatar-emote="dance"],
.avatar-emote-row [data-avatar-emote="highfive"] {
  border-color: #9b4d2f;
  color: #ffd0a0;
  background: #29120c;
}

.avatar-emote-status {
  color: #b29a8b;
  font: 400 .8125rem system-ui;
  text-align: center;
}

.avatar-motion-bar button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  border: 1px solid #4d3329;
  border-radius: 999px;
  background: #100c0a;
  color: #a89589;
  font: 700 .875rem system-ui;
  letter-spacing: 0;
  cursor: pointer;
}

.avatar-motion-bar button:hover,
.avatar-motion-bar button:focus-visible {
  border-color: #a75838;
  color: white;
  outline: none;
}

.avatar-motion-bar button[aria-pressed="true"] {
  border-color: var(--ember);
  background: #4a170b;
  color: var(--gold);
  box-shadow: 0 0 18px #ff4d172d;
}

.avatar-motion-bar button[disabled] { opacity: .45; cursor: wait; }

.avatar-3d-enabled .equipped-token[data-slot="shirt"],
.avatar-3d-enabled .equipped-token[data-slot="pants"],
.avatar-3d-enabled .equipped-token[data-slot="neck"],
.avatar-3d-enabled .equipped-token[data-slot="glasses"],
.avatar-3d-enabled .equipped-token[data-slot="mouth"],
.avatar-3d-enabled .equipped-token[data-slot="earring"],
.avatar-3d-enabled .equipped-token[data-slot="shoes"],
.avatar-3d-enabled .equipped-token[data-slot="hat"],
.avatar-3d-enabled .equipped-token[data-slot="smoke"] {
  z-index: 7;
}

@keyframes avatarForgeSpin { to { transform: rotate(360deg); } }

@keyframes avatarFurnaceEmissive {
  0%, 100% { opacity: .14; filter: brightness(1.08) saturate(1.1); }
  23% { opacity: .24; filter: brightness(1.34) saturate(1.25); }
  46% { opacity: .17; filter: brightness(1.18) saturate(1.14); }
  71% { opacity: .27; filter: brightness(1.42) saturate(1.3); }
}

@keyframes avatarFurnaceSmokeLeft {
  0%, 100% { opacity: .1; transform: translate3d(0, 4%, 0) scale(.92) rotate(-1deg); }
  48% { opacity: .19; transform: translate3d(-5%, -5%, 0) scale(1.08) rotate(2deg); }
}

@keyframes avatarFurnaceSmokeRight {
  0%, 100% { opacity: .1; transform: translate3d(0, 4%, 0) scaleX(-1) scale(.94) rotate(1deg); }
  52% { opacity: .18; transform: translate3d(5%, -6%, 0) scaleX(-1) scale(1.09) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-3d-loading i { animation: none; }
  .avatar-furnace-emissive,
  .avatar-furnace-smoke { animation: none; }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .avatar-den .sectionhead,
  .avatar-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .avatar-stage {
    position: relative;
    top: auto;
  }

  .avatar-console { min-width: 0; }
}

@media (hover: none) and (pointer: coarse) {
  .navlinks { display: none; }
  .avatar-portrait.avatar-3d-enabled { min-height: max(calc(440px + var(--avatar-controls-height)), 82svh); }
}

@media (max-width: 600px) {
  .avatar-portrait.avatar-3d-enabled { min-height: calc(420px + var(--avatar-controls-height)); }
  .avatar-furnace-art,
  .avatar-furnace-emissive { background-position: 50% 48%; }
  .avatar-furnace-smoke { width: 20%; }
  .avatar-furnace-smoke-left { left: 4%; }
  .avatar-furnace-smoke-right { right: 4%; }
  .avatar-3d-status { top: 9px; left: 9px; padding: 6px 7px; font-size: .55rem; }
  .avatar-3d-focus { top: 9px; right: 9px; padding: 6px 7px; font-size: .55rem; }
  .avatar-3d-hint { bottom: 11px; font-size: .55rem; }
  .avatar-motion-bar { gap: 7px; padding: 10px 7px; }
}