:root {
  --bg: #0d1117;
  --fg: #e6edf3;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family:
    system-ui,
    -apple-system,
    'Hiragino Sans',
    sans-serif;
  /* iPhone: ゲーム中のスクロール・長押し選択・ダブルタップ拡大を止める */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* キャンバスを収める枠。ScreenManager がこの枠の大きさを測って、論理解像度を
   アスペクト比のまま最大サイズに拡大し、中央に置く（position: relative は必須） */
#stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 幅・高さ・位置は ScreenManager が毎回インラインで設定する（ここでは指定しない）。
   はみ出す分は #stage の overflow: hidden で切られる */
#canvas {
  display: block;
  /* touch-action は継承しないので、指を受ける canvas 自身にも指定する。
     これが無いと iPhone が指の動きをスクロールと解釈して pointercancel を出し、
     指の操作が途中で切れる */
  touch-action: none;
}

/* HUD は canvas の上に重ねる。セーフエリア（iPhone のノッチ／ホームバー）を避ける */
#hud {
  position: absolute;
  inset: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px
    calc(env(safe-area-inset-bottom, 0px) + 8px) 12px;
  pointer-events: none;
}