@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
.fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}@keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}
.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse both;
}
@-webkit-keyframes pulsate-fwd{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulsate-fwd{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}
.pulsate-fwd {
	-webkit-animation: pulsate-fwd 0.6s ease-in-out infinite both;
	        animation: pulsate-fwd 0.6s ease-in-out infinite both;
  color:rgb(197, 197, 21);
  font-size: 6vw;
}

@-webkit-keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}@keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}
.fade-out-top{-webkit-animation:fade-out-top 1s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-top 1s cubic-bezier(.25,.46,.45,.94) both}

@keyframes roundtime {
  to {
    transform: scaleX(0);
  }
}

@keyframes fadeIn {
  to {
    opacity:1;
  }
}

@-webkit-keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}
.slide-out-top{-webkit-animation:slide-out-top .75s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-top .75s cubic-bezier(.55,.085,.68,.53) both}

body {
  background-color: #1e1d1e;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;

}
.first{
  animation-delay: .2s;
}
.second{
  animation-delay: .4s;
}
.third{
  animation-delay: .6s;
}
.fourth{
  animation-delay: .8s;
}
.modeHeader {
  text-align: center;
  width:100%;
  color: white;
  font-size: 10vh;
}

.modeButton {
  width:30vw;
  height: 60vh;
  margin: 0 3vw;
  border-radius: 10px;  
  background-color: rgba(255, 255, 255, 0.753);
  color: black;
  font-size: 1.4vw;
  line-height: 1.5;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.717);
}

.modeButton p {
  padding: 0 10%;
  margin:0;
  
}
#modeContainer {
  margin-top:3%;
  display:flex; 
  justify-content: center;
  text-align: center;
}
.difficulty-header{
  margin: 5% 0 0 25%;
  color:rgba(255, 255, 255, 0.763);
  font-size: 11vh;
  font-weight: bold;
  font-family: Arial;
  transition: opacity 750ms;

}

.flex-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-content: center;
  margin: 0 30%;
  transition: opacity 750ms;
  margin-top: 3%;
}
.game-button {
  background-color: rgba(255, 254, 254, 0.783);
  padding: 2vh 0 2vh 3vw;
  margin-bottom: 0;
  margin-top: 3vh;
  font-weight: bold;
  font-family: Arial;
  text-decoration: none;
  border-radius: 10px;
  color:  #1e1d1e;
  font-size: 8vh;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.717);
}

.tooltip {
  border:solid white 3px;
  font-size: 4vh;
  border-radius: 10px;
  color:white;
  position: absolute;
  margin-top: 3vh;
  left: 105%;
  top: 0;
  width: 25vw;
  transition-property: opacity;
  transition-duration: 500ms;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.717);
}

.tooltip p {
  padding:5px 15px;
  margin: 0;
}
.game-button:hover {
  background-color: rgba(255, 255, 255, 0.989);
  cursor: pointer;
}
.game-button:hover + .tooltip{
  opacity: 1;
  visibility: visible;
  
}
.goAway {
  opacity: 0;
}

.gameplayElement {
  transition: opacity 2s;
}

.hidden {
  display:none !important;
  opacity: 0;
}

.active {
  opacity: 1;
}

.hiddenArrow{
  opacity:0;
}

.scoreCounter {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top:1%;
  color:white;
  font-size: 5vh;
}
#score{
  transition-property: color,font-size;
  transition-duration: 1s;
}
.summaryAnswerRow {
  display:flex;
  flex-wrap: wrap;
  margin-top:0;
  margin-bottom: 50px;
  margin-left: 5%;

}
.summaryAnswer {
  background-color: rgba(240, 248, 255, 0.527);
  color:black;
  font-size: 5vw;
  text-decoration: none;
  transition: background-color 500ms ease;
  margin: 0 5px 5px 0;
  padding:7px 15px;
  border-radius: 10px;
}

.answeredCorrectly {
  background-color: #3cff00c7;
}
.answeredIncorrectly {
  background-color: rgb(235, 57, 34);
}

.homeButton {
  font-size: 7vh;
  padding: 1vh 2vh 1vh 2vh;
  background-color: rgba(240, 248, 255, 0.527);;
  color: #1e1d1e;
  position: absolute;
  transition-property: opacity;
  transition-duration: 500ms;
  border-radius: 1vh;
  text-decoration: none;
  z-index: 1;
  top: 5%;
  left: 3%;
}
.summaryComponent {
  color:black;
  font-size: 5vw;
  margin: 0 35px 5px 0;
  width:auto;
  text-decoration: none;
  padding:7px 15px;
  border-radius: 10px;
}

::placeholder {
  text-align: center;
  color:white;
  font-size: 5vh;
}
#timer-container {
  text-align: center;
  margin: 0 40% 0 40%;
  color:white;
  font-size: 8vh;
  font-weight: bold;
}

#timer {
  margin: 4vh 0;
}
#countdownTimer {
  margin: 40vh 0 0 0;
  text-align: center;
  color: white;
  font-size: 4vw;
}
#radical-container {
  margin: 0px 30% 0 30%;
  text-align: center;
}
#svg-container {
  display:flex;
  justify-content: center;
  text-align: center;
}
#currRadical {
  color: rgb(247, 247, 247);
  font-size: 15vh;
  margin: 0px 0 0 0;
}
#answer {
  margin-top: 5%;
  margin-right: 30%;
  width: 40%;
  margin-left: 30%;
  border-radius: 2vh;
  padding:0;
  height: 7vh;
  text-align: center;
  border: none;
  background-color:rgba(255, 255, 255, 0.308);
  color: white;
  font-size: 5vh;
}
.played {
  background-color: rgb(0, 153, 209);
}
#result {
  color:white;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80px;
  margin-top: 30px;
}

#summaryButtonContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color:black;
}
#summaryButtonContainer button {
  padding:25px;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  font-weight: bold;
  margin-right:20px;
}
#retryButton {
  background-color: rgb(255, 255, 255);
  border: none;
}

#changeDiffButton {
  border: solid white;
  background-color: rgb(0, 0, 0);
  color:white;
}
#progressBarContainer {
  margin: 0 20% 20px 20%;
  background-color: #1e1d1e;
  border: 2px solid white;
  border-radius: 3px;
  height:3vh;
}

#progressBar {
  background-color: white;
  width:0%;
  transition-property: width;
  transition-duration: 400ms;
  height:100%;
}

#answerHeaderContainer {
  text-align: center;
}
#answerHeader{
  color:white;
  font-weight: bold;
  font-size:50px;
  font-family: Arial, Helvetica, sans-serif;
}
#summaryAnswerContainer {
  display: flex;
  flex-direction: column;
}

#heartContainer {
  color:white;
  float: right;
  position:absolute;
  right: 17%;
  top: 13%;
}

#heartContainer i {
  font-size: 7vh;
  padding-right:1vh;
}

#responseContainer {
  display: flex;
  position: absolute;
  flex-direction: column;
  left: 20%;
  top: 10%;
}

.responseSquare {
  width: 12vh;
  height: 12vh;
  background-color: gray;
  margin: 1vh;
  border-radius: 4px;
  color:white;
  text-align: center;
  font-size:9vh;

}

.acceptedResponse {
  background-color: green;

}

#bannedContainer {
  display: flex;
  margin:0% 0% 0% 10%;
  flex-wrap: wrap;
  min-height: 20vh;
  border-radius: 7px;
  border: solid white 2px;
  width: 80%;
  background-color: #312f31;
  box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.717);
}


.bannedAnswer {
  background-color: rgba(240, 248, 255, 0.527);
  color:black;
  font-size: 6vh;
  height:7%;
  margin: 2.5px 2.5px 2.5px 2.5px;
  padding:5px 10px;
  border-radius: 7px;
}

#bannedAnswerHeader {
  margin: 0 0 0 10%;
  font-size: 5vh;
  font-family: Arial, Helvetica, sans-serif;
  color:white;

}

#gameField {
  display: flex;
  height:100vh;
  width:100vw;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.side{
  width: 50%;
  height: 100%;
  border-radius: 0px;
  transition-property: box-shadow;
  transition-duration: 500ms;
}

#playerSide {
  text-align: center;
}
#computerSide {
  text-align: center;
}
.currentTurn{
  box-shadow: 0px 0px 30px 10px rgb(255, 255, 255) inset;
}

.controllerHeader {
  font-size: 8vh;
  position:absolute;
  margin: 2% 0 0 3%;
  color:white;
}

.jukugoContainer {
  font-size:9vw;
  color:white;
  margin-top: 16%;
  margin-bottom: 25%;

}
.finalKanji {
  color:magenta;
  margin-top: 6%;
  margin-bottom: 25%;
}

#cpuAnswerHolder{
  display: flex;
  height:100%;
  align-items: center;
  justify-content: center;
}
.answerContainer {
  position: absolute;
  bottom:5%;
  width:50%;
}
.level1{color:green;font-size: 6vh;}
.level2{color:yellowgreen;font-size: 7vh;}
.level3{color: rgb(189, 0, 0);font-size: 8vh;}
.level4{color:rgb(255, 235, 17);font-size: 9vh;}
.level5{color:aqua; font-size: 11vh;}
.historyHeader {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3vw;
  position: absolute;
  width: 100%;
  top: 87%;
  margin-bottom: 0;
  color:white;
}
.historyHeader p{
  position: relative;
}
.gameHistoryContainer{
  transition: display 1s;
}
.hiddenPath{
  opacity:0;
}
.activePath{
  opacity: 1;
}
#timerBar{
  margin: 0 5% 0 5%;
  background-color: #1e1d1e;
  border: 2px solid white;
  border-radius: 3px;
  height:3vh;
}
#timerBar div {
  animation: roundtime calc(var(--duration) * 1s) linear forwards;
  background-color: white;
  z-index: 1;
  height:100%;
  transform-origin: left center;

}

.drawnOutScoreContainer{
  position: absolute;
  top: 13%;
  left:5%;
  font-size: 3vw;
  color: white;
}
.scoreFloater{
  position:absolute;
  right:0;
  bottom:80%;
}
path {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 500ms;
  animation-play-state: paused;
  animation-fill-mode: forwards;
}
svg {
  width: 20vw !important;
  height: 20vw !important;
}
svg g{
  stroke: rgb(198, 198, 198);
}

.showAnswer g{
  stroke: green !important;  
}

.menuHeader {
  color: white;
  font-size: 6vw;
  text-align: center;
  font-weight: bold;
}

.imageMenuHeader {
  margin:auto;
  margin-top: 5vh;
  width:30vw;
  display: block;
  
}

.duelSelectFlexContainer{
  display: flex;
  margin: 0 10%;
  height: 20vh;
  align-items: center;
  justify-content: center;
}
.playerNameHeader{
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 4vw;
  margin: 0 2vw;
}
.opponentScoreHeader {
  display: flex;
  justify-content: flex-end;
}
.answeredCorrectlyBanner{
  font-size: 4vw;
  color:white;
  text-align: center;
  opacity:0;
}
#disconnectHeader{
  font-size: 4vw;
  color: white;
  font-weight: bold;
  text-align: center;
  margin: 10vh 0;
}

#blockHeader{
  font-size: 4vw;
  color: white;
  font-weight: bold;
  text-align: center;
  margin: 10vh 0;
}
#svgPadding {
  width: 100%;
  height:18vh;
}
.roomCreationContainer {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
.endGameDisplayContainer {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}


.roomCreationBox {
  width: 20vw;
  background-color: #312f31;
  border-radius: 1vw;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); 
}
.endGameDisplayBox {
  width: 35vw;
  background-color: #312f31;
  border-radius: 1vw;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); 
}
.endGameDisplayHeader {
  text-align: center;
  margin-top: 2vh;
  margin-bottom: 0;
  color: white; 
  font-size: 5vw;
}

.playAgainHeader {
  text-align: center;
  margin-top: 2vh;
  margin-bottom: 0;
  color: white; 
  font-size: 2vw;
}
.roomCreationBoxHeader {
  text-align: center;
  margin-top: 2vh;
  margin-bottom: 0;
  color: white; 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
}
.roomCreationBoxInput {
  height: 5vh;
  margin: 5% 20% 0 20%;
  width: 60%;
  text-align: center;
  border-radius: 1vw;
  color: white;
  font-size: 4vh;
  background-color: #424142b3;
  border: none;
}
.roomCreationBoxInput:focus { 
  outline: none !important;
  border-color: #719ECE;
  box-shadow: 0 0 10px #719ECE;
}
.roomCreationBoxInput:focus { 
  outline: none !important;
  border-color: #719ECE;
  box-shadow: 0 0 10px #719ECE;
}
.roomCreationBoxSubmit{
  text-align: center;
  margin: 10% 30% 5%  30%;
  width: 40%;
  font-size: 1.5vw;
  border: none;
  border-radius: 1vw;
  height: 5vh;
  color: white;
  background-color: rgb(102, 102, 102);
  cursor: pointer;
}


.endGameButtonContainer {
  text-align: center;
  margin: 2vh 0;
}

.inviteLinkButton {
  margin: 10% 20% 0 20%;
  border-radius: 1vw;
  padding: 1vh .5vw;
  color:white;
  width: 60%;
  background-color:rgb(0, 153, 209);
  border: none;
  font-size: 1.5vw;
}

#duelAgain{
  font-size: 2.5vw;
  border-radius: .5vw;
  padding: 1vh 1vw;
  margin-right: 1vw;
  border: none;
  background-color: green;
  color: white;
}

#duelExit {
  font-size: 2.5vw;
  border-radius: .5vw;
  padding: 1vh 1vw;
  border: none;
  
  background-color: red;
  color: white;
}
.roomNumberInfoLine {
  text-align: center; 
  color: white; 
  font-size: 2vw;

}

.playerScoreHeader{
  color: white;
  font-size: 4vw;
}

#playerArea {
  width:20vw;
  height:100vh;
}
#gameArea {
  width:60vw;
  height:100vh;
}
#opponentArea {
  width:20vw;
  height:100vh;
}

.difficultySettingContainer {
  width:50%;
  padding-left:5%;
  height:8vh;
  margin:0;
}
.difficultySettingHeader {
  font-size: 1.25vw;
  margin-bottom: 0;
  
  color: white;
  text-align: center;
}
.difficultyButton {
  margin-top: 1vh;
  font-size: 1.75vw;
  text-align: center;
  color:white;
}

.difficultyButtonContainer {
  position: relative;
}

#leftSelector {
  position: absolute;
  z-index: 1;
  width:30%;
  height:100%;
  left:0;
}

#rightSelector {
  position: absolute;
  z-index: 1;
  width:30%;
  height:100%;
  right: 0;
}

#leftSelectorSL {
  position: absolute;
  z-index: 1;
  width:30%;
  height:100%;
  left:0;
}

#rightSelectorSL {
  position: absolute;
  z-index: 1;
  width:30%;
  height:100%;
  right: 0;
}
.roomCreationSettingsContainer {
  display: flex;
  margin-top: 2vh;
}
.scoreLimitSettingContainer {
  width:45%;
  margin:0;
  height:7vh;
}

.joinRoomContainer {
  width:35vw;
  position: absolute;
  top:0;
  animation-delay: 200ms;
}

.joinRoomLabel {
  margin-left:2vw;
  margin-top: 3vh;
  padding: 2vh 0 0vh 3vw;
  display: inline-block;
  color: white;
  font-size: 8vh;
}

.joinRoomInput {
  margin: 0;
  height: 8vh;
  background-color:#1e1d1e;
  border: 2px solid white; 
  border-radius: .5vw;
  color: white;
  font-size: 8vh;
  width: 7vw;
  caret-color: transparent;
}

.joinRoomInput:focus{
  outline: none !important;
  box-shadow: 0 0 10px #ffffff;
}
@media screen and (max-device-aspect-ratio: 1) {
  .flex-container {
    margin: 0 5%;
  }
  .modeHeader {
    font-size: 10vw;
  }
  #modeContainer {
    flex-direction: column;
    justify-content: center;
  }
  .modeButton {
    width: 95%;
    height: 35vh;
    margin: 2vh 3vw;
    border-radius: 10px;  
    background-color: rgba(255, 255, 255, 0.753);
    color: black;
    font-size: 4vw;
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.717);
  }
  .difficulty-header{
    margin: 5% 0 0 5%;
    color:rgba(255, 255, 255, 0.763);
    font-size: 15vw;
    font-weight: bold;
    font-family: Arial;
    transition: opacity 750ms;
  
  }
  #answer {
    margin-top: 5%;
    margin-right: 5%;
    width: 90%;
    margin-left: 5%;
    border-radius: 2vh;
    height: 7vh;
    text-align: center;
    border: none;
    background-color:rgba(255, 255, 255, 0.308);
    color: white;
    font-size: 5vh;
  }
  #progressBarContainer {
    margin: 0 5% 0 5%;
    background-color: #1e1d1e;
    border: 2px solid white;
    border-radius: 3px;
    height:3vh;
  }
  #heartContainer {
    color:white;
    display: flex;
    flex-direction: column-reverse;
    position:absolute;
    right: 10%;
    top: 13%;
  }
  #heartContainer i {
    font-size: 5vh;
    padding-right:0;
  }
  .tooltip {
    display: none;
  }
  #responseContainer {
    display: flex;
    position: absolute;
    flex-direction: column;
    left: 5%;
    top: 5%;
  }
  .responseSquare {
    width: 9vh;
    height: 9vh;
    margin: 1vh;
    border-radius: 4px;
    color:white;
    text-align: center;
    font-size:7vh;
  }
  #result {
    font-size: 10vw;
    margin-top: 3vh;
  }
  .homeButton{
    display: none !important;
  }
}