/*
 * Deadly Fear v22.3.6 — Universal City Atmosphere Layer
 * Cosmetic only: no page widths, grids, positioning or wrapper rules.
 * The Command Deck sets --df-city-accent and --df-city-accent-2 from the
 * player's current city. Every gameplay page below consumes those tokens.
 */

body.df-command-shell-body {
  --df-page-accent: var(--df-city-accent, #38bdf8);
  --df-page-accent-2: var(--df-city-accent-2, #1d4ed8);
  --df-city-line: color-mix(in srgb, var(--df-page-accent) 28%, #29313d);
  --df-city-line-strong: color-mix(in srgb, var(--df-page-accent) 48%, #33404d);
  --df-city-soft: color-mix(in srgb, var(--df-page-accent) 10%, transparent);
  --df-city-soft-2: color-mix(in srgb, var(--df-page-accent-2) 8%, transparent);
  --df-city-panel-a: color-mix(in srgb, var(--df-page-accent) 5%, #111720);
  --df-city-panel-b: #090d13;
  --df-city-glow: color-mix(in srgb, var(--df-page-accent) 20%, transparent);
}

/* A small city signal on every gameplay stage. This deliberately avoids
   changing dimensions or document flow. */
body.df-command-shell-body .mcc-content-frame,
body.df-command-shell-body main.content,
body.df-command-shell-body .content.mcc-content-frame {
  --accent: var(--df-page-accent);
  --accent2: var(--df-page-accent-2);
  --city-accent: var(--df-page-accent);
  --city-accent-2: var(--df-page-accent-2);
  --page-accent: var(--df-page-accent);
  --page-accent-2: var(--df-page-accent-2);
}

/* -------------------------------------------------------------------------- */
/* HERO / PAGE IDENTITY                                                       */
/* -------------------------------------------------------------------------- */
body.df-command-shell-body :is(
  .df-hero,
  .df-explore-hero,
  .crime-hero,
  .gym-hero,
  .m210-hero,
  .hosp-hero,
  .jail-hero,
  .df-job-hero,
  .edu-hero,
  .gc-hero,
  .uwc-hero,
  .prop-hero,
  .travel-hero,
  .we-hero,
  .ach-hero,
  .mail-hero,
  .profile-hero,
  .temple-hero,
  .donate-hero,
  .pref-hero,
  .help-hero,
  .rules-hero,
  .npc-hero,
  .bh-hero,
  .shop-hero,
  .veh-hero,
  .forum-hero,
  .users-hero,
  .hof-hero,
  .gs-hero,
  .df-events-hero,
  .pa-hero
) {
  border-color: var(--df-city-line-strong) !important;
  background-image:
    radial-gradient(circle at 84% 16%, var(--df-city-soft), transparent 34%),
    radial-gradient(circle at 10% 92%, var(--df-city-soft-2), transparent 28%),
    linear-gradient(145deg, var(--df-city-panel-a), var(--df-city-panel-b) 66%) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    0 0 28px var(--df-city-soft),
    inset 0 1px rgba(255,255,255,.025) !important;
}

/* Pages that use a generic .hero class are scoped by body filename/root. */
body.df-page-workshop .ws > .hero,
body.df-page-black_market .bm > .hero,
body.df-page-attack .df-page-attack .hero,
body.df-page-market .df-market-v12 .m-hero {
  border-color: var(--df-city-line-strong) !important;
  background-image:
    radial-gradient(circle at 84% 16%, var(--df-city-soft), transparent 34%),
    linear-gradient(145deg, var(--df-city-panel-a), var(--df-city-panel-b) 66%) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.28),0 0 28px var(--df-city-soft) !important;
}

/* Kicker / eyebrow text becomes an immediate city cue. */
body.df-command-shell-body :is(
  .df-eyebrow,.df-explore-kicker,.crime-kicker,.gym-kicker,.m210-k,
  .hosp-kicker,.jail-kicker,.df-job-kicker,.edu-kicker,.gc-k,.uwc-kicker,
  .prop-k,.travel-kicker,.we-k,.ach-kicker,.mail-kicker,.profile-kicker,
  .temple-kicker,.donate-kicker,.pref-kicker,.help-kicker,.rules-kicker,
  .npc-kicker,.bh-kicker,.shop-k,.veh-k,.forum-kicker,.users-kicker,
  .hof-kicker,.gs-kicker,.df-events-eyebrow,.pa-kicker
) {
  color: var(--df-page-accent) !important;
  text-shadow:0 0 16px var(--df-city-glow);
}

body.df-page-workshop .ws > .hero .k,
body.df-page-black_market .bm > .hero .k,
body.df-page-attack .df-page-attack .sub {
  color: var(--df-page-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* PANELS / CARDS — city tint without changing their layout                   */
/* -------------------------------------------------------------------------- */
body.df-command-shell-body :is(
  .df-city-stat,.df-sector,.gym-resource,.gym-card,.gym-info-panel,
  .m210-sec,.contract,.mission,.hosp-panel,.jail-panel,
  .df-current-job,.df-job-card,.edu-panel,.edu-course,.gc-panel,.uwc-panel,
  .prop-panel,.travel-panel,.travel-card,.we-panel,.we-card,
  .ach-panel,.ach-card,.mail-panel,.mail-thread,.mail-card,
  .profile-panel,.profile-card,.temple-panel,.temple-card,
  .donate-panel,.donate-pack,.pref-panel,.help-card,.rules-card,
  .npc-panel,.npc-card,.bh-panel,.bh-card,.shop-panel,.shop-card,
  .veh-card,.forum-panel,.forum-card,.users-panel,.users-card,
  .hof-panel,.hof-card,.gs-card,.df-events-panel,.df-events-card,
  .pa-card
) {
  border-color: var(--df-city-line) !important;
}

body.df-command-shell-body :is(
  .df-city-stat,.df-sector,.gym-resource,.gym-card,.gym-info-panel,
  .m210-sec,.contract,.mission,.hosp-panel,.jail-panel,
  .df-current-job,.edu-course,.gc-panel,.uwc-panel,.prop-panel,
  .travel-card,.we-card,.ach-card,.mail-panel,.profile-panel,
  .temple-panel,.donate-pack,.pref-panel,.help-card,.rules-card,
  .npc-card,.bh-panel,.shop-card,.veh-card,.forum-card,.users-card,
  .hof-panel,.gs-card,.df-events-card,.pa-card
) {
  box-shadow: inset 0 1px color-mix(in srgb,var(--df-page-accent) 5%,transparent);
}

body.df-command-shell-body :is(
  .df-sector,.gym-card,.contract,.mission,.edu-course,.travel-card,.we-card,
  .ach-card,.donate-pack,.npc-card,.shop-card,.veh-card,.forum-card,.users-card
):hover {
  border-color: var(--df-city-line-strong) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),0 0 20px var(--df-city-soft) !important;
}

/* Legacy/simple pages still get a city identity through their standard panels. */
body.df-command-shell-body .df-legacy-page :is(.panel,.card),
body.df-page-bank main :is(.panel,.card),
body.df-page-wire main :is(.panel,.card),
body.df-page-rankings main :is(.panel,.card),
body.df-page-online main :is(.panel,.card),
body.df-page-gang_chat main :is(.panel,.card,.content) {
  border-color: var(--df-city-line) !important;
  box-shadow:inset 3px 0 var(--df-city-soft) !important;
}

/* -------------------------------------------------------------------------- */
/* CONTROLS / PROGRESS                                                        */
/* -------------------------------------------------------------------------- */
body.df-command-shell-body :is(
  .df-sector-link,.gym-link,.m210 .btn,.hosp-btn,.jail-btn,.df-job-btn,
  .edu-btn,.gc-btn,.uwc-btn,.prop-btn,.travel-btn,.we-btn,.ach-btn,
  .mail-btn,.profile-btn,.temple-btn,.pref-btn,.help-btn,.rules-btn,
  .npc-btn,.bh-btn,.shop-btn,.veh-btn,.forum-btn,.users-btn,.hof-btn,
  .df-events-btn,.pa-btn
):not(.danger):not(.error) {
  --button-city-accent: var(--df-page-accent);
}

body.df-command-shell-body :is(
  .progbar i,.progress-bar > span,.progress-fill,.meter-fill,.bar-fill,
  .district-progress > span
) {
  box-shadow:0 0 12px var(--df-city-glow);
}

/* City-tinted selected tabs / filters where pages already use active state. */
body.df-command-shell-body :is(
  .mail-tab.active,.hof-tab.active,.ach-nav .active,.forum-tab.active,
  .users-tab.active,.travel-tab.active,.we-tab.active
) {
  border-color: var(--df-city-line-strong) !important;
  color: var(--df-page-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* COMBAT / NPC / BOUNTY                                                      */
/* -------------------------------------------------------------------------- */
body.df-page-attack .df-page-attack :is(.gear > div,.summary .chip,.target,.panel),
body.df-page-combat_npcs .df-npc :is(.npc-summary,.event-strip,.arena-shell,.npc-card),
body.df-page-bounty .bh :is(.bh-stat,.bh-panel,.bh-card) {
  border-color:var(--df-city-line) !important;
}

body.df-page-combat_npcs .arena-shell {
  box-shadow:0 0 34px var(--df-city-soft),0 18px 46px rgba(0,0,0,.30) !important;
}

/* -------------------------------------------------------------------------- */
/* MARKET / WORKSHOP / INVENTORY                                              */
/* -------------------------------------------------------------------------- */
body.df-page-market .df-market-v12 :is(.m-card,.m-panel,.m-stat),
body.df-page-workshop .ws :is(.mat,.material-guide,.panel,.card),
body.df-page-black_market .bm :is(.stat,.panel,.card),
body.df-page-inventory .inventory-page :is(.inv-summary-card,.inv-card,.inv-item,.panel) {
  border-color:var(--df-city-line) !important;
}

body.df-page-inventory .inventory-page :is(.inv-eyebrow,.inv-section-title),
body.df-page-market .df-market-v12 :is(.m-k,.m-eyebrow),
body.df-page-workshop .ws .k,
body.df-page-black_market .bm .k {
  color:var(--df-page-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* GANGS / TERRITORY                                                          */
/* -------------------------------------------------------------------------- */
body.df-page-gangs .gang-page :is(.gang-hero,.gang-panel,.gang-card,.gang-summary),
body.df-page-gang_crimes .gc :is(.gc-hero,.gc-panel),
body.df-page-gang_wars main :is(.panel,.card),
body.df-page-territories main :is(.panel,.card) {
  border-color:var(--df-city-line) !important;
}
body.df-page-gangs .gang-page :is(.gang-kicker,.gang-card-kicker),
body.df-page-gang_crimes .gc .gc-k {
  color:var(--df-page-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* CITY-SPECIFIC SEMANTIC ATMOSPHERE                                          */
/* The exact palette comes from the Command Deck, so traveling updates every  */
/* page immediately on the next request.                                      */
/* -------------------------------------------------------------------------- */
body.df-command-shell-body :is(
  .df-explore-hero,.crime-hero,.gym-hero,.m210-hero,.hosp-hero,.jail-hero,
  .df-job-hero,.edu-hero,.gc-hero,.uwc-hero,.prop-hero,.travel-hero,
  .we-hero,.ach-hero,.mail-hero,.profile-hero,.npc-hero,.shop-hero,
  .veh-hero,.forum-hero,.users-hero,.hof-hero,.gs-hero,.df-events-hero
)::after {
  border-color:var(--df-city-line);
}

/* Keep semantic colors semantic: health red, success green, warnings amber,
   DONATE gold and staff/admin styling are intentionally not recolored. */