/* ZUZ Arcade Bricks - 장난감 블록 공방 판 (다솜 MGW-DSN-005, MGW-DEV-031)
   화면 틀·판 크기(--size)는 공통 틀(../common/frame.css). 판 960×1200u → --aspect 1.25, 배율 = --size / 960.
   판 안 그림은 game.js 가 canvas 에 그린다. 여기는 판 상자·시작 스테이지 고르는 칸(DSN-005 2.7)만. */
:root {
  --bg: #f3f5fa;
  --ink: #1d2540;
}
.game-page {
  --aspect: 1.25;
  --u: calc(var(--size) / 960);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

/* 위 줄 [일시 멈춤/계속] 아이콘 */
#play .i-pause { display: none; }
#play[data-mode="pause"] .i-play { display: none; }
#play[data-mode="pause"] .i-pause { display: block; }

/* ---------- 판 ---------- */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: calc(var(--size) * 1.25);
  border-radius: calc(var(--u) * 28);
  background: #1f2638;
  overflow: hidden;
  touch-action: none;
  outline: none;
  box-shadow: 0 10px 30px rgba(29, 37, 64, 0.25);
}
.board canvas { display: block; width: 100%; height: 100%; }
.board[data-state="play"] { cursor: none; }

/* ---------- 시작 스테이지 고르기 (3열 × 2줄, 칸 240×180u, 사이 36u, 묶음 가운데 y 600u) ---------- */
.pick {
  position: absolute;
  z-index: 4;
  left: 8.75%;
  top: 33.5%;
  width: 82.5%;
  height: 33%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 36);
}
.pick[hidden] { display: none; }
.pick button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 28);
  background: #fff;
  color: #1d2540;
  font: 800 calc(var(--u) * 76) / 1 var(--cf-font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pick button:focus-visible { outline: calc(var(--u) * 7) solid #3f6fe0; outline-offset: calc(var(--u) * 10); }
.pick button:disabled { background: rgba(255, 255, 255, 0.14); color: rgba(255, 250, 240, 0.55); cursor: default; }
.pick button svg { width: calc(var(--u) * 68); height: calc(var(--u) * 68); }