style.css

:root{--bg:#f5f1ea;--board:#1c1c1e;--cell:#2a2a2c;--ink:#1c1c1e;--muted:#6e6e73;--accent:#b86a2b;--line:#e7e1d6}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:grid;place-items:center;padding:24px}
.wrap{width:min(440px,100%)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
.head h1{font-family:-apple-system,"SF Pro Display",Inter,sans-serif;font-size:2.4rem;letter-spacing:-.04em;margin:0}
.scores{display:flex;gap:8px;align-items:center}
.score{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 12px;min-width:64px;text-align:center}
.score span{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.score strong{font-family:-apple-system,"SF Pro Display",Inter,sans-serif;font-size:1.1rem}
.btn{padding:9px 14px;border-radius:999px;background:var(--ink);color:#fff;border:0;font-weight:600;cursor:pointer}
.btn:hover{background:#000}
.hint{color:var(--muted);font-size:.9rem;margin:8px 0 14px}
.board{position:relative;background:var(--board);border-radius:18px;padding:10px;aspect-ratio:1/1;outline:none;touch-action:none}
.cells{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px}
.cells::before,.cells::after{content:""}
.cells{}
.tiles{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;pointer-events:none}
.cell-bg{background:var(--cell);border-radius:10px}
.tile{display:grid;place-items:center;border-radius:10px;font-family:-apple-system,"SF Pro Display",Inter,sans-serif;font-weight:800;letter-spacing:-.02em;transition:transform 110ms ease,background 110ms ease,color 110ms ease;animation:pop 140ms ease}
.t-2{background:#fbf8f3;color:#1c1c1e}
.t-4{background:#efe1cf;color:#5b3713}
.t-8{background:#e0b88a;color:#1c1c1e}
.t-16{background:#d4a76a;color:#1c1c1e}
.t-32{background:#c97a2b;color:#fff}
.t-64{background:#b86a2b;color:#fff}
.t-128{background:#a8541b;color:#fff;font-size:.9em}
.t-256{background:#8e4318;color:#fff;font-size:.9em}
.t-512{background:#3a3a3c;color:#fff;font-size:.9em}
.t-1024{background:#222;color:#fff;font-size:.78em}
.t-2048{background:#1c1c1e;color:#fff;font-size:.78em;box-shadow:0 0 0 3px var(--accent) inset}
.msg{margin-top:14px;text-align:center;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;font-weight:600}
@keyframes pop{from{transform:scale(.7)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tile{animation:none;transition:none}}