* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #0e1621;
  overflow: hidden;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Full viewport height incl. mobile URL-bar / Telegram WebView changes */
  height: 100%;
  height: 100dvh;
  z-index: 0;
}

/* settings: gear button (top-right) + panel under it */
#setBtn {
  position: absolute;
  top: calc(10px + var(--tb-h) + env(safe-area-inset-top));
  right: 10px;
  z-index: 600;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 22, 33, 0.85);
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#setBtn:active { transform: scale(0.94); }
#setPanel {
  position: absolute;
  top: calc(60px + var(--tb-h) + env(safe-area-inset-top));
  right: 10px;
  z-index: 750;
  width: 300px;
  max-width: calc(100% - 20px);
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 22, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #eaf2fb;
}
#setPanel.hidden { display: none; }
#setPanel #setClose { width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #eaf2fb; cursor: pointer; }
.setBody { padding: 4px 12px 12px; overflow-y: auto; }
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 14px; cursor: pointer; }
.setRow input { width: 20px; height: 20px; accent-color: #22c55e; cursor: pointer; }

/* online players: magnifier button (top-left) + dropdown list */
#findBtn {
  position: absolute;
  top: calc(10px + var(--tb-h) + env(safe-area-inset-top));
  left: 10px;
  z-index: 600;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 22, 33, 0.85);
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#findBtn:active { transform: scale(0.94); }
/* pin (teleport to the main base): under the magnifier; green ring when it is on */
#pinBtn {
  position: absolute;
  top: calc(10px + var(--tb-h) + 52px + env(safe-area-inset-top));
  left: 10px;
  z-index: 600;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(14, 22, 33, 0.85);
  color: #eaf2fb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#pinBtn:active { transform: scale(0.94); }
#pinBtn.hidden { display: none; }
#pinBtn.on { border-color: #22c55e; background: #16a34a; color: #fff; }
/* how many players are online */
#findCount {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid #0e1621;
  color: #06210f;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}
#findCount.hidden { display: none; }
#findPanel {
  position: absolute;
  top: calc(60px + var(--tb-h) + env(safe-area-inset-top));
  left: 10px;
  z-index: 750;
  width: 250px;
  max-width: calc(100% - 20px);
  max-height: 55dvh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 22, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #eaf2fb;
}
#findPanel.hidden { display: none; }
.findHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px 14px;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#findClose {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #374151;
  color: #eaf2fb;
  cursor: pointer;
}
#findList { overflow-y: auto; padding: 4px; }
.findRow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.findRow:active { background: rgba(255, 255, 255, 0.08); }
.findRow img, .findDot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #eef2f7; }
.findNick { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.findDist { flex: 0 0 auto; font-size: 12px; opacity: 0.65; }
.findEmpty { padding: 14px; font-size: 13px; opacity: 0.6; text-align: center; }

/* connection dot (top-left, next to the magnifier) */
#netDot {
  position: absolute;
  top: calc(25px + var(--tb-h) + env(safe-area-inset-top));
  left: 60px;
  z-index: 500;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(14, 22, 33, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background: #facc15;
  transition: background 0.3s ease;
}
#netDot.online { background: #22c55e; }
#netDot.connecting { animation: netBlink 1s ease-in-out infinite; }
#netDot.offline { background: #ef4444; animation: netBlink 1s ease-in-out infinite; }
@keyframes netBlink { 50% { opacity: 0.35; } }

/* game messages: toast at the top center */
#status {
  position: absolute;
  top: calc(8px + var(--tb-h) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  max-width: calc(100% - 60px);
  background: rgba(14, 22, 33, 0.9);
  color: #eaf2fb;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-align: center;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#status.hidden { opacity: 0; }

/* player pins: just the avatar figure, like a building — only a hairline
   contour (white; blue for you) so it reads on light and dark maps */
.player-pin { background: transparent; border: none; }
.bpn.pawn img {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.bpn.pawn.me img {
  filter: drop-shadow(0 0 1px #2d7ff9) drop-shadow(0 0 1px #2d7ff9) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
/* nick bubble shown on tap */
.pin {
  display: block;
  border-radius: 50%;
  background: var(--c, #e74c3c);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent),
              0 2px 6px rgba(0, 0, 0, 0.45);
}

/* keep tooltips readable */
.leaflet-tooltip {
  background: rgba(14, 22, 33, 0.9);
  color: #fff;
  border: none;
  font-size: 12px;
}
.leaflet-tooltip-top::before { border-top-color: rgba(14, 22, 33, 0.9); }

/* hex grid — borders hidden by default, shown only when pressed (selected/hover) */
.hex-cell {
  fill: transparent;
  fill-opacity: 0.25;
  stroke: none;            /* no visible borders by default */
  stroke-width: 0;
  transition: fill 0.12s ease, fill-opacity 0.12s ease, stroke 0.12s ease;
}
.hex-cell.is-hover { fill: #ffffff; fill-opacity: 0.45; stroke: #ffffff; stroke-width: 1.5; }
.hex-cell.state-free { fill: #2d7ff9; fill-opacity: 0.16; stroke: none; }
.hex-cell.state-selected { fill: #22c55e; fill-opacity: 0.4; stroke: #22c55e; stroke-width: 2; }
/* built hexes: a 10 % tint in the owner's color (green yours, red other players'), no
   lines of their own — one outline around the whole territory is drawn by drawTerritory() */
.hex-cell.state-build { fill: #22c55e; fill-opacity: 0.1; stroke: none; }
.hex-cell.state-enemy { fill: #ef4444; fill-opacity: 0.1; stroke: none; }

/* --- admin / test panel ------------------------------------------------- */
/* quick commands: three round buttons in a row left of 💬 (right edge, middle) while it is pressed */
#quickMenu.hidden { display: none; }
#quickMenu {
  position: absolute;
  right: 66px;
  top: 50%;
  margin-top: -23px;
  z-index: 650;
  display: flex;
  gap: 10px;
  pointer-events: none; /* the finger stays "on" 💬: the buttons are found by where it is */
  animation: qIn 0.12s ease-out;
}
@keyframes qIn { from { opacity: 0; transform: translateX(12px); } }
.qBtn {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(14, 22, 33, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease, background 0.08s ease;
}
.qBtn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qBuild { color: #60a5fa; }
.qUpgrade { color: #22c55e; }
.qDemolish { color: #ef4444; }
.qBtn.over { transform: scale(1.2); border-color: currentColor; background: rgba(30, 41, 59, 0.98); }
.qBtn:disabled { opacity: 0.35; }

#adminToggle {
  position: absolute;
  right: 12px;
  bottom: calc(146px + var(--pb-h) + env(safe-area-inset-bottom));
  z-index: 600;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 22, 33, 0.85);
  color: #eaf2fb;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
#adminToggle:active { transform: scale(0.94); }


/* full-screen admin panel; content in a centered column */
#adminPanel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, #172130, #0c121c);
  color: #eaf2fb;
  user-select: none;
}
.admInner { max-width: 520px; margin: 0 auto; }
#adminPanel.hidden, #adminToggle.hidden { display: none; }

/* floating joystick on the left side of the map */
#joyDock {
  position: absolute;
  left: 12px;
  bottom: calc(16px + var(--pb-h) + env(safe-area-inset-bottom));
  z-index: 600;
  padding: 8px;
  background: rgba(14, 22, 33, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  touch-action: none;
  user-select: none;
}
#joyDock.hidden { display: none; }
#joySpeed { width: 116px; margin: 8px auto 0; text-align: center; }
#joySpeed input[type='range'] { width: 100%; accent-color: #2d7ff9; touch-action: pan-x; }
#joySpeedText { display: block; font-size: 12px; font-weight: 600; color: #eaf2fb; }
.admTeleport {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(45, 127, 249, 0.2);
  font-size: 15px;
  cursor: pointer;
}
.admTeleport:active { transform: scale(0.92); }
.admTeleport:disabled { opacity: 0.3; cursor: default; }
#joyDock .admClose {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  font-size: 11px;
  background: rgba(14, 22, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 1;
}

/* access list */
.admSearch {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  color: #eaf2fb;
  font-size: 14px;
}
.admSearch:focus { outline: none; border-color: #2d7ff9; }
.admPlayers { display: flex; flex-direction: column; gap: 4px; }
.admPlayer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.admPlayer img { width: 30px; height: 30px; border-radius: 50%; background: #eef2f7; flex-shrink: 0; }
.admPlayer .admInfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admPlayer .admNick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admPlayer .admSeen { font-size: 11px; color: #8fa3b8; }
.admPlayer .admSeen.online { color: #22c55e; }
.admPlayer .admTag { font-size: 11px; color: #f5b301; }
.admEmpty { font-size: 13px; color: #8fa3b8; padding: 6px 0; }

.admHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.admTitle { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
.admClose {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #eaf2fb;
  font-size: 13px;
  cursor: pointer;
}
.admClose:active { transform: scale(0.92); }

/* each block is a soft card */
.admSection {
  padding: 10px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}
.admSection.hidden { display: none; }
.admSecTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8fa3b8;
  margin-bottom: 8px;
}

#joystick {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(45, 127, 249, 0.16) 0%, rgba(45, 127, 249, 0.04) 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(45, 127, 249, 0.35);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
  touch-action: none;
}
#joyKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b9dff, #2d7ff9 60%, #1d5fc4);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: transform 0.05s linear;
}

.adminRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}
.adminBtn {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eaf2fb;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.adminBtn:active { transform: scale(0.96); }
.admPrimary { background: #2d7ff9; }
.admWide { width: 100%; margin-top: 8px; }

/* tabs of the admin panel */
.admTabs { display: flex; gap: 6px; margin-bottom: 4px; }
.admTabBtn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #8fa3b8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.admTabBtn.active { background: #2d7ff9; color: #fff; }
.admTab.hidden, .admTabBtn.hidden, .admSub.hidden { display: none; }

/* switch inside the activity tab: xenobases | AI players */
.admSubTabs { display: flex; gap: 6px; margin: 4px 0 2px; padding: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; }
.admSubBtn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #8fa3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.admSubBtn.active { background: #7c3aed; color: #fff; }
.admSub[data-sub="ai"] .admSection { border-color: rgba(34, 197, 94, 0.35); }
.admSub[data-sub="xeno"] .admSection { border-color: rgba(124, 58, 237, 0.4); }
.admHint { font-size: 11px; line-height: 1.4; color: #8fa3b8; margin-top: 4px; }
.admGoldBtn + .admGoldBtn { margin-top: 8px; }
.admSubTitle { margin-top: 12px; }
.admLevelRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.admLevelBtn { padding: 9px 0; font-size: 14px; }
.admGoldBtn {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: #3b2a00;
  background: linear-gradient(180deg, #ffd95a, #f5b301);
  box-shadow: 0 3px 10px rgba(245, 179, 1, 0.3);
}

/* iOS-style switch for test mode */
.admSwitch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admSwitch input { display: none; }
.admSlider {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s;
}
.admSlider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.admSwitch input:checked + .admSlider { background: #22c55e; }
.admSwitch input:checked + .admSlider::after { transform: translateX(16px); }

/* --- debug parameters block --------------------------------------------- */
.dbgRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}
.dbgRow input[type='number'] {
  width: 70px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #eaf2fb;
  padding: 5px 6px;
  font-size: 13px;
  text-align: right;
}
.dbgRow input[type='number']:focus { outline: none; border-color: #2d7ff9; }
.dbgRow .admSelect {
  max-width: 60%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #eaf2fb;
  padding: 5px 6px;
  font-size: 13px;
}
.dbgRow .admSelect option { color: #111; }
.admTitleRow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
/* the owner's overview of every title: tap a row to edit it */
.tcList { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.tcRow { text-align: left; font-size: 12px; padding: 6px 8px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.18); color: inherit; cursor: pointer; }
.tcRow.sel { border-color: #2d7ff9; }
.tcRow b { font-weight: 600; }
.tcRow small { display: block; opacity: 0.7; margin-top: 2px; }

/* --- building markers ---------------------------------------------------- */
.building-pin { background: transparent; border: none; }
/* flag on the tapped build point (anchored at the pole's foot) */
.build-flag { background: transparent; border: none; }
.build-flag svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
/* the building picture itself, no plate; a thin glow in the owner's color
   (green yours, red others) keeps it readable on any map background */
.bpn {
  position: relative;
  display: block;
  cursor: pointer;
  /* --ik is set by the JS on every zoom frame: icons grow/shrink together with the map */
  transform: scale(var(--ik, 1));
  transform-origin: 50% 50%; /* scaling keeps the picture centered on its point */
}
/* animated zoom (buttons, wheel, double tap): same easing and time as Leaflet's own */
.leaflet-zoom-anim .bpn { transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1); }
.bpn img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 1px #22c55e) drop-shadow(0 0 1px #22c55e) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.bpn.enemy img {
  filter: drop-shadow(0 0 1px #ef4444) drop-shadow(0 0 1px #ef4444) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
/* stored gold above own buildings — only when zoomed in close (#map.show-gold) */
.bGold {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  margin-bottom: 1px;
  /* white digits with a light black outline (eight 1px shadows make an even ring on every browser) */
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.6), 1px -1px 0 rgba(0, 0, 0, 0.6),
    -1px 0 0 rgba(0, 0, 0, 0.6), 1px 0 0 rgba(0, 0, 0, 0.6),
    -1px 1px 0 rgba(0, 0, 0, 0.6), 0 1px 0 rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(0, 0, 0, 0.6);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 13px;
  white-space: nowrap;
  pointer-events: none;
}
.bGold.full { color: #fbbf24; } /* storage full: amber digits, time to collect */
#map.show-gold .bGold:not(:empty) { display: block; }

/* --- profile bar (full-width strip at the bottom, ~1 cm tall) ----------- */
:root { --pb-h: 57px; --tb-h: 30px; } /* bottom bar 57 px (was 38, +50 %); --tb-h = top numbers */
#profileBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 550;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: calc(var(--pb-h) + env(safe-area-inset-bottom));
  padding: 0 16px calc(5px + env(safe-area-inset-bottom)) 10px; /* 5px = the xp bar along the bottom edge */
  background: rgba(14, 22, 33, 0.92);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35);
  color: #eaf2fb;
  font: inherit;
  cursor: pointer;
  touch-action: none; /* we handle the swipe ourselves */
  user-select: none;
}
#profileBar.hidden { display: none; }
/* little grab line hinting "swipe me up" */
#profileBar::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 34px;
  height: 3px;
  margin-left: -17px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}
#profileBar:active { background: rgba(24, 34, 48, 0.95); }
/* keep Leaflet's zoom buttons / attribution above the strip */
.leaflet-bottom { bottom: calc(var(--pb-h) + env(safe-area-inset-bottom)); }
#pbAvWrap { position: relative; flex: 0 0 auto; display: flex; }
#pbAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #2d7ff9;
}
/* player level badge on the avatar's corner */
#pbLevel {
  position: absolute;
  right: -6px;
  bottom: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f59e0b;
  border: 2px solid #0e1621;
  color: #1f1300;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
#pbInfo { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; text-align: left; }
#pbNick {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the military title (рядовой … генерал армии) under the nick */
#pbRank { font-size: 12px; line-height: 1.1; color: #fcd34d; opacity: 0.9; }
/* xp progress to the next level: the full width of the bar, along its bottom edge */
#pbXp { position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom); height: 5px; background: rgba(255, 255, 255, 0.14); overflow: hidden; pointer-events: none; }
#pbXpFill { display: block; height: 100%; width: 0; background: #f59e0b; transition: width 0.4s ease; }
#pbGoldWrap {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #fcd34d;
  white-space: nowrap;
}

/* --- inventory sheet (slides up from the bottom) ------------------------ */
#invBackdrop {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(5, 10, 18, 0.5);
}
#invBackdrop.hidden { display: none; }
#invSheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 810;
  max-height: 75dvh;
  overflow-y: auto;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  background: #141f2d;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  color: #eaf2fb;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
#invSheet.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.25s ease;
}
#invGrab { display: flex; justify-content: center; padding: 10px 0 12px; cursor: pointer; touch-action: none; }
.invHandle { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.invHead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#invAvatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #2d7ff9; flex: 0 0 auto; }
.invHeadText { flex: 1 1 auto; min-width: 0; }
#invNick { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#invLevel { font-size: 13px; opacity: 0.75; margin-top: 2px; }
#invTitle { font-size: 13px; color: #fcd34d; margin-top: 2px; }
#invEdit {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #374151;
  font-size: 16px;
  cursor: pointer;
}
.invTitle { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
#invGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.invSlot {
  aspect-ratio: 1.7; /* low slots: the characteristics block above needs the room */
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}
.invEmpty { margin-top: 10px; font-size: 13px; opacity: 0.6; text-align: center; }
.invTitle2 { margin-top: 18px; }

/* map style picker (inside the inventory sheet) */
#mapStyles { display: flex; flex-wrap: wrap; gap: 8px; }
.msOpt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #eaf2fb;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.msOpt.selected { border-color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.msOpt:active { transform: scale(0.96); }
.msSw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); flex: 0 0 auto; }

/* map styles: background while tiles load + the muted-OSM filter */
#map.ms-dark, #map.ms-dark-clean { background: #1b1b1b; }
#map.ms-light, #map.ms-light-clean { background: #f0f0ee; }
#map.ms-osm-night { background: #1f2a36; }
#map.ms-osm-soft .leaflet-tile-pane { filter: grayscale(0.85) contrast(0.92) brightness(1.06); }
/* invert + turn the hue back = dark map with natural-looking green/blue */
#map.ms-osm-night .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(0.55) brightness(0.8) contrast(0.9); }

/* --- registration / profile editor -------------------------------------- */
#regOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 10, 18, 0.72);
  backdrop-filter: blur(4px);
}
#regOverlay.hidden { display: none; }
/* tutorial cards: same dark card as the registration */
#tutOverlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 18, 0.72); backdrop-filter: blur(4px); }
#tutOverlay.hidden, #tutCard .hidden { display: none; }
#tutCard { position: relative; width: 100%; max-width: 360px; max-height: 100%; overflow-y: auto; padding: 22px 18px 18px; background: #141f2d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; color: #eaf2fb; text-align: center; }
#tutSkip { position: absolute; top: 10px; right: 10px; padding: 6px 10px; border: none; border-radius: 999px; background: #374151; color: #b6c4d6; font: inherit; font-size: 12px; cursor: pointer; }
#tutIcon { font-size: 46px; line-height: 1; margin: 6px 0 10px; }
#tutTitle { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
#tutText { font-size: 14px; line-height: 1.45; color: #c8d4e3; min-height: 120px; }
#tutDots { display: flex; justify-content: center; gap: 5px; margin: 14px 0; }
#tutDots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
#tutDots i.on { background: #22c55e; }
#tutOpen { margin-top: 18px; background: #2d7ff9; color: #fff; }
/* "only in Telegram": same dark card, above everything, nothing to click */
#authBlock { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 18, 0.92); }
#authBlock.hidden { display: none; }
#authCard { width: 100%; max-width: 360px; padding: 20px 18px; background: #141f2d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; color: #eaf2fb; text-align: center; }
#authTitle { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
#authText { font-size: 14px; line-height: 1.4; color: #b6c4d6; }
#regCard {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 18px 18px;
  background: #141f2d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: #eaf2fb;
  text-align: center;
}
#regClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #374151;
  color: #eaf2fb;
  cursor: pointer;
}
#regClose.hidden { display: none; }
#regTitle { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
#regPreview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid #2d7ff9;
  margin-bottom: 12px;
}
#regNick {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #eaf2fb;
  font-size: 16px; /* ≥16px: iOS doesn't zoom the page on focus */
  text-align: center;
}
#regNick:focus { outline: none; border-color: #2d7ff9; }
#regAvatars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.avOpt {
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  aspect-ratio: 1;
}
.avOpt img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.avOpt.selected { border-color: #22c55e; }
.avOpt:active { transform: scale(0.94); }
#regError { min-height: 18px; margin-bottom: 8px; font-size: 13px; color: #f87171; }
#regSubmit { width: 100%; }

/* --- upgrade panel -------------------------------------------------------- */
/* building card, enemy (xenobase) card and build confirmation share one look:
   bottom sheet, exactly 1/3 of the screen (covers the profile bar) */
#upgradePanel, #enemyPanel, #buildPanel, #dropPanel, #squadPanel, #playerPanel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 700;
  height: 33.333dvh;
  overflow-y: auto; /* content that doesn't fit scrolls inside, the sheet never grows */
  padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
  background: #141f2d;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  color: #eaf2fb;
  text-align: left;
  animation: sheetUp 0.22s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } }
#upgradePanel.hidden, #enemyPanel.hidden, #buildPanel.hidden, #dropPanel.hidden, #squadPanel.hidden, #playerPanel.hidden { display: none; }
/* infantry: send panel and the squads on the map (a stub look: a round robot vacuum) */
#squadPanel { z-index: 720; border-top-color: rgba(220, 38, 38, 0.6); }
#sqUnits { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.sqUnit { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: #eaf2fb; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.sqUnit span { font-size: 12px; opacity: 0.75; }
.sqUnit.on { border-color: #dc2626; background: rgba(220, 38, 38, 0.15); }
/* 🪖 army button: under the ЧВК button; the army sheet */
#armyBtn { position: absolute; top: calc(10px + var(--tb-h) + 156px + env(safe-area-inset-top)); left: 10px; z-index: 600; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(14, 22, 33, 0.85); font-size: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); cursor: pointer; }
#armyBtn:active { transform: scale(0.94); }
#armyBtn.hidden, #armyPanel.hidden, #opsBtn.hidden, #opsPanel.hidden, #opsBar.hidden, #opsBar .hidden { display: none; }
/* the army and the operation plan: the whole screen between the top numbers and the bottom bar, like the ЧВК */
#armyPanel, #opsPanel {
  position: absolute;
  top: calc(var(--tb-h) + env(safe-area-inset-top));
  bottom: calc(var(--pb-h) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 760;
  overflow-y: auto;
  background: rgb(20, 26, 18); /* khaki-dark: military */
  color: #eaf2fb;
}
#armyPanel > *, #opsPanel > * { max-width: 560px; margin-left: auto; margin-right: auto; }
#armyPanel > :not(.findHead), .opsBody { padding-left: 14px; padding-right: 14px; }
#armyPanel .findHead, #opsPanel .findHead { position: sticky; top: 0; z-index: 1; background: rgb(20, 26, 18); }
#armyClose, #opsClose { width: 30px; height: 30px; border: none; border-radius: 50%; background: #374151; color: #eaf2fb; cursor: pointer; }
#armyTitle { margin: 10px 0; }
.opsBody { padding-top: 10px; padding-bottom: 16px; }
.opsGo { margin: 12px 0; }
.armyBtnSm.opsArrowBtn { background: #b91c1c; }
/* ladder of formations */
.ladder { display: flex; flex-direction: column; gap: 2px; }
.ladderRow { display: grid; grid-template-columns: 64px 92px 1fr; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px; font-size: 13px; }
.ladderRow span { font-size: 11px; opacity: 0.7; }
.ladderRow.on { background: rgba(163, 177, 108, 0.22); outline: 1px solid rgba(163, 177, 108, 0.6); }
/* stars like on shoulder boards: small silver, big gold, gold in a frame */
.stars { display: inline-block; white-space: nowrap; line-height: 1; letter-spacing: -1px; margin-right: 6px; vertical-align: middle; }
.stars.small { font-size: 10px; color: #cbd5e1; }
.stars.big { font-size: 15px; color: #facc15; text-shadow: 0 0 3px rgba(250, 204, 21, 0.5); }
.stars.framed { padding: 1px 3px; border: 1px solid #facc15; border-radius: 4px; background: rgba(250, 204, 21, 0.12); }
.armyName .stars { margin-bottom: 2px; }
/* soldiers strip: green in the ranks, red missing */
.solBar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: #7f1d1d; overflow: hidden; }
.solBar i { display: block; height: 100%; background: #22c55e; }
.sqUnit { flex-wrap: wrap; }
.sqUnit .solBar { flex: 1 0 100%; }
/* the red arrow button: under the army */
#opsBtn { position: absolute; top: calc(10px + var(--tb-h) + 208px + env(safe-area-inset-top)); left: 10px; z-index: 600; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: none; background: rgba(14, 22, 33, 0.85); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); cursor: pointer; }
#opsBtn:active { transform: scale(0.94); }
.opsIcon { display: block; width: 26px; height: 26px; margin: auto; }
.opsTitle { display: inline-flex; align-items: center; gap: 6px; }
.opsTitle .opsIcon { width: 20px; height: 20px; margin: 0; }
/* drawing on the map: the hint bar on top */
#opsBar { position: absolute; top: calc(64px + var(--tb-h) + env(safe-area-inset-top)); left: 60px; right: 10px; z-index: 770; padding: 8px 10px; border-radius: 12px; background: rgba(127, 29, 29, 0.95); color: #fff; font-size: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.opsBarBtns { display: flex; gap: 6px; margin-top: 6px; }
.opsBarBtns button { flex: 1; padding: 7px; border: none; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; cursor: pointer; }
/* the landing point on the map */
.opsDrop { background: transparent; border: none; text-align: center; pointer-events: none; }
.opsDrop span { display: block; font-size: 52px; line-height: 68px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.opsDrop b { display: block; margin-top: -6px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.armyRow { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.armyName { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.armyName span { font-size: 12px; opacity: 0.7; }
.armyBtnSm { flex: 0 0 auto; padding: 7px 9px; border: none; border-radius: 8px; background: #4d7c0f; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.armyBtnSm:disabled { background: #374151; color: #9ca3af; cursor: default; }
.armyHint { margin-top: 12px; }
/* ЧВК: a skull in a crosshair */
.pmcEmblem { display: block; width: 26px; height: 26px; margin: auto; }
.pmcTitle { display: inline-flex; align-items: center; gap: 6px; }
.pmcTitle .pmcEmblem { width: 20px; height: 20px; margin: 0; }
.upBtn.sqSendBtn { background: #7c2d12; color: #fff; }
.squad-pin { background: transparent; border: none; }
.squad { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, #9ca3af 0 4px, #374151 5px 9px, #4b5563 10px 13px, #1f2937 14px);
  border: 2px solid #dc2626; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.squad.mine { border-color: #2d7ff9; }
.squad::before { content: ''; position: absolute; top: 3px; left: 50%; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: #22c55e; } /* the "front" light */
.squad b { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; min-width: 18px; padding: 0 4px; border-radius: 999px; background: #0e1621; color: #fff; font-size: 11px; line-height: 16px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3); }
#enemyPanel { border-top-color: rgba(168, 85, 247, 0.6); } /* xenobase = purple */
/* building and xenobase cards: a bit taller than a third of the screen and as tall as the content
   needs (up to 85 %), so nothing has to be scrolled */
#upgradePanel, #enemyPanel { height: auto; min-height: 38dvh; max-height: 85dvh; }
/* the attack button only exists for other players' buildings */
#upFoe.hidden, #upFoeFar.hidden, #upFoeCovered.hidden { display: none; }
#upClose, #enClose, #dpClose, #plClose, #upDelete {
  position: absolute;
  top: 10px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  color: #eaf2fb;
  cursor: pointer;
}
#upClose, #enClose, #dpClose, #plClose { right: 12px; background: #374151; }
/* trash: red, only for own buildings, dimmed when out of reach */
#upDelete { right: 48px; display: flex; align-items: center; justify-content: center; background: #ef4444; color: #fff; }
#upDelete:disabled { background: #374151; color: #9ca3af; cursor: default; }
#upDelete:active:not(:disabled) { transform: scale(0.94); }
#upgradePanel.enemy #upDelete { display: none; }
.upHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 80px; text-align: left; }
.upStats { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.upStats .upInfo { margin: 0; }
/* building picture in the card — no plate, same look as on the map */
#upIconWrap { flex: 0 0 auto; width: 48px; height: 48px; }
#upIcon { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1px #22c55e) drop-shadow(0 0 1px #22c55e); }
#upgradePanel.enemy #upIcon { filter: drop-shadow(0 0 1px #ef4444) drop-shadow(0 0 1px #ef4444); }
.upHeadText { min-width: 0; }
#upName { font-size: 15px; font-weight: 700; }
#upOwner { font-size: 12px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#upLevel { font-size: 14px; font-weight: 600; }
/* progress to the next tier picture */
#upTierBar { display: block; height: 5px; margin-bottom: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#upTierFill { display: block; height: 100%; width: 0; background: #f59e0b; }
#upOwn.hidden, #upFar.hidden, #upHint.hidden { display: none; }
#upFar { color: #fca5a5; margin: 0; }

/* build confirmation: content centered in the sheet, big buttons at the bottom */
#buildPanel { display: flex; flex-direction: column; text-align: center; }
#buildPanel.hidden { display: none; }
#buildPanel .bpTitle { margin-top: auto; }       /* title + info centered above the buttons */
#buildPanel #bpInfo { margin: 0 0 auto; }
#buildPanel .upRow { margin-top: 12px; }
#buildPanel .upBtn { padding: 12px; font-size: 15px; }
.bpTitle { font-size: 17px; font-weight: 700; margin-bottom: 10px; }

.upRow { display: flex; gap: 8px; }
.upBtn {
  flex: 1;
  border: none;
  background: #22c55e;
  color: #06210f;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.upBtn:disabled { background: #374151; color: #9ca3af; cursor: default; }
.upBtn:active:not(:disabled) { transform: scale(0.97); }
.upClose { flex: 0 0 auto; background: #374151; color: #eaf2fb; }
.upInfo { font-size: 13px; opacity: 0.85; margin: -4px 0 8px; }
.upInfo:empty { display: none; }
.upWide, .upCollect { display: block; width: 100%; margin-bottom: 8px; }
.upCollect { background: #f59e0b; color: #1f1300; }
/* the urgent recruitment block of the barracks card */
#upRush { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 8px; margin-top: 4px; }
.rushTitle { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.rushRow { display: flex; gap: 6px; margin-bottom: 8px; }
.rushBtns { flex-wrap: wrap; }
#rushN { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid #4b5563; border-radius: 8px; background: #111827; color: #fff; font: inherit; font-size: 15px; }
.rushAdd { flex: 1 1 0; padding: 7px 4px; border: none; border-radius: 8px; background: #374151; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
#rushClear { flex: 0 0 40px; }
#rushGo:not(:disabled) { background: #b45309; color: #fff; }
/* the garrison card: how many soldiers go in / come out */
#garN { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid #4b5563; border-radius: 8px; background: #111827; color: #fff; font: inherit; font-size: 15px; }
#garClear { flex: 0 0 40px; }
#garIn, #garOut { flex: 1 1 0; margin: 0; }

/* gold coin icon (drawn in CSS so it looks the same on every device) */
.coin {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0 0 18%, #fcd34d 19% 55%, #d97706 100%);
  box-shadow: inset 0 0 0 0.09em #b45309;
}
#pbGoldWrap .coin { margin-right: 5px; }

/* --- enemy camps ---------------------------------------------------------- */
/* enemy buildings glow purple (red = other players, green = yours) */
/* cells fenced off around an enemy HQ */
.hex-cell.state-reserved { fill: #7c3aed; fill-opacity: 0.1; stroke: none; }
.upPoison { color: #bef264; }
.hex-cell.state-mob { fill: #7c3aed; fill-opacity: 0.12; stroke: #a855f7; stroke-opacity: 0.85; stroke-width: 1.5; }
.bpn.mob img {
  filter: drop-shadow(0 0 1px #a855f7) drop-shadow(0 0 1px #a855f7) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
/* hp bar above every enemy building */
.bHp {
  position: absolute;
  bottom: 100%;
  left: 15%;
  width: 70%;
  height: 4px;
  margin-bottom: 1px;
  border-radius: 2px;
  background: rgba(14, 22, 33, 0.85);
  box-shadow: 0 0 0 1px rgba(14, 22, 33, 0.85);
  overflow: hidden;
  pointer-events: none;
}
.bHp i { display: block; height: 100%; background: #ef4444; }
/* health of a poisoned player building: under its feet instead of above */
.bHp.foot { bottom: auto; top: 90%; margin: 0; }
/* "-20" flying up from a hit enemy */
.dmg-pop { background: transparent; border: none; pointer-events: none; }
.dmg-pop b {
  display: block;
  color: #fca5a5;
  font: 800 15px/1 system-ui, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  animation: dmgPop 0.9s ease-out forwards;
}
@keyframes dmgPop {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-28px); opacity: 0; }
}

/* enemy card — frame is shared with the building card (see above) */
#enemyPanel #enFar.hidden, #enFar.hidden { display: none; }
#enemyPanel .upHead { padding-right: 44px; } /* only the ✕ here, no trash */
#enIconWrap { flex: 0 0 auto; width: 48px; height: 48px; }
#enIcon { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1px #a855f7) drop-shadow(0 0 1px #a855f7); }
#enName { font-size: 15px; font-weight: 700; }
#enRole { font-size: 12px; color: #d8b4fe; }
#enLevel { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#enemyPanel .upInfo { margin: 0 0 6px; }
#enHpBar {
  position: relative;
  display: block;
  height: 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
#enHpFill { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #f87171, #dc2626); transition: width 0.25s; }
#enHpText { position: absolute; inset: 0; font-size: 11px; line-height: 16px; text-shadow: 0 1px 1px #000; }
#enFar { color: #fca5a5; margin: 0; }
/* another player's card: same sheet, only the info (no numbers on the health bar) */
#playerPanel { border-top-color: rgba(45, 127, 249, 0.6); }
#playerPanel .upHead { padding-right: 44px; }
#plIconWrap { flex: 0 0 auto; width: 44px; height: 62px; }
#plIconWrap.hidden { display: none; }
#plIcon { display: block; width: 100%; height: 100%; object-fit: contain; }
#plName { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
#plTag { font-size: 12px; color: #c5d58a; }
#plTitle { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
#plHpBar { display: block; height: 12px; margin-bottom: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#plHpFill { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #4ade80, #16a34a); transition: width 0.25s; }
#plHpFill.low { background: linear-gradient(180deg, #f87171, #dc2626); }
#playerPanel .upInfo { margin: 0; }
.enAttack { background: #dc2626; color: #fff; }
/* admin control of the xenobases: four buttons in the card of an HQ */
#enAdmin { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
#enAdmin.hidden { display: none; }
#enAdmin .enAdminTitle { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: #d8b4fe; text-align: left; }
#enAdmin .adminBtn { width: 100%; margin: 0; padding: 9px 6px; font-size: 13px; }
#enAdmin .enClear { background: #7f1d1d; color: #fecaca; }

.admEnemyBtn { background: #7c3aed; }
/* the shield of a protected xenobase: a violet soap bubble over the main building */
.shieldBubble {
  position: absolute; left: -12%; top: -12%; width: 124%; height: 124%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.06) 55%, rgba(139, 92, 246, 0.38) 100%);
  border: 2px solid rgba(196, 181, 253, 0.85);
  box-shadow: inset 0 0 14px rgba(167, 139, 250, 0.55), 0 0 12px rgba(139, 92, 246, 0.55);
  animation: shieldPulse 3.4s ease-in-out infinite;
}
.shieldBubble::before { /* the glint */
  content: ''; position: absolute; left: 16%; top: 12%; width: 34%; height: 20%;
  border-radius: 50%; transform: rotate(-35deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
}
.shieldBubble::after { /* small second glint at the bottom right */
  content: ''; position: absolute; right: 18%; bottom: 14%; width: 14%; height: 8%;
  border-radius: 50%; transform: rotate(-35deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 72%);
}
@keyframes shieldPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* a burning building's hex blinks: its own colour (mine green, my ЧВК dark green, others red) ↔ grey */
.hexBurn { animation: 1.2s ease-in-out infinite; }
.hexBurn-build { animation-name: burnBuild; }
.hexBurn-ally { animation-name: burnAlly; }
.hexBurn-enemy { animation-name: burnEnemy; }
@keyframes burnBuild { 0%, 100% { fill: #22c55e; } 50% { fill: #6b7280; } }
@keyframes burnAlly { 0%, 100% { fill: #166534; } 50% { fill: #6b7280; } }
@keyframes burnEnemy { 0%, 100% { fill: #ef4444; } 50% { fill: #6b7280; } }

/* --- burning buildings: flames over the dimmed picture, timer + button in the card --- */
.bpn.burning img {
  filter: grayscale(0.7) brightness(0.65) drop-shadow(0 0 2px #f97316) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.bFire {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: bFlicker 0.9s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.9));
}
.leaflet-zoom-anim .bFire { animation-play-state: paused; } /* lighter zoom on phones */
.bFire.f1 { left: 28%; top: 6%; width: 44%; }
.bFire.f2 { left: 4%; top: 42%; width: 28%; animation-delay: -0.45s; }
@keyframes bFlicker {
  from { transform: scale(0.88, 0.95) rotate(-3deg); }
  to   { transform: scale(1.05, 1.08) rotate(3deg); }
}
#upBurn.hidden { display: none; }
.upFire { color: #fdba74; font-weight: 600; margin: 4px 0 6px; }
.upExt { background: #f97316; color: #1c0a00; }
#upHealBox.hidden { display: none; }
.upHeal { background: #22c55e; color: #052e16; }
.upHeal:disabled { background: #374151; color: #9ca3af; }
.upExt:disabled { background: #374151; color: #9ca3af; }

/* --- stats strip (top): health + hit power, same look as the profile bar ------ */
#topBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 550;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: calc(var(--tb-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  /* no strip, no colour: just the numbers (a soft shadow keeps them readable on any map) */
  background: none;
  border: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
  pointer-events: none; /* the empty part of the row does not block the map */
  font: inherit;
  cursor: pointer;
}
#topBar.hidden { display: none; }
#tbHp, #tbInv { pointer-events: auto; } /* only the numbers are tappable (open the inventory) */
/* minimal: just two numbers, no fill — health on the left, inventory filled / total on the right */
#tbHp, #tbInv { font-size: 13px; white-space: nowrap; opacity: 0.95; }
#tbHp { margin-right: auto; }
#tbHp b, #tbInv b { font-weight: 700; margin-left: 3px; }
#invCount { margin-left: 6px; font-weight: 400; opacity: 0.6; }

/* characteristics block in the inventory sheet */
#invStats { margin-bottom: 4px; }
.statRow { display: flex; justify-content: space-between; padding: 6px 2px; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.statRow b { color: #fcd34d; }
#stUpgrade { margin-top: 10px; margin-bottom: 0; }

/* the title block: the tasks of the next title */
.rkNext { font-size: 13px; padding: 2px 2px 6px; opacity: 0.9; }
.rkNext b { color: #fcd34d; }
.rkTop { font-size: 14px; padding: 6px 2px; }
.rkTask { display: flex; justify-content: space-between; gap: 8px; padding: 5px 2px; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rkTask b { font-weight: 600; white-space: nowrap; opacity: 0.8; }
.rkTask.done b { color: #86efac; opacity: 1; }
#rkClaim { margin-top: 10px; margin-bottom: 0; }

/* the 🔥 flying from you to the target you attack */
.bullet { background: transparent; border: none; }
.bullet span {
  display: block;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  filter: drop-shadow(0 0 5px #f97316);
}

/* gold bag on the ground (a burnt-out building): small, tap for the amount */
.gdrop-pin { background: transparent; border: none; }
.collector-pin { background: transparent; border: none; }
.collector { display: block; width: 56px; height: 56px; font-size: 44px; line-height: 56px; text-align: center; cursor: pointer; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
.collector-hp { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); font-size: 12px; line-height: 12px; letter-spacing: 1px; color: #ff5252; text-shadow: 0 0 2px #000; white-space: nowrap; pointer-events: none; }
.collector-hp i { font-style: normal; color: rgba(255, 255, 255, 0.35); }
.collector-gold { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #ffd54a; font-size: 13px; font-weight: 700; white-space: nowrap; }
/* no endless animation / filter here: dozens of them froze iOS while zooming out */
.gdrop { display: block; width: 24px; height: 24px; font-size: 20px; line-height: 24px; text-align: center; cursor: pointer; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
#dropPanel { border-top-color: rgba(252, 211, 77, 0.6); }
#dpIcon { flex: 0 0 auto; width: 46px; text-align: center; font-size: 34px; line-height: 46px; }
#dpName { font-size: 15px; font-weight: 700; }
#dpTimer { font-size: 12px; opacity: 0.75; }
#dpAmount { margin: 4px 0 10px; font-size: 22px; font-weight: 800; color: #fcd34d; }
#dpFar.hidden { display: none; }

/* --- chat ----------------------------------------------------------------- */
/* 💬 button: right edge, in the middle. Tap — chat, hold — quick commands, hold longer — chat */
#chatBtn {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -23px;
  z-index: 600;
  touch-action: none;           /* a long press must not scroll or zoom */
  -webkit-touch-callout: none;  /* …nor open the phone's own menu */
  user-select: none;
  -webkit-user-select: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 22, 33, 0.88);
  color: #eaf2fb;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#chatBtn:active { transform: scale(0.94); }
/* while held: a ring that fills up toward "open the chat" */
#chatBtn.holding { animation: chatHold 2s linear forwards; }
@keyframes chatHold {
  from { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(45, 127, 249, 0.9); }
  to   { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(45, 127, 249, 0.9); }
}
#chatBtn.hidden, #chatPanel.hidden, #chatToast.hidden, #chatBadge.hidden { display: none; }
#chatBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid #0e1621;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}
/* panel: the last messages + a line to write */
#chatPanel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(14px + var(--pb-h) + env(safe-area-inset-bottom));
  z-index: 700;
  max-width: 420px;
  padding: 8px;
  background: rgba(14, 22, 33, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #eaf2fb;
}
#chatLog { max-height: 26dvh; overflow-y: auto; padding: 2px 4px 6px; font-size: 13px; line-height: 1.35; }
#chatLog:empty::before { content: 'Здесь будут сообщения тех, кто рядом. Пишите — услышат те, кто в той области карты, куда вы смотрите.'; opacity: 0.55; }
.chatRow { display: flex; gap: 6px; align-items: flex-start; padding: 3px 0; }
.chatRow img { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px; background: #eef2f7; }
.chatRow b { color: #fcd34d; font-weight: 700; margin-right: 4px; }
.chatRow .me { color: #86efac; }
.chatRow span { min-width: 0; overflow-wrap: anywhere; }
.chatText { white-space: pre-wrap; } /* the line breaks the player typed */
#chatError { margin: 0 4px 6px; font-size: 12px; color: #fca5a5; }
#chatError.hidden { display: none; }
#chatForm { display: flex; gap: 6px; align-items: flex-end; }
#chatInput {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 120px; /* ≈ 5 lines, then it scrolls */
  resize: none;
  font-family: inherit;
  line-height: 1.3;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #eaf2fb;
  font-size: 16px; /* ≥16px: iOS doesn't zoom the page on focus */
}
#chatInput:focus { outline: none; border-color: #2d7ff9; }
#chatSend { flex: 0 0 auto; width: 44px; height: 41px; border: none; border-radius: 10px; background: #2d7ff9; color: #fff; font-size: 16px; cursor: pointer; }
#chatSend:active { transform: scale(0.95); }
/* a message that just arrived: a slim plaque under the top strip (avatar, nick, text) */
#chatToast {
  position: absolute;
  top: calc(var(--tb-h) + env(safe-area-inset-top) + 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 880;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  min-height: 38px;
  padding: 6px 14px 6px 8px;
  background: rgba(14, 22, 33, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 19px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  color: #eaf2fb;
  font-size: 13px;
  pointer-events: none;
  animation: chatIn 0.2s ease;
}
@keyframes chatIn { from { opacity: 0; transform: translate(-50%, -8px); } }
#chatToast img { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #eef2f7; }
#chatToast b { flex: 0 0 auto; color: #fcd34d; }
#chatToast span {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* a long message: the start of it; the whole one is in the 💬 panel */
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
/* speech bubble above the avatar of the one who is talking */
.leaflet-tooltip.chatBubble {
  width: max-content; /* a short text stays on one line, a long one wraps at 220px */
  max-width: 220px;
  white-space: normal;
  padding: 5px 9px;
  border-radius: 10px;
  background: #fff;
  color: #0e1621;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.leaflet-tooltip-top.chatBubble::before { border-top-color: #fff; }
.chatBubbleText {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* a long message does not cover half the map */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* time until a burning building (a player's or a xenobase) disappears: under its feet, instead of the hp bar */
.bTimer {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(14, 22, 33, 0.92);
  color: #fdba74;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
}

/* far away (zoomed out) the map shows no extras: no burn timers, no hp bars (the gold digits have their own, closer threshold) */
#map:not(.show-info) .bTimer,
#map:not(.show-info) .bHp { display: none; }

/* the purple tint inside a xenobase's territory (the polygons in it are opaque, the pane as a whole is see-through) */
.leaflet-campTint-pane { opacity: 0.12; pointer-events: none; }

/* --- fighter avatars (public/avatar.js): portraits ---------------------------------- */
/* round "portrait" spots: the picture is a tall bust, so show its upper part (face, collar, cap) */
#pbAvatar, #invAvatar, #regPreview, #ctAv, .chatRow img, .findRow img {
  object-fit: cover;
  object-position: 50% 30%;
  background: #d7dee8;
}
/* on the map the whole figure stands on its point */
.bpn.pawn img { object-fit: contain; }

/* the face + skin picker on the registration / profile card */
#regAvatars { display: block; margin-bottom: 12px; }
.avRow.faces { display: flex; justify-content: center; gap: 10px; }
.faceOpt {
  width: 78px;
  height: 100px;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 14px;
  background: #d7dee8;
  cursor: pointer;
}
.faceOpt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.avRow.skins { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 12px; }
.skinOpt {
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.faceOpt.selected, .skinOpt.selected { border-color: #22c55e; }
.faceOpt:active, .skinOpt:active { transform: scale(0.94); }
.avHint { margin-top: 10px; font-size: 12px; line-height: 1.35; opacity: 0.65; }

/* build panel: house / turret switch */
#bpType.hidden { display: none; }
#bpOther.hidden { display: none; }
#bpOther { display: flex; gap: 8px; justify-content: center; margin: 0 0 8px; }
#bpType { display: flex; gap: 8px; justify-content: center; margin: 0 0 8px; }
.bpTypeBtn { flex: 0 0 auto; padding: 6px 16px; border: 2px solid transparent; border-radius: 999px; background: #374151; color: #eaf2fb; font-size: 14px; font-weight: 600; cursor: pointer; }
.bpTypeBtn.on { border-color: #22c55e; background: #166534; color: #fff; }

/* bots of the xenobase waves */
.raider-pin { background: transparent; border: none; }
.raider { position: relative; display: block; width: 30px; height: 30px; cursor: pointer; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.raider img { display: block; width: 100%; height: 100%; }

/* --- ЧВК (clans) ---------------------------------------------------------- */
/* 🪖 button: top-left, under the pin */
#clanBtn {
  position: absolute;
  top: calc(10px + var(--tb-h) + 104px + env(safe-area-inset-top));
  left: 10px;
  z-index: 600;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 22, 33, 0.85);
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#clanBtn:active { transform: scale(0.94); }
#clanBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid #0e1621;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}
#clanBtn.hidden, #clanBadge.hidden, #clanPanel.hidden, #clanPanel .hidden { display: none; }
/* the whole screen between the top numbers and the bottom bar (both stay visible) */
#clanPanel {
  position: absolute;
  top: calc(var(--tb-h) + env(safe-area-inset-top));
  bottom: calc(var(--pb-h) + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 760;
  display: flex;
  flex-direction: column;
  background: rgb(20, 26, 18); /* khaki-dark: military */
  border-bottom: 1px solid rgba(163, 177, 108, 0.35);
  color: #eaf2fb;
}
#clanPanel > * { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } /* wide screens: a readable column */
#clanMy, #clanTop { flex: 1 1 auto; min-height: 0; }
/* communication tower card: its links, each with a button to cut it */
#upLinkBox.hidden, #upTierBar.hidden, #upBtn.hidden { display: none; }
/* the ЧВК's tower tab */
.towerSum { display: flex; gap: 8px; margin: 8px 0 4px; }
.towerSum div { flex: 1 1 0; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-align: center; font-size: 11px; opacity: 0.9; }
.towerSum b { display: block; font-size: 20px; }
.towerRow { cursor: pointer; }
.towerRow:active { background: rgba(255, 255, 255, 0.06); }
.towerDot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }
#upLinks { margin: 6px 0; font-size: 13px; }
.upLinkRow { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.upLinkRow span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.upLinkRow button { flex: 0 0 auto; width: 28px; height: 26px; border: none; border-radius: 7px; background: #7f1d1d; color: #fff; cursor: pointer; }
.upLinkBtn { background: #4d7c0f; }
.upLinkBtn:disabled { opacity: 0.5; }
/* while the window is open the top numbers sit on a strip of the same colour: one screen */
body.clanOn #topBar, body.armyOn #topBar { background: rgb(20, 26, 18); }
#clanClose { width: 26px; height: 26px; border: none; border-radius: 50%; background: #374151; color: #eaf2fb; cursor: pointer; }
.clanTabs { display: flex; gap: 6px; padding: 8px 10px 0; }
.clanTabBtn {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 3px;
  border: 1px solid rgba(163, 177, 108, 0.35);
  border-radius: 9px;
  background: none;
  color: #c9d1b0;
  font: inherit;
  font-size: 12px; /* four tabs fit a phone */
  font-weight: 700;
  cursor: pointer;
}
.clanTabBtn.on { background: #4d5a2c; color: #fff; border-color: #6b7c3c; }
.clanScroll { overflow-y: auto; padding: 6px 10px 10px; }
.clanSec { margin-top: 10px; }
.clanSec h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #c9d1b0; margin-bottom: 6px; }
.clanInput {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #eaf2fb;
  font-size: 16px; /* ≥16px: iOS doesn't zoom the page on focus */
}
.clanInput:focus { outline: none; border-color: #8fa04a; }
.clanMain {
  padding: 9px 12px;
  border: none;
  border-radius: 9px;
  background: #5b6b2f;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
#clanCreate { width: 100%; }
.clanMain:active, .clanOpBtn:active, .clanDanger:active { transform: scale(0.96); }
.clanLine, #clanChatForm { display: flex; gap: 6px; }
.clanLine .clanInput, #clanChatForm .clanInput { margin-bottom: 0; flex: 1 1 auto; }
.clanHint { display: block; margin-top: 4px; font-size: 11px; opacity: 0.65; }
.clanDanger {
  width: 100%;
  margin-top: 12px;
  padding: 9px;
  border: 1px solid #7f1d1d;
  border-radius: 9px;
  background: none;
  color: #fca5a5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#clanHead { display: flex; gap: 10px; align-items: center; padding-top: 8px; }
#clanHead b { display: block; font-size: 15px; }
#clanHead small { font-size: 12px; opacity: 0.75; }
.clanRow { display: flex; align-items: center; gap: 6px; padding: 5px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.clanRow.mine { background: rgba(107, 124, 60, 0.25); border-radius: 8px; }
.clanRow img { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #eef2f7; object-fit: contain; }
.clanNick { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.clanNick.me { color: #86efac; }
.clanNick small { display: block; font-size: 11px; font-weight: 400; opacity: 0.65; }
.clanTag {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 5px;
  background: #4d5a2c;
  border: 1px solid #8fa04a;
  color: #f1f5d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.clanTag.big { font-size: 15px; padding: 6px 8px; }
.clanPlace { flex: 0 0 20px; text-align: center; font-weight: 800; color: #fcd34d; }
.clanPower { flex: 0 0 auto; font-size: 13px; color: #fcd34d; }
.clanOpBtn {
  flex: 0 0 auto;
  min-width: 32px;
  height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 8px;
  background: #374151;
  color: #eaf2fb;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.clanOpBtn.wide { padding: 0 10px; font-size: 13px; font-weight: 700; }
.clanOpBtn.go { background: #4d7c0f; }
.clanOpBtn.bad { background: #7f1d1d; }
/* спецсвязь tab: the history fills the window, the line to write sits at the bottom */
#clanComm { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 10px; }
#clanLog { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 2px 8px; font-size: 13px; line-height: 1.35; }
#clanLog:empty::before { content: 'Спецсвязь: сообщения видят все бойцы ЧВК, даже те, кто сейчас не в игре. История хранится неделю.'; opacity: 0.55; }
#clanLog .chatRow span { flex: 1 1 auto; }
.commSys span { color: #c9d1b0; font-style: italic; opacity: 0.85; }
.commTime { flex: 0 0 auto; font-size: 10px; opacity: 0.5; margin-top: 2px; white-space: nowrap; }
.clanTabBtn { position: relative; }
#clanCommBadge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  border: 2px solid rgb(20, 26, 18);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
}
/* barracks / hospital in the hexes of the main base; the commander line; the army numbers */
.wing-pin { background: transparent; border: none; }
.wing-pin img { display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); cursor: pointer; }
.wingPic { flex: 0 0 auto; width: 34px; height: 34px; }
.cmdLine { font-size: 11px !important; opacity: 0.75; }
/* the army window: «Войска» / «Командиры» tabs; renaming a commander */
.armyTabs { padding-top: 10px; }
#armyTroops.hidden, #armyCmds.hidden { display: none; }
#armyCmds > .upInfo { margin: 10px 0; }
.cmdInput { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #eaf2fb; font: inherit; font-size: 14px; }
.armyBtnSm.cmdCancel { background: #374151; }
.armyStat { font-size: 13px; padding: 4px 0; }
#armyStats { margin-bottom: 8px; }
#upGar.hidden, #garFree.hidden, #garOwn.hidden, #upRush.hidden { display: none; }
#garUnits { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
/* the card of the barracks / the hospital: only the head and its own block */
#upgradePanel.wingCard > :not(.upHead):not(#upClose):not(#upWing) { display: none; }
#upgradePanel:not(.wingCard) #upWing { display: none; }
#upWing .upBtn { margin-top: 8px; }
.wing-ghost img { opacity: 0.4; filter: grayscale(1) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }

/* owner's broadcast to every player */
.bcText { resize: vertical; font-family: inherit; }
.bcButtonRow { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #c9d6e3; }