/* ===================================================================
   БЛОК «ЭКСПЕДИЦИЯ» НА ГЛАВНОЙ - History Explorers WebApp
   Карточка тёплого жёлтого цвета с заголовком внутри. Цвета заданы
   фиксированно (не зависят от темы Telegram): тёмный текст на жёлтом,
   белый на зелёном, контраст везде ≥ 4.5:1. Эмодзи стоят на белой
   подложке или в светлом кружке, чтобы не пропадать на жёлтом фоне.
   Размеры и радиусы — токены из quizzes.css.
   ================================================================== */

.home-expedition {
    /* Жёлтая карточка: мягкий янтарь без кислотности */
    --exp-yellow-from: #fff4c9;
    --exp-yellow-to: #fde9a2;
    --exp-yellow-edge: #e8c75a;
    /* Тёмный slate главной (#1e293b) — основной текст; коричневатый — приглушённый (≈6.5:1 на жёлтом) */
    --exp-ink: #1e293b;
    --exp-muted: #5f4b12;
    /* Светлая подложка поверх жёлтого */
    --exp-panel: #ffffff;
    --exp-panel-soft: rgba(255, 255, 255, 0.78);
    --exp-emoji-bg: #e8f0fb;
    /* Зелёная кнопка: белый текст 5:1 */
    --exp-green: #15803d;
    --exp-green-hover: #166534;

    /* Статус по умолчанию — Исследователь: синий бренда */
    --exp-status-from: #1a4f94;
    --exp-status-to: #2370b8;

    margin-top: 24px;
}

.home-expedition [hidden] {
    display: none !important;
}

.home-expedition__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(180deg, var(--exp-yellow-from), var(--exp-yellow-to));
    border: 1px solid var(--exp-yellow-edge);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(180, 120, 0, 0.14);
    color: var(--exp-ink);
}

/* Капитан — тёплая бронза, Адмирал эскадры — морской синий */
.home-expedition__card[data-status="captain"] {
    --exp-status-from: #92400e;
    --exp-status-to: #b45309;
}

.home-expedition__card[data-status="master"] {
    --exp-status-from: #1e3a8a;
    --exp-status-to: #1e40af;
}

.home-expedition p {
    margin: 0;
}

/* --- Заголовок внутри карточки --- */
.home-expedition__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-expedition__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--exp-ink);
}

.home-expedition__open {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 22px;
    background: var(--color-primary, #2481cc);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.home-expedition__open:hover {
    background: var(--color-primary-hover, #1c5aa8);
}

/* Эмодзи в светлом кружке — читается на любом фоне */
.home-expedition__emoji {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--exp-emoji-bg);
    font-size: 19px;
    line-height: 1;
}

/* --- Блок призыва: белая подложка внутри жёлтой карточки --- */
.home-expedition__pitch {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--exp-yellow-edge);
    border-radius: var(--radius-md);
    background: var(--exp-panel);
}

.home-expedition__pitch-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--exp-ink);
}

.home-expedition__pitch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-expedition__pitch-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Награда за приглашение — на светло-зелёной полосе, в цвет кнопки */
.home-expedition__pitch-list li.home-expedition__pitch-reward {
    margin: -2px -10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: #e7f7ec;
    font-weight: 800;
    color: #14532d;
}

/* --- Показатели: статус и четыре плитки --- */
.home-expedition__overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-expedition__status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--exp-status-from), var(--exp-status-to));
    color: #ffffff;
}

.home-expedition__status-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    font-size: 26px;
}

/* Иконки статусов: 🧭 Исследователь, ⚓ Капитан, 🚢 Адмирал эскадры */
.home-expedition__status-icon::before { content: "🧭"; }
.home-expedition__card[data-status="captain"] .home-expedition__status-icon::before { content: "⚓"; }
.home-expedition__card[data-status="master"] .home-expedition__status-icon::before { content: "🚢"; }

.home-expedition__status-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-expedition__status-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-expedition__status-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.home-expedition__status-name {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.home-expedition__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-expedition__tile {
    --tile-ink: #1d4ed8;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--exp-yellow-edge);
    border-radius: var(--radius-sm);
    background: var(--exp-panel-soft);
}

.home-expedition__tile--stars { --tile-ink: #b45309; }
.home-expedition__tile--points { --tile-ink: #15803d; }
.home-expedition__tile--rank { --tile-ink: #1e3a8a; }

.home-expedition__tile-icon {
    font-size: 18px;
    line-height: 1;
}

.home-expedition__tile-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--tile-ink);
    overflow-wrap: anywhere;
}

.home-expedition__tile-label {
    font-size: 13px;
    line-height: 1.25;
    color: var(--exp-muted);
}

/* --- Второстепенное: прогресс до Капитана, новые, ждущие --- */
.home-expedition__progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--exp-muted);
}

.home-expedition__progress-head strong {
    color: var(--exp-ink);
}

.home-expedition__bar {
    height: 10px;
    border-radius: 50px;
    background: var(--exp-panel-soft);
    border: 1px solid var(--exp-yellow-edge);
    overflow: hidden;
}

.home-expedition__bar-fill {
    width: 0;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, #22c55e, var(--exp-green));
    transition: width 0.3s ease;
}

.home-expedition__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-expedition__meta:not(:has(:not([hidden]))) {
    display: none;
}

.home-expedition__chip {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--exp-panel-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--exp-ink);
}

.home-expedition__membership {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--exp-panel-soft);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.home-expedition__message {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

/* --- Ссылка: поле и кнопка копирования в одну строку --- */
.home-expedition__link-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-expedition__link-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--exp-muted);
}

.home-expedition__link-row {
    display: flex;
    gap: 8px;
}

.home-expedition__link {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--exp-yellow-edge);
    border-radius: var(--radius-md);
    background: var(--exp-panel);
    color: var(--exp-ink);
    font-size: 16px; /* меньше 16px — iOS приближает страницу при фокусе */
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.home-expedition__copy {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--exp-yellow-edge);
    border-radius: var(--radius-md);
    background: var(--exp-panel);
    color: var(--exp-ink);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-expedition__copy.is-done {
    border-color: var(--exp-green);
    background: #dcfce7;
    color: var(--exp-green);
}

.home-expedition__copy:active {
    transform: scale(0.95);
}

.home-expedition__icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-expedition__icon--done,
.home-expedition__copy.is-done .home-expedition__icon--copy {
    display: none;
}

.home-expedition__copy.is-done .home-expedition__icon--done {
    display: block;
}

.home-expedition__feedback {
    font-size: 13px;
    font-weight: 700;
    color: var(--exp-green-hover);
}

.home-expedition__feedback--error {
    color: #991b1b;
}

/* --- Главная кнопка: зелёная, на всю ширину (приглашение / вход) --- */
.home-expedition__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--exp-green);
    box-shadow: 0 3px 8px rgba(21, 128, 61, 0.35);
    color: #ffffff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-expedition__cta:hover {
    background: var(--exp-green-hover);
}

.home-expedition__cta:active {
    transform: scale(0.98);
}

.home-expedition__link:focus-visible,
.home-expedition__copy:focus-visible,
.home-expedition__cta:focus-visible,
.home-expedition__open:focus-visible {
    outline: 3px solid var(--exp-ink);
    outline-offset: 2px;
}

@media (max-width: 359px) {
    .home-expedition__card {
        padding: 14px;
    }

    .home-expedition__head {
        gap: 8px;
    }

    .home-expedition__title {
        gap: 8px;
        min-width: 0;
        font-size: 18px;
    }

    .home-expedition__title .home-expedition__emoji {
        width: 32px;
        height: 32px;
    }

    .home-expedition__open {
        padding: 0 12px;
    }

    .home-expedition__pitch {
        padding: 14px;
    }

    .home-expedition__status {
        padding: 12px;
    }

    .home-expedition__tile-value {
        font-size: 24px;
    }

    .home-expedition__cta {
        gap: 8px;
        padding: 12px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-expedition__bar-fill,
    .home-expedition__open,
    .home-expedition__copy,
    .home-expedition__cta {
        transition: none;
    }

    .home-expedition__copy:active,
    .home-expedition__cta:active {
        transform: none;
    }
}