.stage{max-width:640px;margin:0 auto;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.turnbar{--tb-msg-lines:2;--tb-st-lines:1}.turnbar .message{line-height:1.75}.turnbar .status{font-weight:700}
.map-meta{font-size:14px;color:var(--ink-sub);margin-bottom:8px}.cycle{display:flex;gap:8px;align-items:center;min-height:44px;margin-bottom:8px;flex-wrap:wrap}.phase{width:32px;height:32px;border:1px solid var(--line-strong);border-radius:4px;display:inline-grid;place-items:center}.phase.current{border:2px solid var(--accent);font-weight:700;background:var(--accent-soft)}
#board-wrap{max-width:540px;margin:auto;touch-action:none}#board{width:100%;display:block;user-select:none;touch-action:none}.ground{fill:var(--surface)}.wall{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-linecap:square}.dot{fill:var(--ink-sub)}.player rect{fill:var(--accent);stroke:var(--ink);stroke-width:1.5;filter:var(--shadow-piece)}.player path{stroke:var(--surface);stroke-width:2;fill:none}.exit{fill:var(--surface);stroke:var(--ok);stroke-width:2}.exit-letter{fill:var(--ok);font-size:22px;font-weight:700;text-anchor:middle}.gate path{stroke:var(--ink-sub);stroke-width:2;fill:none;stroke-dasharray:4 3}.gate.closed path{stroke:var(--warn);stroke-width:4;stroke-dasharray:none}.gate .cross{stroke-width:2!important}.gate circle{fill:var(--surface);stroke:var(--line-strong)}.gate-number{fill:var(--ink);font-size:20px;text-anchor:middle;font-weight:700}.hint-ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:3 2}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;margin-top:8px}.legend span{display:flex;align-items:center;gap:6px}.marker{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:3px;background:var(--accent);color:var(--surface);font-weight:700}.dot-icon{display:inline-block;width:8px;height:8px;background:var(--ink-sub);border-radius:50%}.exit-icon{color:var(--ok);font-weight:700;border:1px solid var(--ok);width:18px;height:20px;text-align:center;line-height:18px}
.gate-list{font-size:14px;color:var(--ink-sub);display:flex;flex-wrap:wrap;gap:8px 16px;min-height:32px;margin:8px 0}.pad{display:grid;grid-template-columns:repeat(3,minmax(64px,1fr));gap:8px;max-width:320px;margin:16px auto}.pad .btn{min-height:48px;display:flex;justify-content:center;align-items:center;gap:4px;padding:8px}.pad svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.pad [data-dir=U]{grid-column:2}.pad [data-dir=L]{grid-column:1;grid-row:2}.pad [data-dir=W]{grid-column:2;grid-row:2}.pad [data-dir=R]{grid-column:3;grid-row:2}.pad [data-dir=D]{grid-column:2;grid-row:3}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.controls .btn{min-height:44px}.record{font-size:14px;color:var(--ink-sub);margin:8px 0 0}.result{border-top:1px solid var(--line);margin-top:16px;padding-top:8px}.result h2{margin-top:16px}.setup-grid{display:flex;flex-wrap:wrap;gap:16px}.field{display:flex;flex-direction:column;gap:4px;min-width:140px;flex:1}.field select,.field input{font:inherit;min-height:44px;padding:6px;max-width:100%;width:100%}.field small{font-size:14px;color:var(--ink-sub)}.ad-gap{height:160px}.article table{width:100%;border-collapse:collapse;table-layout:fixed}.article td,.article th{padding:8px;border:1px solid var(--line);overflow-wrap:anywhere}.article .howto img{width:100%;height:auto;max-width:540px}.credits{font-size:14px;color:var(--ink-sub)}
@media(max-width:640px){.stage{padding:12px}.turnbar{--tb-msg-lines:3;--tb-st-lines:2}.article{padding:16px}.gate-list{min-height:64px}.legend{gap:8px}.pad{max-width:280px}}

.wall,.dot,.gate,.player,.exit,.exit-letter,.hint-ring{pointer-events:none}
.dot-shine,.destination,.exit-target,.collect-pulse{pointer-events:none}
.destination-key i{display:inline-grid;place-items:center;width:18px;height:18px;border:1px dashed var(--accent);border-radius:4px;background:var(--accent-soft);color:var(--accent);font-style:normal}.dot-icon{width:10px;height:10px;background:var(--warn)}
.wall{stroke:var(--ink-sub)}.dot{fill:var(--warn);stroke:var(--surface);stroke-width:1.5}.dot-shine{fill:var(--surface)}
.destination rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}.destination path{fill:none;stroke:var(--accent);stroke-width:2}
.player-halo{fill:var(--accent-soft);stroke:var(--surface);stroke-width:2}.player-body{transform-box:view-box;transform-origin:0 0}.player-body.moving{animation:marker-travel .16s ease-out}
.exit-target.ready .exit{fill:var(--ok-soft,var(--accent-soft));stroke-width:3}.collect-pulse{fill:none;stroke:var(--warn);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:dot-collect .2s ease-out forwards}
.goal-strip{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px;align-items:center;margin:10px 0 12px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.collect-goal,.exit-goal{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;line-height:1.4}.collect-goal{flex-wrap:wrap}.collect-goal strong{display:block;font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums}.goal-dot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:var(--warn);border:2px solid var(--surface)}.goal-arrow{color:var(--ink-sub);text-align:center}.goal-e{display:grid;place-items:center;flex:0 0 28px;height:28px;border:2px solid var(--ok);color:var(--ok);border-radius:5px;font-size:20px;font-weight:700}.exit-goal{color:var(--ink-sub)}.exit-ready .exit-goal{color:var(--ink);font-weight:700}.exit-ready .goal-e{background:var(--ok-soft,var(--accent-soft))}.complete .goal-e{border-width:3px}#collect-meter{display:block;width:100%;height:5px;accent-color:var(--accent);border:0;border-radius:8px;overflow:hidden}#collect-meter::-webkit-progress-bar{background:var(--line)}#collect-meter::-webkit-progress-value{background:var(--accent)}
.pad .btn{position:relative}.pad .btn.available{border-color:var(--accent);background:var(--accent-soft)}.pad .btn.blocked{background:var(--surface);color:var(--ink-sub);border-style:dashed}.pad .btn.blocked::after{content:'×';position:absolute;right:7px;top:3px;font-size:14px;line-height:1;color:var(--ink-sub)}.pad [data-dir=W].available{background:var(--bg);border-color:var(--line-strong)}
.cycle.wait-pulse .phase.current{animation:cycle-wait .2s ease-out}.gate-list span{padding:3px 6px;border:1px solid var(--line);border-radius:4px}
@keyframes marker-travel{from{transform:translate(var(--move-x),var(--move-y))}to{transform:translate(0,0)}}
@keyframes dot-collect{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
@keyframes cycle-wait{from{box-shadow:0 0 0 4px var(--accent-soft)}to{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.player-body.moving,.collect-pulse,.cycle.wait-pulse .phase.current{animation:none}.collect-pulse{display:none}}
.article .howto-shot{position:relative;overflow:hidden;max-width:640px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.article .howto-shot img{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;margin:0}.article .howto-shot svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.article .howto figcaption{font-size:16px;line-height:1.7;color:var(--ink);margin-top:8px}