/* Настройки иконки задания и выреза на кнопке (общие переменные) */
:root {
  /* угол поворота выреза у кнопки */
  --notch-rotation: -135deg;

  /* НАСТРОЙКИ ИКОНКИ ЗАДАНИЯ */
  --task-icon-size: 50px;      /* размер иконки */
  --task-icon-offset-x: 5px;   /* смещение по X (от левого края карточки), отрицательное = вылезает влево */
  --task-icon-offset-y: 0px;   /* доп. смещение по Y, отрицательное = вверх, положительное = вниз */

  /* НАСТРОЙКИ КНОПОК-ВКЛАДОК ПОД ОКНОМ */
  --missions-tab-btn-size: 56px;
  --missions-tab-gap: 15px;
  --missions-tab-active-scale: 1.08;
  --missions-tab-transition: 0.12s ease-out;
}

/* ===== ОВЕРЛЕЙ МИССИЙ (обёртка #missionsModal) ===== */

.missions-modal {
  position: fixed;
  inset: 0;
  display: none; /* показываем через JS: style.display = 'flex' */
  align-items: flex-end;       /* окно прижато к низу */
  justify-content: center;
  padding: 0 0 50px;           /* отступ 20px от низа */
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  box-sizing: border-box;
}

/* можно использовать класс, если захочешь переключать через классы */
.missions-modal.is-hidden {
  display: none;
}

/* ===== АНИМАЦИИ ВЫЛЕТА / ЗАЛЁТА СНИЗУ ===== */

@keyframes missionsSlideUp {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes missionsSlideDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}

/* ===== ОБЩИЙ ВРАППЕР ОКНА + ВКЛАДКИ СНИЗУ ===== */

.tasks-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 550px;

  /* анимация вылета при появлении */
  animation: missionsSlideUp 0.25s ease-out forwards;
}

/* если захочешь использовать класс для закрытия (как у друзей):
   .missions-modal.is-closing .tasks-wrapper {
     animation: missionsSlideDown 0.22s ease-in forwards;
   }
*/

/* ===== ОБЩЕЕ ОКНО ЗАДАНИЙ ===== */

.tasks-window {
  width: 100%;
  background: #352110;
  border-radius: 13px;
  border: 1px solid #3b2617;
  overflow: hidden; /* чтобы три полосы были одним аккуратным блоком */
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 5px rgba(0, 0, 0, 0.45);
  font-family: "RubikBoldLocal", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ===== ВЕРХНЯЯ ПОЛОСА (заголовок) ===== */

.tasks-header {
  background: #FDDF86; /* светлый верх как на скрине */
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 13px 13px 0 0;
  border-bottom: 3px solid #7B593A;
}

.tasks-title {
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #50362A;
}

.tasks-close {
  border: none;
  background: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.tasks-close img {
  width: 90%;
  height: 90%;
  display: block;
}

/* ===== СРЕДНЯЯ ПОЛОСА (фон под описанием) ===== */

.tasks-middle {
  background: #523524;          /* средний по тону цвет */
  padding: 7px 20px 7px;
}

.tasks-description {
  font-size: 13px;
  text-align: center;
  color: #C5AD8B;
}

/* ===== НИЖНЯЯ ПОЛОСА (фон под заданиями) ===== */

.tasks-bottom {
  background: #352110;          /* самый тёмный низ */
  padding: 0px 5px 0px;
  border-radius: 0 0 13px 13px;
}

.tasks-body {
  padding: 0;
  color: #FDDF86;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ОБЩИЙ СТИЛЬ ДЛЯ ОБЕИХ ЛИСТОВ (игровые / партнёрские) */
.tasks-list {
  margin-top: 0;
  max-height: 410px;
  overflow-y: auto;
  padding: 10px 4px 0 0;        /* было только padding-right: 4px; */
}

.tasks-list::-webkit-scrollbar {
  width: 5px;
}

.tasks-list::-webkit-scrollbar-track {
  background: #2b190f;
  border-radius: 3px;
}

.tasks-list::-webkit-scrollbar-thumb {
  background: #8f6136;
  border-radius: 3px;
}

/* ===== ОДНО ЗАДАНИЕ ===== */

.task-item {
  background: #24150A;
  border-radius: 9px;
  padding: 8px 10px 10px 60px; /* слева место под иконку */
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 0 #423320;
  margin-bottom: 8px;
  position: relative;
  overflow: visible; /* иконка может выходить за пределы карточки */
  transition: opacity 0.15s ease-out;
}

/* состояние "задание забрано" */
.task-item--completed {
  opacity: 0.45;
}

.task-icon-wrap {
  position: absolute;
  width: var(--task-icon-size);
  height: var(--task-icon-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(0px + var(--task-icon-offset-x));
  top: calc(50% + var(--task-icon-offset-y));
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5; /* поверх содержимого карточки */
}

.task-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: block;
}

.task-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.task-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.task-title {
  font-size: 15px;
  color: #ffe8bf;
}

.task-percent {
  font-size: 12px;
  color: #ffc14a;
  flex-shrink: 0;
}

.task-progress-wrap {
  background: #523524;
  border-radius: 2px;
  height: 5px;
  overflow: hidden;
  border: 0.8px solid #523524;
}

.task-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb347 0%, #ff9440 100%);
  border-radius: inherit;
  width: 0%;
}

.task-subtext {
  font-size: 11px;
  color: #d9b48b;
  text-align: center;
  width: 100%;
  align-self: center;
}

/* звёзды оставляем в коде, но прячем */
.task-stars {
  margin-top: 2px;
  display: none;
  gap: 2px;
  font-size: 13px;
  color: #f0c46b;
}

.task-star--empty {
  opacity: 0.35;
}

.task-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 85px;
}

/* когда вместо кнопки галочка */
.task-check {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

/* ===== КНОПКА COLLECT (КОРИЧНЕВАЯ) ===== */

.collect-btn {
  position: relative;
  width: 85px;   /* в 2 раза меньше по сравнению с исходной */
  height: 45px;
  border-radius: 8px;
  border: none;
  background: #895E35;
  box-shadow: 0 4px 0 #523723;
  padding: 2px 2px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fbe6c2;
  border-bottom: 0.25px solid #B28452;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  font-family: "RubikBoldLocal", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out;
}

.collect-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.collect-btn:active,
.collect-btn.is-pressed {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #523723;
}

.collect-btn__top {
  position: relative;
  flex: 0 0 22px;
  border-radius: 7px;
  background: #452B1D;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  font-size: 14px;
  font-family: "RubikBoldLocal", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
  border-bottom: 1.3px solid #B28452;
}

.collect-btn__notch {
  position: absolute;
  right: 8px;
  top: -15px;
  width: 0;
  height: 0;
  border-left: 10px solid #895E35;
  border-bottom: 10px solid transparent;
  border-radius: 2.5px;
  transform-origin: center bottom;
  transform: rotate(var(--notch-rotation));
}

.collect-btn__icon-wrap {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collect-btn__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.collect-btn__price {
  color: #ffd34e;
  text-shadow: 0 1px 0 #3b2617;
  font-family: "RubikBoldLocal", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.collect-btn__bottom {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  font-weight: 900;
  font-size: 13px;
  color: #452b1d;
  font-family: "RubikBoldLocal", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  gap: 4px;
}

.collect-btn__bottom-text {
  display: inline-block;
}

.collect-btn__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(69, 43, 29, 0.4);
  border-top-color: #fbe6c2;
  animation: collectSpinner 0.7s linear infinite;
  flex-shrink: 0;
}

/* прячем спиннер / текст по состоянию */
.collect-btn .collect-btn__spinner {
  display: none;
}

.collect-btn.is-loading .collect-btn__spinner {
  display: inline-block;
}

.collect-btn.is-loading .collect-btn__bottom-text {
  display: none;
}

@keyframes collectSpinner {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Цветные вариации (оставляю, ничего не теряем) */

.collect-btn--green {
  background: #00E800;
  box-shadow: 0 4px 0 #008126;
  border-bottom-color: #52FC35;
  color: #e8ffe1;
}
.collect-btn--green:active,
.collect-btn--green.is-pressed {
  box-shadow: 0 2px 0 #2e5b24;
}
.collect-btn--green .collect-btn__top {
  background: #007322;
  border-bottom-color: #52FC35;
}
.collect-btn--green .collect-btn__bottom {
  color: #005018;
}
.collect-btn--green .collect-btn__notch {
  border-left-color: #00E800;
}

.collect-btn--blue {
  background: #00BFF7;
  box-shadow: 0 4px 0 #00529C;
  border-bottom-color: #00F1FF;
  color: #e1f4ff;
}
.collect-btn--blue:active,
.collect-btn--blue.is-pressed {
  box-shadow: 0 2px 0 #1b425b;
}
.collect-btn--blue .collect-btn__top {
  background: #005DB0;
  border-bottom-color: #00F1FF;
}
.collect-btn--blue .collect-btn__bottom {
  color: #105086;
}
.collect-btn--blue .collect-btn__notch {
  border-left-color: #00BFF7;
}

.collect-btn--purple {
  background: #6E3A93;
  box-shadow: 0 4px 0 #44225e;
  border-bottom-color: #C689FF;
  color: #f5e8ff;
}
.collect-btn--purple:active,
.collect-btn--purple.is-pressed {
  box-shadow: 0 2px 0 #44225e;
}
.collect-btn--purple .collect-btn__top {
  background: #3C1E53;
  border-bottom-color: #C689FF;
}
.collect-btn--purple .collect-btn__bottom {
  color: #301745;
}
.collect-btn--purple .collect-btn__notch {
  border-left-color: #6E3A93;
}

/* адаптив под маленькие экраны */

@media (max-width: 380px) {
  .tasks-window {
    width: 100%;
  }
  .task-item {
    padding: 10px 8px 10px 56px;
  }
  .collect-btn {
    width: 80px;
    height: 36px;
  }
}

/* ===== КНОПКИ-ВКЛАДКИ ПОД ОКНОМ (ИГРОВЫЕ / ПАРТНЕРСКИЕ) ===== */

.missions-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.missions-tabs__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--missions-tab-gap);
}

.missions-tab-btn {
  width: var(--missions-tab-btn-size);
  height: var(--missions-tab-btn-size);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--missions-tab-transition);
}

.missions-tab-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.missions-tab-btn.is-active {
  transform: scale(var(--missions-tab-active-scale));
}