/* TOKEN FALL 专属样式（页面外壳与舞台底框见 ../../shared/arcade.css）
 * 竖向接物游戏：画布保持 380×560 的逻辑比例，桌面上也不会被拉得过高。 */

/* 竖向游戏，桌面上卡片窄一点更好看。
 * 只在宽屏生效：窄屏必须让 shared/arcade.css 的 .card{max-width:100%} 继续管用，
 * 否则 520px 会比手机视口还宽，页面会被撑出横向滚动。 */
@media (min-width: 721px) {
  .card { max-width: 520px; }
}

/* 竖向舞台：只限宽，其余（居中 / 描边 / 圆角 / 深色底）走 shared 的 .stage */
.stage { max-width: 420px; }

/* 触屏左右两个大按钮：按住持续移动。
 * 代码里同时处理了 pointerdown / pointerup / pointercancel / pointerleave，
 * 松手、滑出按钮、切走应用都不会让鲸鱼一直跑。 */
.pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  width: 100%;            /* 竖屏时 .card 是 column flex：auto 左右外边距会取消 stretch，
                             不写死宽度两个方向键会缩成 40px，手指根本按不准 */
  max-width: 420px;
  margin: var(--space-5) auto 0;
}

.pad .btn {
  min-width: 0;
  min-height: 64px;
  padding: var(--space-2);
  font-size: 26px;
  line-height: 1;
  touch-action: none;                  /* 长按不触发滚动 / 双击缩放 */
  user-select: none;
  -webkit-user-select: none;
}

.controls { max-width: 420px; margin: var(--space-6) auto 0; }

@media (max-width: 720px) {
  .pad .btn { min-height: 68px; font-size: 28px; }
}

/* 竖屏手机：给画布留出高度上限，保证「画布 + 方向键 + 按钮」一屏放得下 */
@media (max-width: 520px) and (orientation: portrait) {
  .stage { display: flex; justify-content: center; }
  #game { width: auto; max-width: 100%; max-height: calc(100vh - 320px); max-height: calc(100dvh - 320px); }
}

/* 手机横屏：屏幕矮，按高度缩放画布，方向键压成一行 */
@media (max-height: 560px) and (orientation: landscape) {
  /* body 内边距是各玩法自己的横屏几何（不共享），但左右必须让开切口区 */
  body {
    align-items: stretch;
    padding: var(--space-3) max(var(--space-5), env(safe-area-inset-right, 0px)) var(--space-3) max(var(--space-5), env(safe-area-inset-left, 0px));
  }
  /* 舞台与 .card 的横屏公共行为在 shared/arcade.css；
   * 这里只把宽屏的 520px 限宽在横屏放开（游戏本地 base 规则比公共层更靠后，必须自己撤回）。 */
  .card { max-width: 100%; }
  .stage { max-width: 100%; }
  #game {
    /* 横屏 Home Indicator（iPhone 约 21px）要从画布高度里让出来，
       否则「画布 + 操作盘一屏放得下」的承诺在有安全区的机型上会被打破。
       非刘海机型 env() = 0，与原来逐字一致。 */
    height: calc(100vh - 165px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 165px - env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 100%;
    max-height: none;
  }
  .pad { display: flex; gap: var(--space-3); max-width: none; margin: var(--space-3) auto 0; }
  .pad .btn { flex: 1 1 0; min-height: 44px; font-size: 20px; }
  .controls { margin-top: var(--space-3); }
  /* 横屏那一排次级按钮（语言 / 音效 / 全屏）压小一点。这组按钮在各玩法里语义不同
   * （Runner 的 .controls 装的是主操作、这里的 .controls 是次级），所以留在游戏本地。 */
  .controls .btn { min-height: 34px; font-size: var(--font-md); padding: var(--space-1) var(--space-5); }
}