* { box-sizing: border-box; }
:root { --board: 500px; --pad: 15px; --gap: 15px; --cell: 106.25px; --tile-font: 55px; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: #faf8ef; color: #776e65; font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 1.4; }
.container { width: var(--board); max-width: 100%; margin: 0 auto; padding: 20px 0 40px; }
.heading { display: flex; flex-direction: column; gap: 12px; }
.title { margin: 0; font-size: 28px; font-weight: 700; }
.brand { font-size: 64px; font-weight: 800; margin-right: 8px; }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scores { display: flex; gap: 8px; }
.score-box { position: relative; min-width: 80px; padding: 6px 12px; background: #bbada0; border-radius: 3px; color: #fff; text-align: center; font-size: 22px; font-weight: 700; }
.score-label { display: block; font-size: 11px; text-transform: uppercase; color: #eee4da; }
.score-addition { position: absolute; right: 12px; top: 8px; color: rgba(119,110,101,0.9); font-weight: 700; animation: move-up 600ms ease-in both; pointer-events: none; }
.button { display: inline-block; background: #8f7a66; color: #f9f6f2; border: 0; border-radius: 3px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.button:hover { background: #9f8b77; }
.intro { margin: 14px 0; }
.game-container { position: relative; width: var(--board); max-width: 100%; height: var(--board); background: #bbada0; border-radius: 6px; padding: var(--pad); touch-action: none; }
.grid-container { position: absolute; left: var(--pad); top: var(--pad); display: grid; grid-template-columns: repeat(4, var(--cell)); grid-template-rows: repeat(4, var(--cell)); gap: var(--gap); z-index: 1; }
.grid-cell { background: rgba(238,228,218,0.35); border-radius: 3px; }
.tile-container { position: absolute; left: var(--pad); top: var(--pad); z-index: 2; }
.tile { position: absolute; width: var(--cell); height: var(--cell); transition: transform 100ms ease-in-out; }
.tile-inner { width: 100%; height: 100%; line-height: var(--cell); text-align: center; font-weight: 700; font-size: var(--tile-font); border-radius: 3px; background: #3c3a32; color: #f9f6f2; }
.tile-new .tile-inner { animation: appear 200ms ease 100ms backwards; }
.tile-merged .tile-inner { z-index: 20; animation: pop 200ms ease 100ms backwards; }
.tile-2 .tile-inner { background: #eee4da; color: #776e65; }
.tile-4 .tile-inner { background: #ede0c8; color: #776e65; }
.tile-8 .tile-inner { background: #f2b179; color: #f9f6f2; }
.tile-16 .tile-inner { background: #f59563; color: #f9f6f2; }
.tile-32 .tile-inner { background: #f67c5f; color: #f9f6f2; }
.tile-64 .tile-inner { background: #f65e3b; color: #f9f6f2; }
.tile-128 .tile-inner { background: #edcf72; color: #f9f6f2; }
.tile-256 .tile-inner { background: #edcc61; color: #f9f6f2; }
.tile-512 .tile-inner { background: #edc850; color: #f9f6f2; }
.tile-1024 .tile-inner { background: #edc53f; color: #f9f6f2; }
.tile-2048 .tile-inner { background: #edc22e; color: #f9f6f2; }
.tile-128 .tile-inner, .tile-256 .tile-inner, .tile-512 .tile-inner { font-size: calc(var(--tile-font) * 0.82); }
.tile-1024 .tile-inner, .tile-2048 .tile-inner { font-size: calc(var(--tile-font) * 0.64); }
.tile-2048 .tile-inner { box-shadow: 0 0 30px 10px rgba(243,215,116,0.4); }
.tile-super .tile-inner { background: #3c3a32; color: #f9f6f2; font-size: calc(var(--tile-font) * 0.55); }
.tile-4096 .tile-inner, .tile-8192 .tile-inner, .tile-16384 .tile-inner, .tile-32768 .tile-inner, .tile-65536 .tile-inner, .tile-131072 .tile-inner { background: #3c3a32; color: #f9f6f2; font-size: calc(var(--tile-font) * 0.55); }
.tile-position-1-1 { transform: translate(calc(0 * (var(--cell) + var(--gap))), calc(0 * (var(--cell) + var(--gap)))); }
.tile-position-1-2 { transform: translate(calc(0 * (var(--cell) + var(--gap))), calc(1 * (var(--cell) + var(--gap)))); }
.tile-position-1-3 { transform: translate(calc(0 * (var(--cell) + var(--gap))), calc(2 * (var(--cell) + var(--gap)))); }
.tile-position-1-4 { transform: translate(calc(0 * (var(--cell) + var(--gap))), calc(3 * (var(--cell) + var(--gap)))); }
.tile-position-2-1 { transform: translate(calc(1 * (var(--cell) + var(--gap))), calc(0 * (var(--cell) + var(--gap)))); }
.tile-position-2-2 { transform: translate(calc(1 * (var(--cell) + var(--gap))), calc(1 * (var(--cell) + var(--gap)))); }
.tile-position-2-3 { transform: translate(calc(1 * (var(--cell) + var(--gap))), calc(2 * (var(--cell) + var(--gap)))); }
.tile-position-2-4 { transform: translate(calc(1 * (var(--cell) + var(--gap))), calc(3 * (var(--cell) + var(--gap)))); }
.tile-position-3-1 { transform: translate(calc(2 * (var(--cell) + var(--gap))), calc(0 * (var(--cell) + var(--gap)))); }
.tile-position-3-2 { transform: translate(calc(2 * (var(--cell) + var(--gap))), calc(1 * (var(--cell) + var(--gap)))); }
.tile-position-3-3 { transform: translate(calc(2 * (var(--cell) + var(--gap))), calc(2 * (var(--cell) + var(--gap)))); }
.tile-position-3-4 { transform: translate(calc(2 * (var(--cell) + var(--gap))), calc(3 * (var(--cell) + var(--gap)))); }
.tile-position-4-1 { transform: translate(calc(3 * (var(--cell) + var(--gap))), calc(0 * (var(--cell) + var(--gap)))); }
.tile-position-4-2 { transform: translate(calc(3 * (var(--cell) + var(--gap))), calc(1 * (var(--cell) + var(--gap)))); }
.tile-position-4-3 { transform: translate(calc(3 * (var(--cell) + var(--gap))), calc(2 * (var(--cell) + var(--gap)))); }
.tile-position-4-4 { transform: translate(calc(3 * (var(--cell) + var(--gap))), calc(3 * (var(--cell) + var(--gap)))); }
.game-message { display: none; position: absolute; inset: 0; z-index: 100; background: rgba(238,228,218,0.5); border-radius: 6px; text-align: center; flex-direction: column; align-items: center; justify-content: center; animation: fade-in 800ms ease 1200ms both; }
.game-message p { margin: 0 0 20px; font-size: 48px; font-weight: 800; }
.game-message.game-won { display: flex; background: rgba(237,194,46,0.5); color: #f9f6f2; }
.game-message.game-over { display: flex; }
.game-message .lower { display: flex; gap: 10px; justify-content: center; }
.game-message .keep-playing-button { display: none; }
.game-message.game-won .keep-playing-button { display: inline-block; }
.help { margin-top: 24px; }
.help h2 { font-size: 20px; margin: 0 0 6px; }
.help p { margin: 0; }
@keyframes appear { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes move-up { 0% { top: 8px; opacity: 1; } 100% { top: -40px; opacity: 0; } }
@media (max-width: 520px) {
  :root { --board: 280px; --pad: 10px; --gap: 10px; --cell: 57.5px; --tile-font: 25px; }
  body { font-size: 15px; }
  .container { padding: 12px 10px 30px; width: 300px; }
  .title { font-size: 20px; }
  .brand { font-size: 40px; }
  .score-box { min-width: 64px; padding: 4px 8px; font-size: 18px; }
  .button { padding: 8px 12px; }
  .game-message p { font-size: 28px; margin-bottom: 12px; }
}