@import url("s2r://panorama/styles/dotastyles.css");
@import url("file://{resources}/styles/shared/variables.css");
@import url("file://{resources}/styles/shared/panelstyles.css");

@define scoreWidth: 250px;
@define scoreHeight: 120px;
@define scoreMarginTop: 100px;
@define sequenceWidth: 150px;
@define splashHeight: 200px;
@define splashWidth: 800px;
@define timerMarginRight: 200px;
@define controlsMarginLeft: 80px;
@define waitProgressMarginTop: 120px;
@define waitProgressMarginLeft: 210px;

.ChallengeRoot {
  width: 100%;
  height: 100%;
}

.ChallengeCombo {
  horizontal-align: right;
  width: sequenceWidth;
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: comboPanelGradient;
  opacity: 1;
  transition-duration: 0.75s;
  transition-property: opacity;
}

.HudVisible .ChallengeCombo {
  opacity: 1;
}

.HudHideSequence .ChallengeCombo,
.HudNoHands .ChallengeCombo {
  opacity: 0;
}

.ChallengeRoot.Hide .ChallengeCombo {
  opacity: 0;
}

#ChallengeSequence {
  flow-children: down;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  overflow: clip scroll;
  opacity-mask: softEdgeVScrollMask;
}

#ChallengeSplash {
  align: left top;
  width: 0;
  max-width: 0;
  height: splashHeight;
  margin-top: 200px;
  margin-left: 100px;
  overflow: clip noclip;
  visibility: collapse;
  transition-timing-function: ease-out;
  transition-duration: 0.15s;
  transition-property: max-width, width;
}

#ChallengeSplash.Show {
  width: splashWidth;
  max-width: splashWidth;
  visibility: visible;
}

#ChallengeSplash .ChallengeSplashFX {
  width: 100%;
  height: 150%;
  opacity-mask: softEdgeBoxIrregularMask;
}

#ChallengeSplash .ChallengeSplashBox {
  flow-children: down;
  min-width: splashWidth;
  height: 100%;
}

#ChallengeSplash .ChallengeSplashTitle {
  width: 100%;
  margin-top: 70px;
  margin-left: -50px;
  font-size: 48px;
  font-style: italic;
  font-weight: black;
  color: #bd42cf;
  text-align: center;
  text-overflow: shrink;
  text-shadow: 3px 3px 6px #04272c;
  text-transform: uppercase;
  letter-spacing: 10px;
}

#ChallengeSplash.success .ChallengeSplashTitle {
  color: #42cf49;
  text-shadow: 3px 3px 6px #162c5a;
}

#ChallengeSplash.failure .ChallengeSplashTitle {
  color: #d44b21;
  text-shadow: 3px 3px 6px #474303;
}

#ChallengeSplash .ChallengeSplashHelp {
  horizontal-align: left;
  margin-top: 10px;
  margin-left: 280px;
  color: #ccc;
  text-align: left;
  text-shadow: 1px 1px 2px #000;
}

.ChallengeControls {
  flow-children: right;
  align: left bottom;
  margin-left: controlsMarginLeft;
  opacity: 1;
  transition-duration: 0.75s;
  transition-property: opacity;
}

.ChallengeRoot.Hide .ChallengeControls {
  opacity: 0;
}

.ChallengeControls .ChallengeControlIcon {
  width: 64px;
  height: 64px;
  transition-duration: 0.2s;
  transition-property: background-color;
}

.ChallengeControls .ChallengeControlIcon:hover {
  background-color: panelTranslucentHoverGradient;
  border-right: 1px solid #444b;
  border-left: 1px solid #444b;
}

.ChallengeControls .ChallengeIconButton {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: center;
  tooltip-position: top;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.ChallengeControls .ChallengeIconButton.Activated {
  sound: "ui_quit_menu_fadeout";
}

.ChallengeControls .InfoIcon {
  background-size: 30px 30px;
}

.ChallengeControls .EyeIcon {
  background-image: controlsEyeIcon;
  background-size: 32px 32px;
}

.HudHideSequence .ChallengeControls .ChallengeControlIcon .EyeIcon {
  wash-color: #646464;
}

.HudNoHands .ChallengeControls .ChallengeControlIcon .EyeIcon {
  wash-color: #3e3e3e;
}

.ChallengeControls .FullRefreshIcon {
  background-image: statusLoadingThrobberRoundIcon;
  background-size: 28px 28px;
}

.ChallengeControls .FullRefreshIcon.Activated {
  animation-name: SpinnerRotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.ChallengeControls .CloseButton {
  background-size: 34px 34px;
}

.ChallengeControls .ChallengeControlIcon .Grey {
  wash-color: #aaa;
}

.ChallengeControls .ChallengeControlIcon .Grey:hover {
  wash-color: #fff;
}

.ChallengeControls .ChallengeControlIcon .Blue {
  wash-color: #65a9db;
}

.ChallengeControls .ChallengeControlIcon .Blue:hover {
  wash-color: #acc6d8;
}

.ChallengeControls .ChallengeControlIcon .Bronze {
  wash-color: #dca157;
}

.ChallengeControls .ChallengeControlIcon .Bronze:hover {
  wash-color: #dca157;
}

.ChallengeControls .ChallengeControlIcon .Red {
  wash-color: #db6565;
}

.ChallengeControls .ChallengeControlIcon .Red:hover {
  wash-color: #db6565;
}

#ChallengeWaitProgress {
  align: center top;
  width: 40px;
  height: 40px;
  margin-top: waitProgressMarginTop;
  margin-left: waitProgressMarginLeft;
}

#ChallengeWaitProgressBar {
  width: 100%;
  height: 100%;
  background-color: #000c;
  border-radius: 50%;
}

#ChallengeWaitProgressBar_FG {
  width: 100%;
  height: 100%;
  background-color: #ffad32;
}

#ChallengeWaitProgress .ChallengeWaitProgressBarOverlay {
  align: center center;
  width: 34px;
  height: 34px;
  background-color: black;
  border-radius: 50%;
}

#ChallengeWaitProgress .ChallengeWaitProgressText {
  align: center center;
  width: 80px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
}

#ChallengeScore {
  align: center top;
  width: scoreWidth;
  height: scoreHeight;
  margin-top: scoreMarginTop;
}

#ChallengeScore.Failed {
  wash-color: #000c;
  animation-name: StunPortrait;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

#ChallengeTimer {
  align: right top;
  width: 140px;
  height: 58px;
  margin-right: timerMarginRight;
  transition-duration: 0.2s;
  transition-property: transform;
  transform: translateY(0);
}

#ChallengeTimer.Hide {
  transform: translateY(-64px);
}

#ChallengeTimer .ChallengeTimerBackground {
  width: 100%;
  height: 100%;
  background-image: timerBgHud;
  background-size: 100%;
}

#ChallengeTimerLabel {
  width: 100%;
  margin-top: 12px;
  font-size: 26px;
  color: white;
  text-align: center;
  text-overflow: shrink;
  text-shadow: -1px 2px 1px 2 #333333b0;
}
