:root {
  color: #17212b;
  background: #edf3f0;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }

.game-shell { width: min(100%, 520px); }
.masthead, .controls, .score-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { margin: 0 0 2px; color: #55716c; font-size: 13px; font-weight: 700; letter-spacing: 0; }
h1 { margin: 0; color: #183b37; font-size: 55px; line-height: .95; letter-spacing: 0; }
.score-row { gap: 8px; }
.score-box { min-width: 72px; border: 1px solid #c9d8d2; background: #dce9e4; padding: 7px 9px; text-align: center; }
.score-box span { display: block; color: #54716b; font-size: 11px; font-weight: 800; }
.score-box strong { display: block; font-size: 20px; }
.controls { margin: 22px 0 12px; }
.controls p, .hint { margin: 0; color: #45605a; font-size: 14px; }
button { border: 0; border-radius: 4px; background: #e25d3f; color: #fff; cursor: pointer; font: inherit; font-weight: 800; padding: 10px 14px; }
button:hover { background: #c84d35; }
.board { position: relative; aspect-ratio: 1; overflow: hidden; border: 10px solid #6e8780; background: #6e8780; border-radius: 6px; touch-action: none; }
.grid-background, .tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; }
.grid-background { z-index: 0; }
.grid-background::before { content: ""; grid-area: 1 / 1 / 5 / 5; background: repeating-linear-gradient(90deg, #90a79f 0 calc(25% - 7.5px), transparent calc(25% - 7.5px) 25%), repeating-linear-gradient(0deg, #90a79f 0 calc(25% - 7.5px), transparent calc(25% - 7.5px) 25%); }
.tiles { z-index: 1; pointer-events: none; }
.tile { display: grid; place-items: center; min-width: 0; color: #23352f; font-size: clamp(25px, 7vw, 42px); font-weight: 850; line-height: 1; animation: appear 130ms ease-out; }
.tile[data-value="2"] { background: #e5eee9; }.tile[data-value="4"] { background: #c9e0d3; }.tile[data-value="8"] { background: #f7c773; }.tile[data-value="16"] { background: #f5a95b; }.tile[data-value="32"] { background: #ef8255; }.tile[data-value="64"] { background: #e85d4d; color: #fff; }.tile[data-value="128"] { background: #d7d75d; }.tile[data-value="256"] { background: #9fce72; }.tile[data-value="512"] { background: #61bda0; color: #fff; }.tile[data-value="1024"] { background: #36899a; color: #fff; font-size: clamp(18px, 5vw, 31px); }.tile[data-value="2048"] { background: #244d6c; color: #fff; font-size: clamp(18px, 5vw, 31px); }.tile[data-value="4096"], .tile[data-value="8192"] { background: #2d2457; color: #fff; font-size: clamp(16px, 4vw, 27px); }
.message { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: rgb(237 243 240 / 86%); text-align: center; }
.message.is-hidden { display: none; }.message h2 { margin: 0 0 14px; color: #183b37; font-size: 35px; }.message button { margin: 3px; }.message #keep-playing { background: #456d63; }
.hint { margin-top: 14px; text-align: center; }
@keyframes appear { from { transform: scale(.7); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 430px) { h1 { font-size: 46px; }.controls { align-items: flex-start; }.controls p { max-width: 190px; }.board { border-width: 7px; }.grid-background, .tiles { gap: 7px; }.score-box { min-width: 64px; } }