*{box-sizing:border-box}a{cursor:pointer;color:#04f;text-decoration:none}a:visited{color:#04f}html,body{display:grid;justify-content:center;align-content:center;text-align:center;margin:0;padding:0;min-height:100%;-webkit-user-select:none;user-select:none;color-scheme:dark;font-family:system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:12pt;line-height:1;color:#ccc;background-color:#000}h1,h2{font-size:120%;font-weight:400;color:#fff;margin:.5em}p{margin:.5em}button,input{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:100%;background-color:transparent;color:#fff;border:1px solid #444;border-radius:.5em;padding:.5em 1em;margin:.5em}button:hover:enabled,input:hover:enabled{background-color:#444}button{height:3em;cursor:pointer}button.icon{width:3em}button:disabled{color:#444;border-color:#222;cursor:default}button.selected{background-color:#444;border-color:#fff}input{padding:.5em}button,input,select,a{transition:background-color .12s ease-out,border-color .12s ease-out,color .12s ease-out,opacity .15s ease-out,visibility .15s,transform .1s ease-out}button:enabled:active{transform:scale(.96)}select{font-size:100%;color:#fff;background-color:transparent;border:1px solid #444;border-radius:.5em;margin:1em;padding:1em;cursor:pointer}select:hover{background-color:#444}select option{color:#ccc;background-color:#000}.top{width:min(100vw,75vh);max-width:120mm}header{display:flex;flex-flow:row nowrap;align-items:center;gap:.25em;background-color:#191919;height:14mm;border-radius:.5em .5em 0 0;padding:.5em}header h1{font-size:120%;margin:0;padding:0;flex-grow:1;text-transform:uppercase}header button{margin:0}header select{font-size:10pt;margin:0;padding:.5em}menu{background-color:#000;display:flex;flex-direction:column;align-items:stretch;list-style:none;margin:0;padding:.5em}menu li{display:flex;flex-direction:column}menu li.row{flex-direction:row;justify-content:center;gap:.5em}menu li.row button{flex:1}menu li.dots{color:#444;text-align:center;margin:.25em 0}menu li button,menu li input{margin:.25em 0}.friends{background-color:#000;padding:.5em}.friends input{width:100%}.joinForm{display:flex;flex-direction:row;align-items:center;gap:.5em}.joinForm input{flex-grow:1;margin:0}.joinForm button{margin:0}.footerLinks{display:flex;flex-flow:row wrap;justify-content:center;gap:1em;padding:.5em;margin-top:.5em}.footerLinks a{display:flex;align-items:center;gap:.5em;color:#ccc;padding:.5em}.footerLinks a:hover{color:#fff}.titleBar{display:flex;flex-direction:row;align-items:baseline;background-color:#000;padding:.5em}.titleBar h1{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:0}.titleBar .peers{flex:1;text-align:left;margin-left:.5em;font-size:90%}.titleBar .peers .peer:before{content:", "}.titleBar .peers .peer:first-child:before{content:""}.titleBar .peers .alone{color:red}.titleBar .voiceChat{display:flex;align-items:center;gap:.25em;margin-right:.5em}.titleBar .voiceChat button.icon{width:2.5em;height:2.5em;padding:0;margin:0;border-radius:50%}.titleBar .voiceChat button.icon.hangup{color:red;border-color:red}.titleBar .voiceChat button.icon.hangup:hover:enabled{background-color:maroon}.titleBar .voiceChat button.icon.muted{color:red;border-color:red}.titleBar .voiceChat .voiceStatus{font-size:80%;color:#ccc}.nicknamePrompt{display:flex;gap:.5em;padding:.5em}.nicknamePrompt input{flex:1;margin:0}.nicknamePrompt button{margin:0}.status{color:#444;margin:0}.status.playing{color:#fff}.status.win{font-weight:700;animation:statusPop .25s ease-out}.status.win.A{color:#04f}.status.win.B{color:red}@keyframes statusPop{0%{transform:scale(.85);opacity:0}}.game{width:100%}.game .labeledButtons{margin-top:.5em}.game .moveHistory{columns:4;column-fill:auto;column-gap:0;list-style:none;margin:.5em 0;padding-inline-start:0;height:9em;overflow-x:auto;border:1px solid #444}.game .moveHistory::-webkit-scrollbar{height:.5em}.game .moveHistory::-webkit-scrollbar-track{background:#000}.game .moveHistory::-webkit-scrollbar-thumb{background:#444}.game .moveHistory li{cursor:pointer;text-align:left;color:#04f;animation:fadeIn .15s ease-out;transition:opacity .1s ease-out}.game .moveHistory li:nth-child(2n){color:red}.game .moveHistory li.selected{text-decoration:underline}.game .moveHistory li.forced{color:#fff;background:#04f}.game .moveHistory li.forced:nth-child(2n){background:#f00}.game .moveHistory li:hover{opacity:.7}.help{padding:.75em}.help .intro{color:#fff;margin:.25em 0 .75em}.help .rule{background-color:#0a0a0a;border:1px solid #242424;border-radius:.75em;padding:.75em;margin-bottom:.75em;animation:ruleIn .3s ease-out backwards}.help .rule:nth-of-type(2){animation-delay:80ms}.help .rule:nth-of-type(3){animation-delay:.16s}.help .rule h2{display:flex;align-items:center;justify-content:center;gap:.5em;margin:0 0 .3em}.help .rule .ruleNum{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;font-size:75%;border:1px solid #888;border-radius:50%;color:#ccc}.help .rule p{margin:0 0 .5em}.help .demoWrap{display:flex;flex-direction:column;align-items:center}.help .board.demo,.help .demoControls{width:62%;max-width:75mm}.help .playCta{width:100%;margin:.25em 0;font-size:110%;border-color:#888}.help .credits{color:#888;font-size:85%;margin:.75em 0 0}@keyframes ruleIn{0%{opacity:0;transform:translateY(.5em)}}.demoControls{display:flex;align-items:center;gap:.5em;margin-top:.25em}.demoControls .demoProgress{flex:1;height:.25em;border-radius:.125em;background-color:#444;overflow:hidden}.demoControls .demoProgressFill{height:100%;background-color:#888;transition-property:width;transition-timing-function:linear}.demoControls button.demoRestart{width:2.2em;height:2.2em;padding:0;margin:0;font-size:80%;border-radius:50%}.board.demo .demoPiece{transition:transform .5s cubic-bezier(.3,.7,.4,1)}.board.demo circle.piece.pop{animation:piecePop .4s cubic-bezier(.34,1.56,.64,1) backwards}.board.demo .demoPieces{transition:opacity .5s ease-out}.board.demo .demoPieces.clearing{opacity:0}.board.demo .demoTarget{transform-box:fill-box;transform-origin:center;animation:targetPulse 1s ease-in-out infinite}.board.demo .demoTarget.A{fill:#00258c}.board.demo .demoTarget.B{fill:#8c0000}@keyframes piecePop{0%{transform:scale(0)}}@keyframes winPulse{50%{transform:scale(1.18)}}@keyframes targetPulse{50%{transform:scale(1.4)}}@keyframes winDraw{to{stroke-dashoffset:0}}@keyframes crownIn{0%{transform:scale(.6);opacity:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.board .winShape{stroke-dashoffset:0!important}}.board.full{touch-action:none;width:min(100vw,75vh);max-width:120mm}.board.half{width:50%;max-width:60mm}.board line.bg{stroke-width:.03;stroke:#444;stroke-dasharray:.03}.board circle.bg{fill:#444}.board circle.bg.release.A{fill:#04f}.board circle.bg.release.B{fill:red}.board circle.last.A{fill:#0033bf}.board circle.last.B{fill:#bf0000}.board circle.selected{fill:#888}.board circle.target.A{fill:#002280}.board circle.target.B{fill:maroon}.board line.last{stroke-width:.05}.board line.last.A{stroke:#0033bf}.board line.last.B{stroke:#bf0000}.board .pieceG{transition:transform .22s cubic-bezier(.3,.7,.4,1)}.board .pieceG.dragging,.board .pieceG.dummy{transition:none}.board .piece.A{fill:#04f}.board .piece.B{fill:red}.board .piece.dummy{pointer-events:none}.board circle.piece{transform-box:fill-box;transform-origin:center}.board circle.piece:not(.dummy){animation:piecePop .3s cubic-bezier(.34,1.56,.64,1) backwards}.board circle.piece.winner{animation:winPulse .8s ease-in-out infinite}.board g.winning circle.piece:not(.winner){opacity:.4;transition:opacity .4s}.board circle.selected,.board circle.target{transform-box:fill-box;transform-origin:center;animation:crownIn .16s ease-out}.board .winShape{fill:none;stroke-width:.12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:winDraw .7s .15s ease-out forwards;pointer-events:none}.board .winShape.A{stroke:#04fc}.board .winShape.B{stroke:#f00c}.board line.arrow{stroke-width:.1;stroke-linecap:round}.board line.arrow.A{stroke:#002280}.board line.arrow.B{stroke:maroon}.board #arrowheadA{fill:#002280}.board #arrowheadB{fill:maroon}.board .analysisScore{font-size:.25px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}.labeledButtons{display:flex;flex-flow:row wrap;justify-content:center;gap:.5em;padding:.5em}.labeledButtons button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5em;flex:1;min-width:0;height:auto;padding:.75em 1em;margin:0;white-space:nowrap}.labeledButtons button.used{color:#fc0;border-color:#fc0}.labeledButtons button.used:hover:enabled{background-color:#ffcc0040}.labeledButtons button.used.selected{background-color:#ffcc0040;border-color:#fc0}.invisible{visibility:hidden;opacity:0}header,menu,.friends,.help,.gameSection,.botControls,.matchingOverlay{animation:sectionIn .18s ease-out}menu li{animation:sectionIn .2s ease-out backwards}menu li:nth-child(2){animation-delay:25ms}menu li:nth-child(3){animation-delay:50ms}menu li:nth-child(4){animation-delay:75ms}menu li:nth-child(5){animation-delay:.1s}menu li:nth-child(6){animation-delay:125ms}menu li:nth-child(7){animation-delay:.15s}@keyframes sectionIn{0%{opacity:0;transform:translateY(.4em)}}@keyframes fadeIn{0%{opacity:0}}.botControls,.matchingOverlay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em;margin-top:1em}.botControls select,.matchingOverlay select{height:3em;margin:0;padding:0 1em}.delayInput label{display:flex;align-items:center;gap:.5em;color:#ccc}.delayInput input[type=number]{width:5em;height:3em;text-align:right}.botGroup{display:flex;align-items:center;gap:.25em}.botGroup button,.botGroup select{margin:0}.botGroup.blue button,.botGroup.blue select{color:#04f;border-color:#04f}.botGroup.blue button:hover:enabled,.botGroup.blue button.selected,.botGroup.blue select:hover{background-color:#002280}.botGroup.red button,.botGroup.red select{color:red;border-color:red}.botGroup.red button:hover:enabled,.botGroup.red button.selected,.botGroup.red select:hover{background-color:maroon}.startChoice{display:flex;gap:.5em}.offlineNotice{color:#444;font-style:italic;padding:.5em}.dbProgress{flex-basis:100%}