@import "https://fonts.googleapis.com/css2?family=Jura:wght@300;700&display=swap";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{vertical-align:baseline;border:0;margin:0;padding:0;font-size:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}
.dgrid{display:grid}
:root{--cell-size:max(min(7vw,7vh),2rem);--outer-cell-gap:min(1.75vh,1.75vw);--primary-color:#dedede;--outer-border-size:1px;--cell-border-size:1px;--outer-border-color:#fff9;--cell-border-color:#fff4;--outer-font-color:#fff8;--cell-font-color:#fff8;--outer-border-color-active:#4caf50aa;--cell-border-color-active:#29b6f666;--outer-font-color-active:#fff;--cell-font-color-active:#fff;--active-color:#001651aa;--active-color-hover:#1150fb;--active-other-color:#cdcdcd44;--active-board-size:1.25;--board-complete-color:#00165166;--on-accent-color:#fff;--accent-secondary:#b5b5b5;--previous-move-color:#ff1744;--site-background:#000;--sharer-background:#2d2d2d;--button-size:15rem;--button-color-1:#2962ff;--button-color-1-hover:#2962ff;--online-color:#64dd17;--offline-color:#d50000;--font-family:"Jura",sans-serif}*{font-family:var(--font-family)}html,body{font-family:var(--font-family);background:var(--site-background);color:var(--on-accent-color)}button,a{font-family:var(--font-family);cursor:pointer}.home-container{grid-template-rows:auto 1fr;align-items:flex-start;min-height:100vh;display:grid}.home-container header{color:var(--on-accent-color);text-align:center;-webkit-user-select:none;user-select:none;justify-content:flex-start;display:grid}.home-container main{text-align:center;justify-content:center;align-items:center;height:100%;display:grid}.home-buttons{grid-gap:3rem;display:grid}.home-container header{padding:2rem 1.5rem}.home-container header h1 a{color:var(--on-accent-color);justify-content:center;align-items:center;font-size:1.5rem;text-decoration:none;display:flex}.home-action{justify-content:center;align-items:center;display:grid}.room-container{-webkit-user-select:none;user-select:none;grid-template-rows:auto 1fr;align-items:center;min-height:100vh;display:grid}:root .room-container{min-height:-webkit-fill-available}_::-webkit-full-page-media{min-height:-webkit-fill-available}_:future{min-height:-webkit-fill-available}.room-header{color:var(--on-accent-color);grid-template-areas:"room-header-title room-header-status-bar room-header-toolbar";width:100%;display:grid}@media (max-width:720px){.room-header{grid-template-areas:"room-header-title room-header-toolbar""room-header-status-bar room-header-status-bar"}}.room-header-title{color:var(--on-accent-color);grid-area:room-header-title;padding:2rem 1.5rem;font-size:1.5rem}.room-header h1 a{color:var(--on-accent-color);text-decoration:none}.room-header-toolbar{grid-area:room-header-toolbar;justify-content:flex-end;align-items:flex-start;padding:1.5rem .75rem;display:grid}.room-header ul{grid-gap:1rem;grid-auto-flow:column dense;display:grid}.room-header .room-player-name{border-bottom:4px solid;border-radius:2px;justify-content:center;align-items:center;width:2rem;font-size:2rem;display:flex;position:relative}.room-player-current:after{content:"(YOU)";font-size:.75rem;position:absolute;top:-.75rem;left:2px}.room-player-name.room-player-online{border-color:var(--online-color)}.room-player-name.room-player-offline{border-color:var(--offline-color)}.room-header li.room-head-icon{border:solid 1px var(--on-accent-color);border-radius:2rem;padding:.25rem;font-size:2.125rem}.room-header-status-bar{text-align:center;color:var(--on-accent-color);grid-area:room-header-status-bar;justify-content:center;align-items:center;padding:1rem;font-size:1rem;display:flex}@media (max-width:720px){.room-header-status-bar{height:4rem}}.room-main{justify-content:center;align-items:center;padding:1rem;display:grid}.room-reset{justify-content:center;align-items:center;display:grid}.sharer{color:var(--on-accent-color);background:var(--sharer-background);border-top:solid 1px var(--active-color);grid-gap:1rem;-webkit-user-select:none;user-select:none;grid-template-columns:1fr auto auto;justify-content:flex-start;align-items:center;width:100%;padding:1rem 1rem 3rem;display:grid;position:fixed;bottom:0}.sharer-button{background:var(--button-color-1);line-height:inherit;color:var(--on-accent-color);border:none;border-radius:.2rem;align-items:center;padding:.25rem .8rem;font-size:1rem;text-decoration:none;display:flex}.sharer-button>svg{font-size:inherit;margin-left:4px}.sharer-button:active{color:var(--on-accent-color)}.login-form{grid-gap:1rem;border:solid 1px var(--accent-color);border-radius:.5rem;justify-content:center;align-items:center;padding:1rem;display:grid}.login-form>div{justify-content:center;align-items:center;display:grid}.login-error{color:var(--previous-move-color);background:var(--accent-color);border:solid 1px var(--offline-color);border-radius:.5rem;padding:.5rem;font-weight:700}.login-message{color:var(--on-accent-color);background:var(--accent-color);border:solid 1px var(--online-color);border-radius:.5rem;padding:.5rem;font-weight:700}.login-buttons-container{grid-gap:1rem;justify-content:center;align-items:center;display:grid}.primary-input{width:var(--button-size);border:solid 1px var(--on-accent-color);background:var(--accent-color);color:var(--on-accent-color);-webkit-user-select:none;user-select:none;will-change:transform;border-radius:2rem;padding:1rem;font-size:1rem;text-decoration:none;transition:transform .2s;display:block}.primary-button,.primary-link-button{background:var(--button-color-1);width:var(--button-size);color:var(--on-accent-color);-webkit-user-select:none;user-select:none;will-change:transform;border:0;border-radius:2rem;padding:1rem;font-size:1rem;text-decoration:none;transition:transform .2s;display:block}@media (hover:hover){.primary-button:hover,.primary-link-button:hover{background:var(--button-color-1-hover);transform:scale(1.03);box-shadow:0 0 2px 1px #fff}}.primary-button:disabled{background:var(--accent-secondary)}.practice-reset-button{background:var(--button-color-1);line-height:inherit;color:var(--on-accent-color);border:none;border-radius:.2rem;align-items:center;padding:.25rem .8rem;font-size:1rem;text-decoration:none;display:flex}.main{justify-content:center;align-items:center;display:grid}.header{text-align:center}.board{min-width:calc(9*var(--cell-size) + 6*var(--outer-cell-gap));min-height:calc(9*var(--cell-size) + 6*var(--outer-cell-gap));opacity:.8;grid-template-columns:auto auto auto;transition:opacity 1s ease-out;display:grid;position:relative}.board.board-my-turn{opacity:1;--outer-border-color:var(--outer-border-color-active);--outer-font-color:var(--outer-font-color-active);--cell-font-color:var(--cell-font-color-active);--cell-border-color:var(--cell-border-color-active)}.board-complete{--width:calc(9*var(--cell-size) + 6*var(--outer-cell-gap));margin-left:calc(-1*var(--width)/2);min-width:var(--width);min-height:var(--width);text-align:center;background:var(--board-complete-color);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:solid 5px var(--outer-border-color);font-size:calc((9*var(--cell-size) + 6*var(--outer-cell-gap))/5);color:var(--previous-move-color);flex-direction:column;place-content:center;display:flex;position:absolute;left:50%}.board-complete strong{font-size:larger;font-weight:700}.board-draw{font-size:calc((9*var(--cell-size) + 6*var(--outer-cell-gap))/5)}.outer-board{padding:var(--outer-cell-gap);min-width:calc(3*var(--cell-size) + 2*var(--outer-cell-gap));min-height:calc(3*var(--cell-size) + 2*var(--outer-cell-gap));color:var(--outer-font-color);display:grid}.outer-board:nth-child(3n+1),.outer-board:nth-child(3n+2){border-right:var(--outer-border-size)solid var(--outer-border-color)}.outer-board:not(:nth-child(n+7)){border-bottom:var(--outer-border-size)solid var(--outer-border-color)}.outer-play-board{will-change:transform;grid-template-columns:1fr 1fr 1fr;transition:transform .25s;transform:scale(1)}.outer-play-board.outer-active-cur{background:var(--active-color);transform:scale(var(--active-board-size));z-index:99999999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);--inner-white:var(--active-color-hover);--left-magenta:var(--active-color-hover);--right-cyan:var(--active-color-hover);box-shadow:inset 0 0 2px var(--inner-white),inset 1px 0 4px var(--left-magenta),inset -1px 0 4px var(--right-cyan),inset 1px 0 15px var(--left-magenta),inset -1px 0 15px var(--right-cyan),0 0 2px var(--inner-white),0 0 4px var(--left-magenta),0 0 4px var(--right-cyan)}.outer-play-board.outer-active-cur:first-child{transform-origin:0 0}.outer-play-board.outer-active-cur:nth-child(2){transform-origin:top}.outer-play-board.outer-active-cur:nth-child(3){transform-origin:100% 0}.outer-play-board.outer-active-cur:nth-child(4){transform-origin:0}.outer-play-board.outer-active-cur:nth-child(5){transform-origin:50%}.outer-play-board.outer-active-cur:nth-child(6){transform-origin:100%}.outer-play-board.outer-active-cur:nth-child(7){transform-origin:0 100%}.outer-play-board.outer-active-cur:nth-child(8){transform-origin:bottom}.outer-play-board.outer-active-cur:nth-child(9){transform-origin:100% 100%}.outer-play-board.outer-active-all{background:var(--active-color);--inner-white:var(--accent-secondary);--left-magenta:var(--active-color-hover);--right-cyan:var(--active-color-hover);box-shadow:inset 0 0 2px var(--inner-white),inset 1px 0 4px var(--left-magenta),inset -1px 0 4px var(--right-cyan),inset 1px 0 15px var(--left-magenta),inset -1px 0 15px var(--right-cyan),0 0 2px var(--inner-white),0 0 4px var(--left-magenta),0 0 4px var(--right-cyan)}.outer-play-board.outer-active-other{background:var(--active-other-color)}.outer-won-board{--width:calc(3*var(--cell-size) + 2*var(--outer-cell-gap));min-width:var(--width);min-height:var(--width);text-align:center;text-align:center;background:var(--board-complete-color);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:calc(var(--cell-size)*2.5);flex-direction:column;place-content:center;display:flex;position:absolute}.cell{width:var(--cell-size);height:var(--cell-size);cursor:default;text-align:center;font-size:calc(var(--cell-size));color:var(--cell-font-color);position:relative}.cell:nth-child(3n+1),.cell:nth-child(3n+2){border-right:var(--cell-border-size)solid var(--cell-border-color)}.cell:not(:nth-child(n+7)){border-bottom:var(--cell-border-size)solid var(--cell-border-color)}.cell-empty{color:#0000}.cell-prev,.outer-prev{color:var(--previous-move-color)}@media (hover:hover){.outer-play-board.outer-active-cur .cell.cell-empty:hover,.outer-play-board.outer-active-all .cell.cell-empty:hover{background-color:var(--active-color-hover)}.outer-board.outer-active .cell.cell-empty:hover{background-color:var(--on-accent-color)}}.board-controls{margin:2rem auto}.board-controls-row{grid-gap:2rem;grid-template-columns:1fr 2fr;margin:1rem;display:grid}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:15rem}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background-color:#053a5f;border-radius:.5rem;height:.5rem}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--active-color-hover);width:1rem;height:2rem;margin-top:-12px}input[type=range]:focus::-webkit-slider-thumb{border:1px solid var(--active-color);outline:3px solid var(--active-color);outline-offset:.125rem}input[type=range]::-moz-range-track{background-color:var(--active-color);border-radius:.5rem;height:.5rem}input[type=range]::-moz-range-thumb{background-color:var(--active-color-hover);border:none;border-radius:0;width:1rem;height:2rem}input[type=range]:focus::-moz-range-thumb{border:1px solid var(--active-color);outline:3px solid var(--active-color);outline-offset:.125rem}