/* ---------- Екрани рану поза боєм: вибір класу, дерево, підготовка, крамниця, подія,
              пролог, підсумок, діалог результату ---------- */

/* Спільне: блок, який стоїть посеред сцени панеллю (пролог, медальйон класу). Фон локації —
   детальний малюнок, і будь-який текст поверх нього зникає, тож панель тут обов'язкова. */
.center-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
}

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

.topbar-hp { width: clamp(70px, 16vw, 130px); flex: none; }
.run-meta {
  font-size: 0.8em; font-weight: 600; color: var(--brass-lit); white-space: nowrap;
}
.gold-pill { font-weight: 700; font-size: 0.95em; }
.avatar { --art-size: calc(var(--bar-h) - 8px); flex: none; }
.avatar img, .avatar .art-fb { transform: scaleX(-1); }

/* Бусини вузлів: пройдений шлях рану одним поглядом, без підписів. */
.beads { display: flex; gap: 3px; justify-content: center; }
.bead {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2a1c12; border: 1px solid #46301e;
}
.bead.done { background: var(--brass); border-color: var(--brass); }
.bead.current { background: var(--brass-lit); box-shadow: 0 0 7px var(--brass-lit); transform: scale(1.45); }
.bead.elite { border-radius: 2px; }
.bead.boss { border-radius: 2px; width: 9px; height: 9px; border-color: var(--blood); }

.act-dots { display: flex; gap: 3px; flex: none; }
.act-dot { width: 6px; height: 6px; border-radius: 2px; background: #2a1c12; border: 1px solid #46301e; }
.act-dot.done { background: var(--brass); border-color: var(--brass); }
.act-dot.current { background: var(--brass-lit); box-shadow: 0 0 6px var(--brass-lit); }

/* ---------- Трей поза боєм ---------- */

/* Вертикальний підпис збоку — не декор: без нього ряд кубиків унизу читається як «кубики
   цього екрана» (товар, трофей), хоча це саме твій набір, який ти носиш через увесь ран. */
.tray-label {
  flex: none;
  writing-mode: vertical-rl; transform: rotate(180deg);
  height: 72%;
  text-align: center;
  font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass);
}
.tray-count { font-size: 0.76em; line-height: 1.35; text-align: right; }

/* ---------- Вибір класу ---------- */

.class-head {
  position: absolute; left: 0; right: 0; top: calc(var(--pad) * 0.8);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  z-index: 2; pointer-events: none;
  text-shadow: 0 2px 10px #000;
}
.class-head .muted { font-size: 0.8em; }

/* min-width:0 обов'язковий: інакше flex-елемент не стискається вужче за свій вміст
   (XP-бар), і чотири картки виїжджають за краї екрана. */
.class-row {
  position: absolute; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
  gap: var(--pad);
  padding: calc(var(--pad) * 5.4) var(--pad) var(--pad);
}
.class-card {
  position: relative;
  flex: 1 1 0; min-width: 0; max-width: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  padding: calc(var(--pad) * 1.4) 8px var(--pad);
  border-radius: 16px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(43, 30, 21, 0.82), rgba(15, 10, 6, 0.94));
  cursor: pointer;
}
@media (hover: hover) {
  .class-card:hover {
    border-color: var(--brass);
    background: linear-gradient(180deg, rgba(58, 40, 25, 0.92), rgba(15, 10, 6, 0.96));
    box-shadow: var(--glow-brass), 0 22px 50px -22px #000;
  }
}
.class-card .sprite { --art-size: clamp(44px, 19dvh, 116px); }
.class-card .cname { font-size: 1.2em; color: var(--brass-lit); }
.class-card .cdesc {
  /* width: 100% обов'язковий: -webkit-box поводиться як флекс-контейнер і без явної ширини
     стискається до нуля, тобто опис класу просто зникає. */
  width: 100%;
  font-size: 0.74em; line-height: 1.3; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.class-card .pbar { width: 90%; }
.class-card .lvl {
  position: absolute; top: 7px; left: 8px;
  font-size: 0.7em; color: var(--brass-lit);
  background: rgba(11, 7, 5, 0.8); border: 1px solid var(--edge-lit);
  border-radius: 999px; padding: 1px 8px;
}
/* Бейдж доступних очок навичок: клас кличе у дерево, поки їх не витрачено. */
.class-card .sp-flag {
  position: absolute; top: 7px; right: 8px;
  font-size: 0.7em; color: var(--arcane-lit);
  background: rgba(36, 22, 54, 0.9); border: 1px solid var(--arcane);
  border-radius: 999px; padding: 1px 8px;
}
.statline { display: flex; gap: 10px; font-size: 0.78em; color: var(--ink-muted); }
.statline b { color: var(--ink); }

/* Нижня смуга головної: легенда граней і входи в мета-екрани. */
.home-foot { display: flex; align-items: center; gap: var(--pad); width: 100%; }
.home-foot button { font-size: 0.86em; }

/* ---------- Медальйон класу ---------- */

.classdet-card {
  align-items: center; text-align: center; gap: 7px;
  max-width: min(440px, 100%); max-height: 100%; overflow-y: auto;
}
.classdet-card .sprite { --art-size: clamp(52px, 21dvh, 120px); }
.classdet-card .pbar { width: min(280px, 86%); }
.sp-dot { color: var(--arcane-lit); }

/* ---------- Дерево навичок ---------- */

.tree-wrap {
  position: absolute; inset: 0;
  display: flex; gap: var(--pad); padding: var(--pad);
  overflow: hidden;
}
.tree-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tree-col-title {
  font-size: 1.05em; color: var(--brass-lit);
  text-align: center; padding-bottom: 5px;
  border-bottom: 1px solid var(--edge);
}
/* Статус — кольором рамки: гілка читається зверху вниз одним поглядом, не читаючи підписів. */
.tree-node {
  border: 1px solid var(--edge); border-radius: 10px;
  padding: 6px 10px; background: rgba(30, 21, 15, 0.7);
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.82em;
}
.tree-node.purchased { border-color: var(--moss); background: rgba(28, 36, 18, 0.7); }
.tree-node.available { border-color: var(--brass); }
.tree-node.unaffordable { opacity: 0.72; cursor: help; }
.tree-node.locked { opacity: 0.5; cursor: help; border-color: #2e2118; background: rgba(13, 9, 6, 0.6); }
.tn-head { display: flex; justify-content: space-between; gap: 5px; align-items: baseline; }
.tn-name { font-weight: 700; }
.tn-cost { color: var(--brass-lit); flex: none; }
.tn-desc { font-size: 0.94em; line-height: 1.3; }
.tn-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.node-status { font-size: 0.88em; color: var(--ink-muted); }
.node-status.ok { color: var(--moss); font-weight: 700; }
.node-buy { padding: 2px 10px; font-size: 0.88em; }

/* ---------- Підготовка спуску ---------- */

.prep-wrap {
  position: absolute; inset: 0;
  display: flex; gap: var(--pad); padding: var(--pad);
  overflow: hidden;
}
.prep-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.prep-col:last-child { width: min(420px, 40%); flex: none; }
.prep-note { font-size: 0.78em; line-height: 1.4; color: var(--ink-dim); padding-top: 6px; border-top: 1px solid var(--edge-dim); }
.prep-go { width: 100%; height: clamp(42px, 13dvh, 56px); font-size: 1.05em; }

.diff-row { display: flex; gap: 7px; flex-wrap: wrap; }
.diff-btn {
  position: relative;
  flex-direction: column; gap: 0;
  width: clamp(38px, 10dvh, 62px); height: clamp(38px, 10dvh, 62px);
  border-radius: 12px;
}
.diff-btn.active {
  border-color: var(--brass-lit);
  background: var(--grad-brass);
  color: #1a1108;
  box-shadow: 0 0 20px -6px var(--brass-lit);
}
.diff-btn.off { opacity: 0.5; }
.diff-num { font-size: 1.4em; line-height: 1.1; }
.diff-wins { font-size: 0.6em; color: var(--moss); }
.diff-lock { font-size: 0.6em; }
.diff-btn.active .diff-wins { color: #1a1108; }

.ability-list { display: flex; flex-direction: column; gap: 5px; }
.ability-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--edge); background: rgba(30, 21, 15, 0.6);
  cursor: pointer; font-size: 0.86em;
}
.ability-row.on { border-color: var(--arcane); background: rgba(36, 22, 54, 0.7); }
.ability-check { font-size: 1.15em; line-height: 1; color: var(--ink-dim); }
.ability-row.on .ability-check { color: var(--arcane-lit); }
.ability-name { font-weight: 700; min-width: 7em; }
.ability-row .ability-cost { color: var(--brass-lit); font-size: 0.9em; }
.ability-desc { flex: 1; min-width: 100%; font-size: 0.86em; }
@media (min-width: 900px) { .ability-desc { min-width: 0; } }

.dice-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* У лоадауті тап по кубику не перекидає його, а міняє на інший — тож і позначка інша:
   ↻ тут читалося б як «перекинути», а перекидати поза боєм нічого. */
.dice-row .die.clickable.hot::after { content: "⇄"; }

/* Сцена без фонового арту (дерево, підготовка): вінʼєтка вигадана під малюнок стіни, а на
   чистій підкладці вона лише притемнює кути зі списками. */
.stage[data-loc=""] .stage-tint { display: none; }

/* ---------- Крамниця ---------- */

.shop-head {
  position: absolute; left: var(--pad); top: calc(var(--pad) * 0.6);
  font-size: 1.2em; color: var(--brass-lit);
  z-index: 2; text-shadow: 0 2px 10px #000;
}
/* stretch, а не center: кубик із 8 гранями має вищий рядок граней, і при центруванні
   сусідні картки з'їжджали одна відносно одної. */
.shop-row {
  position: absolute; inset: 0;
  display: flex; align-items: stretch; justify-content: center;
  gap: var(--pad);
  padding: calc(var(--pad) * 2.8) var(--pad) var(--pad);
}
.shop-item {
  flex: 1 1 0; min-width: 0; max-width: 172px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: calc(var(--pad) * 1.1) 6px var(--pad);
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(43, 30, 21, 0.9), rgba(20, 13, 8, 0.95));
}
.shop-item.uncommon { border-color: #2f4d63; background: linear-gradient(180deg, rgba(30, 36, 48, 0.9), rgba(11, 14, 18, 0.95)); }
.shop-item.uncommon .si-name { color: var(--steel-lit); }
.shop-item.rare {
  border-color: #4b3573;
  background: linear-gradient(180deg, rgba(36, 22, 54, 0.9), rgba(14, 9, 20, 0.95));
  box-shadow: 0 0 24px -10px var(--arcane);
}
.shop-item.rare .si-name { color: var(--arcane-lit); }
/* Коваль: апгрейдить найслабшу грань обраного кубика — купівля веде через той самий діалог
   вибору кубика, що й продаж (див. pickDie / needsTargetDie). */
.shop-item.smith { border-color: var(--brass); background: linear-gradient(180deg, rgba(58, 40, 25, 0.9), rgba(20, 13, 8, 0.95)); }
.shop-item.smith .si-name { color: var(--brass-lit); }
.shop-item.sold { opacity: 0.25; }
.si-name { font-size: 0.9em; font-weight: 700; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-effect { font-size: 0.9em; display: inline-flex; align-items: center; gap: 5px; color: #8fd898; }
/* display: block, а не inline-flex: у пояснення коваля вкладено число, і у флекс-рядку воно
   ставало окремим елементом і виїжджало за картку. */
.si-effect.small { display: block; font-size: 0.76em; color: var(--ink-muted); text-align: center; line-height: 1.3; }
.si-effect b { color: var(--ink); }
.si-note { font-size: 0.7em; color: var(--ink-dim); text-align: center; }
.price-btn {
  margin-top: 4px;
  padding: 5px 13px; border-radius: 8px;
  font-size: 0.86em; font-weight: 700; color: var(--brass-lit);
  display: inline-flex; align-items: center; gap: 5px;
}
.price-btn.primary { color: #1a1108; }
.sell-btn {
  position: absolute; top: -5px; right: -5px;
  width: 20px; height: 20px; padding: 0; border-radius: 50%;
  font-size: 0.68em; background: #3a1d16; border-color: #6d2a20; color: #e8b3a8;
}

/* ---------- Подія й дар глибин ---------- */

.event-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--pad);
  padding: var(--pad);
  /* Власне затемнення поверх арту локації: текст події лежить просто на сцені, без картки
     (так вимагає дизайн дару), і на детальній стіні він інакше не читається зовсім. */
  background: linear-gradient(180deg, rgba(6, 4, 3, 0.84), rgba(6, 4, 3, 0.94));
}
/* Дар глибин — урочиста подія після боса акту (повне зцілення + вибір 1 із 3). Та сама
   розмітка, лише золота рамка з внутрішнім сяйвом: після боса це видно й без підпису. */
.boon-frame {
  position: absolute; inset: 8px;
  border: 1px solid rgba(242, 203, 132, 0.55);
  border-radius: 16px;
  box-shadow: inset 0 0 40px -10px rgba(242, 203, 132, 0.35);
  pointer-events: none;
}
.event-head {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; max-width: min(640px, 92%);
  text-shadow: 0 2px 10px #000;
}
.boon-tag {
  font-size: 0.72em; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-lit); text-shadow: 0 0 12px rgba(255, 190, 90, 0.5);
}
.event-text {
  font-size: 0.84em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.event-note { font-size: 0.78em; }
/* min-height: 0 — інакше flex-дитина не дає собі стиснутись нижче за вміст, і довгий список
   варіантів не скролиться, а вилазить за сцену (у якої overflow: hidden) і мовчки зрізається. */
.event-options {
  flex: 0 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--pad);
  overflow-y: auto; max-width: 100%;
}
.option-cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--pad); }
.option-card { padding: 0; border: none; background: none; box-shadow: none; flex: 0 1 auto; }
.option-card .die-card { height: 100%; }
@media (hover: hover) {
  .option-card:hover:not(:disabled) .die-card {
    border-color: var(--brass-lit);
    box-shadow: 0 8px 20px -10px #000, 0 0 20px -6px var(--brass-lit);
  }
}
.option-cards .die-grid { --dg: min(clamp(17px, 4.6dvh, 28px), calc(26dvh / var(--rows, 2))); }

.option-rows { display: flex; flex-direction: column; gap: 6px; width: min(560px, 92%); }
.option {
  width: 100%;
  justify-content: flex-start; text-align: left;
  padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 40, 25, 0.92), rgba(26, 17, 11, 0.95));
  line-height: 1.3;
}

/* ---------- Пролог ---------- */

.pro-card {
  flex-direction: row; align-items: stretch; gap: calc(var(--pad) * 1.8);
  max-width: min(760px, 100%); max-height: 100%;
  overflow-y: auto;
}
.pro-hero {
  flex: none; width: clamp(110px, 22%, 200px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding-right: calc(var(--pad) * 1.4);
  border-right: 1px solid var(--edge-dim);
  text-align: center;
}
.pro-hero .sprite { --art-size: clamp(56px, 22dvh, 150px); }
.pro-hero .pbar { width: clamp(80px, 90%, 170px); }
.pro-runs { font-size: 0.76em; }
.pro-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--pad); }
.pro-vitals { align-items: center; }
.pro-hp { width: clamp(110px, 34%, 210px); }
.pro-block { display: flex; flex-direction: column; gap: 5px; }
.pro-abilities { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-ability {
  flex: 1 1 40%; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 11px;
  border: 1px solid var(--arcane); background: rgba(36, 22, 54, 0.65);
  font-size: 0.8em; line-height: 1.35;
}
.pro-ability .cost { color: var(--brass-lit); font-weight: 600; }
.pro-ability.empty {
  flex: 0 0 84px;
  justify-content: center; text-align: center;
  border-style: dashed; border-color: var(--edge); background: none;
  color: var(--ink-dim); font-size: 0.76em;
}

/* ---------- Підсумок рану ---------- */

.runend-card { gap: 9px; max-width: min(660px, 94%); }
.runend-tiles { justify-content: center; flex-wrap: wrap; }
.runend-tiles .stat-tile { padding: 7px 14px; }
.runend-tiles .st-value { font-size: 1.4em; }
.runend-xp { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.runend-actions { width: 100%; flex-wrap: nowrap; }
.runend-actions .act { flex: 1; min-width: 0; }

/* ---------- Діалог результату дії ---------- */

/* fixed, а не absolute: картка вставляється в #app поза .shell і має накрити весь екран
   разом із треєм — навіть коли під нею вже екран наступного вузла чи підсумок рану. */
.overlay.result { position: fixed; z-index: 8; }
.delta-chip.up b { color: var(--moss); }
.delta-chip.down b { color: var(--blood-lit); }
.result-die { display: flex; align-items: center; gap: 14px; }
.result-die .die-grid { --dg: clamp(18px, 5.4dvh, 26px); }
.result-die-info { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.result-deltas { display: flex; flex-wrap: wrap; gap: 5px; }
.delta {
  font-size: 0.85em; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--edge); background: rgba(0, 0, 0, 0.3);
}
.delta.up { color: var(--moss); border-color: var(--moss); }
.delta.down { color: var(--blood-lit); border-color: var(--blood); }
.result-lines { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; text-align: left; }