/* Live visual viewport and explicit rotation layouts for phones. */
html,
body,
#game-shell {
  width: var(--game-viewport-width, 100vw);
  height: var(--game-viewport-height, 100dvh);
  min-height: 0;
}

.orientation-hint {
  display: none !important;
}

@media (orientation: portrait) and (max-width: 720px) {
  .menu-screen {
    height: var(--game-viewport-height, 100dvh);
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding-top: max(18px, var(--safe-top));
    padding-bottom: max(12px, var(--safe-bottom));
  }

  .brand-block { align-self: center; }
  .brand-block h1 { font-size: clamp(48px, 15vw, 76px); }
  .menu-actions { gap: 8px; }
  .game-button.primary { min-height: 58px; }
  .game-button.secondary { min-height: 50px; }
  .battle-hud { top: calc(5px + var(--safe-top)); min-height: 88px; }
  .queue-strip { bottom: calc(202px + var(--safe-bottom)); }
  .battle-actions { bottom: calc(5px + var(--safe-bottom)); min-height: 184px; }
  .tower-panel { top: calc(108px + var(--safe-top)); bottom: calc(202px + var(--safe-bottom)); }
}

@media (orientation: landscape) and (max-height: 600px) {
  #game-shell { height: var(--game-viewport-height, 100dvh); }
  .screen-pad { padding-top: calc(10px + var(--safe-top)); padding-bottom: calc(10px + var(--safe-bottom)); }
  .menu-screen { grid-template-columns: minmax(300px, 1fr) minmax(260px, .7fr); grid-template-rows: 1fr auto; }
  .brand-block { align-self: center; padding-left: 4vw; text-align: left; }
  .brand-block h1 { font-size: clamp(48px, 9vw, 80px); }
  .menu-actions { align-self: center; margin-right: 3vw; }
  .progress-ribbon { grid-column: 1 / -1; min-height: 34px; padding-block: 6px; }
  .battle-hud { top: calc(3px + var(--safe-top)); min-height: 56px; padding: 5px 8px; }
  .queue-strip { bottom: calc(112px + var(--safe-bottom)); }
  .battle-actions { bottom: calc(3px + var(--safe-bottom)); min-height: 104px; padding: 5px; }
  .tower-panel { top: calc(64px + var(--safe-top)); bottom: calc(113px + var(--safe-bottom)); }
}