/* ═══════════════════════════════════════════════════════════════════════
   JSU CITY - bottom navigation v4 ("chrome v4")
   Loaded LAST. Everything is scoped under body.chrome-v4, a class that js/chrome-v4.js adds.
   Without it (?chrome=3, or window.__CHROME_V4 = false) none of these rules apply and the old bar is untouched.

   Four layouts, one set of buttons:
     phone / tablet (under 900 px wide)  one row: City, Learn, Aleph-Bet, Battle, More; the rest sit in the More sheet
     sideways phone (landscape, under 500 px tall)  a slim rail on the left edge; the More sheet opens beside it
     wide (900 px and up, 500 px tall and up)  every tab in one row, no More button
   Build is a round hammer button floating on the city in all of them.
   ═══════════════════════════════════════════════════════════════════════ */

body.chrome-v4 {
  --v4-bar-row: 64px;
  --v4-safe-b: env(safe-area-inset-bottom, 0px);
  --v4-safe-l: env(safe-area-inset-left, 0px);
  --v4-safe-r: env(safe-area-inset-right, 0px);
  --v4-safe-t: env(safe-area-inset-top, 0px);
  --v4-bar-h: calc(var(--v4-bar-row) + var(--v4-safe-b));
  --v4-pad-l: max(8px, var(--v4-safe-l));
  --v4-pad-r: max(8px, var(--v4-safe-r));
  --v4-fab: 60px;
  --v4-rail-w: calc(76px + var(--v4-safe-l));
  /* Where the round Build button rests: above the bar, at the thumb. */
  --v4-fab-bottom: calc(var(--v4-bar-h) + 12px);
  --v4-fab-right: max(12px, var(--v4-safe-r));
  --v4-menu-h: 260px;
  /* tap-targets.css lifts everything that floats above the bar by this height. */
  --jsu-nav-h: var(--v4-bar-h);
}

/* ── The bar (phone and tablet) ───────────────────────────────────── */
body.chrome-v4 #bottomNav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 112px));
  grid-template-rows: minmax(0, 1fr);
  justify-content: center;
  align-items: stretch;
  column-gap: 8px;
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto;
  height: var(--v4-bar-h);
  padding: 6px var(--v4-pad-r) calc(6px + var(--v4-safe-b)) var(--v4-pad-l);
  box-sizing: border-box;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
body.chrome-v4 #bottomNav::-webkit-scrollbar { display: none; }

/* Buttons on the bar and tiles in the sheet share this base. */
body.chrome-v4 #bottomNav .nav-btn,
body.chrome-v4 #bottomNav .nav-more-btn {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 2px 2px;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: rgba(245, 236, 217, 0.72);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 0.2px;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: none;
}
body.chrome-v4 #bottomNav .nav-btn::before { display: none; }
body.chrome-v4 #bottomNav .nav-btn::after { display: none; }
body.chrome-v4 #bottomNav .nav-btn:hover,
body.chrome-v4 #bottomNav .nav-more-btn:hover { color: var(--jc-gold-bright); background: rgba(242, 181, 69, 0.08); }
body.chrome-v4 #bottomNav .nav-btn:active,
body.chrome-v4 #bottomNav .nav-more-btn:active { transform: scale(0.95); }
body.chrome-v4 #bottomNav .nav-btn:focus-visible,
body.chrome-v4 #bottomNav .nav-more-btn:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: -4px; }

body.chrome-v4 #bottomNav .nav-btn .nav-icon,
body.chrome-v4 #bottomNav .nav-more-btn .nav-icon,
body.chrome-v4 #bottomNav .nav-btn.active .nav-icon,
body.chrome-v4 #bottomNav .nav-btn:active .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  transform: none;
  font-size: 0;
  line-height: 0;
  transition: none;
}
body.chrome-v4 #bottomNav .nav-icon svg { display: block; width: 24px; height: 24px; }
body.chrome-v4 #bottomNav .nav-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 14px;
}
/* The Aleph-Bet label is Hebrew letters: a little larger so the letters read. */
body.chrome-v4 #bottomNav .nav-btn[data-tab="hunt"] .nav-label { font-size: 14px; }

/* The active tab: a gold-filled stone tile with a gold rim, and gold ink. */
body.chrome-v4 #bottomNav .nav-btn.active,
body.chrome-v4 #bottomNav .nav-btn.v4-on,
body.chrome-v4 #bottomNav .nav-more-btn.is-active,
body.chrome-v4 #bottomNav .nav-more-btn[aria-expanded="true"] {
  color: var(--jc-gold-hi);
  background: linear-gradient(180deg, rgba(242, 181, 69, 0.34) 0%, rgba(242, 181, 69, 0.14) 100%);
  border-color: var(--jc-gold);
  box-shadow: 0 0 14px rgba(242, 181, 69, 0.3), inset 0 1px 0 rgba(255, 233, 173, 0.3);
}

/* ── The More sheet ───────────────────────────────────────────────── */
body.chrome-v4 .nav-more-scrim {
  position: fixed;
  z-index: 2;
  left: 0; right: 0; top: 0;
  bottom: var(--v4-bar-h);
  background: rgba(8, 5, 2, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
body.chrome-v4 .nav-more-sheet {
  position: fixed;
  z-index: 4;
  left: var(--v4-pad-l);
  right: var(--v4-pad-r);
  bottom: calc(var(--v4-bar-h) + 8px);
  max-width: 480px;
  margin-inline: auto;
  box-sizing: border-box;
  max-height: calc(100dvh - var(--v4-bar-h) - 24px - var(--v4-safe-t));
  overflow-y: auto;
  padding: 12px;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
  border: 3px solid var(--jc-gold-dk);
  border-radius: var(--jc-radius-lg);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 233, 173, 0.18);
  /* Closed: invisible and untouchable, but every tab button still exists, so a script's .click() still works. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.98);
  transform-origin: 50% 100%;
  transition: opacity 0.18s ease, transform 0.22s var(--jc-ease), visibility 0s linear 0.22s;
}
body.chrome-v4 .nav-more-sheet.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
body.chrome-v4.v4-more-open .nav-more-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
/* While the sheet is open the bar rises above everything that floats over the city, so the scrim catches every outside tap. */
body.chrome-v4.v4-more-open #bottomNav { z-index: 130; }

body.chrome-v4 .nav-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Tiles: light stone, dark ink, like the cards in the Learn and Ranks screens. */
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn {
  min-height: 76px;
  gap: 4px;
  padding: 8px 4px;
  color: var(--jc-ink);
  background-image: var(--jc-noise), var(--jc-tile-light);
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
  background-color: transparent;
  border: 2px solid var(--jc-stone-dk);
  border-radius: var(--jc-radius-md);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  font-size: 13px;
}
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn .nav-icon,
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn.active .nav-icon { width: 28px; height: 28px; }
body.chrome-v4 #bottomNav .nav-more-sheet .nav-icon svg { width: 28px; height: 28px; }
body.chrome-v4 #bottomNav .nav-more-sheet .nav-label { font-size: 13px; }
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn:hover { color: var(--jc-ink); background-color: transparent; transform: translateY(-1px); }
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn:focus-visible { outline: 3px solid var(--jc-sky-dk); outline-offset: 2px; }
body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn.active {
  color: var(--jc-gold-ink);
  background-image: linear-gradient(160deg, var(--jc-gold-hi), var(--jc-gold) 60%, #d9932c);
  background-blend-mode: normal;
  border-color: var(--jc-gold-dk);
  box-shadow: 0 3px 0 var(--jc-gold-dk), 0 0 14px rgba(242, 181, 69, 0.45);
}

/* ── The round Build button ───────────────────────────────────────── */
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] {
  position: fixed;
  z-index: 1;
  right: var(--v4-fab-right);
  bottom: var(--v4-fab-bottom);
  width: var(--v4-fab);
  height: var(--v4-fab);
  min-width: var(--v4-fab);
  min-height: var(--v4-fab);
  padding: 0;
  gap: 0;
  border-radius: 50%;
  overflow: visible;
  color: var(--jc-gold-ink);
  background: radial-gradient(circle at 35% 28%, var(--jc-gold-hi), var(--jc-gold) 55%, #d9932c 100%);
  border: 3px solid var(--jc-gold-dk);
  box-shadow: 0 4px 0 var(--jc-gold-dk), 0 10px 22px rgba(0, 0, 0, 0.5);
  transition: bottom 0.35s var(--jc-ease), transform 0.12s var(--jc-ease), box-shadow 0.12s var(--jc-ease);
}
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"]:hover { color: var(--jc-gold-ink); background: radial-gradient(circle at 35% 28%, var(--jc-gold-hi), var(--jc-gold) 55%, #d9932c 100%); }
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"]:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--jc-gold-dk), 0 6px 14px rgba(0, 0, 0, 0.5); }
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"]:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: 3px; }
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] .nav-icon,
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"].active .nav-icon { width: 30px; height: 30px; }
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] .nav-icon svg { width: 30px; height: 30px; }
/* The word Build is for screen readers; the hammer says it for everyone else. */
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] .nav-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The open More sheet takes the space above the bar: the Build button steps out of its way (it still exists, so a script can click it). */
body.chrome-v4.v4-more-open #bottomNav .nav-btn[data-tab="build"] { visibility: hidden; }
/* The Build menu is open: the button is "pressed" and rides on top of the menu so it can close it. */
body.chrome-v4 #bottomNav .nav-btn[data-tab="build"].active {
  color: var(--jc-gold-hi);
  background: radial-gradient(circle at 35% 28%, #7b5320, #3a2408 80%);
  border-color: var(--jc-gold-bright);
  box-shadow: 0 0 0 4px rgba(242, 181, 69, 0.35), 0 8px 20px rgba(0, 0, 0, 0.5);
}
body.chrome-v4.v4-build-open #bottomNav .nav-btn[data-tab="build"] {
  bottom: calc(var(--v4-bar-h) + 8px + var(--v4-menu-h) + 10px);
}

/* ── Things that float above the bar: put them where the new bar is ── */
/* (#buildMenu, #tileInfo, #placementHelper, #cancelBanner and the top strip are placed in the sections below.) */
/* The badge pop-up is only a notice: taps go through it to the card, Cancel and More tiles it floats over (it used to swallow them for 4 s). */
body.chrome-v4 .pfx-badge-toast { bottom: calc(var(--v4-bar-h) + 12px); pointer-events: none; }
body.chrome-v4 #advisorPracticeBadge { bottom: calc(var(--v4-bar-h) + 8px); }
/* The Strategy Advisor scroll sits above the Build button, not under it. */
body.chrome-v4 #advisorFab {
  bottom: calc(var(--v4-fab-bottom) + var(--v4-fab) + 12px);
  right: calc(var(--v4-fab-right) + 3px);
}
body.chrome-v4.v4-build-open #advisorFab { visibility: hidden; }

/* ── States that hide the bar hide the sheet and the Build button too ─ */
body.chrome-v4.hunt-focus-mode #bottomNav .nav-btn[data-tab="build"],
body.chrome-v4.hunt-focus-mode #bottomNav .nav-more-sheet,
body.chrome-v4.hunt-focus-mode #bottomNav .nav-more-scrim {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* The Aleph-Bet hunt scatters letters over the whole city (top right too): the DEFEND button must not sit on one, or a tap on that letter starts a raid. */
body.chrome-v4.hunt-focus-mode #raidBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Full-screen panels already sit above the bar; this also covers any that does not. */
body.chrome-v4:has(#learnOverlay.open, #profileOverlay.open, #alephCourseOverlay.open, #escapeRoomsOverlay.open, #israelQuestOverlay.open, #tutorialOverlay.open, #messageInbox.open, .ldb-overlay.open, .adv-overlay.open, #authOverlay.open, #shabbatOverlay.open, #shabbatLocationSetup.open) #bottomNav .nav-btn[data-tab="build"] {
  visibility: hidden;
}
body.chrome-v4:has(#learnOverlay.open, #profileOverlay.open, #alephCourseOverlay.open, #escapeRoomsOverlay.open, #israelQuestOverlay.open, #tutorialOverlay.open, #messageInbox.open, .ldb-overlay.open, .adv-overlay.open, #authOverlay.open, #shabbatOverlay.open, #shabbatLocationSetup.open) #cityRotateBtn {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.chrome-v4 .nav-more-sheet,
  body.chrome-v4 .nav-more-scrim,
  body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDE (900 px and up, 500 px tall and up): every tab in one row, no More button.
   The sheet dissolves (display: contents) so its tabs become ordinary members of the row.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (min-height: 500px) {
  body.chrome-v4 { --v4-bar-row: 72px; }
  body.chrome-v4 #bottomNav {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px calc(8px + var(--v4-safe-b));
  }
  body.chrome-v4 #bottomNav .nav-btn,
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn {
    flex: 1 1 0;
    max-width: 112px;
    min-height: 44px;
    height: auto;
  }
  body.chrome-v4 #bottomNav .nav-more-btn,
  body.chrome-v4 .nav-more-scrim { display: none; }
  body.chrome-v4 .nav-more-sheet,
  body.chrome-v4 .nav-more-sheet.open,
  body.chrome-v4 .nav-more-grid { display: contents; }
  body.chrome-v4 .nav-more-sheet { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }

  /* Sheet tiles go back to ordinary bar buttons. */
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn {
    gap: 2px;
    padding: 2px 2px;
    color: rgba(245, 236, 217, 0.72);
    background-image: none;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: none;
    font-size: 12px;
  }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn .nav-icon,
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn.active .nav-icon { width: 24px; height: 24px; }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-icon svg { width: 24px; height: 24px; }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-label { font-size: 12px; }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn:hover { color: var(--jc-gold-bright); background-color: rgba(242, 181, 69, 0.08); transform: none; }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn:active { transform: scale(0.95); box-shadow: none; }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: -4px; }
  body.chrome-v4 #bottomNav .nav-more-sheet .nav-btn.active {
    color: var(--jc-gold-hi);
    background-image: none;
    background: linear-gradient(180deg, rgba(242, 181, 69, 0.34) 0%, rgba(242, 181, 69, 0.14) 100%);
    border-color: var(--jc-gold);
    box-shadow: 0 0 14px rgba(242, 181, 69, 0.3), inset 0 1px 0 rgba(255, 233, 173, 0.3);
  }
  body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] { flex: none; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEWAYS PHONE (landscape, under 500 px tall): a slim rail on the left edge.
   The city keeps its full height. The rail clears the notch (safe-area-inset-left),
   the More sheet opens beside it, and the Build button stays at the right thumb.
   ═══════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 499px) {
  body.chrome-v4 {
    --v4-bar-h: var(--v4-safe-b);
    --v4-fab-bottom: max(12px, var(--v4-safe-b));
    --v4-rail-pad-l: calc(var(--v4-safe-l) + 8px);
    --jsu-nav-h: var(--v4-safe-b);
  }
  body.chrome-v4 #bottomNav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--v4-rail-w);
    height: auto;
    padding: max(8px, var(--v4-safe-t)) 8px max(8px, var(--v4-safe-b)) var(--v4-rail-pad-l);
    border-top: 0;
    border-right: 3px solid var(--jc-gold-dk);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.55), inset -2px 0 0 rgba(255, 233, 173, 0.14);
    background-image: var(--jc-noise), linear-gradient(90deg, #241a10 0%, #1c130b 55%, #0d0805 100%);
  }
  body.chrome-v4 #bottomNav .nav-btn,
  body.chrome-v4 #bottomNav .nav-more-btn {
    flex: 1 1 0;
    min-height: 44px;
    max-height: 64px;
  }
  body.chrome-v4 #bottomNav .nav-btn[data-tab="build"] { flex: none; max-height: none; }

  body.chrome-v4 .nav-more-scrim { left: var(--v4-rail-w); bottom: 0; }
  body.chrome-v4 .nav-more-sheet {
    left: calc(var(--v4-rail-w) + 8px);
    right: auto;
    bottom: max(8px, var(--v4-safe-b));
    width: min(380px, calc(100vw - var(--v4-rail-w) - 16px - var(--v4-safe-r)));
    max-width: none;
    margin-inline: 0;
    max-height: calc(100dvh - 16px - var(--v4-safe-t) - var(--v4-safe-b));
    transform-origin: 0 100%;
    transform: translateX(-14px) scale(0.98);
  }
  body.chrome-v4 .nav-more-sheet.open { transform: none; }

  /* The Build menu leaves the right-hand column free for the round button, which stays in its corner. */
  body.chrome-v4.v4-build-open #bottomNav .nav-btn[data-tab="build"] { bottom: var(--v4-fab-bottom); }
  body.chrome-v4.v4-build-open #advisorFab { visibility: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STEP 2 - THE CITY GETS THE SCREEN
   One compact top strip, a slim status line, a compact building card, one sheet style.
   Same three layouts as the bar: phone/tablet (default), wide, sideways phone (rail).
   ═══════════════════════════════════════════════════════════════════════ */

body.chrome-v4 {
  --v4-strip-h: calc(48px + var(--v4-safe-t));
  --v4-card-h: 0px;
  /* Right edge of everything that must leave the round Build button alone. */
  --v4-fab-col: calc(var(--v4-fab-right) + var(--v4-fab) + 10px);
}

/* ── The top strip: five resource chips and one city chip ─────────── */
body.chrome-v4 #resourceBar {
  left: 0; right: 0; top: 0;
  height: var(--v4-strip-h);
  box-sizing: border-box;
  padding: var(--v4-safe-t) var(--v4-pad-r) 0 var(--v4-pad-l);
  gap: 4px;
  justify-content: flex-start;
  align-items: center;
  border-bottom-width: 2px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
body.chrome-v4 #resourceBar .res-item {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 3px;
  gap: 3px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(0, 0, 0, 0.3);
}
body.chrome-v4 #resourceBar .res-top { gap: 3px; min-width: 0; flex-wrap: nowrap; align-items: center; }
body.chrome-v4 #resourceBar .res-icon {
  flex: none;
  width: 16px; height: 16px;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; filter: none;
  color: var(--jc-ink);
  font-size: 0; line-height: 0;
}
body.chrome-v4 #resourceBar .res-icon svg { display: block; width: 16px; height: 16px; }
body.chrome-v4 #resourceBar .res-val {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
}
/* The word and the rate are for screen readers (and for the wide layout); phones show a tiny arrow instead. */
body.chrome-v4 #resourceBar .res-label,
body.chrome-v4 #resourceBar .res-rate {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.chrome-v4 #resourceBar .res-item::after {
  content: "";
  display: none;
  position: absolute;
  top: 3px; right: 3px;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
body.chrome-v4 #resourceBar .res-item[data-trend="up"]::after { display: block; border-bottom: 5px solid #2f8f2f; }
body.chrome-v4 #resourceBar .res-item[data-trend="down"]::after { display: block; border-top: 5px solid #c0392b; }

body.chrome-v4 #resourceBar .civ-chip {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0 0 0 2px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 2px solid var(--jc-gold-dk);
  border-radius: 12px;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 130px 130px, auto;
  background-blend-mode: overlay, normal;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 233, 173, 0.18);
  color: var(--jc-gold-bright);
  font-family: inherit;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.chrome-v4 #resourceBar .civ-chip:active { transform: scale(0.96); }
body.chrome-v4 #resourceBar .civ-chip:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: 2px; }
body.chrome-v4 #resourceBar .civ-chip[aria-expanded="true"] { border-color: var(--jc-gold); box-shadow: 0 0 12px rgba(242, 181, 69, 0.45), inset 0 1px 0 rgba(255, 233, 173, 0.25); }
body.chrome-v4 .civ-chip-name { font-family: 'Cinzel', serif; font-weight: 900; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
body.chrome-v4 .civ-chip-sub { font-size: 12px; font-weight: 800; color: rgba(245, 236, 217, 0.92); white-space: nowrap; }
@media (max-width: 380px) { body.chrome-v4 .civ-hap { display: none; } }

/* ── The city sheet (#civInfo): the full detail, under the strip ───── */
body.chrome-v4 #civInfo {
  position: fixed;
  top: calc(var(--v4-strip-h) + 6px);
  left: auto;
  right: var(--v4-pad-r);
  bottom: auto;
  z-index: 125;
  box-sizing: border-box;
  width: min(360px, calc(100vw - var(--v4-pad-l) - var(--v4-pad-r)));
  max-height: calc(100dvh - var(--v4-strip-h) - var(--v4-bar-h) - 24px);
  overflow-y: auto;
  padding: 12px 14px;
  text-align: left;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
  border: 3px solid var(--jc-gold-dk);
  border-radius: var(--jc-radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 233, 173, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: 100% 0;
  transition: opacity 0.18s ease, transform 0.22s var(--jc-ease), visibility 0s linear 0.22s;
}
body.chrome-v4 #civInfo::before, body.chrome-v4 #civInfo::after { display: none; }
body.chrome-v4 #civInfo.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
body.chrome-v4 #civInfo:focus { outline: none; }
body.chrome-v4 #civName { font-size: 20px; letter-spacing: 1.5px; }
body.chrome-v4 #civPop { margin-top: 2px; font-size: 14px; line-height: 1.35; white-space: normal; max-width: none; overflow: visible; }
body.chrome-v4 .civ-sheet-res { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--jc-hairline-soft); }
body.chrome-v4 .civ-res-row { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; column-gap: 8px; font-size: 14px; font-weight: 800; color: var(--jc-cream); }
body.chrome-v4 .civ-res-row svg { display: block; width: 20px; height: 20px; color: var(--jc-gold-bright); }
body.chrome-v4 .civ-res-name { color: rgba(245, 236, 217, 0.8); }
body.chrome-v4 .civ-res-val { font-variant-numeric: tabular-nums; }
body.chrome-v4 .civ-res-rate { min-width: 64px; text-align: right; font-size: 13px; color: #6fe06f; }
body.chrome-v4 .civ-res-rate.down { color: #ff8a65; }
body.chrome-v4 .civ-sheet-status { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--jc-hairline-soft); font-size: 13px; font-weight: 800; color: var(--jc-cream); line-height: 1.4; }
body.chrome-v4 .civ-sheet-status:empty { display: none; }
body.chrome-v4 .civ-sheet-status .strip-sep { margin: 0 6px; opacity: 0.6; }
body.chrome-v4 .civ-sheet-status .strip-event.negative { color: #ff8a65; }
body.chrome-v4 .civ-sheet-status .strip-event.positive { color: #8be08b; }

/* ── The status line: one slim line under the strip, tap to read it all ─
   The element is 44 px tall (a real tap target) with an 8 px invisible margin; the visible 28 px pill is drawn by ::before. */
body.chrome-v4 #statusStrip {
  top: calc(var(--v4-strip-h) - 2px);
  left: calc(var(--v4-pad-l) - 8px);
  right: auto;
  display: block;
  box-sizing: border-box;
  max-width: calc(100vw - var(--v4-pad-l) - var(--v4-pad-r) - 88px);
  height: 44px;
  padding: 0 20px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 101;
  transform: translateY(-8px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
}
body.chrome-v4 #statusStrip::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 2px solid var(--jc-gold-dk);
  border-radius: 14px;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 130px 130px, auto;
  background-blend-mode: overlay, normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
body.chrome-v4 #statusStrip.visible { transform: none; pointer-events: auto; }
body.chrome-v4 #statusStrip .strip-weather, body.chrome-v4 #statusStrip .strip-event { display: inline; font-size: 12px; }
body.chrome-v4 #statusStrip .strip-sep { display: inline; margin: 0 6px; }
body.chrome-v4 #statusStrip:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: -6px; }
body.chrome-v4 #statusStrip.v4-open { height: auto; min-height: 44px; white-space: normal; line-height: 1.4; padding: 14px 20px; z-index: 126; }
/* While a building is being placed the helper takes this slot. */
body.chrome-v4.placement-mode #statusStrip { visibility: hidden; }

/* ── DEFEND / RESCUE: a round button on the city, under the strip ──── */
body.chrome-v4 #raidBtn {
  top: calc(var(--v4-strip-h) + 8px);
  right: var(--v4-pad-r);
  width: 56px; height: 56px;
}
body.chrome-v4 #raidBtn .raid-cap { font-size: 12px; line-height: 14px; margin-top: 2px; letter-spacing: 0.3px; }
body.chrome-v4 #raidBtn .raid-count { font-size: 12px; }

/* ── Messages, the placing helper and the Cancel button ────────────── */
body.chrome-v4 #toast {
  /* A compact pill: at most two lines, 88% of the free width, never wider. js/chrome-v4.js moves it clear of the controls
     (below the strip when nothing is open, just above an open sheet or card); the full text stays in the element for screen readers. */
  top: calc(var(--v4-strip-h) + 72px);
  left: calc(var(--v4-free-l) + (100vw - var(--v4-free-l)) / 2);
  width: max-content;
  max-width: calc((100vw - var(--v4-free-l)) * 0.88);
  box-sizing: border-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: 6px 14px;
  border-width: 2px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.3;
}
/* js/chrome-v4.js wraps the toast text in this span: two lines, then an ellipsis (the clamp sits on the span so a third line cannot peek out of the padding). */
body.chrome-v4 #toast .v4-toast-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
body.chrome-v4 #placementHelper {
  top: calc(var(--v4-strip-h) + 6px);
  bottom: auto;
  left: var(--v4-pad-l);
  right: auto;
  max-width: calc(100vw - var(--v4-pad-l) - var(--v4-pad-r) - 72px);
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 14px;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 130px 130px, auto;
  background-blend-mode: overlay, normal;
  background-color: transparent;
  border: 2px solid var(--jc-gold-dk);
  color: var(--jc-cream);
  font-size: 12px;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-8px);
}
body.chrome-v4 #placementHelper.visible { transform: none; }
body.chrome-v4 #cancelBanner {
  top: auto;
  bottom: calc(var(--v4-bar-h) + 12px);
  left: var(--v4-pad-l);
  right: var(--v4-fab-col);
  transform: translateY(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  font-size: 15px;
  letter-spacing: 0.3px;
  z-index: 130;
}
body.chrome-v4 #cancelBanner.show { transform: none; }
body.chrome-v4 #cancelBanner:active { transform: scale(0.97); }

/* ── The building card (#tileInfo) ─────────────────────────────────── */
body.chrome-v4 #tileInfo {
  top: auto;
  bottom: calc(var(--v4-bar-h) + 8px);
  left: var(--v4-pad-l);
  right: var(--v4-fab-col);
  width: auto;
  max-width: 440px;
  max-height: 40dvh;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
  border: 3px solid var(--jc-gold-dk);
  border-radius: var(--jc-radius-lg);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 233, 173, 0.18);
  transform: translateY(12px);
}
body.chrome-v4 #tileInfo.visible { transform: none; }
body.chrome-v4 #tileInfo.v4-card { display: flex; flex-direction: column; gap: 8px; }
body.chrome-v4 #tileInfo.v4-card br { display: none; }
body.chrome-v4 #tileInfo .ti-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
body.chrome-v4 #tileInfo .ti-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; line-height: 1; background: radial-gradient(circle at 35% 28%, #fff8e6, #e8c583 55%, #b3854a 100%); border: 2px solid var(--jc-gold-dk); }
body.chrome-v4 #tileInfo .ti-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.chrome-v4 #tileInfo .ti-name { display: block; font-size: 16px; font-weight: 900; color: var(--jc-gold-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.chrome-v4 #tileInfo .ti-lv { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: rgba(245, 236, 217, 0.85); }
body.chrome-v4 #tileInfo .ti-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--jc-hairline-soft); overflow: hidden; }
body.chrome-v4 #tileInfo .ti-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--jc-gold), var(--jc-gold-bright)); }
body.chrome-v4 #tileInfo .ti-close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0 -4px 0 0;
  border: 2px solid var(--jc-hairline); border-radius: 12px; background: rgba(0, 0, 0, 0.3); color: var(--jc-cream); cursor: pointer;
}
body.chrome-v4 #tileInfo .ti-close svg { width: 20px; height: 20px; display: block; }
body.chrome-v4 #tileInfo .ti-prod { font-size: 12px; font-weight: 800; color: rgba(245, 236, 217, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.chrome-v4 #tileInfo.v4-card .shabbat-activated-badge, body.chrome-v4 #tileInfo.v4-card .building-max-badge { margin: 0; align-self: flex-start; font-size: 12px; }
body.chrome-v4 #tileInfo.v4-card #activateShabbatBtn { margin: 0; min-height: 44px; font-size: 13px; }
body.chrome-v4 #tileInfo .building-upgrade-summary, body.chrome-v4 #tileInfo .building-delete-note { display: none; }
body.chrome-v4 #tileInfo .tile-building-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
}
body.chrome-v4 #tileInfo .tile-building-actions button {
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  width: auto; min-width: 0; min-height: 52px; margin: 0; padding: 4px 4px; box-sizing: border-box;
  border-radius: 12px; font-size: 12px; font-weight: 800; line-height: 1.15; text-shadow: none;
}
body.chrome-v4 #tileInfo .ti-ic svg { display: block; width: 20px; height: 20px; }
body.chrome-v4 #tileInfo .ti-lbl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Upgrade: the one prominent button, a full row of its own. */
body.chrome-v4 #tileInfo .tile-building-actions .building-upgrade-btn {
  grid-column: 1 / -1; order: -1; flex-direction: row; flex-wrap: wrap; gap: 2px 8px; min-height: 52px;
  background: linear-gradient(160deg, var(--jc-gold-hi), var(--jc-gold) 60%, #d9932c) !important;
  border: 2px solid var(--jc-gold-dk) !important; color: var(--jc-gold-ink) !important; font-size: 14px;
  box-shadow: 0 3px 0 var(--jc-gold-dk);
}
body.chrome-v4 #tileInfo .building-upgrade-btn .ti-lbl { font-size: 14px; font-weight: 900; max-width: none; }
body.chrome-v4 #tileInfo .building-upgrade-btn .ti-cost { display: block; flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 800; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Visit and Move: stone tiles. Remove: red, in the far corner of the lower row. */
body.chrome-v4 #tileInfo .tile-building-actions .city-visit-btn,
body.chrome-v4 #tileInfo .tile-building-actions [data-city-action="move"] {
  background-image: var(--jc-noise), var(--jc-tile-light) !important; background-size: 140px 140px, auto; background-blend-mode: overlay, normal;
  border: 2px solid var(--jc-stone-dk) !important; color: var(--jc-ink) !important; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
body.chrome-v4 #tileInfo .tile-building-actions .building-delete-btn {
  grid-column: 3; background: linear-gradient(160deg, #3a1410, #5a1d16) !important; border: 2px solid var(--jc-red) !important; color: #ffc2b6 !important; box-shadow: none;
}
body.chrome-v4 #tileInfo .tile-building-actions button:focus-visible, body.chrome-v4 #tileInfo .ti-close:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: 2px; }

/* The "Your Tent is ready! Step inside!" card stacks above the building card and the Build button. */
body.chrome-v4 .cv-prompt {
  bottom: max(calc(var(--v4-fab-bottom) + var(--v4-fab) + 10px), calc(var(--v4-bar-h) + 18px + var(--v4-card-h)));
}

/* ── The Build menu: the same sheet look as More ───────────────────── */
body.chrome-v4 #buildMenu {
  display: flex;
  flex-direction: column;
  left: var(--v4-pad-l);
  right: var(--v4-pad-r);
  bottom: calc(var(--v4-bar-h) + 8px);
  max-width: 760px;
  margin-inline: auto;
  max-height: min(55dvh, calc(100dvh - var(--v4-bar-h) - 8px - var(--v4-fab) - 20px - 130px));
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background-image: var(--jc-noise), var(--jc-plaque);
  background-size: 140px 140px, auto;
  background-blend-mode: overlay, normal;
  border: 3px solid var(--jc-gold-dk);
  border-radius: var(--jc-radius-lg);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 233, 173, 0.18);
}
body.chrome-v4 #buildMenu:not(.open) { visibility: hidden; transition: transform 0.4s var(--jc-ease), opacity 0.3s ease, visibility 0s linear 0.4s; }
body.chrome-v4 #buildMenu .bm-head {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin: 0; padding: 14px 52px 0; box-sizing: border-box;
  border: 0; background: none; color: var(--jc-gold-bright); cursor: pointer; font-family: inherit;
}
body.chrome-v4 #buildMenu .bm-grab { position: absolute; top: 7px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(242, 181, 69, 0.55); }
body.chrome-v4 #buildMenu .bm-title { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
body.chrome-v4 #buildMenu .bm-x { position: absolute; right: 8px; top: 50%; margin-top: -2px; width: 24px; height: 24px; color: var(--jc-cream); }
body.chrome-v4 #buildMenu .bm-x svg { display: block; width: 20px; height: 20px; }
body.chrome-v4 #buildMenu .bm-head:focus-visible { outline: 3px solid var(--jc-sky); outline-offset: -4px; }
body.chrome-v4 #buildMenu .build-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 12px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px;
}
body.chrome-v4 #buildMenu .build-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; align-items: center; align-content: center;
  min-height: 0; padding: 8px; text-align: left;
}
body.chrome-v4 #buildMenu .build-card .b-icon { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; font-size: 24px; }
body.chrome-v4 #buildMenu .build-card .b-name { grid-column: 2; margin: 0; padding: 2px 6px; font-size: 14px; justify-self: start; max-width: 100%; }
body.chrome-v4 #buildMenu .build-card .b-cost { grid-column: 2; margin: 2px 0 0; font-size: 12px; justify-content: flex-start; }
body.chrome-v4 #buildMenu .build-card .b-cost .cost-ok, body.chrome-v4 #buildMenu .build-card .b-cost .cost-bad { font-size: 12px; padding: 1px 6px; }
body.chrome-v4 #buildMenu .build-card .b-prod { grid-column: 2; margin: 2px 0 0; padding: 1px 6px; font-size: 12px; justify-self: start; }
body.chrome-v4 #buildMenu .auto-build-card, body.chrome-v4 #buildMenu .expand-land-card { display: flex; grid-column: 1 / -1; padding: 8px 10px; }
body.chrome-v4 #buildMenu .auto-build-card .b-icon, body.chrome-v4 #buildMenu .expand-land-card .b-icon { width: 44px !important; height: 44px !important; font-size: 24px !important; }

/* Long numbers (js/chrome-v4.js sets data-vlen): the icon sits on top of the number so four and five digits are not cut to "1...". */
@media (max-width: 899px) {
  body.chrome-v4 #resourceBar[data-vlen] .res-top { flex-direction: column; gap: 1px; }
  body.chrome-v4 #resourceBar[data-vlen] .res-icon, body.chrome-v4 #resourceBar[data-vlen] .res-icon svg { width: 13px; height: 13px; }
  body.chrome-v4 #resourceBar[data-vlen] .res-val { font-size: 13px; text-overflow: clip; }
  body.chrome-v4 #resourceBar[data-vlen="xl"] .res-val { font-size: 11px; }
}

/* Very narrow phones (320 px): everything in the strip tightens a little so three-digit numbers still fit. */
@media (max-width: 340px) {
  body.chrome-v4 #resourceBar { gap: 3px; }
  body.chrome-v4 #resourceBar .res-item { padding: 0 2px; gap: 2px; }
  body.chrome-v4 #resourceBar .res-top { gap: 2px; }
  body.chrome-v4 #resourceBar .res-icon, body.chrome-v4 #resourceBar .res-icon svg { width: 14px; height: 14px; }
  body.chrome-v4 #resourceBar .res-val { font-size: 13px; }
  body.chrome-v4 #resourceBar .civ-chip { padding: 0 4px; margin-left: 0; }
  body.chrome-v4 .civ-chip-name { font-size: 12px; letter-spacing: 0.2px; }
}

/* ═══ WIDE: the same strip, centred, with labels and rates ═══ */
@media (min-width: 900px) and (min-height: 500px) {
  body.chrome-v4 { --v4-strip-h: calc(52px + var(--v4-safe-t)); }
  body.chrome-v4 #resourceBar { justify-content: center; gap: 8px; }
  body.chrome-v4 #resourceBar .res-item { flex: 0 0 auto; height: 40px; padding: 0 12px; gap: 8px; }
  body.chrome-v4 #resourceBar .res-icon, body.chrome-v4 #resourceBar .res-icon svg { width: 20px; height: 20px; }
  body.chrome-v4 #resourceBar .res-val { font-size: 16px; }
  body.chrome-v4 #resourceBar .res-label,
  body.chrome-v4 #resourceBar .res-rate {
    position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible;
    font-size: 12px; font-weight: 800;
  }
  body.chrome-v4 #resourceBar .res-label { text-transform: uppercase; letter-spacing: 0.5px; }
  body.chrome-v4 #resourceBar .res-rate { padding: 1px 6px; border: 1px solid rgba(18, 13, 7, 0.5); }
  body.chrome-v4 #resourceBar .res-rate:empty { display: none; }
  body.chrome-v4 #resourceBar .res-item[data-trend]::after { display: none; }
  body.chrome-v4 #resourceBar .civ-chip { flex-direction: row; gap: 8px; height: 44px; padding: 0 14px; margin-left: 6px; }
  body.chrome-v4 #civInfo { left: 50%; right: auto; transform: translateX(-50%) translateY(-8px) scale(0.98); transform-origin: 50% 0; }
  body.chrome-v4 #civInfo.open { transform: translateX(-50%); }
  body.chrome-v4 #statusStrip { left: 50%; right: auto; max-width: min(720px, calc(100vw - 32px)); transform: translateX(-50%) translateY(-8px); }
  body.chrome-v4 #statusStrip.visible { transform: translateX(-50%); }
  body.chrome-v4 #placementHelper { left: 50%; transform: translateX(-50%) translateY(-8px); }
  body.chrome-v4 #placementHelper.visible { transform: translateX(-50%); }
  body.chrome-v4 #cancelBanner { left: 50%; right: auto; transform: translateX(-50%) translateY(14px); }
  body.chrome-v4 #cancelBanner.show { transform: translateX(-50%); }
  body.chrome-v4 #cancelBanner:active { transform: translateX(-50%) scale(0.97); }
  body.chrome-v4 #tileInfo { left: 0; right: 0; margin-inline: auto; width: min(440px, calc(100vw - 2 * var(--v4-fab-col))); }
  body.chrome-v4 #buildMenu .build-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  body.chrome-v4 .cv-prompt { bottom: max(calc(var(--v4-fab-bottom) + var(--v4-fab) + 10px), calc(var(--v4-bar-h) + 18px + var(--v4-card-h))); }
}

/* ═══ SIDEWAYS PHONE: a 40 px strip that starts where the rail ends; the card docks right ═══ */
@media (orientation: landscape) and (max-height: 499px) {
  body.chrome-v4 { --v4-strip-h: calc(40px + var(--v4-safe-t)); }
  body.chrome-v4 #resourceBar { left: var(--v4-rail-w); padding-left: 8px; }
  body.chrome-v4 #resourceBar .res-item { height: 30px; }
  body.chrome-v4 #resourceBar .civ-chip { flex-direction: row; gap: 6px; height: 32px; margin-top: 5px; padding: 0 8px; overflow: visible; }
  body.chrome-v4 #resourceBar .civ-chip::after { content: ""; position: absolute; inset: -8px; }
  body.chrome-v4 #resourceBar .civ-chip-name { font-size: 12px; }
  body.chrome-v4 .civ-hap { display: inline; }
  body.chrome-v4 #civInfo { max-height: calc(100dvh - var(--v4-strip-h) - 20px - var(--v4-safe-b)); width: min(360px, calc(100vw - var(--v4-rail-w) - 16px - var(--v4-safe-r))); }
  body.chrome-v4 #statusStrip { display: none; }
  body.chrome-v4 #placementHelper { left: calc(var(--v4-rail-w) + 8px); max-width: calc(100vw - var(--v4-rail-w) - 16px - var(--v4-safe-r) - 72px); }
  body.chrome-v4 #cancelBanner { bottom: max(12px, var(--v4-safe-b)); left: calc(var(--v4-rail-w) + 8px); }
  /* The building card docks on the right, left of the Build button. */
  body.chrome-v4 #tileInfo {
    left: auto; right: var(--v4-fab-col); bottom: max(8px, var(--v4-safe-b));
    width: min(320px, calc(100vw - var(--v4-rail-w) - var(--v4-fab-col) - 16px));
    max-height: calc(100dvh - var(--v4-strip-h) - 16px - var(--v4-safe-b));
    transform: translateX(14px);
  }
  body.chrome-v4 #tileInfo.visible { transform: none; }
  body.chrome-v4 #buildMenu {
    left: calc(var(--v4-rail-w) + 8px); right: var(--v4-fab-col); bottom: max(8px, var(--v4-safe-b));
    margin-inline: 0; max-width: none;
    max-height: calc(100dvh - var(--v4-strip-h) - 16px - var(--v4-safe-b));
  }
  body.chrome-v4 #buildMenu .build-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  body.chrome-v4 .cv-prompt {
    left: calc(var(--v4-rail-w) + 12px); bottom: max(12px, var(--v4-safe-b));
    width: min(420px, calc(100vw - var(--v4-rail-w) - 24px - var(--v4-fab-col)));
    transform: translateY(30px) scale(0.94);
  }
  body.chrome-v4 .cv-prompt.show { transform: none; }
  body.chrome-v4:has(#tileInfo.visible) .cv-prompt { visibility: hidden; }
}

/* ------------------------------------------------------------------ turn-the-city button
   Created by js/city-v3.js while the real-time 3D city is on screen (#cityRotateBtn).
   Bottom left above the bar (left thumb); the Build button has the bottom right. */
body.chrome-v4 #cityRotateBtn {
  left: max(12px, var(--v4-safe-l)) !important;
  bottom: calc(var(--v4-bar-h) + 16px) !important;
  width: 52px !important; height: 52px !important;
  border: 2px solid var(--jc-gold-dk, #b8862b) !important;
  background: radial-gradient(circle at 35% 28%, #5a4326, #2c1f10) !important;
  color: #ffe7a8 !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.4);
  z-index: 120 !important;
}
body.chrome-v4 #cityRotateBtn:active { transform: translateY(2px); }
body.chrome-v4 #cityRotateBtn:focus-visible { outline: 3px solid var(--jc-sky, #7cc8ff); outline-offset: 3px; }
/* out of the way whenever a sheet, a card or a mode owns the bottom of the screen */
body.chrome-v4.v4-more-open #cityRotateBtn,
body.chrome-v4.v4-build-open #cityRotateBtn,
body.chrome-v4.hunt-focus-mode #cityRotateBtn,
body.raid-active #cityRotateBtn,
body.chrome-v4:has(#tileInfo.visible.v4-card) #cityRotateBtn,
body.chrome-v4:has(#civInfo.open) #cityRotateBtn { display: none !important; }
/* The one-line "Empty tile" note (it also pops up after a pinch) no longer takes the button away: the button just rides above it. */
body.chrome-v4:not(.placement-mode):has(#tileInfo.visible:not(.v4-card)) #cityRotateBtn { bottom: calc(var(--v4-bar-h) + 16px + 56px) !important; }
/* While placing, the Cancel banner owns the bottom row: the turn button sits above it (it was hidden under it). */
body.chrome-v4.placement-mode #cityRotateBtn { bottom: calc(var(--v4-bar-h) + 12px + 48px + 10px) !important; }
@media (orientation: landscape) and (max-height: 499px) {
  body.chrome-v4 #cityRotateBtn {
    left: calc(var(--v4-rail-w) + 12px) !important;
    bottom: max(12px, var(--v4-safe-b)) !important;
    width: 48px !important; height: 48px !important;
  }
  body.chrome-v4:not(.placement-mode):has(#tileInfo.visible:not(.v4-card)) #cityRotateBtn { bottom: max(12px, var(--v4-safe-b)) !important; }
  body.chrome-v4.placement-mode #cityRotateBtn { bottom: calc(max(12px, var(--v4-safe-b)) + 58px) !important; }
}

/* The "your building is ready, step inside" prompt must never sit on a sheet the player is using. */
body.chrome-v4.v4-build-open .cv-prompt,
body.chrome-v4.v4-more-open .cv-prompt,
body.chrome-v4.placement-mode .cv-prompt { display: none !important; }

/* ═══ ROUND 2 ═══ */
body.chrome-v4 { --v4-free-l: 0px; }
@media (orientation: landscape) and (max-height: 499px) { body.chrome-v4 { --v4-free-l: var(--v4-rail-w); } }

/* ── One scrim behind the city sheet, the open status line and the Build sheet ───
   A tap outside only closes them (it never selects a tile or places a building). It sits above the buttons that float on the
   city (DEFEND, the card) and below the sheets (Build 110, status line 126, city sheet 125); the bar and the round Build
   button rise above it so they still work. */
body.chrome-v4 .v4-scrim {
  position: fixed;
  z-index: 109;
  left: 0; right: 0; bottom: 0;
  top: var(--v4-strip-h);
  background: rgba(8, 5, 2, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
body.chrome-v4.v4-scrim-on .v4-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
body.chrome-v4.v4-scrim-on #bottomNav { z-index: 130; }
body.chrome-v4.hunt-focus-mode .v4-scrim { display: none; }
@media (orientation: landscape) and (max-height: 499px) { body.chrome-v4 .v4-scrim { left: var(--v4-rail-w); } }
@media (prefers-reduced-motion: reduce) { body.chrome-v4 .v4-scrim { transition: none; } }

/* ── "Your Tent is ready" bar: one compact row, at most 64 px tall ───────────────
   Phone and tablet: docked just above the bar (above the card when one is open), clear of the round Build button's column;
   the turn button steps aside while it shows. Sideways phone: bottom of the free area, right of the turn button. */
@media (max-width: 899px), (max-height: 499px) {
  body.chrome-v4 .cv-prompt {
    left: var(--v4-pad-l);
    right: var(--v4-fab-col);
    bottom: calc(var(--v4-bar-h) + 12px + var(--v4-card-h));
    width: auto;
    max-width: none;
    height: 64px;
    box-sizing: border-box;
    padding: 0 6px 0 10px;
    gap: 8px;
    border-radius: 16px;
    transform: translateY(16px);
  }
  body.chrome-v4 .cv-prompt.show { transform: none; }
  body.chrome-v4 .cv-prompt-burst { width: 26px; height: 26px; font-size: 18px; animation: none; }
  body.chrome-v4 .cv-prompt-text { display: flex; align-items: center; }
  /* one row: icon, the words (two short lines on a narrow phone), the button, the close button */
  body.chrome-v4 .cv-prompt-text strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.15; }
  body.chrome-v4 .cv-prompt-text span { display: none; }
  body.chrome-v4 .cv-prompt-go { min-height: 44px; height: 44px; padding: 0 9px; font-size: 13px; white-space: nowrap; border-radius: 12px; }
  body.chrome-v4 .cv-prompt-x { width: 44px; height: 44px; font-size: 16px; }
}
@media (max-width: 899px) and (min-height: 500px) { body.chrome-v4:has(.cv-prompt.show) #cityRotateBtn { display: none !important; } }
@media (max-width: 339px) {
  body.chrome-v4 .cv-prompt-burst { display: none; }
  body.chrome-v4 .cv-prompt { gap: 6px; padding: 0 4px 0 8px; }
  body.chrome-v4 .cv-prompt-text strong { font-size: 13px; }
  body.chrome-v4 .cv-prompt-go { padding: 0 6px; font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 499px) {
  body.chrome-v4 .cv-prompt {
    left: calc(var(--v4-rail-w) + 12px + 56px);
    right: var(--v4-fab-col);
    bottom: max(12px, var(--v4-safe-b));
    width: auto;
    max-width: 440px;
  }
}

/* Small phones: the ready bar drops its picture so "Your Tent is ready!" fits on two short lines. */
@media (max-width: 440px) {
  body.chrome-v4 .cv-prompt-burst { display: none; }
  body.chrome-v4 .cv-prompt { gap: 6px; padding-left: 10px; }
  body.chrome-v4 .cv-prompt-text { min-width: 84px; }
  body.chrome-v4 .cv-prompt-text strong { font-size: 13px; }
}
/* The "badge unlocked" pop-up sits above an open building card, never on its buttons. */
body.chrome-v4 .pfx-badge-toast { bottom: calc(var(--v4-bar-h) + 12px + var(--v4-card-h, 0px)); }
@media (orientation: landscape) and (max-height: 499px) {
  body.chrome-v4 .pfx-badge-toast { left: calc(var(--v4-rail-w) + 12px); right: auto; transform: none; max-width: 42vw; bottom: max(12px, var(--v4-safe-b)); }
  body.chrome-v4:not(:has(#tileInfo.visible)) .pfx-badge-toast { left: calc(var(--v4-rail-w) + 72px); }
}