/* Part picker body-map controls. */

.part-picker {
  --part-cell: 34px;
  --part-gap: 2px;
  display: grid;
  grid-template-columns: repeat(4, var(--part-cell));
  grid-template-rows: repeat(6, var(--part-cell));
  gap: var(--part-gap);
  position: relative;
  width: calc(var(--part-cell) * 4 + var(--part-gap) * 3);
  height: calc(var(--part-cell) * 6 + var(--part-gap) * 5);
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #10151e;
  overflow: visible;
}

.part-pick {
  position: relative;
  min-width: 0;
  width: auto;
  height: auto;
  border: 2px solid rgba(49, 56, 70, 0.95);
  border-radius: 10px;
  background: #dde0ea;
  color: #20242d;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  cursor: pointer;
  outline-offset: 2px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(11, 15, 22, 0.14);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.part-pick::after {
  content: '';
  display: none;
}

.part-pick:hover {
  border-color: rgba(238, 244, 255, 0.9);
  filter: brightness(1.08) saturate(1.02);
}

.part-pick.is-selected {
  border-color: rgba(217, 255, 234, 0.96);
  box-shadow:
    0 0 0 2px rgba(124, 195, 162, 0.44),
    0 0 14px rgba(124, 195, 162, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    inset 0 -2px 0 rgba(11, 15, 22, 0.14);
}

.part-head {
  grid-column: 2 / 4;
  grid-row: 1;
  border-radius: 14px;
}

.part-collision-interaction-object {
  grid-column: 1;
  grid-row: 1;
  background: #69b7e5;
}

.part-hurt-interaction-object {
  grid-column: 4;
  grid-row: 1;
  background: #ef4d49;
}

.part-attack-interaction-object {
  grid-column: 1;
  grid-row: 6;
  background: #f0e936;
}

.part-guard-interaction-object {
  grid-column: 4;
  grid-row: 6;
  background: #7ccf92;
}

.part-collision-interaction-object::after,
.part-attack-interaction-object::after,
.part-hurt-interaction-object::after,
.part-guard-interaction-object::after {
  content: '';
  display: none;
}

.part-neck {
  grid-column: 2 / 4;
  grid-row: 2;
  border-radius: 10px;
  background: #cdd2de;
}

.part-body {
  grid-column: 2 / 4;
  grid-row: 3;
  border-radius: 12px;
  background: #d7dae5;
}

.part-shoulder-l {
  grid-column: 4;
  grid-row: 2;
  background: #efb18d;
}

.part-shoulder-r {
  grid-column: 1;
  grid-row: 2;
  background: #98c7ec;
}

.part-upper-arm-l {
  grid-column: 4;
  grid-row: 3;
  background: #f1a172;
}

.part-lower-arm-l {
  grid-column: 4;
  grid-row: 4;
  background: #f0a078;
}

.part-upper-arm-r {
  grid-column: 1;
  grid-row: 3;
  background: #8fbee0;
}

.part-lower-arm-r {
  grid-column: 1;
  grid-row: 4;
  background: #8fbadd;
}

.part-hip-l {
  grid-column: 2;
  grid-row: 4;
  background: #d8cd74;
}

.part-hip-r {
  grid-column: 3;
  grid-row: 4;
  background: #93d5ac;
}

.part-shield {
  grid-column: 4;
  grid-row: 5;
  border-radius: 10px;
  background: #8790a5;
}

.part-weapon {
  grid-column: 1;
  grid-row: 5;
  border-radius: 10px;
  transform: rotate(0deg);
  background: #c7cbd4;
}

.part-upper-leg-l {
  grid-column: 2;
  grid-row: 5;
  background: #d9c96f;
}

.part-lower-leg-l {
  grid-column: 2;
  grid-row: 6;
  background: #d9c96f;
}

.part-upper-leg-r {
  grid-column: 3;
  grid-row: 5;
  background: #92d3a8;
}

.part-lower-leg-r {
  grid-column: 3;
  grid-row: 6;
  background: #92d3a8;
}