/* Context Snake 专属样式（页面外壳与舞台底框见 ../../shared/arcade.css）
 * 舞台本身没有本地覆盖：位置 / 描边 / 圆角 / 深色底都走公共层。 */

/* 触屏十字键：上行居中，下行左/下/右。
 * width:100% 不能省：竖屏下 .card 是 column flex，auto 左右外边距会取消 stretch，
 * 只给 max-width 是「封顶不撑开」，四个键会缩成 ~31px 宽的细条（手指按不准）。 */
.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 240px;
  margin: var(--space-5) auto 0;
}

#up { grid-column: 2; grid-row: 1; }
#left { grid-column: 1; grid-row: 2; }
#down { grid-column: 2; grid-row: 2; }
#right { grid-column: 3; grid-row: 2; }

.pad .btn {
  min-width: 0;
  min-height: 52px;
  padding: var(--space-2);
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 720px) {
  .pad { max-width: 100%; }
  .pad .btn { min-height: 56px; }
}

/* 手机横屏：屏幕矮，十字键改成单行，保证「画布 + 操作盘」一屏放得下、不用滚动。
 * body / .card / .stage 的横屏公共行为在 shared/arcade.css。 */
@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));
  }
  /* 按可用高度定画布大小（1440×1020 是竖高比，按高缩放不会被限宽夹到变形） */
  #game {
    /* 横屏 Home Indicator（iPhone 约 21px）要从画布高度里让出来，
       否则「画布 + 操作盘一屏放得下」的承诺在有安全区的机型上会被打破。
       非刘海机型 env() = 0，与原来逐字一致。 */
    height: calc(100vh - 150px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 100%;
  }
  .pad {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-2);
    max-width: none;
    margin: var(--space-3) auto 0;
  }
  .pad .btn { flex: 1 1 0; min-height: 38px; font-size: 16px; }
  /* 横屏次级按钮（语言/音效/全屏）压到 34px；公共层 landscape 的 .btn 是 40px，
   * 那是给 Runner 的主操作（跳跃/下潜）用的，语义不同，所以这组留在游戏本地。 */
  .controls .btn { min-height: 34px; font-size: var(--font-md); padding: var(--space-1) var(--space-5); }
}