/* ═══════════════════════════════════════════════════════════════════════
   КРАФТЫ — экран «1b Витрина» из макета, перенесённый один в один.

   В макете экран нарисован внутри рамки телефона 390×844: фон, свечения
   и зернистость лежали слоями внутри этой рамки. В игре такой рамки нет
   — рамка это сам экран, поэтому те же шесть слоёв переехали на общий
   фон .bg, ровно как это уже сделано для коллекции и профиля.

   Имена классов начинаются на cr — стили в браузере лежат в одном общем
   пространстве, и короткое имя вроде name или tag увело бы сюда чужие
   размеры с карточки. Проверка столкновений — scripts/check-css.mjs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── фон экрана: шесть слоёв из макета ──────────────────────────────── */
body[data-screen="craft"] .bg{
  background:linear-gradient(170deg,#1e1418 0%,#161116 42%,#0d0c0f 78%,#0a0a0b 100%)}
body[data-screen="craft"] .bg .b1{left:-80px;top:90px;width:300px;height:300px;filter:blur(46px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,128,152,.34),transparent 72%)}
body[data-screen="craft"] .bg .b2{right:-90px;top:400px;width:290px;height:290px;filter:blur(48px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(178,184,200,.2),transparent 72%)}
/* большая красная заливка сверху — в макете это отдельный слой во всю
   ширину, поэтому третий шарик здесь перестаёт быть шариком */
body[data-screen="craft"] .bg .b3{left:0;top:0;right:auto;bottom:auto;
  width:100%;height:100%;border-radius:0;filter:none;
  background:radial-gradient(96% 54% at 50% 16%,rgba(240,56,79,.5),rgba(110,15,36,.28) 46%,transparent 76%)}
body[data-screen="craft"] .bg .top{
  background:radial-gradient(120% 40% at 50% -8%,rgba(255,255,255,.12),transparent 64%)}
body[data-screen="craft"] .bg .fade{height:300px;
  background:linear-gradient(180deg,transparent,rgba(6,6,8,.62))}
body[data-screen="craft"] .bg .grain{opacity:.42}

/* Внизу висит кнопка над навигацией — освобождаем под неё место, иначе
   она накроет полку редкостей. */
body[data-screen="craft"] main{padding-bottom:calc(210px + var(--safe-b))}

/* ─── шапка ──────────────────────────────────────────────────────────── */
.crtop{display:flex;align-items:center;gap:10px;height:44px}
/* Пропадает вместе с кнопкой: gap не должен оставлять пустое место. */
.tgback .crtop{gap:0}
.crback{width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);color:#fff;padding:0}
.crback svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.crmark{font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.crclock{margin-left:auto;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;
  border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.crclock i{width:8px;height:8px;border-radius:50%;background:#f0384f;
  box-shadow:0 0 10px rgba(240,56,79,.9)}
.crclock b{font-size:12.5px;font-weight:700}
.crclock span{font-size:12.5px;color:rgba(255,255,255,.55)}

.crkicker{text-align:center;margin-top:26px;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ─── бустер ─────────────────────────────────────────────────────────── */
.crhero{position:relative;display:grid;place-items:center;height:330px;perspective:1000px}
.crhalo{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(10px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(240,56,79,.5),rgba(240,56,79,.16) 46%,transparent 70%)}
.crspark{position:absolute;left:34px;top:26px;width:150px;height:150px;border-radius:50%;
  filter:blur(22px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,128,152,.4),transparent 70%)}
.crpack{position:relative;width:198px;aspect-ratio:.62;border-radius:16px;
  transform:rotateY(-13deg) rotateX(7deg)}
.crdrop{position:absolute;left:-40px;right:-40px;bottom:-16px;height:58px;border-radius:50%;
  filter:blur(9px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),transparent 72%)}
.crbody{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(158deg,#5a1024 0%,#26060f 40%,#3a0a18 64%,#140409 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 0 16px 44px rgba(255,255,255,.08),
    0 26px 60px -22px #000}
/* Блик зовём craftSweep, а не sweep: этим именем уже названы блик на
   карточке и блик на паке при вскрытии. Одинаковое имя один раз уже
   ломало анимацию — она молча играла чужую. */
.crsweep{position:absolute;inset:-30%;filter:blur(8px) saturate(1.15);
  mix-blend-mode:color-dodge;opacity:.4;
  background:repeating-linear-gradient(114deg,hsla(348,100%,76%,.55),hsla(30,100%,72%,.45),
    hsla(283,100%,73%,.45),hsla(348,100%,76%,.55) 24%);
  -webkit-mask-image:linear-gradient(158deg,transparent 24%,#000 44%,#000 58%,transparent 76%);
  mask-image:linear-gradient(158deg,transparent 24%,#000 44%,#000 58%,transparent 76%);
  animation:craftSweep 6s linear infinite alternate}
@keyframes craftSweep{from{transform:translate3d(-16%,-8%,0)}to{transform:translate3d(16%,8%,0)}}
.crdots{position:absolute;inset:0;opacity:.7;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);
  background-size:3px 3px}
.crtear{position:absolute;left:0;right:0;top:0;height:12%;border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02));
  border-bottom:1.5px dashed rgba(255,255,255,.38)}
.crword{position:absolute;left:0;right:0;top:41%;text-align:center;font-size:19px;
  font-weight:800;letter-spacing:.14em;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.crword em{display:block;margin-top:6px;font-size:9.5px;font-weight:600;font-style:normal;
  letter-spacing:.32em;color:rgba(255,255,255,.6)}
.crfloor{position:absolute;left:14px;bottom:14px;padding:5px 11px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#fff;
  background:rgba(240,56,79,.94);
  box-shadow:0 10px 22px -10px rgba(240,56,79,.9),inset 0 1px 0 rgba(255,255,255,.3)}

/* ─── подписи и статистика ───────────────────────────────────────────── */
.crname{display:flex;align-items:baseline;justify-content:space-between;margin:2px 2px 0}
.crname b{font-size:26px;font-weight:800;letter-spacing:-.9px}
.crname span{font-size:13px;color:#8a8a90}
.crabout{margin:6px 2px 0;font-size:13px;line-height:1.45;color:#8a8a90}

.crstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.crstats>div{padding:12px 13px;border-radius:18px;background:#1a1a1d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
/* Не .k и не .v: этими именами в app.css названы подписи в шапках, и
   они приходят с капсом и разрядкой — «Шанс Mythic» превращался в
   «ШАНС MYTHIC». Всё, что объявлено в этом файле, начинается с cr;
   проверку на это делает scripts/check-css.mjs. */
.crk{display:block;font-size:11.5px;color:#8a8a90}
.crv{display:block;margin-top:6px;font-size:22px;font-weight:700;letter-spacing:-.6px}

/* ─── полка редкостей ────────────────────────────────────────────────── */
/* Фотографии коробок из макета сюда не поехали: это те же четыре снимка
   покемонов, что мы сняли с плиток на главной. Квадраты, подсветка и
   подписи остались — место под будущую картинку. */
.crshelf{display:flex;gap:9px;margin-top:14px;overflow:hidden}
.cri{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.crsq{position:relative;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden}
.crsqglow{position:absolute;left:50%;top:50%;width:74px;height:74px;border-radius:50%;
  transform:translate(-50%,-50%)}
.crsqdots{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);
  background-size:3px 3px}
.crcap{font-size:9.5px;font-weight:700;letter-spacing:.08em}

/* ─── кнопка над навигацией ──────────────────────────────────────────── */
/* Позиционируется как сама навигация: приклеена к низу окна и сужена до
   ширины телефонной колонки, чтобы на широком экране не разъезжалась.

   В макете экран нарисован ростом 844 пикселя, и полка редкостей там
   заканчивается ровно там, где начинается кнопка — впритык. На экране
   пониже полка уезжает кнопке под низ. Поэтому кнопка получает свой
   фон с размытием, как нижняя навигация: содержимое проходит за ней,
   а не сквозь неё. Прокрутки внизу хватает, чтобы полку было видно
   целиком. */
.cract{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(106px + var(--safe-b));z-index:20;
  width:calc(min(100vw,var(--app)) - 32px)}
.cract button{display:block;width:100%;padding:16px;border-radius:18px;
  font-size:16px;font-weight:700;letter-spacing:-.2px;
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.55);
  background:rgba(26,30,38,.72);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 14px 38px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}

/* ═══════════════════════════════════════════════════════════════════════
   ПОЯВЛЕНИЕ ЭКРАНА.

   Кривая и длительности взяты те же, что у остального проекта — карты
   в коллекции появляются ровно так же. Блоки выезжают по очереди,
   сверху вниз: так экран читается как один жест, а не как семь штук,
   мигнувших разом.

   Главное приезжает рано: бустер виден к 260 мс, название к 400 мс.
   Дальше доезжают статистика, полка и кнопка — последняя к 840 мс.
   Ждать нечего: всё это время экраном уже можно пользоваться.

   Анимации играют заново при каждом заходе, потому что разметка
   переписывается: см. drawCraft в js/app.js.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes crRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes crGlow{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes crFade{from{opacity:0}to{opacity:1}}
/* Бустер прилетает из глубины и доворачивается в свой наклон. Конечные
   углы обязаны совпадать с наклоном в .crpack, иначе на последнем кадре
   он дёрнется. */
@keyframes crPack{
  from{opacity:0;transform:rotateY(-30deg) rotateX(14deg) scale(.76) translateY(28px)}
  55% {opacity:1}
  to  {opacity:1;transform:rotateY(-13deg) rotateX(7deg) scale(1) translateY(0)}}
/* Уход: короткий и без изысков — экран не показывают, а убирают. */
@keyframes crLeave{to{opacity:0;transform:translateY(-12px)}}

.crtop,.crkicker,.crname,.crabout,.crstats,.cri,.cract button{
  animation:crRise .38s cubic-bezier(.22,.9,.3,1) both}
.crtop   {animation-delay:.02s}
.crkicker{animation-delay:.06s}
.crname  {animation-delay:.20s}
.crabout {animation-delay:.24s}
.crstats {animation-delay:.28s}
/* полка едет слева направо, по квадрату за раз */
.cri:nth-child(1){animation-delay:.32s}
.cri:nth-child(2){animation-delay:.36s}
.cri:nth-child(3){animation-delay:.40s}
.cri:nth-child(4){animation-delay:.44s}
.cract button{animation-delay:.46s}

.crpack {animation:crPack .58s cubic-bezier(.22,.9,.3,1) .08s both}
.crhalo {animation:crGlow .62s cubic-bezier(.22,.9,.3,1) .06s both}
.crspark{animation:crFade .62s ease .16s both}
.crdrop {animation:crFade .5s ease .3s both}

.crleave{animation:crLeave .19s ease-in both}

/* Кому анимации мешают — системная настройка это говорит, и её слушают.
   Экран просто появляется целиком. */
@media (prefers-reduced-motion:reduce){
  .crtop,.crkicker,.crname,.crabout,.crstats,.cri,.cract button,
  .crpack,.crhalo,.crspark,.crdrop,.crleave{animation:none}
}

/* Своя кнопка выхода нужна только там, где нет телеграмовской стрелки:
   в браузере и на старых клиентах. Класс вешает js/app.js. */
.tgback .crback{display:none}