/* Combat controls: a slim strip right of the equipment slots, exactly as tall as the four slot rows,
   so its top and bottom line up with the slots. Three framed groups: fight mode, chase mode and secure mode. */
.fight-mode-column {
  align-self: stretch;
  margin-left: 4px;
}

.fight-mode-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4px;
}

/* Each group is a sunken dark frame holding its buttons, so the three categories read apart.
   The flex basis is the frame's own overhead (2px border + 2px padding + 1px per inner gap) and the
   group grows by its button count, so every button in the strip gets exactly the same height */
.combat-group {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 26px;
  min-height: 0;
  padding: 1px;
  border: 1px solid #111;
  border-radius: 3px;
  background-color: #141414;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.combat-group-fight {
  flex: 3 1 6px;
}

.combat-group-chase {
  flex: 2 1 5px;
}

.combat-group-secure {
  flex: 1 1 4px;
}

/* Raised buttons inside the frame, with a white icon */
.fight-mode-btn,
.chase-mode-btn,
.secure-mode-btn {
  box-sizing: border-box;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #0a0a0a;
  border-radius: 2px;
  background-image: var(--gradient-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: white;
  cursor: pointer;
}

.fight-mode-btn svg,
.chase-mode-btn svg,
.secure-mode-btn svg {
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}

/* Hovered buttons that are not selected: lighter surface and the soft accent on the icon */
.fight-mode-btn:hover,
.chase-mode-btn:hover,
.secure-mode-btn:hover {
  border-color: #0a0a0a;
  background-image: var(--gradient-surface-hover);
}

.fight-mode-btn:not(.active):hover,
.chase-mode-btn:not(.active):hover,
.secure-mode-btn:not(.secure-off):hover {
  color: var(--color-accent-text);
}

/* Selected button: pressed in, icon, inner edge and background in the color of the mode.
   The default is the gold theme accent (Balanced, Stand, Chase) */
.fight-mode-btn.active,
.chase-mode-btn.active {
  color: var(--color-accent);
  border-color: #0a0a0a;
  background-image: linear-gradient(to bottom, #1c1c1c, var(--color-accent-dark));
  box-shadow: inset 0 0 0 1px var(--color-accent), inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Full Attack: red */
.fight-mode-btn[data-mode="offensive"].active {
  color: var(--color-danger);
  background-image: linear-gradient(to bottom, #1c1c1c, var(--color-danger-dark));
  box-shadow: inset 0 0 0 1px var(--color-danger), inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Full Defense: green */
.fight-mode-btn[data-mode="defensive"].active {
  color: var(--color-success);
  background-image: linear-gradient(to bottom, #1c1c1c, var(--color-success-dark));
  box-shadow: inset 0 0 0 1px var(--color-success), inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Secure mode off (selected): red closed fist, unmarked players can be attacked.
   While secure mode is on the button stays white with the open hand */
.secure-mode-btn.secure-off {
  color: var(--color-danger);
  border-color: #0a0a0a;
  background-image: linear-gradient(to bottom, #1c1c1c, var(--color-danger-dark));
  box-shadow: inset 0 0 0 1px var(--color-danger), inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.secure-mode-btn .secure-off-icon,
.secure-mode-btn.secure-off .secure-on-icon {
  display: none;
}

.secure-mode-btn.secure-off .secure-off-icon {
  display: block;
}