/* «Хроники Варлодов» — оформление. Токены цвета и шрифты — из
   ../../assets/css/style.css (тёмная тема сайта). Здесь только своё.
   Контраст текста ≥ 4.5:1: мелкий текст — --text и --text-2, не --text-3
   (#87796f на фоне сайта даёт около 4.4:1 — на грани). */

:root {
  --v-stal: #c9d1dc;      /* сталь — холодный светлый металл */
  --v-razum: #a9acdf;     /* разум — фиолет струн (светлее --violet-2 ради контраста) */
  --v-skrytnost: #5fd4c4; /* скрытность — бирюза сайта */
  --v-karta: #16121f;
  --v-karta-2: #1d1828;
}

/* [hidden] должен побеждать любой display: у .vl-stol и .vl-knopka свой display,
   и без этой строки скрытый стол и «Продолжить партию» торчали в меню. */
[hidden] { display: none !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zn { width: 1em; height: 1em; flex: none; }

/* ---------- Большая карта ---------- */
.karta-b {
  position: relative;
  width: min(260px, 72vw);
  /* не жёсткие пропорции, а минимум: длинное свойство не должно срезать
     строку из жизни — карта просто станет чуть выше */
  min-height: calc(min(260px, 72vw) * 1.48);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--v-karta-2), var(--v-karta));
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  font-family: var(--font-body);
  color: var(--text);
}
.karta-b.r-redkaya { border-color: var(--violet-2); }
.karta-b.r-geroj { border-color: var(--gold-2); box-shadow: 0 0 0 1px rgba(240, 180, 111, 0.25), 0 18px 40px rgba(0, 0, 0, 0.55); }

.k-portret {
  flex: none;
  aspect-ratio: 5 / 4.1;
  background-size: cover;
  /* портреты — по пояс, лицо в верхней трети: держим его в кадре */
  background-position: 50% 18%;
  border-bottom: 1px solid var(--border-strong);
}
.k-zaglushka { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2a2238, #120e1c); }
.k-zaglushka span { font: 700 2.4rem var(--font-display); color: var(--text-2); letter-spacing: 0.05em; }

.k-sily { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 5px; }
.k-sila {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px;
  background: rgba(12, 10, 19, 0.86);
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 0.95rem;
}
.k-sila b { font: 800 1.15rem/1 var(--font-display); color: var(--text); }
.k-stal { color: var(--v-stal); } .k-razum { color: var(--v-razum); } .k-skrytnost { color: var(--v-skrytnost); }

.k-cena {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(12, 10, 19, 0.86); border: 1px solid var(--gold-2); color: var(--gold-2);
}
.k-cena b { color: var(--text); font-weight: 600; }

.k-telo { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.k-imya { margin: 0; display: flex; align-items: center; gap: 6px; font: 700 1.08rem/1.15 var(--font-display); }
.k-imya .zn { color: var(--gold-2); }
.k-podpis { margin: -2px 0 0; font: italic 600 0.85rem var(--font-display); color: var(--gold-2); }
.k-frakciya { margin: 0; font-size: 0.72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.k-svojstvo { margin: 2px 0 0; font-size: 0.8rem; line-height: 1.3; color: var(--text); }
.k-svojstvo b { color: var(--gold-2); }
.k-stroka { margin: auto 0 0; font: italic 0.76rem/1.3 var(--font-display); color: var(--text-2); }

/* ---------- Малая карта (поле, рука) ---------- */
.karta-m {
  position: relative;
  width: var(--km, 56px); aspect-ratio: 5 / 7;
  border-radius: 8px; overflow: hidden;
  border: 1.5px solid var(--border-strong);
  background: var(--v-karta);
}
.karta-m.r-redkaya { border-color: var(--violet-2); }
.karta-m.r-geroj { border-color: var(--gold-2); }
/* малая карта шириной 56 px: портрет по пояс, ужатый целиком, даёт лицо в
   пять пикселей — увеличиваем и держим в кадре голову и плечи */
.karta-m .k-portret { position: absolute; inset: 0; border: 0; aspect-ratio: auto; background-size: 185%; background-position: 50% 8%; }
.karta-m .k-zaglushka span { font-size: 1.1rem; }
.k-m-sila {
  position: absolute; left: 3px; bottom: 3px;
  min-width: 22px; height: 22px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(12, 10, 19, 0.9); border: 1px solid var(--border-strong);
  font: 800 0.9rem/1 var(--font-display); color: var(--text);
}
.k-m-sila.vyshe { color: #8fe3a0; border-color: #8fe3a0; }
.k-m-sila.nizhe { color: #ff9b8a; border-color: #ff9b8a; }
/* Отметка свойства — в верхнем углу: внизу на карте поля шириной 40 px она
   налезала на двузначную силу («15» читалось как «1»). */
.k-m-sv {
  position: absolute; right: 3px; top: 3px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(12, 10, 19, 0.9); border: 1px solid var(--gold-2);
  color: var(--gold-2);
}
.k-m-sv .zn { width: 11px; height: 11px; }
.k-rubashka {
  /* Рубашка — Firefly (слот fon.rubashka в manifest.json); градиент — пока грузится. */
  background: url("assets/fon/rubashka.webp") 50% 50% / cover no-repeat, linear-gradient(160deg, #2a2238, #120e1c);
  border-color: var(--gold-2);
}