body{font-family:'Ubuntu', sans-serif;background-color:#ccc}form.new_dots_game{height:100%;display:flex;flex-flow:column;justify-content:center;width:480px;margin:40px auto;background-color:rgba(0,0,0,0.5);font-size:16pt;padding:20px 0}form.new_dots_game .title{font-size:36pt;margin-bottom:50px;width:100%;text-align:center}form.new_dots_game .form-group{margin:20px 10px 0px 10px;height:50px;flex-flow:row;display:flex}form.new_dots_game .form-group label,form.new_dots_game .form-group input,form.new_dots_game .form-group select{font-size:14pt;width:100%;margin:5px 10px;padding:0px 10px 0px 15px;line-height:32px;border:4px solid rgba(255,255,255,0);background-color:rgba(255,255,255,0.3);min-width:20px}form.new_dots_game .form-group label:first-child,form.new_dots_game .form-group input:first-child,form.new_dots_game .form-group select:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}form.new_dots_game .form-group label:not(:first-child),form.new_dots_game .form-group input:not(:first-child),form.new_dots_game .form-group select:not(:first-child){margin-left:-14px}form.new_dots_game .form-group label:not(:first-child){padding-left:20px}form.new_dots_game .form-group input,form.new_dots_game .form-group select{border:4px solid rgba(255,255,255,0.5);background-color:rgba(255,255,255,0.5);border-radius:8px}form.new_dots_game .form-group input[type="submit"]{background-color:rgba(180,255,180,0.5);cursor:pointer}form.new_dots_game .form-group input[type="submit"]:hover{background-color:rgba(180,255,180,0.7)}@keyframes flickerLight{0%{opacity:0.95}50%{opacity:0.95}51%{opacity:0.20}52%{opacity:0.80}53%{opacity:0.40}54%{opacity:1.00}55%{opacity:0.95}100%{opacity:0.95}}.scoreboard{margin:10px auto 0 auto;background-color:#00713c;max-width:900px;border:3px solid white;border-radius:5px;display:grid;grid-template-areas:"player1  player2" "progress progress";grid-template-columns:50% 50%}@font-face{font-family:"seg7";src:url(/assets/7seg-8aa1ad360d752f9bf767816e43b72940435d72e9fc0361d65582f6effae9619d.woff2) format("woff2"),url(/assets/7seg-7a5ef8a521e2b82c910f943964437fc6fcbe85e37c7567aa8e73e749fe6d8ed7.woff) format("woff")}.scoreboard .score-led{grid-area:score;display:flex;justify-content:center;align-items:center;background-color:black;border-radius:5px;margin:20px 10px 0px;padding:5px 0px;font-family:"seg7";font-size:64px;color:white}.scoreboard .score-led .score{left:0;width:2ch;text-align:right;position:relative}.scoreboard .score-led .score::before{left:0;content:'88';position:absolute;color:rgba(255,255,255,0.13)}.scoreboard .player1{grid-area:player1;grid-template-areas:"turn-indicator pname score" "turn-indicator logo  score";grid-template-columns:35px 1fr 1fr}.scoreboard .player2{grid-area:player2;grid-template-areas:"score pname turn-indicator" "score logo  turn-indicator";grid-template-columns:1fr 1fr 35px}.scoreboard .player2 .turn-indicator{transform:rotate(180deg)}.scoreboard .player1,.scoreboard .player2{display:grid}.scoreboard .turn-indicator{grid-area:turn-indicator;display:flex;justify-content:flex-end;align-items:center}.scoreboard .turn-indicator svg{height:50px}.scoreboard .turn-indicator g.lights{opacity:0}.scoreboard .turn-indicator.on g.lights{opacity:0.95}.scoreboard .logo{grid-area:logo;color:white;text-shadow:-2px -2px 1px rgba(0,0,0,0.7),2px 2px 1px rgba(0,0,0,0.7),-2px 2px 1px rgba(0,0,0,0.7),2px -2px 1px rgba(0,0,0,0.7);font-size:350%;display:flex;justify-content:center;align-items:center}.scoreboard .name{grid-area:pname;color:white;font-size:160%;text-align:center;margin:5px 5px 0px 5px;text-shadow:0px 0px 2px rgba(0,0,0,0.6);white-space:nowrap;overflow:hidden}.scoreboard .progress{grid-area:progress;position:relative}.scoreboard .progress .light-track{display:flex;flex-flow:row nowrap;justify-content:space-around;background-color:#000;border-radius:10px;margin:10px;padding:10px 5px}.scoreboard .progress .light-track .scoreboard-light{height:40px;opacity:0.2}.scoreboard .progress .light-track .scoreboard-light svg{height:100%}.scoreboard .progress .light-track .scoreboard-light.on{opacity:0.95}.scoreboard .progress .light-track .scoreboard-light.on.flicker{animation:flickerLight 5s 1}.scoreboard .progress .menu-overlay{position:absolute;top:0;z-index:2;height:70px;padding-top:10px;width:100%;opacity:0;transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-webkit-transition:opacity .25s ease-in-out}.scoreboard .progress .menu-overlay:hover,.scoreboard .progress .menu-overlay.on{opacity:0.80}.scoreboard .progress .menu-overlay .menu-items{display:flex;flex-flow:row nowrap;justify-content:space-evenly;height:40px;margin:0 10px 10px 10px;padding:10px 10px;background-color:#000;border-radius:10px}.scoreboard .progress .menu-overlay .menu-items .exit-link,.scoreboard .progress .menu-overlay .menu-items .player-choice{font-size:20px;color:white;padding:7px 20px;border-radius:5px;vertical-align:middle;text-decoration:none}.scoreboard .progress .menu-overlay .menu-items .exit-link{cursor:pointer;background-color:#600}.scoreboard .progress .menu-overlay .menu-items .name-box{flex-grow:1;margin-right:10px}.scoreboard .progress .menu-overlay .menu-items .name-box .name-input{font-size:30px;width:95%;border:0;border-radius:5px;background-color:#222;padding:3px 2.5%;color:#DDF}.scoreboard .progress .menu-overlay .menu-items .player-choice{display:flex;flex-flow:row nowrap;background-color:#222;margin-right:10px}.scoreboard .progress .menu-overlay .menu-items .player-choice .choice-label{padding-right:10px}.scoreboard .progress .menu-overlay .menu-items .player-choice .player-1-link,.scoreboard .progress .menu-overlay .menu-items .player-choice .player-2-link,.scoreboard .progress .menu-overlay .menu-items .player-choice .spectate-link{padding:0 7px 0 7px;background-color:#000;border-top:2px solid white;border-bottom:2px solid white;height:1.2em;cursor:pointer;margin-top:-1px}.scoreboard .progress .menu-overlay .menu-items .player-choice .player-1-link:hover,.scoreboard .progress .menu-overlay .menu-items .player-choice .player-2-link:hover,.scoreboard .progress .menu-overlay .menu-items .player-choice .spectate-link:hover{background-color:#00d}.scoreboard .progress .menu-overlay .menu-items .player-choice .player-1-link{border-left:2px solid white;border-top-left-radius:5px;border-bottom-left-radius:5px}.scoreboard .progress .menu-overlay .menu-items .player-choice .spectate-link{border-right:2px solid white;border-top-right-radius:5px;border-bottom-right-radius:5px}.scoreboard .progress .menu-overlay .menu-items .player-choice .active{background-color:#00a}body.play{background-color:#222}.game-container{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column}.game-container .board-container{background-color:#000;max-width:900px;width:100%;margin:0 auto 0 auto;overflow:auto;flex-grow:1}.game-container .board{display:grid;margin:0 auto;padding:40px 0 40px 0}.game-container .board .dot{width:20px;height:20px;margin:-4px;z-index:2;border:4px solid #f00;border-radius:14px;background-color:#400}.game-container .board .vline,.game-container .board .hline{background-color:#505050}.game-container .board .vline{width:16px;height:100%;border-left:2px solid #666666;border-right:2px solid #383838}.game-container .board .hline{height:16px;width:100%;border-top:2px solid #666666;border-bottom:2px solid #383838}.game-container .board .hline:hover,.game-container .board .vline:hover{cursor:pointer;background-color:#222;border-color:#666666}.game-container .board .hline.disabled,.game-container .board .hline.disabled:hover,.game-container .board .vline.disabled,.game-container .board .vline.disabled:hover{background-color:#060606;border-color:#262626;cursor:inherit}.game-container .board .hline.drawn,.game-container .board .hline.drawn:hover,.game-container .board .vline.drawn,.game-container .board .vline.drawn:hover{background-color:#fff;border-color:#fff;cursor:inherit}.game-container .board .tile{background:#000}.game-container .board .tile.player1,.game-container .board .tile.player2{color:white;text-shadow:-2px -2px 1px rgba(0,0,0,0.7),2px 2px 1px rgba(0,0,0,0.7),-2px 2px 1px rgba(0,0,0,0.7),2px -2px 1px rgba(0,0,0,0.7);font-size:335%;display:flex;justify-content:center}.game-container .board .tile.player1{background:#336666}.game-container .board .tile.player1::after{content:'1'}.game-container .board .tile.player2{background:#663333}.game-container .board .tile.player2::after{content:'2'}.game-container .notifications{height:0;z-index:4;max-width:900px;margin:4px auto -4px auto}.game-container .notifications .notification{color:#f00;text-align:center;line-height:1.5em;background:rgba(0,0,0,0.85);padding:2px 10px;opacity:0}.game-container .notifications .notification.in{opacity:1}.page-overlay{background:rgba(255,255,255,0.4);position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;display:none}.page-overlay.in{display:flex}.page-overlay .overlay-modal{margin:15vh auto auto auto;padding:30px;background:#000;border-radius:10px;color:#FFF}.page-overlay .overlay-modal .title{font-size:150%;margin-bottom:30px}.page-overlay .overlay-modal .actions{display:flex;flex-direction:row;justify-content:space-around}.page-overlay .overlay-modal .actions .exit-link,.page-overlay .overlay-modal .actions .restart-link{width:75px;padding:7px 10px;text-align:center;border-radius:5px;vertical-align:middle;color:#fff;text-decoration:none}.page-overlay .overlay-modal .actions .exit-link{background-color:#336}.page-overlay .overlay-modal .actions .restart-link{margin-left:10px;background-color:#633}