*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--app-pad: 16px;--layout-chrome-v: 210px;--board-min: 268px;--board-bg: #bbada0;--bg-cell-color: rgba(238, 228, 218, .35);--body-bg: #faf8ef;--text-color: #776e65;--radius: 6px;--avail-w: calc( 100vw - 2 * var(--app-pad) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) );--avail-h: calc( 100vh - var(--layout-chrome-v) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) );--board-raw: min(var(--avail-w), var(--avail-h));--board-size: max(var(--board-min), var(--board-raw));--cell-gap: calc(var(--board-size) * .03);--board-padding: var(--cell-gap);--cell-size: calc((var(--board-size) - 5 * var(--cell-gap)) / 4)}@supports (width: 100svw){:root{--avail-w: calc( 100svw - 2 * var(--app-pad) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) );--avail-h: calc( 100svh - var(--layout-chrome-v) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) )}}html,body{height:100%;touch-action:none;overscroll-behavior:none}body{background:var(--body-bg);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;color:var(--text-color);display:flex;justify-content:center;min-height:100vh;min-height:100dvh}#app{width:100%;max-width:100%;min-height:100vh;min-height:100dvh;padding:var(--app-pad);padding-left:calc(var(--app-pad) + env(safe-area-inset-left,0px));padding-right:calc(var(--app-pad) + env(safe-area-inset-right,0px));padding-top:calc(var(--app-pad) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--app-pad) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;box-sizing:border-box}#header,#footer{width:100%;max-width:var(--board-size);align-self:center}#game-area{position:relative;width:var(--board-size);height:var(--board-size);align-self:center}.renderer{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;transition:opacity .3s ease;border-radius:var(--radius);overflow:hidden}.renderer.active{opacity:1;pointer-events:auto}#game-area.view-transitioning .renderer{transition:none;pointer-events:none}.renderer.transition-layer{will-change:opacity}.board-2d{position:relative;width:var(--board-size);height:var(--board-size);background:var(--board-bg);border-radius:var(--radius);padding:var(--board-padding)}.board-background{display:grid;grid-template-columns:repeat(4,var(--cell-size));grid-template-rows:repeat(4,var(--cell-size));gap:var(--cell-gap)}.bg-cell{width:var(--cell-size);height:var(--cell-size);background:var(--bg-cell-color);border-radius:var(--radius)}.tiles-layer{position:absolute;top:0;right:0;bottom:0;left:0;opacity:1;will-change:opacity}.renderer-3d canvas{width:100%!important;height:100%!important}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#eee4daba;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .2s ease}.overlay.hidden{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay-content{text-align:center}#overlay-gameover .overlay-content{transform:none}#overlay-gameover{background:transparent;align-items:flex-end;padding-bottom:20%}#overlay-gameover .overlay-title{color:#f3eee6;text-shadow:0 2px 8px rgba(0,0,0,.35)}.overlay-title{font-size:2rem;font-weight:800;color:var(--text-color);margin-bottom:6px}.overlay-subtitle{font-size:1rem;color:var(--text-color);margin-bottom:20px}.overlay-actions{display:flex;gap:10px;justify-content:center}.overlay-intro{background:#776e65bf;flex-direction:column;gap:12px}.intro-title{font-size:2.2rem;font-weight:800;color:#f9f6f2;text-shadow:0 2px 8px rgba(0,0,0,.3)}.intro-hint{font-size:.85rem;color:#f9f6f2cc}.tile{position:absolute;width:var(--cell-size);height:var(--cell-size);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,calc(var(--cell-size) * .45),2.5rem);font-weight:800;line-height:1;will-change:transform;top:0;left:0;transition:transform .12s ease-in-out;z-index:10;-webkit-user-select:none;user-select:none}.tile--moving{transition:transform .12s ease-in-out}.tile--merged{animation:tile-merge .2s ease-in-out}@keyframes tile-merge{0%{scale:1}50%{scale:1.04}to{scale:1}}.tile--spawn{animation:tile-spawn .15s ease-out}@keyframes tile-spawn{0%{scale:0;opacity:0}80%{scale:1.1;opacity:1}to{scale:1}}.tile-val-2{background:#eee4da;color:#776e65}.tile-val-4{background:#ede0c8;color:#776e65}.tile-val-8{background:#f2b179;color:#f9f6f2}.tile-val-16{background:#f59563;color:#f9f6f2}.tile-val-32{background:#f67c5f;color:#f9f6f2}.tile-val-64{background:#f65e3b;color:#f9f6f2}.tile-val-128{background:#edcf72;color:#f9f6f2;font-size:clamp(.85rem,calc(var(--cell-size) * .38),2rem)}.tile-val-256{background:#edcc61;color:#f9f6f2;font-size:clamp(.85rem,calc(var(--cell-size) * .38),2rem)}.tile-val-512{background:#edc850;color:#f9f6f2;font-size:clamp(.85rem,calc(var(--cell-size) * .38),2rem)}.tile-val-1024{background:#edc53f;color:#f9f6f2;font-size:clamp(.75rem,calc(var(--cell-size) * .34),1.75rem)}.tile-val-2048{background:#edc22e;color:#f9f6f2;font-size:clamp(.75rem,calc(var(--cell-size) * .34),1.75rem)}.tile-val-super{background:#3c3a32;color:#f9f6f2;font-size:clamp(.55rem,calc(var(--cell-size) * .28),1.35rem)}@media (max-width: 768px){.tile{font-size:clamp(.9rem,calc(var(--cell-size) * .4),2.1rem)}.tile-val-2,.tile-val-4,.tile-val-8,.tile-val-16,.tile-val-32,.tile-val-64{font-size:clamp(.72rem,calc(var(--cell-size) * .32),1.65rem)}.tile-val-128,.tile-val-256,.tile-val-512{font-size:clamp(.78rem,calc(var(--cell-size) * .34),1.75rem)}.tile-val-1024,.tile-val-2048{font-size:clamp(.68rem,calc(var(--cell-size) * .3),1.55rem)}.tile-val-super{font-size:clamp(.52rem,calc(var(--cell-size) * .25),1.2rem)}}#header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.header-left .game-title{font-size:3rem;font-weight:800;color:#776e65;line-height:1}.header-left .game-subtitle{font-size:.7rem;color:#bbada0;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.scores{display:flex;gap:6px}.score-box{position:relative;overflow:visible;background:#bbada0;border-radius:4px;padding:6px 14px;text-align:center;min-width:64px}.score-label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;color:#eee4da;text-transform:uppercase}.score-value{display:block;font-size:1.2rem;font-weight:800;color:#fff;line-height:1.2}.score-added{position:absolute;top:-6px;left:50%;transform:translate(-50%);font-size:.8rem;font-weight:700;color:#776e65;opacity:1;pointer-events:none;white-space:nowrap;transition:none}.score-added--fly{transition:transform .6s ease-out,opacity .6s ease-out;transform:translate(-50%) translateY(-28px);opacity:0}.controls{display:flex;gap:6px}.btn{cursor:pointer;border:none;border-radius:4px;font-family:inherit;font-weight:700;font-size:.8rem;padding:8px 14px;transition:background .15s,transform .1s;outline-offset:2px}.btn:focus-visible{outline:3px solid #f65e3b}.btn:active{transform:scale(.96)}.btn-primary{background:#8f7a66;color:#f9f6f2}.btn-primary:hover{background:#7a6a58}.btn-secondary{background:#bbada0;color:#f9f6f2}.btn-secondary:hover{background:#a89990}#footer{text-align:center}.hint-text{font-size:.75rem;color:#bbada0}@media (max-width: 400px){.header-left .game-title{font-size:2.2rem}.score-box{min-width:52px;padding:5px 10px}.score-value{font-size:1rem}.btn{padding:7px 10px;font-size:.75rem}}