/* Flow owns the HUD height; the canvas uses its measured remainder. */
.game-column { display: block; }
#game-hud {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 62px;
  align-items: center; gap: 5px 8px; width: min(520px, calc(100% - 20px));
  margin: 8px auto 0; padding-bottom: 8px; box-sizing: border-box;
  z-index: 200; pointer-events: none; color: #e4f8ff;
}
.brand-title { display: block; width: clamp(230px, 28vw, 320px); max-width: 100%; height: auto; pointer-events: none; user-select: none; }
#game-hud > .brand-title { grid-column: 1; justify-self: center; }
#welcome-screen .brand-title { width: min(290px, 100%); margin: 0 auto; }
#music-settings-container > .brand-title { flex: 0 0 auto; width: min(230px, 100%); margin: 0 auto 8px; }
@media (min-width: 1040px) {
  .game-column > :is(#rotate-control, #zoom-control) { display: none; }
  .game-column > :is(.control-section, #rotate-buttons-float) { bottom: 16px; }
}
@media (max-width: 1039px) {
  #game-hud #next-piece-preview { grid-row: 1; }
  #game-hud #statusBar { grid-row: 1; }
}
#game-hud #next-piece-preview {
  grid-column: 2; grid-row: 1 / 3; position: static; transform: none;
  width: 62px; height: 76px; min-width: 0; padding: 0; box-sizing: border-box;
}
#game-hud #next-piece-preview h3 { margin: 4px 0 0; font-size: 10px; }
#game-hud #next-piece-container { width: 58px; height: 55px; margin: 0; }
#game-hud #next-piece-container canvas { position: static; width: 55px !important; height: 55px !important; }
#game-hud #statusBar {
  grid-column: 1; position: static; inset: auto; transform: none; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px; padding: 0; margin: 0; background: transparent;
}
#game-hud :is(#statusLeft, #statusRight, #statusCenter) { position: static; width: auto; min-width: 0; margin: 0; order: initial; gap: 4px; align-items: stretch; }
#game-hud #statusCenter { align-items: center; }
#game-hud #scoreboard { min-width: 36px; padding: 4px 6px; font-size: clamp(18px, 2.4vw, 26px); text-align: center; }
#game-hud :is(#pieceCounterBar, #gridProgressBar, #gameSpeedBar, #highScoreBar) { width: 100%; height: 18px; margin: 0; box-sizing: border-box; }
#game-hud :is(#pieceCounterText, #gridProgressText, #gameSpeedText, #highScoreText) {
  position: absolute; inset: 0; display: grid; place-items: center; transform: none;
  font: 700 clamp(8px, 1.2vw, 10px)/1 system-ui, sans-serif; white-space: nowrap;
}
#game-hud #campaign-stage-indicator {
  grid-column: 1 / -1; position: static; inset: auto; transform: none;
  width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 4px 7px;
  border: 1px solid #a7ff2477; border-radius: 8px; background: rgb(7 27 45 / .8);
  font: 600 clamp(10px, 1.3vw, 11px)/1.3 system-ui, sans-serif; text-align: left;
}
.campaign-progress-label { display: flex; justify-content: space-between; gap: 2px 8px; flex-wrap: wrap; }
.campaign-progress-label > span { white-space: nowrap; }
.campaign-progress-track { height: 4px; margin-top: 3px; border: 0; background: #103849; }
.campaign-progress-fill { background: linear-gradient(90deg, #38e9ff, #a7ff24); }
.game-column > canvas { top: var(--hud-height, 130px); height: calc(100% - var(--hud-height, 130px)) !important; }
.ai-pilot-overlay { top: calc(var(--hud-height, 130px) + 6px); }
.game-column.duel-split > canvas { top: var(--hud-height, 130px); height: calc(100% - var(--hud-height, 130px)) !important; }
.game-column.duel-split #game-hud { width: min(520px, calc(50% - 20px)); margin-left: 10px; }
.game-column.duel-split > #rotate-buttons-float { right: calc(50% + 10px); }
.duel-turn-panel { top: calc(var(--hud-height, 130px) + 8px); }
@media (max-width: 700px) {
  #game-hud { gap: 4px 6px; }
  #game-hud > .brand-title { width: clamp(170px, 40vw, 230px); }
  #game-hud #statusBar { gap: 4px; }
  .game-column.duel-split #game-hud { width: calc(100% - 20px); margin-inline: 10px; }
  .game-column.duel-split > canvas { height: calc(50% - var(--hud-height, 130px)) !important; }
  .game-column.duel-split > :is(.control-section, #rotate-buttons-float) { bottom: calc(50% + 64px); }
  .game-column.duel-split > #rotate-buttons-float { right: 10px; }
  body.left-handed-mobile .game-column.duel-split > #rotate-buttons-float { right: auto; left: 10px; }
}
@media (max-height: 480px) {
  #game-hud { margin-top: 3px; gap: 3px 6px; padding-bottom: 3px; }
  #game-hud > .brand-title { width: 120px; }
  #game-hud :is(#pieceCounterBar, #gridProgressBar, #gameSpeedBar, #highScoreBar) { height: 13px; }
  #game-hud #scoreboard { font-size: 17px; padding: 2px 4px; }
  #game-hud #next-piece-preview { height: 54px; }
  #game-hud #next-piece-container, #game-hud #next-piece-container canvas { width: 36px !important; height: 36px !important; }
  #game-hud #campaign-stage-indicator { font-size: 9px; line-height: 1.15; padding: 1px 5px; }
}