:root{--paper: #123566;--paper-deep: #0d2a54;--ink: #eaf2fb;--ink-dim: #a9c0dc;--line: rgba(234, 242, 251, .16);--wall: #2a5797;--wall-edge: #3d6cae;--cell: #163d73;--sun: #ffd27a;--sun-glow: rgba(255, 210, 122, .45);--ghost: #9fcbf5;--exit: #eaf2fb;--l0: #ff9e8a;--l1: #b6ef84;--l2: #dcb1ff;--l3: #ffe27d;--focus: #ffd27a;--radius: 10px;--font-display: "Young Serif", Georgia, "Times New Roman", serif;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:dark}@media(prefers-color-scheme:light){:root{--paper: #e6edf4;--paper-deep: #d6e1ec;--ink: #0f2a55;--ink-dim: #4a6488;--line: rgba(15, 42, 85, .14);--wall: #9fb6d1;--wall-edge: #88a2c2;--cell: #f4f8fb;--sun: #e48a00;--sun-glow: rgba(228, 138, 0, .35);--ghost: #2f6fcc;--exit: #0f2a55;--l0: #d4503a;--l1: #3f8f1f;--l2: #8a4fd0;--l3: #b08400;--focus: #0f2a55;color-scheme:light}}*{box-sizing:border-box}html,body{margin:0}html{background:var(--paper-deep)}body{min-height:100dvh;background:radial-gradient(120% 80% at 50% 0%,var(--paper) 0%,var(--paper-deep) 100%) fixed;color:var(--ink);font:16px/1.5 var(--font-body);display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:3px}button{font:inherit;color:inherit;background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1rem;cursor:pointer;touch-action:manipulation}button:hover{border-color:var(--ink-dim)}button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem clamp(1rem,4vw,2rem)}.brand{font-family:var(--font-display);font-size:1.6rem;text-decoration:none;letter-spacing:-.01em}.top nav{display:flex;gap:.25rem;flex-wrap:wrap}.top nav button{border-color:transparent;padding:.35rem .8rem;color:var(--ink-dim)}.top nav button[aria-current=page]{color:var(--ink);border-color:var(--line)}main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:0 1rem 2rem}.level-head{text-align:center;margin:.5rem 0 .75rem}.level-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,6vw,2.4rem);line-height:1.1;margin:0}.sub{margin:.25rem 0 0;color:var(--ink-dim)}.tip{margin:0 auto 1rem;max-width:34ch;text-align:center;font-size:1.05rem}.board-wrap{display:flex;justify-content:center}.board{--cols: 6;--rows: 6;--size: min(calc((100vw - 2rem) / var(--cols)), calc(52dvh / var(--rows)), 64px);position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--size));grid-template-rows:repeat(var(--rows),var(--size));gap:0;padding:6px;border-radius:calc(var(--radius) + 6px);border:1.5px solid var(--line);touch-action:none;user-select:none}.cell{position:relative}.cell:before{content:"";position:absolute;inset:3px;border-radius:7px;background:var(--cell)}.cell.wall:before{background:var(--wall);box-shadow:inset 0 0 0 1.5px var(--wall-edge);background-image:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 6px)}.cell.exit:after{content:"";position:absolute;inset:26%;border:2px solid var(--exit);border-radius:50%;box-shadow:0 0 0 5px var(--paper-deep),0 0 0 6.5px var(--exit);opacity:.85}.cell.plate:after{content:attr(data-l);position:absolute;inset:22%;display:grid;place-items:center;border-radius:50%;border:2.5px solid var(--c);color:var(--c);font:600 calc(var(--size) * .26) / 1 var(--font-body);transition:background .15s}.cell.plate.pressed:after{background:var(--c);color:var(--paper)}.cell.door:after{content:"";position:absolute;inset:3px;border-radius:7px;background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 9px);border:2.5px solid var(--c);transition:transform .18s ease,opacity .18s ease;transform-origin:top}.cell.door.open:after{transform:scaleY(.12);opacity:.6}.foot-print,.piece,.spawn{position:absolute;left:6px;top:6px;width:var(--size);height:var(--size);transform:translate(calc(var(--x) * var(--size)),calc(var(--y) * var(--size)));pointer-events:none}.foot-print:before{content:attr(data-n);position:absolute;inset:36%;border-radius:50%;background:var(--ghost);opacity:calc(.55 - var(--i) * .08);display:grid;place-items:center;font:600 calc(var(--size) * .16) / 1 var(--font-body);color:var(--paper)}.piece{transition:transform .12s cubic-bezier(.3,.7,.4,1)}.piece:before{content:"";position:absolute;inset:20%;border-radius:50%}.player:before{background:var(--sun);box-shadow:0 0 0 4px var(--sun-glow),0 0 22px 4px var(--sun-glow)}.echo:before{background:var(--ghost);opacity:.6;box-shadow:0 0 0 4px color-mix(in srgb,var(--ghost) 30%,transparent)}.echo.bump:before{animation:bump .3s ease}@keyframes bump{40%{transform:scale(.8)}}.player.bump{animation:shake .22s ease}@keyframes shake{25%{translate:-4px 0}75%{translate:4px 0}}.spawn:before{content:attr(data-n);position:absolute;inset:24%;border-radius:50%;border:2px dashed var(--ghost);display:grid;place-items:center;color:var(--ghost);font:600 calc(var(--size) * .22) / 1 var(--font-body)}.status{display:flex;justify-content:space-between;gap:1rem;max-width:420px;margin:.9rem auto 0;color:var(--ink-dim);font-variant-numeric:tabular-nums}.status strong{color:var(--ink);font-weight:600}.controls{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem}.dpad{display:none;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,48px);gap:6px;justify-content:center;margin-top:.8rem}.dpad button{border-radius:12px;padding:0;font-size:1rem}.dpad [data-move="0"]{grid-column:2}.dpad [data-move="2"]{grid-column:1;grid-row:2}.dpad [data-move="1"]{grid-column:2;grid-row:2}.dpad [data-move="3"]{grid-column:3;grid-row:2}.keys{text-align:center;color:var(--ink-dim);font-size:.85rem;margin-top:1rem}@media(pointer:coarse){.dpad{display:grid}.keys{display:none}}.archive h1{font-family:var(--font-display);font-weight:400;text-align:center}.archive ol{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}.archive li button{width:100%;display:flex;justify-content:space-between;border-radius:var(--radius);padding:.7rem 1rem;text-align:left}.archive .meta{color:var(--ink-dim);font-variant-numeric:tabular-nums}.archive .done{color:var(--sun)}dialog{border:1.5px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);padding:1.5rem 1.75rem;max-width:min(92vw,380px);text-align:center}dialog::backdrop{background:#050f2399}dialog h2{font-family:var(--font-display);font-weight:400;font-size:2rem;margin:0 0 .25rem}.win-actions{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}.foot{text-align:center;color:var(--ink-dim);font-size:.85rem;padding:1rem 1rem 1.5rem}.foot p{max-width:60ch;margin:0 auto}@media(prefers-reduced-motion:reduce){.piece,.cell.door:after,.cell.plate:after{transition:none}.echo.bump:before,.player.bump{animation:none}}