.app--twenty48{grid-template-rows:auto auto 1fr auto}.board{place-items:center;min-height:0;padding:4px 12px 8px;display:grid}.tf-next{color:var(--text-dim);letter-spacing:.03em;text-transform:uppercase;justify-content:center;align-items:center;gap:10px;padding:2px 14px 6px;font-size:.74rem;font-weight:600;display:flex}.tf-next[hidden]{display:none}.tf-next-tile{font-variant-numeric:tabular-nums;border-radius:8px;place-items:center;min-width:40px;height:32px;padding:0 8px;font-size:1rem;font-weight:800;display:grid}.tf-board{isolation:isolate;--gap:8px;width:calc(var(--n) * var(--cell) + (var(--n) + 1) * var(--gap));height:calc(var(--n) * var(--cell) + (var(--n) + 1) * var(--gap));padding:var(--gap);background:var(--surface);box-shadow:0 6px 18px var(--shadow);touch-action:none;border-radius:14px;position:relative}.tf-board[data-empty]{visibility:hidden}.tf-cells{inset:var(--gap);grid-template:repeat(var(--n), var(--cell)) / repeat(var(--n), var(--cell));gap:var(--gap);display:grid;position:absolute}.tf-cell{background:var(--glass);border-radius:9px}.tf-tiles{inset:var(--gap);position:absolute}.tf-tile{width:var(--cell);height:var(--cell);left:calc(var(--x) * (var(--cell) + var(--gap)));top:calc(var(--y) * (var(--cell) + var(--gap)));font-size:calc(var(--cell) * .42);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#16233c;background:#eef3fb;border-radius:9px;place-items:center;font-weight:800;display:grid;position:absolute}.tf-tile--1{background:#eef3fb}.tf-tile--2{background:#e3ecf9}.tf-tile--3{background:#f7c98b}.tf-tile--4{background:#f5a962}.tf-tile--5{background:#f2874f}.tf-tile--6{color:#fff;background:#ea6a4a}.tf-tile--7{color:#fff;background:#d94f52}.tf-tile--8{color:#fff;background:#b93d74}.tf-tile--9{color:#fff;background:#8a3d96}.tf-tile--10{color:#fff;background:#5c44a8}.tf-tile--11{color:#fff;background:#2f4fa8}.tf-tile--12{color:#fff;background:#1f3a7a}.tf-tile--7,.tf-tile--8,.tf-tile--9{font-size:calc(var(--cell) * .34)}.tf-tile--10,.tf-tile--11,.tf-tile--12{font-size:calc(var(--cell) * .27)}.tf-hint{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.tf-hint svg{fill:none;width:44%;height:44%;stroke:var(--accent);stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 10px #060c1880)}.tf-hint--1 svg{transform:rotate(90deg)}.tf-hint--2 svg{transform:rotate(180deg)}.tf-hint--3 svg{transform:rotate(270deg)}