/* Iks oks: a woven 3 by 3 board in the site's Ćilim tokens. Iks is madder red, oks indigo, the winning line saffron. */
.io-page{padding-bottom:40px}
.io-head{padding:26px 0 6px;text-align:center}
.io-head h1{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;color:var(--indigo);margin-top:10px}
.io-head p{margin:10px auto 0;max-width:620px;color:var(--ink-2);font-size:17px}
.io-head .crumbs{justify-content:center}
.io{max-width:460px;margin:14px auto 0;padding:22px 16px 18px;background:var(--card);box-shadow:inset 0 0 0 2px var(--rim-soft);position:relative;text-align:center}
.io::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--zig)}
.io-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.io-modes button,.io-tool{min-height:44px;padding:0 14px;border:2px solid var(--indigo);background:transparent;color:var(--indigo);font:600 15px/1 var(--text);cursor:pointer}
.io-modes button[aria-pressed="true"]{background:var(--indigo);color:var(--cream)}
.io-status{min-height:48px;margin-top:12px;display:grid;place-items:center;font-size:16px;color:var(--ink-2)}
.io-board{--c:min(110px,calc((100vw - 64px) / 3));display:grid;grid-template-columns:repeat(3,var(--c));grid-template-rows:repeat(3,var(--c));gap:8px;justify-content:center;margin:6px auto 0;padding:8px;background:var(--weave)}
.io-cell{border:0;background:var(--cream);font:800 calc(var(--c) * .55)/1 var(--display);cursor:pointer;touch-action:manipulation}
.io-cell:disabled{cursor:default}
.io-cell:not(:disabled):hover{background:#fff}
.io-cell[data-mark="X"]{color:var(--red)}
.io-cell[data-mark="O"]{color:var(--indigo)}
.io-cell.is-win{background:var(--saffron)}
.io-cell:focus-visible,.io-modes button:focus-visible,.io-tool:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.io-score{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.io-score b{display:block;font:800 26px/1.1 var(--display);color:var(--indigo)}
.io-score span{font-size:14px;color:var(--ink-2)}
.io-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.io-actions .btn{min-height:48px;padding:0 26px;font-size:14px}
.io-noscript{margin-top:12px;padding:12px;background:var(--wool)}
.io-info{max-inline-size:880px;margin:34px auto 0}
.io-info h2{font-size:clamp(22px,2.6vw,30px);color:var(--indigo);margin-top:30px}
.io-info h2:first-child{margin-top:0}
.io-info p,.io-info li{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.6}
.io-info ul{padding-inline-start:22px}
@media (max-width:760px){.io-page{padding-bottom:110px}.io-head .kicker{display:none}.io-head{padding-top:6px}}