.board { width:min(440px, 96vw); height:auto; background:#111b30; border:2px solid var(--line); border-radius:14px; touch-action:manipulation; }
.dot { fill:#e2e8f0; } .edge { stroke:#334155; stroke-width:5; stroke-linecap:round; } .edge.on { stroke:#e2e8f0; } .edge.last { stroke:#fbbf24; } .hit { stroke:transparent; stroke-width:30; stroke-linecap:round; cursor:pointer; } .hit:hover { stroke:rgba(56,189,248,.25); }
.box { fill:transparent; } .box.p1 { fill:rgba(56,189,248,.55); } .box.p2 { fill:rgba(251,191,36,.55); }
.p1 { color:#38bdf8; } .p2 { color:#fbbf24; } .hud span { font-weight:700; }

/* A graph-paper board with pencil-like connections. */
.board { background:#fffaf0; border:3px solid #d8cbb7; box-shadow:0 12px 25px rgba(55,46,35,.18); }
.dot { fill:#37506a; }
.edge { stroke:#b7c8d4; }
.edge.on { stroke:#2683c2; }
.edge.last { stroke:#e67161; }
.box.p1 { fill:rgba(52,157,208,.32); }
.box.p2 { fill:rgba(235,112,96,.32); }