/**
 * CSS for Hue Hunt
 * /start
 * Alexandre Andrieux @2015 (September) and @2016 (February)
 */

#insight.start {
  padding: 20px 10px;
  background: #222;
  flex-basis: 600px;
  margin-right: 0px;
}
#insight.start > div {
  margin-top: 20px;
}
#insight.start p.welcome {
  font-size: 1.3em;
  font-weight: bold;
  text-shadow: 0px 0px 30px;
  font-family: Poiret One;
  margin-bottom: 10px;
}
#insight.start.player-known p.welcome {
  display: none;
}

/* Known player details */
#playerinfo {
  margin-top: 0 !important;
}
#insight.start.player-unknown #playerinfo {
  display: none;
}
#playerinfo .playername p {
  font-size: 2em;
  text-transform: capitalize;
}
#playerinfo .playerdetails {
  margin-left: 40px;
}
#playerinfo .playerdetails .totalxp p {
  font-size: 1.5em;
}
#playerinfo .playerdetails .totalxp p span {
  font-weight: bold;
  font-size: 1.7em;
  text-shadow: 1px 2px 3px black;
}
#playerinfo .playerdetails .xpbar-and-levels {

}
#playerinfo .playerdetails .xpbar-and-levels p.current-level,
#playerinfo .playerdetails .xpbar-and-levels p.next-level {
  font-weight: bold;
  font-style: italic;
  font-size: 0.8em;
  text-transform: uppercase;
  margin: 0 7px;
}
.xpbar {
  background: #1A1A1A;
  border-radius: 4px;
  border: solid 1px #151515;
  height: 15px;
  width: 150px;
}
.xpbar .xpliquid {
  height: 100%;
  border-radius: 4px 0px 0px 4px;
  background: transparent linear-gradient(hsl(200, 100%, 50%), hsl(200, 100%, 20%)) repeat scroll 0% 0%;
}
#playerinfo .playerdetails p.progression {
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
  font-size: 1.1em;
}

#mission {

}
#mission p {
  font-size: 1.2em;
  font-weight: bold;
  margin-right: 10px;
}
#mission .target {

}

/* Level tabs */
#leveltabs {
  justify-content: space-around;
}
#leveltabs > div {
  background: #333;
  width: 25%;
}

/* Unlocked levels */
#leveltabs > div.unlocked p {
    text-shadow: rgba(0,0,0,0.2) -2px -1px 0px;
}
#leveltabs > div.unlocked,
#leveltabs > div.unlocked p {
    cursor: pointer;
}
#leveltabs > div.unlocked:hover,
#leveltabs > div.unlocked p:hover{
    background: #555;
}

/* Locked levels */
#leveltabs > div.locked {
  background: #2a2a2a;
  text-shadow: rgba(0,0,0,0.5) -1px 0px 0px;
}
#leveltabs > div.locked img {
  width: 14px;
  margin-right: 10px;
  filter: brightness(0.7);
}
#leveltabs > div.locked p {
  color: #4a4a4a;
}

/* Active level */
#leveltabs > div.active {
  background: #444;
}
#leveltabs > div.active:hover,
#leveltabs > div.active p:hover {
  background: #444;
}
#leveltabs > div.active,
#leveltabs > div.active p {
    cursor: default;
}

/* Level contents */
#levelcontents {
  min-height: 150px;
}
#levels {
  margin: 10px 0px;
}
#lvl1,
#lvl2,
#lvl3,
#lvl4 {
  display: none;
  background: #444;
  padding: 5px 0px;
}
#lvl1 {
  display: inherit;
}
#levels hr {
  margin: 5px 30px;
  border: 0;
  border-top: solid 1px #3a3a3a;
}

/* Level 1 */
#lvl1 .reminder,
#lvl2 .reminder,
#lvl3 .reminder,
#lvl4 .reminder {
  padding: 10px;
}
img.huecircle {
  min-width: 80px;
  width: 80px;
  min-height: 80px;
  height: 80px;
  -webkit-animation: huuue 8s linear infinite;
  -moz-animation: huuue 8s linear infinite;
  animation: huuue 8s linear infinite;
  -webkit-filter: saturate(0.8);
  filter: saturate(0.8);
  box-shadow: rgba(0,0,0,0.3) 0px 0px 5px;
  border-radius: 50%
}
@-moz-keyframes huuue { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes huuue { 100% { -webkit-transform: rotate(360deg); } }
@keyframes huuue { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* Levels 2 & 3 */
.ligcircle,
.satcircle {
  min-width: 80px;
  width: 80px;
  min-height: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 5px;
}
.ligcircle {
  background: hsl(210, 50%, 50%);
  -webkit-animation: liiig 1.5s linear infinite alternate;
  -moz-animation: liiig 1.5s linear infinite alternate;
  animation: liiig 1.5s linear infinite alternate;
}

@-moz-keyframes liiig { 100% { background: hsl(200, 100%, 0%); } }
@-webkit-keyframes liiig { 100% { background: hsl(200, 100%, 0%); } }
@keyframes liiig {
  0% { background: hsl(210, 100%, 0%); }
  10% { background: hsl(210, 100%, 0%); }
  50% { background: hsl(210, 100%, 50%); }
  90% { background: hsl(210, 100%, 100%); }
  100% { background: hsl(210, 100%, 100%); }
}

.satcircle {
  background: hsl(210, 100%, 50%);
  -webkit-animation: saaat 1.5s linear infinite alternate;
  -moz-animation: saaat 1.5s linear infinite alternate;
  animation: saaat 1.5s linear infinite alternate;
}
@-moz-keyframes saaat { 100% { background: hsl(200, 0%, 50%); } }
@-webkit-keyframes saaat { 100% { background: hsl(200, 0%, 50%); } }
@keyframes saaat {
  0% { background: hsl(210, 0%, 50%); }
  10% { background: hsl(210, 0%, 50%); }
  50% { background: hsl(210, 50%, 50%); }
  90% { background: hsl(210, 100%, 50%); }
  100% { background: hsl(210, 100%, 50%); }
}

#lvl2 .reminder p:nth-of-type(1),
#lvl3 .reminder p:nth-of-type(1) {
  width: 30%;
}
#lvl2 .reminder p:nth-of-type(2),
#lvl3 .reminder p:nth-of-type(2) {
  margin-left: 3%;
  width: 30%;
}
/* Level 4 */
#lvl4 .reminder p {
  font-size: 3.7em;
  text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px;
}

/** Ready? section **/
#ready p {
  font-size: 1.5em;
}
/* New player */
#newplayername {
  margin-top: 5px;
}
#newplayername p {
  font-size: 1.3em;
  margin-bottom: 5px;
}
#newplayername input {
  background: #777;
  border: none;
  border-radius: 2px;
  font-size: 1.5em;
}
#newplayername input:focus {
  background: #bbb;
}
#insight.start.player-known #newplayername {
  display: none;
}

/* Go button */
#playbutton {
  margin: 10px 0px 20px;
}