.city-stats-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  background: radial-gradient(ellipse at 100% 100%, rgb(7 15 24 / 50%), transparent 54%);
}

.city-stats-backdrop[hidden] { display: none; }

.city-stats-dialog {
  position: relative;
  display: flex;
  width: min(340px, 42vw);
  height: min(660px, calc(100vh - 36px));
  height: min(660px, calc(100dvh - 36px));
  min-height: 420px;
  align-self: flex-end;
  overflow: visible;
  margin: 0;
  padding: 8px;
  border: 2px solid #586573;
  border-radius: 44px;
  background: linear-gradient(145deg, #37414b 0%, #111820 22%, #080c11 78%, #303943 100%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%), inset 0 1px 0 #9099a366;
  color: #f4f2e8;
  outline: none;
  animation: phone-pop-in 180ms ease-out both;
}

.city-stats-phone-notch {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 50%;
  display: grid;
  width: 92px;
  height: 23px;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid #303741;
  border-radius: 14px;
  background: #070a0e;
  box-shadow: inset 0 1px 2px #000;
}

.city-stats-phone-notch span {
  width: 27px;
  height: 3px;
  border-radius: 2px;
  background: #38414c;
}

.city-stats-screen {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 54px 16px 14px;
  border: 1px solid #495663;
  border-radius: 34px;
  background: #102131;
  box-shadow: inset 0 0 0 2px #172c3c, inset 0 1px 0 #8997a244;
}

.city-stats-phonebar {
  position: absolute;
  top: 16px;
  right: 24px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  color: #d2d8db;
  font: 700 9px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
}

.city-stats-dialog > .city-stats-screen > .eyebrow {
  margin: 0 44px 6px 0;
  color: #d7c38c;
  font: 700 10px/1.3 "Courier New", monospace;
  letter-spacing: .1em;
}

.city-stats-dialog h2 {
  margin: 0 42px 4px 0;
  color: #fffdf5;
  font: 700 22px/1.15 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.02em;
}

.city-stats-subtitle {
  margin: 0;
  color: #c5ced5;
  font: 12px/1.4 "Segoe UI", Arial, sans-serif;
  overflow-wrap: anywhere;
}

.city-stats-close {
  position: absolute;
  z-index: 2;
  top: 44px;
  right: 13px;
  width: 31px;
  height: 31px;
  border: 1px solid #8793a0;
  border-radius: 50%;
  background: #1a2a39;
  color: #fffdf5;
  font: 700 14px/1 "Courier New", monospace;
}

.city-stats-close:hover,
.city-stats-close:focus-visible {
  border-color: #d7c38c;
  background: #2a3d4e;
  outline: 2px solid #d7c38c;
  outline-offset: 2px;
}

.city-stats-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 14px 0 9px;
}

.city-stats-card {
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #526476;
  border-top: 3px solid #7b8b99;
  background: #1a2d3e;
  box-shadow: inset 0 1px #ffffff12, 0 2px 0 #09141e;
}

.city-stats-card span {
  color: #e0e5e7;
  font: 700 11px/1.25 "Courier New", monospace;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

.city-stats-card strong {
  color: #fffdf5;
  font: 700 24px/1 Georgia, "Times New Roman", serif;
}

.city-stats-total {
  grid-column: 1 / -1;
  min-height: 60px;
  flex-direction: row;
  align-items: center;
  padding: 8px 11px;
  border-top-color: #d7c38c;
}

.city-stats-total span {
  color: #fff1bd;
  font-size: 11px;
}

.city-stats-total strong { font-size: 30px; }
.city-stats-clear { border-top-color: #83bc9b; }
.city-stats-clear strong,
.city-stats-row.status-clear .city-stats-status { color: #a5e0ba; }
.city-stats-breached { border-top-color: #e58268; }
.city-stats-breached strong,
.city-stats-row.status-breached .city-stats-status { color: #ff9b82; }
.city-stats-unknown { border-top-color: #d2b56b; }
.city-stats-unknown strong,
.city-stats-row.status-unknown .city-stats-status { color: #f1d58d; }

.city-stats-bar {
  display: flex;
  width: 100%;
  height: 10px;
  flex: none;
  overflow: hidden;
  border: 1px solid #718091;
  background: #091722;
}

.city-stats-segment { height: 100%; }
.city-stats-segment.status-clear { background: #83bc9b; }
.city-stats-segment.status-breached { background: #e58268; }
.city-stats-segment.status-unknown { background: #d2b56b; }

.city-stats-list-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 13px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #526476;
  color: #fff1bd;
  font: 700 11px/1.3 "Courier New", monospace;
  letter-spacing: .06em;
}

.city-stats-list-title span { color: #c5ced5; }

.city-stats-list {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  gap: 5px;
  min-height: 70px;
  overflow-y: auto;
  margin: 0;
  padding: 0 3px 2px 0;
  list-style: none;
  scrollbar-color: #718091 #102131;
  scrollbar-width: thin;
}

.city-stats-row {
  display: flex;
  min-width: 0;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid #405365;
  border-left: 4px solid #8492a0;
  background: #172a3a;
}

.city-stats-row.status-clear { border-left-color: #83bc9b; }
.city-stats-row.status-breached { border-left-color: #e58268; }
.city-stats-row.status-unknown { border-left-color: #d2b56b; }
.city-stats-identity { display: grid; min-width: 0; gap: 2px; }
.city-stats-identity strong { color: #fffdf5; font: 600 12px/1.2 "Segoe UI", Arial, sans-serif; overflow-wrap: anywhere; }
.city-stats-identity small { color: #c5ced5; font: 10px/1.2 "Segoe UI", Arial, sans-serif; }

.city-stats-status {
  flex: none;
  padding: 4px 5px;
  border: 1px solid #718091;
  background: #0d1b28;
  color: #e6e8e9;
  font: 700 10px/1.2 "Courier New", monospace;
  letter-spacing: .01em;
}

.city-stats-row.status-clear .city-stats-status { border-color: #83bc9b; }
.city-stats-row.status-breached .city-stats-status { border-color: #e58268; }
.city-stats-row.status-unknown .city-stats-status { border-color: #d2b56b; }

.city-stats-note {
  flex: none;
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid #405365;
  color: #c5ced5;
  font: 10px/1.35 "Segoe UI", Arial, sans-serif;
}

@keyframes phone-pop-in {
  from { transform: translateY(14px) scale(.98); opacity: .7; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 760px) {
  .city-stats-backdrop { padding: 12px; }
  .city-stats-dialog { width: min(320px, 78vw); height: min(630px, calc(100dvh - 24px)); }
}

@media (max-width: 560px) {
  .city-stats-backdrop { padding: 8px; }
  .city-stats-dialog { width: min(300px, 74vw); height: min(610px, calc(100dvh - 16px)); min-height: 380px; }
  .city-stats-screen { padding-right: 12px; padding-left: 12px; }
  .city-stats-identity strong { font-size: 11px; }
  .city-stats-status { padding: 4px 5px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .city-stats-dialog { animation: none; }
}

/* Breaches older than the recent window: muted, not alarming. */
.city-stats-row.status-historical { border-left-color: #7d8a96; }
.city-stats-row.status-historical .city-stats-status { color: #b7c2cc; border-color: #7d8a96; }

/* Cards with a sublist are buttons: same look, plus a hint that they open. */
button.city-stats-card { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.city-stats-card:hover, button.city-stats-card:focus-visible { background: #22394d; outline: 2px solid #ffd45e; outline-offset: -2px; }
button.city-stats-card span::after { content: " \203A"; color: #ffd45e; }

/* The sublist slides over the phone screen, under the notch. */
.city-stats-sheet { position: absolute; z-index: 3; inset: 44px 10px 10px; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: auto; border: 2px solid #526476; background: #0f1f2e; box-shadow: 0 8px 24px #0009; font: 11px/1.5 "Courier New", monospace; color: #c5d5ce; }
.city-stats-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.city-stats-sheet-head strong { color: #ffe480; letter-spacing: .08em; }
.city-stats-sheet-head button { border: 1px solid #526476; background: #1a2d3e; color: #ffe480; font: 700 10px "Courier New", monospace; padding: 4px 8px; cursor: pointer; }
.city-stats-sheet p { margin: 0; color: #a9c2c0; }
.city-stats-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.city-stats-sheet li { padding: 7px 8px; border-left: 3px solid #e58268; background: #1a2d3e; }
.city-stats-sheet li strong, .city-stats-sheet li small { display: block; }
.city-stats-sheet li small { margin-top: 2px; color: #a9c2c0; }

/* Bat-phone, 8-bit: square pixel bezel in bat-signal yellow, hard drop shadow, pixel bat emblem for the notch. */
.city-stats-dialog { border: 4px solid #ffd45e; border-radius: 6px; background: #07090d; box-shadow: 0 0 0 4px #000, 10px 10px 0 #000; }
.city-stats-screen { border: 3px solid #000; border-radius: 2px; background: #0b1220; box-shadow: inset 0 0 0 2px #1c2a3e; }
.city-stats-phone-notch { top: 12px; width: 64px; height: 26px; border: 3px solid #000; border-radius: 0; background: #07090d; }
.bat-emblem { width: 39px; height: 18px; display: block; }
.city-stats-phonebar { color: #ffd45e; letter-spacing: .14em; }
.city-stats-close { border-radius: 0; border: 3px solid #000; background: #ffd45e; color: #000; box-shadow: 3px 3px 0 #000; }
.city-stats-close:hover, .city-stats-close:focus-visible { background: #ffe58f; border-color: #000; outline: 2px solid #ffd45e; }


/* Bat-phone: a black handset with cowl ears, a yellow oval bat emblem for the notch and a utility belt under the screen. */
.city-stats-dialog { margin-top: 34px; border-color: #ffd45e; background: linear-gradient(180deg, #11151d, #05070a); }
.bat-phone-ears { position: absolute; z-index: 1; left: -4px; right: -4px; top: -32px; width: calc(100% + 8px); height: 30px; }
.city-stats-phone-notch { top: 8px; width: 74px; height: 34px; border: 3px solid #000; border-radius: 50%; background: #ffd45e; box-shadow: 0 0 0 2px #ffd45e55; }
.bat-emblem { width: 46px; height: 21px; }
.bat-phone-belt { position: absolute; z-index: 3; left: 18%; right: 18%; bottom: -9px; display: flex; gap: 4px; justify-content: center; align-items: center; height: 14px; padding: 0 6px; border: 3px solid #000; background: #c9a227; }
.bat-phone-belt i { width: 16px; height: 9px; border: 2px solid #000; background: #ffd45e; }
.bat-phone-belt b { width: 20px; height: 12px; border: 2px solid #000; background: #fff3b0; }
.city-stats-phonebar { left: 24px; }

/* Bat-status: bottom-left of the city view, always visible. Its color follows the mood. */
.bat-status { position: absolute; z-index: 5; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; max-width: min(320px, calc(100% - 28px)); padding: 8px 12px 8px 8px; border: 3px solid #000; background: #0b1220; box-shadow: 5px 5px 0 #000, inset 0 0 0 2px #ffd45e; color: #f3f0d1; font-family: "Courier New", monospace; text-align:left; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; }
.bat-status:hover,.bat-status:focus-visible { transform:translateY(-3px); box-shadow:5px 8px 0 #000,inset 0 0 0 2px #ffd45e; outline:2px solid #ffe480; outline-offset:3px }
.bat-mascot { flex: none; width: 64px; height: 64px; padding: 3px; border: 3px solid #000; background: #ffd45e; image-rendering: pixelated; }
.bat-status-copy { display: grid; gap: 2px; min-width: 0; }
.bat-status-copy span { color: #ffd45e; font: 700 10px "Courier New", monospace; letter-spacing: .16em; }
.bat-status-copy strong { font: 900 15px "Courier New", monospace; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bat-status-copy small { color: #a9c2c0; font: 700 11px "Courier New", monospace; }
.bat-status-copy .bat-status-hint { margin-top:4px;color:#ffe480;font:700 8px "Courier New",monospace;letter-spacing:.1em }
.bat-status[data-mood="angry"] .bat-mascot { background: #ff7185; }
.bat-status[data-mood="angry"] small { color: #ff9aa8; }
.bat-status[data-mood="wary"] .bat-mascot { background: #b9c4cc; }
.bat-status[data-mood="unsure"] .bat-mascot { background: #ffc857; }
.bat-status[data-mood="happy"] small { color: #67e6aa; }
.bat-mascot.is-reacting { animation: mascot-hop 360ms steps(3) both; }
@keyframes mascot-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bat-mascot.is-reacting { animation: none; } }
/* Square ear pixels: the ears keep the art's 34:7 shape, so they read as solid cowl ears, not thin lines. */
.bat-phone-ears { top: auto; bottom: calc(100% - 3px); height: auto; aspect-ratio: 34 / 7; }
.city-stats-dialog { margin-top: 72px; height: min(600px, calc(100dvh - 110px)); }
.bat-status[data-mood="happy"] .bat-mascot { background: #67e6aa; } /* green: no known breach */

/* Click-through product briefing */
.bat-deck-backdrop[hidden]{display:none!important}.bat-deck-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 0%,#24485c99,#06101bed 68%)}
.bat-deck-dialog{display:flex;position:relative;width:min(1000px,100%);height:min(720px,calc(100dvh - 48px));min-height:480px;flex-direction:column;overflow:hidden;border:3px solid #ffd45e;background:#0b1420;box-shadow:10px 10px 0 #03070b;color:#edf2e8;outline:none}
.deck-topbar,.deck-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;background:#101e2c;border-bottom:1px solid #2a3d4b;font:700 10px "Courier New",monospace;letter-spacing:.1em;color:#a9c2c0}.deck-topbar>span:first-child{color:#ffe480}.deck-topbar i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#67e6aa;box-shadow:0 0 9px #67e6aa}.deck-topbar button{border:2px solid #416174;background:#20394a;color:#ffe480;font:900 20px "Courier New",monospace;width:32px;height:32px;cursor:pointer}.deck-content{flex:1;min-height:0;overflow:auto;padding:clamp(24px,5vw,62px);background:radial-gradient(ellipse at 82% 20%,#1b354122,transparent 40%),#0b1420}.deck-content>.eyebrow{color:#7ce3bd}.deck-content h1{max-width:760px;margin:13px 0 10px;font:500 clamp(32px,5vw,56px)/1.08 Georgia,serif;letter-spacing:-.035em}.deck-content h1 em{color:#ffe480;font-weight:400}.deck-lede{max-width:670px;margin:0;color:#a9c2c0;font:15px/1.65 "Segoe UI",sans-serif}.deck-chart-card{margin:30px 0 20px;padding:20px;border:2px solid #294659;background:#102234}.deck-chart-head{display:flex;justify-content:space-between;gap:20px}.deck-chart-head>div>span,.deck-period,.deck-chart-axis{display:block;color:#8ca6aa;font:700 9px/1.4 "Courier New",monospace;letter-spacing:.08em}.deck-chart-head strong{display:block;margin-top:6px;color:#ffe480;font:500 32px Georgia,serif}.deck-chart-head strong small{font:10px "Courier New",monospace;color:#a9c2c0}.deck-period{text-align:right}.deck-chart{height:155px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:clamp(5px,1.5vw,16px);margin-top:14px;border-bottom:1px solid #416174;background:repeating-linear-gradient(to top,transparent 0,transparent 37px,#294659 38px)}.deck-bar-item{height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:5px;min-width:0}.deck-bar-item strong{color:#c4d7d5;font:9px "Courier New",monospace}.deck-bar-item i{width:min(28px,100%);height:var(--bar-height);min-height:8px;background:linear-gradient(180deg,#7ce3bd,#397c88);border:1px solid #9ce8cd}.deck-bar-item small{transform:translateY(17px);color:#a9c2c0;font:9px "Courier New",monospace}.deck-chart-axis{display:flex;justify-content:space-between;margin-top:22px}.deck-callout{display:flex;align-items:flex-start;gap:18px;padding:15px 17px;border-left:4px solid #ffd45e;background:#14283a;color:#d3dfd8;font:13px/1.55 "Segoe UI",sans-serif}.deck-callout b{flex:none;color:#ffe480;font:700 9px "Courier New",monospace;letter-spacing:.08em}.deck-reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0 20px}.deck-reason-grid article{padding:18px;border:1px solid #294659;background:#102234}.deck-reason-grid article>b{color:#7ce3bd;font:700 12px "Courier New",monospace}.deck-reason-grid h2,.deck-flow h2{margin:16px 0 7px;color:#ffe480;font:700 15px "Segoe UI",sans-serif}.deck-reason-grid p,.deck-flow p{margin:0;color:#a9c2c0;font:12px/1.6 "Segoe UI",sans-serif}.deck-quote{padding:17px 20px;border-left:4px solid #ffd45e;color:#f1edda;font:italic 20px/1.5 Georgia,serif;background:#14283a}.deck-flow{display:grid;gap:10px;margin:28px 0 18px}.deck-flow article{display:flex;gap:16px;padding:16px;border:1px solid #294659;background:#102234}.deck-flow-number{color:#7ce3bd;font:700 14px "Courier New",monospace}.deck-flow h2{margin:0 0 5px}.deck-data-note{padding:14px 17px;background:#14283a}.deck-data-note span{color:#ffe480;font:700 9px "Courier New",monospace;letter-spacing:.1em}.deck-data-note p{margin:7px 0 0;color:#a9c2c0;font:12px/1.5 "Segoe UI",sans-serif}.deck-benefit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.deck-benefit-stats div{padding:14px;border:1px solid #294659;background:#102234}.deck-benefit-stats span,.deck-benefit-stats strong{display:block}.deck-benefit-stats span{color:#8ca6aa;font:700 9px "Courier New",monospace;letter-spacing:.05em}.deck-benefit-stats strong{margin-top:8px;color:#ffe480;font:500 28px Georgia,serif}.deck-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.deck-benefits article{display:flex;gap:12px;padding:15px;border:1px solid #294659;background:#102234}.deck-benefits article>i{color:#7ce3bd;font:20px Georgia,serif;font-style:normal}.deck-benefits b,.deck-benefits small{display:block}.deck-benefits b{color:#edf2e8;font:700 12px "Segoe UI",sans-serif}.deck-benefits small{margin-top:6px;color:#a9c2c0;font:11px/1.5 "Segoe UI",sans-serif}.deck-footer{border-top:1px solid #2a3d4b;border-bottom:0}.deck-footer>span{max-width:230px;color:#839c9d;font-size:8px;line-height:1.5}.deck-footer nav{display:flex;align-items:center;gap:12px}.deck-footer nav>button{padding:9px 11px;border:1px solid #416174;background:#20394a;color:#ffe480;font:700 9px "Courier New",monospace;cursor:pointer}.deck-footer nav>button:disabled{opacity:.4;cursor:default}.deck-footer nav>div{display:flex;gap:7px}.deck-dot{width:8px;height:8px;padding:0;border:1px solid #718c94;border-radius:50%;background:transparent;cursor:pointer}.deck-dot[aria-current="step"]{background:#ffd45e;border-color:#ffd45e;box-shadow:0 0 8px #ffd45e}
@media(max-width:650px){.bat-deck-backdrop{padding:10px}.bat-deck-dialog{height:calc(100dvh - 20px);min-height:0}.deck-topbar,.deck-footer{padding:10px 12px}.deck-content{padding:24px 18px}.deck-reason-grid,.deck-benefits{grid-template-columns:1fr}.deck-reason-grid article{padding:13px}.deck-reason-grid h2{margin-top:7px}.deck-benefit-stats{gap:5px}.deck-benefit-stats div{padding:9px}.deck-benefit-stats span{font-size:7px}.deck-benefit-stats strong{font-size:23px}.deck-chart-card{padding:12px}.deck-chart{height:125px;gap:4px}.deck-bar-item strong{font-size:7px}.deck-bar-item small{font-size:8px}.deck-footer{align-items:flex-start;flex-direction:column}.deck-footer nav{align-self:stretch;justify-content:space-between;width:100%}.deck-callout{gap:10px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.bat-status{transition:none}}

/* GCPD operations: the handset expands to fit actionable mission reports. */
.city-stats-backdrop { z-index: 80; }
.city-stats-dialog.is-mission-board { width: min(540px, calc(100vw - 36px)); height: min(790px, calc(100dvh - 110px)); }
.is-mission-board .city-stats-screen { padding-top: 54px; }
.is-mission-board .city-stats-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-mission-board .city-stats-card { grid-column: auto; }
.is-mission-board #city-stats-list, .is-mission-board #city-stats-bar, .is-mission-board .city-stats-list-title { display: none; }
.mission-board { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 10px; margin-top: 10px; }
.mission-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: #b9c9d7; font: 11px/1.4 "Courier New", monospace; }
.mission-progress strong { color: #ffd45e; }
.mission-progress progress { width: 100%; height: 6px; border: 0; background: #263447; accent-color: #ffd45e; }
.mission-progress progress::-webkit-progress-bar { background: #263447; }
.mission-progress progress::-webkit-progress-value { background: #ffd45e; }
.mission-filters { display: flex; gap: 6px; }
.mission-filters button, .mission-actions button, .mission-actions a { border: 1px solid #53647a; padding: 8px 10px; background: #182537; color: #e0e9f2; font: 700 11px/1.3 "Courier New", monospace; cursor: pointer; text-decoration: none; }
.mission-filters button[aria-pressed="true"] { background: #ffd45e; border-color: #ffd45e; color: #101722; }
.mission-announcement { margin: 0; color: #a9dcc1; font: 11px/1.4 "Segoe UI", sans-serif; }
.mission-announcement:empty { display: none; }
.mission-list { overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 10px; padding-right: 5px; scrollbar-width: thin; scrollbar-color: #65718b #111c2a; }
.mission-card { padding: 13px; border: 1px solid #35475e; border-left: 3px solid #ffd45e; background: #142033; }
.mission-card.is-complete { border-left-color: #83bc9b; }
.mission-meta { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.mission-priority { color: #ffd45e; font: 700 9px/1.5 "Courier New", monospace; letter-spacing: .06em; }
.mission-priority.priority-0 { color: #ffa18c; }
.is-complete .mission-priority { color: #83bc9b; }
.mission-report { background: none; border: 0; padding: 0; color: #c1d4eb; font: 11px/1.4 "Courier New", monospace; text-align: right; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mission-card h3 { margin: 9px 0 5px; color: #f1eee2; font: 700 16px/1.3 "Segoe UI", sans-serif; }
.mission-card p { margin: 7px 0; font: 12px/1.55 "Segoe UI", sans-serif; color: #c0cedb; }
.mission-card p.mission-reason { color: #94a7bc; font-size: 11px; }
.mission-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.mission-actions a { color: #ffd45e; border-color: #9c873f; }
.mission-actions button { margin-left: auto; }
.mission-link-note, .mission-no-link { display: block; color: #9bacc0; font: 10px/1.5 "Segoe UI", sans-serif; margin-top: 7px; }
.mission-empty { padding: 25px 12px; border: 1px dashed #53647a; color: #dce8f2; text-align: center; }
.mission-empty p { font: 12px/1.6 "Segoe UI", sans-serif; color: #a9bed0; }
.mission-board :is(button,a):focus-visible { outline: 2px solid #ffd45e; outline-offset: 3px; }
.mission-board :is(button,a):hover { filter: brightness(1.2); }
@media (max-width: 560px) {
  .city-stats-dialog.is-mission-board { width: calc(100vw - 26px); min-height: 0; }
  .mission-card { padding: 10px; }
  .mission-card h3 { font-size: 14px; }
}
/* Report links (Cobblepot news headlines). */
.city-stats-row strong a { color: #ffd45e; text-decoration: underline; text-underline-offset: 2px; }
.city-stats-row strong a:hover, .city-stats-row strong a:focus-visible { color: #fff3b0; }
/* The backdrop lets clicks through to the city, so clicking another building switches reports (app.js closes the phone
   on a click that hits no building). Only the phone itself takes the pointer. */
.city-stats-backdrop { pointer-events: none; }
.city-stats-dialog { pointer-events: auto; }
@media (max-width: 900px) { .bat-status { bottom: 78px; } } /* the nav bar moves to the bottom here */