.sl-area { max-width:520px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stats { display:flex; gap:14px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.stats b { color:var(--ink); font-size:17px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.board { position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto; border:1px solid var(--rule); background:var(--panel); }
.dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%); z-index:2; }
.edge-btn { position:absolute; background:transparent; border:none; padding:0; cursor:pointer; z-index:1; }
.edge-btn.h { height:14px; transform:translateY(-50%); }
.edge-btn.v { width:14px; transform:translateX(-50%); }
.edge-btn::after { content:""; position:absolute; background:transparent; border-radius:3px; }
.edge-btn.h::after { left:0; right:0; top:6px; height:3px; }
.edge-btn.v::after { top:0; bottom:0; left:6px; width:3px; }
.edge-btn.on.h::after { background:var(--blue); }
.edge-btn.on.v::after { background:var(--blue); }
.edge-btn:hover::after { background:var(--cyan); }
.edge-btn.on:hover::after { background:var(--orange); }
.cell-num { position:absolute; display:flex; align-items:center; justify-content:center; font:700 16px ui-monospace,monospace; color:var(--muted); pointer-events:none; }
.cell-num.zero { opacity:.35; }
.win-panel { max-width:360px; margin:14px auto 0; padding:24px; text-align:center; }
.win-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.win-panel p { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) { .controls { flex-direction:column; align-items:stretch; } .stats { justify-content:space-between; } .actions { justify-content:center; } }