:root {
  --bg: #0b0908;
  --bg2: #120e0c;
  --panel: #17120f;
  --panel2: #1e1813;
  --line: #3a2d22;
  --line2: #54402e;
  --text: #ddd0ba;
  --muted: #8f8069;
  --dim: #5f5444;
  --ember: #d07a34;
  --ember2: #f0a050;
  --blood: #9a1c1c;
  --gold: #e0b252;
  --good: #7cbf6a;
  --neutral: #d0a848;
  --bad: #d05a4a;
  --head: 'Cormorant Garamond', 'Georgia', serif;
  --logo: 'Ruslan Display', 'Cormorant Garamond', serif;
  --body: 'PT Sans', 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(208, 122, 52, .13), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(154, 28, 28, .10), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.45 var(--body);
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.btn {
  background: linear-gradient(#3a2416, #24160e);
  border: 1px solid #6a4426;
  color: #f2dcc0;
  padding: 8px 16px;
  border-radius: 3px;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 200, 140, .12), 0 2px 6px rgba(0, 0, 0, .4);
  transition: filter .15s, transform .05s;
}
.btn:hover:not(:disabled) { filter: brightness(1.25); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#a8521e, #6e2e10); border-color: #d07a34; color: #fff2e0; }
.btn.ghost { background: transparent; border-color: var(--line2); box-shadow: none; color: var(--muted); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.danger { background: linear-gradient(#5a1414, #380c0c); border-color: #8a2a2a; }

/* ———————— вход ———————— */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-box { width: min(420px, 100%); text-align: center; }
.logo { font-family: var(--logo); font-size: clamp(34px, 7vw, 58px); color: var(--ember2); letter-spacing: .04em; line-height: 1; text-shadow: 0 0 30px rgba(240, 120, 40, .35), 0 2px 0 #000; }
.tagline { font-family: var(--head); font-size: 20px; color: var(--muted); font-style: italic; margin: 10px 0 30px; }
.auth form { background: var(--panel); border: 1px solid var(--line); padding: 26px; border-radius: 4px; text-align: left; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.auth label { display: block; color: var(--muted); font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .08em; }
.auth input { width: 100%; background: #0d0a08; border: 1px solid var(--line2); color: var(--text); padding: 10px 12px; border-radius: 3px; margin-bottom: 16px; }
.auth input:focus { outline: none; border-color: var(--ember); }
.auth .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.auth .switch { background: none; border: none; color: var(--ember2); text-decoration: underline; padding: 0; font-size: 14px; }
.err { color: #ff8a7a; min-height: 20px; font-size: 14px; margin-top: 10px; }
.lore { color: var(--dim); font-family: var(--head); font-size: 17px; font-style: italic; margin-top: 26px; line-height: 1.5; }

/* ———————— шапка ———————— */
header.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 24px;
  background: rgba(11, 9, 8, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
header.top .logo { font-size: 26px; }
.guild { color: var(--muted); font-family: var(--head); font-size: 18px; }
.guild b { color: var(--text); }
nav.tabs { display: flex; gap: 4px; margin-left: 10px; flex-wrap: wrap; }
nav.tabs button { background: none; border: 1px solid transparent; padding: 7px 14px; color: var(--muted); font-family: var(--head); font-size: 19px; font-weight: 600; border-radius: 3px; }
nav.tabs button:hover { color: var(--text); }
nav.tabs button.on { color: var(--ember2); border-color: var(--line2); background: var(--panel); }
nav.tabs .badge { display: inline-block; background: var(--ember); color: #1a0d04; font: 700 11px var(--body); padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: 2px; }
.spacer { flex: 1; }
.gold { color: var(--gold); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 6px; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe28a, #b07a20 70%); box-shadow: 0 0 6px rgba(224, 178, 82, .5); display: inline-block; }

main { max-width: 1400px; margin: 0 auto; padding: 24px; }
h2 { font-family: var(--head); font-size: 30px; font-weight: 700; margin: 0 0 4px; color: #f0e2c8; }
h3 { font-family: var(--head); font-size: 22px; margin: 26px 0 12px; color: #e8d8bc; font-weight: 700; }
.sub { color: var(--muted); margin: 0 0 20px; font-family: var(--head); font-size: 18px; font-style: italic; }
.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.muted { color: var(--muted); }
.empty { color: var(--dim); font-family: var(--head); font-size: 19px; font-style: italic; padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: 4px; }

/* ———————— карточки героев ———————— */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.hero {
  --rc: #999;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-top: 3px solid var(--rc);
  border-radius: 4px;
  padding: 14px;
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.hero.legendary { box-shadow: 0 0 0 1px rgba(232, 166, 58, .25), 0 0 30px rgba(232, 166, 58, .15), 0 6px 20px rgba(0, 0, 0, .35); }
.hero.epic { box-shadow: 0 0 24px rgba(163, 92, 224, .12), 0 6px 20px rgba(0, 0, 0, .35); }
.hero-head { display: flex; gap: 12px; align-items: center; }
.portrait { width: 76px; height: 76px; flex: none; border-radius: 3px; border: 2px solid var(--rc); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 30%, #2a1f18), #0c0908 75%); object-fit: cover; }
.hname { font-family: var(--head); font-size: 21px; font-weight: 700; line-height: 1.1; color: #f2e4cc; }
.rarity { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--rc); font-weight: 700; }
.cls { color: var(--muted); font-size: 14px; }
.cls b { color: var(--text); font-weight: 400; }
.trait { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 9px; border-radius: 3px; background: rgba(0, 0, 0, .25); border-left: 3px solid; font-size: 13.5px; }
.trait b { font-family: var(--head); font-size: 17px; }
.trait.good { border-color: var(--good); } .trait.good b { color: var(--good); }
.trait.neutral { border-color: var(--neutral); } .trait.neutral b { color: var(--neutral); }
.trait.bad { border-color: var(--bad); } .trait.bad b { color: var(--bad); }
.pol-good { color: var(--good); } .pol-neutral { color: var(--neutral); } .pol-bad { color: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; }
.stats div { background: rgba(0, 0, 0, .3); padding: 4px 2px; border-radius: 2px; }
.stats small { display: block; color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.stats b { font-size: 15px; }
.ability { font-size: 13.5px; color: var(--muted); }
.ability b { color: var(--ember2); font-family: var(--head); font-size: 16.5px; }
.ability .pas b { color: #b8a888; }
.hero-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.status { font-size: 13px; padding: 3px 8px; border-radius: 10px; background: rgba(0, 0, 0, .35); }
.status.free { color: var(--good); }
.status.away { color: var(--ember2); }
.status.rest { color: #8ab0d8; }
.xp { height: 5px; background: #0c0908; border-radius: 3px; overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, #6a3a90, #a35ce0); }
.lvl { position: absolute; top: 10px; right: 12px; font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--muted); }
.lvl b { font-size: 22px; color: var(--text); }
.cost { color: var(--gold); font-weight: 700; }

/* ———————— локации ———————— */
.locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.loc {
  position: relative; text-align: left; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px 16px 14px;
  min-height: 150px; transition: border-color .15s, transform .15s;
}
.loc::before { content: ''; position: absolute; inset: 0; opacity: .55; background: var(--locbg); pointer-events: none; }
.loc > * { position: relative; }
.loc:hover { border-color: var(--line2); transform: translateY(-1px); }
.loc.sel { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 30px rgba(208, 122, 52, .2); }
.loc .lt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.loc .lt.dungeon { color: #c07a7a; } .loc .lt.adventure { color: #8ab08a; }
.loc .ln { font-family: var(--head); font-size: 24px; font-weight: 700; color: #f0e2c8; margin: 2px 0 6px; line-height: 1.1; }
.loc .ld { font-size: 13.5px; color: var(--muted); font-style: italic; }
.loc .lm { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.loc .lm b { color: var(--text); }
.skulls { color: var(--blood); letter-spacing: 2px; }
.picker { margin-top: 18px; background: var(--panel); border: 1px solid var(--line2); border-radius: 4px; padding: 18px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 12px 0; }
.pick { display: flex; gap: 10px; align-items: center; text-align: left; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-left: 3px solid var(--rc); padding: 6px 8px; border-radius: 3px; }
.pick img { width: 44px; height: 44px; border-radius: 2px; }
.pick .pn { font-family: var(--head); font-size: 17px; font-weight: 700; line-height: 1.1; }
.pick .ps { font-size: 12.5px; color: var(--muted); }
.pick.on { border-color: var(--ember); background: rgba(208, 122, 52, .12); border-left-color: var(--rc); }
.pick:disabled { opacity: .4; }
.slots { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.slot { width: 52px; height: 52px; border: 1px dashed var(--line2); border-radius: 3px; display: grid; place-items: center; color: var(--dim); overflow: hidden; }
.slot img { width: 100%; height: 100%; }

/* ———————— походы ———————— */
.exps { display: flex; flex-direction: column; gap: 10px; }
.exp { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px; flex-wrap: wrap; }
.exp .en { font-family: var(--head); font-size: 20px; font-weight: 700; }
.exp .eh { color: var(--muted); font-size: 13.5px; }
.exp .prog { flex: 1; min-width: 180px; height: 8px; background: #0c0908; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.exp .prog i { display: block; height: 100%; background: linear-gradient(90deg, #6e2e10, var(--ember2)); transition: width 1s linear; }
.exp.live { border-color: #6a4426; }
.res-victory { color: var(--good); } .res-retreat { color: var(--neutral); } .res-wipe { color: var(--bad); }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid currentColor; }

.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.grave { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.grave b { font-family: var(--head); font-size: 18px; }
.grave .cross { color: var(--dim); font-size: 18px; }
.news { font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.news.victory b { color: var(--good); } .news.wipe b { color: var(--bad); } .news.retreat b { color: var(--neutral); }

/* кодекс */
.codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.codex .c { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 14px; display: flex; gap: 12px; }
.codex .c img { width: 70px; height: 70px; border-radius: 3px; flex: none; background: #0c0908; }
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }

/* тосты и подсказки */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--panel2); border: 1px solid var(--line2); border-left: 3px solid var(--ember); padding: 10px 14px; max-width: 380px; border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: tin .3s ease-out; font-size: 14px; pointer-events: auto; }
.toast.victory { border-left-color: var(--good); } .toast.wipe { border-left-color: var(--bad); } .toast.error { border-left-color: #ff5040; }
@keyframes tin { from { transform: translateX(30px); opacity: 0; } }

/* ———————— 3D-просмотр ———————— */
.viewer { position: fixed; inset: 0; z-index: 50; display: none; background: #000; overflow: hidden; user-select: none; }
.viewer.open { display: block; }
.v-canvas, .v-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v-canvas canvas { cursor: grab; }
.v-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ulabel { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; will-change: transform; }
.ulabel .un { font: 700 12px var(--body); color: #f0e4d0; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.ulabel.u-enemy .un { color: #ffb0a0; }
.ulabel.u-boss .un { color: var(--gold); font: 700 16px var(--head); }
.ulabel .uhp { width: 60px; height: 5px; margin: 2px auto 0; background: rgba(0, 0, 0, .7); border: 1px solid rgba(0, 0, 0, .8); border-radius: 2px; overflow: hidden; }
.ulabel.u-boss .uhp { width: 120px; height: 7px; }
.ulabel .uhp i { display: block; height: 100%; background: #5fbf4a; transition: width .25s; }
.ulabel.u-enemy .uhp i { background: #c03a2a; }
.ulabel.fallen { opacity: .5; }
.floater { position: absolute; left: 0; top: 0; font: 800 20px var(--body); color: #ff5a4a; text-shadow: 0 2px 3px #000, 0 0 6px #000; white-space: nowrap; will-change: transform, opacity; }
.floater.crit { color: #ffd040; font-size: 27px; }
.floater.self { color: #d07070; font-size: 16px; }
.floater.heal { color: #7aff8a; }
.floater.miss { color: #c0c0c0; font-size: 15px; font-style: italic; }
.floater.gold { color: var(--gold); font-size: 22px; }
.floater.ability { color: #ffe0a0; font: 700 italic 22px var(--head); }
.floater.shield { color: #ffe9a0; font-size: 14px; }
.floater[class*="status-"] { font-size: 13px; letter-spacing: .1em; }
.floater.status-poison { color: #8aff60; } .floater.status-burn { color: #ff9040; } .floater.status-curse { color: #c080ff; } .floater.status-shield, .floater.status-taunt { color: #ffe9a0; }

.v-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: linear-gradient(rgba(0, 0, 0, .8), transparent); }
.v-title { display: flex; flex-direction: column; min-width: 200px; }
.v-title b { font: 700 24px var(--head); color: #f0e2c8; line-height: 1.1; }
.v-type { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.v-progress { flex: 1; height: 8px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; position: relative; }
.v-progress-bar { height: 100%; background: linear-gradient(90deg, #6e2e10, var(--ember2)); border-radius: 4px; }
.v-marks i { position: absolute; top: -4px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #888; }
.v-marks .mk-fight { background: #c04030; } .v-marks .mk-event { background: #d0a848; } .v-marks .mk-camp { background: #6ab060; } .v-marks .mk-boss { background: #ff2020; height: 18px; top: -6px; width: 6px; box-shadow: 0 0 8px #f00; }
.v-time { font: 700 14px var(--body); color: var(--muted); min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.v-ctrl { display: flex; gap: 4px; align-items: center; }
.v-ctrl button { background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .15); color: #ddd; padding: 5px 10px; border-radius: 3px; font-size: 13px; }
.v-ctrl button.on { border-color: var(--ember); color: var(--ember2); }
.v-live { color: #ff4a3a; font-weight: 700; font-size: 12px; margin-right: 8px; letter-spacing: .08em; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.v-party { position: absolute; left: 14px; top: 80px; width: 250px; display: flex; flex-direction: column; gap: 6px; }
.vp { display: flex; gap: 8px; align-items: center; background: rgba(10, 8, 6, .78); border: 1px solid rgba(255, 255, 255, .08); padding: 6px; border-radius: 3px; }
.vp img { width: 46px; height: 46px; border: 2px solid; border-radius: 2px; background: #0c0908; }
.vp-info { flex: 1; min-width: 0; }
.vp-name { font: 700 16px var(--head); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpbar { position: relative; height: 12px; background: #000; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.hpbar i { display: block; height: 100%; background: linear-gradient(#5fbf4a, #2f7a24); transition: width .3s; }
.hpbar span { position: absolute; inset: 0; font: 700 10px/12px var(--body); text-align: center; color: #fff; text-shadow: 0 1px 1px #000; }
.vp.fallen { opacity: .65; } .vp.fallen .hpbar i { background: #7a2020; }
.vp.dead { opacity: .45; filter: grayscale(1); }
.v-log { position: absolute; right: 14px; top: 80px; bottom: 14px; width: 330px; display: flex; flex-direction: column; background: rgba(10, 8, 6, .72); border: 1px solid rgba(255, 255, 255, .08); border-radius: 3px; }
.v-log-head { font: 700 17px var(--head); padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #e8d8bc; }
.v-log-body { flex: 1; overflow-y: auto; padding: 6px 10px; font-size: 12.5px; line-height: 1.4; }
.v-log-body::-webkit-scrollbar { width: 6px; } .v-log-body::-webkit-scrollbar-thumb { background: #3a2d22; }
.ll { padding: 3px 0; color: #b8aa94; border-bottom: 1px solid rgba(255, 255, 255, .03); }
.ll span { color: #5f5444; margin-right: 6px; font-variant-numeric: tabular-nums; }
.ll.ability { color: #ffd8a0; } .ll.fight { color: #ff9a8a; } .ll.boss { color: var(--gold); font-weight: 700; }
.ll.win { color: var(--good); font-weight: 700; } .ll.death { color: #ff6a5a; font-weight: 700; } .ll.bad { color: #ff8a6a; }
.ll.event { color: #e8d8bc; background: rgba(208, 168, 72, .07); padding: 5px 4px; }
.ll.heal { color: #8ae08a; } .ll.lootl { color: var(--gold); } .ll.dot { color: #b0a0c0; } .ll.sys { color: #a09080; font-style: italic; }
.v-banner { position: absolute; top: 90px; left: 50%; transform: translate(-50%, -10px); font: 700 30px var(--head); color: #f0e2c8; text-shadow: 0 2px 10px #000, 0 0 30px #000; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; text-align: center; max-width: 60vw; }
.v-banner.show { opacity: 1; transform: translate(-50%, 0); }
.v-banner.boss { color: #ff7a50; font-size: 36px; } .v-banner.win { color: var(--good); } .v-banner.death { color: #ff5a4a; }
.v-event { position: absolute; left: 50%; bottom: 28px; transform: translate(-50%, 20px); width: min(560px, calc(100vw - 640px)); min-width: 340px; background: linear-gradient(#1e1813f0, #120e0cf2); border: 1px solid #6a4a2e; border-radius: 4px; padding: 16px 20px; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
.v-event.show { opacity: 1; transform: translate(-50%, 0); }
.ev-title { font: 700 26px var(--head); color: var(--ember2); }
.ev-text { font-family: var(--head); font-size: 18px; font-style: italic; color: #d8c8b0; margin: 4px 0 10px; }
.ev-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-opts li { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 3px; font-size: 14px; color: #a89880; transition: all .4s; }
.ev-opts li.locked { opacity: .35; text-decoration: line-through; }
.v-event.stage2 .ev-opts li.chosen { border-color: var(--ember); color: #fff0d8; background: rgba(208, 122, 52, .18); }
.v-event.stage2 .ev-opts li:not(.chosen) { opacity: .35; }
.ev-reason, .ev-outcome { max-height: 0; overflow: hidden; opacity: 0; transition: all .4s; }
.v-event.stage2 .ev-reason { max-height: 60px; opacity: 1; margin-top: 10px; color: #e0c890; font-size: 14px; }
.v-event.stage3 .ev-outcome { max-height: 80px; opacity: 1; margin-top: 8px; font-size: 15px; color: #f0e4d0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ev-outcome .g { color: var(--gold); }
.v-end { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .6s; }
.v-end.show { opacity: 1; pointer-events: auto; }
.end-card { background: linear-gradient(#1e1813, #120e0c); border: 1px solid #6a4a2e; padding: 30px 40px; text-align: center; border-radius: 4px; min-width: 360px; box-shadow: 0 30px 80px #000; }
.end-title { font: 700 48px var(--head); }
.end-card.victory .end-title { color: var(--good); } .end-card.retreat .end-title { color: var(--neutral); } .end-card.wipe .end-title { color: var(--bad); }
.end-text { color: var(--muted); font-family: var(--head); font-size: 19px; font-style: italic; }
.end-gold { color: var(--gold); font-size: 24px; font-weight: 700; margin: 14px 0; }
.end-list { text-align: left; font-size: 14px; margin: 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.end-list .dead { color: #ff6a5a; }
.v-hint { position: absolute; bottom: 8px; left: 14px; font-size: 11.5px; color: rgba(255, 255, 255, .3); }
@media (max-width: 1000px) {
  .v-log { width: 240px; top: auto; height: 34vh; }
  .v-party { width: 200px; }
  .v-event { width: calc(100vw - 30px); bottom: auto; top: 70px; }
  .v-top { flex-wrap: wrap; }
}

#tip { position: fixed; z-index: 200; pointer-events: none; background: #0c0908; border: 1px solid var(--line2); padding: 8px 10px; font-size: 13px; max-width: 280px; border-radius: 3px; display: none; box-shadow: 0 10px 30px #000; }


/* ———————— ресурсы в шапке ———————— */
.resbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.res { display: flex; align-items: center; gap: 5px; color: #f0e2c8; font-size: 15px; }
.res b { font-variant-numeric: tabular-nums; }
.res small { color: #8fbf6a; font-size: 11.5px; }
.res .cap { color: var(--dim); font-style: normal; font-size: 12px; }
.ri { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.cost-list { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.cc { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc .coin { width: 13px; height: 13px; }
.cc .ri { width: 16px; height: 16px; }
.cc.short { color: #e0533a; }
.loc .loot { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.loc .loot span { display: inline-flex; align-items: center; gap: 4px; }
.loc .loot i { font-style: normal; letter-spacing: 1px; color: #c8a868; }
.bonus-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 18px; }
.bonus-bar span { background: rgba(208, 122, 52, .12); border: 1px solid #6a4426; color: #f0c890; padding: 4px 10px; border-radius: 12px; font-size: 13px; }

/* ———————— город (пергамент и золото в духе Anno 1404) ———————— */
.city {
  --parch: #f1e4c2; --parch2: #e1cc9c; --ink: #3a2914; --ink2: #6b5432; --gl: #a37a2e;
  position: fixed; left: 0; right: 0; bottom: 0; top: 60px; display: none; z-index: 5; overflow: hidden; background: #9cc4e8;
}
.city.open { display: block; }
.c-gl, .c-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.parch, .c-top, .c-build, .c-side {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 110, 50, .25), transparent 55%),
    linear-gradient(var(--parch), var(--parch2));
  color: var(--ink);
  border: 2px solid var(--gl);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .7), inset 0 0 22px rgba(120, 80, 30, .25), 0 8px 26px rgba(0, 0, 0, .35);
  border-radius: 8px;
}
.c-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; padding: 6px 16px; white-space: nowrap; }
.ct-item { display: flex; align-items: center; gap: 6px; font-family: var(--head); font-size: 19px; }
.ct-item b { font-weight: 700; }
.ct-item span { font-family: var(--body); font-size: 12px; color: var(--ink2); }
.pbtn {
  font: 700 14px var(--head); letter-spacing: .02em; color: #fff7e4; cursor: pointer;
  background: linear-gradient(#8a5a2a, #5e3a18); border: 1px solid #3e2410; border-radius: 4px; padding: 5px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), 0 2px 3px rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}
.pbtn:hover:not(:disabled) { filter: brightness(1.15); }
.pbtn:disabled { opacity: .45; cursor: not-allowed; }
.pbtn.gold { background: linear-gradient(#d8a640, #9a6a1a); border-color: #6a4610; }
.pbtn.violet { background: linear-gradient(#7a48b8, #4a2678); border-color: #2e1650; }
.pbtn.danger { background: linear-gradient(#a0402a, #6a2414); }
.pbtn.sm { padding: 3px 9px; font-size: 13px; }

.c-build { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 28px); padding: 0; }
.cb-cats { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid rgba(120, 80, 30, .35); flex-wrap: wrap; }
.cb-cats button { font: 700 16px var(--head); color: var(--ink2); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 5px 5px 0 0; padding: 4px 14px; cursor: pointer; }
.cb-cats button.on { color: var(--ink); background: rgba(255, 250, 230, .65); border-color: rgba(120, 80, 30, .35); }
.cb-cats .cb-cancel { margin-left: auto; color: #8a2a1a; }
.cb-items { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.bi {
  flex: none; width: 118px; padding: 6px 6px 8px; text-align: center; cursor: pointer; color: var(--ink);
  background: linear-gradient(rgba(255, 250, 235, .75), rgba(240, 225, 190, .6)); border: 1px solid rgba(120, 80, 30, .45); border-radius: 6px; font: inherit;
  transition: transform .1s, box-shadow .1s;
}
.bi:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(80, 50, 10, .3); }
.bi.on { border-color: #d89a20; box-shadow: 0 0 0 2px #f0c040, 0 0 14px rgba(240, 190, 60, .7); }
.bi.locked { opacity: .6; filter: grayscale(.7); }
.bi img { width: 76px; height: 76px; display: block; margin: 0 auto 2px; }
.bi-name { font: 700 15px/1.1 var(--head); margin-bottom: 4px; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.bi-cost { font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bi-cost small { color: var(--ink2); }
.bi-lock { font-size: 11.5px; color: #8a2a1a; }
.bi-ico { width: 76px; height: 76px; margin: 0 auto 2px; border-radius: 6px; border: 1px solid rgba(120, 80, 30, .35); }
.tool-road { background: linear-gradient(90deg, #6aa03a 0 22%, #a7895e 22% 78%, #6aa03a 78%), #a7895e; }
.tool-trees { background: radial-gradient(circle at 30% 40%, #4b862c 0 18%, transparent 19%), radial-gradient(circle at 65% 35%, #5a9634 0 20%, transparent 21%), radial-gradient(circle at 50% 70%, #3f7726 0 22%, transparent 23%), #7aa84a; }
.tool-demolish { background: linear-gradient(45deg, transparent 44%, #b03020 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #b03020 44% 56%, transparent 56%), #d8c8a0; }

.c-side { position: absolute; right: 14px; top: 70px; width: 330px; max-height: calc(100% - 270px); overflow-y: auto; padding: 14px; transform: translateX(130%); transition: transform .25s; }
.c-side.show { transform: none; }
.pl-head { display: flex; gap: 10px; align-items: center; }
.pl-head img { width: 64px; height: 64px; border-radius: 6px; background: rgba(255, 255, 255, .4); border: 1px solid rgba(120, 80, 30, .35); }
.pl-title { font: 700 23px/1.05 var(--head); }
.pl-lvl { color: #b8862a; letter-spacing: 2px; }
.pl-x { margin-left: auto; align-self: flex-start; background: none; border: none; font-size: 18px; color: var(--ink2); cursor: pointer; }
.pl-desc { font-family: var(--head); font-style: italic; font-size: 16px; color: var(--ink2); margin: 8px 0; line-height: 1.3; }
.pl-line { font-size: 13.5px; margin: 6px 0; }
.pl-line.bad, .c-side .bad { color: #a8281a; font-weight: 700; }
.pl-line.warn { color: #a86a10; }
.pl-line.muted { color: var(--ink2); }
.needs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.needs span { font-size: 12.5px; padding: 2px 8px; border-radius: 10px; border: 1px solid; }
.needs .ok { color: #2e6a1e; border-color: #6aa04a; background: rgba(120, 180, 80, .15); }
.needs .no { color: #8a2a1a; border-color: #c0705a; background: rgba(200, 80, 50, .1); }
.pl-up, .trade { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(120, 80, 30, .35); display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.pl-up-h { font: 700 17px var(--head); }
.pl-actions { display: flex; gap: 8px; margin-top: 12px; }
.tr-row { display: flex; gap: 8px; align-items: center; font-size: 13.5px; width: 100%; }
.tr-row > span:first-child { display: inline-flex; gap: 3px; align-items: center; min-width: 100px; }

.c-tip { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 20; display: none; background: rgba(28, 20, 12, .92); color: #f2e6cc; border: 1px solid #a37a2e; border-radius: 5px; padding: 7px 10px; font-size: 13px; max-width: 280px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.c-tip b { font: 700 16px var(--head); color: #ffd890; display: block; }
.c-tip .bad { color: #ff8a70; font-weight: 700; }
.c-tip .warn { color: #ffc060; }
.c-tip .tcost { margin-top: 4px; }
.c-tip.brief { padding: 4px 9px; }

.c-modal { position: absolute; inset: 0; background: rgba(10, 8, 6, .6); display: none; place-items: center; z-index: 30; }
.c-modal.show { display: grid; }
.m-box { width: min(1240px, 94vw); max-height: 86%; overflow-y: auto; background: var(--bg2); border: 1px solid #6a4a2e; border-radius: 6px; padding: 20px 24px; box-shadow: 0 30px 80px #000; color: var(--text); }
.m-box.dark { width: min(760px, 94vw); background: linear-gradient(#1a1222, #120c18); border-color: #5a3a8a; }
.m-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.m-title { font: 700 30px var(--head); color: #f0e2c8; }
.m-sub { font-family: var(--head); font-style: italic; font-size: 17px; color: var(--muted); }
.m-box .pl-x { color: var(--muted); }
.rit { border: 1px solid #3a2a50; border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; background: rgba(120, 70, 200, .06); }
.rit.locked { opacity: .5; }
.rit-h { display: flex; justify-content: space-between; font: 700 20px var(--head); color: #d8b8ff; }
.rit-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.rit-row select { background: #0e0a12; color: var(--text); border: 1px solid #4a3a60; padding: 5px 8px; border-radius: 4px; max-width: 360px; }
.rit .bad { color: #ff8a70; }
.c-help { text-align: right; right: 14px; bottom: 10px; position: absolute; font-size: 11.5px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); pointer-events: none; max-width: 300px; }
@media (max-width: 1100px) { .c-help { display: none; } .c-side { top: auto; bottom: 200px; max-height: 45%; } }

.floater.wood { color: #e0b070; font-size: 19px; } .floater.stone { color: #d0ccc0; font-size: 19px; } .floater.souls { color: #c890ff; font-size: 19px; }
.end-res { display: flex; gap: 14px; justify-content: center; margin: -6px 0 14px; font-weight: 700; }
.r-wood { color: #e0b070; } .r-stone { color: #d0ccc0; } .r-souls { color: #c890ff; }

@media (max-width: 1700px) { header.top { gap: 12px; padding: 8px 16px; } .res small { display: none; } nav.tabs button { padding: 6px 10px; font-size: 18px; } }
@media (max-width: 1450px) { .guild { display: none; } header.top .logo { font-size: 22px; } .res .cap { display: none; } }

/* ———————— город в тёмном стиле (переопределения) ———————— */
.city { --ink: #e6d6b8; --ink2: #a08c70; --gl: #5a3e24; background: #05090c; }
.city::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, .7) 100%); }
.c-top, .c-build, .c-side, .c-help { z-index: 2; }
.c-top, .c-build, .c-side {
  background: linear-gradient(rgba(30, 23, 18, .96), rgba(14, 11, 9, .96));
  color: var(--ink);
  border: 1px solid #5a3e24;
  box-shadow: inset 0 0 0 1px rgba(210, 150, 80, .10), inset 0 0 30px rgba(0, 0, 0, .65), 0 12px 30px rgba(0, 0, 0, .7);
  border-radius: 4px;
}
.c-top::before, .c-build::before, .c-side::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(160, 100, 50, .18); border-radius: 2px; pointer-events: none; }
.ct-item span { color: var(--ink2); }
.ct-item b { color: #f2dfbc; }
.cb-cats { border-bottom-color: #3a2816; }
.cb-cats button { color: #8a7458; }
.cb-cats button.on { color: #f0c890; background: rgba(140, 70, 20, .22); border-color: #5a3e24; }
.cb-cats .cb-cancel { color: #e0644a; }
.bi { background: linear-gradient(#251d16, #15100c); border-color: #45301c; color: var(--ink); }
.bi:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 1px #7a5028; }
.bi.on { border-color: #c8701e; box-shadow: 0 0 0 2px #c8701e, 0 0 16px rgba(220, 110, 30, .55); }
.bi img, .pl-head img, .bi-ico { background: radial-gradient(circle at 50% 62%, #2c2a36, #0b0a10 72%); border-radius: 4px; }
.bi-cost small, .pl-desc, .pl-line.muted { color: var(--ink2); }
.bi-lock { color: #e0745a; }
.tool-road { background: linear-gradient(90deg, #2b3421 0 22%, #3a3026 22% 78%, #2b3421 78%); }
.tool-trees { background: radial-gradient(circle at 30% 45%, #1c2a1e 0 18%, transparent 19%), radial-gradient(circle at 65% 35%, #2e3820 0 20%, transparent 21%), radial-gradient(circle at 50% 72%, #243424 0 22%, transparent 23%), #2b3421; }
.tool-demolish { background: linear-gradient(45deg, transparent 44%, #8a1a12 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #8a1a12 44% 56%, transparent 56%), #241c16; }
.pl-title { color: #f2dfbc; }
.pl-lvl { color: #d0802a; }
.pl-x { color: var(--ink2); }
.pl-line.bad, .c-side .bad { color: #ff7a5e; }
.pl-line.warn { color: #e8a040; }
.pl-up, .trade { border-top-color: #3a2816; }
.needs .ok { color: #9ad07a; border-color: #4a6a32; background: rgba(90, 140, 60, .12); }
.needs .no { color: #ff8a6e; border-color: #7a3020; background: rgba(160, 50, 30, .12); }
.pbtn { background: linear-gradient(#4a2e1a, #24150a); border-color: #120a04; color: #f2dcc0; }
.pbtn.gold { background: linear-gradient(#b0581a, #5e2208); border-color: #2a0e02; }
.pbtn.green { background: linear-gradient(#2a6a4a, #10331f); border-color: #061a0e; box-shadow: inset 0 1px 0 rgba(160, 255, 200, .25), 0 0 12px rgba(80, 255, 160, .25); }
.pbtn.danger { background: linear-gradient(#7a2014, #3a0c06); }
.pbadge { display: inline-block; margin-left: 6px; background: #c8301e; color: #fff; font: 700 11px var(--body); padding: 0 6px; border-radius: 8px; vertical-align: 1px; }
.c-modal { background: rgba(3, 4, 7, .72); }
.m-box.portal-box { width: min(1260px, 95vw); background: linear-gradient(#0d1411, #070a09); border-color: #2a5a40; box-shadow: 0 0 60px rgba(60, 255, 150, .12), 0 30px 80px #000; }
.portal-box .m-title { color: #c8ffe0; text-shadow: 0 0 18px rgba(90, 255, 160, .45); }
.m-lvl { color: #7dffb0; font-size: 18px; letter-spacing: 2px; margin-left: 8px; }
.loc.locked { opacity: .42; filter: grayscale(.7); cursor: not-allowed; }
.loc.locked:hover { transform: none; }
.lockt { color: #7dffb0; }
.bad-line { color: #ff8a70; margin: 10px 0 0; font-size: 14px; }
.c-help { color: rgba(200, 185, 160, .55); }
.c-tip { background: rgba(14, 10, 8, .95); border-color: #6a4426; }

.bi img { object-fit: contain; padding: 4px; }

.m-lvl i, .pl-lvl i { font-style: normal; opacity: .22; }

/* ———————— портал: сбор отряда ———————— */
.m-box.pp { width: min(1360px, 96vw); height: min(860px, 90%); max-height: none; display: flex; flex-direction: column; padding: 16px 20px; overflow: hidden; }
.pp-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.pp-head .m-sub b { color: #c8ffe0; font-style: normal; }
.pp-active { flex: 1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pa-chip { display: flex; gap: 8px; align-items: center; background: rgba(60, 255, 150, .06); border: 1px solid #2a5a40; border-radius: 20px; padding: 3px 4px 3px 12px; font-size: 13px; }
.pa-chip span { color: #9adfb8; font-variant-numeric: tabular-nums; }
.pp-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px 1fr 360px; gap: 16px; }
.pp-col { min-height: 0; display: flex; flex-direction: column; }
.pp-locs { overflow-y: auto; gap: 6px; padding-right: 4px; }
.pp-h { font: 700 15px var(--head); letter-spacing: .08em; text-transform: uppercase; color: #7dcf9e; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.pp-h .muted { text-transform: none; letter-spacing: 0; font: 400 12.5px var(--body); }
.pp-h select { margin-left: auto; background: #0c100e; color: var(--text); border: 1px solid #2a4a38; border-radius: 3px; font-size: 12.5px; padding: 3px 6px; }
.pl-loc { position: relative; text-align: left; background: #13110f; border: 1px solid #2e2620; border-radius: 4px; padding: 8px 10px; cursor: pointer; color: var(--text); overflow: hidden; flex: none; }
.pl-loc::before { content: ''; position: absolute; inset: 0; background: var(--locbg); opacity: .6; pointer-events: none; }
.pl-loc > * { position: relative; }
.pl-loc:hover:not(:disabled) { border-color: #5a4a30; }
.pl-loc.on { border-color: #4ad08a; box-shadow: 0 0 0 1px #4ad08a, 0 0 18px rgba(60, 255, 150, .18); }
.pl-loc.locked { opacity: .4; cursor: not-allowed; }
.pll-top { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.pll-top .lt.dungeon { color: #c07a7a; } .pll-top .lt.adventure { color: #8ab08a; }
.pll-name { font: 700 18px/1.15 var(--head); color: #f0e2c8; margin: 2px 0; }
.pll-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.pll-loot { display: flex; gap: 2px; }
.pll-loot .ri, .pll-loot .coin { width: 14px; height: 14px; }
.pp-mid { overflow-y: auto; padding-right: 4px; }
.pp-loc { position: relative; border: 1px solid #2e2620; border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; overflow: hidden; }
.pp-loc::before { content: ''; position: absolute; inset: 0; background: var(--locbg); opacity: .8; pointer-events: none; }
.pp-loc > * { position: relative; }
.pp-loc .ln { font: 700 26px var(--head); color: #f0e2c8; }
.pp-loc .ld { font: italic 16px var(--head); color: var(--muted); margin: 2px 0 8px; }
.pp-loc .lm { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.pp-loc .lm b { color: var(--text); }
.pp-loc .loot { display: inline-flex; gap: 10px; }
.pp-loc .loot span { display: inline-flex; gap: 3px; align-items: center; }
.pp-loc .loot i { font-style: normal; color: #c8a868; letter-spacing: 1px; }
.pp-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot2 { --rc: #444; position: relative; min-height: 200px; border: 1px solid #3a2e24; border-top: 3px solid var(--rc); border-radius: 5px; background: linear-gradient(#1c1612, #110d0a); padding: 10px 8px; text-align: center; cursor: pointer; transition: transform .12s, border-color .12s; }
.slot2:hover { border-color: #8a3a2a; }
.slot2:hover .s2-x { opacity: 1; }
.slot2.empty { border: 2px dashed #3a4a40; border-top-width: 2px; background: rgba(60, 255, 150, .025); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: default; }
.slot2.over { border-color: #4ad08a; background: rgba(60, 255, 150, .1); transform: scale(1.02); }
.s2-plus { font: 300 44px/1 var(--body); color: #3a5a48; }
.s2-hint { font-size: 12px; color: #5a7a68; margin-top: 6px; line-height: 1.35; }
.slot2 img { width: 84px; height: 84px; border-radius: 4px; border: 2px solid var(--rc); background: #0c0908; }
.s2-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #6a2a1a; background: #2a0e08; color: #ff9a80; font-size: 12px; opacity: .5; cursor: pointer; }
.s2-name { font: 700 16px/1.1 var(--head); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-sub { font-size: 12px; color: var(--muted); }
.s2-trait { font-size: 12px; margin-top: 2px; }
.s2-stats { display: flex; justify-content: center; gap: 8px; font-size: 12px; color: #c8b89a; margin-top: 6px; }
.pp-rating { display: flex; gap: 10px; align-items: center; margin: 12px 0 6px; font-size: 13.5px; flex-wrap: wrap; }
.rate { font: 700 15px var(--head); padding: 2px 12px; border-radius: 12px; border: 1px solid; }
.rate.ok { color: #8fe0a0; border-color: #3a7a4a; background: rgba(80, 200, 110, .1); }
.rate.warn { color: #f0c060; border-color: #7a5a20; background: rgba(240, 180, 60, .1); }
.rate.bad { color: #ff7a60; border-color: #7a2a1a; background: rgba(240, 80, 50, .12); }
.pp-hints { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.hint { font-size: 12px; padding: 2px 9px; border-radius: 10px; border: 1px solid; }
.hint.ok { color: #8fd09a; border-color: #2e5a36; } .hint.warn { color: #f0b860; border-color: #6a4a1a; } .hint.muted { color: var(--muted); border-color: #3a2e24; }
.pp-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pp-go { font-size: 17px; padding: 11px 22px; font-family: var(--head); font-weight: 700; background: linear-gradient(#2e8a5a, #12432a); border-color: #4ad08a; box-shadow: 0 0 20px rgba(60, 255, 150, .25); }
.pp-go:disabled { background: #1e1c1a; border-color: #3a3430; box-shadow: none; }
.pp-roster-col .pp-h { flex: none; }
.pp-roster { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.rc { --rc: #444; position: relative; display: flex; gap: 10px; align-items: center; text-align: left; background: #15110e; border: 1px solid #2e2620; border-left: 3px solid var(--rc); border-radius: 4px; padding: 6px 8px; cursor: pointer; color: var(--text); flex: none; transition: background .1s; }
.rc:hover:not(:disabled) { background: #201914; border-color: #5a4a30; border-left-color: var(--rc); }
.rc.on { background: rgba(60, 255, 150, .07); border-color: #3a7a56; border-left-color: var(--rc); }
.rc.off { opacity: .5; cursor: not-allowed; }
.rc.dragging { opacity: .4; }
.rc img { width: 48px; height: 48px; border-radius: 3px; background: #0c0908; flex: none; }
.rc-body { flex: 1; min-width: 0; }
.rc-name { font: 700 16px/1.1 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-foot { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 2px; }
.rc-stats { color: #a8987e; }
.hs.free { color: #8fd09a; } .hs.rest { color: #8ab0d8; } .hs.away { color: #f0a050; }
.rc-check { position: absolute; top: 6px; right: 8px; color: #6aff9a; font-size: 14px; }
.role { font-style: normal; font-size: 12px; margin-left: 6px; padding: 0 4px; border-radius: 3px; }
.role.heal { color: #8aff9a; background: rgba(80, 255, 120, .1); }
.role.tank { color: #a8c8ff; background: rgba(100, 150, 255, .12); }
@media (max-width: 1100px) {
  .m-box.pp { height: 92%; overflow-y: auto; }
  .pp-grid { display: flex; flex-direction: column; flex: none; }
  .pp-col, .pp-loc { flex: none; }
  .pp-mid { overflow: visible; }
  .pp-locs .pp-h { display: none; }
  .slot2 { min-height: 150px; }
  .pp-locs { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .pl-loc { width: 220px; }
  .pp-slots { grid-template-columns: repeat(2, 1fr); }
  .pp-roster { max-height: 50vh; }
}
.pll-top .skulls { color: #d0584a; letter-spacing: 1px; }
.pll-meta b { color: var(--text); }

/* ———————— интерфейс города v3 ———————— */
.c-top, .c-help { display: none; }
.c-left, .c-quick, .c-mode, .c-binfo, .c-map, .c-helpbox, .c-build, .c-side { z-index: 2; }
.c-status, .adv, .qb, .mb-box, .c-binfo, .c-map, .hb-box {
  background: linear-gradient(rgba(30, 23, 18, .95), rgba(14, 11, 9, .95));
  color: var(--ink); border: 1px solid #5a3e24; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(210, 150, 80, .08), inset 0 0 24px rgba(0, 0, 0, .6), 0 10px 26px rgba(0, 0, 0, .6);
}
kbd { display: inline-block; min-width: 16px; padding: 0 4px; font: 700 10.5px/15px var(--body); text-align: center; color: #c8a878; background: #0e0a07; border: 1px solid #4a3420; border-bottom-width: 2px; border-radius: 3px; vertical-align: 1px; }

/* левая колонка: состояние и советник */
.c-left { position: absolute; left: 14px; top: 14px; width: 268px; display: flex; flex-direction: column; gap: 6px; }
.c-status { padding: 0; overflow: hidden; }
.st-head { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 12px; cursor: pointer; user-select: none; font-size: 13.5px; }
.st-head:hover { background: rgba(255, 200, 120, .04); }
.st-title { font: 700 19px var(--head); color: #f2dfbc; }
.st-th, .st-pop, .st-heroes { display: inline-flex; align-items: center; gap: 4px; color: var(--ink2); }
.st-head b { color: #f2dfbc; }
.st-arrow { margin-left: auto; color: var(--ink2); }
.st-body { padding: 2px 12px 10px; border-top: 1px solid #2e2014; }
.st-sub { font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .08em; color: #8a6c48; margin: 9px 0 4px; }
.st-row, .st-store { display: flex; align-items: center; gap: 7px; font-size: 13px; margin: 5px 0; }
.st-row > span { white-space: nowrap; color: var(--ink2); }
.st-row small, .st-store small { color: var(--ink2); font-size: 11.5px; }
.st-store b { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.st-store .ri { width: 16px; height: 16px; flex: none; }
.sbar { flex: 1; height: 7px; background: #0b0806; border: 1px solid #3a2816; border-radius: 4px; overflow: hidden; min-width: 40px; }
.sbar i { display: block; height: 100%; background: linear-gradient(90deg, #6a4a20, #c89040); transition: width .6s; }
.sbar.high i { background: linear-gradient(90deg, #8a5a10, #f0a030); }
.sbar.full i { background: linear-gradient(90deg, #8a2a10, #ff5a30); animation: pulse 1.2s infinite; }
.sbar.pop i { background: linear-gradient(90deg, #3a5a6a, #80b8d8); }
@keyframes pulse { 50% { opacity: .55; } }
.st-inc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.inc { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13.5px; color: #c8e8a0; font-variant-numeric: tabular-nums; }
.inc.zero { color: #6a5a48; }
.inc .ri { width: 16px; height: 16px; } .inc .coin { width: 13px; height: 13px; }
.c-advice { display: flex; flex-direction: column; gap: 5px; }
.adv { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 10px; font: 13px/1.25 var(--body); cursor: pointer; border-left: 3px solid #8a6a40; transition: transform .1s, filter .1s; }
.adv:hover { transform: translateX(3px); filter: brightness(1.2); }
.adv i { font-style: normal; flex: none; width: 16px; text-align: center; }
.adv.bad { border-left-color: #d04028; } .adv.bad i { color: #ff6a4a; }
.adv.warn { border-left-color: #d89030; } .adv.warn i { color: #f0b050; }
.adv.good { border-left-color: #5aa040; } .adv.good i { color: #8ae070; }
.adv.tip { border-left-color: #4ad08a; } .adv.tip i { color: #7dffb0; }

/* быстрые кнопки */
.c-quick { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.qb { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 7px; cursor: pointer; transition: filter .1s, transform .1s; }
.qb:hover { filter: brightness(1.2); transform: translateY(-1px); }
.qi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: radial-gradient(circle at 50% 40%, #4a3420, #1a120a); border: 1px solid #7a5028; color: #f0c890; }
.qb.portal .qi { background: radial-gradient(circle at 50% 45%, #50ffa0 0, #1a6a40 35%, #08180f 75%); border-color: #3a9a68; color: #e8fff0; box-shadow: 0 0 14px rgba(80, 255, 160, .35); }
.qb.violet .qi { background: radial-gradient(circle at 50% 45%, #b080ff 0, #4a2678 40%, #120a1e 80%); border-color: #7a48b8; }
.ql { display: flex; flex-direction: column; align-items: flex-start; font: 700 17px/1.05 var(--head); color: #f2dfbc; }
.ql small { font: 12px var(--body); color: var(--ink2); display: inline-flex; align-items: center; gap: 3px; }
.ql small b { color: #9adfb8; }
.ql .ri { width: 13px; height: 13px; }
.qb .pbadge { position: absolute; top: -6px; right: -6px; margin: 0; }

/* баннер режима */
.c-mode { position: absolute; top: 72px; left: 50%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.c-mode.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mb-box { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; border-color: #c8701e; box-shadow: 0 0 0 1px rgba(200, 112, 30, .4), 0 0 24px rgba(220, 110, 30, .25), 0 10px 26px rgba(0, 0, 0, .6); }
.mb-box img, .mb-ico { width: 46px; height: 46px; border-radius: 3px; background: radial-gradient(circle at 50% 62%, #2c2a36, #0b0a10 72%); object-fit: contain; }
.mb-title { font: 16px var(--head); color: var(--ink2); display: flex; gap: 10px; align-items: center; }
.mb-title b { color: #f2dfbc; }
.mb-help { font-size: 12.5px; color: #c8a878; margin-top: 2px; }

/* док строительства */
.c-build { bottom: 14px; max-width: min(calc(100vw - 600px), 980px); }
.cb-cats { padding: 6px 8px 0; gap: 4px; flex-wrap: nowrap; }
.cb-cats button { display: flex; align-items: center; gap: 6px; padding: 5px 12px 6px; font-size: 15.5px; }
.cb-cats button kbd { opacity: .7; }
.cc-ico { font-size: 15px; opacity: .85; }
.cb-items { gap: 6px; padding: 8px; }
.bi { position: relative; width: 104px; padding: 5px 5px 7px; }
.bi img, .bi-ico { width: 64px; height: 64px; }
.bi-name { font-size: 14px; min-height: 2.25em; margin-bottom: 3px; }
.bi-cost { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.bi-cost .cost-list { display: contents; }
.bi.poor { border-color: #5a2a1a; }
.bi.poor img { opacity: .75; }
.bi-key { position: absolute; top: 4px; right: 4px; }
.bi.locked .bi-lock { font-size: 11px; line-height: 1.2; }
.c-binfo { position: absolute; width: 320px; padding: 10px 12px; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .12s, transform .12s; z-index: 4; font-size: 13px; }
.c-binfo.show { opacity: 1; transform: none; }
.bf-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.bf-head img { width: 54px; height: 54px; background: radial-gradient(circle at 50% 62%, #2c2a36, #0b0a10 72%); border-radius: 3px; }
.bf-name { font: 700 19px var(--head); color: #ffd890; }
.bf-desc { font: italic 15px/1.3 var(--head); color: var(--ink2); margin: 4px 0 6px; }
.bf-line { margin: 3px 0; color: #d8c8a8; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bf-line.bad { color: #ff7a5e; font-weight: 700; }
.bf-line .ri { width: 15px; height: 15px; }

/* миникарта и кнопки вида */
.c-map { position: absolute; right: 14px; bottom: 14px; padding: 6px; }
.c-mini { display: block; width: 240px; height: 124px; cursor: crosshair; image-rendering: pixelated; }
.c-ctrl { display: flex; gap: 4px; margin-top: 6px; }
.c-ctrl button { flex: 1; height: 28px; font: 700 16px var(--body); color: #e6d6b8; background: linear-gradient(#3a2616, #1a1009); border: 1px solid #5a3e24; border-radius: 3px; cursor: pointer; }
.c-ctrl button:hover { filter: brightness(1.3); }
.c-ctrl button.on { background: linear-gradient(#8a4a14, #4a2208); border-color: #c8701e; color: #ffe0a0; }

/* панель здания */
.c-side { top: 14px; max-height: calc(100% - 200px); width: 340px; }
.pl-head img { width: 72px; height: 72px; object-fit: contain; }
.pl-lvl { display: flex; align-items: center; gap: 2px; }
.pl-state { margin-left: 10px; font: 700 11.5px var(--body); letter-spacing: .02em; padding: 1px 8px; border-radius: 9px; border: 1px solid; }
.pl-state.ok { color: #9ad07a; border-color: #4a6a32; }
.pl-state.warn { color: #f0b050; border-color: #6a4a1a; }
.pl-state.bad { color: #ff7a5e; border-color: #7a3020; }
.pl-stat { display: flex; gap: 8px; margin: 8px 0; }
.ps { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; background: rgba(0, 0, 0, .3); border: 1px solid #3a2816; border-radius: 3px; }
.ps b { font: 700 20px var(--head); color: #f2dfbc; }
.ps small { font-size: 11px; color: var(--ink2); }
.ps .ri { width: 18px; height: 18px; } .ps .coin { width: 15px; height: 15px; }
.pl-line .sbar { margin-top: 4px; }
.pl-gain { font-size: 13px; color: #c8e8a0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pl-gain b { color: #e0ffc0; }
.pl-up-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; }
.pbtn.wide { width: 100%; margin-top: 8px; padding: 7px; font-size: 15px; }
.pl-skin { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border: 1px dashed #4a3420; border-radius: 4px; }
.pl-skin img { width: 60px; height: 60px; object-fit: contain; background: radial-gradient(circle at 50% 62%, #2c2a36, #0b0a10 72%); border-radius: 3px; }
.pl-skin .muted { font-size: 12px; color: var(--ink2); margin: 2px 0 6px; }

/* справка */
.c-helpbox { position: absolute; inset: 0; display: none; place-items: center; z-index: 25; background: rgba(3, 4, 7, .45); }
.c-helpbox.show { display: grid; }
.hb-box { width: min(520px, 92vw); padding: 16px 20px; border-color: #7a5028; }
.hb-head { display: flex; align-items: center; margin-bottom: 10px; }
.hb-head b { font: 700 24px var(--head); color: #f2dfbc; }
.hb-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; align-items: center; }
.hb-grid span:nth-child(odd) { text-align: right; white-space: nowrap; }
.hb-grid kbd { font-size: 11.5px; }
.hb-tip { font: italic 15px/1.35 var(--head); color: var(--ink2); margin: 12px 0; padding-top: 10px; border-top: 1px solid #3a2816; }

@media (max-width: 1450px) {
  .qb .ql small { display: none; }
  .qb { padding: 5px 12px 5px 6px; }
  .qi { width: 28px; height: 28px; font-size: 16px; }
  .c-side { width: 310px; }
}
@media (max-width: 1250px) {
  .c-map { display: none; }
  .c-side { top: 66px; }
  .c-build { max-width: calc(100vw - 28px); min-width: 0; }
  .c-left { width: 230px; }
}
@media (max-width: 900px) {
  .c-left { top: 70px; }
  .c-advice { display: none; }
  .cc-name { display: none; }
  .c-side { top: auto; bottom: 200px; max-height: 45%; }
  .qb .ql small { display: none; }
}
a.btn { text-decoration: none; display: inline-block; }