/**
 * CSS for Hue Hunt
 * /hsl
 * Alexandre Andrieux @2015 (October)
 */

/** Useful class **/
.hslinput {
  background: #181818;
  border: none;
  border-radius: 2px;
  font-size: 2em;
  width: 80px;
  height: 50px;
  margin-top: 4px;
  text-align: center;
  color: #ddd;
}
.hslinput:focus {
  background: #282828;
}
/** Header **/
#header {
  height: 100px;
  width: 100%;
  background: #222;
}
#header > div {
  padding: 0 30px;
}
#header #user p.username {
  font-size: 2.5em;
  text-transform: capitalize;
}
#header #shotsLeft p.taken,
#header #performance p.label {
  font-size: 1.7em;
}
#header #shotsLeft .shots {
   position: relative;
   height: 50px;
   width: 140px;
   flex-flow: row wrap;
}
#header #shotsLeft .shots::after {
   position: absolute;
   top: -4px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   font-size: 40px;
   color: #E5E5E5;
  font-weight: bold;
  text-shadow: #000 0px 0px 3px;
}
#header #shotsLeft p.shot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 45px;
  height: 45px;
}
#header #shotsLeft p.shot span {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 10px;
  background: radial-gradient(hsl(200, 80%, 50%), hsl(250, 80%, 10%));
  border-radius: 50%;
  border: solid 1px #191919;
}
#header #performance p.value {
  height: 50px;
  font-size: 40px;
}
#header #performance p.value span.points {
  font-size: 30px;
}

/** Insight views (first shot and normal) **/
.game-insight-wrapper {
  flex-basis: 60%;
  min-height: 300px;
  height: 300px;
  padding: 15px 15px 5px;
  margin-top: 20px;
  position: relative;
  border-radius: 5px 5px 0px 0px;
  background: #222;
}
#insight.game {
  height: 100%;
  width: 100%;
  margin: 0;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px;
}
#insight.firstshot {
  background: #191919;
}
#insight.firstshot p {
  font-size: 1.5em;
  color: #aaa;
  margin: 20px;
}
#insight.firstshot p.questionmark {
  position: absolute;
  top: -25px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 20em;
  color: #222;
  font-family: Arial;
  z-index: 2;
}
#insight.firstshot > * {
  z-index: 3;
}
#insight.firstshot .targetcolor.smallsquare {
  width: 80px;
  height: 80px;
}

/* Target color spread */
#insight.game .targetcolor.spread {
  width: 30%;
  height: 100%;
  border-radius: 2px 0 0 2px;
}
#insight.game .targetcolor.spread p {
  color: white;
  font-size: 1.5em;
  text-shadow: 0px 0px 5px black;
  top: 6%;
  position: absolute;
  text-align: center;
  width: 30%;
}
/* Current color spread */
#insight .current {
  top: 6%;
  position: absolute;
  width: 70%;
  left: 30%;
}
#insight .current p {
  font-size: 1.5em;
  text-shadow: black 0px 0px 5px;
  color: white;
}
#insight .current p.hsl {
  font-weight: bold;
  color: white;
}

/** Interactionarea **/
#interactionarea {
  background: #222;
  width: 100%;
  padding: 10px 0px 30px;
}
#controlsarea {

}
#controltop p {
  font-size: 1.5em;
  text-transform: uppercase;
  width: 100%;
  background: radial-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0));
}
#controls > div {
  width: 120px;
  height: 120px;
  margin: 0px 15px;
}
#controls > div input,
#controls > div.fixed-value p.fixed-hidden-value,
#controls > div > p.percent,
#hcontrol p.degrees {
  display: inline-block;
  vertical-align: middle;
}
#controls > div > p {
  font-size: 2em;
}
#controls .title {
  position: relative;
  background: yellow;
  margin-top: 10px;
}
#controls img.huecircle,
#controls .satcircle,
#controls .ligcircle {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  position: absolute;
}
#controls .title p {
  font-size: 2.2em;
  font-weight: bold;
  text-shadow: black 0px 0px 5px;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
#hcontrol img.huecircle {
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  top: 0px;
}
#hcontrol .title p {
  top: 10px;
}
#scontrol .title,
#lcontrol .title {
  margin-top: 20px;
}

/* Fixed-values state */
#scontrol p.fixed-hidden-value,
#lcontrol p.fixed-hidden-value {
  display: none;
}
#scontrol.fixed-value p.fixed-hidden-value,
#lcontrol.fixed-value p.fixed-hidden-value {
  display: inherit;
}
#scontrol.fixed-value p.fixed-hidden-value,
#lcontrol.fixed-value p.fixed-hidden-value,
#scontrol.fixed-value p.percent,
#lcontrol.fixed-value p.percent {
  color: #3A3A3A;
  font-weight: bold;
  font-size: 3em;
}
#scontrol.fixed-value .title,
#lcontrol.fixed-value .title {
  margin-top: 10px;
}
#scontrol.fixed-value .title p,
#lcontrol.fixed-value .title p {
  color: #444;
}
#scontrol.fixed-value .satcircle,
#lcontrol.fixed-value .ligcircle {
  animation: none;
  background: #333;
}
/*
@keyframes huerot {
  from {filter: hue-rotate(-70deg);}
  to {filter: hue-rotate(70deg);}
}
@-webkit-keyframes huerot {
  from {-webkit-filter: hue-rotate(0deg);}
  to {-webkit-filter: hue-rotate(100deg);}
}

#hcontrol {
  background: radial-gradient(circle closest-side, #181818, #181818, #181818, #181818, #181818, #181818, #181818, hsl(220,50%,30%), hsl(220,50%,37%), hsl(220,50%,20%));
  -webkit-animation: huerot 3s linear alternate infinite;
  animation: huerot 3s linear alternate infinite;
}

@keyframes satrot {
  from {filter: saturate(100%);}
  50% {filter: saturate(0%);}
  to {filter: saturate(100%);}
}
@-webkit-keyframes satrot {
  from {-webkit-filter: saturate(0%);}
  50% {-webkit-filter: saturate(100%);}
  to {-webkit-filter: saturate(0%);}
}

#scontrol {
  background: radial-gradient(circle closest-side, #181818, #181818, #181818, #181818, #181818, #181818, #181818, hsl(220,100%,30%), hsl(220,100%,37%), hsl(220,100%,20%));
  -webkit-animation: satrot 3s infinite;
  animation: satrot 3s infinite;
}

@keyframes ligrot {
  from {filter: brightness(130%);}
  50% {filter: brightness(50%);}
  to {filter: brightness(130%);}
}
@-webkit-keyframes ligrot {
  from {-webkit-filter: brightness(150%);}
  50% {-webkit-filter: brightness(50%);}
  to {-webkit-filter: brightness(150%);}
}

#lcontrol {
  background: radial-gradient(circle closest-side, #181818, #181818, #181818, #181818, #181818, #181818, #181818, hsl(220,50%,30%), hsl(220,50%,37%), hsl(220,50%,20%));
  -webkit-animation: ligrot 3s linear infinite;
  animation: ligrot 3s linear infinite 1.5s;
}
*/
#guess {
  width: 100px;
  background: hsl(200, 80%, 40%);
  height: 20px;
  margin-left: 30px;
}