/* =====================================================================
   casual.css — КАЗУАЛЬНИЙ СКІН (Royal Match / Playrix).

   ЩО ЦЕ ТАКЕ
   ----------
   style.css тримає РОЗКЛАДКУ, warmatch.css поверх неї малював «метал»:
   піксельні фаски, сканлайни, стенсил-шрифт, анімації в steps(). Цей
   файл — новий верхній шар, який ту саму розкладку перефарбовує в
   яскравий соковитий псевдо-3D: круглі кнопки з бліком і торцем,
   кремові дерев'яні панелі, м'які тіні, пружинні анімації.

   ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ ПРАВКА warmatch.css
   -------------------------------------------
   Скін мусить лишатись одним шаром, який можна зняти. Поки в грі є
   екрани, які ще не пройшли редизайн (полотно міні-гри малюється в
   games/reforge/js/render.js, а не тут), тримати обидві мови в одному
   файлі — гарантований конфлікт. Тут же діє одне правило: якщо в
   попередніх файлах стоїть !important — тут теж, інакше шар не
   переб'є warmatch.css.

   ПРАВИЛА СТИЛЮ
   -------------
   · КНОПКА  — світлий верх, темний торець знизу, білий блік угорі,
               натиск = кнопка сідає на торець (translateY);
   · ПАНЕЛЬ  — кремове тіло, подвійний дерев'яний кант, м'яка тінь;
   · ТЕКСТ   — округлий гротеск 800/900, темно-коричневий на світлому,
               білий з тінню на кольоровому;
   · РУХ     — cubic-bezier із перельотом, ніяких steps().
===================================================================== */

:root {
  /* ---------- зелений: головна дія ---------- */
  --cz-green-hi: #a9ef5c;
  --cz-green: #6fd42a;
  --cz-green-d: #46ab16;
  --cz-green-rim: #2c7410;
  --cz-green-rim-d: #1d4e0a;

  /* ---------- синій: нейтральна дія ---------- */
  --cz-blue-hi: #7fd4ff;
  --cz-blue: #35a7f5;
  --cz-blue-d: #1a78d0;
  --cz-blue-rim: #10528f;

  /* ---------- червоний: скасувати, небезпека ---------- */
  --cz-red-hi: #ff9a72;
  --cz-red: #ff6a45;
  --cz-red-d: #e03a1c;
  --cz-red-rim: #9c2410;

  /* ---------- золото: валюта, нагороди ---------- */
  --cz-gold-hi: #ffe9a3;
  --cz-gold: #ffc23c;
  --cz-gold-d: #f09410;
  --cz-gold-rim: #a75d06;

  /* ---------- дерево й папір: панелі ---------- */
  --cz-cream: #fff6e2;
  --cz-cream-d: #ffe4b8;
  --cz-wood: #c07a34;
  --cz-wood-d: #7d4718;
  --cz-ink: #4a2c12;
  --cz-ink-soft: #8a6338;

  /* Округлий гротеск замість консольного моноширинного. Локальних
     шрифтів у грі немає й не буде (жодних зовнішніх запитів), тому
     беремо системний стек: Segoe UI на Windows, Roboto в WebView. */
  --font: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --cz-mono: "Lucida Console", "Consolas", "DejaVu Sans Mono", monospace;
}

/* Термінал лишається терміналом: там моноширинний шрифт — це зміст, а
   не оформлення (рівні колонки, псевдографіка). */
#crt, #crt * , .hacked-os, .hacked-os * { font-family: var(--cz-mono); }

body { -webkit-font-smoothing: antialiased; }

/* Піксельний рендер лишається ЛИШЕ полотнам з арт-роздільністю. Усе,
   що є інтерфейсом, згладжується. */
.px-btn, .px-panel, .px-text, .zoras-av,
img:not([data-pixel]) { image-rendering: auto !important; }

/* =====================================================================
   1 — ТИТУЛЬНИЙ ЕКРАН
   Сцена вже несе назву (вивіска в кадрі) і весь настрій, тому шапки
   екран не має: єдиний елемент інтерфейсу — кнопка «ГРАТИ». Стоїть у
   небі над ратушею, де малюнок найтихіший.
===================================================================== */
#menu {
  background: #8fd3ff url("../art/redesign/menu-lobby.jpg") center top / cover no-repeat !important;
}
#menu .bg-canvas { display: none !important; }
#menu .layer {
  display: block !important;
  padding: 0 !important;
  position: relative; height: 100%;
}

.cz-play {
  position: absolute; left: 50%; top: 17%;
  width: min(62%, 300px);
  margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
  animation: cz-play-in .5s cubic-bezier(.2,1.5,.45,1) both,
             cz-play-idle 2.8s 1.1s ease-in-out infinite;
}
.cz-play-face {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 22px 19px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cz-green-hi) 0%, var(--cz-green) 42%, var(--cz-green-d) 100%);
  /* Торець — окрема тінь без розмиття: саме він дає відчуття об'єму,
     і саме він «зникає» під пальцем. */
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.8),
    inset 0 -7px 0 rgba(23,84,10,.32),
    0 0 0 5px var(--cz-green-rim),
    0 0 0 8px rgba(16,48,8,.5),
    0 10px 0 var(--cz-green-rim-d),
    0 18px 26px rgba(8,30,6,.45);
  transition: transform .12s cubic-bezier(.2,.9,.3,1.3), box-shadow .12s ease;
}
/* блік: широка світла лінза по верхній третині */
.cz-play-face::before {
  content: "";
  position: absolute; left: 6%; right: 6%; top: 4px; height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events: none;
}
/* пробіг сонячного відсвіту — те, що робить кнопку «соковитою» */
.cz-play-face::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  animation: cz-shine 3.6s 1.4s linear infinite;
  pointer-events: none;
}
.cz-play-ico {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 20px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  filter: drop-shadow(0 2px 0 rgba(23,84,10,.55));
}
.cz-play-lab {
  color: #fff;
  font-size: clamp(22px, calc(6.2 * var(--vw)), 34px);
  font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(23,84,10,.6), 0 4px 10px rgba(10,40,6,.4);
}
.cz-play:active { animation-play-state: paused; }
.cz-play:active .cz-play-face {
  transform: translateY(8px);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.6),
    inset 0 -4px 0 rgba(23,84,10,.3),
    0 0 0 5px var(--cz-green-rim),
    0 0 0 8px rgba(16,48,8,.5),
    0 2px 0 var(--cz-green-rim-d),
    0 6px 12px rgba(8,30,6,.4);
}
@keyframes cz-play-in {
  from { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes cz-play-idle {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.045); }
}
@keyframes cz-shine {
  0%   { background-position: 150% 0; }
  40%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}

/* =====================================================================
   2 — КНОПКИ
   Один силует на всю гру: круглий, з торцем і бліком. Колір каже, що
   станеться: зелений — почати/підтвердити, синій — нейтральне,
   червоний — скасувати, золотий — купити.
===================================================================== */
.px-btn {
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.3) !important;
  padding: 13px 24px !important;
  border: 0 !important;
  border-radius: 20px !important;
  clip-path: none !important;
  image-rendering: auto !important;
  background: linear-gradient(180deg, var(--cz-blue-hi) 0%, var(--cz-blue) 45%, var(--cz-blue-d) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -5px 0 rgba(0,0,0,.16),
    0 6px 0 var(--cz-blue-rim),
    0 10px 16px rgba(10,25,45,.35) !important;
  transition: transform .1s cubic-bezier(.2,.9,.3,1.3), box-shadow .1s ease, filter .12s !important;
}
.px-btn::before { display: none !important; }        /* піксельна фаска */
.px-btn:hover { filter: brightness(1.06); }
.px-btn:active {
  transform: translateY(5px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -3px 0 rgba(0,0,0,.14),
    0 1px 0 var(--cz-blue-rim),
    0 3px 7px rgba(10,25,45,.32) !important;
}

.px-btn.cyan {
  background: linear-gradient(180deg, var(--cz-green-hi) 0%, var(--cz-green) 45%, var(--cz-green-d) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    inset 0 -5px 0 rgba(23,84,10,.28),
    0 6px 0 var(--cz-green-rim),
    0 10px 16px rgba(12,40,10,.35) !important;
}
.px-btn.cyan:active {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -3px 0 rgba(23,84,10,.24),
    0 1px 0 var(--cz-green-rim),
    0 3px 7px rgba(12,40,10,.3) !important;
}

/* золото — відбудувати, купити, забрати: дія, що ЩОСЬ ДАЄ */
.px-btn.green {
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(140,80,6,.75) !important;
  background: linear-gradient(180deg, var(--cz-gold-hi) 0%, var(--cz-gold) 42%, var(--cz-gold-d) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    inset 0 -5px 0 rgba(150,85,6,.28),
    0 6px 0 var(--cz-gold-rim),
    0 10px 16px rgba(80,45,6,.35) !important;
}
.px-btn.green:active {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7),
    0 1px 0 var(--cz-gold-rim),
    0 3px 7px rgba(80,45,6,.3) !important;
}

.px-btn.danger, .px-btn.ap-reset {
  background: linear-gradient(180deg, var(--cz-red-hi) 0%, var(--cz-red) 45%, var(--cz-red-d) 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -5px 0 rgba(120,20,8,.3),
    0 6px 0 var(--cz-red-rim),
    0 10px 16px rgba(70,15,8,.35) !important;
}
.px-btn.danger:active, .px-btn.ap-reset:active {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    0 1px 0 var(--cz-red-rim),
    0 3px 7px rgba(70,15,8,.3) !important;
}

/* «привид» — другорядна дія: паперова кнопка з дерев'яним кантом */
.px-btn.ghost {
  color: var(--cz-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
  background: linear-gradient(180deg, #fffdf7 0%, var(--cz-cream-d) 100%) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -4px 0 rgba(160,110,50,.2),
    0 5px 0 var(--cz-wood),
    0 9px 14px rgba(60,35,10,.3) !important;
}
.px-btn.ghost:active {
  box-shadow:
    inset 0 2px 0 #fff,
    0 1px 0 var(--cz-wood),
    0 3px 7px rgba(60,35,10,.28) !important;
}

/* круглі іконкові кнопки (шестерня, закрити, пропустити) */
.px-btn.icon-only, .gear-btn, .loc-close, .sp-close {
  border-radius: 50% !important;
  padding: 0 !important;
  width: 42px !important; height: 42px !important;
  font-size: 18px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}

/* =====================================================================
   3 — ПАНЕЛІ Й ПОПАПИ
   Кремовий папір у подвійному дерев'яному канті. Один вигляд на всі
   вікна гри — склад, локація, налаштування, магазин, нагорода.
===================================================================== */
.px-panel,
.loc-card, .stock-card, .acc-card, .lc-card,
#audioPanel .ap-card, #collections .col-card, #demoEnd .de-card, .shop-card {
  background:
    linear-gradient(180deg, #fffdf6 0%, var(--cz-cream) 46%, var(--cz-cream-d) 100%) !important;
  border: 0 !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    inset 0 -5px 0 rgba(170,120,60,.18),
    0 0 0 5px var(--cz-wood),
    0 0 0 9px var(--cz-wood-d),
    0 20px 34px rgba(30,15,5,.5) !important;
  color: var(--cz-ink) !important;
  padding: 18px 18px 16px !important;
}
.px-panel::before, .px-panel::after { display: none !important; }

/* заголовок вікна — темне дерево на кремі */
.ap-title, .loc-title, .stock-title, .col-title, .de-title, .acc-title {
  color: var(--cz-ink) !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.8) !important;
}
.ap-label, .rc-lab, .loc-sub, .col-sub {
  color: var(--cz-ink-soft) !important;
  text-shadow: none !important;
}

/* затемнення позаду вікна — тепле, а не чорне */
#locPanel, #stockPanel, #audioPanel, #collections, #demoEnd, .accuse-overlay {
  background: rgba(38,20,8,.55) !important;
  backdrop-filter: blur(2px);
}

/* нижні шухляди (локація, склад) — та сама панель, але прирощена до низу */
.loc-card, .stock-card {
  border-radius: 28px 28px 0 0 !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 -5px 0 var(--cz-wood),
    0 -9px 0 var(--cz-wood-d),
    0 -14px 30px rgba(30,15,5,.45) !important;
  animation: cz-drawer .28s cubic-bezier(.2,.9,.3,1.15) !important;
}
@keyframes cz-drawer { from { transform: translateY(100%); } to { transform: translateY(0); } }
.loc-bar, .stock-bar {
  border-bottom: 3px solid rgba(192,122,52,.35) !important;
  background: none !important;
}

/* =====================================================================
   4 — HUD НА КАРТІ
   Лічильники — це кругляші-«льодяники», а не стрічки з фасками.
===================================================================== */
/* Суцільної смуги .base-top більше немає — HUD плаває на карті
   (див. css/base.css). Перефарбовувати нема чого; лишається сам
   профіль, який тепер компактна пігулка над картою і мусить читатись
   на будь-якому тлі. */
.base-hud-tl .profile-hud {
  background: linear-gradient(180deg, rgba(255,246,226,.94), rgba(255,228,184,.9)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--cz-wood), 0 6px 10px rgba(60,35,10,.3) !important;
}
.coins {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 5px 12px 5px 10px !important;
  background: linear-gradient(180deg, #fffdf7, var(--cz-cream-d)) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 3px 0 var(--cz-wood),
    0 6px 10px rgba(60,35,10,.25) !important;
  color: var(--cz-ink) !important;
}
.coins b { color: var(--cz-ink) !important; font-weight: 900; }
.coins .coin-ic { color: var(--cz-gold-d) !important; }

/* Енергія ПОНАД стелею. У казуальному скіні всі три лічильники — однакові
   кремові льодяники (кольори з base.css тут перебиті !important), тож
   запас понад ліміт мусить відрізнятись сам: інакше «125» замість
   «100/100» читається просто як ще одне число. Золота пігулка — та сама
   мова, якою скін уже позначає рівень гравця. */
.coins.energy.over {
  background: linear-gradient(180deg, #fff3c4, #ffd257) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 3px 0 var(--cz-gold-rim),
    0 6px 10px rgba(60,35,10,.25) !important;
}

.profile-hud {
  background: none !important;
  box-shadow: none !important;
}
/* ...але на карті вона таки має підкладку: без неї білий текст рівня
   губиться на світлій траві. Правило вище лишається для решти екранів. */
.ph-lvl {
  color: #fff !important;
  background: linear-gradient(180deg, var(--cz-gold-hi), var(--cz-gold-d)) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 var(--cz-gold-rim) !important;
  text-shadow: 0 2px 0 rgba(140,80,6,.7) !important;
  font-weight: 900 !important;
}
.ph-xp {
  border-radius: 999px !important;
  background: rgba(122,71,24,.25) !important;
  box-shadow: inset 0 2px 4px rgba(80,45,12,.4) !important;
  overflow: hidden;
}
.ph-xp-fill {
  background: linear-gradient(180deg, var(--cz-green-hi), var(--cz-green-d)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6) !important;
}
.ph-xp-num { color: var(--cz-ink) !important; text-shadow: 0 1px 0 rgba(255,255,255,.6) !important; }

/* бічні фішки (територія, склад, обмін, магазин) */
.rail-chip .rc-ico {
  border-radius: 50% !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.6),
    0 5px 0 rgba(0,0,0,.28),
    0 9px 14px rgba(0,0,0,.35) !important;
}
.rail-chip .rc-lab {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  text-shadow: 0 2px 0 rgba(40,20,6,.75) !important;
}
.rc-badge {
  border-radius: 50% !important;
  background: linear-gradient(180deg, var(--cz-red-hi), var(--cz-red-d)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--cz-red-rim) !important;
  color: #fff !important;
}

.base-hint {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  background: rgba(38,20,8,.82) !important;
  color: #fff8e8 !important;
  font-weight: 800 !important;
  letter-spacing: .4px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}

/* =====================================================================
   5 — ХМАРКА АСИСТЕНТА
   Біла казуальна хмарка з дерев'яним кантом замість темної панелі.
===================================================================== */
.zoras-box {
  background: linear-gradient(180deg, #fffdf6, var(--cz-cream)) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 0 0 4px var(--cz-wood),
    0 0 0 7px var(--cz-wood-d),
    0 10px 20px rgba(30,15,5,.45) !important;
  color: var(--cz-ink) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
.zoras-box .who {
  color: #c46a12 !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
.zoras-box::after { color: var(--cz-wood-d) !important; text-shadow: none !important; }
#lobby .zoras-box::before, #btPandaHost .zoras-box::before{
  background: var(--cz-cream) !important;
  box-shadow: 0 0 0 4px var(--cz-wood), 0 0 0 7px var(--cz-wood-d) !important;
}

/* =====================================================================
   6 — ДРІБНИЦІ
===================================================================== */
#toast {
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(38,20,8,.9) !important;
  color: #fff8e8 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.45) !important;
}
input[type="range"] { accent-color: var(--cz-green-d); }

/* =====================================================================
   7 — ВМІСТ ВІКОН: ЛОКАЦІЯ, СКЛАД
   Дрібні елементи всередині панелей теж мають бути «м'якими»: інакше
   кремова картка з піксельними плитками всередині виглядає як два
   різні інтерфейси, вкладені один в одного.
===================================================================== */
.loc-bar, .stock-bar { padding: 10px 14px 8px !important; }
.loc-title, .stock-title { font-size: 17px !important; }

.loc-close, .stock-close {
  border: 0 !important;
  border-radius: 50% !important;
  width: 34px !important; height: 34px !important;
  font-size: 15px !important; font-weight: 900 !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--cz-red-hi), var(--cz-red-d)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 4px 0 var(--cz-red-rim),
    0 7px 10px rgba(70,15,8,.35) !important;
}
.loc-close:active, .stock-close:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 var(--cz-red-rim) !important;
}

/* вітрина будівлі — небо, а не темна ніша */
.loc-art {
  height: 132px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(126,203,74,.55), rgba(126,203,74,0) 62%),
    linear-gradient(180deg, #bfe9ff 0%, #e8f7ff 62%, #fff6e2 100%) !important;
  box-shadow:
    inset 0 0 0 3px rgba(192,122,52,.45),
    inset 0 4px 10px rgba(120,80,30,.14) !important;
}
.loc-art.ruin { filter: none !important; }

/* поділки рівня — золоті намистини */
.lv-pips .pip {
  width: 14px !important; height: 9px !important;
  border: 0 !important; border-radius: 999px !important;
  background: rgba(122,71,24,.35) !important;
  box-shadow: inset 0 1px 2px rgba(60,35,10,.5) !important;
}
.lv-pips .pip.on {
  background: linear-gradient(180deg, var(--cz-gold-hi), var(--cz-gold-d)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 var(--cz-gold-rim) !important;
}
.lv-pips .pip.on.max {
  background: linear-gradient(180deg, var(--cz-green-hi), var(--cz-green-d)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 0 var(--cz-green-rim) !important;
}

/* підзаголовки блоків */
.lb-title, .sg-title {
  color: var(--cz-ink) !important;
  font-size: 11px !important; font-weight: 900 !important; letter-spacing: .8px !important;
  border-bottom: 3px dotted rgba(192,122,52,.55) !important;
  padding-bottom: 5px !important; margin-bottom: 7px !important;
}
.lb-title.ok { color: #3f8f14 !important; border-bottom-color: rgba(111,212,42,.5) !important; }
.lb-title.miss { color: var(--cz-red-d) !important; border-bottom-color: rgba(224,58,28,.4) !important; }

/* плитки ресурсів, вимог і складу — однакові кремові пігулки */
.res-chip, .req, .stock-row {
  border: 0 !important;
  border-radius: 14px !important;
  padding: 5px 9px 5px 6px !important;
  background: linear-gradient(180deg, #fffdf7, #ffeed2) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 2px 0 rgba(160,110,50,.35),
    0 4px 7px rgba(90,55,15,.14) !important;
  color: var(--cz-ink) !important;
  font-size: 11px !important; font-weight: 800 !important;
}
.stock-row { border-radius: 16px !important; margin-bottom: 5px !important; padding: 6px 12px !important; }
.res-chip.new, .res-chip.coin {
  background: linear-gradient(180deg, #fff4d0, #ffdb92) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--cz-gold-rim) !important;
}
.res-chip.coin b, .sr-num, .req-num { color: #2f7d0d !important; font-weight: 900 !important; }
.req.miss {
  background: linear-gradient(180deg, #ffe6de, #ffc9b8) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 2px 0 var(--cz-red-rim) !important;
}
.req.miss .req-num { color: var(--cz-red-d) !important; }
.req-name, .sr-name { color: var(--cz-ink-soft) !important; font-size: 10px !important; }
.req-coin { color: var(--cz-gold-d) !important; }
/* плитки складу — той самий кремовий кант, але квадратні: у сітку
   вміщається вся група локації, а не два чипи в рядок */
.stk-tile {
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffdf7, #ffeed2) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 2px 0 rgba(160,110,50,.35),
    0 4px 7px rgba(90,55,15,.14) !important;
}
.stk-tile.zero { opacity: .42 !important; }
.stk-n { color: #2f7d0d !important; font-weight: 900 !important; }
.stk-lab { color: var(--cz-ink-soft) !important; font-weight: 800 !important; }
.stk-sum {
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fff4d0, #ffdb92) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 var(--cz-gold-rim) !important;
  color: var(--cz-ink-soft) !important; font-weight: 800 !important;
}
.stk-sum b { color: var(--cz-ink) !important; font-weight: 900 !important; }

/* смуга прогресу рапортів */
.hq-reports .rep-bar {
  height: 20px !important;
  border: 0 !important; border-radius: 999px !important;
  background: rgba(122,71,24,.28) !important;
  box-shadow: inset 0 2px 5px rgba(60,35,10,.4) !important;
  overflow: hidden;
}
.hq-reports .rep-fill {
  background: linear-gradient(180deg, var(--cz-green-hi), var(--cz-green-d)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6) !important;
  transition: width .35s cubic-bezier(.2,.9,.3,1.1) !important;
}
.hq-reports .rep-num {
  color: #fff !important; font-size: 11px !important; font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(40,20,6,.85) !important;
}

/* ПОКАЗНИКИ ТОЧКИ — та сама кремова картка, що й решта скіна.
   Мілітарі-варіант (темна плашка з жовтим кантом) читався як службовий
   блок, а це головне пояснення екрана. */
.loc-mech {
  border: 0 !important; border-radius: 16px !important;
  padding: 8px 10px !important;
  background: linear-gradient(180deg, #fffdf6, #ffe9c8) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 2px 0 rgba(192,122,52,.28) !important;
}
.loc-mech-wrap .loc-mech {
  border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9) !important;
}
.lm-k { color: #a8814e !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0 !important; opacity: 1 !important; }
.lm-v { color: #7a4718 !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0 !important; }
.lm-bar .lm-p {
  border: 0 !important; border-radius: 3px !important;
  width: 10px !important; height: 7px !important;
  background: rgba(192,122,52,.25) !important;
}
.lm-bar .lm-p.on { background: linear-gradient(180deg, #ffc65c, #e89410) !important; }
.lm-quirk {
  border: 0 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 7px 12px !important;
  background: linear-gradient(180deg, #ffe9c8, #ffd79a) !important;
  color: #8a4a10 !important; font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* рядок-попередження всередині картки */
.loc-gate {
  border: 0 !important; border-radius: 14px !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, #ffe6de, #ffcdbd) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8) !important;
  color: #a33218 !important; font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.loc-gate.max {
  background: linear-gradient(180deg, #e6ffd4, #c6f2a4) !important;
  color: #2f7d0d !important;
}

/* підвал з діями */
.loc-acts {
  border-top: 3px solid rgba(192,122,52,.35) !important;
  background: none !important;
  padding: 10px 12px 12px !important;
  gap: 8px !important;
}
.loc-acts .px-btn { font-size: 12px !important; padding: 12px 6px !important; }
.loc-acts .px-btn:disabled, .px-btn:disabled {
  opacity: 1 !important;
  filter: none !important;
  color: rgba(255,255,255,.75) !important;
  background: linear-gradient(180deg, #cdbfae, #a89787) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 #776758 !important;
}
.loc-acts .px-btn.dim { filter: saturate(.5) !important; }
.loc-acts .px-btn.ready { animation: cz-ready 1.5s ease-in-out infinite !important; }
@keyframes cz-ready {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.03); }
}

.stock-empty { color: var(--cz-ink-soft) !important; font-size: 12px !important; }

/* =====================================================================
   8 — ПОВНОЕКРАННІ ВІКНА: ТРОФЕЇ, ДОШКА ПОШАНИ, АРСЕНАЛ
   Це не «системні екрани» на чорному, а такі самі кімнати гри: тепле
   небо, кремові картки, дерев'яні канти. Сканлайни зняті — вони були
   частиною CRT-мови, якої більше немає.
===================================================================== */
#collections, #leaderboard, #shop {
  background:
    radial-gradient(120% 80% at 50% 0%, #bfe9ff 0%, #8fd3ff 45%, #5cb3ee 100%) !important;
}
#collections::after, #leaderboard::after, #shop::after { display: none !important; }

.col-topbar {
  border-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(255,246,226,.96), rgba(255,228,184,.92)) !important;
  box-shadow: 0 4px 0 var(--cz-wood), 0 8px 14px rgba(40,20,6,.28) !important;
}
.col-title {
  color: var(--cz-ink) !important;
  font-size: 20px !important; font-weight: 900 !important; letter-spacing: 1px !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.85) !important;
}
.collect-close {
  border: 0 !important; border-radius: 50% !important;
  width: 38px !important; height: 38px !important;
  color: #fff !important; font-size: 16px !important; font-weight: 900 !important;
  background: linear-gradient(180deg, var(--cz-red-hi), var(--cz-red-d)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 var(--cz-red-rim) !important;
}
.collect-close:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 var(--cz-red-rim) !important;
}

/* картки трофеїв */
.col-card {
  border-radius: 26px !important;
  background: linear-gradient(180deg, #fffdf6, var(--cz-cream-d)) !important;
  color: var(--cz-ink) !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 0 0 4px var(--cz-wood),
    0 0 0 7px var(--cz-wood-d),
    0 12px 22px rgba(30,15,5,.4) !important;
  transition: transform .14s cubic-bezier(.2,.9,.3,1.3) !important;
}
.col-card:active { transform: translateY(4px) scale(.985) !important; filter: none !important; }
.col-card .col-ic { color: var(--cz-wood-d) !important; text-shadow: 0 2px 0 rgba(255,255,255,.8) !important; }
.col-card .col-name { color: var(--cz-ink) !important; font-weight: 900 !important; letter-spacing: 1px !important; }
.col-card .col-sub { color: var(--cz-ink-soft) !important; letter-spacing: .4px !important; }
.col-card.video .col-ic { color: var(--cz-red-d) !important; }

/* вкладки та фішки — пігулки */
.lb-tab, .lb-chip {
  border: 0 !important; border-radius: 999px !important;
  padding: 9px 16px !important;
  color: var(--cz-ink) !important; font-weight: 800 !important;
  background: linear-gradient(180deg, #fffdf7, var(--cz-cream-d)) !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(122,71,24,.5) !important;
}
.lb-tab.active, .lb-chip.active {
  color: #fff !important;
  background: linear-gradient(180deg, var(--cz-green-hi), var(--cz-green-d)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 var(--cz-green-rim) !important;
  text-shadow: 0 1px 0 rgba(23,84,10,.6) !important;
}

/* рядки дошки пошани */
.lb-row {
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fffdf7, var(--cz-cream-d)) !important;
  color: var(--cz-ink) !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 rgba(122,71,24,.4) !important;
  margin-bottom: 7px;
}
.lb-row .lb-rank { color: var(--cz-ink-soft) !important; }
.lb-row .lb-score { color: #2f7d0d !important; }
.lb-row.top1 { box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--cz-gold-rim), 0 0 0 3px var(--cz-gold) !important; }
.lb-row.top2 { box-shadow: inset 0 2px 0 #fff, 0 3px 0 #7d8b95, 0 0 0 3px #c9d3da !important; }
.lb-row.top3 { box-shadow: inset 0 2px 0 #fff, 0 3px 0 #8a4a1c, 0 0 0 3px #d18a45 !important; }
.lb-row.me {
  background: linear-gradient(180deg, #e9ffd8, #c9f5a6) !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--cz-green-rim) !important;
}
.lb-row.me .lb-name { color: #2f7d0d !important; }
.lb-sep { color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,.3) !important; }

/* магазин */
.shop-balance {
  color: #fff !important; font-weight: 800 !important;
  text-shadow: 0 2px 4px rgba(20,60,90,.5) !important;
}
.shop-balance b { color: #fff !important; }
/* Картки самі рахують свою висоту. Без цього рядка сітка ділить висоту
   екрана порівну між ними, і в кожній видно лише перший рядок: решта
   змісту йде під overflow. */
.shop-grid { grid-auto-rows: min-content !important; }

.shop-card {
  /* ярлик («НАЙПОПУЛЯРНІШЕ») висить над верхнім краєм картки, тому
     обрізати вміст не можна */
  overflow: visible !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, #fffdf6, var(--cz-cream-d)) !important;
  color: var(--cz-ink) !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 0 0 4px var(--cz-wood),
    0 0 0 7px var(--cz-wood-d),
    0 12px 22px rgba(30,15,5,.4) !important;
}
.shop-card.gold {
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 0 0 4px var(--cz-gold),
    0 0 0 7px var(--cz-gold-rim),
    0 12px 22px rgba(60,35,5,.4) !important;
}
.shop-card::after, .shop-card::before { display: none !important; }   /* «небезпечна» смуга з мілітарі-скіна */
.shop-card .sc-tag {
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--cz-red-hi), var(--cz-red-d)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--cz-red-rim) !important;
  color: #fff !important;
}
.shop-card.gold .sc-tag {
  background: linear-gradient(180deg, var(--cz-gold-hi), var(--cz-gold-d)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 var(--cz-gold-rim) !important;
  color: #5a3406 !important;
}
.shop-card .sc-amount, .bn-row .bn-num { color: var(--cz-ink) !important; }
.shop-card .sc-unit { color: var(--cz-gold-d) !important; text-shadow: none !important; }
.shop-card .sc-bonus, .bn-bonus { color: #2f7d0d !important; }
.bn-title { color: var(--cz-wood-d) !important; letter-spacing: 1px !important; }
.bn-row {
  border-radius: 14px !important; padding: 8px 12px !important;
  background: linear-gradient(180deg, #fff, #ffeed2) !important;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 rgba(160,110,50,.35) !important;
}
.bn-row .bn-lbl { color: var(--cz-ink-soft) !important; }
.bn-row .bn-ic { text-shadow: none !important; }
.shop-card .sc-buy {
  border-radius: 18px !important;
  color: #fff !important; font-weight: 900 !important;
  text-shadow: 0 2px 0 rgba(23,84,10,.6) !important;
  background: linear-gradient(180deg, var(--cz-green-hi), var(--cz-green-d)) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 5px 0 var(--cz-green-rim) !important;
}
.shop-card .sc-buy:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 1px 0 var(--cz-green-rim) !important;
}
.shop-card .sc-buy[disabled] {
  background: linear-gradient(180deg, #cdbfae, #a89787) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 #776758 !important;
}
.bo-chip {
  border-radius: 999px !important; color: var(--cz-ink) !important;
  background: linear-gradient(180deg, #fff, #ffeed2) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(160,110,50,.4) !important;
}

/* =====================================================================
   9 — НАГОРОДА Й ФІНАЛ
===================================================================== */
#reward .card {
  background: linear-gradient(180deg, #fffdf6, var(--cz-cream-d)) !important;
  border-radius: 30px !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 0 0 5px var(--cz-gold),
    0 0 0 9px var(--cz-gold-rim),
    0 18px 34px rgba(60,35,5,.5) !important;
  animation: cz-pop .42s cubic-bezier(.2,1.5,.45,1) both !important;
}
#reward .big, #rewardBig {
  color: #2f7d0d !important;
  font-weight: 900 !important;
  text-shadow: 0 3px 0 rgba(255,255,255,.9), 0 5px 12px rgba(40,90,10,.35) !important;
}
#reward .sub, #rewardSub { color: var(--cz-ink-soft) !important; text-shadow: none !important; }
@keyframes cz-pop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#demoEnd .de-title {
  color: var(--cz-ink) !important; letter-spacing: 1px !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.85) !important;
}
#demoEnd .de-sub { color: var(--cz-ink-soft) !important; }

/* =====================================================================
   10 — ХОСТ МІНІ-ГРИ
   Рамка навколо iframe. Саме полотно гри малює себе само
   (games/reforge/js/render.js) — сюди воно не дістає.
===================================================================== */
.puz-bar, #puzzle .puz-bar {
  background: linear-gradient(180deg, rgba(255,246,226,.96), rgba(255,228,184,.92)) !important;
  border-bottom: 0 !important;
  box-shadow: 0 4px 0 var(--cz-wood), 0 8px 14px rgba(40,20,6,.28) !important;
}
.puz-title { color: var(--cz-ink) !important; font-weight: 900 !important; text-shadow: 0 2px 0 rgba(255,255,255,.8) !important; }

/* =====================================================================
   11 — НАЛАШТУВАННЯ
   Повзунок гучності — головна деталь цього вікна, і саме він лишався
   «залізним»: сегментована шкала й металева ручка. Тут він стає
   м'яким: заглиблений жолоб, зелена заливка, кругла ручка з бліком.
===================================================================== */
#audioPanel .ap-title { letter-spacing: 1px !important; font-size: 20px !important; }
#audioPanel .ap-label { color: var(--cz-ink) !important; font-weight: 800 !important; letter-spacing: .5px !important; }
#audioPanel .ap-val { color: var(--cz-ink) !important; font-weight: 900 !important; text-shadow: none !important; }

#audioPanel input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #e2c79c, #f3e0c0) !important;
  box-shadow: inset 0 3px 5px rgba(90,55,15,.35), inset 0 -1px 0 rgba(255,255,255,.6) !important;
  image-rendering: auto !important;
}
#audioPanel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px !important; height: 28px !important;
  border: 0 !important; border-radius: 50% !important;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 12%, var(--cz-green-hi) 30%, var(--cz-green-d) 100%) !important;
  box-shadow: 0 3px 0 var(--cz-green-rim), 0 5px 8px rgba(20,60,10,.4) !important;
  cursor: pointer;
}
#audioPanel input[type="range"]::-moz-range-thumb {
  width: 28px !important; height: 28px !important;
  border: 0 !important; border-radius: 50% !important;
  background: radial-gradient(circle at 34% 28%, #ffffff 0 12%, var(--cz-green-hi) 30%, var(--cz-green-d) 100%) !important;
  box-shadow: 0 3px 0 var(--cz-green-rim), 0 5px 8px rgba(20,60,10,.4) !important;
  cursor: pointer;
}

/* «скинути прогрес» — небезпечна дія, тож червона попри клас ghost */
#audioPanel .ap-btns .px-btn.ap-reset, .px-btn.ghost.ap-reset {
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(120,20,8,.55) !important;
  background: linear-gradient(180deg, var(--cz-red-hi), var(--cz-red-d)) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 5px 0 var(--cz-red-rim),
    0 9px 14px rgba(70,15,8,.32) !important;
}
#audioPanel .ap-btns .px-btn.muted {
  color: var(--cz-ink) !important;
  box-shadow:
    inset 0 2px 0 #fff,
    0 5px 0 var(--cz-wood),
    0 9px 14px rgba(60,35,10,.3) !important;
}

/* =====================================================================
   12 — ШАПКА МІНІ-ГРИ
   Це чужа рамка навколо полотна гри, і поки вона лишалась чорною
   стрічкою, будь-який казуальний вміст під нею читався як екран із
   іншої гри.
===================================================================== */
#puzzle { background: #7fc9f2 !important; }
#puzzle .puz-head, .puz-head {
  background: linear-gradient(180deg, #fffaf0, var(--cz-cream-d)) !important;
  border-bottom: 0 !important;
  box-shadow: 0 4px 0 var(--cz-wood), 0 8px 14px rgba(40,20,6,.28) !important;
}
.puz-title { color: var(--cz-ink) !important; font-weight: 900 !important; letter-spacing: .5px !important; text-shadow: 0 2px 0 rgba(255,255,255,.8) !important; }
#puzTitle .pt-loc { color: var(--cz-ink) !important; }
#puzTitle .pt-score { color: #2f7d0d !important; text-shadow: none !important; }
#puzTitle .pt-combo {
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--cz-gold-hi), var(--cz-gold-d)) !important;
  color: #5a3406 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
#puzHint .ph-tag {
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--cz-red-hi), var(--cz-red-d)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}