.sc-box {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2); border: 2px solid var(--line);
  border-radius: 14px; padding: 8px 18px; min-width: 92px;
}
.sc-label { font-size: 12px; color: var(--muted); font-weight: 700; }
.sc-box b { font-size: 24px; }

.board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  width: min(92vw, 360px); aspect-ratio: 1; padding: 10px;
  background: var(--surface-2); border-radius: 18px;
  touch-action: none; user-select: none;
}
.tile {
  display: grid; place-items: center; border-radius: 12px;
  font-weight: 900; font-size: clamp(22px, 8vw, 38px);
  color: var(--ink); background: #cdc1b4;
  transition: transform .08s ease;
}
.tile.v0 { background: rgba(0,0,0,.05); }
.tile.v2    { background:#eee4da; }
.tile.v4    { background:#ede0c8; }
.tile.v8    { background:#f2b179; color:#fff; }
.tile.v16   { background:#f59563; color:#fff; }
.tile.v32   { background:#f67c5f; color:#fff; }
.tile.v64   { background:#f65e3b; color:#fff; }
.tile.v128  { background:#edcf72; color:#fff; }
.tile.v256  { background:#edcc61; color:#fff; }
.tile.v512  { background:#edc850; color:#fff; }
.tile.v1024 { background:#edc53f; color:#fff; font-size: clamp(18px,6vw,30px); }
.tile.v2048 { background:#edc22e; color:#fff; font-size: clamp(18px,6vw,30px); }
.tile.big   { background:#3c3a32; color:#fff; font-size: clamp(16px,5vw,26px); }