:root{color-scheme:light;--app-bg: #f7f1e3;--panel-bg: rgba(255, 252, 245, .92);--panel-border: rgba(120, 96, 76, .14);--ink: #3d342c;--muted: #7d6f63;--board-bg: #bbada0;--empty-cell: rgba(238, 228, 218, .35);--gap: 12px;font-family:Avenir Next,Segoe UI,sans-serif;line-height:1.4;font-weight:500;color:var(--ink);background:radial-gradient(circle at top,#fff8ee,transparent 36%),linear-gradient(180deg,#fdf7eb,#efe2c7)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;width:100%}html,body{overflow-x:hidden}body{min-height:100vh;overscroll-behavior-x:none;touch-action:pan-y}button{font:inherit}.appShell{min-height:100vh;width:100%;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}.gameCard{width:min(100%,548px);padding:24px;border:1px solid var(--panel-border);border-radius:28px;background:var(--panel-bg);box-shadow:0 24px 64px #69523624,inset 0 1px #ffffff8c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:clip}.topbar{display:grid;gap:18px}.titleBlock,.scorePanel,.controls,.footerHint{width:min(100%,500px)}.titleBlock h1{margin:0;font-size:clamp(3rem,8vw,4.8rem);line-height:.92;letter-spacing:-.06em}.titleBlock p{margin:8px 0 0;color:var(--muted)}.scorePanel,.controls,.footerHint{display:flex;flex-wrap:wrap;gap:12px}.scoreCard{min-width:112px;padding:12px 16px;border-radius:18px;background:#bbada0;color:#f9f6f2}.scoreCard span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;opacity:.78}.scoreCard strong{display:block;margin-top:2px;font-size:1.4rem}.actionButton{border:0;border-radius:999px;padding:12px 18px;background:#9d7d52;color:#fff8f0;cursor:pointer;transition:transform .14s ease,opacity .14s ease,background-color .14s ease}.actionButton:hover{transform:translateY(-1px)}.actionButton:disabled{opacity:.45;cursor:not-allowed;transform:none}.actionButton--secondary{background:#d7c3a3;color:#4d3f32}.boardArea{position:relative;margin-top:22px;touch-action:none}.boardShell{position:relative;width:min(100%,500px)}.boardGrid{--cell-size: calc((100% - (var(--gap) * 5)) / 4);position:relative;width:100%;aspect-ratio:1;padding:var(--gap);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);border-radius:24px;background:linear-gradient(180deg,#c8b8aa 0%,var(--board-bg) 100%);box-shadow:inset 0 1px #fff3}.boardCell{border-radius:16px;background:var(--empty-cell)}.tile{position:absolute;width:var(--cell-size);height:var(--cell-size);left:calc(var(--gap) + (var(--col) * (var(--cell-size) + var(--gap))));top:calc(var(--gap) + (var(--row) * (var(--cell-size) + var(--gap))));display:grid;place-items:center;border-radius:16px;font-size:clamp(1.3rem,4vw,2.25rem);font-weight:800;letter-spacing:-.04em;transition:top .13s ease,left .13s ease,transform .13s ease;-webkit-user-select:none;user-select:none}.tile--spawned{animation:spawnIn .18s ease}.tile--merged{animation:popIn .2s ease}.tile--2{background:#eee4da;color:#776e65}.tile--4{background:#ede0c8;color:#776e65}.tile--8{background:#f2b179;color:#f9f6f2}.tile--16{background:#f59563;color:#f9f6f2}.tile--32{background:#f67c5f;color:#f9f6f2}.tile--64{background:#f65e3b;color:#f9f6f2}.tile--128{background:#edcf72;color:#f9f6f2;font-size:clamp(1.1rem,3vw,1.9rem)}.tile--256{background:#edcc61;color:#f9f6f2;font-size:clamp(1.1rem,3vw,1.9rem)}.tile--512{background:#edc850;color:#f9f6f2;font-size:clamp(1.1rem,3vw,1.9rem)}.tile--1024{background:#edc53f;color:#f9f6f2;font-size:clamp(.95rem,2.6vw,1.55rem)}.tile--2048{background:#edc22e;color:#f9f6f2;font-size:clamp(.95rem,2.6vw,1.55rem)}.tile--4096{background:#3c3a32;color:#f9f6f2;font-size:clamp(.85rem,2.4vw,1.4rem)}.overlay{position:absolute;inset:0;display:grid;place-items:center;border-radius:24px;background:#edcf72bd;animation:fadeIn .18s ease}.overlay--loss{background:#d6cdc4d1}.overlayCard{width:min(90%,360px);padding:24px;border-radius:24px;background:#fffbf4f2;box-shadow:0 16px 48px #56402a29;text-align:center}.overlayCard h2{margin:0;font-size:clamp(2rem,6vw,2.8rem)}.overlayCard p{margin:10px 0 0;color:var(--muted)}.overlayActions{margin-top:18px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.footerHint{margin-top:18px;color:var(--muted);font-size:.92rem}@keyframes spawnIn{0%{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}@keyframes popIn{0%{transform:scale(.9)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:720px){:root{--gap: 10px}.appShell{padding:calc(12px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}.gameCard{width:100%;padding:18px;border-radius:24px}.titleBlock h1{font-size:clamp(2.8rem,18vw,4.2rem)}.scoreCard{min-width:96px;flex:1 1 0}.controls{width:100%}.actionButton{flex:1 1 calc(50% - 6px)}.footerHint{gap:8px 18px;font-size:.88rem}}@media(max-width:420px){:root{--gap: 8px}.gameCard{padding:14px;border-radius:20px}.titleBlock p{font-size:.95rem}.scorePanel{gap:10px}.scoreCard{min-width:0;padding:10px 14px}.scoreCard strong{font-size:1.2rem}.controls{gap:10px}.actionButton{padding:11px 14px}.footerHint{display:grid;grid-template-columns:1fr;gap:6px}}