.g2048{--gap:clamp(8px, 2.4vw, 12px);--slide:.11s;--board:#d9d4e8;--cell:#ebe7f4;--t2:#fff;--t2-ink:#3b3650;--t4:#f3efff;--t4-ink:#3b3650;--t8:#ffd28a;--t8-ink:#3b2a00;--t16:#ffb35c;--t16-ink:#3b2200;--t32:#ff8a5c;--t32-ink:#fff;--t64:#ff5f5f;--t64-ink:#fff;--t128:#b08cff;--t128-ink:#fff;--t256:#8f63ff;--t256-ink:#fff;--t512:#6c3cf0;--t512-ink:#fff;--t1024:#3f8cff;--t1024-ink:#fff;--t2048:#14b88a;--t2048-ink:#fff;--tbig:#1c1a26;--tbig-ink:#fff;max-width:480px;margin:0 auto}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g2048{--board:#231f31;--cell:#2e2940;--t2:#5a5080;--t2-ink:#fff;--t4:#7361a8;--t4-ink:#fff;--tbig:#eceaf4;--tbig-ink:#14121c}}:root[data-theme=dark] .g2048{--board:#231f31;--cell:#2e2940;--t2:#5a5080;--t2-ink:#fff;--t4:#7361a8;--t4-ink:#fff;--tbig:#eceaf4;--tbig-ink:#14121c}.g-top{align-items:center;gap:10px;margin:16px 0 12px;display:flex}.g-top h1{letter-spacing:-.02em;margin:0 auto 0 0;font-size:32px}.g-stat{background:var(--surface-2);text-align:center;border-radius:10px;min-width:72px;padding:4px 12px;position:relative}.g-stat small{letter-spacing:.06em;color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:700;display:block}.g-stat b{font-variant-numeric:tabular-nums;font-size:20px;line-height:1.2}.g-plus{color:var(--brand);pointer-events:none;font-weight:800;animation:.7s ease-out forwards g-plus;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}@keyframes g-plus{to{opacity:0;transform:translate(-50%,-20px)}}.g-bar{gap:8px;margin-bottom:12px;display:flex}.g-bar .btn{flex:1}.g-board{aspect-ratio:1;background:var(--board);padding:var(--gap);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:12px;position:relative}.g-cells,.g-tiles{inset:var(--gap);position:absolute}.g-cells{gap:var(--gap);grid-template-columns:repeat(4,1fr);display:grid}.g-cells i{background:var(--cell);border-radius:8px}.g-tile{width:calc((100% - 3 * var(--gap)) / 4);height:calc((100% - 3 * var(--gap)) / 4);transform:translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));transition:transform var(--slide) ease-in-out;position:absolute;top:0;left:0;container-type:size}.g-tile span{font-variant-numeric:tabular-nums;letter-spacing:-.03em;background:var(--tile);width:100%;height:100%;color:var(--ink);border-radius:8px;place-items:center;font-size:44cqh;font-weight:800;display:grid}.g-tile span.d4{font-size:34cqh}.g-tile span.d5{font-size:27cqh}.g-tile[data-v="2"]{--tile:var(--t2);--ink:var(--t2-ink)}.g-tile[data-v="4"]{--tile:var(--t4);--ink:var(--t4-ink)}.g-tile[data-v="8"]{--tile:var(--t8);--ink:var(--t8-ink)}.g-tile[data-v="16"]{--tile:var(--t16);--ink:var(--t16-ink)}.g-tile[data-v="32"]{--tile:var(--t32);--ink:var(--t32-ink)}.g-tile[data-v="64"]{--tile:var(--t64);--ink:var(--t64-ink)}.g-tile[data-v="128"]{--tile:var(--t128);--ink:var(--t128-ink)}.g-tile[data-v="256"]{--tile:var(--t256);--ink:var(--t256-ink)}.g-tile[data-v="512"]{--tile:var(--t512);--ink:var(--t512-ink)}.g-tile[data-v="1024"]{--tile:var(--t1024);--ink:var(--t1024-ink)}.g-tile[data-v="2048"]{--tile:var(--t2048);--ink:var(--t2048-ink)}.g-tile[data-v="4096"],.g-tile[data-v="8192"],.g-tile[data-v=big]{--tile:var(--tbig);--ink:var(--tbig-ink)}.g-tile[data-v="2048"] span{box-shadow:0 0 0 3px color-mix(in srgb, var(--t2048) 35%, transparent)}.g-new span{animation:.14s ease-out backwards g-appear}.g-merged span{animation:.16s ease-out g-pop}@keyframes g-appear{0%{opacity:0;transform:scale(0)}}@keyframes g-pop{50%{transform:scale(1.14)}}.g-bump{animation:.16s g-bump}@keyframes g-bump{30%{transform:translate(-3px)}70%{transform:translate(3px)}}.g-overlay{z-index:5;text-align:center;background:color-mix(in srgb, var(--bg) 78%, transparent);backdrop-filter:blur(2px);border-radius:12px;place-content:center;gap:14px;animation:.25s g-fade;display:grid;position:absolute;inset:0}.g-overlay[hidden]{display:none}.g-overlay h2{margin:0;font-size:34px}.g-overlay p{color:var(--muted);margin:0}.g-overlay .row{justify-content:center;gap:8px;display:flex}.g-overlay [data-when]{display:none}.g-overlay[data-kind=win] [data-when=win],.g-overlay[data-kind=over] [data-when=over]{display:contents}@keyframes g-fade{0%{opacity:0}}.g-hint{text-align:center;color:var(--muted);margin:12px 0 0;font-size:14px}.g-hint .touch{display:none}@media (pointer:coarse){.g-hint .keys{display:none}.g-hint .touch{display:inline}}@media (prefers-reduced-motion:reduce){.g2048{--slide:0s}.g-new span,.g-merged span,.g-bump,.g-plus{animation:none}}