.avatar-media-quick-switch {
  position: relative;
  display: grid;
  gap: 0.34rem;
  margin: 0 0.62rem 0.5rem;
  padding: 0.42rem 0.46rem 0.48rem;
  border: 1px solid rgba(94, 182, 174, 0.25);
  border-left: 0.18rem solid rgba(213, 67, 78, 0.74);
  background:
    linear-gradient(105deg, rgba(10, 48, 44, 0.72), rgba(4, 14, 15, 0.91) 58%, rgba(55, 11, 19, 0.62)),
    rgba(2, 9, 10, 0.88);
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, 0.42), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(7px);
}

.avatar-media-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
}

.avatar-media-heading > span {
  color: rgba(143, 219, 211, 0.7);
  font: 700 0.42rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.avatar-media-heading > strong {
  min-width: 0;
  overflow: hidden;
  color: #e4eee9;
  font: 700 0.48rem/1 var(--oracle-font-ui, "Yu Gothic UI", Meiryo, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-media-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem;
  gap: 0.28rem;
}

.avatar-media-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.avatar-media-slot-grid.is-compact {
  grid-auto-flow: column;
  grid-auto-columns: minmax(3.2rem, 1fr);
  grid-template-columns: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.avatar-media-slot-grid.is-compact::-webkit-scrollbar {
  display: none;
}

.game-command-menu .avatar-media-slot,
.avatar-media-slot {
  position: relative;
  min-width: 0;
  height: 2.15rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 0.35rem;
  align-items: center;
  gap: 0.38rem;
  padding: 0.3rem 0.42rem;
  overflow: hidden;
  border: 1px solid rgba(88, 160, 153, 0.28);
  border-right: 1px solid rgba(88, 160, 153, 0.28);
  border-radius: 0;
  background:
    linear-gradient(100deg, rgba(61, 130, 121, 0.1), transparent 62%),
    rgba(2, 14, 15, 0.74);
  color: #9eb8b3;
  font: inherit;
  text-align: left;
  box-shadow: none;
  clip-path: polygon(0.3rem 0, 100% 0, 100% 100%, 0 100%, 0 0.3rem);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.game-command-menu .avatar-media-slot::before,
.avatar-media-slot::before {
  display: none;
}

.game-command-menu .avatar-media-slot small,
.avatar-media-slot small {
  color: #6abbb3;
  font: 700 0.42rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
}

.game-command-menu .avatar-media-slot strong,
.avatar-media-slot strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font: 700 0.56rem/1 var(--oracle-font-ui, "Yu Gothic UI", Meiryo, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-media-slot > i {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}

.game-command-menu .avatar-media-slot:hover,
.game-command-menu .avatar-media-slot:focus-visible,
.avatar-media-slot:hover,
.avatar-media-slot:focus-visible {
  border-color: rgba(116, 221, 211, 0.68);
  background: rgba(9, 39, 37, 0.88);
  color: #eff8f4;
  outline: none;
  filter: none;
  transform: none;
}

.game-command-menu .avatar-media-slot[aria-selected="true"],
.avatar-media-slot[aria-selected="true"] {
  border-color: rgba(215, 193, 92, 0.72);
  background:
    linear-gradient(100deg, rgba(74, 139, 130, 0.27), rgba(45, 13, 20, 0.5)),
    rgba(4, 21, 21, 0.94);
  color: #f0f5e8;
  box-shadow: inset 2px 0 #65d0c5, inset 0 -1px #d2b958;
}

.avatar-media-slot.is-empty {
  opacity: 0.38;
  border-style: dashed;
  cursor: default;
}

.avatar-media-slot.is-empty > strong {
  color: #52706d;
  font-family: var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
  font-size: 0.46rem;
  letter-spacing: 0.08em;
}

.avatar-media-register {
  position: relative;
  cursor: pointer;
}

.avatar-media-register input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.avatar-media-register.is-compact {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.42rem;
  color: #9eb8b3;
  border: 1px dashed rgba(101, 197, 188, 0.42);
  background: rgba(2, 15, 16, 0.68);
}

.avatar-media-register.is-compact > span {
  color: #d4bd61;
  font: 400 0.8rem/1 sans-serif;
}

.avatar-media-register.is-compact > b {
  font: 700 0.46rem/1 var(--oracle-font-ui, "Yu Gothic UI", Meiryo, sans-serif);
}

.avatar-media-register:hover,
.avatar-media-register:focus-within {
  color: #f1f8f4;
  border-color: rgba(110, 225, 214, 0.78);
}

.avatar-media-register:has(input:disabled) {
  opacity: 0.36;
  cursor: not-allowed;
}

.avatar-media-quick-switch > small {
  overflow: hidden;
  color: rgba(130, 185, 179, 0.54);
  font: 700 0.4rem/1 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-media-quick-switch > small[data-state="error"] {
  color: #e66c72;
}

.avatar-media-slot-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.48rem 0 0.56rem;
  color: #5a8d88;
  font: 700 0.47rem/1.3 var(--oracle-font-code, "Cascadia Code", Consolas, monospace);
}

.avatar-media-slot-meta b {
  color: #ceb75d;
  font: inherit;
}

.avatar-media-slot-meta small {
  color: #466e6a;
  font-size: 0.44rem;
  text-align: right;
}

.avatar-vrm-actions {
  grid-template-columns: 1fr 1fr;
}

.avatar-vrm-actions [data-avatar-slot-default] {
  grid-column: 1 / -1;
}

@media (max-height: 850px) and (min-width: 781px) {
  .avatar-media-quick-switch {
    margin-bottom: 0.28rem;
    padding-block: 0.32rem;
  }

  .avatar-media-quick-switch > small {
    display: none;
  }

  .game-command-menu .avatar-media-slot {
    height: 1.85rem;
  }
}

@media (max-width: 780px) {
  .avatar-media-quick-switch {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-media-slot {
    transition: none;
  }
}
