:root{
  --bg:#fbf8ef; --board:#bbada0; --gap:12px; --pad:12px;
  --cell:#cdc1b4; --text:#5b5249; --light:#f9f6f2; --r:12px;
  /* iOS safe-area */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{
  height:100%; margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,Arial,sans-serif;
}

/* ✅ 모바일에서 주소창 높이까지 반영: 100dvh */
body{
  height:100dvh;             /* 핵심: 100vh 대신 100dvh */
  padding-bottom:var(--safe-b); /* 홈 인디케이터만큼 여유 */
  overflow:hidden;

  /* 위/아래 고정, 가운데 유동 */
  display:flex; flex-direction:column;
}

/* ─── 상단 메뉴/컨트롤 고정 ───────────────────────── */
.topnav{
  flex:0 0 auto; height:48px;
  display:flex; gap:8px; align-items:center;
  padding:0 10px; border-bottom:1px solid #e9e2d5; background:#fff;
  overflow:auto hidden;
}
.topnav a{ padding:8px 10px; font-size:14px; color:#5c544c; text-decoration:none; border-radius:8px; white-space:nowrap }
.topnav a.active{ background:#8f7a6618; color:#8f7a66; font-weight:600 }

.controls{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 12px; overflow:auto hidden;
}
.controls .ctl select{
  padding:6px 10px; border-radius:10px; border:1px solid #ddd; background:#fff;
}
.btn{ border:0; border-radius:10px; padding:8px 12px; background:#8f7a66; color:#fff; cursor:pointer }
.btn.alt{ background:#6d5a4a }
.badge{ background:#bbada0; color:#fff; border-radius:10px; padding:6px 10px; display:inline-flex; gap:6px; align-items:center }
.badge small{opacity:.9;font-size:12px}
.badge b{font-size:16px}
.controls .spacer{ flex:1 1 auto }
.scorewrap{ display:flex; gap:8px }

/* ─── 가운데 스테이지: 남은 공간 100% ─────────────── */
.stage{
  flex:1 1 auto; min-height:0;        /* 핵심: 자식이 넘치지 않게 */
  display:grid; place-items:center;
  padding:4px 12px; overflow:hidden;
}
.board{
  position:relative; background:var(--board);
  padding:var(--pad); border-radius:var(--r);
  width:420px; height:420px;          /* JS가 정확히 재계산 */
  box-shadow:0 10px 20px #00000012;
}

/* ✅ 배경 그리드 = 픽셀 변수 기반 (타일과 1:1 동기) */
.grid{
  position:absolute; inset:var(--pad);
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(var(--size,4), var(--tile));
  grid-template-rows:    repeat(var(--size,4), var(--tile));
}
.cell{background:var(--cell);border-radius:var(--r)}

.tiles{position:absolute; inset:var(--pad); pointer-events:none}
.tile{ position:absolute; will-change:transform; transition-timing-function:cubic-bezier(.2,.8,.2,1) }
.inner{
  width:100%; height:100%; display:grid; place-items:center;
  border-radius:var(--r); font-weight:800; user-select:none; backface-visibility:hidden;
}
.inner span{ font-size:34px; } /* JS에서 자리수로 재조정 */

/* 효과 */
.moving .inner{ animation-name:squish; animation-timing-function:ease-out }
@keyframes squish{ 0%{transform:scale(.98)} 100%{transform:scale(1)} }
.bump{ animation-name:bump }
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* 타일 색 */
.v2{background:#eee4da}.v4{background:#ede0c8}
.v8{background:#f2b179;color:var(--light)} .v16{background:#f59563;color:var(--light)}
.v32{background:#f67c5f;color:var(--light)} .v64{background:#f65e3b;color:var(--light)}
.v128{background:#edcf72;color:var(--light)} .v256{background:#edcc61;color:var(--light)}
.v512{background:#edc850;color:var(--light)} .v1024{background:#edc53f;color:var(--light)}
.v2048{background:#edc22e;color:var(--light)}

/* ─── 하단 푸터 고정 ─────────────────────────────── */
.footer{
  flex:0 0 auto;
  display:flex; gap:10px; justify-content:center; align-items:center;
  padding:6px 12px; border-top:1px solid #e9e2d5; background:#fff;
  white-space:nowrap; font-size:13px; color:#6a6158; overflow:auto hidden;
}
.footer a{ color:#6a6158; text-decoration:none }

/* Game Over Overlay */
.gameover {
  position: absolute;
  inset: 0; /* Covers the entire board */
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
  display: grid;
  place-items: center;
  z-index: 10; /* Ensure it's above the tiles */
  border-radius: var(--r);
}

.gameover .panel {
  background: var(--board); /* Same as board background */
  padding: 20px 30px;
  border-radius: var(--r);
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.gameover h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 2em;
  color: var(--text);
}

.gameover .actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.gameover .actions button {
  font-size: 1em;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
}

/* Inherit button styles from .btn class */
.gameover .actions button:not(.alt) {
  background: #8f7a66; /* assuming --btn is defined, or use #8f7a66 directly */
  color: #fff;
}

.gameover .actions button.alt {
  background: #6d5a4a; /* assuming --btn-alt is defined, or use #6d5a4a directly */
  color: #fff;
}

/* 모바일 미세조정 */
@media (max-width:520px){
  .badge b{ font-size:14px }
  .controls{ gap:6px }
}