:root {
  --bg: #faf8ef;
  --board-bg: #bbada0;
  --cell-bg: #cdc1b4;
  --text-dark: #776e65;
  --text-light: #f9f6f2;
  --gap: 12px;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  display: flex;
  justify-content: center;
  padding: 20px 14px 48px;
}

.wrap {
  width: 100%;
  max-width: 460px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

h1 {
  margin: 0;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text-dark);
}

.scores {
  display: flex;
  gap: 10px;
}

.score-box {
  background: var(--board-bg);
  border-radius: var(--radius);
  padding: 8px 16px;
  text-align: center;
  min-width: 78px;
  color: var(--text-light);
}

.score-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}

.score-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.lead {
  font-size: 14px;
  line-height: 1.6;
  color: #837a70;
}

.lead strong { color: var(--text-dark); }

.bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.btn {
  background: #8f7a66;
  color: var(--text-light);
  border: none;
  border-radius: var(--radius);
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.btn:hover { background: #9d8975; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #b9a591; outline-offset: 2px; }

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--board-bg);
  border-radius: var(--radius);
  padding: var(--gap);
  touch-action: none;
  outline: none;
}

.grid {
  position: absolute;
  inset: var(--gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
}

.grid .cell {
  background: var(--cell-bg);
  border-radius: var(--radius);
}

.tiles {
  position: absolute;
  inset: var(--gap);
  pointer-events: none;
}

.tile {
  position: absolute;
  width: calc((100% - 3 * var(--gap)) / 4);
  height: calc((100% - 3 * var(--gap)) / 4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: clamp(20px, 8vw, 36px);
  background: #eee4da;
  color: var(--text-dark);
  transform: translate(
    calc(var(--c) * (100% + var(--gap))),
    calc(var(--r) * (100% + var(--gap)))
  );
  transition: transform 0.12s ease;
}

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

.tile.spawn .inner { animation: pop 0.16s ease; }
.tile.merged .inner { animation: bump 0.16s ease; }

@keyframes pop {
  0% { transform: scale(0.1); }
  100% { transform: scale(1); }
}
@keyframes bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.tile.v2    { background:#eee4da; }
.tile.v4    { background:#ede0c8; }
.tile.v8    { background:#f2b179; color:var(--text-light); }
.tile.v16   { background:#f59563; color:var(--text-light); }
.tile.v32   { background:#f67c5f; color:var(--text-light); }
.tile.v64   { background:#f65e3b; color:var(--text-light); }
.tile.v128  { background:#edcf72; color:var(--text-light); font-size:clamp(18px,7vw,30px); }
.tile.v256  { background:#edcc61; color:var(--text-light); font-size:clamp(18px,7vw,30px); }
.tile.v512  { background:#edc850; color:var(--text-light); font-size:clamp(18px,7vw,30px); }
.tile.v1024 { background:#edc53f; color:var(--text-light); font-size:clamp(15px,5.5vw,24px); }
.tile.v2048 { background:#edc22e; color:var(--text-light); font-size:clamp(15px,5.5vw,24px); }
.tile.big   { background:#3c3a32; color:var(--text-light); font-size:clamp(14px,5vw,22px); }

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(238, 228, 218, 0.78);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.overlay-inner { text-align: center; padding: 18px; }

.overlay-msg {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--text-dark);
}

.overlay-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.help {
  margin-top: 22px;
  font-size: 14px;
  color: #837a70;
}
.help summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-dark);
}
.help ul { line-height: 1.7; padding-left: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile.spawn .inner, .tile.merged .inner { animation: none; }
}