/* =========================================
   AVATAR DESIGN SYSTEM
   ========================================= */

:root {
  --avatar-skin: #c98b62;
  --avatar-hair: #181818;
  --avatar-outfit: #ef8c36;
}


/* =========================================
   SHARED CHARACTER
   ========================================= */

.avatar-svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  /*
   * IMPORTANT:
   * The SVG is the visual layer.
   *
   * Walking animations happen HERE,
   * not on .hall-avatar / [data-avatar].
   */
  transform-origin: center bottom;

  will-change: transform;
}


.avatar-skin,
.avatar-arms {
  fill: var(--avatar-skin);
}


.avatar-legs {
  fill: #343434;
}


.avatar-shoes {
  fill: #1d1d1d;
}


.avatar-outfit {
  display: none;
  fill: var(--avatar-outfit);
}


[data-outfit="casual"]
.avatar-outfit--casual,

[data-outfit="business"]
.avatar-outfit--business,

[data-outfit="traditional"]
.avatar-outfit--traditional {
  display: block;
}


.avatar-hair {
  fill: var(--avatar-hair);
}


.avatar-eye {
  fill: #222;
}


.avatar-mouth {
  stroke: #7c342b;
}


/* =========================================
   GENDER
   ========================================= */

.avatar-outfit--male,
.avatar-outfit--female {
  display: none;
}


[data-gender="male"]
.avatar-outfit--male {
  display: block;
}


[data-gender="female"]
.avatar-outfit--female {
  display: block;
}


/* =========================================
   SKIN TONES
   ========================================= */

[data-skin-tone="light"] {
  --avatar-skin: #efc19d;
}


[data-skin-tone="medium"] {
  --avatar-skin: #c98b62;
}


[data-skin-tone="dark"] {
  --avatar-skin: #75452f;
}


/* =========================================
   HAIR COLORS
   ========================================= */

[data-hair-color="black"] {
  --avatar-hair: #181818;
}


[data-hair-color="brown"] {
  --avatar-hair: #6b402b;
}


[data-hair-color="dark-brown"] {
  --avatar-hair: #352219;
}


/* =========================================
   OUTFIT COLORS
   ========================================= */

[data-outfit-color="blue"] {
  --avatar-outfit: #42b7df;
}


[data-outfit-color="orange"] {
  --avatar-outfit: #ef8c36;
}


[data-outfit-color="green"] {
  --avatar-outfit: #4f9b70;
}


[data-outfit-color="white"] {
  --avatar-outfit: #eeeeee;
}


/* =========================================
   HAIRSTYLES
   ========================================= */

.avatar-hair {
  display: none;
}


[data-hairstyle="short"]
.avatar-hair--short,

[data-hairstyle="curly"]
.avatar-hair--curly,

[data-hairstyle="braids"]
.avatar-hair--braids {
  display: block;
}


[data-hairstyle="bald"]
.avatar-hair {
  display: none;
}


/* =========================================
   ACCESSORIES
   ========================================= */

.avatar-glasses,
.avatar-hat {
  display: none;
}


[data-accessory="glasses"]
.avatar-glasses {
  display: block;
  fill: #111;
}


[data-accessory="hat"]
.avatar-hat {
  display: block;
  fill: #222;
}


/* =========================================
   HALL AVATAR
   ========================================= */

.hall-avatar {
  position: absolute;

  left: 80px;
  top: 120px;

  width: 38px;
  height: 68px;

  z-index: 50;

  cursor: pointer;

  /*
   * VERY IMPORTANT:
   *
   * NO left/top transition here.
   *
   * JavaScript updates these values every
   * animation frame. A CSS transition would
   * make getBoundingClientRect() lag behind
   * the logical position and collision
   * detection would become unstable.
   */
  transition: none;

  /*
   * Also DO NOT animate transform on this
   * outer element. It is our physics body.
   */
  transform: none;

  will-change: left, top;
}


/*
 * Hover the visual character only.
 * Never transform the collision container.
 */

.hall-avatar:hover .avatar-svg {
  transform: scale(1.06);
}


/* =========================================
   AVATAR CREATOR PREVIEW
   ========================================= */

.avatar-preview {
  margin-bottom: 24px;
}


.avatar-preview__character {
  width: 90px;
  height: 160px;

  display: block;
}


.avatar-preview p {
  margin-top: 8px;

  font-weight: 700;
}


/* =========================================
   FORM STRUCTURE
   ========================================= */

.avatar-form {
  max-width: 900px;
}


.avatar-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  gap: 18px 24px;

  align-items: flex-end;
}


.avatar-option-group {
  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 180px;
}


.avatar-option-group label {
  font-weight: 700;
}


.avatar-select {
  width: 180px;
  max-width: 180px;

  padding: 8px 10px;

  border: 1px solid #ccc;
  border-radius: 8px;
}


/* =========================================
   GENDER CARDS
   ========================================= */

.avatar-gender-options {
  display: flex;

  gap: 18px;

  margin-top: 10px;
}


.avatar-gender-card {
  min-width: 130px;

  padding: 18px 22px;

  border: 2px solid #efb762;
  border-radius: 18px;

  background: white;

  text-align: center;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.avatar-gender-card:hover {
  transform: translateY(-3px);

  background: #fff8ee;

  box-shadow:
    0 8px 22px
    rgba(80, 55, 20, 0.12);
}


.avatar-gender-card input {
  margin-right: 8px;
}


.avatar-gender-group {
  flex-basis: 100%;
}


/* =========================================
   SAVE BUTTON
   ========================================= */

.avatar-save-button {
  height: 42px;

  margin: 0;

  padding: 10px 20px;

  align-self: flex-end;
}


.avatar-save-button:hover {
  background: #efb762;
}


/* =========================================
   AVATAR NAME DISPLAY
   ========================================= */

.avatar-name {
  position: absolute;

  left: 50%;
  bottom: 100%;

  transform: translateX(-50%);

  margin-bottom: 4px;

  padding: 2px 6px;

  white-space: nowrap;

  background:
    rgba(255, 255, 255, 0.92);

  color: #333;

  border: 1px solid #efb762;
  border-radius: 999px;

  font-size: 0.62rem;
  font-weight: 700;

  /*
   * Prevent the name label interfering
   * with clicks/collision.
   */
  pointer-events: none;

  z-index: 3;
}


/* =========================================
   WALKING ANIMATION
   ========================================= */

/*
 * CRITICAL:
 *
 * [data-avatar] itself is NEVER animated.
 *
 * Only .avatar-svg moves visually.
 *
 * Therefore getBoundingClientRect() on the
 * outer avatar remains stable for physics.
 */


/* -----------------------------------------
   FORWARD / BACK WALK
   ----------------------------------------- */

[data-avatar].is-walking
.avatar-svg {
  animation:
    avatar-walk
    0.24s
    infinite
    alternate
    ease-in-out;
}


@keyframes avatar-walk {
  0% {
    transform:
      translateY(0)
      rotate(-1.3deg);
  }

  100% {
    transform:
      translateY(-3px)
      rotate(1.3deg);
  }
}


/* -----------------------------------------
   SIDE WALK
   ----------------------------------------- */

[data-avatar].is-walking[data-direction="left"]
.avatar-svg,

[data-avatar].is-walking[data-direction="right"]
.avatar-svg {
  animation:
    avatar-walk-side
    0.22s
    infinite
    alternate
    ease-in-out;
}


@keyframes avatar-walk-side {
  0% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  100% {
    transform:
      translateY(-3px)
      rotate(2deg);
  }
}


/*
 * Small visual lean.
 *
 * We deliberately do NOT use scaleX(-1)
 * yet because your SVG may contain text or
 * asymmetrical accessories. We can add
 * proper directional facing separately.
 */

[data-avatar][data-direction="left"]
.avatar-svg {
  transform-origin: 48% 100%;
}


[data-avatar][data-direction="right"]
.avatar-svg {
  transform-origin: 52% 100%;
}


/* =========================================
   STAND ENTRY PROMPT
   ========================================= */

.stand-entry-prompt {
  position: fixed;

  left: 50%;
  bottom: 28px;

  transform: translateX(-50%);

  z-index: 200;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 10px 18px;

  background:
    rgba(20, 20, 20, 0.92);

  color: white;

  border: 2px solid #efb762;
  border-radius: 999px;

  font-size: 0.9rem;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.22);

  pointer-events: none;
}


.stand-entry-prompt[hidden] {
  display: none;
}


.stand-entry-prompt__label {
  color: #efb762;

  font-weight: 800;
}


/* =========================================
   NEARBY NORMAL STAND
   ========================================= */

.stand.near-avatar {
  outline:
    3px solid orangered;

  outline-offset: 2px;

  box-shadow:
    0 0 0 5px
    rgba(255, 69, 0, 0.12);

  z-index: 25;
}


/* =========================================
   NEARBY SPONSOR
   ========================================= */

.stand-sponsor.near-avatar {
  outline:
    3px solid #7c4dff;

  outline-offset: 3px;

  box-shadow:
    0 0 0 5px
    rgba(124, 77, 255, 0.15);

  z-index: 30;
}


/* =========================================
   STAND MODAL
   ========================================= */

.stand-modal {
  position: fixed;

  inset: 0;

  z-index: 500;
}


.stand-modal[hidden] {
  display: none;
}


.stand-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.68);
}


.stand-modal__panel {
  position: absolute;

  inset: 4vh 4vw;

  overflow-y: auto;

  background: white;

  border-radius: 24px;

  box-shadow:
    0 24px 80px
    rgba(0, 0, 0, 0.3);
}


.stand-modal__close {
  position: sticky;

  top: 18px;

  float: right;

  z-index: 20;

  width: 44px;
  height: 44px;

  margin: 18px;

  border:
    1px solid #efb762;

  border-radius: 50%;

  background: white;

  font-size: 1.6rem;

  cursor: pointer;
}


.stand-modal__loading,
.stand-modal__error {
  padding: 50px;

  text-align: center;

  font-size: 1rem;

  color: #666;
}


body.stand-modal-open {
  overflow: hidden;
}

/* =========================================
   REMOTE USERS
   ========================================= */

.remote-avatar {
  z-index: 49;
  pointer-events: none;
  transition: none;
}

.remote-avatar__placeholder {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #ef8c36;
  color: white;

  font-size: 1.2rem;

  border: 2px solid white;

  box-shadow:
    0 3px 10px
    rgba(0, 0, 0, 0.22);
}

.remote-avatar__character {
  width: 100%;
  height: 100%;
}

.remote-avatar__character .avatar-svg {
  width: 100%;
  height: 100%;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

  .avatar-gender-options {
    flex-direction: column;
  }


  .avatar-gender-card {
    width: 100%;
  }


  .stand-modal__panel {
    inset: 2vh 2vw;

    border-radius: 18px;
  }


  .stand-entry-prompt {
    bottom: 16px;

    max-width:
      calc(100vw - 28px);

    font-size: 0.78rem;
  }
}