/* [missions] Задания и бесплатные награды + компактная карточка тура на главном экране. Подключается после styles.css. */

/* ---- Главный экран: карточка тура ниже, справа — колонка иконок ---- */
@media (orientation: portrait) {
  .car-wrap { --cw: min(66vw, 316px); min-height: 340px; }
  .carousel { align-items: center; }
  .tcard { height: 404px; max-height: 100%; }
  .tcard .tc-head { padding: 0 8px 5px; }
  .tcard .ribbon { height: 26px; margin: 6px -22px 4px; }
  .tcard .ribbon span { font-size: 15px; }
  .tcard .tc-title { font-size: 17px; }
  .tcard .tc-sub { font-size: 11px; margin-top: 1px; }
  .tcard .tc-rules { padding: 5px 8px; }
  .tcard .tr-bar { height: 16px; }
  .tcard .tc-hero { min-height: 40px; }
  .tcard .tc-lock { font-size: 48px; }
  .tcard .tc-foot { padding: 6px 8px 8px; gap: 5px; }
  .tcard .tc-reward { padding: 3px 10px; }
  .tcard .tc-reward b { font-size: 16px; }
  .tcard .cta { min-height: 48px; font-size: 18px; }
  .tcard .cta.locked { font-size: 12px; }
  .tcard .tc-fee { font-size: 10px; }
  .car-arrow { top: 58%; }
}
.mis-dock { position: absolute; right: 8px; top: max(6px, calc(50% - 200px)); z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.mis-btn {
  position: relative; width: 54px; padding: 5px 0 4px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; color: #fff; font-family: inherit;
  background: linear-gradient(180deg, rgba(60, 110, 190, .96), rgba(20, 48, 100, .97)); border: 1.5px solid rgba(170, 210, 255, .6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 3px 0 rgba(5, 14, 32, .85), 0 6px 12px rgba(0, 0, 0, .35); touch-action: manipulation;
}
.mis-btn:active { transform: translateY(2px); }
.mis-ico { font-size: 25px; line-height: 1.1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.mis-lbl { font-size: 9.5px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.mis-badge {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; font-style: normal; font-size: 12px; font-weight: 900; line-height: 17px; text-align: center; color: #fff;
  background: linear-gradient(180deg, #ff6a5c, #d4261a); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
@media (orientation: landscape) and (max-height: 520px) {
  .mis-dock { top: 6px; }
}

/* Магазин: ссылка вместо карточки «Бесплатная награда» */
.mis-shoplink {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 4px; padding: 9px 14px; border-radius: 12px; cursor: pointer; font-family: inherit; color: #fff; font-size: 14px; font-weight: 800;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line); touch-action: manipulation;
}
.mis-shoplink b { color: #9cf04a; font-weight: 900; }

/* ---- Окно «БЕСПЛАТНОЕ ВОЗНАГРАЖДЕНИЕ» ---- */
.modal.mis-modal { max-width: 420px; padding: 0; background: linear-gradient(180deg, #2a4f8c, #16305e); border: 2px solid #8fc0ff; border-radius: 18px; overflow: hidden; }
.mis-wrap { display: flex; flex-direction: column; height: min(86vh, 740px); }
.mis-head { position: relative; flex: none; padding: 12px 44px 6px 12px; }
.mis-ribbon { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; }
.mis-ribbon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #4aa3ff, #1c63c9); border-radius: 4px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 #11407f; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); }
.mis-ribbon span { position: relative; font-size: 15px; font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 0 rgba(8, 40, 100, .8); white-space: nowrap; }
.mis-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border-radius: 9px; border: 2px solid #ffb3ac; background: linear-gradient(180deg, #ff6a5c, #d4261a); color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 2px 0 #7e130b; touch-action: manipulation; }
.mis-tabs { flex: none; display: flex; gap: 4px; padding: 6px 10px 0; }
.mis-tab { position: relative; flex: 1; min-width: 0; height: 36px; padding: 0 2px; font-family: inherit; font-size: 10.5px; font-weight: 900; letter-spacing: .01em; color: #cfe0ff; cursor: pointer; border: 1px solid rgba(170, 210, 255, .35); border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(8, 24, 56, .55); touch-action: manipulation; white-space: nowrap; }
.mis-tab.on { color: #fff; background: linear-gradient(180deg, #4aa3ff, #2a73d8); border-color: #bfe0ff; text-shadow: 0 1px 0 rgba(8, 40, 100, .7); }
.mis-tab-dot { position: absolute; top: -6px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; font-style: normal; font-size: 10px; font-weight: 900; line-height: 14px; background: #e8372b; border: 1.5px solid #fff; color: #fff; }
.mis-reset { flex: none; text-align: center; font-size: 12px; font-weight: 800; color: #cfe0ff; padding: 7px 10px; background: rgba(6, 18, 44, .55); min-height: 18px; }
.mis-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; background: rgba(6, 18, 44, .4); -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.mis-row { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: linear-gradient(180deg, #f6f9fe, #dde7f5); border: 1px solid #fff; box-shadow: 0 3px 0 rgba(5, 14, 32, .55); color: #14264a; }
.mis-row.done { box-shadow: 0 0 0 2px #7ed321, 0 3px 0 rgba(5, 14, 32, .55); }
.mis-row.claimed { opacity: .55; filter: saturate(.6); }
.mis-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mis-text { font-size: 13px; font-weight: 800; line-height: 1.2; }
.mis-reward { align-self: flex-start; padding: 2px 10px; border-radius: 8px; background: #8e99ab; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .18); font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.mis-bar { height: 5px; border-radius: 3px; background: rgba(20, 38, 74, .18); overflow: hidden; }
.mis-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #5db6ff, #2a73d8); }
.mis-side { flex: none; width: 84px; display: flex; align-items: center; justify-content: center; }
.mis-prog { font-size: 19px; font-weight: 900; color: #14264a; }
.mis-got { font-size: 12px; font-weight: 900; color: #2f7a12; text-align: center; }
.mis-claim { width: 84px; min-height: 40px; padding: 0 4px; border-radius: 11px; border: 1px solid #c2f58a; background: linear-gradient(180deg, #7ed321, #3c9a12); color: #fff; font-family: inherit; font-size: 14px; font-weight: 900; letter-spacing: .02em; cursor: pointer; text-shadow: 0 2px 0 rgba(20, 70, 0, .7); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 #2a6e0b; touch-action: manipulation; animation: misPulse 1.4s ease-in-out infinite; }
.mis-claim:active { transform: translateY(2px); }
@keyframes misPulse { 50% { filter: brightness(1.15); } }
.mis-soon { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #cfe0ff; padding: 20px; }
.mis-soon-ico { font-size: 52px; opacity: .8; }
.mis-soon b { font-size: 26px; font-weight: 900; color: #fff; }
.mis-soon span { font-size: 13px; max-width: 240px; line-height: 1.35; }

/* 3 бесплатные награды */
.mis-free { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 8px calc(10px + var(--sab, 0px)); background: linear-gradient(180deg, rgba(8, 24, 56, .85), rgba(8, 24, 56, .98)); border-top: 2px solid rgba(170, 210, 255, .4); }
.mis-tile { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 4px 6px; border-radius: 12px; background: linear-gradient(180deg, #f6f9fe, #d5e1f3); border: 1px solid #fff; box-shadow: 0 3px 0 rgba(5, 14, 32, .6); color: #14264a; }
.mis-t-title { height: 26px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 9.5px; font-weight: 900; line-height: 1.1; letter-spacing: .01em; }
.mis-t-img { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 58px; }
.mis-chest { width: 62px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4)); }
.mis-gem { font-size: 44px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
.mis-t-img em { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 8.5px; font-weight: 900; letter-spacing: .06em; color: #fff; background: #3a67b0; border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.mis-fbtn { width: 100%; min-height: 36px; padding: 0 2px; border-radius: 10px; border: 1px solid transparent; font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: .01em; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.mis-fbtn.go { color: #fff; background: linear-gradient(180deg, #7ed321, #3c9a12); border-color: #c2f58a; text-shadow: 0 2px 0 rgba(20, 70, 0, .7); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 #2a6e0b; animation: misPulse 1.4s ease-in-out infinite; }
.mis-fbtn.ad { font-size: 11px; color: #fff; background: linear-gradient(180deg, #4aa3ff, #2a73d8); border-color: #bfe0ff; text-shadow: 0 1px 0 rgba(8, 40, 100, .7); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 3px 0 #11407f; }
.mis-fbtn.wait { color: #fff; background: linear-gradient(180deg, #98a2b3, #6c7788); border-color: #c4ccd8; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 3px 0 #424a58; cursor: default; font-variant-numeric: tabular-nums; }
.mis-fbtn:not(.wait):active { transform: translateY(2px); }
@media (max-height: 700px) {
  .mis-wrap { height: 92vh; }
  .mis-t-img { min-height: 46px; } .mis-chest { width: 52px; height: 48px; } .mis-gem { font-size: 36px; }
}