/* ZUZ Arcade Pegs - 서리 낀 금속 십자 판 위 니오븀 말로 옆 말 뛰어넘기 (그림·퍼블리싱 다솜)
   화면 틀·판 크기(--size)는 공통 틀(../common/frame.css). 판 960×1200u → --aspect 1.25, 배율 = --size / 960. --extra-h 0.
   판 안 그림(바탕·위 띠·십자 판·말·커서·안내·뚜껑)은 game.js 가 canvas 에 그린다(그림 = img/*.svg). 여기는 판 상자·다시 놓기 버튼·멈춤 가림만. */
: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장) ---------- */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: calc(var(--size) * 1.25);
  border-radius: calc(var(--u) * 28);
  background: #131a25;   /* 서리 바탕 가운데 색 — 그림이 늦게 와도 같은 색 */
  overflow: hidden;
  touch-action: none;    /* 말을 끌 때 페이지가 움직이지 않게 */
  outline: none;
  box-shadow: 0 10px 30px rgba(19, 26, 37, 0.3);
  cursor: pointer;
}
.board canvas { display: block; width: 100%; height: 100%; }

/* 다시 놓기 버튼 (그림 명세 2.5 · 2.6) — 누르는 칸 판 좌표 (768,0) 160×200u, 그림은 칸 안 (8,37) 144×128u.
   두 장을 다 두고 하나만 보인다(자리 이동 0): 보통 btn-restart / 눌림 btn-restart-down(누르는 동안 :active, R 키는 game.js 가 data-down="1" 을 120ms).
   못 씀 = disabled 0.35(이 판 첫 뛰기 전 · 넘어감 · 막힘 · 덮개 열기 전). 누른 뒤 포커스는 판으로 돌린다(기획 1-3). */
.restart-btn {
  position: absolute;
  left: calc(var(--u) * 768);
  top: 0;
  width: calc(var(--u) * 160);
  height: calc(var(--u) * 200);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: none;
  cursor: pointer;
  z-index: 2;
}
.restart-btn img {
  position: absolute;
  left: calc(var(--u) * 8);
  top: calc(var(--u) * 37);
  width: calc(var(--u) * 144);
  height: calc(var(--u) * 128);
  display: block;
  pointer-events: none;
}
.restart-btn .r-down { opacity: 0; }
.restart-btn:not(:disabled):active .r-base,
.restart-btn[data-down="1"] .r-base { opacity: 0; }
.restart-btn:not(:disabled):active .r-down,
.restart-btn[data-down="1"] .r-down { opacity: 1; }
.restart-btn:disabled { cursor: default; }
.restart-btn:disabled .r-base { opacity: 0.35; }
.restart-btn:disabled .r-down { opacity: 0; }
.restart-btn:focus-visible { outline: 3px solid #fff3d6; outline-offset: -3px; }

/* 일시 멈춤 판 가림 (그림 명세 2.9) — 말 배치가 비치지 않게 0.97 (Tubes·Nine·Guard 와 같음) */
.game-page .board-cover.paused { background: rgba(20, 26, 44, 0.97); }