/* Grid, not flex space-between — with flex, touch-build's position depends
   on how wide its neighbors are, so it visibly drifted every time the HUD
   text's digit count changed (ping/coins ticking over). A 1fr/auto/1fr grid
   keeps the two outer columns exactly equal width regardless of their own
   content, which keeps the middle (auto) column dead-centered on the bar
   no matter what the left group or hud text contain. minmax(0, ...) on the
   outer tracks (rather than bare 1fr) stops either one from growing past
   its fair half-share to fit its own content — without it, two buttons on
   the left (leave-room + fullscreen-btn) outweighing the single hud span on
   the right could still throw the center off, the same drift this grid was
   built to kill in the first place. */
#hud-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-hud);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-panel-bg);
}

.hud-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

#leave-room,
#fullscreen-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  color: var(--color-button-text);
  font-weight: var(--font-weight-bold);
  font-size: 0.9rem;
}
#leave-room:hover,
#fullscreen-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Lives here, not next to touch-shoot, specifically so a mode toggle isn't
   sitting right next to the fire button where an accidental drag/tap could
   hit either one. */
#touch-build {
  justify-self: center;
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  color: var(--color-button-text);
  font-weight: var(--font-weight-bold);
  font-size: 0.9rem;
  touch-action: none; /* user-select/-webkit-touch-callout now come from the global rule in base.css */
}
#touch-build:hover {
  background: var(--color-primary);
  color: #fff;
}
/* Set from game.ts's toggleBuildMode alongside the touch-shoot label swap —
   the toggle button itself should read as "on" the same way the confirm
   button's label does. */
#touch-build.active {
  background: var(--color-primary);
  color: #fff;
}

#hud {
  justify-self: end;
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums; /* digit width stays constant as numbers tick over, instead of the text (and everything after it) subtly reflowing every update */
}