:root { color-scheme: dark; --bg:#0b0b12; --panel:#1b1720; --grid:#2a2430; --empty:#ffffff08; --text:#eaeaf0; --muted:#9a9aaa; --accent:#f5c451; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #2a1a4a 0%, transparent 60%), var(--bg); display: flex; flex-direction: column; }
header { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid #ffffff12; }
header h1 { margin: 0; font-size: 1.3rem; }
a.home { color: var(--muted); text-decoration: none; font-size: .9rem; }
a.home:hover { color: #fff; }
main { flex: 1; display: grid; place-items: start center; padding: 1.5rem 1rem 3rem; gap: 1rem; }

.top { display: flex; align-items: center; gap: 1rem; width: min(92vw, 480px); justify-content: space-between; }
.scores { display: flex; gap: .5rem; }
.box { background: #ffffff08; border: 1px solid #ffffff12; padding: .45rem .75rem; border-radius: 10px; min-width: 80px; text-align: center; }
.box span { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.box b { font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.top button, #again { font: inherit; padding: .6rem 1rem; background: var(--accent); color: #111; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; }
.top button:hover, #again:hover { filter: brightness(1.08); }
.hint { margin: 0; color: var(--muted); font-size: .85rem; width: min(92vw, 480px); }

#boardWrap { position: relative; width: min(92vw, 480px); aspect-ratio: 1/1; }
#board { width: 100%; height: 100%; background: var(--grid); border-radius: 14px; padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; position: relative; touch-action: none; user-select: none; box-shadow: 0 20px 60px -20px #000; }
.bg { background: var(--empty); border-radius: 8px; }
.tile { position: absolute; display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-variant-numeric: tabular-nums; color: #111; transition: transform .12s cubic-bezier(.2,.8,.4,1); letter-spacing: -.02em; }
.tile.spawn { animation: pop .18s ease-out; }
.tile.merge { animation: merge .2s ease-out; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes merge { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Tile palette */
.t-2    { background: #eee4da; color: #4a3f35; }
.t-4    { background: #ede0c8; color: #4a3f35; }
.t-8    { background: #f2b179; color: #fff; }
.t-16   { background: #f59563; color: #fff; }
.t-32   { background: #f67c5f; color: #fff; }
.t-64   { background: #f65e3b; color: #fff; }
.t-128  { background: #edcf72; color: #fff; }
.t-256  { background: #edcc61; color: #fff; }
.t-512  { background: #edc850; color: #fff; }
.t-1024 { background: #edc53f; color: #fff; }
.t-2048 { background: #edc22e; color: #fff; box-shadow: 0 0 24px #edc22e80; }
.t-super { background: #3c3a32; color: #fff; }

#overlay { position: absolute; inset: 0; display: grid; place-items: center; background: #000a; backdrop-filter: blur(4px); border-radius: 14px; }
#msg { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; background: linear-gradient(90deg, #ffd166, #ef476f); -webkit-background-clip: text; background-clip: text; color: transparent; }