:root{--bg: #f4f1ea;--surface: #ffffff;--text: #1f2a36;--muted: #6b7380;--border: #d9d3c7;--accent: #e8483f;--accent-text: #ffffff;--exit: #f6c945;--lot: #3a4250;--lot-cell: #444d5c;--lot-line: rgba(255, 255, 255, .07);--lane: rgba(246, 201, 69, .1);--curb: #c9c2b4;--focus: #2b7bd9;--shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 18px rgba(31, 42, 54, .1);color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}@media(prefers-color-scheme:dark){:root{--bg: #14181f;--surface: #1d232c;--text: #e8ebef;--muted: #98a1ad;--border: #2e3642;--accent: #ff5a4f;--exit: #f6c945;--lot: #262c36;--lot-cell: #2e3541;--lot-line: rgba(255, 255, 255, .05);--curb: #3a4250;--focus: #6aa8ff;--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35)}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg)}button{font:inherit}.app{width:100%;max-width:512px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand h1{margin:0;font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;font-weight:800}.brand h1:after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.12em;border-radius:50%;background:var(--accent)}.brand time{color:var(--muted);font-size:.875rem}.stats{display:flex;gap:8px}.stat{min-width:64px;padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;line-height:1.1}.stat-value{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.board-frame{--pad: clamp(8px, 2.6vw, 14px);position:relative;width:100%;aspect-ratio:1;padding:var(--pad);border-radius:16px;background:var(--curb);box-shadow:var(--shadow)}.board-area{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);border-radius:8px;overflow:hidden;background:var(--lot);touch-action:none;user-select:none;-webkit-user-select:none}.cell{border:1px solid var(--lot-line);background:var(--lot-cell);background-clip:padding-box;margin:1px;border-radius:4px}.exit-lane{position:absolute;left:0;right:0;top:calc(100% * var(--exit-row) / var(--size));height:calc(100% / var(--size));background:repeating-linear-gradient(90deg,transparent 0 14px,var(--lane) 14px 28px);pointer-events:none;z-index:1}.exit-marker{position:absolute;right:0;width:calc(var(--pad) + 2px);top:calc(var(--pad) + (100% - 2 * var(--pad)) * var(--exit-row) / var(--size));height:calc((100% - 2 * var(--pad)) / var(--size));background:var(--lot);border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:center;box-shadow:inset -3px 0 0 var(--exit)}.exit-marker span{color:var(--exit);font-weight:900;font-size:clamp(14px,4vw,22px);line-height:1;transform:translate(-1px)}.exit-marker.open span{animation:exit-blink .8s ease-in-out 2}@keyframes exit-blink{50%{opacity:.2}}.vehicle{position:absolute;top:0;left:0;z-index:2;cursor:grab;outline:none;transition:transform .16s cubic-bezier(.2,.8,.2,1);touch-action:none}.vehicle .body{position:absolute;overflow:hidden;border-radius:clamp(5px,2vw,10px);background:var(--c);box-shadow:inset 0 -3px #0000002e,inset 0 2px #ffffff40,0 2px 4px #0000004d}.vehicle.h .body{inset:8% calc(8% / var(--len))}.vehicle.v .body{inset:calc(8% / var(--len)) 8%}.vehicle.dragging{transition:none;cursor:grabbing;z-index:3}.vehicle.dragging .body{box-shadow:inset 0 -3px #0000002e,inset 0 2px #ffffff40,0 6px 14px #0006}.vehicle.selected .body,.vehicle:focus-visible .body{outline:3px solid var(--focus);outline-offset:2px}.vehicle[aria-disabled=true]{cursor:default}.vehicle.target{--c: var(--accent)}.vehicle.target .body:after{content:"";position:absolute;left:38%;right:38%;top:22%;bottom:22%;border-radius:3px;background:#ffffffd9}.vehicle.exiting{transition:transform .65s cubic-bezier(.55,0,.75,.2) .18s,opacity .3s ease .6s;opacity:0}.glass{position:absolute;background:#141c268c;border-radius:3px}.h .glass{top:16%;bottom:16%;width:13%}.h .glass.front{right:14%}.h .glass.rear{left:14%}.v .glass{left:16%;right:16%;height:13%}.v .glass.front{top:14%}.v .glass.rear{bottom:14%}.truck .body{background:repeating-linear-gradient(var(--rib-dir),rgba(255,255,255,.13) 0 3px,transparent 3px 10px),var(--c)}.truck.h{--rib-dir: 90deg}.truck.v{--rib-dir: 180deg}.truck .glass.rear{display:none}.truck .body:before{content:"";position:absolute;background:#0000002e}.truck.h .body:before{top:0;bottom:0;right:0;width:27%;border-left:2px solid rgba(0,0,0,.25)}.truck.v .body:before{left:0;right:0;top:0;height:27%;border-bottom:2px solid rgba(0,0,0,.25)}.truck.h .glass.front{right:7%;width:7%}.truck.v .glass.front{top:7%;height:7%}.controls{display:flex;gap:10px;justify-content:center}.controls button,.win button{min-width:96px;padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer}.controls button:hover:not(:disabled){border-color:var(--muted)}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.hint,.loading{margin:0;text-align:center;color:var(--muted);font-size:.925rem}.accent{color:var(--accent)}.sample-note{margin:0;text-align:center;font-size:.75rem;color:var(--muted);opacity:.85}.win{padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;animation:pop-in .32s cubic-bezier(.2,.9,.3,1.2) .5s both}.win p{margin:0}.win-verdict{font-size:1.25rem;font-weight:800}.win-next{color:var(--muted);font-size:.8rem}.share-fallback{width:100%;display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}.share-fallback textarea{width:100%;resize:none;font:inherit;font-size:.9rem;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text)}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.97)}}@media(prefers-reduced-motion:reduce){.vehicle,.vehicle.exiting,.win{transition:none;animation:none}}.message{margin:24px 0 0;text-align:center;font-size:1.05rem;font-weight:600}.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:600}
