:root{--gutter-width:1.8vmin;--board-background:green;--board-cell:#006800;--player:#000;--ai:#fff;--surface:#121212;--on-surface:#fff;--on-surface-20:#ffffff20;--on-surface-30:#ffffff30;--accent-on-surface:var(--accent-light);--accent-on-surface-20:var(--accent-light-20);--accent-on-surface-30:var(--accent-light-30);font-family:system-ui,sans-serif}@media (prefers-color-scheme:light){:root{--surface:#fff;--on-surface:#000;--on-surface-20:#00000020;--on-surface-30:#00000030;--accent-on-surface:var(--accent-dark);--accent-on-surface-20:var(--accent-dark-20);--accent-on-surface-30:var(--accent-dark-30)}}*{box-sizing:border-box}html{background-color:var(--surface);color:var(--on-surface)}input{accent-color:var(--accent-on-surface)}input[type=checkbox]{width:18px;height:18px;margin:0}button{--button-text:var(--accent-on-surface);--button-hover:var(--accent-on-surface-20);--button-focus:var(--accent-on-surface-30);appearance:none;font:inherit;color:var(--button-text);background:0 0;border:none;border-radius:100vmax;height:40px;padding-inline:12px;font-weight:500}button:hover{background-color:var(--button-hover)}button:focus-visible,button:active{background-color:var(--button-focus);outline:none}.icon-button{place-content:center;place-items:center;width:48px;height:48px;display:inline-grid}.icon-button svg{width:24px;height:24px}body{place-content:center;width:100dvw;height:100dvh;margin:0;display:grid}#lcp{opacity:1e-11;pointer-events:none;position:absolute}#board{--size:calc(100dvmin - 4 * var(--gutter-width));width:var(--size);height:var(--size);contain:strict;background-color:var(--board-background);padding:var(--gutter-width);gap:var(--gutter-width);border-radius:var(--gutter-width);grid-template:repeat(8,1fr)/repeat(8,1fr);place-content:stretch;display:grid}button.cell{height:unset;background-color:var(--board-cell);border-radius:calc(var(--gutter-width) / 2);grid-template-columns:85%;place-content:center;padding:0;display:grid}@keyframes grow{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes shrink{0%{transform:scale(1)}to{transform:scale(0)}}.cell:before{aspect-ratio:1;border-radius:100vmax}.cell.black:before,.cell.white:before{content:"";animation:.5s ease-in-out grow}.updating .cell:before{animation-duration:0s}.cell.white:before{background-color:var(--ai);--back-side:var(--player)}.cell.black:before{background-color:var(--player);--back-side:var(--ai)}.hints-enabled.player-turn .cell[tabindex="0"]:before{content:"";box-shadow:inset 0 0 8px 1px var(--hint)}.player-turn .cell:focus-visible:before{content:"";outline-offset:-1px;outline:2px solid #0000}.player-turn .cell:not(.black):not(.white):focus-visible:before{outline-color:#fff}.player-turn .arrow-navigation .cell.white:focus-visible:before{outline-color:var(--player)}.player-turn .arrow-navigation .cell.black:focus-visible:before{outline-color:var(--ai)}#settings-button,#close-settings{--button-text:var(--on-surface);--button-hover:var(--on-surface-20);--button-focus:var(--on-surface-30)}#settings-button{top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));position:fixed}@media (width>=600px){dialog#settings{margin-top:max(48px, env(safe-area-inset-top));margin-right:max(48px, env(safe-area-inset-right));transform-origin:calc(100% - 24px + max(48px, env(safe-area-inset-right)) - max(8px, env(safe-area-inset-right))) calc(24px - max(48px, env(safe-area-inset-top)) + max(8px, env(safe-area-inset-top)))}}#settings .body>*{margin-top:8px;grid-template-columns:1fr auto;grid-template-areas:"label value""control control";align-items:center;margin-inline:-24px;padding:8px 32px;display:grid}#settings .body>* input[type=range],#settings .body>* theme-selector{grid-area:control}#settings #difficulty{gap:8px 0}#settings #color-theme{gap:16px 0}#settings .label{font-weight:500}#settings output{font-weight:300}#close-settings{position:absolute;top:16px;right:16px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}dialog::backdrop{background-color:#00000080;animation:.2s ease-out fade-in}dialog.closing::backdrop{animation:.2s ease-out fade-out}dialog{background-color:var(--surface);min-width:320px;max-width:min(600px,100vw - 96px);max-height:calc(100vh - 96px);color:var(--on-surface);overscroll-behavior:contain;border:none;border-radius:28px;padding:24px;animation:.2s ease-out grow;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f}dialog.closing{animation:.2s ease-in forwards shrink}dialog .title{margin:0;margin-bottom:16px}dialog .body{margin:0}dialog .buttons{justify-content:flex-end;margin-top:24px;display:flex}dialog h1{margin:0 0 16px;font-weight:400}#game-over table{width:100%;line-height:24px}#game-over th{text-align:start;font-weight:500}#game-over td{text-align:end;font-weight:300}#toast-container{bottom:max(0px, calc(env(safe-area-inset-bottom) - 12px));left:max(0px, calc(env(safe-area-inset-left) - 12px));justify-items:start;gap:12px;padding:12px;display:grid;position:fixed}.toast{border:solid 1px var(--on-surface-30);background-color:var(--surface);height:48px;color:var(--on-surface);border-radius:28px;padding:0 24px}.toast>.text{line-height:48px}.fab{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));--button-text:var(--fab-foreground);background-color:var(--fab-background);border-radius:16px;grid-template-columns:auto auto;gap:16px;width:auto;height:56px;padding-left:16px;padding-right:24px;transition:border-radius .1s;position:fixed;box-shadow:0 3px 4px #00000024,0 3px 3px -2px #0000001f,0 1px 8px #0003}.fab:hover{background-color:var(--fab-background);filter:brightness(108%)}.fab:focus-visible,.fab:active{background-color:var(--fab-background);filter:brightness(112%)}.fab:active{border-radius:8px}#new-game{display:none}#new-game.show{transform-origin:100% 100%;animation:.2s ease-out grow;display:grid}@media (forced-colors:active){#lcp{display:none}button:not(.cell),button:not(.cell):focus-visible,button:not(.cell):active{border:1px solid;outline:revert!important}dialog{outline:1px solid}#settings #color-theme{display:none}#board,.cell{background-color:canvas;outline:1px solid canvastext!important}#board{--ai:Mark;--player:LinkText}.hints-enabled.player-turn .cell[tabindex="0"]:not(:focus-visible):before{outline-offset:-1px;outline:1px solid canvastext}.player-turn .cell:focus-visible:before{outline-offset:-6px;outline-width:8px}.player-turn .cell:not(.black):not(.white):focus-visible:before{outline-color:canvastext}}