:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--text-color-rgb: 250, 250, 250;--bg-color-rgb: 36, 36, 50;--text-color: rgb(var(--text-color-rgb));--bg-color: rgb(var(--bg-color-rgb));color-scheme:light dark;color:var(--text-color);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-x: #f00;--color-o: #00f}body{margin:0;display:flex;place-items:center}@media (prefers-color-scheme: light){:root{--text-color-rgb: 36, 36, 36;--bg-color-rgb: 150, 240, 255}}#root{margin:0 auto}h1{text-transform:uppercase;text-align:center}.game-board,.game-board-row{display:flex}.game-board{--cell-gap: .8em;flex-direction:column;padding:calc(var(--cell-gap) / 2)}.game-board.loading{position:relative}.game-board.loading:after{content:"Loading...";position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:rgba(var(--bg-color-rgb),.75);animation:loading-text 2s linear infinite}@keyframes loading-text{0%{content:"Loading"}25%{content:"Loading."}50%{content:"Loading.."}75%{content:"Loading..."}to{content:"Loading..."}}.game-board-row{flex-direction:row;flex-grow:1}table.game-info{border:none;width:100%;text-align:left;vertical-align:baseline;margin-bottom:1rem;line-height:1}table.game-info th{width:30%;min-width:120px}.game-player{display:inline-block;position:relative;--line-size: 1em;--color: #fff;--scale: 70%;transition:display opacity .3s}.game-player .game-player-ratio-helper{width:100%;padding-bottom:100%}.game-player.player-x{--color: var(--color-x)}.game-player.player-o{--color: var(--color-o)}.game-player.player-x:before,.game-player.player-x:after{content:"";position:absolute;top:50%;left:50%;width:calc(var(--scale) * sqrt(2) - var(--line-size) / 2);height:var(--line-size);border-radius:9999px;background-color:var(--color);transform-origin:center}.game-player.player-x:before{transform:translate(-50%,-50%) rotate(45deg)}.game-player.player-x:after{transform:translate(-50%,-50%) rotate(-45deg)}.game-player.player-o:before{content:"";position:absolute;top:50%;left:50%;width:var(--scale);height:var(--scale);border-radius:50%;box-shadow:inset 0 0 0 var(--line-size) var(--color);transform:translate(-50%,-50%)}.game-board-cell{display:block;flex-grow:1;position:relative;margin:calc(var(--cell-gap) / 2);border-radius:calc(var(--cell-gap) * 2);background:#0000001a;background-clip:content-box;box-sizing:border-box;box-shadow:inset calc(var(--cell-gap) / 2) calc(var(--cell-gap) / 2) calc(var(--cell-gap) / 2) #0002}.game-board-cell[role=button]{cursor:pointer}.game-board-cell-next-player{position:absolute;opacity:0!important;transition:opacity .1s;--color: var(--text-color) !important}.game-board-cell:hover .game-board-cell-next-player{opacity:.1!important}dialog{display:none;background-color:var(--bg-color);outline:none;border:none;padding:1rem;border-radius:1rem;min-width:300px;max-width:calc(100vw - 10px);box-sizing:border-box}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background-color:#000000bf}dialog>header{display:block;font-weight:700;font-size:1.75rem;text-align:center;padding-bottom:1rem}dialog>main{display:flex;flex-direction:column;align-items:center}dialog>main .game-options{display:block}dialog>footer{display:block;text-align:center;padding-top:1rem}dialog>footer>button{outline:none;border:none;background-color:#6464c8;color:#000032;font-size:1rem;text-transform:uppercase;font-weight:700;padding:.5rem 1rem;border-radius:.2rem;opacity:.8;transition:opacity .1s linear;box-shadow:inset -.2rem -.2rem .4rem #0007}dialog>footer>button:hover{opacity:1;cursor:pointer}@media (prefers-reduced-motion: no-preference){dialog{transition-property:display overlay;transition-duration:.3s;transition-timing-function:cubic-bezier(0,.8,.4,1.2);transition-behavior:allow-discrete;opacity:0;scale:.5}dialog[open]{opacity:1;scale:1}@starting-style{dialog[open]{opacity:0;scale:.5}}}dialog .select{display:flex;align-items:baseline;font-size:.8rem;font-weight:700;opacity:.9;padding:.25em 0;line-height:1.5}dialog .select .select-label{width:100px}dialog .select .select-options{display:flex;flex-direction:column}dialog .select .select-options .select-option{display:block;text-align:start;cursor:pointer;opacity:.9;transition:opacity .3s}dialog .select .select-options .select-option:hover{opacity:1}dialog .select .select-options .select-option:before{content:"> ";visibility:hidden}dialog .select .select-options .select-option.selected:before{visibility:visible}