html {background-color:#222;font-family:sans-serif;font-size:62.5%;}
body {color:#fff;font-size:1.6rem;text-align:center;}

a {color:#fff;}
p {margin:0;}

h1 {line-height:4rem;}
h2 {margin:0;}
h3 {color:#555;font-size:1.3rem;margin:1.75rem 7.5rem 1rem;text-transform:uppercase;}

/* score */

#score {background:transparent linear-gradient(rgba(32,32,32,1), rgba(32,32,32,1) 5rem, rgba(32,32,32,0));display:flex;pointer-events:none;position:fixed;left:0;right:0;top:0;padding:2rem 0 3rem;z-index:1;}
#score div {flex:1;font-size:2.5rem;font-weight:bold;line-height:1.5rem;margin:0 0.5rem;}
#score div:first-child:not(:last-child) {text-align:right;}
#score div:last-child:not(:first-child) {text-align:left;}

#score > div > span {margin:0 1rem;}
#score > div > :not(.score) {font-size:1.3rem;vertical-align:middle;white-space:break-spaces;}
#score div[team="1"] span:not(.score) {color:#08f;}
#score div[team="2"] span:not(.score) {color:#fa0;}
#score .score {display:inline-block;text-align:center;width:4rem;}
#score .player2 {opacity:0.6;}

/* tracker layout */

#tracker {display:flex;justify-content:center;margin:4.5rem 0 0.5rem;}
#tracker.sview {display:none;}
#tracker > div {font-size:1.5rem;margin:0 2rem;width:39rem;}
#tracker.view > div {width:44.5rem;}
#tracker > div:first-child {text-align:right;}
#tracker > div:first-child > div {justify-content:end;padding-left:2rem;}
#tracker > div:last-child {text-align:left;}
#tracker > div:last-child > div {justify-content:start;padding-right:2rem;}
#tracker > div > div > div {display:flex;align-items:center;}

/* goals */

.goal {cursor:default;font-size:0.95em;height:5.75rem;margin-bottom:0.625rem;position:relative;}
.goal:not(.goal-select):hover {background-color:#2e2e2e;border-radius:3.25rem;}
#tracker:not(.view) .goal:not(.goal-select):hover {cursor:pointer;}

.goal p {flex:1;}
.goal > div {margin:0 1rem;position:relative;width:5.5rem;height:3.5rem;}

.goal > div:before, .goal > div:after {background-color:#222;border:4px solid #fff;border-radius:1.75rem;box-sizing:border-box;content:'';display:block;position:absolute;width:3.5rem;height:3.5rem;}
.goal:hover > div:before, .goal:hover > div:after {background-color:#2e2e2e;}
.goal > div:before {opacity:0.45;}
.goal-team > div:before, .goal-team > div:after {width:1.75rem;}

.goal-cmlt > div.track:before, .goal-cmlt > div.track:after, 
.goal-cmlt > div.team1:before, .goal-cmlt > div.team1:after,
.goal-team > div.team1:before, .goal-team > div.team1:after,
.goal-race > div.team1:before, .goal-race > div.team1:after {border-color:#08f;}
.goal-team > div.track:before, .goal-team > div.track:after,
.goal-team > div.team2:before, .goal-team > div.team2:after,
.goal-cmlt > div.team2:before, .goal-cmlt > div.team2:after,
.goal-race > div.team2:before, .goal-race > div.team2:after {border-color:#fa0;}
.goal-race > div.track:before, .goal-race > div.track:after {border-color:#4b2;}
.goal-race > div.track:before,
.goal-race > div.team1:before,
.goal-race > div.team2:before {display:none;}

.goal-cmlt.active1 > div.track:after, .goal-cmlt.active2 > div.track:before,
.goal-cmlt.active1 > div.team1:after, .goal-cmlt.active2 > div.team1:before,
.goal-team.active1 > div.team1:after, .goal-team.active2 > div.team1:before,
.goal-race.active1 > div.team1:after, .goal-race.active2 > div.team1:after {background-color:#08f;}
.goal-team.active1 > div.track:after, .goal-team.active2 > div.track:before,
.goal-team.active3 > div.team2:after, .goal-team.active4 > div.team2:before,
.goal-cmlt.active3 > div.team2:after, .goal-cmlt.active4 > div.team2:before,
.goal-race.active3 > div.team2:after, .goal-race.active4 > div.team2:after {background-color:#fa0;border:4px solid #fa0 !important;}
.goal-race.active1 > div.track:after {background-color:#4b2;}
.goal-race.active2 > div.track:after {background-color:#070;}

.goal-race.active3 > div.track:after, .goal-race.active4 > div.track:after,
.goal-race.active3 > div.team1:after, .goal-race.active4 > div.team1:after,
.goal-race.active1 > div.team2:after, .goal-race.active2 > div.team2:after,
.goal-race.active3 > div.track:before, .goal-race.active4 > div.track:before,
.goal-race.active3 > div.team1:before, .goal-race.active4 > div.team1:before,
.goal-race.active1 > div.team2:before, .goal-race.active2 > div.team2:before {border-width:3px;height:0;opacity:1;top:1.5rem;transform:rotate(45deg);}
.goal-race.active3 > div.track:before, .goal-race.active4 > div.track:before,
.goal-race.active3 > div.team1:before, .goal-race.active4 > div.team1:before,
.goal-race.active1 > div.team2:before, .goal-race.active2 > div.team2:before {display:block;transform:rotate(135deg);}
.goal-race.active3 > div.track, .goal-race.active4 > div.track,
.goal-race.active3 > div.team1, .goal-race.active4 > div.team1,
.goal-race.active1 > div.team2, .goal-race.active2 > div.team2 {opacity:0.45;}

.goal p, .goal div.track {transition:opacity 0.1s;}
.goal.hidden p, .goal.hidden div.track {opacity:0.15;}

.goal[data-mark]:after {background-color:#222;border-radius:0.5rem;content:attr(data-mark);font-size:0.9em;line-height:3rem;opacity:0.25;padding:0 1rem;pointer-events:none;position:absolute;right:-5.5rem;text-align:center;width:4rem;z-index:1;}

#tracker > div:last-child .goal > p {order:3;}
#tracker > div:last-child .goal > .team1 {order:2;}

#tracker > div:first-child .goal > div:before, #tracker > div:last-child .goal > div:after {right:0;}
#tracker > div:last-child .goal > div:before, #tracker > div:first-child .goal > div:after {left:0;}

#tracker > div:first-child .goal-team > div:before, #tracker > div:last-child .goal-team > div:after {right:1rem;}
#tracker > div:last-child .goal-team > div:before, #tracker > div:first-child .goal-team > div:after {left:1rem;}
#tracker > div:first-child .goal-race > div:before, #tracker > div:first-child .goal-race > div:after,
#tracker > div:last-child .goal-race > div:before, #tracker > div:last-child .goal-race > div:after {left:1rem;}

#tracker > div:first-child .goal-team > div:after, #tracker > div:last-child .goal-team > div:before {border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;}
#tracker > div:first-child .goal-team > div:before, #tracker > div:last-child .goal-team > div:after {border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;}

.goal > span,
.goal > a {background-color:#fff;border-radius:100%;color:#000;display:none;font-weight:bold;position:absolute;top:1.5rem;text-align:center;width:3rem;line-height:3rem;}
#tracker > div:first-child .goal span {left:-2rem;}
#tracker > div:first-child .goal a {left:-4.5rem;top:-0.5rem;}
#tracker > div:last-child .goal span {right:-2rem;}
#tracker > div:last-child .goal a {right:-4.5rem;top:-0.5rem;}
.goal a {font-size:0.75rem;text-transform:uppercase;}
.goal:hover span,
.goal:hover a {color:#000;display:block;}
.goal a:hover {background-color:#ccc;}

.goal span:hover:before {background-color:#fff;content:'';display:block;position:absolute;top:0.75rem;transform:rotate(45deg);width:1.5rem;height:1.5rem;}
#tracker > div:first-child .goal span:before {left:3.5rem;}
#tracker > div:last-child .goal span:before {right:3.5rem;}

.goal span:hover:after {background-color:#fff;color:#000;border-radius:0.5rem;content:attr(text);display:block;font-size:1.4rem;font-weight:normal;line-height:1.2em;padding:1.5rem 2rem;pointer-events:none;position:absolute;top:-1.5rem;text-align:left;white-space:break-spaces;width:31rem;z-index:1;}
#tracker > div:first-child .goal span:after {left:4rem;}
#tracker > div:last-child .goal span:after {right:4rem;}

/* mode select */

div.goal-select {padding-left:1rem;padding-right:1rem;}
div.goal-select select {padding:0.5rem;text-align:center;width:100%;}
div.goal-select select.error {border:3px solid red;}
div.goal-selectplaceholder {/*display:none !important;*/background-color:transparent !important;color:#888;text-align:right;margin-right:7.5rem;}

div[data-condition]:not(.active):not(.active1):not(.active2) {display:none;}

#tracker.view div[data-condition]:not(.active1),
#tracker.view div[data-condition]:not(.active2) {margin-left:7.5rem;}
#tracker.view div[data-condition]:not(.active1) .team1,
#tracker.view div[data-condition]:not(.active2) .team2 {display:none;}

/* IDs & Link */

#players, #sync {display:none;}

a {color:#444;display:inline-block;margin-top:2rem;text-decoration:none;}
a:hover {color:#fff;}