:root{--bg: #f6f4ef;--panel: #ffffff;--text: #22201c;--muted: #6b665c;--line: #ddd8cc;--empty: #ebe7de;--R: #e0473c;--Y: #f2c230;--G: #3aa55b;--B: #3b7ddd;--I: #5b3fb5;--blight: #3b2f2f;--blight-line: #6d2b2b;--p1: #111111;--p2: #ffffff;--p1-text: #ffffff;--p2-text: #111111;--accent: #1f6feb;--highlight: #ff8a00;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}@media(prefers-color-scheme:dark){:root{--bg: #18171a;--panel: #232227;--text: #ece9e2;--muted: #a19c92;--line: #3a383f;--empty: #2d2c32;--blight: #120d0d;--blight-line: #5a2020;--accent: #58a6ff}}*{box-sizing:border-box}body{margin:0;background:var(--bg)}.page{max-width:1100px;margin:0 auto;padding:16px}header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}h1{font-size:1.4rem;margin:0}.picker{display:flex;gap:8px;max-width:100%}.picker select{flex:1 1 auto;min-width:0}select,button,.button{font:inherit;font-size:.95rem;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}select{max-width:100%}button:hover,.button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#fff;border-color:var(--accent);min-width:100px}button.on{border-color:var(--accent);color:var(--accent);font-weight:600}.error{background:#fde8e8;color:#8a1c1c;padding:10px 14px;border-radius:8px}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin-top:16px}@media(max-width:820px){main{grid-template-columns:1fr}}.board-col{display:flex;flex-direction:column;gap:8px;min-width:0}.caption{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px}.caption p{margin:0}.caption-now{min-height:2.8em;font-size:1.05rem;line-height:1.4}.caption-last{color:var(--muted);font-size:.85rem;line-height:1.35;border-top:1px solid var(--line);margin-top:6px!important;padding-top:5px}.caption-last span{font-weight:700;margin-right:4px}.board-wrap{position:relative;width:100%;max-width:560px;align-self:center}@media(min-width:821px){.board-wrap{max-width:min(560px,max(320px,calc(100dvh - 320px)))}.viewer .board-wrap{max-width:min(560px,max(320px,calc(100dvh - 430px)))}}.board{width:100%;display:block;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.board .label text{fill:var(--muted);font-size:13px;text-anchor:middle}.tile{stroke:none}.grid-line line{stroke:#1e1e22;stroke-width:1}.tile-empty{fill:var(--empty);stroke:none}.tile-icon{fill:#ffffffe6;font-size:14px;font-weight:700;paint-order:stroke;stroke:#00000059;stroke-width:2px}.highlight{fill:none;stroke:var(--highlight);stroke-width:4}.foot,.foot-start{pointer-events:none}.foot ellipse{stroke-width:1.2}.foot-p1 ellipse,.foot-start.foot-p1{fill:#3a3a3a;stroke:#111}.foot-p2 ellipse,.foot-start.foot-p2{fill:#f4f4f4;stroke:#c8c8c8}.foot-start{fill-opacity:.25;stroke-width:2;stroke-dasharray:3 3}.foot-land{fill:none;stroke-width:2;stroke-linecap:round}.foot-p1 .foot-land{stroke:#111}.foot-p2 .foot-land{stroke:#c8c8c8}.foot-portal{fill:none;stroke-width:3;stroke-dasharray:4 3}.foot-p1 .foot-portal{stroke:#111}.foot-p2 .foot-portal{stroke:#c8c8c8}.road{stroke-width:5;stroke-linecap:round}.road-p1{stroke:#0b3d17;fill:#0b3d17}.road-p2{stroke:#d9ffe2;fill:#d9ffe2}.road-arrow{stroke:none}.chain{fill:none;stroke:#ffffffe6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 9}.chain-num{fill:#fff;font-size:11px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:#00000080;stroke-width:3px;opacity:.85;pointer-events:none}.owner{stroke-width:1.5;stroke-linejoin:round;pointer-events:none}.owner-1{fill:var(--p1);stroke:#fff}.owner-2{fill:var(--p2);stroke:#111}.dim{fill:var(--bg);opacity:.75;pointer-events:none}.pawn circle{stroke-width:2.5}.pawn text{font-size:15px;font-weight:800;text-anchor:middle}.pawn-1 circle{fill:var(--p1);stroke:#fff}.pawn-1 text{fill:var(--p1-text)}.pawn-2 circle{fill:var(--p2);stroke:#111}.pawn-2 text{fill:var(--p2-text)}.controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.scrub{width:100%}.speed{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;color:var(--muted)}.keys{text-align:center;color:var(--muted);font-size:.8rem;margin:0}aside{display:flex;flex-direction:column;gap:10px;min-width:0}@media(min-width:821px){aside{max-height:calc(100dvh - 100px);overflow-y:auto;position:sticky;top:8px;align-self:start}aside .log{flex:1 1 auto;max-height:none}.viewer aside{max-height:calc(100dvh - 160px)}}.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 10px;display:flex;flex-direction:column}.stat span{color:var(--muted);font-size:.75rem}.stat strong{font-size:1rem}.result,.panel .result{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;font-weight:700;margin:0}.rules{color:var(--muted);font-size:.85rem;margin:0}.log{list-style:none;margin:0;padding:0;max-height:420px;min-height:90px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.log li{padding:6px 10px;border-bottom:1px solid var(--line);font-size:.9rem;cursor:pointer;line-height:1.35}.log li:hover{background:var(--empty)}.log li.current{background:var(--accent);color:#fff}.log-round{color:var(--muted);margin-right:6px;font-size:.8rem}.log li.current .log-round{color:#fff}.log-who{font-weight:700;margin-right:6px}.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}.board.play .chain{stroke:#ffd43b;stroke-dasharray:none;stroke-width:6;opacity:.85}.target{cursor:pointer}.target-ring{fill:#ffffff14;stroke:var(--target);stroke-width:4}.target:hover .target-ring{fill:#ffffff4d}.target-label{fill:#fff;font-size:10px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:#000000bf;stroke-width:3px;pointer-events:none}.target-plus{fill:var(--target);font-size:26px;font-weight:800;text-anchor:middle;pointer-events:none}.target-step,.target-trap{--target: #1f9d55}.target-jump{--target: #e8590c}.target-jump .target-ring{stroke-dasharray:8 5}.target-teleport{--target: #9b5de5}.target-teleport .target-ring{stroke-dasharray:2 5;stroke-linecap:round}.target-build,.target-place{--target: #1f6feb}.target-push{--target: #e03131}.target-pawn{--target: #1f6feb}.target-clear{--target: #f783ac}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}.panel h2{font-size:1rem;margin:0}.panel p{margin:0;color:var(--muted);font-size:.9rem}.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.swatch{display:inline-flex;align-items:center;gap:6px}.swatch svg{width:18px;height:18px;border-radius:4px}.hint{font-weight:600;color:var(--text)!important}.menu{max-width:460px;margin:24px auto}.menu label{display:flex;flex-direction:column;gap:4px;font-weight:600}.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--muted);justify-content:center}.legend span:before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;border:3px solid var(--target);margin-right:4px;vertical-align:-3px}.legend .target-jump:before{border-style:dashed}.legend .target-teleport:before{border-style:dotted}.howto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;margin-top:16px}@media(max-width:820px){.howto{grid-template-columns:1fr}}.howto h1{font-size:1.8rem;margin:0 0 4px}.howto .tagline{color:var(--muted);font-size:1.1rem;margin:0 0 10px}.howto h2{font-size:1.1rem;margin:18px 0 6px}.howto p,.howto li{line-height:1.5}.howto .tiles{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.howto .tiles li{display:flex;gap:10px;align-items:center}.howto .tiles svg{width:28px;height:28px;flex:none}.howto .note{color:var(--muted);font-size:.9rem}.howto .example .board-wrap{max-width:420px}.scorebar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:.9rem}.scorebar.h2h{flex-direction:column;align-items:stretch}.score-row{display:flex;align-items:center;gap:10px}.score-name{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.chip{width:14px;height:14px;border-radius:50%;border:1.5px solid #111;flex:none}.chip-1{background:var(--p1);border-color:#fff;box-shadow:0 0 0 1px #111}.chip-2{background:var(--p2)}.score-name strong{font-size:1.35rem;vertical-align:-2px}.split{flex:1;display:flex;height:16px;border:1.5px solid #111;border-radius:8px;overflow:hidden;background:var(--p2);position:relative;min-width:60px}.split:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;border-left:2px dashed var(--highlight)}.split-p1{background:var(--p1);transition:width .4s}.split-p2{flex:1;background:var(--p2)}.score-meta{color:var(--muted);font-size:.85rem;text-align:center}.meter{flex:1 1 180px;display:flex;flex-direction:column;gap:3px}.meter>span{color:var(--muted)}.meter strong{color:var(--text)}.meter-track{height:12px;border-radius:6px;background:var(--empty);border:1px solid var(--line);overflow:hidden}.meter-track div{height:100%;transition:width .4s}.meter-village .meter-track div{background:var(--G)}.meter-blight .meter-track div{background:repeating-linear-gradient(45deg,var(--blight) 0 5px,var(--blight-line) 5px 8px)}.board-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px}.show-tiles{display:flex;flex-wrap:wrap;align-items:center;gap:4px;color:var(--muted);font-size:.8rem}.show-tiles button{padding:3px 9px;font-size:.8rem}.viewer .show-tiles{justify-content:center}.tile-tip{position:absolute;z-index:2;width:max-content;max-width:240px;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:6px 9px;border-radius:8px;background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:0 3px 10px #00000040;font-size:.8rem;line-height:1.3;transform:translate(-50%,calc(-100% - 4px))}.tile-tip.tip-left{transform:translateY(calc(-100% - 4px))}.tile-tip.tip-right{transform:translate(-100%,calc(-100% - 4px))}.tile-tip.tip-below{transform:translate(-50%,4px)}.tile-tip.tip-left.tip-below{transform:translateY(4px)}.tile-tip.tip-right.tip-below{transform:translate(-100%,4px)}.tile-tip em{color:var(--muted);font-style:normal}