/* Публичная часть */

body { display: flex; flex-direction: column; min-height: 100vh; }
#app { flex: 1; width: 100%; padding-bottom: 64px; outline: none; }

/* ---------- шапка ---------- */
.topbar { background: var(--bg-sunk); border-bottom: 1px solid var(--line-soft); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.logo-mark { width: 26px; height: 26px; color: var(--t); }
.logo-name { font: 700 20px/1 var(--font-display); letter-spacing: 0.01em; }
.topnav { display: flex; gap: 4px; }
.topnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-md);
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.topnav a:hover { color: var(--text); background: var(--panel); }
.topnav a[aria-current="page"] { color: var(--text); }
.fav-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--panel-hi); color: var(--text);
  font: 600 12px/20px var(--font-display); text-align: center;
}

.foot { border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 13px; }
.foot-in { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.foot a { color: var(--faint); }
.foot a:hover { color: var(--muted); }

/* ---------- главная ---------- */
.intro { padding: 48px 0 36px; max-width: 760px; }
.intro h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; }
.lede { margin: 16px 0 24px; color: var(--muted); font-size: 17px; max-width: 62ch; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.legend b { font: 600 18px/1 var(--font-display); color: var(--text); }
.legend .ico { width: 20px; height: 20px; }

.pool { margin-top: 36px; }
.pool h2 { margin-bottom: 16px; color: var(--muted); font-size: 18px; font-weight: 500; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.map-tile {
  position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background-color: var(--bg-sunk);
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  text-decoration: none; color: var(--text);
}
.map-tile:hover { border-color: var(--line); }
.map-tile-art { position: absolute; inset: 0; }
.map-tile-art img { width: 100%; height: 100%; transition: opacity 160ms ease, transform 300ms ease; }
.map-tile-art .is-cover { object-fit: cover; opacity: 0.6; }
.map-tile-art .is-radar { object-fit: contain; padding: 8% 8% 22%; opacity: 0.55; }
.map-tile:hover .map-tile-art img { opacity: 0.9; }
.map-tile:hover .map-tile-art .is-radar { transform: scale(1.03); }
.map-tile-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 36px 16px 14px;
  background: linear-gradient(to top, rgba(23, 32, 38, 0.96) 35%, rgba(23, 32, 38, 0));
  display: grid; gap: 8px;
}
.map-tile-name { display: flex; align-items: center; gap: 10px; font: 650 24px/1 var(--font-display); }
.map-icon { width: 26px; height: 26px; object-fit: contain; }
.map-tile-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 14px/1 var(--font-display); color: var(--muted); }
.map-tile-counts span { display: inline-flex; align-items: center; gap: 5px; }
.map-tile.is-empty .map-tile-name { color: var(--muted); }

.home-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.home-lists h2 { margin-bottom: 12px; color: var(--muted); font-size: 18px; font-weight: 500; }

/* компактная строка гранаты */
.rows { display: grid; gap: 2px; }
.row {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  padding: 8px; margin: 0 -8px; border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
}
.row:hover { background: var(--panel); }
.row .thumb { width: 96px; }
.row-title { font-weight: 600; line-height: 1.3; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 5px; color: var(--muted); font-size: 13px; }
.meta .ico { width: 15px; height: 15px; }
.meta > span { display: inline-flex; align-items: center; gap: 5px; }

.thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-sm); background: var(--bg-sunk);
  display: grid; place-items: center;
}
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; }
.thumb > .ico { width: 34%; height: 34%; opacity: 0.6; }

/* ---------- страница карты ---------- */
.map-head { padding: 28px 0 20px; display: grid; gap: 18px; }
.map-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.map-title .map-icon { width: 36px; height: 36px; }
.map-title .sub { color: var(--muted); font-size: 15px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--text); }
.back .ico { width: 16px; height: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.toggle-fav.is-on .ico-star { fill: var(--flash); color: var(--flash); }

/* Радар по высоте экрана, чтобы целиком помещался; остальное место отдаём списку */
.map-layout {
  display: grid; gap: 28px; align-items: start;
  grid-template-columns: minmax(0, max(440px, calc(100vh - 280px))) minmax(340px, 1fr);
}
.radar-col { position: sticky; top: 16px; }

.panel { position: sticky; top: 16px; display: grid; gap: 12px; max-height: calc(100vh - 32px); grid-template-rows: auto minmax(0, 1fr); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.panel-head h2 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
.panel-head .num { color: var(--faint); font-weight: 500; }
.panel-list { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; align-content: start; padding-right: 4px; margin-right: -4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* карточка гранаты */
.ncard { position: relative; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line-soft); }
.ncard:hover, .ncard.is-hot { border-color: #4a5966; background: var(--panel-hi); }
.ncard-link { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 8px; text-decoration: none; color: var(--text); }
.ncard-title { font-weight: 600; line-height: 1.3; padding-right: 26px; }
.ncard .badge-rec { color: var(--flash); font-size: 12px; }
.fav-btn {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--faint); cursor: pointer;
}
.fav-btn .ico { width: 18px; height: 18px; fill: none; }
.fav-btn:hover { color: var(--text); }
.fav-btn[aria-pressed="true"] { color: var(--flash); }
.fav-btn[aria-pressed="true"] .ico { fill: var(--flash); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cards .ncard-link { grid-template-columns: 1fr; }

/* ---------- страница гранаты ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 24px; color: var(--muted); font-size: 14px; }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crumbs a:hover { color: var(--text); }
.nade-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 22px; }
.nade-title .ico { width: 34px; height: 34px; }

.nade-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.player { position: relative; background: #0d1215; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; }
.player video, .player img { width: 100%; height: 100%; object-fit: contain; }
.player-empty { display: grid; place-items: center; height: 100%; color: var(--faint); }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.is-on { color: var(--flash); }
.btn.is-on .ico-star { fill: var(--flash); }
.btn .ico-star { fill: none; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 24px; }
.shot { margin: 0; }
.shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-sm); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption { margin-top: 6px; color: var(--muted); font-size: 13px; }

.desc { margin-top: 24px; max-width: 72ch; white-space: pre-line; font-size: 16px; }

.side-card { display: grid; gap: 20px; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line-soft); }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.facts dt { color: var(--muted); font-size: 14px; padding-right: 16px; }
.facts dd { display: flex; align-items: center; gap: 8px; justify-content: flex-end; text-align: right; font-weight: 500; }

.mini-radar .radar { max-width: 340px; }
.console { position: relative; }
.console pre {
  margin: 0; padding: 12px 44px 12px 12px;
  background: var(--bg-sunk); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  font: 13px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--muted);
  white-space: pre-wrap; word-break: break-all;
}
.console .btn { position: absolute; top: 6px; right: 6px; width: 30px; padding: 0; justify-content: center; }
.side-card h3 { font-size: 15px; color: var(--muted); font-weight: 500; margin-bottom: 8px; }
.dates { color: var(--faint); font-size: 13px; }

.similar { margin-top: 48px; }
.similar h2 { margin-bottom: 14px; color: var(--muted); font-size: 18px; font-weight: 500; }

.page-msg { padding: 72px 0; max-width: 520px; }
.page-msg p { color: var(--muted); margin: 12px 0 20px; }

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .map-layout, .nade-layout { grid-template-columns: 1fr; }
  .radar-col, .panel { position: static; max-height: none; }
  .radar-col .radar { max-width: 760px; margin: 0 auto; }
  .panel-list { overflow: visible; }
  .side-card { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .home-lists { grid-template-columns: 1fr; }
  .side-card { grid-template-columns: 1fr; }
  .ncard-link { grid-template-columns: 112px 1fr; }
  .map-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .map-tile-name { font-size: 19px; }
  .seg button, .seg a { padding: 0 9px; }
}