/* 합치기 — 다크 테마, 모바일 우선.
   판은 정사각형이고, 타일은 판 크기에 대한 '비율'로 움직인다.
   그래서 화면 크기가 바뀌어도 자바스크립트가 위치를 다시 계산할 필요가 없다. */

:root{
  --bg:#0e1219; --panel:#161d28; --cell:#1e2836; --line:#28344699;
  --fg:#e8eef7; --dim:#8fa0b8; --gold:#f2c14e;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
         "Malgun Gothic",system-ui,sans-serif;

  /* 4칸 + 사이 간격 3개 = 100%  (22.75×4 + 3×3) */
  --tile:22.75%;
  --step:113.1868%;   /* (22.75+3) / 22.75 → 타일 한 칸 이동량 */
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  display:flex; align-items:center; justify-content:center;
  padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  overflow:hidden;
}

.app{width:100%; max-width:460px; display:flex; flex-direction:column; gap:14px}

/* ── 상단 ───────────────────────────────────────── */
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.brand{font-size:30px; font-weight:800; letter-spacing:-.02em}
.scores{display:flex; gap:8px}
.score{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:7px 13px; min-width:78px; text-align:center;
}
.lab{font-size:10.5px; font-weight:700; color:var(--dim); letter-spacing:.04em}
.val{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:2px}

.hint{font-size:12.5px; color:var(--dim); line-height:1.5}

/* ── 판 ────────────────────────────────────────── */
.board{
  position:relative; width:100%; aspect-ratio:1;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:3.2%;
  touch-action:none;            /* 손가락으로 밀 때 화면이 같이 스크롤되지 않게 */
  user-select:none;
}

.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(--cell); border-radius:9px}

/* 타일 레이어는 클릭을 먹지 않는다 */
.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:9px; font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(19px,7.4vw,34px); letter-spacing:-.03em;
  transition:transform .1s ease-out;
  will-change:transform;
}
.t.d3{font-size:clamp(16px,6vw,28px)}    /* 세 자리 */
.t.d4{font-size:clamp(13px,4.8vw,23px)}  /* 네 자리 이상 */

/* 값별 색 — 커질수록 뜨거워진다 */
.v2{background:#2c3648; color:#c3d0e2}
.v4{background:#36435a; color:#d5e0ef}
.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}

/* ── 끝 화면 ────────────────────────────────────── */
.overlay{
  position:absolute; inset:0; border-radius:14px;
  background:#0e1219e8; backdrop-filter:blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  z-index:5;
}
.ov-title{font-size:27px; font-weight:800}
.ov-title.win{color:var(--gold)}
.ov-sub{font-size:13.5px; color:var(--dim)}
.ov-btns{display:flex; gap:9px; margin-top:9px}

/* ── 버튼 ──────────────────────────────────────── */
.actions{display:flex; gap:9px}
.btn{
  flex:1; padding:12px 16px; border-radius:10px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--fg);
  font-family:inherit; font-size:14px; font-weight:700;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:default}
.btn.primary{background:var(--gold); border-color:var(--gold); color:#20180a}
.btn.ghost{background:transparent}
.ov-btns .btn{flex:none; padding:11px 20px}

.hide{display:none !important}

/* 화면이 낮으면 설명을 접어 판을 지킨다 */
@media (max-height:640px){
  .hint{display:none}
  .brand{font-size:25px}
}