:root{color:#27323a;background:#f6f4ea;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;overflow-x:hidden}button,input,textarea,select{font:inherit}.app-shell{min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.game-layout{display:grid;gap:18px;width:min(100%,520px);margin:0 auto}.game-header{display:flex;align-items:end;justify-content:space-between;gap:16px}.game-header h1{margin:0;font-size:48px;line-height:1}.score-panel{display:grid;grid-template-columns:repeat(4,minmax(66px,1fr));gap:8px}.score-box{min-width:0;padding:8px 10px;border-radius:8px;background:#2f6f73;color:#fff;text-align:center}.score-box span{display:block;color:#d6ece8;font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.score-box strong{display:block;margin-top:4px;font-size:18px;line-height:1}.board{position:relative;aspect-ratio:1;width:100%;padding:10px;border-radius:8px;background:#9f968b;touch-action:none}.board-stage{position:relative}.board-grid,.tile-grid,.tile-motion-grid{position:absolute;top:10px;right:10px;bottom:10px;left:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px}.board-grid{z-index:0}.tile-grid{z-index:2}.tile-motion-grid{z-index:3;pointer-events:none}.board-cell{border-radius:6px;background:rgba(246,244,234,.45)}.tile{display:grid;width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;justify-self:stretch;place-items:center;border-radius:6px;background:#eee4da;color:#5e574f;font-size:clamp(26px,11vw,48px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1;overflow:hidden;padding:0 6px;text-align:center;will-change:transform,opacity}.tile span{display:block;max-width:100%;overflow:hidden;text-overflow:clip}.tile-2{background:#eee4da}.tile-4{background:#e6d6b8}.tile-8{background:#e7a55f;color:#fff}.tile-16{background:#e77c64;color:#fff}.tile-32{background:#d95f73;color:#fff}.tile-64{background:#b94d7b;color:#fff}.tile-128{background:#4d8d8a;color:#fff}.tile-256{background:#2f6f73;color:#fff}.tile-512{background:#3d6fb6;color:#fff}.tile-1024{background:#6554a6;color:#fff}.tile-2048,.tile-super{background:#d89f2d;color:#fff}.tile-rank-12{background:#3d6fb6;color:#fff}.tile-rank-13{background:#6554a6;color:#fff}.tile-rank-14{background:#b94d7b;color:#fff}.tile-rank-15{background:#228b8d;color:#fff}.tile-rank-16{background:#1d5f9f;color:#fff}.tile-rank-17{background:#8c2f54;color:#fff}.tile-rank-18{background:#293241;color:#fff}.tile-new{animation:tile-spawn .15s cubic-bezier(.18,.9,.2,1.1)}.tile-merged{animation:tile-merge .15s cubic-bezier(.18,.9,.2,1.1)}.tile-moving{animation:tile-slide .13s cubic-bezier(.2,.8,.2,1) both}.tile-moving-away{animation:tile-slide .13s cubic-bezier(.2,.8,.2,1) both,tile-disappear 1ms linear .13s forwards}.tile-merge-final{opacity:0;animation:tile-appear 1ms linear .13s forwards,tile-merge .14s cubic-bezier(.18,.9,.2,1.1) .13s}.tile-digits-3{font-size:clamp(22px,7vw,36px)}.tile-digits-4{font-size:clamp(18px,5.5vw,30px)}.tile-digits-5{font-size:clamp(15px,4.5vw,24px)}.tile-digits-6{font-size:clamp(12px,3.8vw,20px)}.controls{display:flex;justify-content:center;gap:10px}.control-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:0 16px;background:#293241;color:#fff;font-weight:700;cursor:pointer}.control-button:disabled{cursor:not-allowed;opacity:.45}.icon-button{aspect-ratio:1;min-width:44px;padding:0}.game-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;place-items:center;border-radius:8px;background:rgba(246,244,234,.82);animation:overlay-enter .14s ease-out .14s both;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.overlay-panel{display:grid;gap:14px;justify-items:center;max-width:min(82%,280px);border-radius:8px;padding:18px 20px;background:rgba(246,244,234,.96);box-shadow:0 12px 36px #2932412e;text-align:center}.overlay-panel h2{margin:0;font-size:28px}.overlay-actions{display:flex;gap:10px}.overlay-actions button{min-height:42px;border:0;border-radius:8px;padding:0 14px;background:#293241;color:#fff;font-weight:700}@keyframes tile-spawn{0%{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}@keyframes tile-merge{0%{transform:scale(1)}55%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes tile-slide{0%{transform:translate(var(--tile-slide-x),var(--tile-slide-y))}to{transform:translate(0)}}@keyframes tile-disappear{to{opacity:0}}@keyframes tile-appear{to{opacity:1}}@keyframes overlay-enter{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.game-overlay,.tile{animation:none!important}.tile-moving{transform:none}.tile-moving-away{display:none}.tile-merge-final{opacity:1}}@media (max-width: 480px){.game-header{align-items:stretch;flex-direction:column}.score-panel{grid-template-columns:repeat(4,1fr)}.score-box{min-width:0}}
