/* ZUZ Arcade Chop - 종이 오림 숲의 아침 판 (다솜 MGW-DSN-008 명세, MGW-PUB-002 퍼블리싱)
   화면 틀·판 크기(--size)는 공통 틀(../common/frame.css) 그대로. 판 960×1200u → --aspect 1.25, 배율 = --size / 960 (Bricks 와 같은 꼴, --extra-h 0).
   판 안 그림(바탕·줄기·가지·나무꾼·막대·첫 판 안내)은 game.js 가 canvas 에 그린다(명세 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; }

/* ---------- 판 (명세 1장) ----------
   바탕색 = 하늘 #f4e6c8 — 그림이 늦게 와도 빈 판이 하늘색. 바탕 그림(bg-forest)은 canvas 가 맨 먼저 그리지만,
   canvas 가 그리기 전(불러오는 동안)에도 같은 숲이 보이게 판 상자에도 깐다(canvas 가 그 위를 덮는다). */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: calc(var(--size) * 1.25);
  border-radius: calc(var(--u) * 28);
  background: #f4e6c8 url(img/bg-forest.svg) center / 100% 100% no-repeat;
  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%; }

/* ---------- 일시 멈춤 판 가림 (명세 2.9) — 다른 게임의 0.55 로는 가지가 비쳐 보여 진하게. blur 는 쓰지 않음 ---------- */
.game-page .board-cover.paused { background: rgba(20, 26, 44, 0.94); }

/* 줄이기 설정: 판 안 움직임은 game.js 가 matchMedia 로 뺀다(명세 2.3~2.8 "줄이기 설정이면"). CSS 쪽 전환은 없음 */