/* R-008.7: fixed-position full-screen layout, safe-area insets, no
   scrolling, no zoom, no pull-to-refresh.
   R-008.10: colours come from --c-* custom properties main.js sets on :root
   from theme.palette; this file only references those variables. HUD,
   popup, overlay, chain-bar rules and their animations live in
   components.css so each stylesheet stays <=300 lines (CLAUDE.md §3). */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
  background: var(--c-background);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  font-family: system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--c-text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* R-008.11: the app (HUD + play area + chain bar) is a centred column no
   wider than MAX_APP_WIDTH (config.js, set as this CSS var by main.js); the
   page's own background (set on html/body above) fills the space either
   side on wide viewports. Fallback 480px matches config.js in case this
   runs before main.js sets the var. */
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: var(--app-max-width, 480px);
  margin-inline: auto;
  overflow: hidden;
}

/* R-008.10 (clarified): the canvas paints its own background/floor/board
   colours; this is just the DOM container behind it, so it uses the same
   surround colour (`background`) the canvas uses outside the board. */
#play-area {
  flex: 1 1 auto;
  /* R-001.1: without this, a flex item's default min-height is content-based,
     so the canvas could force #play-area (and #app) taller than the space
     really available, clipping the chain bar below the fold — the exact
     defect R-001.1 fixes. min-height: 0 makes the flex-basis the real cap,
     and board.js sizes the canvas to fit inside it. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  background: var(--c-background);
  position: relative;
}

/* R-007.4: dims the board while a targeted power-up is armed. pointer-events
   stays none so the pointerup that applies the effect still reaches #board. */
#play-area.targeting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

#board {
  display: block;
  touch-action: none;
}