/* МГН: Захват. ANON MGN interface system: black, graphite, pink, clean hierarchy. */
:root{
  color-scheme:dark;
  --bg:#000;
  --surface:#0e0c0d;
  --surface2:#171316;
  --line:#262225;
  --text:#fff;
  --muted:#a49ca2;
  --soft:#736d72;
  --accent:#e57ac6;
  --accent-pressed:#c962ad;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;height:100dvh;width:100%;overflow:hidden;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:not(:disabled):active{opacity:.78}
a{color:inherit;text-decoration:none}
.ico{display:block;width:20px;height:20px;flex:none}
#map{position:absolute;inset:0;background:#171819;z-index:0}
.leaflet-container{background:#171819}
.leaflet-tile-pane .leaflet-tile{filter:grayscale(1) invert(.91) hue-rotate(175deg) brightness(.76) contrast(1.09)}
.leaflet-control-attribution{background:#101010d9!important;color:#a5a5a5!important;font-size:9px!important}
.leaflet-control-attribution a{color:#e0adc9!important}
.map-shade{position:absolute;inset:0;z-index:401;pointer-events:none;background:linear-gradient(180deg,#000a 0%,transparent 17%,transparent 73%,#0007 100%)}

/* Header is shared visually with the main Mini App, not a separate game brand. */
.appbar{position:absolute;z-index:1020;top:0;left:0;right:0;min-height:58px;display:flex;align-items:center;gap:9px;padding:calc(9px + env(safe-area-inset-top,0px)) 14px 9px;background:rgba(0,0,0,.84);border-bottom:1px solid #242124;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.icon-button{width:33px;height:33px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--surface2)}
.icon-button .ico{width:18px;height:18px}
.appbar-brand{display:flex;align-items:center;justify-content:center;flex:none;width:70px}
.appbar-brand img{display:block;width:100%;height:auto;max-height:34px;object-fit:contain}
.appbar-divider{width:1px;height:25px;background:#373137}
.appbar-name{display:flex;min-width:0;flex-direction:column;gap:3px}
.appbar-name strong{font-size:15px;line-height:1.05;font-weight:790;letter-spacing:-.2px;white-space:nowrap}
.appbar-name span{color:var(--muted);font-size:10px;line-height:1.15;white-space:nowrap}
.test-label{margin-left:auto;padding:4px 7px;color:#dfb4ce;font-size:10px;font-weight:700;border:1px solid #4c3644;border-radius:5px;background:#1a1017}

/* Small counters leave the map central. */
.hud{position:absolute;z-index:950;left:12px;top:calc(69px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:0;min-height:45px;padding:7px 8px;border:1px solid #3d353b;border-radius:11px;background:rgba(12,11,12,.9);backdrop-filter:blur(10px)}
.hud-stat{display:flex;align-items:center;justify-content:center;gap:7px;min-width:75px;padding:0 6px}
.hud-kicker{color:var(--muted);font-size:10px;letter-spacing:0;font-weight:500}
.hud-stat strong{font-size:13px;font-weight:750;letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud-stat:first-child strong{color:var(--accent)}
.hud-sub{display:none}
.hud-separator{height:19px;width:1px;background:#373137}
.hud-stat:last-child,.hud-separator:nth-last-child(2){display:none}

/* Flat, recognizable line icons, grouped like ordinary map controls. */
.map-actions{position:absolute;z-index:950;top:calc(126px + env(safe-area-inset-top,0px));right:12px;display:flex;flex-direction:column;gap:7px}
.map-action{width:40px;height:40px;display:grid;place-items:center;padding:0;background:rgba(14,12,13,.94);border:1px solid #473b44;border-radius:11px;color:#eee5eb;backdrop-filter:blur(10px)}
.map-action .ico{width:20px;height:20px}
.map-action.is-active{color:var(--accent);border-color:#976184}
.map-action.is-loading .ico{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:absolute;z-index:1700;top:calc(190px + env(safe-area-inset-top,0px));left:50%;width:max-content;max-width:calc(100% - 34px);transform:translateX(-50%);padding:10px 13px;background:#171316;border:1px solid #59424f;border-radius:10px;color:white;font-size:12px;line-height:1.4;text-align:center}
.toast[data-kind=error]{border-color:#9c536c}

/* Compact native-feeling panel: title, owner, action, tabs. */
.bottom-sheet{
  position:absolute;z-index:1100;left:0;right:0;bottom:0;width:100%;
  height:calc(199px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(14,12,13,.985);border-top:1px solid #50404b;
  border-radius:16px 16px 0 0;
}
.bottom-sheet:not(.has-selection):not(.is-expanded):not([data-tab=top]):not([data-tab=rules]):not([data-tab=market]):not([data-tab=myzones]){
  height:calc(116px + env(safe-area-inset-bottom,0px));
}
.bottom-sheet.is-expanded,.bottom-sheet[data-tab=top],.bottom-sheet[data-tab=rules],.bottom-sheet[data-tab=market],.bottom-sheet[data-tab=myzones]{
  height:min(54dvh,425px);
}
.sheet-grip{
  display:grid;place-items:center;flex:none;width:100%;height:13px;
  padding:0;background:transparent;touch-action:manipulation;
}
.sheet-handle{display:block;width:33px;height:3px;border-radius:10px;background:#605760}
.sheet-content{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;padding:4px 16px 5px;
}
.sheet-content::-webkit-scrollbar{display:none}
.sheet-overline{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}
.sheet-id{font-size:10px;color:var(--muted)}
.sheet-content h1{
  margin:0 0 4px;font-size:19px;font-weight:760;line-height:1.18;letter-spacing:-.35px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bottom-sheet.is-expanded h1{overflow:visible;white-space:normal}
.sheet-content h2{margin:4px 0 11px;font-size:21px;font-weight:760;letter-spacing:-.3px}
#mapView .zone-details{
  display:none;margin:0 0 9px;font-size:11px;color:var(--muted);line-height:1.45;
}
.bottom-sheet.is-expanded #mapView .zone-details:not([hidden]){display:block}
.owner-card{
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  min-height:24px;padding:2px 0;border-top:1px solid var(--line);
}
.owner-data{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.owner-data small{color:var(--muted);font-size:11px;white-space:nowrap}
.owner-data strong{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-weight:650;
}
.owner-state{flex:none;font-size:10px;font-weight:650;color:#b9afb7}
.owner-state.mine{color:var(--accent)}
.owner-state.occupied{color:#e9c6da}
.capture-button{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;
  margin-top:6px;padding:8px 14px;background:var(--accent);border-radius:10px;
  color:#21131b;font-size:13px;font-weight:760;
}
.capture-button:not(:disabled):hover{background:#ed8dce}
.capture-button:disabled{background:#533345;color:#e5bed8}
.capture-button .ico,.capture-chevron{display:none}
.screenreader-status{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}
.sheet-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;gap:0;
  width:100%;min-height:calc(54px + env(safe-area-inset-bottom,0px));
  padding:0 10px env(safe-area-inset-bottom,0px);
  border-top:1px solid var(--line);background:#090809;
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:51px;padding:5px 0;border-top:2px solid transparent;
  background:none;color:#8e858c;font-size:10px;font-weight:650;
}
.tab .ico{width:19px;height:19px}
.tab.active{color:var(--accent);border-top-color:var(--accent)}
.section-subtitle{color:var(--muted);font-size:12px;line-height:1.4;margin:0 0 8px}

/* Rankings: simple dense rows */
.leaders{margin:0;padding:0;list-style:none}
.leader{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--line)}
.leader-rank{display:grid;place-items:center;flex:none;width:25px;color:var(--muted);font-size:12px;font-weight:750;font-variant-numeric:tabular-nums}
.leader:first-child .leader-rank{color:var(--accent)}
.leader-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650}
.leader-name.is-me{color:var(--accent)}
.leader-count{font-size:13px;font-weight:730;font-variant-numeric:tabular-nums}
.leader-caption{font-size:10px;color:var(--muted)}
.rule{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);color:#d7ced3;font-size:12px;line-height:1.45}
.rule b{color:var(--accent)}
.rules-note{margin:12px 0;color:var(--muted);font-size:11px;line-height:1.5}

/* Game polygons: colored boundaries, icon-only landmarks, owner details in dock. */
.zone-pin{background:none;border:0}
.zone-pin-inner{position:relative;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--zone-color,#c8a0b6);border-radius:50%;background:#171316;color:#fff}
.zone-pin-inner svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zone-pin.is-free .zone-pin-inner{background:#252025;color:#f0e7ec}
.zone-pin.is-mine .zone-pin-inner{background:#a74b88;border-color:#f3aad9}
.zone-pin.is-selected .zone-pin-inner{outline:3px solid #fff;outline-offset:1px}
.zone-pin.is-district .zone-pin-inner{width:40px;height:40px;border-radius:11px}
.zone-pin.is-district .zone-pin-inner svg{width:22px;height:22px}
.gps-marker{width:24px;height:24px;border:4px solid white;border-radius:50%;background:#e57ac6;box-shadow:0 0 0 5px #e57ac64c}
.leaflet-tooltip.you-label{padding:3px 6px;border:0;border-radius:4px;background:#e57ac6;color:#1a1015;font-size:10px;font-weight:700}
.leaflet-tooltip.you-label:before{display:none}
.leaflet-tooltip.territory-label{display:none!important}

/* Only the basemap changes tone; game overlay stays ANON MGN pink/graphite. */
body[data-map-theme=light] #map,body[data-map-theme=light] .leaflet-container{background:#f3f3f1}
body[data-map-theme=light] .leaflet-tile-pane .leaflet-tile{filter:grayscale(1) brightness(1.05) contrast(1.04)}
body[data-map-theme=light] .map-shade{background:linear-gradient(180deg,#0008 0%,transparent 19%,transparent 75%,#0007 100%)}
body[data-map-theme=light] .map-action{background:#fcfafb;color:#292126;border-color:#c9bec5}
body[data-map-theme=light] .map-action.is-active{border-color:var(--accent);color:#b03e86}
body[data-map-theme=light] .zone-pin-inner{background:#fff;color:#30252b}
body[data-map-theme=light] .zone-pin.is-mine .zone-pin-inner{background:#f0acda;color:#25111f}
body[data-map-theme=light] .zone-pin.is-free .zone-pin-inner{background:#fff}

/* Small Telegram screens */
@media(max-width:370px){
 .appbar{gap:6px;padding-right:9px;padding-left:9px}
 .appbar-brand{width:58px}
 .appbar-name strong{font-size:14px}
 .appbar-name span{font-size:9px}
 .test-label{padding:3px 5px}
 .hud{left:9px}
 .map-actions{right:9px}
 .sheet-content{padding-right:12px;padding-left:12px}
 .sheet-content h1{font-size:18px}
 .game-readings{gap:5px}
 .reading{font-size:9px}
}
@media(max-height:680px){
 .bottom-sheet{height:calc(199px + env(safe-area-inset-bottom,0px))}
 .bottom-sheet.is-expanded,.bottom-sheet[data-tab=top],.bottom-sheet[data-tab=rules],.bottom-sheet[data-tab=myzones]{height:min(63dvh,425px)}
 .hud{top:calc(64px + env(safe-area-inset-top,0px))}
 .map-actions{top:calc(117px + env(safe-area-inset-top,0px))}
}
@media(orientation:landscape) and (max-height:500px){
 .hud{display:none}
 .map-actions{top:calc(65px + env(safe-area-inset-top,0px))}
 .bottom-sheet,.bottom-sheet.is-expanded,.bottom-sheet[data-tab=top],.bottom-sheet[data-tab=rules],.bottom-sheet[data-tab=myzones]{width:min(380px,62vw);height:100dvh;max-height:none;left:auto;right:0;border-radius:12px 0 0 0}
 .appbar{right:min(380px,62vw)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* MapLibre renders true dark/light vector styles, so no CSS filtering is applied
   to its WebGL canvas. The Leaflet raster fallback alone gets a color filter. */
.maplibregl-map,.maplibregl-canvas,.maplibregl-canvas-container{filter:none!important}
.leaflet-bottom.leaflet-right{
  bottom:calc(199px + env(safe-area-inset-bottom,0px) + 8px);right:8px;z-index:1000;
}
body:has(#panel:not(.has-selection):not(.is-expanded):not([data-tab=top]):not([data-tab=rules]):not([data-tab=market]):not([data-tab=myzones])) .leaflet-bottom.leaflet-right{
  bottom:calc(116px + env(safe-area-inset-bottom,0px) + 8px);
}
body:has(#panel.is-expanded) .leaflet-bottom.leaflet-right,
body:has(#panel[data-tab="top"]) .leaflet-bottom.leaflet-right,
body:has(#panel[data-tab="rules"]) .leaflet-bottom.leaflet-right,
body:has(#panel[data-tab="market"]) .leaflet-bottom.leaflet-right{bottom:calc(min(54dvh,425px) + 8px)}
/* One short, accessible data-source credit; no duplicate text or Leaflet logo. */
.leaflet-control-attribution{
  max-width:calc(100vw - 18px);
  padding:4px 7px!important;
  border:1px solid #363036!important;
  border-radius:6px!important;
  background:#100d10ee!important;
  color:#bcb5bb!important;
  font-size:clamp(8px,1.95vw,10px)!important;
  line-height:1.25!important;
  text-align:right;
  overflow-wrap:normal;
  box-shadow:none!important;
}
.leaflet-control-attribution a{
  color:#ddbad0!important;
  text-decoration:none;
}
.leaflet-control-attribution a:hover{text-decoration:underline}
@media(max-height:680px){
  body:has(#panel.is-expanded) .leaflet-bottom.leaflet-right,
  body:has(#panel[data-tab="top"]) .leaflet-bottom.leaflet-right,
  body:has(#panel[data-tab="rules"]) .leaflet-bottom.leaflet-right{bottom:calc(min(63dvh,425px) + 8px)}
}
@media(orientation:landscape) and (max-height:500px){
  .leaflet-bottom.leaflet-right{bottom:0;right:min(380px,62vw)}
}


/* Pet economy: functional and restrained, same visual system as ANON MGN. */
.hud .hp-stat{display:flex!important;min-width:54px;padding:0 7px}
.hud .hp-stat strong{color:#f2a7d4}
.hud .hp-separator{display:block!important}
.zone-guard-badge{font-size:17px;line-height:1.1;flex:none}
/* Market is a proper in-app screen, not a half-open drawer.
   Header stays visible at top; bottom nav stays pinned to the screen bottom. */
#panel[data-tab="market"]{
  top:calc(58px + env(safe-area-inset-top,0px));
  bottom:0;
  left:0;right:0;
  width:100%;
  height:auto;
  max-height:none;
  border-radius:0;
  border-top:1px solid var(--line);
}
.bottom-sheet[data-tab="market"] .sheet-grip{display:none}
.bottom-sheet[data-tab="market"] .sheet-tabs{flex-shrink:0}
.market{
  min-height:0;
  min-width:0;
  flex:1 1 auto;
  padding:15px 16px 24px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
body:has(#panel[data-tab="market"]) .leaflet-bottom.leaflet-right{display:none}
.market-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 0 12px;border-bottom:1px solid #282227}
.market-head>div{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.market-head small{font-size:9px;color:#b6a8b1;font-weight:700;letter-spacing:.3px}
.market-head strong{font-size:20px;font-weight:800;white-space:nowrap}
.market-hp strong{font-size:13px;white-space:nowrap}
.hp-track{width:100%;height:4px;background:#3a2a35;border-radius:6px;overflow:hidden;margin-top:5px}
.hp-track span{display:block;width:100%;height:100%;background:#e57ac6;transition:width .35s ease}
.income-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #292328}
.income-row>span{font-size:12px;color:#b7a8b1}
.income-row strong{font-size:13px;color:#f6b5df;margin-left:5px}
.income-row small{display:block;margin-top:3px;color:#847983;font-size:10px}
.small-action{min-width:78px;min-height:34px;padding:8px 11px;border-radius:9px;border:1px solid #8f4d74;color:#f6b5df;background:#24151f;font-size:11px;font-weight:750}
.small-action:disabled{opacity:.35}
.market h2{margin:16px 0 7px;font-size:16px;font-weight:760}
.market-note{margin:6px 0 10px;font-size:11px;line-height:1.5;color:#a39aa2}
.pet-catalog,.pet-inventory{display:flex;flex-direction:column}
.pet-product{display:flex;align-items:center;gap:10px;min-height:69px;padding:9px 0;border-bottom:1px solid #302831}
.pet-product-emoji{display:grid;place-items:center;flex:none;width:37px;height:38px;border-radius:11px;background:#211821;font-size:24px}
.pet-product-info{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}
.pet-product-info strong{font-size:13px;line-height:1.2}
.pet-product-info small{color:#aea0ab;font-size:10px;line-height:1.3}
.pet-product-price{display:flex;flex:none;flex-direction:column;align-items:center;gap:4px;min-width:73px}
.pet-product-price button,.pet-action{padding:8px 11px;border:1px solid #a7538a;background:#3b1d30;color:#ffbee7;border-radius:8px;font-size:11px;font-weight:750;white-space:nowrap}
.pet-product-price button:disabled,.pet-action:disabled{opacity:.38;cursor:default}
.pet-product-price small{font-size:10px;color:#d7b1cc}
.market-inventory-head{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.market-inventory-head small{color:#e57ac6;font-size:12px}
.pet-inventory-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #302831}
.pet-inventory-row .pet-product-emoji{width:31px;height:32px;font-size:21px}
.pet-inventory-label{display:flex;flex:1;flex-direction:column;min-width:0;gap:3px}
.pet-inventory-label strong{font-size:12px}
.pet-inventory-label small{font-size:10px;color:#a49ca2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pet-inventory-row .pet-action{min-width:69px;text-align:center;font-size:10px;padding:7px 8px}
.pet-agent{border:0!important;background:none!important;pointer-events:none}
.pet-agent>span{display:block;font-size:23px;filter:drop-shadow(0 1px 3px #000d);animation:pet-bob 1.7s ease-in-out infinite alternate}
@keyframes pet-bob{from{transform:translateY(0) scale(1)}to{transform:translateY(-4px) scale(1.04)}}
@media(max-width:360px){
  .hud .hp-stat{min-width:46px}
  .market{padding-left:13px;padding-right:13px}
  .pet-product{gap:7px}
  .pet-product-info small{font-size:9px}
  .pet-product-price{min-width:70px}
  .pet-product-emoji{width:32px}
}
@media(orientation:landscape) and (max-height:500px){
 .bottom-sheet[data-tab=market]{
   top:calc(58px + env(safe-area-inset-top,0px));
   bottom:0;left:0;right:0;width:100%;
   height:auto;max-height:none;border-radius:0;
 }
 body:has(#panel[data-tab=market]) .leaflet-bottom.leaflet-right{display:none}
}
@media(prefers-reduced-motion:reduce){.pet-agent>span{animation:none}}


/* ANON MGN map controls — authentic locally bundled Lucide icons. */
.city-icon,.hud-hp-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;flex:none;pointer-events:none;
}
.city-icon .ico,.hud-hp-icon .ico{width:21px;height:21px;stroke-width:1.9}
.appbar-back .city-icon{width:18px;height:18px}
.appbar-back .city-icon .ico{width:18px;height:18px}
.map-action .city-icon .ico{width:21px;height:21px}
.tab .city-icon,.tab .city-icon .ico{width:19px;height:19px}
.zone-pin-inner .ico{width:20px;height:20px;stroke-width:2}
.zone-pin.is-district .zone-pin-inner .ico{width:23px;height:23px}

/* Top HUD contains HP only — no occupied, capture or district counters. */
.hud-hp-only{
  gap:9px;min-height:47px;min-width:139px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(11,10,12,.93);
}
.hud-hp-only .hud-hp-icon{width:19px;height:19px;color:#e985c4}
.hud-hp-only .hud-hp-icon .ico{width:19px;height:19px}
.hud-hp-value{font-size:17px!important;font-weight:850;color:#fff!important;
  font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.hud-hp-unit{font-size:10px;color:#f0a6d3;font-weight:770;margin-left:-5px}
.hud-hp-track{flex:1;min-width:26px;max-width:37px;height:4px;
  border-radius:5px;background:#41263a;overflow:hidden}
.hud-hp-track span{display:block;width:100%;height:100%;
  background:#e57ac6;border-radius:5px;transition:width .3s ease}

/* The map data remains visibly credited, without the generated black box.
   These two official copyright links replace auto-injected provider plaques. */
.leaflet-control-attribution,.maplibregl-ctrl-attrib{display:none!important}
.map-credits{
  position:absolute;z-index:1080;
  right:10px;bottom:calc(124px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:5px;
  max-width:calc(100% - 20px);
  padding:0;background:transparent;border:0;border-radius:0;
  box-shadow:none;
  font:500 9px/1.35 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:0;white-space:nowrap;
  color:#d6cbd4;
  text-shadow:0 1px 4px #000,0 0 4px #000;
}
.map-credits a{color:inherit;text-decoration:none}
.map-credits a:hover,.map-credits a:focus-visible{text-decoration:underline}
body:has(#panel.has-selection:not(.is-expanded)[data-tab="map"]) .map-credits{
  bottom:calc(207px + env(safe-area-inset-bottom,0px));
}
body:has(#panel.is-expanded) .map-credits,
body:has(#panel[data-tab="top"]) .map-credits,
body:has(#panel[data-tab="rules"]) .map-credits,
body:has(#panel[data-tab="myzones"]) .map-credits{
  bottom:calc(min(54dvh,425px) + 8px);
}
body:has(#panel[data-tab="market"]) .map-credits{display:none}
@media(max-height:680px){
  body:has(#panel[data-tab="top"]) .map-credits,
  body:has(#panel[data-tab="rules"]) .map-credits,
  body:has(#panel[data-tab="myzones"]) .map-credits{
    bottom:calc(min(63dvh,425px) + 8px);
  }
}
@media(orientation:landscape) and (max-height:500px){
  .map-credits{right:calc(min(380px,62vw) + 9px);bottom:8px}
  body:has(#panel[data-tab="top"]) .map-credits,
  body:has(#panel[data-tab="rules"]) .map-credits,
  body:has(#panel[data-tab="myzones"]) .map-credits{
    bottom:8px;right:calc(min(380px,62vw) + 9px)
  }
}
/* Light mode uses dark saturated outlines and high-contrast pin surfaces. */
body[data-map-theme=light] .zone-pin-inner{
  background:#fff;color:#273240;
  border-color:var(--zone-color,#53657b);
  box-shadow:0 1px 3px #0005,0 0 0 2px #ffffffe0;
}
body[data-map-theme=light] .zone-pin.is-held .zone-pin-inner{
  background:var(--zone-color,#545d72);color:#fff;
  box-shadow:0 2px 5px #0004,0 0 0 2px #fff;
}
body[data-map-theme=light] .zone-pin.is-free .zone-pin-inner{
  background:#fff;color:#434b56;
}
body[data-map-theme=light] .zone-pin.is-mine .zone-pin-inner{
  background:#a81772;color:white;border-color:#a81772;
  box-shadow:0 1px 5px #6c164a5c,0 0 0 2px #fff;
}
body[data-map-theme=light] .zone-pin.is-selected .zone-pin-inner{
  outline:3px solid #222c39;outline-offset:1px;
}
body[data-map-theme=light] .map-credits{
  color:#343b44;text-shadow:0 1px 3px #fff,0 0 2px #fff;
}

/* My districts: clean tappable native rows, not floating map cards. */
.my-zones{padding:13px 16px 20px;overflow-y:auto}
.my-zones .sheet-overline{margin-bottom:4px}
.my-zones-list{display:flex;flex-direction:column;gap:0}
.my-zone-row{
  width:100%;display:flex;align-items:center;gap:11px;min-height:64px;
  padding:10px 0;text-align:left;background:transparent;border-bottom:1px solid #332831;
  color:#fff;
}
.my-zone-row:last-child{border-bottom:0}
.my-zone-picture{display:grid;place-items:center;flex:none;width:37px;height:37px;
  color:#f0a5d2;border-radius:11px;background:#281826}
.my-zone-picture .ico{width:21px;height:21px}
.my-zone-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:5px}
.my-zone-text strong{font-size:13px;font-weight:760;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.my-zone-text small{font-size:10px;color:#afa0ae;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.my-zone-arrow{display:grid;place-items:center;width:24px;height:24px;flex:none;color:#9c748d}
.my-zone-arrow .ico{width:18px;height:18px}
.my-zones-empty{padding:14px 0;color:#fff}
.my-zones-empty strong{font-size:13px;font-weight:700}
.my-zones-empty p{font-size:11px;color:#a99da6;line-height:1.5;margin:7px 0 0}


/* Death is a gameplay state, not an external alert.
   Full-screen but compact enough for Telegram's 320px webview. */
.city-death{
  position:absolute;
  z-index:2400;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(24px + env(safe-area-inset-top,0px))
          19px calc(22px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.90);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  overflow-y:auto;
}
.city-death-content{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:370px;
  padding:25px 19px 23px;
  border:1px solid #40303c;
  border-radius:19px;
  background:#110e11;
  text-align:center;
  box-shadow:0 15px 50px #0006;
}
.city-death-symbol{
  display:grid;place-items:center;
  width:54px;height:54px;margin-bottom:15px;
  color:#ffc1df;border:1px solid #734b64;
  border-radius:17px;background:#321b2a;
}
.city-death-symbol .ico{width:27px;height:27px}
.city-death-eyebrow{margin:0;color:#ae92a5;font-size:10px;
  font-weight:750;letter-spacing:1.2px}
.city-death h2{margin:9px 0 8px;font-size:29px;font-weight:820;
  letter-spacing:-.8px;color:#fff}
#deathDescription{margin:0;max-width:290px;color:#d7cbd5;
  font-size:13px;line-height:1.5}
.city-death-stats{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;margin-top:20px;padding:14px 2px;
  border-top:1px solid #40313d;border-bottom:1px solid #40313d;
}
.city-death-stats span{font-size:12px;color:#bbaebb;text-align:left}
.city-death-stats strong{font-size:22px;color:#ee83c8;
  font-variant-numeric:tabular-nums}
.city-death-note{margin:15px 0 18px;font-size:11px;line-height:1.5;
  color:#bfb1bc}
.city-respawn{
  width:100%;min-height:46px;padding:12px 17px;
  background:#e57ac6;color:#21131b;border-radius:11px;
  font-size:14px;font-weight:800;
}
.city-respawn:disabled{opacity:.58}
.city-death-footnote{margin:12px 0 0;color:#948693;
  font-size:10px;line-height:1.4}
body.city-is-dead .hud-hp-track span,
body.city-is-dead .hp-track span{background:#8d4f61}
@media(max-width:359px){
  .city-death{padding-left:12px;padding-right:12px}
  .city-death-content{padding:22px 15px 19px}
}
@media(orientation:landscape) and (max-height:500px){
  .city-death{align-items:flex-start;padding-top:14px;padding-bottom:14px}
  .city-death-content{padding:16px 18px}
  .city-death-symbol{margin-bottom:7px;width:39px;height:39px}
  .city-death h2{font-size:22px;margin:5px 0}
  .city-death-stats{margin-top:10px;padding:8px 0}
  .city-death-note{margin:7px 0 11px}
}
@media(prefers-reduced-motion:reduce){
  .city-death{backdrop-filter:none;-webkit-backdrop-filter:none}
}


/* РАЙОНЫ extension: full-height navigable app pages, never cramped map sheets. */
#panel[data-tab="inventory"],#panel[data-tab="warehouses"],#panel[data-tab="more"]{
  top:calc(58px + env(safe-area-inset-top,0px));bottom:0;
  left:0;right:0;width:100%;height:auto;max-height:none;
  border-radius:0;border-top:1px solid #302831;
}
#panel[data-tab="inventory"] .sheet-grip,
#panel[data-tab="warehouses"] .sheet-grip,
#panel[data-tab="more"] .sheet-grip{display:none}
#panel[data-tab="inventory"] .sheet-tabs,
#panel[data-tab="warehouses"] .sheet-tabs,
#panel[data-tab="more"] .sheet-tabs{flex-shrink:0}
#panel[data-tab="inventory"] .sheet-content,
#panel[data-tab="warehouses"] .sheet-content,
#panel[data-tab="more"] .sheet-content{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:17px 16px 28px;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
body:has(#panel[data-tab="inventory"]) .map-credits,
body:has(#panel[data-tab="warehouses"]) .map-credits,
body:has(#panel[data-tab="more"]) .map-credits,
body:has(#panel[data-tab="inventory"]) .leaflet-bottom.leaflet-right,
body:has(#panel[data-tab="warehouses"]) .leaflet-bottom.leaflet-right,
body:has(#panel[data-tab="more"]) .leaflet-bottom.leaflet-right{display:none!important}
#panel:not(.has-selection):not(.is-expanded):not([data-tab=top]):not([data-tab=rules]):not([data-tab=market]):not([data-tab=myzones]):not([data-tab=inventory]):not([data-tab=warehouses]):not([data-tab=more]){
  height:calc(116px + env(safe-area-inset-bottom,0px));
}
.district-page{color:#fff}
.district-section-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 15px}
.district-section-head small{font-size:10px;color:#b18fa7;font-weight:700;letter-spacing:.6px}
.district-section-head h2{font-size:23px;font-weight:820;letter-spacing:-.5px;margin:4px 0 0}
.district-section-head>span{font-size:11px;color:#bbb1bb}
.district-pills{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;margin-bottom:8px;scrollbar-width:none}
.district-pills button{flex:none;white-space:nowrap;background:#1a161a;color:#baadb7;
  border:1px solid #322b30;border-radius:8px;font-size:11px;padding:8px 10px;font-weight:650}
.district-pills button.active{background:#402438;border-color:#a35c8c;color:#f8c9e7}
.district-inventory-row{display:flex;align-items:center;gap:12px;width:100%;min-height:67px;
  padding:11px 3px;border:0;border-bottom:1px solid #302a2e;background:none;
  text-align:left;color:#fff}
.district-emoji{display:grid;place-items:center;flex:none;width:42px;height:42px;
  border-radius:11px;background:#231b22;font-size:27px}
.district-text{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}
.district-text strong{font-size:13px;font-weight:740;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.district-text small{font-size:11px;color:#aaa0aa;line-height:1.35}
.district-arrow{color:#ec9ccf;font-size:24px}
.district-empty{padding:24px 5px;text-align:center}
.district-empty strong{font-size:14px}
.district-empty p{max-width:300px;margin:8px auto;color:#9e939d;font-size:12px;line-height:1.5}
.district-button{flex:none;min-height:36px;padding:8px 11px;
  color:#f2b4dc;background:#251521;border:1px solid #7d4468;
  border-radius:9px;font-size:11px;font-weight:740}
.district-button.primary{width:100%;background:#e57ac6;color:#1d101a;border:0;font-size:13px}
.district-button.muted{color:#ae849c;border-color:#46323c;margin-top:20px}
.district-button:disabled{opacity:.42}
.district-detail-emoji{font-size:51px;line-height:1.25;margin:5px 0 9px}
.district-modal{position:fixed;inset:0;z-index:3600;display:flex;align-items:center;justify-content:center;
  padding:18px;background:#000b;backdrop-filter:blur(7px)}
.district-modal[hidden]{display:none!important}
.district-modal-card{width:100%;max-width:405px;max-height:calc(100dvh - 38px);
  overflow-y:auto;background:#171116;border:1px solid #67425b;border-radius:17px;
  padding:20px;position:relative;text-align:center;box-shadow:0 22px 56px #0006}
.district-modal-card h2{font-size:22px;margin:6px 0 3px}
.district-detail-rarity{font-size:12px;color:#f1b0d9;margin-bottom:16px}
.district-close{position:absolute;right:12px;top:10px;width:31px;height:31px;
  border-radius:8px;background:#30202a;color:#fff;font-size:14px}
.district-detail-stats{text-align:left;border-top:1px solid #40313c}
.district-stat-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid #40313c}
.district-stat-row span{color:#a99aa5;font-size:11px}
.district-stat-row strong{color:#fff;font-size:12px;text-align:right}
.district-detail-actions{display:flex;flex-direction:column;gap:8px;margin-top:15px}
.district-detail-actions .district-button{width:100%;min-height:41px}
.district-help{font-size:11px;color:#b4a7b0;line-height:1.5;margin:10px 0}
.district-form{display:flex;flex-direction:column;gap:11px;margin:14px 0;padding:15px 0;
  border-top:1px solid #32272d}
.district-form input,.district-form select{width:100%;height:43px;border-radius:10px;
  background:#211a20;border:1px solid #493542;color:#fff;padding:10px 12px;
  font-size:13px;outline:none}
.district-form input:focus,.district-form select:focus{border-color:#e57ac6}
.district-form input::placeholder{color:#857983}
.district-warehouse-head{display:flex;gap:12px;align-items:center;padding:15px 0}
.district-warehouse-emoji{font-size:37px}
.district-warehouse-head h3{margin:0 0 5px;font-size:18px}
.district-warehouse-head p{margin:0;color:#9b909a;font-size:11px}
.district-warehouse-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.district-warehouse-metrics div{background:#211820;border:1px solid #352832;
  border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:5px}
.district-warehouse-metrics small{font-size:10px;color:#b09ead}
.district-warehouse-metrics strong{font-size:16px}
.district-heading{margin:18px 0 10px;font-size:15px}
.district-member,.district-invite{display:flex;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid #362a34}
.district-invite .district-button{min-width:56px;padding:8px 6px}
.district-achievement{padding:12px 0;border-bottom:1px solid #302830;
  color:#f0dde8;font-size:12px}
.district-more-grid{display:flex;flex-direction:column}
.district-more-grid button{display:flex;align-items:center;gap:14px;min-height:67px;
  border:0;border-bottom:1px solid #332a30;background:transparent;text-align:left;
  color:#fff;font-size:25px}
.district-more-grid button span{display:flex;flex-direction:column;gap:5px;
  font-size:14px;font-weight:720}
.district-more-grid button small{font-size:11px;font-weight:400;color:#a99ba5}
.district-chest-icon{border:0!important;background:transparent!important}
.district-chest-icon span{display:block;pointer-events:none;font-size:28px;
  line-height:1;filter:drop-shadow(0 2px 4px #000b);
  animation:district-chest-bob 2s ease-in-out infinite alternate}
@keyframes district-chest-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.district-chest-icon span{animation:none}}
@media(orientation:landscape) and (max-height:500px){
  #panel[data-tab="inventory"],#panel[data-tab="warehouses"],#panel[data-tab="more"]{
    top:calc(58px + env(safe-area-inset-top,0px));bottom:0;left:0;right:0;
    width:100%;height:auto;max-height:none;border-radius:0}
}

/* РАЙОНЫ: level upgrade preview comes from the game API, not JS estimates. */
.district-zone-select{
  display:block;width:100%;min-height:43px;padding:9px 12px;
  background:#211a20;border:1px solid #5d3c50;border-radius:10px;
  color:#fff;font:inherit;font-size:12px
}
.district-zone-select:focus-visible{outline:2px solid #e57ac6;outline-offset:1px}
.district-upgrade-preview{
  display:flex;flex-direction:column;gap:0;
  margin-top:5px;padding:11px 12px 7px;
  background:#1b141a;border:1px solid #49313f;border-radius:11px
}
.district-upgrade-heading{display:block;text-align:left;margin-bottom:7px;
  font-size:12px;font-weight:760;color:#f0a7d3}
.district-upgrade-line{display:grid;
  grid-template-columns:minmax(55px,1fr) auto 14px auto;
  align-items:center;gap:6px;min-height:30px;text-align:left;
  border-bottom:1px solid #342630}
.district-upgrade-line:last-child{border-bottom:0}
.district-upgrade-line>span:first-child{color:#b7a7b2;font-size:10px}
.district-upgrade-line small{color:#b7a7b2;font-size:10px}
.district-upgrade-line strong{color:#fff;font-size:10px}
.district-upgrade-arrow{color:#e57ac6;font-size:12px;text-align:center}
.district-upgrade-done{padding:10px 12px;margin-bottom:12px;
  color:#fff;background:#271727;border:1px solid #9b577f;
  border-radius:10px;text-align:left}
.district-upgrade-done strong{color:#f1a8d8;font-size:12px}
.district-upgrade-done p{font-size:11px;margin:5px 0 0;line-height:1.4}
.district-member{flex-wrap:wrap}
.district-member>.district-text{min-width:100px;flex:1}
.district-member>.district-button{padding:8px 9px;font-size:10px}
@media(max-width:370px){
  .district-upgrade-line{grid-template-columns:minmax(48px,1fr) auto 10px auto;gap:4px}
  .district-upgrade-line small,.district-upgrade-line strong{font-size:9px}
}

/* Chest preview: same modest modal design as the pet inventory. */
.chest-dialog{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.chest-dialog-emoji{font-size:57px;line-height:1.2;padding:8px 0}
.chest-dialog h2{font-size:20px;margin:2px 0 0;font-weight:780}
.chest-dialog-place{font-size:13px;color:#f0c0dd;margin:0}
.chest-dialog .district-help{font-size:12px;line-height:1.55;text-align:center;
  color:#ada2aa;margin:7px 0 12px}
.chest-dialog .district-button{width:100%;min-height:44px}