/* All geometry is in source pixels, multiplied by one shared --hud-scale. */
.hud-button {
  --cell-width: 328;
  --cell-height: 384;
  display: inline-block;
  flex: 0 0 auto;
  width: calc(var(--cell-width) * 1px * var(--hud-scale, .4));
  height: calc(var(--cell-height) * 1px * var(--hud-scale, .4));
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--art);
  background-size: 200% 100%;
  background-position: left top;
  background-repeat: no-repeat;
  vertical-align: bottom;
  cursor: pointer;
  appearance: none;
  transform: none;
}
.hud-button[data-rank="hero"] { --cell-width: 464; --cell-height: 544; margin-top: 3px; }
.hud-button[data-rank="end"] { --cell-width: 544; --cell-height: 544; }
.hud-button:disabled { background-position: right top; cursor: not-allowed; }
.hud-button:hover:not(:disabled) { filter: brightness(1.08); transform: none; }
.hud-button:focus-visible { outline: 2px solid #f0d897; outline-offset: calc(-12px * var(--hud-scale, .4)); border-radius: 12px; }
.hud-button[hidden] { display: none; }
.hud-button[data-action="fire"] { --art: url("./fire.png"); }
.hud-button[data-action="move"] { --art: url("./move.png"); }
.hud-button[data-action="load-ball"] { --art: url("./load-ball.png"); }
.hud-button[data-action="load-chain"] { --art: url("./load-chain.png"); }
.hud-button[data-action="load-grape"] { --art: url("./load-grape.png"); }
.hud-button[data-action="repair-hull"] { --art: url("./repair-hull.png"); }
.hud-button[data-action="repair-sails"] { --art: url("./repair-sails.png"); }
.hud-button[data-action="rotate-port"] { --art: url("./rotate-port.png"); }
.hud-button[data-action="rotate-starboard"] { --art: url("./rotate-starboard.png"); }
.hud-button[data-action="flee"] { --art: url("./flee.png"); }
.hud-button[data-action="end-turn"] { --art: url("./end-turn.png"); }

.pirate-hud {
  --hud-scale: .26;
  position: relative;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 16px);
  height: calc(656px * var(--hud-scale));
  padding: 0;
  overflow: visible;
}

.pirate-hud::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: calc(96px * var(--hud-scale)) solid transparent;
  border-image-source: url("./hud-bar.png");
  border-image-slice: 96 fill;
  border-image-width: calc(96px * var(--hud-scale));
  border-image-repeat: stretch;
  pointer-events: none;
}

.pirate-hud-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 100%;
  padding: calc(48px * var(--hud-scale)) calc(128px * var(--hud-scale)) 0 calc(128px * var(--hud-scale));
}

.pirate-hud-row > .hud-button[data-rank="hero"] + .hud-button[data-rank="hero"],
.pirate-hud-row > .hud-button[data-rank="hero"] + .hud-group {
  margin-left: calc(6px * var(--hud-scale));
}

.hud-group {
  --tiles: 3;
  --group-pad-x: 100;
  --group-pad-y: 64;
  --group-pad-bottom: 44;
  position: relative;
  flex: 0 0 auto;
  width: calc((var(--group-pad-x) * 2 + 328 * var(--tiles)) * 1px * var(--hud-scale));
  height: calc((var(--group-pad-y) + 384 + var(--group-pad-bottom)) * 1px * var(--hud-scale));
  margin-top: calc(54px * var(--hud-scale));
}

.hud-group[data-tiles="2"] { --tiles: 2; }
.hud-group[data-tiles="3"] { --tiles: 3; }

.hud-group + .hud-group {
  margin-left: calc(16px * var(--hud-scale));
}

.hud-group::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: calc(80px * var(--hud-scale)) solid transparent;
  border-image-source: url("./group-frame.png");
  border-image-slice: 80 fill;
  border-image-width: calc(80px * var(--hud-scale));
  border-image-repeat: stretch;
  pointer-events: none;
}

.hud-group-banner {
  position: absolute;
  left: 50%;
  top: calc(-30px * var(--hud-scale));
  width: calc(640px * var(--hud-scale));
  height: calc(88px * var(--hud-scale));
  transform: translateX(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

.hud-group[data-group="reload"] .hud-group-banner { background-image: url("./banner-reload.png"); }
.hud-group[data-group="repair"] .hud-group-banner { background-image: url("./banner-repair.png"); }
.hud-group[data-group="rotate"] .hud-group-banner { background-image: url("./banner-rotate.png"); }

.hud-group-tiles {
  position: absolute;
  left: calc(var(--group-pad-x) * 1px * var(--hud-scale));
  top: calc(var(--group-pad-y) * 1px * var(--hud-scale));
  display: flex;
  z-index: 1;
}

.hud-end-cluster {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  margin-left: calc(20px * var(--hud-scale));
}

.hud-end-cluster .hud-button[data-action="flee"] {
  margin-top: calc(128px * var(--hud-scale));
}

.hud-end-cluster .hud-button[data-rank="end"] {
  margin-left: calc(36px * var(--hud-scale));
}

.hud-end-cluster .hud-button[data-action="flee"][hidden] + .hud-button[data-rank="end"] {
  margin-left: calc(8px * var(--hud-scale));
}