/* A paper mission desk around a living rust-and-turquoise colony. */
.mars-city-level.mars-city-colony-mode {
  --mars-city-cyan: #137b80;
  --mars-city-green: #3b8550;
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  color: #402c25;
  background: #f5eddf;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.mars-city-colony-mode .mars-city-command {
  position: relative;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  background: #fffaf0;
  border-bottom: 1px solid #dfcbb6;
  box-shadow: none;
  backdrop-filter: none;
  padding: 12px 20px;
}
.mars-city-colony-mode .mars-city-command h1 { font-size: clamp(20px, 2vw, 28px); color: #452a24; }
.mars-city-colony-mode .mars-city-command p { color: #6c5849; font-size: 13px; white-space: normal; }
.mars-city-colony-mode .mars-city-command .mars-city-kicker { color: #ad4c2e; font-size: 12px; letter-spacing: .12em; }
.mars-city-colony-mode .mars-city-exit,
.mars-city-colony-mode .mars-city-budget,
.mars-city-colony-mode .mars-city-score { color: #513423; background: #f3e5cd; box-shadow: none; min-height: 48px; border: 1px solid #dac3a7; }
.mars-city-colony-mode .mars-city-score span,
.mars-city-colony-mode .mars-city-budget span { font-size: 12px; color: #705740; }
.mars-city-colony-mode .mars-city-live-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: none; gap: 10px; }
.mars-city-colony-mode .mars-city-live-strip .mars-city-tank { display: grid; min-width: 0; gap: 3px; padding: 8px 12px; color: #3e584d; background: #eaf0dd; border: 1px solid #d0d9bd; border-radius: 10px; font-size: 13px; }
.mars-city-colony-mode .mars-city-tank strong { display: flex; justify-content: space-between; text-transform: capitalize; }
.mars-city-colony-mode .mars-city-tank b { color: #235d50; font-size: 13px; }
.mars-city-colony-mode .mars-city-tank small { font-size: 11px; }
.mars-city-colony-mode .mars-city-tank meter { width: 100%; height: 9px; accent-color: #358971; }
.mars-city-colony-mode .mars-city-live-strip .mars-city-tank.low { color: #8b331e; background: #ffe1c9; border-color: #d79770; }
.mars-city-colony-chapter { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(220px, 32%); gap: 20px; align-items: center; padding: 22px; margin: 16px 20px 10px; background: #fffaf0; border: 1px solid #decbb7; border-radius: 18px; box-shadow: 0 6px 0 #e5d9c8; }
.mars-city-colony-chapter > img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 5px 6px #7f452533); }
.mars-city-colony-story p { margin: 0 0 5px; color: #a2482a; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 800; }
.mars-city-colony-story h2 { font-size: clamp(21px, 2.4vw, 30px); margin: 0 0 7px; color: #4b3027; line-height: 1.1; }
.mars-city-colony-story > span { display: block; max-width: 630px; font-size: 14px; line-height: 1.45; }
.mars-city-colony-chapters { display: flex; gap: 6px; margin-top: 12px; }
.mars-city-colony-chapters span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e9dfcf; color: #796858; font-size: 12px; font-weight: 800; }
.mars-city-colony-chapters .done { background: #238074; color: white; }
.mars-city-colony-chapters .current { background: #c95330; color: white; box-shadow: 0 0 0 3px #f3d8ba; }
.mars-city-colony-next { display: grid; gap: 8px; }
.mars-city-colony-next button { min-height: 56px; border: 1px solid #12615d; border-radius: 12px; background: #177e74; color: #fffaf0; font: inherit; font-size: 16px; font-weight: 800; padding: 10px 16px; cursor: pointer; box-shadow: 0 4px 0 #10544e; }
.mars-city-colony-next button:active { transform: translateY(2px); box-shadow: 0 2px 0 #10544e; }
.mars-city-colony-next button:disabled { background: #e6dccb; border-color: #c9b69d; color: #756657; box-shadow: none; cursor: default; }
.mars-city-colony-next small { font-size: 12px; line-height: 1.4; color: #6a5747; }
.mars-city-weather-watch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 20px; padding: 12px 16px; border: 1px solid #d0d8c5; border-radius: 12px; background: #e9efdf; }
.mars-city-weather-watch.storm { background: #f7d8b0; border-color: #c8894f; }
.mars-city-weather-watch > div { display: grid; gap: 4px; flex: 1 1 250px; }
.mars-city-weather-watch strong { font-size: 14px; }
.mars-city-weather-watch span { font-size: 12px; line-height: 1.4; }
.mars-city-weather-watch button { min-height: 44px; border: 1px solid #adc2a6; background: #fffaf0; color: #355548; border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.mars-city-weather-watch button:disabled { opacity: .55; cursor: default; }
.mars-city-level.mars-city-colony-mode .mars-city-map-play { display: grid; grid-template: auto minmax(520px, auto) / minmax(0, 1fr) 300px; min-height: 0; gap: 12px; overflow: visible; padding: 0 20px; }
.mars-city-level.mars-city-colony-mode .mars-city-tools { position: relative; inset: auto; grid-area: 1 / 1 / 2 / -1; display: flex; gap: 8px; width: 100%; height: auto; max-height: none; overflow-x: auto; padding: 8px; background: #fff9ee; border: 1px solid #dfcbb6; box-shadow: none; backdrop-filter: none; border-radius: 12px; }
.mars-city-colony-mode .mars-city-tool { flex: 0 0 82px; min-height: 74px; background: #f0e3cf; color: #583d2b; border-color: #dcc3a6; }
.mars-city-colony-mode .mars-city-tool span { font-size: 12px; line-height: 1.15; }
.mars-city-colony-mode .mars-city-tool.selected { color: white; background: #226f69; }
.mars-city-level.mars-city-colony-mode .mars-city-map-shell { grid-area: 2 / 1; height: 650px; min-height: 0; display: grid; grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); border-radius: 16px; overflow: hidden; border: 1px solid #ba7955; }
.mars-city-colony-mode .mars-city-map-controls { position: relative; inset: auto; grid-area: 1 / 1; justify-content: start; background: #f8e8d3; border: 0; border-bottom: 1px solid #caa482; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.mars-city-colony-mode .mars-city-map-controls button { color: #634531; font-size: 13px; background: #fff8eb; border: 1px solid #cdb293; }
.mars-city-colony-mode .mars-city-map-controls button.selected { background: #287e75; color: white; }
.mars-city-colony-mode .mars-city-map-controls > span { color: #6e533a; }
.mars-city-level.mars-city-colony-mode .mars-city-map-viewport { grid-area: 2 / 1; min-height: 0; overflow: auto; }
.mars-city-level.mars-city-colony-mode .mars-city-map { width: 100%; height: 100%; min-width: 880px; min-height: 590px; }
.mars-city-level.mars-city-colony-mode .mars-city-map-detail { min-width: 1250px; min-height: 800px; }
.mars-city-colony-mode .mars-city-map-quick-action { display: none; }
.mars-city-level.mars-city-colony-mode .mars-city-panel { position: relative; inset: auto; grid-area: 2 / 2; width: auto; height: 650px; max-height: none; min-height: 0; color: #503c2c; background: #fffaf0; border: 1px solid #d9c6ae; border-radius: 16px; box-shadow: none; backdrop-filter: none; padding: 16px; }
.mars-city-colony-mode .mars-city-panel::before { display: none; }
.mars-city-colony-mode .mars-city-panel p { font-size: 14px; line-height: 1.4; }
.mars-city-colony-mode .mars-city-panel :is(p, span, strong, small, em, i) { color: #584333; }
.mars-city-colony-mode .mars-city-panel .mars-city-budget-row span { color: #40523a; background: #e8efd8; }
.mars-city-colony-mode .mars-city-panel h2 { color: #4f3528; font-size: 21px; }
.mars-city-colony-mode .mars-city-panel button { min-height: 44px; font-size: 13px; color: #4c4631; background: #eceddb; border-color: #c4c9ac; }
.mars-city-colony-mode .mars-city-panel button:disabled { opacity: .6; }
.mars-city-colony-mode .mars-city-panel .mars-city-mission-card,
.mars-city-colony-mode .mars-city-panel .mars-city-guided-build,
.mars-city-colony-mode .mars-city-panel .mars-city-selected,
.mars-city-colony-mode .mars-city-panel .mars-city-challenge-card,
.mars-city-colony-mode .mars-city-panel .mars-city-meters span { color: #4e4830; background: #f0e7d4; border-color: #d9c6a7; }
.mars-city-colony-mode .mars-city-panel small,
.mars-city-colony-mode .mars-city-panel em,
.mars-city-colony-mode .mars-city-panel i { color: #696146; font-size: 12px; }
.mars-city-colony-mode .mars-city-panel .mars-city-mayor-badge { width: 65px; height: 65px; }
.mars-city-colony-mode .mars-city-panel .mars-city-guided-build { display: none; }
.mars-city-colony-mode .mars-city-landmark-tag { font-size: 12px; }
.mars-city-colony-mode .mars-city-reward { color: #4b3227; background: #fffaec; border: 2px solid #bd8051; box-shadow: 0 12px 40px #3a1c2244; }
.mars-city-colony-mode .mars-city-reward button { min-height: 48px; font-size: 15px; color: white; background: #21786d; }
.mars-city-colony-mode button:focus-visible { outline: 3px solid #e49d38; outline-offset: 3px; }
@media (max-width: 900px) {
  .mars-city-colony-mode .mars-city-command { padding: 10px 12px; }
  .mars-city-colony-chapter { grid-template-columns: 60px minmax(0, 1fr); margin: 12px; padding: 16px; gap: 12px; }
  .mars-city-colony-chapter > img { width: 60px; height: 70px; }
  .mars-city-colony-next { grid-column: 1 / -1; }
  .mars-city-weather-watch { margin: 12px; }
  .mars-city-level.mars-city-colony-mode .mars-city-map-play { grid-template: auto 540px auto / minmax(0, 1fr); padding: 0 12px; }
  .mars-city-level.mars-city-colony-mode .mars-city-map-shell { grid-area: 2 / 1; height: 540px; }
  .mars-city-level.mars-city-colony-mode .mars-city-panel { grid-area: 3 / 1; height: auto; overflow: visible; }
}
@media (max-width: 520px) {
  .mars-city-colony-mode .mars-city-command { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mars-city-colony-mode .mars-city-command h1 { font-size: 19px; }
  .mars-city-colony-mode .mars-city-command .mars-city-kicker { font-size: 10px; }
  .mars-city-colony-mode .mars-city-score { display: none; }
  .mars-city-colony-mode .mars-city-live-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mars-city-colony-mode .mars-city-live-strip .mars-city-tank { padding: 6px 9px; }
  .mars-city-colony-story > span { font-size: 13px; }
  .mars-city-colony-chapter { padding: 12px; }
  .mars-city-colony-chapters { margin-top: 9px; }
  .mars-city-colony-next button { font-size: 15px; }
  .mars-city-weather-watch button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mars-city-colony-next button { transition: none; }
}