/* Дизайн-токени й спільна оправа ре-скіну «Кубічні Глибини».
   Тут живе те, що однакове на всіх екранах: палітра, два шрифти, і невеликий набір
   компонентів-оправ (панель, пігулка, підпис секції, плитка статистики, тумблер, смужка).
   Екрани з них складаються й майже не заводять власних кольорів — інакше кожен новий
   екран ставав би окремою грою.

   Розмітку цих компонентів дає ui/parts.js, стилі — цей файл. Розміри всередині ведені
   від em і dvh: шелл на телефоні втричі нижчий за макет 1280×720, і фіксовані пікселі
   з макета тут просто не читались би. */

:root {
  /* Дерево й кістка — основа сцени. */
  --wood-deep: #0d0906;
  --wood-black: #0b0705;
  --panel-top: #2b1e15;
  --panel-bottom: #1b120d;
  --panel-lit-top: #3a2819;
  --edge: #4a3423;
  --edge-lit: #6d4c30;
  --edge-dim: #2c1f14;

  /* Латунь — усе, що кличе натиснути. */
  --brass: #c9973f;
  --brass-lit: #f2cb84;

  --ink: #f1e4d0;
  --ink-muted: #a3907a;
  --ink-dim: #6b5a45;

  /* Кольори наслідків: вогонь, кров, мох, чари, сталь. */
  --ember: #ff9a3c;
  --blood: #a5342a;
  --blood-lit: #f0a493;
  --moss: #86a341;
  --arcane: #9d6ee8;
  --arcane-lit: #d9c8fa;
  --steel: #6fa8d4;
  --steel-lit: #86bbe8;

  /* Два шрифти й розподіл праці між ними: засічковий — назви й числа, за якими читають
     екран («Кубічні Глибини», «Перемога!», «−12»); гротеск — усе, що читають рядками. */
  --font-display: "Philosopher", "Iowan Old Style", Georgia, serif;
  --font-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --grad-brass: linear-gradient(180deg, #d0982f, #8a5f1b);
  --grad-wood: linear-gradient(180deg, #3a2819, #241811);
  --grad-panel: linear-gradient(180deg, rgba(43, 30, 21, 0.8), rgba(20, 13, 8, 0.9));
  --grad-panel-solid: linear-gradient(180deg, rgba(46, 33, 24, 0.96), rgba(19, 12, 7, 0.98));
  --grad-bar-top: linear-gradient(180deg, #23180f, #150e08);

  --shadow-panel: 0 18px 44px -18px #000;
  --shadow-card: 0 26px 60px -24px #000;
  --glow-brass: 0 0 26px -8px rgba(201, 151, 63, 0.55);

  /* Вертикальний бюджет. 30dvh трею при 360px висоти — це 108px: рівно кубик + відступи. */
  --bar-h: 32px;
  --tray-h: 100px;
  --fs: 12px;
  --pad: 7px;
  --r: 10px;
}

@supports (height: 100dvh) {
  :root {
    --bar-h: clamp(30px, 8.6dvh, 40px);
    --tray-h: clamp(84px, 29dvh, 118px);
    --fs: clamp(11px, 3.4dvh, 15px);
    --pad: clamp(5px, 1.7dvh, 10px);
  }
}

/* ---------- Типографіка ---------- */

.serif { font-family: var(--font-display); }
/* Заголовок екрана: назва вузла, «Перемога!», ім'я класу. Латунь + тепле сяйво під нею —
   те саме поводження, що й у титульного логотипа, лише дрібніше. */
.h-big {
  font-family: var(--font-display);
  font-size: 1.7em;
  font-weight: 700;
  color: var(--brass-lit);
  text-shadow: 0 2px 14px rgba(255, 154, 60, 0.35);
  line-height: 1.1;
}
.h-mid { font-family: var(--font-display); font-size: 1.25em; color: var(--brass-lit); line-height: 1.15; }
.num-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* Підпис секції: розріджені капітеліки латунню. Секцій на екрані буває п'ять-шість, і
   саме цей підпис тримає їх окремими, не витрачаючи на кожну рамку. */
.sec-label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 0.8em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass);
}
.sec-label .sec-aside { margin-left: auto; color: var(--ink-muted); letter-spacing: 0; text-transform: none; }

/* ---------- Панель ---------- */

/* Оправа під будь-який блок поверх фону локації. Фони — детальні малюнки, і текст просто
   на них зникає; панель повертає йому контраст, не гасячи сцену цілком. */
.panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: calc(var(--pad) * 1.2) calc(var(--pad) * 1.4);
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--grad-panel);
  min-width: 0;
}
/* Латунна панель — та, на якій зупиняється погляд: обрана складність, сьогоднішній виклик. */
.panel.lit {
  border-color: var(--brass);
  background: linear-gradient(180deg, rgba(58, 40, 25, 0.94), rgba(19, 12, 7, 0.98));
  box-shadow: var(--glow-brass);
}
.panel.solid { border-color: var(--edge-lit); background: var(--grad-panel-solid); box-shadow: var(--shadow-panel); }
.panel.dashed { border-style: dashed; border-color: var(--brass); background: rgba(201, 151, 63, 0.08); }
.panel.arcane { border-color: var(--arcane); background: rgba(36, 22, 54, 0.7); }
.panel.scroll { overflow-y: auto; min-height: 0; }

/* ---------- Пігулка ---------- */

/* Один клас на всі дрібні мітки: «❤️ 39 HP», «D4», «складність 3 · XP ×1.6». Пігулки
   заміняють таблиці властивостей: рядок із шести пігулок читається одним поглядом. */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.86em; white-space: nowrap;
  color: var(--ink);
}
.pill.brass { border-color: var(--brass); background: rgba(201, 151, 63, 0.1); color: var(--brass-lit); }
.pill.arcane { border-color: var(--arcane); background: rgba(36, 22, 54, 0.86); color: var(--arcane-lit); }
.pill.moss { border-color: var(--moss); background: rgba(28, 36, 18, 0.5); color: var(--moss); }
.pill.blood { border-color: var(--blood); background: rgba(42, 22, 16, 0.7); color: var(--blood-lit); }
.pill.on {
  background: var(--grad-brass); border-color: var(--brass-lit);
  color: #1a1108; font-weight: 700;
}
.pill.off { opacity: 0.45; }
.pill .art { --art-size: 1.05em; }

/* ---------- Плитка статистики ---------- */

/* Число велике й засічкове, підпис дрібний і розріджений: чотири такі плитки в ряд
   читаються як табло, а не як чотири абзаци. */
.stat-tile {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--grad-panel);
  min-width: 0;
}
.stat-tile .st-label {
  font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-tile .st-value { font-family: var(--font-display); font-size: 1.7em; font-weight: 700; line-height: 1.05; }
.stat-tile.center { align-items: center; text-align: center; }
.stat-tile.moss { border-color: var(--moss); background: rgba(28, 36, 18, 0.5); }
.stat-tile.arcane { border-color: var(--arcane); background: rgba(36, 22, 54, 0.5); }

/* ---------- Тумблер і вкладки ---------- */

.opt-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 0.95em; cursor: pointer;
}
.opt-row .opt-hint { font-size: 0.82em; color: var(--ink-dim); }
.toggle {
  position: relative; flex: none;
  width: 40px; height: 22px; border-radius: 999px;
  background: #3a2b1e; border: 1px solid #000;
  transition: background 0.16s ease-out;
}
.toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.16s ease-out, background 0.16s ease-out;
}
.toggle.on { background: linear-gradient(180deg, #8fbf4a, #55801f); }
.toggle.on::after { transform: translateX(18px); background: var(--ink); }

/* Вкладки-сегменти: активна — латунна, решта — просто підписи. Рамка одна на всю групу,
   тож перемикач читається як один орган керування, а не як три окремі кнопки. */
.tabs {
  display: flex; gap: 4px; padding: 3px;
  border-radius: 10px; background: rgba(0, 0, 0, 0.4); border: 1px solid #3a2717;
}
.tabs > * {
  flex: 1; text-align: center; padding: 6px 10px; border-radius: 7px;
  font-size: 0.9em; color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.tabs > .on { background: var(--grad-brass); color: #1a1108; font-weight: 800; }

/* ---------- Смужка прогресу ---------- */

/* Одна оправа на XP, ранг і будь-який інший «стільки з стількох». Приріст, який щойно
   зарахували, миготить окремим сегментом — так видно не лише де ти, а й що додалось. */
.pbar {
  position: relative;
  width: 100%; height: 13px;
  border-radius: 999px; overflow: hidden;
  background: var(--wood-black); border: 1px solid var(--edge-dim);
}
.pbar .fill { height: 100%; background: linear-gradient(180deg, #a97fee, #6d43b8); }
.pbar .fill.brass { background: linear-gradient(90deg, var(--brass), var(--brass-lit)); }
.pbar .fill.moss { background: linear-gradient(180deg, #8fbf4a, #55801f); }
.pbar .gain {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, #cdb3f7, #8a5fd6);
  animation: seg-blink 1.3s ease-in-out infinite;
}
.pbar .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72em; text-shadow: 0 1px 2px #000;
}
.pbar.thin { height: 6px; }
.pbar.thick { height: 16px; }

/* Смужка ресурсу з іконкою збоку (ui/bars.js). Компактний вигляд: шапка рану, трей, картки.
   Прогноз ходу живе прямо в ній — сегмент, що зникне, миготить; приріст світиться за
   заповненням. Наслідок ходу видно там, куди гравець і так дивиться. */
.statbar { display: flex; align-items: center; gap: 5px; width: 100%; }
.statbar + .statbar { margin-top: 3px; }
.statbar .bar-ico { --art-size: clamp(13px, 3.8dvh, 18px); flex: none; filter: drop-shadow(0 1px 2px #000); }
.statbar .hp { flex: 1; min-width: 0; }

.hp {
  position: relative;
  width: 100%;
  height: clamp(11px, 3.2dvh, 15px);
  border-radius: 999px;
  background: var(--wood-black);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #4a342380, 0 3px 8px -3px #000;
  overflow: hidden;
}
.hp .fill { height: 100%; background: linear-gradient(180deg, #8fbf4a, #55801f); transition: width 0.35s ease-out; }
.hp .fill.foe { background: linear-gradient(180deg, #d4523c, #8c2318); }
.hp .fill.mana { background: linear-gradient(180deg, #a97fee, #6d43b8); }
.hp .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.76em; font-weight: 700; letter-spacing: 0.02em;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
/* Прогнозні сегменти. Втрата однакова для всіх смужок — це завжди «стільки зникне». */
.hp .seg { position: absolute; top: 0; bottom: 0; }
.hp .seg.loss {
  background: linear-gradient(180deg, #ffb199, #c9432e);
  animation: seg-blink 0.9s ease-in-out infinite;
}
.hp .seg.gain {
  background: linear-gradient(180deg, #d9f3ac, #86a341);
  animation: seg-blink 1.3s ease-in-out infinite;
}
.hp .seg.gain.mana { background: linear-gradient(180deg, #cdb3f7, #8a5fd6); }

/* Мана — пипками, а не смужкою: її витрачають цілими одиницями, і «скільби ще лишилось»
   тут точніше за частку. Тьмяні пипки — приріст, який дасть цей хід. */
.mana-pips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mana-pips .mp {
  width: clamp(7px, 2dvh, 11px); height: clamp(7px, 2dvh, 11px);
  border-radius: 50%; background: #3a2b1e; flex: none;
}
.mana-pips .mp.on { background: var(--arcane); box-shadow: 0 0 8px var(--arcane); }
.mana-pips .mp.next { background: rgba(157, 110, 232, 0.42); box-shadow: 0 0 8px rgba(157, 110, 232, 0.4); }

/* ---------- Шапка екрана ---------- */

/* Одна й та сама смуга на всіх мета-екранах: назад, назва, і те, що стосується саме
   цього екрана, праворуч. Гравець завжди знає, де вихід. */
.appbar {
  flex: none;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--pad);
  padding: 0 var(--pad);
  background: var(--grad-bar-top);
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 2px 10px -4px #000;
}
.appbar .title {
  font-family: var(--font-display);
  font-size: 1.12em; color: var(--brass-lit); white-space: nowrap;
}
.appbar .grow { flex: 1; min-width: 0; }
.appbar .sub { font-size: 0.82em; color: var(--ink-muted); white-space: nowrap; }

/* Чип акаунта: аватар + нік. Стоїть у шапці мета-екранів і на титульному — одне й те саме
   місце, тож «хто я в цій грі» не доводиться шукати. */
.acc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(11, 7, 5, 0.72); border: 1px solid var(--edge);
  font-size: 0.84em; color: var(--ink-muted); cursor: pointer;
  white-space: nowrap;
}
.acc-chip .acc-face {
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--grad-wood); border: 1px solid var(--edge-lit);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 0.9em;
}
.acc-chip b { color: var(--ink); font-weight: 600; }
.acc-chip .acc-cta { color: var(--brass-lit); }

/* Кругла іконка-кнопка в шапці (⚙, ☰, ←). */
.icon-btn {
  width: calc(var(--bar-h) - 8px); height: calc(var(--bar-h) - 8px);
  flex: none; padding: 0;
  border-radius: 50%;
  background: rgba(11, 7, 5, 0.72); border: 1px solid var(--edge);
  color: var(--ink-muted); font-size: 0.95em;
}

/* ---------- Робоче поле мета-екрана ---------- */

/* Мета-екрани не мають фону локації: замість малюнка — тепле світло згори, як від
   свічки над столом. Так вони читаються як «за межами глибин», але тієї ж гри. */
.meta-body {
  flex: 1; min-height: 0;
  display: flex; gap: var(--pad);
  padding: var(--pad);
  background: radial-gradient(90% 70% at 50% 0%, #2b1e15, var(--wood-black) 78%);
  overflow: hidden;
}
.meta-col { display: flex; flex-direction: column; gap: var(--pad); min-width: 0; min-height: 0; }
.meta-col.grow { flex: 1; }
.meta-scroll { overflow-y: auto; min-height: 0; scrollbar-width: thin; }

.row { display: flex; align-items: center; gap: var(--pad); flex-wrap: wrap; }
.row.tight { gap: 5px; }
.spacer { flex: 1; min-width: 0; }

@keyframes seg-blink {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.45; }
}

/* Знижена анімація — і системна настройка, і власний перемикач у налаштуваннях гри
   (body.calm). Одне правило на обидва входи, щоб не забути жодного місця. */
@media (prefers-reduced-motion: reduce) {
  .pbar .gain, .toggle, .toggle::after { animation: none; transition: none; }
}
body.calm *, body.calm *::before, body.calm *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}