:root{
  font-family:Inter,"Segoe UI",system-ui,sans-serif;
  color:#211b35;
  background:#fbfaff;
  --red:#c91517;
  --black:#161616;
  --purple:#6c4cff;
  --muted:#716b80;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px}
button{font:inherit}
.game-shell{width:min(720px,100%);text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--purple);font-size:.78rem;font-weight:800;margin:0}
h1{font-size:clamp(2.2rem,7vw,4rem);margin:.18em 0 .12em}
.intro{max-width:680px;margin:0 auto;color:var(--muted);font-size:1rem;line-height:1.55}
.score-strip{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 6px;flex-wrap:wrap}
.player-chip{display:inline-flex;align-items:center;gap:8px;border:2px solid #e6e0f4;background:#fff;border-radius:999px;padding:7px 12px;font-weight:800;transition:border-color .15s,box-shadow .15s}
.player-chip.current{border-color:#9d8cff;box-shadow:0 0 0 3px #eeeaff}
.stone{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #bcb6c9}
.stone.red{background:var(--red)}
.stone.black{background:var(--black)}
.versus{font-size:.8rem;color:#8f899b}
.status{min-height:1.6em;margin:10px 0 2px;font-weight:850;color:#4b3d78}
.progress{min-height:1.4em;margin:0;color:#81798e;font-size:.92rem}
.success{color:#16734c}
.failure{color:#b42338}
.board-wrap{position:relative;width:min(560px,88vw);margin:30px auto 20px;padding:12px}
.board{position:relative;width:100%;aspect-ratio:1;background:#fff;border-radius:18px;box-shadow:0 18px 44px rgba(38,27,75,.10);overflow:visible}
.network{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.frame{fill:none;stroke:#171717}
.frame.outer{stroke-width:12}
.frame.inner{stroke-width:4}
.link{stroke:#3b3b3b;stroke-width:3.4;stroke-linecap:round}
.cells{position:absolute;inset:0}
.cell{position:absolute;width:10.8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2.8px solid #111;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08);cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s,border-color .12s;padding:0}
.cell:hover:not(:disabled),.cell:focus-visible{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 5px #ece8ff;z-index:3}
.cell:disabled{cursor:default;opacity:1}
.cell.red{background:var(--red);border-color:#fff;box-shadow:0 0 0 2px #111}
.cell.black{background:var(--black);border-color:#fff;box-shadow:0 0 0 2px #111}
.cell.suggested{box-shadow:0 0 0 4px #f0b629,0 0 0 8px #fff3bd}
.cell.winner{box-shadow:0 0 0 4px #2fa875,0 0 0 8px #d9f8e9;z-index:2}
.wall-label{position:absolute;font-size:.68rem;font-weight:900;letter-spacing:.1em;color:#9a93a4;pointer-events:none}
.wall-top{left:50%;top:-4px;transform:translateX(-50%)}
.wall-bottom{left:50%;bottom:-4px;transform:translateX(-50%)}
.wall-left{left:-18px;top:50%;transform:translateY(-50%) rotate(-90deg)}
.wall-right{right:-25px;top:50%;transform:translateY(-50%) rotate(90deg)}
.actions{display:flex;justify-content:center;gap:12px}
.secondary{border:2px solid #ddd5f4;border-radius:14px;background:#fff;padding:10px 16px;color:#5d42d6;font-weight:800;cursor:pointer}
.secondary:hover,.secondary:focus-visible{border-color:var(--purple)}
.secondary:disabled{opacity:.55;cursor:default}
.hint{max-width:520px;margin:14px auto 0;padding:12px 16px;background:#fff4d7;border-radius:12px;line-height:1.45}
:focus-visible{outline:3px solid #bbaeff;outline-offset:3px}
@media(max-width:520px){
  body{padding:16px 12px}
  .intro{font-size:.94rem}
  .board-wrap{width:min(94vw,520px);padding:8px;margin-top:26px}
  .wall-left{left:-20px}.wall-right{right:-27px}
  .cell{width:12%}
}