/* Dope District — Grit 4 shell skin (full build, 2026-10-23).
 *
 * House style over the existing shell: stencil display type, money-
 * green spray accents, crumpled black panels, gold sparingly. Loaded
 * LAST on the city page so it re-skins chrome without touching layout
 * or behavior. Functional-CSS pass: final art treatment comes later.
 *
 * Graphics Pass Batch 1 (2026-10-24) appends the snipped-art skin for
 * the Map + District chrome at the bottom of this file; the landing
 * half lives in /styles.css. Pieces are cut from the approved mockups
 * into /grit-art/ — source map in work/graphics-pass-log.md.
 */

:root {
  --grit-black: #07090a;
  --grit-panel: #0c0f0b;
  --grit-ink: #f2f0e2;
  --grit-dim: #a9b39b;
  --grit-green: #7ec84a;
  --grit-spray: #9be815;
  --grit-gold: #d8b84a;
  --grit-line: #2a3324;
  --grit-stencil: "Arial Black", "Archivo Black", Impact, Arial, sans-serif;
}

/* ---- top cluster: crumpled black bar, stencil brand ---- */
.city-page .brand-cluster {
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    linear-gradient(160deg, #12160f, #0a0d08 62%, #070906);
  border: 2px solid var(--grit-line);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
}
.city-page .brand-cluster .brand {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
}
.city-page .brand-cluster .brand span {
  color: var(--grit-spray);
}
.city-page .cash-chip {
  color: var(--grit-spray);
  font-weight: 800;
}

/* ---- bottom nav: grit bar, stencil buckets ---- */
html .city-page .game-nav {
  background: rgba(7, 9, 6, 0.92);
  border: 2px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html .city-page .game-nav a {
  font-family: var(--grit-stencil);
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 3px;
}
html .city-page .game-nav a:hover::after,
html .city-page .game-nav a[aria-current="page"]::after {
  background: var(--grit-spray);
  box-shadow: 0 0 8px 2px rgba(155, 232, 21, 0.55);
}
html .city-page .game-nav button#nav-more {
  font-family: var(--grit-stencil);
  font-size: 13px;
  letter-spacing: 1px;
}

/* ---- view headings wear the stencil ---- */
.business-content h1,
.business-content h2,
.bp-body h1,
.bp-body h2 {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}

/* ---- NEXT tracker: torn-tag look ---- */
.city-page .next-tracker {
  border: 2px solid var(--grit-line);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
}
.city-page .next-tracker .nt-label {
  font-family: var(--grit-stencil);
  color: var(--grit-gold);
  letter-spacing: 1.5px;
}

/* ---- thin grit scrollbars inside panels ---- */
.bp-mid::-webkit-scrollbar-thumb,
.db-list::-webkit-scrollbar-thumb {
  background: #33402a;
}

/* ---- Stage 4: feature screens wear the same skin (visual only) ---- */
/* Panels inside any SPA view or business panel: crumpled black with a
   hard grit edge. Layout stays exactly as each view defines it. */
.business-content .panel,
.bp-body .panel,
.business-content .crew-panel,
.business-content .vip-card,
.business-content .event-card,
.business-content .se-card {
  background:
    radial-gradient(130% 100% at 15% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(155deg, #12160f, #0b0e09 60%, #080a07);
  border-color: var(--grit-line);
}
/* Hub section headings + view buttons take the stencil voice. */
.hub-h,
.business-content h3,
.bp-body h3 {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.m-btn,
.empire-btn,
.se-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
}
/* Form fields inside views: dark glass, grit edge, spray focus. */
.business-content input,
.business-content select,
.business-content textarea,
.bp-body input,
.bp-body select,
.bp-body textarea {
  border-color: var(--grit-line);
}
.business-content input:focus,
.business-content select:focus,
.business-content textarea:focus,
.bp-body input:focus,
.bp-body select:focus,
.bp-body textarea:focus {
  outline: 2px solid rgba(126, 200, 74, 0.55);
  outline-offset: 0;
}
/* Tables read as ledger pages. */
.business-content table th,
.bp-body table th {
  font-family: var(--grit-stencil);
  font-size: 12px;
  letter-spacing: 1px;
}
.business-content table td,
.business-content table th,
.bp-body table td,
.bp-body table th {
  border-color: var(--grit-line);
}

/* =====================================================================
   Graphics Pass Batch 1 (2026-10-24) — MAP + DISTRICT chrome.
   Snipped art only: crumpled-black texture from the start-grit-4 band,
   worn corner brackets from the district mockup's BACK TO CITY chip,
   olive button face from the same mockup's TAKE OVER button. All in
   /grit-art/. The map painting, pins, tags geometry and every layout
   metric stay exactly as locked — this section only re-skins.
   ===================================================================== */

/* ---- top bar / bottom nav / blotter / tracker / more menu:
   flat glass becomes crumpled black under a dark veil ---- */
.city-page .brand-cluster {
  background:
    linear-gradient(160deg, rgba(12, 15, 9, 0.84), rgba(7, 9, 6, 0.92)),
    url("/grit-art/tex-crumple.webp") center 30% / cover no-repeat;
}
html .city-page .game-nav {
  background:
    linear-gradient(180deg, rgba(10, 13, 8, 0.88), rgba(6, 8, 5, 0.95)),
    url("/grit-art/tex-crumple.webp") center 65% / cover no-repeat;
}
.city-page .blotter-ticker {
  background:
    linear-gradient(180deg, rgba(9, 11, 7, 0.86), rgba(6, 8, 5, 0.93)),
    url("/grit-art/tex-crumple.webp") center 40% / cover no-repeat;
  border: 2px solid var(--grit-line);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.city-page .blotter-label {
  font-family: var(--grit-stencil);
  color: var(--grit-gold);
  letter-spacing: 2px;
}
.city-page .next-tracker {
  background:
    linear-gradient(180deg, rgba(10, 13, 8, 0.88), rgba(6, 8, 5, 0.95)),
    url("/grit-art/tex-crumple.webp") center 55% / cover no-repeat;
}
#more-menu {
  background:
    linear-gradient(180deg, rgba(10, 13, 8, 0.92), rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center 70% / cover no-repeat;
}

/* ---- district tags, captions, march chips: the board's flat black
   plates (geometry untouched — fill, stroke, type only) ---- */
.district-tag-plate {
  fill: rgba(4, 7, 5, 0.88);
  stroke: rgba(255, 255, 255, 0.28);
}
.district-tag-text {
  font-family: var(--grit-stencil);
}
.map-marker .building-caption rect {
  fill: rgba(4, 7, 5, 0.94);
}
.march-chip rect {
  fill: rgba(4, 7, 5, 0.94);
}

/* ---- incoming-march banner: crumpled red-black, stencil voice ---- */
.march-alert {
  font-family: var(--grit-stencil);
  letter-spacing: 1px;
  background:
    linear-gradient(180deg, rgba(52, 13, 13, 0.88), rgba(36, 8, 8, 0.93)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
}

/* ---- district bar: crumpled panel + worn corners ---- */
#district-bar {
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
}
#district-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 34px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 34px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 34px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 34px no-repeat;
  pointer-events: none;
  z-index: 3;
}
/* BACK TO CITY becomes the mockup's worn stencil chip. */
#db-back {
  background:
    linear-gradient(180deg, rgba(13, 16, 11, 0.85), rgba(8, 10, 7, 0.92)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  color: var(--grit-ink);
  border: 2px solid rgba(242, 240, 226, 0.5);
}
#db-back:hover {
  background:
    linear-gradient(180deg, rgba(13, 16, 11, 0.85), rgba(8, 10, 7, 0.92)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  color: var(--grit-spray);
  border-color: var(--grit-spray);
}
#db-name {
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}
/* Vault Heist button: the mockup's scratched olive action face. */
#db-heist {
  font-family: var(--grit-stencil);
  font-size: 13px;
  letter-spacing: 1px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  padding: 10px 12px 8px;
  cursor: pointer;
}
#db-heist:hover {
  filter: brightness(1.08);
}
/* Location + plot rows: worn mini-corners over the grit field. */
.db-item {
  position: relative;
}
.db-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.db-plot-btn {
  font-family: var(--grit-stencil);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  padding: 4px 10px 3px;
  cursor: pointer;
}
.db-plot-btn:hover {
  filter: brightness(1.08);
}

/* =====================================================================
   Graphics Pass Batch 2 (2026-10-24) — WAR TABLE + CREW + WAR &
   MARCHES. Same snipped library as Batch 1 (crumpled-black texture,
   worn corner brackets, gold + olive button faces, all in /grit-art/)
   — no new art. Presentation only: every control, number and flow is
   exactly as the views already render it.
   ===================================================================== */

/* ---------- CREW: kind cards wear the board's card treatment -------
   Crumpled field + worn mini-corners (same construction as the
   district rows in Batch 1), stencil names, gold role plates under
   the portraits, gold counts. */
.crew-kind-card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(14, 18, 12, 0.88), rgba(7, 9, 6, 0.94)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border-color: var(--grit-line);
}
.crew-kind-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.crew-kind-art {
  border-color: rgba(216, 184, 74, 0.55);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.5),
    3px 3px 0 rgba(0, 0, 0, 0.45);
}
.crew-kind-name {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
}
/* Role line directly under the name: the board's gold stencil plate. */
.crew-kind-body > .crew-kind-name + .crew-kind-stat {
  font-family: var(--grit-stencil);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--grit-gold);
  background: rgba(4, 7, 5, 0.85);
  padding: 2px 8px 1px;
}
.crew-kind-count {
  color: var(--grit-gold);
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
}
/* Train / Weapons / Armor + assignment buttons: the olive action
   face from the mockups (same face as the Batch 1 heist button). */
.crew-dev-actions button,
.crew-assign-actions button {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.crew-dev-actions button:hover,
.crew-assign-actions button:hover {
  filter: brightness(1.08);
}
.crew-dev-actions button:disabled,
.crew-assign-actions button:disabled {
  filter: grayscale(0.4) brightness(0.75);
}
/* Recruit submit: the gold button face (the board's primary action). */
.crew-panel .primary {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.crew-panel .primary:hover {
  filter: brightness(1.08);
}
.crew-tabs button {
  font-family: var(--grit-stencil);
  letter-spacing: 1px;
}

/* ---------- WAR TABLE (gang War Room tab) ---------------------------
   The war frame's scroll interior goes crumpled; window / standings /
   battle rows become crumpled cards with worn mini-corners; the
   window banner card takes the crumpled red-black of the incoming
   banner. Scoped to the one tab panel that holds a .war-frame. */
.war-frame .bf-scroll {
  background:
    linear-gradient(160deg, rgba(12, 15, 9, 0.82), rgba(7, 9, 6, 0.92)),
    url("/grit-art/tex-crumple.webp") center 30% / cover no-repeat;
}
.hub-tabpanel:has(.war-frame) .hub-coming,
.war-frame .hub-coming {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid var(--grit-line);
  margin-bottom: 8px;
}
.hub-tabpanel:has(.war-frame) .hub-coming::before,
.war-frame .hub-coming::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.hub-tabpanel:has(.war-frame) .hub-coming strong,
.war-frame .hub-coming strong {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
/* Window banner (first card in the frame): assault-window red-black. */
.war-frame .bf-scroll > .hub-coming:first-child {
  background:
    linear-gradient(180deg, rgba(52, 13, 13, 0.88), rgba(36, 8, 8, 0.93)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
}
.war-frame .bf-scroll > .hub-coming:first-child strong {
  letter-spacing: 1px;
}
/* Battle-plan cards in the war panel: crumpled + corners + stencil. */
.hub-tabpanel:has(.war-frame) .event-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
}
.hub-tabpanel:has(.war-frame) .event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.hub-tabpanel:has(.war-frame) .event-title {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
/* War CTA (inside the frame): the gold face — the board's ATTACK.
   Plan sign-up buttons: the olive face. */
.war-frame .m-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.war-frame .m-btn:hover {
  filter: brightness(1.08);
}
.hub-tabpanel:has(.war-frame) .event-card .m-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.hub-tabpanel:has(.war-frame) .event-card .m-btn:hover {
  filter: brightness(1.08);
}

/* ---------- WAR & MARCHES (raids board + reports) -------------------
   Raid cards crumpled with worn corners; titles stencil; march/ETA
   lines become near-black plates like the map's march chips; battle
   report lines read as ledger plates with a spray edge; the incoming
   warning block takes the crumpled red-black banner treatment. */
.raids-view .event-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
}
.raids-view .event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.raids-view .event-title {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.raids-view .event-type {
  display: inline-block;
  background: rgba(4, 7, 5, 0.9);
  padding: 1px 7px;
  margin-top: 2px;
}
/* Battle-report lines (history cards): note/wall/support/loot lines
   on dark plates with a spray-green edge. */
.raids-view .rv-col-list .event-card p.small {
  background: rgba(4, 7, 5, 0.75);
  border-left: 3px solid var(--grit-spray);
  padding: 5px 8px;
}
/* Incoming-raid warning block (the unclassed div that follows the
   card head when intel exists; the flex action row is excluded). */
.raids-view .event-card > .event-head + div:not([style*="flex"]) {
  background:
    linear-gradient(180deg, rgba(52, 13, 13, 0.88), rgba(36, 8, 8, 0.93)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid rgba(229, 72, 77, 0.35);
  padding: 8px;
}
.raids-view .event-card > .event-head + div:not([style*="flex"]) p:first-child {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
}
/* Crew-picker rows inside attack/plan forms: near-black plates. */
.raids-view .event-card label.small,
.hub-tabpanel:has(.war-frame) .event-card label.small {
  background: rgba(4, 7, 5, 0.8);
  padding: 5px 7px;
}
/* Open Raid (the attack action): gold face. Join / support: olive. */
.raids-view .rv-col-form .m-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.raids-view .rv-col-form .m-btn:hover {
  filter: brightness(1.08);
}
.raids-view .rv-col-list .m-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.raids-view .rv-col-list .m-btn:hover {
  filter: brightness(1.08);
}

/* =====================================================================
   Popup Layer (2026-10-24) — the /account/ fallback page joins the
   Grit theme. The login popup is the primary path now; this page
   remains for reset/verification links and no-JS, so it wears the
   same skin: Skyline master backdrop + snipped gold logo (swapped in
   the page itself) and the crumpled-black card treatment on the
   sign-in panel. Skin only — account.js behavior is untouched.
   ===================================================================== */
.account-page .panel {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.94), rgba(8, 11, 7, 0.97) 60%, rgba(6, 8, 5, 0.98)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 2px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.account-page .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 26px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 26px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 26px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 26px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.account-page .panel .eyebrow {
  font-family: var(--grit-stencil);
  letter-spacing: 2px;
  color: var(--grit-gold);
}
.account-page h1 {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}
.account-page .field input {
  background: #101812;
  border-color: #41503a;
}
.account-page .field input:focus {
  outline: 2px solid rgba(126, 200, 74, 0.55);
  outline-offset: 0;
}
/* Submit: the mockups' gold face (same as the landing START PLAYING). */
.account-page .primary {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
}
.account-page .primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.account-page .actions button {
  font-size: 13.5px;
}
.account-page .actions button:hover {
  color: var(--grit-spray);
}
.account-page header .quiet {
  font-family: var(--grit-stencil);
  font-size: 12px;
  letter-spacing: 1px;
}

/* =====================================================================
   Graphics Pass Batch 3 (2026-10-24) — the remaining screens join the
   board: EMPIRE (businesses & upgrades), VAULT HEIST + WAR KIT (board
   views), STORY (Journal), RAID BOSSES (gang War Room roster), the
   district BUSINESS PANEL, and TRADING (Crossline Exchange). Same
   snipped library as Batches 1–2 — crumpled-black texture, worn corner
   brackets, gold + olive button faces, all already in /grit-art/ —
   no new art. Presentation only: every control, number and flow is
   exactly as the views already render it.
   ===================================================================== */

/* ---------- BOARD VIEWS: VAULT HEIST + WAR KIT ----------------------
   .board-card / .board-view-head are used only by heist-view.js and
   warkit-view.js (board-views.css). Cards take the crumpled field +
   worn mini-corners; section titles become gold stencil plates; the
   raw native buttons the views emit (class "button") get real faces:
   olive for the kit actions, gold for ENTER THE VAULT. */
.board-view-head h3 {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}
.board-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.board-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.board-card h4 {
  font-family: var(--grit-stencil);
  color: var(--grit-gold);
  letter-spacing: 2px;
  border-bottom-color: rgba(216, 184, 74, 0.4);
}
.board-card .button {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  padding: 8px 14px;
  cursor: pointer;
}
.board-card .button:hover:not(:disabled) {
  filter: brightness(1.08);
}
.board-card .button:disabled {
  filter: grayscale(0.4) brightness(0.75);
  cursor: default;
}
/* ENTER THE VAULT: the heist's one CTA takes the gold face. */
.heist-form .button {
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  padding: 10px 18px;
}
.heist-chest {
  font-family: var(--grit-stencil);
  color: var(--grit-gold);
  letter-spacing: 0.5px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}
.heist-live {
  color: var(--grit-spray);
}
.warkit-biz {
  border-top-color: rgba(155, 232, 21, 0.18);
}
.warkit-biz > strong {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}

/* ---------- EMPIRE: businesses & upgrades ---------------------------
   Cards and the summary strip take the crumpled card treatment;
   business names go stencil; Collect rides the olive face, Upgrade
   and Collect All the gold; heat badges become dark plates. */
.empire-total {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.empire-total::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.empire-total-amt {
  font-family: var(--grit-stencil);
  color: var(--grit-spray);
  letter-spacing: 0.5px;
}
.empire-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.empire-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.empire-name {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.empire-uncollected {
  color: var(--grit-spray);
}
.empire-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.empire-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.empire-upgrade,
.empire-collect-all {
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.empire-btn:disabled {
  background: rgba(255, 255, 255, 0.07);
  color: #8a8f9e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  filter: grayscale(0.4) brightness(0.75);
}
.heat-hot,
.heat-watched,
.heat-clean {
  font-family: var(--grit-stencil);
  font-size: 11px;
  letter-spacing: 1px;
  background: rgba(4, 7, 5, 0.85);
  padding: 3px 8px 2px;
}
.empire-crew-toggle {
  background: rgba(4, 7, 5, 0.8);
  border-color: var(--grit-line);
  font-family: var(--grit-stencil);
  font-size: 12px;
  letter-spacing: 1px;
}
.empire-crew-step {
  background: rgba(4, 7, 5, 0.85);
  border-color: var(--grit-line);
  color: var(--grit-spray);
}

/* ---------- STORY: the Journal --------------------------------------
   Mission cards and work rows take the crumpled card treatment; the
   chapter rail goes crumpled with a gold stencil title; the flat lime
   pills become olive faces, with the two board links in gold. */
.journal-view .m-head h1 {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6);
}
.journal-view .m-group {
  font-family: var(--grit-stencil);
  color: var(--grit-gold);
}
.j-rail {
  background:
    linear-gradient(160deg, rgba(12, 15, 9, 0.88), rgba(7, 9, 6, 0.94)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border-right-color: rgba(216, 184, 74, 0.45);
}
.j-rail-title {
  font-family: var(--grit-stencil);
  color: var(--grit-gold);
}
.j-tl-row.current .j-tl-state {
  color: var(--grit-gold);
}
.journal-view .m-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.journal-view .m-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.journal-view .m-title {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.journal-view .m-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.journal-view .m-btn:hover {
  filter: brightness(1.08);
}
.journal-view .j-actions .m-btn {
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.journal-view .m-rush-btn {
  font-family: var(--grit-stencil);
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.journal-view .j-row {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 1px solid var(--grit-line);
  border-radius: 4px;
}
.journal-view .j-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.journal-view .j-row-name {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.journal-view .j-done-item {
  background: rgba(4, 7, 5, 0.75);
  border: 1px solid var(--grit-line);
  border-radius: 3px;
}
.journal-view .j-done-tag {
  font-family: var(--grit-stencil);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--grit-gold);
}
.journal-view .m-rep {
  font-family: var(--grit-stencil);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--grit-dim);
  background: rgba(4, 7, 5, 0.85);
  border-color: var(--grit-line);
  border-radius: 3px;
}
.journal-view .m-streak {
  color: var(--grit-spray);
}

/* ---------- RAID BOSSES: the War Room roster cards -------------------
   Boss cards already carry the frame-kit's corner art (sf-cc) — they
   take the crumpled field, stencil names, gold title plates and the
   crew cards' portrait ring instead. (The section's .hub-coming rows
   already wear the Batch 2 war-panel treatment.) */
.boss-card {
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border-color: var(--grit-line);
  border-radius: 4px;
}
.boss-card-art {
  border-color: rgba(216, 184, 74, 0.55);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.5),
    3px 3px 0 rgba(0, 0, 0, 0.45);
}
.boss-card-name {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.boss-card-title {
  font-family: var(--grit-stencil);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--grit-gold);
  background: rgba(4, 7, 5, 0.85);
  padding: 2px 8px 1px;
}
.boss-card-pick {
  font-family: var(--grit-stencil);
  font-size: 11px;
  letter-spacing: 1px;
}
.boss-card-live {
  font-family: var(--grit-stencil);
  letter-spacing: 1px;
}
.boss-card-odds {
  font-family: var(--grit-stencil);
  color: var(--grit-spray);
  letter-spacing: 0.5px;
}

/* ---------- BUSINESS PANEL: district business management -------------
   The slide-in panel itself goes crumpled black under a hard grit
   edge; its tabs take the stencil with the spray active underline
   (same voice as the bottom nav); shop item rows become crumpled
   mini-cards; panel primary actions take the gold face and the
   quick-buy chips the olive. */
#drop-banner.business-panel {
  background:
    linear-gradient(155deg, rgba(14, 18, 12, 0.94), rgba(8, 11, 7, 0.97) 60%, rgba(6, 8, 5, 0.98)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 2px solid var(--grit-line);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
}
.business-panel .bp-close {
  font-family: var(--grit-stencil);
  border: 1px solid var(--grit-line);
  background: rgba(4, 7, 5, 0.85);
}
.business-panel .bp-close:hover {
  color: var(--grit-spray);
  border-color: var(--grit-spray);
}
.business-panel .bh-tab,
.business-panel .biz-tab {
  font-family: var(--grit-stencil);
  letter-spacing: 1px;
}
.business-panel .bh-tab.active,
.business-panel .biz-tab.active {
  color: var(--grit-spray);
}
.business-panel .business-header.compact-pill .bh-tab.active::after {
  background: var(--grit-spray);
  box-shadow: 0 0 8px 2px rgba(155, 232, 21, 0.55);
}
.bp-body .item-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.88), rgba(8, 11, 7, 0.94) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border-color: var(--grit-line);
  border-radius: 4px;
}
.bp-body .item-card.selected {
  border-color: var(--grit-spray);
}
.bp-body .item-card-name {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.bp-body .item-quickbuy {
  font-family: var(--grit-stencil);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #101408;
  background: url("/grit-art/tex-green-button.webp") center / cover no-repeat, #77813c;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  padding: 4px 10px 3px;
  cursor: pointer;
}
.bp-body .item-quickbuy:hover {
  filter: brightness(1.08);
}
.bp-body .primary {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.bp-body .primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.bp-body .primary:disabled {
  filter: grayscale(0.4) brightness(0.75);
}

/* ---------- TRADING: the Crossline Exchange page ---------------------
   The Exchange is a standalone page (growing.js) whose panel is the
   shared .crew-panel — scoped by the page's .exchange-page body class
   so the Growhouse and every other crew-panel page stay untouched.
   Panel + market cards go crumpled; the desk eyebrow becomes a gold
   stencil plate; actions take the gold face. */
.exchange-page .crew-panel {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.94), rgba(8, 11, 7, 0.97) 60%, rgba(6, 8, 5, 0.98)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border: 2px solid var(--grit-line);
  border-radius: 4px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}
.exchange-page .crew-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 26px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 26px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 26px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 26px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.exchange-page .eyebrow {
  font-family: var(--grit-stencil);
  letter-spacing: 2px;
  color: var(--grit-gold);
}
.exchange-page h2 {
  font-family: var(--grit-stencil);
  letter-spacing: 0.4px;
}
.exchange-page .crew-offer {
  color: var(--grit-spray);
  font-weight: 700;
}
.exchange-page .market-card {
  position: relative;
  background:
    linear-gradient(155deg, rgba(16, 20, 13, 0.9), rgba(8, 11, 7, 0.95) 60%, rgba(6, 8, 5, 0.96)),
    url("/grit-art/tex-crumple.webp") center / cover no-repeat;
  border-color: var(--grit-line);
  border-radius: 4px;
}
.exchange-page .market-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("/grit-art/corner-worn-tl.png") left top / 19px no-repeat,
    url("/grit-art/corner-worn-tr.png") right top / 19px no-repeat,
    url("/grit-art/corner-worn-bl.png") left bottom / 19px no-repeat,
    url("/grit-art/corner-worn-br.png") right bottom / 19px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.exchange-page .primary {
  font-family: var(--grit-stencil);
  letter-spacing: 0.6px;
  color: #101408;
  background: url("/grit-art/tex-gold-button.webp") center / cover no-repeat, #a8892f;
  border: 2px solid #0a0d08;
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.exchange-page .primary:hover:not(:disabled) {
  filter: brightness(1.08);
}
.exchange-page .primary:disabled {
  filter: grayscale(0.4) brightness(0.75);
}
.exchange-page .field input,
.exchange-page .field select {
  background: #101812;
  border-color: #41503a;
}
.exchange-page .field input:focus,
.exchange-page .field select:focus {
  outline: 2px solid rgba(126, 200, 74, 0.55);
  outline-offset: 0;
}