/* 곱절 — 판 한 장과 그 안의 타일.
 *
 * 타일은 판 크기에 대한 '비율'로 움직인다. 그래서 화면이 커지든 작아지든
 * 자바스크립트가 좌표를 다시 계산하지 않는다.
 *
 * ⚠ --tile / --step (style.css) 과 .cells 의 gap:3% 는 한 세트다.
 *    하나만 바꾸면 타일이 칸에서 어긋난다.
 * ⚠ 8 이상 타일색은 두 화면(어두운/밝은)에서 바꾸지 않는다 — theme.css 참고. */

.board{
  position:relative; width:100%; aspect-ratio:1;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:3.2%;
  container-type:inline-size;   /* 판이 작아지면 안의 글자도 같이 작아진다 */
  transition:opacity .2s ease-out;
}

/* 클리어했거나 막힌 판은 잠긴다 — 더 이상 이 판은 안 움직인다 */

.board.locked{opacity:.45}

.board.locked.clear{border-color:var(--goldedge); box-shadow:0 0 0 1px var(--goldline) inset}

.board.locked.dead{filter:grayscale(.7)}

.cells,.tiles{position:absolute; inset:3.2%}

/* 간격 3% 는 위 --tile / --step 계산의 전제다. 바꾸면 타일이 칸에서 어긋난다. */

.cells{display:grid; grid-template:repeat(4,1fr)/repeat(4,1fr); gap:3%}

.cells div{background:var(--cellbg); border-radius:8px}

/* 타일 레이어는 클릭을 먹지 않는다 */

.tiles{pointer-events:none}

.t{
  position:absolute; top:0; left:0;
  width:var(--tile); height:var(--tile);
  display:flex; align-items:center; justify-content:center;
  border-radius:7px; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:11cqw; letter-spacing:-.03em;
  transition:transform .1s ease-out;
  will-change:transform;
  box-shadow:var(--tilesh);   /* 살짝 도드라지게 — 빈칸과 구분된다 */
}

.t.d3{font-size:8.4cqw}

/* 세 자리 */

.t.d4{font-size:6.4cqw}

/* 네 자리 이상 */
/* 값별 색 — 커질수록 뜨거워진다.
   8 이상은 두 화면(어두운/밝은)에서 색을 바꾸지 않는다. 진한 색 위의 흰 글자라
   바탕이 밝아져도 그대로 읽히고, 무엇보다 '16은 하늘색'이라는 기억이 화면을
   바꿨다고 흔들리면 안 된다. 2와 4만 회색 계열이라 밝은 화면용을 따로 뒀다. */

.v2{background:var(--t2bg); color:var(--t2fg)}

.v4{background:var(--t4bg); color:var(--t4fg)}

.v8{background:#3d6fb8}

.v16{background:#4a90d9}

.v32{background:#2fae9e}

.v64{background:#2eb865}

.v128{background:#c2a02b}

.v256{background:#dd9130}

.v512{background:#e46f38}

.v1024{background:#dc4f4e}

.v2048{background:#d8409a}

.vbig{background:#8b5cf6}

.v8,.v16,.v32,.v64,.v128,.v256,.v512,.v1024,.v2048,.vbig{color:#fff}

.v2048,.vbig{box-shadow:0 0 0 2px #ffffff33 inset, 0 0 18px #d8409a55}

@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}

@keyframes appear{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

.t .inner{width:100%; height:100%; display:flex; align-items:center; justify-content:center}

.t.merged .inner{animation:pop .16s ease-out}

.t.fresh .inner{animation:appear .13s ease-out}