/* src/styles/hud.css */

#hud {
  display: none;
}

.hud-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.hud-label {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hud-left,
.hud-right {
  display: flex;
  gap: 16px;
}

@media (max-width: 768px) {
  #hud {
    display: flex;
    justify-content: space-between;
    padding: 4px 12px;
    border-bottom: 1px solid #333333;
    background: #1a1a1a;
    font-size: 12px;
    font-family: var(--mono);
    position: relative;
    z-index: 97;
    flex-shrink: 0;
    height: 28px;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
  }

  .hud-line {
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
  }

  .hud-left,
  .hud-right {
    gap: 16px;
    flex-shrink: 0;
    align-items: center;
  }
}