/* =========================================================================
 * style.css —— 画布自适应（letterbox 黑边）+ 页面底色
 * -------------------------------------------------------------------------
 * 画布内部分辨率永远是 1280x720，这里只负责把它「等比」塞进窗口：
 *   宽度 = min(100vw, 100vh * 16/9)      100vh * 16/9 = 177.7778vh
 *   高度 = min(56.25vw, 100vh)           100vw * 9/16 = 56.25vw
 * 多出来的部分就是黑边。窗口怎么拖，比例都不变形。
 * ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", sans-serif;
  /* 游戏里是自动跑 + 跳跃，不需要文本选择/拖拽 */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  /* 移动端：禁缩放/禁惯性滚动回弹/禁长按菜单/禁双击缩放手势（微信里尤其关键）*/
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  /* 适配刘海屏安全区；canvas letterbox 居中，四周黑边可接受 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#game {
  display: block;
  background: #000;
  /* 实际尺寸由 game.js 的 resize() 按窗口算好后写到 style 上 */
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
  /* 关键：禁止浏览器把画布当图片做默认手势（双指缩放/长按保存）*/
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 竖屏遮罩：仅在 portrait 显示。盖住整屏、拦截所有触摸，强制横屏游玩。
 * 横屏时 display:none，完全不挡操作。 */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0d0d12;
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  user-select: none;
  -webkit-user-select: none;
}
#rotate-hint .icon { font-size: 64px; margin-bottom: 18px; }
#rotate-hint .txt { font-size: 22px; letter-spacing: 1px; }

@media (orientation: portrait) {
  #rotate-hint { display: flex; }
}