:root {
  color-scheme: light;
  --bg: #f4f1ea;
  --ink: #2f332d;
  --muted: #6d7569;
  --board: #9b8f7d;
  --cell: #c8bdab;
  --accent: #2f7f73;
  --accent-dark: #25675d;
  --danger: #b45b4f;
  --tile-2: #eee6da;
  --tile-4: #e8dcc8;
  --tile-8: #efb36e;
  --tile-16: #e8955d;
  --tile-32: #e47a58;
  --tile-64: #d85a42;
  --tile-128: #e8c75f;
  --tile-256: #dfb947;
  --tile-512: #d5a934;
  --tile-1024: #c99824;
  --tile-2048: #b78118;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(47, 127, 115, 0.13), transparent 32%),
    linear-gradient(315deg, rgba(180, 91, 79, 0.13), transparent 36%),
    var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

button {
  height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 18px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

button:hover:not(:disabled) {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 14px;
  color: var(--accent-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.game-shell {
  width: min(100%, 520px);
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(48px, 12vw, 76px);
  line-height: 0.9;
  letter-spacing: 0;
}

.subtitle {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
}

.score-row {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.score-box {
  min-width: 82px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #7e7366;
  color: #fff;
  text-align: center;
}

.score-box span {
  display: block;
  font-size: 12px;
  color: #ddd5c9;
}

.score-box strong {
  display: block;
  margin-top: 2px;
  font-size: 24px;
  line-height: 1;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.toolbar button:last-child {
  background: #6e7992;
}

.toolbar button:last-child:hover:not(:disabled) {
  background: #59647d;
}

.board-wrap {
  position: relative;
}

.board {
  width: min(100vw - 48px, 520px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 14px);
  padding: clamp(8px, 2vw, 14px);
  border-radius: 8px;
  background: var(--board);
  touch-action: none;
  user-select: none;
}

.cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 7px;
  background: var(--cell);
  color: #74695c;
  font-size: clamp(28px, 9vw, 56px);
  font-weight: 800;
  line-height: 1;
}

.cell[data-value="2"] { background: var(--tile-2); }
.cell[data-value="4"] { background: var(--tile-4); }
.cell[data-value="8"] { background: var(--tile-8); color: #fff; }
.cell[data-value="16"] { background: var(--tile-16); color: #fff; }
.cell[data-value="32"] { background: var(--tile-32); color: #fff; }
.cell[data-value="64"] { background: var(--tile-64); color: #fff; }
.cell[data-value="128"] { background: var(--tile-128); color: #fff; font-size: clamp(24px, 7.5vw, 46px); }
.cell[data-value="256"] { background: var(--tile-256); color: #fff; font-size: clamp(24px, 7.5vw, 46px); }
.cell[data-value="512"] { background: var(--tile-512); color: #fff; font-size: clamp(24px, 7.5vw, 46px); }
.cell[data-value="1024"] { background: var(--tile-1024); color: #fff; font-size: clamp(20px, 6.5vw, 38px); }
.cell[data-value="2048"] { background: var(--tile-2048); color: #fff; font-size: clamp(20px, 6.5vw, 38px); }
.cell[data-value="4096"],
.cell[data-value="8192"],
.cell[data-value="16384"] {
  background: #3f3f3a;
  color: #fff;
  font-size: clamp(17px, 5.6vw, 34px);
}

.cell.spawn {
  animation: spawn 150ms ease-out;
}

.cell.merged {
  animation: merge 180ms ease-out;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 8px;
  background: rgba(244, 241, 234, 0.82);
  backdrop-filter: blur(2px);
}

.overlay.hidden,
.hidden {
  display: none;
}

.overlay-panel {
  width: min(100%, 300px);
  padding: 24px;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 20px 48px rgba(47, 51, 45, 0.18);
  text-align: center;
}

.overlay-panel h2 {
  font-size: 30px;
}

.overlay-panel p {
  margin: 10px 0 18px;
  color: var(--muted);
}

.overlay-panel button {
  width: 100%;
}

.overlay-panel button + button {
  margin-top: 10px;
}

.ghost {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.ghost:hover:not(:disabled) {
  background: rgba(47, 127, 115, 0.08);
  color: var(--accent-dark);
}

.hint {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@keyframes spawn {
  from {
    transform: scale(0.45);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes merge {
  50% {
    transform: scale(1.12);
  }
}

@media (max-width: 520px) {
  body {
    align-items: start;
    padding: 18px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .score-row,
  .toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .score-box {
    min-width: 0;
  }

  .board {
    width: calc(100vw - 36px);
  }
}