/* Import Default Setup */
@import url('../src/css/game-setup.css');

/* General */
.wise-about-words {
  border-color: #536624;
}

/* Title Screen */
.wise-about-words .title-screen {
  background-color: #b2ca72;
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/title-screen-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}

.wise-about-words .title-screen .start-game-btn {
  margin-top: 150px;
}

/* Game Container */
.wise-about-words .language-arts-game-container {
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/game-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: #fff;
}

/* No text version */
/* ? Not needed with updated question audio styles */
/* ? Keeping just in case */
/* .wise-about-words[data-display-text='false'] .language-arts-game-container {
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/game-bg-no-text.jpg');
} */

.wise-about-words[data-display-text='false']
  .language-arts-game-container
  .accessibility-container {
  margin-bottom: 10px;
}

.wise-about-words[data-display-text='false']
  .language-arts-game-container
  .accessibility-container
  button {
  border-color: #000;
  color: #000;
}

.wise-about-words .game-container .question-container .drop-area {
  padding: 0px;
  width: 240px;
  height: 240px;
  margin-left: 1rem;
  margin-right: 1rem;
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/drop-area-bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  border: 15px solid transparent;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.25));
}

/* No text version */
.wise-about-words[data-display-text='false']
  .game-container
  .question-container
  .drop-area {
  margin-left: 0px;
  margin-right: 0px;
}

.wise-about-words .game-container .question-container .question-holder {
  margin: -5px 1rem -20px 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.wise-about-words[data-display-text='false']
  .game-container
  .question-container
  .question-holder {
  margin: 5px auto -20px auto;
}

.wise-about-words .game-container .question-container .question-holder p {
  margin: 0px !important;
  color: #000;
  font-weight: bold;
  font-size: 1.75rem;
  line-height: 2rem;
}

.wise-about-words
  .game-container
  .question-container
  .question-holder
  .question-character {
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/question-character.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 80px;
  height: 103px;
  margin-right: 10px;
  flex-shrink: 0;
  pointer-events: none;
  cursor: auto;
}

/* No text version */
.wise-about-words[data-display-text='false']
  .game-container
  .question-container
  .question-holder
  .question-character {
  position: relative;
  margin-right: -50px;
  top: -10px;
  z-index: 3;
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/question-character-no-text.png');
  width: 88px;
  height: 113px;
  pointer-events: all;
  cursor: pointer;
}

.language-arts-game[data-display-text='false']
  .game-container
  .question-container
  .question-holder
  .play-audio {
  min-width: 135px;
  padding-left: 0px;
  padding-right: 0px;
}

.wise-about-words .game-container .question-container .match-container {
  margin-bottom: 10px;
}

/* No text version */
.wise-about-words[data-display-text='false']
  .game-container
  .question-container
  .match-container {
  margin-bottom: 0px;
}

.wise-about-words .game-container .question-container .match-container,
.wise-about-words .game-container .question-container .drag-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.wise-about-words .game-container .question-container .draggable-img-holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  margin-left: 1rem;
  margin-right: 1rem;
  border: 15px solid #572d20;
  -webkit-box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  position: relative;
  background-color: #fff;
  text-align: center;
  line-height: 1.25;
}

.wise-about-words:not([data-secondary-version='true'])
  .game-container
  .question-container
  .draggable-img-holder {
  -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
  transition: -webkit-box-shadow 0.2s ease-in-out;
  -o-transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out;
  transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}

.wise-about-words .game-container .question-container .match-img-holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.wise-about-words .game-container .question-container .draggable-img-holder img,
.wise-about-words .game-container .question-container .match-img-holder img {
  width: 175px;
  height: 175px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
}

.wise-about-words
  .game-container
  .question-container
  .draggable-img-holder:has(img[data-choice-audio]):hover,
.wise-about-words
  .game-container
  .question-container
  .match-img-holder:has(img[data-choice-audio]):hover {
  cursor: pointer;
}

.wise-about-words .game-container .question-container .draggable-img-holder,
.wise-about-words
  .game-container
  .question-container
  .draggable-img-holder.ui-draggable-dragging {
  cursor: move;
}

.wise-about-words
  .game-container
  .question-container
  .match-container
  .play-audio,
.wise-about-words
  .game-container
  .question-container
  .drag-container
  .draggable-img-holder:has(img)
  .play-audio {
  position: relative;
  top: 45px;
}

.wise-about-words
  .game-container
  .question-container
  .drag-container
  .draggable-img-holder.audio-only
  .play-audio {
  position: relative;
  top: unset;
  margin: 0 auto;
  border: none;
  background-color: transparent;
  color: #774833;
  opacity: 1;
  width: auto;
  height: auto;
  font-size: 1.75rem;
}

.wise-about-words
  .game-container
  .question-container
  .question-holder
  .play-audio {
  margin-right: 15px;
}

.wise-about-words .game-container .question-container .feedback-screen {
  position: relative;
  width: 100%;
  height: 300px;
  text-align: center;
  padding: 30px;
  background: -o-linear-gradient(
    top,
    #fff 0%,
    #fff 50%,
    #b2ca72 50%,
    #b2ca72 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    color-stop(50%, #fff),
    color-stop(50%, #b2ca72),
    to(#b2ca72)
  );
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 50%,
    #b2ca72 50%,
    #b2ca72 100%
  );
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

.wise-about-words .correct-feedback .feedback-image,
.wise-about-words .incorrect-feedback .feedback-image {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-right: 20px;
  width: 100px;
  height: 270px;
  margin-top: -15px;
}

.wise-about-words .correct-feedback .feedback-image {
  background: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/correct-character.png');
}

.wise-about-words .incorrect-feedback .feedback-image {
  background: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/incorrect-character.png');
}

.wise-about-words .feedback button {
  margin: 0;
}

.wise-about-words .feedback .feedback-text .play-audio {
  margin-right: 10px;
}

/* Final Screen */
.wise-about-words .final-screen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #b2ca72;
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/final-screen.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.wise-about-words .final-character-container {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative;
  top: 63px;
  margin-left: -100px;
}

/* No text version */
.wise-about-words[data-display-text='false'] .final-character-container {
  align-items: center;
  margin-left: -220px;
}

.wise-about-words .final-character-container .final-character {
  margin-right: -60px;
  width: 385px;
  height: 385px;
}

.wise-about-words .final-character-container .speech-bubble {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/speech-bubble.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 335px;
  height: 132px;
  margin-top: 60px;
  margin-bottom: 20px;
}

.wise-about-words
  .final-character-container
  .speech-bubble
  .speech-bubble-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  margin-left: 30px;
  margin-top: 10px;
}

.wise-about-words .final-character-container .speech-bubble p.h1 {
  margin: 0px !important;
}

.wise-about-words
  .final-screen-container
  .final-screen
  .speech-bubble
  .play-audio {
  margin-right: 5px;
}

.language-arts-game .retry-game-btn {
  position: relative;
  z-index: 2;
}

/* Media Queries */
@media all and (max-width: 1199px) {
  .wise-about-words .game-container .question-container .match-container {
    margin-bottom: 0px;
  }
  .wise-about-words .game-container .question-container .question-holder {
    margin-bottom: -25px;
  }
  .wise-about-words .final-character-container {
    top: 10px;
  }

  /* No text version */
  .wise-about-words[data-display-text='false']
    .game-container
    .question-container
    .question-holder {
    margin: -5px auto -20px auto;
  }
  .wise-about-words[data-display-text='false']
    .game-container
    .question-container
    .question-holder
    .question-character {
    width: 80px;
    height: 102px;
  }
  .language-arts-game[data-display-text='false']
    .game-container
    .question-container
    .question-holder
    .play-audio {
    min-width: 120px;
  }
}

@media all and (max-width: 991px) {
  .wise-about-words .game-container .question-container .question-holder {
    margin-top: -15px;
    margin-bottom: -15px;
  }
  .wise-about-words .game-container .question-container .drop-area {
    width: 220px;
    height: 220px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .wise-about-words .game-container .question-container .draggable-img-holder,
  .wise-about-words
    .game-container
    .question-container
    .draggable-img-holder
    img {
    width: 165px;
    height: 165px;
  }
  .wise-about-words .final-character-container {
    top: -10px;
    margin-left: -30px;
  }
  .wise-about-words .final-character-container .final-character {
    margin-top: 15px;
    margin-right: -40px;
    width: 280px;
    height: 280px;
  }
  .wise-about-words .final-character-container .speech-bubble {
    width: 260px;
    height: 102px;
  }
  .wise-about-words
    .final-character-container
    .speech-bubble
    .speech-bubble-content {
    margin-top: 10px;
  }
  .wise-about-words .final-character-container .speech-bubble p.h1 {
    font-size: 1.75rem;
  }
  /* No text version */
  .wise-about-words[data-display-text='false']
    .game-container
    .question-container
    .question-holder {
    margin: -5px auto -25px auto;
  }
  .wise-about-words[data-display-text='false']
    .game-container
    .question-container
    .question-holder
    .question-character {
    width: 72px;
    height: 92px;
  }
  .language-arts-game[data-display-text='false']
    .game-container
    .question-container
    .question-holder
    .play-audio {
    min-width: 110px;
  }
  .wise-about-words[data-display-text='false'] .final-character-container {
    margin-left: -170px;
  }
}

@media all and (max-width: 767px) {
  .wise-about-words .title-screen .start-game-btn {
    margin-top: 120px;
  }
  .wise-about-words .game-container .question-container .question-holder {
    margin-bottom: 0px;
  }
  .wise-about-words .game-container .question-container .drop-area {
    width: 185px;
    height: 185px;
  }
  .wise-about-words .game-container .question-container .draggable-img-holder,
  .wise-about-words
    .game-container
    .question-container
    .draggable-img-holder
    img {
    width: 135px;
    height: 135px;
  }
  .wise-about-words .game-container .question-container .draggable-img-holder {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .wise-about-words
    .game-container
    .question-container
    .match-container
    .play-audio,
  .wise-about-words
    .game-container
    .question-container
    .drag-container
    .draggable-img-holder:has(img)
    .play-audio {
    top: 35px;
  }
  .wise-about-words .final-character-container {
    top: -20px;
  }
  .wise-about-words .final-character-container .final-character {
    width: 240px;
    height: 240px;
  }
  .wise-about-words .final-character-container .speech-bubble {
    width: 200px;
    height: 79px;
  }
  .wise-about-words
    .final-character-container
    .speech-bubble
    .speech-bubble-content {
    margin-left: 15px;
    margin-top: 5px;
  }
  .wise-about-words .final-character-container .speech-bubble p.h1 {
    font-size: 1.25rem;
  }
  /* No text version */
  .wise-about-words[data-display-text='false']
    .game-container
    .question-container
    .question-holder
    .question-character {
    width: 76px;
    height: 97px;
  }
  .language-arts-game[data-display-text='false']
    .game-container
    .question-container
    .question-holder
    .play-audio {
    min-width: 115px;
  }
  .wise-about-words[data-display-text='false']
    .game-container
    .question-container
    .match-container {
    margin-bottom: -5px;
  }
  .wise-about-words[data-display-text='false'] .final-character-container {
    margin-left: -80px;
  }
}

/* iPads */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  /* Styles */
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
  .wise-about-words .feedback-content .feedback-text p.h1 {
    font-size: 2.25rem !important;
  }
  /* No text version */
  .wise-about-words[data-display-text='false'] .final-character-container {
    margin-top: 20px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  /* Styles */
}

/* Secondary Version */
.wise-about-words[data-secondary-version='true'] {
  border-color: #2c2d2e;

  /* Title Screen */
  .title-screen {
    background-color: #547159;
    background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/title-screen-bg-secondary.jpg');
  }

  .title-screen .start-game-btn {
    margin-top: 70px;
    min-width: 185px;
  }

  /* Game Container */
  .language-arts-game-container {
    background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/game-bg-secondary.jpg');
    background-color: #547159;
  }

  /* Hide question character */
  .game-container .question-container .question-holder .question-character {
    display: none;
  }

  /* Question Holder */
  .game-container .question-container .question-holder {
    margin: 0 auto 30px auto;
  }

  .game-container .question-container .question-holder p {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
  }

  /* Drop Areas */
  .game-container .question-container .match-container {
    margin-bottom: 6.5rem;
  }

  .game-container .question-container .drag-container::before {
    content: '';
    position: absolute;
    left: 170px;
    top: -75px;
    width: 60px;
    height: 45px;
    background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/drag-hint-secondary.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .game-container .question-container .drop-area {
    background-image: none;
    filter: none;
    border-radius: 0;
    border: 5px solid #fff;
    width: 155px;
    height: 155px;
    margin-left: 2.25rem;
    margin-right: 2.25rem;
    position: relative;
  }

  .game-container .question-container .drop-area:first-child::after {
    content: '';
    background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/left-ground-secondary.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    bottom: -85px;
    left: -20px;
    width: 185px;
    height: 80px;
  }

  .game-container .question-container .drop-area:last-child::after {
    content: '';
    background-image: url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/right-ground-secondary.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    bottom: -80px;
    left: -12px;
    width: 170px;
    height: 75px;
  }

  /* Drag Container */
  .game-container .question-container .drag-container {
    position: relative;
  }

  .game-container .question-container .draggable-img-holder {
    width: 155px;
    height: 155px;
    border-radius: 0;
    margin-left: 2.25rem;
    margin-right: 2.25rem;
    background-color: #eef0e1;
    border: 5px solid #3c2415;
    -webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
  }

  .game-container .question-container .draggable-img-holder img {
    width: 155px;
    height: 155px;
  }

  .game-container .question-container .draggable-img-holder img,
  .game-container .question-container .match-img-holder img {
    border-radius: 0;
  }

  .game-container .question-container .match-container .play-audio,
  .game-container
    .question-container
    .drag-container
    .draggable-img-holder:has(img)
    .play-audio {
    top: 50px;
  }

  /* Feedback */
  .game-container
    .question-container
    .hide-draggables.drag-container
    .draggable-img-holder:not(.dropped) {
    visibility: hidden !important;
  }

  .game-container .question-container .feedback-container {
    padding: 1rem;
    background-color: #eef0e1;
    min-height: 100%;
    height: auto;
    -webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.5);
  }

  .game-container
    .question-container
    .feedback-container:has(.correct-feedback[style*='display: flex;']) {
    border: 3px solid #67b74b;
  }

  /* Confetti Styles */
  /* .game-container
    .question-container
    .feedback-container:has(
      .correct-feedback[style*='display: flex;']
    )::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    background-image: var(--confetti-background);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: contain;
    z-index: 1;
  } */

  .game-container
    .question-container
    .feedback-container:has(.incorrect-feedback[style*='display: flex;']) {
    border: 3px solid #f4ae34;
  }

  .correct-feedback,
  .incorrect-feedback {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    z-index: 2;
  }

  .correct-feedback *:not(button),
  .incorrect-feedback *:not(button) {
    text-align: left;
  }

  /* Final Screen */
  .final-screen-container {
    background-color: #547159;
    background-image: var(--confetti-background),
      url('https://s3.us-east-1.amazonaws.com/cms.accelerate-ed.com/templates/elementary/shared/production/language-arts-games/wise-about-words/img/final-screen-secondary.jpg');
    background-size: contain, cover;
    background-position: top center, center center;
    background-repeat: no-repeat;
    border: 1px solid #fff;
  }

  .final-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .retry-game-btn {
    margin-top: 175px;
  }

  /* Media Queries */
  @media all and (max-width: 1199px) {
    .game-container .question-container .drag-container::before {
      left: 115px;
    }
    .retry-game-btn {
      margin-top: 155px;
    }
  }

  @media all and (max-width: 991px) {
    .game-container .question-container .drag-container::before {
      left: 30px;
    }
    .game-container .question-container .draggable-img-holder,
    .game-container .question-container .drop-area {
      margin-left: 1.5rem;
      margin-right: 1.5rem;
    }
    .retry-game-btn {
      margin-top: 135px;
    }
  }
}