.scores { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.score-box { background: var(--primary-soft); border-radius: 10px; padding: 8px 18px; }
.score-box small { display: block; color: var(--muted); font-size: 0.7rem; }
.score-box span { font-weight: 800; font-size: 1.2rem; color: var(--primary); }

.board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: #cdc5b8; border-radius: 12px; padding: 8px; margin: 0 auto 14px;
  width: 300px; max-width: 100%; touch-action: none;
}
.cell {
  aspect-ratio: 1; border-radius: 8px; background: #e0d9cc;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.6rem; color: #6b6f76;
  transition: transform 0.08s;
}
.cell.pop { animation: pop 0.12s; }
@keyframes pop { 0%{transform:scale(0.8)} 100%{transform:scale(1)} }

.v2{background:#eee4da;color:#6b6f76}.v4{background:#ede0c8;color:#6b6f76}
.v8{background:#f2b179;color:#fff}.v16{background:#f59563;color:#fff}
.v32{background:#f67c5f;color:#fff}.v64{background:#f65e3b;color:#fff}
.v128{background:#edcf72;color:#fff;font-size:1.4rem}.v256{background:#edcc61;color:#fff;font-size:1.4rem}
.v512{background:#edc850;color:#fff;font-size:1.4rem}.v1024{background:#edc53f;color:#fff;font-size:1.1rem}
.v2048{background:#0d9488;color:#fff;font-size:1.1rem}
.msg { min-height: 1.4em; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.dpad { margin-bottom: 12px; }
.dpad div { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.dpad button { width: 52px; height: 44px; border: 1px solid var(--border); background: #fff; border-radius: 10px; font-size: 1rem; cursor: pointer; }
@media (min-width: 620px) { .dpad { display: none; } }