:root{
  --bg:#15171c; --panel:#1c1f26; --panel-2:#232732; --line:#2e3441;
  --text:#e4e7ee; --dim:#8b93a5; --accent:#ffca28;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:14px/1.45 system-ui,"Segoe UI",Roboto,sans-serif}
#app{display:flex;height:100%}

#sidebar{width:290px;flex:0 0 290px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
#sidebar header{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
#sidebar h1{margin:0;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
#sidebar .sub{margin:2px 0 0;color:var(--dim);font-size:12px}

.searchrow,.bulkrow,.maprow{padding:10px 12px 0;display:flex;gap:8px}

/* переключатель карт: у игры их две, и у второй (Мировое Древо) свои
   тайлы и границы. Кнопка показывает, сколько меток на карте */
.maprow button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 8px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--dim);font-size:12.5px;cursor:pointer}
.maprow button:hover{color:var(--text);border-color:#3d4658}
.maprow button.on{color:var(--text);border-color:var(--accent);background:#1b2330}
.maprow button b{font-weight:600;font-size:11px;color:var(--dim);
  font-family:ui-monospace,monospace}
.maprow button.on b{color:var(--accent)}
#search{flex:1;padding:7px 10px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:13px;min-width:0}
#search:focus{outline:none;border-color:var(--accent)}
.bulkrow button{flex:1;padding:6px 8px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--dim);font-size:12px;cursor:pointer}
.bulkrow button:hover{color:var(--text);border-color:#3d4658}

#layers{flex:1;overflow-y:auto;padding:10px 6px 10px 12px;margin-top:8px}
.group{margin-bottom:14px}
.group > h2{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:600}
.layer{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:6px;cursor:pointer;
  user-select:none}
.layer:hover{background:var(--panel-2)}
.layer input{accent-color:var(--accent);cursor:pointer;margin:0}
.layer .glyph{width:19px;height:19px;flex:0 0 19px;border-radius:5px;display:grid;place-items:center;
  font-size:11px;color:#12141a;font-weight:700}
.layer .name{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer .n{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.layer.empty{opacity:.42}

#sidebar footer{padding:9px 14px;border-top:1px solid var(--line);color:var(--dim);font-size:11px}
#counts{color:var(--text);font-size:12px}
.hint{margin-top:3px}

#mapwrap{position:relative;flex:1;min-width:0}
#map{position:absolute;inset:0;background:#0e1014}
.leaflet-container{background:#0e1014;font-family:inherit}

#readout{position:absolute;right:10px;bottom:10px;z-index:500;background:rgba(20,22,28,.86);
  border:1px solid var(--line);border-radius:6px;padding:5px 10px;font:12px/1.3 ui-monospace,monospace;
  color:var(--text);pointer-events:none}
#banner{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:500;
  background:rgba(255,202,40,.13);border:1px solid rgba(255,202,40,.45);color:#ffd766;
  border-radius:6px;padding:6px 13px;font-size:12px;max-width:min(560px,80%)}

.pin{position:relative;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(0,0,0,.55);
  font-size:11px;font-weight:700;color:#12141a;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pin.dim{opacity:.25}
.pin:hover{filter:brightness(1.18)}

/* портрет вместо кружка у одиночных людей */
.pinface{border-radius:50%;border:2px solid #3d4658;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#333a49,#1a1d25);
  box-shadow:0 1px 5px rgba(0,0,0,.65)}
.pinface img{width:100%;height:100%;object-fit:cover;display:block}
.pinface.dim{opacity:.25}
.pinface:hover{transform:scale(1.12);transition:transform .1s}

/* кнопка «в справочник» в попапе метки */
.popup-card{display:inline-block;margin-top:7px;padding:4px 14px;border-radius:6px;
  background:var(--accent);color:#12141a;font-size:12px;font-weight:600;
  text-decoration:none;line-height:1.4;transition:filter .12s}
.popup-card:hover{filter:brightness(1.12);text-decoration:none}
.popup-card:active{filter:brightness(.94)}

/* Подсказка по наведению: название и уровень. Оформлена как карточка метки,
   чтобы наведение и клик читались одним языком. */
.leaflet-tooltip{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:4px 8px;font:13px/1.35 inherit;box-shadow:0 2px 10px rgba(0,0,0,.55);
  white-space:nowrap}
.leaflet-tooltip-top:before{border-top-color:var(--line)}
.tip-name{font-weight:600}
.tip-lv{color:var(--dim);font-family:ui-monospace,monospace;font-size:11.5px;margin-left:7px}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel-2);color:var(--text);
  border:1px solid var(--line)}
.leaflet-popup-content{margin:9px 12px;font-size:13px}
.leaflet-popup-content b{font-size:13px}
.popup-meta{color:var(--dim);font-size:11.5px;margin-top:3px}
.popup-stats{font-size:12px;margin-top:4px}
.popup-roster{margin:3px 0 0;padding:0;list-style:none;max-height:180px;overflow-y:auto}
.popup-roster li{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  padding:1px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.popup-roster li:last-child{border-bottom:0}
.popup-count{color:var(--dim);font-family:ui-monospace,monospace}
.popup-coords{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--accent);margin-top:4px}
.leaflet-container a.leaflet-popup-close-button{color:var(--dim)}

@media (max-width:760px){
  #app{flex-direction:column}
  #sidebar{width:100%;flex:0 0 46%;border-right:0;border-bottom:1px solid var(--line)}
}

/* Переходы между картой и справочником */
.pages{display:flex;gap:4px;margin-top:9px}
.pages a{padding:4px 10px;border-radius:6px;color:var(--dim);text-decoration:none;font-size:12.5px}
.pages a:hover{color:var(--text);background:var(--panel-2)}
.pages a.on{color:#12141a;background:var(--accent);font-weight:600}

/* Значки телепортов, башен и подземелий — родные текстуры игры.
   Тёмная подложка под ними нужна: значки почти белые и на снегу
   растворялись бы совсем. */
/* Телепорты, башни и подземелья — голым значком, без кружка. Кружками
   на карте обозначены люди, и пока значок сидел в такой же оправе, всё
   сливалось в одну россыпь кружков. Решение пользователя, и в игре
   сделано так же.

   Читаемость держит не подложка, а тень: значки почти белые, и на снегу
   без неё они бы пропали. */
.pinmap{display:flex;align-items:center;justify-content:center}
/* Размер — в пикселях, не в процентах: у flex/grid-контейнера процент
   резолвится от колонки, а она меряется по содержимому (текстура
   100×100), и `76%` давало 76 пикселей вместо двадцати — значок вылезал
   вправо-вниз и на отдалении выглядел уехавшим в сторону. */
.pinmap img{width:26px;height:26px;object-fit:contain;display:block;    /* размер перекрывается в app.js: у каждой категории свой */
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.95)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
  transition:transform .1s}
.pinmap:hover img{transform:scale(1.15)}