:root {
  --bg: #070809;
  --panel: #101112;
  --panel-2: #151311;
  --line: rgba(198, 151, 75, 0.22);
  --line-2: rgba(198, 151, 75, 0.38);
  --gold: #c89a4a;
  --gold-soft: #f2d39a;
  --text: #efe5d3;
  --muted: #b8a88d;
  --faint: #857660;
  --green: #79c879;
  --red: #dd736b;
  --blue: #6ea3dc;
  --shadow: 0 18px 50px rgba(0,0,0,.42);
  --radius: 18px;
}

.bl-build-marker {
  display: block;
  margin-bottom: 7px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

/* Phase 21.121 — stable, one-click Territory action feedback */
#territory .phase21121-territory-starting,
#territory .phase21121-territory-starting:disabled {
  opacity: .9;
  color: #171006;
  border-color: rgba(242, 211, 154, .86);
  background: linear-gradient(135deg, #f0cb82, #b9812e);
  animation: phase21121TerritoryStarting .78s ease-in-out infinite alternate;
}

/* Phase 21.122 — Independent beginnings, Street Work, and Family Legacy */
.nav-btn.bl21122-family-locked::after {
  content: "FAMILY";
  margin-left: auto;
  border: 1px solid rgba(210, 171, 96, .35);
  border-radius: 999px;
  padding: 2px 6px;
  color: #c8a76c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.bl21122-street-setup .auth-family-media img,
.bl21123-street-setup .auth-family-media img {
  object-position: center;
}

.bl21122-street-hero,
.bl21122-family-choice-hero,
.bl21122-gate {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: center;
  padding: 22px;
  border-color: rgba(197, 154, 73, .28);
  background:
    radial-gradient(circle at 92% 10%, rgba(186, 131, 40, .12), transparent 35%),
    linear-gradient(145deg, rgba(22, 20, 17, .98), rgba(11, 11, 10, .98));
}

.bl21122-hero-stats,
.bl21122-legacy-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.bl21122-hero-stats > div,
.bl21122-legacy-summary > div,
.bl21122-job-meta > div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  padding: 10px;
}

.bl21122-hero-stats span,
.bl21122-legacy-summary span,
.bl21122-job-meta span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.bl21122-hero-stats strong,
.bl21122-legacy-summary strong,
.bl21122-job-meta strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
}

.bl21122-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.bl21122-job-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.bl21122-job-card {
  min-width: 0;
  overflow: hidden;
}

.bl21122-job-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.bl21122-job-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

.bl21122-job-button {
  margin-top: auto;
}

.bl21122-job-button.bl21122-clicked,
.bl21122-job-button.bl21122-clicked:disabled {
  color: #171108;
  border-color: #f0c66f;
  background: linear-gradient(135deg, #f2cf85, #bd8030);
  opacity: 1;
  animation: bl21122-click-pulse .78s ease-in-out;
}

@keyframes bl21122-click-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(223, 179, 87, 0); }
  45% { transform: scale(.975); box-shadow: 0 0 0 6px rgba(223, 179, 87, .11); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(223, 179, 87, 0); }
}

.bl21122-active-list {
  display: grid;
  gap: 9px;
}

.bl21122-active-row {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(220px, 1.4fr) 48px;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  padding: 11px 12px;
}

.bl21122-active-row strong,
.bl21122-active-row span {
  display: block;
}

.bl21122-active-row span,
.bl21122-active-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.bl21122-active-row em {
  text-align: right;
}

.bl21122-path-grid {
  align-items: start;
}

.bl21122-directory-grid,
.bl21122-benefit-grid {
  align-items: stretch;
}

.bl21122-directory-card,
.bl21122-benefit {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bl21122-directory-card button {
  margin-top: auto;
}

.bl21122-benefit strong,
.bl21122-benefit span {
  display: block;
}

.bl21122-benefit span {
  color: var(--muted);
  line-height: 1.5;
}

.bl21122-lock-mark {
  justify-self: end;
  border: 1px solid rgba(215, 174, 91, .38);
  border-radius: 50%;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  color: #d8b16a;
  font-family: "Cinzel", serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 28px rgba(197, 145, 50, .08);
}

.bl21122-family-extension {
  display: contents;
}

.bl21122-legacy-hub {
  border-color: rgba(194, 147, 62, .32);
  background:
    radial-gradient(circle at 94% 4%, rgba(187, 133, 36, .1), transparent 34%),
    var(--panel);
}

.bl21122-legacy-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0;
}

.bl21122-weekly-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  border: 1px solid rgba(200, 159, 79, .24);
  border-radius: 11px;
  background: rgba(185, 129, 35, .055);
  padding: 12px;
}

.bl21122-weekly-order strong,
.bl21122-weekly-order span {
  display: block;
}

.bl21122-weekly-order span,
.bl21122-weekly-order em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.bl21122-weekly-order .progress {
  grid-column: 1 / -1;
  margin: 0;
}

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

.bl21122-contribute-grid > div {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  padding: 11px;
}

.bl21122-contribute-grid strong,
.bl21122-contribute-grid span {
  display: block;
}

.bl21122-contribute-grid span {
  min-height: 31px;
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.bl21122-legacy-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bl21122-legacy-branch:first-child {
  grid-column: 1 / -1;
}

.bl21122-legacy-node {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .075);
  padding: 12px 0;
}

.bl21122-legacy-node:first-of-type {
  border-top: 0;
}

.bl21122-legacy-node.unlocked {
  color: #d9ba78;
}

.bl21122-legacy-node.locked {
  opacity: .68;
}

.bl21122-node-order {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(202, 161, 80, .32);
  border-radius: 50%;
  color: #d5ad60;
  font-size: 11px;
  font-weight: 800;
}

.bl21122-legacy-node strong,
.bl21122-legacy-node span,
.bl21122-legacy-node small {
  display: block;
}

.bl21122-legacy-node span,
.bl21122-legacy-node small {
  color: var(--muted);
  line-height: 1.4;
}

.bl21122-legacy-node small {
  margin-top: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bl21122-dashboard-affiliation.independent {
  border-color: rgba(205, 161, 76, .3);
}

.bl21122-independent-crew-note,
.bl21122-independent-ops-note {
  border-color: rgba(203, 160, 75, .28);
}

@media (max-width: 1180px) {
  .bl21122-job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl21122-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl21122-legacy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .bl21122-street-hero,
  .bl21122-family-choice-hero,
  .bl21122-gate { grid-template-columns: 1fr; }
  .bl21122-lock-mark { justify-self: start; width: 88px; height: 88px; font-size: 12px; }
  .bl21122-contribute-grid,
  .bl21122-legacy-tree { grid-template-columns: 1fr; }
  .bl21122-legacy-branch:first-child { grid-column: auto; }
  .bl21122-active-row { grid-template-columns: 1fr; }
  .bl21122-active-row em { text-align: left; }
}

@media (max-width: 620px) {
  .bl21122-job-grid,
  .bl21122-check-grid,
  .bl21122-hero-stats,
  .bl21122-legacy-summary { grid-template-columns: 1fr; }
  .bl21122-legacy-node { grid-template-columns: 26px minmax(0, 1fr); }
  .bl21122-legacy-node button { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bl21122-job-button.bl21122-clicked { animation: none; }
}
@keyframes phase21121TerritoryStarting {
  from { box-shadow: 0 0 0 0 rgba(216, 166, 78, .2); filter: brightness(.92); }
  to { box-shadow: 0 0 0 5px rgba(216, 166, 78, .16); filter: brightness(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  #territory .phase21121-territory-starting { animation: none; }
}

/* Phase 21.120 — stable in-place Crew Morale feedback */
#crew .phase2178-morale-reqs > .phase21120-requirement-ok {
  border-color: rgba(73, 181, 111, .34) !important;
}
#crew .phase2178-morale-reqs > .phase21120-requirement-bad {
  border-color: rgba(206, 89, 78, .34) !important;
}
#crew .phase2178-morale-btn.phase21120-morale-clicked {
  background: linear-gradient(135deg, #5fc47d, #2f8750) !important;
  border-color: rgba(137, 234, 167, .8) !important;
  color: #07170c !important;
  box-shadow: 0 0 0 0 rgba(95, 196, 125, .55);
  animation: phase21120MoraleApplied .9s ease-out both;
}
@keyframes phase21120MoraleApplied {
  0% { transform: scale(.97); box-shadow: 0 0 0 0 rgba(95, 196, 125, .6); }
  35% { transform: scale(1.025); box-shadow: 0 0 0 7px rgba(95, 196, 125, .17); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(95, 196, 125, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #crew .phase2178-morale-btn.phase21120-morale-clicked { animation: none; }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(200,154,74,.08), transparent 24%),
    linear-gradient(180deg, #08090a, #060708 40%, #050506 100%);
}
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.hidden { display: none !important; }
.noscript { padding: 12px; text-align: center; background: #300; color: #fff; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar {
  padding: 18px 14px;
  background: rgba(10,10,10,.96);
  border-right: 1px solid rgba(255,255,255,.04);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 4px 4px 12px; justify-content: center; }
.brand-logo {
  width: 78px;
  height: auto;
  display: block;
  border-radius: 18px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.55));
}
.brand-logo-sidebar {
  width: 156px;
  max-width: 100%;
  margin: 0 auto;
}
.brand-logo.big {
  width: 112px;
  max-width: 45%;
  margin-bottom: 10px;
}
.brand-mark {
  width: 62px; height: 78px; border-radius: 18px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--gold-soft); background: linear-gradient(180deg, rgba(200,154,74,.22), rgba(255,255,255,.03));
  font-family: Cinzel, serif; font-weight: 800; font-size: 26px; box-shadow: var(--shadow);
}
.brand-mark.big { width: 84px; height: 98px; font-size: 34px; }
.brand h1 { margin: 0; font-family: Cinzel, serif; font-size: 28px; line-height: .95; text-transform: uppercase; }
.brand p { margin: 6px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.nav { display: grid; gap: 8px; }
.nav-btn {
  border: 1px solid rgba(255,255,255,.04); background: rgba(255,255,255,.02); color: var(--muted);
  border-radius: 14px; padding: 14px 14px; text-align: left; transition: .18s ease;
}
.nav-btn:hover, .nav-btn.active { color: var(--gold-soft); border-color: var(--line-2); background: linear-gradient(90deg, rgba(200,154,74,.12), rgba(255,255,255,.02)); }
.sidebar-footer { margin-top: auto; display: grid; gap: 8px; }
.tiny { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.55; }

.main { padding: 18px 20px 32px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 14px; align-items: end; margin-bottom: 16px; }
.topbar h2 { margin: 4px 0 0; font-family: Cinzel, serif; font-size: clamp(28px, 3vw, 42px); }
.topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow { margin: 0; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
.muted { color: var(--muted); }

.primary, .ghost, .quiet, .danger {
  padding: 11px 14px; border-radius: 12px; border: 1px solid transparent; color: var(--text); background: transparent;
}
.primary { background: linear-gradient(180deg, #d9b46e, #9e702a); color: #1b1209; font-weight: 800; }
.ghost { border-color: var(--line); background: rgba(255,255,255,.03); color: var(--gold-soft); }
.quiet { border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.03); }
.danger { border-color: rgba(221,115,107,.3); background: rgba(221,115,107,.08); color: #ffd3ce; }
.small { padding: 7px 10px; font-size: 12px; }
.wide { width: 100%; }
.import-label { text-align: center; cursor: pointer; display: block; }

.resource-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.resource-pill, .card {
  background: linear-gradient(180deg, rgba(20,20,20,.97), rgba(13,12,11,.98));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.resource-pill { padding: 14px 16px; position: relative; overflow: hidden; }
.resource-pill::before { content: attr(data-icon); position: absolute; right: 14px; top: 12px; font-size: 20px; opacity: .9; }
.resource-pill label { display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:800; }
.resource-pill strong { display:block; margin-top:8px; font-size:26px; }
.resource-pill span { display:block; margin-top:6px; font-size:12px; color:var(--green); }
.resource-pill.heat span { color: var(--red); }
.resource-pill.loyalty span { color: var(--green); }

.welcome { min-height: calc(100vh - 170px); display: grid; place-items: center; }
.welcome-card { width: min(1220px, 100%); }
.auth-layout { display: grid; grid-template-columns: 1.2fr .9fr; gap: 18px; }
.auth-forms-wrap { display:grid; gap: 16px; align-content: start; }
.auth-media { overflow: hidden; position: relative; }
.auth-media > img { width: 100%; display:block; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
.auth-media-copy { padding: 18px; }
.auth-media-copy h2 { margin: 8px 0 10px; font-family: Cinzel, serif; font-size: clamp(32px, 4vw, 48px); }
.auth-thumb-row { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
.auth-form { padding: 18px; display:grid; gap: 12px; }
.auth-form h3 { margin: 0; font-family: Cinzel, serif; font-size: 26px; }
.auth-form label { display:grid; gap: 7px; color: var(--muted); }
.auth-form input {
  width: 100%; padding: 12px 13px; border-radius: 12px; background: rgba(255,255,255,.04); color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
}
.auth-form input:focus { outline:none; border-color: var(--line-2); box-shadow: 0 0 0 3px rgba(200,154,74,.08); }
.notice { padding: 12px 14px; border-radius: 14px; background: rgba(200,154,74,.08); border: 1px dashed var(--line-2); color: var(--muted); line-height: 1.55; }

.view { display:none; }
.view.active { display:block; }
.page-stack { display:grid; gap: 18px; }
.grid { display:grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-1 { grid-template-columns: 1fr; }
.layout-main-side { display:grid; grid-template-columns: minmax(0,1.4fr) 340px; gap: 16px; }
.side-column { display:grid; gap: 16px; align-content: start; }

.card { padding: 16px; overflow: hidden; }
.section-hero { display:grid; grid-template-columns: minmax(0,1fr) 440px; gap: 20px; align-items: start; }
.section-hero-copy h3 { margin: 8px 0 10px; font-family: Cinzel, serif; font-size: clamp(34px, 3vw, 52px); line-height: .96; }
.hero-description { margin: 0; color: var(--text); line-height: 1.7; }
.section-hero-media img, .media-card img, .portrait-card > img, .full-media, .map-wrap img {
  width: 100%; height: auto; display:block; border-radius: 14px; background: #090909;
}
.entity-card > img {
  display: block;
  width: auto;
  max-width: 68%;
  max-height: 220px;
  height: auto;
  margin: 0 auto 4px;
  border-radius: 14px;
  background: #090909;
  object-fit: contain;
}
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
.hero-stats-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.hero-stat { padding: 12px; border: 1px solid rgba(255,255,255,.05); border-radius: 14px; background: rgba(255,255,255,.025); }
.hero-stat span, .meta-line span, .meta-grid-inline span, .stat-label { display:block; font-size:11px; color: var(--faint); text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
.hero-stat strong { display:block; margin-top: 6px; font-size: 18px; }
.hero-stat em { display:block; margin-top: 6px; color: var(--muted); font-size: 12px; font-style: normal; }

.media-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 8px; }
.media-card-label { color: var(--gold-soft); font-size: 11px; font-weight: 800; letter-spacing:.14em; text-transform:uppercase; margin-bottom: 8px; }

.stat-card { padding: 16px; }
.stat-value { font-size: 28px; margin: 0; font-weight: 800; }
.stat-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.progress { margin-top: 10px; height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.progress > span { display:block; height:100%; background: linear-gradient(90deg, #7a5b27, #f0d390); }
.progress.heat > span { background: linear-gradient(90deg, #7c2f28, #eb857a); }
.progress.success > span { background: linear-gradient(90deg, #285630, #9ce4a3); }
.progress.blue > span { background: linear-gradient(90deg, #2e507a, #96c3ef); }

.section-head { display:flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 14px; }
.section-head.solo { margin: 0; }
.section-head h3 { margin: 0; font-family: Cinzel, serif; font-size: 26px; }
.entity-card, .portrait-card, .mini-district-card { padding: 10px; display:grid; gap: 12px; align-content: start; }
.entity-card {
  min-height: 500px;
  height: 100%;
  grid-template-rows: auto 1fr;
}
.entity-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.portrait-card-body { display:grid; gap: 10px; }
.entity-card-body .primary.wide,
.entity-card-body .row-actions {
  margin-top: auto;
}
.entity-head { display:flex; justify-content: space-between; gap: 10px; align-items: start; }
.entity-head h4 { margin:0; font-size: 20px; font-family: Cinzel, serif; }
.entity-card-body p, .mini-district-card p { margin:0; color: var(--muted); line-height:1.55; }
.badge { display:inline-flex; align-items:center; padding: 5px 9px; border-radius:999px; background: rgba(200,154,74,.12); border: 1px solid var(--line); color: var(--gold-soft); font-size: 12px; font-weight: 700; }
.badge.green { color: #d7ffd7; border-color: rgba(121,200,121,.36); background: rgba(121,200,121,.12); }
.badge.red { color: #ffd5d2; border-color: rgba(221,115,107,.36); background: rgba(221,115,107,.12); }
.badge.gray { color: var(--muted); background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
.meta-grid-inline { display:grid; gap: 10px; }
.meta-grid-inline.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.meta-grid-inline.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.meta-grid-inline > div, .meta-grid-inline .box { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); border-radius: 12px; padding: 10px; }
.meta-grid-inline strong { display:block; margin-top: 5px; }
.meta-line { display:flex; justify-content: space-between; gap: 8px; }
.portrait-card-body strong { font-size: 18px; }
.portrait-card-body span { color: var(--text); }
.portrait-card-body em { color: var(--muted); font-size: 13px; font-style: normal; }
.compact .entity-card-body { gap: 8px; }

.list-stack { display:grid; gap: 12px; }
.list-item { display:grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.list-thumb { width: 72px; border-radius: 10px; display:block; }
.list-main strong { display:block; font-size: 15px; }
.list-main span { display:block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.list-side { text-align: right; display:grid; gap: 4px; }
.list-side strong { font-size: 13px; }
.list-side span { color: var(--gold); font-size: 12px; }
.simple-row { grid-template-columns: 1fr auto auto; }
.simple-row strong { font-size: 14px; }
.simple-row span { color: var(--muted); }
.simple-row em { color: var(--gold); font-size: 12px; font-style: normal; }

.territory-snapshot .meta-grid-inline { margin-top: 12px; }
.map-wrap { position: relative; }
.map-label {
  position: absolute; transform: translate(-50%, -50%); padding: 8px 10px; border-radius: 12px; font-size: 12px;
  background: rgba(5,5,5,.76); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(4px);
}
.map-label strong { display:block; font-size: 12px; }
.map-label span { display:block; color: var(--muted); margin-top: 2px; font-size: 11px; }
.map-label.controlled { border-color: rgba(121,200,121,.45); }
.map-label.contested { border-color: rgba(200,154,74,.45); }
.map-label.rival { border-color: rgba(221,115,107,.45); }
.legend-row { display:flex; gap: 16px; flex-wrap:wrap; margin-top: 12px; color: var(--muted); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display:inline-block; margin-right:6px; }
.dot.controlled { background: var(--green); }
.dot.contested { background: var(--gold); }
.dot.rival { background: var(--red); }

.tag-row { display:flex; gap: 8px; flex-wrap: wrap; }
.tag { display:inline-flex; padding: 7px 11px; border-radius:999px; border:1px solid var(--line); color: var(--gold-soft); background: rgba(255,255,255,.02); font-size: 12px; font-weight: 700; }
.tip-list { display:grid; gap: 12px; }
.tip-list div { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.tip-list strong { display:block; margin-bottom: 6px; }
.tip-list span { color: var(--muted); line-height: 1.55; }

.timeline { display:grid; gap: 12px; position: relative; padding-left: 18px; }
.timeline::before { content:""; position:absolute; left: 6px; top: 2px; bottom: 2px; width:1px; background: var(--line-2); }
.log-item { position:relative; color: var(--muted); line-height: 1.55; }
.log-item::before { content:""; position:absolute; left: -16px; top: 7px; width:8px; height:8px; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(200,154,74,.10); }
.log-item strong { color: var(--text); }
.log-time { display:block; margin-top:4px; color: var(--faint); font-size:12px; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding: 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); }
th { color: var(--gold); font-size: 12px; letter-spacing:.12em; text-transform:uppercase; }
td { color: var(--muted); font-size: 14px; }
td strong { color: var(--text); }
.current-player { background: rgba(200,154,74,.08); }

.toast {
  position: fixed; right: 18px; bottom: 18px; max-width: 380px; padding: 14px 16px;
  background: rgba(14,14,14,.98); color: var(--text); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow);
  transform: translateY(130%); opacity: 0; transition: .22s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1280px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .layout-main-side, .section-hero, .auth-layout { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .entity-card { min-height: 470px; }
  .entity-card > img { max-width: 72%; max-height: 205px; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sidebar-footer { display:none; }
  .resource-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .main { padding: 16px; }
  .entity-card { min-height: auto; }
  .entity-card > img { max-width: 78%; max-height: 190px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar-actions button { flex:1; }
  .nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.cols-4, .grid.cols-3, .grid.cols-2, .hero-stats-grid, .meta-grid-inline.two, .meta-grid-inline.three, .auth-thumb-row { grid-template-columns: 1fr; }
  .resource-strip { grid-template-columns: 1fr; }
  .list-item, .simple-row { grid-template-columns: 1fr; }
  .list-side { text-align:left; }
}

.row-actions { display:flex; gap:10px; flex-wrap:wrap; }
.row-actions > * { flex: 1 1 0; }


/* --- Layout refinement pass: dashboard + compact management cards --- */

.section-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  min-height: 170px;
}
.section-hero-copy h3 {
  margin: 6px 0 8px;
  font-family: Cinzel, serif;
  font-size: clamp(28px, 2.35vw, 42px);
  line-height: .96;
}
.hero-description {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  max-width: 820px;
}
.section-hero-media img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  background: #090909;
}
.hero-actions { margin-top: 12px; }
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-top: 12px;
}
.hero-stat { padding: 10px; }

.dashboard-stack { gap: 14px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dashboard-stats .stat-card { min-height: 108px; }

.dashboard-current-ops,
.dashboard-crew,
.dashboard-fronts,
.dashboard-territory,
.dashboard-ledger {
  width: 100%;
}

.dashboard-crew-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-mini-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
}

.dashboard-mini-card img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  display: block;
}

.dashboard-mini-card strong,
.dashboard-front-card strong {
  display: block;
  font-size: 14px;
}

.dashboard-mini-card span,
.dashboard-front-card span {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
}

.dashboard-mini-card em,
.dashboard-front-card em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.dashboard-front-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.dashboard-front-card {
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 96px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
}

.dashboard-front-card img {
  width: 96px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.dashboard-front-card button { white-space: nowrap; }

.dashboard-territory-row {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.territory-thumb {
  height: 150px !important;
  object-fit: cover;
}

.territory-meta {
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-content: stretch;
}

.territory-meta > div {
  min-height: 70px;
  display: grid;
  align-content: center;
}

.dashboard-ledger {
  margin-top: 2px;
}

.compact-list .list-item,
.compact-list .notice {
  min-height: 72px;
}

/* Narrower management cards so more fit horizontally */
#operations .grid.cols-2,
#fronts .grid.cols-2,
#rivals .grid.cols-2,
#crew .grid.cols-3,
#crew .grid.cols-2 {
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  align-items: stretch;
  justify-content: start;
}

#operations .layout-main-side {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.entity-card {
  min-height: 390px;
  height: 100%;
  grid-template-rows: auto 1fr;
}

.entity-card > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 145px;
  max-height: none;
  margin: 0;
  border-radius: 14px;
  background: #090909;
  object-fit: contain;
  object-position: center center;
}

#fronts .entity-card > img,
#operations .entity-card > img {
  object-fit: cover;
}

.entity-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1 1 auto;
}

.entity-card-body p {
  font-size: 14px;
  line-height: 1.45;
}

.entity-head h4 {
  font-size: 18px;
}

.meta-grid-inline {
  gap: 8px;
}
.meta-grid-inline > div,
.meta-grid-inline .box {
  padding: 8px 9px;
}

.entity-card-body .primary.wide,
.entity-card-body .row-actions {
  margin-top: auto;
}

/* Hero pages that previously felt oversized */
#operations .section-hero,
#crew .section-hero,
#fronts .section-hero,
#rivals .section-hero {
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 150px;
}

#operations .section-hero-media img,
#crew .section-hero-media img,
#fronts .section-hero-media img,
#rivals .section-hero-media img {
  height: 120px;
  object-fit: cover;
}

@media (max-width: 1280px) {
  .dashboard-crew-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-front-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .territory-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 980px) {
  .section-hero,
  #operations .section-hero,
  #crew .section-hero,
  #fronts .section-hero,
  #rivals .section-hero {
    grid-template-columns: 1fr;
  }
  .section-hero-media img { height: 150px; }
  .dashboard-territory-row { grid-template-columns: 1fr; }
  .dashboard-front-card { grid-template-columns: 88px minmax(0,1fr); }
  .dashboard-front-card button { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .dashboard-crew-strip,
  .dashboard-front-strip,
  .territory-meta {
    grid-template-columns: 1fr;
  }
  .entity-card {
    min-height: auto;
  }
  .entity-card > img {
    height: 150px;
  }
}

/* --- No-image hero cards refinement --- */
.section-hero.section-hero-text-only,
#operations .section-hero.section-hero-text-only,
#crew .section-hero.section-hero-text-only,
#fronts .section-hero.section-hero-text-only,
#territory .section-hero.section-hero-text-only,
#rivals .section-hero.section-hero-text-only,
#leaderboard .section-hero.section-hero-text-only,
#ledger .section-hero.section-hero-text-only {
  grid-template-columns: 1fr;
  min-height: auto;
  padding: 18px 20px;
}
.section-hero-text-only .section-hero-copy {
  max-width: none;
}
.section-hero-text-only .hero-description {
  max-width: 980px;
}
.section-hero-text-only .hero-stats-grid {
  max-width: none;
}
.section-hero-text-only .section-hero-media {
  display: none !important;
}

@media (max-width: 1400px) {
  .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .brand-logo-sidebar { width: 132px; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .brand-logo-sidebar { width: 120px; }
  .dashboard-stats { grid-template-columns: 1fr; }
}

/* --- Mobile version refinement --- */
.mobile-nav-toggle,
.mobile-nav-close,
.sidebar-mobile-head,
.nav-backdrop {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 0 14px;
  background: linear-gradient(180deg, rgba(6,7,8,.98), rgba(6,7,8,.92) 72%, rgba(6,7,8,0));
  backdrop-filter: blur(8px);
}

.topbar-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.form-grid .wide,
.form-grid button,
.form-grid label:last-of-type {
  grid-column: auto;
}
.form-grid button[type="submit"] {
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 86vw);
    height: 100vh;
    z-index: 40;
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow-y: auto;
    padding-top: 12px;
  }

  .app-shell.nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }

  .mobile-drawer-logo {
    width: 138px;
    margin: 0;
  }

  .mobile-nav-toggle,
  .mobile-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    font-size: 22px;
    line-height: 1;
  }

  .mobile-nav-toggle {
    margin-bottom: 6px;
    align-self: flex-start;
  }

  .mobile-nav-close {
    flex: 0 0 auto;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    border: 0;
    background: rgba(0,0,0,.6);
  }

  .app-shell.nav-open .nav-backdrop {
    display: block;
  }

  .brand {
    display: none;
  }

  .main {
    padding: 12px 14px 28px;
  }

  .topbar {
    margin-bottom: 12px;
  }

  .topbar h2 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .topbar-actions > button {
    width: 100%;
  }

  .resource-strip,
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .dashboard-crew-strip,
  .dashboard-front-strip,
  .territory-meta,
  .hero-stats-grid,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .dashboard-front-card,
  .dashboard-mini-card,
  .list-item {
    grid-template-columns: 72px minmax(0,1fr);
  }

  .dashboard-front-card button,
  .list-side {
    grid-column: 1 / -1;
    text-align: left;
  }

  .dashboard-territory-row,
  .layout-main-side,
  .section-hero,
  #operations .section-hero,
  #crew .section-hero,
  #fronts .section-hero,
  #rivals .section-hero,
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .section-hero {
    min-height: auto;
    padding: 16px;
  }

  .section-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #operations .layout-main-side {
    grid-template-columns: 1fr;
  }

  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2 {
    grid-template-columns: 1fr;
  }

  .entity-card {
    min-height: auto;
  }

  .entity-card > img {
    height: 160px;
  }

  .meta-grid-inline.two,
  .meta-grid-inline.three {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .row-actions {
    flex-direction: column;
  }

  .welcome {
    min-height: auto;
    place-items: stretch;
  }

  .welcome-card {
    width: 100%;
    padding: 6px 0 0;
  }

  .auth-thumb-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 10px 10px 24px;
  }

  .sidebar {
    width: min(300px, 90vw);
    padding: 10px 10px 18px;
  }

  .nav {
    grid-template-columns: 1fr;
  }

  .nav-btn {
    padding: 15px 14px;
    font-size: 15px;
  }

  .topbar-actions {
    grid-template-columns: 1fr 1fr;
  }

  .topbar-actions #saveBtn {
    grid-column: 1 / -1;
  }

  .resource-strip,
  .dashboard-stats,
  .territory-meta,
  .meta-grid-inline.two,
  .meta-grid-inline.three,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-front-card,
  .dashboard-mini-card,
  .list-item,
  .simple-row {
    grid-template-columns: 1fr;
  }

  .dashboard-front-card img,
  .dashboard-mini-card img,
  .list-thumb {
    width: 100%;
    height: 130px;
  }

  .entity-card > img {
    height: 145px;
  }

  .section-head h3 {
    font-size: 22px;
  }

  .section-hero-copy h3 {
    font-size: clamp(24px, 10vw, 34px);
  }

  .hero-actions,
  .topbar-actions {
    gap: 8px;
  }

  .hero-actions > *,
  .row-actions > *,
  .topbar-actions > * {
    width: 100%;
  }
}

/* --- Mobile dashboard refinement requested --- */
.dashboard-mobile-controls {
  display: none;
}

@media (max-width: 1024px) {
  .topbar-actions {
    display: none !important;
  }

  .dashboard-mobile-controls {
    display: block;
  }

  .dashboard-mobile-action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-mobile-action-row > button {
    width: 100%;
  }

  .dashboard-stats,
  .dashboard-crew-strip,
  .dashboard-front-strip {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-stats > *,
  .dashboard-crew-strip > *,
  .dashboard-front-strip > * {
    scroll-snap-align: start;
  }

  .dashboard-stats > .card,
  .dashboard-stats > .stat-card,
  .dashboard-stats > div {
    flex: 0 0 145px;
    min-width: 145px;
  }

  .dashboard-stats .stat-card {
    min-height: 88px;
    padding: 12px 12px;
  }

  .dashboard-stats .stat-value,
  .dashboard-stats strong {
    font-size: 22px;
    line-height: 1.05;
  }

  .dashboard-stats .stat-note {
    font-size: 11px;
    margin-top: 6px;
  }

  .dashboard-mini-card {
    flex: 0 0 195px;
    min-width: 195px;
    grid-template-columns: 52px minmax(0,1fr);
    min-height: 74px;
    padding: 8px;
    gap: 8px;
  }

  .dashboard-mini-card img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
  }

  .dashboard-mini-card strong,
  .dashboard-front-card strong {
    font-size: 13px;
  }

  .dashboard-mini-card span,
  .dashboard-front-card span {
    font-size: 12px;
  }

  .dashboard-mini-card em,
  .dashboard-front-card em {
    font-size: 11px;
  }

  .dashboard-front-card {
    flex: 0 0 230px;
    min-width: 230px;
    grid-template-columns: 78px minmax(0,1fr);
    min-height: 82px;
    padding: 8px;
    gap: 8px;
  }

  .dashboard-front-card img {
    width: 78px;
    height: 56px;
  }

  .dashboard-front-card button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .dashboard-mobile-action-row {
    grid-template-columns: 1fr;
  }

  .dashboard-stats > .card,
  .dashboard-stats > .stat-card,
  .dashboard-stats > div {
    flex-basis: 135px;
    min-width: 135px;
  }

  .dashboard-mini-card {
    flex-basis: 182px;
    min-width: 182px;
  }

  .dashboard-front-card {
    flex-basis: 215px;
    min-width: 215px;
  }
}


/* --- Full mobile optimization overhaul --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.main,
.game-screen,
.view,
.page-stack,
.card,
.section-card,
.section-hero,
.layout-main-side,
.grid,
.table-wrap {
  max-width: 100%;
}

img {
  max-width: 100%;
}

@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  .main {
    padding: 10px 10px 20px;
  }

  .topbar {
    margin-bottom: 10px;
    padding: 8px 0 10px;
  }

  .topbar h2 {
    font-size: clamp(24px, 6.6vw, 30px);
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: .16em;
  }

  .topbar-actions {
    display: none !important;
  }

  .page-stack {
    gap: 10px;
  }

  .card {
    padding: 12px;
    border-radius: 14px;
  }

  .section-head {
    margin-bottom: 10px;
    gap: 8px;
  }

  .section-head h3 {
    font-size: 20px;
  }

  .section-hero.section-hero-text-only,
  #operations .section-hero.section-hero-text-only,
  #crew .section-hero.section-hero-text-only,
  #fronts .section-hero.section-hero-text-only,
  #territory .section-hero.section-hero-text-only,
  #rivals .section-hero.section-hero-text-only,
  #leaderboard .section-hero.section-hero-text-only,
  #ledger .section-hero.section-hero-text-only {
    padding: 14px;
  }

  .section-hero-copy h3 {
    font-size: clamp(24px, 7vw, 30px);
    margin: 4px 0 6px;
  }

  .hero-description {
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  .hero-stat {
    padding: 9px 10px;
  }

  .hero-stat strong {
    font-size: 16px;
  }

  .hero-stat em {
    font-size: 11px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hero-actions > * {
    width: 100%;
  }

  .dashboard-stats,
  .dashboard-crew-strip,
  .dashboard-front-strip,
  .territory-meta,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2,
  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2 {
    display: grid !important;
    overflow: visible !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-stats > *,
  .dashboard-crew-strip > *,
  .dashboard-front-strip > * {
    min-width: 0 !important;
  }

  .dashboard-stats .stat-card {
    min-height: 82px;
    padding: 10px;
  }

  .stat-label {
    font-size: 9px;
    letter-spacing: .11em;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-note {
    font-size: 10px;
    margin-top: 5px;
  }

  .dashboard-mini-card,
  .dashboard-front-card {
    min-height: 72px;
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
  }

  .dashboard-mini-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .dashboard-mini-card img {
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }

  .dashboard-front-card {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
  }

  .dashboard-front-card img {
    width: 54px;
    height: 46px;
    border-radius: 9px;
  }

  .dashboard-front-card button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dashboard-mini-card strong,
  .dashboard-front-card strong {
    font-size: 12px;
    line-height: 1.1;
  }

  .dashboard-mini-card span,
  .dashboard-front-card span,
  .dashboard-mini-card em,
  .dashboard-front-card em {
    font-size: 10px;
    line-height: 1.25;
  }

  .compact-list .list-item,
  .list-item {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 60px;
    padding: 8px;
    gap: 8px;
  }

  .list-thumb {
    width: 58px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
  }

  .list-main strong {
    font-size: 13px;
  }

  .list-main span,
  .list-side span,
  .list-side strong {
    font-size: 11px;
  }

  .list-side {
    grid-column: 1 / -1;
    text-align: left;
  }

  .dashboard-territory-row,
  .layout-main-side,
  #operations .layout-main-side {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .territory-thumb {
    height: 110px !important;
  }

  .territory-meta > div {
    min-height: 58px;
    padding: 8px;
  }

  .dashboard-mobile-controls {
    display: block;
  }

  .dashboard-mobile-action-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-mobile-action-row > * {
    width: 100%;
    padding: 10px 8px;
  }

  .entity-card {
    min-height: auto;
    padding: 10px;
    gap: 8px;
  }

  .entity-card > img {
    height: 108px;
    border-radius: 10px;
  }

  .entity-head h4 {
    font-size: 15px;
  }

  .entity-card-body,
  .portrait-card-body {
    gap: 7px;
  }

  .entity-card-body p,
  .mini-district-card p {
    font-size: 12px;
    line-height: 1.35;
  }

  .badge {
    font-size: 10px;
    padding: 4px 7px;
  }

  .meta-grid-inline.two,
  .meta-grid-inline.three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .meta-grid-inline > div,
  .meta-grid-inline .box {
    padding: 7px;
  }

  .meta-grid-inline span,
  .hero-stat span,
  .meta-line span {
    font-size: 9px;
  }

  .meta-grid-inline strong {
    font-size: 12px;
  }

  .row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .row-actions > * {
    width: 100%;
  }

  .map-label {
    padding: 5px 6px;
    font-size: 10px;
    border-radius: 8px;
  }

  .map-label strong {
    font-size: 10px;
  }

  .map-label span {
    font-size: 9px;
  }

  .legend-row {
    gap: 8px;
    font-size: 11px;
  }

  .timeline {
    gap: 9px;
    padding-left: 14px;
  }

  .log-item {
    font-size: 12px;
    line-height: 1.4;
  }

  .log-time {
    font-size: 10px;
  }

  .table-wrap {
    overflow-x: auto;
  }

  table {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  .main {
    padding: 8px 8px 18px;
  }

  .card {
    padding: 10px;
  }

  .mobile-drawer-logo,
  .brand-logo-sidebar {
    width: 128px;
  }

  .topbar h2 {
    font-size: 24px;
  }

  .hero-actions,
  .dashboard-stats,
  .dashboard-crew-strip,
  .dashboard-front-strip,
  .territory-meta,
  .meta-grid-inline.two,
  .meta-grid-inline.three,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2,
  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2,
  .row-actions,
  .dashboard-mobile-action-row {
    grid-template-columns: 1fr;
  }

  .dashboard-stats .stat-card {
    min-height: 74px;
  }

  .dashboard-mini-card {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 66px;
  }

  .dashboard-mini-card img {
    width: 38px;
    height: 38px;
  }

  .dashboard-front-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 68px;
  }

  .dashboard-front-card img {
    width: 48px;
    height: 42px;
  }

  .compact-list .list-item,
  .list-item {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 56px;
  }

  .list-thumb {
    width: 48px;
    height: 42px;
  }

  .entity-card > img {
    height: 94px;
  }

  .entity-head h4 {
    font-size: 14px;
  }

  .entity-card-body p,
  .mini-district-card p,
  .hero-description,
  .timeline,
  td {
    font-size: 11px;
  }

  th {
    font-size: 10px;
  }

  .section-head h3 {
    font-size: 18px;
  }

  .section-hero-copy h3 {
    font-size: 22px;
  }

  .sidebar {
    width: min(280px, 88vw);
  }
}

@media (max-width: 640px) {
  .table-wrap {
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
  }

  table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 8px;
  }

  tbody tr {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    padding: 8px;
  }

  tbody td {
    border-bottom: 1px dashed rgba(255,255,255,.06);
    padding: 6px 0;
    text-align: left;
    min-height: 22px;
  }

  tbody td:last-child {
    border-bottom: 0;
  }

  tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--gold);
    font-size: 9px;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 800;
  }
}

/* --- Final mobile compact no-scroll overhaul --- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
  }

  .main,
  .game-screen,
  .view,
  .page-stack,
  .card,
  .section-card,
  .section-hero,
  .layout-main-side,
  .grid,
  .dashboard-territory-row,
  .dashboard-front-strip,
  .dashboard-crew-strip,
  .table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .main {
    padding: 8px 8px 16px;
  }

  .topbar {
    margin-bottom: 6px;
    padding: 8px 0 8px;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .topbar .eyebrow {
    font-size: 9px;
  }

  .resource-strip {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px;
    margin-bottom: 8px;
    position: sticky;
    top: 62px;
    z-index: 19;
    background: linear-gradient(180deg, rgba(6,7,8,.98), rgba(6,7,8,.92));
    padding: 4px 0 6px;
  }

  .resource-pill {
    padding: 6px 4px;
    min-width: 0;
    border-radius: 10px;
  }

  .resource-pill::before {
    display: none;
  }

  .resource-pill label {
    font-size: 7px;
    letter-spacing: .08em;
    line-height: 1.1;
  }

  .resource-pill strong {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1;
  }

  .resource-pill span {
    display: none;
  }

  .dashboard-stats {
    display: none !important;
  }

  .page-stack {
    gap: 8px;
  }

  .card {
    padding: 10px;
    border-radius: 12px;
  }

  .section-head {
    margin-bottom: 8px;
    gap: 6px;
  }

  .section-head h3 {
    font-size: 17px;
  }

  .section-head .ghost.small,
  .section-head .badge {
    font-size: 9px;
    padding: 4px 6px;
  }

  .section-hero.section-hero-text-only,
  #operations .section-hero.section-hero-text-only,
  #crew .section-hero.section-hero-text-only,
  #fronts .section-hero.section-hero-text-only,
  #territory .section-hero.section-hero-text-only,
  #rivals .section-hero.section-hero-text-only,
  #leaderboard .section-hero.section-hero-text-only,
  #ledger .section-hero.section-hero-text-only {
    padding: 12px;
  }

  .section-hero-copy h3 {
    font-size: 20px;
    margin: 3px 0 4px;
  }

  .hero-description {
    font-size: 11px;
    line-height: 1.35;
  }

  .hero-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }

  .hero-actions .primary,
  .hero-actions .ghost {
    padding: 8px 6px;
    font-size: 11px;
  }

  .hero-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
  }

  .hero-stat {
    padding: 6px;
    border-radius: 10px;
  }

  .hero-stat span {
    font-size: 7px;
    line-height: 1.1;
  }

  .hero-stat strong {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.1;
  }

  .hero-stat em {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.15;
  }

  .dashboard-crew-strip,
  .dashboard-front-strip,
  .territory-meta,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2,
  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px;
    overflow: visible !important;
  }

  .dashboard-mini-card,
  .dashboard-front-card,
  .entity-card,
  .mini-district-card,
  .portrait-card {
    min-width: 0 !important;
  }

  .dashboard-mini-card {
    grid-template-columns: 36px minmax(0,1fr);
    gap: 6px;
    min-height: 58px;
    padding: 6px;
  }

  .dashboard-mini-card img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .dashboard-front-card {
    grid-template-columns: 42px minmax(0,1fr);
    gap: 6px;
    min-height: 62px;
    padding: 6px;
  }

  .dashboard-front-card img {
    width: 42px;
    height: 36px;
    border-radius: 8px;
  }

  .dashboard-front-card button {
    grid-column: 1 / -1;
    padding: 6px 5px;
    font-size: 10px;
  }

  .dashboard-mini-card strong,
  .dashboard-front-card strong {
    font-size: 11px;
    line-height: 1.1;
  }

  .dashboard-mini-card span,
  .dashboard-front-card span,
  .dashboard-mini-card em,
  .dashboard-front-card em {
    font-size: 9px;
    line-height: 1.2;
  }

  .list-item,
  .compact-list .list-item,
  .simple-row {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 6px;
    min-height: 54px;
    padding: 6px;
  }

  .list-thumb {
    width: 44px;
    height: 36px;
    border-radius: 7px;
  }

  .list-main strong {
    font-size: 11px;
    line-height: 1.15;
  }

  .list-main span,
  .list-side strong,
  .list-side span,
  .simple-row strong,
  .simple-row span,
  .simple-row em {
    font-size: 9px;
    line-height: 1.2;
  }

  .list-side {
    grid-column: 1 / -1;
    text-align: left;
  }

  .dashboard-territory-row,
  .layout-main-side,
  #operations .layout-main-side {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .territory-thumb {
    height: 90px !important;
  }

  .territory-meta > div {
    min-height: 48px;
    padding: 6px;
  }

  .dashboard-mobile-controls {
    display: block;
  }

  .dashboard-mobile-action-row {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
  }

  .dashboard-mobile-action-row > button {
    padding: 8px 4px;
    font-size: 11px;
  }

  .entity-card {
    min-height: auto;
    padding: 8px;
    gap: 6px;
  }

  .entity-card > img {
    max-width: 100%;
    width: 100%;
    height: 78px;
    object-fit: cover;
    margin: 0 0 2px;
    border-radius: 9px;
  }

  .entity-head {
    gap: 5px;
  }

  .entity-head h4 {
    font-size: 12px;
    line-height: 1.15;
  }

  .entity-card-body,
  .portrait-card-body {
    gap: 5px;
  }

  .entity-card-body p,
  .mini-district-card p,
  .tip-list span,
  .notice,
  .log-item,
  td {
    font-size: 10px;
    line-height: 1.25;
  }

  .badge {
    font-size: 8px;
    padding: 3px 5px;
  }

  .meta-grid-inline.two,
  .meta-grid-inline.three {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 4px;
  }

  .meta-grid-inline > div,
  .meta-grid-inline .box,
  .tip-list div {
    padding: 5px;
    border-radius: 9px;
  }

  .meta-grid-inline span,
  .meta-line span,
  .hero-stat span,
  .stat-label {
    font-size: 7px;
    letter-spacing: .08em;
  }

  .meta-grid-inline strong {
    font-size: 10px;
    margin-top: 2px;
  }

  .row-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .row-actions > * {
    padding: 8px 5px;
    font-size: 10px;
  }

  .map-label {
    padding: 4px 5px;
    border-radius: 7px;
  }

  .map-label strong,
  .map-label span {
    font-size: 8px;
    line-height: 1.15;
  }

  .legend-row {
    gap: 6px;
    font-size: 9px;
  }

  .timeline {
    gap: 8px;
    padding-left: 12px;
  }

  .log-time {
    font-size: 9px;
  }

  .table-wrap {
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
    width: 100%;
  }

  table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 6px;
  }

  tbody tr {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(255,255,255,.02);
    padding: 6px;
  }

  tbody td {
    border-bottom: 1px dashed rgba(255,255,255,.05);
    padding: 4px 0;
    font-size: 10px;
  }

  tbody td:last-child {
    border-bottom: 0;
  }

  tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--gold);
    font-size: 7px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 800;
  }
}

@media (max-width: 380px) {
  .resource-strip {
    top: 58px;
  }

  .resource-pill label { font-size: 6px; }
  .resource-pill strong { font-size: 11px; }

  .section-head h3 { font-size: 16px; }
  .section-hero-copy h3 { font-size: 18px; }
  .hero-description { font-size: 10px; }

  .dashboard-crew-strip,
  .dashboard-front-strip,
  .territory-meta,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2,
  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2,
  .meta-grid-inline.two,
  .meta-grid-inline.three,
  .row-actions,
  .dashboard-mobile-action-row,
  .hero-actions,
  .hero-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-mini-card,
  .dashboard-front-card,
  .entity-card > img,
  .list-item,
  .simple-row {
    min-width: 0;
  }
}

/* --- Status guidance and requirement indicators --- */
.requirements-block {
  display: grid;
  gap: 8px;
}

.requirements-title {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.requirements-title.ok {
  color: #a7f3c5;
  background: rgba(15, 76, 50, .45);
  border: 1px solid rgba(99, 255, 179, .24);
}

.requirements-title.bad {
  color: #ffb0b0;
  background: rgba(96, 18, 18, .42);
  border: 1px solid rgba(255, 120, 120, .22);
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.requirement-chip {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

.requirement-chip.ok {
  border-color: rgba(99, 255, 179, .18);
  background: rgba(15, 76, 50, .26);
}

.requirement-chip.bad {
  border-color: rgba(255, 120, 120, .16);
  background: rgba(96, 18, 18, .25);
}

.requirement-chip span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.requirement-chip.ok span,
.requirement-chip.ok strong {
  color: #baf7d4;
}

.requirement-chip.bad span,
.requirement-chip.bad strong {
  color: #ffb7b7;
}

.requirement-chip strong {
  font-size: 12px;
  line-height: 1.15;
}

.action-help {
  padding: 8px 9px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.08);
}

#crew .entity-card > img,
#rivals .entity-card > img {
  object-position: center top;
}

@media (max-width: 768px) {
  #crew .entity-card > img,
  #rivals .entity-card > img {
    object-fit: cover;
    object-position: center top !important;
  }

  .requirements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .requirement-chip {
    padding: 5px 6px;
    border-radius: 8px;
  }

  .requirement-chip span {
    font-size: 7px;
  }

  .requirement-chip strong {
    font-size: 10px;
  }

  .action-help {
    padding: 6px 7px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  .requirements-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Crew page mobile redesign --- */
@media (max-width: 768px) {
  #crew .grid.cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: stretch;
  }

  #crew .grid.cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: stretch;
  }

  #crew .entity-card {
    min-height: 0 !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 10px;
  }

  #crew .entity-card > img {
    width: 100% !important;
    max-width: 100% !important;
    height: 70px !important;
    object-fit: contain !important;
    object-position: center top !important;
    margin: 0 !important;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
  }

  #crew .entity-card-body {
    gap: 5px !important;
  }

  #crew .entity-head {
    gap: 4px;
    align-items: flex-start;
  }

  #crew .entity-head h4 {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  #crew .badge {
    font-size: 7px !important;
    padding: 3px 5px !important;
  }

  #crew .entity-card-body p {
    font-size: 9px !important;
    line-height: 1.2 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #crew .meta-grid-inline.two,
  #crew .meta-grid-inline.three {
    gap: 4px !important;
  }

  #crew .meta-grid-inline > div,
  #crew .meta-grid-inline .box {
    padding: 4px !important;
    border-radius: 8px !important;
  }

  #crew .meta-grid-inline span {
    font-size: 6px !important;
    letter-spacing: .06em !important;
  }

  #crew .meta-grid-inline strong {
    font-size: 9px !important;
    margin-top: 1px !important;
    line-height: 1.15 !important;
  }

  #crew .action-help {
    font-size: 8px !important;
    line-height: 1.2 !important;
    padding: 5px !important;
    border-radius: 8px !important;
  }

  #crew .entity-card .primary.wide {
    width: 100%;
    min-height: 30px;
    padding: 6px 4px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 9px;
    white-space: normal;
  }
}

@media (max-width: 360px) {
  #crew .grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #crew .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #crew .entity-card > img {
    height: 66px !important;
  }

  #crew .entity-head h4 {
    font-size: 10px !important;
  }

  #crew .entity-card .primary.wide {
    min-height: 28px;
    font-size: 8.5px !important;
  }
}

/* --- Co-op family and battle preparation --- */
.family-add-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(130px, .7fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.inline-input {
  width: 100%;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.inline-input:focus {
  outline: none;
  border-color: var(--gold);
}
.family-member-card,
.permission-card,
.battle-card {
  min-height: auto;
}
.permission-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.permission-row span {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.permission-row span.ok {
  color: #baf7d4;
  background: rgba(15,76,50,.28);
  border-color: rgba(99,255,179,.18);
}
.permission-row span.bad {
  color: #ffb7b7;
  background: rgba(96,18,18,.26);
  border-color: rgba(255,120,120,.16);
}
.compact-actions {
  margin-top: 8px;
}
.family-roster-grid .family-member-card,
.permission-grid .permission-card {
  display: grid;
  gap: 10px;
}
#family .tip-list div,
#battles .battle-card {
  border-color: rgba(198,151,75,.16);
}
#family .section-hero-text-only,
#battles .section-hero-text-only {
  border-color: rgba(198,151,75,.28);
}
.battle-card > img {
  object-position: center top;
}
@media (max-width: 1024px) {
  .family-add-grid {
    grid-template-columns: 1fr 1fr;
  }
  .family-add-grid button {
    width: 100%;
  }
  .family-roster-grid,
  .permission-grid,
  .battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .family-add-grid,
  .family-roster-grid,
  .permission-grid,
  .battle-grid {
    grid-template-columns: 1fr !important;
  }
  .permission-row span {
    font-size: 9px;
    padding: 4px 6px;
  }
}

/* --- Progression / battles / territory expansion update --- */
.family-add-grid {
  align-items: stretch;
}
.family-add-grid .inline-input,
.family-add-grid button {
  min-height: 42px;
  height: 42px;
}

.territory-expansion-grid,
.battle-grid {
  align-items: stretch;
}

.district-expansion-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.district-expansion-card .primary.wide {
  margin-top: auto;
}

.requirements-block {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.requirements-title {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.requirements-title.ok {
  color: #b8ffd2;
  background: rgba(28, 96, 61, .32);
  border: 1px solid rgba(121, 200, 121, .35);
}

.requirements-title.bad {
  color: #ffc4c0;
  background: rgba(112, 38, 34, .32);
  border: 1px solid rgba(221, 115, 107, .35);
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.requirement-chip {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
}

.requirement-chip span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.requirement-chip strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.1;
}

.requirement-chip.ok {
  border-color: rgba(121, 200, 121, .28);
  background: rgba(28, 96, 61, .20);
}

.requirement-chip.ok span,
.requirement-chip.ok strong {
  color: #bfffd2;
}

.requirement-chip.bad {
  border-color: rgba(221, 115, 107, .28);
  background: rgba(112, 38, 34, .22);
}

.requirement-chip.bad span,
.requirement-chip.bad strong {
  color: #ffc4c0;
}

.action-help {
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--muted);
  line-height: 1.45;
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(198,151,75,.20);
}

.battle-active-row .progress,
.operation-list-item .progress {
  margin-top: 7px;
}

.late-game-notice {
  font-size: 13px;
}

#territory .map-wrap img {
  object-fit: cover;
}

#rivals .entity-card .progress,
.battle-card .progress {
  margin: 6px 0;
}

@media (max-width: 1024px) {
  .territory-expansion-grid,
  .battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .district-expansion-card {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .family-add-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
  .family-add-grid .inline-input,
  .family-add-grid button {
    min-height: 36px;
    height: 36px;
    font-size: 11px;
  }
  .territory-expansion-grid,
  .battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .requirements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .requirement-chip {
    padding: 5px 6px;
    border-radius: 8px;
  }
  .requirement-chip span { font-size: 7px; }
  .requirement-chip strong { font-size: 9px; }
  .requirements-title { font-size: 8px; padding: 3px 6px; }
  .action-help { font-size: 10px; line-height: 1.28; padding: 6px 7px; }
  .district-expansion-card .entity-head h4 { font-size: 13px; }
}

@media (max-width: 420px) {
  .territory-expansion-grid,
  .battle-grid,
  .family-add-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Unique landscape card art + compact war/territory UI --- */
#operations .entity-card > img,
#fronts .entity-card > img,
#rivals .entity-card > img,
#battles .entity-card > img,
.battle-card > img,
.rival-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: 176px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px;
  background: #080808;
}

.compact-battle-grid,
.territory-expansion-grid,
.rivals-grid {
  align-items: stretch;
}

.compact-battle-card {
  min-height: 0 !important;
}

.compact-battle-card .entity-card-body,
.rival-card .entity-card-body,
.district-expansion-card {
  gap: 9px;
}

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

.incoming {
  border-color: rgba(221,115,107,.32);
  background: rgba(92,22,20,.16);
}

.district-expansion-card .row-actions,
.rival-card .row-actions,
.compact-battle-card .row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.district-expansion-card .requirements-block,
.rival-card .requirements-block,
.compact-battle-card .requirements-block {
  margin-top: 0;
}

.late-game-notice,
.notice {
  overflow-wrap: anywhere;
}

@media (min-width: 1100px) {
  .compact-battle-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  }
  .territory-expansion-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  }
  .rivals-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  #operations .entity-card > img,
  #fronts .entity-card > img,
  #rivals .entity-card > img,
  #battles .entity-card > img,
  .battle-card > img,
  .rival-card > img {
    max-height: 130px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .battle-status-grid {
    grid-template-columns: 1fr;
  }

  .compact-battle-grid,
  .territory-expansion-grid,
  .rivals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .compact-battle-card,
  .rival-card,
  .district-expansion-card {
    padding: 8px !important;
  }

  .compact-battle-card .entity-head h4,
  .rival-card .entity-head h4,
  .district-expansion-card .entity-head h4 {
    font-size: 13px !important;
    line-height: 1.15;
  }

  .compact-battle-card p,
  .rival-card p,
  .district-expansion-card p {
    font-size: 10px !important;
    line-height: 1.28 !important;
  }

  .compact-battle-card .meta-grid-inline,
  .rival-card .meta-grid-inline,
  .district-expansion-card .meta-grid-inline {
    gap: 5px !important;
  }

  .compact-battle-card .meta-grid-inline > div,
  .rival-card .meta-grid-inline > div,
  .district-expansion-card .meta-grid-inline > div {
    padding: 5px !important;
  }

  .compact-battle-card .requirements-grid,
  .rival-card .requirements-grid,
  .district-expansion-card .requirements-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 4px;
  }

  .compact-battle-card .action-help,
  .rival-card .action-help,
  .district-expansion-card .action-help {
    font-size: 9px !important;
    line-height: 1.25 !important;
    padding: 6px !important;
  }
}

@media (max-width: 600px) {
  .compact-battle-grid,
  .territory-expansion-grid,
  .rivals-grid {
    grid-template-columns: 1fr !important;
  }

  #operations .entity-card > img,
  #fronts .entity-card > img,
  #rivals .entity-card > img,
  #battles .entity-card > img,
  .battle-card > img,
  .rival-card > img {
    max-height: 116px;
  }

  .district-expansion-card .row-actions,
  .rival-card .row-actions,
  .compact-battle-card .row-actions {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   Final image/UI polish patch
-------------------------------------------------------------------------- */
.entity-card > img,
.media-card img,
.auth-media > img,
.list-thumb {
  object-fit: cover;
}

#crew .entity-card > img,
#operations .entity-card > img,
#fronts .entity-card > img,
#rivals .entity-card > img,
#battles .entity-card > img,
.battle-card > img,
.rival-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  max-height: none !important;
  object-position: center center;
}

.nav-btn {
  position: relative;
}

.nav-btn .nav-indicator {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #a61d2d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(11,11,15,.8);
}

.nav-btn.has-update {
  box-shadow: inset 2px 0 0 #c7a253;
}

.territory-info-top {
  margin-bottom: 14px;
}

.layout-main-side.territory-map-only {
  grid-template-columns: 1fr !important;
}

.family-rules-wide .family-rules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.family-rules-wide .family-rules-grid > div,
.action-summary-card {
  border: 1px solid rgba(199,162,83,.2);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 12px;
}

.family-rules-wide .family-rules-grid strong,
.action-summary-card strong {
  display: block;
  margin-bottom: 6px;
}

.family-rules-wide .family-rules-grid span,
.action-summary-card p {
  color: #bbb7ad;
  font-size: 13px;
  line-height: 1.45;
}

.compact-rivals-grid,
.compact-battle-grid {
  gap: 12px !important;
}

.enhanced-rival-card,
.compact-battle-card {
  overflow: hidden;
}

.enhanced-rival-card .entity-card-body,
.compact-battle-card .entity-card-body {
  padding-top: 10px;
}

.enhanced-rival-card .meta-grid-inline,
.compact-battle-card .meta-grid-inline {
  gap: 8px;
}

.rival-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.action-summary-card.danger-outline {
  border-color: rgba(166,29,45,.35);
}

.compact-reqs {
  margin-top: 8px;
}

.compact-reqs .requirement-chip {
  padding: 6px;
}

#rivals .list-stack,
#battles .list-stack {
  gap: 10px;
}

#rivals .rival-card p,
#battles .compact-battle-card p {
  min-height: 42px;
}

@media (min-width: 1200px) {
  .compact-rivals-grid,
  .compact-battle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .family-rules-wide .family-rules-grid,
  .rival-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .territory-info-top,
  .compact-rivals-grid,
  .compact-battle-grid,
  .family-rules-wide .family-rules-grid,
  .rival-action-grid {
    grid-template-columns: 1fr !important;
  }

  .nav-btn .nav-indicator {
    top: 4px;
    right: 4px;
  }
}


/* --------------------------------------------------------------------------
   Gameplay depth update UI
-------------------------------------------------------------------------- */
.mission-chain-card img,
.hq-card img,
.city-event-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
}

.hq-grid .entity-card {
  min-height: 0;
}

.hq-card {
  min-height: 260px;
}

.hq-action-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.hq-action-card p,
.objective-card p,
.city-event-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.hq-summary-card .muted {
  margin-bottom: 0;
}

.objective-card.complete {
  border-color: rgba(121,200,121,.38);
  background: linear-gradient(180deg, rgba(21,45,26,.9), rgba(13,12,11,.98));
}

.depth-dashboard-panels .city-event-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.city-event-card .row-actions {
  margin-top: 10px;
}

.mission-chain-card .progress,
.objective-card .progress {
  margin: 8px 0;
}

@media (max-width: 1200px) {
  .hq-grid,
  .objectives-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 760px) {
  .hq-grid,
  .hq-actions-grid,
  .mission-chain-grid,
  .objectives-grid,
  .city-events-grid,
  .depth-dashboard-panels {
    grid-template-columns: 1fr !important;
  }

  .hq-card,
  .mission-chain-card {
    min-height: auto;
  }
}

/* --------------------------------------------------------------------------
   Final page/card layout fixes
   - compact rivals/missions/crew
   - HQ cards now support images
   - desktop territory map is capped to avoid blurry stretching
   - card buttons align at the bottom across rows
-------------------------------------------------------------------------- */
.grid > .card,
.grid > .entity-card,
.grid > .hq-action-card,
.grid > .objective-card,
.grid > .city-event-card {
  height: 100%;
}

.entity-card,
.hq-action-card,
.objective-card,
.city-event-card,
.family-member-card,
.permission-card {
  display: flex !important;
  flex-direction: column;
}

.entity-card-body {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
}

.entity-card-body > .primary.wide,
.entity-card-body > .row-actions,
.hq-action-card > button,
.objective-card > button,
.city-event-card > .row-actions,
.family-member-card > .row-actions {
  margin-top: auto !important;
}

.entity-card > img,
.hq-card > img,
.mission-chain-card > img,
.enhanced-rival-card > img,
.compact-battle-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 12px !important;
  max-width: none !important;
  max-height: none !important;
}

/* Rivals: restore visible cards and make them less oversized */
.compact-rivals-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#rivals .enhanced-rival-card,
#rivals .rival-card {
  padding: 9px !important;
  min-height: 0 !important;
}

#rivals .enhanced-rival-card > img,
#rivals .rival-card > img {
  height: 112px !important;
}

#rivals .entity-card-body {
  gap: 8px !important;
}

#rivals .entity-head h4 {
  font-size: 15px;
  line-height: 1.12;
}

#rivals .entity-card-body p {
  font-size: 12px;
  line-height: 1.35;
  min-height: 49px;
}

#rivals .rival-meta-compact,
#rivals .meta-grid-inline.two {
  gap: 6px !important;
}

#rivals .rival-meta-compact > div,
#rivals .meta-grid-inline.two > div,
#rivals .requirements-grid.compact-reqs > div {
  padding: 6px !important;
  border-radius: 9px !important;
}

#rivals .rival-action-grid-compact {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin: 6px 0 !important;
}

#rivals .action-summary-card {
  padding: 8px !important;
  border-radius: 9px !important;
}

#rivals .action-summary-card p {
  font-size: 11px !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#rivals .requirements-grid.compact-reqs {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 4px !important;
}

#rivals .row-actions button {
  min-height: 34px;
  font-size: 12px;
}

/* Missions: smaller cards and more columns on desktop */
.mission-chain-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.mission-chain-card {
  padding: 9px !important;
  min-height: 0 !important;
}

.mission-chain-card > img {
  height: 112px !important;
}

.mission-chain-card .entity-card-body {
  gap: 8px !important;
}

.mission-chain-card .entity-head h4 {
  font-size: 15px;
  line-height: 1.12;
}

.mission-chain-card p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  min-height: 64px;
}

.mission-chain-card .meta-grid-inline.two,
.mission-chain-card .requirements-grid {
  gap: 5px !important;
}

.mission-chain-card .meta-grid-inline.two > div,
.mission-chain-card .requirements-grid > div {
  padding: 6px !important;
}

.mission-chain-card .primary.wide {
  min-height: 36px;
}

/* Headquarters images and aligned buttons */
.hq-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.hq-card {
  padding: 9px !important;
  min-height: 0 !important;
}

.hq-card > img {
  height: 108px !important;
}

.hq-card .entity-card-body {
  gap: 8px !important;
}

.hq-card .entity-head h4 {
  font-size: 15px;
  line-height: 1.12;
}

.hq-card p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  min-height: 50px;
}

.hq-card .meta-grid-inline.two > div {
  padding: 6px !important;
}

.hq-actions-grid {
  align-items: stretch;
}

.hq-action-card p {
  min-height: 48px;
}

/* Crew: smaller cards while preserving faces */
#crew .grid.cols-3,
#crew .grid.cols-2 {
  gap: 10px !important;
}

#crew .entity-card {
  padding: 8px !important;
  min-height: 0 !important;
}

#crew .entity-card > img {
  height: 104px !important;
  object-fit: cover !important;
  object-position: center top !important;
}

#crew .entity-card-body {
  gap: 7px !important;
}

#crew .entity-head h4 {
  font-size: 15px;
  line-height: 1.1;
}

#crew .entity-card-body p,
#crew .action-help {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

#crew .entity-card-body p {
  min-height: 34px;
}

#crew .meta-grid-inline.two > div,
#crew .meta-grid-inline.three > div {
  padding: 6px !important;
}

#crew .primary.wide {
  min-height: 36px;
}

/* Territory map: prevent oversized blurry desktop stretching */
@media (min-width: 1025px) {
  #territory .layout-main-side.territory-map-only,
  #territory .layout-main-side {
    justify-items: center;
  }

  #territory .map-card {
    width: min(100%, 1080px);
    margin-left: auto;
    margin-right: auto;
  }

  #territory .map-wrap {
    max-height: 560px;
    overflow: hidden;
    border-radius: 18px;
  }

  #territory .map-wrap img {
    width: 100%;
    max-width: 1080px;
    height: auto;
    display: block;
  }
}

@media (max-width: 1450px) {
  .compact-rivals-grid,
  .mission-chain-grid,
  .hq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1050px) {
  .compact-rivals-grid,
  .mission-chain-grid,
  .hq-grid,
  .hq-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .compact-rivals-grid,
  .mission-chain-grid,
  .hq-grid,
  .hq-actions-grid,
  #crew .grid.cols-3,
  #crew .grid.cols-2 {
    grid-template-columns: 1fr !important;
  }

  #rivals .enhanced-rival-card > img,
  #rivals .rival-card > img,
  .mission-chain-card > img,
  .hq-card > img,
  #crew .entity-card > img {
    height: 96px !important;
  }

  .mission-chain-card p,
  .hq-card p,
  #crew .entity-card-body p,
  #rivals .entity-card-body p {
    min-height: 0;
  }
}

/* --- Mobile drawer scroll fix --- */
@media (max-width: 1024px) {
  html.nav-lock,
  body.nav-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  .sidebar-mobile-head {
    flex: 0 0 auto;
  }

  .sidebar .nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: 6px;
    padding: 2px 2px calc(28px + env(safe-area-inset-bottom));
  }

  .sidebar .nav-btn {
    min-height: 38px;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 11px;
    line-height: 1.15;
  }

  .sidebar-footer {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .mobile-drawer-logo,
  .brand-logo-sidebar {
    width: 118px !important;
  }

  .mobile-nav-close {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .sidebar .nav-btn {
    min-height: 34px;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}


/* --- Rivals/Battles parity layout fix --- */
@media (min-width: 1200px) {
  #battles .battle-grid.compact-battle-grid,
  #battles .compact-battle-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

#battles .compact-battle-card,
#battles .battle-card {
  padding: 9px !important;
  min-height: 0 !important;
  overflow: hidden;
}

#battles .compact-battle-card > img,
#battles .battle-card > img {
  height: 112px !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 12px !important;
}

#battles .compact-battle-card .entity-card-body,
#battles .battle-card .entity-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  height: 100%;
}

#battles .compact-battle-card .entity-head h4,
#battles .battle-card .entity-head h4 {
  font-size: 15px;
  line-height: 1.12;
}

#battles .compact-battle-card p,
#battles .battle-card p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  min-height: 49px;
}

#battles .compact-battle-card .meta-grid-inline,
#battles .battle-card .meta-grid-inline {
  gap: 6px !important;
}

#battles .compact-battle-card .meta-grid-inline > div,
#battles .battle-card .meta-grid-inline > div,
#battles .compact-battle-card .requirements-grid > div,
#battles .battle-card .requirements-grid > div {
  padding: 6px !important;
  border-radius: 9px !important;
}

#battles .compact-battle-card .requirements-grid,
#battles .battle-card .requirements-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px !important;
}

#battles .compact-battle-card .action-help,
#battles .battle-card .action-help {
  font-size: 11px !important;
  line-height: 1.3 !important;
  padding: 8px !important;
  min-height: 58px;
}

#battles .compact-battle-card button.wide,
#battles .battle-card button.wide {
  margin-top: auto !important;
  min-height: 34px;
  font-size: 12px;
}

@media (max-width: 1199px) and (min-width: 821px) {
  #battles .battle-grid.compact-battle-grid,
  #battles .compact-battle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  #battles .battle-grid.compact-battle-grid,
  #battles .compact-battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #battles .battle-grid.compact-battle-grid,
  #battles .compact-battle-grid {
    grid-template-columns: 1fr !important;
  }

  #battles .compact-battle-card > img,
  #battles .battle-card > img {
    height: 96px !important;
  }

  #battles .compact-battle-card p,
  #battles .battle-card p,
  #battles .compact-battle-card .action-help,
  #battles .battle-card .action-help {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   Targeted card image height fix
   Only affects Missions, Crew, Headquarters, Rivals, and Battles.
   Operations and Front Businesses are intentionally left unchanged.
-------------------------------------------------------------------------- */
#missions .mission-chain-card > img,
#crew .entity-card > img,
#headquarters .hq-card > img,
#rivals .enhanced-rival-card > img,
#rivals .rival-card > img,
#battles .compact-battle-card > img,
#battles .battle-card > img {
  width: 100% !important;
  height: 152px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
  max-width: none !important;
  max-height: none !important;
}

#headquarters .hq-card > img {
  height: 146px !important;
}

#crew .entity-card > img {
  height: 142px !important;
}

/* Keep the affected cards aligned now that the image windows are taller. */
#missions .mission-chain-card,
#crew .entity-card,
#headquarters .hq-card,
#rivals .enhanced-rival-card,
#rivals .rival-card,
#battles .compact-battle-card,
#battles .battle-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#missions .mission-chain-card .entity-card-body,
#crew .entity-card .entity-card-body,
#headquarters .hq-card .entity-card-body,
#rivals .enhanced-rival-card .entity-card-body,
#rivals .rival-card .entity-card-body,
#battles .compact-battle-card .entity-card-body,
#battles .battle-card .entity-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

#missions .mission-chain-card button,
#crew .entity-card button,
#headquarters .hq-card button,
#rivals .enhanced-rival-card .row-actions,
#rivals .rival-card .row-actions,
#battles .compact-battle-card button,
#battles .battle-card button {
  margin-top: auto !important;
}

@media (max-width: 820px) {
  #missions .mission-chain-card > img,
  #headquarters .hq-card > img,
  #rivals .enhanced-rival-card > img,
  #rivals .rival-card > img,
  #battles .compact-battle-card > img,
  #battles .battle-card > img {
    height: 138px !important;
    object-position: center top !important;
  }

  #crew .entity-card > img {
    height: 128px !important;
    object-position: center top !important;
  }
}

@media (max-width: 600px) {
  #missions .mission-chain-card > img,
  #headquarters .hq-card > img,
  #rivals .enhanced-rival-card > img,
  #rivals .rival-card > img,
  #battles .compact-battle-card > img,
  #battles .battle-card > img {
    height: 132px !important;
  }

  #crew .entity-card > img {
    height: 122px !important;
  }
}

/* --------------------------------------------------------------------------
   Match card image windows to Operations page sizing
   Applies to Missions, Crew, Headquarters, Front Businesses, Rivals, Battles
-------------------------------------------------------------------------- */
#missions .mission-chain-card > img,
#crew .entity-card > img,
#headquarters .hq-card > img,
#fronts .entity-card > img,
#rivals .enhanced-rival-card > img,
#rivals .rival-card > img,
#battles .compact-battle-card > img,
#battles .battle-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 176px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
  max-width: none !important;
}

@media (max-width: 1024px) {
  #missions .mission-chain-card > img,
  #crew .entity-card > img,
  #headquarters .hq-card > img,
  #fronts .entity-card > img,
  #rivals .enhanced-rival-card > img,
  #rivals .rival-card > img,
  #battles .compact-battle-card > img,
  #battles .battle-card > img {
    max-height: 130px !important;
  }
}

@media (max-width: 600px) {
  #missions .mission-chain-card > img,
  #crew .entity-card > img,
  #headquarters .hq-card > img,
  #fronts .entity-card > img,
  #rivals .enhanced-rival-card > img,
  #rivals .rival-card > img,
  #battles .compact-battle-card > img,
  #battles .battle-card > img {
    max-height: 116px !important;
  }
}

/* --------------------------------------------------------------------------
   Heat management + territory clarity UI
-------------------------------------------------------------------------- */
#dashboard .dashboard-stats {
  display: none !important;
}

.front-action-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

.front-action-row button {
  width: 100%;
  min-height: 44px;
}

.territory-clear-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.territory-next-step,
.territory-help-note {
  border: 1px dashed rgba(208, 166, 75, .28);
  background: rgba(208, 166, 75, .06);
  border-radius: 10px;
  padding: 10px;
  color: var(--muted);
  line-height: 1.45;
}

.territory-next-step strong {
  display: block;
  color: var(--gold-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  margin-bottom: 4px;
}

.territory-next-step span,
.territory-help-note {
  font-size: 13px;
}

.territory-clear-card .row-actions {
  margin-top: auto !important;
}

.territory-clear-card .row-actions button {
  min-height: 48px;
}

@media (max-width: 700px) {
  .front-action-row,
  .territory-info-top {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Requirements clarity update for all action pages
-------------------------------------------------------------------------- */
.clarity-page-guide {
  border-color: rgba(211, 172, 92, .22) !important;
  background: linear-gradient(135deg, rgba(211,172,92,.08), rgba(255,255,255,.025)) !important;
}

.clarity-page-guide .tip-list div {
  border-left: 2px solid rgba(211,172,92,.4);
}

.clarity-req-block {
  margin-top: 4px;
  background: rgba(0,0,0,.18) !important;
  border-color: rgba(255,255,255,.075) !important;
}

.requirements-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.compact-reqs {
  gap: 6px !important;
}

.compact-reqs .requirement-chip,
.compact-reqs .req-chip {
  padding: 7px 8px !important;
}

.compact-reqs .requirement-chip strong,
.compact-reqs .req-chip strong {
  font-size: 10px !important;
}

.compact-reqs .requirement-chip span,
.compact-reqs .req-chip span {
  font-size: 10px !important;
}

#fronts .entity-card .clarity-req-block,
#crew .entity-card .clarity-req-block,
#headquarters .entity-card .clarity-req-block,
#headquarters .hq-action-card .clarity-req-block,
#objectives .objective-card .clarity-req-block,
#objectives .city-event-card .clarity-req-block {
  margin-top: auto;
}

#operations .entity-card button[disabled],
#crew .entity-card button[disabled],
#fronts .entity-card button[disabled],
#headquarters button[disabled],
#missions button[disabled],
#rivals button[disabled],
#battles button[disabled],
#objectives button[disabled] {
  opacity: .62;
}

@media (max-width: 700px) {
  .clarity-page-guide .section-head {
    align-items: flex-start;
  }
  .requirements-note {
    font-size: 10.5px;
  }
}

/* --------------------------------------------------------------------------
   Final requirements/card cleanup pass
-------------------------------------------------------------------------- */
.single-guide-copy {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.025) !important;
}
.single-guide-copy p {
  margin: 0 0 8px !important;
  color: var(--muted) !important;
  line-height: 1.45 !important;
  font-size: 13px !important;
}
.single-guide-copy p:last-child { margin-bottom: 0 !important; }
.single-guide-copy strong {
  display: inline !important;
  color: var(--gold-soft) !important;
  margin: 0 !important;
}
.single-guide-copy span {
  color: var(--muted) !important;
  line-height: inherit !important;
}

.full-width-info-card {
  width: 100% !important;
}

.operations-grid-layout-clean {
  display: block !important;
}
.operations-grid-layout-clean > .grid {
  width: 100% !important;
}
.operations-grid-layout-clean .side-column:empty,
.operations-grid-layout-clean > .side-column:empty {
  display: none !important;
}
.operations-cards-grid-clean {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.operation-advice-card .single-guide-copy,
.operations-active-card .list-stack {
  width: 100% !important;
}
.operations-active-card .list-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}
.operations-active-card .notice {
  margin: 0 !important;
}

.requirements-note,
.action-help,
.territory-next-step,
.territory-help-note {
  display: none !important;
}

#operations .tag-row {
  display: none !important;
}

#crew .crew-all-cards-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#crew .crew-all-cards-grid .entity-card {
  padding: 8px !important;
  gap: 8px !important;
  min-height: 0 !important;
}
#crew .crew-all-cards-grid .entity-card > img {
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 108px !important;
  object-fit: cover !important;
  object-position: center top !important;
}
#crew .crew-all-cards-grid .entity-card-body {
  gap: 7px !important;
}
#crew .crew-all-cards-grid .entity-head h4 {
  font-size: 14px !important;
  line-height: 1.12 !important;
}
#crew .crew-all-cards-grid .entity-card-body p {
  font-size: 11px !important;
  line-height: 1.32 !important;
  min-height: 44px !important;
}
#crew .crew-all-cards-grid .meta-grid-inline.two,
#crew .crew-all-cards-grid .requirements-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
}
#crew .crew-all-cards-grid .meta-grid-inline > div,
#crew .crew-all-cards-grid .requirement-chip {
  padding: 5px 6px !important;
}
#crew .crew-all-cards-grid button.primary.wide {
  min-height: 38px !important;
  font-size: 11px !important;
  padding: 8px !important;
}

#missions .entity-card > img,
#crew .entity-card > img,
#headquarters .entity-card > img,
#fronts .entity-card > img,
#rivals .entity-card > img,
#battles .entity-card > img,
.battle-card > img,
.mission-chain-card > img,
.hq-card > img {
  object-position: center top !important;
}

#territory .territory-info-top .single-guide-copy {
  min-height: 0 !important;
}
#territory .district-expansion-card .row-actions {
  margin-top: auto !important;
}

@media (max-width: 1280px) {
  .operations-cards-grid-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #crew .crew-all-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 820px) {
  .operations-cards-grid-clean,
  #crew .crew-all-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Operations compact layout + top-aligned images + live cash polish
-------------------------------------------------------------------------- */
#operations .operations-info-row-fixed {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#operations .operations-info-row-fixed > .card {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

#operations .operations-info-row-fixed .single-guide-copy {
  display: grid !important;
  gap: 6px !important;
}

#operations .operations-info-row-fixed .single-guide-copy p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#operations .operations-active-card {
  width: 100% !important;
  margin: 0 !important;
}

#operations .operations-active-card .list-stack {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 8px !important;
}

#operations .operations-grid-layout-clean {
  display: block !important;
}

#operations .operations-more-compact-grid,
#operations .operations-cards-grid-clean,
#operations .layout-main-side > .grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

#operations .entity-card {
  padding: 8px !important;
  gap: 8px !important;
  min-height: 0 !important;
}

#operations .entity-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 128px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
}

#operations .entity-card-body {
  gap: 7px !important;
}

#operations .entity-head h4 {
  font-size: 15px !important;
  line-height: 1.12 !important;
}

#operations .entity-card-body p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  min-height: 48px !important;
}

#operations .meta-grid-inline.three,
#operations .meta-grid-inline.two,
#operations .requirements-grid {
  gap: 5px !important;
}

#operations .meta-grid-inline > div,
#operations .requirement-chip,
#operations .req-chip {
  padding: 5px 6px !important;
}

#operations .requirement-chip span,
#operations .req-chip strong {
  font-size: 9px !important;
}

#operations .requirement-chip strong,
#operations .req-chip span {
  font-size: 10px !important;
}

#operations button.primary.wide {
  min-height: 38px !important;
  padding: 8px !important;
  font-size: 11px !important;
}

@media (max-width: 900px) {
  #operations .operations-info-row-fixed {
    grid-template-columns: 1fr !important;
  }
  #operations .operations-more-compact-grid,
  #operations .operations-cards-grid-clean,
  #operations .layout-main-side > .grid {
    grid-template-columns: 1fr !important;
  }
  #operations .entity-card > img {
    max-height: 150px !important;
  }
}

/* --------------------------------------------------------------------------
   Family page desktop layout polish
-------------------------------------------------------------------------- */
#family .family-top-info-grid-clean {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#family .family-top-info-grid-clean > .card {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

#family .family-single-copy {
  display: grid !important;
  gap: 7px !important;
}

#family .family-single-copy p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
}

#family .family-single-copy strong {
  color: var(--text) !important;
  font-weight: 900 !important;
}

#family .family-roster-full-width-clean {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
}

#family .family-roster-full-width-clean .family-member-card {
  width: 100% !important;
  min-height: 0 !important;
}

#family .family-roster-full-width-clean .family-member-card .meta-grid-inline.two {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#family .permission-grid-five-clean {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#family .permission-grid-five-clean .permission-card {
  padding: 8px !important;
  min-height: 0 !important;
  gap: 7px !important;
}

#family .permission-grid-five-clean .entity-head {
  gap: 6px !important;
}

#family .permission-grid-five-clean .entity-head h4 {
  font-size: 13px !important;
  line-height: 1.12 !important;
}

#family .permission-grid-five-clean .badge {
  font-size: 9px !important;
  padding: 4px 6px !important;
}

#family .permission-grid-five-clean .permission-card p {
  font-size: 10.5px !important;
  line-height: 1.28 !important;
  min-height: 42px !important;
  margin: 0 !important;
}

#family .permission-grid-five-clean .permission-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

#family .permission-grid-five-clean .permission-row span {
  font-size: 8.5px !important;
  line-height: 1.1 !important;
  padding: 4px 5px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  #family .permission-grid-five-clean {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  #family .family-top-info-grid-clean,
  #family .permission-grid-five-clean,
  #family .family-roster-full-width-clean .family-member-card .meta-grid-inline.two {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Crew page empty-state failsafe layout
-------------------------------------------------------------------------- */
#crew .crew-page-clean .crew-guide-card-clean {
  width: 100% !important;
}
#crew .crew-page-clean .single-guide-copy {
  display: grid !important;
  gap: 6px !important;
}
#crew .crew-page-clean .single-guide-copy p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
#crew .crew-failsafe-grid,
#crew .crew-all-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}
#crew .crew-failsafe-grid .entity-card,
#crew .crew-all-cards-grid .entity-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 100% !important;
}
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 108px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
}
#crew .crew-failsafe-grid .entity-card-body,
#crew .crew-all-cards-grid .entity-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 7px !important;
}
#crew .crew-failsafe-grid .entity-head h4,
#crew .crew-all-cards-grid .entity-head h4 {
  font-size: 14px !important;
  line-height: 1.12 !important;
}
#crew .crew-failsafe-grid .entity-card-body p,
#crew .crew-all-cards-grid .entity-card-body p {
  font-size: 11px !important;
  line-height: 1.32 !important;
  min-height: 44px !important;
  margin: 0 !important;
}
#crew .crew-failsafe-grid .requirements-grid,
#crew .crew-all-cards-grid .requirements-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
}
#crew .crew-failsafe-grid .requirement-chip,
#crew .crew-all-cards-grid .requirement-chip {
  padding: 5px 6px !important;
}
#crew .crew-failsafe-grid .requirement-chip span,
#crew .crew-all-cards-grid .requirement-chip span {
  font-size: 8.5px !important;
}
#crew .crew-failsafe-grid .requirement-chip strong,
#crew .crew-all-cards-grid .requirement-chip strong {
  font-size: 9.5px !important;
}
#crew .crew-failsafe-grid button.primary.wide,
#crew .crew-all-cards-grid button.primary.wide {
  margin-top: auto !important;
  min-height: 38px !important;
  font-size: 11px !important;
  padding: 8px !important;
}
@media (max-width: 1180px) {
  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Dashboard recommended next moves
-------------------------------------------------------------------------- */
#dashboard .section-hero .hero-actions {
  display: none !important;
}
.dashboard-recommended-next-moves {
  padding: 14px !important;
}
.dashboard-recommended-next-moves .section-head {
  margin-bottom: 10px;
}
.dashboard-next-moves-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-next-move-btn {
  min-height: 66px;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px;
  text-align: left !important;
  white-space: normal !important;
}
.dashboard-next-move-btn strong {
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: .02em;
}
.dashboard-next-move-btn span {
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 1100px) {
  .dashboard-next-moves-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .dashboard-next-moves-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-next-move-btn {
    min-height: 58px;
  }
}


/* --------------------------------------------------------------------------
   Recommended Next Moves neutral button update
   Dashboard suggestions are equal-weight shortcuts. Heat danger can still use
   danger styling, but Start Operation is no longer highlighted gold.
-------------------------------------------------------------------------- */
.dashboard-next-move-btn.primary {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.dashboard-next-move-btn.primary:hover {
  border-color: rgba(212,175,55,.45) !important;
}
.dashboard-next-move-btn.primary span {
  color: var(--muted) !important;
}


/* --------------------------------------------------------------------------
   Dashboard next move requirement states + clickable logo polish
-------------------------------------------------------------------------- */
.dashboard-next-move-btn.dashboard-next-move-blocked {
  border-color: rgba(255, 92, 92, .55) !important;
  background: linear-gradient(180deg, rgba(90, 20, 20, .34), rgba(30, 8, 8, .32)) !important;
  color: #ffd8d8 !important;
}

.dashboard-next-move-btn.dashboard-next-move-blocked strong {
  color: #ffd8d8 !important;
}

.dashboard-next-move-btn.dashboard-next-move-blocked span {
  color: rgba(255, 216, 216, .78) !important;
}

.brand-logo-sidebar,
.mobile-drawer-logo {
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 50%, rgba(218, 178, 92, .25), rgba(218, 178, 92, .06) 58%, rgba(0, 0, 0, .15) 100%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(218, 178, 92, .42) !important;
  border-radius: 18px !important;
  padding: 8px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 14px 34px rgba(218, 178, 92, .10), inset 0 0 28px rgba(218, 178, 92, .08) !important;
  filter: drop-shadow(0 0 8px rgba(218, 178, 92, .20)) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.brand-logo-sidebar:hover,
.mobile-drawer-logo:hover {
  transform: translateY(-1px);
  border-color: rgba(245, 207, 126, .72) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 18px 42px rgba(218, 178, 92, .18), inset 0 0 32px rgba(218, 178, 92, .12) !important;
}

/* Crew cards: keep the compact row, but give the portrait art more room and prevent head crops. */
#crew .crew-all-cards-grid {
  grid-template-columns: repeat(5, minmax(175px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#crew .crew-all-cards-grid .entity-card {
  padding: 12px !important;
  min-height: 0 !important;
}

#crew .crew-all-cards-grid .entity-card > img,
#crew .entity-card > img {
  width: 100% !important;
  height: 158px !important;
  max-height: 158px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: radial-gradient(circle at 50% 20%, rgba(218,178,92,.10), rgba(0,0,0,.22) 55%), #070707 !important;
  border-radius: 12px !important;
}

#crew .crew-all-cards-grid .entity-card-body {
  gap: 7px !important;
}

#crew .crew-all-cards-grid .entity-card-body p {
  font-size: 12px !important;
  line-height: 1.32 !important;
  min-height: 0 !important;
}

@media (max-width: 1280px) {
  #crew .crew-all-cards-grid {
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
  }
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 142px !important;
    max-height: 142px !important;
  }
}

@media (max-width: 980px) {
  #crew .crew-all-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #crew .crew-all-cards-grid {
    grid-template-columns: 1fr !important;
  }
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 168px !important;
    max-height: 168px !important;
  }
}

/* --------------------------------------------------------------------------
   Sidebar logo card width polish
   Makes the logo border card match the nav link card width while keeping the
   logo proportional and more visible on the black sidebar.
-------------------------------------------------------------------------- */
.sidebar .brand {
  width: 100% !important;
  padding: 0 0 12px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}

.sidebar .brand > .brand-logo-sidebar {
  width: 100% !important;
  max-width: none !important;
  height: 148px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1024px) {
  .sidebar-mobile-head .mobile-drawer-logo {
    width: min(230px, calc(100% - 56px)) !important;
    height: 92px !important;
    padding: 8px 12px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 420px) {
  .sidebar-mobile-head .mobile-drawer-logo {
    width: min(210px, calc(100% - 50px)) !important;
    height: 82px !important;
  }
}

/* --------------------------------------------------------------------------
   Recommended moves clickable emphasis + Crew image fit polish
-------------------------------------------------------------------------- */
.dashboard-next-move-btn.dashboard-next-move-equal:not(.dashboard-next-move-blocked) {
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(120,86,24,.16)) !important;
  border-color: rgba(212,175,55,.62) !important;
  color: #fff7d6 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.dashboard-next-move-btn.dashboard-next-move-equal:not(.dashboard-next-move-blocked):hover {
  border-color: rgba(255,219,108,.9) !important;
  transform: translateY(-1px);
}
.dashboard-next-move-btn.dashboard-next-move-equal:not(.dashboard-next-move-blocked) strong {
  color: #fff6cc !important;
}
.dashboard-next-move-btn.dashboard-next-move-equal:not(.dashboard-next-move-blocked) span {
  color: rgba(255,238,185,.86) !important;
}

#crew .crew-failsafe-grid,
#crew .crew-all-cards-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#crew .crew-failsafe-grid .entity-card,
#crew .crew-all-cards-grid .entity-card {
  padding: 12px !important;
}
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .entity-card > img {
  height: 188px !important;
  max-height: 188px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: radial-gradient(circle at 50% 18%, rgba(218,178,92,.14), rgba(0,0,0,.32) 62%), #070707 !important;
}

@media (max-width: 1280px) {
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 166px !important;
    max-height: 166px !important;
  }
}

@media (max-width: 980px) {
  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid {
    grid-template-columns: 1fr !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 190px !important;
    max-height: 190px !important;
  }
}



/* --------------------------------------------------------------------------
   Recommended Next Moves strict audit visual polish
   Available suggestions now match sidebar link colors, not the old bright gold.
-------------------------------------------------------------------------- */
.dashboard-next-move-btn.dashboard-next-move-available {
  background: linear-gradient(90deg, rgba(200,154,74,.12), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--gold-soft) !important;
  box-shadow: none !important;
}
.dashboard-next-move-btn.dashboard-next-move-available:hover {
  background: linear-gradient(90deg, rgba(200,154,74,.18), rgba(255,255,255,.04)) !important;
  border-color: rgba(200,154,74,.5) !important;
  transform: translateY(-1px);
}
.dashboard-next-move-btn.dashboard-next-move-available strong {
  color: var(--gold-soft) !important;
}
.dashboard-next-move-btn.dashboard-next-move-available span {
  color: var(--muted) !important;
}
.dashboard-next-move-btn.dashboard-next-move-blocked {
  background: rgba(96,18,18,.28) !important;
  border-color: rgba(255,120,120,.28) !important;
  color: #ffc9c9 !important;
  box-shadow: none !important;
}
.dashboard-next-move-btn.dashboard-next-move-blocked strong,
.dashboard-next-move-btn.dashboard-next-move-blocked span {
  color: #ffc9c9 !important;
}


/* --------------------------------------------------------------------------
   Action-only Recommended Next Moves visual correction
   Ready suggestions use the same yellow primary action treatment as real action buttons.
   Blocked recommendations are no longer rendered.
-------------------------------------------------------------------------- */
.dashboard-recommended-next-moves-action-only .dashboard-next-move-btn.dashboard-next-move-action.primary {
  background: linear-gradient(180deg, #d9b46e, #9e702a) !important;
  border: 1px solid rgba(240, 201, 126, .72) !important;
  color: #1b1209 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.dashboard-recommended-next-moves-action-only .dashboard-next-move-btn.dashboard-next-move-action.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(255, 221, 148, .9) !important;
}

.dashboard-recommended-next-moves-action-only .dashboard-next-move-btn.dashboard-next-move-action.primary strong {
  color: #1b1209 !important;
}

.dashboard-recommended-next-moves-action-only .dashboard-next-move-btn.dashboard-next-move-action.primary span {
  color: rgba(27, 18, 9, .74) !important;
}

.dashboard-next-moves-grid.empty {
  grid-template-columns: 1fr !important;
}

.dashboard-next-move-empty {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.025);
}

.dashboard-next-move-empty strong {
  display: block;
  color: var(--gold-soft);
  margin-bottom: 5px;
}

.dashboard-next-move-empty span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Final ready-action recommendations and Clean Books timer polish
-------------------------------------------------------------------------- */
.dashboard-recommended-next-moves-final .dashboard-next-move-btn.dashboard-next-move-action.primary {
  background: linear-gradient(180deg, #d9b46e, #9e702a) !important;
  border: 1px solid rgba(240, 201, 126, .72) !important;
  color: #1b1209 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.dashboard-recommended-next-moves-final .dashboard-next-move-btn.dashboard-next-move-action.primary strong {
  color: #1b1209 !important;
}
.dashboard-recommended-next-moves-final .dashboard-next-move-btn.dashboard-next-move-action.primary span {
  color: rgba(27,18,9,.74) !important;
}
.clean-books-active-status {
  border: 1px solid rgba(212,175,55,.24);
  background: rgba(212,175,55,.055);
  border-radius: 12px;
  padding: 9px;
  display: grid;
  gap: 7px;
}
.clean-books-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.clean-books-status-head strong {
  color: var(--gold-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.clean-books-status-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.clean-books-active-status p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.clean-books-progress {
  height: 7px !important;
}

/* --------------------------------------------------------------------------
   Dashboard Ready Action button color restore
   Recommended Next Moves are actual performable actions, so they should match
   the yellow primary action buttons used throughout the game.
-------------------------------------------------------------------------- */
.dashboard-recommended-next-moves-stable .dashboard-next-move-btn.dashboard-next-move-action.primary,
#dashboard .dashboard-recommended-next-moves .dashboard-next-move-btn.dashboard-next-move-action.primary {
  background: linear-gradient(180deg, #d9b46e, #9e702a) !important;
  border: 1px solid rgba(240, 201, 126, .72) !important;
  color: #1b1209 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.dashboard-recommended-next-moves-stable .dashboard-next-move-btn.dashboard-next-move-action.primary:hover,
#dashboard .dashboard-recommended-next-moves .dashboard-next-move-btn.dashboard-next-move-action.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(255, 221, 148, .9) !important;
}

.dashboard-recommended-next-moves-stable .dashboard-next-move-btn.dashboard-next-move-action.primary strong,
#dashboard .dashboard-recommended-next-moves .dashboard-next-move-btn.dashboard-next-move-action.primary strong {
  color: #1b1209 !important;
}

.dashboard-recommended-next-moves-stable .dashboard-next-move-btn.dashboard-next-move-action.primary span,
#dashboard .dashboard-recommended-next-moves .dashboard-next-move-btn.dashboard-next-move-action.primary span {
  color: rgba(27,18,9,.74) !important;
}


/* --------------------------------------------------------------------------
   Cash Audit Ledger UI
-------------------------------------------------------------------------- */
.cash-audit-line {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
.cash-audit-line.gain {
  border-color: rgba(206, 175, 91, .35);
  background: rgba(206, 175, 91, .10);
}
.cash-audit-line.loss {
  border-color: rgba(199, 75, 75, .35);
  background: rgba(199, 75, 75, .10);
}
.cash-audit-line span {
  font-weight: 900;
  color: var(--gold);
}
.cash-audit-line.loss span {
  color: #ffb0a8;
}
.cash-audit-summary-card {
  border-color: rgba(206, 175, 91, .18) !important;
}


/* Hide deprecated Cash Audit UI; cash amounts now appear inline in ledger titles. */
.cash-audit-line,
.cash-audit-summary-card {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Loyalty management update
-------------------------------------------------------------------------- */
.crew-morale-panel {
  border-color: rgba(212, 170, 74, 0.24) !important;
}
.morale-panel-intro {
  margin: -6px 0 14px;
}
.morale-actions-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.morale-action-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 12px !important;
}
.morale-action-card p {
  font-size: 12px !important;
  line-height: 1.4 !important;
  min-height: 52px;
}
.morale-action-card .requirements-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
}
.morale-action-card .req-chip {
  padding: 7px !important;
}
.morale-action-card .req-chip span {
  font-size: 9px !important;
}
.morale-action-card .req-chip strong {
  font-size: 11px !important;
}
.morale-action-card button {
  margin-top: 10px !important;
}
@media (max-width: 1100px) {
  .morale-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .morale-actions-grid { grid-template-columns: 1fr !important; }
  .morale-action-card p { min-height: 0; }
}


/* --------------------------------------------------------------------------
   City event choice explanations + Crew image restore/fill
-------------------------------------------------------------------------- */
.city-event-choice-guide {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.city-event-choice-guide-row {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.028);
  border-radius: 11px;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}
.city-event-choice-guide-row strong {
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.city-event-choice-guide-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Use the original crew art and make it fill the existing image window, top-aligned. */
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .entity-card > img {
  object-fit: cover !important;
  object-position: center top !important;
  background: #070707 !important;
}


/* --------------------------------------------------------------------------
   Final Crew portrait + morale placement polish
-------------------------------------------------------------------------- */
#crew .crew-morale-panel {
  margin-top: 16px !important;
}
#crew .crew-failsafe-grid .entity-card,
#crew .crew-all-cards-grid .entity-card {
  min-height: 520px !important;
  height: auto !important;
}
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .entity-card > img {
  height: 168px !important;
  max-height: 168px !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: radial-gradient(circle at 50% 16%, rgba(218,178,92,.12), rgba(0,0,0,.32) 60%), #070707 !important;
  padding: 4px 0 0 !important;
  box-sizing: border-box !important;
}
#crew .crew-failsafe-grid .entity-card-body,
#crew .crew-all-cards-grid .entity-card-body {
  min-height: 320px !important;
}
@media (max-width: 1280px) {
  #crew .crew-failsafe-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card {
    min-height: 500px !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 154px !important;
    max-height: 154px !important;
  }
}
@media (max-width: 980px) {
  #crew .crew-failsafe-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card {
    min-height: 0 !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 180px !important;
    max-height: 180px !important;
  }
  #crew .crew-failsafe-grid .entity-card-body,
  #crew .crew-all-cards-grid .entity-card-body {
    min-height: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   Final Crew image sizing + top alignment
   Uses the restored wider original crew artwork, fills the existing image bay,
   keeps the current card footprint, and anchors faces from the top.
-------------------------------------------------------------------------- */
#crew .crew-failsafe-grid,
#crew .crew-all-cards-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#crew .crew-failsafe-grid .entity-card,
#crew .crew-all-cards-grid .entity-card {
  min-height: 520px !important;
  height: auto !important;
  padding: 12px !important;
  overflow: hidden !important;
}

#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .entity-card > img {
  width: 100% !important;
  height: 206px !important;
  max-height: 206px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: #070707 !important;
}

#crew .crew-failsafe-grid .entity-card-body,
#crew .crew-all-cards-grid .entity-card-body {
  min-height: 282px !important;
}

#crew .crew-morale-panel {
  margin-top: 16px !important;
}

@media (max-width: 1280px) {
  #crew .crew-failsafe-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card {
    min-height: 500px !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 190px !important;
    max-height: 190px !important;
  }
  #crew .crew-failsafe-grid .entity-card-body,
  #crew .crew-all-cards-grid .entity-card-body {
    min-height: 270px !important;
  }
}

@media (max-width: 980px) {
  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #crew .crew-failsafe-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card {
    min-height: 0 !important;
    overflow: visible !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 220px !important;
    max-height: 220px !important;
  }
  #crew .crew-failsafe-grid .entity-card-body,
  #crew .crew-all-cards-grid .entity-card-body {
    min-height: 0 !important;
  }
}

@media (max-width: 600px) {
  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid {
    grid-template-columns: 1fr !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 224px !important;
    max-height: 224px !important;
  }
}

/* --------------------------------------------------------------------------
   Final upkeep/city-event/family/crew polish
-------------------------------------------------------------------------- */
.city-event-choice-guide-prominent {
  margin: 12px 0 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(212, 175, 55, .18) !important;
  border-radius: 14px !important;
  background: rgba(212, 175, 55, .045) !important;
}
.choice-effects-heading {
  color: var(--gold-soft) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.city-event-choice-guide-prominent .city-event-choice-guide-row {
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.city-event-choice-guide-prominent .city-event-choice-guide-row span {
  color: rgba(241, 225, 188, .86) !important;
}
.family-add-grid .family-invite-code-stable,
#family .family-add-grid button[onclick="generateInviteCode()"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Restored original crew files: fill the current image bay, anchor to top, keep card footprint unchanged. */
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .entity-card > img {
  width: 100% !important;
  height: 206px !important;
  max-height: 206px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #070707 !important;
}
@media (max-width: 1280px) {
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 190px !important;
    max-height: 190px !important;
  }
}
@media (max-width: 980px) {
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 220px !important;
    max-height: 220px !important;
  }
}
@media (max-width: 600px) {
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 224px !important;
    max-height: 224px !important;
  }
}

/* --------------------------------------------------------------------------
   Final mobile compact pass
   Shrinks page headings, dashboard recommendations, Daily Focus, City Events,
   cards, chips, and action buttons so mobile screens fit more content.
-------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html { font-size: 13px !important; }
  body { line-height: 1.38 !important; }
  .main { padding: 10px !important; gap: 10px !important; }
  .topbar {
    padding: 9px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }
  .topbar-title-wrap { gap: 2px !important; min-width: 0 !important; }
  .topbar-title-wrap .eyebrow,
  .eyebrow {
    font-size: 8.5px !important;
    letter-spacing: .12em !important;
    line-height: 1.1 !important;
  }
  .topbar h2,
  #pageTitle {
    font-size: 18px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .topbar-actions { gap: 5px !important; }
  .topbar-actions button,
  .mobile-nav-toggle,
  .mobile-nav-close {
    min-height: 30px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
  .page-stack { gap: 10px !important; }
  .card,
  .section-card,
  .media-card,
  .entity-card,
  .mini-district-card,
  .city-event-card,
  .dashboard-recommended-next-moves,
  .welcome-card {
    padding: 10px !important;
    border-radius: 14px !important;
  }
  .section-hero,
  .section-hero.section-hero-text-only,
  #operations .section-hero,
  #crew .section-hero,
  #fronts .section-hero,
  #territory .section-hero,
  #rivals .section-hero,
  #ledger .section-hero,
  #objectives .section-hero,
  #headquarters .section-hero,
  #missions .section-hero,
  #battles .section-hero,
  #family .section-hero,
  #leaderboard .section-hero {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }
  .section-hero-copy h3,
  .section-hero h3,
  .welcome-card h2 {
    font-size: 22px !important;
    line-height: 1.02 !important;
    margin: 5px 0 6px !important;
    letter-spacing: .01em !important;
  }
  .hero-description,
  .section-hero-copy p,
  .card p,
  .entity-card p,
  .city-event-card p,
  .muted {
    font-size: 11.5px !important;
    line-height: 1.42 !important;
  }
  .section-head {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .section-head h3,
  .section-head h4,
  .entity-head h4,
  .solo h3 {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }
  .section-head .badge,
  .badge {
    font-size: 9px !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
  }
  .grid,
  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2,
  .layout-main-side,
  .dashboard-grid,
  .depth-dashboard-panels,
  .city-events-grid,
  .objectives-grid,
  .territory-expansion-grid {
    gap: 9px !important;
  }
  .hero-stats-grid,
  .meta-grid-inline.three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .meta-grid-inline.two,
  .requirements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .hero-stat,
  .meta-grid-inline > div,
  .req-chip {
    padding: 7px !important;
    border-radius: 10px !important;
  }
  .hero-stat span,
  .meta-line span,
  .meta-grid-inline span,
  .stat-label,
  .req-chip span {
    font-size: 8.5px !important;
    letter-spacing: .09em !important;
    line-height: 1.05 !important;
  }
  .hero-stat strong,
  .meta-grid-inline strong,
  .req-chip strong,
  .stat-value {
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin-top: 3px !important;
  }
  .hero-stat em { font-size: 10px !important; margin-top: 3px !important; }
  .requirements-block {
    padding: 8px !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
  }
  .requirements-title {
    font-size: 9px !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
  }
  .row-actions,
  .hero-actions {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  button,
  .primary,
  .ghost,
  .quiet,
  .danger,
  .small {
    font-size: 11px !important;
    padding: 8px 9px !important;
    min-height: 32px !important;
    border-radius: 11px !important;
  }
  .dashboard-recommended-next-moves {
    padding: 10px !important;
    margin-top: 9px !important;
  }
  .dashboard-next-moves-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .dashboard-next-move-btn {
    min-height: 48px !important;
    padding: 8px 8px !important;
    border-radius: 12px !important;
    gap: 3px !important;
  }
  .dashboard-next-move-btn strong {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }
  .dashboard-next-move-btn span {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }
  .depth-dashboard-panels {
    grid-template-columns: 1fr !important;
  }
  .depth-dashboard-panels .card,
  .depth-dashboard-panels .section-card,
  .depth-dashboard-panels .city-event-card {
    padding: 9px !important;
  }
  .depth-dashboard-panels .section-head h3,
  #dashboard .section-head h3 {
    font-size: 13.5px !important;
  }
  .city-event-card img,
  .section-hero-media img,
  .full-media,
  .map-wrap img {
    max-height: 150px !important;
  }
  .city-event-choice-guide,
  .city-event-choice-guide-prominent {
    gap: 6px !important;
    margin: 8px 0 !important;
    padding: 8px !important;
  }
  .city-event-choice-guide-row {
    padding: 7px 8px !important;
    border-radius: 10px !important;
    gap: 2px !important;
  }
  .city-event-choice-guide-row strong,
  .choice-effects-heading {
    font-size: 9.5px !important;
    letter-spacing: .08em !important;
  }
  .city-event-choice-guide-row span {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
  #territory .territory-info-top,
  #territory .territory-expansion-grid {
    grid-template-columns: 1fr !important;
  }
  #territory .mini-district-card p,
  #territory .territory-clear-card p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-bottom: 7px !important;
  }
  #territory .progress { height: 7px !important; margin: 7px 0 !important; }
  #territory .map-card .map-wrap { min-height: 180px !important; }
  #territory .map-label {
    font-size: 8px !important;
    padding: 4px 5px !important;
  }
  #territory .map-label strong { font-size: 8px !important; }
  #territory .map-label span { font-size: 8px !important; }
  .tip-list { gap: 7px !important; }
  .tip-list div { padding: 8px !important; border-radius: 10px !important; }
  .tip-list strong { font-size: 11px !important; }
  .tip-list span { font-size: 10.5px !important; line-height: 1.3 !important; }
}

@media (max-width: 390px) {
  .main { padding: 8px !important; }
  .topbar h2,
  #pageTitle { font-size: 16px !important; }
  .section-hero-copy h3,
  .section-hero h3,
  .welcome-card h2 { font-size: 19px !important; }
  .dashboard-next-moves-grid { grid-template-columns: 1fr !important; }
  .dashboard-next-move-btn { min-height: 42px !important; }
  .hero-stats-grid,
  .meta-grid-inline.three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hero-stat,
  .meta-grid-inline > div,
  .req-chip { padding: 6px !important; }
  button,
  .primary,
  .ghost,
  .quiet,
  .danger,
  .small { font-size: 10.5px !important; padding: 7px 8px !important; }
}

/* --------------------------------------------------------------------------
   Mobile density pass v2
   More aggressive mobile compaction across every page to reduce vertical scroll.
   This pass intentionally sits at the end of the stylesheet so it wins over
   earlier mobile/card overrides.
-------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html { font-size: 12px !important; }
  body { font-size: 12px !important; line-height: 1.28 !important; }

  .app-shell { grid-template-columns: 1fr !important; }
  .main { padding: 6px !important; }
  .page-stack,
  .grid,
  .layout-main-side,
  .dashboard-grid,
  .depth-dashboard-panels,
  .city-events-grid,
  .objectives-grid,
  .territory-expansion-grid,
  .crew-failsafe-grid,
  .crew-all-cards-grid,
  .front-business-grid,
  .operations-grid,
  .rivals-grid,
  .battles-grid,
  .missions-grid,
  .hq-grid,
  .family-grid,
  .leaderboard-grid {
    gap: 6px !important;
  }

  .topbar {
    margin-bottom: 6px !important;
    padding: 6px 7px !important;
    gap: 5px !important;
    border-radius: 12px !important;
    align-items: center !important;
  }
  .topbar-title-wrap { gap: 1px !important; }
  .topbar-title-wrap .eyebrow,
  .eyebrow {
    font-size: 7.5px !important;
    letter-spacing: .1em !important;
    line-height: 1 !important;
  }
  .topbar h2,
  #pageTitle {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    letter-spacing: .01em !important;
  }
  .topbar-actions { gap: 4px !important; }
  .topbar-actions button,
  .mobile-nav-toggle,
  .mobile-nav-close {
    min-height: 24px !important;
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    border-radius: 8px !important;
  }

  .resource-strip {
    display: flex !important;
    overflow-x: auto !important;
    gap: 5px !important;
    margin: 0 0 6px !important;
    padding: 0 0 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .resource-strip::-webkit-scrollbar { display: none !important; }
  .resource-pill {
    flex: 0 0 92px !important;
    min-width: 92px !important;
    padding: 6px 7px !important;
    border-radius: 11px !important;
  }
  .resource-pill::before { right: 7px !important; top: 6px !important; font-size: 13px !important; opacity: .65 !important; }
  .resource-pill label { font-size: 7px !important; letter-spacing: .09em !important; }
  .resource-pill strong { margin-top: 3px !important; font-size: 14px !important; line-height: 1 !important; }
  .resource-pill span { margin-top: 3px !important; font-size: 8px !important; line-height: 1.1 !important; }

  .card,
  .section-card,
  .media-card,
  .entity-card,
  .portrait-card,
  .mini-district-card,
  .city-event-card,
  .dashboard-recommended-next-moves,
  .welcome-card,
  .notice,
  .requirements-block,
  .tip-list div,
  .dashboard-mini-card,
  .dashboard-front-card,
  .cleanbooks-progress-card,
  .morale-action-card {
    padding: 7px !important;
    border-radius: 11px !important;
  }

  .section-hero,
  .section-hero.section-hero-text-only,
  #operations .section-hero,
  #crew .section-hero,
  #fronts .section-hero,
  #territory .section-hero,
  #rivals .section-hero,
  #ledger .section-hero,
  #objectives .section-hero,
  #headquarters .section-hero,
  #missions .section-hero,
  #battles .section-hero,
  #family .section-hero,
  #leaderboard .section-hero {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }
  .section-hero-copy h3,
  .section-hero h3,
  .welcome-card h2 {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 2px 0 3px !important;
    letter-spacing: .005em !important;
  }
  .hero-description,
  .section-hero-copy p,
  .card p,
  .entity-card p,
  .city-event-card p,
  .portrait-card p,
  .mini-district-card p,
  .muted,
  .tiny,
  .stat-note,
  .notice,
  .tip-list span {
    font-size: 9.5px !important;
    line-height: 1.24 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }

  .section-head {
    gap: 5px !important;
    margin-bottom: 5px !important;
    align-items: center !important;
  }
  .section-head h3,
  .section-head h4,
  .entity-head h4,
  .solo h3,
  .auth-form h3 {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .section-head .badge,
  .badge,
  .status-pill,
  .tag,
  .rank-chip {
    font-size: 7.5px !important;
    padding: 3px 5px !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
  }

  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2,
  #operations .grid.cols-2,
  #fronts .grid.cols-2,
  #rivals .grid.cols-2,
  #crew .grid.cols-3,
  #crew .grid.cols-2,
  #headquarters .grid.cols-3,
  #headquarters .grid.cols-2,
  #missions .grid.cols-3,
  #missions .grid.cols-2,
  #battles .grid.cols-3,
  #battles .grid.cols-2,
  #family .grid.cols-3,
  #family .grid.cols-2,
  #objectives .grid.cols-3,
  #objectives .grid.cols-2,
  .territory-expansion-grid,
  .crew-failsafe-grid,
  .crew-all-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .layout-main-side,
  .section-hero,
  .auth-layout,
  .dashboard-grid { grid-template-columns: 1fr !important; }

  .entity-card,
  .portrait-card,
  .mini-district-card {
    gap: 5px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .entity-card-body,
  .portrait-card-body {
    gap: 5px !important;
  }
  .entity-head { gap: 5px !important; }
  .entity-head h4 { font-size: 11.5px !important; line-height: 1.05 !important; }

  .entity-card > img,
  .portrait-card > img,
  .media-card img,
  .section-hero-media img,
  .full-media,
  .city-event-card img {
    max-height: 92px !important;
    border-radius: 9px !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    width: 100% !important;
    height: 128px !important;
    max-height: 128px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 9px !important;
  }

  .hero-actions,
  .row-actions,
  .entity-card-body .row-actions,
  .event-actions,
  .action-row {
    gap: 4px !important;
    margin-top: 5px !important;
  }
  button,
  .primary,
  .ghost,
  .quiet,
  .danger,
  .small,
  .wide {
    font-size: 9.5px !important;
    padding: 5px 6px !important;
    min-height: 26px !important;
    border-radius: 8px !important;
    line-height: 1.1 !important;
  }

  .hero-stats-grid,
  .meta-grid-inline.three,
  .requirements-grid,
  .meta-grid-inline.two,
  .territory-meta,
  .stat-grid,
  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-top: 5px !important;
  }
  .hero-stat,
  .meta-grid-inline > div,
  .req-chip,
  .stat-card,
  .meta-line,
  .requirement-chip {
    padding: 5px !important;
    border-radius: 8px !important;
  }
  .hero-stat span,
  .meta-line span,
  .meta-grid-inline span,
  .stat-label,
  .req-chip span,
  .requirement-chip span,
  .requirements-title {
    font-size: 6.8px !important;
    letter-spacing: .07em !important;
    line-height: 1 !important;
  }
  .hero-stat strong,
  .meta-grid-inline strong,
  .req-chip strong,
  .requirement-chip strong,
  .stat-value {
    font-size: 10px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
  }
  .hero-stat em { font-size: 8px !important; line-height: 1.05 !important; margin-top: 2px !important; }
  .requirements-block { margin-top: 5px !important; }

  .progress {
    height: 5px !important;
    margin: 4px 0 !important;
  }

  .dashboard-recommended-next-moves {
    padding: 7px !important;
    margin-top: 5px !important;
  }
  .dashboard-next-moves-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  .dashboard-next-move-btn {
    min-height: 34px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    gap: 2px !important;
  }
  .dashboard-next-move-btn strong { font-size: 9.5px !important; line-height: 1 !important; }
  .dashboard-next-move-btn span { font-size: 7.8px !important; line-height: 1.15 !important; }

  #dashboard .depth-dashboard-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  #dashboard .depth-dashboard-panels .card,
  #dashboard .depth-dashboard-panels .section-card,
  #dashboard .depth-dashboard-panels .city-event-card,
  #dashboard .daily-focus-card,
  #dashboard .city-event-card {
    padding: 7px !important;
    min-height: 0 !important;
  }
  #dashboard .depth-dashboard-panels .section-head h3,
  #dashboard .section-head h3 { font-size: 11px !important; }

  .city-event-choice-guide,
  .city-event-choice-guide-prominent {
    gap: 4px !important;
    margin: 5px 0 !important;
    padding: 5px !important;
    border-radius: 9px !important;
  }
  .city-event-choice-guide-row {
    padding: 5px !important;
    border-radius: 8px !important;
    gap: 1px !important;
  }
  .city-event-choice-guide-row strong,
  .choice-effects-heading {
    font-size: 8px !important;
    letter-spacing: .06em !important;
    line-height: 1.05 !important;
  }
  .city-event-choice-guide-row span {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  #territory .territory-info-top { gap: 5px !important; }
  #territory .mini-district-card p,
  #territory .territory-clear-card p {
    font-size: 9.25px !important;
    line-height: 1.18 !important;
    margin-bottom: 4px !important;
  }
  #territory .map-card .map-wrap { min-height: 135px !important; }
  #territory .map-label { font-size: 7px !important; padding: 3px 4px !important; }
  #territory .map-label strong,
  #territory .map-label span { font-size: 7px !important; }

  .ledger-entry,
  .log-entry,
  .activity-row,
  .leaderboard-row {
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 9px !important;
  }
  .ledger-entry strong,
  .log-entry strong,
  .activity-row strong,
  .leaderboard-row strong { font-size: 10px !important; line-height: 1.1 !important; }
  .ledger-entry span,
  .log-entry span,
  .activity-row span,
  .leaderboard-row span { font-size: 8.5px !important; line-height: 1.15 !important; }

  .tip-list { gap: 4px !important; }
  .tip-list strong { font-size: 9.5px !important; line-height: 1.1 !important; }
}

@media (max-width: 390px) {
  html { font-size: 11.5px !important; }
  .main { padding: 5px !important; }
  .topbar h2,
  #pageTitle { font-size: 14px !important; }
  .section-hero-copy h3,
  .section-hero h3,
  .welcome-card h2 { font-size: 15px !important; }
  .resource-pill { flex-basis: 86px !important; min-width: 86px !important; }
  .dashboard-next-move-btn { min-height: 32px !important; }
  .dashboard-next-move-btn strong { font-size: 9px !important; }
  .dashboard-next-move-btn span { font-size: 7.5px !important; }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img {
    height: 112px !important;
    max-height: 112px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile density pass v3: no horizontal resource scrolling, fixed hamburger,
   smaller cards/chips for Crew, Territory, Battles and all requirements.
-------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html { font-size: 11px !important; }
  body { font-size: 11px !important; line-height: 1.18 !important; overflow-x: hidden !important; }
  * { min-width: 0; }

  .main { padding: 5px !important; max-width: 100vw !important; overflow-x: hidden !important; }
  .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    margin-bottom: 5px !important;
    border-radius: 11px !important;
  }
  .topbar-title-wrap {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-areas: "menu eyebrow" "menu title" !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    align-items: center !important;
    justify-items: start !important;
    width: 100% !important;
  }
  .mobile-nav-toggle {
    grid-area: menu !important;
    align-self: center !important;
    justify-self: start !important;
    width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
  }
  .topbar-title-wrap .eyebrow {
    grid-area: eyebrow !important;
    font-size: 6.5px !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .topbar h2,
  #pageTitle {
    grid-area: title !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .topbar-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  .topbar-actions > button,
  .topbar-actions #saveBtn {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 21px !important;
    padding: 3px 4px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }

  .resource-strip {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 3px !important;
    margin: 0 0 5px !important;
    padding: 2px 0 4px !important;
    scrollbar-width: none !important;
  }
  .resource-pill {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 4px 3px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  .resource-pill::before { display: none !important; }
  .resource-pill label {
    font-size: 5.7px !important;
    letter-spacing: .045em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .resource-pill strong {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .resource-pill span {
    display: block !important;
    margin-top: 1px !important;
    font-size: 5.8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .page-stack,
  .grid,
  .layout-main-side,
  .dashboard-grid,
  .depth-dashboard-panels,
  .city-events-grid,
  .objectives-grid,
  .territory-expansion-grid,
  .crew-failsafe-grid,
  .crew-all-cards-grid,
  .front-business-grid,
  .operations-grid,
  .rivals-grid,
  .battles-grid,
  .missions-grid,
  .hq-grid,
  .family-grid,
  .leaderboard-grid { gap: 4px !important; }

  .card,
  .section-card,
  .media-card,
  .entity-card,
  .portrait-card,
  .mini-district-card,
  .district-expansion-card,
  .territory-clear-card,
  .battle-card,
  .compact-battle-card,
  .city-event-card,
  .dashboard-recommended-next-moves,
  .welcome-card,
  .notice,
  .requirements-block,
  .tip-list div,
  .dashboard-mini-card,
  .dashboard-front-card,
  .cleanbooks-progress-card,
  .morale-action-card {
    padding: 5px !important;
    border-radius: 9px !important;
    gap: 4px !important;
  }

  .section-hero,
  .section-hero.section-hero-text-only,
  #operations .section-hero,
  #crew .section-hero,
  #fronts .section-hero,
  #territory .section-hero,
  #rivals .section-hero,
  #ledger .section-hero,
  #objectives .section-hero,
  #headquarters .section-hero,
  #missions .section-hero,
  #battles .section-hero,
  #family .section-hero,
  #leaderboard .section-hero {
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
  }
  .section-hero-copy h3,
  .section-hero h3,
  .welcome-card h2 {
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 1px 0 2px !important;
  }
  .section-head { gap: 3px !important; margin-bottom: 3px !important; }
  .section-head h3,
  .section-head h4,
  .entity-head h4,
  .solo h3,
  .auth-form h3 {
    font-size: 10px !important;
    line-height: 1.02 !important;
    margin: 0 !important;
  }
  .hero-description,
  .section-hero-copy p,
  .card p,
  .entity-card p,
  .city-event-card p,
  .portrait-card p,
  .mini-district-card p,
  .district-expansion-card p,
  .territory-clear-card p,
  .battle-card p,
  .compact-battle-card p,
  .muted,
  .tiny,
  .stat-note,
  .notice,
  .tip-list span,
  .action-help,
  .requirements-note {
    font-size: 7.8px !important;
    line-height: 1.14 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  .section-head .badge,
  .badge,
  .status-pill,
  .tag,
  .rank-chip {
    font-size: 6.5px !important;
    padding: 2px 4px !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
  }

  button,
  .primary,
  .ghost,
  .quiet,
  .danger,
  .small,
  .wide {
    font-size: 8px !important;
    padding: 4px 5px !important;
    min-height: 22px !important;
    border-radius: 7px !important;
    line-height: 1.05 !important;
  }
  .row-actions,
  .hero-actions,
  .event-actions,
  .action-row,
  .entity-card-body .row-actions {
    gap: 3px !important;
    margin-top: 3px !important;
  }

  .requirements-block { margin-top: 3px !important; padding: 4px !important; }
  .requirements-title {
    font-size: 6.3px !important;
    padding: 2px 4px !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .requirements-grid,
  .compact-reqs,
  .morale-requirements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin-top: 3px !important;
  }
  .requirement-chip,
  .req-chip,
  .compact-reqs .requirement-chip,
  .compact-reqs .req-chip {
    min-width: 0 !important;
    padding: 3px 4px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }
  .requirement-chip span,
  .req-chip span,
  .compact-reqs .requirement-chip span,
  .compact-reqs .req-chip span,
  .stat-label,
  .meta-line span,
  .meta-grid-inline span,
  .req-chip strong {
    font-size: 5.8px !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .requirement-chip strong,
  .req-chip strong,
  .compact-reqs .requirement-chip strong,
  .compact-reqs .req-chip strong,
  .stat-value,
  .meta-line strong,
  .meta-grid-inline strong {
    font-size: 7.8px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .hero-stats-grid,
  .meta-grid-inline.three,
  .meta-grid-inline.two,
  .territory-meta,
  .stat-grid,
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin-top: 3px !important;
  }
  .hero-stat,
  .meta-grid-inline > div,
  .req-chip,
  .stat-card,
  .meta-line,
  .requirement-chip {
    padding: 4px !important;
    border-radius: 7px !important;
  }
  .progress { height: 4px !important; margin: 3px 0 !important; }

  .dashboard-next-moves-grid { gap: 4px !important; }
  .dashboard-next-move-btn {
    min-height: 28px !important;
    padding: 4px 5px !important;
    border-radius: 8px !important;
    gap: 1px !important;
  }
  .dashboard-next-move-btn strong { font-size: 8px !important; line-height: 1 !important; }
  .dashboard-next-move-btn span { font-size: 6.5px !important; line-height: 1.05 !important; }
  #dashboard .depth-dashboard-panels,
  #dashboard .daily-focus-grid,
  #dashboard .city-events-grid { gap: 4px !important; }
  #dashboard .daily-focus-card,
  #dashboard .city-event-card { padding: 5px !important; }

  #crew .crew-failsafe-grid,
  #crew .crew-all-cards-grid,
  #crew .grid.cols-3,
  #crew .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  #crew .entity-card,
  #crew .portrait-card {
    padding: 5px !important;
    gap: 3px !important;
  }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img,
  #crew .portrait-card > img {
    width: 100% !important;
    height: 78px !important;
    max-height: 78px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 8px !important;
  }
  #crew .entity-card-body,
  #crew .portrait-card-body { gap: 3px !important; }
  #crew .entity-head h4 { font-size: 9px !important; }
  #crew .entity-card p,
  #crew .portrait-card p { font-size: 7.4px !important; line-height: 1.1 !important; }
  #crew .row-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 3px !important; }
  #crew button { min-height: 21px !important; }

  #territory .territory-expansion-grid,
  #territory .grid.cols-3,
  #territory .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  #territory .mini-district-card,
  #territory .district-expansion-card,
  #territory .territory-clear-card {
    padding: 5px !important;
    gap: 3px !important;
  }
  #territory .mini-district-card p,
  #territory .territory-clear-card p,
  #territory .district-expansion-card p {
    font-size: 7.5px !important;
    line-height: 1.1 !important;
    margin: 1px 0 !important;
  }
  #territory .entity-head h4,
  #territory .mini-district-card h4 { font-size: 9px !important; }
  #territory .map-card .map-wrap { min-height: 110px !important; }
  #territory .map-label { font-size: 5.8px !important; padding: 2px 3px !important; }
  #territory .map-label strong,
  #territory .map-label span { font-size: 5.8px !important; }

  #battles .grid.cols-3,
  #battles .grid.cols-2,
  #battles .battles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  #battles .compact-battle-card,
  #battles .battle-card {
    padding: 5px !important;
    gap: 3px !important;
    min-height: 0 !important;
  }
  #battles .compact-battle-card > img,
  #battles .battle-card > img {
    height: 62px !important;
    max-height: 62px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 8px !important;
  }
  #battles .compact-battle-card .entity-head h4,
  #battles .battle-card .entity-head h4 { font-size: 9px !important; }
  #battles .compact-battle-card p,
  #battles .battle-card p,
  #battles .action-help { font-size: 7.2px !important; line-height: 1.1 !important; }
  #battles .compact-battle-card .meta-grid-inline,
  #battles .battle-card .meta-grid-inline { gap: 3px !important; }
}

@media (max-width: 390px) {
  .resource-pill label { font-size: 5.2px !important; }
  .resource-pill strong { font-size: 9px !important; }
  .resource-pill span { font-size: 5.2px !important; }
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img,
  #crew .portrait-card > img { height: 70px !important; max-height: 70px !important; }
  #battles .compact-battle-card > img,
  #battles .battle-card > img { height: 54px !important; max-height: 54px !important; }
  .requirements-grid,
  .compact-reqs,
  .morale-requirements-grid { gap: 2px !important; }
}

/* --------------------------------------------------------------------------
   Mobile Dashboard controls + Crew image final polish
   - On mobile, account buttons live only at the bottom of Dashboard.
   - Header account buttons are hidden on every mobile page.
   - Crew art uses restored wide originals, fills card width, and crops from the top.
-------------------------------------------------------------------------- */
.dashboard-mobile-controls {
  display: none !important;
}

@media (max-width: 1024px) {
  .topbar .topbar-actions,
  .topbar-actions {
    display: none !important;
  }

  #dashboard .dashboard-mobile-controls {
    display: block !important;
    order: 9999 !important;
    margin-top: 4px !important;
  }

  #dashboard .dashboard-mobile-action-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #dashboard .dashboard-mobile-action-row > button {
    width: 100% !important;
    min-height: 24px !important;
    padding: 5px 4px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
  }

  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img,
  #crew .portrait-card > img {
    width: 100% !important;
    max-width: 100% !important;
    height: 62px !important;
    max-height: 62px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin: 0 0 2px !important;
    border-radius: 7px !important;
  }
}

@media (min-width: 1025px) {
  #dashboard .dashboard-mobile-controls {
    display: none !important;
  }
}

@media (max-width: 390px) {
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .entity-card > img,
  #crew .portrait-card > img {
    height: 56px !important;
    max-height: 56px !important;
  }
}

/* --------------------------------------------------------------------------
   Resource Strip Indicators Update
   Shared desktop/mobile resource strip: rank progress, heat trend, loyalty trend.
-------------------------------------------------------------------------- */
.resource-pill .resource-note {
  color: var(--green);
}
.resource-pill .resource-detail {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.15;
  color: var(--muted);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resource-progress {
  width: 100%;
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.06);
}
.resource-progress span {
  display: block;
  height: 100%;
  margin: 0 !important;
  background: linear-gradient(90deg, #d9b46e, #9e702a);
}
.resource-pill.respect .resource-note,
.resource-pill.respect .resource-detail { color: var(--gold-soft); }
.resource-pill.heat.rising .resource-note { color: var(--red); }
.resource-pill.heat.cooling .resource-note { color: var(--green); }
.resource-pill.heat.stable .resource-note { color: var(--muted); }
.resource-pill.loyalty.danger .resource-note,
.resource-pill.loyalty.blocked .resource-note { color: var(--red); }
.resource-pill.loyalty.warning .resource-note { color: var(--gold); }
.resource-pill.loyalty.recovering .resource-note { color: var(--green); }
.resource-progress.rising span,
.resource-progress.danger span,
.resource-progress.blocked span { background: linear-gradient(90deg, #dd736b, #8f2e28); }
.resource-progress.cooling span,
.resource-progress.recovering span { background: linear-gradient(90deg, #8bd28b, #3f8f55); }
.resource-progress.stable span { background: linear-gradient(90deg, #9d9a8b, #6b6759); }

@media (max-width: 760px) {
  .resource-pill .resource-detail {
    margin-top: 1px !important;
    font-size: 5.2px !important;
    line-height: 1 !important;
  }
  .resource-progress {
    height: 3px !important;
    margin-top: 2px !important;
    border-width: 0 !important;
  }
  .resource-pill .resource-note {
    font-size: 5.6px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 390px) {
  .resource-pill .resource-detail {
    display: none !important;
  }
  .resource-progress {
    height: 2px !important;
    margin-top: 1px !important;
  }
}

/* --------------------------------------------------------------------------
   Final Visible Resource Strip Indicator Polish
-------------------------------------------------------------------------- */
.resource-pill .resource-note {
  display: block !important;
  margin-top: 5px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: var(--green) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.resource-pill .resource-detail {
  display: block !important;
  margin-top: 4px !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  color: var(--muted) !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.resource-progress {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-top: 7px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.resource-progress span {
  display: block !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #d9b46e, #9e702a) !important;
}
.resource-pill.respect .resource-note,
.resource-pill.respect .resource-detail { color: var(--gold-soft) !important; }
.resource-pill.heat.rising .resource-note,
.resource-pill.loyalty.danger .resource-note,
.resource-pill.loyalty.blocked .resource-note { color: var(--red) !important; }
.resource-pill.heat.cooling .resource-note,
.resource-pill.loyalty.recovering .resource-note { color: var(--green) !important; }
.resource-pill.heat.stable .resource-note,
.resource-pill.loyalty.stable .resource-note { color: var(--muted) !important; }
.resource-pill.loyalty.warning .resource-note { color: var(--gold) !important; }
.resource-progress.rising span,
.resource-progress.danger span,
.resource-progress.blocked span { background: linear-gradient(90deg, #e18578, #8f2e28) !important; }
.resource-progress.cooling span,
.resource-progress.recovering span { background: linear-gradient(90deg, #94d486, #3f8f55) !important; }
.resource-progress.stable span { background: linear-gradient(90deg, #9d9a8b, #6b6759) !important; }

@media (max-width: 760px) {
  .resource-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }
  .resource-pill {
    padding: 4px 3px 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .resource-pill label {
    font-size: 5.8px !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
  }
  .resource-pill strong {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  .resource-pill .resource-note {
    margin-top: 2px !important;
    font-size: 5.9px !important;
    line-height: 1 !important;
  }
  .resource-pill .resource-detail {
    margin-top: 1px !important;
    font-size: 5.3px !important;
    line-height: 1 !important;
  }
  .resource-progress {
    height: 3px !important;
    margin-top: 2px !important;
    border-width: 0 !important;
  }
}

@media (max-width: 390px) {
  .resource-pill .resource-detail {
    display: none !important;
  }
  .resource-pill .resource-note {
    font-size: 5.2px !important;
  }
  .resource-progress {
    height: 2.5px !important;
    margin-top: 2px !important;
  }
}

/* Strong final resource strip indicators */
#resourceStrip.resource-strip-has-indicators .resource-pill {
  align-content: start !important;
  gap: 0 !important;
}
#resourceStrip .resource-pill .resource-note {
  display: block !important;
  margin-top: 4px !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  opacity: 1 !important;
}
#resourceStrip .resource-pill .resource-detail {
  display: block !important;
  margin-top: 3px !important;
  color: var(--muted) !important;
  font-style: normal !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  opacity: .95 !important;
}
#resourceStrip .resource-indicator-bar {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
#resourceStrip .resource-indicator-bar span {
  display: block !important;
  height: 100% !important;
  min-width: 2px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--gold), #9e702a) !important;
}
#resourceStrip .resource-pill.respect .resource-note,
#resourceStrip .resource-pill.respect .resource-detail { color: var(--gold-soft) !important; }
#resourceStrip .resource-pill.heat.rising .resource-note,
#resourceStrip .resource-pill.loyalty.danger .resource-note,
#resourceStrip .resource-pill.loyalty.blocked .resource-note { color: var(--red) !important; }
#resourceStrip .resource-pill.heat.cooling .resource-note,
#resourceStrip .resource-pill.loyalty.recovering .resource-note { color: var(--green) !important; }
#resourceStrip .resource-pill.heat.stable .resource-note,
#resourceStrip .resource-pill.loyalty.stable .resource-note { color: var(--muted) !important; }
#resourceStrip .resource-pill.loyalty.warning .resource-note { color: var(--gold) !important; }
#resourceStrip .resource-indicator-bar.rising span,
#resourceStrip .resource-indicator-bar.danger span,
#resourceStrip .resource-indicator-bar.blocked span { background: linear-gradient(90deg, #e18578, #8f2e28) !important; }
#resourceStrip .resource-indicator-bar.cooling span,
#resourceStrip .resource-indicator-bar.recovering span { background: linear-gradient(90deg, #94d486, #3f8f55) !important; }
#resourceStrip .resource-indicator-bar.stable span { background: linear-gradient(90deg, #9d9a8b, #6b6759) !important; }

@media (max-width: 760px) {
  #resourceStrip.resource-strip-has-indicators {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-pill {
    padding: 4px 3px 5px !important;
    min-width: 0 !important;
  }
  #resourceStrip .resource-pill label {
    font-size: 5.8px !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
  }
  #resourceStrip .resource-pill strong {
    font-size: 10px !important;
    line-height: 1 !important;
    margin-top: 2px !important;
  }
  #resourceStrip .resource-pill .resource-note {
    font-size: 5.9px !important;
    line-height: 1.05 !important;
    margin-top: 2px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #resourceStrip .resource-pill .resource-detail {
    font-size: 5.2px !important;
    line-height: 1.05 !important;
    margin-top: 1px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #resourceStrip .resource-indicator-bar {
    height: 3px !important;
    margin-top: 2px !important;
    border-width: 0 !important;
  }
}

@media (max-width: 390px) {
  #resourceStrip .resource-pill .resource-detail {
    display: none !important;
  }
  #resourceStrip .resource-pill .resource-note {
    font-size: 5.3px !important;
  }
}

/* --------------------------------------------------------------------------
   Canonical resource strip final guard
   One compact shared strip for desktop and mobile.
-------------------------------------------------------------------------- */
#resourceStrip.resource-strip-has-indicators {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#resourceStrip.resource-strip-has-indicators .resource-pill {
  min-width: 0 !important;
  overflow: hidden !important;
}
#resourceStrip.resource-strip-has-indicators .resource-note {
  display: block !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#resourceStrip.resource-strip-has-indicators .resource-detail {
  display: block !important;
  color: var(--muted) !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#resourceStrip.resource-strip-has-indicators .resource-indicator-bar {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
#resourceStrip.resource-strip-has-indicators .resource-indicator-bar span {
  display: block !important;
  height: 100% !important;
  min-width: 2px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--gold), #9e702a) !important;
}
#resourceStrip .resource-pill.respect .resource-note,
#resourceStrip .resource-pill.respect .resource-detail { color: var(--gold-soft) !important; }
#resourceStrip .resource-pill.heat.rising .resource-note,
#resourceStrip .resource-pill.loyalty.danger .resource-note,
#resourceStrip .resource-pill.loyalty.blocked .resource-note { color: var(--red) !important; }
#resourceStrip .resource-pill.heat.cooling .resource-note,
#resourceStrip .resource-pill.loyalty.recovering .resource-note { color: var(--green) !important; }
#resourceStrip .resource-pill.heat.stable .resource-note,
#resourceStrip .resource-pill.loyalty.stable .resource-note { color: var(--muted) !important; }
#resourceStrip .resource-pill.loyalty.warning .resource-note { color: var(--gold) !important; }
#resourceStrip .resource-indicator-bar.rising span,
#resourceStrip .resource-indicator-bar.danger span,
#resourceStrip .resource-indicator-bar.blocked span { background: linear-gradient(90deg, #e18578, #8f2e28) !important; }
#resourceStrip .resource-indicator-bar.cooling span,
#resourceStrip .resource-indicator-bar.recovering span { background: linear-gradient(90deg, #94d486, #3f8f55) !important; }
#resourceStrip .resource-indicator-bar.stable span { background: linear-gradient(90deg, #9d9a8b, #6b6759) !important; }

@media (max-width: 760px) {
  #resourceStrip.resource-strip-has-indicators {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-pill {
    flex: initial !important;
    min-width: 0 !important;
    padding: 4px 3px 5px !important;
    border-radius: 10px !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-pill::before {
    right: 4px !important;
    top: 4px !important;
    font-size: 10px !important;
    opacity: .55 !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-pill label {
    font-size: 5.6px !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-pill strong {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-note {
    margin-top: 2px !important;
    font-size: 5.4px !important;
    line-height: 1.05 !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-detail {
    display: none !important;
  }
  #resourceStrip.resource-strip-has-indicators .resource-indicator-bar {
    height: 2.5px !important;
    margin-top: 2px !important;
    border-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Resource strip targeted meter fix
   Respect is the only resource that uses a visual progress meter. Heat and
   Loyalty remain compact text status indicators so the strip does not look
   like five unrelated progress bars.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill {
  min-width: 0 !important;
  overflow: hidden !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill label,
.resource-strip.resource-strip-has-indicators .resource-pill strong,
.resource-strip.resource-strip-has-indicators .resource-pill .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill .resource-detail {
  position: relative !important;
  z-index: 1 !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill strong {
  display: block !important;
  color: var(--text) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.resource-strip.resource-strip-has-indicators .resource-note {
  display: block !important;
  margin-top: 4px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.resource-strip.resource-strip-has-indicators .resource-detail {
  display: block !important;
  margin-top: 3px !important;
  color: var(--muted) !important;
  font-style: normal !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.resource-strip.resource-strip-has-indicators .resource-indicator-bar {
  display: none !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill.respect .resource-indicator-bar,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill.respect .resource-indicator-bar span,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span {
  display: block !important;
  height: 100% !important;
  min-width: 2px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--gold), #9e702a) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill.respect .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill.respect .resource-detail,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-detail {
  color: var(--gold-soft) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill.heat.rising .resource-note { color: var(--red) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.heat.cooling .resource-note { color: var(--green) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.heat.stable .resource-note { color: var(--muted) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.danger .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.blocked .resource-note { color: var(--red) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.warning .resource-note { color: var(--gold) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.recovering .resource-note { color: var(--green) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.stable .resource-note { color: var(--muted) !important; }

@media (max-width: 760px) {
  .resource-strip.resource-strip-has-indicators {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-pill {
    flex: initial !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 4px 3px 5px !important;
    border-radius: 10px !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-pill::before {
    right: 4px !important;
    top: 4px !important;
    font-size: 10px !important;
    opacity: .55 !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-pill label {
    font-size: 5.6px !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-pill strong {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-note {
    margin-top: 2px !important;
    font-size: 5.4px !important;
    line-height: 1.05 !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-detail {
    display: none !important;
  }
  .resource-strip.resource-strip-has-indicators .resource-pill.respect .resource-indicator-bar,
  .resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar {
    height: 2.5px !important;
    margin-top: 2px !important;
    border-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Resource strip trend color + respect meter collision fix
   The Respect pill must never use the generic .progress class; that global
   class is for small bars elsewhere and collapses any card it lands on.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] {
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"].rank-progress {
  margin-top: 0 !important;
  background: linear-gradient(180deg, rgba(20,20,20,.97), rgba(13,12,11,.98)) !important;
  overflow: hidden !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill.trend-up .resource-note { color: var(--green) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.trend-down .resource-note { color: var(--red) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.trend-stable .resource-note { color: var(--muted) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-detail { color: var(--gold-soft) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.heat.rising .resource-note { color: var(--red) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.heat.cooling .resource-note { color: var(--green) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.heat.stable .resource-note { color: var(--muted) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.danger .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.blocked .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.warning .resource-note { color: var(--red) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.recovering .resource-note { color: var(--green) !important; }
.resource-strip.resource-strip-has-indicators .resource-pill.loyalty.stable .resource-note { color: var(--muted) !important; }
@media (max-width: 760px) {
  .resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] { min-height: 0 !important; }
}


/* --------------------------------------------------------------------------
   Resource strip final visual polish
   - Respect is the only meter, and its fill now uses a CSS variable from the
     renderer so the shown bar always matches the computed rank percentage.
   - Positive per-minute resource rates are green, negative rates are red.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span {
  width: var(--resource-meter, 0%) !important;
  min-width: 0 !important;
  background: linear-gradient(90deg, var(--green), #3f8f55) !important;
  box-shadow: 0 0 8px rgba(148, 212, 134, .28) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar[style*="--resource-meter:0"] span,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar[style*="--resource-meter:0"] span {
  min-width: 0 !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="cash"].trend-up .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="influence"].trend-up .resource-note,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="cash"].trend-up .resource-note,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="influence"].trend-up .resource-note {
  color: var(--green) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="cash"].trend-down .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="influence"].trend-down .resource-note,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="cash"].trend-down .resource-note,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="influence"].trend-down .resource-note {
  color: var(--red) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="cash"].trend-stable .resource-note,
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="influence"].trend-stable .resource-note,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="cash"].trend-stable .resource-note,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="influence"].trend-stable .resource-note {
  color: var(--muted) !important;
}
@media (max-width: 760px) {
  .resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span,
  #resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span {
    box-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   Resource strip respect meter visible fill fix
   The earlier fill used a <span>, but the base .resource-pill span text rule
   adds margin-top. Inside a 5px overflow-hidden meter, that margin pushed the
   fill below the track, so the Respect bar looked empty even with 14% progress.
   This uses a dedicated fill element and also paints the track background from
   the same CSS variable as a belt-and-suspenders safeguard.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar {
  background: linear-gradient(
    90deg,
    var(--green) 0%,
    #3f8f55 var(--resource-meter, 0%),
    rgba(255,255,255,.10) var(--resource-meter, 0%),
    rgba(255,255,255,.10) 100%
  ) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill {
  display: block !important;
  height: 100% !important;
  width: var(--resource-meter, 0%) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--green), #3f8f55) !important;
  box-shadow: 0 0 8px rgba(148, 212, 134, .28) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar span {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
@media (max-width: 760px) {
  .resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill,
  #resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill {
    box-shadow: none !important;
  }
}


/* --------------------------------------------------------------------------
   Resource strip respect meter hard fill fix
   The Respect meter fill is now a real absolutely-positioned child with its
   width inlined by the renderer. This final guard also adds a pseudo-fill
   backup so the percentage is visible even if a future edit touches the child.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.10) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar::before,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--resource-meter, 0%) !important;
  border-radius: 999px !important;
  background: #79c879 !important;
  box-shadow: 0 0 8px rgba(121,200,121,.35) !important;
  z-index: 0 !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill {
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: block !important;
  height: 100% !important;
  background: #79c879 !important;
}
@media (max-width: 760px) {
  .resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar::before,
  #resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar::before,
  .resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill,
  #resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill {
    box-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   Resource strip visible Respect fill final-final fix
   The Respect meter now paints the percent directly on the track background.
   This avoids every previous child/pseudo-element collision and makes the
   visible green fill match --resource-meter everywhere the shared strip renders.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-bar {
  background: linear-gradient(
    90deg,
    #79c879 0%,
    #79c879 var(--resource-meter, 0%),
    rgba(255,255,255,.10) var(--resource-meter, 0%),
    rgba(255,255,255,.10) 100%
  ) !important;
  background-color: rgba(255,255,255,.10) !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill,
#resourceStrip.resource-strip-has-indicators .resource-pill[data-resource="respect"] .resource-indicator-fill {
  background: #79c879 !important;
}


/* --------------------------------------------------------------------------
   Resource strip Respect meter namespace fix
   The rank meter no longer uses .resource-indicator-bar, because older strip
   rules repaint that class gray. This unique namespace has both inline widths
   and class-based percentage fallbacks. Only Respect renders this meter.
-------------------------------------------------------------------------- */
.resource-strip.resource-strip-has-indicators .respect-meter-track,
#resourceStrip.resource-strip-has-indicators .respect-meter-track {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background-color: rgba(255,255,255,.10) !important;
  box-sizing: border-box !important;
}
.resource-strip.resource-strip-has-indicators .respect-meter-track::before,
#resourceStrip.resource-strip-has-indicators .respect-meter-track::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--respect-meter, 0%) !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  background: #58d36f !important;
  box-shadow: 0 0 8px rgba(88,211,111,.35) !important;
  z-index: 1 !important;
}
.resource-strip.resource-strip-has-indicators .respect-meter-fill,
#resourceStrip.resource-strip-has-indicators .respect-meter-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #58d36f !important;
  box-shadow: 0 0 8px rgba(88,211,111,.35) !important;
  z-index: 2 !important;
}
.resource-strip.resource-strip-has-indicators .resource-pill:not([data-resource="respect"]) .respect-meter-track,
#resourceStrip.resource-strip-has-indicators .resource-pill:not([data-resource="respect"]) .respect-meter-track {
  display: none !important;
}

.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-0::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-0::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-0 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-0 .respect-meter-fill { width: 0% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-1::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-1::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-1 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-1 .respect-meter-fill { width: 1% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-2::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-2::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-2 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-2 .respect-meter-fill { width: 2% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-3::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-3::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-3 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-3 .respect-meter-fill { width: 3% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-4::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-4::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-4 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-4 .respect-meter-fill { width: 4% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-5::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-5::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-5 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-5 .respect-meter-fill { width: 5% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-6::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-6::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-6 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-6 .respect-meter-fill { width: 6% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-7::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-7::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-7 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-7 .respect-meter-fill { width: 7% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-8::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-8::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-8 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-8 .respect-meter-fill { width: 8% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-9::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-9::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-9 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-9 .respect-meter-fill { width: 9% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-10::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-10::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-10 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-10 .respect-meter-fill { width: 10% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-11::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-11::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-11 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-11 .respect-meter-fill { width: 11% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-12::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-12::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-12 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-12 .respect-meter-fill { width: 12% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-13::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-13::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-13 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-13 .respect-meter-fill { width: 13% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-14::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-14::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-14 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-14 .respect-meter-fill { width: 14% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-15::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-15::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-15 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-15 .respect-meter-fill { width: 15% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-16::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-16::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-16 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-16 .respect-meter-fill { width: 16% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-17::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-17::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-17 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-17 .respect-meter-fill { width: 17% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-18::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-18::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-18 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-18 .respect-meter-fill { width: 18% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-19::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-19::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-19 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-19 .respect-meter-fill { width: 19% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-20::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-20::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-20 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-20 .respect-meter-fill { width: 20% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-21::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-21::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-21 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-21 .respect-meter-fill { width: 21% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-22::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-22::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-22 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-22 .respect-meter-fill { width: 22% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-23::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-23::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-23 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-23 .respect-meter-fill { width: 23% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-24::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-24::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-24 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-24 .respect-meter-fill { width: 24% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-25::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-25::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-25 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-25 .respect-meter-fill { width: 25% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-26::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-26::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-26 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-26 .respect-meter-fill { width: 26% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-27::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-27::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-27 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-27 .respect-meter-fill { width: 27% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-28::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-28::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-28 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-28 .respect-meter-fill { width: 28% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-29::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-29::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-29 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-29 .respect-meter-fill { width: 29% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-30::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-30::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-30 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-30 .respect-meter-fill { width: 30% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-31::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-31::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-31 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-31 .respect-meter-fill { width: 31% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-32::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-32::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-32 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-32 .respect-meter-fill { width: 32% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-33::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-33::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-33 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-33 .respect-meter-fill { width: 33% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-34::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-34::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-34 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-34 .respect-meter-fill { width: 34% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-35::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-35::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-35 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-35 .respect-meter-fill { width: 35% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-36::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-36::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-36 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-36 .respect-meter-fill { width: 36% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-37::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-37::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-37 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-37 .respect-meter-fill { width: 37% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-38::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-38::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-38 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-38 .respect-meter-fill { width: 38% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-39::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-39::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-39 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-39 .respect-meter-fill { width: 39% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-40::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-40::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-40 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-40 .respect-meter-fill { width: 40% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-41::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-41::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-41 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-41 .respect-meter-fill { width: 41% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-42::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-42::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-42 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-42 .respect-meter-fill { width: 42% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-43::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-43::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-43 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-43 .respect-meter-fill { width: 43% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-44::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-44::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-44 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-44 .respect-meter-fill { width: 44% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-45::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-45::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-45 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-45 .respect-meter-fill { width: 45% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-46::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-46::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-46 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-46 .respect-meter-fill { width: 46% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-47::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-47::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-47 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-47 .respect-meter-fill { width: 47% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-48::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-48::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-48 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-48 .respect-meter-fill { width: 48% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-49::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-49::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-49 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-49 .respect-meter-fill { width: 49% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-50::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-50::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-50 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-50 .respect-meter-fill { width: 50% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-51::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-51::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-51 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-51 .respect-meter-fill { width: 51% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-52::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-52::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-52 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-52 .respect-meter-fill { width: 52% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-53::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-53::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-53 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-53 .respect-meter-fill { width: 53% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-54::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-54::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-54 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-54 .respect-meter-fill { width: 54% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-55::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-55::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-55 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-55 .respect-meter-fill { width: 55% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-56::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-56::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-56 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-56 .respect-meter-fill { width: 56% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-57::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-57::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-57 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-57 .respect-meter-fill { width: 57% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-58::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-58::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-58 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-58 .respect-meter-fill { width: 58% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-59::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-59::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-59 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-59 .respect-meter-fill { width: 59% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-60::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-60::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-60 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-60 .respect-meter-fill { width: 60% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-61::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-61::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-61 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-61 .respect-meter-fill { width: 61% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-62::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-62::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-62 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-62 .respect-meter-fill { width: 62% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-63::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-63::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-63 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-63 .respect-meter-fill { width: 63% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-64::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-64::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-64 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-64 .respect-meter-fill { width: 64% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-65::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-65::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-65 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-65 .respect-meter-fill { width: 65% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-66::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-66::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-66 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-66 .respect-meter-fill { width: 66% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-67::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-67::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-67 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-67 .respect-meter-fill { width: 67% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-68::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-68::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-68 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-68 .respect-meter-fill { width: 68% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-69::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-69::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-69 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-69 .respect-meter-fill { width: 69% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-70::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-70::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-70 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-70 .respect-meter-fill { width: 70% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-71::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-71::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-71 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-71 .respect-meter-fill { width: 71% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-72::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-72::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-72 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-72 .respect-meter-fill { width: 72% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-73::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-73::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-73 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-73 .respect-meter-fill { width: 73% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-74::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-74::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-74 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-74 .respect-meter-fill { width: 74% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-75::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-75::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-75 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-75 .respect-meter-fill { width: 75% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-76::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-76::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-76 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-76 .respect-meter-fill { width: 76% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-77::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-77::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-77 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-77 .respect-meter-fill { width: 77% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-78::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-78::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-78 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-78 .respect-meter-fill { width: 78% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-79::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-79::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-79 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-79 .respect-meter-fill { width: 79% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-80::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-80::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-80 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-80 .respect-meter-fill { width: 80% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-81::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-81::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-81 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-81 .respect-meter-fill { width: 81% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-82::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-82::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-82 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-82 .respect-meter-fill { width: 82% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-83::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-83::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-83 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-83 .respect-meter-fill { width: 83% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-84::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-84::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-84 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-84 .respect-meter-fill { width: 84% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-85::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-85::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-85 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-85 .respect-meter-fill { width: 85% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-86::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-86::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-86 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-86 .respect-meter-fill { width: 86% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-87::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-87::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-87 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-87 .respect-meter-fill { width: 87% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-88::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-88::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-88 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-88 .respect-meter-fill { width: 88% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-89::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-89::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-89 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-89 .respect-meter-fill { width: 89% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-90::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-90::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-90 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-90 .respect-meter-fill { width: 90% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-91::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-91::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-91 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-91 .respect-meter-fill { width: 91% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-92::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-92::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-92 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-92 .respect-meter-fill { width: 92% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-93::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-93::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-93 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-93 .respect-meter-fill { width: 93% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-94::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-94::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-94 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-94 .respect-meter-fill { width: 94% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-95::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-95::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-95 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-95 .respect-meter-fill { width: 95% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-96::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-96::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-96 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-96 .respect-meter-fill { width: 96% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-97::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-97::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-97 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-97 .respect-meter-fill { width: 97% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-98::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-98::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-98 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-98 .respect-meter-fill { width: 98% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-99::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-99::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-99 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-99 .respect-meter-fill { width: 99% !important; }
.resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-100::before, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-100::before, .resource-strip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-100 .respect-meter-fill, #resourceStrip.resource-strip-has-indicators .respect-meter-track.respect-meter-pct-100 .respect-meter-fill { width: 100% !important; }

@media (max-width: 760px) {
  .resource-strip.resource-strip-has-indicators .respect-meter-track,
  #resourceStrip.resource-strip-has-indicators .respect-meter-track {
    height: 3px !important;
    margin-top: 2px !important;
    border-width: 0 !important;
  }
  .resource-strip.resource-strip-has-indicators .respect-meter-track::before,
  #resourceStrip.resource-strip-has-indicators .respect-meter-track::before,
  .resource-strip.resource-strip-has-indicators .respect-meter-fill,
  #resourceStrip.resource-strip-has-indicators .respect-meter-fill {
    box-shadow: none !important;
  }
}


/* --------------------------------------------------------------------------
   Performance/layout audit polish — desktop sidebar density
   Keeps mobile compact behavior unchanged while fitting all desktop nav items.
-------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: 238px minmax(0, 1fr);
  }
  .sidebar {
    padding: 10px 10px;
    gap: 8px;
  }
  .sidebar .brand {
    padding: 0 2px 4px;
  }
  .sidebar .brand > .brand-logo-sidebar,
  .brand-logo-sidebar {
    width: 112px !important;
    max-width: 112px !important;
  }
  .sidebar .nav {
    gap: 4px;
  }
  .sidebar .nav-btn {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.15;
    min-height: 34px;
  }
  .sidebar-footer {
    gap: 5px;
  }
  .sidebar-footer .tiny {
    font-size: 10.5px;
    line-height: 1.3;
  }
  .sidebar-footer .small {
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 9px;
  }
}


/* --------------------------------------------------------------------------
   No-jump/performance layout final polish
   - desktop sidebar logo matches the full nav-link width while preserving the
     image proportions
   - smaller desktop nav buttons retained
   - disables browser scroll anchoring inside volatile card grids so lazy images
     and small text updates do not pull the viewport around
-------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: 238px minmax(0, 1fr) !important;
  }
  .sidebar {
    padding: 10px !important;
    gap: 7px !important;
  }
  .sidebar .brand {
    width: 100% !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }
  .sidebar .brand > .brand-logo-sidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 165px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 14px !important;
  }
  .sidebar .nav {
    gap: 4px !important;
  }
  .sidebar .nav-btn {
    min-height: 32px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  .sidebar-footer {
    gap: 4px !important;
  }
  .sidebar-footer .tiny {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  .sidebar-footer .small {
    padding: 5px 8px !important;
    font-size: 10.5px !important;
    border-radius: 9px !important;
  }
}

.view,
.page-stack,
.card,
.entity-card,
.section-card,
.list-item,
.grid {
  overflow-anchor: none;
}

html.no-jump-rendering,
body.no-jump-rendering {
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   Mobile drawer + first-card spacing final audit
   - Mobile drawer no longer covers nearly the whole screen.
   - Drawer nav/link width and logo are tied to the narrower drawer width.
   - Mobile resource strip is kept in normal document flow so the first card on
     every page cannot slide underneath it or appear clipped at the top.
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sidebar {
    width: min(238px, 72vw) !important;
    max-width: 238px !important;
    padding: 10px 8px 12px !important;
    gap: 8px !important;
  }
  .sidebar-mobile-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
  }
  .sidebar-mobile-head .mobile-drawer-logo {
    width: min(148px, calc(100% - 46px)) !important;
    max-width: min(148px, calc(100% - 46px)) !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  .sidebar .nav {
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
  }
  .sidebar .nav-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 32px !important;
    padding: 8px 9px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  .mobile-nav-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 18px !important;
  }
  .nav-backdrop {
    background: rgba(0,0,0,.56) !important;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
  }
  #resourceStrip.resource-strip,
  .resource-strip.resource-strip-has-indicators {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 0 10px !important;
    padding: 0 0 4px !important;
  }
  #gameScreen {
    padding-top: 2px !important;
  }
  .view.active > .page-stack,
  .view.active > .card,
  .view.active > .section-hero {
    margin-top: 0 !important;
  }
  .view.active .page-stack > :first-child {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  .sidebar {
    width: min(226px, 72vw) !important;
    max-width: 226px !important;
  }
  .sidebar-mobile-head .mobile-drawer-logo {
    width: min(138px, calc(100% - 44px)) !important;
    max-width: min(138px, calc(100% - 44px)) !important;
  }
  .sidebar .nav-btn {
    font-size: 11.5px !important;
    padding: 7px 8px !important;
    min-height: 30px !important;
  }
}

/* Keep same-page renders from collapsing the active page during quick actions. */
.view.bl-preserve-height {
  overflow-anchor: none !important;
}
body.bl-rendering-nojump * {
  scroll-behavior: auto !important;
}


/* --------------------------------------------------------------------------
   Final mobile Crew visibility + Battles card image audit
   This block intentionally comes last so older dense/mobile/card patches cannot
   hide the Crew roster or crop battle artwork again.
-------------------------------------------------------------------------- */
#crew .crew-mobile-visible-grid,
#crew .crew-all-cards-grid,
#crew .crew-failsafe-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#crew .crew-mobile-visible-grid .entity-card,
#crew .crew-all-cards-grid .entity-card,
#crew .crew-failsafe-grid .entity-card {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#crew .crew-roster-heading {
  display: flex !important;
  visibility: visible !important;
}

#crew .crew-page-clean .crew-morale-panel {
  order: 99;
}

#battles .battle-card > img,
#battles .compact-battle-card > img,
#battles .entity-card > img {
  object-fit: contain !important;
  object-position: center top !important;
  background: #070707 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }

  #crew .crew-mobile-visible-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card,
  #crew .crew-failsafe-grid .entity-card {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .entity-card > img {
    height: 210px !important;
    max-height: 210px !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #070707 !important;
  }

  #battles .battle-grid,
  #battles .compact-battle-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #battles .battle-card,
  #battles .compact-battle-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 11px !important;
    overflow: hidden !important;
  }

  #battles .battle-card > img,
  #battles .compact-battle-card > img,
  #battles .entity-card > img {
    width: 100% !important;
    height: 132px !important;
    max-height: 132px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 9px !important;
    background: #070707 !important;
  }

  #battles .battle-card .entity-card-body,
  #battles .compact-battle-card .entity-card-body {
    gap: 5px !important;
    min-height: 0 !important;
  }

  #battles .battle-card .entity-head,
  #battles .compact-battle-card .entity-head {
    gap: 4px !important;
    align-items: flex-start !important;
  }

  #battles .battle-card .entity-head h4,
  #battles .compact-battle-card .entity-head h4 {
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  #battles .battle-card .badge,
  #battles .compact-battle-card .badge {
    font-size: 7px !important;
    padding: 3px 4px !important;
    border-radius: 999px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #battles .battle-card p,
  #battles .compact-battle-card p {
    font-size: 9px !important;
    line-height: 1.18 !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  #battles .battle-card .meta-grid-inline.two,
  #battles .compact-battle-card .meta-grid-inline.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  #battles .battle-card .meta-grid-inline.two > div,
  #battles .compact-battle-card .meta-grid-inline.two > div,
  #battles .battle-card .requirement-chip,
  #battles .compact-battle-card .requirement-chip {
    padding: 3px 4px !important;
    border-radius: 7px !important;
  }

  #battles .battle-card .meta-grid-inline span,
  #battles .compact-battle-card .meta-grid-inline span,
  #battles .battle-card .requirement-chip span,
  #battles .compact-battle-card .requirement-chip span {
    font-size: 6.5px !important;
    letter-spacing: .04em !important;
  }

  #battles .battle-card .meta-grid-inline strong,
  #battles .compact-battle-card .meta-grid-inline strong,
  #battles .battle-card .requirement-chip strong,
  #battles .compact-battle-card .requirement-chip strong {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  #battles .battle-card .requirements-block,
  #battles .compact-battle-card .requirements-block {
    padding: 4px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  #battles .battle-card .requirements-title,
  #battles .compact-battle-card .requirements-title {
    font-size: 8px !important;
    margin-bottom: 3px !important;
  }

  #battles .battle-card .requirements-grid,
  #battles .compact-battle-card .requirements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  #battles .battle-card .action-help,
  #battles .compact-battle-card .action-help {
    display: none !important;
  }

  #battles .battle-card button.wide,
  #battles .compact-battle-card button.wide {
    min-height: 28px !important;
    padding: 6px 4px !important;
    font-size: 8.5px !important;
    line-height: 1.05 !important;
    border-radius: 8px !important;
    margin-top: auto !important;
  }
}

@media (max-width: 380px) {
  #battles .battle-grid,
  #battles .compact-battle-grid {
    gap: 6px !important;
  }
  #battles .battle-card,
  #battles .compact-battle-card {
    padding: 5px !important;
  }
  #battles .battle-card > img,
  #battles .compact-battle-card > img,
  #battles .entity-card > img {
    height: 118px !important;
    max-height: 118px !important;
  }
}


/* --------------------------------------------------------------------------
   Final mobile Battles two-column parity fix
   - The Rivals page is compact on mobile; Battles should not collapse to a
     single column after older .compact-battle-grid rules fire.
   - Uses a unique class from the renderer plus highly specific fallbacks so
     the two-column mobile layout wins across all mobile/tablet widths.
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
  #battles .mobile-battle-two-grid,
  #battles .grid.battle-grid,
  #battles .grid.cols-4.battle-grid,
  #battles .grid.cols-2.battle-grid,
  #battles .battle-grid.compact-battle-grid,
  #battles .grid.cols-4.battle-grid.compact-battle-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #battles .mobile-battle-two-grid > .battle-card,
  #battles .battle-grid > .battle-card,
  #battles .compact-battle-grid > .compact-battle-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #battles .battle-card,
  #battles .compact-battle-card {
    padding: 6px !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #battles .battle-card > img,
  #battles .compact-battle-card > img,
  #battles .entity-card > img {
    width: 100% !important;
    height: 128px !important;
    max-height: 128px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #070707 !important;
  }
}

@media (max-width: 380px) {
  #battles .mobile-battle-two-grid,
  #battles .grid.battle-grid,
  #battles .battle-grid.compact-battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #battles .battle-card > img,
  #battles .compact-battle-card > img,
  #battles .entity-card > img {
    height: 112px !important;
    max-height: 112px !important;
  }
}


/* --------------------------------------------------------------------------
   Mobile hamburger notification dot final audit
   The dot appears when unread Ledger entries or ready Objective/City Event work
   exists, without opening the drawer. Desktop keeps the normal sidebar badges.
-------------------------------------------------------------------------- */
.mobile-nav-toggle {
  position: relative !important;
}

.mobile-nav-toggle.has-mobile-alert::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e22f45;
  box-shadow: 0 0 0 2px rgba(8,8,10,.96), 0 0 10px rgba(226,47,69,.65);
  pointer-events: none;
}

.mobile-nav-toggle.has-mobile-alert::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(226,47,69,.45);
  animation: blackledger-mobile-alert-pulse 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes blackledger-mobile-alert-pulse {
  0% { transform: scale(.72); opacity: .85; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (min-width: 1025px) {
  .mobile-nav-toggle.has-mobile-alert::before,
  .mobile-nav-toggle.has-mobile-alert::after {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Absolute mobile Crew roster visibility fix
   Comes last so no older compact/mobile patch can hide the hireable Crew cards.
-------------------------------------------------------------------------- */
#crew .crew-roster-absolute-grid,
#crew [data-crew-roster="1"],
#crew .crew-mobile-visible-grid,
#crew .crew-all-cards-grid,
#crew .crew-failsafe-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}

#crew .crew-roster-absolute-grid .entity-card,
#crew [data-crew-roster="1"] .entity-card,
#crew .crew-mobile-visible-grid .entity-card,
#crew .crew-all-cards-grid .entity-card,
#crew .crew-failsafe-grid .entity-card {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
}

#crew .crew-roster-heading {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#crew .crew-roster-absolute-page .crew-morale-panel {
  margin-top: 12px !important;
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }

  #crew .crew-roster-absolute-grid .entity-card,
  #crew [data-crew-roster="1"] .entity-card,
  #crew .crew-mobile-visible-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card,
  #crew .crew-failsafe-grid .entity-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 7px !important;
  }

  #crew .crew-roster-absolute-grid .entity-card > img,
  #crew [data-crew-roster="1"] .entity-card > img,
  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-roster-card > img {
    display: block !important;
    width: 100% !important;
    height: 210px !important;
    max-height: 210px !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #070707 !important;
  }
}


/* --------------------------------------------------------------------------
   Active City Events full-width layout
   Keeps Daily Objectives in their grid, but makes Active City Events read like
   major timed alerts: one full-width event card per row on desktop and mobile.
-------------------------------------------------------------------------- */
#objectives .city-events-full-width-grid,
#objectives .city-events-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  align-items: stretch !important;
}

#objectives .city-events-full-width-grid > .city-event-card,
#objectives .city-events-grid > .city-event-card,
#objectives .city-events-full-width-grid > .notice,
#objectives .city-events-grid > .notice {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

#objectives .city-events-full-width-grid .city-event-card {
  min-height: 0 !important;
}

@media (min-width: 761px) {
  #objectives .city-events-full-width-grid,
  #objectives .city-events-grid {
    gap: 14px !important;
  }

  #objectives .city-events-full-width-grid .city-event-card,
  #objectives .city-events-grid .city-event-card {
    padding: 18px !important;
  }
}

@media (max-width: 760px) {
  #objectives .city-events-full-width-grid,
  #objectives .city-events-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #objectives .city-events-full-width-grid .city-event-card,
  #objectives .city-events-grid .city-event-card {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Crew mobile density + original art fit + dashboard city event order fix
   - Crew roster uses original 16:9 art with no cropping on desktop/mobile.
   - Mobile Crew roster fits two cards across.
   - Dashboard City Event panel spans full width above Daily Focus.
-------------------------------------------------------------------------- */
#crew .crew-roster-absolute-grid,
#crew [data-crew-roster="1"],
#crew .crew-mobile-visible-grid,
#crew .crew-all-cards-grid,
#crew .crew-failsafe-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#crew .crew-roster-absolute-grid .entity-card,
#crew [data-crew-roster="1"] .entity-card,
#crew .crew-mobile-visible-grid .entity-card,
#crew .crew-all-cards-grid .entity-card,
#crew .crew-failsafe-grid .entity-card,
#crew .crew-roster-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 10px !important;
  overflow: hidden !important;
}

#crew .crew-roster-absolute-grid .entity-card > img,
#crew [data-crew-roster="1"] .entity-card > img,
#crew .crew-mobile-visible-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-roster-card > img,
#crew .entity-card > img {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  max-height: 150px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: radial-gradient(circle at 50% 8%, rgba(218,178,92,.14), rgba(0,0,0,.18) 48%, rgba(0,0,0,.82) 100%), #070707 !important;
  box-sizing: border-box !important;
}

#crew .crew-roster-absolute-grid .entity-card-body,
#crew [data-crew-roster="1"] .entity-card-body,
#crew .crew-mobile-visible-grid .entity-card-body,
#crew .crew-all-cards-grid .entity-card-body,
#crew .crew-failsafe-grid .entity-card-body {
  min-height: 0 !important;
  padding: 10px !important;
  gap: 8px !important;
}

@media (max-width: 1180px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
  }

  #crew .crew-roster-absolute-grid .entity-card,
  #crew [data-crew-roster="1"] .entity-card,
  #crew .crew-mobile-visible-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card,
  #crew .crew-failsafe-grid .entity-card,
  #crew .crew-roster-card {
    padding: 5px !important;
    border-radius: 13px !important;
    min-width: 0 !important;
  }

  #crew .crew-roster-absolute-grid .entity-card > img,
  #crew [data-crew-roster="1"] .entity-card > img,
  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-roster-card > img,
  #crew .entity-card > img {
    height: 104px !important;
    max-height: 104px !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  #crew .crew-roster-absolute-grid .entity-card-body,
  #crew [data-crew-roster="1"] .entity-card-body,
  #crew .crew-mobile-visible-grid .entity-card-body,
  #crew .crew-all-cards-grid .entity-card-body,
  #crew .crew-failsafe-grid .entity-card-body {
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 11px !important;
  }

  #crew .crew-roster-absolute-grid .entity-head,
  #crew [data-crew-roster="1"] .entity-head,
  #crew .crew-mobile-visible-grid .entity-head,
  #crew .crew-all-cards-grid .entity-head,
  #crew .crew-failsafe-grid .entity-head {
    gap: 4px !important;
    align-items: flex-start !important;
  }

  #crew .crew-roster-absolute-grid .entity-head h4,
  #crew [data-crew-roster="1"] .entity-head h4,
  #crew .crew-mobile-visible-grid .entity-head h4,
  #crew .crew-all-cards-grid .entity-head h4,
  #crew .crew-failsafe-grid .entity-head h4 {
    font-size: 10.5px !important;
    line-height: 1.05 !important;
  }

  #crew .crew-roster-absolute-grid .badge,
  #crew [data-crew-roster="1"] .badge,
  #crew .crew-mobile-visible-grid .badge,
  #crew .crew-all-cards-grid .badge,
  #crew .crew-failsafe-grid .badge {
    font-size: 7.5px !important;
    padding: 3px 5px !important;
  }

  #crew .crew-roster-absolute-grid .entity-card-body p,
  #crew [data-crew-roster="1"] .entity-card-body p,
  #crew .crew-mobile-visible-grid .entity-card-body p,
  #crew .crew-all-cards-grid .entity-card-body p,
  #crew .crew-failsafe-grid .entity-card-body p {
    font-size: 8.6px !important;
    line-height: 1.22 !important;
    margin: 0 !important;
  }

  #crew .crew-roster-absolute-grid .requirements-grid,
  #crew [data-crew-roster="1"] .requirements-grid,
  #crew .crew-mobile-visible-grid .requirements-grid,
  #crew .crew-all-cards-grid .requirements-grid,
  #crew .crew-failsafe-grid .requirements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #crew .crew-roster-absolute-grid .requirement-chip,
  #crew [data-crew-roster="1"] .requirement-chip,
  #crew .crew-mobile-visible-grid .requirement-chip,
  #crew .crew-all-cards-grid .requirement-chip,
  #crew .crew-failsafe-grid .requirement-chip {
    padding: 4px !important;
    border-radius: 8px !important;
    min-width: 0 !important;
  }

  #crew .crew-roster-absolute-grid .requirement-chip span,
  #crew [data-crew-roster="1"] .requirement-chip span,
  #crew .crew-mobile-visible-grid .requirement-chip span,
  #crew .crew-all-cards-grid .requirement-chip span,
  #crew .crew-failsafe-grid .requirement-chip span {
    font-size: 6.8px !important;
    letter-spacing: .05em !important;
    line-height: 1 !important;
  }

  #crew .crew-roster-absolute-grid .requirement-chip strong,
  #crew [data-crew-roster="1"] .requirement-chip strong,
  #crew .crew-mobile-visible-grid .requirement-chip strong,
  #crew .crew-all-cards-grid .requirement-chip strong,
  #crew .crew-failsafe-grid .requirement-chip strong {
    font-size: 8px !important;
    line-height: 1.08 !important;
    word-break: break-word !important;
  }

  #crew .crew-roster-absolute-grid button.primary.wide,
  #crew [data-crew-roster="1"] button.primary.wide,
  #crew .crew-mobile-visible-grid button.primary.wide,
  #crew .crew-all-cards-grid button.primary.wide,
  #crew .crew-failsafe-grid button.primary.wide {
    font-size: 8.8px !important;
    padding: 6px 5px !important;
    min-height: 27px !important;
    border-radius: 9px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 380px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid {
    gap: 6px !important;
  }
  #crew .crew-roster-absolute-grid .entity-card > img,
  #crew [data-crew-roster="1"] .entity-card > img,
  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-roster-card > img,
  #crew .entity-card > img {
    height: 94px !important;
    max-height: 94px !important;
  }
}

#dashboard .depth-dashboard-panels {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  gap: 12px !important;
}

#dashboard .depth-dashboard-panels > .dashboard-city-event-panel,
#dashboard .depth-dashboard-panels > .dashboard-daily-focus-panel,
#dashboard .depth-dashboard-panels > .card,
#dashboard .depth-dashboard-panels > .section-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

#dashboard .depth-dashboard-panels > .dashboard-city-event-panel { order: 1 !important; }
#dashboard .depth-dashboard-panels > .dashboard-daily-focus-panel { order: 2 !important; }

#dashboard .dashboard-city-event-panel .city-event-card,
#dashboard .dashboard-city-event-panel .notice {
  width: 100% !important;
  max-width: none !important;
}


/* --------------------------------------------------------------------------
   Final Crew original-art no-crop override
   The Crew roster must use the original 16:9 crew-*-v2 artwork, scaled down
   proportionally inside the card image bay. No portrait/audit crop treatment.
-------------------------------------------------------------------------- */
#crew .crew-roster-absolute-grid .entity-card > img,
#crew [data-crew-roster="1"] .entity-card > img,
#crew .crew-mobile-visible-grid .entity-card > img,
#crew .crew-all-cards-grid .entity-card > img,
#crew .crew-failsafe-grid .entity-card > img,
#crew .crew-roster-card > img,
#crew .crew-original-art,
#crew .entity-card > img[src*="crew-"] {
  display: block !important;
  width: 100% !important;
  height: 176px !important;
  max-height: 176px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: radial-gradient(circle at 50% 0%, rgba(218,178,92,.10), rgba(0,0,0,.25) 52%, rgba(0,0,0,.45)), #070707 !important;
  box-sizing: border-box !important;
}

#crew .crew-roster-absolute-grid .entity-card,
#crew [data-crew-roster="1"] .entity-card,
#crew .crew-mobile-visible-grid .entity-card,
#crew .crew-all-cards-grid .entity-card,
#crew .crew-failsafe-grid .entity-card,
#crew .crew-roster-card {
  overflow: hidden !important;
}

@media (max-width: 1280px) {
  #crew .crew-roster-absolute-grid .entity-card > img,
  #crew [data-crew-roster="1"] .entity-card > img,
  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-roster-card > img,
  #crew .crew-original-art,
  #crew .entity-card > img[src*="crew-"] {
    height: 160px !important;
    max-height: 160px !important;
  }
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid .entity-card > img,
  #crew [data-crew-roster="1"] .entity-card > img,
  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-roster-card > img,
  #crew .crew-original-art,
  #crew .entity-card > img[src*="crew-"] {
    height: 104px !important;
    max-height: 104px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 380px) {
  #crew .crew-roster-absolute-grid .entity-card > img,
  #crew [data-crew-roster="1"] .entity-card > img,
  #crew .crew-mobile-visible-grid .entity-card > img,
  #crew .crew-all-cards-grid .entity-card > img,
  #crew .crew-failsafe-grid .entity-card > img,
  #crew .crew-roster-card > img,
  #crew .crew-original-art,
  #crew .entity-card > img[src*="crew-"] {
    height: 94px !important;
    max-height: 94px !important;
  }
}


/* --------------------------------------------------------------------------
   Final uploaded original Crew art enforcement
   Uses the actual portrait/original files provided by the user. No cropped
   card variants, no cover-fit. Images are scaled down proportionally and
   top-justified so heads/faces remain visible on desktop and mobile.
-------------------------------------------------------------------------- */
#crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
#crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
#crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
#crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
#crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
#crew .crew-roster-card > img[src*="crew-"],
#crew .entity-card > img[src*="crew-"] {
  display: block !important;
  width: 100% !important;
  height: 178px !important;
  max-height: 178px !important;
  object-fit: contain !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  background: radial-gradient(circle at 50% 0%, rgba(218,178,92,.10), rgba(0,0,0,.22) 56%, rgba(0,0,0,.58)), #070707 !important;
}

@media (max-width: 1180px) {
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 160px !important;
    max-height: 160px !important;
  }
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 118px !important;
    max-height: 118px !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}

@media (max-width: 380px) {
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 108px !important;
    max-height: 108px !important;
  }
}


/* --------------------------------------------------------------------------
   Final Crew art width-fit override
   Use the original uploaded art, let it fill card width, anchor from the top,
   and crop from the bottom if needed so heads never get chopped off.
-------------------------------------------------------------------------- */
#crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
#crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
#crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
#crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
#crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
#crew .crew-roster-card > img[src*="crew-"],
#crew .entity-card > img[src*="crew-"] {
  width: 100% !important;
  height: 216px !important;
  max-height: 216px !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #070707 !important;
  border-radius: 12px !important;
}

@media (max-width: 1180px) {
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 196px !important;
    max-height: 196px !important;
  }
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 148px !important;
    max-height: 148px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 380px) {
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 136px !important;
    max-height: 136px !important;
  }
}


/* --------------------------------------------------------------------------
   Final Crew card fill + desktop grid balance override
   - Crew art should fill the card image bay with no dead side gutters.
   - Crop is allowed from the sides/bottom only; keep the top visible.
   - Desktop roster uses a balanced 3-column layout (2 rows for 6 cards).
   - Mobile keeps the 2-column layout.
-------------------------------------------------------------------------- */
#crew .crew-roster-absolute-grid,
#crew [data-crew-roster="1"],
#crew .crew-mobile-visible-grid,
#crew .crew-all-cards-grid,
#crew .crew-failsafe-grid,
#crew .crew-mobile-density-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#crew .crew-roster-card,
#crew .crew-roster-absolute-grid .entity-card,
#crew [data-crew-roster="1"] .entity-card,
#crew .crew-mobile-visible-grid .entity-card,
#crew .crew-all-cards-grid .entity-card,
#crew .crew-failsafe-grid .entity-card,
#crew .crew-mobile-density-card {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#crew .crew-roster-card .entity-card-body,
#crew .crew-roster-absolute-grid .entity-card .entity-card-body,
#crew [data-crew-roster="1"] .entity-card .entity-card-body,
#crew .crew-mobile-visible-grid .entity-card .entity-card-body,
#crew .crew-all-cards-grid .entity-card .entity-card-body,
#crew .crew-failsafe-grid .entity-card .entity-card-body,
#crew .crew-mobile-density-card .entity-card-body {
  padding: 10px 11px 12px !important;
}

#crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
#crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
#crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
#crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
#crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
#crew .crew-roster-card > img[src*="crew-"],
#crew .entity-card > img[src*="crew-"] {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 246px !important;
  max-height: 246px !important;
  margin: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #070707 !important;
}

@media (max-width: 1180px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid,
  #crew .crew-mobile-density-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 220px !important;
    max-height: 220px !important;
  }
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid,
  #crew .crew-mobile-density-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .crew-roster-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    height: 154px !important;
    max-height: 154px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  #crew .crew-roster-card .entity-card-body,
  #crew .crew-roster-absolute-grid .entity-card .entity-card-body,
  #crew [data-crew-roster="1"] .entity-card .entity-card-body,
  #crew .crew-mobile-visible-grid .entity-card .entity-card-body,
  #crew .crew-all-cards-grid .entity-card .entity-card-body,
  #crew .crew-failsafe-grid .entity-card .entity-card-body,
  #crew .crew-mobile-density-card .entity-card-body {
    padding: 8px 9px 10px !important;
  }
}


/* --------------------------------------------------------------------------
   Final Crew desktop six-across override
   User requested all 6 Crew/Adviser cards in one horizontal row on desktop.
   Mobile remains 2-across. Tablet/medium screens fall back to 3-across.
-------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid,
  #crew .crew-mobile-density-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #crew .crew-roster-card,
  #crew .crew-roster-absolute-grid .entity-card,
  #crew [data-crew-roster="1"] .entity-card,
  #crew .crew-mobile-visible-grid .entity-card,
  #crew .crew-all-cards-grid .entity-card,
  #crew .crew-failsafe-grid .entity-card,
  #crew .crew-mobile-density-card {
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  #crew .crew-roster-card .entity-card-body,
  #crew .crew-roster-absolute-grid .entity-card .entity-card-body,
  #crew [data-crew-roster="1"] .entity-card .entity-card-body,
  #crew .crew-mobile-visible-grid .entity-card .entity-card-body,
  #crew .crew-all-cards-grid .entity-card .entity-card-body,
  #crew .crew-failsafe-grid .entity-card .entity-card-body,
  #crew .crew-mobile-density-card .entity-card-body {
    padding: 8px 8px 10px !important;
    gap: 7px !important;
  }

  #crew .crew-roster-card > img[src*="crew-"],
  #crew .crew-roster-absolute-grid .entity-card > img[src*="crew-"],
  #crew [data-crew-roster="1"] .entity-card > img[src*="crew-"],
  #crew .crew-mobile-visible-grid .entity-card > img[src*="crew-"],
  #crew .crew-all-cards-grid .entity-card > img[src*="crew-"],
  #crew .crew-failsafe-grid .entity-card > img[src*="crew-"],
  #crew .entity-card > img[src*="crew-"] {
    width: 100% !important;
    height: 154px !important;
    max-height: 154px !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 12px 12px 0 0 !important;
  }

  #crew .crew-roster-card .entity-head h4,
  #crew .crew-all-cards-grid .entity-head h4,
  #crew .crew-failsafe-grid .entity-head h4,
  #crew [data-crew-roster="1"] .entity-head h4 {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  #crew .crew-roster-card .entity-card-body p,
  #crew .crew-all-cards-grid .entity-card-body p,
  #crew .crew-failsafe-grid .entity-card-body p,
  #crew [data-crew-roster="1"] .entity-card-body p {
    font-size: 11px !important;
    line-height: 1.28 !important;
  }

  #crew .crew-roster-card .requirements-grid,
  #crew .crew-all-cards-grid .requirements-grid,
  #crew .crew-failsafe-grid .requirements-grid,
  #crew [data-crew-roster="1"] .requirements-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  #crew .crew-roster-card .requirement-chip,
  #crew .crew-all-cards-grid .requirement-chip,
  #crew .crew-failsafe-grid .requirement-chip,
  #crew [data-crew-roster="1"] .requirement-chip {
    padding: 5px 6px !important;
    min-height: 0 !important;
  }

  #crew .crew-roster-card .requirement-chip span,
  #crew .crew-all-cards-grid .requirement-chip span,
  #crew .crew-failsafe-grid .requirement-chip span,
  #crew [data-crew-roster="1"] .requirement-chip span {
    font-size: 8.5px !important;
  }

  #crew .crew-roster-card .requirement-chip strong,
  #crew .crew-all-cards-grid .requirement-chip strong,
  #crew .crew-failsafe-grid .requirement-chip strong,
  #crew [data-crew-roster="1"] .requirement-chip strong {
    font-size: 10px !important;
  }

  #crew .crew-roster-card button.primary.wide,
  #crew .crew-all-cards-grid button.primary.wide,
  #crew .crew-failsafe-grid button.primary.wide,
  #crew [data-crew-roster="1"] button.primary.wide {
    padding: 8px 8px !important;
    font-size: 11px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid,
  #crew .crew-mobile-density-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #crew .crew-roster-absolute-grid,
  #crew [data-crew-roster="1"],
  #crew .crew-mobile-visible-grid,
  #crew .crew-all-cards-grid,
  #crew .crew-failsafe-grid,
  #crew .crew-mobile-density-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* --------------------------------------------------------------------------
   Supabase email confirmation screen
-------------------------------------------------------------------------- */
.auth-confirmation-layout .auth-confirmation-card {
  justify-content: center;
  gap: 14px;
}

.auth-confirmation-card .meta-grid-inline.one {
  grid-template-columns: 1fr !important;
}

.auth-confirmation-card .tip-list {
  margin-top: 6px;
}


/* --------------------------------------------------------------------------
   Auth / family setup page cleanup
   - No Dashboard/topbar controls before a real family file exists.
   - Cleaner login hero card.
   - Compact family setup form.
-------------------------------------------------------------------------- */
.pregame-shell .topbar {
  display: none !important;
}

.pregame-shell .nav,
.pregame-shell .sidebar-footer {
  display: none !important;
}

.pregame-shell .sidebar {
  align-content: start !important;
}

.pregame-shell .main {
  padding-top: 28px !important;
}

.auth-clean-layout,
.family-setup-layout {
  align-items: stretch !important;
  gap: 16px !important;
}

.auth-clean-layout .auth-media,
.family-setup-layout .auth-media {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.auth-clean-layout .auth-media > img,
.family-setup-layout .auth-media > img {
  width: 100% !important;
  height: 255px !important;
  max-height: 255px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 14px 14px 0 0 !important;
  margin: 0 !important;
}

.auth-login-media .auth-media-copy,
.auth-clean-layout .auth-media-copy,
.family-setup-layout .auth-media-copy {
  padding: 18px 18px 20px !important;
}

.auth-clean-layout .auth-media-copy .brand-logo,
.family-setup-layout .auth-media-copy .brand-logo,
.auth-clean-layout .auth-thumb-row,
.family-setup-layout .auth-thumb-row,
.auth-clean-layout .auth-notice:not(.auth-confirmation-layout .auth-notice) {
  display: none !important;
}

.auth-clean-layout .auth-media-copy h2,
.family-setup-layout .auth-media-copy h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.auth-clean-layout .auth-media-copy p,
.family-setup-layout .auth-media-copy p {
  margin-bottom: 0 !important;
}

.auth-clean-layout .auth-forms-wrap,
.family-setup-layout .auth-forms-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.auth-clean-layout .auth-form {
  flex: 1 1 0 !important;
}

.family-setup-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 360px) !important;
}

.family-setup-layout .auth-family-media > img {
  height: 185px !important;
  max-height: 185px !important;
}

.family-setup-layout .auth-media-copy {
  padding: 14px 16px 16px !important;
}

.family-setup-layout .auth-media-copy .eyebrow {
  display: none !important;
}

.compact-family-form {
  min-height: 0 !important;
  align-self: stretch !important;
  padding: 14px !important;
  gap: 8px !important;
  justify-content: center !important;
}

.compact-family-form h3 {
  margin-bottom: 2px !important;
  font-size: 16px !important;
}

.compact-family-form label {
  gap: 4px !important;
  margin: 0 !important;
  font-size: 11px !important;
}

.compact-family-form input {
  height: 38px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

.compact-family-actions {
  margin-top: 4px !important;
  gap: 8px !important;
}

.compact-family-actions button {
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
}

@media (max-width: 900px) {
  .pregame-shell .main {
    padding-top: 16px !important;
  }

  .auth-clean-layout,
  .family-setup-layout {
    grid-template-columns: 1fr !important;
  }

  .auth-clean-layout .auth-media > img,
  .family-setup-layout .auth-media > img {
    height: 210px !important;
    max-height: 210px !important;
  }
}

@media (max-width: 640px) {
  .pregame-shell .sidebar {
    display: none !important;
  }

  .auth-clean-layout .auth-media > img,
  .family-setup-layout .auth-media > img {
    height: 180px !important;
    max-height: 180px !important;
  }
}


/* --------------------------------------------------------------------------
   Auth card fit correction
   - Login/Create Account cards use natural height instead of being squeezed.
   - Main Enter the City card stretches to match the combined form column.
   - Pregame page can scroll if the browser height is short.
-------------------------------------------------------------------------- */
.pregame-shell {
  min-height: 100vh !important;
}

.pregame-shell .main {
  padding-top: 22px !important;
  padding-bottom: 34px !important;
  overflow-y: auto !important;
}

.pregame-shell .welcome {
  min-height: auto !important;
  display: grid !important;
  place-items: start center !important;
  padding: 0 !important;
}

.auth-clean-layout {
  width: min(1280px, 100%) !important;
  grid-template-columns: minmax(560px, 1.12fr) minmax(420px, .88fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

.auth-clean-layout .auth-forms-wrap {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 16px !important;
  height: auto !important;
  min-height: 0 !important;
}

.auth-clean-layout .auth-form {
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 22px 18px !important;
  gap: 14px !important;
  align-content: start !important;
}

.auth-clean-layout #loginForm {
  min-height: 255px !important;
}

.auth-clean-layout #registerForm {
  min-height: 325px !important;
}

.auth-clean-layout .auth-form h3 {
  line-height: 1.05 !important;
  margin-bottom: 2px !important;
}

.auth-clean-layout .auth-form label {
  gap: 8px !important;
}

.auth-clean-layout .auth-form input {
  min-height: 46px !important;
  height: 46px !important;
  padding: 10px 13px !important;
  font-size: 15px !important;
}

.auth-clean-layout .auth-form button.primary.wide {
  min-height: 44px !important;
  margin-top: 4px !important;
}

.auth-clean-layout .auth-login-media,
.auth-clean-layout .auth-media {
  height: 100% !important;
  min-height: 596px !important;
}

.auth-clean-layout .auth-login-media > img,
.auth-clean-layout .auth-media > img {
  flex: 1 1 auto !important;
  min-height: 365px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.auth-clean-layout .auth-login-media .auth-media-copy {
  flex: 0 0 auto !important;
  min-height: 135px !important;
  padding: 24px 20px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.auth-clean-layout .auth-media-copy h2 {
  font-size: clamp(38px, 4.2vw, 58px) !important;
  margin-bottom: 12px !important;
}

.auth-clean-layout .auth-media-copy p {
  font-size: 16px !important;
  line-height: 1.45 !important;
  max-width: 92% !important;
}

@media (max-width: 1180px) {
  .auth-clean-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .auth-clean-layout .auth-login-media,
  .auth-clean-layout .auth-media {
    min-height: auto !important;
  }

  .auth-clean-layout .auth-login-media > img,
  .auth-clean-layout .auth-media > img {
    height: 260px !important;
    min-height: 260px !important;
  }

  .auth-clean-layout #loginForm,
  .auth-clean-layout #registerForm {
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  .auth-clean-layout .auth-form {
    padding: 18px 14px !important;
  }

  .auth-clean-layout .auth-login-media > img,
  .auth-clean-layout .auth-media > img {
    height: 205px !important;
    min-height: 205px !important;
  }

  .auth-clean-layout .auth-media-copy h2 {
    font-size: 34px !important;
  }

  .auth-clean-layout .auth-media-copy p {
    max-width: 100% !important;
    font-size: 14px !important;
  }
}


/* --------------------------------------------------------------------------
   Family setup consistency polish
   - Make Start Your Family cards visually match the larger Enter the City page.
   - Use larger, more balanced card heights on desktop.
-------------------------------------------------------------------------- */
.family-setup-layout {
  width: min(1280px, 100%) !important;
  grid-template-columns: minmax(560px, 1.12fr) minmax(420px, .88fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

.family-setup-layout .auth-family-media,
.family-setup-layout .auth-media {
  height: 100% !important;
  min-height: 596px !important;
}

.family-setup-layout .auth-family-media > img,
.family-setup-layout .auth-media > img {
  flex: 1 1 auto !important;
  min-height: 365px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.family-setup-layout .auth-media-copy {
  flex: 0 0 auto !important;
  min-height: 135px !important;
  padding: 24px 20px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.family-setup-layout .auth-media-copy h2 {
  font-size: clamp(38px, 4.2vw, 58px) !important;
  margin-bottom: 12px !important;
}

.family-setup-layout .auth-media-copy p {
  font-size: 16px !important;
  line-height: 1.45 !important;
  max-width: 92% !important;
}

.family-setup-layout .compact-family-form {
  min-height: 596px !important;
  align-self: stretch !important;
  padding: 24px 20px !important;
  gap: 12px !important;
  justify-content: center !important;
}

.family-setup-layout .compact-family-form h3 {
  font-size: 26px !important;
  margin-bottom: 6px !important;
  line-height: 1.08 !important;
}

.family-setup-layout .compact-family-form label {
  gap: 6px !important;
  font-size: 13px !important;
}

.family-setup-layout .compact-family-form input {
  height: 46px !important;
  min-height: 46px !important;
  padding: 10px 13px !important;
  font-size: 15px !important;
}

.family-setup-layout .compact-family-actions {
  margin-top: 8px !important;
  gap: 10px !important;
}

.family-setup-layout .compact-family-actions button {
  min-height: 40px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}

@media (max-width: 1180px) {
  .family-setup-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .family-setup-layout .auth-family-media,
  .family-setup-layout .auth-media,
  .family-setup-layout .compact-family-form {
    min-height: 0 !important;
  }

  .family-setup-layout .auth-family-media > img,
  .family-setup-layout .auth-media > img {
    height: 260px !important;
    min-height: 260px !important;
  }
}

@media (max-width: 640px) {
  .family-setup-layout .auth-family-media > img,
  .family-setup-layout .auth-media > img {
    height: 205px !important;
    min-height: 205px !important;
  }

  .family-setup-layout .auth-media-copy h2 {
    font-size: 34px !important;
  }

  .family-setup-layout .auth-media-copy p {
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .family-setup-layout .compact-family-form {
    padding: 18px 14px !important;
  }
}


/* --------------------------------------------------------------------------
   Family multiplayer UI + select option readability
-------------------------------------------------------------------------- */
.family-setup-forms {
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
}

.family-join-form {
  min-height: 0 !important;
}

.family-cloud-invite-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: stretch;
}

.family-invite-code {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 10px 12px;
}

.family-invite-code span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--faint);
  font-weight: 800;
}

.family-invite-code strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--gold-soft);
}

select.inline-input,
#familyAddRole {
  color: #f6e6c4 !important;
}

select.inline-input option,
#familyAddRole option,
.auth-form select option,
.family-add-grid select option {
  color: #000 !important;
  background: #fff !important;
}

@media (max-width: 760px) {
  .family-cloud-invite-row {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Family RLS/sync visual stability
-------------------------------------------------------------------------- */
#familyAddRole,
.family-add-grid select {
  min-width: 110px !important;
  color: #f6e6c4 !important;
}

#familyAddRole option,
.family-add-grid select option,
select.inline-input option {
  color: #000 !important;
  background: #fff !important;
}

.family-add-grid {
  align-items: center !important;
}


/* --------------------------------------------------------------------------
   Family invite join clarity
-------------------------------------------------------------------------- */
.family-page-join-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.family-page-join-grid input {
  min-height: 44px;
}

select.inline-input option,
#familyAddRole option,
.family-add-grid select option {
  color: #000 !important;
  background: #fff !important;
}

@media (max-width: 760px) {
  .family-page-join-grid {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Family page compact management + rank permission cards
-------------------------------------------------------------------------- */
.family-management-card {
  padding: 14px 16px !important;
}

.family-management-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.family-management-panel {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.025);
}

.family-management-panel h4 {
  margin: 0 0 5px;
  font-family: Cinzel, serif;
  font-size: 18px;
}

.family-management-panel p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

.family-cloud-invite-row.compact,
.family-page-join-grid.compact,
.family-add-grid.compact {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.family-page-join-grid.compact {
  grid-template-columns: minmax(180px, 1fr) auto;
}

.family-add-grid.compact {
  grid-template-columns: minmax(180px, 1fr) 130px auto;
}

.family-management-panel .inline-input,
.family-management-panel button {
  min-height: 38px !important;
}

.family-management-panel button {
  padding: 8px 12px !important;
  font-size: 12px !important;
}

.family-management-panel .family-invite-code {
  padding: 8px 10px !important;
}

.family-management-panel .family-invite-code strong {
  font-size: 16px !important;
}

.permission-grid {
  gap: 10px !important;
}

.permission-grid .permission-card {
  padding: 10px !important;
  min-height: 0 !important;
  gap: 8px !important;
}

.permission-grid .permission-card .entity-head {
  gap: 8px !important;
}

.permission-grid .permission-card .entity-head h4 {
  font-size: 17px !important;
  line-height: 1.05 !important;
}

.permission-grid .permission-card p {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.permission-grid .permission-row {
  gap: 5px !important;
}

.permission-grid .permission-row span {
  font-size: 10px !important;
  padding: 4px 6px !important;
  line-height: 1.1 !important;
}

@media (min-width: 1180px) {
  .permission-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .family-cloud-invite-row.compact,
  .family-page-join-grid.compact,
  .family-add-grid.compact {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Family usability polish
   - No flickering while selecting/copying family management fields.
   - Invite code copy button.
   - Desktop management panels in one compact row.
   - Rank dropdown on member cards.
-------------------------------------------------------------------------- */
.family-management-card,
.family-management-card * {
  animation: none !important;
}

.family-invite-code strong,
#familyInviteCodeText {
  user-select: text !important;
  cursor: text !important;
}

.family-management-grid {
  gap: 10px !important;
}

@media (min-width: 1180px) {
  .family-management-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .family-management-panel {
    min-width: 0 !important;
    padding: 10px !important;
  }

  .family-management-panel h4 {
    font-size: 16px !important;
  }

  .family-management-panel p {
    font-size: 12px !important;
    min-height: 34px !important;
  }

  .family-cloud-invite-row.compact {
    grid-template-columns: minmax(96px, 1fr) auto auto auto !important;
  }

  .family-page-join-grid.compact {
    grid-template-columns: minmax(120px, 1fr) auto !important;
  }

  .family-add-grid.compact {
    grid-template-columns: minmax(120px, 1fr) 108px auto !important;
  }

  .family-management-panel .inline-input,
  .family-management-panel button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  .family-management-panel .family-invite-code {
    padding: 6px 8px !important;
    min-width: 0 !important;
  }

  .family-management-panel .family-invite-code strong {
    font-size: 14px !important;
    overflow-wrap: anywhere !important;
  }
}

.family-member-controls {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: auto;
}

.family-rank-select-label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}

.family-rank-select {
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 9px !important;
  font-size: 12px !important;
}

.family-rank-select option,
#familyAddRole option,
.family-add-grid select option,
select.inline-input option {
  color: #000 !important;
  background: #fff !important;
}

.family-member-controls .danger {
  min-height: 34px !important;
  padding: 6px 10px !important;
}


/* --------------------------------------------------------------------------
   PvP Safe Mode
-------------------------------------------------------------------------- */
.pvp-safe-rivals,
.pvp-safe-battles,
.pvp-safe-territory {
  border-color: rgba(55, 212, 132, .24) !important;
}

.pvp-safe-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.pvp-safe-actions button,
.pvp-safe-toolbar button {
  min-height: 34px !important;
  padding: 7px 9px !important;
  font-size: 11px !important;
}

.pvp-safe-two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

@media (max-width: 900px) {
  .pvp-safe-two {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .pvp-safe-actions {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   PvP Safe Phase 6: Inbox + War Room
-------------------------------------------------------------------------- */
.pvp-safe6-dashboard,
.pvp-safe6-war-room {
  border-color: rgba(212, 175, 55, .24) !important;
}

.pvp-safe6-two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

.pvp-safe6-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-bottom: 12px;
}

.pvp-safe6-toolbar button,
.pvp-safe6-recovery button {
  min-height: 34px !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
}

.pvp-safe6-chip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.pvp-safe6-chip {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.028);
  border-radius: 12px;
  padding: 9px 10px;
  min-width: 0;
}

.pvp-safe6-chip span,
.pvp-safe6-chip em {
  display: block;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pvp-safe6-chip strong {
  display: block;
  margin: 4px 0;
  color: var(--gold-soft);
  font-size: 18px;
  font-family: Cinzel, serif;
}

.pvp-safe6-recovery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.pvp-safe6-recovery button span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .pvp-safe6-two,
  .pvp-safe6-chip-grid,
  .pvp-safe6-recovery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .pvp-safe6-two,
  .pvp-safe6-chip-grid,
  .pvp-safe6-recovery {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 9 polish: desktop front cards + PvP action/status cards
-------------------------------------------------------------------------- */
@media (min-width: 980px) {
  #fronts .grid.cols-2,
  #fronts .front-business-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    justify-content: stretch !important;
    width: 100% !important;
  }
  #fronts .grid.cols-2 > .entity-card,
  #fronts .front-business-grid > .entity-card {
    width: 100% !important;
    max-width: none !important;
  }
}

.pvp-phase9-panel .pvp-token-summary,
.pvp-phase9-panel .pvp-load-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.pvp-phase9-panel .pvp-token-summary > div,
.pvp-phase9-panel .pvp-load-summary > div {
  border: 1px solid rgba(212, 175, 55, .18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}
.pvp-phase9-panel .pvp-token-summary span,
.pvp-phase9-panel .pvp-load-summary span {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .72;
}
.pvp-phase9-panel .pvp-token-summary strong,
.pvp-phase9-panel .pvp-load-summary strong {
  display: block;
  margin-top: 2px;
}
.pvp-phase9-requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.pvp-phase9-req {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: .76rem;
  background: rgba(255,255,255,.04);
}
.pvp-phase9-req.ok { border-color: rgba(55, 190, 120, .42); }
.pvp-phase9-req.bad { border-color: rgba(255, 94, 94, .48); }
.pvp-phase9-req strong { display: block; font-size: .66rem; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }
.pvp-phase9-req span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvp-action-progress {
  margin-top: 10px;
  border: 1px solid rgba(212, 175, 55, .20);
  border-radius: 13px;
  padding: 8px 10px;
  background: rgba(212, 175, 55, .06);
}
.pvp-action-progress .progress-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .78rem;
}
.pvp-action-progress .progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  margin-top: 6px;
}
.pvp-action-progress .progress-track span {
  display: block;
  height: 100%;
  width: var(--pvp-progress, 0%);
  background: currentColor;
  opacity: .9;
}
.pvp-phase9-disabled-note {
  margin-top: 8px;
  font-size: .78rem;
  opacity: .78;
}
.pvp-phase9-battle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 760px) {
  .pvp-phase9-battle-grid { grid-template-columns: 1fr; }
  .pvp-phase9-requirements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Phase 10 multiplayer + front width polish
-------------------------------------------------------------------------- */
@media (min-width: 980px) {
  #fronts .page-stack > .grid.cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  #fronts .page-stack > .grid.cols-2 > .card,
  #fronts .page-stack > .grid.cols-2 > .entity-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}
@media (min-width: 1500px) {
  #fronts .page-stack > .grid.cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.pvp10-panel .pvp10-token-summary,
.pvp10-panel .pvp10-load-summary,
.pvp10-token-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.pvp10-panel .pvp10-token-summary > div,
.pvp10-token-summary > div {
  border: 1px solid rgba(212, 175, 55, .20);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}
.pvp10-panel .pvp10-token-summary span,
.pvp10-token-summary span,
.pvp10-target-meta span {
  display: block;
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .72;
}
.pvp10-panel .pvp10-token-summary strong,
.pvp10-token-summary strong {
  display: block;
  margin-top: 2px;
}
.pvp10-grid.player-family-grid {
  align-items: stretch;
}
.pvp10-family-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pvp10-requirements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
  margin: 8px 0;
}
.pvp10-chip {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 7px 9px;
  background: rgba(255,255,255,.04);
  min-width: 0;
}
.pvp10-chip.ok { border-color: rgba(55, 190, 120, .45); }
.pvp10-chip.bad { border-color: rgba(255, 94, 94, .50); }
.pvp10-chip strong {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
}
.pvp10-chip span {
  display: block;
  font-size: .76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp10-scout-empty,
.pvp10-scout-report {
  border: 1px solid rgba(212, 175, 55, .18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(212, 175, 55, .055);
  margin: 4px 0 8px;
}
.pvp10-scout-empty strong,
.pvp10-scout-empty span {
  display: block;
}
.pvp10-scout-empty span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .82rem;
}
.pvp10-scout-report .section-head.mini {
  margin-bottom: 6px;
}
.pvp10-scout-report .section-head.mini h4 {
  margin: 0;
}
.pvp10-scout-report p {
  margin: 6px 0 8px;
}
.pvp10-odds-grid,
.pvp10-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.pvp10-odds-grid > div,
.pvp10-breakdown > span {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 7px 8px;
  background: rgba(0,0,0,.12);
}
.pvp10-odds-grid span {
  display: block;
  font-size: .68rem;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.pvp10-odds-grid strong {
  display: block;
}
.pvp10-breakdown {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  margin-top: 7px;
  font-size: .76rem;
}
.pvp10-actions {
  margin-top: 2px;
}
.pvp10-note {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--muted);
}
.pvp10-progress {
  border: 1px solid rgba(212, 175, 55, .22);
  border-radius: 13px;
  padding: 8px 10px;
  background: rgba(212, 175, 55, .06);
  margin-top: 8px;
}
.pvp10-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .78rem;
}
.pvp10-progress > div:first-child span {
  color: var(--muted);
  text-align: right;
}
.pvp10-progress-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  margin-top: 6px;
}
.pvp10-progress-track i {
  display: block;
  height: 100%;
  width: var(--pvp10-progress, 0%);
  background: currentColor;
  opacity: .9;
}
.pvp10-how-battles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.pvp10-how-battles > div {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}
.pvp10-how-battles strong,
.pvp10-how-battles span {
  display: block;
}
.pvp10-how-battles span {
  color: var(--muted);
  font-size: .82rem;
  margin-top: 3px;
}
.pvp10-battle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
.pvp10-battle-row,
.pvp10-effect-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(120px, .5fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.035);
}
.pvp10-effect-row {
  grid-template-columns: minmax(0, 1fr) minmax(105px, .35fr);
}
.pvp10-battle-row span,
.pvp10-effect-row span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}
.pvp10-battle-row.won { border-color: rgba(55, 190, 120, .26); }
.pvp10-battle-row.lost { border-color: rgba(255, 94, 94, .25); }
.pvp10-war-room {
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 14px;
  padding-top: 12px;
}
@media (max-width: 900px) {
  .pvp10-how-battles,
  .pvp10-battle-grid { grid-template-columns: 1fr; }
  .pvp10-battle-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pvp10-requirements,
  .pvp10-odds-grid { grid-template-columns: 1fr 1fr; }
}


/* --------------------------------------------------------------------------
   Phase 11 PvP UX fixes
-------------------------------------------------------------------------- */
@media (min-width: 980px) {
  #rivals .pvp10-grid.player-family-grid,
  #rivals .pvp11-rival-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
}
@media (min-width: 1500px) {
  #rivals .pvp10-grid.player-family-grid,
  #rivals .pvp11-rival-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
#rivals .pvp10-family-card {
  min-width: 0;
}
#rivals .pvp10-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}
#rivals .pvp10-actions button {
  width: 100% !important;
  min-height: 42px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: center !important;
  justify-content: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
@media (max-width: 640px) {
  #rivals .pvp10-actions {
    grid-template-columns: 1fr !important;
  }
}
.pvp11-defense-card,
.pvp11-recovery-card {
  border: 1px solid rgba(212, 175, 55, .18);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(255,255,255,.035);
}
.pvp11-defense-card {
  margin: 8px 0 12px;
  background: rgba(212, 175, 55, .055);
}
.pvp11-defense-card strong,
.pvp11-defense-card span,
.pvp11-recovery-card strong,
.pvp11-recovery-card span {
  display: block;
}
.pvp11-defense-card span,
.pvp11-recovery-card span {
  color: var(--muted);
  font-size: .82rem;
  margin-top: 4px;
}
.pvp11-recovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.pvp11-recovery-card button {
  margin-top: 10px;
  width: 100%;
  white-space: normal;
}
@media (max-width: 760px) {
  .pvp11-recovery-grid {
    grid-template-columns: 1fr;
  }
}
#dashboard .pvp-safe6-dashboard {
  display: none !important;
}

/* PvP Safe Phase 12: live timers and district-control strategy */
.pvp12-live-timer {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.pvp12-token-timer,
.pvp12-cooldown-timer,
.pvp12-gesture-timer,
.pvp12-shield-timer,
.pvp12-defense-timer {
  white-space: nowrap;
}
.pvp12-cooldown-disabled {
  opacity: .58;
  cursor: not-allowed;
}
.pvp12-rivals-guide,
.pvp12-next-level {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(212, 175, 55, .18);
  background: rgba(212, 175, 55, .055);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: .86rem;
}
.pvp12-rivals-guide strong,
.pvp12-next-level strong {
  color: var(--text);
  white-space: nowrap;
}
.pvp12-district-strategy {
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px;
}
.pvp12-control-summary {
  margin: 12px 0;
}
.pvp12-district-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.pvp12-district-card {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(255,255,255,.035);
  min-height: 118px;
}
.pvp12-district-card strong,
.pvp12-district-card span,
.pvp12-district-card em,
.pvp12-district-card small {
  display: block;
}
.pvp12-district-card span {
  color: var(--text);
  margin-top: 4px;
}
.pvp12-district-card em,
.pvp12-district-card small {
  color: var(--muted);
  font-style: normal;
  font-size: .79rem;
  margin-top: 4px;
}
.pvp12-next-level {
  margin-top: 12px;
}
@media (max-width: 1180px) {
  .pvp12-district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pvp12-rivals-guide,
  .pvp12-next-level { flex-direction: column; gap: 4px; }
  .pvp12-district-grid { grid-template-columns: 1fr; }
}

/* PvP Safe Phase 13: Multiplayer Expansion */
.pvp13-season-panel,
.pvp13-defense-loadout,
.pvp13-district-rewards,
.pvp13-attack-plan {
  border: 1px solid rgba(212, 175, 55, 0.24);
  background: rgba(255,255,255,0.035);
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0;
}
.pvp13-attack-plan.muted-plan {
  border-style: dashed;
  opacity: 0.85;
}
.pvp13-attack-plan > strong,
.pvp13-attack-plan > span {
  display: block;
}
.pvp13-plan-grid,
.pvp13-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.pvp13-plan-grid > div,
.pvp13-summary-grid > div {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.16);
  border-radius: 12px;
  padding: 10px;
  min-width: 0;
}
.pvp13-plan-grid span,
.pvp13-summary-grid span,
.pvp13-loadout-grid span {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.pvp13-plan-grid strong,
.pvp13-summary-grid strong {
  display: block;
  overflow-wrap: anywhere;
}
.pvp13-score-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.pvp13-score-breakdown span {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.18);
  font-size: 0.82rem;
}
.pvp13-loadout-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pvp13-loadout-grid label {
  display: block;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(0,0,0,0.16);
  padding: 10px;
}
.pvp13-loadout-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: inherit;
  padding: 9px 10px;
  font-weight: 700;
}
.pvp13-loadout-grid small,
.pvp13-attack-plan small,
.pvp13-district-reward small,
.pvp13-feed-row small {
  display: block;
  opacity: 0.68;
  margin-top: 6px;
  line-height: 1.35;
}
.pvp13-district-reward,
.pvp13-feed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
}
.pvp13-district-reward.active {
  border-color: rgba(70, 190, 120, 0.35);
  background: rgba(70, 190, 120, 0.07);
}
.pvp13-feed-row.success { border-color: rgba(70, 190, 120, 0.32); }
.pvp13-feed-row.warning { border-color: rgba(230, 180, 60, 0.32); }
.pvp13-feed-row.danger { border-color: rgba(230, 80, 80, 0.36); }
.pvp13-feed-row span,
.pvp13-district-reward span {
  display: block;
  opacity: 0.78;
  line-height: 1.35;
}
.pvp13-war-feed {
  margin-bottom: 16px;
}
.pvp13-season-countdown {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .pvp13-plan-grid,
  .pvp13-summary-grid,
  .pvp13-loadout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .pvp13-plan-grid,
  .pvp13-summary-grid,
  .pvp13-loadout-grid,
  .pvp13-district-reward,
  .pvp13-feed-row {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Phase 14: compact whole-game layout + restored artwork
   Goal: less vertical scrolling, tighter cards, richer section visuals.
------------------------------------------------------------------------- */
:root {
  --radius: 14px;
}
body {
  font-size: 14px;
}
.app-shell {
  grid-template-columns: 236px minmax(0, 1fr);
}
.sidebar {
  padding: 12px 10px;
  gap: 10px;
}
.brand {
  padding: 0 2px 6px;
}
.brand-logo-sidebar {
  width: 126px;
}
.nav {
  gap: 5px;
}
.nav-btn {
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.15;
}
.sidebar-footer {
  gap: 6px;
}
.tiny {
  font-size: 10px;
  line-height: 1.35;
}
.main {
  padding: 10px 14px 24px;
}
.topbar {
  margin-bottom: 8px;
  padding: 8px 0 9px;
}
.topbar h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  margin-top: 2px;
}
.topbar-actions {
  gap: 6px;
}
.primary,
.ghost,
.quiet,
.danger {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.2;
}
.small {
  padding: 5px 8px;
  font-size: 11px;
}
.resource-strip {
  gap: 8px;
  margin-bottom: 10px;
}
.resource-pill {
  padding: 8px 10px;
  border-radius: 12px;
}
.resource-pill::before {
  right: 9px;
  top: 7px;
  font-size: 16px;
}
.resource-pill label {
  font-size: 9px;
  letter-spacing: .11em;
}
.resource-pill strong {
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.05;
}
.resource-pill span {
  margin-top: 3px;
  font-size: 10px;
}
.page-stack,
.grid,
.side-column,
.list-stack,
.tip-list {
  gap: 10px;
}
.card {
  padding: 11px;
}
.notice {
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.35;
}
.section-head {
  margin-bottom: 8px;
}
.section-head h3 {
  font-size: 20px;
}
.layout-main-side {
  gap: 10px;
  grid-template-columns: minmax(0,1.45fr) 300px;
}
.phase14-hero,
.section-hero.phase14-hero,
.section-hero.section-hero-text-only.phase14-hero,
#operations .section-hero.phase14-hero,
#crew .section-hero.phase14-hero,
#fronts .section-hero.phase14-hero,
#territory .section-hero.phase14-hero,
#rivals .section-hero.phase14-hero,
#leaderboard .section-hero.phase14-hero,
#ledger .section-hero.phase14-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 12px;
  align-items: stretch;
  min-height: 116px;
  padding: 11px 12px;
}
.phase14-hero .section-hero-copy h3,
.section-hero-copy h3 {
  font-size: clamp(24px, 2vw, 34px);
  margin: 4px 0 5px;
}
.phase14-hero .hero-description,
.hero-description {
  font-size: 13px;
  line-height: 1.38;
}
.phase14-hero .hero-actions,
.hero-actions {
  gap: 6px;
  margin-top: 8px;
}
.phase14-hero .hero-stats-grid,
.hero-stats-grid {
  gap: 6px;
  margin-top: 8px;
}
.phase14-hero .hero-stat,
.hero-stat {
  padding: 7px 8px;
  border-radius: 10px;
}
.hero-stat strong {
  margin-top: 3px;
  font-size: 14px;
}
.hero-stat em {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.2;
}
.phase14-hero .section-hero-media,
.phase14-hero .phase14-hero-media,
.section-hero-text-only.phase14-hero .section-hero-media {
  display: block !important;
}
.phase14-hero .section-hero-media img,
.phase14-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 104px;
  max-height: 132px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.entity-card,
.portrait-card,
.mini-district-card {
  padding: 8px;
  gap: 7px;
  min-height: auto;
}
.entity-card > img {
  height: 104px;
  border-radius: 10px;
}
#crew .entity-card > img {
  object-fit: contain;
  background: rgba(255,255,255,.025);
}
.entity-card-body,
.portrait-card-body {
  gap: 6px;
}
.entity-head h4 {
  font-size: 15px;
  line-height: 1.15;
}
.entity-card-body p,
.mini-district-card p,
.portrait-card-body em {
  font-size: 12px;
  line-height: 1.32;
}
.badge {
  padding: 3px 7px;
  font-size: 10px;
}
.meta-grid-inline {
  gap: 6px;
}
.meta-grid-inline > div,
.meta-grid-inline .box {
  padding: 6px 7px;
  border-radius: 9px;
}
.meta-grid-inline span,
.hero-stat span,
.meta-line span,
.stat-label {
  font-size: 8px;
  letter-spacing: .09em;
}
.meta-grid-inline strong,
.portrait-card-body strong {
  margin-top: 2px;
  font-size: 12px;
}
.progress {
  height: 6px;
  margin-top: 6px;
}
.row-actions,
.compact-actions {
  gap: 6px;
}
.row-actions > * {
  min-width: 0;
  white-space: normal;
}
.requirements-block {
  gap: 5px;
}
.requirements-grid {
  gap: 4px;
}
.requirement-chip {
  padding: 5px;
  border-radius: 8px;
}
.requirement-chip strong {
  font-size: 10px;
}
.action-help {
  padding: 6px 7px;
  font-size: 10px;
  line-height: 1.25;
}
.dashboard-stats {
  gap: 8px;
}
.stat-card {
  padding: 10px;
}
.stat-value {
  font-size: 20px;
}
.stat-note {
  margin-top: 4px;
  font-size: 10px;
}
.dashboard-mini-card,
.dashboard-front-card {
  padding: 7px;
  gap: 7px;
  min-height: 68px;
  border-radius: 10px;
}
.dashboard-mini-card {
  grid-template-columns: 46px minmax(0,1fr);
}
.dashboard-mini-card img {
  width: 46px;
  height: 46px;
  border-radius: 9px;
}
.dashboard-front-card {
  grid-template-columns: 70px minmax(0,1fr) auto;
}
.dashboard-front-card img {
  width: 70px;
  height: 46px;
  border-radius: 9px;
}
.dashboard-mini-card strong,
.dashboard-front-card strong {
  font-size: 12px;
}
.dashboard-mini-card span,
.dashboard-front-card span,
.dashboard-mini-card em,
.dashboard-front-card em {
  font-size: 10px;
  line-height: 1.2;
}
.dashboard-territory-row {
  gap: 10px;
}
.territory-thumb {
  height: 112px !important;
  object-fit: cover;
  object-position: center center;
}
.map-wrap {
  max-height: 560px;
  overflow: hidden;
  border-radius: 12px;
}
.map-wrap img.phase14-city-map,
.map-wrap img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
  border-radius: 12px;
}
.map-label {
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 10px;
}
.map-label strong {
  font-size: 10px;
}
.map-label span {
  font-size: 9px;
}
.legend-row {
  margin-top: 8px;
  gap: 10px;
  font-size: 11px;
}
.list-item {
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 8px;
  padding: 7px;
  border-radius: 10px;
}
.list-thumb {
  width: 52px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}
.list-main strong,
.simple-row strong {
  font-size: 12px;
}
.list-main span,
.list-side strong,
.list-side span,
.simple-row span,
.simple-row em {
  font-size: 10px;
}
.timeline {
  gap: 8px;
}
.log-item {
  font-size: 12px;
  line-height: 1.35;
}
th, td {
  padding: 7px 8px;
}
td {
  font-size: 12px;
}
.player-family-grid.pvp11-rival-grid,
#rivals .player-family-grid,
#rivals .grid.cols-2.player-family-grid {
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
  gap: 10px;
}
.pvp10-family-card .row-actions,
.player-family-card .row-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 5px;
}
.pvp10-family-card .row-actions > button,
.player-family-card .row-actions > button {
  padding: 7px 6px;
  font-size: 10px;
  line-height: 1.15;
  min-height: 32px;
}
.pvp13-attack-plan,
.pvp12-rivals-guide,
.pvp11-defense-card,
.pvp11-recovery-card,
.pvp13-season-panel,
.pvp13-defense-loadout,
.pvp13-district-rewards,
.pvp13-war-feed {
  font-size: 12px;
}
.pvp13-feed-row,
.phase14-flow-grid > div {
  padding: 7px;
  border-radius: 10px;
}
.phase14-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.phase14-flow-grid strong,
.phase14-flow-grid span {
  display: block;
}
.phase14-flow-grid strong {
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.phase14-flow-grid span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
@media (min-width: 1281px) {
  .grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.cols-2:not(.player-family-grid) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #operations .grid.cols-2,
  #fronts .grid.cols-2 {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  }
  #crew .grid.cols-3,
  #headquarters .grid.cols-4,
  .objectives-grid,
  .hq-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 1fr; }
  .phase14-hero,
  .section-hero.phase14-hero,
  .section-hero.section-hero-text-only.phase14-hero,
  #operations .section-hero.phase14-hero,
  #crew .section-hero.phase14-hero,
  #fronts .section-hero.phase14-hero,
  #territory .section-hero.phase14-hero,
  #rivals .section-hero.phase14-hero,
  #leaderboard .section-hero.phase14-hero,
  #ledger .section-hero.phase14-hero {
    grid-template-columns: 1fr;
  }
  .phase14-hero .section-hero-media img,
  .phase14-hero-media img {
    height: 105px;
    min-height: 105px;
  }
  .phase14-flow-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .player-family-grid.pvp11-rival-grid,
  #rivals .player-family-grid,
  #rivals .grid.cols-2.player-family-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  body { font-size: 12px; }
  .main { padding: 7px 7px 16px; }
  .phase14-hero .section-hero-media img,
  .phase14-hero-media img {
    height: 78px;
    min-height: 78px;
  }
  .player-family-card .row-actions,
  .pvp10-family-card .row-actions {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .phase14-flow-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 15: remove Phase 14 art-heavy headers, keep compact UI and repaired map asset */
.section-hero-media,
.phase14-hero-media {
  display: none !important;
}
.section-hero.phase15-text-hero,
.section-hero.section-hero-text-only,
.phase15-text-hero {
  display: block !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
}
.phase15-text-hero .section-hero-copy,
.section-hero-text-only .section-hero-copy {
  max-width: none !important;
}
.phase14-flow-card {
  display: none !important;
}
.pvp13-war-feed {
  display: none !important;
}
.pvp10-rivals .section-head .badge,
.pvp10-battles .section-head .badge,
.pvp10-territory .section-head .badge {
  white-space: nowrap;
}
.pvp10-rivals .row-actions button,
.pvp10-battles .row-actions button,
.pvp10-territory .row-actions button {
  white-space: normal;
}
.pvp15-auto-note {
  font-size: 0.78rem;
  opacity: 0.82;
}

/* --------------------------------------------------------------------------
   Phase 16: Admin Tools + Layout Cleanup
-------------------------------------------------------------------------- */
.phase16-admin-nav.hidden { display: none !important; }

/* Smaller family management card */
#family .family-management-card {
  padding: 10px !important;
}
#family .family-management-card .section-head {
  margin-bottom: 8px !important;
}
#family .family-management-grid {
  gap: 8px !important;
}
#family .family-management-panel {
  padding: 9px !important;
  border-radius: 12px !important;
}
#family .family-management-panel h4 {
  font-size: 14px !important;
  margin-bottom: 3px !important;
}
#family .family-management-panel p {
  font-size: 11px !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}
#family .family-management-panel .inline-input,
#family .family-management-panel button {
  min-height: 30px !important;
  font-size: 11px !important;
  padding: 6px 8px !important;
}
#family .family-invite-code {
  padding: 5px 7px !important;
}
#family .family-invite-code span { font-size: 9px !important; }
#family .family-invite-code strong { font-size: 13px !important; margin-top: 3px !important; }

/* Headquarters: 10 upgrades as 5 per row on desktop */
#headquarters .hq-grid,
#headquarters .grid.cols-4.hq-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#headquarters .hq-card,
#headquarters .hq-grid .entity-card {
  padding: 7px !important;
  gap: 6px !important;
  min-height: 0 !important;
}
#headquarters .hq-card > img,
#headquarters .hq-grid .entity-card > img {
  height: 74px !important;
  border-radius: 10px !important;
}
#headquarters .hq-card .entity-card-body,
#headquarters .hq-grid .entity-card .entity-card-body {
  gap: 5px !important;
  padding: 6px !important;
}
#headquarters .hq-card h4,
#headquarters .hq-grid .entity-card h4 {
  font-size: 13px !important;
  line-height: 1.1 !important;
}
#headquarters .hq-card p,
#headquarters .hq-grid .entity-card p {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  min-height: 39px !important;
}
#headquarters .hq-card .meta-grid-inline,
#headquarters .hq-grid .entity-card .meta-grid-inline {
  gap: 5px !important;
}
#headquarters .hq-card .meta-grid-inline > div,
#headquarters .hq-grid .entity-card .meta-grid-inline > div {
  padding: 5px !important;
}
#headquarters .hq-card .meta-grid-inline span,
#headquarters .hq-grid .entity-card .meta-grid-inline span { font-size: 8px !important; }
#headquarters .hq-card .meta-grid-inline strong,
#headquarters .hq-grid .entity-card .meta-grid-inline strong { font-size: 10px !important; }
#headquarters .hq-card button,
#headquarters .hq-grid .entity-card button {
  min-height: 30px !important;
  font-size: 10px !important;
  padding: 6px 8px !important;
}

/* Smaller money sink and morale actions */
#headquarters .hq-actions-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 8px !important;
}
#headquarters .hq-action-card,
.crew-morale-panel .morale-action-card {
  padding: 8px !important;
  gap: 6px !important;
}
#headquarters .hq-action-card h4,
.crew-morale-panel .morale-action-card h4 {
  font-size: 13px !important;
}
#headquarters .hq-action-card p,
.crew-morale-panel .morale-action-card p {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
}
#headquarters .hq-action-card button,
.crew-morale-panel .morale-action-card button {
  min-height: 30px !important;
  font-size: 10px !important;
  padding: 6px 8px !important;
}
.crew-morale-panel { padding: 10px !important; }
.crew-morale-panel .morale-actions-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 8px !important;
}
.crew-morale-panel .requirements-grid,
.crew-morale-panel .morale-requirements-grid {
  gap: 4px !important;
}
.crew-morale-panel .req-chip,
.crew-morale-panel .requirement-chip {
  padding: 5px !important;
}
.crew-morale-panel .req-chip span,
.crew-morale-panel .requirement-chip span { font-size: 8px !important; }
.crew-morale-panel .req-chip strong,
.crew-morale-panel .requirement-chip strong { font-size: 9px !important; }

/* Front businesses: 12 cards compact layout */
#fronts .page-stack > .grid.cols-2,
#fronts .front-business-grid,
#fronts .grid.cols-2 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 8px !important;
}
#fronts .entity-card {
  padding: 7px !important;
  gap: 6px !important;
}
#fronts .entity-card > img {
  height: 82px !important;
  border-radius: 10px !important;
}
#fronts .entity-card .entity-card-body {
  padding: 6px !important;
  gap: 5px !important;
}
#fronts .entity-card h4 { font-size: 13px !important; line-height: 1.1 !important; }
#fronts .entity-card p { font-size: 10.5px !important; line-height: 1.25 !important; }
#fronts .entity-card .meta-grid-inline { gap: 5px !important; }
#fronts .entity-card .meta-grid-inline > div { padding: 5px !important; }
#fronts .entity-card .meta-grid-inline span { font-size: 8px !important; }
#fronts .entity-card .meta-grid-inline strong { font-size: 10px !important; }
#fronts .entity-card button { min-height: 30px !important; font-size: 10px !important; padding: 6px 8px !important; }

/* Battles: singleplayer first, compact multiplayer below */
#battles .pvp16-multiplayer-battles {
  margin-top: 8px !important;
}
#battles .pvp10-battles .section-head,
#battles .pvp10-battles .mini-title {
  margin-bottom: 6px !important;
}
#battles .pvp10-how-battles {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
#battles .pvp10-how-battles > div,
#battles .pvp10-token-summary > div,
#battles .pvp11-recovery-card,
#battles .pvp11-defense-card {
  padding: 7px !important;
}
#battles .pvp10-how-battles span,
#battles .pvp11-recovery-card span,
#battles .pvp11-defense-card span {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
}
#battles .pvp10-war-room { margin-top: 8px !important; }
#battles .pvp11-recovery-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 6px !important;
}

/* Always-open compact dashboard tactical report */
#dashboard .pvp16-tactical-compact,
#dashboard .pvp-safe7-tactical.pvp16-tactical-compact {
  padding: 8px 10px !important;
  margin: 0 !important;
}
#dashboard .pvp16-tactical-compact .section-head {
  margin-bottom: 6px !important;
}
#dashboard .pvp16-tactical-compact p,
#dashboard .pvp16-tactical-compact .row-actions {
  display: none !important;
}
.pvp16-tactical-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
.pvp16-tactical-grid > div {
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  border-radius: 9px;
  padding: 6px 7px;
  min-width: 0;
}
.pvp16-tactical-grid span {
  display: block;
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 800;
}
.pvp16-tactical-grid strong {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pvp16-tactical-grid em {
  display: block;
  margin-top: 1px;
  color: var(--gold-soft);
  font-size: 9px;
  font-style: normal;
}

/* Admin tools page */
.admin16-card { padding: 12px !important; }
.admin16-resource-grid,
.admin16-cloud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.admin16-resource-grid label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: end;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.admin16-resource-grid label input {
  grid-column: 1 / -1;
}
.admin16-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.admin16-presets { margin-top: 10px; }

@media (max-width: 1280px) {
  #headquarters .hq-grid,
  #headquarters .grid.cols-4.hq-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important; }
  .pvp16-tactical-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pvp16-tactical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #battles .pvp10-how-battles { grid-template-columns: 1fr !important; }
}


/* --------------------------------------------------------------------------
   Phase 17: layout fit polish
   Requested targets:
   - Family Invites & Members: 4 cards on one row.
   - Headquarters morale and money-sink actions: 4 equal cards across full width.
   - Front Businesses: 12 cards as 6 + 6 on desktop.
-------------------------------------------------------------------------- */
@media (min-width: 980px) {
  #family .family-management-card {
    padding: 8px !important;
  }
  #family .family-management-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  #family .family-management-panel {
    padding: 7px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }
  #family .family-management-panel h4 {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
  }
  #family .family-management-panel p {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    margin-bottom: 5px !important;
  }
  #family .family-cloud-invite-row.compact,
  #family .family-page-join-grid.compact,
  #family .family-add-grid.compact {
    gap: 4px !important;
  }
  #family .family-management-panel .inline-input,
  #family .family-management-panel button,
  #family .family-cloud-invite-row.compact button {
    min-height: 26px !important;
    font-size: 9px !important;
    padding: 5px 6px !important;
  }
  #family .family-invite-code {
    padding: 4px 5px !important;
    min-width: 0 !important;
  }
  #family .family-invite-code span { font-size: 7.5px !important; }
  #family .family-invite-code strong {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #headquarters .hq-actions-grid,
  #headquarters .crew-morale-panel .morale-actions-grid,
  #crew .crew-morale-panel .morale-actions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #headquarters .hq-action-card,
  #headquarters .crew-morale-panel .morale-action-card,
  #crew .crew-morale-panel .morale-action-card {
    min-width: 0 !important;
    padding: 8px !important;
  }
  #headquarters .hq-action-card .entity-head,
  #headquarters .crew-morale-panel .morale-action-card .entity-head,
  #crew .crew-morale-panel .morale-action-card .entity-head {
    gap: 5px !important;
  }
  #headquarters .hq-action-card h4,
  #headquarters .crew-morale-panel .morale-action-card h4,
  #crew .crew-morale-panel .morale-action-card h4 {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }
  #headquarters .hq-action-card p,
  #headquarters .crew-morale-panel .morale-action-card p,
  #crew .crew-morale-panel .morale-action-card p {
    font-size: 9.8px !important;
    line-height: 1.18 !important;
  }

  #fronts .page-stack > .grid.cols-2,
  #fronts .front-business-grid,
  #fronts .grid.cols-2 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  #fronts .entity-card {
    min-width: 0 !important;
    padding: 6px !important;
  }
  #fronts .entity-card > img {
    height: 62px !important;
  }
  #fronts .entity-card .entity-card-body {
    padding: 5px !important;
    gap: 4px !important;
  }
  #fronts .entity-card h4 {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }
  #fronts .entity-card p {
    font-size: 9.3px !important;
    line-height: 1.14 !important;
  }
  #fronts .entity-card .meta-grid-inline {
    gap: 4px !important;
  }
  #fronts .entity-card .meta-grid-inline > div {
    padding: 4px !important;
  }
  #fronts .entity-card button {
    min-height: 26px !important;
    font-size: 9px !important;
    padding: 5px 6px !important;
  }

  .admin17-truce-tools {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
  }
  .admin17-truce-tools small {
    grid-column: 1 / -1;
    color: var(--faint);
    font-size: 10px;
    line-height: 1.25;
  }
}

@media (max-width: 979px) {
  #family .family-management-grid,
  #headquarters .hq-actions-grid,
  #headquarters .crew-morale-panel .morale-actions-grid,
  #crew .crew-morale-panel .morale-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #fronts .page-stack > .grid.cols-2,
  #fronts .front-business-grid,
  #fronts .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .admin17-truce-tools { display: grid; gap: 6px; margin-top: 8px; }
  .admin17-truce-tools small { color: var(--faint); font-size: 10px; line-height: 1.25; }
}

@media (max-width: 620px) {
  #family .family-management-grid,
  #headquarters .hq-actions-grid,
  #headquarters .crew-morale-panel .morale-actions-grid,
  #crew .crew-morale-panel .morale-actions-grid,
  #fronts .page-stack > .grid.cols-2,
  #fronts .front-business-grid,
  #fronts .grid.cols-2 {
    grid-template-columns: 1fr !important;
  }
}


/* Phase 20.14.1 — calmer page switching + compact Family roster */
body, .app-shell, .game-shell, .main, .view, .page-stack, .card {
  scroll-behavior: auto !important;
}

.view, .view.active, .page-stack, .card {
  animation: none !important;
}

.nav-btn, .primary, .ghost, .quiet, button {
  transition: none !important;
}

/* Prevent the quick right/left twitch caused by scrollbar width changing between pages */
html {
  overflow-y: scroll !important;
}

/* Compact Family roster cards */
.family-roster-grid,
#familyRoster,
.roster-grid,
.family-members-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.family-roster-grid > *,
#familyRoster > *,
.roster-grid > *,
.family-members-grid > * {
  min-width: 0 !important;
  width: auto !important;
}

.family-member-card,
.family-roster-card,
.roster-member-card,
.member-card {
  padding: 10px !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  .family-roster-grid,
  #familyRoster,
  .roster-grid,
  .family-members-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .family-roster-grid,
  #familyRoster,
  .roster-grid,
  .family-members-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Phase 21.2 auth sizing + anti-twitch polish */
html{overflow-y:scroll!important;scroll-behavior:auto!important}
.view,.view.active,.page-stack,.card,.section-card{animation:none!important;transition:none!important}
.nav-btn,.primary,.ghost,button{transition:none!important}
.pregame-shell #welcomeScreen{align-items:center!important;justify-content:center!important;padding:14px!important;overflow:hidden!important}
.pregame-shell .welcome-card.auth-layout{max-width:1080px!important;width:min(1080px,96vw)!important;max-height:calc(100vh - 28px)!important;display:grid!important;grid-template-columns:minmax(0,.95fr) minmax(300px,.75fr)!important;gap:14px!important;align-items:stretch!important;overflow:hidden!important;margin:0 auto!important}
.pregame-shell .auth-media.card{padding:12px!important;min-height:0!important;overflow:hidden!important}
.pregame-shell .auth-media>img:first-child{height:clamp(135px,25vh,235px)!important;min-height:0!important;width:100%!important;object-fit:cover!important;object-position:center!important;border-radius:12px!important}
.pregame-shell .auth-media-copy{padding:10px!important;gap:6px!important}
.pregame-shell .auth-media-copy h2{font-size:clamp(22px,3vw,34px)!important;margin:2px 0!important}
.pregame-shell .brand-logo.big{max-width:170px!important;height:auto!important}
.pregame-shell .auth-thumb-row{gap:6px!important;margin-top:6px!important}
.pregame-shell .auth-thumb{min-height:62px!important}
.pregame-shell .auth-thumb img{height:52px!important;object-fit:cover!important}
.pregame-shell .auth-forms-wrap{display:grid!important;gap:10px!important;align-content:center!important;min-height:0!important}
.pregame-shell .auth-form,.pregame-shell .family-form{padding:12px!important;gap:8px!important;min-height:0!important}
.pregame-shell .auth-form h3{margin:0 0 4px!important;font-size:18px!important}
.pregame-shell .auth-form label{gap:4px!important;margin:0!important}
.pregame-shell .auth-form input{min-height:34px!important;padding:7px 9px!important}
.pregame-shell .family-setup-layout{grid-template-columns:minmax(0,.82fr) minmax(300px,.68fr)!important}
.pregame-shell .auth-family-media>img:first-child{height:clamp(110px,22vh,190px)!important}
@media(max-width:820px){.pregame-shell #welcomeScreen{overflow:auto!important}.pregame-shell .welcome-card.auth-layout{display:block!important;max-height:none!important}.pregame-shell .auth-media{margin-bottom:10px!important}}



/* --------------------------------------------------------------------------
   Phase 21.15 Dashboard snapshot + logo glow containment
-------------------------------------------------------------------------- */
.sidebar {
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 2 !important;
}

.brand {
  overflow: hidden !important;
  border-radius: 18px !important;
  position: relative !important;
}

.brand-logo,
.brand-logo-sidebar {
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)) !important;
}

.main {
  position: relative !important;
  z-index: 3 !important;
  background:
    radial-gradient(circle at top left, rgba(200,154,74,.05), transparent 24%),
    linear-gradient(180deg, #08090a, #060708 40%, #050506 100%) !important;
}

#dashboard .dashboard-territory .dashboard-territory-row,
#dashboard .bl2115-territory-snapshot .dashboard-territory-row {
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

#dashboard .dashboard-territory .territory-thumb,
#dashboard .bl2115-territory-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 250px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 14px !important;
  display: block !important;
  align-self: stretch !important;
}

#dashboard .dashboard-territory .territory-meta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
  align-content: stretch !important;
}

#dashboard .dashboard-territory .territory-meta > div {
  min-height: 70px !important;
  align-content: center !important;
}

#dashboard .dashboard-territory.bl2115-not-synced .territory-meta {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

@media (max-width: 1100px) {
  #dashboard .dashboard-territory .dashboard-territory-row,
  #dashboard .bl2115-territory-snapshot .dashboard-territory-row {
    grid-template-columns: 1fr !important;
  }
  #dashboard .dashboard-territory .territory-thumb,
  #dashboard .bl2115-territory-image {
    min-height: 220px !important;
  }
  #dashboard .dashboard-territory .territory-meta,
  #dashboard .dashboard-territory.bl2115-not-synced .territory-meta {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 700px) {
  #dashboard .dashboard-territory .territory-meta,
  #dashboard .dashboard-territory.bl2115-not-synced .territory-meta {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.16 — pure black global background + no logo shadow bleed
-------------------------------------------------------------------------- */
html,
body,
.app-shell,
.main,
.topbar {
  background: #050505 !important;
  background-image: none !important;
}

body::before,
body::after,
.main::before,
.main::after,
.topbar::before,
.topbar::after {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.sidebar {
  background: #050505 !important;
  background-image: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.brand {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.brand-logo,
.brand-logo-sidebar,
.brand-logo.big {
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.sidebar-footer .tiny {
  display: none !important;
}

#dashboard .dashboard-territory .dashboard-territory-row,
#dashboard .bl2115-territory-snapshot .dashboard-territory-row {
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

#dashboard .dashboard-territory .territory-thumb,
#dashboard .bl2115-territory-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 250px !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* --------------------------------------------------------------------------
   Phase 21.17 — Objectives Active City Event layout parity with Dashboard
-------------------------------------------------------------------------- */
#objectives .city-event-card .row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#objectives .city-event-card .row-actions > * {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  #objectives .city-event-card .row-actions {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.19 — Objectives Active City Event matches Dashboard
-------------------------------------------------------------------------- */
#objectives .city-event-card.bl2119-objectives-city-event-match {
  padding: 14px !important;
}

#objectives .city-event-card.bl2119-objectives-city-event-match .entity-head {
  margin-bottom: 6px !important;
}

#objectives .city-event-card.bl2119-objectives-city-event-match p {
  margin: 4px 0 10px !important;
}

#objectives .bl2119-choice-grid,
#objectives .city-event-choice-guide-prominent {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  margin-top: 8px !important;
  border-style: solid !important;
}

#objectives .bl2119-choice-grid .choice-effects-heading,
#objectives .city-event-choice-guide-prominent .choice-effects-heading {
  grid-column: 1 / -1 !important;
  margin: 0 0 2px !important;
}

#objectives .city-event-choice-guide-row.bl2119-choice-card,
#objectives .city-event-choice-guide-prominent .city-event-choice-guide-row {
  display: block !important;
  margin: 0 !important;
  min-height: 74px !important;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.025) !important;
}

#objectives .city-event-choice-guide-row.bl2119-choice-card strong,
#objectives .city-event-choice-guide-prominent .city-event-choice-guide-row strong {
  display: block !important;
  margin-bottom: 5px !important;
  white-space: normal !important;
}

#objectives .city-event-choice-guide-row.bl2119-choice-card span,
#objectives .city-event-choice-guide-prominent .city-event-choice-guide-row span {
  display: block !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

#objectives .bl2119-choice-actions,
#objectives .city-event-card .row-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

#objectives .bl2119-choice-actions > *,
#objectives .city-event-card .row-actions > * {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

#dashboard .dashboard-territory img.bl2119-photo-snapshot,
#dashboard .dashboard-territory .territory-thumb {
  content: url('../assets/territory-global-snapshot-photo.png') !important;
}

@media (max-width: 1100px) {
  #objectives .bl2119-choice-grid,
  #objectives .city-event-choice-guide-prominent,
  #objectives .bl2119-choice-actions,
  #objectives .city-event-card .row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  #objectives .bl2119-choice-grid,
  #objectives .city-event-choice-guide-prominent,
  #objectives .bl2119-choice-actions,
  #objectives .city-event-card .row-actions {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.20 — Sidebar logo border correction
   Adds a real container border so the top rounded corners do not fade into black.
-------------------------------------------------------------------------- */
.sidebar .brand {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 7px !important;
  margin: 0 auto 4px !important;
  width: 100% !important;
  min-height: 166px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(214, 170, 83, .72) !important;
  background:
    linear-gradient(180deg, rgba(214,170,83,.09), rgba(255,255,255,.018) 42%, rgba(214,170,83,.035)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 166, .14),
    inset 0 10px 18px rgba(255, 212, 125, .035) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.sidebar .brand::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  pointer-events: none !important;
  border: 1px solid rgba(255, 226, 157, .32) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7) !important;
  z-index: 2 !important;
}

.sidebar .brand::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 0 !important;
  height: 1px !important;
  background: rgba(255, 225, 155, .55) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.sidebar .brand-logo-sidebar,
.sidebar .brand-logo {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 206px !important;
  display: block !important;
  margin: 0 auto !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
}

@media (max-width: 720px) {
  .sidebar .brand {
    min-height: 132px !important;
  }
  .sidebar .brand-logo-sidebar,
  .sidebar .brand-logo {
    max-width: 170px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.21 — Operations stable layout
   Keeps Active Operations, Operation Advice, and Requirements guide in the same
   place before and after launching an operation.
-------------------------------------------------------------------------- */
#operations .operations-stable-page .section-hero {
  margin-bottom: 0 !important;
}

#operations .operations-info-row-stable {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#operations .operations-info-row-stable > .card {
  min-height: 190px !important;
  height: 100% !important;
}

#operations .operations-info-row-stable .tip-list {
  display: grid !important;
  gap: 9px !important;
}

#operations .operations-info-row-stable .tip-list > div {
  min-height: 0 !important;
}

#operations .operations-board-head {
  margin-top: 2px !important;
}

#operations .operations-cards-grid-stable {
  width: 100% !important;
  align-items: stretch !important;
}

#operations .operation-stable-card {
  min-height: 430px !important;
}

#operations .operation-stable-card > img {
  height: 150px !important;
  object-fit: cover !important;
  object-position: center top !important;
}

#operations .operation-stable-card .requirements-note {
  margin: 8px 0 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#operations .operations-info-row-fixed,
#operations .operations-grid-layout-clean,
#operations .full-width-info-card {
  all: revert-layer;
}

@media (max-width: 1180px) {
  #operations .operations-info-row-stable {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.22 — Operations guide removed + no-jump action polish
-------------------------------------------------------------------------- */
#operations .operations-guide-card-stable,
#operations .clarity-page-guide,
#operations .card:has(.section-head h3):has(h3) {
}

#operations .operations-info-row-stable,
#operations .operations-info-row-stable.operations-info-row-two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#operations .operations-info-row-stable .operations-active-card-stable,
#operations .operations-info-row-stable .operation-advice-card-stable {
  min-height: 176px !important;
}

#operations .operations-info-row-stable .operations-guide-card-stable {
  display: none !important;
}

#operations .clarity-page-guide:has(h3) {
  display: none;
}

#operations .requirements-note {
  min-height: 48px !important;
}

@media (max-width: 980px) {
  #operations .operations-info-row-stable,
  #operations .operations-info-row-stable.operations-info-row-two {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.23 — Operations click no-jump: fixed active operations panel
   The active list can grow, but the info row height will not push the board down.
-------------------------------------------------------------------------- */
#operations .operations-info-row-stable,
#operations .operations-info-row-no-grow {
  align-items: stretch !important;
}

#operations .operations-info-row-stable > .card,
#operations .operations-info-row-no-grow > .card {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#operations .operations-active-fixed-panel .section-head,
#operations .operation-advice-card-stable .section-head {
  flex: 0 0 auto !important;
}

#operations .operations-active-fixed-list,
#operations .operations-active-fixed-panel .list-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#operations .operation-advice-card-stable .tip-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#operations .operations-board-head {
  min-height: 42px !important;
  margin-top: 0 !important;
}

#operations .operations-cards-grid-stable {
  scroll-margin-top: 12px !important;
}

@media (max-width: 980px) {
  #operations .operations-info-row-stable > .card,
  #operations .operations-info-row-no-grow > .card {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  #operations .operations-active-fixed-list,
  #operations .operations-active-fixed-panel .list-stack {
    max-height: 220px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.24 — Compact Operations cards
   Brings Operations closer to the compact Front Businesses density.
-------------------------------------------------------------------------- */
#operations .operations-cards-grid-stable {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#operations .operation-stable-card,
#operations .operations-cards-grid-stable > .entity-card {
  min-height: 0 !important;
  height: auto !important;
  border-radius: 14px !important;
}

#operations .operation-stable-card > img,
#operations .operations-cards-grid-stable > .entity-card > img {
  height: 104px !important;
  max-height: 104px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  object-position: center top !important;
}

#operations .operation-stable-card .entity-card-body {
  gap: 6px !important;
  padding: 10px !important;
}

#operations .operation-stable-card .entity-head {
  gap: 6px !important;
  align-items: start !important;
}

#operations .operation-stable-card .entity-head h4 {
  font-size: 14px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

#operations .operation-stable-card .badge {
  font-size: 9px !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
}

#operations .operation-stable-card p {
  font-size: 11.5px !important;
  line-height: 1.32 !important;
  margin: 0 !important;
}

#operations .operation-stable-card .meta-grid-inline {
  gap: 5px !important;
}

#operations .operation-stable-card .meta-grid-inline > div,
#operations .operation-stable-card .meta-grid-inline .box {
  padding: 5px 6px !important;
  border-radius: 9px !important;
}

#operations .operation-stable-card .meta-grid-inline span {
  font-size: 8px !important;
  letter-spacing: .07em !important;
  line-height: 1.05 !important;
}

#operations .operation-stable-card .meta-grid-inline strong {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
}

#operations .operation-stable-card .requirements-block {
  padding: 7px !important;
  border-radius: 10px !important;
  margin-top: 0 !important;
}

#operations .operation-stable-card .requirements-title {
  font-size: 8.5px !important;
  padding: 3px 6px !important;
  margin-bottom: 5px !important;
}

#operations .operation-stable-card .requirements-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

#operations .operation-stable-card .requirement-chip {
  padding: 4px 5px !important;
  border-radius: 8px !important;
  gap: 1px !important;
}

#operations .operation-stable-card .requirement-chip span {
  font-size: 7px !important;
  letter-spacing: .06em !important;
}

#operations .operation-stable-card .requirement-chip strong {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

#operations .operation-stable-card .requirements-note {
  min-height: 0 !important;
  margin: 5px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

#operations .operation-stable-card .primary.wide {
  min-height: 30px !important;
  padding: 7px 9px !important;
  font-size: 10.5px !important;
  border-radius: 10px !important;
}

#operations .operations-board-head {
  margin: 0 !important;
  min-height: 34px !important;
}

#operations .operations-board-head h3 {
  font-size: 15px !important;
}

@media (min-width: 1350px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.25 — Operations six-across compact cards with no image crop
   Corrects Phase 21.24: cards should be smaller, not wider.
-------------------------------------------------------------------------- */
#operations .operations-cards-grid-stable {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#operations .operation-stable-card,
#operations .operations-cards-grid-stable > .entity-card {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#operations .operation-stable-card > img,
#operations .operations-cards-grid-stable > .entity-card > img {
  height: 82px !important;
  max-height: 82px !important;
  width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 3px !important;
  border-radius: 10px !important;
  background: #050505 !important;
}

#operations .operation-stable-card .entity-card-body {
  padding: 7px !important;
  gap: 4px !important;
}

#operations .operation-stable-card .entity-head {
  gap: 4px !important;
  align-items: start !important;
}

#operations .operation-stable-card .entity-head h4 {
  font-size: 11.5px !important;
  line-height: 1.08 !important;
  margin: 0 !important;
}

#operations .operation-stable-card .badge {
  font-size: 7.5px !important;
  padding: 2px 4px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#operations .operation-stable-card p {
  font-size: 9.5px !important;
  line-height: 1.22 !important;
  margin: 0 !important;
}

#operations .operation-stable-card .meta-grid-inline {
  gap: 3px !important;
}

#operations .operation-stable-card .meta-grid-inline > div,
#operations .operation-stable-card .meta-grid-inline .box {
  padding: 4px 4px !important;
  border-radius: 7px !important;
}

#operations .operation-stable-card .meta-grid-inline span {
  font-size: 6.5px !important;
  letter-spacing: .05em !important;
  line-height: 1 !important;
}

#operations .operation-stable-card .meta-grid-inline strong {
  font-size: 8px !important;
  line-height: 1.05 !important;
}

#operations .operation-stable-card .requirements-block {
  padding: 5px !important;
  border-radius: 8px !important;
}

#operations .operation-stable-card .requirements-title {
  font-size: 7px !important;
  padding: 2px 5px !important;
  margin-bottom: 4px !important;
  letter-spacing: .05em !important;
}

#operations .operation-stable-card .requirements-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3px !important;
}

#operations .operation-stable-card .requirement-chip {
  padding: 3px 4px !important;
  border-radius: 6px !important;
  gap: 1px !important;
}

#operations .operation-stable-card .requirement-chip span {
  font-size: 5.8px !important;
  letter-spacing: .045em !important;
}

#operations .operation-stable-card .requirement-chip strong {
  font-size: 7px !important;
  line-height: 1.04 !important;
}

#operations .operation-stable-card .requirements-note {
  min-height: 0 !important;
  margin: 4px 0 0 !important;
  font-size: 8.5px !important;
  line-height: 1.18 !important;
}

#operations .operation-stable-card .primary.wide {
  min-height: 25px !important;
  padding: 5px 6px !important;
  font-size: 8.5px !important;
  border-radius: 8px !important;
}

/* Keep six across on normal desktop, then step down predictably. */
@media (max-width: 1500px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1250px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.26 — Operations text + natural image fit correction
   Keeps 6 across, increases text, and lets operation art define its own height.
-------------------------------------------------------------------------- */
#operations .operations-cards-grid-stable {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

/* Use the full card width and natural image aspect ratio. No fixed black bay. */
#operations .operation-stable-card > img,
#operations .operations-cards-grid-stable > .entity-card > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: transparent !important;
}

/* Make text about 2pt larger than the previous compact pass. */
#operations .operation-stable-card .entity-card-body {
  padding: 8px !important;
  gap: 5px !important;
}

#operations .operation-stable-card .entity-head h4 {
  font-size: 14px !important;
  line-height: 1.12 !important;
}

#operations .operation-stable-card .badge {
  font-size: 9.5px !important;
  padding: 3px 5px !important;
  line-height: 1.05 !important;
}

#operations .operation-stable-card p {
  font-size: 12px !important;
  line-height: 1.28 !important;
}

#operations .operation-stable-card .meta-grid-inline > div,
#operations .operation-stable-card .meta-grid-inline .box {
  padding: 5px 5px !important;
}

#operations .operation-stable-card .meta-grid-inline span {
  font-size: 8.5px !important;
}

#operations .operation-stable-card .meta-grid-inline strong {
  font-size: 10px !important;
}

#operations .operation-stable-card .requirements-title {
  font-size: 9px !important;
  padding: 3px 6px !important;
}

#operations .operation-stable-card .requirement-chip {
  padding: 4px 5px !important;
}

#operations .operation-stable-card .requirement-chip span {
  font-size: 8px !important;
}

#operations .operation-stable-card .requirement-chip strong {
  font-size: 9.5px !important;
}

#operations .operation-stable-card .requirements-note {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

#operations .operation-stable-card .primary.wide {
  min-height: 29px !important;
  padding: 6px 7px !important;
  font-size: 10.8px !important;
}

/* Keep the same responsive card counts from Phase 21.25. */
@media (max-width: 1500px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1250px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #operations .operations-cards-grid-stable {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.27 — Operations original art, top aligned, proportional image area
-------------------------------------------------------------------------- */
#operations .operation-stable-card > img.operation-card-art,
#operations .operations-cards-grid-stable > .entity-card > img.operation-card-art,
#operations .operation-art-top-align {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 10px 10px 0 0 !important;
}

/* These four images have important subjects near the top; keep the top visible. */
#operations img[data-operation-id="street-collections"],
#operations img[data-operation-id="casino-arrangement"],
#operations img[data-operation-id="city-contract"],
#operations img[data-operation-id="commission-sitdown"],
#operations .operation-art-street-collections,
#operations .operation-art-casino-arrangement,
#operations .operation-art-city-contract,
#operations .operation-art-commission-sitdown {
  object-fit: cover !important;
  object-position: center top !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}


/* --------------------------------------------------------------------------
   Phase 21.28 — Operations card images: use full image, no crop, no stretch
-------------------------------------------------------------------------- */

/* The previous top-align pass still allowed cover-cropping. This overrides it. */
#operations .operation-stable-card > img,
#operations .operations-cards-grid-stable > .entity-card > img,
#operations .operation-card-art,
#operations .operation-full-card-art,
#operations img[data-operation-id="street-collections"],
#operations img[data-operation-id="casino-arrangement"],
#operations img[data-operation-id="city-contract"],
#operations img[data-operation-id="commission-sitdown"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Keep the cards compact while allowing the image's natural height. */
#operations .operation-stable-card .entity-card-body {
  padding-top: 8px !important;
}

/* Fix Operation Advice overflow: the card can scroll internally instead of clipping text. */
#operations .operation-advice-card-stable {
  overflow: hidden !important;
}

#operations .operation-advice-card-stable .tip-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#operations .operation-advice-card-stable .tip-list > div {
  min-height: 0 !important;
  padding: 7px 10px !important;
}

#operations .operation-advice-card-stable .tip-list strong {
  display: block !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
}

#operations .operation-advice-card-stable .tip-list span {
  display: block !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
}


/* --------------------------------------------------------------------------
   Phase 21.30 — Replacement operation art and advice overflow polish
-------------------------------------------------------------------------- */
#operations .operation-replacement-art,
#operations img[data-operation-id="street-collections"],
#operations img[data-operation-id="casino-arrangement"],
#operations img[data-operation-id="city-contract"],
#operations img[data-operation-id="commission-sitdown"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Operation Advice overflow fix */
#operations .operation-advice-card-stable {
  overflow: hidden !important;
}

#operations .operation-advice-card-stable .tip-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#operations .operation-advice-card-stable .tip-list > div {
  min-height: 0 !important;
  padding: 7px 10px !important;
}

#operations .operation-advice-card-stable .tip-list span {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.28 !important;
}


/* --------------------------------------------------------------------------
   Phase 21.32 — Missions page no-jump layout
   Keeps Active Mission Stages from growing and pushing Mission cards downward.
-------------------------------------------------------------------------- */
#missions .missions-active-fixed-panel {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#missions .missions-active-fixed-panel .section-head {
  flex: 0 0 auto !important;
}

#missions .missions-active-fixed-list,
#missions .missions-active-fixed-panel .list-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#missions .missions-grid-stable,
#missions .mission-chain-grid {
  align-items: stretch !important;
  scroll-margin-top: 12px !important;
}

#missions .mission-chain-card {
  min-height: 0 !important;
}

@media (max-width: 760px) {
  #missions .missions-active-fixed-panel {
    height: auto !important;
    max-height: none !important;
  }

  #missions .missions-active-fixed-list,
  #missions .missions-active-fixed-panel .list-stack {
    max-height: 220px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.33 — Missions stable panel, without breaking mission buttons
-------------------------------------------------------------------------- */
#missions .missions-active-fixed-panel {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#missions .missions-active-fixed-list,
#missions .missions-active-fixed-panel .list-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#missions .missions-grid-stable,
#missions .mission-chain-grid {
  align-items: stretch !important;
  scroll-margin-top: 12px !important;
}


/* --------------------------------------------------------------------------
   Phase 21.34 — Missions hard no-jump
   Fixed sizing applies directly to the raw Missions structure before JS class
   patching, so the active panel cannot resize and push cards down.
-------------------------------------------------------------------------- */
#missions .page-stack > .card.section-card,
#missions .missions-active-fixed-panel {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#missions .page-stack > .card.section-card .section-head,
#missions .missions-active-fixed-panel .section-head {
  flex: 0 0 auto !important;
}

#missions .page-stack > .card.section-card .list-stack,
#missions .missions-active-fixed-list,
#missions .missions-active-fixed-panel .list-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#missions .mission-chain-grid,
#missions .missions-grid-stable {
  align-items: stretch !important;
  scroll-margin-top: 12px !important;
}

#missions .mission-chain-card {
  contain: layout paint !important;
}

@media (max-width: 760px) {
  #missions .page-stack > .card.section-card,
  #missions .missions-active-fixed-panel {
    height: auto !important;
    max-height: none !important;
  }

  #missions .page-stack > .card.section-card .list-stack,
  #missions .missions-active-fixed-list,
  #missions .missions-active-fixed-panel .list-stack {
    max-height: 220px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.35 — Missions buttons working, stable active panel
   No event interception. Inline Mission buttons call the real function.
-------------------------------------------------------------------------- */
#missions .page-stack > .card.section-card,
#missions .missions-active-fixed-panel {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#missions .page-stack > .card.section-card .section-head,
#missions .missions-active-fixed-panel .section-head {
  flex: 0 0 auto !important;
}

#missions .page-stack > .card.section-card .list-stack,
#missions .missions-active-fixed-list,
#missions .missions-active-fixed-panel .list-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#missions .mission-chain-grid,
#missions .missions-grid-stable {
  align-items: stretch !important;
  scroll-margin-top: 12px !important;
}

#missions .mission-chain-card {
  contain: layout paint !important;
}


/* --------------------------------------------------------------------------
   Phase 21.36 — Compact two-card page headers
-------------------------------------------------------------------------- */
#operations .phase2136-summary-row,
#missions .phase2136-summary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#operations .phase2136-compact-hero,
#missions .phase2136-compact-hero,
#operations .phase2136-side-active-card,
#missions .phase2136-side-active-card {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#operations .phase2136-compact-hero .section-hero-copy,
#missions .phase2136-compact-hero .section-hero-copy {
  padding: 14px !important;
  gap: 6px !important;
}

#operations .phase2136-compact-hero .eyebrow,
#missions .phase2136-compact-hero .eyebrow {
  margin: 0 0 2px !important;
  font-size: 10px !important;
}

#operations .phase2136-compact-hero h3,
#missions .phase2136-compact-hero h3 {
  font-size: 19px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

#operations .phase2136-compact-hero .hero-description,
#missions .phase2136-compact-hero .hero-description {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

#operations .phase2136-compact-hero .hero-stats-grid,
#missions .phase2136-compact-hero .hero-stats-grid {
  gap: 6px !important;
  margin-top: 6px !important;
}

#operations .phase2136-compact-hero .hero-stat,
#missions .phase2136-compact-hero .hero-stat {
  padding: 6px !important;
  min-height: 0 !important;
}

#operations .phase2136-compact-hero .hero-stat span,
#missions .phase2136-compact-hero .hero-stat span {
  font-size: 8px !important;
}

#operations .phase2136-compact-hero .hero-stat strong,
#missions .phase2136-compact-hero .hero-stat strong {
  font-size: 13px !important;
}

#operations .phase2136-compact-hero .hero-stat em,
#missions .phase2136-compact-hero .hero-stat em {
  font-size: 8px !important;
}

#operations .phase2136-side-active-card .section-head,
#missions .phase2136-side-active-card .section-head {
  flex: 0 0 auto !important;
}

#operations .phase2136-side-active-card .list-stack,
#missions .phase2136-side-active-card .list-stack,
#operations .missions-active-fixed-list,
#missions .missions-active-fixed-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

/* Remove old guide/advice cards if an older enhancer tries to put them back. */
#operations .operation-advice-card-stable,
#operations .operations-guide-card-stable {
  display: none !important;
}

@media (max-width: 900px) {
  #operations .phase2136-summary-row,
  #missions .phase2136-summary-row {
    grid-template-columns: 1fr !important;
  }

  #operations .phase2136-compact-hero,
  #missions .phase2136-compact-hero,
  #operations .phase2136-side-active-card,
  #missions .phase2136-side-active-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #operations .phase2136-side-active-card .list-stack,
  #missions .phase2136-side-active-card .list-stack {
    max-height: 220px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.37 — Crew setup reset card
-------------------------------------------------------------------------- */
#crew .crew-test-reset-card {
  border-color: rgba(255, 115, 115, 0.35) !important;
}

#crew .crew-test-reset-card .section-head {
  align-items: center !important;
}

#crew .crew-test-reset-card h3 {
  margin-bottom: 2px !important;
}

#crew .crew-test-reset-card .muted {
  margin: 0 !important;
}


/* --------------------------------------------------------------------------
   Phase 21.38 — Page header margin/row cleanup
   Match Dashboard hero spacing: only the card padding, no extra nested padding.
-------------------------------------------------------------------------- */
#operations .phase2136-summary-row,
#missions .phase2136-summary-row,
#operations .phase2138-summary-row,
#missions .phase2138-summary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#operations .phase2136-compact-hero,
#missions .phase2136-compact-hero,
#operations .phase2138-compact-hero,
#missions .phase2138-compact-hero,
#operations .phase2136-side-active-card,
#missions .phase2136-side-active-card,
#operations .phase2138-side-active-card,
#missions .phase2138-side-active-card {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#operations .phase2136-compact-hero .section-hero-copy,
#missions .phase2136-compact-hero .section-hero-copy,
#operations .phase2138-compact-hero .section-hero-copy,
#missions .phase2138-compact-hero .section-hero-copy {
  padding: 0 !important;
  gap: 0 !important;
}

#operations .phase2136-compact-hero .eyebrow,
#missions .phase2136-compact-hero .eyebrow,
#operations .phase2138-compact-hero .eyebrow,
#missions .phase2138-compact-hero .eyebrow {
  margin: 0 0 8px !important;
  font-size: 10px !important;
}

#operations .phase2136-compact-hero h3,
#missions .phase2136-compact-hero h3,
#operations .phase2138-compact-hero h3,
#missions .phase2138-compact-hero h3 {
  font-size: 24px !important;
  line-height: 1.05 !important;
  margin: 0 0 8px !important;
}

#operations .phase2136-compact-hero .hero-description,
#missions .phase2136-compact-hero .hero-description,
#operations .phase2138-compact-hero .hero-description,
#missions .phase2138-compact-hero .hero-description {
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

#operations .phase2136-compact-hero .hero-stats-grid,
#missions .phase2136-compact-hero .hero-stats-grid,
#operations .phase2138-compact-hero .hero-stats-grid,
#missions .phase2138-compact-hero .hero-stats-grid {
  gap: 8px !important;
  margin-top: 12px !important;
}

#operations .phase2136-side-active-card .list-stack,
#missions .phase2136-side-active-card .list-stack,
#operations .phase2138-side-active-card .list-stack,
#missions .phase2138-side-active-card .list-stack {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}

#operations .operation-advice-card-stable,
#operations .operations-guide-card-stable,
#crew .crew-test-reset-card {
  display: none !important;
}

#admin .admin-crew-test-reset-card {
  border-color: rgba(255, 115, 115, 0.35) !important;
}

@media (max-width: 900px) {
  #operations .phase2136-summary-row,
  #missions .phase2136-summary-row,
  #operations .phase2138-summary-row,
  #missions .phase2138-summary-row {
    grid-template-columns: 1fr !important;
  }

  #operations .phase2136-compact-hero,
  #missions .phase2136-compact-hero,
  #operations .phase2138-compact-hero,
  #missions .phase2138-compact-hero,
  #operations .phase2136-side-active-card,
  #missions .phase2136-side-active-card,
  #operations .phase2138-side-active-card,
  #missions .phase2138-side-active-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  #operations .phase2136-side-active-card .list-stack,
  #missions .phase2136-side-active-card .list-stack,
  #operations .phase2138-side-active-card .list-stack,
  #missions .phase2138-side-active-card .list-stack {
    max-height: 220px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.45 — Audited Crew renderer + fixed two-card hero rows
-------------------------------------------------------------------------- */
#operations .phase2138-summary-row,
#missions .phase2138-summary-row,
#operations .phase2136-summary-row,
#missions .phase2136-summary-row {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#crew .phase2145-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}
#crew .phase2145-card { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
#crew .phase2145-card-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; }
#crew .phase2145-req-card { margin: 8px 0 !important; }
#crew .phase2145-req-card .requirements-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
#crew .phase2145-req-card .requirement-chip { padding: 6px 7px !important; }
#crew .phase2145-req-card .requirement-chip span { font-size: 8.5px !important; }
#crew .phase2145-req-card .requirement-chip strong { font-size: 10px !important; line-height: 1.15 !important; white-space: normal !important; }
#crew .phase2145-req-card .requirements-note { margin-top: 6px !important; font-size: 10.5px !important; line-height: 1.25 !important; }
#crew .phase2145-spacer { flex: 1 1 auto !important; min-height: 10px !important; }
#crew .phase2145-action-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(96px, auto) !important; gap: 8px !important; align-items: end !important; margin-top: auto !important; }
#crew .phase2145-action-row label { display: grid !important; gap: 4px !important; margin: 0 !important; color: var(--muted) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .08em !important; }
#crew .phase2145-input-wrap { position: relative !important; display: block !important; width: 100% !important; height: 34px !important; }
#crew .phase2145-qty { width: 100% !important; height: 34px !important; min-height: 34px !important; box-sizing: border-box !important; border-radius: 10px !important; padding: 6px 31px 6px 10px !important; background: rgba(0,0,0,.84) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; }
#crew .phase2145-arrows { position: absolute !important; right: 5px !important; top: 5px !important; width: 18px !important; height: 24px !important; display: grid !important; grid-template-rows: 11px 11px !important; gap: 2px !important; z-index: 50 !important; pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; }
#crew .phase2145-arrows button { all: unset !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 11px !important; background: #000 !important; border: 1px solid rgba(255,255,255,.24) !important; border-radius: 4px !important; color: #fff !important; font-size: 8px !important; line-height: 8px !important; cursor: pointer !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
#crew .phase2145-arrows button:hover { background: #111 !important; border-color: rgba(212,164,74,.75) !important; }
#crew .phase2145-recruit-btn { height: 34px !important; min-height: 34px !important; padding: 6px 12px !important; margin: 0 !important; white-space: nowrap !important; }
#crew .phase2145-hire-btn { margin-top: auto !important; pointer-events: auto !important; }
#crew .phase2145-error { display: none !important; margin-top: 7px !important; padding: 7px 9px !important; border-radius: 8px !important; border: 1px solid rgba(255,115,115,.38) !important; background: rgba(80,12,12,.32) !important; color: #ffd6d6 !important; font-size: 11px !important; line-height: 1.25 !important; }
#crew .phase2145-error.show { display: block !important; }
@media (max-width: 1200px) { #crew .phase2145-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) { #operations .phase2138-summary-row, #missions .phase2138-summary-row, #operations .phase2136-summary-row, #missions .phase2136-summary-row { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) { #crew .phase2145-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { #crew .phase2145-grid { grid-template-columns: 1fr !important; } #crew .phase2145-action-row { grid-template-columns: 1fr !important; } }


/* --------------------------------------------------------------------------
   Phase 21.46 — Crew arrows, borders, and Missions headline spacing
-------------------------------------------------------------------------- */
/* Mission Chains headline: normalize spacing to match the other headline cards. */
#missions .phase2138-summary-row,
#missions .phase2136-summary-row {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#missions .phase2138-compact-hero,
#missions .phase2136-compact-hero {
  padding: 16px !important;
  margin: 0 !important;
  gap: 12px !important;
}

#missions .phase2138-compact-hero .section-hero-copy,
#missions .phase2136-compact-hero .section-hero-copy {
  padding: 0 !important;
  margin: 0 !important;
}

#missions .phase2138-compact-hero .hero-stats-grid,
#missions .phase2136-compact-hero .hero-stats-grid {
  margin-top: 10px !important;
  gap: 8px !important;
}

#missions .phase2138-compact-hero .hero-stat,
#missions .phase2136-compact-hero .hero-stat {
  padding: 8px !important;
}

/* Restore visible card borders on the audited Crew renderer. */
#crew .phase2145-card,
#crew .phase2144-card,
#crew .phase2143-crew-card {
  border: 1px solid rgba(212, 164, 74, .38) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset !important;
}

#crew .phase2145-card:hover,
#crew .phase2144-card:hover,
#crew .phase2143-crew-card:hover {
  border-color: rgba(212, 164, 74, .62) !important;
}

#crew .phase2145-card > img,
#crew .phase2144-card > img,
#crew .phase2143-crew-card > img {
  border-radius: 10px 10px 0 0 !important;
}

/* Keep the white-on-black arrow buttons visible and clickable. */
#crew .phase2145-input-wrap,
#crew .phase2144-input-wrap,
#crew .phase2143-qty-wrap,
#crew .phase2142-input-wrap {
  position: relative !important;
  overflow: visible !important;
}

#crew .phase2145-arrows,
#crew .phase2144-arrows,
#crew .phase2143-spinner,
#crew .phase2142-spinner {
  position: absolute !important;
  right: 5px !important;
  top: 5px !important;
  width: 18px !important;
  height: 24px !important;
  display: grid !important;
  grid-template-rows: 11px 11px !important;
  gap: 2px !important;
  z-index: 999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#crew .phase2145-arrows button,
#crew .phase2144-arrows button,
#crew .phase2143-spinner-btn,
#crew .phase2142-spinner-btn {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 11px !important;
  min-width: 18px !important;
  min-height: 11px !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 4px !important;
  font-size: 8px !important;
  line-height: 8px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#crew .phase2145-arrows button:hover,
#crew .phase2144-arrows button:hover,
#crew .phase2143-spinner-btn:hover,
#crew .phase2142-spinner-btn:hover {
  background: #111 !important;
  color: #fff !important;
  border-color: rgba(212,164,74,.75) !important;
}

#crew .phase2145-qty,
#crew .phase2144-qty,
#crew .phase2143-qty-input,
#crew .phase2142-qty-input,
#crew .phase2139-recruit-qty {
  padding-right: 31px !important;
  background: rgba(0,0,0,.84) !important;
  color: #fff !important;
}


/* --------------------------------------------------------------------------
   Phase 21.47 — Crew arrow hold feedback
-------------------------------------------------------------------------- */
#crew .phase2145-arrows button.phase2147-holding,
#crew .phase2144-arrows button.phase2147-holding,
#crew .phase2143-spinner-btn.phase2147-holding,
#crew .phase2142-spinner-btn.phase2147-holding {
  background: #171717 !important;
  border-color: rgba(212,164,74,.9) !important;
  color: #fff !important;
  transform: translateY(0) !important;
}


/* Phase 21.49 — preserved Crew amount rows */
#crew .phase2149-action-row { margin-top: auto !important; }


/* --------------------------------------------------------------------------
   Phase 21.51 — Mission Chains headline padding fix
   Match the tighter Operations Bureau / Dashboard headline-card spacing.
-------------------------------------------------------------------------- */
#missions .phase2151-mission-chains-card,
#missions .phase2138-mission-hero-card.phase2151-mission-chains-card,
#missions .phase2136-mission-hero-card.phase2151-mission-chains-card {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#missions .phase2151-mission-chains-content,
#missions .phase2151-mission-chains-card .section-hero-content,
#missions .phase2151-mission-chains-card .hero-content,
#missions .phase2151-mission-chains-card .card-body,
#missions .phase2151-mission-chains-card .section-card-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

#missions .phase2151-mission-chains-card .section-hero-text,
#missions .phase2151-mission-chains-card .hero-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 760px) {
  #missions .phase2151-mission-chains-card,
  #missions .phase2138-mission-hero-card.phase2151-mission-chains-card,
  #missions .phase2136-mission-hero-card.phase2151-mission-chains-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.52 — Mission Chains exact spacing match to Operations Bureau
-------------------------------------------------------------------------- */
#missions .phase2152-mission-chains-tight,
#missions .missions-summary-row2138 > .section-hero:first-child,
#missions .missions-summary-row2136 > .section-hero:first-child,
#missions .phase2138-summary-row > .section-hero:first-child,
#missions .phase2136-summary-row > .section-hero:first-child {
  padding: 11px !important;
  margin: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

#missions .phase2152-mission-chains-copy,
#missions .phase2152-mission-chains-tight .section-hero-copy,
#missions .missions-summary-row2138 > .section-hero:first-child .section-hero-copy,
#missions .missions-summary-row2136 > .section-hero:first-child .section-hero-copy,
#missions .phase2138-summary-row > .section-hero:first-child .section-hero-copy,
#missions .phase2136-summary-row > .section-hero:first-child .section-hero-copy {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#missions .phase2152-mission-chains-stats,
#missions .phase2152-mission-chains-tight .hero-stats-grid,
#missions .missions-summary-row2138 > .section-hero:first-child .hero-stats-grid,
#missions .missions-summary-row2136 > .section-hero:first-child .hero-stats-grid,
#missions .phase2138-summary-row > .section-hero:first-child .hero-stats-grid,
#missions .phase2136-summary-row > .section-hero:first-child .hero-stats-grid {
  margin-top: 12px !important;
  gap: 8px !important;
}

#missions .phase2152-mission-chains-stat,
#missions .phase2152-mission-chains-tight .hero-stat,
#missions .missions-summary-row2138 > .section-hero:first-child .hero-stat,
#missions .missions-summary-row2136 > .section-hero:first-child .hero-stat,
#missions .phase2138-summary-row > .section-hero:first-child .hero-stat,
#missions .phase2136-summary-row > .section-hero:first-child .hero-stat {
  padding: 12px !important;
}

@media (max-width: 760px) {
  #missions .phase2152-mission-chains-tight,
  #missions .missions-summary-row2138 > .section-hero:first-child,
  #missions .missions-summary-row2136 > .section-hero:first-child,
  #missions .phase2138-summary-row > .section-hero:first-child,
  #missions .phase2136-summary-row > .section-hero:first-child {
    padding: 11px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.53 — Missions top row alignment
   Make Mission Chains + Active Mission Stages align exactly like
   Operations Bureau + Active Operations.
-------------------------------------------------------------------------- */
#missions .phase2153-missions-top-row,
#missions .missions-summary-row2138,
#missions .missions-summary-row2136 {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  justify-self: stretch !important;
}

#missions .phase2153-missions-top-row > .phase2153-mission-chains-card,
#missions .phase2153-missions-top-row > .phase2153-active-missions-card,
#missions .missions-summary-row2138 > .section-hero:first-child,
#missions .missions-summary-row2136 > .section-hero:first-child,
#missions .missions-summary-row2138 > .phase2138-side-active-card,
#missions .missions-summary-row2136 > .phase2136-side-active-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Undo the previous Mission-only padding patch so the card matches Operations. */
#missions .phase2153-mission-chains-card,
#missions .phase2153-mission-chains-card.phase2152-mission-chains-tight,
#missions .missions-summary-row2138 > .section-hero:first-child,
#missions .missions-summary-row2136 > .section-hero:first-child {
  padding: 16px !important;
  gap: 20px !important;
}

/* Inner content should not create extra side spacing beyond the card padding. */
#missions .phase2153-mission-chains-card .section-hero-copy,
#missions .missions-summary-row2138 > .section-hero:first-child .section-hero-copy,
#missions .missions-summary-row2136 > .section-hero:first-child .section-hero-copy {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#missions .phase2153-mission-chains-card .hero-stats-grid,
#missions .missions-summary-row2138 > .section-hero:first-child .hero-stats-grid,
#missions .missions-summary-row2136 > .section-hero:first-child .hero-stats-grid {
  margin-top: 12px !important;
  gap: 8px !important;
}

#missions .phase2153-mission-chains-card .hero-stat,
#missions .missions-summary-row2138 > .section-hero:first-child .hero-stat,
#missions .missions-summary-row2136 > .section-hero:first-child .hero-stat {
  padding: 12px !important;
}

@media (max-width: 900px) {
  #missions .phase2153-missions-top-row,
  #missions .missions-summary-row2138,
  #missions .missions-summary-row2136 {
    grid-template-columns: 1fr !important;
  }

  #missions .phase2153-missions-top-row > .phase2153-mission-chains-card,
  #missions .phase2153-missions-top-row > .phase2153-active-missions-card,
  #missions .missions-summary-row2138 > .section-hero:first-child,
  #missions .missions-summary-row2136 > .section-hero:first-child,
  #missions .missions-summary-row2138 > .phase2138-side-active-card,
  #missions .missions-summary-row2136 > .phase2136-side-active-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.54: Family multiplayer audit cleanup
-------------------------------------------------------------------------- */
#family .family-page-phase2154 .section-hero {
  margin-bottom: 0 !important;
}

#family .phase2154-family-status-card {
  width: 100% !important;
}

#family .phase2154-family-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#family .phase2154-family-roster-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#family .phase2154-family-member-card {
  min-height: 0 !important;
}

#family .phase2154-member-access-grid {
  margin-top: 8px !important;
}

#family .phase2154-member-note {
  font-size: 10px !important;
  margin-top: 7px !important;
}

#family .phase2154-family-controls {
  margin-top: 8px !important;
}

#family .phase2154-family-management-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#family .phase2154-family-management-card .family-management-panel {
  min-width: 0 !important;
}

#family .phase2154-permission-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#family .phase2154-permission-card p {
  min-height: 42px !important;
}

#family .pvp-phase9-family-guide,
#family .family-top-info-grid-clean:empty {
  display: none !important;
}

@media (max-width: 1180px) {
  #family .phase2154-family-status-grid,
  #family .phase2154-family-roster-grid,
  #family .phase2154-family-management-grid,
  #family .phase2154-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #family .phase2154-family-status-grid,
  #family .phase2154-family-roster-grid,
  #family .phase2154-family-management-grid,
  #family .phase2154-permission-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Family one-line multiplayer cards + automatic sync cleanup
-------------------------------------------------------------------------- */
#family .family-page-phase2154 .section-hero .hero-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#family .family-page-phase2154 .section-hero .hero-stat {
  min-width: 0 !important;
  padding: 9px 7px !important;
  border-radius: 12px !important;
}

#family .family-page-phase2154 .section-hero .hero-stat span,
#family .family-page-phase2154 .phase2154-family-status-grid span {
  font-size: 8px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#family .family-page-phase2154 .section-hero .hero-stat strong,
#family .family-page-phase2154 .phase2154-family-status-grid strong {
  font-size: clamp(10px, 1.05vw, 13px) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#family .family-page-phase2154 .section-hero .hero-stat em {
  font-size: 9px !important;
  line-height: 1.2 !important;
  min-height: 22px !important;
}

#family .phase2154-family-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

#family .phase2154-family-status-grid > div,
#family .phase2154-family-status-grid > .box {
  min-width: 0 !important;
  padding: 8px 6px !important;
}

#family .phase2155-family-management-grid,
#family .phase2154-family-management-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1180px) {
  #family .family-page-phase2154 .section-hero .hero-stats-grid,
  #family .phase2154-family-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #family .phase2155-family-management-grid,
  #family .phase2154-family-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #family .family-page-phase2154 .section-hero .hero-stats-grid,
  #family .phase2154-family-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #family .family-page-phase2154 .section-hero .hero-stat,
  #family .phase2154-family-status-grid > div,
  #family .phase2154-family-status-grid > .box {
    padding: 6px 4px !important;
    border-radius: 10px !important;
  }

  #family .family-page-phase2154 .section-hero .hero-stat span,
  #family .family-page-phase2154 .phase2154-family-status-grid span {
    font-size: 6.8px !important;
    letter-spacing: .04em !important;
  }

  #family .family-page-phase2154 .section-hero .hero-stat strong,
  #family .family-page-phase2154 .phase2154-family-status-grid strong {
    font-size: 8.5px !important;
  }

  #family .family-page-phase2154 .section-hero .hero-stat em {
    font-size: 7.2px !important;
    min-height: 18px !important;
  }

  #family .phase2155-family-management-grid,
  #family .phase2154-family-management-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.58: Family invite layout stability
   Keep the Family Invites & Members card from briefly collapsing while a new
   invite code is generated and the Family page silently refreshes.
-------------------------------------------------------------------------- */
body.phase2158-family-invite-layout-lock #family .phase2154-family-management-card,
body.phase2158-family-invite-layout-lock #family .family-management-card {
  min-height: var(--phase2158-family-management-lock-height, 0px) !important;
}

#family .phase2158-invite-action-btn {
  min-width: 86px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#family .family-cloud-invite-row.compact {
  min-height: 34px !important;
  align-items: stretch !important;
}

#family .family-cloud-invite-row.compact > * {
  min-height: 100% !important;
}

/* --------------------------------------------------------------------------
   Phase 21.62: Family add-member visible feedback
-------------------------------------------------------------------------- */
#family .family-add-status {
  grid-column: 1 / -1 !important;
  min-height: 18px !important;
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
#family .family-add-status.status-error {
  color: #ffb2a8 !important;
}
#family .family-add-status.status-success {
  color: #bfe7b5 !important;
}

/* Phase 21.65: Auth login stability */
.auth-form .auth-action-status {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: .88rem;
  line-height: 1.35;
}
.auth-form .auth-action-status.hidden {
  display: none !important;
}
.auth-form .auth-action-status.error {
  border-color: rgba(240, 90, 90, .45);
  color: #ffd3d3;
}
.auth-form .auth-action-status.success {
  border-color: rgba(85, 200, 120, .45);
  color: #d8ffe4;
}
.auth-form .auth-action-status.info {
  border-color: rgba(207, 167, 79, .45);
}

/* Phase 21.66: Family roster sync / leave control */
#family .phase2166-family-leave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#family .phase2166-family-leave-row div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#family .phase2166-family-leave-row span {
  color: var(--muted);
  font-size: .9rem;
}
@media (max-width: 720px) {
  #family .phase2166-family-leave-row {
    align-items: stretch;
    flex-direction: column;
  }
  #family .phase2166-family-leave-row button {
    width: 100%;
  }
}


/* Phase 21.67: Leave Family as fourth Family Invites & Members card */
#family .phase2166-family-leave-panel {
  min-width: 0 !important;
}
#family .phase2166-family-leave-panel button {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Phase 21.68: Family compact add row, deliberate rank assignment, crew cap stability
-------------------------------------------------------------------------- */
#family .phase2168-family-add-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

#family .phase2168-family-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

#family .phase2168-family-add-row #familyAddUsername {
  min-width: 0 !important;
  width: 100% !important;
}

#family #familyAddExistingUserBtn {
  width: auto !important;
  min-width: 58px !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
}

#family .phase2168-family-add-grid #familyAddRole {
  min-height: 34px !important;
  height: 34px !important;
}

#family .phase2168-family-controls {
  grid-template-columns: minmax(120px, 1fr) auto auto !important;
  align-items: end !important;
}

#family .phase2168-assign-rank-btn {
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}

#crew .crew-compact-card button.primary.wide:disabled {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Phase 21.69: Family Add Existing User single-row controls + crew cap no-twitch
-------------------------------------------------------------------------- */
#family .phase2169-family-add-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

#family .phase2169-family-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(86px, .72fr) !important;
  gap: 7px !important;
  align-items: center !important;
}

#family .phase2169-family-add-row #familyAddUsername,
#family .phase2169-family-add-row #familyAddRole {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
}

#family .phase2169-family-add-row #familyAddExistingUserBtn {
  width: auto !important;
  min-width: 52px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  justify-content: center !important;
}

#family .phase2169-family-add-grid #familyAddExistingUserStatus {
  min-height: 14px !important;
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  #family .phase2169-family-add-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  #family .phase2169-family-add-row #familyAddRole {
    grid-column: 1 / -1 !important;
  }
}

#crew .phase2149-recruit-btn,
#crew .phase2145-recruit-btn,
#crew .phase2149-action-row,
#crew .phase2145-action-row,
#crew .phase2149-input-wrap,
#crew .phase2145-input-wrap {
  transform: none !important;
  transition-property: background, border-color, color, box-shadow !important;
}


/* --------------------------------------------------------------------------
   Phase 21.70: tighter Family Add Existing User row
-------------------------------------------------------------------------- */
#family .phase2169-family-add-row {
  grid-template-columns: minmax(0, 1fr) 44px minmax(76px, .5fr) !important;
  gap: 6px !important;
}

#family .phase2169-family-add-row #familyAddExistingUserBtn {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 6px 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

#family .phase2169-family-add-row #familyAddUsername,
#family .phase2169-family-add-row #familyAddRole {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 12px !important;
}

#family .phase2169-family-add-row #familyAddRole {
  padding-left: 7px !important;
  padding-right: 22px !important;
}


/* --------------------------------------------------------------------------
   Phase 21.71: final Family Add row order + single Crew cap message
-------------------------------------------------------------------------- */
#family .phase2171-family-add-row,
#family .phase2169-family-add-row.phase2171-family-add-row {
  grid-template-columns: minmax(74px, 1fr) minmax(70px, .58fr) 42px !important;
  gap: 5px !important;
  align-items: center !important;
}

#family .phase2171-family-add-row #familyAddUsername,
#family .phase2171-family-add-row #familyAddRole {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  font-size: 11px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#family .phase2171-family-add-row #familyAddUsername {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

#family .phase2171-family-add-row #familyAddRole {
  padding-left: 6px !important;
  padding-right: 18px !important;
}

#family .phase2171-family-add-row #familyAddExistingUserBtn,
#family .phase2171-family-add-row .phase2171-family-add-btn {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  #family .phase2171-family-add-row,
  #family .phase2169-family-add-row.phase2171-family-add-row {
    grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr) 42px !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.72: hard one-line Family Add Existing User controls
-------------------------------------------------------------------------- */
#family .phase2172-family-add-grid {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
}

#family .phase2172-family-add-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#family .phase2172-family-add-row #familyAddUsername {
  flex: 1 1 112px !important;
  min-width: 86px !important;
  width: auto !important;
  max-width: none !important;
  height: 31px !important;
  min-height: 31px !important;
  font-size: 11px !important;
  padding: 5px 7px !important;
}

#family .phase2172-family-add-row #familyAddRole {
  flex: 0 0 92px !important;
  width: 92px !important;
  min-width: 82px !important;
  max-width: 92px !important;
  height: 31px !important;
  min-height: 31px !important;
  font-size: 11px !important;
  padding: 5px 18px 5px 7px !important;
}

#family .phase2172-family-add-row #familyAddExistingUserBtn,
#family .phase2172-family-add-row .phase2171-family-add-btn {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 5px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#family .phase2172-family-add-grid #familyAddExistingUserStatus {
  display: block !important;
  min-height: 14px !important;
  margin-top: 7px !important;
  grid-column: auto !important;
}

@media (max-width: 420px) {
  #family .phase2172-family-add-row {
    gap: 5px !important;
  }
  #family .phase2172-family-add-row #familyAddUsername {
    min-width: 76px !important;
  }
  #family .phase2172-family-add-row #familyAddRole {
    flex-basis: 84px !important;
    width: 84px !important;
    max-width: 84px !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.73: Crew no-twitch safe clicks + Family invite/add compact controls
-------------------------------------------------------------------------- */
#family .phase2172-family-add-grid.compact,
#family .family-management-card .phase2172-family-add-grid.compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#family .phase2172-family-add-row,
#family .family-management-card .phase2172-family-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 68px 52px !important;
  grid-auto-flow: column !important;
  gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

#family .phase2172-family-add-row > * {
  min-width: 0 !important;
  margin: 0 !important;
}

#family .phase2172-family-add-row #familyAddUsername {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 5px 7px !important;
  font-size: 11px !important;
}

#family .phase2172-family-add-row #familyAddRole {
  grid-column: 2 !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 5px 17px 5px 7px !important;
  font-size: 11px !important;
}

#family .phase2172-family-add-row #familyAddExistingUserBtn,
#family .phase2172-family-add-row .phase2171-family-add-btn {
  grid-column: 3 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 5px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#family .family-cloud-invite-row.compact {
  grid-template-columns: minmax(0, .72fr) 42px 84px !important;
  gap: 5px !important;
  align-items: center !important;
}

#family .family-cloud-invite-row.compact .family-invite-code {
  min-width: 0 !important;
  padding: 5px 6px !important;
}

#family .family-cloud-invite-row.compact button,
#family .family-page-join-grid.compact button,
#family .phase2172-family-add-row #familyAddExistingUserBtn {
  height: 31px !important;
  min-height: 31px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#family .family-page-join-grid.compact {
  grid-template-columns: minmax(0, 1fr) 52px !important;
  gap: 5px !important;
}

#family .family-page-join-grid.compact button {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  padding: 5px 0 !important;
  justify-content: center !important;
}

#family .phase2158-invite-action-btn {
  min-width: 84px !important;
  width: 84px !important;
  max-width: 84px !important;
  padding: 5px 0 !important;
  font-size: 11px !important;
  justify-content: center !important;
}

@media (max-width: 420px) {
  #family .phase2172-family-add-row,
  #family .family-management-card .phase2172-family-add-row {
    grid-template-columns: minmax(0, 1fr) 64px 48px !important;
  }
  #family .phase2172-family-add-row #familyAddRole {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
  #family .phase2172-family-add-row #familyAddExistingUserBtn,
  #family .phase2172-family-add-row .phase2171-family-add-btn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.74: Crew sidebar no-rerender stability + aligned Family controls
-------------------------------------------------------------------------- */
#crew .phase2149-action-row,
#crew .phase2145-action-row {
  min-height: 44px !important;
  contain: layout !important;
}

#crew .phase2149-recruit-btn,
#crew .phase2145-recruit-btn,
#crew input[id^="crewQty_"] {
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}

#family .phase2174-family-management-card .phase2174-family-management-grid,
#family .phase2174-family-management-grid {
  align-items: stretch !important;
}

#family .phase2174-family-panel,
#family .phase2166-family-leave-panel {
  display: grid !important;
  grid-template-rows: auto 36px 31px auto !important;
  align-content: start !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#family .phase2174-family-panel h4,
#family .phase2166-family-leave-panel h4 {
  margin: 0 !important;
  min-height: 15px !important;
  line-height: 1.15 !important;
}

#family .phase2174-family-panel > p.muted,
#family .phase2166-family-leave-panel > p.muted {
  margin: 0 !important;
  min-height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
  line-height: 1.25 !important;
}

#family .phase2174-invite-row,
#family .family-cloud-invite-row.compact.phase2174-invite-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 46px 94px !important;
  gap: 4px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 31px !important;
}

#family .phase2174-invite-row .family-invite-code,
#family .family-cloud-invite-row.compact.phase2174-invite-row .family-invite-code {
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  min-height: 31px !important;
  padding: 5px 8px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 6px !important;
  align-items: center !important;
}

#family .phase2174-invite-row .family-invite-code span,
#family .phase2174-invite-row .family-invite-code strong {
  font-size: 11px !important;
  line-height: 1 !important;
  min-width: 0 !important;
}

#family .phase2174-invite-row .family-invite-code strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#family .phase2174-join-row,
#family .family-page-join-grid.compact.phase2174-join-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  gap: 5px !important;
  align-items: center !important;
  min-height: 31px !important;
}

#family .phase2174-add-grid,
#family .family-add-grid.compact.phase2174-add-grid {
  display: grid !important;
  grid-template-rows: 31px auto !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#family .phase2174-add-row,
#family .phase2172-family-add-row.phase2174-add-row,
#family .family-management-card .phase2172-family-add-row.phase2174-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px 56px !important;
  grid-auto-flow: row !important;
  gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  min-height: 31px !important;
}

#family .phase2174-join-row .inline-input,
#family .phase2174-add-row #familyAddUsername,
#family .phase2174-add-row #familyAddRole,
#family .phase2174-invite-row .family-invite-code {
  height: 31px !important;
  min-height: 31px !important;
  box-sizing: border-box !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

#family .phase2174-add-row #familyAddUsername {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 5px 8px !important;
}

#family .phase2174-add-row #familyAddRole {
  grid-column: 2 !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 5px 18px 5px 8px !important;
}

#family .phase2174-invite-row button,
#family .phase2174-join-row button,
#family .phase2174-add-row #familyAddExistingUserBtn,
#family .phase2174-add-row .phase2171-family-add-btn,
#family .phase2158-invite-action-btn {
  height: 31px !important;
  min-height: 31px !important;
  box-sizing: border-box !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

#family .phase2174-invite-row button.ghost {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#family .phase2174-invite-row .phase2158-invite-action-btn {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  font-size: 11px !important;
}

#family .phase2174-join-row button,
#family .phase2174-add-row #familyAddExistingUserBtn,
#family .phase2174-add-row .phase2171-family-add-btn {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#family .phase2174-add-grid #familyAddExistingUserStatus {
  min-height: 14px !important;
  margin-top: 0 !important;
}

#family .phase2174-leave-panel button,
#family .phase2166-family-leave-panel button {
  height: 31px !important;
  min-height: 31px !important;
  font-size: 11px !important;
  justify-content: center !important;
}

@media (max-width: 1180px) {
  #family .phase2174-family-panel,
  #family .phase2166-family-leave-panel {
    grid-template-rows: auto auto auto auto !important;
  }
  #family .phase2174-family-panel > p.muted,
  #family .phase2166-family-leave-panel > p.muted {
    min-height: 0 !important;
    max-height: none !important;
  }
}

@media (max-width: 430px) {
  #family .phase2174-invite-row,
  #family .family-cloud-invite-row.compact.phase2174-invite-row {
    grid-template-columns: minmax(0, 1fr) 44px 88px !important;
  }
  #family .phase2174-add-row,
  #family .phase2172-family-add-row.phase2174-add-row,
  #family .family-management-card .phase2172-family-add-row.phase2174-add-row {
    grid-template-columns: minmax(0, 1fr) 70px 52px !important;
  }
  #family .phase2174-add-row #familyAddRole {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
  }
  #family .phase2174-join-row button,
  #family .phase2174-add-row #familyAddExistingUserBtn,
  #family .phase2174-add-row .phase2171-family-add-btn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.75: final Add Existing User alignment + Crew sidebar stability
-------------------------------------------------------------------------- */
#family .phase2174-add-panel {
  overflow: visible !important;
  min-width: 0 !important;
}

#family .phase2175-family-add-wrap {
  display: grid !important;
  grid-template-rows: 31px auto !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start !important;
  overflow: visible !important;
}

#family .phase2175-family-add-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 92px 56px !important;
  gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#family .phase2175-family-add-row > * {
  min-width: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

#family .phase2175-family-add-row #familyAddUsername,
#family .phase2175-family-add-row #familyAddRole,
#family .phase2175-family-field {
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  border-radius: 16px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text) !important;
}

#family .phase2175-family-add-row #familyAddUsername {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 5px 8px !important;
}

#family .phase2175-family-add-row #familyAddRole {
  grid-column: 2 !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  padding: 5px 18px 5px 8px !important;
}

#family .phase2175-family-add-row #familyAddExistingUserBtn,
#family .phase2175-family-add-btn {
  grid-column: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 5px 0 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  transform: none !important;
}

#family .phase2175-family-add-status {
  min-height: 14px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

#family .phase2174-family-panel > .phase2175-family-add-wrap {
  grid-row: 3 / 5 !important;
}

#crew .phase2149-action-row,
#crew .phase2145-action-row,
#crew .phase2149-input-wrap,
#crew .phase2145-input-wrap,
#crew .phase2149-recruit-btn,
#crew .phase2145-recruit-btn,
#crew input[id^="crewQty_"] {
  transform: none !important;
  animation: none !important;
}

@media (max-width: 430px) {
  #family .phase2175-family-add-row {
    grid-template-columns: minmax(0, 1fr) 78px 52px !important;
  }
  #family .phase2175-family-add-row #familyAddRole {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
  #family .phase2175-family-add-row #familyAddExistingUserBtn,
  #family .phase2175-family-add-btn {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.76: Add Existing User card locked row + cache-bust repair
   The Phase 21.75 CSS was not being loaded because index.html still pointed at
   the Phase 21.74 stylesheet version. These final rules keep the Add controls
   in the card on one row even if older family-add rules are present.
-------------------------------------------------------------------------- */
#family .phase2174-add-panel {
  display: grid !important;
  grid-template-rows: auto 36px 31px auto !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

#family .phase2174-add-panel > h4 {
  grid-row: 1 !important;
}

#family .phase2174-add-panel > p.muted {
  grid-row: 2 !important;
  min-height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
}

#family .phase2174-add-panel > .phase2175-family-add-wrap,
#family .phase2174-add-panel > .phase2176-family-add-wrap {
  grid-row: 3 / 5 !important;
  display: grid !important;
  grid-template-rows: 31px auto !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#family .phase2175-family-add-row,
#family .phase2176-family-add-row {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px 56px !important;
  gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#family .phase2175-family-add-row > *,
#family .phase2176-family-add-row > * {
  min-width: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  box-sizing: border-box !important;
  transform: none !important;
}

#family .phase2175-family-add-row #familyAddUsername,
#family .phase2176-family-add-row #familyAddUsername {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 5px 8px !important;
  border-radius: 16px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text) !important;
}

#family .phase2175-family-add-row #familyAddRole,
#family .phase2176-family-add-row #familyAddRole {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 5px 18px 5px 8px !important;
  border-radius: 16px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--text) !important;
}

#family .phase2175-family-add-row #familyAddExistingUserBtn,
#family .phase2176-family-add-row #familyAddExistingUserBtn,
#family .phase2175-family-add-btn,
#family .phase2176-family-add-btn {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 5px 0 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  transform: none !important;
}

#family .phase2175-family-add-status,
#family .phase2176-family-add-status {
  grid-row: 2 !important;
  min-height: 14px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Phase 21.77 — Headquarters audit layout
   Headquarters now uses operation-style card proportions and non-jumping controls.
-------------------------------------------------------------------------- */
#headquarters .hq2177-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
  width:100%!important;
}
#headquarters .hq2177-card{
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
  border-radius:13px!important;
  min-height:0!important;
  height:auto!important;
  transform:none!important;
  transition:border-color .15s ease, box-shadow .15s ease!important;
}
#headquarters .hq2177-card>.hq2177-art,
#headquarters .hq2177-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:16/9!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  border-radius:11px 11px 0 0!important;
  background:#050505!important;
  transform:none!important;
}
#headquarters .hq2177-card-body{
  padding:8px!important;
  gap:5px!important;
  display:flex!important;
  flex-direction:column!important;
  transform:none!important;
}
#headquarters .hq2177-card .entity-head h4{
  font-size:13px!important;
  line-height:1.12!important;
  margin:0!important;
}
#headquarters .hq2177-card .badge{
  font-size:9px!important;
  padding:3px 5px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
#headquarters .hq2177-card p{
  font-size:10.8px!important;
  line-height:1.26!important;
  margin:0!important;
  min-height:41px!important;
}
#headquarters .hq2177-card .progress{
  height:5px!important;
  margin:0!important;
}
#headquarters .hq2177-meta{
  gap:4px!important;
}
#headquarters .hq2177-meta>div{
  padding:5px!important;
  border-radius:8px!important;
}
#headquarters .hq2177-meta span{
  font-size:7.5px!important;
  letter-spacing:.055em!important;
  line-height:1!important;
}
#headquarters .hq2177-meta strong{
  font-size:9.2px!important;
  line-height:1.08!important;
}
#headquarters .hq2177-upgrade-btn{
  min-height:28px!important;
  height:28px!important;
  padding:5px 7px!important;
  font-size:10px!important;
  border-radius:9px!important;
  transform:none!important;
  margin-top:auto!important;
}
#headquarters .hq2177-actions-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
#headquarters .hq2177-action-card{
  padding:10px!important;
  min-height:0!important;
  transform:none!important;
  transition:border-color .15s ease, box-shadow .15s ease!important;
}
#headquarters .hq2177-action-card h4{
  font-size:13px!important;
  line-height:1.15!important;
}
#headquarters .hq2177-action-card p{
  font-size:11px!important;
  line-height:1.28!important;
  min-height:42px!important;
  margin:0!important;
}
#headquarters .hq2177-action-btn{
  min-height:28px!important;
  height:28px!important;
  padding:5px 8px!important;
  font-size:10px!important;
  border-radius:9px!important;
  transform:none!important;
}
#headquarters .hq-summary-card,
#headquarters .crew-morale-panel{
  display:none!important;
}
#headquarters .hq2177-board-head{
  align-items:center!important;
  min-height:30px!important;
  margin-bottom:0!important;
}
#headquarters .hq2177-page .section-head.solo{
  margin-top:2px!important;
}
#headquarters .hq2177-card button,
#headquarters .hq2177-action-card button{
  will-change:auto!important;
}
@media(max-width:1500px){
  #headquarters .hq2177-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media(max-width:1180px){
  #headquarters .hq2177-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #headquarters .hq2177-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #headquarters .hq2177-grid,
  #headquarters .hq2177-actions-grid{grid-template-columns:1fr!important;}
}

/* --------------------------------------------------------------------------
   Phase 21.84 - Headquarters 4:3 tall original art
-------------------------------------------------------------------------- */
#headquarters .hq2177-grid,
#headquarters .grid.hq-grid.hq2177-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#headquarters .hq2177-card,
#headquarters .hq-grid .hq2177-card,
#headquarters .hq-grid .hq-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 385px !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 13px !important;
}

#headquarters .hq2177-card > img.hq2177-art,
#headquarters .hq2177-card > .hq2177-art,
#headquarters .hq-card > img.hq2177-art,
#headquarters .hq-card > img {
  display: block !important;
  width: 100% !important;
  height: clamp(160px, 12.25vw, 245px) !important;
  min-height: clamp(160px, 12.25vw, 245px) !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 11px 11px 0 0 !important;
  background: #050505 !important;
  transform: none !important;
}

#headquarters .hq2177-card-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 9px !important;
  gap: 5px !important;
  min-height: 0 !important;
}

#headquarters .hq2177-card-body p {
  min-height: 48px !important;
}

#headquarters .hq2177-upgrade-btn {
  margin-top: auto !important;
}

@media (max-width: 1500px) and (min-width: 1021px) {
  #headquarters .hq2177-grid,
  #headquarters .grid.hq-grid.hq2177-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  #headquarters .hq2177-card,
  #headquarters .hq-grid .hq2177-card,
  #headquarters .hq-grid .hq-card {
    min-height: 365px !important;
  }
  #headquarters .hq2177-card > img.hq2177-art,
  #headquarters .hq2177-card > .hq2177-art,
  #headquarters .hq-card > img.hq2177-art,
  #headquarters .hq-card > img {
    height: clamp(145px, 12vw, 210px) !important;
    min-height: clamp(145px, 12vw, 210px) !important;
  }
}

@media (max-width: 1020px) {
  #headquarters .hq2177-grid,
  #headquarters .grid.hq-grid.hq2177-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #headquarters .hq2177-card,
  #headquarters .hq-grid .hq2177-card,
  #headquarters .hq-grid .hq-card {
    min-height: 0 !important;
  }
}

@media (max-width: 760px) {
  #headquarters .hq2177-grid,
  #headquarters .grid.hq-grid.hq2177-grid {
    grid-template-columns: 1fr !important;
  }
  #headquarters .hq2177-card > img.hq2177-art,
  #headquarters .hq2177-card > .hq2177-art,
  #headquarters .hq-card > img.hq2177-art,
  #headquarters .hq-card > img {
    height: clamp(190px, 58vw, 280px) !important;
    min-height: clamp(190px, 58vw, 280px) !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.85 — Headquarters full uncropped images
   Restore original full HQ art presentation inside the taller cards.
   Keep the 5-per-row desktop layout, but stop cover-cropping the images.
-------------------------------------------------------------------------- */
#headquarters .hq-card > img,
#headquarters .hq-grid .entity-card > img,
#headquarters .entity-card > img {
  display: block !important;
  width: 100% !important;
  height: 138px !important;
  min-height: 138px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 10px 10px 0 0 !important;
}

#headquarters .hq-card .entity-card-body,
#headquarters .hq-grid .entity-card .entity-card-body {
  padding-top: 8px !important;
}

@media (max-width: 1180px) {
  #headquarters .hq-card > img,
  #headquarters .hq-grid .entity-card > img,
  #headquarters .entity-card > img {
    height: 128px !important;
    min-height: 128px !important;
  }
}

@media (max-width: 820px) {
  #headquarters .hq-card > img,
  #headquarters .hq-grid .entity-card > img,
  #headquarters .entity-card > img {
    height: 118px !important;
    min-height: 118px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.86 — Headquarters restored full-source art
   The old hq-*-auditv4 PNG files were already cropped at the asset level.
   Use copied hq-full-* source images and fit them down inside the current art area.
-------------------------------------------------------------------------- */
#headquarters .hq-card > img,
#headquarters .hq-grid .entity-card > img,
#headquarters .entity-card > img {
  display: block !important;
  width: 100% !important;
  height: 138px !important;
  min-height: 138px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.025) !important;
  border-radius: 10px 10px 0 0 !important;
  image-rendering: auto !important;
}


/* --------------------------------------------------------------------------
   Phase 21.92 — Front Businesses parity refresh
   - removes the ultra-compact front-business card treatment
   - restores larger cards/images like Operations / Missions / Crew / HQ
   - uses 4:3 front-business art for clearer thumbnails
-------------------------------------------------------------------------- */
#fronts .page-stack > .grid.cols-2,
#fronts .front-business-grid,
#fronts .grid.cols-2 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#fronts .entity-card {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px !important;
  gap: 10px !important;
}

#fronts .entity-card > img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #080808 !important;
}

#fronts .entity-card .entity-card-body {
  padding: 0 !important;
  gap: 10px !important;
}

#fronts .entity-card h4 {
  font-size: 15px !important;
  line-height: 1.12 !important;
}

#fronts .entity-card p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#fronts .entity-card .meta-grid-inline {
  gap: 8px !important;
}

#fronts .entity-card .meta-grid-inline > div {
  padding: 8px !important;
}

#fronts .entity-card .meta-grid-inline span {
  font-size: 9px !important;
}

#fronts .entity-card .meta-grid-inline strong {
  font-size: 12px !important;
}

#fronts .entity-card .front-action-row,
#fronts .entity-card .row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#fronts .entity-card button {
  min-height: 36px !important;
  font-size: 11px !important;
  padding: 8px 10px !important;
}

#fronts .clarity-page-guide,
#fronts .clarity-req-block {
  display: none !important;
}

@media (max-width: 1380px) {
  #fronts .page-stack > .grid.cols-2,
  #fronts .front-business-grid,
  #fronts .grid.cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #fronts .page-stack > .grid.cols-2,
  #fronts .front-business-grid,
  #fronts .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fronts .entity-card {
    padding: 9px !important;
  }

  #fronts .entity-card h4 {
    font-size: 14px !important;
  }

  #fronts .entity-card p {
    font-size: 11px !important;
  }
}

@media (max-width: 620px) {
  #fronts .page-stack > .grid.cols-2,
  #fronts .front-business-grid,
  #fronts .grid.cols-2 {
    grid-template-columns: 1fr !important;
  }

  #fronts .entity-card .front-action-row,
  #fronts .entity-card .row-actions {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.93 — Front Businesses stable network action
-------------------------------------------------------------------------- */
#fronts .bl214-front-guide,
#fronts .clarity-page-guide,
#fronts .clarity-req-block,
#fronts .clean-books-active-status {
  display: none !important;
}

#fronts .front-network-cleanup-card {
  padding: 12px !important;
  gap: 10px !important;
}

#fronts .front-network-cleanup-card .muted {
  margin: 0 !important;
  line-height: 1.4 !important;
}

#fronts .front-network-cleanup-card .meta-grid-inline.four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#fronts .front-business-grid-stable,
#fronts .page-stack > .front-business-grid-stable,
#fronts .grid.cols-2.front-business-grid-stable {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#fronts .front-business-card-stable {
  padding: 10px !important;
  gap: 10px !important;
  min-height: 0 !important;
  transform: none !important;
  transition: none !important;
}

#fronts .front-business-card-stable > img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 12px !important;
  max-height: none !important;
}

#fronts .front-business-card-stable .front-action-row.single {
  grid-template-columns: 1fr !important;
}

#fronts .front-business-card-stable .front-action-row.single button {
  width: 100% !important;
  min-height: 36px !important;
  font-size: 11px !important;
  padding: 8px 10px !important;
}

#fronts .front-business-card-stable h4 {
  font-size: 15px !important;
  line-height: 1.12 !important;
}

#fronts .front-business-card-stable p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

@media (max-width: 1380px) {
  #fronts .front-business-grid-stable,
  #fronts .page-stack > .front-business-grid-stable,
  #fronts .grid.cols-2.front-business-grid-stable {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  #fronts .front-network-cleanup-card .meta-grid-inline.four,
  #fronts .front-business-grid-stable,
  #fronts .page-stack > .front-business-grid-stable,
  #fronts .grid.cols-2.front-business-grid-stable {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  #fronts .front-network-cleanup-card .meta-grid-inline.four,
  #fronts .front-business-grid-stable,
  #fronts .page-stack > .front-business-grid-stable,
  #fronts .grid.cols-2.front-business-grid-stable {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.94 — Front Businesses timed upgrade progress
-------------------------------------------------------------------------- */
#fronts .front-upgrade-status,
#fronts .front-cleanup-progress-slot {
  min-height: 42px !important;
  display: grid !important;
  gap: 5px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.025) !important;
  border-radius: 10px !important;
}

#fronts .front-upgrade-status-head,
#fronts .front-cleanup-progress-slot .front-upgrade-status-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  align-items: center !important;
}

#fronts .front-upgrade-status-head strong {
  font-size: 10px !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#fronts .front-upgrade-status-head span {
  font-size: 9px !important;
  color: var(--gold-soft) !important;
  white-space: nowrap !important;
}

#fronts .front-upgrade-status .progress,
#fronts .front-cleanup-progress-slot .progress {
  height: 7px !important;
  margin: 0 !important;
}

#fronts .front-upgrade-status.idle .progress span,
#fronts .front-cleanup-progress-slot.idle .progress span {
  width: 0% !important;
}

#fronts .front-upgrade-status.active {
  border-color: rgba(121,200,121,.28) !important;
  background: rgba(38,84,44,.13) !important;
}

#fronts .front-action-row.single {
  grid-template-columns: 1fr !important;
}

/* --------------------------------------------------------------------------
   Phase 21.95 — Front Active Operations summary
-------------------------------------------------------------------------- */
#fronts .front-upgrade-status,
#fronts .front-cleanup-progress-slot,
#fronts .front-network-cleanup-card {
  display: none !important;
}

#fronts .front-summary-row2195 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#fronts .front-network-cleanup-card2195,
#fronts .front-active-operations-card2195 {
  min-height: 238px !important;
  max-height: 238px !important;
  overflow: hidden !important;
  padding: 11px !important;
}

#fronts .front-network-cleanup-card2195 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#fronts .front-network-cleanup-card2195 .section-head,
#fronts .front-active-operations-card2195 .section-head {
  margin-bottom: 2px !important;
}

#fronts .front-network-cleanup-card2195 h3,
#fronts .front-active-operations-card2195 h3 {
  font-size: 15px !important;
}

#fronts .front-network-cleanup-card2195 .muted {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#fronts .front-cleanup-meta2195 {
  gap: 7px !important;
}

#fronts .front-cleanup-meta2195 > div {
  padding: 7px !important;
}

#fronts .front-cleanup-meta2195 span {
  font-size: 8px !important;
}

#fronts .front-cleanup-meta2195 strong {
  font-size: 11px !important;
}

#fronts .front-network-cleanup-card2195 > button {
  margin-top: auto !important;
  min-height: 34px !important;
  font-size: 10px !important;
}

#fronts .front-active-operations-card2195 {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
}

#fronts .front-active-operations-list2195 {
  min-height: 0 !important;
  height: 174px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  scrollbar-gutter: stable !important;
}

#fronts .front-active-operation-row2195 {
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.025) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  display: grid !important;
  gap: 6px !important;
}

#fronts .front-active-operation-head2195 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

#fronts .front-active-operation-head2195 > div {
  min-width: 0 !important;
}

#fronts .front-active-operation-head2195 strong,
#fronts .front-active-operation-head2195 span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#fronts .front-active-operation-head2195 strong {
  font-size: 11px !important;
  color: var(--text) !important;
}

#fronts .front-active-operation-head2195 span {
  margin-top: 2px !important;
  font-size: 9px !important;
  color: var(--muted) !important;
}

#fronts .front-active-operation-head2195 em {
  flex: 0 0 auto !important;
  font-size: 9px !important;
  font-style: normal !important;
  color: var(--gold-soft) !important;
  white-space: nowrap !important;
}

#fronts .front-active-operation-progress2195 {
  height: 7px !important;
  margin: 0 !important;
}

#fronts .front-active-empty2195 {
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
}

#fronts .front-business-card-stable [data-front-upgrade-button] {
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  #fronts .front-summary-row2195 {
    grid-template-columns: 1fr !important;
  }

  #fronts .front-network-cleanup-card2195,
  #fronts .front-active-operations-card2195 {
    min-height: 220px !important;
    max-height: 220px !important;
  }

  #fronts .front-active-operations-list2195 {
    height: 156px !important;
  }
}


/* Phase 21.96 — Equal Front summary cards */
#fronts .front-summary-row2195 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#fronts .front-network-cleanup-card2195,
#fronts .front-active-operations-card2195 {
  width: 100% !important;
  min-width: 0 !important;
  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
}
@media (max-width: 980px) {
  #fronts .front-summary-row2195 {
    grid-template-columns: 1fr !important;
  }
  #fronts .front-network-cleanup-card2195,
  #fronts .front-active-operations-card2195 {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.98 — Territory stable navigation + Active Operations
-------------------------------------------------------------------------- */
#territory .bl2198-territory-summary-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#territory .bl2198-territory-summary-row > .card {
  min-width: 0 !important;
  min-height: 184px !important;
  height: 184px !important;
  margin: 0 !important;
}

#territory .bl2197-territory-hero {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 16px !important;
}

#territory .bl2197-territory-hero .row-actions {
  margin-top: auto !important;
}

#territory .bl2198-territory-active-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
  overflow: hidden !important;
}

#territory .bl2198-territory-active-card .section-head {
  flex: 0 0 auto !important;
  margin-bottom: 8px !important;
}

#territory .bl2198-territory-active-list {
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

#territory .bl2198-active-row {
  display: grid !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.03) !important;
}

#territory .bl2198-active-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#territory .bl2198-active-copy strong {
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#territory .bl2198-active-copy span {
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: right !important;
}

#territory .bl2198-active-row .progress {
  height: 6px !important;
  margin: 0 !important;
}

#territory .bl2198-active-empty {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 112px !important;
  padding: 12px !important;
  border: 1px dashed rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.02) !important;
}

#territory .bl2198-active-empty strong {
  color: var(--text) !important;
  font-size: 12px !important;
}

#territory .bl2198-active-empty span {
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

@media (max-width: 900px) {
  #territory .bl2198-territory-summary-row {
    grid-template-columns: 1fr !important;
  }

  #territory .bl2198-territory-summary-row > .card {
    height: auto !important;
    min-height: 160px !important;
  }
}


/* --------------------------------------------------------------------------
   Phase 21.99 — Territory upkeep clarity
-------------------------------------------------------------------------- */
#territory .bl2197-territory-hero { justify-content: flex-start !important; }
#territory .bl2199-upkeep-note { display:grid!important; gap:3px!important; margin-top:8px!important; padding:8px!important; border:1px solid rgba(215,170,80,.18)!important; border-radius:9px!important; background:rgba(215,170,80,.055)!important; }
#territory .bl2199-upkeep-note strong { color:var(--gold-soft,#d7aa50)!important; font-size:10px!important; line-height:1.2!important; }
#territory .bl2199-upkeep-note span { color:var(--muted)!important; font-size:9.5px!important; line-height:1.35!important; }
#territory .bl2199-result-row { display:grid!important; gap:4px!important; padding:9px!important; border:1px solid rgba(121,200,121,.25)!important; border-radius:10px!important; background:rgba(56,120,65,.12)!important; }
#territory .bl2199-result-row.warning { border-color:rgba(215,170,80,.28)!important; background:rgba(115,81,24,.15)!important; }
#territory .bl2199-result-row div { display:grid!important; gap:3px!important; }
#territory .bl2199-result-row strong { color:var(--text)!important; font-size:11px!important; line-height:1.2!important; }
#territory .bl2199-result-row span { color:var(--muted)!important; font-size:9.5px!important; line-height:1.35!important; }


/* --------------------------------------------------------------------------
   Phase 21.103 — Territory action progression
-------------------------------------------------------------------------- */
#territory .bl2197-territory-actions button {
  white-space: normal !important;
  line-height: 1.18 !important;
  min-height: 38px !important;
}
#territory .bl2197-territory-actions button:disabled {
  opacity: .58 !important;
}


/* --------------------------------------------------------------------------
   Phase 21.105 — Rivals attack ladder and full-screen result presentation
-------------------------------------------------------------------------- */
#rivals .bl21105-attack-guide{width:100%;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
#rivals .bl21105-tier-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#rivals .bl21105-tier-grid>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
#rivals .bl21105-tier-grid em{color:var(--gold-soft,#d7aa50);font-size:9px;font-weight:800;font-style:normal;letter-spacing:.1em;text-transform:uppercase}
#rivals .bl21105-tier-grid strong{font-size:12px;line-height:1.2;color:var(--text,#fff)}
#rivals .bl21105-tier-grid p{margin:0;color:var(--muted);font-size:10px;line-height:1.35}
#rivals .bl21105-tier-grid span{margin-top:auto;color:#fff;font-size:10px;font-weight:800}
#rivals .bl21105-tier-grid small{color:var(--faint);font-size:9px;line-height:1.3}
#rivals .bl21105-guide-note{margin:9px 0 0!important;font-size:10px!important;line-height:1.35!important}
#rivals .bl21105-target-intel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
#rivals .bl21105-target-intel>div{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border:1px solid rgba(215,170,80,.14);border-radius:8px;background:rgba(215,170,80,.04)}
#rivals .bl21105-target-intel span{color:var(--faint);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#rivals .bl21105-target-intel strong{color:var(--gold-soft,#d7aa50);font-size:11px}
#rivals .bl21105-action-button{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;gap:5px!important;min-width:0!important;min-height:66px!important;padding:8px!important;text-align:left!important;white-space:normal!important;transform:none!important;transition:none!important}
#rivals .bl21105-action-button img{display:none!important}
#rivals .bl21105-action-head{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;width:100%}
#rivals .bl21105-action-head strong{font-size:10px!important;line-height:1.15!important;color:var(--text,#fff)!important}
#rivals .bl21105-action-head em{flex:0 0 auto;color:var(--gold-soft,#d7aa50);font-size:8px;font-style:normal;font-weight:800;text-transform:uppercase}
#rivals .bl21105-action-cost{color:#fff;font-size:9px;font-weight:800;line-height:1.2}
#rivals .bl21105-action-button small{color:var(--faint);font-size:8.5px;line-height:1.2}
#rivals .bl21105-action-button.tier-3{border-color:rgba(215,170,80,.22)!important}
#rivals .bl21105-action-button.tier-4{border-color:rgba(180,55,55,.36)!important;background:rgba(90,20,20,.12)!important}
#rivals .bl21105-action-button:disabled{opacity:.58!important;cursor:not-allowed!important}
#rivals .bl21104-rival-actions,#rivals .bl214-action-cards{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
#rivals .bl214-action-cards.small{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.bl21105-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,3,5,.84);backdrop-filter:blur(7px);opacity:1;visibility:visible}
.bl21105-modal.hidden{display:none!important}
.bl21105-modal-card{width:min(620px,100%);padding:24px;border:1px solid rgba(215,170,80,.35);border-radius:18px;background:linear-gradient(180deg,rgba(25,23,21,.99),rgba(8,9,12,.99));box-shadow:0 28px 90px rgba(0,0,0,.7);text-align:center}
.bl21105-modal-eyebrow{color:var(--gold-soft,#d7aa50);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.bl21105-modal h2{margin:7px 0 4px;font-family:Cinzel,serif;font-size:28px;color:#fff}
.bl21105-modal-target{margin:0 0 18px;color:var(--muted)}
.bl21105-modal-progress{height:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.06)}
.bl21105-modal-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#704715,#d7aa50);transition:width .12s linear}
.bl21105-modal-status{display:block;margin:13px 0;color:#fff;font-size:14px;line-height:1.45}
.bl21105-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.bl21105-result-grid>div{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.03);text-align:left}
.bl21105-result-grid span{color:var(--faint);font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.bl21105-result-grid strong{color:#fff;font-size:11px;line-height:1.35;overflow-wrap:anywhere}
.bl21105-modal.success .bl21105-modal-card{border-color:rgba(82,181,111,.45)}
.bl21105-modal.failure .bl21105-modal-card{border-color:rgba(205,77,77,.5)}
.bl21105-modal-close{min-width:150px}
@media(max-width:1100px){#rivals .bl21105-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#rivals .bl21104-rival-actions,#rivals .bl214-action-cards,#rivals .bl214-action-cards.small{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:620px){#rivals .bl21105-tier-grid,#rivals .bl21105-target-intel,#rivals .bl21104-rival-actions,#rivals .bl214-action-cards,#rivals .bl214-action-cards.small,.bl21105-result-grid{grid-template-columns:1fr!important}.bl21105-modal-card{padding:18px}.bl21105-modal h2{font-size:22px}}

/* --------------------------------------------------------------------------
   Phase 21.106 — Rivals family/member drill-down and scouting reports
-------------------------------------------------------------------------- */
#rivals .bl21106-page {
  display: grid;
  gap: 14px;
}

#rivals .bl21106-directory-hero,
#rivals .bl21106-target-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

#rivals .bl21106-directory-hero h2,
#rivals .bl21106-target-hero h2 {
  margin: 4px 0 6px;
}

#rivals .bl21106-directory-hero p,
#rivals .bl21106-target-hero p {
  margin-bottom: 0;
}

#rivals .bl21106-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(108px, 1fr));
  gap: 8px;
  min-width: min(440px, 48%);
}

#rivals .bl21106-summary > div,
#rivals .bl21106-action-meta > div,
#rivals .bl21106-result-grid > div {
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

#rivals .bl21106-summary span,
#rivals .bl21106-action-meta span,
#rivals .bl21106-result-grid span {
  display: block;
  color: var(--gold-soft, #d7aa50);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

#rivals .bl21106-summary strong,
#rivals .bl21106-action-meta strong,
#rivals .bl21106-result-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text, #fff);
  line-height: 1.3;
}

#rivals .bl21106-directory,
#rivals .bl21106-members-card,
#rivals .bl21106-scout-report {
  padding: 14px;
}

#rivals .bl21106-family-list,
#rivals .bl21106-member-list {
  display: grid;
  gap: 8px;
}

#rivals .bl21106-family-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(3, minmax(110px, .7fr)) 24px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--text, #fff);
  text-align: left;
  border-color: rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,20,.97), rgba(13,12,11,.98));
}

#rivals .bl21106-family-row:hover,
#rivals .bl21106-member-row:hover {
  border-color: var(--line-2, rgba(200,154,74,.45));
  background: linear-gradient(90deg, rgba(200,154,74,.09), rgba(255,255,255,.025));
}

#rivals .bl21106-family-row > span,
#rivals .bl21106-member-row > span {
  min-width: 0;
}

#rivals .bl21106-family-row small,
#rivals .bl21106-member-row small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted, #b8aa91);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#rivals .bl21106-family-row strong,
#rivals .bl21106-member-row strong {
  display: block;
  color: var(--text, #fff);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#rivals .bl21106-family-name strong {
  color: var(--gold-soft, #d7aa50);
  font-size: 16px;
}

#rivals .bl21106-family-row > b,
#rivals .bl21106-member-row > b {
  color: var(--gold-soft, #d7aa50);
  font-size: 24px;
  line-height: 1;
  text-align: right;
}

#rivals .bl21106-back {
  justify-self: start;
}

#rivals .bl21106-section-head {
  margin-bottom: 8px;
}

#rivals .bl21106-section-head h3,
#rivals .bl21106-section-head p {
  margin-bottom: 3px;
}

#rivals .bl21106-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch;
}

#rivals .bl21106-action-card {
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
}

#rivals .bl21106-action-card > img {
  width: 100%;
  height: 130px;
  display: block;
  object-fit: cover;
}

#rivals .bl21106-action-card .entity-card-body {
  height: calc(100% - 130px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

#rivals .bl21106-action-card .entity-head {
  align-items: flex-start;
}

#rivals .bl21106-action-card .entity-head h4 {
  margin: 0;
}

#rivals .bl21106-action-card .entity-card-body > p {
  margin: 0;
  line-height: 1.45;
}

#rivals .bl21106-action-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#rivals .bl21106-action-meta > div {
  padding: 7px;
}

#rivals .bl21106-action-meta strong {
  font-size: 11px;
  overflow-wrap: anywhere;
}

#rivals .bl21106-risk {
  color: var(--muted, #b8aa91);
  font-size: 11px;
}

#rivals .bl21106-risk strong {
  color: #ffd3ce;
}

#rivals .bl21106-action-button {
  min-height: 48px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-color: rgba(200,154,74,.34);
  background: rgba(255,255,255,.035);
  color: var(--gold-soft, #d7aa50);
  text-align: left;
}

#rivals .bl21106-action-button:hover:not(:disabled) {
  border-color: rgba(217,180,110,.7);
  background: rgba(200,154,74,.1);
}

#rivals .bl21106-action-button > span {
  color: var(--text, #fff);
  font-weight: 800;
}

#rivals .bl21106-action-button > small {
  color: var(--gold-soft, #d7aa50);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

#rivals .bl21106-member-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, .45fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--text, #fff);
  text-align: left;
}

#rivals .bl21106-scout-report .section-head {
  margin-bottom: 8px;
}

#rivals .bl21106-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

#rivals .bl21106-compare-grid > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

#rivals .bl21106-compare-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 11px;
}

#rivals .bl21106-compare-head span {
  color: var(--gold-soft, #d7aa50);
  font-weight: 800;
  text-transform: uppercase;
}

#rivals .bl21106-dual-bar,
#rivals .bl21106-single-bar {
  display: grid;
  gap: 4px;
}

#rivals .bl21106-dual-bar i,
#rivals .bl21106-dual-bar b,
#rivals .bl21106-single-bar i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5d19, #d7aa50);
}

#rivals .bl21106-dual-bar b {
  background: linear-gradient(90deg, #73302c, #c45f55);
}

#rivals .bl21106-estimates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

#rivals .bl21106-estimates > div {
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

#rivals .bl21106-estimates span,
#rivals .bl21106-estimates strong,
#rivals .bl21106-estimates em {
  display: block;
}

#rivals .bl21106-estimates span {
  color: var(--gold-soft, #d7aa50);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

#rivals .bl21106-estimates strong {
  margin: 4px 0;
}

#rivals .bl21106-estimates em {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

#rivals .bl21106-estimates em.good { color: #9fe3ad; }
#rivals .bl21106-estimates em.mid { color: #efd089; }
#rivals .bl21106-estimates em.bad { color: #ffaaa2; }

.bl21106-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.82);
}

.bl21106-modal.hidden { display: none; }

.bl21106-modal-card {
  width: min(780px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid rgba(200,154,74,.42);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24,23,22,.99), rgba(8,10,12,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  text-align: center;
}

.bl21106-modal.success .bl21106-modal-card { border-color: rgba(82,176,105,.58); }
.bl21106-modal.failure .bl21106-modal-card { border-color: rgba(221,115,107,.55); }

.bl21106-modal-card h2 {
  margin: 8px 0 4px;
  font-family: Cinzel, serif;
  font-size: clamp(25px, 4vw, 38px);
}

.bl21106-modal-target {
  margin: 0 0 14px;
  color: var(--muted, #b8aa91);
}

.bl21106-modal-progress {
  height: 10px;
  overflow: hidden;
  margin: 14px 0;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}

.bl21106-modal-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5d19, #d7aa50);
}

.bl21106-modal-status {
  display: block;
  margin-bottom: 14px;
  line-height: 1.45;
}

.bl21106-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.bl21106-scout-modal-chart {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  text-align: left;
}

.bl21106-scout-modal-chart > div {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 5px 12px;
}

.bl21106-scout-modal-chart span {
  color: var(--muted, #b8aa91);
}

.bl21106-scout-modal-chart i {
  grid-column: 1 / -1;
  display: block;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5d19, #d7aa50);
}

.bl21106-scout-modal-chart i.target {
  background: linear-gradient(90deg, #73302c, #c45f55);
}

.bl21106-modal-note {
  margin: 12px 0 0;
  font-size: 11px;
}

.bl21106-modal-close {
  min-width: 150px;
  margin-top: 16px;
  color: var(--gold-soft, #d7aa50);
}

@media (max-width: 1180px) {
  #rivals .bl21106-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #rivals .bl21106-family-row { grid-template-columns: minmax(190px, 1.2fr) repeat(3, minmax(90px, .7fr)) 20px; }
}

@media (max-width: 820px) {
  #rivals .bl21106-directory-hero,
  #rivals .bl21106-target-hero { display: grid; }
  #rivals .bl21106-summary { min-width: 0; width: 100%; }
  #rivals .bl21106-family-row { grid-template-columns: 1fr 1fr 20px; }
  #rivals .bl21106-family-row .bl21106-family-name { grid-column: 1 / 3; }
  #rivals .bl21106-family-row > span:nth-of-type(4) { grid-column: 1 / 3; }
  #rivals .bl21106-family-row > b { grid-column: 3; grid-row: 1 / 4; align-self: center; }
  #rivals .bl21106-compare-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #rivals .bl21106-summary,
  #rivals .bl21106-action-grid,
  #rivals .bl21106-action-meta,
  #rivals .bl21106-estimates,
  .bl21106-result-grid { grid-template-columns: 1fr !important; }
  #rivals .bl21106-action-card > img { height: 150px; }
  #rivals .bl21106-action-card .entity-card-body { height: auto; }
  #rivals .bl21106-member-row { grid-template-columns: 1fr 20px; }
  #rivals .bl21106-member-row > span:nth-of-type(2) { grid-column: 1; }
  #rivals .bl21106-member-row > b { grid-column: 2; grid-row: 1 / 3; }
  .bl21106-modal-card { padding: 18px 14px; }
}

/* --------------------------------------------------------------------------
   Phase 21.108 — Rivals visual rebuild and stable drill-down pages
-------------------------------------------------------------------------- */
#rivals.bl21108-owned > :not(.bl21108-page) {
  display: none !important;
}

#rivals .bl21108-page,
#rivals .bl21108-page * {
  animation: none !important;
  scroll-behavior: auto !important;
}

#rivals .bl21108-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

#rivals .bl21108-directory-hero,
#rivals .bl21108-target-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 20%, rgba(184,132,43,.12), transparent 34%),
    linear-gradient(180deg, rgba(21,20,18,.98), rgba(10,10,10,.99));
}

#rivals .bl21108-directory-hero h2,
#rivals .bl21108-target-hero h2 {
  margin: 3px 0 6px;
}

#rivals .bl21108-directory-hero p,
#rivals .bl21108-target-hero p {
  margin-bottom: 0;
}

#rivals .bl21108-summary,
#rivals .bl21108-target-power {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#rivals .bl21108-summary > div,
#rivals .bl21108-target-power > div,
#rivals .bl21108-action-meta > div,
.bl21108-result-grid > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

#rivals .bl21108-summary span,
#rivals .bl21108-target-power span,
#rivals .bl21108-action-meta span,
.bl21108-result-grid span {
  display: block;
  color: var(--gold-soft, #d7aa50);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#rivals .bl21108-summary strong,
#rivals .bl21108-target-power strong,
#rivals .bl21108-action-meta strong,
.bl21108-result-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text, #fff);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#rivals .bl21108-target-power small {
  display: block;
  margin-top: 3px;
  color: var(--muted, #b8aa91);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

#rivals .bl21108-power-ratio.ok {
  border-color: rgba(82,176,105,.4);
  background: rgba(82,176,105,.07);
}

#rivals .bl21108-power-ratio.blocked {
  border-color: rgba(205,77,77,.42);
  background: rgba(205,77,77,.07);
}

#rivals .bl21108-directory,
#rivals .bl21108-members-card,
#rivals .bl21108-scout-report {
  padding: 14px;
}

#rivals .bl21108-directory .section-head,
#rivals .bl21108-members-card .section-head,
#rivals .bl21108-scout-report .section-head {
  align-items: flex-start;
  gap: 12px;
}

#rivals .bl21108-directory .section-head h3,
#rivals .bl21108-directory .section-head p,
#rivals .bl21108-members-card .section-head h3,
#rivals .bl21108-members-card .section-head p {
  margin-bottom: 3px;
}

#rivals .bl21108-family-list,
#rivals .bl21108-member-list {
  display: grid;
  gap: 8px;
}

#rivals .bl21108-family-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(95px, .55fr)) minmax(150px, .75fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,20,20,.97), rgba(12,12,11,.99));
  color: var(--text, #fff);
  text-align: left;
  transform: none !important;
  transition: border-color .14s ease, background .14s ease !important;
}

#rivals .bl21108-family-row:hover,
#rivals .bl21108-member-row:hover {
  border-color: rgba(200,154,74,.52);
  background: linear-gradient(90deg, rgba(200,154,74,.09), rgba(255,255,255,.025));
}

#rivals .bl21108-family-row > span,
#rivals .bl21108-member-row > span {
  min-width: 0;
}

#rivals .bl21108-family-row small,
#rivals .bl21108-member-row small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted, #b8aa91);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#rivals .bl21108-family-row strong,
#rivals .bl21108-member-row strong {
  display: block;
  color: var(--text, #fff);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#rivals .bl21108-family-name strong {
  color: #f0c36d;
  font-family: Cinzel, serif;
  font-size: 16px;
}

#rivals .bl21108-family-row > b,
#rivals .bl21108-member-row > b {
  color: #f0c36d;
  font-size: 25px;
  line-height: 1;
  text-align: right;
}

#rivals .bl21108-range.ok strong,
#rivals .bl21108-member-row .ok strong {
  color: #8ddd9e;
}

#rivals .bl21108-range.blocked strong,
#rivals .bl21108-member-row .blocked strong {
  color: #ef9a91;
}

#rivals .bl21108-balance-note {
  margin: 11px 2px 0;
  font-size: 10px;
}

#rivals .bl21108-back {
  justify-self: start;
  color: var(--text, #fff) !important;
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(200,154,74,.34) !important;
}

#rivals .bl21108-section-head {
  margin-bottom: 8px;
}

#rivals .bl21108-section-head h3,
#rivals .bl21108-section-head p {
  margin-bottom: 3px;
}

#rivals .bl21108-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

#rivals .bl21108-action-card {
  min-width: 0;
  overflow: hidden;
  padding: 0 !important;
  border-color: rgba(200,154,74,.24);
  background: linear-gradient(180deg, rgba(22,21,19,.98), rgba(10,10,10,.99));
}

#rivals .bl21108-action-image {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-bottom: 1px solid rgba(200,154,74,.22);
  background: #090909;
}

#rivals .bl21108-action-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.72));
  pointer-events: none;
}

#rivals .bl21108-action-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#rivals .bl21108-action-image > span {
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 9px;
  padding: 4px 7px;
  border: 1px solid rgba(240,195,109,.38);
  border-radius: 999px;
  background: rgba(8,8,8,.82);
  color: #f0c36d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#rivals .bl21108-action-card .entity-card-body {
  height: calc(100% - 150px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

#rivals .bl21108-action-card .entity-head {
  align-items: flex-start;
}

#rivals .bl21108-action-card .entity-head h4 {
  margin: 0;
  color: #f4ead8;
  font-family: Cinzel, serif;
  line-height: 1.2;
}

#rivals .bl21108-action-card .entity-card-body > p {
  min-height: 4.25em;
  margin: 0;
  color: var(--muted, #b8aa91);
  font-size: 11px;
  line-height: 1.45;
}

#rivals .bl21108-action-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#rivals .bl21108-action-meta > div {
  padding: 7px;
}

#rivals .bl21108-action-meta strong {
  font-size: 10px;
}

#rivals .bl21108-outcomes {
  display: grid;
  gap: 6px;
}

#rivals .bl21108-outcomes p {
  min-height: 0 !important;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}

#rivals .bl21108-outcomes strong,
#rivals .bl21108-outcomes span {
  display: block;
}

#rivals .bl21108-outcomes strong {
  margin-bottom: 3px;
  color: var(--gold-soft, #d7aa50);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#rivals .bl21108-outcomes span {
  color: var(--muted, #b8aa91);
  font-size: 10px;
  line-height: 1.35;
}

#rivals .bl21108-action-button {
  min-height: 48px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-color: rgba(200,154,74,.38) !important;
  background: linear-gradient(180deg, rgba(34,32,28,.98), rgba(17,16,14,.98)) !important;
  color: #fff !important;
  text-align: left;
  box-shadow: none !important;
}

#rivals .bl21108-action-button:hover:not(:disabled) {
  border-color: rgba(240,195,109,.76) !important;
  background: linear-gradient(180deg, rgba(48,42,31,.98), rgba(24,21,17,.98)) !important;
}

#rivals .bl21108-action-button:disabled {
  opacity: .58;
  cursor: not-allowed;
}

#rivals .bl21108-action-button > span {
  color: #fff;
  font-weight: 850;
  line-height: 1.2;
}

#rivals .bl21108-action-button > small {
  max-width: 58%;
  color: #d8c7a4;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

#rivals .bl21108-member-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, .45fr) minmax(180px, .65fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--text, #fff);
  text-align: left;
}

#rivals .bl21108-range-banner {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}

#rivals .bl21108-range-banner strong {
  font-size: 11px;
}

#rivals .bl21108-range-banner span {
  color: var(--muted, #b8aa91);
  font-size: 10px;
  line-height: 1.4;
}

#rivals .bl21108-range-banner.ok {
  border-color: rgba(82,176,105,.38);
  background: rgba(82,176,105,.055);
}

#rivals .bl21108-range-banner.ok strong {
  color: #8ddd9e;
}

#rivals .bl21108-range-banner.blocked {
  border-color: rgba(205,77,77,.42);
  background: rgba(205,77,77,.055);
}

#rivals .bl21108-range-banner.blocked strong {
  color: #ef9a91;
}

#rivals .bl21108-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

#rivals .bl21108-compare-grid > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

#rivals .bl21108-compare-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 11px;
}

#rivals .bl21108-compare-head span {
  color: var(--gold-soft, #d7aa50);
  font-weight: 800;
  text-transform: uppercase;
}

#rivals .bl21108-dual-bar,
#rivals .bl21108-single-bar {
  display: grid;
  gap: 4px;
}

#rivals .bl21108-dual-bar i,
#rivals .bl21108-dual-bar b,
#rivals .bl21108-single-bar i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #7a4b14, #d7aa50);
}

#rivals .bl21108-dual-bar b {
  background: linear-gradient(90deg, #73302c, #c45f55);
}

#rivals .bl21108-estimates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

#rivals .bl21108-estimates > div {
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

#rivals .bl21108-estimates span,
#rivals .bl21108-estimates strong,
#rivals .bl21108-estimates em {
  display: block;
}

#rivals .bl21108-estimates span {
  color: var(--gold-soft, #d7aa50);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

#rivals .bl21108-estimates strong {
  margin: 4px 0;
  line-height: 1.25;
}

#rivals .bl21108-estimates em {
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

#rivals .bl21108-estimates em.good { color: #9fe3ad; }
#rivals .bl21108-estimates em.mid { color: #efd089; }
#rivals .bl21108-estimates em.bad,
#rivals .bl21108-estimates em.blocked { color: #ffaaa2; }

.bl21108-modal {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.84);
}

.bl21108-modal.hidden {
  display: none;
}

.bl21108-modal-card {
  width: min(800px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(200,154,74,.46);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24,23,22,.995), rgba(7,9,11,.995));
  box-shadow: 0 24px 70px rgba(0,0,0,.7);
  text-align: center;
}

.bl21108-modal.success .bl21108-modal-card {
  border-color: rgba(82,176,105,.62);
}

.bl21108-modal.failure .bl21108-modal-card {
  border-color: rgba(221,115,107,.58);
}

.bl21108-modal-card h2 {
  margin: 7px 0 4px;
  font-family: Cinzel, serif;
  font-size: clamp(24px, 4vw, 37px);
  line-height: 1.12;
}

.bl21108-modal-target {
  margin: 0 0 12px;
  color: var(--muted, #b8aa91);
}

.bl21108-modal-image {
  width: 100%;
  height: 190px;
  display: block;
  object-fit: cover;
  margin: 10px 0 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #080808;
}

.bl21108-modal-progress {
  height: 10px;
  overflow: hidden;
  margin: 12px 0;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
}

.bl21108-modal-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #815015, #e2b653);
}

.bl21108-modal-status {
  display: block;
  margin-bottom: 13px;
  color: #f2ede4;
  line-height: 1.45;
}

.bl21108-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.bl21108-result-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bl21108-scout-chart {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  text-align: left;
}

.bl21108-scout-chart > div {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  gap: 5px 12px;
}

.bl21108-scout-chart span {
  color: var(--muted, #b8aa91);
}

.bl21108-scout-chart i {
  grid-column: 1 / -1;
  display: block;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg, #7a4b14, #d7aa50);
}

.bl21108-scout-chart i.target {
  background: linear-gradient(90deg, #73302c, #c45f55);
}

.bl21108-modal-note {
  margin: 12px 0 0;
  font-size: 10px;
}

.bl21108-modal-close {
  min-width: 150px;
  margin-top: 16px;
  border-color: rgba(200,154,74,.42) !important;
  background: rgba(255,255,255,.035) !important;
  color: #fff !important;
}

@media (max-width: 1220px) {
  #rivals .bl21108-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #rivals .bl21108-family-row {
    grid-template-columns: minmax(200px, 1.25fr) repeat(3, minmax(85px, .55fr)) minmax(140px, .7fr) 22px;
  }
}

@media (max-width: 900px) {
  #rivals .bl21108-directory-hero,
  #rivals .bl21108-target-hero {
    grid-template-columns: 1fr;
  }
  #rivals .bl21108-family-row {
    grid-template-columns: 1fr 1fr 22px;
  }
  #rivals .bl21108-family-name {
    grid-column: 1 / 3;
  }
  #rivals .bl21108-family-row > span:nth-of-type(4),
  #rivals .bl21108-family-row > span:nth-of-type(5) {
    grid-column: 1 / 3;
  }
  #rivals .bl21108-family-row > b {
    grid-column: 3;
    grid-row: 1 / 5;
    align-self: center;
  }
  #rivals .bl21108-compare-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  #rivals .bl21108-summary,
  #rivals .bl21108-target-power,
  #rivals .bl21108-action-grid,
  #rivals .bl21108-action-meta,
  #rivals .bl21108-estimates,
  .bl21108-result-grid {
    grid-template-columns: 1fr !important;
  }
  #rivals .bl21108-action-image {
    height: 180px;
  }
  #rivals .bl21108-action-card .entity-card-body {
    height: auto;
  }
  #rivals .bl21108-member-row {
    grid-template-columns: 1fr 22px;
  }
  #rivals .bl21108-member-row > span:nth-of-type(2),
  #rivals .bl21108-member-row > span:nth-of-type(3) {
    grid-column: 1;
  }
  #rivals .bl21108-member-row > b {
    grid-column: 2;
    grid-row: 1 / 4;
  }
  .bl21108-modal-card {
    padding: 16px 13px;
  }
  .bl21108-modal-image {
    height: 145px;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.109 — Rivals image fit and stable action controls
-------------------------------------------------------------------------- */
#rivals .bl21108-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#rivals .bl21108-action-card {
  min-width: 0 !important;
}
#rivals .bl21108-action-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #090a0b !important;
  display: grid !important;
  place-items: center !important;
}
#rivals .bl21108-action-image::after {
  background: linear-gradient(to bottom, transparent 72%, rgba(0,0,0,.24)) !important;
}
#rivals .bl21108-action-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
  image-rendering: auto !important;
}
#rivals .bl21108-action-card .entity-card-body {
  height: auto !important;
  min-height: 0 !important;
}
#bl21108-rival-modal .bl21108-modal-image,
#rivals .bl21108-modal-image {
  width: 100% !important;
  height: auto !important;
  max-height: 52vh !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #090a0b !important;
  image-rendering: auto !important;
}
#crew .phase21109-hire-btn {
  margin-top: auto !important;
  pointer-events: auto !important;
}
@media (max-width: 1120px) {
  #rivals .bl21108-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  #rivals .bl21108-action-grid { grid-template-columns: 1fr !important; }
}


/* --------------------------------------------------------------------------
   Phase 21.110 — Full-resolution Rivals action cards
-------------------------------------------------------------------------- */
#rivals .bl21108-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
#rivals .bl21108-action-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #090a0b !important;
}
#rivals .bl21108-action-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
  image-rendering: auto !important;
}
#rivals .bl21108-action-image::after {
  background: linear-gradient(to bottom, transparent 74%, rgba(0,0,0,.28)) !important;
}
#rivals .bl21108-action-card .entity-card-body {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px !important;
  gap: 8px !important;
}
#rivals .bl21108-action-card .entity-card-body > p {
  min-height: 4.1em !important;
  font-size: 10px !important;
}
#rivals .bl21108-action-meta {
  gap: 5px !important;
}
#rivals .bl21108-action-meta > div {
  padding: 6px !important;
}
@media (max-width: 1180px) {
  #rivals .bl21108-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  #rivals .bl21108-action-grid { grid-template-columns: 1fr !important; }
}
#bl21108-rival-modal .bl21108-modal-image,
#rivals .bl21108-modal-image {
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
}

/* Phase 21.111 — stable Crew controls and paired Headquarters status cards */
#crew.phase21111-updating,
#crew.phase21111-updating * {
  overflow-anchor: none !important;
}
#crew .phase21111-recruit-btn,
#crew .phase21111-hire-btn {
  transform: none !important;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease !important;
}
#headquarters .phase21111-hq-top-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
}
#headquarters .phase21111-hq-top-grid > .card {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#headquarters .phase21111-hq-top-grid .phase2178-effects-grid,
#headquarters .phase21111-hq-operation-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
  flex: 1 1 auto !important;
}
#headquarters .phase21111-hq-operation {
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.035) !important;
  border-radius: 11px !important;
  padding: 9px !important;
  min-width: 0 !important;
}
#headquarters .phase21111-hq-operation h4 {
  margin: 0 !important;
  font-size: 12px !important;
}
#headquarters .phase21111-hq-operation p {
  margin: 4px 0 7px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
}
#headquarters .phase21111-hq-operation .progress {
  height: 5px !important;
  margin: 0 !important;
}
#headquarters .phase21111-hq-empty {
  grid-column: 1 / -1 !important;
  min-height: 92px !important;
  border: 1px dashed rgba(255,255,255,.12) !important;
  border-radius: 11px !important;
  padding: 13px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}
#headquarters .phase21111-hq-empty span {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}
#headquarters .phase21111-hq-timing {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: center !important;
  gap: 4px 6px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 8px !important;
  padding: 6px !important;
}
#headquarters .phase21111-hq-timing span {
  color: var(--muted) !important;
  font-size: 7.5px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
#headquarters .phase21111-hq-timing strong {
  font-size: 9px !important;
  white-space: nowrap !important;
}
#headquarters .hq2177-upgrade-btn {
  min-height: 30px !important;
  height: auto !important;
  line-height: 1.15 !important;
}
#rivals .bl21108-action-image,
#bl21108-rival-modal .bl21108-modal-image,
#rivals .bl21108-modal-image {
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 980px) {
  #headquarters .phase21111-hq-top-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 620px) {
  #headquarters .phase21111-hq-top-grid .phase2178-effects-grid,
  #headquarters .phase21111-hq-operation-list {
    grid-template-columns: 1fr !important;
  }
  #headquarters .phase21111-hq-timing {
    grid-template-columns: auto minmax(0,1fr) !important;
  }
}

/* Phase 21.112 — visible launch confirmation without removing repeatable actions. */
@keyframes phase21112OperationClick {
  0% { transform: scale(1); }
  32% { transform: scale(.965); }
  68% { transform: scale(1.018); }
  100% { transform: scale(1); }
}
#operations [data-operation-launch] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#operations [data-operation-launch].phase21112-operation-clicked {
  animation: phase21112OperationClick .42s ease;
  box-shadow: 0 0 0 2px rgba(212,169,83,.34), 0 0 20px rgba(212,169,83,.25) !important;
  opacity: 1 !important;
}
#operations [data-operation-launch][data-operation-feedback]::after {
  content: attr(data-operation-feedback);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: linear-gradient(135deg, #98712d, #c89d4d);
  color: #15100a;
  font-weight: 900;
  letter-spacing: .035em;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #operations [data-operation-launch].phase21112-operation-clicked { animation: none; }
}

/* Phase 21.118 — canonical Admin Tools. */
#admin .admin16-stack,
#admin .admin16-card,
#admin .admin17-truce-tools,
#admin .admin-crew-test-reset-card {
  display: none !important;
}
#admin .bl21118-admin-page {
  width: 100%;
  min-width: 0;
  padding-bottom: 72px;
}
#admin .bl21118-admin-page.is-busy button:not([data-bl21118-admin-action="copy-user-id"]) {
  cursor: wait;
}
#admin .bl21118-admin-error,
#admin .bl21118-admin-notice {
  display: grid;
  gap: 4px;
}
#admin .bl21118-admin-error strong {
  color: #f0c678;
}
#admin .bl21118-admin-error span,
#admin .bl21118-admin-error small {
  overflow-wrap: anywhere;
}
#admin .bl21118-admin-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}
#admin .bl21118-admin-toolbar input {
  min-width: 0;
}
#admin .bl21118-admin-user-list {
  display: grid;
  gap: 8px;
}
#admin .bl21118-admin-user-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.5fr) minmax(95px, .55fr) minmax(145px, 1fr) minmax(155px, 1fr) minmax(145px, .85fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
#admin .bl21118-admin-user-row.selected {
  border-color: rgba(211,168,80,.62);
  background: rgba(211,168,80,.07);
  box-shadow: inset 3px 0 0 #d3a850;
}
#admin .bl21118-admin-user-row > div,
#admin .bl21118-admin-user-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#admin .bl21118-admin-user-row strong,
#admin .bl21118-admin-user-row span,
#admin .bl21118-admin-user-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#admin .bl21118-admin-user-row small,
#admin .bl21118-admin-user-row span {
  color: var(--muted);
  font-size: .76rem;
}
#admin .bl21118-admin-user-row .badge {
  width: max-content;
  color: inherit;
}
#admin .bl21118-admin-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted) !important;
  font-size: .67rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#admin .bl21118-admin-you {
  display: inline-block !important;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(101,190,126,.14);
  color: #9ce1ad !important;
  font-size: .62rem !important;
  vertical-align: 2px;
}
#admin .bl21118-admin-selected-head {
  margin: 10px 0 0;
  padding: 8px 2px 0;
}
#admin .bl21118-admin-selected-head h2,
#admin .bl21118-admin-selected-head p {
  margin: 0;
}
#admin .bl21118-admin-edit-grid,
#admin .bl21118-admin-control-grid {
  align-items: stretch;
}
#admin .bl21118-admin-control-grid > :nth-child(3) {
  grid-column: 1 / -1;
}
#admin .bl21118-admin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
#admin .bl21118-admin-form > button {
  margin-top: auto;
}
#admin .bl21118-admin-value-grid {
  display: grid;
  gap: 8px;
}
#admin .bl21118-admin-value-row {
  display: grid;
  grid-template-columns: minmax(105px, .8fr) minmax(100px, 1fr) minmax(100px, 1fr);
  gap: 8px;
  align-items: end;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
#admin .bl21118-admin-value-row > div {
  display: grid;
  gap: 2px;
  align-self: center;
}
#admin .bl21118-admin-value-row > div span {
  color: var(--muted);
  font-size: .72rem;
}
#admin .bl21118-admin-value-row label,
#admin .bl21118-admin-crew-counts label,
#admin .bl21118-admin-advisers label,
#admin .bl21118-admin-identity-grid label,
#admin .bl21118-admin-suspension label,
#admin .bl21118-admin-family-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: .74rem;
}
#admin .bl21118-admin-value-row input,
#admin .bl21118-admin-crew-counts input,
#admin .bl21118-admin-advisers select,
#admin .bl21118-admin-identity-grid input,
#admin .bl21118-admin-suspension select,
#admin .bl21118-admin-family-controls select {
  width: 100%;
  min-width: 0;
}
#admin .bl21118-admin-crew-counts,
#admin .bl21118-admin-advisers,
#admin .bl21118-admin-identity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#admin .bl21118-admin-identity-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}
#admin .bl21118-admin-control-card,
#admin .bl21118-admin-danger-zone {
  height: 100%;
}
#admin .bl21118-admin-actions {
  margin-top: 12px;
}
#admin .bl21118-admin-suspension,
#admin .bl21118-admin-family-controls {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#admin .bl21118-admin-family-controls {
  grid-template-columns: minmax(190px, 1fr) auto auto auto;
}
#admin .bl21118-admin-protection {
  margin: 10px 0 0;
  color: #e5bd74;
}
#admin .bl21118-admin-summary-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
#admin .bl21118-admin-summary-inline > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
#admin .bl21118-admin-summary-inline span {
  color: var(--muted);
  font-size: .7rem;
}
#admin .bl21118-admin-summary-inline strong {
  overflow-wrap: anywhere;
  font-size: .84rem;
}
#admin .bl21118-admin-danger-zone {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-color: rgba(221,115,107,.36);
  background: rgba(221,115,107,.055);
}
#admin .bl21118-admin-danger-zone h3,
#admin .bl21118-admin-danger-zone p {
  margin: 0;
}
#admin .bl21118-admin-danger-zone p {
  margin-top: 4px;
}
#admin .bl21118-admin-audit-list {
  display: grid;
  gap: 7px;
}
#admin .bl21118-admin-audit-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
}
#admin .bl21118-admin-audit-row > div {
  display: grid;
  gap: 2px;
}
#admin .bl21118-admin-audit-row span,
#admin .bl21118-admin-audit-row time {
  color: var(--muted);
  font-size: .76rem;
}
#admin .bl21118-admin-empty,
#admin .bl21118-admin-select-prompt {
  text-align: center;
}
@media (max-width: 1280px) {
  #admin .bl21118-admin-user-row {
    grid-template-columns: minmax(210px, 1.5fr) minmax(100px, .7fr) minmax(145px, 1fr) minmax(155px, 1fr) auto;
  }
  #admin .bl21118-admin-user-row > :nth-child(5) {
    display: none;
  }
  #admin .bl21118-admin-family-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  #admin .bl21118-admin-toolbar,
  #admin .bl21118-admin-edit-grid,
  #admin .bl21118-admin-control-grid {
    grid-template-columns: 1fr !important;
  }
  #admin .bl21118-admin-toolbar {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  #admin .bl21118-admin-toolbar input {
    grid-column: 1 / -1;
  }
  #admin .bl21118-admin-control-grid > :nth-child(3) {
    grid-column: auto;
  }
  #admin .bl21118-admin-user-row {
    grid-template-columns: minmax(190px, 1fr) minmax(95px, auto) auto;
  }
  #admin .bl21118-admin-user-row > :nth-child(3),
  #admin .bl21118-admin-user-row > :nth-child(4),
  #admin .bl21118-admin-user-row > :nth-child(5) {
    display: none;
  }
}
@media (max-width: 620px) {
  #admin .bl21118-admin-toolbar,
  #admin .bl21118-admin-user-row,
  #admin .bl21118-admin-value-row,
  #admin .bl21118-admin-crew-counts,
  #admin .bl21118-admin-advisers,
  #admin .bl21118-admin-identity-grid,
  #admin .bl21118-admin-suspension,
  #admin .bl21118-admin-family-controls,
  #admin .bl21118-admin-summary-inline {
    grid-template-columns: 1fr !important;
  }
  #admin .bl21118-admin-toolbar input {
    grid-column: auto;
  }
  #admin .bl21118-admin-user-row > :nth-child(2) {
    display: none;
  }
  #admin .bl21118-admin-danger-zone,
  #admin .bl21118-admin-audit-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   Phase 21.124 — full-composition Independent art, intentional solo routes,
   and visible Headquarters requirements.
---------------------------------------------------------------------------- */
.nav-btn.bl21124-family-nav-hidden {
  display: none !important;
}

.pregame-shell .family-setup-layout.bl21122-street-setup .auth-family-media > img:first-child,
.pregame-shell .family-setup-layout.bl21123-street-setup .auth-family-media > img:first-child,
.family-setup-layout.bl21122-street-setup .auth-family-media > img,
.family-setup-layout.bl21123-street-setup .auth-family-media > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1672 / 941 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050505 !important;
}

#street-work .bl21122-job-card > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1672 / 941 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050505 !important;
}

#headquarters .phase21124-hq-requirements {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 2px 0 6px !important;
}

#headquarters .phase21124-hq-requirements .requirement-chip {
  min-width: 0 !important;
  min-height: 39px !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
}

#headquarters .phase21124-hq-requirements .requirement-chip span,
#headquarters .phase21124-hq-requirements .requirement-chip strong {
  display: block !important;
  min-width: 0 !important;
}

#headquarters .phase21124-hq-requirements .requirement-chip span {
  color: var(--muted) !important;
  font-size: 7px !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

#headquarters .phase21124-hq-requirements .requirement-chip strong {
  margin-top: 4px !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: 8.5px !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#headquarters .phase21124-hq-requirements .requirement-chip.bad {
  border-color: rgba(206, 89, 78, .46) !important;
  background: rgba(125, 39, 34, .09) !important;
}

#headquarters .phase21124-hq-requirements .requirement-chip.ok {
  border-color: rgba(73, 181, 111, .38) !important;
  background: rgba(36, 112, 64, .08) !important;
}

#headquarters .hq2177-upgrade-btn:disabled,
#headquarters .hq2177-action-btn:disabled {
  opacity: .72 !important;
}

@media (max-width: 620px) {
  #headquarters .phase21124-hq-requirements {
    grid-template-columns: 1fr !important;
  }
}


/* Blood & Tribute 21.131 — canonical navigation and retired page fragments */
.nav-btn.bl21126-family-nav-hidden,
.nav-btn[data-family-only-hidden] { display: none !important; }
#crew .crew-guide-card-clean,
#crew .full-width-info-card:has(h3),
#family .clarity-page-guide { animation: none !important; }
html[data-black-ledger-build="21.132"] .view { animation: none; }
html[data-black-ledger-build="21.132"] #operations .page-stack,
html[data-black-ledger-build="21.132"] #crew .page-stack,
html[data-black-ledger-build="21.132"] #family .page-stack,
html[data-black-ledger-build="21.132"] #headquarters .page-stack,
html[data-black-ledger-build="21.132"] #territory .page-stack,
html[data-black-ledger-build="21.132"] #objectives .page-stack { transition: none !important; }


/* Blood & Tribute 21.131 — stable Independent pages */
.bl21128-family-choice-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:stretch}
.bl21128-family-choice-row>.card{min-width:0;margin:0;padding:15px}
.bl21128-affiliation-card,.bl21128-family-path-card{display:flex;flex-direction:column;gap:9px}
.bl21128-family-path-card>.wide{margin-top:auto}
.bl21128-family-choice-row .section-head{margin-bottom:2px}.bl21128-family-choice-row h3,.bl21128-family-choice-row p{margin:0}.bl21128-family-choice-row p{line-height:1.42}.bl21128-family-choice-row label{margin-top:auto}
.bl21128-founding-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:2px 0}.bl21128-founding-checks .requirement-chip{min-height:0;padding:7px}
#crew .phase2145-input-wrap button,#crew .phase2145-arrows button,#crew .phase2149-input-wrap button,#crew .phase2149-arrows button{min-width:28px}
html[data-black-ledger-build="21.132"] .view,html[data-black-ledger-build="21.132"] .page-stack{animation:none!important;transition:none!important}
@media(max-width:1100px){.bl21128-family-choice-row{grid-template-columns:1fr 1fr}.bl21128-affiliation-card{grid-column:1/-1}}
@media(max-width:720px){.bl21128-family-choice-row{grid-template-columns:1fr}.bl21128-affiliation-card{grid-column:auto}}

/* Blood & Tribute 21.131 — simplified Independent progression and recruitment */
html[data-black-ledger-build="21.132"] .view,
html[data-black-ledger-build="21.132"] .page-stack{animation:none!important;transition:none!important}
.nav-btn.bl21129-street-nav-hidden{display:none!important}

/* Independent Dashboard */
.bl21129-independent-dashboard .section-hero{min-height:0}
.bl21129-independent-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.bl21129-independent-dashboard-grid>.card{margin:0;height:100%}
.bl21129-progress-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bl21129-progress-checks .requirement-chip{min-height:58px}
.bl21129-active-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.bl21129-active-summary>div{display:grid;gap:3px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
.bl21129-active-summary span{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.055em}

/* Street Work compact status row and visible rewards */
#street-work .bl21129-street-status-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
#street-work .bl21129-street-status-row>.card{margin:0;min-width:0;height:100%;padding:14px}
#street-work .bl21129-street-compact .section-head{margin-bottom:8px}
#street-work .bl21129-street-compact .section-head p{margin-top:3px;font-size:.78rem}
#street-work .bl21129-street-compact .bl21122-check-grid{gap:6px}
#street-work .bl21129-street-compact .requirement-chip{min-height:0;padding:7px}
#street-work .bl21129-street-compact .row-actions{margin-top:8px}
#street-work .bl21129-active-street-card .bl21122-active-list{max-height:145px;overflow:auto}
#street-work .bl21129-job-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}
#street-work .bl21129-job-rewards>div{display:grid;gap:3px;min-width:0;padding:8px;border:1px solid rgba(191,145,62,.22);border-radius:8px;background:rgba(191,145,62,.055)}
#street-work .bl21129-job-rewards span{color:var(--gold-2);font-size:.65rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
#street-work .bl21129-job-rewards strong{overflow-wrap:anywhere;font-size:.75rem;line-height:1.25}

/* Independent Family page */
#family .bl21129-affiliation-card{margin:0;padding:14px 16px}
#family .bl21129-affiliation-card .section-head{margin-bottom:4px}
#family .bl21129-affiliation-card p{margin:0}
#family .bl21129-family-path-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
#family .bl21129-family-path-card{display:flex;min-width:0;height:100%;margin:0;flex-direction:column;gap:9px;padding:15px}
#family .bl21129-family-path-card p{margin:0;line-height:1.4}
#family .bl21129-family-path-card label{margin-top:auto}
#family .bl21129-family-path-card>.wide{margin-top:auto}
#family .bl21122-family-extension{display:contents}

@media(max-width:1150px){
}
@media(max-width:900px){
  .bl21129-independent-dashboard-grid,
  #street-work .bl21129-street-status-row{grid-template-columns:1fr}
  .bl21129-progress-checks{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  #family .bl21129-family-path-row,
  #street-work .bl21129-job-rewards{grid-template-columns:1fr}
  .bl21129-progress-checks{grid-template-columns:1fr}
}


/* Blood & Tribute 21.131 — recruitment notification badge */
.nav-btn .bl21131-recruitment-badge { pointer-events: none; }


/* Blood & Tribute 21.132 — clean production notices */
.notice{border-style:solid!important;}


/* Build 21.134 — solo Operations + unified Rival Network */
.bl21134-solo-operations .layout-main-side{align-items:start}
.bl21134-solo-op-grid{align-items:stretch}
.bl21134-solo-op{height:100%}
.bl21134-solo-op .entity-card-body{display:flex;flex-direction:column;gap:12px;height:100%}
.bl21134-solo-op .requirements-grid{margin-top:auto}
.bl21134-rivals-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:24px;padding:24px}
.bl21134-rival-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:center}
.bl21134-rival-summary>div,.bl21134-rival-metrics>div{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:4px}
.bl21134-rival-summary span,.bl21134-rival-metrics span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.bl21134-rival-target{padding:20px;display:flex;flex-direction:column;gap:14px}
.bl21134-rival-target .entity-head{align-items:flex-start}
.bl21134-rival-target .entity-head p{margin:5px 0 0}
.bl21134-rival-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bl21134-range{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}
.bl21134-range.ok{border-color:rgba(80,180,115,.5);background:rgba(80,180,115,.08)}
.bl21134-range.blocked{border-color:rgba(190,145,70,.45);background:rgba(190,145,70,.06)}
.bl21134-range span{color:var(--muted);font-size:.84rem}
.bl21134-rival-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bl21134-rival-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px}
.bl21134-rival-actions button span{font-size:.72rem;opacity:.72;font-weight:500}
.bl21134-target-status{min-height:1.2em;margin:0}
@media(max-width:900px){.bl21134-rivals-hero{grid-template-columns:1fr}.bl21134-rival-summary,.bl21134-rival-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bl21134-rival-actions,.bl21134-rival-summary,.bl21134-rival-metrics{grid-template-columns:1fr}}
.bl21134-family-target-group{display:flex;flex-direction:column;gap:10px;min-width:0}
.bl21134-family-members{padding:14px}
.bl21134-family-members summary{cursor:pointer;font-weight:700}
.bl21134-family-members[open] summary{margin-bottom:14px}
.bl21134-family-members .bl21134-rival-target{background:rgba(255,255,255,.018)}


/* Blood & Tribute 21.135 — stable signed-out chrome + proportional solo art */
html[data-bl-auth-state="signed-out"] #resourceStrip,
.pregame-shell #resourceStrip {
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.pregame-shell .auth-clean-layout .auth-login-media > img:first-child,
.pregame-shell .auth-clean-layout .auth-media > img:first-child {
  flex:0 0 auto !important;
  height:clamp(180px,25vh,235px) !important;
  min-height:clamp(180px,25vh,235px) !important;
  max-height:clamp(180px,25vh,235px) !important;
  width:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
#operations .bl21134-solo-op .operation-card-art {
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9 !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#080808 !important;
  display:block !important;
}
#rivals .bl21134-rival-target[data-rival134-target^="family:"] { cursor:pointer; }
#rivals .bl21134-rival-target[data-rival134-target^="family:"]:hover { border-color:var(--line-2); }
#rivals .bl21134-family-members[open] { margin-top:10px; }

/* Blood & Tribute 21.136 — canonical Rival surface and active Legacy clarity */
.bl21136-rivals .bl21136-family-card{cursor:pointer;position:relative;}
.bl21136-rivals .bl21136-family-card:hover{transform:translateY(-1px);}
.bl21136-open-hint{display:block;margin:.2rem 0 .65rem;color:var(--gold,#d6ae62);font-size:.78rem;font-weight:700;letter-spacing:.02em;}
.bl21136-member-panel{margin-top:.75rem;padding:1rem;}
.bl21136-member-panel.hidden{display:none!important;}
.bl21136-view-members{margin-top:.8rem;}
.bl21136-legacy-active{position:relative;border-color:rgba(116,191,132,.75)!important;box-shadow:inset 0 0 0 1px rgba(116,191,132,.18),0 0 18px rgba(80,150,96,.08);}
.bl21136-legacy-active::after{content:'✓';position:absolute;right:.8rem;top:.65rem;width:1.6rem;height:1.6rem;border-radius:999px;display:grid;place-items:center;background:rgba(87,164,104,.2);border:1px solid rgba(116,191,132,.7);color:#b9efc4;font-weight:900;}
.bl21136-legacy-active-marker{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;min-width:130px;}
.bl21136-legacy-active-marker small{color:var(--muted,#9b948a);font-size:.72rem;text-align:right;}
#family .bl21122-legacy-hub button.primary,#family .bl21122-legacy-tree button.primary,#family [data-bl21122-action="apply-family"]{min-height:40px;}
#headquarters .hq2177-action-btn.primary{min-height:44px;}

/* Blood & Tribute 21.138 — Rivals availability + Admin flow repair. */
#gameScreen:not(.hidden) .nav-btn[data-view="rivals"],
#gameScreen:not(.hidden) [data-pvp14-nav="rivals"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#rivals .bl21138-family-card { cursor: pointer; }
#rivals .bl21138-member-panel { margin-top: 12px; }
#rivals .bl21138-family-group { min-width: 0; }
#rivals .bl21138-view-members { margin-top: 10px; }

#admin .bl21118-admin-inspector {
  display: grid !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
#admin .bl21118-admin-edit-grid,
#admin .bl21118-admin-control-grid {
  align-items: start !important;
  min-width: 0 !important;
}
#admin .bl21118-admin-control-card,
#admin .bl21118-admin-danger-zone {
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}
#admin .bl21118-admin-audit {
  position: relative !important;
  z-index: 0 !important;
  clear: both !important;
  margin-top: 0 !important;
  transform: none !important;
}


/* Blood & Tribute 21.143 — compact/scalable Rivals directory */
.bl21143-rivals-screen{display:block;width:100%;min-width:0;padding:0 0 40px}
.bl21143-rivals-screen[hidden]{display:none!important}
.bl21143-rivals{display:grid;gap:14px;width:100%;min-width:0}
.bl21143-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr);gap:16px;align-items:center;padding:16px}
.bl21143-hero h2,.bl21143-detail-hero h2{margin:2px 0 6px}
.bl21143-summary,.bl21143-detail-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bl21143-summary>div,.bl21143-detail-metrics>div{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
.bl21143-summary span,.bl21143-detail-metrics span{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bl21143-summary strong,.bl21143-detail-metrics strong{display:block;margin-top:3px}
.bl21143-directory-card,.bl21143-members,.bl21143-actions,.bl21143-detail-hero{padding:14px}
.bl21143-directory-tools{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:center;margin:10px 0 12px}
.bl21143-directory-tools input{width:100%;min-height:38px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0c0c0c;color:var(--text);outline:none}
.bl21143-directory-tools input:focus{border-color:rgba(200,154,74,.6);box-shadow:0 0 0 2px rgba(200,154,74,.12)}
.bl21143-filter-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bl21143-filter-group button{min-height:36px;padding:7px 11px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.03);color:var(--muted);font-weight:800}
.bl21143-filter-group button.active{border-color:rgba(200,154,74,.6);background:linear-gradient(180deg,#d8ae59,#a9792d);color:#130e07}
.bl21143-filter-group span{opacity:.72;margin-left:4px}
.bl21143-directory-list,.bl21143-member-list{display:grid;gap:6px}
.bl21143-directory-row{width:100%;display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(105px,.55fr) minmax(90px,.45fr) minmax(90px,.45fr) minmax(120px,.65fr) 20px;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(180deg,rgba(20,20,20,.97),rgba(12,12,11,.99));color:var(--text);text-align:left;transform:none!important;transition:border-color .12s ease,background .12s ease!important}
.bl21143-directory-row:hover,.bl21143-member-row:hover{border-color:rgba(200,154,74,.52);background:linear-gradient(90deg,rgba(200,154,74,.09),rgba(255,255,255,.025))}
.bl21143-directory-row>span,.bl21143-member-row>span{min-width:0}
.bl21143-directory-row small,.bl21143-member-row small{display:block;margin-bottom:2px;color:var(--muted);font-size:9px;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.bl21143-directory-row strong,.bl21143-member-row strong{display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl21143-name strong{color:#f0c36d;font-family:Cinzel,serif;font-size:15px}
.bl21143-directory-row>b,.bl21143-member-row>b{color:#f0c36d;font-size:24px;text-align:right}
.bl21143-directory-row .ok strong,.bl21143-member-row .ok strong,.bl21143-detail-metrics .ok{color:#8ddd9e}
.bl21143-directory-row .blocked strong,.bl21143-member-row .blocked strong,.bl21143-detail-metrics .blocked{color:#ef9a91}
.bl21143-empty{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02);color:var(--muted);text-align:center}
.bl21143-detail-hero{display:grid;gap:12px}
.bl21143-back{justify-self:start}
.bl21143-detail-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.bl21143-detail-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.bl21143-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.bl21143-action{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:10px 12px;border:1px solid rgba(200,154,74,.45);border-radius:10px;background:linear-gradient(180deg,#d8ae59,#a9792d);color:#130e07;text-align:left}
.bl21143-action.scout{background:rgba(255,255,255,.035);color:var(--text);border-color:rgba(200,154,74,.35)}
.bl21143-action span{min-width:0}.bl21143-action strong,.bl21143-action small{display:block}.bl21143-action small{margin-top:3px;opacity:.75}.bl21143-action em{font-size:10px;font-style:normal;font-weight:900;text-align:right}
.bl21143-action:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.55)}
.bl21143-member-row{width:100%;display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(100px,.45fr) minmax(130px,.65fr) 20px;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(180deg,rgba(20,20,20,.97),rgba(12,12,11,.99));color:var(--text);text-align:left;transform:none!important;transition:border-color .12s ease,background .12s ease!important}
.bl21143-balance-note{padding:12px 14px}
#bl21143-rival-modal .bl21108-modal-image{object-fit:cover;object-position:center 35%}
@media(max-width:980px){.bl21143-hero{grid-template-columns:1fr}.bl21143-directory-row{grid-template-columns:minmax(190px,1.4fr) minmax(85px,.55fr) minmax(80px,.45fr) minmax(100px,.6fr) 18px}.bl21143-directory-row>span:nth-of-type(3){display:none}.bl21143-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.bl21143-rivals-screen{padding-bottom:24px}.bl21143-directory-tools{grid-template-columns:1fr}.bl21143-filter-group{justify-content:flex-start}.bl21143-directory-row{grid-template-columns:minmax(0,1fr) auto 16px;gap:8px;padding:10px}.bl21143-directory-row>span:nth-of-type(2),.bl21143-directory-row>span:nth-of-type(3),.bl21143-directory-row>span:nth-of-type(5){display:none}.bl21143-directory-row>span:nth-of-type(4){text-align:right}.bl21143-name strong{font-size:14px}.bl21143-member-row{grid-template-columns:minmax(0,1fr) auto 16px}.bl21143-member-row>span:nth-of-type(3){display:none}.bl21143-action-grid{grid-template-columns:1fr}.bl21143-summary{grid-template-columns:repeat(3,minmax(0,1fr));font-size:11px}.bl21143-detail-head{display:grid}.bl21143-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Blood & Tribute 21.144 — canonical Rival routing, action cards, and Crew rebalance */
.bl21144-rivals-screen{width:100%;min-width:0;padding:0 0 40px}
.bl21144-rivals-screen[hidden]{display:none!important}
.bl21144-rivals{display:grid;gap:14px;width:100%;min-width:0}
.bl21144-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr);gap:16px;align-items:center;padding:16px}
.bl21144-hero h2,.bl21144-detail-hero h2{margin:2px 0 6px}
.bl21144-summary,.bl21144-detail-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bl21144-summary>div,.bl21144-detail-metrics>div{padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.025)}
.bl21144-summary span,.bl21144-detail-metrics span{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bl21144-summary strong,.bl21144-detail-metrics strong{display:block;margin-top:3px}
.bl21144-directory-card,.bl21144-members,.bl21144-detail-hero{padding:14px}
.bl21144-directory-tools{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;align-items:center;margin:10px 0 12px}
.bl21144-directory-tools input{width:100%;min-height:40px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0c0c0c;color:var(--text);outline:none}
.bl21144-directory-tools input:focus{border-color:rgba(200,154,74,.6);box-shadow:0 0 0 2px rgba(200,154,74,.12)}
.bl21144-filter-group{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.bl21144-directory-list,.bl21144-member-list{display:grid;gap:6px}
.bl21144-directory-row{width:100%;display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(105px,.55fr) minmax(90px,.45fr) minmax(90px,.45fr) minmax(120px,.65fr) 20px;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(180deg,rgba(20,20,20,.97),rgba(12,12,11,.99));color:var(--text);text-align:left;transform:none!important;transition:border-color .12s ease,background .12s ease!important}
.bl21144-directory-row:hover,.bl21144-member-row:hover{border-color:rgba(200,154,74,.52);background:linear-gradient(90deg,rgba(200,154,74,.09),rgba(255,255,255,.025))}
.bl21144-directory-row>span,.bl21144-member-row>span{min-width:0}
.bl21144-directory-row small,.bl21144-member-row small{display:block;margin-bottom:2px;color:var(--muted);font-size:9px;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.bl21144-directory-row strong,.bl21144-member-row strong{display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl21144-name strong{color:#f0c36d;font-family:Cinzel,serif;font-size:15px}
.bl21144-directory-row>b,.bl21144-member-row>b{color:#f0c36d;font-size:24px;text-align:right}
.bl21144-directory-row .ok strong,.bl21144-member-row .ok strong,.bl21144-detail-metrics .ok{color:#8ddd9e}
.bl21144-directory-row .blocked strong,.bl21144-member-row .blocked strong,.bl21144-detail-metrics .blocked{color:#ef9a91}
.bl21144-empty{padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02);color:var(--muted);text-align:center}
.bl21144-detail-hero{display:grid;gap:12px}.bl21144-detail-nav{justify-content:flex-start}
.bl21144-detail-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.bl21144-detail-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.bl21144-member-row{width:100%;display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(100px,.45fr) minmax(130px,.65fr) 20px;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:linear-gradient(180deg,rgba(20,20,20,.97),rgba(12,12,11,.99));color:var(--text);text-align:left;transform:none!important;transition:border-color .12s ease,background .12s ease!important}
.bl21144-balance-note{padding:12px 14px}
.bl21144-action-section{display:grid;gap:10px}
.bl21144-action-grid{align-items:stretch}
.bl21144-action-card{overflow:hidden;height:100%}
.bl21144-action-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 34%;display:block;background:#080808}
.bl21144-action-card .entity-card-body{display:flex;flex-direction:column;gap:10px;height:100%}
.bl21144-action-card .requirements-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl21144-action-card button.wide{margin-top:auto}
.bl21144-reward-box{display:grid;gap:3px;padding:10px;border:1px solid rgba(200,154,74,.22);border-radius:10px;background:rgba(200,154,74,.055)}
.bl21144-reward-box>span{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.bl21144-reward-box>strong{font-size:13px;line-height:1.35}.bl21144-reward-box>small{color:var(--muted);line-height:1.35}
#bl21144-rival-modal .bl21108-modal-image{object-fit:cover;object-position:center 35%}
.bl21144-result-summary{display:grid;gap:10px;margin-top:10px;padding:12px;border:1px solid rgba(200,154,74,.3);border-radius:10px;background:rgba(255,255,255,.025)}
.bl21144-result-summary.hidden{display:none!important}.bl21144-result-head{display:grid;gap:5px}.bl21144-result-head>strong{color:var(--gold);letter-spacing:.06em}.bl21144-result-head.success>strong{color:#8ddd9e}.bl21144-result-head>span{line-height:1.45}
.bl21144-result-deltas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.bl21144-result-deltas>div{padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px}.bl21144-result-deltas span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.bl21144-result-deltas strong{display:block;margin-top:2px}
.bl21144-crew-release-row{margin-top:2px}.bl21144-crew-release-row .ghost{min-height:38px}
@media(max-width:980px){.bl21144-hero{grid-template-columns:1fr}.bl21144-directory-row{grid-template-columns:minmax(190px,1.4fr) minmax(85px,.55fr) minmax(80px,.45fr) minmax(100px,.6fr) 18px}.bl21144-directory-row>span:nth-of-type(3){display:none}.bl21144-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.bl21144-result-deltas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.bl21144-rivals-screen{padding-bottom:24px}.bl21144-directory-tools{grid-template-columns:1fr}.bl21144-filter-group{justify-content:flex-start}.bl21144-directory-row{grid-template-columns:minmax(0,1fr) auto 16px;gap:8px;padding:10px}.bl21144-directory-row>span:nth-of-type(2),.bl21144-directory-row>span:nth-of-type(3),.bl21144-directory-row>span:nth-of-type(5){display:none}.bl21144-directory-row>span:nth-of-type(4){text-align:right}.bl21144-name strong{font-size:14px}.bl21144-member-row{grid-template-columns:minmax(0,1fr) auto 16px}.bl21144-member-row>span:nth-of-type(3){display:none}.bl21144-summary{grid-template-columns:repeat(3,minmax(0,1fr));font-size:11px}.bl21144-detail-head{display:grid}.bl21144-detail-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.bl21144-action-card .requirements-grid{grid-template-columns:1fr}.bl21144-result-deltas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Build 21.145 Rivals card-fit and route fixes */
.bl21144-rivals-screen[hidden]{display:none!important;}
.bl21144-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;}
.bl21144-action-card img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;object-position:center center;background:linear-gradient(180deg,#111 0%,#0a0a0a 100%);padding:6px;border-bottom:1px solid rgba(210,160,65,.18);}
.bl21144-action-card .entity-card-body{padding:12px;}
@media (max-width: 1500px){.bl21144-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 860px){.bl21144-action-grid{grid-template-columns:1fr;}}

/* Build 21.146 stronger Rivals sizing */
.bl21144-action-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;}
.bl21144-action-card{font-size:.95rem;}
.bl21144-action-card img{width:100%!important;aspect-ratio:16/9!important;object-fit:contain!important;object-position:center center!important;height:auto!important;max-height:none!important;background:#0f0f0f!important;padding:6px!important;}
.bl21144-action-card .entity-card-body{padding:10px!important;}
.bl21144-action-card .entity-head h4{font-size:.98rem!important;line-height:1.1!important;}
.bl21144-action-card .meta-grid-inline.three{gap:6px!important;}
.bl21144-action-card .bl21144-reward-box{margin-top:6px!important;padding:8px!important;}
.bl21144-action-card .requirements-grid{gap:6px!important;margin-top:6px!important;}
.bl21144-action-card .requirement-chip{padding:5px 7px!important;}
.bl21144-action-card button.primary.wide{padding:9px 10px!important;font-size:.9rem!important;}
@media (max-width:1500px){.bl21144-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media (max-width:860px){.bl21144-action-grid{grid-template-columns:1fr!important;}}

/* Build 21.150: native Rivals route; visibility is owned only by the base .view/.view.active rules. */
.bl21144-detail-nav{display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:8px!important;width:auto!important;}
.bl21144-detail-nav>button,.bl21144-detail-nav>.button,.bl21144-detail-nav>a{width:auto!important;min-width:0!important;max-width:max-content!important;flex:0 0 auto!important;display:inline-flex!important;padding:8px 12px!important;}

/* Build 21.154 — Rivals is a native view, never a standalone always-visible layer. */
#rivals.view{display:none!important;}
#rivals.view.active{display:block!important;}
#rivals.bl21144-rivals-screen{display:none!important;}
#rivals.bl21144-rivals-screen.active{display:block!important;}

/* Build 21.155 — crew rebalance + solo Operations top-row layout */
#crew .bl21155-release-row{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
}
#crew .bl21155-release-btn{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:120px!important;
}
#crew .bl21155-release-note{
  font-size:11px!important;
  line-height:1.25!important;
}
.bl21155-solo-op-status-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
.bl21155-solo-op-status-row>.card{
  min-height:0!important;
  height:100%!important;
}
.bl21155-family-benefits{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:10px!important;
}
.bl21155-family-benefits>div{
  min-height:0!important;
}
@media(max-width:900px){
  .bl21155-solo-op-status-row{grid-template-columns:1fr!important;}
  .bl21155-family-benefits{grid-template-columns:1fr!important;}
}

/* Build 21.157 — compact shared Recruit/Release controls */
#crew .phase21156-crew-adjust-row{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
}
#crew .phase21156-amount-label{
  flex:0 0 auto!important;
  width:auto!important;
}
#crew .phase21156-input-wrap{
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
}
#crew .phase21156-qty{
  width:54px!important;
  min-width:54px!important;
  padding-left:8px!important;
  padding-right:24px!important;
}
#crew .phase21156-crew-adjust-buttons{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex:0 0 auto!important;
}
#crew .phase21156-recruit-btn,
#crew .phase21156-release-btn{
  width:auto!important;
  min-width:78px!important;
  padding:8px 12px!important;
  font-size:.88rem!important;
}
@media(max-width:620px){
  #crew .phase21156-crew-adjust-row{flex-wrap:wrap!important;}
}


/* Build 21.158 — compact Crew controls without card overflow */
#crew .phase21156-crew-adjust-row{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:end!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
}
#crew .phase21156-input-wrap{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
}
#crew .phase21156-qty{
  width:45px!important;
  min-width:45px!important;
  padding:6px 21px 6px 7px!important;
  font-size:.78rem!important;
}
#crew .phase21156-crew-adjust-buttons{
  display:flex!important;
  min-width:0!important;
  width:100%!important;
  gap:4px!important;
}
#crew .phase21156-recruit-btn,
#crew .phase21156-release-btn{
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:6px 5px!important;
  font-size:.72rem!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
#crew .phase2145-card-body{min-width:0!important;}
@media(max-width:620px){
  #crew .phase21156-crew-adjust-row{grid-template-columns:72px minmax(0,1fr)!important;}
}

/* Build 21.158 — Family Legacy feedback and always-visible active perks */
.bl21158-family-legacy-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 250px!important;
  gap:14px!important;
  align-items:start!important;
}
.bl21158-family-legacy-main{min-width:0!important;}
.bl21158-active-perks{
  position:sticky!important;
  top:88px!important;
  max-height:calc(100vh - 104px)!important;
  overflow:auto!important;
  padding:14px!important;
}
.bl21158-active-perk-list{display:grid;gap:8px;}
.bl21158-active-perk{
  display:grid;
  gap:3px;
  padding:9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}
.bl21158-active-perk strong{color:var(--gold);}
.bl21158-active-perk span{font-size:11px;line-height:1.35;}
.bl21158-active-perk small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em;}
.bl21158-active-points{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.bl21158-active-points span{font-size:10px;color:var(--muted);text-transform:uppercase;}
.bl21158-active-points strong{font-size:18px;color:var(--gold);}
.bl21158-points-badge{
  display:grid!important;
  gap:1px!important;
  padding:6px 9px!important;
  text-align:left!important;
}
.bl21158-points-badge span{font-size:8px!important;line-height:1!important;opacity:.8;text-transform:uppercase;}
.bl21158-points-badge strong{font-size:13px!important;line-height:1.1!important;}
.bl21158-legacy-feedback{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}
.bl21158-legacy-feedback>div:first-child{display:grid;gap:2px;}
.bl21158-legacy-feedback strong{font-size:11px;color:var(--gold);}
.bl21158-legacy-feedback span{font-size:10px;color:var(--muted);}
.bl21158-legacy-action-progress{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.bl21158-legacy-action-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:translateX(-100%);
  background:linear-gradient(90deg,var(--gold),#f0cf79);
}
.bl21158-legacy-feedback.working .bl21158-legacy-action-progress span{
  animation:bl21158LegacyProgress 1.15s ease-in-out infinite;
}
.bl21158-legacy-feedback.success{border-color:rgba(91,190,111,.35);}
.bl21158-legacy-feedback.error{border-color:rgba(220,85,85,.45);}
@keyframes bl21158LegacyProgress{
  0%{transform:translateX(-100%)}
  50%{transform:translateX(0)}
  100%{transform:translateX(100%)}
}
@media(max-width:1100px){
  .bl21158-family-legacy-layout{grid-template-columns:minmax(0,1fr) 215px!important;}
}
@media(max-width:850px){
  .bl21158-family-legacy-layout{grid-template-columns:1fr!important;}
  .bl21158-active-perks{position:static!important;max-height:none!important;}
  .bl21158-legacy-feedback{grid-template-columns:1fr!important;}
}

/* Build 21.159 — stable four-digit Crew amount controls */
#crew .phase2159-crew-row{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:9px!important;
  flex-wrap:nowrap!important;
}
#crew .phase2159-amount-label{flex:0 0 auto!important;width:auto!important;min-width:0!important;}
#crew .phase2159-input-wrap{
  position:relative!important;
  display:block!important;
  width:108px!important;
  min-width:108px!important;
  max-width:108px!important;
}
#crew .phase2159-qty{
  box-sizing:border-box!important;
  width:108px!important;
  min-width:108px!important;
  max-width:108px!important;
  padding:8px 31px 8px 10px!important;
  text-align:left!important;
  font-variant-numeric:tabular-nums!important;
}
#crew .phase2159-arrows{width:27px!important;right:1px!important;}
#crew .phase2159-action-buttons{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;}
#crew .phase2159-crew-btn{
  box-sizing:border-box!important;
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  padding:7px 6px!important;
  font-size:11px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
#crew .phase2159-error{
  min-height:0!important;
  margin-top:8px!important;
  white-space:normal!important;
  overflow:visible!important;
}
#crew .phase2159-error.show{display:block!important;}
@media(max-width:620px){
  #crew .phase2159-crew-row{flex-wrap:wrap!important;}
}

/* Build 21.161 — final Crew control ownership and card-safe layout */
#crew .phase2160-crew-row{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  align-items:end!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
#crew .phase2160-amount-label{
  display:block!important;
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
}
#crew .phase2160-input-wrap{
  position:relative!important;
  display:block!important;
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
}
#crew .phase2160-qty{
  box-sizing:border-box!important;
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  padding:7px 25px 7px 8px!important;
  text-align:left!important;
  font-size:11px!important;
  font-variant-numeric:tabular-nums!important;
}
#crew .phase2160-arrows{
  width:22px!important;
  right:1px!important;
}
#crew .phase2160-action-buttons{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:4px!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
#crew .phase2160-crew-btn{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:29px!important;
  padding:5px 3px!important;
  font-size:9.5px!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#crew [data-crew-key],
#crew [data-crew-key] .entity-card-body,
#crew [data-crew-key] .phase2145-card-body{
  min-width:0!important;
  overflow:hidden!important;
}
#crew .phase2160-error{
  min-height:0!important;
  margin-top:7px!important;
  white-space:normal!important;
  overflow:visible!important;
}
#crew .phase2160-error.show{display:block!important;}
@media(max-width:620px){
  #crew .phase2160-crew-row{grid-template-columns:82px minmax(0,1fr)!important;}
}


/* Build 21.162 — Rivals artwork fill + Family Legacy subpage */
.bl21144-action-card img{
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  padding:0!important;
  background:#0b0b0b!important;
}
.bl21161-family-summary-extension{display:grid;gap:12px;}
.bl21161-legacy-launcher{overflow:hidden;}
.bl21161-legacy-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0;}
.bl21161-legacy-mini-stats>div{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 10px;min-width:0;}
.bl21161-legacy-mini-stats span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.bl21161-legacy-mini-stats strong{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bl21161-perk-preview{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:4px 0 12px;}
.bl21161-perk-pill,.bl21161-perk-more{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border-radius:999px;border:1px solid rgba(92,188,111,.35);background:rgba(43,109,54,.16);font-size:11px;font-weight:700;}
.bl21161-perk-more{border-color:rgba(210,160,65,.35);background:rgba(210,160,65,.1);}
.bl21161-legacy-subpage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;}
.bl21161-legacy-subpage-head h2{margin:.12em 0 .2em;}
.bl21161-legacy-subpage-head button{flex:0 0 auto;width:auto!important;}
.bl21161-family-legacy-full>.bl21158-family-legacy-layout{align-items:start;}
#family-legacy .bl21158-active-perks{position:sticky;top:12px;}
@media(max-width:1000px){
  .bl21161-legacy-mini-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bl21161-legacy-subpage-head{flex-direction:column;}
  #family-legacy .bl21158-active-perks{position:static;}
}
@media(max-width:600px){.bl21161-legacy-mini-stats{grid-template-columns:1fr;}}
\n\n/* Build 21.162 — Territory-like Rival media proportions + Family top-row layout */
#rivals .bl21144-action-card img{
  display:block!important;
  width:100%!important;
  aspect-ratio:1.705/1!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  background:#07090d!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.bl21162-family-command-legacy-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
.bl21162-family-command-legacy-row>.card{
  margin:0!important;
  min-width:0!important;
  height:100%!important;
}
.bl21162-family-command-legacy-row .bl21161-legacy-launcher{
  display:flex!important;
  flex-direction:column!important;
}
.bl21162-family-command-legacy-row .bl21161-legacy-launcher>.row-actions:last-child{
  margin-top:auto!important;
  padding-top:10px!important;
}
#family-legacy .bl21162-family-legacy-single{
  display:block!important;
  grid-template-columns:1fr!important;
}
#family-legacy .bl21162-family-legacy-single>.bl21158-family-legacy-main{
  width:100%!important;
  max-width:none!important;
}
#family-legacy .bl21158-active-perks{display:none!important;}
@media(max-width:980px){
  .bl21162-family-command-legacy-row{grid-template-columns:1fr!important;}
}


/* Build 21.163 — live Rivals media geometry + stable Family top row */

/* The Rival artwork files are native 16:9. Let their intrinsic ratio define
   the media height instead of the older 112px/152px fixed windows. */
#rivals .bl21144-action-card > img,
#rivals article.bl21144-action-card > img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0!important;
  background:#080808!important;
  border-radius:12px 12px 0 0!important;
}
#rivals .bl21144-action-card{
  overflow:hidden!important;
}

/* Command Center and Legacy are permanent siblings on the main Family page. */
.bl21163-family-command-legacy-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
  width:100%!important;
}
.bl21163-family-command-legacy-row > .card{
  margin:0!important;
  min-width:0!important;
  width:100%!important;
  height:100%!important;
}
.bl21163-family-command-legacy-row .bl21161-legacy-launcher{
  display:flex!important;
  flex-direction:column!important;
}
.bl21163-family-command-legacy-row .bl21161-legacy-launcher > .row-actions:last-child{
  margin-top:auto!important;
  padding-top:10px!important;
}
@media(max-width:900px){
  .bl21163-family-command-legacy-row{
    grid-template-columns:1fr!important;
  }
}


/* Build 21.164 — Rival Intel visibility, taller popup art, explicit outcomes */
#rivals .bl21164-intel-strip{
  display:grid!important;
  grid-template-columns:minmax(150px,.32fr) minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  padding:11px 12px!important;
  border:1px solid rgba(200,154,74,.25)!important;
  border-radius:11px!important;
  background:rgba(200,154,74,.055)!important;
}
#rivals .bl21164-intel-strip>div span{
  display:block!important;
  color:var(--muted)!important;
  font-size:9px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
#rivals .bl21164-intel-strip>div strong{
  display:block!important;
  margin-top:3px!important;
  color:var(--gold)!important;
  font-size:18px!important;
}
#rivals .bl21164-intel-strip p{
  margin:0!important;
  color:var(--muted)!important;
  line-height:1.4!important;
}

#bl21144-rival-modal .bl21108-modal-card{
  width:min(940px,97vw)!important;
  max-height:96vh!important;
  padding:22px!important;
}
#bl21144-rival-modal .bl21108-modal-image{
  display:block!important;
  width:min(100%,760px)!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:12px auto 14px!important;
  background:#080808!important;
}
#bl21144-rival-modal .bl21164-outcome{
  margin:12px 0 10px!important;
  padding:11px 14px!important;
  border-radius:12px!important;
  font-family:Cinzel,serif!important;
  font-size:clamp(34px,5vw,58px)!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  line-height:1!important;
  text-align:center!important;
  text-transform:uppercase!important;
}
#bl21144-rival-modal .bl21164-outcome.hidden{display:none!important;}
#bl21144-rival-modal .bl21164-outcome.success{
  color:#91e8a5!important;
  border:1px solid rgba(82,176,105,.55)!important;
  background:rgba(32,105,49,.18)!important;
  text-shadow:0 0 24px rgba(82,176,105,.28)!important;
}
#bl21144-rival-modal .bl21164-outcome.failure{
  color:#ffaaa2!important;
  border:1px solid rgba(221,115,107,.55)!important;
  background:rgba(108,29,25,.2)!important;
  text-shadow:0 0 24px rgba(221,115,107,.22)!important;
}
.bl21144-result-head.failure>strong{color:#ffaaa2!important;}

#admin .bl21164-admin-intel-grid{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) minmax(120px,.28fr) auto!important;
  gap:10px!important;
  align-items:end!important;
}
#admin .bl21164-admin-intel-grid label{
  display:grid!important;
  gap:5px!important;
}
#admin .bl21164-admin-intel-grid select,
#admin .bl21164-admin-intel-grid input{
  width:100%!important;
}
@media(max-width:760px){
  #rivals .bl21164-intel-strip{grid-template-columns:1fr!important;}
  #bl21144-rival-modal .bl21108-modal-image{width:min(100%,560px)!important;}
  #admin .bl21164-admin-intel-grid{grid-template-columns:1fr!important;}
}


/* Build 21.165 — true 4:3 Rival media + 25% smaller result popup */
#rivals .bl21144-action-card > img,
#rivals article.bl21144-action-card > img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  background:#080808!important;
}
#bl21144-rival-modal .bl21108-modal-card{
  width:min(705px,94vw)!important;
  max-height:94vh!important;
  padding:16px!important;
  overflow:auto!important;
}
#bl21144-rival-modal .bl21108-modal-image{
  display:block!important;
  width:min(100%,570px)!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:9px auto 10px!important;
  padding:0!important;
  background:#080808!important;
}
#bl21144-rival-modal .bl21164-outcome{
  margin:8px 0!important;
  padding:8px 10px!important;
  font-size:clamp(28px,4vw,44px)!important;
}
#bl21144-rival-modal .bl21144-result-summary{
  margin-top:8px!important;
}
@media(max-width:760px){
  #rivals .bl21144-action-card > img,
  #rivals article.bl21144-action-card > img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    max-height:none!important;
  }
  #bl21144-rival-modal .bl21108-modal-card{
    width:min(94vw,705px)!important;
    max-height:94vh!important;
    padding:12px!important;
  }
  #bl21144-rival-modal .bl21108-modal-image{
    width:min(100%,500px)!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    max-height:none!important;
  }
}


/* Build 21.166 — enforced 4:3 Rival action media + post-scout success estimate */
#rivals .bl21144-action-card{
  height:100%!important;
  overflow:hidden!important;
}
#rivals .bl21166-action-media{
  display:block!important;
  width:100%!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  background:#080808!important;
  border-bottom:1px solid rgba(210,160,65,.18)!important;
}
#rivals .bl21166-action-media > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}

/* Older direct-image geometry must not size the new wrapper's image. */
#rivals .bl21144-action-card > img{
  display:none!important;
}

#rivals .bl21166-success-estimate{
  display:grid!important;
  gap:6px!important;
  padding:8px 9px!important;
  border:1px solid rgba(200,154,74,.22)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.025)!important;
}
#rivals .bl21166-success-line{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:8px!important;
}
#rivals .bl21166-success-line span{
  color:var(--muted)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
#rivals .bl21166-success-line strong{
  font-size:11px!important;
  text-align:right!important;
}
#rivals .bl21166-success-bar{
  height:6px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
}
#rivals .bl21166-success-bar > i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#8b1f17,#c79638,#68b66f)!important;
}
#rivals .bl21166-success-estimate.locked .bl21166-success-bar > i{width:0!important;}
#rivals .bl21166-success-estimate.green{border-color:rgba(93,184,111,.38)!important;}
#rivals .bl21166-success-estimate.gold{border-color:rgba(200,154,74,.42)!important;}
#rivals .bl21166-success-estimate.orange{border-color:rgba(210,128,55,.42)!important;}
#rivals .bl21166-success-estimate.red{border-color:rgba(204,82,73,.42)!important;}


/* Build 21.167 — Active perk unlock icon and status label no longer overlap. */
.bl21136-legacy-active::after{content:none!important;display:none!important;}
.bl21136-legacy-active-marker{position:relative!important;z-index:1!important;padding-right:0!important;min-width:130px!important;}
.bl21136-legacy-active-marker .badge{position:static!important;transform:none!important;margin:0!important;}
.bl21122-legacy-node.unlocked .bl21122-node-order{background:rgba(87,164,104,.18);border-color:rgba(116,191,132,.7);color:#b9efc4;}
@media(max-width:650px){.bl21136-legacy-active-marker{grid-column:2;align-items:flex-start!important;min-width:0!important;}.bl21136-legacy-active-marker small{text-align:left!important;}}


/* --------------------------------------------------------------------------
   Build 21.168 — authoritative mobile drawer visibility and stacking.
   Loaded last so accumulated legacy mobile rules cannot strand the sidebar
   off-canvas after the hamburger is pressed.
---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #app > .sidebar {
    z-index: 1001 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-105%, 0, 0) !important;
    will-change: transform;
  }

  #app.nav-open > .sidebar,
  body.mobile-nav-open #app > .sidebar {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  #navBackdrop {
    z-index: 1000 !important;
  }

  #navBackdrop.hidden,
  #navBackdrop[hidden] {
    display: none !important;
  }

  #app.nav-open > #navBackdrop:not(.hidden),
  body.mobile-nav-open #navBackdrop:not(.hidden) {
    display: block !important;
  }

  html.nav-lock,
  body.nav-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/* Blood & Tribute 21.171 — Territory upkeep status clarity retained */
#territory .bl21170-upkeep-summary {
  margin: 10px 0 14px;
}
#territory [data-territory-status].bl21170-upkeep-covered {
  color: #9fdfb1;
}
#territory [data-territory-status].bl21170-upkeep-due-soon {
  color: #f0c875;
}
#territory [data-territory-status].bl21170-upkeep-due-now,
#territory [data-territory-status].bl21170-upkeep-overdue {
  color: #ff9a8f;
  font-weight: 800;
}
#territory [data-territory-action="upkeep"][data-upkeep-state="due-now"],
#territory [data-territory-action="upkeep"][data-upkeep-state="overdue"] {
  box-shadow: 0 0 0 1px rgba(255, 117, 102, .3), 0 8px 24px rgba(0, 0, 0, .2);
}

/* --------------------------------------------------------------------------
   Blood & Tribute Build 21.175 — brand asset sizing only
   Keeps the new near-square crest readable without consuming the sidebar.
---------------------------------------------------------------------------- */
.brand-logo[src*="blood-and-tribute-logo"],
.brand-logo-sidebar[src*="blood-and-tribute-logo"],
.mobile-drawer-logo[src*="blood-and-tribute-logo"] {
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.sidebar .brand-logo-sidebar[src*="blood-and-tribute-logo"],
.sidebar .brand-logo[src*="blood-and-tribute-logo"] {
  width: min(100%, 184px) !important;
  max-width: 184px !important;
  max-height: 184px !important;
}

.brand-logo.big[src*="blood-and-tribute-logo"] {
  width: 176px !important;
  max-width: min(58vw, 176px) !important;
  max-height: 186px !important;
}

@media (max-width: 760px) {
  .sidebar .mobile-drawer-logo[src*="blood-and-tribute-logo"] {
    width: 144px !important;
    max-width: 144px !important;
    max-height: 152px !important;
  }
  .sidebar .brand-logo-sidebar[src*="blood-and-tribute-logo"],
  .sidebar .brand-logo[src*="blood-and-tribute-logo"] {
    width: 154px !important;
    max-width: 154px !important;
    max-height: 162px !important;
  }
  .brand-logo.big[src*="blood-and-tribute-logo"] {
    width: 148px !important;
    max-width: 52vw !important;
    max-height: 156px !important;
  }
}


/* Blood & Tribute Build 21.176 — combined Independent Active Work */
#dashboard [data-bl21176-dashboard-active-work] {
  display: grid;
  gap: 8px;
}
#dashboard .bl21176-active-work-item .list-main > span:first-of-type {
  color: var(--muted);
}
#crew .phase2145-card .requirements-title.bad,
#crew .phase2149-card .requirements-title.bad {
  white-space: normal;
}


/* Blood & Tribute Build 21.178 — Territory action economy + cooldown clarity */
#territory .bl21177-territory-requirements{
  display:grid;
  gap:5px;
  margin:8px 0 9px;
  padding:8px;
  border:1px solid rgba(215,170,80,.18);
  border-radius:10px;
  background:rgba(215,170,80,.045);
}
#territory .bl21177-territory-req-title{
  color:#d7aa50;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
#territory .bl21177-territory-requirements>div:not(.bl21177-territory-req-title){
  display:grid;
  grid-template-columns:minmax(112px,.7fr) minmax(0,1.3fr);
  gap:8px;
  align-items:center;
}
#territory .bl21177-territory-requirements strong{
  color:var(--text);
  font-size:10px;
  line-height:1.15;
}
#territory .bl21177-territory-requirements span{
  color:var(--muted);
  font-size:9px;
  line-height:1.25;
  text-align:right;
}
#headquarters [data-hq-action-btn][disabled]{
  animation:none!important;
}
@media(max-width:760px){
  #territory .bl21177-territory-requirements>div:not(.bl21177-territory-req-title){
    grid-template-columns:1fr;
    gap:2px;
  }
  #territory .bl21177-territory-requirements span{
    text-align:left;
    font-size:8.5px;
  }
}

/* --------------------------------------------------------------------------
   Blood & Tribute Build 21.181 — Adaptive Daily Objectives
---------------------------------------------------------------------------- */
#objectives .adaptive-objectives-page .objective-milestone-panel {
  overflow: hidden;
}
#objectives .objective-milestone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#objectives .objective-milestone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
}
#objectives .objective-milestone.ready {
  border-color: rgba(79,190,120,.45);
  box-shadow: inset 0 0 0 1px rgba(79,190,120,.08);
}
#objectives .objective-milestone.claimed { opacity: .72; }
#objectives .objective-milestone > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
#objectives .objective-milestone span {
  color: var(--text, #f5efe5);
  font-weight: 800;
}
#objectives .objective-milestone strong,
#objectives .objective-milestone em {
  color: var(--muted, #a9a29a);
  font-size: .82rem;
  font-style: normal;
}
#objectives .adaptive-objective-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#objectives .objective-card-head > div { min-width: 0; }
#objectives .objective-card-head h4 { margin-top: 6px; }
#objectives .objective-difficulty {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted, #a9a29a);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#objectives .objective-difficulty.routine { border-color: rgba(95,174,255,.35); color: #9fcfff; }
#objectives .objective-difficulty.focused { border-color: rgba(218,176,85,.4); color: #e9c773; }
#objectives .objective-difficulty.demanding { border-color: rgba(214,84,84,.45); color: #f19a9a; }
#objectives .objective-difficulty.ambition { border-color: rgba(218,176,85,.65); color: #f3d68a; background: rgba(151,105,24,.12); }
#objectives .objective-description {
  min-height: 3.2em;
  color: var(--muted, #a9a29a);
}
#objectives .objective-meta { margin-top: 12px; }
#objectives .objective-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
#objectives .objective-actions .objective-reroll-btn { min-width: 86px; }
#objectives .adaptive-ambition-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
#objectives .daily-ambition-card {
  border-color: rgba(218,176,85,.45);
  background: linear-gradient(135deg, rgba(118,75,16,.16), rgba(22,18,15,.88));
}
#objectives .daily-ambition-card .objective-description { min-height: auto; }
#objectives .ambition-section-head { margin-top: 2px; }

@media (max-width: 980px) {
  #objectives .objective-milestone-grid { grid-template-columns: 1fr; }
  #objectives .objective-milestone { align-items: flex-start; }
}
@media (max-width: 760px) {
  #objectives .adaptive-standard-grid {
    grid-template-columns: 1fr !important;
  }
  #objectives .adaptive-objective-card {
    min-height: 0;
    padding: 14px !important;
  }
  #objectives .objective-description { min-height: 0; }
  #objectives .objective-actions { grid-template-columns: minmax(0,1fr) auto; }
  #objectives .objective-milestone { padding: 11px; }
  #objectives .objective-milestone button { flex: 0 0 auto; }
}
#objectives .progress.gold > span {
  background: linear-gradient(90deg, #9f6717, #e1bd64);
}

/* --------------------------------------------------------------------------
   Blood & Tribute Build 21.181 — Objectives integrity repair
---------------------------------------------------------------------------- */
#objectives > .page-stack:not(.adaptive-objectives-page) {
  visibility: hidden !important;
}
#objectives .objective-milestone .objective-milestone-claim {
  min-width: 112px;
  justify-content: center;
}
#objectives .objective-milestone .objective-milestone-claim:not([disabled]) {
  box-shadow: 0 8px 20px rgba(120, 25, 25, .2);
}


/* Blood & Tribute Build 21.182 — complete password recovery UI */
.bt-forgot-password {
  width: 100%;
  justify-content: center;
  margin-top: -4px;
  color: var(--gold-2, #d8b46a);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bt-auth-single-layout .auth-forms-wrap { align-content: center; }
.bt-auth-card { align-self: center; }
.bt-auth-card .eyebrow { margin-bottom: -3px; }
.bt-auth-help { margin: 0; font-size: 12px; line-height: 1.5; }
.bt-auth-status {
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(255,255,255,.035);
}
.bt-auth-status.info { color: var(--muted, #bdb7ae); }
.bt-auth-status.success { color: #bfe7c6; border-color: rgba(79,181,104,.4); background: rgba(79,181,104,.08); }
.bt-auth-status.error { color: #ffb8b8; border-color: rgba(219,72,72,.45); background: rgba(219,72,72,.08); }
@media (max-width: 760px) {
  .bt-auth-single-layout .auth-media { min-height: 150px !important; }
  .bt-auth-single-layout .auth-media > img { max-height: 190px !important; }
  .bt-auth-card { margin-top: 0; }
}