:root{--bg: #faf8ef;--text: #776e65;--text-light: #f9f6f2;--board-bg: #bbada0;--cell-empty: rgba(238, 228, 218, .35);--cell-2: #eee4da;--cell-4: #ede0c8;--cell-8: #f2b179;--cell-16: #f59563;--cell-32: #f67c5f;--cell-64: #f65e3b;--cell-128: #edcf72;--cell-256: #edcc61;--cell-512: #edc850;--cell-1024: #edc53f;--cell-2048: #edc22e;--cell-super: #3c3a32;--btn-bg: #8f7a66;--btn-hover: #9f8b77}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,PingFang SC,Helvetica Neue,sans-serif;background:var(--bg);color:var(--text);display:flex;justify-content:center;padding:20px}#app{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center}h1{font-size:40px;margin:8px 0 4px;color:var(--text)}.status-line{display:flex;gap:12px;margin:12px 0 16px;align-items:center}.score-box{background:var(--board-bg);color:var(--text-light);border-radius:6px;padding:8px 18px;text-align:center;min-width:90px}.score-box .label{font-size:12px;opacity:.85;text-transform:uppercase}.score-box .value{font-size:22px;font-weight:700}.board{background:var(--board-bg);border-radius:8px;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;width:100%;aspect-ratio:1;position:relative;touch-action:none}.grid-cells,.tile-layer{position:absolute;top:10px;right:10px;bottom:10px;left:10px;display:grid;grid-template-columns:repeat(var(--size, 4),1fr);grid-template-rows:repeat(var(--size, 4),1fr);gap:10px;pointer-events:none}.tile{border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:var(--text);transition:transform .12s ease;-webkit-user-select:none;user-select:none;will-change:transform;z-index:1}.tile-new{animation:tile-pop .15s ease}.tile-merged{animation:tile-pulse .2s ease}@keyframes tile-pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes tile-pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.grid-cells .cell{border-radius:6px;background:var(--cell-empty)}.tile[data-v="2"]{background:var(--cell-2)}.tile[data-v="4"]{background:var(--cell-4)}.tile[data-v="8"]{background:var(--cell-8);color:var(--text-light)}.tile[data-v="16"]{background:var(--cell-16);color:var(--text-light)}.tile[data-v="32"]{background:var(--cell-32);color:var(--text-light)}.tile[data-v="64"]{background:var(--cell-64);color:var(--text-light)}.tile[data-v="128"]{background:var(--cell-128);color:var(--text-light)}.tile[data-v="256"]{background:var(--cell-256);color:var(--text-light)}.tile[data-v="512"]{background:var(--cell-512);color:var(--text-light)}.tile[data-v="1024"]{background:var(--cell-1024);color:var(--text-light)}.tile[data-v="2048"]{background:var(--cell-2048);color:var(--text-light)}.tile[data-v="4096"],.tile[data-v="8192"]{background:var(--cell-super);color:var(--text-light)}.tile[data-v="128"],.tile[data-v="256"],.tile[data-v="512"],.tile[data-v="1024"],.tile[data-v="2048"],.tile[data-v="4096"],.tile[data-v="8192"]{font-size:28px}.btn{padding:10px 24px;font-size:16px;border:none;border-radius:6px;background:var(--btn-bg);color:var(--text-light);cursor:pointer}.btn:hover{background:var(--btn-hover)}.actions{display:flex;gap:12px;margin-top:16px}.undo-badge{margin-top:10px;padding:4px 12px;border-radius:12px;background:#fdf0e6;color:#b8860b;border:1px solid #e8c98a;font-size:13px}.controls{display:flex;gap:12px;margin-top:16px;align-items:center;font-size:14px}.controls select{font-size:14px;padding:4px 8px;border-radius:6px;border:1px solid #ccc;background:#fff;color:var(--text)}.btn.small{padding:6px 14px;font-size:14px}.btn-primary{background:var(--cell-8)}.btn-primary:hover{background:var(--cell-16)}.modal-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;pointer-events:auto;animation:modal-fade .15s ease}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}.modal{background:#fff;border-radius:10px;padding:22px 26px;max-width:340px;width:90%;box-shadow:0 8px 30px #00000040;text-align:center}body.dark .modal{background:#2a2a38;color:#e8e8ee}.modal-title{margin:0 0 10px;font-size:18px;color:var(--text)}body.dark .modal-title{color:#e8e8ee}.modal-message{margin:0 0 16px;font-size:14px;color:#8f7a66;line-height:1.5}body.dark .modal-message{color:#b8b0a8}.modal-input{width:100%;padding:8px 12px;font-size:15px;border:1px solid #ccc;border-radius:6px;margin-bottom:14px;box-sizing:border-box;color:var(--text)}body.dark .modal-input{background:#33334a;border-color:#55556a;color:#e8e8ee}.modal-input:focus{outline:none;border-color:var(--cell-8)}.modal-actions{display:flex;gap:10px;justify-content:center}.leaderboard{width:100%;margin-top:24px;background:#fff;border-radius:8px;padding:16px;border:1px solid #e0d6cc}.leaderboard h2{margin:0 0 8px;font-size:18px;color:var(--text)}.lb-tabs{display:flex;gap:6px;margin-bottom:10px}.lb-tab{padding:5px 14px;font-size:13px;border:1px solid #d8cec0;border-radius:6px;background:transparent;color:var(--text);cursor:pointer}.lb-tab.active{background:var(--btn-bg);color:var(--text-light);border-color:var(--btn-bg)}body.dark .lb-tab{border-color:#55556a;color:#e8e8ee}body.dark .lb-tab.active{background:#55556a;border-color:#55556a}.leaderboard ul{list-style:none;margin:0;padding:0}.leaderboard li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #f0e8dd;font-size:14px}.leaderboard .lb-rank{width:24px;font-weight:700;color:var(--btn-bg)}.leaderboard .lb-score{font-weight:700;min-width:50px}.leaderboard .lb-nickname{color:#776e65;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .lb-max{color:#8f7a66}.leaderboard .lb-undo{background:#fdf0e6;color:#b8860b;border:1px solid #e8c98a;border-radius:10px;padding:1px 8px;font-size:12px}.leaderboard .lb-date{margin-left:auto;color:#a0928a;font-size:12px}.leaderboard .lb-empty{color:#a0928a;font-size:14px;padding:10px 0;border-bottom:none;text-align:center}body.dark{background:#1e1e28;color:#e8e8ee}body.dark h1,body.dark .leaderboard h2{color:#e8e8ee}body.dark .board{background:#3a3a4a}body.dark .grid-cells .cell{background:#ffffff14}body.dark .leaderboard{background:#2a2a38;border-color:#44445a}body.dark .leaderboard li{border-bottom-color:#3a3a4a}body.dark .controls select{background:#33334a;border-color:#55556a;color:#e8e8ee}.msg{margin-top:12px;font-size:16px;min-height:22px;text-align:center}@media(max-width:480px){.board{gap:8px;padding:8px}.cell{font-size:26px}.tile[data-v="128"],.tile[data-v="256"],.tile[data-v="512"],.tile[data-v="1024"],.tile[data-v="2048"]{font-size:22px}}