body{margin:0;padding:0;overflow:hidden;background:#090}#app{display:flex;flex-direction:column}#board{margin:12vh auto -42vh;max-width:fit-content;height:120vh;>:nth-child(1){z-index:3}>:nth-child(2){z-index:2}>:nth-child(3){z-index:1}}.plane{display:grid;gap:1vh;grid-template-columns:repeat(3,1fr);aspect-ratio:1;height:calc(100% / 3);margin-top:-35%;transform:scaleY(.5) rotate(45deg);position:relative}@keyframes jump{0%{transform:translate(0)}to{transform:translate(30px,30px)}}.tile{aspect-ratio:1;transition:background-color .2s linear;background:#ffffff80;&:hover{transition:background-color .2s linear;background:#ffffffe6}&.x,&.o{animation:jump .6s;animation-timing-function:linear(0,.461 2.4%,.76 4.4%,.858 5.3%,.928 6.2%,.971 7.1%,.98 7.5%,.984 8%,.981 8.4%,.969 8.9%,.92 9.9%,.839 10.9%,.731 11.9%,.468 13.8%,-.235 18.2%,-.506 20.3%,-.602 21.3%,-.667 22.2%,-.71 23.1%,-.722 23.5%,-.731 24%,-.733 24.4%,-.731 24.8%,-.725 25.2%,-.712 25.7%,-.672 26.6%,-.615 27.5%,-.436 29.5%,.057 33.9%,.252 35.9%,.336 37%,.4 38.1%,.443 39.2%,.455 39.7%,.463 40.3%,.465 40.7%,.465 41.1%,.455 41.9%,.433 42.8%,.399 43.7%,.298 45.6%,.01 49.9%,-.106 51.9%,-.156 53%,-.195 54.1%,-.221 55.2%,-.235 56.3%,-.238 57.1%,-.235 57.9%,-.225 58.8%,-.209 59.7%,-.163 61.5%,-.033 65.6%,.019 67.5%,.043 68.6%,.061 69.6%,.073 70.6%,.082 71.7%,.084 72.5%,.085 73.3%,.082 74.2%,.077 75.1%,.063 76.8%,.011 81.9%,-.002 83.7%,-.009 85.5%,-.012 87%,-.012 88.6%,-.002 95.4%,0)}&.x{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20standalone='no'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20viewBox='-50%20-50%20100%20100'%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%3e%3ctitle%3eOpenSCAD%20Model%3c/title%3e%3cpath%20d='%20M%2043.6992,30.9713%20L%2012.7279,-0%20L%2043.6992,-30.9713%20L%2030.9713,-43.6992%20L%200,-12.7279%20L%20-30.9713,-43.6992%20L%20-43.6992,-30.9713%20L%20-12.7279,-0%20L%20-43.6992,30.9713%20L%20-30.9713,43.6992%20L%200,12.7279%20L%2030.9713,43.6992%20z%20'%20fill='blue'/%3e%3c/svg%3e")}&.o{background-image:url(/tictactoe/assets/circle-Drca533W.svg)}}.roomDialog{height:100%;display:flex;flex-direction:column;justify-content:center;font-size:2rem;font-family:Arial,Helvetica,sans-serif;>*{margin-top:10px}.desc{align-self:center}.link{padding:10px;display:flex;border:2px solid black;border-radius:20px;.url{flex-grow:1;display:flex;color:gray;align-items:center;user-select:all}.button{color:#fff;padding:10px;background-color:red;border-radius:10px}.button:hover{background-color:#00f}}}#bg{display:block;position:fixed;inset:0;user-select:none;background:#0000007f;z-index:100}#bg>div{display:block;inset-inline-start:0;inset-inline-end:0;margin:auto;border-width:initial;border-style:solid;border-color:initial;border-image:initial;padding:2em;background-color:Canvas;color:CanvasText;position:fixed;overflow:auto;visibility:visible;inset-block-start:0;inset-block-end:0;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);border:0px;width:90vh;height:45vh;border-radius:3em}#scoreDisplay{display:flex;height:10vh;div{width:50%;height:100%;color:#fff;text-align:center;line-height:100%;font-size:10vh;font-family:sans-serif;transition:width .5s linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1)}:first-child{background-color:#00f}:last-child{background-color:red}.current{width:75%;+*{width:25%}}.not-current{width:25%;+*{width:75%}}}.spinnerDialog{display:flex;justify-content:center;width:100%;height:100%;overflow:hidden;>div{display:grid;height:100%;aspect-ratio:1;align-items:center}.container>div{grid-row:1;grid-column:1;height:100%;aspect-ratio:1}.wheel{clip-path:circle(50%);background:repeating-conic-gradient(red 0deg 36deg,#00f 36deg 72deg);&.red{animation:spin-red 3s ease 3s forwards}&.blue{animation:spin-blue 3s ease 3s forwards}}.pointer{clip-path:polygon(50% 25%,60% 50%,40% 50%);background:#000}.center{clip-path:circle(15%);background:#000}}@keyframes spin-blue{50%{filter:blur(20px)}to{filter:blur(0);transform:rotate(3618deg)}}@keyframes spin-red{50%{filter:blur(20px)}to{filter:blur(0);transform:rotate(3654deg)}}