/* Отдельная страница карты: /maps
   Здесь карта - единственное содержимое, поэтому она занимает весь экран,
   а всё остальное сжато в одну полоску сверху. */

.mapsonly { height: 100%; overflow: hidden; }
html:has(.mapsonly) { height: 100%; }

.maps-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;          /* на телефоне адресная строка съедает часть vh */
}

.maps-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.maps-title {
  font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.maps-sub { font-size: 12px; color: var(--txt-2); margin-top: 1px; }

.maps-online {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--ok-bg); border: 1px solid rgba(74,222,128,.28);
  color: var(--ok); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.maps-online svg { width: 14px; height: 14px; }

/* Рамку и скругление снимаем: карта тут не карточка, а сама страница. */
.maps-canvas {
  border: 0; border-radius: 0; min-height: 0;
}
.maps-canvas canvas { height: 100% !important; }

@media (max-width: 560px) {
  .maps-bar { gap: 8px; padding: 8px 12px; }
  .maps-bar .btn span { display: none; }
  .map-tools { left: 8px; top: 8px; padding: 8px 10px; }
  .map-legend { right: 8px; bottom: 8px; }
}

/* Shared olive/linen map treatment, matching the Minecraft atlas. */
.mapsonly{background:#141c14;--accent:#b7d277;--bg-0:#10170f;--bg-1:#151e12;--bg-2:#20291b;--line:#35432a;--line-2:#47543a;--txt-0:#e3e8d5;--txt-1:#b3bba5;--txt-2:#929e82}
.maps-bar{background:#10170f;border-color:#35432a;padding:12px 16px;gap:14px}
.maps-title{font:500 12px 'IBM Plex Mono',monospace;color:#dce5cc;letter-spacing:.045em}
.maps-sub{font:10px 'IBM Plex Mono',monospace;margin-top:7px}
.maps-online{border-radius:0;border-color:#465536;background:#202b18;color:#b7d277;font:11px 'IBM Plex Mono',monospace}
.maps-bar .btn{background:#192216;border-color:#46513b;color:#c6d0b5;font-size:10px}
#mapTown{background:#192216;border-color:#46513b;color:#dce5cc;font:11px 'IBM Plex Mono',monospace;max-width:175px}
.maps-canvas{background:#141c14;box-shadow:none}
.maps-canvas .map-tools,.maps-canvas .map-legend{background:#10170fed;border-color:#46513b;backdrop-filter:blur(6px);border-radius:0;box-shadow:none}
.map-tools summary{font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#b7d277;cursor:pointer;padding:3px 0}
.layer-list{display:flex;flex-direction:column;gap:10px;padding-top:14px;padding-bottom:3px}
.layer-list .switch{color:#c6d0b5}.map-legend{font:10px/1.55 'IBM Plex Sans',sans-serif;max-width:58%;bottom:45px}
.map-zoom{position:absolute;right:14px;top:14px;display:grid;gap:5px;z-index:3}
.map-zoom button{width:36px;height:34px;padding:0;border:1px solid #46513b;background:#192216;color:#dce5cc;font:20px 'IBM Plex Mono',monospace;cursor:pointer}
.map-zoom button:hover{background:#303d23;color:#d4e8a7}.map-coords{position:absolute;right:14px;bottom:12px;background:#10170fe8;border:1px solid #35432a;padding:6px 10px;color:#a5ae97;font:9px 'IBM Plex Mono',monospace;pointer-events:none}
@media(max-width:560px){.maps-bar{gap:8px;padding:10px 12px}.maps-title{font-size:10px;max-width:190px}.maps-sub{font-size:9px}.maps-online{display:none!important}#mapTown{width:120px;font-size:10px}.maps-bar .btn{font-size:9px;padding:6px 8px}.map-legend{max-width:70%;font-size:9px;bottom:42px}.map-coords{font-size:8px;right:8px}.map-zoom{right:8px;top:8px}.map-tools summary{font-size:9px}}