.merge-game {
  --merge-ink: #393151;
  --merge-muted: #645977;
  --merge-soft: #f2edf6;
  --merge-line: #d9cfe2;
  width: min(100%, 380px);
  margin-inline: auto;
  color: var(--merge-ink);
  font-family: system-ui, sans-serif;
  line-height: 1.45;
}
[data-theme="dark"] .merge-game {
  --merge-ink: #f1e4f4;
  --merge-muted: #cabdd6;
  --merge-soft: #393349;
  --merge-line: #5a4d69;
}
.merge-game * { box-sizing: border-box; }
.merge-head { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; }
.merge-score {
  display: grid;
  gap: 1px;
  min-width: 59px;
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--merge-soft);
  font-size: 11px;
  font-weight: 650;
  color: var(--merge-muted);
}
.merge-score strong { color: var(--merge-ink); font: 700 18px/1.1 ui-monospace, monospace; }
.merge-game button {
  border: 1px solid var(--merge-line);
  border-radius: 9px;
  background: var(--merge-soft);
  color: var(--merge-ink);
  font-family: inherit;
}
.merge-game button:hover { border-color: #ab84ad; }
.merge-game button:active { transform: translateY(1px); }
.merge-game :focus-visible { outline: 2px solid #9671ae; outline-offset: 3px; }
.merge-reset { margin-inline-start: auto; min-height: 40px; padding: 4px 11px; font-size: 13px; }
.merge-board {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  padding: 9px;
  gap: 7px;
  border: 1px solid #584b69;
  border-radius: 16px;
  background: #62536f;
  user-select: none;
  touch-action: none;
}
.merge-cell {
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: 8px;
  font: 750 clamp(23px, 5.7vw, 35px)/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  background: #422e60;
  color: #fff;
}
.merge-cell[data-value="0"] { background: #807089; }
.merge-cell[data-value="2"] { background: #f6eaf0; color: #4b354c; }
.merge-cell[data-value="4"] { background: #ebd2df; color: #4b354c; }
.merge-cell[data-value="8"] { background: #dfabc1; color: #44293f; }
.merge-cell[data-value="16"] { background: #ce8fae; color: #38203c; }
.merge-cell[data-value="32"] { background: #a9668b; }
.merge-cell[data-value="64"] { background: #8c537d; }
.merge-cell[data-value="128"] { background: #815e9b; }
.merge-cell[data-value="256"] { background: #714c90; }
.merge-cell[data-value="512"] { background: #5c427c; }
.merge-cell[data-value="1024"], .merge-cell[data-value="2048"] { background: #59416f; color: #ffe596; font-size: clamp(19px, 4.5vw, 28px); }
.merge-controls { display: flex; justify-content: center; gap: 7px; margin: 12px 0 8px; }
.merge-controls button { width: 46px; min-height: 42px; padding: 0; font-size: 21px; font-weight: 650; }
.merge-status, .merge-help { text-align: center; font-size: 13px; }
.merge-status { margin-top: 5px; color: var(--merge-ink); }
.merge-help { margin-top: 4px; color: var(--merge-muted); }
@media (prefers-reduced-motion: no-preference) {
  .merge-new { animation: merge-arrive .17s ease-out; }
  .merge-pop { animation: merge-bloom .2s ease-out; }
  @keyframes merge-arrive { from { transform: scale(.7); opacity: .35; } }
  @keyframes merge-bloom { 40% { transform: scale(1.085); } }
}