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

/* General */
.sorting-game {
  border-color: #e6e9ec;
}

/* Title Screen & Game Container */
.sorting-game .title-screen,
.sorting-game .language-arts-game-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f0f3f6;
}

/* Title Screen */
.sorting-game .title-screen {
  background-image: url('./img/title-screen-bg.jpg');
}

.sorting-game.language-arts-game .start-game-btn {
  margin-top: auto;
  margin-bottom: 3rem;
}

/* Game Container */
.sorting-game .language-arts-game-container {
  background-image: url('./img/game-bg.jpg');
}

/* Game Container */
.sorting-game .language-arts-game-container {
  border-color: #fff;
  background-color: #f0f3f6;
}

.sorting-game .game-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}

.sorting-game .game-container .question-container {
  width: 100%;
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Drag and Drop */
.sorting-game .draggable-item,
.sorting-game .card {
  padding: 1rem;
  position: relative;
  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;
  border-radius: 1rem;
  background-color: #f2f4f8;
  -webkit-box-shadow: -0.5rem -0.5rem 0.5rem rgba(255, 255, 255, 0.75) /* Subtle white shadow (top-left) */,
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  box-shadow: -0.5rem -0.5rem 0.5rem rgba(255, 255, 255, 0.75) /* Subtle white shadow (top-left) */,
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.sorting-game .draggable-item,
.sorting-game .drop-area {
  margin: 0 auto;
  min-height: 50px;
  padding: 0;
}

.sorting-game .draggable-item {
  cursor: move;
  border: 1px solid #eee;
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  -o-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}

.sorting-game .draggable-item.dragging {
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  -o-transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  -webkit-box-shadow: -0.5rem -0.5rem 0.5rem rgba(255, 255, 255, 0.1) /* Subtle white shadow (top-left) */,
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  box-shadow: -0.5rem -0.5rem 0.5rem rgba(255, 255, 255, 0.1) /* Subtle white shadow (top-left) */,
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.sorting-game .draggable-item.blue {
  background-color: #5681d7;
  border-color: #5681d7;
  color: #fff;
}

.sorting-game .drop-area .draggable-item {
  margin: 0px;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.sorting-game .drop-area {
  border-radius: 1rem;
  background-color: #99ccff;
  -webkit-box-shadow: inset 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.sorting-game .drop-area.ui-state-disabled .draggable-item {
  cursor: default;
}

.sorting-game .card {
  border: 1px solid transparent;
}

.sorting-game .card:has(.answered-correct) {
  border-color: var(--success);
}

.sorting-game .card:has(.answered-incorrect) {
  border-color: var(--danger);
}

.sorting-game .card .drop-area {
  width: 100%;
}

/* .sorting-game .feedback:has(.next-btn:not(.d-none))::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;
} */

/* jQuery UI Edits */
.sorting-game .ui-state-disabled,
.sorting-game .ui-widget-content .ui-state-disabled,
.sorting-game .ui-widget-header .ui-state-disabled {
  opacity: 1;
}

.sorting-game .icon {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: #fff;
  border-radius: 50%;
  font-size: 1.5rem;
  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
}

.sorting-game i.correct {
  color: var(--success);
}

.sorting-game i.incorrect {
  color: var(--danger);
}

/* Text Feedback */
.sorting-game .feedback-area {
  width: 100%;
  /* Matches .row padding since every layout will be created with rows & columns */
  padding-right: 15px;
  padding-left: 15px;
}

.sorting-game .feedback-area .feedback {
  position: relative;
  padding: 1rem;
  border-radius: 1rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  /* box-shadow: inset 0 0.15rem 0.5rem rgba(0, 0, 0, 0.1); */
}

.sorting-game .feedback-area .feedback * {
  position: relative;
  z-index: 2;
}

/* Final Screen */
.sorting-game .final-screen-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-image: var(--confetti-background), url('./img/final-screen-bg.jpg');
  background-size: contain, cover;
  background-position: top center, center center;
  background-repeat: no-repeat;
  background-color: #f0f3f6;
}

.sorting-game.language-arts-game .final-screen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.sorting-game.language-arts-game .retry-game-btn {
  margin-top: auto;
  margin-bottom: 8rem;
}

/* Media Queries */
@media all and (max-width: 1199px) {
  .sorting-game.language-arts-game .retry-game-btn {
    margin-bottom: 6rem;
  }
}

@media all and (max-width: 991px) {
  .sorting-game.language-arts-game .start-game-btn {
    margin-bottom: 1rem;
  }
  .sorting-game.language-arts-game .retry-game-btn {
    margin-bottom: 4rem;
  }
}

@media all and (max-width: 767px) {
  .sorting-game.language-arts-game .start-game-btn {
    margin-bottom: -0.5rem;
  }
}