/* ================================================================
   TANKNEXUS — Стили карточек лотов для мобилки
   Применяется только при ширине ≤ 767px.

   Все значения вынесены в CSS-переменные в блоке :root —
   меняй их здесь, не трогая основной main.css.
   ================================================================ */

@media (max-width: 767px) {

  /* ── Переменные — меняй здесь ────────────────────────────────── */
  :root {

    /* Карточка */
    --mc-card-radius:          30px;    /* скругление карточки */
    --mc-card-bg:              var(--bg-card);

    /* Миниатюра */
    --mc-thumb-aspect:         16/12;   /* соотношение сторон превью */
    --mc-thumb-radius:         20px 20px 0 0;

    /* Цена-бейдж (поверх фото) */
    --mc-price-badge-top:      14px;
    --mc-price-badge-right:    14px;
    --mc-price-badge-font:     13px;
    --mc-price-badge-padding:  2px 6px 1px 8px;
    --mc-price-badge-radius:   30px;

    /* Кнопка избранного (сердечко) */
    --mc-fav-btn-size:         40px;
    --mc-fav-btn-top:          8px;
    --mc-fav-btn-left:         8px;
    --mc-fav-icon-w:           27px;
    --mc-fav-icon-h:           25px;

    /* Тело карточки */
    --mc-body-padding:         10px;
    --mc-body-gap:             4px;
    --mc-body-margin-top:      -47px;  /* перекрытие поверх фото */

    /* Заголовок лота */
    --mc-title-font:           13px;
    --mc-title-weight:         500;
    --mc-title-padding:        2px 4px;
    --mc-title-radius:         6px;

    /* Строка с танками 10 уровня */
    --mc-tanks10-font:         12px;
    --mc-tanks10-weight:       500;
    --mc-tanks10-margin-top:   2px;
    --mc-tanks10-padding:      0 4px;

    /* Блок vstats (бейджи прем/топ) */
    --mc-vstats-gap:           6px;
    --mc-vstats-padding:       3px 6px 36px 6px;
    --mc-vstats-radius:        18px 18px 0 0;
    --mc-vstats-margin-top:    -25px;
    --mc-vstats-font:          13px;
    --mc-vstats-weight:        600;

    /* Блок ресурсов */
    --mc-res-item-padding:     2px 7px 2px 5px;
    --mc-res-item-gap:         2px;
    --mc-res-icon-size:        20px;
    --mc-res-value-font:       11px;
    --mc-res-icons-gap:        2px;

    /* Сценарные танки (sc-tanks) */
    --mc-sctanks-radius:       20px;
    --mc-sctanks-padding:      4px 0 8px;
    --mc-sctanks-margin:       0 0 6px 0;
    --mc-sctanks-gap:          8px;
    --mc-sc-icon-w:            80px;
    --mc-sc-icon-h:            48px;
    --mc-sc-label-font:        10px;
    --mc-sc-name-font:         10px;
    --mc-sc-name-weight:       500;
  }

  /* ── Карточка ─────────────────────────────────────────────────── */
  .lot-card {
    border-radius: 24px;
  }

  /* ── Миниатюра ───────────────────────────────────────────────── */
  .lot-card-thumb {
    aspect-ratio: var(--mc-thumb-aspect);
    border-radius: var(--mc-thumb-radius);
  }

  /* ── Цена-бейдж ──────────────────────────────────────────────── */
  .lot-card-price-badge {
    top: 8px;
    right: 8px;
    font-size: 12px;
    padding: 2px 6px 2px 7px;
    border-radius: 30px;
  }

  /* ── FunPay-бейдж ──────────────────────────────────────────────── */
  .lot-card-funpay-capsule {
    right: 8px;
    top: 33px;
    padding: 4px 9px 4px 4px;
  }

  /* ── Кнопка избранного ───────────────────────────────────────── */
  .card-action-btn.btn-fav {
    width:  var(--mc-fav-btn-size);
    height: var(--mc-fav-btn-size);
    top: 0px;
    left: 4px;
  }
  .btn-fav svg {
    width:  var(--mc-fav-icon-w);
    height: var(--mc-fav-icon-h);
  }

  /* ── Тело карточки ───────────────────────────────────────────── */
  .lot-card-body {
    padding:    6px;
    gap:        2px;
    margin-top: -25px;
  }

  /* ── Заголовок ───────────────────────────────────────────────── */
  .lot-card-title {
    font-size:   var(--mc-title-font);
    font-weight: var(--mc-title-weight);
    padding:     var(--mc-title-padding);
    border-radius: var(--mc-title-radius);
  }

  /* ── Tanks10 ─────────────────────────────────────────────────── */
  .lot-card-tanks10 {
    font-size:   var(--mc-tanks10-font);
    font-weight: var(--mc-tanks10-weight);
    margin-top:  var(--mc-tanks10-margin-top);
    padding:     var(--mc-tanks10-padding);
  }

  /* ── Vstats (бейджи прем/топ) ────────────────────────────────── */
  .lot-card-vstats {
    gap:        4px;
    padding:    2px 6px 36px 6px;
    border-radius: 18px 18px 0 0;
    margin:     -23px 0px 0px 0px;
  }
  .lot-card-vstats .vstats__line {
    font-size:   12px;
    font-weight: var(--mc-vstats-weight);
  }

  /* ── Ресурсы ─────────────────────────────────────────────────── */
  .lot-card-resources {
    padding: 0;
  }
  .lot-card-resources .resource-icons {
    gap: var(--mc-res-icons-gap);
  }
  .lot-card-resources .resource-item {
    padding: var(--mc-res-item-padding);
    gap:     var(--mc-res-item-gap);
  }
  .lot-card-resources .resource-icon-img {
    width:  var(--mc-res-icon-size);
    height: var(--mc-res-icon-size);
  }
  .lot-card-resources .resource-icon-img--bonds {
    width: 28px;
    height: 28px;
    margin-top: -4px;
    margin-bottom: -4px;
    margin-right: -5px;
    margin-left: -3px;
  }
  .lot-card-resources .resource-value {
    font-size: var(--mc-res-value-font);
  }

  /* ── Сценарные танки ─────────────────────────────────────────── */
  .lot-card-sc-tanks {
    border-radius: var(--mc-sctanks-radius);
    padding:       var(--mc-sctanks-padding);
    margin:        0px 0px 2px 0px;
    backdrop-filter: none;
    background: #1c2127;
  }
  .sc-tanks-row {
    gap: 0px;
    padding: 4px 0px 0px 0px;
  }
  .sc-tank-icon {
    width:  63px;
    height: 40px;
  }
  .sc-tanks-label {
    font-size: var(--mc-sc-label-font);
  }
  .sc-tank-name {
    font-size:   9px;
    font-weight: var(--mc-sc-name-weight);
  }

} /* end @media (max-width: 767px) */