:root{--bg: #141518;--panel: #1d1f23;--panel-2: #272a30;--ink: #ecebe7;--dim: #9c9fa6;--line: #34373e;--red: #e8705a;--blue: #6aa8f0;--good: #7ddf9a;--bad: #ef6b7b}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink)}body{font:15px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Hiragino Sans,sans-serif}main{max-width:1180px;margin:0 auto;padding:32px 24px 48px}h1{font-size:34px;margin:0 0 8px;letter-spacing:-.01em}h1 span{color:var(--red);font-weight:600;margin-left:6px}.sub{color:var(--dim);max-width:80ch;margin:0 0 24px}.sub strong{color:var(--ink);font-weight:600}.sub .red-t,.red-t{color:var(--red)}.sub .blue-t,.blue-t{color:var(--blue)}.win-t,.sub .win-t{color:var(--good)}.lose-t,.sub .lose-t{color:var(--bad)}#wrap{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}.stage{flex:1 1 520px;min-width:0}.side{flex:0 1 470px;min-width:300px}h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);font-weight:600;margin:0 0 10px}.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.sel{color:var(--dim);font-size:13px;display:inline-flex;gap:6px;align-items:center}.chk{cursor:pointer}select,button{font:inherit;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}button:hover,select:hover{border-color:var(--dim)}button.primary{background:var(--red);color:#1d0f0b;border-color:var(--red);font-weight:600}#boardwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;max-width:540px}#board{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none;max-height:70vh}#board .edge{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#board .edge.red{stroke:var(--red)}#board .edge.blue{stroke:var(--blue)}#board .cell{fill:#2c2f35;stroke:#141518;stroke-width:2}#board .cell.open{cursor:pointer}#board .cell.open:hover{fill:#3a3e46}#board .cell.red{fill:var(--red)}#board .cell.blue{fill:var(--blue)}#board .cell.last{stroke:#fff;stroke-width:3}#board .cell.path{filter:brightness(1.25);stroke:#fff6d8;stroke-width:3}#board .mark{pointer-events:none}#board .mark.win{fill:var(--good);stroke:#0e100f;stroke-width:2}#board .mark.lose{fill:var(--bad);stroke:#0e100f;stroke-width:2}#board .mark.unk{fill:#9c9fa6;font:700 15px ui-monospace,SFMono-Regular,Menlo,monospace}#status{margin-top:10px;color:var(--dim);font-size:14px;min-height:1.6em}#status strong{font-weight:600}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;margin-bottom:10px}.mini-wrap{text-align:center}.mini-title{font-size:12px;color:var(--ink);font-weight:600}.mini{width:100%;max-height:92px}.mini path{stroke:#141518;stroke-width:1.2}.mini .w{fill:var(--good)}.mini .l{fill:#6b3a42}.mini .u{fill:#3a3d44}.mini .bad{stroke:#ff3b3b;stroke-width:2.5}.mini-note{font-size:11px;color:var(--dim);line-height:1.35}.legend{font-size:12px;color:var(--dim);margin:0 0 18px}.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 2px 0 6px;vertical-align:-1px}.sw.w{background:var(--good)}.sw.l{background:#6b3a42}.sw.u{background:#3a3d44}.notes{margin-top:36px;max-width:80ch;color:var(--dim)}.notes h2{color:var(--ink);font-size:18px;margin:24px 0 8px}.notes em{color:var(--ink)}footer{margin-top:36px;color:var(--dim);font-size:13px}footer a,.notes a{color:var(--blue)}