.container {
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url("/images/chitalka/orangeBg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow-x: hidden;
}

.backButton {
  position: absolute;
  top: 32px;
  left: 32px;
  background: rgba(249, 237, 215, 0.12);
  backdrop-filter: blur(50px);
  border: 1px solid rgba(253, 243, 229, 0.2);
  border-radius: 8px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;

  &:hover {
    transform: scale(1.1);
  }

  img {
    width: 24px;
    height: 24px;
  }
}

.header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.title {
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  text-transform: uppercase;
  color: #fcefd8;
  margin: 0 0 16px 0;
}

.subtitle {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: #fcefd8;
  margin: 0;
}

.pageCounter {
  position: absolute;
  top: 0;
  right: 0;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fcefd8;
}

.question {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  color: #fcefd8;
  text-align: center;
  margin: 0 0 40px 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.optionsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  // margin: 0 auto 40px auto;
  align-items: stretch; /* Делаем карточки одинаковой высоты */

  // Каждая карточка занимает 1/4 ширины минус gap
  & > * {
    flex: 1 1 calc(25% - 15px); /* 25% ширины минус gap */
    min-width: 200px; /* Минимальная ширина для адаптивности */
  }
}

.optionCard {
  background: #fcefd8;
  backdrop-filter: blur(50px);
  border-radius: 12px;
  padding: 32px;
  cursor: default;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  position: relative;
  border: 1px solid transparent;

  // Добавляем дополнительную высоту когда есть назначенный ответ
  &.assigned,
  &.correct {
    padding-bottom: 92px; /* Увеличиваем нижний отступ на 50px + отступ кнопки */
  }

  // &:hover {
  //   border-color: rgba(253, 243, 229, 0.5);
  //   background: rgba(252, 239, 216, 0.18);
  // }

  &.correct {
    max-height: 500px;
    background: #6fcc41b2;
    border: 1px solid #fcefd8;

    .optionImage {
      border: 1px solid #fcefd8;
    }

    .optionText,
    .optionAuthorName {
      color: #fcefd8;
    }
  }

  &.error {
    // border-color: #f44336 !important;
    background: rgba(244, 67, 54) !important;
    animation: errorShake 0.5s ease-in-out;
    border: 1px solid #fcefd8;

    .optionImage {
      border: 1px solid #fcefd8;
    }

    .optionText,
    .optionAuthorName {
      color: #fcefd8;
    }
  }

  &.incorrect {
    // border-color: #f44336 !important;
    background: rgba(244, 67, 54) !important;
    border: 1px solid #fcefd8;

    .optionImage {
      border: 1px solid #fcefd8;
    }

    .optionText,
    .optionAuthorName {
      color: #fcefd8;
    }
  }

  // Стиль для карточки, над которой находится перетаскиваемый элемент
  &.dragOver {
    border: 2px solid #6fcc41;
    box-shadow: 0 0 20px rgba(111, 204, 65, 0.5);
    transform: scale(1.02);
    background: rgba(111, 204, 65, 0.1);
  }
}

@keyframes errorShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.optionImage {
  pointer-events: none;
  width: 160px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  background: #d551493d;
  border: 1px solid transparent;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  // Класс для изображений в формате jpg/jpeg - используем cover
  &.jpgImage {
    img {
      object-fit: cover !important;
      object-position: 40% 20%;
    }
  }

  // Класс для отключения фона
  &.noBackground {
    background: none;
  }
}

.optionText {
  width: 100%;
  font-family: Inter;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 22px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  color: #2f2f2f;
}

// Условное выравнивание текста в зависимости от наличия автора и поля textLeft
.optionCard.hasAuthor .optionText {
  text-align: left; // По умолчанию выравнивание по левому краю если есть автор
}

.optionCard.noAuthor .optionText {
  text-align: center; // Центрирование если автора нет
}

// Если нет автора, но textLeft: true - выравниваем по левому краю
.optionCard.noAuthor.textLeftTrue .optionText {
  text-align: left;
}

// Если есть автор и textLeft: true - выравниваем по левому краю
.optionCard.hasAuthor.textLeftTrue .optionText {
  text-align: left;
}

.optionCard.hasAuthor.textLeftTrue .optionAuthorName {
  text-align: left;
  margin-left: 0; // Убираем margin-left: auto для левого выравнивания
}

// Если есть автор, но textLeft: false - центрируем текст
.optionCard.hasAuthor.textLeftFalse .optionText {
  text-align: center;
}

.optionCard.hasAuthor.textLeftFalse .optionAuthorName {
  text-align: center;
  margin-left: 0; // Убираем margin-left: auto когда центрируем
}

// Убираем фон у изображения если нет автора
.optionCard.noAuthor .optionImage {
  background: none; // Убираем фон если автора нет
  img {
    object-fit: contain;
  }
}

// Стили для разделенной верстки
.splitLeft,
.splitRight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1; // Каждая часть занимает равную ширину
  padding: 10px; // Внутренние отступы
  background: #f9e2cd;
  border-radius: 12px;
}

.splitRight {
  border-right: none; // Убираем границу у правой части
}

// Для разделенной верстки убираем gap у карточки
.optionCard:has(.splitLeft) {
  gap: 12px;
  flex-direction: row; // Горизонтальное расположение
  align-items: stretch; // Растягиваем по высоте
  min-height: 310px; // Минимальная высота для разделенных карточек

  .optionImage {
    width: 80px;
    height: 80px;
    background: #d551493d;
  }

  // Убираем margin-left: auto у имени автора в разделенных карточках
  .optionAuthorName {
    margin-left: 0;
  }

  // Центрируем текст в разделенных карточках
  .optionText {
    text-align: center;
  }
}

.optionAuthorName {
  font-family: Inter;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #2f2f2f;
  margin-left: auto;
}

.assignedButton {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #6fcc41;
  color: white;
  padding: 13px;
  border-radius: 12px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Inter;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 18px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;

  &:hover {
    background: #5eb838;
    transform: translateX(-50%) scale(1.05);
  }

  &::before {
    content: "✓";
    font-size: 16px;
    font-weight: 700;
  }

  .removeIcon {
    font-size: 16px;
    font-weight: 700;
    margin-left: 4px;
  }
}

.dragButtonsContainer {
  margin-top: auto;
  padding-top: 20px;
}

.dragInstruction {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #fcefd8;
  text-align: center;
  margin: 0 0 20px 0;
}

.dragButtons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.dragButton {
  background: #fcefd8;
  border-radius: 8px;
  padding: 20px 15px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #d55149;
  cursor: grab;
  transition: all 0.3s ease;
  user-select: none;
  min-width: 120px;
  text-align: center;

  &:hover:not(.used):not(.dragging) {
    // background: rgba(252, 239, 216, 0.25);
    transform: translateY(-2px);
    // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  &.dragging {
    cursor: grabbing;
    opacity: 0; // Полностью скрываем элемент, так как он перемещается вместе с курсором
    // Не используем pointer-events: none, так как это блокирует события drag
  }

  &.used {
    display: none; // Полностью скрываем использованный элемент из меню
  }

  &:active:not(.used) {
    cursor: grabbing;
  }
}

// Адаптивность
@media (max-width: 1200px) {
  .optionsGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .dragButtons {
    gap: 12px;
  }

  .dragButton {
    min-width: 100px;
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .optionsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .title {
    font-size: 20px;
  }

  .question {
    font-size: 16px;
  }

  .dragInstruction {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 20px;
  }

  .backButton {
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;

    img {
      width: 20px;
      height: 20px;
    }
  }

  .optionsGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .optionCard {
    min-height: 150px;
    padding: 16px;
  }

  .optionImage {
    width: 100px;
    height: 70px;
  }

  .optionText {
    font-size: 14px;
  }

  .title {
    font-size: 18px;
  }

  .question {
    font-size: 14px;
  }

  .dragButtons {
    gap: 8px;
  }

  .dragButton {
    min-width: 80px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .checkButton {
    font-size: 16px;
    padding: 14px 28px;
    min-width: 160px;
  }

  .assignedButton {
    font-size: 10px;
    padding: 4px 8px;
  }
}

// Мобильные стили для touch-интерфейса
.mobileSelected {
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.6);
  border: 2px solid #4a90e2;
  transform: scale(1.02);
}

.mobileButtonSelected {
  background: #4a90e2 !important;
  color: white !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

.clearSelectionButton {
  margin-top: 15px;
  padding: 8px 16px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #ff5252;
    transform: translateY(-1px);
  }
}