.g2048{--gap: clamp(8px, 2.4vw, 13px);width:100%;max-width:460px;margin:0 auto;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#776e65}.g2048 .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.g2048 .scores{display:flex;gap:8px}.g2048 .score-box{background:#bbada0;color:#fff;border-radius:6px;padding:6px 14px;text-align:center;min-width:74px}.g2048 .score-box b{display:block;font-size:18px;line-height:1.2;font-weight:700}.g2048 .score-box span{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}.g2048 .acts{display:flex;gap:8px}.g2048 button{font:inherit;font-size:13px;font-weight:600;color:#fff;background:#8f7a66;border:none;border-radius:6px;padding:9px 14px;cursor:pointer;transition:filter .12s ease}.g2048 button:hover:not(:disabled){filter:brightness(1.1)}.g2048 button:disabled{opacity:.45;cursor:not-allowed}.g2048 button.ghost{background:#d6cdc4;color:#776e65}.g2048 .board{position:relative;aspect-ratio:1;background:#bbada0;border-radius:8px;container-type:inline-size;touch-action:none;user-select:none;-webkit-user-select:none}.g2048 .cells{position:absolute;inset:var(--gap);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap)}.g2048 .cells div{background:#eee4da59;border-radius:5px}.g2048 .tiles{position:absolute;inset:var(--gap)}.g2048 .tile{position:absolute;width:calc((100% - 3 * var(--gap)) / 4);height:calc((100% - 3 * var(--gap)) / 4);transform:translate(calc(100% * var(--c) + var(--gap) * var(--c)),calc(100% * var(--r) + var(--gap) * var(--r)));transition:transform .11s ease-in-out;will-change:transform}.g2048 .tile-in{width:100%;height:100%;border-radius:5px;display:grid;place-items:center;font-weight:700;font-size:clamp(15px,8.5cqw,34px);background:#eee4da;color:#776e65}.g2048 .tile[data-value="4"] .tile-in{background:#ede0c8}.g2048 .tile[data-value="8"] .tile-in{background:#f2b179;color:#f9f6f2}.g2048 .tile[data-value="16"] .tile-in{background:#f59563;color:#f9f6f2}.g2048 .tile[data-value="32"] .tile-in{background:#f67c5f;color:#f9f6f2}.g2048 .tile[data-value="64"] .tile-in{background:#f65e3b;color:#f9f6f2}.g2048 .tile[data-value="128"] .tile-in{background:#edcf72;color:#f9f6f2;font-size:clamp(13px,7cqw,28px)}.g2048 .tile[data-value="256"] .tile-in{background:#edcc61;color:#f9f6f2;font-size:clamp(13px,7cqw,28px)}.g2048 .tile[data-value="512"] .tile-in{background:#edc850;color:#f9f6f2;font-size:clamp(13px,7cqw,28px)}.g2048 .tile[data-value="1024"] .tile-in{background:#edc53f;color:#f9f6f2;font-size:clamp(11px,5.5cqw,22px)}.g2048 .tile[data-value="2048"] .tile-in{background:#edc22e;color:#f9f6f2;font-size:clamp(11px,5.5cqw,22px);box-shadow:0 0 20px #f3d77499}.g2048 .tile[data-value="4096"] .tile-in,.g2048 .tile[data-value="8192"] .tile-in{background:#3c3a32;color:#f9f6f2;font-size:clamp(11px,5.5cqw,22px)}.g2048 .tile-new .tile-in{animation:pop-in .14s ease-out}.g2048 .tile-pop .tile-in{animation:pop-merge .16s ease-out}.g2048 .tile-merged{z-index:1}@keyframes pop-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pop-merge{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.g2048 .tile{transition:none}.g2048 .tile-new .tile-in,.g2048 .tile-pop .tile-in{animation:none}}.g2048 .hint{margin:12px 0 0;font-size:13px;color:#8b8178;text-align:center;min-height:20px}.g2048 .over{position:absolute;inset:0;background:#eee4dac7;border-radius:8px;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:20px;z-index:5;animation:fade-in .2s ease-out}.g2048 .over[hidden]{display:none}.g2048 .over h3{margin:0;font-size:26px;font-weight:700;color:#776e65}.g2048 .over p{margin:0;font-size:14px;color:#8b8178}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.g2048 .adveil{position:absolute;inset:0;z-index:20;background:#111;color:#fff;display:grid;place-content:center;justify-items:center;gap:10px;border-radius:8px}.g2048 .adveil[hidden]{display:none}.g2048 .adveil .count{font-size:44px;font-weight:700}.g2048 .adveil small{font-size:12px;opacity:.7}.g2048 .dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:8px;justify-content:center;margin:14px auto 0}.g2048 .dpad button{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:12px;font-size:20px;color:#5f574e;cursor:pointer;box-shadow:0 1px 2px #0000000f;transition:transform .06s ease,background .12s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}.g2048 .dpad button:active{transform:scale(.94);background:#f3efe9}.g2048 .dpad button[data-dir=up]{grid-column:2;grid-row:1}.g2048 .dpad button[data-dir=left]{grid-column:1;grid-row:2}.g2048 .dpad button[data-dir=down]{grid-column:2;grid-row:2}.g2048 .dpad button[data-dir=right]{grid-column:3;grid-row:2}.g2048 .board:focus{outline:none}.g2048 .board:focus-visible{outline:2px solid #bbada0;outline-offset:2px}@media(max-width:420px){.g2048 .dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px)}}.g2048 .trylink{display:block;margin-top:12px;padding:10px 14px;border-radius:8px;background:#fff8ec;border:1px solid #f0dfc0;color:#8a6a35;font-size:13px;font-weight:600;text-align:center;text-decoration:none;transition:transform .08s ease,background .15s ease}.g2048 .trylink:hover{background:#fdf3e0}.g2048 .trylink:active{transform:scale(.98)}