/* =====================================================================
   freebox.css — БЕСПЛАТНЫЕ ЯЩИКИ: СОСТОЯНИЯ КАРТОЧКИ
   ---------------------------------------------------------------------
   Сама карточка (рамка, полосы, арт, наклон) описана в site.css по
   референсу панели — здесь её не трогаем. Этот файл добавляет только то,
   что появилось вместе с рабочим разделом: три состояния подвала и
   значок в углу арта.

   Сцены здесь нет и не будет: открытие показывает та же сцена, что и у
   платных коробок (css/smallbox.scene.css + css/megabox.scene.css).

   Всё внутри карточки по-прежнему меряется в cqw — долях ширины
   .free-cell. Смешивать здесь px с cqw нельзя: карточка тянется от
   ширины экрана, и подпись, заданная в пикселях, на узком экране
   вылезла бы за рамку.
   ===================================================================== */

/* =====================================================================
   ПОДВАЛ: КНОПКА ВМЕСТО НАДПИСИ
   ---------------------------------------------------------------------
   В разметке «Подарок» стал <button> — значит, приезжает браузерное
   оформление: своя рамка, фон, поля. Гасим ровно его.

   ШРИФТ ЗДЕСЬ НЕ ТРОГАЕМ. Сокращение font:inherit выглядит уместным
   сбросом, но оно обнуляет и КЕГЕЛЬ — 11.7cqw из site.css превращались
   в 16 px, и «ПОДАРОК» съёживался до строчки в углу подвала. Всё
   шрифтовое (семейство, кегль, цвет, обводка, сдвиг вверх) уже задано
   там, и авторское правило и так сильнее браузерного.
   ===================================================================== */
.free-btn{
  appearance:none;-webkit-appearance:none;
  background:none;border:0;margin:0;padding:0;
  text-align:center;white-space:nowrap;
  cursor:inherit;   /* курсор берётся у карточки — кликается она целиком */
}
.free-btn:focus-visible{outline:.6cqw solid #fff;outline-offset:.4cqw;border-radius:.6cqw}

/* Карточка целиком кликабельна — курсор ставим на неё, а не на подпись:
   нажатие ловится делегированием на сетке (js/freeboxes.ui.js). */
.free-card{cursor:pointer}

/* ---- ГОТОВ: можно забирать ----
   Зелёная подпись из site.css остаётся как есть, добавляется только
   дыхание арта — единственная движущаяся вещь в разделе, поэтому взгляд
   находит готовый ящик, не читая всех трёх подписей. */
.free-card.is-ready .free-img{animation:fb-breathe 2.6s ease-in-out infinite}
@keyframes fb-breathe{
  0%,100%{transform:skewX(var(--fb-unskew)) translateY(0) scale(1)}
  50%    {transform:skewX(var(--fb-unskew)) translateY(-1.6cqw) scale(1.03)}
}

/* ---- ОТКАТ: на подвале таймер ----
   Кегль меньше исходного: «23:59:12» — восемь знаков против семи у
   «ПОДАРОК», и родные 11.7cqw выносили строку за рамку. */
.free-card.is-wait .free-btn{font-size:9.4cqw;color:#FFD86B}
.free-card.is-wait .free-box{filter:saturate(.72) brightness(.92)}
.free-card.is-wait .free-img{opacity:.82}

/* ПРИГЛУШЁННОЙ КАРТОЧКИ БОЛЬШЕ НЕТ. Здесь стоял .is-locked — тот же
   серый фильтр, что у «Скоро» на витрине: им гасились ящики с
   невыполненным условием и весь раздел у гостя. Правила убраны вместе с
   самим состоянием: пока ящик не открыт, карточка горит подарком, а
   условие объясняет экран (js/freeboxes.ui.js, render). Класс больше не
   выставляется никем — если он снова понадобится, это будет новое
   решение, а не наследство. */

/* ---- ДЛИННАЯ ПОДПИСЬ ----
   Кегль 11.7cqw в site.css выведен по референсу под «ПОДАРОК» — семь
   знаков, и на карточке теперь бывает только он да таймер. «23:59:12» —
   восемь знаков, и на родном кегле строка вылезала за рамку.

   Ступень выбирается по ДЛИНЕ подписи (её проставляет js/freeboxes.ui.js
   в data-len), а не по состоянию: решает здесь ровно одно — сколько
   знаков влезает. Правило дублирует кегль .is-wait выше не по
   недосмотру: там он про откат, здесь про длину строки, и подпись любой
   длины обязана попадать в рамку сама по себе. */
.free-btn[data-len="mid"],
.free-btn[data-len="long"]{font-size:9.4cqw}

/* ---- ЖДЁМ ОТВЕТ СЕРВЕРА ----
   Пока запрос в пути, карточка не отзывается: второй клик по «Подарку»
   ушёл бы вторым запросом, и игрок увидел бы отказ по откату, который
   сам же только что и создал. */
.free-card.is-opening{pointer-events:none;filter:brightness(.9)}

/* =====================================================================
   ЗНАЧОК В УГЛУ АРТА
   ---------------------------------------------------------------------
   Насколько игрок близок к условию: «3 / 10» у ящика за друзей,
   «0 / 100 ₽» у ящика за пополнение. Стоит в левом верхнем углу тела
   карточки: правый угол занят бликом свечения, а центр — самим ящиком.
   ===================================================================== */
.free-badge{
  position:absolute;left:4.2cqw;top:4.2cqw;z-index:2;
  padding:1.4cqw 3cqw;border-radius:2.4cqw;
  background:rgba(5,29,72,.82);
  border:.5cqw solid rgba(255,255,255,.24);
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:800;font-size:5.4cqw;line-height:1.15;color:#EAF4FF;
  white-space:nowrap;
  transform:skewX(var(--fb-unskew));   /* стоит прямо в наклонной рамке */
}
/* ЗЕЛЁНОГО ЗНАЧКА ЗДЕСЬ НЕТ. Пока карточка гасла на невыполненном
   условии, зелень значка означала «а этот готов». Теперь горят все, и
   отличать значком нечего: показывается он ровно в одном случае — когда
   условие НЕ выполнено (renderBadge в js/freeboxes.ui.js), — и зелёный
   «готово» на «3 / 10» противоречил бы самому себе. */

/* Метка тестового режима (FREE_TEST_MODE на сервере) — намеренно
   кричащая: раздел, который открывается без конца, не должен выглядеть
   как нормальная работа. */
.free-card .free-badge[data-test]{
  background:rgba(120,20,20,.9);border-color:rgba(255,180,180,.5);color:#FFD9D9;
  text-transform:uppercase;letter-spacing:.06em;
}

/* =====================================================================
   ЭКРАН БЕСПЛАТНОГО ЯЩИКА
   ---------------------------------------------------------------------
   Разметку экран берёт у платных коробок (css/case.css): та же строка
   «назад + название», тот же арт, та же панель «Может выпасть». Здесь
   только различия — и они намеренные.

   ЭКРАН СКРОМНЕЕ ПЛАТНОГО СОДЕРЖИМЫМ, А НЕ ОФОРМЛЕНИЕМ. У коробки с
   витрины в сетке 28 бойцов и звёздные силы, у бесплатной — две строки
   ресурсов и по одной плитке на ступень; это и видно по самой сетке.
   ПЛИТКИ ЖЕ ЗДЕСЬ НЕ ТРОГАЮТСЯ ВОВСЕ: ни размер, ни цвет, ни иконки —
   награда из бесплатного ящика та же самая и попадает в тот же
   инвентарь, поэтому и выглядеть она обязана так же. Раньше на .is-free
   висели своя сетка в 112 px и filter:saturate(.68); от них отказались
   намеренно — приглушённая копия читалась как «награда второго сорта»,
   хотя это буквально те же бойцы.

   ШАНСОВ НА ПЛИТКАХ БОЛЬШЕ НЕТ. Была своя строка под ценой (процент у
   предметов, «до 130 монет» у ресурсов) — и она платила за себя АРТОМ:
   высота плитки задана пропорцией 136/145, строка отрезала от площадки
   арта пятую часть, и боец на бесплатной витрине выходил мельче того же
   бойца на платной. Убрана вместе с правилом .ic-chance: на платных
   витринах таких подписей нет, а потолок ресурсов и так стоит на полосе
   цены с припиской «до».

   Своё у экрана осталось одно: подпись под кнопкой.
   ===================================================================== */

/* Кнопка действия: у платного ящика на ней цена, здесь — состояние
   («Подарок», таймер, условие). Подпись под ней объясняет состояние
   словами; у платных её нет, потому что там объяснять нечего — не
   хватает денег, и это видно по балансу. */
.cmodal.cx.is-free .cx-free-note{
  margin:calc(var(--cw) * .028) auto 0;max-width:46ch;padding:0 24px;
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:600;font-size:clamp(.82rem,1.5vw,.96rem);line-height:1.35;
  text-align:center;color:#BBD6F5;
}
/* Та же подпись внутри панели витрины — на случай, когда показывать
   нечего: без полей она прижималась бы к самой обводке. */
.cmodal.cx.is-free .cmodal-stage .cx-free-note{margin:22px auto 26px}

/* =====================================================================
   ТЕЛЕФОН
   ---------------------------------------------------------------------
   С двумя ящиками в ряд (см. блок «ДВА ЯЩИКА В РЯД» в site.css)
   карточка садится с 332 до 120-246 px. Доли, снятые с большой
   карточки, при такой усадке ещё работают: таймер и длинная подпись
   выходят 11-23 px, потому что они и на референсе занимают почти всю
   ширину рамки — а доля сохраняет это «почти всю» на любом размере.
   Прежние завышенные кегли (10.6 % вместо 9.4) остались от трёх
   колонок, где карточка была вдвое уже, и здесь уже вредны: на 246 px
   строка вылезала бы за рамку.

   Пол нужен ровно одному элементу — значку условия. Он единственный
   набран не референсной долей от рамки, а мелким служебным кеглем
   (5.4 % против 11.7 у подписи): на 146 px это 7.9 px, мельче всего
   остального на карточке. 10 px берутся только на самых узких
   телефонах, дальше снова работает доля.
   ===================================================================== */
@media (max-width:620px){
  .free-badge{
    font-size:max(10px,5.4cqw);
    /* Кант в полпроцента ширины на такой карточке — меньше пикселя, и
       браузер стирал его в ничто. Тот же приём, что у рамок карточки
       в site.css. */
    border-width:max(1px,.5cqw);
  }
}

/* Меньше движения — по системной настройке: подпрыгивание готового
   ящика выключается. Сцена открытия — общая с платными коробками, и о
   своих анимациях она заботится сама. */
@media (prefers-reduced-motion: reduce){
  .free-card.is-ready .free-img{animation:none}
}