/* Layout: 3D-диорама на весь экран. Поверх — таблички цвета слоновой кости с тонкой двойной рамкой
   и «чернильными» иконками (по мотивам Town to City): сверху сводка города, классы жителей и ресурсы;
   слева советник и медальоны разделов; справа карточка здания; снизу док стройки в лавровых ветвях. */
:root {
  --paper: #f8f1e2;
  --paper-2: #efe4cd;
  --paper-3: #fffaf0;
  --edge: #d6c39e;
  --edge-strong: #b99c6c;
  --ink: #45311f;
  --ink-soft: #85694f;
  --ink-faint: #b09779;
  --terra: #b5452e;
  --terra-deep: #923420;
  --gold: #c39434;
  --gold-soft: #f6e6bb;
  --olive: #5b7c27;
  --good-bg: #e5eccf;
  --mid-bg: #f6e7c8;
  --bad-bg: #f5dbd2;
  --shadow: 0 10px 26px rgba(60, 38, 18, 0.22), 0 2px 5px rgba(60, 38, 18, 0.14);
  --frame: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(150, 112, 62, 0.3);
  --scrim: rgba(36, 24, 14, 0.46);
  --font-display: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-ui: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --laurel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M118 30C90 33 52 30 6 18' fill='none' stroke='%23a6884f' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg fill='%23b99a5c'%3E%3Cellipse cx='96' cy='25' rx='8' ry='3.4' transform='rotate(-32 96 25)'/%3E%3Cellipse cx='98' cy='35' rx='8' ry='3.4' transform='rotate(22 98 35)'/%3E%3Cellipse cx='76' cy='21' rx='8' ry='3.4' transform='rotate(-30 76 21)'/%3E%3Cellipse cx='78' cy='32' rx='8' ry='3.4' transform='rotate(24 78 32)'/%3E%3Cellipse cx='56' cy='17' rx='7.5' ry='3.2' transform='rotate(-28 56 17)'/%3E%3Cellipse cx='58' cy='28' rx='7.5' ry='3.2' transform='rotate(26 58 28)'/%3E%3Cellipse cx='37' cy='12' rx='7' ry='3' transform='rotate(-26 37 12)'/%3E%3Cellipse cx='38' cy='23' rx='7' ry='3' transform='rotate(28 38 23)'/%3E%3Cellipse cx='19' cy='9' rx='6' ry='2.6' transform='rotate(-20 19 9)'/%3E%3Cellipse cx='19' cy='18' rx='6' ry='2.6' transform='rotate(30 19 18)'/%3E%3Ccircle cx='86' cy='28' r='2.3' fill='%23b5452e'/%3E%3Ccircle cx='47' cy='20' r='2' fill='%23b5452e'/%3E%3C/g%3E%3C/svg%3E");
  --r: 13px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #d6e6e6;
  color: var(--ink);
  font: 14px/1.4 var(--font-ui);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--edge-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--paper-3); font: 800 11px var(--font-ui); text-align: center; color: var(--ink-soft); }

.panel {
  background: var(--noise), linear-gradient(180deg, #fbf6ea, var(--paper));
  border: 1.5px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--frame), var(--shadow);
}

.ui-ico { width: 20px; height: 20px; flex: none; display: block; }
.ico { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.ico.big { width: 44px; height: 44px; }
.vsep { width: 1px; align-self: stretch; margin: 9px 5px; background: linear-gradient(transparent, var(--edge), transparent); flex: none; }
.eyebrow { margin: 0; font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); }
.sub { margin: 4px 0 8px; color: var(--ink-soft); font-size: 13px; }
.center { text-align: center; }

/* значки классов жителей */
.cls-badge {
  --s: 22px;
  display: inline-grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  flex: none;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(40, 20, 10, 0.3);
}
.cls-badge .ui-ico { width: 72%; height: 72%; stroke-width: 2.2; }
.cls-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--b); color: var(--c); letter-spacing: 0.06em; }

/* ---------- Верхняя панель ---------- */

#hud {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 12px;
  right: 12px;
  display: flex;
  gap: 10px;
  align-items: stretch;
  pointer-events: none;
  z-index: 4;
}
#hud > * { pointer-events: auto; }
#hud.wrap { flex-wrap: wrap; }
#hud.wrap .hud-res { order: 3; }
#hud.compact .hud-res .chip small:not(.neg) { display: none; }
.hud-left, .hud-right, .hud-res { display: flex; align-items: center; min-height: 58px; padding: 4px 8px; }

.city { display: flex; align-items: center; gap: 10px; padding: 2px 10px 2px 2px; border: 0; border-radius: 10px; background: none; text-align: left; }
.city:hover { background: rgba(255, 255, 255, 0.5); }
.city img { width: 44px; height: 44px; filter: drop-shadow(0 2px 3px rgba(80, 30, 10, 0.35)); }
.city-text { display: grid; line-height: 1.02; min-width: 112px; }
.city-text b { font: 700 22px var(--font-display); letter-spacing: 0.01em; white-space: nowrap; }
.city-text small { margin-top: 2px; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.rank-bar { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: rgba(150, 112, 62, 0.18); overflow: hidden; }
.rank-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #c39434, #e3bd5c); border-radius: 2px; transition: width 0.5s; }

.stat, .chip, .ccard {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 0;
  border-radius: 9px;
  background: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat:hover, .chip:hover, .ccard:hover { background: rgba(255, 255, 255, 0.6); }
.stat .ui-ico { color: var(--ink-soft); }
.stat b { font-size: 16px; font-weight: 900; }
.stat small, .chip small { font-size: 11px; font-weight: 800; color: var(--olive); }
.stat small.neg, .chip small.neg { color: var(--terra); }
.stat.warn b, .stat.warn .ui-ico { color: var(--terra); }
.coin { width: 22px; height: 22px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f8dc84, #d9a63a 55%, #a67518); box-shadow: inset 0 0 0 2px rgba(255, 240, 190, 0.6), inset 0 0 0 4px rgba(150, 100, 20, 0.35), 0 1px 2px rgba(80, 50, 10, 0.35); }

.class-cards { display: flex; gap: 2px; }
.ccard b { font-size: 15px; font-weight: 900; }
.hp { padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 900; color: var(--ink-faint); }
.hp.good { background: var(--good-bg); color: #4a6a1c; }
.hp.mid { background: var(--mid-bg); color: #8a5a10; }
.hp.bad { background: var(--bad-bg); color: var(--terra-deep); }

.hud-left, .hud-right { flex: none; }
.hud-res { gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
.hud-res .chip { padding: 6px 7px; gap: 5px; }
.chip .ico { width: 21px; height: 21px; }
.chip b { font-size: 14px; font-weight: 900; }
.chip.empty b { color: var(--terra); }
.chip.full { background: rgba(229, 236, 207, 0.85); }
.chip.key b { color: #6b4a12; }

.hud-right { margin-left: auto; gap: 7px; padding-left: 14px; }
.date { display: grid; line-height: 1.02; margin-right: 6px; cursor: default; }
.date b { font: 700 21px var(--font-display); }
.date small { font-size: 11px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.seg { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(150, 112, 62, 0.11); box-shadow: inset 0 1px 2px rgba(80, 50, 20, 0.12); }
.seg button, .icon-btn {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
}
.seg button .ui-ico, .icon-btn .ui-ico { width: 18px; height: 18px; }
.seg button:hover, .icon-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.85); }
.seg button.on { background: linear-gradient(180deg, #c4533a, var(--terra)); color: #fff; box-shadow: 0 2px 5px rgba(146, 52, 32, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.seg button.on .ui-ico { fill: currentColor; }
.icon-btn.round { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--paper-3); }
.icon-btn.round .ui-ico { width: 22px; height: 22px; }

/* ---------- Тревоги ---------- */

#alerts {
  position: fixed;
  top: calc(var(--hud-b, 70px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100% - 760px);
  min-width: 240px;
  z-index: 3;
}
.alert {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 6px;
  border: 1.5px solid rgba(181, 69, 46, 0.35);
  border-radius: 999px;
  background: #fbebe4;
  color: var(--terra-deep);
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(80, 30, 20, 0.16);
  animation: pop 0.35s ease-out;
}
.alert:hover { background: #fff; }
.alert .ico { width: 20px; height: 20px; }

/* ---------- Советник ---------- */

#advisor {
  position: fixed;
  left: 12px;
  top: calc(var(--hud-b, 70px) + 12px);
  width: 350px;
  display: flex;
  gap: 12px;
  padding: 13px 14px 12px 13px;
  z-index: 3;
}
#advisor .portrait { width: 60px; height: 60px; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--gold), 0 4px 10px rgba(80, 30, 20, 0.3); cursor: pointer; }
.adv-body { min-width: 0; flex: 1; }
.adv-title { margin: 3px 0 2px; font: 700 22px/1.05 var(--font-display); text-wrap: balance; }
.adv-hint { margin: 3px 0 8px; font-size: 13px; color: var(--ink-soft); }
.adv-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 28px; font-size: 12px; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.adv-btns { display: flex; gap: 6px; margin-left: auto; }
.adv-btns .btn { margin: 0; }
.adv-toggle { position: absolute; top: 6px; right: 6px; min-width: 26px; height: 26px; }
#advisor.tip { background: var(--noise), linear-gradient(180deg, #fff8e6, #f9eed3); }
#advisor.collapsed { width: auto; padding: 8px; }
#advisor.collapsed .adv-body, #advisor.collapsed .adv-toggle { display: none; }
#advisor.collapsed .portrait { width: 48px; height: 48px; }
#advisor.done { animation: glow 1.4s ease-out; }
@keyframes glow { 0% { box-shadow: var(--frame), 0 0 0 0 rgba(195, 148, 52, 0.8), var(--shadow); } 100% { box-shadow: var(--frame), 0 0 0 18px rgba(195, 148, 52, 0), var(--shadow); } }

.bar { height: 7px; border-radius: 4px; background: rgba(150, 112, 62, 0.16); overflow: hidden; box-shadow: inset 0 1px 1px rgba(80, 50, 20, 0.12); }
.bar > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c39434, #e3bd5c); transition: width 0.4s; }

/* ---------- Медальоны разделов ---------- */

#rail {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 8px;
  z-index: 3;
}
#rail button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 64px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 0 4px #fffaf0, 0 0 4px #fffaf0;
}
#rail button > span:first-child {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid var(--edge-strong);
  background: var(--noise), radial-gradient(circle at 40% 30%, #fffaf0, var(--paper-2));
  box-shadow: inset 0 0 0 3px var(--paper-3), inset 0 0 0 4px rgba(150, 112, 62, 0.3), 0 5px 12px rgba(60, 38, 18, 0.22);
  color: var(--ink);
  transition: transform 0.15s;
}
#rail button .ui-ico { width: 24px; height: 24px; }
/* идёт изучение: золотое кольцо вокруг медальона «Знания» заполняется по ходу */
#rail button.researching > span:first-child {
  border: 3px solid transparent;
  background: var(--noise) padding-box, radial-gradient(circle at 40% 30%, #fffaf0, var(--paper-2)) padding-box,
    conic-gradient(var(--gold) var(--p, 0%), rgba(150, 112, 62, 0.22) 0) border-box;
}
#rail button:hover > span:first-child { transform: translateY(-2px) scale(1.05); color: var(--terra); }
.badge {
  position: absolute;
  top: -3px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--gold);
  color: #fff;
  font: 900 11px/20px var(--font-ui);
  font-style: normal;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 0 0 2px var(--paper), 0 2px 6px rgba(80, 50, 10, 0.35);
  animation: pop 0.4s ease-out;
}
.badge.warn { background: var(--terra); }

/* ---------- Метки над картой ---------- */

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.lbl { position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: none; will-change: transform; }
.lbl.warn, .lbl.down {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 3px 8px rgba(50, 20, 10, 0.35);
}
.lbl.down { pointer-events: auto; background: #c98a2e; padding: 0; }
.lbl.bubble {
  pointer-events: auto;
  width: 52px; height: 52px;
  padding: 3px;
  border: 2px solid var(--edge-strong);
  border-radius: 50%;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 2px #fff, 0 6px 14px rgba(50, 35, 20, 0.3);
  animation: bob 2.4s ease-in-out infinite;
}
.lbl.bubble img { width: 100%; height: 100%; object-fit: contain; }
.lbl.bubble::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -7px;
  width: 11px; height: 11px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--paper-3);
  border-right: 2px solid var(--edge-strong);
  border-bottom: 2px solid var(--edge-strong);
}
.lbl.sign {
  pointer-events: auto;
  display: grid;
  justify-items: center;
  padding: 5px 13px 6px;
  border: 1.5px solid var(--edge-strong);
  border-radius: 10px;
  background: var(--noise), var(--paper);
  color: var(--ink);
  box-shadow: var(--frame), 0 4px 10px rgba(50, 35, 20, 0.3);
}
.lbl.sign:hover { background: var(--paper-3); }
.lbl.sign small { font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.lbl.sign b { font: 700 18px var(--font-display); color: #7a5512; }
.lbl.sign b.short { color: var(--terra); }
.lbl.sign b::after { content: ' ден.'; font: 800 11px var(--font-ui); }
.lbl.float { font-weight: 900; font-size: 14px; white-space: nowrap; text-shadow: 0 0 3px #fffaf0, 0 0 3px #fffaf0, 0 0 8px #fffaf0; }
.lbl.float.good { color: #3f6b2a; }
.lbl.float.bad { color: var(--terra); }
.lbl.float.gold { color: #8a6414; }
@keyframes bob { 50% { margin-top: -5px; } }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }

/* ---------- Док стройки ---------- */

#dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 3;
}
#dock > * { pointer-events: auto; }

#cats { position: relative; display: flex; gap: 2px; padding: 6px 8px; max-width: 100%; overflow: visible; }
/* лавровые ветви по бокам дока */
#cats::before, #cats::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 92px;
  height: 31px;
  background: var(--laurel) center / contain no-repeat;
  pointer-events: none;
  opacity: 0.95;
}
#cats::before { right: calc(100% - 10px); }
#cats::after { left: calc(100% - 10px); transform: scaleX(-1); }
.cat {
  position: relative;
  flex: none;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 76px;
  padding: 4px 2px 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-soft);
  transition: background 0.15s;
}
.cat img { width: 42px; height: 42px; object-fit: contain; transition: transform 0.2s; }
.cat:hover { background: rgba(255, 255, 255, 0.65); color: var(--ink); }
.cat:hover img { transform: translateY(-3px) scale(1.06); }
.cat.on { background: var(--paper-3); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--edge-strong), inset 0 -3px 0 var(--terra); }
.cat.fresh::after { content: ''; position: absolute; top: 5px; right: 13px; width: 9px; height: 9px; border: 2px solid var(--paper); border-radius: 50%; background: var(--terra); }
.cat.bulldoze { margin-left: 6px; }
.cat .pick { display: grid; place-items: center; width: 42px; height: 42px; }
.cat .pick .ui-ico { width: 28px; height: 28px; }
.cat.bulldoze.on { background: var(--terra); color: #fff; box-shadow: none; }

#tray { max-width: 100%; padding: 10px 10px 8px; animation: rise 0.2s ease-out; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.tray-items { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.tray-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--edge); font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.tray-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.card {
  --cls: transparent;
  flex: none;
  width: 112px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  padding: 6px 4px 8px;
  border: 1.5px solid rgba(185, 156, 108, 0.45);
  border-top: 3px solid var(--cls);
  border-radius: 11px;
  background: rgba(255, 252, 245, 0.7);
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.card-img { position: relative; display: block; }
.card-img img { width: 76px; height: 76px; object-fit: contain; display: block; }
.card-cls { position: absolute; top: -2px; left: -4px; display: flex; gap: 1px; }
.card:hover { background: #fff; transform: translateY(-3px); }
.card.on { background: #fff; border-color: var(--terra); box-shadow: 0 0 0 1px var(--terra); }
.card-name { font-weight: 800; font-size: 12.5px; line-height: 1.15; text-align: center; min-height: 2.3em; display: grid; place-items: center; }
.card-cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 6px; font-size: 11.5px; font-weight: 900; color: #5e4a1e; font-variant-numeric: tabular-nums; }
.cost { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.cost .ico { width: 15px; height: 15px; }
.cost.short { color: var(--terra); }
.card.poor .card-img img { opacity: 0.7; }
.card.locked { background: rgba(239, 228, 205, 0.6); }
.card.locked img { filter: grayscale(0.85) opacity(0.6); }
.card .lock { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-soft); font-weight: 800; text-align: center; }
.lock-badge { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 9V7a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='white' stroke-width='1.8'/%3E%3Crect x='5' y='9' width='10' height='7' rx='1.5' fill='white'/%3E%3C/svg%3E") center / 14px no-repeat; }

#tool-hint { display: flex; align-items: center; gap: 12px; max-width: 660px; padding: 8px 10px 8px 8px; animation: rise 0.2s ease-out; }
#hint-icon { width: 46px; height: 46px; object-fit: contain; flex: none; }
.hint-main { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; color: var(--ink-soft); }
.hint-main b { font: 700 17px var(--font-display); color: var(--ink); }
#hint-status { font-weight: 900; font-size: 12.5px; }
#hint-status:empty { display: none; }
#hint-status.good { color: var(--olive); }
#hint-status.mid { color: #9a6a12; }
#hint-status.bad { color: var(--terra); }

/* ---------- Карточка здания ---------- */

#inspector {
  position: fixed;
  right: 12px;
  top: calc(var(--hud-b, 70px) + 12px);
  width: 352px;
  max-height: calc(100% - var(--hud-b, 70px) - 180px);
  overflow-y: auto;
  padding: 15px 17px 16px;
  z-index: 3;
  -webkit-user-select: text;
  user-select: text;
  animation: slide 0.2s ease-out;
}
@keyframes slide { from { transform: translateX(14px); opacity: 0; } }
#insp-close { position: absolute; top: 8px; right: 8px; }
.insp-head { display: flex; align-items: center; gap: 10px; margin-right: 26px; padding-bottom: 8px; border-bottom: 1px dashed var(--edge); }
.insp-head img { width: 66px; height: 66px; object-fit: contain; flex: none; }
.insp-head h2 { margin: 2px 0 0; font: 700 29px/1 var(--font-display); text-wrap: balance; }
.status { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 4px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 900; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status.good { background: var(--good-bg); color: #3f5a1c; }
.status.mid { background: var(--mid-bg); color: #86580f; }
.status.bad { background: var(--bad-bg); color: var(--terra-deep); }
.rows { display: grid; gap: 1px; margin: 10px 0; border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; background: var(--edge); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: var(--paper-3); font-size: 13px; }
.row span { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.row b { font-variant-numeric: tabular-nums; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 8px 0; font-size: 13px; font-weight: 800; }
.meter .bar { grid-column: 1 / -1; }
.meter .bar > div { background: linear-gradient(90deg, #8fae4a, #b9cc5a); }
#inspector h3 { margin: 14px 0 6px; font: 700 18px var(--font-display); }
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.needs li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; font-size: 13px; background: var(--paper-3); border: 1px solid rgba(185, 156, 108, 0.35); }
.needs li span { flex: 1; min-width: 0; }
.needs li.yes { color: var(--ink-soft); }
.needs li.no { background: #fcefe9; border-color: rgba(181, 69, 46, 0.25); }
.needs .ok { font-style: normal; font-weight: 900; color: var(--olive); }
.needs .no i, .needs i.no { font-style: normal; font-weight: 900; color: var(--terra); }
.chain { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }
.chain > div { display: grid; gap: 4px; }
.chain .arrow { font-size: 20px; color: var(--ink-faint); }
.good-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--paper-3); border: 1px solid var(--edge); font-size: 12.5px; font-weight: 800; }
.good-pill .ico { width: 20px; height: 20px; }
.good-pill.out { background: var(--good-bg); border-color: transparent; }
.good-pill.short { background: var(--bad-bg); color: var(--terra-deep); }
.desc { margin: 8px 0; font-size: 13px; color: var(--ink-soft); }
.request { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fbf1d8; border: 1.5px solid #e6cf98; }
.request img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.request p { margin: 2px 0; font-size: 13px; }
.demolish { margin-top: 14px; width: 100%; color: var(--ink-soft) !important; }
.panel-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.acc-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.acc-form .field small { font-weight: 400; color: var(--ink-soft); }
.acc-box { margin-top: 14px; }
.acc-box .actions { margin-top: 8px; }
.linkish { background: none; border: 0; padding: 0; color: var(--terra-deep); text-decoration: underline; cursor: pointer; font: inherit; }
.panel-actions .btn { flex: 1; margin: 0; width: auto; }
.note { margin: 10px 0; padding: 8px 11px; border-radius: 10px; background: rgba(150, 112, 62, 0.1); font-size: 13px; }
.note.bad { background: var(--bad-bg); color: var(--terra-deep); }
.note.good { background: var(--good-bg); color: #3f5520; }

.switch { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: rgba(150, 112, 62, 0.3); transition: background 0.2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.switch input:checked + span { background: var(--terra); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid var(--terra-deep);
  border-radius: 999px;
  background: linear-gradient(180deg, #c9573d, var(--terra));
  color: #fff;
  font-weight: 900;
  font-size: 13.5px;
  box-shadow: 0 3px 8px rgba(146, 52, 32, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
a.btn { text-decoration: none; }
.btn .ico { width: 16px; height: 16px; }
.btn:hover { background: var(--terra-deep); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: var(--paper-3); color: var(--ink); border-color: var(--edge-strong); box-shadow: 0 1px 2px rgba(80, 50, 20, 0.12); }
.btn.ghost:hover { background: #fff; }
.btn.danger { background: var(--terra-deep); }
.btn.small { margin-top: 6px; padding: 6px 13px; font-size: 12.5px; }
.btn.tiny { margin: 0; padding: 3px 10px; font-size: 11.5px; white-space: nowrap; }

/* ---------- Подсказка при наведении ---------- */

#tooltip {
  position: fixed;
  z-index: 50;
  max-width: 330px;
  padding: 10px 13px;
  border: 1.5px solid var(--edge-strong);
  border-radius: 11px;
  background: var(--noise), var(--paper-3);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  pointer-events: none;
  animation: pop 0.15s ease-out;
}
#tooltip b { font: 700 17px var(--font-display); }
#tooltip p { margin: 3px 0 0; color: var(--ink-soft); }
.card-tip, .cls-tip { display: flex; gap: 10px; align-items: flex-start; }
.card-tip img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.tip-rows { font-weight: 700; }
.tip-cost { display: flex; flex-wrap: wrap; gap: 4px 8px; font-weight: 900; color: #5e4a1e !important; }
.tip-lock { color: var(--terra) !important; font-weight: 800; }

/* ---------- Окно «Империя» ---------- */

#win-back, #modal-back {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 20;
}
#modal-back { z-index: 30; }
#win {
  width: min(1100px, 100%);
  height: min(780px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rise 0.22s ease-out;
}
.win-head { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 12px 0 24px; border-bottom: 1.5px solid var(--edge); }
.win-head h2 { margin: 0 0 10px; font: 700 31px var(--font-display); white-space: nowrap; }
.tabs { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; align-self: flex-end; }
.tabs button { display: flex; align-items: center; gap: 7px; padding: 8px 14px 10px; border: 0; border-bottom: 3px solid transparent; background: none; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--terra); }
#win-close { align-self: flex-start; margin-top: 2px; }
#win-body { flex: 1; overflow: auto; padding: 18px 24px 24px; -webkit-user-select: text; user-select: text; }

.explain { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: #fbf1d8; border: 1.5px solid #e6cf98; }
.explain b { font-size: 14.5px; }
.explain p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 80ch; }

.tree-wrap { position: relative; margin-top: 16px; overflow-x: auto; padding-bottom: 6px; }
.tree-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tree-lines path { fill: none; stroke: rgba(150, 112, 62, 0.4); stroke-width: 2; stroke-dasharray: 5 4; }
.tree-lines path.done { stroke: #9cb35e; stroke-dasharray: none; }
.tree { position: relative; display: grid; grid-template-columns: repeat(6, minmax(158px, 1fr)); gap: 12px 26px; min-width: 1060px; }
.tcol { display: grid; align-content: start; gap: 12px; }
.tech { position: relative; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--edge); background: var(--paper-3); box-shadow: 0 2px 6px rgba(50, 35, 20, 0.06); }
.tech h4 { margin: 0 0 3px; font: 700 17px var(--font-display); }
.tech p { margin: 0; font-size: 12px; color: var(--ink-soft); }
.tech .opens { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.tech .opens img { width: 34px; height: 34px; object-fit: contain; }
.tech.done { background: #f1f4e2; border-color: #cdd9a6; }
.tech.locked { opacity: 0.55; background: rgba(255, 255, 255, 0.4); }
.tech.ready { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195, 148, 52, 0.25); }
.tech.focus { animation: glow 1.4s ease-out 2; border-color: var(--terra); }
/* Знание, к которому ведёт советник: красная рамка, мягкое свечение и ярлык */
.tech.recommend { border: 2px solid var(--terra); background: #fff7ec; box-shadow: 0 0 0 4px rgba(181, 69, 46, 0.18), 0 8px 22px rgba(181, 69, 46, 0.22); animation: recPulse 1.8s ease-in-out infinite; }
.tech.recommend h4 { color: var(--terra-deep, #8e2f1f); }
.tech-badge { position: absolute; top: -11px; left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--terra); color: #fff; font: 800 11px var(--font-ui, 'Nunito'), sans-serif; letter-spacing: 0.02em; white-space: nowrap; }
.btn.rec { background: var(--terra); border-color: var(--terra); color: #fff; }
@keyframes recPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(181, 69, 46, 0.18), 0 8px 22px rgba(181, 69, 46, 0.22); } 50% { box-shadow: 0 0 0 7px rgba(181, 69, 46, 0.1), 0 8px 26px rgba(181, 69, 46, 0.32); } }
@media (prefers-reduced-motion: reduce) { .tech.recommend { animation: none; } }
.tech.active { border-color: var(--gold); background: #fdf6e3; }
.tech.pop { background: rgba(255, 255, 255, 0.55); }
.tech-prog { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 800; color: #7a5512; }
.tech-time { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); }
.tech-pop { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--terra-deep); }
.tech-pop .ui-ico { width: 16px; height: 16px; }
.tech-pop small { font-weight: 700; color: var(--ink-soft); }
.explain .now { color: #7a5512; font-weight: 800; }
.tech-done { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 900; color: var(--olive); }
.tech-lock { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }

h3.grp { margin: 20px 0 8px; font: 700 23px var(--font-display); }
.goods-list { display: grid; gap: 4px; }
.good-row {
  display: grid;
  grid-template-columns: 150px 170px 90px 150px minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--paper-3);
  border: 1px solid var(--edge);
  font-size: 13px;
}
.good-row.short { background: #fcefe9; border-color: rgba(181, 69, 46, 0.3); }
.gname { display: flex; align-items: center; gap: 8px; }
.gname .ico { width: 26px; height: 26px; }
.gstock { display: grid; gap: 3px; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-soft); }
.gflow { display: flex; gap: 8px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gflow .pos { color: var(--olive); }
.gflow .neg { color: var(--terra); }
.gsrc { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.gsrc img { width: 32px; height: 32px; object-fit: contain; }
.tag { padding: 2px 7px; border-radius: 6px; background: var(--gold-soft); font-size: 11px; font-weight: 800; }
.guse { color: var(--ink-soft); font-size: 12.5px; }
.gtrade { display: grid; gap: 2px; font-size: 12px; }
.tg { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.kpi { padding: 10px 12px; border-radius: 11px; background: var(--paper-3); border: 1px solid var(--edge); }
.kpi small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi b { font: 700 28px var(--font-display); display: flex; align-items: center; gap: 6px; }
#pmap, #bcv { width: 100%; height: auto; display: block; margin-top: 10px; border-radius: 12px; border: 1.5px solid var(--edge); cursor: pointer; }
.pmap-card { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #fbf1d8; border: 1.5px solid #e6cf98; }
.pmap-card h3 { margin: 0 0 2px; font: 700 24px var(--font-display); }
.facts { margin: 6px 0; font-size: 13px; }
.bres { margin-top: 8px; font-size: 14px; }

.guide { display: grid; gap: 16px; }
.guide section { padding: 14px 18px; border-radius: 13px; background: var(--paper-3); border: 1px solid var(--edge); }
.guide h3 { margin: 0 0 8px; font: 700 24px var(--font-display); }
.guide p { margin: 4px 0; max-width: 85ch; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cls-card { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--b); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.cls-card b { color: var(--c); font: 700 20px var(--font-display); }
.cls-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.tiers { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.tier { display: grid; gap: 3px; align-content: start; min-width: 130px; padding: 10px 12px; border-radius: 11px; background: var(--paper); border: 1px solid var(--edge); }
.tier b { font: 700 17px var(--font-display); }
.tier small { color: var(--ink-soft); font-size: 12px; }
.tier .need-text { color: var(--olive); font-weight: 800; }
.tiers .arrow { align-self: center; color: var(--ink-faint); font-size: 18px; }
.need-icons { display: flex; flex-wrap: wrap; gap: 3px; font-size: 11px; font-weight: 800; }
.need-icons .ico { width: 20px; height: 20px; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: 13px; }

.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.journal li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--paper-3); border: 1px solid var(--edge); border-left: 4px solid var(--ink-faint); font-size: 13px; }
.journal li.good { border-left-color: #8fae4a; }
.journal li.warn { border-left-color: var(--terra); }
.jday { flex: none; width: 150px; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.jtext { flex: 1; min-width: 0; }

/* ---------- Небольшие окна ---------- */

#modal { width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 22px 24px 20px; -webkit-user-select: text; user-select: text; animation: rise 0.2s ease-out; }
#modal.wide { width: min(820px, 100%); }
#modal h2 { margin: 2px 0 6px; font: 700 32px/1.05 var(--font-display); }
#modal p { margin: 8px 0; }
.price { display: flex; align-items: center; gap: 8px; font: 700 34px var(--font-display); color: #7a5512; }
.price .ico { width: 30px; height: 30px; }
.feats { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.feats li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--paper-3); border: 1px solid var(--edge); font-weight: 700; }
.feats li span { flex: 1; }
.feats .ico { width: 24px; height: 24px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.actions .btn { margin-top: 6px; }
.field { display: grid; gap: 4px; margin: 12px 0 4px; font-size: 12px; font-weight: 900; color: var(--ink-soft); }
.field-label { font-size: 12px; font-weight: 900; color: var(--ink-soft); margin: 14px 0 6px !important; }
.field input { padding: 9px 11px; border: 1.5px solid var(--edge-strong); border-radius: 9px; background: var(--paper-3); color: var(--ink); font: 700 15px var(--font-ui); -webkit-user-select: text; user-select: text; }
.seg.wide { display: grid; grid-template-columns: repeat(3, 1fr); }
.seg.wide button { display: grid; gap: 1px; height: auto; padding: 7px 4px; font-weight: 900; font-size: 13px; color: var(--ink); }
.seg.wide button small { font-weight: 600; font-size: 10.5px; opacity: 0.8; }

/* ---------- Уведомления ---------- */

#toasts {
  position: fixed;
  top: calc(var(--hud-b, 70px) + 54px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(430px, calc(100% - 32px));
  pointer-events: none;
  z-index: 6;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 11px;
  background: var(--noise), var(--paper-3);
  border: 1.5px solid var(--edge-strong);
  box-shadow: 0 6px 18px rgba(50, 35, 20, 0.22);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  animation: rise 0.25s ease-out;
  transition: opacity 0.4s, transform 0.4s;
}
.toast.good { border-left: 4px solid #8fae4a; }
.toast.warn { border-left: 4px solid var(--terra); color: var(--terra-deep); }
.toast.out { opacity: 0; transform: translateY(-6px); }
.battle-toast { pointer-events: auto; }
.battle-toast .ico { width: 22px; height: 22px; }

.fatal { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 18px; font-weight: 700; background: #f6f2ea; }

/* ---------- Узкие экраны ---------- */

@media (max-width: 1240px) {
  #alerts { max-width: calc(100% - 24px); top: calc(var(--hud-b, 70px) + 44px); }
  #toasts { top: calc(var(--hud-b, 70px) + 88px); }
}

@media (max-width: 760px) {
  #hud { left: 8px; right: 8px; gap: 6px; }
  .hud-left { flex: 1 1 100%; min-height: 50px; overflow-x: auto; scrollbar-width: none; }
  .city-text { min-width: 0; }
  .city-text small, .rank-bar { display: none; }
  .city img { width: 34px; height: 34px; }
  .city-text b { font-size: 18px; }
  .stat, .ccard { padding: 5px 5px; gap: 4px; }
  .stat b, .ccard b { font-size: 14px; }
  .stat small, .hp { display: none; }
  .hud-res { order: 2; flex: 1 1 auto; min-height: 46px; }
  .hud-right { order: 3; margin-left: 0; min-height: 46px; padding-left: 8px; }
  .date small { display: none; }
  .date b { font-size: 17px; }
  .seg button, .icon-btn { min-width: 28px; height: 28px; }
  .icon-btn.round { width: 32px; height: 32px; }
  #alerts { top: calc(var(--hud-b, 160px) + 8px); }
  #advisor { left: 8px; right: 8px; width: auto; top: calc(var(--hud-b, 160px) + 8px); padding: 9px 10px; gap: 9px; }
  #advisor .portrait { width: 44px; height: 44px; }
  .adv-title { font-size: 18px; }
  .adv-hint { font-size: 12px; }
  #advisor.collapsed { right: auto; }
  #rail { left: auto; right: 8px; top: auto; bottom: calc(250px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  #rail button { width: 48px; }
  #rail button > span:first-child { width: 42px; height: 42px; }
  #rail .rail-name { display: none; }
  #inspector { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); max-height: 52%; }
  #dock { max-width: calc(100% - 16px); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #cats { overflow-x: auto; scrollbar-width: none; }
  #cats::before, #cats::after { display: none; }
  .cat { width: 58px; font-size: 10px; }
  .cat img { width: 34px; height: 34px; }
  .card { width: 92px; }
  .card-img img { width: 58px; height: 58px; }
  #tool-hint { font-size: 12px; }
  #hint-text { display: none; }
  #win { height: 100%; }
  .win-head { flex-wrap: wrap; padding: 10px 10px 0 14px; }
  .win-head h2 { font-size: 24px; }
  .tabs { order: 3; width: 100%; margin-left: 0; }
  .tabs button span { display: none; }
  #win-body { padding: 12px; }
  .good-row { grid-template-columns: 1fr 1fr; }
  .gsrc, .guse { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .classes { grid-template-columns: 1fr; }
  .jday { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Армия: окно «Легион», карта походов, карточка здания ---------- */

.squad { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { width: 92px; display: grid; justify-items: center; gap: 1px; padding: 6px 4px 7px; border-radius: 11px; border: 1.5px solid var(--edge); background: #fff; font-size: 12px; text-align: center; transition: transform 0.15s, border-color 0.15s; }
.slot:hover { border-color: var(--terra); transform: translateY(-2px); }
.slot .u-img { width: 64px; height: 64px; object-fit: contain; }
.slot b { font-size: 12.5px; }
.slot small { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.slot.empty { border-style: dashed; background: rgba(255, 255, 255, 0.5); }
.slot.empty .plus { display: grid; place-items: center; width: 64px; height: 64px; font: 700 34px var(--font-display); color: var(--ink-faint); }
.slot.locked { opacity: 0.55; border-style: dashed; background: transparent; cursor: default; transform: none; }
.slot.locked .ui-ico { width: 30px; height: 30px; margin: 17px 0; color: var(--ink-faint); }
.perk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.perk { display: grid; justify-items: center; gap: 2px; padding: 7px 5px; border-radius: 11px; background: #fff; border: 1px solid var(--edge); text-align: center; font-size: 12px; }
.perk b { font-size: 12.5px; line-height: 1.1; }
.perk small { font-size: 11px; color: #8a6414; font-weight: 800; }
.perk.locked { opacity: 0.6; background: transparent; }
.perk.locked small { color: var(--ink-soft); font-weight: 700; }
.perk .ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, #c9573d, var(--terra)); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4); }
.perk.locked .ring { background: var(--ink-faint); }
.perk-ico { width: 24px; height: 24px; }
.perk .maxed { color: var(--olive); }
.pick-list { display: grid; gap: 6px; }
.pick-unit { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1.5px solid var(--edge); background: #fff; text-align: left; }
.pick-unit:hover:not(:disabled) { border-color: var(--terra); }
.pick-unit .u-img { width: 54px; height: 54px; object-fit: contain; }
.pick-unit b { display: block; font: 700 18px var(--font-display); }
.pick-unit small { color: var(--ink-soft); font-size: 12px; }
.pick-unit.locked { opacity: 0.55; cursor: not-allowed; }

.stage-modal .wave { margin: 8px 0; }
.stage-modal .wave > small { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.foes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.foe { position: relative; display: grid; justify-items: center; width: 84px; padding: 4px 4px 6px; border-radius: 11px; background: var(--paper-3); border: 1px solid var(--edge); text-align: center; }
.foe.boss { width: 110px; border-color: var(--terra); background: #fbeee6; }
.foe .f-img { width: 60px; height: 60px; object-fit: contain; }
.foe.boss .f-img { width: 84px; height: 84px; }
.foe b { font-size: 11.5px; line-height: 1.15; }
.foe i { position: absolute; top: 4px; right: 6px; font: 900 13px var(--font-ui); font-style: normal; color: var(--terra-deep); }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-3); border: 1px solid var(--edge); }
.vs .side { display: grid; gap: 3px; justify-items: center; text-align: center; }
.vs .side small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.vs .side b { font: 700 20px var(--font-display); }
.mini-squad { display: flex; gap: 2px; }
.mini-squad .m-img { width: 38px; height: 38px; object-fit: contain; }
.odds { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 900; white-space: nowrap; }
.odds.good { background: var(--good-bg); color: #3f5a1c; }
.odds.mid { background: var(--mid-bg); color: #86580f; }
.odds.bad { background: var(--bad-bg); color: var(--terra-deep); }
.loot-line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.row b.short { color: var(--terra); }
.row .stars, .stars { color: #c39434; letter-spacing: 2px; }

.unit-card { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; padding: 8px 10px; border-radius: 12px; background: #fbf1d8; border: 1.5px solid #e6cf98; }
.unit-card .uc-img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.unit-card b { font: 700 21px var(--font-display); }
.unit-card p { margin: 2px 0; font-size: 12.5px; color: var(--ink-soft); }
.unit-card .strong { color: var(--olive); font-weight: 800; }
.unit-card .eyebrow { display: block; margin: 0; }
.upg-run { display: grid; gap: 3px; min-width: 130px; justify-items: end; }
.upg-run .bar { width: 130px; }
.upg-run small { font-size: 11px; color: #7a5512; font-weight: 800; }


/* ---------- Бой ---------- */

body.battle-mode #hud, body.battle-mode #advisor, body.battle-mode #rail, body.battle-mode #dock, body.battle-mode #labels,
body.battle-mode #alerts, body.battle-mode #inspector, body.battle-mode #toasts { display: none !important; }
#battle-ui { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#battle-ui > * { pointer-events: auto; }
#battle-ui > #battle-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bhp { position: absolute; left: -22px; top: -6px; width: 44px; height: 6px; border-radius: 3px; background: rgba(40, 24, 14, 0.55); box-shadow: 0 0 0 1.5px rgba(255, 250, 240, 0.85); overflow: hidden; will-change: transform; }
.bhp i { display: block; height: 100%; background: linear-gradient(180deg, #a8d468, #6f9a32); transition: width 0.15s; }
.bhp.enemy i { background: linear-gradient(180deg, #ff8a6a, #c0392b); }
.bnum { position: absolute; transform: translate(-50%, -50%); font: 900 17px var(--font-ui); color: #fff; text-shadow: 0 2px 0 rgba(60, 30, 10, 0.55), 0 0 6px rgba(60, 30, 10, 0.5); pointer-events: none; animation: bnum 0.95s ease-out forwards; white-space: nowrap; }
.bnum.hurt { color: #ff9a8a; }
.bnum.crit { color: #ffd84a; font-size: 23px; }
.bnum.heal { color: #9af0a0; }
@keyframes bnum { 0% { opacity: 0; margin-top: 6px; transform: translate(-50%, -50%) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; margin-top: -46px; transform: translate(-50%, -50%) scale(1); } }
#battle-ui > .b-top { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.b-top > * { pointer-events: auto; }
.b-title { display: grid; padding: 8px 16px 9px; line-height: 1.1; }
.b-title small { font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); }
.b-title b { font: 700 22px var(--font-display); }
.b-title span { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.b-ctrl { display: flex; align-items: center; gap: 8px; padding: 6px 8px; height: max-content; }
.b-ctrl .seg button { font-weight: 900; font-size: 13px; color: var(--ink-soft); }
.b-ctrl .seg button.on { color: #fff; }
.b-ctrl .btn { margin: 0; }
.b-boss { position: absolute; top: calc(84px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); padding: 8px 14px 10px; text-align: center; }
.b-boss b { font: 700 19px var(--font-display); color: var(--terra-deep); }
.b-boss .bar { height: 11px; margin-top: 4px; }
.b-boss .bar > div { background: linear-gradient(90deg, #c0392b, #ff7a4a); }
#battle-ui > .b-banner { position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%) scale(0.8); padding: 10px 28px; border-radius: 14px; background: rgba(42, 26, 14, 0.62); color: #fff6e0; font: 700 34px var(--font-display); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
#battle-ui > .b-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.b-perks { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.b-perk { position: relative; display: grid; justify-items: center; gap: 2px; width: 82px; padding: 0; border: 0; background: none; color: #fff6e0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
.b-perk .ring { --cd: 0%; position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, #8a7a66, #5e5244); color: #f4ead6; box-shadow: 0 0 0 3px #f8f1e2, 0 0 0 5px #b99c6c, 0 6px 14px rgba(0, 0, 0, 0.35); overflow: hidden; transition: transform 0.15s; }
.b-perk.ready .ring { background: linear-gradient(180deg, #d0613f, #a33a26); color: #fff; animation: ready 1.6s ease-in-out infinite; }
.b-perk.ready:hover .ring { transform: scale(1.08); }
.b-perk .ring::after { content: ""; position: absolute; inset: 0; background: conic-gradient(rgba(20, 12, 6, 0.6) var(--cd), transparent 0); border-radius: 50%; }
.b-perk .perk-ico { position: relative; z-index: 1; width: 32px; height: 32px; }
.b-perk .cd { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; font: 900 20px var(--font-ui); font-style: normal; color: #fff; }
.b-perk small { font-size: 11.5px; font-weight: 900; line-height: 1.1; }
.b-perk em { font-style: normal; font-size: 10px; color: #ffd76a; letter-spacing: 1px; }
@keyframes ready { 50% { box-shadow: 0 0 0 3px #f8f1e2, 0 0 0 5px #e3b445, 0 0 18px 6px rgba(255, 196, 80, 0.75); } }
.b-noperks { margin: 0; padding: 8px 14px; font-size: 13px; }
.b-result { text-align: center; }
.b-result h2 { font-size: 44px !important; }
.b-result.win h2 { color: #8a6414; }
.b-result.lose h2 { color: var(--terra-deep); }
.b-result .stars { font-size: 40px; letter-spacing: 6px; color: #d9ccb0; }
.b-result .stars .on { color: #e3b445; text-shadow: 0 2px 6px rgba(160, 110, 20, 0.4); }
.b-result .loot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0; }
.b-result .actions { justify-content: center; }

@media (max-width: 760px) {
  .slot { width: 76px; }
  .slot .u-img { width: 52px; height: 52px; }
  .b-title b { font-size: 17px; }
  .b-perk { width: 62px; }
  .b-perk .ring { width: 50px; height: 50px; }
  .b-perk small { font-size: 10px; }
  .b-perks { gap: 6px; }
  #battle-ui > .b-banner { font-size: 24px; }
  .vs { grid-template-columns: 1fr; }
}

/* ---------- Легион 2.0: полоска сверху, вкладки, карта провинции ---------- */
.lg-strip { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; border-radius: 13px; background: linear-gradient(180deg, #fbf1d8, #f6e6c2); border: 1.5px solid #e6cf98; }
.lg-stat { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; line-height: 1.1; }
.lg-stat .ico, .lg-stat .ui-ico { grid-row: span 2; width: 26px; height: 26px; color: #8a6414; }
.lg-stat b { font: 700 21px var(--font-display); }
.lg-stat small { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.lg-stat.short b { color: var(--terra); }
.lg-tabs { margin-left: auto; }
.lg-tabs button { min-width: 0; height: 36px; padding: 0 16px; font-weight: 900; font-size: 14px; color: var(--ink); }
.lg-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 9px; background: var(--gold); color: #fff; font: 900 11px var(--font-ui); font-style: normal; }
.lg-body { min-height: 0; }

.prov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.prov-arrow { width: 44px; height: 44px; flex: none; border-radius: 50%; font: 700 30px/1 var(--font-display); color: var(--ink); background: var(--paper-3); border: 1.5px solid var(--edge-strong); }
.prov-arrow:disabled { opacity: 0.3; cursor: default; }
.prov-title { flex: 1; min-width: 0; }
.prov-title small { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.prov-title h3 { margin: 0; font: 700 30px/1.1 var(--font-display); text-wrap: balance; }
.prov-title p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.prov-done { font: 800 13px var(--font-ui); color: var(--olive); vertical-align: middle; }
.prov-boss { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fbeee6; border: 1.5px solid #e2b6a4; }
.prov-boss .pb-img { width: 46px; height: 46px; object-fit: contain; }
.prov-boss small { display: block; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terra-deep); }
.prov-boss b { font: 700 17px var(--font-display); }
.prov-map-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid var(--edge-strong); box-shadow: inset 0 0 0 3px #f6ead0, 0 6px 18px rgba(60, 38, 18, 0.16); }
.prov-map { display: block; width: 100%; height: auto; max-height: calc(100vh - 330px); min-height: 220px; background: #e9dcb8; }
.prov-map-wrap.turn-in .prov-map { animation: provIn 0.9s cubic-bezier(.2, .8, .2, 1); }
@keyframes provIn { from { transform: translateX(14%) scale(1.03); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
.prov-banner { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: grid; justify-items: center; padding: 10px 26px; border-radius: 14px; background: rgba(255, 248, 232, 0.94); border: 1.5px solid var(--gold); box-shadow: var(--shadow); animation: banner 3.2s ease forwards; pointer-events: none; }
.prov-banner small { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6414; }
.prov-banner b { font: 700 30px var(--font-display); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -10px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.prov-road { fill: none; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.prov-road-edge { fill: none; stroke: rgba(90, 60, 30, 0.28); stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.prov-road.done { stroke: #e3b445 !important; stroke-width: 7; opacity: 0.9; }
.prov-label { font: 800 15px var(--font-ui); fill: #5a3d22; text-anchor: middle; paint-order: stroke; stroke: #f6ead0; stroke-width: 4px; }
.prov-map .node { cursor: pointer; }
.prov-map .node .halo { fill: none; }
.prov-map .node .disc { fill: #fff8ea; stroke: #8a6a42; stroke-width: 3; }
.prov-map .node .num { font: 900 17px var(--font-ui); fill: #5a3d22; text-anchor: middle; }
.prov-map .node .stars { font: 16px var(--font-ui); fill: #c39434; text-anchor: middle; paint-order: stroke; stroke: #fff6e2; stroke-width: 4px; }
.prov-map .node .crown { fill: #e3b445; stroke: #8a5a14; stroke-width: 1.8; }
.prov-map .node.done .disc { fill: #f3d58a; stroke: #a8781e; }
.prov-map .node.boss .disc { fill: #b5452e; stroke: #6e2414; }
.prov-map .node.boss.done .disc { fill: #8a6414; }
.prov-map .node.current .disc { fill: #fff; stroke: var(--terra); stroke-width: 4.5; }
.prov-map .node.boss.current .disc { fill: #b5452e; }
.prov-map .node.current .halo { stroke: var(--terra); stroke-width: 4; animation: halo 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.prov-map .node.locked { cursor: default; }
.prov-map .node.locked .disc { fill: #d9ccb0; stroke: #b3a283; }
.prov-map .node.locked .num { fill: #9a8a6a; }
.prov-map .node:not(.locked):hover .disc, .prov-map .node:focus-visible .disc { stroke: var(--terra); stroke-width: 4.5; }
.prov-map .node:focus { outline: none; }
.prov-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.prov-foot .sub { flex: 1; min-width: 240px; margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.prov-foot .btn { margin: 0; }

/* ---------- Войска: крупные карточки, одна кнопка «Улучшить» ---------- */
.ucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.ucard { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; border-radius: 15px; background: var(--paper-3); border: 1.5px solid var(--edge); box-shadow: 0 2px 6px rgba(60, 38, 18, 0.07); }
.ucard.locked { opacity: 0.62; background: rgba(255, 255, 255, 0.45); }
.ucard.nobuilding { border-style: dashed; }
.uc-top { display: flex; gap: 8px; align-items: center; }
.uc-por { width: 76px; height: 76px; object-fit: contain; flex: none; }
.uc-name { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; min-width: 0; }
.uc-name b { font: 700 22px/1.05 var(--font-display); }
.uc-lvl { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 50%; background: linear-gradient(180deg, #d9a842, var(--gold)); color: #fff; font: 900 18px/1 var(--font-ui); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 5px rgba(140, 100, 20, 0.35); }
.uc-lvl small { font-size: 9px; font-weight: 800; opacity: 0.9; }
.ucard.locked .uc-lvl { background: var(--ink-faint); }
.uc-name p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.uc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px 4px; border-radius: 10px; background: #fbf3df; text-align: center; }
.uc-stats span { display: grid; }
.uc-stats small { font-size: 10px; font-weight: 800; color: var(--ink-soft); }
.uc-stats b { font-size: 15px; font-variant-numeric: tabular-nums; }
.uc-strong { margin: 0; font-size: 11.5px; font-weight: 800; color: var(--olive); }
.uc-foot { display: grid; gap: 6px; margin-top: auto; }
.uc-foot .card-cost { justify-content: flex-start; font-size: 12.5px; }
.uc-up { display: flex; justify-content: center; align-items: baseline; gap: 8px; width: 100%; margin: 0; padding: 10px 14px; font-size: 15px; }
.uc-up small { font-size: 12px; font-weight: 700; opacity: 0.85; }
.uc-why { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.uc-why .ui-ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.uc-max { margin: 0; font-weight: 900; color: var(--olive); }
.uc-foot .btn.small { margin: 0; }
.ucard .upg-run { justify-items: stretch; min-width: 0; }
.ucard .upg-run .bar { width: auto; }
.ucard .upg-run small { font-size: 12px; }
.lg-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.lg-box { padding: 10px 12px 12px; border-radius: 14px; background: var(--paper-3); border: 1px solid var(--edge); }
.lg-box-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lg-box-head h3 { margin: 0; font: 700 22px var(--font-display); }
.lg-box-head small { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.slot.locked small { font-size: 10px; }

/* ---------- Против городов ---------- */
.pvp-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px; border-radius: 16px; background: var(--paper-3); border: 1.5px solid var(--edge); }
.pvp-rating { display: grid; justify-items: center; gap: 2px; min-width: 170px; padding: 18px; border-radius: 50%; aspect-ratio: 1; align-content: center; background: radial-gradient(circle at 50% 35%, #fff7e2, #f1dca8); border: 2px solid var(--gold); }
.pvp-rating .ui-ico { width: 40px; height: 40px; color: #8a6414; }
.pvp-rating b { font: 700 44px/1 var(--font-display); }
.pvp-rating small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.pvp-text h3 { margin: 0 0 6px; font: 700 26px var(--font-display); }
.pvp-text p { margin: 0 0 8px; max-width: 70ch; color: var(--ink-soft); }
.pvp-text .btn { margin: 6px 8px 0 0; display: inline-flex; align-items: center; gap: 6px; }
.pvp-text .btn .ui-ico { width: 18px; height: 18px; }

/* ---------- Чудеса ---------- */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 12px; }
.wcard { display: flex; gap: 10px; padding: 10px 12px; border-radius: 15px; background: var(--paper-3); border: 1.5px solid var(--edge); }
.wcard.open { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195, 148, 52, 0.22); }
.wcard.built { background: #f1f4e2; border-color: #cdd9a6; }
.wcard.pvp { opacity: 0.7; border-style: dashed; }
.w-pic { width: 96px; height: 96px; object-fit: contain; flex: none; }
.w-svg { display: grid; place-items: center; border-radius: 14px; background: #f1e6cc; color: #a8916a; }
.w-svg .ui-ico { width: 52px; height: 52px; }
.w-body { display: grid; gap: 4px; align-content: start; min-width: 0; flex: 1; }
.w-body h4 { margin: 0; font: 700 21px/1.1 var(--font-display); }
.w-body p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.w-bonus { color: var(--olive) !important; font-weight: 800; }
.w-body .card-cost { justify-content: flex-start; }
.w-body .btn { justify-self: start; margin: 2px 0 0; }
.w-done { color: var(--olive) !important; font-weight: 900; }
.w-need { display: grid; gap: 3px; }
.w-need small { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.w-pvp { display: flex; gap: 6px; align-items: center; font-weight: 800; }
.w-pvp .ui-ico { width: 16px; height: 16px; }
.b-rating { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 900; color: #8a6414; }
.b-rating .ui-ico { width: 20px; height: 20px; }
.b-unlocks { display: grid; gap: 2px; margin: 10px auto 0; max-width: 46ch; padding: 8px 14px; border-radius: 12px; background: #fbf1d8; border: 1.5px solid #e6cf98; }
.b-unlocks small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #8a6414; }

@media (max-width: 900px) {
  .lg-cols { grid-template-columns: 1fr; }
  .prov-boss { display: none; }
  .pvp-box { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .lg-tabs { margin-left: 0; width: 100%; }
  .lg-tabs button { flex: 1; padding: 0 6px; }
  .prov-title h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .prov-map-wrap.turn-in .prov-map, .prov-banner { animation: none; }
}