/* cooctal 행성 뭉치기(Planets) - 2048·스네이크와 같은 남색 판 + 우주 그릇 (고유 디자인)
   화면 틀·판 크기(--size)는 공통 틀(../common/frame.css). 판 비율 폭 1 : 높이 1.2 (--aspect),
   판 아래 합쳐지는 순서 줄(18px + 간격 4px = --extra-h)만큼 높이를 뺀다. */
:root {
  --bg: #f3f5fa;
  --ink: #1d2540;
  --board: #1f2638;
}
.game-page {
  --aspect: 1.2;
  --extra-h: 22px;
}

* { 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; }

/* 다음 행성: 점수 옆 작은 공 */
.next-box { display: flex; align-items: center; margin: 0; }
.ball { display: block; flex: none; border-radius: 50%; }
.next-box .ball { width: 20px; height: 20px; }

/* 판 아래: 합쳐지는 순서 (판 폭에 맞춘 작은 행성 10개) */
.order {
  --u: min(0.9px, var(--size) / 190);   /* 가장 큰 공(19.6단위)이 18px 줄 안에 들어가게 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  height: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order li { display: flex; }
.order .ball { width: calc(var(--d) * var(--u)); height: calc(var(--d) * var(--u)); }

/* ---------- 판 (그림은 canvas, 크기만 CSS) ---------- */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: calc(var(--size) * 1.2);
  border-radius: calc(var(--size) * 0.06);
  background: var(--board);
  touch-action: none;
  box-shadow: 0 10px 30px rgba(29, 37, 64, 0.25);
  overflow: hidden;
}
.board[data-state="running"] { cursor: crosshair; }
.canvas { display: block; width: 100%; height: 100%; }
/* 준비: 그릇이 보이도록 가리개를 옅게 */
.board-cover.ready { background: rgba(20, 26, 44, 0.2); }