/* CONTEXT BREAKER 专属样式（页面外壳与舞台底框见 ../../shared/arcade.css）
 * 竖向打砖块：画布保持 400×540 的逻辑比例，手机上整屏放得下。 */

@media (min-width: 721px) {
  .card { max-width: 520px; }
}

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

/* 触屏左右两个大按钮：按住持续移动。
 * width:100% 不能省：竖屏时 .card 是 column flex，
 * auto 左右外边距会取消 stretch，不写死宽度按钮会缩成细条。 */
.pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  width: 100%;
  max-width: 420px;
  margin: var(--space-5) auto 0;
}

.pad .btn {
  min-width: 0;
  min-height: 56px;
  padding: var(--space-2);
  font-size: 24px;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.launchbar { max-width: 420px; margin: var(--space-4) auto 0; }
.launchbar .btn { min-width: 0; flex: 1 1 auto; }

@media (max-width: 720px) {
  .pad .btn { min-height: 62px; font-size: 28px; }
  .launchbar { margin-top: var(--space-3); }
}

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

/* 手机横屏：屏幕矮，按高度缩放画布，左右键压成一行 */
@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 - 170px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 170px - env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 100%;
  }
  .pad { display: flex; gap: var(--space-3); max-width: none; margin: var(--space-3) auto 0; }
  .pad .btn { flex: 1 1 0; min-height: 42px; font-size: 20px; }
  .launchbar { margin-top: var(--space-3); }
  .launchbar .btn { min-height: 36px; font-size: var(--font-md); padding: var(--space-1) var(--space-4); }
}