/**
 * 手机版样式补丁
 * ---------------------------------------------------------------------------
 * 只在 E 盘的手机版里加载（index.html 里排在 style.css 之后），桌面版不受影响。
 *
 * 解决的全是「在手机浏览器里当网页跑」才会有的问题：
 *   · 双击放大 / 下拉刷新 / 橡皮筋滚动
 *   · 长按选中文字、点按蓝色高亮块
 *   · 刘海屏 / 圆角屏的安全区（env(safe-area-inset-*)）
 *   · 手机浏览器地址栏伸缩导致的高度跳动（用 --app-h 兜，见 mobile.js）
 *   · 触摸设备上按钮太小、间距太密
 */

/* ============================ 通用触屏行为 ============================ */

html.is-touch,
html.is-touch body {
  /* 不许双击放大、不许下拉刷新、不许橡皮筋 */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* 手机浏览器地址栏伸缩时不要跟着跳 */
  height: var(--app-h, 100vh);
  overflow: hidden;
}

/* 舞台按「真实可视高度」重新信箱化。
   style.css 里用的是 100vh —— 手机浏览器上 100vh 是「最大高度」，
   地址栏收起时画面底部会被吞掉一截（退出按钮、对话框下沿）。
   dvh 会跟着地址栏变；--app-h 是 mobile.js 用 innerHeight 兜的旧浏览器方案。 */
html.is-touch #stage {
  width: min(100vw, calc(var(--app-h, 100dvh) * 16 / 9));
  height: min(var(--app-h, 100dvh), calc(100vw * 9 / 16));
}

html.is-touch input,
html.is-touch textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* 全屏时（浏览器原生全屏）撑满，别留白 */
html.is-touch:fullscreen,
html.is-touch:-webkit-full-screen {
  height: 100vh;
}

/* ============================ 安全区（刘海屏） ============================ */

html.is-touch #stage {
  /* 让画面整体避开刘海与圆角，但不改设计稿比例 */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

html.is-touch #dialogue-box {
  bottom: calc(28 * var(--px) + env(safe-area-inset-bottom, 0px));
}

html.is-touch #quickbar {
  padding-top: env(safe-area-inset-top, 0px);
}

html.is-touch #hud {
  top: calc(env(safe-area-inset-top, 0px));
}

/* 横屏刘海在左右两侧时，对话框别钻进去 */
html.is-touch .modal-panel {
  max-height: calc(88% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* ============================ 按钮加大（手指点得准） ============================ */

html.is-touch #quickbar .qbtn {
  /* 手机上一排按钮太密，稍微加点内边距 */
  padding-left: calc(14 * var(--px));
  padding-right: calc(14 * var(--px));
}

html.is-touch .btn,
html.is-touch .icon-btn,
html.is-touch .set-row input[type='checkbox'] {
  min-height: calc(30 * var(--px));
}

/* 存档槽 / CG 格子给个更大的命中区域 */
html.is-touch .slot-card,
html.is-touch .cg-cell {
  cursor: default;
}

/* ============================ 竖屏提示 ============================ */

#rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 6, 14, 0.94);
  backdrop-filter: blur(6px);
  text-align: center;
}

#rotate-hint.hidden {
  display: none;
}

#rotate-hint .rh-inner {
  max-width: 320px;
}

#rotate-hint .rh-icon {
  font-size: 46px;
  line-height: 1;
  color: #f0c46a;
  margin-bottom: 14px;
  animation: rh-spin 2.4s ease-in-out infinite;
}

@keyframes rh-spin {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-90deg);
  }
}

#rotate-hint .rh-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #eef2ff;
}

#rotate-hint .rh-sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: #98a2c4;
}

#rotate-hint .rh-skip {
  padding: 9px 20px;
  border: 1px solid rgba(240, 196, 106, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #f0c46a;
  font-size: 14px;
  cursor: pointer;
}

/* ============================ 手机上的操作提示 ============================ */

/* 桌面版底部写的是「滚轮」提示，手机上换成手势说明 */

html.is-touch .kbd-hint .desktop-only {
  display: none;
}

html.is-touch .kbd-hint .touch-only {
  display: inline;
}

.kbd-hint .touch-only {
  display: none;
}

/* 隐藏界面时那条提示，手机上把「按 H」去掉 */
html.is-touch #hide-ui-hint .desktop-only {
  display: none;
}