.combat-controls {
  display: grid;
  grid-template-columns: minmax(76px, 124px) minmax(70px, 1fr) minmax(
      76px,
      124px
    );
  gap: 10px;
  align-items: center;
  margin: 18px auto 8px;
  width: 100%;
  max-width: 570px;
  user-select: none;
}
.combat-control-column {
  display: grid;
  gap: 9px;
  justify-items: center;
  min-width: 0;
}
.combat-control-column > span {
  color: #4d6659;
  font-size: 11px;
  text-align: center;
  font-weight: 650;
}
.combat-pad {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, #f3f4df, #c9d7c0);
  box-shadow:
    inset 0 3px 9px #29443829,
    inset 0 -1px 1px #fff,
    0 5px 0 #acbda7,
    0 9px 20px #35563e17;
  border: 1px solid #b4c8ae;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.combat-pad-rim {
  position: absolute;
  inset: 10%;
  border: 1px dashed #75927875;
  border-radius: 50%;
}
.combat-knob {
  position: absolute;
  inset: 23%;
  display: grid;
  place-items: center;
  color: #3d6750;
  background: linear-gradient(145deg, #fbfae8, #d8e1c9);
  border: 1px solid #fff8;
  border-radius: 50%;
  box-shadow:
    0 5px 0 #a4b79a,
    0 7px 12px #314b3b35;
  transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms;
  pointer-events: none;
}
.combat-knob svg {
  width: 48%;
  height: 48%;
}
.combat-pad[data-combat-pad="fire"],
.combat-pad[data-combat-pad="attack"] {
  background: radial-gradient(circle at 45% 35%, #fcf0dc, #e5cba8);
  border-color: #ceb38d;
  box-shadow:
    inset 0 3px 9px #70482129,
    inset 0 -1px 1px #fff,
    0 5px 0 #c1a782,
    0 9px 20px #35563e17;
}
.combat-pad[data-combat-pad="fire"] .combat-knob,
.combat-pad[data-combat-pad="attack"] .combat-knob {
  color: #916a39;
  background: linear-gradient(145deg, #fff5e1, #edd8b5);
  box-shadow:
    0 5px 0 #c2a375,
    0 7px 12px #6b513035;
}
.combat-pad.is-held {
  cursor: grabbing;
}
.combat-pad.is-held .combat-knob {
  transition: none;
}
.combat-pad:focus-visible {
  outline: 3px solid #679986;
  outline-offset: 5px;
}
.combat-controls[data-combat-locked="1"] .combat-pad {
  opacity: 0.5;
  cursor: default;
}
.combat-center {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  min-width: 0;
  color: #536b5d;
}
.combat-center output {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
  min-height: 2.7em;
  display: grid;
  align-items: center;
}
.combat-key-hint {
  font-size: 10px;
  line-height: 1.4;
  opacity: 0.75;
}
.combat-power-track {
  display: block;
  height: 5px;
  width: 80%;
  border-radius: 6px;
  background: #dedcc4;
  overflow: hidden;
}
.combat-power-track i {
  display: block;
  height: 100%;
  width: 65%;
  border-radius: inherit;
  background: #c89756;
  transition: width 80ms linear;
}
.combat-legend {
  font-size: 10px;
  line-height: 1.7;
}
.combat-legend svg {
  width: 11px;
  height: 11px;
  vertical-align: -2px;
}
.combat-direct-stage {
  touch-action: none;
  cursor: crosshair;
}
@media (pointer: coarse) {
  .combat-key-hint {
    display: none;
  }
}
@media (max-width: 380px) {
  .combat-controls {
    gap: 8px;
    grid-template-columns: 82px minmax(0, 1fr) 82px;
  }
  .combat-control-column > span {
    font-size: 10px;
  }
  .combat-center output {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .combat-knob,
  .combat-power-track i {
    transition: none;
  }
}