.equipment-options-wrapper {
  display: flex;
  margin: 8px;
}

.equipment-buttons {
  flex: 1 1 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0 4px;
}

.equipment-buttons button {
  width: 100%;
  margin: 0 2px 4px;
  height: 20px;
}

/* No space under the last button, so it ends exactly where the status bar ends */
.equipment-buttons button:last-child {
  margin-bottom: 0;
}

/* Equipment on top, the status bar fills the rest: its bottom lines up with the Logout button */
.first-wrapper {
  display: flex;
  flex-direction: column;
}

.first-wrapper .status-bar {
  flex: 1 0 auto;
}

/* A menu button whose window is opened (theme accent, see theme.css) */
.equipment-buttons button.selected {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: var(--gradient-surface-light);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 4px var(--color-accent-glow);
}

.character-status {
  margin: 8px;
}

/* Dark sunken track behind the health and mana fills */
.bar {
  border: 1px solid black;
  margin: 3px 2px;
  border-radius: 4px;
  height: 14px;
  text-align: center;
  cursor: pointer;
  background-color: #1a1a1a;
  background-image: linear-gradient(to bottom, #111, #2a2a2a);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.bar:hover {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 4px var(--color-accent-glow);
}

.bar .icon {
  position: absolute;
  left: 0;
  font-size: 10px;
}

/* White value text with a dark outline so it stays readable over the fill and the empty track */
.bar .percentage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 14px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  pointer-events: none;
}

/* Shared fill: glossy highlight on the top half, smooth width changes */
.character-health,
.character-mana {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: width 0.2s ease-out;
}

.character-health::after,
.character-mana::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
}

.character-health {
  background-image: linear-gradient(to bottom, var(--color-health-top), var(--color-health-bottom));
}

.character-mana {
  background-image: linear-gradient(to bottom, var(--color-mana-top), var(--color-mana-bottom));
}

.equipment.wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.equipment-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.status-bar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 18px;
  margin-top: 4px;
  background-image: url("/png/bg3.png?v=cabdf9c77067");
  border: 1px solid black;
}

.status-bar > * {
  flex: 0 0 auto;
}

/* Own PvP skull: the 11x11 skull centered in an 18px icon with the frame and dark background of the other status icons */
.status-bar .status-skull {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-status-icon-frame);
  background: var(--color-status-icon-background);
}

/* One row holds 7 icons of 18px (126px inside the border). From the 8th icon on, wrap into two rows of
   9px icons (half size): two rows are exactly as tall as one 18px row, so the bar never grows
   (up to 28 icons fit) */
.status-bar:has(> :nth-child(8)) {
  flex-wrap: wrap;
  align-content: center;
}

.status-bar:has(> :nth-child(8)) > * {
  width: 9px;
  height: 9px;
}

.status-bar:has(> :nth-child(8)) .status-skull .skull {
  width: 7px;
  height: 7px;
}

/* Mail waiting in the inbox: pulses so players notice it and hover for the message */
.status-bar img.status-mail {
  margin-left: auto;
  cursor: help;
  animation: status-mail-pulse 1.6s ease-in-out infinite;
}

@keyframes status-mail-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 3px var(--color-accent-glow)); }
}

#head-slot {
  background-image: url("/png/head.png?v=f12c23575aef");
}

#armor-slot {
  background-image: url("/png/armor.png?v=990745cccc07");
}

#legs-slot {
  background-image: url("/png/legs.png?v=557a8b682f4b");
}

#backpack-slot {
  background-image: url("/png/backpack.png?v=b0da4ff7575a");
}

#boots-slot {
  background-image: url("/png/boots.png?v=2f25f63566b4");
}

#left-slot {
  background-image: url("/png/left.png?v=ca1aef6b9532");
}

#right-slot {
  background-image: url("/png/right.png?v=7d073ea5f3d9");
}

#quiver-slot {
  background-image: url("/png/quiver.png?v=dfce706d7f90");
}

/* shoulder.png and ring.png use a different art style (teal fill, light frame).
   Draw them on the regular item.png frame, cropping their own frame and
   desaturating them so they match the other slots. Only while the slot is
   empty: equipment.js toggles the "empty" class. */
#shoulder-slot,
#ring-slot {
  background-image: url("/png/item.png?v=144ce53c48c0");
}

#shoulder-slot.empty::before,
#ring-slot.empty::before {
  content: "";
  position: absolute;
  inset: 2px;
  background-position: -2px -2px;
  filter: grayscale(1) brightness(0.8);
  pointer-events: none;
}

#shoulder-slot::before {
  background-image: url("/png/shoulder.png?v=86a05f8d5c18");
}

#ring-slot::before {
  background-image: url("/png/ring.png?v=ba82011e94d6");
}

/* Same height as a slot (32px + 2px border) so the side columns stay on the slot grid */
.equipment-padding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  height: 34px;
}

/* The Keys button fills the padding cell */
#keyring {
  height: 100%;
}

/* Slot-wide so a long capacity value never widens the column and pushes the equipment */
#player-capacity {
  width: 34px;
  white-space: nowrap;
  overflow: hidden;
}