:root{color-scheme:light dark;--page-bg: radial-gradient( circle at 50% -10%, #fbf6ee 0%, #f2e8d8 55%, #e7d9c2 100% );--board-frame-bg: linear-gradient(160deg, #bda787 0%, #a3896a 100%);--board-frame-shadow: 0 20px 40px -14px rgba(66, 45, 20, .45), inset 0 2px 0 rgba(255, 255, 255, .18);--board-radius: 20px;--cell-radius: 10px;--empty-cell-bg: rgba(255, 250, 240, .28);--empty-cell-shadow: inset 0 2px 6px rgba(60, 40, 15, .28);--tile-2-bg: #f7efe1;--tile-2-fg: #7a6a55;--tile-4-bg: #f0dfc0;--tile-4-fg: #7a6a55;--tile-8-bg: #f2a65a;--tile-8-fg: #fffaf3;--tile-16-bg: #ef8c4c;--tile-16-fg: #fffaf3;--tile-32-bg: #ef723f;--tile-32-fg: #fffaf3;--tile-64-bg: #e8532f;--tile-64-fg: #fffaf3;--tile-128-bg: #d63c62;--tile-128-fg: #fff8f6;--tile-256-bg: #b8377f;--tile-256-fg: #fff5fb;--tile-512-bg: #8f3a97;--tile-512-fg: #f8f0fb;--tile-1024-bg: #5f3aa0;--tile-1024-fg: #f4f0fc;--tile-2048-bg: #2c2f8f;--tile-2048-fg: #ffd76a;--tile-max-bg: linear-gradient( 135deg, #ffd76a 0%, #ff9d3d 35%, #ff5e7e 65%, #a35bff 100% );--tile-max-fg: #241238;--tile-max-shadow: 0 0 18px rgba(255, 215, 106, .55);--panel-bg: linear-gradient(160deg, #c9b795 0%, #ad9573 100%);--panel-fg: #4a3b28;--panel-radius: 14px;--panel-shadow: 0 10px 20px -8px rgba(66, 45, 20, .35), inset 0 1px 0 rgba(255, 255, 255, .22);--accent-gold: #ffd76a;--overlay-scrim: rgba(35, 24, 14, .55);--overlay-panel-bg: linear-gradient(160deg, #fff8ec 0%, #f0e3cc 100%);--overlay-panel-fg: #4a3b28;--overlay-button-bg: linear-gradient(160deg, #bda787 0%, #a3896a 100%);--overlay-button-fg: #fffaf3}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;overscroll-behavior:none;font-family:Manrope,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{background:var(--page-bg);padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);overflow:hidden}#app{width:100%;height:100%}.game-shell{display:flex;flex-direction:column;width:100%;height:100%}.board-container{position:relative;flex:1;min-height:0}.game-area{touch-action:none;overscroll-behavior:none}.board-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16px}.board{position:relative;width:min(92vw,92vh,520px);aspect-ratio:1 / 1;background:var(--board-frame-bg);box-shadow:var(--board-frame-shadow);border-radius:var(--board-radius);overflow:hidden;touch-action:none;overscroll-behavior:none}.board-background,.board-tiles{position:absolute;top:0;right:0;bottom:0;left:0}.board-background{z-index:0}.board-tiles{z-index:1}.particle-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.board-cell{position:absolute;top:0;left:0;width:var(--size);height:var(--size);transform:translate(var(--x),var(--y));border-radius:var(--cell-radius);box-sizing:border-box;background:var(--empty-cell-bg);box-shadow:var(--empty-cell-shadow)}.tile{position:absolute;top:0;left:0;border-radius:var(--cell-radius);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1;-webkit-user-select:none;user-select:none;will-change:transform;background:var(--tile-2-bg);color:var(--tile-2-fg)}.tile[data-digits="1"]{font-size:calc(var(--cell-px, 60px) * .5)}.tile[data-digits="2"]{font-size:calc(var(--cell-px, 60px) * .42)}.tile[data-digits="3"]{font-size:calc(var(--cell-px, 60px) * .34)}.tile[data-digits="4"]{font-size:calc(var(--cell-px, 60px) * .28)}.tile[data-digits="5"]{font-size:calc(var(--cell-px, 60px) * .22)}.tile[data-tier="2"]{background:var(--tile-2-bg);color:var(--tile-2-fg)}.tile[data-tier="4"]{background:var(--tile-4-bg);color:var(--tile-4-fg)}.tile[data-tier="8"]{background:var(--tile-8-bg);color:var(--tile-8-fg)}.tile[data-tier="16"]{background:var(--tile-16-bg);color:var(--tile-16-fg)}.tile[data-tier="32"]{background:var(--tile-32-bg);color:var(--tile-32-fg)}.tile[data-tier="64"]{background:var(--tile-64-bg);color:var(--tile-64-fg)}.tile[data-tier="128"]{background:var(--tile-128-bg);color:var(--tile-128-fg)}.tile[data-tier="256"]{background:var(--tile-256-bg);color:var(--tile-256-fg)}.tile[data-tier="512"]{background:var(--tile-512-bg);color:var(--tile-512-fg)}.tile[data-tier="1024"]{background:var(--tile-1024-bg);color:var(--tile-1024-fg)}.tile[data-tier="2048"]{background:var(--tile-2048-bg);color:var(--tile-2048-fg)}.tile[data-tier=max]{background:var(--tile-max-bg);color:var(--tile-max-fg);box-shadow:var(--tile-max-shadow)}@keyframes tile-glow-pulse{0%,to{box-shadow:0 0 6px 1px var(--glow-color, rgba(255, 255, 255, .4))}50%{box-shadow:0 0 16px 4px var(--glow-color, rgba(255, 255, 255, .6))}}.tile-glow{--glow-color: rgba(255, 200, 120, .45);animation:tile-glow-pulse 1.8s ease-in-out infinite}.tile-glow-strong{--glow-color: rgba(255, 215, 106, .8);animation:tile-glow-pulse 1.3s ease-in-out infinite}.scoreboard{display:flex;gap:10px;justify-content:center;padding:0 16px 14px;flex-shrink:0}.score-box{position:relative;min-width:95px;padding:8px 20px;text-align:center;border-radius:8px;box-shadow:0 6px 14px -6px #422d1459}.score-box--score{background:linear-gradient(135deg,#f4a35f,#ef8c4c);color:#fffaf3}.score-box--best{background:linear-gradient(135deg,#8b6fe0,#ef6a94);color:#fffaf3}.score-box-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;opacity:.85}.score-box-value{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}.score-popup{position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:14px;font-weight:800;color:#fffaf3;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap}.scoreboard-buttons-row{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;flex-shrink:0}.tutorial-button{display:inline-flex;align-items:center;gap:5px;padding:12px;font-family:inherit;font-size:12px;font-weight:700;color:#4a3b28bf;background:#a3906f29;border:none;border-radius:8px;cursor:pointer}.tutorial-button:active{transform:scale(.96)}.tutorial-button-icon{color:#d68b3f}.new-game-button{display:inline-flex;align-items:center;gap:5px;padding:12px;font-family:inherit;font-size:12px;font-weight:700;color:#4a3b28bf;background:#a3906f29;border:none;border-radius:8px;cursor:pointer}.new-game-button:active{transform:scale(.96)}.new-game-button-icon{color:#6f9a6a}.board-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:none;align-items:center;justify-content:center;background:var(--overlay-scrim);border-radius:var(--board-radius)}.board-overlay.is-visible{display:flex}.tutorial-overlay{position:fixed;z-index:50;border-radius:0;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}.overlay-panel{min-width:250px;max-width:86%;padding:32px 30px;text-align:center;background:var(--overlay-panel-bg);color:var(--overlay-panel-fg);border-radius:26px;box-shadow:0 20px 44px -14px #422d1473}.tutorial-overlay .overlay-panel{max-width:340px;max-height:100%;overflow-y:auto}.overlay-icon{width:64px;height:64px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:18px;font-size:22px;font-weight:800}.win-overlay .overlay-icon{background:var(--tile-2048-bg);color:var(--tile-2048-fg);box-shadow:0 0 26px #ffd76a8c}.game-over-overlay .overlay-icon{background:linear-gradient(160deg,var(--tile-64-bg) 0%,var(--tile-32-bg) 100%);color:#fffaf3;font-size:30px}.tutorial-overlay .overlay-icon{background:linear-gradient(135deg,#f4a35f,#ef8c4c);color:#fffaf3;font-size:26px}.tutorial-text{margin:0 0 16px;text-align:left}.tutorial-text p{margin:0 0 8px;font-size:14px;line-height:1.4;color:var(--overlay-panel-fg);opacity:.9}.tutorial-text p:last-child{margin-bottom:0}.tutorial-text strong{opacity:1}.tutorial-image{display:block;width:100%;margin:0 0 22px;border-radius:14px}.overlay-title{margin:0 0 10px;font-size:24px;font-weight:800;letter-spacing:-.01em}.overlay-score{display:inline-block;margin:0 0 22px;padding:6px 16px;font-size:14px;font-weight:600;color:var(--overlay-panel-fg);background:#4a3b2814;border-radius:999px}.overlay-score strong{font-weight:800}.overlay-actions{display:flex;gap:10px;justify-content:center}.overlay-button{flex:1;padding:13px 22px;font-size:15px;font-weight:700;border:none;border-radius:999px;cursor:pointer}.overlay-button:active{transform:scale(.97)}.overlay-button--primary{background:linear-gradient(135deg,#f4a35f,#ef8c4c);color:#fffaf3}.overlay-button--secondary{background:linear-gradient(160deg,#a3906f,#8f7a5c);color:#fff8ec}