/* =====================================================================
   upgrader.css — ЭКРАН «АПГРЕЙДЕР»
   ---------------------------------------------------------------------
   Оформление собрано из тех же материалов, что и витрина (css/site.css):
   полупрозрачная синяя подложка панели, тёмная полоса заголовка, шрифт
   сцены с обводкой и выдавкой, кнопки-плитки с жёсткой нижней тенью.

   Одно отличие от .gpanel намеренное: подложка апгрейдера НЕ скошена.
   Наклон −5.06° — свойство полок с карточками; здесь в середине круглая
   шкала, а skewX превратил бы круг в эллипс и увёл бы стрелку с центра.
   Поэтому взяты цвета и рамка .gpanel, но без transform.

   Разметку строит js/upgrader.ui.js.
   ===================================================================== */

/* =====================================================================
   ЭКРАН
   ---------------------------------------------------------------------
   Апгрейдер — не раздел главной, а ОТДЕЛЬНЫЙ ЭКРАН САЙТА, устроенный
   слово в слово как профиль (см. шапку css/profile.css) и экран ящика:

     • .ug-backdrop встаёт в ОБЫЧНЫЙ ПОТОК документа и ничем не залит —
       сквозь него виден фоновый ролик страницы (.bg-stage), то есть тот
       же фон, что и везде. Своего фона у экрана нет намеренно: он
       отличался бы плотностью от остального сайта;
     • главная на это время прячется (body.ug-open ниже), а шапка
       остаётся на месте — она и есть верхняя чёрная полоса с балансом и
       баллами, а в ней подсвечена плашка, которой экран открыли;
     • закрывает экран кнопка «назад» — та же .cx-back из case.css, что
       у ящика и у профиля.
   ===================================================================== */
.ug-backdrop{
  position:relative; z-index:1;
  color:var(--text,#fff); font-family:'Manrope',sans-serif;
  opacity:0; transition:opacity .28s ease;
}
.ug-backdrop.show{ opacity:1; }

body.ug-open > main,
body.ug-open > footer{ display:none; }

.ug-screen{
  position:relative; z-index:2;
  /* Шире профиля (1120): здесь два столбца выбора с сетками плиток, а
     не колонка текста, — на 1120 плитки каталога мельчали до пяти в
     ряд. Потолок держит строку читаемой на большом мониторе. */
  width:min(1240px,100%); margin:0 auto;
  /* Верхнее поле — те же 2.64 полосы от кромки шапки до кнопки «назад»,
     что у профиля и у экрана ящика; заодно это запас под свисающие из
     шапки логотип, плашки и язычки баланса. */
  padding:calc(var(--head-h) * 2.64) clamp(16px,4vw,40px) 90px;
  display:flex; flex-direction:column; gap:18px;
  transform:translateY(14px);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.05);
}
.ug-backdrop.show .ug-screen{ transform:none; }

/* Верхняя строка: «назад», название экрана и ряд громкости — просвет в
   1.07 полосы, как в .pf-topbar и .cx-bar. Кнопка и ряд приходят
   готовыми из case.css, здесь им ничего не дописывается, кроме переноса
   и двух красок (ниже).
   ПЕРЕНОС РАЗРЕШЁН: на узком экране название «АПГРЕЙДЕР» и ползунок в
   11 полос в одну строку не встают, и без wrap ползунок сжимался бы в
   огрызок дорожки. Просвет между строками — тот же .42 полосы, что у
   .cx-bar на экране ящика. */
.ug-topbar{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:calc(var(--head-h) * .42) calc(var(--head-h) * 1.07);
}
/* Ряд громкости на экране ящика живёт внутри .cmodal-backdrop и берёт
   обводку с заливкой из его переменных. Здесь этой обёртки нет, поэтому
   те же две краски объявляются на самом ряду — значениями из case.css
   (--cx-ink-line и --cx-body), а не новыми: плитка динамика обязана
   остаться той же плиткой, что у ящика. Всё остальное — размеры, жёлоб,
   рукоятка — считается от --head-h и приезжает готовым. */
.ug-topbar .cx-vol{
  --cx-ink-line:#000E3C;
  --cx-body:#3F92F6;
  flex:0 1 calc(var(--head-h) * 11);
}
/* Название набрано как название ящика и профиля: кегль .97 полосы,
   прописными (у lilitaone капитель составляет .725 кегля). */
.ug-screen-title{
  font-family:"MegaBoxFont","Arial Black","Segoe UI",system-ui,sans-serif;
  font-weight:900; font-size:calc(var(--head-h) * .97); line-height:1.1;
  letter-spacing:.04em; word-spacing:-.09em; text-transform:uppercase; color:#fff;
  margin:0;
  text-shadow:var(--so),var(--extrude);
}

.ug-panel{
  border:3px solid rgba(0,30,170,.40);
  border-radius:20px;
  background:rgba(21,27,243,.328);
  overflow:hidden;
}

/* ---------- полоса правила ----------
   Заголовка «Апгрейдер» здесь нет: название стоит в верхней строке
   экрана, и второй такой же спорил бы с первым. В полосе осталось
   правило игры — то, ради чего её и читают. */
.ug-head{
  padding:14px 24px 16px;
  background:rgba(55,0,230,.25);
  text-align:center;
}
.ug-sub{
  color:var(--text-dim); font-weight:600; font-size:.92rem; line-height:1.5;
}

/* =====================================================================
   ВЕРХНИЙ РЯД: ставка — круг — награда
   ===================================================================== */
.ug-stage{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  gap:clamp(16px,3vw,44px);
  padding:30px clamp(16px,3vw,34px) 26px;
}

.ug-slot{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ug-slot-cap{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1rem; letter-spacing:.04em; color:#fff;
  --so-r:0.045em;
  text-shadow:var(--so),var(--extrude);
}
.ug-slot-note{ color:var(--text-dim); font-size:.8rem; font-weight:600; text-align:center; max-width:24ch; }

/* ---------- карточка предмета в гнезде ---------- */
.ug-card{
  --rc:#9B92C4;
  width:min(232px,100%); padding:14px 14px 16px; border-radius:20px;
  background:linear-gradient(180deg,rgba(24,72,166,.85),rgba(9,36,102,.85));
  border:3px solid color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow:0 7px 0 rgba(4,20,66,.75), 0 0 26px -8px var(--rc);
  text-align:center;
}
.ug-card.is-empty{
  border-style:dashed; border-color:rgba(255,255,255,.22);
  box-shadow:0 7px 0 rgba(4,20,66,.55);
  background:linear-gradient(180deg,rgba(12,44,116,.55),rgba(7,26,74,.55));
}
.ug-card-thumb{
  position:relative; height:118px; border-radius:14px; margin-bottom:10px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 40%, transparent), transparent 68%),
             rgba(3,14,44,.5);
}
.ug-card-thumb .lt-inner{ width:100%; height:100%; display:grid; place-items:center; position:relative; }
.ug-card-plus{ font-size:2.4rem; color:rgba(255,255,255,.4); font-weight:900; }
.ug-card-coins{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900; font-size:3rem; color:#FFE45C;
  --so-r:0.04em;
  text-shadow:var(--so),var(--extrude);
}
.ug-card-qty{
  position:absolute; right:8px; bottom:8px; padding:3px 8px 5px; border-radius:9px;
  background:rgba(3,14,44,.85); border:2px solid rgba(255,255,255,.16);
  font-size:.78rem; font-weight:800;
}
.ug-card-name{ font-weight:800; font-size:.95rem; line-height:1.25; min-height:2.4em; }
.ug-card-value{
  margin-top:6px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900; font-size:1.15rem; color:#FFE45C;
  letter-spacing:.04em;
  --so-r:0.04em;
  text-shadow:var(--so),var(--extrude);
}
.ug-card-rar{ margin-top:4px; font-size:.76rem; font-weight:800; color:var(--rc); text-transform:uppercase; letter-spacing:.06em; }

/* стопка из нескольких предметов в ставке */
/* Ряды сетки задаются ЯВНО (grid-auto-rows:1fr), а клетки растягиваются
   на ряд. Без этого стопка показывала пустое гнездо: .ug-card-thumb
   раздаёт детям place-items:center, при центрировании клетка получает
   размер по содержимому, а всё её содержимое — абсолютная картинка и
   погашенная эмодзи-заглушка, то есть ноль. Клетка схлопывалась в 0×0
   вместе с квадратом, который ей рисовал aspect-ratio. Ряд же меряется
   от высоты гнезда, которая задана в пикселях, и схлопнуться не может. */
.ug-stack{
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:4px; padding:8px; place-items:stretch;
}
.ug-stack-cell{ position:relative; min-height:0; border-radius:9px; background:rgba(3,14,44,.45); }
.ug-stack-cell .lt-inner{ width:100%; height:100%; display:grid; place-items:center; }
.ug-stack-more{
  position:absolute; right:8px; bottom:8px; padding:2px 8px 4px; border-radius:9px;
  background:rgba(3,14,44,.9); font-size:.8rem; font-weight:800;
}
/* Картинки предметов приходят из общей разметки (.lt-inner/.lt-img):
   эмодзи-заглушка гасится, как только PNG загрузился. */
.ug-card .lt-emoji, .ug-tile .lt-emoji, .ug-hist-thumb .lt-emoji{ font-size:1.8rem; }
.ug-card .lt-inner.has-img .lt-emoji,
.ug-tile .lt-inner.has-img .lt-emoji,
.ug-hist-thumb .lt-inner.has-img .lt-emoji{ display:none; }

/* ПОЛЕ ВОКРУГ АРТА ЗАДАЁТСЯ INSET'ОМ ВМЕСТЕ С РАЗМЕРОМ, А НЕ max-width.
   .lt-img приезжает из case.css абсолютом: position:absolute; inset:0;
   width:100%; height:100%. У абсолюта с заданными left и top коробка,
   ужатая до max-width/max-height, встаёт в ЛЕВЫЙ ВЕРХНИЙ УГОЛ гнезда —
   place-items:center на родителе таких детей уже не двигает, потому что
   положение задано вручную. Из-за этого весь запас (17-24 px) уходил
   вправо и вниз, и каждая иконка на экране висела наискосок от своей
   подложки.
   Отпустить width/height в auto нельзя: у ЗАМЕЩАЕМОГО элемента (а <img>
   такой) auto — это натуральный размер файла, и картинки в 2048 px
   вылезли бы за экран. Поэтому поле и размер задаются парой: отступ
   слева-сверху плюс ровно та ширина, что остаётся, — сумма даёт 100 %,
   и арт стоит по середине гнезда при любом соотношении сторон. А оно у
   арта гуляет от 271×384 (монеты) до 384×246 (гемы), так что центровка
   тут не украшение. */
.ug-card .lt-img,
.ug-tile .lt-img,
.ug-stack-cell .lt-img,
.ug-hist-thumb .lt-img{
  --pad:9%;
  inset:var(--pad);
  width:calc(100% - var(--pad) * 2); height:calc(100% - var(--pad) * 2);
  object-fit:contain;
}
.ug-card .lt-img{ --pad:7%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.ug-stack-cell .lt-img{ --pad:10%; }

/* =====================================================================
   КРУГ ШАНСА
   ===================================================================== */
.ug-center{ display:flex; flex-direction:column; align-items:center; gap:14px; }

.ug-dial{
  position:relative; width:clamp(200px,26vw,260px); aspect-ratio:1;
  display:grid; place-items:center;
}
.ug-dial-svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ug-ring-bg{
  fill:none; stroke:rgba(4,18,58,.85); stroke-width:15;
}
.ug-ring-win{
  fill:none; stroke:#63E06E; stroke-width:15; stroke-linecap:butt;
  filter:drop-shadow(0 0 8px rgba(99,224,110,.55));
  transition:stroke-dasharray .25s ease;
}

/* Стрелка. Крутится вокруг центра круга; сам «клюв» вынесен в
   псевдоэлемент, чтобы вращение считалось от центра, а не от кончика. */
.ug-needle{
  position:absolute; inset:0; display:grid; place-items:start center;
  transform-origin:50% 50%; will-change:transform;
}
.ug-needle i{
  display:block; width:0; height:0; margin-top:-9px;
  border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:26px solid #FFE45C;
  filter:drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 4px 8px rgba(0,0,0,.6));
}

.ug-dial-face{ text-align:center; z-index:1; transition:opacity .2s ease; }
/* Пока висит плашка исхода, цифра шанса под ней гасится: ставка уже
   ушла, шанс пересчитался в ноль, и «0 %» просвечивал бы сквозь
   надпись «Апгрейд удался», споря с ней. */
.ug-dial.is-flash .ug-dial-face{ opacity:0; }
.ug-chance{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:2.6rem; line-height:1; color:#fff; letter-spacing:.02em;
  --so-r:0.045em;
  text-shadow:var(--so),var(--extrude);
}
.ug-chance span{ font-size:1.3rem; }
.ug-mult{ margin-top:8px; color:#7BE9F3; font-weight:800; font-size:1rem; }

/* =====================================================================
   ПЛАШКА ИСХОДА ПОВЕРХ КРУГА
   ---------------------------------------------------------------------
   Собрана из тех же материалов, что кнопки и тосты сайта (см. .btn и
   .toast в site.css): заливка градиентом сверху вниз, светлый кант,
   ЖЁСТКАЯ нижняя тень вместо мягкой, надпись шрифтом сцены с обводкой
   .1em и выдавкой --extrude. До этого исход показывался чёрным диском с
   голыми глифами ✓ и ✕ и суммой обычным Manrope — единственное место
   экрана, набранное не по-сайтовому, и на фоне рисованных плиток оно
   читалось системным сообщением браузера, а не частью игры.

   Круг под плашкой гасится не чёрным, а синью панелей (тот же
   rgba(4,18,58) что у .ug-col) с тоном исхода по краю: чёрный диск был
   темнее всего остального экрана и выглядел дырой в странице.
   ===================================================================== */
.ug-flash{
  position:absolute; inset:0; z-index:2; border-radius:50%;
  display:grid; place-items:center;
  opacity:0; transform:scale(.82);
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,.9,.25,1.4);
  background:radial-gradient(circle, rgba(4,18,58,.94) 58%, rgba(4,18,58,.72) 100%);
}
/* display:grid выше перебивает [hidden], поэтому гасим явно: плашка
   висит поверх круга всё время, пока экран открыт. */
.ug-flash[hidden]{ display:none; }
.ug-flash.is-on{ opacity:1; transform:scale(1); }
.ug-flash.is-win{ background:radial-gradient(circle, rgba(4,18,58,.94) 52%, rgba(20,86,44,.78) 100%); }
.ug-flash.is-loss{ background:radial-gradient(circle, rgba(4,18,58,.94) 52%, rgba(86,20,34,.78) 100%); }

/* Сама плашка. Шире круга — и это намеренно: лента, перечёркивающая
   шкалу, читается как штамп поверх результата, а вписанная в круг
   надпись была бы ещё одной строкой внутри той же шайбы. */
.ug-flash-plate{
  --p1:var(--green-1); --p2:var(--green-2); --psh:var(--green-sh);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:max-content; max-width:128%;
  padding:12px 24px 15px; border-radius:18px;
  background:linear-gradient(180deg,var(--p1),var(--p2));
  border:3px solid rgba(255,255,255,.2);
  box-shadow:0 6px 0 var(--psh), 0 16px 28px -8px rgba(2,10,45,.85);
}
/* Красный — тот же, что у мифической редкости в case.css (#F4515C), с
   притемнённым низом и кантом: своего красного в палитре сайта нет. */
.ug-flash.is-loss .ug-flash-plate{ --p1:#FF7078; --p2:#E03A46; --psh:#8E1C26; }

/* Значок исхода — белый пятак с чёрным кантом, как значки на плитках
   сцены. Голый глиф в 2.2rem был единственным элементом экрана без
   обводки и падал в фон. */
.ug-flash-ic{
  width:2em; height:2em; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.05rem; font-weight:900; line-height:1;
  color:var(--p2); background:#fff;
  border:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(2,10,45,.35);
}
.ug-flash-txt{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1.05rem; line-height:1.1; color:#fff;
  letter-spacing:.04em; word-spacing:-.09em; text-transform:uppercase;
  text-shadow:var(--so),var(--extrude);
}
/* Сумма — тем же золотом и той же обводкой, что цена на карточке
   предмета (.ug-card-value): это одна и та же величина в рублях. */
.ug-flash-sum{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1.3rem; line-height:1.1; color:#FFE45C; letter-spacing:.04em;
  text-shadow:var(--so),var(--extrude);
}

/* Кнопка запуска — плитка витрины в золоте, как «ОТКРЫТЬ» у ящика. */
.ug-go{
  border:0; cursor:pointer; color:#fff; min-width:200px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1.15rem; letter-spacing:.04em;
  padding:13px 26px 17px; border-radius:16px;
  --so-r:0.045em;
  text-shadow:var(--so),var(--extrude);
  background:linear-gradient(180deg,#FFD84D 0%,#F5A524 100%);
  box-shadow:0 6px 0 #A96A05, 0 12px 18px -8px rgba(2,10,45,.7);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.ug-go:hover:not(:disabled){ filter:brightness(1.07); }
.ug-go:active:not(:disabled){ transform:translateY(6px); box-shadow:0 0 0 #A96A05; }
.ug-go:disabled{
  cursor:default; filter:grayscale(.65) brightness(.8);
  box-shadow:0 6px 0 rgba(4,20,66,.6);
}
.ug-hint{ color:var(--text-dim); font-size:.84rem; font-weight:600; text-align:center; min-height:1.2em; }

/* =====================================================================
   ДВЕ КОЛОНКИ ВЫБОРА
   ===================================================================== */
.ug-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px);
  padding:0 clamp(16px,3vw,34px) 26px;
  /* Колонки НЕ тянутся друг под друга: инвентарь у нового игрока — три
     плитки, и растянутый до высоты каталога он выглядел бы пустой
     синей плитой на пол-экрана. */
  align-items:start;
}
.ug-col{
  background:rgba(4,18,58,.42);
  border:3px solid rgba(255,255,255,.10);
  border-radius:18px; padding:14px;
  display:flex; flex-direction:column; gap:12px; min-width:0;
}
.ug-col-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ug-col-sum{ margin-left:auto; color:var(--text-dim); font-weight:700; font-size:.86rem; }
.ug-col-sum b{ color:#FFE45C; }

/* переключатель «инвентарь / рубли» — тот же ряд плиток, что у выбора
   количества на экране ящика.

   Подписи набраны С ОБВОДКОЙ И ВЫДАВКОЙ, как весь крупный текст сайта
   (см. .bs-ink в site.css). Без неё белые буквы ложились прямо на
   светлую заливку плитки — особенно на золотой активной, где контраст
   белого с #FFD84D почти нулевой, — и читались с трудом. Обводка та же
   .1em, что в референсном кадре апгрейдера. */
.ug-seg{ display:flex; gap:8px; }
.ug-seg-btn{
  border:3px solid rgba(2,12,45,.6); border-bottom-width:5px; border-radius:12px;
  padding:8px 14px 10px; cursor:pointer; color:#fff;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:.86rem; letter-spacing:.04em;
  text-shadow:var(--so),var(--extrude);
  background:linear-gradient(180deg,#2f6fd0,#1b4894);
  box-shadow:inset 0 3px 0 rgba(186,228,255,.4), 0 4px 0 rgba(0,0,22,.42);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.ug-seg-btn:hover{ filter:brightness(1.1); }
.ug-seg-btn.is-on{
  background:linear-gradient(180deg,#FFD84D,#F5A524); color:#fff;
  box-shadow:inset 0 3px 0 rgba(255,247,214,.5), 0 4px 0 rgba(0,0,22,.42);
}

.ug-search{
  flex:1 1 140px; min-width:0;
  padding:10px 14px; border-radius:12px;
  border:3px solid rgba(255,255,255,.12);
  background:rgba(3,14,44,.6); color:#fff;
  /* 1rem, а не .9: ниже 16 px Safari на iPhone приближает страницу при
     фокусе и обратно не отдаляет (разбор — у .au-input в auth.css). */
  font-family:'Manrope',sans-serif; font-weight:600; font-size:1rem;
}
.ug-search::placeholder{ color:#7f9fce; }
.ug-search:focus{ outline:none; border-color:rgba(85,184,255,.6); }
.ug-sort, .ug-preset, .ug-chip{
  border:3px solid rgba(2,12,45,.5); border-radius:11px; cursor:pointer;
  padding:8px 12px 10px; color:#fff; font-weight:800; font-size:.8rem;
  background:linear-gradient(180deg,#2f6fd0,#1b4894);
  box-shadow:0 4px 0 rgba(0,0,22,.42);
  transition:filter .14s ease, transform .09s ease, box-shadow .09s ease;
}
.ug-sort:hover, .ug-preset:hover, .ug-chip:hover{ filter:brightness(1.1); }
.ug-sort:active, .ug-preset:active, .ug-chip:active{ transform:translateY(4px); box-shadow:0 0 0 rgba(0,0,22,.42); }
.ug-presets{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--text-dim); font-size:.82rem; font-weight:700; }

/* ---------- сетки предметов ---------- */
.ug-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px;
  max-height:360px; overflow:auto; padding:4px 6px 4px 4px;
}
.ug-tile{
  --rc:#9B92C4;
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 8px 12px; cursor:pointer; text-align:center; color:#fff;
  border:3px solid rgba(2,12,45,.55); border-radius:14px;
  background:linear-gradient(180deg,rgba(24,72,166,.7),rgba(9,36,102,.7));
  box-shadow:0 4px 0 rgba(4,20,66,.6);
  transition:transform .09s ease, box-shadow .09s ease, filter .14s ease, border-color .14s ease;
}
.ug-tile:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.ug-tile.is-on{
  border-color:var(--rc);
  box-shadow:0 4px 0 rgba(4,20,66,.6), 0 0 0 3px color-mix(in srgb, var(--rc) 45%, transparent), 0 0 22px -6px var(--rc);
}
.ug-tile.is-off{ opacity:.42; }
.ug-tile.is-off:hover{ transform:none; }
.ug-tile-thumb{
  position:relative; width:100%; aspect-ratio:1; border-radius:10px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 70%),
             rgba(3,14,44,.45);
}
.ug-tile-thumb .lt-inner{ width:100%; height:100%; display:grid; place-items:center; }
/* поле у плиток — те же 9 %, что по умолчанию (см. .ug-card .lt-img) */
.ug-tile-qty{
  position:absolute; right:5px; bottom:5px; padding:1px 6px 3px; border-radius:8px;
  background:rgba(3,14,44,.85); font-size:.72rem; font-weight:800;
}
.ug-tile-name{ font-size:.76rem; font-weight:700; line-height:1.2; min-height:2.4em; overflow:hidden; }
.ug-tile-value{ font-size:.82rem; font-weight:900; color:#FFE45C; }
.ug-tile-chance{ font-size:.74rem; font-weight:800; color:#7BE9F3; }

/* ---------- ставка монетами ---------- */
.ug-bet{ display:flex; flex-direction:column; gap:12px; }
.ug-bet-row{ position:relative; }
.ug-bet-input{
  width:100%; padding:14px 44px 16px 16px; border-radius:14px;
  border:3px solid rgba(255,255,255,.12); background:rgba(3,14,44,.6);
  color:#FFE45C; font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
 font-weight:900;
  font-size:1.4rem; letter-spacing:.03em;
}
.ug-bet-input:focus{ outline:none; border-color:rgba(85,184,255,.6); }
.ug-bet-cur{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:#FFE45C; font-size:1.2rem; font-weight:900;
}
.ug-bet-quick{ display:flex; gap:8px; flex-wrap:wrap; }
.ug-bet-note{ color:var(--text-dim); font-size:.82rem; font-weight:600; line-height:1.5; }
.ug-bet-note b{ color:#FFE45C; }

/* ---------- пустой инвентарь ----------
   Собран по референсному кадру апгрейдера. Замеры с него (кадр 1536×1024,
   ящик в нём 351 px по содержимому):

     • СВЕЧЕНИЕ — не круг, а лежачий эллипс: по горизонтали яркость
       падает вдвое медленнее, чем по вертикали (радиусы 900×514 px,
       то есть 2.56 и 1.46 ширины ящика). В центре #0082F7, к краю
       кадра #00219E — берём тот же ход цвета, но с затуханием в
       прозрачность, иначе блок стал бы синей плитой поверх колонки;
     • ЦЕНТР свечения — не центр картинки, а НИЗ ящика (в кадре 520 px
       при основании ящика 531): свет идёт из-под него;
     • ТЕНЬ «на полу» — размытый эллипс 266×56 px, то есть 1.06 ширины
       ящика на 0.22 её же. Стоит на той же высоте, что центр свечения,
       и почти целиком спрятан за ящиком: наружу выходят только крылья
       по бокам. Плотность в крыльях — 0.73 от фона, то есть чёрный
       примерно на 27 %.

   Всё считается от --art (ширина картинки), а не в пикселях: блок живёт
   в колонке, которая на узком экране ужимается вдвое, и тень с ореолом
   должны ужиматься вместе с ящиком.

   ПОЛЯ ВНУТРИ ФАЙЛА. assets/ui/inventory-empty.webp — квадрат 500×500, а сам
   ящик занимает в нём поле 84…451 по горизонтали и 80…401 по вертикали,
   то есть .702 стороны в ширину, .642 в высоту, и снизу остаётся почти
   пятая часть пустоты. Поэтому доли кадра переведены в доли КАРТИНКИ
   (умножены на .702), а пустой низ снят отрицательным полем — иначе
   заголовок отъезжал бы от ящика на треть его высоты. */
.ug-empty{
  /* Ширина в vw, а не в процентах колонки: радиус radial-gradient не
     принимает calc(), в котором проценты смешаны с пикселями (Chrome
     отбрасывает всё правило), а свечение считается именно от --art. */
  --art:clamp(128px, 13vw, 178px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 14px 30px; text-align:center;
  border-radius:14px;
  background:radial-gradient(
    calc(var(--art) * 1.80) calc(var(--art) * 1.02) at 50% calc(26px + var(--art) * .77),
    rgba(0,130,247,.92)  0%,
    rgba(0,120,240,.78) 32%,
    rgba(0, 98,226,.56) 48%,
    rgba(0, 74,210,.34) 62%,
    rgba(0, 54,184,.14) 78%,
    rgba(0, 36,163,  0) 100%);
}
.ug-empty-art{
  position:relative; width:var(--art); aspect-ratio:1;
  margin-bottom:calc(var(--art) * -.198);   /* пустой низ файла */
  display:grid; place-items:center;
}
/* Тень «на полу». Ящик в файле стоит не по центру (справа от него ещё
   две искры), его тело занимает 135…399 из 500 — отсюда центр эллипса
   в 53.4 % ширины картинки, а не в 50 %. Низ эллипса совпадает с низом
   ящика (401 из 500), поэтому наружу выходят только боковые крылья. */
.ug-empty-art::before{
  content:''; position:absolute; left:53.4%; top:73.7%;
  width:72%; height:15%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    rgba(0,8,34,.45) 0%, rgba(0,8,34,.45) 55%, rgba(0,8,34,0) 100%);
}
.ug-empty-art img{
  position:relative; width:100%; height:100%; object-fit:contain;
}
.ug-empty-title{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  /* Кегль поднят с 1.1rem: в кадре заголовок втрое выше подписи на
     плашке, а обводка у него — .07 высоты прописной. На 1.1rem та же
     доля давала меньше пикселя, и буквы сливались с фоном. */
  font-size:1.55rem; letter-spacing:.03em; color:#fff;
  /* Выдавка плюс мягкая тень под ней — в кадре под буквами не только
     чёрная плита, но и размытое пятно на синем. */
  text-shadow:var(--so),var(--extrude), 0 0.14em 0.22em rgba(0,8,34,.55);
}
.ug-empty-text{ color:var(--text-dim); font-size:.86rem; font-weight:600; max-width:34ch;
  text-shadow:0 2px 4px rgba(0,8,34,.55); }
.ug-empty-btn{
  margin-top:6px; border:0; cursor:pointer; color:#fff;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900; font-size:.9rem; letter-spacing:.04em;
  padding:11px 20px 14px; border-radius:14px;
  background:linear-gradient(180deg,var(--green-1),var(--green-2));
  box-shadow:0 5px 0 var(--green-sh);
  --so-r:0.045em;
  text-shadow:var(--so),var(--extrude);
}
.ug-empty-btn:active{ transform:translateY(5px); box-shadow:0 0 0 var(--green-sh); }

/* =====================================================================
   ИСТОРИЯ
   ===================================================================== */
.ug-hist{ padding:0 clamp(16px,3vw,34px) 26px; }
.ug-hist-cap{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900; font-size:.95rem; color:#fff;
  letter-spacing:.04em; margin-bottom:10px;
  --so-r:0.045em;
  text-shadow:var(--so),var(--extrude);
}
.ug-hist-row{ display:flex; gap:10px; overflow:auto; padding-bottom:4px; }
.ug-hist-empty{ color:var(--text-dim); font-size:.84rem; font-weight:600; }
.ug-hist-item{
  position:relative; flex:0 0 auto; width:74px; padding:8px 6px 6px; border-radius:12px;
  background:rgba(4,18,58,.5); border:3px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ug-hist-item.is-win{ border-color:rgba(99,224,110,.55); }
.ug-hist-item.is-loss{ border-color:rgba(255,107,107,.45); opacity:.72; }
.ug-hist-thumb{ width:44px; height:44px; display:grid; place-items:center; }
.ug-hist-thumb .lt-inner{ width:100%; height:100%; display:grid; place-items:center; }
.ug-hist-thumb .lt-img{ --pad:0%; }
.ug-hist-thumb .lt-emoji{ font-size:1.3rem; }
.ug-hist-mark{ position:absolute; right:6px; top:4px; font-size:.8rem; font-weight:900; }
.ug-hist-item.is-win .ug-hist-mark{ color:#63E06E; }
.ug-hist-item.is-loss .ug-hist-mark{ color:#FF6B6B; }
.ug-hist-chance{ font-size:.72rem; font-weight:800; color:var(--text-dim); }

/* =====================================================================
   УЗКИЕ ЭКРАНЫ
   ---------------------------------------------------------------------
   Сначала складывается верхний ряд (круг уходит под гнёзда, чтобы не
   ужиматься до нечитаемого), затем — две колонки выбора.
   ===================================================================== */
@media (max-width:1080px){
  .ug-stage{ grid-template-columns:1fr 1fr; }
  .ug-center{ grid-column:1 / -1; order:-1; }
}
/* =====================================================================
   НИЖНЯЯ ПАНЕЛЬ ДЕЙСТВИЯ — ТОЛЬКО НА ТЕЛЕФОНЕ
   ---------------------------------------------------------------------
   На широком экране гнёзда, круг и оба списка стоят в один-два ряда и
   видны разом. На телефоне они выстраиваются в столбец, и замер при
   393 px показал разрыв: кнопка «Апгрейд» кончается на y=584, сетка
   наград начинается на y=1557 — 973 px между ними при экране 873.
   То есть цель отмечалась вслепую: шанс и кнопка в этот момент за
   верхним краем, и чтобы увидеть, что дал выбор, надо было
   прокручивать назад, а потом снова вниз за следующей целью.

   Панель прижата к низу и держит на виду ровно две величины, ради
   которых и прокручивали: шанс и кнопку. Круг с плашкой исхода при
   этом остаётся наверху в полный размер — ужимать его до строки было
   нельзя, плашка «Апгрейд удался» задана в долях круга (max-width:128%
   у .ug-flash-plate) и в строке стала бы нечитаемой. Вместо этого
   запуск сам подтягивает круг в кадр (см. spin в upgrader.ui.js).
   ===================================================================== */
.ug-dock{ display:none; }

@media (max-width:720px){
  /* Верхнее поле остаётся в долях полосы шапки: в пикселях кнопка
     «назад» уехала бы под свисающие из шапки плашки.
     Нижнее — под панель: 96 px её высоты плюс запас, иначе последняя
     строка истории уходила бы под неё. */
  .ug-screen{
    padding:calc(var(--head-h) * 2.64) 10px calc(104px + env(safe-area-inset-bottom,0px));
    gap:14px;
  }
  .ug-cols{ grid-template-columns:1fr; }
  .ug-stage{ gap:16px; padding:20px 14px; }
  /* ТРИ КОЛОНКИ, А НЕ ДВЕ. Прежние 94 px рассчитывались на три, но не
     добирали одного пикселя: в просвет 301 px три колонки просят
     3x94 + 2x10 = 302, и auto-fill откатывался на две. Каталог из 28
     наград вставал в 14 рядов высотой 3255 px и прокручивался в окне
     300 px — отношение 11:1, поиск цели превращался в перебор вслепую.
     84 px дают три колонки с запасом (272 из 301), рядов становится 10.
     Окно при этом растянуто до 58 % высоты экрана: 300 px были меньше
     двух рядов карточек, то есть список не читался как список. */
  .ug-grid{
    grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
    max-height:min(58vh,460px);
  }
  .ug-card{ padding:8px 8px 10px; }
  .ug-card-thumb{ height:76px; }
  /* Подпись занимает строку целиком — плитки процентов встают под ней
     ровным рядом, а не разрываются посреди. */
  .ug-presets-cap{ flex:1 0 100%; }

  .ug-dock{
    position:fixed; left:0; right:0; bottom:0; z-index:5;
    display:flex; align-items:center; gap:12px;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));
    /* Тот же синий, что у панелей экрана (.ug-col), и жёсткий кант
       сверху вместо мягкой тени — как у полосы цены на карточке. */
    background:linear-gradient(180deg, rgba(7,32,86,.97), rgba(4,18,58,.99));
    border-top:2px solid var(--ink);
    box-shadow:0 -10px 22px -10px rgba(2,10,45,.9);
  }
  .ug-dock-info{ flex:0 0 auto; text-align:center; min-width:66px; }
  .ug-dock-chance{
    font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
    font-weight:900; font-size:1.5rem; line-height:1; color:#fff;
    letter-spacing:.02em;
    --so-r:0.045em;
    text-shadow:var(--so),var(--extrude);
  }
  .ug-dock-chance span{ font-size:.8rem; }
  .ug-dock-cap{ margin-top:3px; color:#7BE9F3; font-weight:800; font-size:.66rem; }
  /* Кнопка растягивается на остаток строки: min-width:200px от общего
     правила .ug-go на узком экране распирал бы панель. */
  .ug-dock-go{ flex:1 1 auto; min-width:0; }

  /* Кнопка под кругом снимается: пока верх экрана на виду, обе видны
     разом и читаются как две разные, хотя делают одно и то же. Подпись
     под ней остаётся — она объясняет, почему кнопка серая. */
  .ug-center .ug-go{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .ug-needle{ transition:none !important; }
  .ug-flash{ transition:none; }
  .ug-backdrop,.ug-screen{ transition:none !important; }
}