/* Optionally keep font import if you want to use Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

body.bg-primary.bg-gradient {
  background: #f6f8fa !important; /* very light gray-blue, high contrast */
}

/* For high-contrast mode, add a fallback */
@media (prefers-contrast: more) {
  body.bg-primary.bg-gradient {
    background: #fff !important;
  }
}

.sortable-list {
  /* display: flex; flex-wrap: wrap; */
  /* max-width: 825px; */
  /* background: #fff; */
  /* flex-direction: row; */
  /* border-radius: 7px; */
  /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); */
  /* padding: 30px 25px 20px; */
  /* Remove all custom styles here, use Bootstrap classes instead */
  min-width: 220px;
}

.sortable-list .item {
  /* background: #fff; */
  /* border-radius: 5px; */
  /* padding: 10px 13px; */
  /* margin-bottom: 11px; */
  /* border: 1px solid #ccc; */
  /* justify-content: space-between; */
  /* cursor: move; */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.06); */
  /* Remove all custom styles here, use Bootstrap classes instead */
  min-width: 38px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #fff;
  cursor: grab;
}

.item .details .letter {
  font-size: 1.13rem;
  max-width: 28px;
  border: none;
  background: transparent;
  text-align: center;
}

.item i {
  color: #47474755;
  font-size: 1.13rem;
  margin-left: 2px;
}

/* Accessible, high-contrast, colorblind-friendly palette */
.letter-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(135deg, #fffbe7 0%, #f2d16b 100%);
  color: #212121;
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13), 0 1.5px 0 #b59a00 inset;
  margin: 0.18rem;
  border: 2px solid #b59a00;
  transition: transform 0.12s cubic-bezier(.4,2,.6,1), box-shadow 0.12s;
  cursor: grab;
  user-select: none;
  letter-spacing: 0.08em;
}
.letter-tile:active {
  transform: scale(0.96) rotate(-2deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.letter-tile.dragging {
  opacity: 0.7;
  box-shadow: 0 6px 24px rgba(60,60,60,0.25), 0 1.5px 0 #b59a00 inset;
  background: linear-gradient(135deg, #ffe066 0%, #b59a00 100%);
  z-index: 10;
}
.permanent-word .letter-tile {
  background: linear-gradient(135deg, #e0ffe7 0%, #d7f9fa 100%);
  color: #2a2a2a;
  border: 2px solid #00a37a;
  cursor: default;
  opacity: 0.92;
}
.tile-icon {
  font-size: 1.35rem;
  margin-right: 0.22em;
  color: #b59a00;
  filter: drop-shadow(0 1px 1px #fff8) drop-shadow(0 0 2px #ffe06677);
  vertical-align: middle;
  transition: color 0.2s;
}
.letter-tile:active .tile-icon {
  color: #0072b2;
}
.tile-letter {
  display: inline-block;
  vertical-align: middle;
}
#question-box {
  background: linear-gradient(120deg, #f7faff 60%, #e7f1ff 100%);
  border: 2px solid #0072b2;
  box-shadow: 0 6px 32px rgba(0, 114, 178, 0.10), 0 1.5px 0 #0072b2 inset;
  border-radius: 2.2rem;
  animation: questionBoxPopIn 0.6s cubic-bezier(.5,1.5,.5,1) both;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.question-icon {
  font-size: 2.6rem;
  color: #0072b2;
  filter: drop-shadow(0 1px 1px #fff8) drop-shadow(0 0 3px #e7f1ff77);
  animation: questionIconSpin 1.2s cubic-bezier(.6,1.5,.5,1) infinite alternate;
}
#question-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: #0072b2;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px #fff7;
}
#answer-input.form-control-lg {
  border-radius: 1.3rem 0 0 1.3rem;
  font-size: 1.25rem;
  box-shadow: 0 2px 8px #0072b233;
  border: 2px solid #0072b2;
  color: #212121;
  background: #fff;
}
#submit-answer.btn-lg {
  border-radius: 0 1.3rem 1.3rem 0;
  font-size: 1.3rem;
  padding-left: 1.2em;
  padding-right: 1.2em;
  background: linear-gradient(120deg, #0072b2 60%, #005b8a 100%);
  border: 2px solid #0072b2;
  color: #fff;
  box-shadow: 0 1px 4px #0072b233;
  transition: background 0.18s, color 0.18s;
}
#submit-answer.btn-lg:hover, #submit-answer.btn-lg:focus {
  background: linear-gradient(120deg, #005b8a 60%, #0072b2 100%);
  color: #fff;
  border-color: #005b8a;
}
#feedback {
  font-size: 1.1rem;
  font-weight: 500;
  color: #005b8a;
  min-height: 1.2em;
  margin-top: 0.5em;
  text-shadow: 0 1px 2px #fff7;
  transition: color 0.18s;
}

/* Accessibility-friendly h1 (main title) colors */
.sexy-title {
  color: #1a237e; /* deep blue for max contrast */
  text-shadow: 0 2px 6px #fff, 0 1px 0 #b3b3b3;
}
.sexy-title .text-warning {
  color: #0072b2 !important; /* strong blue, accessible */
  text-shadow: none;
}
.sexy-title .text-success {
  color: #388e3c !important; /* dark green, accessible */
  text-shadow: none;
}
.sexy-title .bi-stars {
  color: #b59a00;
  filter: drop-shadow(0 1px 1px #fff8);
  vertical-align: -0.18em;
}

/* Animate tiles in with a pop/fade effect */
.tile-animate {
  animation: tilePopIn 0.45s cubic-bezier(.6,1.5,.5,1) both;
}
@keyframes tilePopIn {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-8deg);
    filter: blur(2px);
  }
  70% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: none;
  }
}

/* Sexy animated question box */
@keyframes questionBoxPopIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(-18px) rotate(-2deg);
    filter: blur(2px);
  }
  70% {
    opacity: 1;
    transform: scale(1.04) translateY(2px) rotate(2deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0);
    filter: none;
  }
}
@keyframes questionIconSpin {
  0% { transform: rotate(-10deg) scale(0.96); }
  100% { transform: rotate(10deg) scale(1.08); }
}

/* Make the checkmark beside the correct word big and visually prominent */
.big-checkmark {
  font-size: 2.5rem !important;
  vertical-align: middle;
  margin-left: 1rem;
}

#sortable-lists {
  position: relative;
}

#checkmark-sortable-list1 {
  position: absolute;
  top: 0;
  right: -53px;
}

.item .bi-grip-vertical {
  margin-left: 0.2em;
  cursor: grab;
  pointer-events: none; /* Prevents drag interference */
}

.item.dragging {
  opacity: 0.5;
}

.item {
  cursor: grab;
}

/* --- Advanced Tile Visual Cues --- */

.tile-filled {
  background: #fffbe6;
  border: 2px solid #ffc107;
  color: #333;
  box-shadow: 0 2px 8px #ffe08266;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s;
}

.tile-blank {
  background: #f0f0f0;
  border: 2px dashed #bbb;
  color: #bbb;
  opacity: 0.7;
  transition: background 0.2s, border 0.2s, opacity 0.2s;
}

.tile-dragging {
  opacity: 0.6 !important;
  box-shadow: 0 0 18px 2px #ffc107, 0 0 3px 1px #ff9800;
  border-color: #ff9800 !important;
  z-index: 1000 !important;
  touch-action: none;
}

/* On mobile, hide ghost image for drag-drop-touch polyfill */
@media (pointer: coarse) {
  .tile-dragging {
    opacity: 1 !important;
    background: #ffe066 !important;
    box-shadow: 0 0 12px 2px #ffc107;
  }
}


/* Correct order cue */
.permanent-word .tile-filled {
  background: #e6ffe6;
  border-color: #28a745;
  box-shadow: 0 0 8px 2px #28a74544;
  color: #155724;
}

/* Incorrect order cue (shake animation) */
.tile-wrong-order {
  animation: shake 0.35s cubic-bezier(.36,.07,.19,.97) both;
  border-color: #dc3545 !important;
  background: #fff0f0;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Highlight tile on hover */
.letter-tile.item:hover {
  box-shadow: 0 0 0 2px #0d6efd44;
  border-color: #0d6efd;
  z-index: 2;
}

/* Editable tile focus effect */
.letter-tile[contenteditable="true"]:focus {
  outline: 2px solid #0d6efd;
  background: #e7f1ff;
}

/* Optional: subtle transition for all tiles */
.letter-tile {
  transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
}

.letter-tile.tile-skipped {
  background: repeating-linear-gradient(135deg, #ffe066, #ffe066 8px, #fffbe6 8px, #fffbe6 16px);
  color: #b8860b;
  border: 2px dashed #ffd700;
  box-shadow: 0 0 8px 2px #ffe06677;
  position: relative;
}
.letter-tile.tile-skipped::after {
  content: '\26A0'; /* warning symbol */
  position: absolute;
  right: 6px;
  top: 2px;
  font-size: 1.1em;
  color: #b8860b;
}

.letter-tile.tile-revealed {
  background: #d1f5d3;
  color: #176c2a;
  font-weight: bold;
  border: 2px solid #42b983;
  box-shadow: 0 0 6px 1px #42b98355;
  position: relative;
  z-index: 2;
}

/* Style and animate summary card like question box */
.card.question-box-animate {
  background: linear-gradient(120deg, #f7faff 60%, #e7f1ff 100%);
  border: 2px solid #0072b2;
  box-shadow: 0 6px 32px rgba(0, 114, 178, 0.10), 0 1.5px 0 #0072b2 inset;
  border-radius: 2.2rem;
  animation: questionBoxPopIn 0.6s cubic-bezier(.5,1.5,.5,1) both;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* Feedback colors for tile input */
.letter-tile.correct-letter {
  background-color: #28a745 !important;
  color: #fff !important;
}
.letter-tile.incorrect-letter {
  background-color: #dc3545 !important;
  color: #fff !important;
}