body{font-family:system-ui,sans-serif;margin:1rem;text-align:center}
#board{display:grid;gap:2px;max-width:600px;margin:1rem auto}
.cell{aspect-ratio:1;background:#eee;border:0;padding:0;cursor:pointer;border-radius:3px;position:relative}
.cell:disabled{cursor:default}
.cell.win{outline:3px solid #000;background:#fff3b0}
/* player marks: shape from s-*, colour from c-* (sets --c) */
.cell.s-circle::after,.cell.s-square::after,.cell.s-x::before,.cell.s-x::after{content:"";position:absolute;background:var(--c)}
.cell.s-circle::after{inset:12%;border-radius:50%}
.cell.s-square::after{inset:16%}
.cell.s-x::before,.cell.s-x::after{left:41%;top:6%;width:18%;height:88%;border-radius:2px}
.cell.s-x::before{transform:rotate(45deg)}
.cell.s-x::after{transform:rotate(-45deg)}
.c-red{--c:#e6194b}.c-blue{--c:#4363d8}.c-purple{--c:#911eb4}.c-pink{--c:#ff69b4}.c-cyan{--c:#17bed0}
#roster span{margin:0 .3rem;padding:2px 8px;border-radius:4px;color:#fff;background:var(--c)}
#roster span.c-pink,#roster span.c-cyan{color:#000}
#roster span.s-circle::before{content:"\25CF  "}
#roster span.s-x::before{content:"\2715  "}
#roster span.s-square::before{content:"\25A0  "}
#roster span.turn{outline:3px solid #000}
#leave{margin-top:.5rem}
#key{width:min(22rem,70vw)}
#gamekey{font-family:ui-monospace,monospace}