:root{--bg: #f6f7f9;--fg: #111827;--muted: #6b7280;--hole: #d3d8e0;--tray-bg: #eceef2;--bar-bg: #e2e5ea;--ok: #16a34a;--bad: #dc2626;--line: #d8dce3;--surface: #ffffff;--piece-s: 60%;--piece-l: 50%;--c: 24px}@media(prefers-color-scheme:dark){:root{--bg: #101623;--fg: #f3f4f6;--muted: #9ca3af;--hole: #0a0e16;--tray-bg: #1a2130;--bar-bg: #232b3d;--ok: #22c55e;--bad: #ef4444;--line: #2a3348;--surface: #182033;--piece-l: 55%}}*{box-sizing:border-box;margin:0}[hidden]{display:none!important}html{overscroll-behavior:none}body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,sans-serif;max-width:420px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.header{display:flex;align-items:baseline;gap:8px}.header h1{font-size:1.4rem;letter-spacing:.08em}.day{color:var(--muted)}.fill-pct{margin-left:auto;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}.fill-bar{height:4px;border-radius:2px;background:var(--bar-bg);overflow:hidden;margin:8px 0 14px}.fill-bar-inner{height:100%;background:var(--ok);transform-origin:0 50%;transform:scaleX(0);transition:transform .15s ease}.daily-best{min-height:1.2rem;margin:-6px 0 12px;color:var(--muted);font-size:.85rem;text-align:right}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(var(--size),1fr);aspect-ratio:1}.bcell{background:var(--hole);background-clip:padding-box;border:2px solid var(--bg);border-radius:9px}.bcell.ghost-ok{background-color:color-mix(in srgb,var(--ok) 45%,var(--hole))}.bcell.ghost-bad{background-color:color-mix(in srgb,var(--bad) 40%,var(--hole))}.pieces-layer{position:absolute;inset:0;pointer-events:none}.piece{position:relative;touch-action:none;cursor:grab}.pcell{position:absolute;width:calc(var(--c) - 4px);height:calc(var(--c) - 4px);margin:2px;border-radius:7px;background:hsl(var(--piece-h) var(--piece-s) var(--piece-l));box-shadow:inset 0 -2px #0000002e}.board-piece{position:absolute;left:0;top:0;pointer-events:auto}.drag-layer{position:fixed;inset:0;pointer-events:none;z-index:40}.drag-piece{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;filter:drop-shadow(0 10px 18px rgb(0 0 0 / .3))}.tray{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;padding:14px;margin-top:14px;background:var(--tray-bg);border-radius:14px;min-height:100px}.tray-piece.placed,.lifted{visibility:hidden}.intro{padding:1rem;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.intro-heading{font-weight:700}.intro-steps{margin:.75rem 0 1rem;padding-left:1.25rem;display:grid;gap:.5rem}.primary{width:100%;min-height:44px;border:none;border-radius:10px;background:var(--fg);color:var(--bg);font:inherit;font-weight:700}.ghost{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font:inherit;font-weight:600}.lock-bar{margin-top:14px}.lock-confirm{display:flex;flex-direction:column;gap:.5rem}.lock-confirm-text{text-align:center;font-weight:600}.result{margin-top:18px}.result-screen{display:flex;flex-direction:column;gap:.75rem;text-align:center}.result-heading{font-size:1.4rem;font-weight:700}.result-score{margin-top:-.5rem;color:var(--muted)}.result-meta{color:var(--muted);font-size:.9rem}.result-percentile{margin:0 auto;padding:.25rem .75rem;border-radius:999px;background:var(--ok);color:#fff;font-weight:600}.result-statline{margin-top:-.25rem;color:var(--muted);font-size:.9rem}.share-preview{padding:.75rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-family:inherit;font-size:.85rem;line-height:1.3;overflow-x:auto}.countdown{color:var(--muted);font-variant-numeric:tabular-nums}.pop{animation:pop .16s ease}@keyframes pop{40%{scale:1.08}}.shake{animation:shake .2s ease}@keyframes shake{25%{translate:-3px 0}50%{translate:3px 0}75%{translate:-2px 0}}@media(prefers-reduced-motion:reduce){.pop,.shake{animation:none}.fill-bar-inner{transition:none}}