/* 固定舞台 H5 樣板：舞台是設計稿尺寸的固定畫布，整體等比縮放塞進手機可視區。
   換專案只改 --stage-w／--stage-h；每一條的理由見 TEMPLATE.md。 */
:root {
  --stage-w: 720px;  /* 設計單位：720×1280（9:16）。2026-09-21 依正式素材校正（1-bg@2x = 1441×2561） */
  --stage-h: 1280px;
}

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

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;     /* 不支援 dvh 的舊瀏覽器 */
  height: 100dvh;   /* 高度交給瀏覽器：網址列、App 返回列出現或收起都會自動更新 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 舊瀏覽器備援 */
  overflow: clip;   /* hidden 仍允許焦點、鍵盤、scrollIntoView 的程式捲動，會把舞台推歪 */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: #dfeaf2;
}

#stage {
  position: relative;
  flex: none;
  width: var(--stage-w);
  height: var(--stage-h);
  overflow: hidden;
  transform-origin: center center;
  isolation: isolate;
  background: #fff;
}