/* ATTENTION MAZE 专属样式（页面外壳与舞台底框见 ../../shared/arcade.css）
 * 420×354 的逻辑画布 / 15×11 的迷宫，桌面上不放大过头，手机上整屏放得下。 */

/* 菜单里要藏起方向键与游玩按钮。
 * 注意 .pad{display:grid} / .controls{display:flex} 的优先级高于 UA 的 [hidden]{display:none}，
 * 不写这条的话 hidden 属性等于没用。 */
[hidden] { display: none !important; }

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

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

/* 十字方向键：上行居中，下行左/下/右。
 * width:100% 不能省：竖屏下 .card 是 column flex，auto 左右外边距会让按钮缩成小方块。 */
.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 300px;
  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: 54px;
  padding: var(--space-2);
  font-size: 22px;
  line-height: 1;
  touch-action: none;                  /* 长按不触发滚动 / 双击缩放 */
  user-select: none;
  -webkit-user-select: none;
}

.controls { max-width: 460px; margin: var(--space-6) auto 0; }
.playbar { gap: var(--space-3); }
.playbar .btn { min-width: 0; flex: 1 1 auto; }

#rescan { font-size: 14px; }
#reset { color: #a4552f; border-color: #e7cbb9; background: #fdf6f1; }

@media (max-width: 720px) {
  .pad .btn { min-height: 56px; font-size: 24px; }
  .playbar .btn { font-size: 14px; padding: var(--space-4) 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 - 400px); max-height: calc(100dvh - 400px); }
}

/* 手机横屏：高度紧张，按高度缩放画布，十字键压成一行 */
@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；
   * 这里只把宽屏的 560px 限宽在横屏放开（游戏本地 base 规则比公共层更靠后，必须自己撤回）。 */
  .card { max-width: 100%; }
  .stage { max-width: 100%; }
  #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%;
    max-height: none;
  }
  .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: 40px; font-size: 18px; }
  .controls { margin-top: var(--space-3); }
  .playbar .btn, .controls .btn { min-height: 34px; font-size: var(--font-md); padding: var(--space-1) var(--space-4); }
}