:root{--gutter-width: 1.8vmin;--board-background: #008000;--board-cell: #006800;--player: #000000;--ai: #ffffff;--surface: #121212;--on-surface: #ffffff;--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: #ffffff;--on-surface: #000000;--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;border:none;background:transparent;font:inherit;font-weight:500;color:var(--button-text);height:40px;padding-inline:12px;border-radius:100vmax}button:hover{background-color:var(--button-hover)}button:focus-visible,button:active{background-color:var(--button-focus);outline:none}.icon-button{height:48px;width:48px;display:inline-grid;place-content:center;place-items:center}.icon-button svg{width:24px;height:24px}body{width:100vw;height:100vh;width:100dvw;height:100dvh;margin:0;display:grid;place-content:center}#lcp{position:absolute;opacity:.00000000001;pointer-events:none}#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);display:grid;grid-template:repeat(8,1fr) / repeat(8,1fr);place-content:stretch;border-radius:var(--gutter-width)}button.cell{height:unset;padding:0;background-color:var(--board-cell);border-radius:calc(var(--gutter-width) / 2);display:grid;place-content:center;grid-template-columns:85%}@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:grow .5s ease-in-out}.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:2px solid transparent;outline-offset:-1px}.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{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}@media (min-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;margin-inline:-24px;padding:8px 32px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"label value" "control control";align-items:center}#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:fade-in .2s ease-out}dialog.closing::backdrop{animation:fade-out .2s ease-out}dialog{min-width:320px;max-width:min(600px,calc(100vw - 96px));max-height:calc(100vh - 96px);border-radius:28px;border:none;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;padding:24px;background-color:var(--surface);color:var(--on-surface);animation:grow .2s ease-out;overscroll-behavior:contain}dialog.closing{animation:shrink .2s ease-in forwards}dialog .title{margin:0 0 16px}dialog .body{margin:0}dialog .buttons{margin-top:24px;display:flex;justify-content:flex-end}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{position:fixed;bottom:max(0px,calc(env(safe-area-inset-bottom) - 12px));left:max(0px,calc(env(safe-area-inset-left) - 12px));display:grid;padding:12px;gap:12px;justify-items:start}.toast{border-radius:28px;padding:0 24px;height:48px;border:solid 1px var(--on-surface-30);background-color:var(--surface);color:var(--on-surface)}.toast>.text{line-height:48px}.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));height:56px;width:auto;padding-right:24px;padding-left:16px;gap:16px;grid-template-columns:auto auto;border-radius:16px;transition:border-radius .1s;--button-text: var(--fab-foreground);background-color:var(--fab-background);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{display:grid;animation:grow .2s ease-out;transform-origin:100% 100%}@media (forced-colors: active){#lcp{display:none}button:not(.cell),button:not(.cell):focus-visible,button:not(.cell):active{outline:revert!important;border:1px solid}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:1px solid CanvasText;outline-offset:-1px}.player-turn .cell:focus-visible:before{outline-width:8px;outline-offset:-6px}.player-turn .cell:not(.black):not(.white):focus-visible:before{outline-color:CanvasText}}