.g2048{--gap: clamp(5px, 1.6vw, 10px)}.g2048-board{position:relative;width:min(100%,480px);aspect-ratio:1;padding:var(--gap);border-radius:16px;background:color-mix(in oklab,var(--cell-strong) 32%,var(--surface-2));container-type:inline-size;touch-action:none;outline:none}.g2048-bg,.g2048-tiles{position:absolute;inset:var(--gap)}.g2048-bg{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:var(--gap)}.g2048-cell{border-radius:10px;background:color-mix(in oklab,var(--cell) 78%,var(--cell-line))}.g2048-tile{position:absolute;left:0;top:0;width:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));height:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));transform:translate(calc(var(--c) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap))));transition:transform .12s ease-out;z-index:2}.g2048-tile.merging{z-index:1}.g2048-face{width:100%;height:100%;display:grid;place-items:center;border-radius:10px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:calc(100cqw / var(--n) * .42);background:var(--t-bg);color:var(--t-fg, var(--text));box-shadow:inset 0 -3px #0000001f}.g2048-tile.d3 .g2048-face{font-size:calc(100cqw / var(--n) * .34)}.g2048-tile.d4 .g2048-face{font-size:calc(100cqw / var(--n) * .27)}.g2048-tile.d5 .g2048-face,.g2048-tile.d6 .g2048-face{font-size:calc(100cqw / var(--n) * .21)}.g2048-face.spawn{animation:g2048-spawn .16s 90ms ease-out backwards}.g2048-face.pop{animation:g2048-pop .18s .1s ease-out backwards}@keyframes g2048-spawn{0%{transform:scale(.1);opacity:0}to{transform:scale(1);opacity:1}}@keyframes g2048-pop{0%{transform:scale(.4)}60%{transform:scale(1.14)}to{transform:scale(1)}}.g2048-tile.v1{--t-bg: color-mix(in oklab, var(--p3) 14%, var(--cell))}.g2048-tile.v2{--t-bg: color-mix(in oklab, var(--p3) 30%, var(--cell))}.g2048-tile.v3{--t-bg: color-mix(in oklab, var(--p4) 62%, var(--cell));--t-fg: #fff}.g2048-tile.v4{--t-bg: color-mix(in oklab, var(--p4) 80%, var(--p3));--t-fg: #fff}.g2048-tile.v5{--t-bg: color-mix(in oklab, var(--p3) 75%, var(--p4));--t-fg: #fff}.g2048-tile.v6{--t-bg: var(--p3);--t-fg: #fff}.g2048-tile.v7{--t-bg: color-mix(in oklab, var(--p3) 65%, var(--p1));--t-fg: #fff}.g2048-tile.v8{--t-bg: color-mix(in oklab, var(--p3) 45%, var(--p1));--t-fg: #fff}.g2048-tile.v9{--t-bg: color-mix(in oklab, var(--p1) 75%, var(--p3));--t-fg: #fff}.g2048-tile.v10{--t-bg: var(--p1);--t-fg: #fff}.g2048-tile.v11{--t-bg: color-mix(in oklab, var(--p2) 80%, var(--p1));--t-fg: #1b1f2a}.g2048-tile.v11 .g2048-face{box-shadow:0 0 0 3px color-mix(in oklab,var(--p2) 45%,transparent),0 0 22px color-mix(in oklab,var(--p2) 60%,transparent)}.g2048-tile.v12,.g2048-tile.v13,.g2048-tile.v14{--t-bg: var(--card-black);--t-fg: var(--p2)}.g2048-tile.v13 .g2048-face,.g2048-tile.v14 .g2048-face{box-shadow:inset 0 0 0 3px var(--p2)}.g2048-hint{margin:0;text-align:center}.g2048-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.reduce-motion .g2048-tile{transition:none}.reduce-motion .g2048-face.spawn,.reduce-motion .g2048-face.pop{animation:none}@media (prefers-reduced-motion: reduce){.g2048-tile{transition:none}.g2048-face.spawn,.g2048-face.pop{animation:none}}.g2048-cupcakes .g2048-tile{--t-bg: color-mix(in oklab, #fff6ea 88%, var(--p1))}.g2048-cupcakes .g2048-tile.v11,.g2048-cupcakes .g2048-tile.v12,.g2048-cupcakes .g2048-tile.v13,.g2048-cupcakes .g2048-tile.v14{--t-bg: color-mix(in oklab, #fff1c2 80%, var(--p2))}.g2048-cupcakes .g2048-face{position:relative;overflow:hidden}.g2048-cupcakes .g2048-face svg{width:84%;height:84%;display:block}.g2048-cupcakes .g2048-num{position:absolute;right:5%;bottom:4%;padding:0 .35em;border-radius:999px;font-size:calc(100cqw / var(--n) * .15);line-height:1.35;font-weight:800;background:#ffffffd9;color:#4a2f1f}.g2048-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:min(100%,480px)}.g2048-legend li{display:grid;justify-items:center;width:38px;font-size:.7rem;font-weight:700;color:var(--muted, inherit)}.g2048-legend svg{width:32px;height:32px}