html, body.page-map {
  height: 100%;
  overflow: hidden;
}
body.page-map {
  display: flex;
  flex-direction: column;
}


.page-map .site-header {
  position: static;
  flex-shrink: 0;
}

.map-viewport {
  position: relative;
  flex-grow: 1;
  background: var(--surface-2);
}

.page-map .site-footer {
  display: none;
}

/* === СТИЛИ ЭЛЕМЕНТОВ КАРТЫ === */

/* Панель управления (выбор локации, зум) */
.map-controls-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  
  display: flex;
  flex-direction: column;
  gap: 12px;
  
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
}
.ctrl { display: grid; gap: 6px; }
.ctrl .lbl { font-size: 12px; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }
.ctrl-input {
  appearance: none; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); min-width: 220px; cursor: pointer; transition: border-color .15s ease;
}
.ctrl-input:hover { border-color: var(--accent); }
.zoom-group { display: inline-flex; align-items: center; gap: 8px; }
.zoom-value { min-width: 52px; text-align: center; padding: 8px 10px; border-radius: 10px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); }

/* Легенда (фильтры) */
.map-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: var(--shadow-lg);
}
.map-legend .chip{
  height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 1; border-radius: 16px; cursor: pointer; user-select: none;
}
.map-legend .chip.off { opacity: .45; filter: grayscale(.25); }
.legend-icon{ width: 16px; height: 16px; object-fit: contain; display: inline-block; }


/* Полотно карты */
.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  
  overflow: auto;
  touch-action: none;
  overscroll-behavior: contain;
  
  scrollbar-width: none;
}
.map-canvas::-webkit-scrollbar {
  display: none;
}
.map-canvas.pannable { cursor: grab; }
.map-canvas.pannable.dragging { cursor: grabbing; }

/* Рамка */
.map-frame {
  position: relative;
  width: var(--frame-w, 1372px);
  height: var(--frame-h, 2000px);
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Изображение карты */
.map-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.98) contrast(1.02);
  pointer-events: none;
}

/* Слой тайлов */
.tiles-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tiles-layer img.tile{
  position: absolute; display: block; transform-origin: top left;
  will-change: transform, width, height;
  image-rendering: auto;
  backface-visibility: hidden;
}

/* Слой меток */
.markers-layer { position: absolute; inset: 0; pointer-events: none; }

/* Метка — сброс стилей кнопки */
.marker{
  position:absolute; transform:translate(-50%,-100%); z-index:10; pointer-events:auto;
  appearance:none; -webkit-appearance:none; background:transparent; border:none; padding:0; margin:0; line-height:0;
}
.marker:focus{outline:none}
.marker:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* Пины (webp) */
.marker .pin{ display:grid; place-items:center; }
.marker .pin-img{
  display:block; object-fit:contain; background:transparent;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); pointer-events:none;
  transition: transform .12s ease-out;
}
.marker:hover .pin-img{ transform: translateY(-1px) scale(1.02); }

.marker.pin-fallback .pin-img{ display:none; }
.marker.pin-fallback .pin{
  width:22px;height:22px;border-radius:999px;background:#1a1b1f;border:2px solid var(--border);color:var(--accent);
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 0 10px rgba(255,204,102,.12);
}
.marker.pin-fallback.marker--stalker .pin{ border-color:var(--ok); color:#77e08a; background:#172118 }
.marker.pin-fallback.marker--bandit  .pin{ border-color:var(--danger); color:#ff9a9a; background:#211616 }

/* Размеры webp-иконок + масштаб */
.marker{ --pin-scale: 0.68; }
.marker--bandit  .pin-img{ width:calc(41px * var(--pin-scale)); height:calc(44px * var(--pin-scale)); }
.marker--stalker .pin-img{ width:calc(43px * var(--pin-scale)); height:calc(41px * var(--pin-scale)); }
.marker--any     .pin-img{ width:calc(44px * var(--pin-scale)); height:calc(42px * var(--pin-scale)); }

/* Поповер — инфобокс */
.marker .popover{
  position:absolute; left:50%; bottom:calc(100% + 10px); --pop-dx: 0px;
  transform: translateX(calc(-50% + var(--pop-dx)));
  width:min(560px, 96vw);
  background:var(--surface); border:1px solid var(--border); border-radius:14px; /* padding УБРАН ОТСЮДА */ box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity .16s ease, visibility .16s ease; z-index:20;
  max-width: min(560px, 96vw);
  line-height: 1.35;
  display: flex;
}
.marker .popover[data-pos="below"] { top: calc(100% + 10px); bottom: auto; }
.marker .popover[data-pos="below"]::after{
  top: auto; bottom: 100%;
  border: 8px solid transparent;
  border-bottom-color: var(--surface);
  filter: drop-shadow(0 -2px 0 var(--border));
}

.marker:focus-within .popover,
.marker.active .popover{ opacity:1; visibility:visible; }

.popover::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:100%; border:8px solid transparent; border-top-color:var(--surface); filter:drop-shadow(0 2px 0 var(--border));
}

.marker:hover,
.marker:focus-within,
.marker.active { z-index: 1000; }

.popover.compact .q-grid { grid-template-columns: 1fr; }

/* Сетка инфобокса */
.q-grid{
  display:grid; grid-template-columns: 188px 1fr; gap:14px; align-items:stretch;
  padding: 12px;
  overflow: auto;
  width: 100%;
}

/* Левая колонка */
.q-left{ display:grid; gap:8px; align-content:start; }
.q-thumb-xl{
  width:100%; height:148px; object-fit:cover; border-radius:10px; border:1px solid var(--border); background:#0f0f10;
}
.q-title-l{ color:var(--text); font-weight:800; font-size:18px; line-height:1.25; letter-spacing:.2px; }
.q-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.q-badge{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.02em; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
}
.q-badge.badge--stalker{ border-color:var(--ok); background:rgba(76,175,80,.14); color:#a3e9b2 }
.q-badge.badge--bandit{ border-color:var(--danger); background:rgba(178,34,34,.14); color:#ffb1b1 }
.q-badge.badge--any{ border-color:var(--accent); background:rgba(255,204,102,.16); color: #ffd27a }

/* Деньги/репутация */
.q-stats-inline{ display:inline-flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; }
.stat-badge{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface-2); white-space:nowrap; font-weight:800; font-size:13px; color:var(--text);
}
.stat-badge.money i{ color:var(--accent) }
.stat-badge.rep i{ color:var(--ok) }

/* Правая колонка */
.q-right{ display:flex; flex-direction: column; gap:10px; min-height: 100%; }

/* Описание */
.q-desc-box{
  border:1px solid var(--border);
  background:linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.12)), var(--surface-2);
  border-radius:10px; padding:10px;
}
.q-desc{ color:var(--text); opacity:.96; font-size:14px; line-height:1.5; }

/* Блок наград */
.rw-panel-large{ display:grid; gap:8px; }
.rw-label{
  font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text);
  display:flex; align-items:center; gap:10px;
}
.rw-label::after{ content:""; flex:1; height:1px; background:var(--border); border-radius:1px; opacity:.8; }

/* Галерея наград */
.rw-gallery{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rw-gallery.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rw-gallery.grid-2 .rw-large .lbl{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Карточка награды */
.rw-large{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding:8px 10px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface-2);
  min-width: 0;
}
.rw-large img{
  width:60px; height:60px; border-radius:8px; border:1px solid var(--border); object-fit:cover; background:#0f0f10;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 14px rgba(0,0,0,.35);
}
.rw-large .lbl{ font-size:13px; color:var(--text); white-space: normal; overflow-wrap: anywhere; line-height: 1.25; min-width: 0; }
.rw-large .qty{
  justify-self: end;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  white-space: nowrap;
}

/* Подсветки по редкости */
.rw-large.rarity-stalker img{ border-color:#2e86ff; box-shadow: inset 0 0 0 1px rgba(46,134,255,.25), 0 0 18px rgba(46,134,255,.22), 0 6px 14px rgba(0,0,0,.35); }
.rw-large.rarity-rare img{ border-color:#3bbf8a; box-shadow: inset 0 0 0 1px rgba(59,191,138,.25), 0 0 18px rgba(59,191,138,.22), 0 6px 14px rgba(0,0,0,.35); }
.rw-large.rarity-veteran img{ border-color: #BF5BAD; box-shadow: inset 0 0 0 1px rgba(191, 91, 173, .25), 0 0 18px rgba(191, 91, 173, .22), 0 6px 14px rgba(0,0,0,.35); }

/* Компактный режим */
.rw-large.compact { padding: 6px 8px; }
.rw-large.compact img { width: 42px; height: 42px; }
.rw-large.compact .lbl { font-size: 12px; }
.rw-large.compact .qty{ font-size: 11px; padding: 3px 6px; }

/* Кнопка справа */
.q-actions{ display:flex; justify-content:center; margin-top: auto; }
.q-actions .btn.inline{ padding:10px 12px; }
.q-actions .btn.btn-primary{ font-weight:800; }

/* Сервис */
.map-image.error{ filter:grayscale(.9) brightness(.7) }
.map-frame.loading .map-image{ opacity:.6 }

/* Адаптив для мобильных устройств */
@media (max-width: 520px){
  .q-grid{ grid-template-columns:1fr; }
  .q-left{ grid-template-columns:1fr; }
  .map-controls-panel, .map-legend { left: 8px; }
  .map-controls-panel { top: 8px; }
  .map-legend { bottom: 8px; }
}

/* Уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce){
  .marker .pin-img{ transition: none; }
  .marker .popover{ transition: none; }
}

/* Бургер-кнопка */
.page-map .mobile-menu-toggle{
  display:none;
}

@media (max-width: 820px){
  .page-map .site-header{ position: relative; }
  .page-map .header-links.start,
  .page-map .header-links.end,
  .page-map .header-actions{ display:none !important; }
  .page-map .brand{ margin-inline:auto; }

  .page-map .mobile-menu-toggle{
    display:inline-flex;
    align-items:center; justify-content:center; flex-direction: column;
    width:40px; height:36px;
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    border:1px solid var(--border); border-radius:10px;
    background:var(--surface); color:var(--text);
    box-shadow: var(--shadow);
  }
  .page-map .mobile-menu-toggle .line{
    display:block; width:20px; height:2px; border-radius:2px;
    background:#d0d3d9; margin:3px 0;
  }
}

/* Выезжающее меню */
.page-map .mobile-menu{
  position:fixed; inset:0; z-index:5000;
  pointer-events:none;
}
.page-map .mobile-menu .mm-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .18s ease;
}
.page-map .mobile-menu .mm-panel{
  position:absolute; top:0; bottom:0; left:0;
  width:min(86vw, 360px);
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  transform:translateX(-102%); transition:transform .22s ease;
  display:flex; flex-direction:column;
}
.page-map .mobile-menu.open{ pointer-events:auto; }
.page-map .mobile-menu.open .mm-backdrop{ opacity:1; }
.page-map .mobile-menu.open .mm-panel{ transform:none; }

.page-map .mm-content{ height:100%; display:flex; flex-direction:column; gap:12px; padding:14px; }
.page-map .mm-nav{ display:flex; flex-direction:column; gap:6px; }
.page-map .mm-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
}
.page-map .mm-accordion{
  border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-2);
}
.page-map .mm-accordion > summary{
  list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; gap:10px;
}
.page-map .mm-accordion > summary::-webkit-details-marker{ display:none; }
.page-map .mm-sublist{ display:flex; flex-direction:column; gap:6px; padding:8px 10px 10px; }
.page-map .mm-subitem{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:var(--surface);
  border:1px solid var(--border); color:var(--text);
}

.page-map .mm-actions{ margin-top:auto; display:flex; gap:8px; }
.page-map .mm-actions .ghost-btn{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); display:flex; align-items:center; justify-content:center; gap:10px;
}

@media (prefers-reduced-motion: reduce){
  .page-map .mobile-menu .mm-backdrop,
  .page-map .mobile-menu .mm-panel{ transition:none; }
}

@media (max-width: 720px){
  .page-map .map-controls-panel{
    top: 8px; left: 8px;
    padding: 8px;
    border-radius: 12px;
    gap: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    max-width: 96vw;
  }

  .page-map .map-controls-panel .lbl{ display: none; }

  .page-map .map-controls-panel .ctrl-input{
    min-width: 0;
    width: 100%;
    max-width: 56vw;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    height: 36px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-map .map-controls-panel .zoom-group{ gap: 6px; }
  .page-map .map-controls-panel .zoom-group .btn{
    height: 36px; min-width: 36px; width: 36px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
  }
  .page-map .map-controls-panel .zoom-value{
    min-width: 44px; height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12.5px;
  }

  .page-map #zoomResetBtn{ width: 36px; min-width: 36px; font-size: 0; }
  .page-map #zoomResetBtn i{ font-size: 16px; margin: 0; }
}

@media (max-width: 400px){
  .page-map .map-controls-panel{
    grid-template-columns: 1fr auto;
    gap: 6px;
  }
  .page-map .map-controls-panel .ctrl-input{ max-width: 52vw; }
  .page-map .map-controls-panel .zoom-value{ min-width: 40px; }
}

html[data-theme="dark"] .page-map .map-controls-panel{
  background: linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03)), var(--surface);
  border-color: color-mix(in srgb, var(--border), #fff 12%);
}

html[data-theme="dark"] .page-map .map-controls-panel .ctrl-input,
html[data-theme="dark"] .page-map .map-controls-panel .zoom-value,
html[data-theme="dark"] .page-map .map-controls-panel .btn{
  background: linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.06)), var(--surface-2);
  border-color: color-mix(in srgb, var(--border), #fff 16%);
  color: var(--text);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}

html[data-theme="dark"] .page-map .map-controls-panel .ctrl-input:hover,
html[data-theme="dark"] .page-map .map-controls-panel .zoom-value:hover,
html[data-theme="dark"] .page-map .map-controls-panel .btn:hover{
  background: linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,.10)), var(--surface-2);
  border-color: color-mix(in srgb, var(--border), #fff 22%);
}

@media (max-width: 720px){
  .page-map #zoomResetBtn{
    width: 36px; min-width: 36px; height: 36px;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0;
  }
  .page-map #zoomResetBtn i{
    margin: 0 !important;
    font-size: 16px;
  }

  .page-map .map-controls-panel .zoom-group .btn{
    display: inline-flex; align-items: center; justify-content: center;
  }
  .page-map .map-controls-panel .zoom-group .btn i{
    margin: 0 !important;
  }
}

@media (max-width: 720px){
  .page-map #zoomResetBtn{
    width: 36px; min-width: 36px; height: 36px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
  }
  .page-map #zoomResetBtn i{
    margin: 0 !important;
    font-size: 16px;
    width: 1em;
    text-align: center;
    flex: 0 0 auto;
  }
}

@media (max-width: 720px){
  .page-map .map-controls-panel .zoom-value{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 44px;
    padding: 0 8px;
    line-height: 1;
    text-align: center;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    gap: 0;
  }
}

[data-theme="light"] .page-map .q-badge.badge--stalker{
  background: #e8f5e9;
  border-color: #88cfa0;
  color: #2e7d32;
}

[data-theme="light"] .page-map .q-badge.badge--bandit{
  background: #fdecea;
  border-color: #ef9a9a;
  color: #b22222;
}

[data-theme="light"] .page-map .q-badge.badge--any{
  background: #fff6e0;
  border-color: #f2c66d;
  color: #8a5a00;
}

[data-theme="light"] .page-map .q-actions .btn.btn-primary{
  background: #fff6e0;
  border-color: #ead08c;
  color: #5a3d00;
  font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.03);
}

[data-theme="light"] .page-map .q-actions .btn.btn-primary i{
  color: inherit;
}

[data-theme="light"] .page-map .q-actions .btn.btn-primary:hover{
  background: #ffefc6;
  border-color: #e3c57c;
  filter: none;
  transform: none;
}
[data-theme="light"] .page-map .q-actions .btn.btn-primary:active{
  background: #ffe6ad;
  border-color: #d9b86a;
  transform: none;
}

/* Скрывает указатель-треугольник на мобильных устройствах */
@media (max-width: 820px) {
  .marker .popover::after {
    display: none;
  }
}

/* === Light theme: нейтрально‑серые вместо жёлтых/оранжевых (только для страницы карты) === */
html[data-theme="light"] .page-map{
  --nm-gray-50:  #f9fafb;
  --nm-gray-75:  #f7f7f8;
  --nm-gray-100: #f3f4f6;
  --nm-gray-200: #e5e7eb;
  --nm-gray-300: #d1d5db;
  --nm-gray-400: #9ca3af;
  --nm-gray-500: #6b7280;
  --nm-gray-600: #4b5563;
  --nm-gray-700: #374151;
}

/* Бейдж «Все» (убираем жёлтый) */
[data-theme="light"] .page-map .q-badge.badge--any{
  background: var(--nm-gray-50);
  border-color: var(--nm-gray-300);
  color: var(--nm-gray-700);
}

/* Кнопка «Гайд по прохождению» (нейтрально‑серая вместо жёлтой) */
[data-theme="light"] .page-map .q-actions .btn.btn-primary{
  background: linear-gradient(0deg, var(--nm-gray-75), #fff);
  border-color: var(--nm-gray-300);
  color: var(--nm-gray-700);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.03);
}
[data-theme="light"] .page-map .q-actions .btn.btn-primary i{ color: inherit; }
[data-theme="light"] .page-map .q-actions .btn.btn-primary:hover{
  background: var(--nm-gray-100);
  border-color: var(--nm-gray-400);
  filter: none;
  transform: none;
}
[data-theme="light"] .page-map .q-actions .btn.btn-primary:active{
  background: var(--nm-gray-100);
  border-color: var(--nm-gray-400);
  transform: none;
}

[data-theme="light"] .page-map .map-controls-panel .btn,
[data-theme="light"] .page-map .map-controls-panel .btn.btn-ghost,
[data-theme="light"] .page-map .map-controls-panel .btn.btn-secondary,
[data-theme="light"] .page-map #zoomResetBtn.btn-secondary,
[data-theme="light"] .page-map .map-controls-panel .ctrl-input,
[data-theme="light"] .page-map .map-controls-panel .zoom-value{
  background: var(--nm-gray-50);
  border-color: var(--nm-gray-300);
  color: var(--nm-gray-700);
}
[data-theme="light"] .page-map .map-controls-panel .btn:hover,
[data-theme="light"] .page-map .map-controls-panel .ctrl-input:hover,
[data-theme="light"] .page-map .map-controls-panel .zoom-value:hover{
  background: var(--nm-gray-100);
  border-color: var(--nm-gray-400);
}

[data-theme="light"] .page-map .marker:focus-visible{
  outline-color: var(--nm-gray-500);
}

[data-theme="light"] .page-map .marker.pin-fallback .pin{
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 10px rgba(0,0,0,.06);
  border-color: var(--nm-gray-300);
  color: var(--nm-gray-600);
}

html[data-theme="light"] .page-map{ --accent: var(--nm-gray-600); }