.omok{margin-inline:auto;container-type:inline-size}.omok-bar{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:clamp(1rem,3vw,1.75rem);display:flex}.omok-bar__spacer{flex:auto}.omok-btn{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font:inherit;font-size:var(--step-1);cursor:pointer;align-items:center;gap:.4rem;padding:.5rem .9rem;line-height:1.2;transition:background-color .15s,border-color .15s,opacity .15s;display:inline-flex}.omok-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--text-faint)}.omok-btn--go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}.omok-btn--go:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.omok-btn--toggle[data-on=false]{color:var(--text-faint);border-color:var(--border)}.omok-seg{border:1px solid var(--border-strong);border-radius:var(--radius);display:inline-flex;overflow:hidden}.omok-seg__btn{background:var(--bg-raised);color:var(--text-muted);font:inherit;font-size:var(--step-1);cursor:pointer;border:0;padding:.5rem .75rem;transition:background-color .15s,color .15s}.omok-seg__btn+.omok-seg__btn{border-left:1px solid var(--border-strong)}.omok-seg__btn:hover,.omok-seg__btn[aria-pressed=true]{background:var(--bg-hover);color:var(--text)}.omok-stats{font-size:var(--step-1);color:var(--text-muted);font-variant-numeric:tabular-nums;gap:1.1rem;display:flex}.omok-stats b{color:var(--text);font-weight:500}.omok-board-wrap{justify-content:center;display:flex}.omok-board{aspect-ratio:1;touch-action:manipulation;background-color:#d9ad74;background-image:repeating-linear-gradient(#6b4a2c 0 1.5px,#0000 1.5px 7.14286%),repeating-linear-gradient(90deg,#6b4a2c 0 1.5px,#0000 1.5px 7.14286%);border:1.5px solid #6b4a2c;border-radius:2px;width:min(100%,32rem);margin-inline:auto;position:relative;box-shadow:inset 0 1px #ffffff14,0 12px 30px #00000059}.omok-board:before{content:"";pointer-events:none;background:#6b4a2c;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.omok-board[data-locked=true]{pointer-events:none}.omok-point{aspect-ratio:1;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:6%;display:flex;position:absolute;transform:translate(-50%,-50%)}.omok-point:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.omok-point[data-win=true]{background:radial-gradient(circle,#8fc22b66,#0000 72%)}.omok-stone{pointer-events:none;border-radius:50%;width:100%;height:100%;transition:opacity .1s;display:block;position:relative}.omok-point[data-mark=B] .omok-stone{background:radial-gradient(circle at 32% 28%,#4a4a46,#08080a 74%);box-shadow:0 2px 3px #0000008c}.omok-point[data-mark=W] .omok-stone{background:radial-gradient(circle at 32% 28%,#fff,#d7d2c4 78%);box-shadow:0 2px 3px #00000059}.omok-point[data-last=true] .omok-stone:after{content:"";border:1.5px solid var(--accent);border-radius:50%;position:absolute;inset:-3px}.omok-point[data-mark=""] .omok-stone{opacity:0;background:var(--turn-color)}.omok-point[data-mark=""]:hover .omok-stone,.omok-point[data-mark=""]:focus-visible .omok-stone{opacity:.4}.omok-result{border:1px solid var(--accent);border-radius:var(--radius);background:#8fc22b17;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.25rem;padding:1rem 1.25rem;display:flex}.omok-result[data-outcome=draw]{border-color:var(--border-strong);background:var(--bg-raised)}.omok-result p{margin:0}.omok-result strong{font-weight:500}.omok-note{font-size:var(--step-1);color:var(--text-faint);margin-top:1rem}.omok [hidden]{display:none}@media (width<=30rem){.omok-bar{gap:.4rem .5rem}.omok-bar__spacer{flex-basis:100%;height:0}.omok-stats{width:100%}}.omok-dialog{border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--bg-raised);color:var(--text);max-width:min(26rem,100vw - 2rem);padding:clamp(1.25rem,4vw,1.75rem);box-shadow:0 24px 60px #0000008c}.omok-dialog::backdrop{background:#0009}.omok-dialog__title{font-size:var(--step1);margin:0 0 .5rem;font-weight:500}.omok-dialog__note{font-size:var(--step-1);color:var(--text-muted);margin:0 0 1.25rem}.omok-dialog__actions{flex-wrap:wrap;gap:.5rem;display:flex}@media (width<=26rem){.omok-dialog__actions{flex-direction:column-reverse}.omok-dialog__actions .omok-btn{justify-content:center}}.crumb[data-astro-cid-7ghmajie]{color:inherit;border-bottom:1px solid var(--border-strong);text-decoration:none}.crumb[data-astro-cid-7ghmajie]:hover{color:var(--text);border-color:var(--text)}.page-title[data-astro-cid-7ghmajie]{font-size:var(--step3)}.lede[data-astro-cid-7ghmajie]{max-width:var(--measure);color:var(--text-muted);margin-top:.75rem;margin-bottom:clamp(2rem,5vw,3rem)}