.g48-board{--gap:clamp(5px, 2.6cqw, 12px);aspect-ratio:1;background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--r-3);width:100%;position:relative;container-type:inline-size}.g48-board:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.g48-inner{--n:4;position:absolute;inset:clamp(5px,2.6cqw,12px)}.g48-cells{grid-template-columns:repeat(var(--n), minmax(0, 1fr));grid-template-rows:repeat(var(--n), minmax(0, 1fr));gap:var(--gap);display:grid;position:absolute;inset:0}.g48-cell{background:var(--surface-2);border-radius:var(--r-2)}.g48-tiles{position:absolute;inset:0}.g48-tile{width:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));aspect-ratio:1;transform:translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));transition:transform .11s var(--ease);z-index:2;will-change:transform;position:absolute;top:0;left:0}.g48-tile.is-dying{z-index:1}.g48-tile.is-top{z-index:3}.g48-in{border:1px solid var(--border-strong);border-radius:var(--r-2);width:100%;height:100%;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;line-height:1;font-size:calc(100cqw / var(--n) * .36);background:var(--surface);color:var(--text);justify-content:center;align-items:center;display:flex}.g48-tile.d3 .g48-in{font-size:calc(100cqw / var(--n) * .3)}.g48-tile.d4 .g48-in{font-size:calc(100cqw / var(--n) * .24)}.g48-tile.d5 .g48-in{font-size:calc(100cqw / var(--n) * .2)}.g48-tile.is-new .g48-in{animation:g48-appear .14s var(--ease) .11s backwards}.g48-tile.is-merged .g48-in{animation:g48-pop .16s var(--ease) .1s backwards}@keyframes g48-appear{0%{opacity:0;transform:scale(.6)}}@keyframes g48-pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.1)}}.g48-tile.l1 .g48-in{background:var(--surface)}.g48-tile.l2 .g48-in{background:var(--surface-2);border-color:var(--border-strong)}.g48-tile.l3 .g48-in{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-soft-2)}.g48-tile.l4 .g48-in{background:var(--accent-soft-2);color:var(--accent-text);border-color:var(--accent-soft-2)}.g48-tile.l5 .g48-in{background:color-mix(in srgb, var(--accent) 35%, var(--surface));border-color:#0000}.g48-tile.l6 .g48-in{background:color-mix(in srgb, var(--accent) 50%, var(--surface));border-color:#0000}.g48-tile.l7 .g48-in{background:color-mix(in srgb, var(--accent) 65%, var(--surface));border-color:#0000}.g48-tile.l8 .g48-in{background:color-mix(in srgb, var(--accent) 78%, var(--surface));color:var(--accent-fg);border-color:#0000}.g48-tile.l9 .g48-in{background:color-mix(in srgb, var(--accent) 88%, var(--surface));color:var(--accent-fg);border-color:#0000}.g48-tile.l10 .g48-in{background:var(--accent);color:var(--accent-fg);border-color:#0000}.g48-tile.l11 .g48-in{background:var(--accent);color:var(--accent-fg);border-color:var(--accent-fg);box-shadow:inset 0 0 0 3px var(--accent), inset 0 0 0 5px var(--accent-fg)}.g48-tile.l12 .g48-in{background:var(--text);color:var(--surface);border-color:#0000}@media (prefers-reduced-motion:reduce){.g48-tile{transition:none}.g48-tile.is-new .g48-in,.g48-tile.is-merged .g48-in{animation:none}}.g48 .gk-options{align-items:flex-end}.g48 .gk-options .field{min-width:11rem}
