*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{--page-bg: #f7f0e3;--board-bg: #c8b89c;--cell-bg: rgba(255, 255, 255, .42);--title: #6b4f29;--text: #5a4326;--muted: #8a7553;--score-bg: #b89e76;--score-text: #fffaf0;--btn-bg: #8b6f4e;--btn-bg-hover: #735836;--btn-text: #fffaf0;--btn-disabled-bg: #d6c8ae;--btn-disabled-text: #8a7c64;--modal-bg: #f7f0e3;--modal-text: #5a4326;--backdrop: rgba(91, 67, 38, .45);--rounded-font: "SF Pro Rounded", "Nunito", "Quicksand", "Hiragino Maru Gothic ProN", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-family:var(--rounded-font);color:var(--text);color-scheme:light}body{background:var(--page-bg);min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{max-width:none;margin:0;padding:0;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.game-2048{width:100%;max-width:520px;padding:24px 16px 32px;display:flex;flex-direction:column;gap:18px;align-items:stretch}.game-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-title{font-size:clamp(2.4rem,9vw,3.2rem);font-weight:800;color:var(--title);letter-spacing:-.02em;line-height:1}.scores{display:flex;gap:8px}.score-box{background:var(--score-bg);color:var(--score-text);padding:8px 14px;border-radius:10px;min-width:84px;text-align:center;display:flex;flex-direction:column;gap:2px}.score-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;opacity:.9}.score-value{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}.instructions{font-size:.92rem;color:var(--muted);text-align:center;margin:-4px 0 0}.board{--board-size: min( calc(100vw - 32px) , 480px);--gap: 10px;--padding: 10px;--cell-size: calc( (var(--board-size) - 2 * var(--padding) - 3 * var(--gap)) / 4 );position:relative;width:var(--board-size);height:var(--board-size);margin:0 auto;background:var(--board-bg);border-radius:14px;padding:var(--padding);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 14px #5b43261f}.bg-cells{position:absolute;inset:var(--padding);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap);pointer-events:none}.bg-cell{background:var(--cell-bg);border-radius:8px}.tile-layer{position:absolute;inset:var(--padding);pointer-events:none}.tile-slot{position:absolute;top:0;left:0;width:var(--cell-size);height:var(--cell-size);transition:transform .18s ease-out;transform:translate(calc(var(--col, 0) * (var(--cell-size) + var(--gap))),calc(var(--row, 0) * (var(--cell-size) + var(--gap))));will-change:transform}.tile-slot.is-absorbed{z-index:1}.tile-slot:not(.is-absorbed){z-index:2}.tile{position:absolute;inset:0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(1.4rem,8vw,2.8rem);font-variant-numeric:tabular-nums;background:var(--tile-bg, #fbf2d8);color:var(--tile-text, #6b4f29);letter-spacing:-.02em}.tile>span{display:inline-block;line-height:1}.tile.is-new>span{animation:tile-appear .18s ease-out backwards}.tile.is-merged>span{animation:tile-pop .18s ease-out}@keyframes tile-appear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes tile-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}.tile-2{--tile-bg: #fbf2d8;--tile-text: #6b4f29}.tile-4{--tile-bg: #f9e5be;--tile-text: #6b4f29}.tile-8{--tile-bg: #f4c597;--tile-text: #ffffff}.tile-16{--tile-bg: #ee9d72;--tile-text: #ffffff}.tile-32{--tile-bg: #e8754f;--tile-text: #ffffff}.tile-64{--tile-bg: #d94c3c;--tile-text: #ffffff}.tile-128{--tile-bg: #c9385a;--tile-text: #ffffff;font-size:clamp(1.2rem,6.6vw,2.4rem)}.tile-256{--tile-bg: #a3346a;--tile-text: #ffffff;font-size:clamp(1.2rem,6.6vw,2.4rem)}.tile-512{--tile-bg: #6f4290;--tile-text: #ffffff;font-size:clamp(1.2rem,6.6vw,2.4rem)}.tile-1024{--tile-bg: #4d4096;--tile-text: #ffffff;font-size:clamp(.95rem,5vw,1.95rem)}.tile-2048{--tile-bg: #355bb8;--tile-text: #ffffff;font-size:clamp(.95rem,5vw,1.95rem);box-shadow:0 0 0 3px #ffffff73 inset}.tile-super{--tile-bg: #1f3470;--tile-text: #ffffff;font-size:clamp(.85rem,4.4vw,1.7rem)}.controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.controls button,.modal-actions button{background:var(--btn-bg);color:var(--btn-text);border:none;border-radius:10px;padding:12px 22px;font-size:.98rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .14s ease-out,transform .1s ease-out;min-height:46px;letter-spacing:.01em}.controls button:hover:not(:disabled),.modal-actions button:hover:not(:disabled){background:var(--btn-bg-hover)}.controls button:active:not(:disabled),.modal-actions button:active:not(:disabled){transform:scale(.97)}.controls button:disabled{background:var(--btn-disabled-bg);color:var(--btn-disabled-text);cursor:not-allowed}.controls button:focus-visible,.modal-actions button:focus-visible{outline:3px solid #f7f0e3;outline-offset:2px;box-shadow:0 0 0 5px #8b6f4e73}.btn-secondary{background:transparent!important;color:var(--text)!important;border:2px solid var(--btn-bg)!important;padding:10px 20px!important}.btn-secondary:hover:not(:disabled){background:#8b6f4e1a!important}.modal-backdrop{position:fixed;inset:0;background:var(--backdrop);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:backdrop-fade .22s ease-out}.modal-backdrop--win{background:#3f5cae80}.modal{background:var(--modal-bg);color:var(--modal-text);border-radius:14px;padding:28px 24px 24px;max-width:360px;width:100%;text-align:center;box-shadow:0 18px 48px #00000038;animation:modal-pop .26s cubic-bezier(.18,.8,.24,1.1)}.modal h2{font-size:1.35rem;margin-bottom:20px;font-weight:800;line-height:1.25;letter-spacing:-.01em}.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}@keyframes backdrop-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:380px){.game-2048{padding:16px 12px 24px;gap:14px}.game-title{font-size:2.2rem}.score-box{min-width:70px;padding:6px 10px}.score-value{font-size:1.1rem}.instructions{font-size:.85rem}}@media(prefers-reduced-motion:reduce){.tile-slot{transition:none}.tile.is-new>span,.tile.is-merged>span{animation:none}.modal,.modal-backdrop{animation:none}}