/* =====================================================================
   economy.css — КРИСТАЛИ, ЖИТТЯ, МАГАЗИН.

   Три речі, які не влізли в жоден із наявних файлів:

   1. ЛІЧИЛЬНИКИ. Чотири плитки в один ряд (життя · зірки · монети ·
      кристали) і смуга енергії під ними.

   2. МАГАЗИН у розкладці binitown (bt-store). Класи навмисно збережені
      з оригіналу — так видно, що це та сама вітрина, а не схожа.
      Перефарбовано під синій системний UI гри (system-blue.css):
      binitown'івський рожево-бірюзовий тут читався б як чужий екран.

   3. ПОПАП ЖИТТІВ.

   Вантажиться ОСТАННІМ (див. index.html): перебиває і generated-skin,
   і system-blue, обидва з яких уже сказали своє про .coins.
===================================================================== */

/* ==================================================================
   1. ЛІЧИЛЬНИКИ
================================================================== */

/* Ряд ділиться на чотири. Монети — єдина плитка, що РОСТЕ: у них
   найдовше число (шестизначне до кінця гри), тоді як життя й зірки
   однозначні, а кристали три-чотиризначні. Решта беруть по мінімуму й
   віддають надлишок монетам. */
#lobby .base-hud-tr {
  left: 86px; right: 52px; top: 13px; gap: 4px;
  justify-content: space-between;
}
#lobby .base-hud-tr .coins {
  flex: 0 1 auto !important; width: auto !important;
  min-width: 0 !important; max-width: none !important;
  height: 34px;
  padding: 3px 6px 3px 7px !important;
  gap: 2px;
}
#lobby .base-hud-tr .coins#hudCoinsBtn { flex: 1 1 auto !important; }
#lobby .base-hud-tr .coins b { font-size: 12px !important; }
#lobby .base-hud-tr .coins .coin-ic {
  width: 24px !important; height: 24px !important; flex: 0 0 24px;
}

/* ---- ОДНА ПІДКЛАДКА НА ВСІ ЧОТИРИ ----

   Тут кожен лічильник мав свій колір плитки: кристали фіолетову, життя
   червону, зірки бузкову. У ряд це складалось як чотири різні елементи
   інтерфейсу, а не як один набір — око читало їх поштучно, замість
   охопити разом. Колір лишається там, де він щось означає й так, — на
   САМІЙ ІКОНЦІ; підкладка спільна, синя, системна. */
#lobby .base-hud-tr .coins,
#lobby .base-hud-tr .coins.gems,
#lobby .base-hud-tr .coins.lives,
#lobby .base-hud-tr .coins.stars {
  border: 2px solid var(--sys-blue-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #176fd0, #084b9b) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 #052b59, 0 5px 10px rgba(0,0,0,.46) !important;
  color: #fff !important;
  font-family: inherit;
}
.coins.gems .coin-ic { background-image: url("../art/generated/ui/gem.png") !important; }
.coins.lives .coin-ic { background-image: url("../art/generated/ui/heart.png") !important; }

/* Плитки гаманця — кнопки, і мусять виглядати натисними. */
#lobby .base-hud-tr button.coins { cursor: pointer; -webkit-appearance: none; appearance: none; }
#lobby .base-hud-tr button.coins:active { transform: translateY(2px); }

/* ---- ЖИТТЯ ----

   ЧИСЛО ЖИВЕ НА СЕРЦІ. Воно однозначне завжди (стеля 3), тож окрема
   колонка під нього — витрачений піксель у найтіснішому місці екрана.
   Уся звільнена ширина пішла ВІДЛІКУ: був 8-піксельним дрібним рядком,
   який доводилось видивлятись, став 11-піксельним і читається з першого
   погляду — а саме він тут і є відповідь на «коли можна далі».

   Серце трохи більше за решту іконок ряду: воно тепер несе текст, і на
   24 px цифра з обводкою в нього не влазить. */
#lobby .base-hud-tr .coins.lives { padding-left: 3px !important; }
#lobby .base-hud-tr .coins.lives .coin-ic {
  position: relative;
  width: 28px !important; height: 28px !important; flex: 0 0 28px;
  display: grid; place-items: center;
}
#lobby .base-hud-tr .coins.lives .coin-ic b {
  /* НАД шаром малюнка. ::before нижче — це абсолютно позиційований
     елемент, а такі малюються поверх звичайного вмісту незалежно від
     порядку в розмітці: без цього рядка цифра лежала під серцем. */
  position: relative; z-index: 1;
  font: 1000 13px/1 system-ui !important;
  color: #fff !important;
  /* Обводка, а не тінь: цифра лежить на малюнку серця, у якому є і
     світлий блік, і темний контур, — під один бік підкладки вона
     однаково провалилась би. */
  text-shadow:
    0 1px 0 #6b0f22, 0 -1px 0 #6b0f22, 1px 0 0 #6b0f22, -1px 0 0 #6b0f22,
    0 2px 3px rgba(0,0,0,.55) !important;
}
#lobby .base-hud-tr .coins.lives .coin-timer {
  font: 900 11px/1 system-ui; letter-spacing: .01em;
  color: #dff0ff; text-shadow: 0 1px 0 rgba(0,0,0,.65);
  font-variant-numeric: tabular-nums;
  padding-right: 2px;
}
#lobby .base-hud-tr .coins.lives.full .coin-timer { display: none; }
#lobby .base-hud-tr .coins.lives.empty {
  background: linear-gradient(180deg, #8a8f9a, #545a66) !important;
  border-color: #cdd3dc !important;
  animation: life-nudge 1.8s ease-in-out infinite;
}
/* Порожній бак: сіріє САМ МАЛЮНОК, а не нуль на ньому. Фільтр на
   .coin-ic знебарвив би й цифру разом із фоном, тому картинка їде в
   ::before, а текст лишається поверх неї чистим. */
#lobby .base-hud-tr .coins.lives .coin-ic::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: inherit;
}
#lobby .base-hud-tr .coins.lives.empty .coin-ic::before { filter: grayscale(1) brightness(.75); }
@keyframes life-nudge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ==================================================================
   ЕНЕРГІЯ — СМУГА, А НЕ ПЛИТКА

   Єдиний лічильник зі СТЕЛЕЮ (ENERGY_MAX), і питання до нього не
   «скільки в мене», а «на скільки заходів вистачить» — тобто питання
   про частку. Число на нього не відповідає: «93» нічого не означає,
   поки не згадаєш, що повний бак це сотня. Смуга відповідає з одного
   погляду.

   Стоїть під плитками й на всю їхню ширину: так вона читається як
   підсумок ряду, а не як п'ятий лічильник, що не влізає.
================================================================== */
.base-hud-energy {
  position: absolute; z-index: 4;
  /* ВЕРТИКАЛЬНО: 13 (верх ряду) + 34 (висота плитки) + 3 просвіту + 2 на
     тінь плитки, яка виступає на 3 px нижче рамки (`0 3px 0`) — інакше
     смуга сідала рівно на цю тінь і читалась як приклеєна до плиток.

     ГОРИЗОНТАЛЬНО: однаковий відступ від ОБОХ країв екрана.

     Раніше тут стояло `left: 86px; right: 52px` — смуга повторювала межі
     ряду плиток. Але сам ряд не симетричний: ліворуч від нього плашка
     профілю (72 + 8 + просвіт = 86), праворуч лише шестерня (42 + 8 =
     52). Смуга від того сиділа на 34 px ближче до правого краю, і в
     кадрі, де все інше вирівняне, це читалось як зсув.

     86 з двох боків — це найширший з двох сусідів, узятий двічі. Ліве
     число диктує профіль (під нього залізти не можна: плашка йде до
     y=86, тобто нижче за смугу), а праве просто дорівнює лівому. */
  left: 86px; right: 86px; top: 56px;
  display: flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px 0 3px;
  border: 2px solid var(--sys-blue-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #10528f, #06356e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #052b59, 0 4px 8px rgba(0,0,0,.42);
  color: #fff; font: 900 11px/1 system-ui;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  pointer-events: auto;
}
.base-hud-energy:active { transform: translateY(2px); }
.base-hud-energy .he-ic {
  flex: 0 0 20px; width: 20px; height: 20px;
  background: url("../art/generated/ui/energy.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
.base-hud-energy .he-track {
  flex: 1 1 auto; min-width: 0; height: 8px;
  border-radius: 999px; overflow: hidden;
  background: #04203f;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
}
.base-hud-energy .he-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #7fdcff, #2b91ef);
  transition: width .25s ease;
}
.base-hud-energy b {
  flex: 0 0 auto; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
/* Понад стелею смуга повна й золота — «125» при стелі 100 інакше
   читалось би як зламаний лічильник. */
.base-hud-energy.over .he-fill { background: linear-gradient(180deg, #ffe9a4, #f2a91e); }
.base-hud-energy.over b { color: #ffe9a4; }
/* На один захід уже не вистачає — смуга червоніє ще до того, як гравець
   тапне «ГРАТИ» й дізнається про це відмовою. */
.base-hud-energy.poor { border-color: #ff9db1; }
.base-hud-energy.poor .he-fill { background: linear-gradient(180deg, #ff8ea6, #d8324f); }

@media (max-height: 700px) {
  .base-hud-energy { top: 53px; }
}

/* ==================================================================
   2. МАГАЗИН (розкладка binitown, фарба WarMatch)
================================================================== */
/* ==================================================================
   ЗАТЕМНЕННЯ: ПОВНИЙ ЕКРАН, А HUD — ПОВЕРХ НЬОГО

   Спершу тут стояло `top: var(--hud-b)`: затемнення відступало на висоту
   верхньої смуги, і виходило вирізане вікно — прямокутник світлої карти
   над темним екраном, з видимим швом по краю. Прямокутник читався як
   недомальований шар, а не як «це доступно».

   Правильна фігура — темний ЕКРАН і лічильники ПОВЕРХ темряви. Але
   зробити це з боку попапа неможливо: #app має transform (js/scale.js
   масштабує сцену цілком), тобто власний контекст накладання, і жоден
   z-index зсередини не підніме HUD над попапом, що висить поза #app.

   Тому роботу розділено:
     · попап (.bt-store-overlay) не малює затемнення взагалі — лише
       тримає картку по центру;
     · затемнення малює .hud-scrim ВСЕРЕДИНІ сцени (див. index.html),
       нижче за HUD і вище за все інше;
     · HUD на час попапа піднімається над скримом.

   Виходить одна суцільна темрява без швів і без вирізаних вікон.
================================================================== */
.hud-scrim {
  position: absolute; inset: 0; z-index: 10;
  /* Скрим лежить у .base-view, а карта тягнеться за її межі полосами
     кадру. -50vw/-50vh накриває і полоси: інакше по краях лишалась би
     світла рамка, тобто те саме вирізане вікно, тільки навиворіт. */
  margin: -50vh -50vw;
  background: rgba(3, 14, 30, .78);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
body.overlay-on .hud-scrim { opacity: 1; }

/* ПОЛОСИ КАДРУ ТЕМНІЮТЬ ОКРЕМО.

   #app має `overflow: hidden` (css/style.css), тож скрим усередині нього
   обрізаний по сцені — а поза сценою, у полосах, лишався неторканий фон
   сторінки. Виходив вертикальний шов по краях сцени: рівно те саме
   вирізане вікно, від якого й ішли, тільки навпаки.

   Тому полоси затемнює окремий шар на <body>. Він лежить НИЖЧЕ за #app
   (позиційований z-index:0 проти z-index:auto далі в розмітці — порядок
   документа вирішує), тому всередині сцени його не видно взагалі: там
   поверх нього непрозора карта. Видно його рівно там, де потрібно. */
body.overlay-on::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: rgba(3, 14, 30, .78);
  pointer-events: none;
}

/* HUD над скримом — рівно на час попапа.

   Постійно тримати його на 20 не можна: затемнення навчання (#btStage)
   стоїть на 5, і HUD, піднятий назавжди, світив би крізь нього — а
   навчання тим і живе, що недоступне виглядає недоступним. */
body.overlay-on #lobby .base-hud-tl,
body.overlay-on #lobby .base-hud-tr,
body.overlay-on #lobby .base-hud-energy,
body.overlay-on #lobby #btnSettings { z-index: 20; }

.bt-store-overlay {
  position: fixed; inset: 0; z-index: 99200;
  display: none; align-items: center; justify-content: center;
  /* Відступ згори тримає картку НИЖЧЕ за лічильники: темрява під ними
     суцільна, але сама картка на них не налазить. Число ставить JS
     (Shop.fitOverlay) — сцена масштабується, тож у пікселях вікна висота
     HUD різна на кожному екрані. */
  padding: calc(var(--hud-b, 96px) + 8px) 16px 16px;
  /* Затемнення тут НЕ малюється — його малює .hud-scrim (див. вище). */
  background: none;
}
.bt-store-overlay.show { display: flex; }

/* #shop — СТАРИЙ ID З НОВОЮ РОЛЛЮ.

   Під ним досі лежить чотири шари правил колишнього «АРСЕНАЛУ»:
   `#shop{position:fixed;inset:0}` у style.css плюс три фони з
   `!important` (casual, warmatch, system-blue). ID б'є клас, а
   `!important` б'є все, тому `.bt-store-overlay` сам по собі не
   перекриває старий фон.

   Знімати ті правила з style.css не можна — вони спільні з
   #collections і #leaderboard, які досі виглядають так, як виглядали.
   Тому тут стоїть точкове перекриття рівно на ті властивості, що
   змінились. */
#shop.bt-store-overlay {
  z-index: 99200;
  flex-direction: row;
  background: none !important;
  background-image: none !important;
}
/* Скан-лінії старого CRT-магазину. Лишились єдиним, що ще малює
   #shop::after, і тепер вони лягали б поверх картки. */
#shop.bt-store-overlay::after { display: none !important; }

.bt-store {
  position: relative;
  display: flex; flex-direction: column;
  width: min(96vw, 760px); max-height: 92vh;
  padding: 16px 18px 12px;
  border: 3px solid #fff; border-radius: 26px;
  background: linear-gradient(180deg, #1d7ad8 0%, #0b4b98 42%, #06356e 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.62), inset 0 3px 0 rgba(255,255,255,.28);
  color: #eef7ff;
  font-family: system-ui, sans-serif;
}
/* Два тихих відблиски у верхніх кутах — те саме, що робить картку
   binitown «іграшковою», а не діалогом операційної системи. */
.bt-store::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 23px; opacity: .3;
  background:
    radial-gradient(circle at 10% 4%, #fff 0 4%, transparent 20%),
    radial-gradient(circle at 90% 0, #fff 0 3%, transparent 17%);
}
.bt-store-close {
  position: absolute; z-index: 3; right: 12px; top: 12px;
  width: 40px; height: 40px; border: 3px solid #fff; border-radius: 50%;
  background: linear-gradient(180deg, #ff6b86, #e03156);
  color: #fff; font: 900 20px/1 system-ui; cursor: pointer;
  box-shadow: 0 4px 0 #a5203d, 0 5px 10px rgba(0,0,0,.45);
}
.bt-store-close:active { transform: translateY(3px); box-shadow: 0 1px 0 #a5203d; }

.bt-store-head {
  position: relative;
  padding-right: 52px; min-height: 42px;
}
.bt-store-head h2 {
  margin: 0; color: #fff; font: 900 26px/1 system-ui; letter-spacing: .04em;
  text-shadow: 0 3px 0 #052b59;
}
.bt-store-kicker {
  color: #9ed4ff; font: 1000 10px/1 system-ui; letter-spacing: 3px; margin-bottom: 5px;
}
/* Іконка валюти. Один клас на всі місця, де валюта згадується:
   вкладка, гаманець, ціна на кнопці, попап життів. */
.bt-res {
  display: inline-block; flex: 0 0 auto; width: 22px; height: 22px;
  background: center/contain no-repeat; vertical-align: middle;
}
.bt-res.energy { background-image: url("../art/generated/ui/energy.png"); }
.bt-res.coin   { background-image: url("../art/generated/ui/coin.png"); }
.bt-res.gem    { background-image: url("../art/generated/ui/gem.png"); }
.bt-res.avatar { background-image: url("../art/profile-avatars/avatar-1.png"); border-radius: 50%; }
.bt-res.booster{ background-image: url("../art/boosters/hammer.png"); }

/* П'ять вкладок В ОДИН РЯД не влазять у телефон, і горизонтальний скрол
   тут гірший за перенос: обрізана з правого краю вкладка читається як
   «це все», і дві останні полиці (аватари й бустери) гравець просто не
   знаходить. Тому ряд ПЕРЕНОСИТЬСЯ — 3+2 — і видно завжди всі п'ять. */
.bt-store-tabs {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 12px;
}
.bt-store-tabs button {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  border: 2px solid rgba(255,255,255,.28); border-radius: 16px;
  padding: 6px 12px 6px 8px;
  background: rgba(4, 29, 61, .6); color: #cfe8ff;
  font: 900 12px/1 system-ui; letter-spacing: .04em; cursor: pointer;
  white-space: nowrap;
  /* Капс МАЛЮЄТЬСЯ, а не пишеться в тексті — див. коментар до TABS у
     js/shop.js: капсом «ЕНЕРГІЯ» вже зайнято під назву ресурсу. */
  text-transform: uppercase;
}
.bt-store-tabs .bt-res { width: 24px; height: 24px; }
.bt-store-tabs button.active {
  color: #2b1400; border-color: #fff;
  background: linear-gradient(180deg, #ffd950, #f2a91e);
  box-shadow: 0 4px 0 #bd7618;
  transform: translateY(-2px);
}

.bt-store-grid {
  position: relative; flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start; gap: 10px; padding: 2px 2px 10px;
}
.bt-product {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 8px 8px 10px;
  border: 3px solid #fff; border-radius: 20px;
  background: linear-gradient(180deg, #f6fbff, #d9ecff);
  box-shadow: 0 6px 0 rgba(4,32,68,.5), 0 8px 16px rgba(0,0,0,.36);
}
.bt-product img {
  width: 100%; height: 92px; object-fit: contain;
  border-radius: 14px; background: rgba(16, 84, 158, .12);
  padding: 6px;
}
.bt-product h3 {
  margin: 8px 2px 3px; min-height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: #08355f; font: 900 12px/1.1 system-ui; letter-spacing: .03em;
}
.bt-product-what {
  margin: 0 0 8px; min-height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
  color: #14608f; font: 800 13px/1 system-ui;
}
.bt-product-what .bt-res { width: 20px; height: 20px; }
.bt-product button {
  margin-top: auto; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 36px; padding: 6px;
  border: 0; border-radius: 13px;
  background: linear-gradient(180deg, #ffd950, #f2a91e);
  color: #57330b; font: 1000 14px/1 system-ui;
  box-shadow: 0 4px 0 #bd7618; cursor: pointer;
}
.bt-product button .bt-res { width: 20px; height: 20px; }
.bt-product button:active { transform: translateY(3px); box-shadow: 0 1px 0 #bd7618; }
.bt-product button:disabled {
  color: #2f5a41; background: #b8e4c6; box-shadow: 0 4px 0 #74b189; cursor: default;
}
.bt-product.owned img { filter: saturate(.75); }
.bt-product-badge {
  position: absolute; z-index: 2; top: 12px; right: -32px;
  width: 118px; padding: 3px 0; transform: rotate(37deg);
  color: #fff; background: #ff4f78;
  font: 1000 9px/1.3 system-ui; letter-spacing: .04em;
  box-shadow: 0 3px 7px rgba(116,38,59,.4);
}

/* Пак бустерів: чотири іконки з числом замість рядка тексту. */
.bt-boost { display: inline-flex; align-items: center; gap: 2px; font: 900 12px/1 system-ui; }
.bt-boost i { width: 22px; height: 22px; background: center/contain no-repeat; }
.bt-stock-row {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,.26); background: rgba(4, 29, 61, .55);
  color: #dcefff;
}
.bt-stock-lab { font: 1000 10px/1 system-ui; letter-spacing: .12em; color: #9ed4ff; }
.bt-stock-note { flex: 1 1 100%; font: 700 10px/1.3 system-ui; color: #9ed4ff; }

.bt-store-note {
  position: relative; margin: 6px 0 0; text-align: center;
  color: #9ed4ff; font: 700 10px/1.3 system-ui;
}

@media (max-width: 520px) {
  .bt-store { padding: 12px 12px 10px; border-radius: 22px; }
  .bt-store-head h2 { font-size: 21px; }
  .bt-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .bt-product { padding: 6px 5px 8px; border-width: 2px; border-radius: 16px; }
  .bt-product img { height: 64px; }
  .bt-product h3 { font-size: 10px; min-height: 22px; margin: 6px 0 2px; }
  .bt-product-what { font-size: 11px; min-height: 22px; margin-bottom: 6px; }
  .bt-product-what .bt-res, .bt-boost i { width: 17px; height: 17px; }
  .bt-boost { font-size: 10px; }
  .bt-product button { font-size: 12px; min-height: 32px; }
  .bt-store-tabs { gap: 5px; margin: 9px 0; }
  .bt-store-tabs button { padding: 5px 9px 5px 6px; font-size: 10px; letter-spacing: 0; }
  .bt-store-tabs .bt-res { width: 19px; height: 19px; }
}

/* ==================================================================
   3. ПОПАП ЖИТТІВ
================================================================== */
.lives-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: min(90vw, 360px); padding: 22px 20px 16px;
  border: 3px solid #fff; border-radius: 26px;
  background: linear-gradient(180deg, #1d7ad8 0%, #0b4b98 45%, #06356e 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.62), inset 0 3px 0 rgba(255,255,255,.28);
  color: #eef7ff; font-family: system-ui, sans-serif; text-align: center;
}
/* `hidden` мусить перемагати `display:flex`.

   Правило браузера `[hidden]{display:none}` — це селектор атрибута, і
   будь-який клас із власним `display` його перебиває. Попап ховає
   рядок часу, годинник і кнопку поповнення саме через `hidden` (див.
   renderModal у js/lives.js), і без цього рядка кнопка лишалась на
   екрані порожньою золотою смугою. */
.lives-card [hidden] { display: none !important; }

.lives-hearts { display: flex; gap: 10px; margin-bottom: 12px; }
.lives-hearts i {
  width: 46px; height: 46px; display: block;
  background: url("../art/generated/ui/heart.png") center/contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
/* Погашене серце — сіре й притемнене, а не просто прозоре: прозорість
   на синьому тлі читається як «ще малюється». */
.lives-hearts i.off { filter: grayscale(1) brightness(.5); opacity: .8; }
.lives-card h2 {
  margin: 0 0 4px; color: #fff; font: 900 20px/1.1 system-ui; letter-spacing: .04em;
  text-shadow: 0 3px 0 #052b59;
}
.lives-sub { margin: 0; color: #9ed4ff; font: 800 12px/1.2 system-ui; }
.lives-clock {
  margin: 4px 0 14px;
  font: 1000 34px/1 system-ui; letter-spacing: .04em; color: #fff;
  text-shadow: 0 3px 0 #052b59;
  font-variant-numeric: tabular-nums;
}
.lives-buy {
  width: 100%; min-height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 15px;
  background: linear-gradient(180deg, #ffd950, #f2a91e);
  color: #57330b; font: 1000 16px/1 system-ui; letter-spacing: .03em;
  box-shadow: 0 5px 0 #bd7618; cursor: pointer;
}
.lives-buy .bt-res { width: 22px; height: 22px; }
.lives-buy:active { transform: translateY(3px); box-shadow: 0 2px 0 #bd7618; }
.lives-buy:disabled { color: #2f5a41; background: #b8e4c6; box-shadow: 0 4px 0 #74b189; cursor: default; }
/* «Не вистачає» не блокує кнопку: тап по ній веде в магазин, а це і є
   найкорисніша дія в цей момент. Тому вигляд приглушений, а не мертвий. */
.lives-buy.poor { background: linear-gradient(180deg, #b9c8da, #8598ad); color: #2c3d50; box-shadow: 0 5px 0 #5f7286; }
.lives-later {
  margin-top: 8px; width: 100%; min-height: 36px;
  border: 2px solid rgba(255,255,255,.34); border-radius: 13px;
  background: rgba(4, 29, 61, .5); color: #cfe8ff;
  font: 900 13px/1 system-ui; letter-spacing: .05em; cursor: pointer;
}
.lives-later:active { transform: translateY(2px); }

/* ==================================================================
   4. ПЛИТКА МОНЕТ У ПОПАПІ ЛОКАЦІЇ

   Була золотою плиткою з голим числом — єдиною в ряду без предмета,
   поруч із ящиками ресурсів, які всі малюють свою іконку. Тепер це
   така сама плитка, як ресурсна: спільна підкладка, спільний розмір,
   а монета — та сама картинка, що в лічильнику на карті.
================================================================== */
#locPanel .res-chip.coin {
  flex-direction: column; gap: 1px;
  background: rgba(169,214,255,.12) !important;
  box-shadow: inset 0 0 0 2px rgba(169,214,255,.26) !important;
}
#locPanel .res-chip.coin .coin-ic {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#locPanel .res-chip.coin b {
  color: #ffe9a4 !important;
  font: 900 13px/1 system-ui !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

/* ==================================================================
   5. ЗАМКНЕНИЙ АВАТАР У ПРОФІЛІ

   Портрет, який ще не куплено, читається замкненим тим самим способом,
   що й інструмент у грі: знебарвлений арт плюс замок ПОВЕРХ нього.
   Прозорість тут не годиться — на світлій картці профілю вона виглядає
   як «ще вантажиться», а не як «недоступно».
================================================================== */
.profile-avatar-option.locked img { filter: grayscale(1) brightness(.62); }
.profile-avatar-option.locked { position: relative; }
.profile-avatar-option.locked::after {
  content: "🔒";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,.7);
  pointer-events: none;
}

/* Ціна входу на кнопці «ГРАТИ»: іконка енергії з числом одразу за
   підписом. Сіріє, коли енергії бракує, — кнопка при цьому лишається
   натисною й веде в магазин (див. openPuzzle у js/game.js). */
#locPlay .play-cost {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; padding: 2px 7px 2px 4px;
  border-radius: 999px;
  background: rgba(3, 22, 46, .42);
  font: 900 12px/1 system-ui;
}
#locPlay .play-cost::before {
  content: ""; width: 15px; height: 15px;
  background: url("../art/generated/ui/energy.png") center/contain no-repeat;
}
#locPlay .play-cost b { color: #fff; }
#locPlay.poorFuel .play-cost { background: rgba(120, 20, 20, .5); }
#locPlay.poorFuel .play-cost::before { filter: grayscale(1) brightness(.7); }
#locPlay.poorFuel .play-cost b { color: #ffc9c9; }

/* Кнопка «ГРАТИ» без життів. Не вимкнена — вона й далі веде далі, просто
   в попап життів (див. openPuzzle у js/game.js), — але мусить попередити
   про це ДО тапу, інакше попап читається як збій. */
#locPlay.noLives::after {
  content: "";
  display: inline-block; width: 16px; height: 16px; margin-left: 6px;
  vertical-align: -3px;
  background: url("../art/generated/ui/heart.png") center/contain no-repeat;
  filter: grayscale(1) brightness(.65);
}

/* ==================================================================
   6. ТОСТ ПОВЕРХ ПОПАПІВ

   Він переїхав із #app назовні (див. index.html): усередині сцени, яка
   має `transform`, жоден z-index не підняв би його над магазином і
   попапом життів. А саме там він і потрібен найбільше — «не вистачає
   кристалів» після тапу по кнопці купівлі раніше з'являлось під
   затемненням, тобто ніде.

   99400 — вище за оверлеї магазину/життів (99200) і за попапи бази
   (99000), але це й усе: тост нічого не ловить пальцем
   (pointer-events: none у css/style.css), тож перекрити він нічого не
   може за визначенням.
================================================================== */
#toast { z-index: 99400 !important; }