/* src/hud-layout.css
 * HUD-CORE-01 (#2785) — HUD layout baseline.
 * Structural skeleton for the four HUD regions. No visual branding here —
 * that belongs to Sprint 3B visual tokens.
 *
 * Walk-while-open guarantee: #hud-root is pointer-events: none at the
 * container level. Sub-regions opt back in with pointer-events: auto.
 * This ensures WASD movement keys are NEVER captured by the HUD container.
 */

/* ── #hud-root container ─────────────────────────────────────────────────── */

#hud-root {
  position: fixed;
  inset: 0;                       /* top/right/bottom/left: 0 */
  z-index: 100;                   /* HUD_DENSITY.Z_HUD */
  pointer-events: none;           /* WALK-WHILE-OPEN: never capture WASD */
  display: none;                  /* hidden until startGame(); prevents bleed-through onto start/gameover screens */
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "top-row   top-row      top-row"
    "player-f  .            right-sb"
    "bottom    bottom       bottom";
}

/* ── Top row ─────────────────────────────────────────────────────────────── */

#hud-top-row {
  grid-area: top-row;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  min-height: 44px;               /* HUD_DENSITY.MIN_TOUCH_TARGET_PX */
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}

/* ── Left player frame ───────────────────────────────────────────────────── */

#hud-player-frame {
  grid-area: player-f;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}

/* ── Right sidebar ───────────────────────────────────────────────────────── */

/* HUD-NAV-ICONS-01: #side-panel removed — right sidebar now only holds
   #inv-panel (position:fixed, opts back in via its own pointer-events:auto).
   pointer-events:none prevents empty padding from blocking game clicks. */
#hud-right-sidebar {
  grid-area: right-sb;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 0;
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}

/* ── Bottom bar ──────────────────────────────────────────────────────────── */

#hud-bottom-bar {
  grid-area: bottom;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
  min-height: 44px;               /* HUD_DENSITY.MIN_TOUCH_TARGET_PX */
  font-size: 14px;                /* HUD_DENSITY.BASE_FONT_PX */
}