/* ==========================================================
   LIQUELSEN CIVIC UI V1 / W1
   Scope: Politics only.
   Additive, reversible visual layer. No gameplay ownership.
   ========================================================== */

#politica.civic-v1 {
  --civic-bg: #071019;
  --civic-nav: #0a141e;
  --civic-surface-1: #0e1a25;
  --civic-surface-2: #122332;
  --civic-surface-3: #172b3b;
  --civic-line: #263947;
  --civic-line-soft: rgba(151, 180, 198, .13);
  --civic-text: #eef4f7;
  --civic-muted: #91a5b2;
  --civic-faint: #657a88;
  --civic-accent: #5fa8d3;
  --civic-accent-strong: #388ac0;
  --civic-success: #4fa77a;
  --civic-warning: #d2a348;
  --civic-danger: #d35c63;

  margin: -12px -14px -26px;
  padding: 22px 24px 64px;
  min-height: calc(100vh - 76px);
  color: var(--civic-text);
  background:
    radial-gradient(circle at 79% -10%, rgba(47, 107, 144, .24), transparent 31rem),
    linear-gradient(180deg, #08131e 0%, var(--civic-bg) 38%, #050c13 100%);
}

/* The global shell follows the civic view only while Politics is active. */
body:has(#politica.civic-v1.on) .topbar {
  background: rgba(5, 13, 21, .97);
  border-bottom-color: #1c3342;
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
body:has(#politica.civic-v1.on) .brand-lockup strong { color: #eef4f7; }
body:has(#politica.civic-v1.on) .brand-lockup span { color: #8096a4; }
body:has(#politica.civic-v1.on) .topnav button { color: #9eb0bb; }
body:has(#politica.civic-v1.on) .topnav button:hover,
body:has(#politica.civic-v1.on) .topnav button.on {
  color: #fff;
  background: #12283a;
  border-color: #284c63;
}
body:has(#politica.civic-v1.on) .datebox,
body:has(#politica.civic-v1.on) .userbox,
body:has(#politica.civic-v1.on) .account-switch {
  background: #0c1924;
  border-color: #263c4b;
  color: #eef4f7;
}
body:has(#politica.civic-v1.on) .datebox small,
body:has(#politica.civic-v1.on) .userbox small,
body:has(#politica.civic-v1.on) .account-switch small { color: #8196a3; }

#politica.civic-v1 .politics-hero {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: end;
  gap: 26px;
  margin: 0 0 14px;
  padding: 30px 32px;
  border: 1px solid #294356;
  border-radius: 12px;
  color: var(--civic-text);
  background-image:
    linear-gradient(90deg, rgba(5,14,22,.94) 0%, rgba(7,18,28,.83) 48%, rgba(9,24,36,.57) 100%),
    var(--civic-hero-image, linear-gradient(125deg, #132f42, #0b1b27 62%, #102938));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.18);
}
#politica.civic-v1 .politics-hero::after {
  content: "";
  position: absolute;
  inset: auto -7% -54% 42%;
  height: 180px;
  background: radial-gradient(ellipse at center, rgba(95,168,211,.15), transparent 67%);
  pointer-events: none;
}
#politica.civic-v1 .politics-hero > div:first-child { position: relative; z-index: 1; }
#politica.civic-v1 .politics-hero div > b {
  color: #9fc0d2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
#politica.civic-v1 .politics-hero h2 {
  margin: 8px 0 8px;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -.035em;
}
#politica.civic-v1 .politics-hero p {
  max-width: 790px;
  margin: 0;
  color: #b5c5cf;
  font-size: 13px;
  line-height: 1.55;
}
#politica.civic-v1 .politics-rule {
  position: relative;
  z-index: 1;
  min-width: 174px;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid rgba(126,177,207,.28);
  border-radius: 10px;
  background: rgba(7,18,28,.78);
  backdrop-filter: blur(8px);
}
#politica.civic-v1 .politics-rule strong {
  display: block;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
}
#politica.civic-v1 .politics-rule span {
  display: block;
  margin-top: 7px;
  color: #94aeba;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}

#politica.civic-v1 .politics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin: 0 0 14px;
}
#politica.civic-v1 .politics-metrics article {
  position: relative;
  min-height: 104px;
  padding: 16px 17px;
  border: 1px solid var(--civic-line);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--civic-surface-2), var(--civic-surface-1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#politica.civic-v1 .politics-metrics article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--civic-accent);
  opacity: .72;
}
#politica.civic-v1 .politics-metrics span {
  display: block;
  color: #8298a6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}
#politica.civic-v1 .politics-metrics b {
  display: block;
  margin-top: 9px;
  color: #f7fbfd;
  font-size: clamp(20px, 1.6vw, 27px);
  line-height: 1.05;
  letter-spacing: -.025em;
}
#politica.civic-v1 .politics-metrics small {
  display: block;
  margin-top: 7px;
  color: var(--civic-muted);
  font-size: 11px;
  line-height: 1.3;
}

#politica.civic-v1 .card {
  border: 1px solid var(--civic-line);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--civic-surface-1), #0b1721);
  color: var(--civic-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 8px 22px rgba(0,0,0,.08);
}
#politica.civic-v1 .card-head { gap: 14px; }
#politica.civic-v1 .card-head h3,
#politica.civic-v1 .chamber-head h3,
#politica.civic-v1 .agenda-card h3,
#politica.civic-v1 .politics-secondary h3,
#politica.civic-v1 .municipal-card h3 {
  margin: 4px 0 0;
  color: #f3f7f9;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.015em;
}
#politica.civic-v1 .chamber-head small,
#politica.civic-v1 .agenda-card small,
#politica.civic-v1 .politics-secondary small,
#politica.civic-v1 .municipal-card small {
  color: #7f97a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

#politica.civic-v1 .politics-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(330px, .72fr);
  gap: 12px;
}
#politica.civic-v1 .chamber-card { padding: 18px; }
#politica.civic-v1 .chamber-legend { gap: 6px 10px; }
#politica.civic-v1 .chamber-legend span {
  color: #a9bac4;
  font-size: 10px;
}
#politica.civic-v1 .chamber-legend span b { color: #f3f7f9; }
#politica.civic-v1 .chamber-legend i {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
#politica.civic-v1 .chamber-map {
  min-height: 350px;
  margin-top: 14px;
  border: 1px solid #223847;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 112%, rgba(95,168,211,.10), transparent 48%),
    linear-gradient(180deg, #0b1721, #09131c);
  overflow: hidden;
}
#politica.civic-v1 .chamber-map svg { width: 100%; }
#politica.civic-v1 .chamber-map svg > path { stroke: #294354; }
#politica.civic-v1 .chamber-label {
  fill: #dfeaf0;
  font: 750 14px Helvetica, Arial, sans-serif;
  letter-spacing: .02em;
}
#politica.civic-v1 .chamber-sub {
  fill: #7f96a4;
  font: 750 9px Helvetica, Arial, sans-serif;
  letter-spacing: .08em;
}
#politica.civic-v1 .chamber-seat circle {
  filter: saturate(.9) brightness(.95);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
#politica.civic-v1 .chamber-seat:hover circle,
#politica.civic-v1 .chamber-seat:focus circle {
  filter: saturate(1.08) brightness(1.18) drop-shadow(0 0 4px rgba(255,255,255,.18));
}

#politica.civic-v1 .chamber-bottom {
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: 10px;
}
#politica.civic-v1 .chamber-summary,
#politica.civic-v1 .politician-detail {
  min-height: 126px;
  padding: 13px 14px;
  border: 1px solid #223847;
  border-radius: 9px;
  background: #0b1721;
  color: var(--civic-text);
}
#politica.civic-v1 .chamber-summary > div > span,
#politica.civic-v1 .politician-detail > span,
#politica.civic-v1 .politician-title span,
#politica.civic-v1 .politician-title small,
#politica.civic-v1 .politician-stats span {
  color: #8196a3;
  font-size: 10px;
}
#politica.civic-v1 .chamber-summary > div > b,
#politica.civic-v1 .politician-title b { color: #eef4f7; }
#politica.civic-v1 .politician-stats b { color: #d9e5eb; }
#politica.civic-v1 .stance { border-top-color: #233847; }
#politica.civic-v1 .vote-numbers { gap: 7px; }
#politica.civic-v1 .vote-numbers span {
  padding: 5px 8px;
  border: 1px solid transparent;
  font-size: 10px;
}
#politica.civic-v1 .vote-numbers .yes {
  background: rgba(79,167,122,.14);
  border-color: rgba(79,167,122,.28);
  color: #78c89a;
}
#politica.civic-v1 .vote-numbers .no {
  background: rgba(211,92,99,.14);
  border-color: rgba(211,92,99,.28);
  color: #ea858b;
}
#politica.civic-v1 .vote-numbers .und {
  background: rgba(210,163,72,.14);
  border-color: rgba(210,163,72,.28);
  color: #dfbd74;
}
#politica.civic-v1 .vote-numbers strong {
  color: #a9bbc5;
  font-size: 11px;
}

#politica.civic-v1 .agenda-card { padding: 18px; }
#politica.civic-v1 .bill-list { gap: 8px; margin-top: 13px; }
#politica.civic-v1 .bill-card {
  position: relative;
  padding: 12px 13px 13px;
  color: #dce6eb;
  border: 1px solid #223846;
  border-radius: 9px;
  background: #0a1620;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
#politica.civic-v1 .bill-card:hover {
  transform: translateY(-1px);
  border-color: #36566b;
  background: #0e1d29;
}
#politica.civic-v1 .bill-card.on {
  border-color: #427da2;
  background: linear-gradient(180deg, #102536, #0c1b27);
  box-shadow: inset 3px 0 0 var(--civic-accent), 0 0 0 1px rgba(95,168,211,.08);
}
#politica.civic-v1 .bill-card span,
#politica.civic-v1 .bill-card small { color: #78909e; font-size: 10px; }
#politica.civic-v1 .bill-card b {
  margin-top: 4px;
  color: #edf4f7;
  font-size: 13px;
  line-height: 1.3;
}
#politica.civic-v1 .bill-card p {
  margin: 7px 0 9px;
  color: #98abb6;
  font-size: 11px;
  line-height: 1.45;
}
#politica.civic-v1 .bill-votes { align-items: baseline; }
#politica.civic-v1 .bill-votes strong { color: #fff; font-size: 20px; }
#politica.civic-v1 .bill-progress {
  height: 5px;
  margin: 8px 0;
  background: #172b38;
}
#politica.civic-v1 .bill-progress i { background: var(--civic-success); }

#politica.civic-v1 .politics-secondary { margin-top: 12px; }
#politica.civic-v1 .party-list { gap: 7px; }
#politica.civic-v1 .party-row {
  grid-template-columns: 4px minmax(0,1fr) auto;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #223846;
  border-radius: 9px;
  background: #0b1721;
}
#politica.civic-v1 .party-row.member {
  border-color: #3a6d8b;
  box-shadow: inset 0 0 0 1px rgba(95,168,211,.10);
}
#politica.civic-v1 .party-main > div > b { color: #fff; font-size: 14px; }
#politica.civic-v1 .party-main > div > strong { color: #b8c8d1; font-size: 11px; }
#politica.civic-v1 .party-main > span,
#politica.civic-v1 .party-main > small { color: #7f94a1; font-size: 10px; }
#politica.civic-v1 .party-main p {
  margin: 6px 0;
  color: #9aadb7;
  font-size: 11px;
  line-height: 1.4;
}
#politica.civic-v1 .party-join,
#politica.civic-v1 .career-spend button {
  border: 1px solid #31536a;
  border-radius: 7px;
  background: #102433;
  color: #dbeaf1;
}
#politica.civic-v1 .party-join:hover,
#politica.civic-v1 .career-spend button:hover { background: #153044; }
#politica.civic-v1 .party-join small,
#politica.civic-v1 .career-spend span { color: #7f96a3; }
#politica.civic-v1 .party-action { color: #7c909d; }
#politica.civic-v1 .party-action.active { color: #75c496; }

#politica.civic-v1 .career-empty p { color: #98aab5; font-size: 11px; }
#politica.civic-v1 .career-path {
  padding: 11px;
  border: 1px dashed #30495a;
  color: #8fa2ad;
  background: #09151e;
  font-size: 10px;
}
#politica.civic-v1 .career-member { gap: 7px; }
#politica.civic-v1 .career-member > div {
  border: 1px solid #223846;
  border-radius: 8px;
  background: #0b1721;
}
#politica.civic-v1 .career-member span,
#politica.civic-v1 .career-member small { color: #7f95a2; font-size: 10px; }
#politica.civic-v1 .career-member b { color: #eef4f7; }
#politica.civic-v1 .career-spend button { padding: 10px; }
#politica.civic-v1 .career-spend b { color: #eaf2f6; font-size: 10px; }
#politica.civic-v1 .illegal-panel {
  border-color: rgba(211,92,99,.25);
  background: rgba(105,26,31,.12);
}
#politica.civic-v1 .illegal-panel > div span { color: #d78085; }
#politica.civic-v1 .illegal-panel > div b { color: #f0dfe0; }
#politica.civic-v1 .illegal-panel > div small,
#politica.civic-v1 .illegal-panel label { color: #ae8e91; }

#politica.civic-v1 .status-tag {
  border: 1px solid #2b4b5f;
  background: #102434;
  color: #bcd0dc;
}
#politica.civic-v1 .status-tag.blue {
  border-color: rgba(95,168,211,.34);
  background: rgba(95,168,211,.13);
  color: #82bedf;
}
#politica.civic-v1 .status-tag.green {
  border-color: rgba(79,167,122,.34);
  background: rgba(79,167,122,.13);
  color: #78c89a;
}
#politica.civic-v1 .status-tag.yellow {
  border-color: rgba(210,163,72,.34);
  background: rgba(210,163,72,.13);
  color: #dfbd74;
}

#politica.civic-v1 .municipal-card { margin-top: 12px; padding: 18px; }
#politica.civic-v1 .municipal-head label { color: #8da1ad; font-size: 10px; }
#politica.civic-v1 select,
#politica.civic-v1 input {
  color: #dce7ed;
  border: 1px solid #2a4557;
  border-radius: 7px;
  background: #0b1822;
}
#politica.civic-v1 .municipal-head select { min-width: 190px; padding: 8px 10px; }
#politica.civic-v1 .municipal-roster {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
#politica.civic-v1 .municipality {
  border: 1px solid #223846;
  border-radius: 9px;
  background: #0a1620;
}
#politica.civic-v1 .municipality header { border-bottom-color: #203442; }
#politica.civic-v1 .municipality header > span,
#politica.civic-v1 .municipality header > small { color: #7d929f; font-size: 9px; }
#politica.civic-v1 .municipality header > b { color: #eaf2f6; font-size: 12px; }
#politica.civic-v1 .municipality p b { color: #dce7ec; font-size: 10px; }
#politica.civic-v1 .municipality p span { color: #788e9b; font-size: 9px; }
#politica.civic-v1 .municipality footer {
  border-top-color: #203442;
  background: #0d1b26;
  color: #7f94a1;
  font-size: 9px;
}
#politica.civic-v1 .political-result { color: #9eb0ba; }

@media (max-width: 1250px) {
  #politica.civic-v1 .politics-layout { grid-template-columns: 1fr; }
  #politica.civic-v1 .municipal-roster { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  #politica.civic-v1 {
    margin: -12px -14px -26px;
    padding: 16px 16px 48px;
  }
  #politica.civic-v1 .politics-hero { grid-template-columns: 1fr; min-height: 0; }
  #politica.civic-v1 .politics-rule { width: min(100%, 260px); }
  #politica.civic-v1 .politics-metrics { grid-template-columns: 1fr 1fr; }
  #politica.civic-v1 .chamber-bottom { grid-template-columns: 1fr; }
  #politica.civic-v1 .municipal-roster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  #politica.civic-v1 { padding: 12px 12px 42px; }
  #politica.civic-v1 .politics-hero { padding: 22px 20px; }
  #politica.civic-v1 .politics-hero h2 { font-size: 30px; }
  #politica.civic-v1 .politics-metrics,
  #politica.civic-v1 .municipal-roster { grid-template-columns: 1fr; }
  #politica.civic-v1 .chamber-legend { justify-content: flex-start; }
  #politica.civic-v1 .chamber-map { min-height: 230px; }
}

/* ==========================================================
   LIQUELSEN CIVIC UI V1 / W1.1
   Screenshot-driven polish pass (2026-10-06).
   CSS-only. No gameplay, HTML or JS ownership.
   ========================================================== */

/* 1) Legacy civic gameplay block: absorb light/white surfaces into civic theme. */
#politica.civic-v1 #civicGameplay,
#politica.civic-v1 #civicGameplayResult {
  color: var(--civic-text);
}
#politica.civic-v1 #civicGameplay > *,
#politica.civic-v1 #civicGameplayResult > * {
  border-color: var(--civic-line) !important;
  background: #0b1721 !important;
  color: var(--civic-text) !important;
}
#politica.civic-v1 #civicGameplay :where(article, section, .card, .panel, .note, .result, .item, .row),
#politica.civic-v1 #civicGameplayResult :where(article, section, .card, .panel, .note, .result, .item, .row) {
  border-color: #233a49 !important;
  background: #0d1a24 !important;
  color: var(--civic-text) !important;
  box-shadow: none !important;
}
#politica.civic-v1 #civicGameplay :where(p, small, label),
#politica.civic-v1 #civicGameplayResult :where(p, small, label) {
  color: #91a5b2 !important;
}
#politica.civic-v1 #civicGameplay :where(b, strong, h3, h4),
#politica.civic-v1 #civicGameplayResult :where(b, strong, h3, h4) {
  color: #eef4f7 !important;
}
#politica.civic-v1 #civicGameplay :where(input, select, textarea),
#politica.civic-v1 #civicGameplayResult :where(input, select, textarea) {
  border-color: #2a4557 !important;
  background: #08151f !important;
  color: #dce7ed !important;
}
#politica.civic-v1 #civicGameplay :where(button),
#politica.civic-v1 #civicGameplayResult :where(button) {
  border-color: #31536a;
}

/* 2) Bring the page closer to a game workspace and reduce dead vertical space. */
#politica.civic-v1 .politics-hero {
  min-height: 156px;
  padding: 24px 28px;
}
#politica.civic-v1 .politics-hero h2 {
  font-size: clamp(30px, 2.55vw, 40px);
}
#politica.civic-v1 .politics-metrics article {
  min-height: 88px;
  padding: 13px 15px;
}
#politica.civic-v1 .politics-metrics b {
  margin-top: 7px;
}

/* 3) Chamber: make the political board the focal game object, not a giant empty panel. */
#politica.civic-v1 .chamber-card,
#politica.civic-v1 .agenda-card {
  min-height: 0;
}
#politica.civic-v1 .chamber-map {
  min-height: 0;
}
#politica.civic-v1 .chamber-map svg {
  display: block;
  width: 100%;
  height: 330px;
}
#politica.civic-v1 .chamber-label {
  font-size: 16px;
}
#politica.civic-v1 .chamber-sub {
  font-size: 10px;
}
#politica.civic-v1 .politician-detail,
#politica.civic-v1 .chamber-summary {
  min-height: 78px;
}

/* 4) Party/career blocks need readable game-level information density. */
#politica.civic-v1 .party-main > div > strong {
  font-size: 12px;
}
#politica.civic-v1 .party-main > span,
#politica.civic-v1 .party-main > small,
#politica.civic-v1 .career-member span,
#politica.civic-v1 .career-member small {
  font-size: 11px;
}
#politica.civic-v1 .party-main p,
#politica.civic-v1 .career-empty p {
  font-size: 12px;
  line-height: 1.45;
}
#politica.civic-v1 .career-spend b {
  font-size: 11px;
}
#politica.civic-v1 .career-path {
  font-size: 11px;
}

/* 5) Municipal roster: contain the 43-city wall inside a real game panel. */
#politica.civic-v1 .municipal-card {
  overflow: hidden;
}
#politica.civic-v1 .municipal-roster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 760px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: #36566b #0a1620;
}
#politica.civic-v1 .municipal-roster::-webkit-scrollbar {
  width: 9px;
}
#politica.civic-v1 .municipal-roster::-webkit-scrollbar-track {
  background: #0a1620;
  border-radius: 999px;
}
#politica.civic-v1 .municipal-roster::-webkit-scrollbar-thumb {
  background: #36566b;
  border: 2px solid #0a1620;
  border-radius: 999px;
}
#politica.civic-v1 .municipality {
  min-height: 0;
}
#politica.civic-v1 .municipality header > span,
#politica.civic-v1 .municipality header > small {
  font-size: 10px;
}
#politica.civic-v1 .municipality header > b {
  font-size: 13px;
}
#politica.civic-v1 .municipality p b {
  font-size: 11px;
}
#politica.civic-v1 .municipality p span,
#politica.civic-v1 .municipality footer {
  font-size: 10px;
}

/* 6) Slightly stronger hierarchy for section cards. */
#politica.civic-v1 .politics-secondary > .card,
#politica.civic-v1 .municipal-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 14px 30px rgba(0,0,0,.10);
}
#politica.civic-v1 .card-head {
  padding-bottom: 3px;
}

@media (max-width: 1250px) {
  #politica.civic-v1 .chamber-map svg { height: 300px; }
  #politica.civic-v1 .municipal-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 720px;
  }
}
@media (max-width: 760px) {
  #politica.civic-v1 .municipal-roster {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  #politica.civic-v1 .chamber-map svg { height: 245px; }
}


/* LIQ CIVIC V1 W1.2 - POLITICA HERO IMAGE */
#politica.civic-v1 .politics-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 168px;
  background:
    linear-gradient(90deg,
      rgba(5, 14, 24, .96) 0%,
      rgba(5, 14, 24, .88) 30%,
      rgba(5, 14, 24, .68) 54%,
      rgba(5, 14, 24, .42) 74%,
      rgba(5, 14, 24, .62) 100%),
    url('/ui-media/civic/politica-hero.jpg') center 48% / cover no-repeat;
}

#politica.civic-v1 .politics-hero > div:first-child {
  position: relative;
  z-index: 1;
  max-width: min(760px, 62%);
}

#politica.civic-v1 .politics-hero h2,
#politica.civic-v1 .politics-hero p,
#politica.civic-v1 .politics-hero b {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .48);
}

#politica.civic-v1 .politics-rule {
  position: relative;
  z-index: 1;
  background: rgba(7, 16, 25, .82);
  border-color: rgba(120, 171, 204, .30);
  backdrop-filter: blur(3px);
}

@media (max-width: 980px) {
  #politica.civic-v1 .politics-hero {
    min-height: 154px;
    background-position: 61% 50%;
  }

  #politica.civic-v1 .politics-hero > div:first-child {
    max-width: 72%;
  }
}

@media (max-width: 720px) {
  #politica.civic-v1 .politics-hero {
    min-height: 176px;
    background:
      linear-gradient(90deg,
        rgba(5, 14, 24, .96) 0%,
        rgba(5, 14, 24, .88) 58%,
        rgba(5, 14, 24, .70) 100%),
      url('/ui-media/civic/politica-hero.jpg') 65% 50% / cover no-repeat;
  }

  #politica.civic-v1 .politics-hero > div:first-child {
    max-width: 100%;
  }
}


/* =========================================================
   LIQ CIVIC W2 - BRIGHTER POLITICS PAGE
   ========================================================= */

#politica.civic-v1{
  --civic-bg: #07131f;
  --civic-panel: #0d1d2b;
  --civic-panel-2: #102435;
  --civic-panel-3: #153049;
  --civic-line: rgba(122,183,226,.22);
  --civic-line-strong: rgba(122,183,226,.34);
  --civic-text: #f4f8fb;
  --civic-muted: #a8bfd1;
  --civic-soft: #d7e7f2;
  --civic-accent: #74b6e5;
  --civic-accent-2: #4fa3dc;
  --civic-warm: #e5b773;

  background:
    radial-gradient(circle at 88% 0%,
      rgba(67,127,182,.11),
      transparent 34%
    ),
    radial-gradient(circle at 8% 0%,
      rgba(255,201,122,.055),
      transparent 28%
    );
}


/* HERO */

#politica.civic-v1 .politics-hero{
  position: relative !important;
  overflow: hidden !important;

  min-height: 220px !important;

  padding:
    30px
    30px
    28px !important;

  border-radius: 20px !important;

  border:
    1px solid
    rgba(129,192,235,.25) !important;

  box-shadow:
    0 16px 40px
    rgba(0,8,16,.30) !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(4,10,18,.88) 0%,
      rgba(4,10,18,.80) 23%,
      rgba(5,13,22,.60) 46%,
      rgba(5,15,25,.34) 68%,
      rgba(5,15,25,.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,198,124,.10),
      transparent 46%
    ),
    url("/ui-media/civic/politica-hero.jpg") !important;

  background-size:
    cover,
    cover,
    cover !important;

  background-position:
    center,
    center,
    78% center !important;

  background-repeat:
    no-repeat !important;
}


#politica.civic-v1 .politics-hero::after{
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(150,205,239,.035),
      transparent 45%,
      rgba(0,0,0,.14)
    );
}


#politica.civic-v1 .politics-hero > *{
  position: relative;
  z-index: 2;
}


#politica.civic-v1 .politics-hero b{
  display: inline-block;

  margin-bottom: 10px;

  color: #b9dcef !important;

  font-size: 12px !important;
  font-weight: 700;

  letter-spacing: .18em;

  text-transform: uppercase;
}


#politica.civic-v1 .politics-hero h2{
  margin:
    0
    0
    10px !important;

  max-width: 900px;

  color: #fff !important;

  font-size: clamp(38px,3.2vw,56px) !important;

  line-height: 1.02 !important;

  font-weight: 800 !important;

  letter-spacing: -.035em !important;

  text-shadow:
    0 2px 18px
    rgba(0,0,0,.28);
}


#politica.civic-v1 .politics-hero p{
  max-width: 820px !important;

  margin: 0 !important;

  color: #edf5fa !important;

  font-size: 17px !important;

  line-height: 1.52 !important;

  text-shadow:
    0 1px 10px
    rgba(0,0,0,.36);
}


/* 2/3 */

#politica.civic-v1 .politics-rule{
  padding:
    19px
    22px !important;

  border-radius: 18px !important;

  border:
    1px solid
    rgba(160,210,243,.30) !important;

  background:
    linear-gradient(
      180deg,
      rgba(18,38,55,.80),
      rgba(7,17,27,.88)
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.20) !important;

  backdrop-filter:
    blur(6px);
}


#politica.civic-v1 .politics-rule strong{
  color: #fff !important;

  font-size: 48px !important;

  line-height: 1 !important;

  font-weight: 800 !important;
}


#politica.civic-v1 .politics-rule span{
  margin-top: 8px;

  color: #bad3e3 !important;

  font-size: 11px !important;

  letter-spacing: .13em;
}


/* MÉTRICAS SUPERIORES */

#politica.civic-v1 .politics-summary{
  gap: 14px !important;
}


#politica.civic-v1 .politics-summary > *{
  position: relative;

  overflow: hidden;

  border-radius: 16px !important;

  border:
    1px solid
    rgba(120,183,226,.22) !important;

  background:
    linear-gradient(
      180deg,
      rgba(20,45,66,.97),
      rgba(11,26,39,.98)
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(0,8,16,.17) !important;
}


#politica.civic-v1 .politics-summary > *::before{
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #6fb4e2,
      rgba(229,183,115,.92)
    );

  opacity: .88;
}


#politica.civic-v1 .politics-summary strong,
#politica.civic-v1 .politics-summary h3{
  color: #fff !important;

  font-size: 28px !important;

  font-weight: 800 !important;
}


#politica.civic-v1 .politics-summary small,
#politica.civic-v1 .politics-summary p{
  color: #b6ccdc !important;
}


/* CARDS / SEÇÕES */

#politica.civic-v1 .card,
#politica.civic-v1 .panel,
#politica.civic-v1 .politics-block,
#politica.civic-v1 .politics-section{
  border:
    1px solid
    rgba(122,185,228,.20) !important;

  border-radius:
    17px !important;

  background:
    linear-gradient(
      180deg,
      rgba(16,34,50,.98),
      rgba(9,22,33,.98)
    ) !important;

  box-shadow:
    0 10px 26px
    rgba(0,8,16,.14) !important;
}


/* GABINETE */

#politica.civic-v1 #civicGameplay,
#politica.civic-v1 #civicGameplayResult,
#politica.civic-v1 #politicalCareer,
#politica.civic-v1 #politicalActionResult{
  border:
    1px solid
    rgba(125,187,229,.23) !important;

  border-radius:
    17px !important;

  background:
    linear-gradient(
      180deg,
      rgba(18,39,57,.98),
      rgba(10,25,38,.98)
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(0,8,16,.14) !important;
}


/* CÂMARA */

#politica.civic-v1 #chamberMap{
  min-height: 310px !important;

  border:
    1px solid
    rgba(125,187,229,.22) !important;

  border-radius:
    16px !important;

  background:
    radial-gradient(
      circle at 50% 78%,
      rgba(87,164,216,.15),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(15,34,51,.98),
      rgba(8,21,32,.98)
    ) !important;
}


#politica.civic-v1 #chamberSummary,
#politica.civic-v1 #politicianDetail,
#politica.civic-v1 #politicalBills{
  border:
    1px solid
    rgba(122,185,228,.20) !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      180deg,
      rgba(18,39,57,.98),
      rgba(10,24,36,.98)
    ) !important;
}


/* PARTIDOS */

#politica.civic-v1 #partyList > *{
  border:
    1px solid
    rgba(122,185,228,.18) !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      180deg,
      rgba(21,44,64,.98),
      rgba(12,28,41,.98)
    ) !important;

  box-shadow:
    0 7px 18px
    rgba(0,8,16,.12) !important;
}


#politica.civic-v1 #partyList strong,
#politica.civic-v1 #partyList h3,
#politica.civic-v1 #partyList h4{
  color:
    #fff !important;
}


#politica.civic-v1 #partyList p,
#politica.civic-v1 #partyList small{
  color:
    #b4cad9 !important;
}


/* MUNICÍPIOS */

#politica.civic-v1 #municipalRoster > *,
#politica.civic-v1 .municipality,
#politica.civic-v1 .municipality-card{
  border:
    1px solid
    rgba(122,185,228,.17) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(19,41,59,.98),
      rgba(11,26,38,.98)
    ) !important;

  box-shadow:
    0 6px 16px
    rgba(0,8,16,.11) !important;
}


#politica.civic-v1 .municipality strong,
#politica.civic-v1 .municipality h3,
#politica.civic-v1 .municipality h4{
  color:
    #fff !important;
}


#politica.civic-v1 .municipality p,
#politica.civic-v1 .municipality li,
#politica.civic-v1 .municipality small{
  color:
    #b4cad9 !important;
}


/* BOTÕES */

#politica.civic-v1 button,
#politica.civic-v1 .btn{
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background-color .14s ease;
}


#politica.civic-v1 button:hover,
#politica.civic-v1 .btn:hover{
  transform:
    translateY(-1px);
}


#politica.civic-v1 button.primary,
#politica.civic-v1 .btn.primary,
#politica.civic-v1 .btn-primary{
  border: 0 !important;

  color: #072033 !important;

  background:
    linear-gradient(
      180deg,
      #91cef2,
      #5aa4d8
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(80,157,213,.26) !important;
}


/* TIPOGRAFIA */

#politica.civic-v1 h2,
#politica.civic-v1 h3,
#politica.civic-v1 h4{
  letter-spacing:
    -.02em;
}


#politica.civic-v1 p,
#politica.civic-v1 li,
#politica.civic-v1 small{
  line-height:
    1.48;
}


/* RESPONSIVO */

@media (max-width: 1100px){

  #politica.civic-v1 .politics-hero{
    background-position:
      center,
      center,
      68% center !important;
  }

}


@media (max-width: 720px){

  #politica.civic-v1 .politics-hero{
    min-height:
      250px !important;

    padding:
      22px !important;

    background-position:
      center !important;
  }

  #politica.civic-v1 .politics-hero h2{
    font-size:
      36px !important;
  }

  #politica.civic-v1 .politics-hero p{
    font-size:
      15px !important;
  }

  #politica.civic-v1 .politics-rule strong{
    font-size:
      38px !important;
  }

}


/* =========================================================
   LIQ CIVIC W2.1 - VISUAL MEDIA PASS
   ========================================================= */

/* Remove camada antiga que estava lavando a foto do hero */
#politica.civic-v1 .politics-hero::before{
  content: none !important;
  display: none !important;
}


/* HERO - foto mais visivel */
#politica.civic-v1 .politics-hero{
  min-height: 245px !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(5,12,19,.92) 0%,
      rgba(5,12,19,.82) 25%,
      rgba(5,12,19,.55) 48%,
      rgba(5,12,19,.18) 76%,
      rgba(5,12,19,.06) 100%
    ),
    url("/ui-media/civic/politica-hero.jpg") !important;

  background-size: cover !important;
  background-position: 72% center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;

  filter: none !important;
  opacity: 1 !important;
}

#politica.civic-v1 .politics-hero::after{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      transparent 50%,
      rgba(0,0,0,.13)
    ) !important;
}

#politica.civic-v1 .politics-hero h2{
  max-width: 760px;
  font-size: clamp(42px,3.4vw,60px) !important;
}

#politica.civic-v1 .politics-hero p{
  max-width: 700px !important;
}


/* =========================================================
   METRIC CARDS - seletor real do HTML
   ========================================================= */

#politica.civic-v1 .politics-metrics{
  gap: 14px !important;
}

#politica.civic-v1 .politics-metrics > article{
  position: relative;
  min-height: 116px;

  padding: 19px 20px !important;

  overflow: hidden;

  border:
    1px solid
    rgba(103,174,222,.26) !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      145deg,
      rgba(23,49,70,.98),
      rgba(10,28,42,.98)
    ) !important;

  box-shadow:
    0 9px 24px
    rgba(1,12,21,.16) !important;
}

#politica.civic-v1 .politics-metrics > article::before{
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 3px;
  height: 100%;

  background:
    linear-gradient(
      180deg,
      #87c8ed,
      #3c91c9
    );

  opacity: .95;
}

#politica.civic-v1 .politics-metrics > article > span{
  color: #9dc7df !important;

  font-size: 11px !important;
  font-weight: 700;

  letter-spacing: .13em;

  text-transform: uppercase;
}

#politica.civic-v1 .politics-metrics > article > b{
  display: block;

  margin-top: 6px;

  color: #fff !important;

  font-size: 30px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;

  position: relative;
  z-index: 2;
}

#politica.civic-v1 .politics-metrics > article > small{
  display: block;

  margin-top: 7px;

  color: #aac3d3 !important;

  font-size: 12px !important;

  position: relative;
  z-index: 2;
}


/* =========================================================
   PRESIDENTE - retrato
   ========================================================= */

#politica.civic-v1 .politics-metrics > article:first-child{
  padding-right: 150px !important;
}

#politica.civic-v1 .politics-metrics > article:first-child::after{
  content: "";

  position: absolute;

  right: 0;
  top: 0;

  width: 145px;
  height: 100%;

  background-image:
    linear-gradient(
      90deg,
      rgba(14,34,49,1) 0%,
      rgba(14,34,49,.34) 40%,
      rgba(14,34,49,0) 100%
    ),
    url("/ui-media/civic/setno-karam.jpg");

  background-size:
    100% 100%,
    cover;

  background-position:
    center,
    center 24%;

  background-repeat:
    no-repeat;

  opacity: .96;

  pointer-events: none;
}


/* =========================================================
   CAMARA - faixa institucional com foto
   ========================================================= */

#politica.civic-v1 .chamber-head{
  position: relative;

  min-height: 102px;

  padding: 16px 18px !important;

  overflow: hidden;

  align-items: flex-end !important;

  border-radius:
    15px 15px 0 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(7,20,31,.95) 0%,
      rgba(7,20,31,.80) 42%,
      rgba(7,20,31,.30) 72%,
      rgba(7,20,31,.10) 100%
    ),
    url("/ui-media/civic/camara-nacional.jpg");

  background-size:
    cover;

  background-position:
    center 48%;

  background-repeat:
    no-repeat;
}

#politica.civic-v1 .chamber-head::after{
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(3,12,20,.25)
    );

  pointer-events: none;
}

#politica.civic-v1 .chamber-head > *{
  position: relative;
  z-index: 2;
}

#politica.civic-v1 .chamber-head small{
  color: #b3d4e8 !important;
}

#politica.civic-v1 .chamber-head h3{
  margin-top: 4px !important;

  color: #fff !important;

  font-size: 22px !important;
}


/* =========================================================
   HEMICICLO
   ========================================================= */

#politica.civic-v1 .chamber-map{
  min-height: 330px !important;

  background:
    radial-gradient(
      ellipse at 50% 88%,
      rgba(69,151,205,.16),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #102b40,
      #091c2c
    ) !important;
}


/* =========================================================
   MUNICIPIOS - Minea como faixa de ambientacao
   ========================================================= */

#politica.civic-v1 .municipal-head{
  position: relative;

  min-height: 106px;

  padding:
    18px 20px !important;

  overflow: hidden;

  align-items: flex-end !important;

  border-radius:
    16px 16px 0 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(7,20,31,.96) 0%,
      rgba(7,20,31,.78) 42%,
      rgba(7,20,31,.30) 72%,
      rgba(7,20,31,.08) 100%
    ),
    url("/ui-media/civic/minea-civica.jpg");

  background-size:
    cover;

  background-position:
    center 48%;

  background-repeat:
    no-repeat;
}

#politica.civic-v1 .municipal-head::after{
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(4,14,23,.26)
    );

  pointer-events: none;
}

#politica.civic-v1 .municipal-head > *{
  position: relative;
  z-index: 2;
}

#politica.civic-v1 .municipal-head small{
  color: #b8d8e9 !important;
}

#politica.civic-v1 .municipal-head h3{
  color: #fff !important;

  font-size: 23px !important;
}


/* =========================================================
   MAIS LUZ NOS PAINEIS
   ========================================================= */

#politica.civic-v1 .agenda-card,
#politica.civic-v1 .politics-secondary > .card,
#politica.civic-v1 .municipal-card,
#politica.civic-v1 .chamber-card{
  background:
    linear-gradient(
      180deg,
      #132f44,
      #0b2233
    ) !important;

  border:
    1px solid
    rgba(93,163,210,.25) !important;

  box-shadow:
    0 12px 28px
    rgba(4,16,26,.15) !important;
}


/* bloco de pautas um pouco mais claro */

#politica.civic-v1 .agenda-card{
  background:
    linear-gradient(
      180deg,
      #16364e,
      #0d2739
    ) !important;
}


/* cards partidarios */

#politica.civic-v1 .party-list > *{
  background:
    linear-gradient(
      145deg,
      rgba(26,54,76,.98),
      rgba(13,33,48,.98)
    ) !important;
}


/* carreira */

#politica.civic-v1 .political-career{
  background:
    linear-gradient(
      145deg,
      rgba(25,53,74,.98),
      rgba(12,31,46,.98)
    ) !important;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1200px){

  #politica.civic-v1
  .politics-metrics > article:first-child{
    padding-right:
      105px !important;
  }

  #politica.civic-v1
  .politics-metrics > article:first-child::after{
    width:
      105px;
  }

}

@media (max-width: 720px){

  #politica.civic-v1
  .politics-metrics > article:first-child{
    padding-right:
      20px !important;
  }

  #politica.civic-v1
  .politics-metrics > article:first-child::after{
    opacity:
      .20;

    width:
      52%;
  }

  #politica.civic-v1 .chamber-head,
  #politica.civic-v1 .municipal-head{
    min-height:
      88px;
  }

}