/* Велюнар — стили интерактивной карты.
   Бумажный (картографический) стиль: пергамент, сепия, чернильные линии.
   Шрифты: Forum (заголовки, картографика) + Cormorant Garamond (текст). */

/* ---------- ШРИФТЫ (локальные woff2, кириллица) ---------- */

@font-face {
  font-family: "Forum"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/forum-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Forum"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/forum-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-latext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/cormorant-cyr.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #2b1d12;              /* стол: тёмное дерево */
  --panel: #efe3c6;           /* пергамент */
  --panel2: #e5d7b5;          /* пергамент потемнее */
  --line: #8a7350;            /* чернильная линия */
  --text: #3a2c1a;            /* тёмные чернила */
  --muted: #5c4d33;           /* выцветшие чернила (затемнены для контраста) */
  --gold: #8a5a12;            /* старое золото (акцент) */
  --oxblood: #8a3324;         /* сургуч */
  --pink: #b04f9b;            /* тайна Узлов */
  --paper-edge: #d9c9a4;
  --su: 1;                    /* контр-масштаб подписей карты (задаёт map.js) */
  --font-title: "Forum", Georgia, "Palatino Linotype", serif;
  --font-body: "Cormorant Garamond", Georgia, "Palatino Linotype", serif;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  overflow: hidden;
}

/* лёгкая текстура дерева за столом */
body {
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, rgba(255,255,255,.02) 2px 7px),
    linear-gradient(180deg, #332213, #241710);
}

#app { display: flex; height: 100vh; }

/* ---------- ЛЕВАЯ ПАНЕЛЬ (лист пергамента) ---------- */

#side {
  width: 370px;
  min-width: 370px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(140,110,60,.18), transparent 55%),
    repeating-linear-gradient(0deg, rgba(120,90,50,.05) 0 3px, transparent 3px 6px),
    var(--panel);
  border-right: 3px double var(--line);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 18px rgba(0,0,0,.45);
  position: relative;
  z-index: 2;
}

#brand {
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(138,51,36,.10), transparent);
}
#brand h1 {
  font-size: 23px;
  letter-spacing: 6px;
  color: var(--oxblood);
  font-family: var(--font-title);
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
#brand h1::after {
  content: "❦";
  margin-left: 10px;
  color: var(--gold);
  letter-spacing: 0;
  font-size: 15px;
}
#brand .sub { font-size: 13px; color: var(--muted); margin-top: 3px; font-style: italic; }
#brand .stat { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: .4px; }
#brand .stat b { color: var(--text); }

#search-wrap { padding: 10px 12px; border-bottom: 1px solid var(--line); }
#search {
  width: 100%;
  padding: 8px 10px;
  background: #f7efd9;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  box-shadow: inset 0 1px 3px rgba(90,70,40,.3);
}
#search:focus { border-color: var(--oxblood); box-shadow: inset 0 1px 3px rgba(90,70,40,.3), 0 0 0 2px rgba(138,51,36,.2); }
#search::placeholder { color: #a3906c; font-style: italic; }

#tabs { display: flex; border-bottom: 1px solid var(--line); background: rgba(138,115,80,.12); }
.tab {
  flex: 1;
  padding: 9px 2px;
  text-align: center;
  font-size: 12.5px;
  font-family: var(--font-title);
  letter-spacing: .8px;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  user-select: none;
}
.tab:hover { color: var(--text); background: rgba(138,115,80,.18); }
.tab.active {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
  background: var(--panel);
  font-weight: bold;
}

#filters {
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.filter { display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--muted); }
.filter input { accent-color: var(--oxblood); }

#list { flex: 1; overflow-y: auto; padding: 6px 0; }
#detail { flex: 1; overflow-y: auto; padding: 12px 14px 30px; }

.item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.item:hover { background: var(--panel2); border-left-color: var(--oxblood); }
.item .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; box-shadow: 0 0 0 1px rgba(58,44,26,.45); }
.item .itxt { display: flex; flex-direction: column; }
.item b { font-size: 14.5px; font-weight: 600; font-family: var(--font-title); letter-spacing: .3px; }
.item small { font-size: 12.5px; color: var(--muted); margin-top: 1px; font-style: italic; }

.empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

/* ---------- ДЕТАЛИ ---------- */

.back {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  margin-bottom: 12px;
}
.back:hover { border-color: var(--oxblood); color: var(--oxblood); }

.d-head { border-left: 4px solid var(--oxblood); padding-left: 10px; margin-bottom: 10px; }
.d-head h2 { font-family: var(--font-title); font-weight: 400; font-size: 21px; color: var(--oxblood); letter-spacing: .8px; }
.d-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--panel2);
  color: #241a0e;
  font-weight: 600;
  border: 1px solid rgba(58,44,26,.35);
}
.d-desc { font-size: 14.5px; line-height: 1.6; color: #4a3a24; margin: 8px 0 14px; }

/* слухи локации */
.d-rumors {
  background: rgba(138, 90, 18, .07);
  border: 1px dashed rgba(138, 90, 18, .45);
  border-radius: 6px;
  padding: 8px 11px 9px;
  margin: 0 0 14px;
}
.d-rumors h4 {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 5px;
}
.d-rumor {
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a3a24;
  font-style: italic;
  margin: 5px 0 0;
}
.d-rumor:first-of-type { margin-top: 0; }
#detail h3 {
  font-size: 11.5px;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--muted);
  margin: 14px 0 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.plan-btn {
  display: block;
  width: 100%;
  margin: 4px 0 14px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #a4402e, #8a3324);
  border: 1px solid #6d281c;
  color: #f7ecd4;
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: .6px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(60,26,16,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.plan-btn:hover { background: linear-gradient(180deg, #b54a36, #983a29); }
.plan-btn:active { transform: translateY(1px); }
.d-list { list-style: none; }
.d-list li {
  padding: 7px 9px;
  background: var(--panel2);
  border-radius: 3px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid transparent;
}
.d-list li:hover { border-color: var(--oxblood); background: #efe1bd; }
.d-list li b { font-size: 14.5px; font-weight: 600; display: block; font-family: var(--font-title); letter-spacing: .3px; }
.d-list li small { font-size: 12.5px; color: var(--muted); font-style: italic; }
.d-file {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
  background: var(--panel2);
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px dashed var(--line);
}
.d-file code { color: var(--oxblood); word-break: break-all; font-family: Consolas, monospace; }

/* ---------- КАРТА ---------- */

#map-wrap { flex: 1; position: relative; display: flex; flex-direction: column; }

#map-bar {
  height: 42px;
  background:
    linear-gradient(180deg, #f3e8cd, #e6d8b6);
  border-bottom: 3px double var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
}
#map-bar .title { color: var(--oxblood); font-family: var(--font-title); letter-spacing: 4px; font-size: 14px; flex: none; }
#map-bar .tips { color: var(--muted); font-style: italic; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1250px) { #map-bar .tips { display: none; } }
#map-bar .tips { color: var(--muted); font-style: italic; font-size: 12.5px; }
#map-bar .spacer { flex: 1; }
.zbtn {
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
  width: 28px; height: 26px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.zbtn:hover { border-color: var(--oxblood); color: var(--oxblood); background: #efe1bd; }
#zoom-label { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }

/* ползунок масштаба */
#zoom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #cdbd95, #8a7350);
  border: 1px solid var(--line);
  outline: none;
  cursor: pointer;
}
#zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f3e8cd, #d8c69b);
  border: 1px solid #6b5638;
  box-shadow: 0 1px 4px rgba(40,28,14,.5), inset 0 1px 0 rgba(255,255,255,.7);
}
#zoom-range::-moz-range-thumb {
  width: 16px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f3e8cd, #d8c69b);
  border: 1px solid #6b5638;
}

#map-area { flex: 1; position: relative; overflow: hidden; background: #a7bfc9; }

#world { width: 100%; height: 100%; display: block; cursor: grab; }
#world.grabbing { cursor: grabbing; }

/* ===== Море и суша: старая карта, но с чётким рельефом ===== */
.sea { fill: url(#sea-grad); }
.sea-waves { opacity: .55; pointer-events: none; }
.wave { fill: none; stroke: #86a4b1; stroke-width: 1; opacity: .6; }
.grat { opacity: .5; pointer-events: none; }
.grat-line { fill: none; stroke: #7a6242; stroke-width: .6; opacity: .16; }
.sea-line { fill: none; stroke: #9db1ab; stroke-width: 1; opacity: .8; }

.land { fill: url(#land-grad); stroke: #6f583a; stroke-width: 2.2; }
.land-halo { fill: none; stroke: #ecd9a9; stroke-width: 10; opacity: .7; }
.coast-sand { fill: none; stroke: #eed9a5; stroke-width: 8; stroke-linejoin: round; }
.surf { fill: none; stroke: #fdfdf8; stroke-width: 1.4; stroke-dasharray: 9 7;
        stroke-linecap: round; opacity: .85; }
.surf-ring { fill: none; stroke: #fdfdf8; stroke-width: 1.4;
             stroke-dasharray: 7 6; opacity: .8; }

/* регионы: заливка + границы пунктиром */
.region { stroke-width: 1.4; stroke-dasharray: 6 5; opacity: .62; }
.r-wasteland { fill: #d5bed0; stroke: #8a5f7a; }
.r-forest    { fill: #c2d6ab; stroke: #4f7a4a; }
.r-steps     { fill: #e6dcaa; stroke: #94874f; }
.r-jungle    { fill: #b3d0b4; stroke: #3f7455; }
.r-swamp     { fill: #bccbb2; stroke: #5d7a52; }
.r-nord      { fill: #dee2d0; stroke: #7f8a74; }
.r-mountains { fill: #d8d3c2; stroke: #7d7b6e; opacity: .5; }

/* горы: две грани + снежные шапки */
.mtn { pointer-events: none; }
.peak { stroke: #6f6858; stroke-width: .9; stroke-linejoin: round; }
.mtn-l { fill: #9d9482; }        /* теневая грань */
.mtn-r { fill: #c2baa6; }        /* освещённая грань */
.mtn-snow { fill: #f4f2ea; stroke: #b9b4a6; stroke-width: .7; }

/* леса */
.forest-patch { fill: #a9cb92; opacity: .5; stroke: #7ba06f; stroke-width: 1;
                stroke-dasharray: 5 5; }
.forest-patch.jungle { fill: #9cc4a0; }
.trees-p use { pointer-events: none; }
.woods use { pointer-events: none; }

/* болота */
.swamp-pool { fill: #a7c1bd; stroke: #6f918a; stroke-width: 1; opacity: .85; }
.reeds { fill: none; stroke: #5f7f5f; stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.swamp use { pointer-events: none; }

/* степь, пустошь */
.dune { fill: none; stroke: #9a8b5f; stroke-width: 1.4; opacity: .75;
        stroke-linecap: round; }
.waste .dune { stroke: #8a6a92; }
.waste use, .steppe use { pointer-events: none; }

/* реки и дороги: обочка + линия */
.river-case { fill: none; stroke: #bfd6dd; stroke-width: 5.4; stroke-linecap: round; }
.river { fill: none; stroke: #5b8fb4; stroke-width: 2.4; stroke-linecap: round; opacity: .95; }
.road-case { fill: none; stroke: #d8c696; stroke-width: 5; stroke-linecap: round;
             stroke-linejoin: round; }
.road { fill: none; stroke: #7a5f36; stroke-width: 1.8; stroke-dasharray: 7 6;
        stroke-linecap: round; opacity: 1; }
.road.ferry { stroke: #4d7f9c; stroke-width: 1.6; stroke-dasharray: 2.5 7;
              opacity: .95; }

/* морской декор прячется, когда включаются планы поселений */
.deco { transition: opacity .35s ease; }
#world.z-plan .deco { opacity: 0; pointer-events: none; }
.deco use { pointer-events: none; }

.region-label {
  fill: #6a5736;
  font-family: var(--font-title);
  font-size: calc(15px * var(--su));
  letter-spacing: calc(4px * var(--su));
  text-transform: uppercase;
  opacity: .85;
  pointer-events: none;
}
.sea-label {
  fill: #40606f;
  font-family: var(--font-title);
  font-size: calc(15px * var(--su));
  letter-spacing: calc(5px * var(--su));
  font-style: italic;
  opacity: .95;
  pointer-events: none;
}

/* Декоративная рамка и роза ветров (не масштабируются) */
#frame { pointer-events: none; }
.fr-outer { fill: none; stroke: #5a4630; stroke-width: 2.4; opacity: .8; }
.fr-inner { fill: none; stroke: #5a4630; stroke-width: .8; opacity: .55; }
.fr-line { fill: none; stroke: #6b5638; stroke-width: 1.6; }
.fr-line2 { fill: none; stroke: #6b5638; stroke-width: .8; opacity: .7; }
.fr-dot { fill: #8a5a12; opacity: .85; }
.cmp-ring { fill: rgba(247,239,217,.85); stroke: #5a4630; stroke-width: 1.4; }
.cmp-ring2 { fill: none; stroke: #5a4630; stroke-width: .7; opacity: .7; }
.cmp-star { fill: #6b5638; }
.cmp-star2 { fill: #b9a377; opacity: .9; }
.cmp-dark { fill: #8a3324; }
.cmp-n { font-family: var(--font-title); font-size: 13px; fill: #5a4630; text-anchor: middle; letter-spacing: 1px; }

/* Пины */
.pin { cursor: pointer; outline: none; }
.pin-halo { opacity: .3; }
.pin-dot { stroke: #3a2c1a; stroke-width: 2; }
.pin-label {
  fill: #3a2c1a;
  font-family: var(--font-title);
  font-size: calc(11.5px * var(--su));
  letter-spacing: calc(.6px * var(--su));
  paint-order: stroke;
  stroke: #efe4c9;
  stroke-width: calc(3px * var(--su));
  stroke-linejoin: round;
  pointer-events: none;
}
.pin:hover .pin-halo { opacity: .6; }
.pin:hover .pin-label { fill: var(--oxblood); }
.pin.selected .pin-dot { stroke: var(--oxblood); stroke-width: 3; }
.pin.selected .pin-label { fill: var(--oxblood); font-weight: 700; }

/* На дальнем зуме подписи мелких локаций мешают — оставляем города и узлы */
.pin-label { transition: opacity .25s ease; }
#world.z-far .pin-деревня .pin-label,
#world.z-far .pin-руины .pin-label,
#world.z-far .pin-море .pin-label { opacity: 0; }
#world.z-far .pin-деревня .pin-dot,
#world.z-far .pin-руины .pin-dot,
#world.z-far .pin-море .pin-dot { opacity: .45; }
/* на дальнем зуме подписи компактнее, а скрытую расклейкой подпись
   можно показать, наведя курсор на пин */
#world.z-far .pin-label {
  font-size: calc(9.5px * var(--su));
  letter-spacing: calc(.2px * var(--su));
}
.pin:hover .pin-label { opacity: 1 !important; }

/* При глубоком зуме пины-места уступают планам поселений:
   виден план одного поселения (выбранного или ближайшего к центру экрана),
   его пин скрывается, остальные пины остаются для выбора */
.pin-place { transition: opacity .35s ease; }
#world.z-plan .pin-place.focused,
#world.z-plan .pin-place.selected { opacity: 0; pointer-events: none; }

.uzel-ring {
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: .9;
  animation: spin 14s linear infinite;
  /* иначе SVG крутит кольцо вокруг центра карты, а не вокруг своей точки */
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pin-узел .pin-label { fill: var(--pink); }

/* ---------- ПЛАНЫ ПОСЕЛЕНИЙ ---------- */

.plan {
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
/* При глубоком зуме виден план только одного поселения —
   выбранного либо ближайшего к центру экрана (.focused) */
#world.z-plan .plan.focused,
#world.z-plan .plan.selected {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility 0s linear 0s;
}

/* подложка плана */
.pl-ground { fill: #f2e7c7; stroke: #8a7350; stroke-width: 1.4; }
.pl-edge { fill: none; stroke: #b9a377; stroke-width: .7; stroke-dasharray: 3 3.5; }
.pl-ruin-ground { fill: #eae0c5; stroke-dasharray: 5 4; opacity: .95; }

/* вода в планах */
.pl-water { fill: #a9c8d3; stroke: #6f8f9c; stroke-width: 1.1; }
.pl-ripple { fill: none; stroke: #8fb0bc; stroke-width: .8; stroke-dasharray: 3 3; }

/* улицы: светлая обочка + полотно */
.pl-street { fill: none; stroke: #c9ad73; stroke-width: 3.6; stroke-linecap: round;
             stroke-linejoin: round; }
.pl-street-in { fill: none; stroke: #ecdfb8; stroke-width: 2.2; stroke-linecap: round;
                stroke-linejoin: round; }
.pl-road-out { fill: none; stroke: #d8c696; stroke-width: 3; stroke-linecap: round;
               stroke-dasharray: 6 5; }

/* стена: бруствер + зубцы */
.pl-wall { fill: none; stroke: #6b5638; stroke-width: 3; stroke-linecap: round; }
.pl-crenel { fill: none; stroke: #a08b5f; stroke-width: 1.5; stroke-dasharray: 1.7 2.3; }
.pl-broken { stroke-dasharray: 7 5; opacity: .75; }

/* площади и покрытие */
.pl-square { fill: #ecdfba; stroke: #8a7350; stroke-width: 1; }
.pl-cobbles { fill: url(#cobble); opacity: .55; }

/* тени и пиктограммы построек */
.pl-shadow { fill: #4a3a24; opacity: .2; }
.pl-glyph { pointer-events: none; }

/* сады, поля, огороды */
.pl-garden { fill: #c9d8a2; stroke: #87a065; stroke-width: .7; }
.pl-garden-line { fill: none; stroke: #87a065; stroke-width: .6; opacity: .85; }
.pl-field { fill: #e6daa6; stroke: #a8975a; stroke-width: .8; }
.pl-furrow { fill: none; stroke: #bda96d; stroke-width: .7; opacity: .9; }

/* гавань, изгороди, ларьки */
.pl-dock { fill: #c8b287; stroke: #6b5638; stroke-width: .9; }
.pl-boat { fill: #f4ecd6; stroke: #5a4630; stroke-width: .9; }
.pl-fence { fill: none; stroke: #7a6242; stroke-width: 1; stroke-dasharray: 2 1.7;
            stroke-linecap: round; }
.pl-stall-base { fill: #d9c69a; stroke: #7a6242; stroke-width: .7; }
.pl-stall-awn1 { fill: #c86a4a; stroke: #7a4432; stroke-width: .5; }
.pl-stall-awn2 { fill: #f0e3c2; stroke: #7a6242; stroke-width: .5; }
.pl-pond { fill: #b3cfda; stroke: #6f8f9c; stroke-width: 1; }
.pl-rubble { fill: #d9cca9; stroke: #8a7350; stroke-width: .8; }
.pl-column { fill: #ece3ca; stroke: #8a7350; stroke-width: .9; }
.pl-dead { fill: #bcb5a3; stroke: #8f8877; stroke-width: .8; }

/* подписи планов */
.pl-name {
  font-family: var(--font-title);
  font-size: calc(15px * var(--su));
  letter-spacing: calc(2.2px * var(--su));
  fill: #4a3a24;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #f0e4c2;
  stroke-width: calc(4.5px * var(--su));
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* на глубоком зуме подсвечиваем только выбранный/ближайший план */
#world.z-poi .plan:not(.selected):not(.focused):not(:hover) .pl-name { opacity: 0; }
.poi-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(11.5px * var(--su));
  fill: #4a3a24;
  text-anchor: middle;
  opacity: 0;
  transition: opacity .3s ease;
  paint-order: stroke;
  stroke: #f2e7c9;
  stroke-width: calc(3.5px * var(--su));
  stroke-linejoin: round;
  pointer-events: none;
}
#world.z-poi .poi-label { opacity: 1; }
/* соседние поселения на глубоком зуме не мешают: подписи зданий
   только у выбранного плана или под курсором */
#world.z-poi .plan:not(.selected):not(.focused):not(:hover) .poi-label { opacity: 0; }
/* под курсором показываем всё, что расклейка спрятала */
.plan:hover .poi-label,
.plan:hover .pl-name { opacity: 1 !important; }

/* подсветка плана */
.plan > .pl-ground { transition: stroke .15s ease; }
.plan:hover > .pl-ground { stroke: var(--oxblood); }
.plan.selected > .pl-ground,
.plan.focused > .pl-ground { stroke: var(--oxblood); stroke-width: 1.8; }
.plan.selected > .pl-name,
.plan.focused > .pl-name { fill: var(--oxblood); }

/* лёгкое появление при первом показе */
@keyframes plan-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- РАЙОНЫ КРУПНЫХ ГОРОДОВ ---------- */
.pl-district  { fill: #e8d4a8; stroke: #b09a68; stroke-width: .9;
                stroke-dasharray: 3.5 2.5; opacity: .8; }
.pl-district2 { fill: #e2cfa4; stroke: #b09a68; stroke-width: .9;
                stroke-dasharray: 3.5 2.5; opacity: .8; }
.district-label {
  font-family: var(--font-title);
  font-size: calc(8.5px * var(--su));
  letter-spacing: calc(1.4px * var(--su));
  fill: #7a6339;
  text-anchor: middle;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s ease;
  paint-order: stroke;
  stroke: #f2e7c9;
  stroke-width: calc(2.6px * var(--su));
  stroke-linejoin: round;
  pointer-events: none;
}
#world.z-poi .plan.selected .district-label,
#world.z-poi .plan.focused .district-label,
#world.z-poi .plan:hover .district-label { opacity: .95; }
.plan:hover .district-label { opacity: .95 !important; }

/* ---------- ПОЛИТИЧЕСКИЙ РЕЖИМ ---------- */
#politics { pointer-events: none; }
#politics .pol-terr {
  stroke: none;
  opacity: 0;
  transition: opacity .5s ease;
}
#politics .pol-edge {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 10 6;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .5s ease;
}
#politics .pol-name {
  font-family: var(--font-title);
  font-size: calc(14px * var(--su));
  letter-spacing: calc(2.6px * var(--su));
  text-anchor: middle;
  opacity: 0;
  transition: opacity .5s ease;
  paint-order: stroke;
  stroke: #f6ecd0;
  stroke-width: calc(5px * var(--su));
  stroke-linejoin: round;
  pointer-events: none;
}
#politics .pol-flag {
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
#world.mode-pol #politics .pol-terr,
#world.mode-pol #politics .pol-edge,
#world.mode-pol #politics .pol-name { opacity: 1; }
/* спорные зоны: градиент между цветами двух соседних фракций */
#politics .pol-dispute {
  fill-opacity: .95;
  stroke-width: 1.4;
  stroke-dasharray: 8 5;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .5s ease;
}
#world.mode-pol #politics .pol-dispute { opacity: 1; transition-delay: .1s; }
/* гербы скрываются, когда видны детальные планы поселений */
#world.mode-pol #politics .pol-flag { opacity: 1; transition-delay: .15s; }
#world.mode-pol.z-plan #politics .pol-flag { opacity: 0; transition-delay: 0s; }

/* гербовый щит: поле + эмблема */
.pol-flag .pl-shield { stroke: #4a3a24; stroke-width: 1.4; }
.pol-flag .pl-emblem { pointer-events: none; }
.pol-flag .pl-pole  { stroke: #6b5638; stroke-width: 2.2; stroke-linecap: round; }

/* в политическом режиме бумажный декор приглушается,
   но остаётся ярче прежнего — сами территории почти непрозрачны */
#world.mode-pol .region,
#world.mode-pol .region-label { opacity: .18; }
#world.mode-pol .region-label { opacity: .22; }
#world.mode-pol .woods,
#world.mode-pol .swamp,
#world.mode-pol .steppe,
#world.mode-pol .waste,
#world.mode-pol .mtn { opacity: .5; transition: opacity .5s ease; }
#world.mode-pol .roads { opacity: .7; }
#world.mode-pol .pl-ground { fill: #f4ecd4; }
#world.mode-pol .sea-label,
#world.mode-pol .grat { opacity: .45; }
#world.mode-pol .plan .district-label { opacity: 0 !important; }

/* кнопка режима */
#mode-btn, #role-btn { width: auto; padding: 0 8px; white-space: nowrap; }
#mode-btn.active {
  border-color: var(--oxblood);
  color: #fff;
  background: var(--oxblood);
}
#mode-btn.active:hover { background: #a03d2c; color: #fff; }

/* кнопка роли: активен режим игрока */
#role-btn.active {
  border-color: #2f6f4f;
  color: #fff;
  background: #2f6f4f;
}
#role-btn.active:hover { background: #255a41; color: #fff; }

/* ---------- РЕЖИМ ИГРОКА ---------- */
/* только вкладка «Локации», без фракций в легенде, без бейджей на пинах */
body.mode-player .tab:not([data-tab="locations"]) { display: none; }
body.mode-player .leg-faction { display: none; }
body.mode-player .pin-badge { display: none; }

/* ---------- БЕЙДЖИ-СЧЁТЧИКИ (мастер) ---------- */
.pin-badge circle { stroke: #3a2c1a; stroke-width: 1.5px; }
.pin-badge text {
  font-size: 9px;
  font-weight: 700;
  fill: #fff;
  font-family: inherit;
  pointer-events: none;
}
.pin-badge.b-npc circle { fill: #7a5c33; }
.pin-badge.b-q circle { fill: #b03a72; }
.pin:hover .pin-badge { opacity: .85; }

/* в политическом режиме приближение отключено — блокируем органы зума */
#zoom-in:disabled, #zoom-out:disabled, #zoom-range:disabled {
  opacity: .35;
  cursor: default;
  filter: grayscale(.8);
}

/* текстуры: борозды и мощение */
.furrow-line { fill: none; stroke: #bda96d; stroke-width: .8; opacity: .9; }
.cobble-line { fill: none; stroke: #b7a67e; stroke-width: .8; }

/* легенда: кредиты ассетов */
.credits {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  width: 100%;
}

/* ---------- ЛЕГЕНДА ---------- */

#legend-box {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(239, 227, 198, .95);
  border: 3px double var(--line);
  border-radius: 3px;
  padding: 10px 13px;
  font-size: 11px;
  max-width: 250px;
  box-shadow: 0 3px 12px rgba(40,28,14,.4);
}
#legend-box h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--oxblood);
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}
#legend-box h4:hover { color: var(--gold); }
#legend-box.collapsed #legend { display: none; }
#legend-box.collapsed h4 { margin-bottom: 0; }
#legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.leg-item { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.leg-sq { width: 9px; height: 9px; border-radius: 2px; display: inline-block; box-shadow: 0 0 0 1px rgba(58,44,26,.4); }

#hint {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(247, 239, 217, .95);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 11px;
  font-size: 12px;
  color: var(--muted);
  max-width: 46%;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(40,28,14,.35);
}
#hint b { color: var(--text); font-family: var(--font-title); font-weight: 400; }

/* линейка масштаба */
#scalebar {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: #4a3a24;
  font-size: 12px;
  pointer-events: none;
}
#scale-fill {
  height: 8px;
  border: 1.5px solid #4a3a24;
  border-top: none;
  background:
    linear-gradient(90deg, #4a3a24 0 25%, transparent 25% 50%, #4a3a24 50% 75%, transparent 75%);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  min-width: 40px;
  transition: width .15s ease;
}
#scale-text {
  display: block;
  margin-top: 3px;
  font-family: var(--font-title);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(247,239,217,.8);
}

/* Скроллбары — под бумагу */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--panel2); }
::-webkit-scrollbar-thumb { background: #b3a077; border-radius: 5px; border: 1px solid var(--line); }
::-webkit-scrollbar-thumb:hover { background: #9c8a61; }

/* Адаптив */
@media (max-width: 1100px) {
  #side { width: 300px; min-width: 300px; }
  #brand h1 { font-size: 18px; letter-spacing: 2px; }
}
@media (max-width: 820px) {
  #legend-box { display: none; }
  #hint { max-width: 70%; }
}