:root{--board-size: 500px;--color-bg: #faf8ef;--color-text: #776e65;--color-text-secondary: #998c7a;--color-text-muted: #bba99a;--color-btn: #8f7a66;--color-btn-hover: #6d5a4a;--color-accent: #8f7a66;--color-board: #e0d6c8;--color-cell: rgba(255, 255, 255, .45);--color-overlay-bg: rgba(250, 248, 239, .85);--color-score-bg: #e0d6c8;--color-score-text: #776e65;--color-score-label: #998c7a;--radius: 8px;--radius-sm: 5px;--transition-speed: .12s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;user-select:none;-webkit-user-select:none}#app{width:var(--board-size);max-width:100%;padding:20px 15px 16px}#header{margin-bottom:12px}.header-row{display:flex;justify-content:space-between;align-items:center}.subtitle-row{margin-top:8px}.title{font-size:4rem;font-weight:800;color:var(--color-text);line-height:1;letter-spacing:-.02em}.subtitle{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.subtitle strong{color:var(--color-text);font-weight:700}.scores{display:flex;gap:6px}.score-box{background:var(--color-score-bg);border-radius:var(--radius);padding:4px 18px 6px;text-align:center;min-width:72px;position:relative}.score-best{padding-left:32px}.score-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--color-score-label);opacity:.7}.score-label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-score-label);opacity:.85}.score-value{display:block;font-size:1.2rem;font-weight:800;line-height:1.3;color:var(--color-score-text)}.score-bump .score-value{animation:score-bump .3s ease}@keyframes score-bump{0%{transform:scale(1)}35%{transform:scale(1.15)}to{transform:scale(1)}}.btn{display:inline-flex;align-items:center;gap:5px;background:var(--color-btn);color:#f9f6f2;border:none;border-radius:var(--radius);padding:8px 16px;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;letter-spacing:.01em;box-shadow:0 1px 3px #0000001a}.btn:hover{background:var(--color-btn-hover);box-shadow:0 2px 6px #00000026}.btn:active{transform:scale(.96);box-shadow:0 0 2px #0000001a}.btn-large{padding:12px 36px;font-size:1rem;gap:7px}.btn-icon{width:15px;height:15px;flex-shrink:0}.btn-large .btn-icon{width:17px;height:17px}#board-wrapper{display:flex;justify-content:center;min-width:0}#board{position:relative;width:var(--board-size);height:var(--board-size);flex-shrink:0;background:var(--color-board);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px #00000014,inset 0 1px #ffffff1a}#grid-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3%;padding:3%}.grid-cell{background:var(--color-cell);border-radius:4px}#tile-container{position:absolute;inset:0}.tile{position:absolute;will-change:transform;transition:transform var(--transition-speed) ease;z-index:1}.tile-merged{z-index:10}.tile-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:800;box-shadow:inset 0 1px #ffffff40,0 1px 4px #00000014;transition:background-color .12s ease}.tile-num{display:block;line-height:1;pointer-events:none;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(0,0,0,.03)}.tile-2048 .tile-inner{background:linear-gradient(135deg,#ffe066,gold,#f0b800)!important;box-shadow:inset 0 1px #ffffff80,0 0 24px #ffd70059,0 2px 8px #00000014;animation:tile-glow 2s ease-in-out infinite}.tile-2048 .tile-num{text-shadow:0 1px 6px rgba(0,0,0,.12)}@keyframes tile-glow{0%,to{box-shadow:inset 0 1px #ffffff80,0 0 24px #ffd70059,0 2px 8px #00000014}50%{box-shadow:inset 0 1px #ffffff80,0 0 36px #ffd7008c,0 2px 8px #00000014}}.tile-new .tile-inner{animation:tile-pop-in .2s ease forwards}@keyframes tile-pop-in{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.tile-merged .tile-inner{animation:tile-pulse .2s ease forwards}@keyframes tile-pulse{0%{transform:scale(1)}35%{transform:scale(1.18)}to{transform:scale(1)}}#game-overlay{position:absolute;inset:0;background:var(--color-overlay-bg);display:flex;align-items:center;justify-content:center;z-index:100;opacity:1;transition:opacity .3s ease;border-radius:var(--radius);backdrop-filter:blur(2px)}#game-overlay.hidden{display:none;opacity:0}#overlay-content{text-align:center;animation:overlay-in .35s ease}@keyframes overlay-in{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}#overlay-message{font-size:2.4rem;font-weight:800;margin-bottom:20px;color:var(--color-text);line-height:1.2}#footer{margin-top:16px;text-align:center}.hint{font-size:.78rem;color:var(--color-text-muted)}.hint kbd{display:inline-block;padding:2px 7px;font-size:.72rem;font-family:inherit;font-weight:700;background:#ede4da;color:var(--color-text);border-radius:4px}@media(max-width:540px){:root{--board-size: calc(100vw - 30px) }#app{padding:14px 8px}.title{font-size:2.6rem}.subtitle{font-size:.75rem}.score-box{min-width:56px;padding:3px 12px 5px}.score-best{padding-left:28px}.score-icon{left:8px;width:12px;height:12px}.score-value{font-size:1rem}#overlay-message{font-size:1.7rem}.btn-large{padding:10px 28px;font-size:.9rem}}@media(max-width:360px){.title{font-size:2rem}.score-box{min-width:46px;padding:2px 8px 4px}.score-best{padding-left:24px}.score-icon{left:6px;width:10px;height:10px}.score-value{font-size:.85rem}.btn{font-size:.72rem;padding:6px 10px}}@media(hover:none){.btn:hover{background:var(--color-btn);box-shadow:0 1px 3px #0000001a}.btn:active{background:var(--color-btn-hover)}}