.districts-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(218, 151, 44, .22), transparent 34%),
    linear-gradient(180deg, #070301 0%, #170803 44%, #050201 100%);
  color: #f7ead3;
}

.district-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid rgba(214, 147, 47, .2);
  border-bottom: 1px solid rgba(214, 147, 47, .12);
  background: rgba(0,0,0,.88);
  color: #dca449;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 9px 24px;
  text-transform: uppercase;
  white-space: nowrap;
}
.district-ribbon::-webkit-scrollbar { display: none; }

.district-ribbon-cta {
  margin-left: auto;
  padding: 5px 14px;
  background: rgba(200,137,42,.15);
  border: 1px solid rgba(200,137,42,.4);
  border-radius: 3px;
  color: #f0b84d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms, border-color 160ms;
  white-space: nowrap;
}
.district-ribbon-cta:hover {
  background: rgba(200,137,42,.28);
  border-color: rgba(200,137,42,.65);
  color: #ffc84e;
}

.district-hero {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.district-hero-bg,
.district-hero-overlay {
  position: absolute;
  inset: 0;
}

.district-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.05);
}

.district-hero-overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.64), rgba(20,7,2,.28) 48%, rgba(8,3,1,.94)),
    radial-gradient(circle at 50% 35%, rgba(228, 159, 50, .24), transparent 35%);
}

.district-hero-content {
  position: relative;
  z-index: 1;
  width: min(1040px, calc(100% - 32px));
  text-align: center;
  padding: 104px 0 70px;
}

.district-kicker,
.district-panel-head span,
.district-ad-slot span,
.district-card-kicker {
  color: #dda34a;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.district-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 10vw, 118px);
  line-height: .88;
  margin: 8px 0 14px;
  color: #fff1d8;
  text-shadow: 0 5px 0 rgba(65, 26, 8, .92), 0 22px 50px rgba(0,0,0,.8);
}

.district-hero p {
  max-width: 780px;
  margin: 0 auto 24px;
  color: rgba(255, 239, 216, .9);
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.35;
}

.district-search {
  display: grid;
  grid-template-columns: 1fr auto;
  width: min(780px, 100%);
  margin: 0 auto 18px;
  border: 1px solid rgba(255, 190, 84, .56);
  border-radius: 8px;
  background: rgba(8, 3, 1, .78);
  box-shadow: 0 20px 50px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

.district-search input,
.district-search button {
  border: 0;
  outline: none;
  font: inherit;
}

.district-search input {
  background: rgba(255,255,255,.92);
  color: #2b170c;
  padding: 17px 18px;
}

.district-search button {
  background: linear-gradient(180deg, #e3a83b, #b86b1d);
  color: #180903;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 900;
  padding: 0 30px;
  text-transform: uppercase;
}

.district-mode-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

/* Separate link row below the filter buttons */
.district-hero-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.district-hero-link {
  border: 1px solid rgba(255, 185, 78, .3);
  border-radius: 7px;
  background: rgba(27, 9, 2, .7);
  color: #f7ddb1;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 900;
  padding: 9px 16px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background 160ms, border-color 160ms;
}
.district-hero-link:hover {
  background: rgba(216, 154, 43, .2);
  border-color: rgba(255, 213, 130, .6);
  color: #ffd98a;
}

.district-hero-link-political {
  background: rgba(200,137,42,.14);
  border-color: rgba(200,137,42,.45);
  color: #f0b84d;
}
.district-hero-link-political:hover {
  background: rgba(200,137,42,.28);
  border-color: rgba(200,137,42,.7);
  color: #ffc84e;
}

.district-mode-tabs button,
.district-content-tabs button,
.district-mode-tabs a {
  border: 1px solid rgba(255, 185, 78, .42);
  border-radius: 7px;
  background: rgba(27, 9, 2, .84);
  color: #f7ddb1;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 900;
  padding: 11px 16px;
  text-decoration: none;
  text-transform: uppercase;
}

.district-mode-tabs button.is-active,
.district-content-tabs button.is-active {
  background: rgba(216, 154, 43, .28);
  border-color: rgba(255, 213, 130, .78);
}

.district-layout,
.district-section,
.district-ad-grid {
  width: min(1220px, calc(100% - 32px));
  margin: 28px auto 0;
}

.district-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 16px;
}

.district-panel,
.district-map-panel,
.district-card,
.district-ad-slot {
  border: 1px solid rgba(207, 132, 31, .36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(33, 11, 2, .88), rgba(8, 3, 1, .92)),
    rgba(10, 4, 1, .88);
  box-shadow: 0 22px 54px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,227,178,.08);
}

.district-panel,
.district-map-panel {
  padding: 18px;
}

.district-panel-head,
.district-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.district-panel-head strong,
.district-section-head h2 {
  color: #fff0d7;
  font-family: var(--font-ui);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  margin: 0;
}

.district-source,
.district-section-head span {
  border: 1px solid rgba(255, 185, 78, .28);
  border-radius: 999px;
  color: #dba044;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.launch-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.launch-status-card {
  overflow: hidden;
  border: 4px solid rgba(255, 185, 78, .24);
  border-radius: 8px;
  background: rgba(16, 6, 2, .82);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 228, 180, .07);
}

.launch-status-card.is-open {
  border-color: rgba(70, 203, 125, .78);
}

.launch-status-card.is-progress {
  border-color: rgba(226, 178, 58, .9);
}

.launch-status-card.is-closed {
  border-color: rgba(226, 68, 50, .92);
}

.launch-status-card img {
  width: 100%;
  height: 138px;
  object-fit: cover;
  filter: saturate(1.05) brightness(.82);
}

.launch-status-card div {
  padding: 14px;
}

.launch-status-card span {
  color: #f0b248;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.launch-status-card strong {
  display: block;
  margin: 6px 0;
  color: #fff0d7;
  font-family: var(--font-ui);
  font-size: 24px;
}

.launch-status-card p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.45;
}

.district-source[data-state="live"] { color: #75e2ba; }
.district-source[data-state="fallback"] { color: #f7c873; }

.conquer-map-visual {
  position: relative;
  min-height: 560px;
  margin-top: 16px;
  border: 1px solid rgba(255, 185, 78, .2);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 48% 50%, rgba(21, 156, 141, .2), transparent 18%),
    linear-gradient(135deg, rgba(214, 139, 35, .24), rgba(0,0,0,.9)),
    url("../assets/images/panels/conquer_map_panel.png") center / cover;
  background-size: 54px 54px, 54px 54px, auto, auto, cover;
  overflow: hidden;
}

.map-street-zone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  min-width: 110px;
  min-height: 76px;
  border: 1px solid rgba(255, 211, 126, .48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.72)),
    var(--zone-image) center / cover;
  color: #fff2dc;
  cursor: pointer;
  display: grid;
  align-content: end;
  gap: 3px;
  overflow: hidden;
  padding: 12px;
  text-align: left;
  transform: translateZ(0);
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.map-street-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .45;
  pointer-events: none;
}

.map-street-zone:hover,
.map-street-zone:focus-visible {
  border-color: rgba(255, 219, 146, .95);
  box-shadow: 0 0 0 3px rgba(214, 145, 41, .16), 0 18px 34px rgba(0,0,0,.42);
  transform: translateY(-2px) scale(1.02);
}

.map-street-zone.is-minor {
  opacity: .82;
  min-height: 62px;
}

.map-street-zone span,
.map-street-zone small {
  position: relative;
  z-index: 1;
}

.map-street-zone span {
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.4vw, 23px);
  font-weight: 900;
  line-height: .96;
  text-shadow: 0 2px 10px rgba(0,0,0,.88);
}

.map-street-zone small {
  color: #e6b463;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 18px;
  aspect-ratio: 1;
  border: 2px solid #f2bd5b;
  border-radius: 50%;
  background: #d58d29;
  box-shadow: 0 0 0 8px rgba(213, 141, 41, .16), 0 0 22px rgba(230, 163, 67, .85);
  cursor: pointer;
}

.map-pin.is-boosted {
  width: 24px;
  background: #1fbba8;
  box-shadow: 0 0 0 10px rgba(31, 187, 168, .18), 0 0 32px rgba(31, 187, 168, .95);
}

.map-route {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 3px;
  transform: rotate(var(--r));
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(230,163,67,.1), rgba(230,163,67,.8), rgba(31,187,168,.7));
  box-shadow: 0 0 16px rgba(230, 163, 67, .45);
}

.active-district-detail,
.route-list,
.priority-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.district-social-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.district-social-summary span {
  border: 1px solid rgba(255, 185, 78, .2);
  border-radius: 7px;
  background: rgba(0,0,0,.32);
  padding: 12px;
}

.district-social-summary strong,
.district-social-summary small {
  display: block;
}

.district-social-summary strong {
  color: #f4b74c;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

.district-social-summary small {
  color: rgba(255, 235, 206, .68);
  font-size: 11px;
  font-weight: 900;
  margin-top: 4px;
  text-transform: uppercase;
}

.district-content-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.district-content-tabs button {
  font-size: 12px;
  padding: 9px 12px;
}

.district-street-grid,
.district-module-grid,
.district-magazine-grid,
.district-label-grid {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.district-street-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.district-street-card,
.district-module-card,
.district-label-card,
.district-empty {
  border: 1px solid rgba(207, 132, 31, .36);
  background:
    linear-gradient(135deg, rgba(33, 11, 2, .88), rgba(8, 3, 1, .94)),
    rgba(10, 4, 1, .88);
  min-height: 210px;
  overflow: hidden;
}

.district-street-card.is-active {
  border-color: rgba(255, 216, 134, .95);
  box-shadow: 0 0 0 3px rgba(220, 151, 43, .18), 0 22px 48px rgba(0,0,0,.44);
  position: relative;
  z-index: 3;
}

.district-street-card button,
.district-module-card a,
.district-label-card {
  color: #fff0d9;
  display: grid;
  min-height: 210px;
  text-decoration: none;
}

.district-street-card button {
  align-content: end;
  border: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.78)),
    var(--street-image) center / cover;
  cursor: pointer;
  font: inherit;
  padding: 16px;
  text-align: left;
}

.district-street-card button span,
.district-module-card span,
.district-label-card span {
  color: #dda34a;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.district-street-card button strong,
.district-module-card strong,
.district-label-card h3 {
  color: #fff3df;
  font-family: var(--font-ui);
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: .96;
  margin: 6px 0;
}

.district-street-card button small,
.district-module-card p,
.district-label-card p,
.district-label-card small {
  color: rgba(255, 235, 206, .78);
  line-height: 1.35;
}

.district-street-card .district-meta {
  padding: 12px;
}

.district-social-layout {
  grid-template-columns: 1fr 1fr;
}

.district-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.district-magazine-grid {
  grid-template-columns: 1.2fr repeat(4, minmax(0, .8fr));
}

.district-module-card a {
  align-content: end;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.82)),
    var(--module-image) center / cover;
  padding: 16px;
}

.district-module-card small {
  color: #e2ad54;
  font-weight: 900;
  text-transform: uppercase;
}

.district-label-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.district-label-card {
  align-content: end;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.84)),
    var(--label-image) center / cover;
  min-height: 360px;
  padding: 20px;
}

.district-label-card strong {
  color: #f0b650;
  font-family: var(--font-display);
  font-size: 28px;
}

.district-label-card a {
  border: 1px solid rgba(255, 190, 84, .46);
  border-radius: 6px;
  color: #ffd78d;
  font-family: var(--font-ui);
  font-weight: 900;
  margin-top: 14px;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.district-empty {
  align-content: center;
  color: rgba(255, 235, 206, .72);
  display: grid;
  font-weight: 800;
  min-height: 160px;
  padding: 18px;
}

.active-district-image {
  min-height: 190px;
  border: 1px solid rgba(255, 185, 78, .24);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72)),
    var(--district-image) center / cover;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 160, .08), 0 18px 38px rgba(0,0,0,.34);
}

.active-district-detail div,
.route-item,
.priority-item {
  border: 1px solid rgba(255, 185, 78, .18);
  border-radius: 7px;
  background: rgba(0,0,0,.3);
  color: rgba(255, 235, 206, .82);
  padding: 12px;
}

.active-district-detail strong,
.route-item strong,
.priority-item strong {
  color: #fff1d8;
  display: block;
  font-family: var(--font-ui);
  margin-bottom: 4px;
}

.district-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
}

.district-card {
  min-height: 340px;
  border-radius: 0;
  overflow: hidden;
}

.district-card-media {
  min-height: 178px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.64)),
    var(--district-image) center / cover;
  border-bottom: 1px solid rgba(255, 185, 78, .22);
  transition: transform .55s ease, filter .55s ease;
}

.district-card:hover .district-card-media {
  filter: saturate(1.14) contrast(1.08);
  transform: scale(1.025);
}

.district-card-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.district-card h3 {
  color: #fff4e2;
  font-family: var(--font-ui);
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1;
  margin: 0;
}

.district-card p,
.active-district-detail p,
.route-item p,
.priority-item p {
  color: rgba(255, 235, 206, .78);
  line-height: 1.42;
  margin: 0;
}

.district-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.district-meta span {
  border: 1px solid rgba(255, 185, 78, .24);
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  color: #f0c576;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  text-transform: uppercase;
}

.district-ad-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 12px;
}

.district-ad-slot {
  min-height: 120px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(220, 148, 43, .18), rgba(0,0,0,.9)),
    url("../assets/images/panels/map_stats_widget.png") center / cover;
}

.district-ad-slot strong {
  display: block;
  color: #fff0d7;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1.05;
  margin-top: 12px;
}

@media (max-width: 960px) {
  .district-layout,
  .district-card-grid,
  .district-ad-grid,
  .district-street-grid,
  .district-module-grid,
  .district-magazine-grid,
  .district-label-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .district-search {
    grid-template-columns: 1fr;
  }

  .district-search button {
    min-height: 48px;
  }

  .district-hero {
    min-height: 650px;
  }
}

/* ── T.U.P.A.C Featured District Card ──────────────────────────────────── */
.district-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-decoration: none;
  border: 1px solid rgba(200,137,42,.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
  background: #0d0d08;
  transition: border-color 220ms, box-shadow 220ms;
}
.district-featured-card:hover {
  border-color: rgba(200,137,42,.65);
  box-shadow: 0 8px 40px rgba(200,137,42,.15);
}

.district-featured-img {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.district-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 400ms ease;
}
.district-featured-card:hover .district-featured-img img {
  transform: scale(1.04);
}

.district-featured-body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 3px solid rgba(200,137,42,.4);
}

.district-featured-eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(200,137,42,.75);
}

.district-featured-title {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: .06em;
  color: #f0b84d;
  line-height: 1;
  margin: 0;
}

.district-featured-full {
  font-size: 13px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(240,184,77,.6);
}

.district-featured-desc {
  font-size: 15px;
  color: rgba(216,224,216,.72);
  line-height: 1.68;
  margin-top: 4px;
}

.district-featured-planks {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.district-featured-planks li {
  font-size: 13px;
  color: rgba(216,224,216,.5);
  padding-left: 14px;
  position: relative;
}
.district-featured-planks li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(200,137,42,.6);
}

.district-featured-cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f0b84d;
  transition: letter-spacing 200ms;
}
.district-featured-card:hover .district-featured-cta {
  letter-spacing: .18em;
}

@media (max-width: 800px) {
  .district-featured-card {
    grid-template-columns: 1fr;
  }
  .district-featured-img {
    min-height: 220px;
  }
  .district-featured-body {
    border-left: none;
    border-top: 3px solid rgba(200,137,42,.4);
    padding: 24px 20px;
  }
}