/* WarUniverse responsive HUD / viewport helpers
   Driven by js/viewportManager.js CSS vars:
   --ui-scale, --wu-hud-scale, --hud-safe-x, --hud-safe-y, --wu-vp-w, --wu-vp-h
*/

#game {
  --ui-scale: 1;
  --wu-hud-scale: var(--ui-scale);
  --hud-safe-x: 10px;
  --hud-safe-y: 10px;
}

/* Sharp game canvas — CSS size from ViewportManager; buffer is HiDPI */
#game canvas#canvas {
  image-rendering: auto;
  touch-action: none;
}

/* Profile stack already uses --wu-hud-scale; keep media fallbacks softer */
@media (max-width: 1600px) {
  #game:not([style*="--wu-hud-scale"]) { --wu-hud-scale: 0.95; }
}
@media (max-width: 1400px) {
  #game:not([style*="--wu-hud-scale"]) { --wu-hud-scale: 0.9; }
}

/* Safe-area aware anchors for key HUD docks */
#game .hud-profile-stack {
  top: max(42px, calc(var(--hud-safe-y) + 32px));
  left: max(10px, var(--hud-safe-x));
}

#game .hud-profile-restore {
  top: max(42px, calc(var(--hud-safe-y) + 32px));
  left: max(10px, var(--hud-safe-x));
}

#game #hud-lobby-nav,
#game .feature-menu {
  top: max(8px, var(--hud-safe-y));
}

/* Slotbar: center with translateX; scale crisply via zoom (transform:scale blurs icons) */
#game #do-slotbar {
  transform: translateX(-50%);
  transform-origin: bottom center;
  zoom: var(--ui-scale, 1);
  bottom: max(14px, var(--hud-safe-y));
  max-width: calc(100vw - 24px);
}
@supports not (zoom: 1) {
  #game #do-slotbar {
    zoom: normal;
    transform: translateX(-50%) scale(var(--ui-scale, 1));
  }
}

/* Minimap default dock respects safe area (JS may override left/top) */
#game .minimap {
  max-width: min(420px, calc(100vw - 2 * var(--hud-safe-x)));
}

/* Chat / log: don't exceed viewport */
#game #chat-panel {
  max-width: min(480px, calc(100vw - 2 * var(--hud-safe-x)));
  max-height: min(420px, calc(100vh - 120px));
}

#game #log {
  max-width: min(360px, calc(100vw - 2 * var(--hud-safe-x)));
  max-height: min(280px, calc(100vh - 160px));
}

/* Map station / hangar / shop windows */
#game .map-station-win {
  max-width: min(1320px, calc(100vw - 2 * var(--hud-safe-x))) !important;
  left: max(var(--hud-safe-x), var(--ms-left, 20px));
  right: max(var(--hud-safe-x), var(--ms-right, 20px));
}

#game .do-embed-frame {
  height: min(calc(100vh - 150px), calc(100dvh - 150px));
  min-height: min(560px, calc(100vh - 180px));
  max-height: calc(100vh - 120px);
}

/* Hangar: fill station window — fixed vh height clips drone/PET rows */
#game .map-station-win[data-panel="hangar"] .do-embed-frame {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Generic modals stay inside viewport */
#game .modal-layer .modal-card,
.modal-layer .modal-card {
  max-width: min(960px, calc(100vw - 32px));
  max-height: min(90vh, calc(100dvh - 32px));
  overflow: auto;
}

/* PET panel: keep readable on small screens without fighting minimize transforms */
#game .map-pet-wrap {
  max-width: min(352px, calc(100vw - 24px));
}

/* Utility rail */
#hud-utility-rail {
  top: max(10px, var(--hud-safe-y));
  right: max(10px, var(--hud-safe-x));
  zoom: var(--ui-scale);
  transform-origin: top right;
}
@supports not (zoom: 1) {
  #hud-utility-rail {
    zoom: normal;
    transform: scale(var(--ui-scale));
  }
}

/* Short viewports: compress vertical chrome */
@media (max-height: 800px) {
  #game .hud-profile-stack {
    gap: 6px;
  }
  #game #do-slotbar {
    bottom: max(8px, var(--hud-safe-y));
  }
}

@media (max-width: 1280px) {
  #game #hud-lobby-nav {
    max-width: calc(100vw - 16px);
  }
}

/* Prevent accidental page scrollbars when game is active */
html.wu-game-on,
html.wu-game-on body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Fractional-pixel crisp borders on thin HUD chrome */
#game .hud-win.hud-go,
#game .minimap,
#game #chat-panel,
#game #log {
  outline: 1px solid transparent;
}