@font-face{font-family:Prata;src:url('/fonts/Prata-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Jost;src:url('/fonts/Jost-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:Jost;src:url('/fonts/Jost-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--paper:#f6f1e4;--ink:#1c2145;--soft:#585a6b;--line:#cec8ba;--accent:#985132;--white:#fffdf5;--square:#e6dfd0}
*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--paper);color:var(--ink);font:16px/1.5 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default}[hidden]{display:none!important}.shell{max-width:1020px;padding:28px 36px 30px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:2px;margin:0}h1,h2{font:400 52px/1.2 Prata,Georgia,serif;letter-spacing:-2px;margin:8px 0 0}h1>span{color:var(--accent)}.tagline{margin:10px 0 25px;color:var(--soft)}.text-button{border:0;background:none;padding:8px 0;min-height:44px;font-size:14px}.text-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:5px}.text-button:disabled{opacity:.35}.game-layout{display:grid;grid-template-columns:minmax(0,550px) minmax(190px,1fr);gap:42px}.turn-bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ink);padding:12px 0;font-size:15px;gap:10px}#turn{display:flex;align-items:center;gap:8px}#move-number{font-size:11px;color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}.turn-dot,.sample{display:inline-block;width:11px;height:11px;flex-shrink:0;border:1px solid var(--ink);border-radius:50%}.white{background:var(--white)}.black{background:var(--ink)}.thinking .turn-dot{animation:breathe 1.2s infinite}.direction-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0 0 13px 18px}.direction{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:6px 8px;border:1px solid var(--line);font-size:11px}.direction-name{font-weight:500}.direction-owner{font-size:10px}.held-white{background:var(--white)}.held-black{background:var(--ink);color:var(--paper);border-color:var(--ink)}.open{color:var(--soft)}.board-wrap{position:relative;padding-left:18px}#board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));aspect-ratio:1;border:1px solid var(--ink);gap:1px;padding:4px;background:var(--line);touch-action:manipulation}.cell,.example-cell{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:0;background:var(--paper);isolation:isolate;touch-action:manipulation}.dark-square{background:var(--square)}.cell.cross-row:before{content:'';position:absolute;height:2px;left:0;right:0;top:calc(50% - 1px);background:#1c214526;z-index:0;pointer-events:none}.cell.cross-column:after{content:'';position:absolute;width:2px;top:0;bottom:0;left:calc(50% - 1px);background:#1c214526;z-index:0;pointer-events:none}.cell.ray-white{background:#fdfaf1}.cell.ray-black{background:#d8d4cf}.stone{display:block;border-radius:50%;width:57%;height:57%;border:1.8px solid var(--ink);z-index:2;box-shadow:0 2px 3px #1c21452a;pointer-events:none}.white-stone{background:var(--white);box-shadow:inset 0 2px 0 #fff,0 2px 3px #1c21452a}.black-stone{background:var(--ink);box-shadow:inset 0 2px 0 #ffffff20,0 2px 3px #1c21452a}.centre-mark{position:relative;display:block;width:27%;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;background:var(--paper);z-index:2;pointer-events:none}.centre-mark:after{content:'';position:absolute;width:25%;height:25%;top:37.5%;left:37.5%;border-radius:50%;background:var(--ink)}.cell.selected{outline:2px solid var(--accent);outline-offset:-3px}.cell.legal{background-image:radial-gradient(circle at center,#1c214582 0 8%,transparent 9%)}.cell.capture{background-image:radial-gradient(circle at center,transparent 0 48%,var(--accent) 49% 52%,transparent 53%)}.cell.preview{box-shadow:inset 0 0 0 2px #98513266}.cell.last-from{box-shadow:inset 0 0 0 1px #98513277}.cell.last-to{box-shadow:inset 0 0 0 2px #98513299}.cell:focus-visible{z-index:3;outline:3px solid var(--accent);outline-offset:-3px}.files{display:grid;grid-template-columns:repeat(7,1fr);padding:0 4px;text-align:center;height:24px;align-items:end;color:var(--soft);font-size:10px}#ranks{position:absolute;top:4px;bottom:24px;left:0;display:grid;grid-template-rows:repeat(7,1fr);align-items:center;font-size:10px;color:var(--soft)}.reserves{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 0 18px}.reserve{background:none;text-align:left;border:1px solid var(--line);padding:9px 11px;min-height:60px}.reserve-title{display:flex;align-items:center;gap:7px;font-size:13px}.reserve-title strong{margin-left:auto;font-size:18px;font-weight:500}.reserve-caption{display:block;font-size:10px;color:var(--soft);margin-top:2px}.reserve:not(:disabled):hover,.reserve.selected{border-color:var(--accent);background:#fffdf555}.reserve:disabled .reserve-title{opacity:.65}#hint{font-size:13px;min-height:40px;color:var(--soft);margin:14px 0 6px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}#mode-label{font-size:11px;color:var(--soft)}.note{border-top:1px solid var(--ink);padding-top:15px}.note>p:not(.eyebrow){font:400 26px/1.4 Prata,Georgia,serif;letter-spacing:-.6px;margin:17px 0}.note>span{display:block;font-size:14px;color:var(--soft)}.note>.text-button{font-size:12px;margin-top:8px}.score-panel,.last-play,.history-area{border-top:1px solid var(--line);margin-top:22px;padding-top:14px}.score-panel>div{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:14px}.score-panel>div>span{display:flex;align-items:center;gap:7px}.score-panel strong{font-weight:500;font-size:19px}.score-panel small{font-size:12px;font-weight:400;color:var(--soft)}.last-play>p:last-child{color:var(--soft);font-size:14px;margin:10px 0}#history{list-style:none;margin:10px 0 0;padding:0;max-height:150px;overflow:auto;scrollbar-width:thin;font-size:12px;font-variant-numeric:tabular-nums}#history li{display:grid;grid-template-columns:20px 1fr;gap:5px;padding:5px 0;border-bottom:1px solid #1c214512}#history li>span:first-child{color:var(--soft)}#empty-history,.prototype{font-size:12px;color:var(--soft)}.prototype{border-top:1px solid var(--line);padding-top:14px;margin-top:20px}#opening-choice{border:1px solid var(--accent);margin:0 0 14px 18px;padding:12px 14px;background:#fffdf566}#opening-choice>p:first-child{margin:0 0 9px;font-size:14px}.choice-buttons{display:flex;gap:10px}.choice-buttons button{border:1px solid var(--ink);background:var(--paper);min-height:44px;flex:1;font-size:13px;padding:8px}.choice-buttons button:last-child{background:var(--ink);color:var(--paper)}#opening-choice .small{margin:8px 0 0}.small{font-size:13px;color:var(--soft);margin:14px 0}dialog{position:fixed;width:min(92vw,490px);margin:auto;max-height:90dvh;overflow:auto;border:1px solid var(--ink);padding:30px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#1c21455c;backdrop-filter:blur(3px)}h2{font-size:31px;letter-spacing:-1px;margin:16px 0 20px}.close{position:absolute;right:10px;top:7px;width:44px;height:44px;background:none;border:0;font-size:27px}.rules-list{padding-left:22px;font-size:15px}.rules-list li{padding:10px 0 10px 4px;border-top:1px solid var(--line)}.rules-list strong{display:block}.primary{width:100%;min-height:48px;padding:12px;margin-top:12px;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}.primary:hover{background:#353b61}.example-link{border:0;border-bottom:1px solid var(--line);background:none;padding:10px 0;min-height:44px;font-size:14px}label{display:block;font-size:13px;margin:17px 0 5px}select{width:100%;padding:11px;background:var(--paper);border:1px solid var(--line);border-radius:0;font-size:14px}#example-board{display:grid;grid-template-columns:repeat(7,1fr);aspect-ratio:1;gap:1px;padding:3px;background:var(--line);max-width:330px;margin:auto;border:1px solid var(--ink)}#example-copy{font-size:14px;min-height:65px}body:has(dialog[open]){overflow:hidden}@keyframes breathe{50%{opacity:.3}}
@media(max-width:700px){.shell{max-width:520px;padding:18px 18px 24px}h1{font-size:41px;margin-top:6px}.eyebrow{font-size:9px}.tagline{font-size:14px;margin:9px 0 18px}header>.text-button{font-size:12px}.game-layout{display:block}aside{display:none}.turn-bar{padding:11px 0;font-size:14px}.direction{padding:5px 7px;display:block;text-align:center}.direction-name{display:block;font-size:10px}.direction-owner{font-size:10px}.direction-strip{margin-bottom:11px}.reserves{gap:8px;margin-top:11px}.reserve{padding:7px 8px;min-height:61px}.reserve-title{font-size:12px;gap:5px}.reserve-caption{font-size:10px;line-height:1.3}.reserve-title strong{font-size:17px}#hint{margin:11px 0 4px;min-height:40px;font-size:12px}#mode-label{font-size:10px}.toolbar .text-button{font-size:12px}.stone{border-width:1.4px}.centre-mark{border-width:1.5px}#opening-choice{padding:10px 11px}#opening-choice>p:first-child{font-size:13px}dialog{padding:25px}h2{font-size:28px}}
@media(max-width:350px){.shell{padding:14px 10px}.reserve-title{font-size:11px}.reserve-caption{font-size:9px}.direction{padding:4px}.tagline{margin-bottom:14px}#board{padding:3px}.board-wrap{padding-left:16px}.direction-strip,.reserves,#opening-choice{margin-left:16px}}
@media(min-width:701px) and (max-height:900px){.shell{max-width:940px;padding-top:20px}h1{font-size:43px}.tagline{margin:8px 0 19px}.game-layout{grid-template-columns:minmax(340px,min(490px,calc(100dvh - 355px))) minmax(200px,1fr);gap:36px}.note>p:not(.eyebrow){font-size:24px}#history{max-height:100px}.score-panel,.last-play,.history-area{margin-top:17px;padding-top:12px}.prototype{margin-top:15px}.turn-bar{padding:10px 0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
