/*
 * TOWCOON UI Refresh · 2026-08-21
 * Warm, colorful tycoon-game interface inspired by hand-built management games.
 * Presentation only: no gameplay, timing, economy, or traffic rules live here.
 */

:root {
  --ui-ink: #17202b;
  --ui-muted: #65707c;
  --ui-cream: #fff8e9;
  --ui-cream-2: #f7ead0;
  --ui-paper: #fffdf6;
  --ui-navy: #132033;
  --ui-navy-2: #0b1422;
  --ui-yellow: #ffbd2e;
  --ui-orange: #f08a14;
  --ui-gold-dark: #8e560b;
  --ui-green: #2c9a50;
  --ui-blue: #2f82d0;
  --ui-red: #e64b45;
  --ui-purple: #7652bf;
  --ui-line: #d9c5a0;
  --ui-shadow: rgba(29, 22, 13, .35);
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: var(--font);
  color: var(--ui-ink);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #4eb6ff !important;
  outline-offset: 2px;
}

/* HUD: compact control console with clearly separated resources. */
.app .hud {
  position: relative;
  gap: 7px;
  padding: 8px 10px;
  border: 2px solid #e5a51e;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(180deg, rgba(22,35,55,.97), rgba(8,17,29,.97));
  box-shadow:
    0 5px 0 rgba(91,52,4,.7),
    0 12px 28px rgba(4,10,18,.38),
    inset 0 1px rgba(255,255,255,.16);
}

.app .hud-card {
  position: relative;
  min-height: 58px;
  overflow: hidden;
  padding: 8px 12px 7px;
  border: 2px solid #d8c49b;
  border-top: 5px solid var(--ui-blue);
  border-radius: 13px;
  background: linear-gradient(180deg, #fffdf7, #f5ead3);
  box-shadow: 0 3px 0 #a89167, 0 5px 10px rgba(0,0,0,.2);
}

.app .hud-card:nth-child(1) { border-top-color: var(--ui-yellow); }
.app .hud-card:nth-child(2) { border-top-color: var(--ui-blue); }
.app .hud-card:nth-child(3) { border-top-color: var(--ui-green); }
.app .hud-card:nth-child(4) { border-top-color: var(--ui-orange); }
.app .hud-card:nth-child(5) { border-top-color: var(--ui-red); }
.app .hud-card:nth-child(6) { border-top-color: var(--ui-purple); }
.app .hud-card:nth-child(7) { border-top-color: #e6a719; }
.app .hud-card:nth-child(8) { border-top-color: #35a7b7; }

.app .hud-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #a89167, 0 8px 14px rgba(0,0,0,.24);
}

.app .hud-card:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a89167, 0 3px 7px rgba(0,0,0,.22);
}

.app .hud-card.money,
.app .hud-card.money.release-debt-cash {
  background: linear-gradient(180deg, #fff0ad, #ffc84d) !important;
  border-color: #af6c12 !important;
  border-top-color: #ffef84 !important;
}

.app .hud-card.money.release-debt-cash {
  background: linear-gradient(180deg, #ff6e65, #d63c3c) !important;
  border-color: #8f2227 !important;
}

.app .hud-label {
  color: #596575;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .85px;
}

.app .hud-value {
  color: var(--ui-ink);
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 16px;
  letter-spacing: -.25px;
}

.app .hud-icons {
  align-items: center;
  gap: 8px;
}

.app .icon-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #d59a1d;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4c9, #ffbf35);
  box-shadow: 0 4px 0 #85520d, 0 8px 14px rgba(0,0,0,.28);
  font-size: 18px;
}

/* Main navigation: a deliberate game menu, not a row of generic web buttons. */
.app .action-bar {
  gap: 7px;
  padding: 7px 9px 10px;
  border: 2px solid rgba(255,189,46,.72);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,34,54,.97), rgba(9,18,31,.97));
  box-shadow: 0 4px 0 rgba(86,49,4,.72), 0 10px 24px rgba(4,10,18,.32);
}

.app .action-bar > button {
  min-height: 46px;
  padding: 9px 13px;
  border: 2px solid #d4c09a;
  border-bottom-color: #9f895f;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf6, #efdfbf);
  box-shadow: 0 3px 0 #9d8455;
  color: #26303c;
  font-weight: 900;
}

.app .action-bar > button:hover {
  background: linear-gradient(180deg, #fff9df, #ffd776);
  border-color: #d89019;
  transform: translateY(-1px);
}

.app .action-bar > button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #9d8455;
}

.app .action-bar > button::before {
  display: inline-grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  background: #fff7dc;
  box-shadow: inset 0 0 0 1px rgba(80,56,16,.14);
  font-size: 14px;
}

.app .action-bar > button:nth-child(1)::before { content: "📞"; }
.app .action-bar > button:nth-child(2)::before { content: "📋"; }
.app .action-bar > button:nth-child(3)::before { content: "🏗"; }
.app .action-bar > button:nth-child(4)::before { content: "👷"; }
.app .action-bar > button:nth-child(5)::before { content: "🔧"; }
.app .action-bar > button:nth-child(6)::before { content: "🚚"; }
.app .action-bar > button:nth-child(7)::before { content: "🎨"; }

.app .action-bar > button:nth-child(n+8)::before,
.app .action-bar > button:has(.pip)::before {
  display: none;
}

.app .cr-operation-nav {
  border-color: #9973e3 !important;
  background: linear-gradient(180deg, #efe7ff, #cbb4ff) !important;
  box-shadow: 0 3px 0 #62439b !important;
  color: #4c2b81 !important;
}

.app .pip {
  min-width: 21px;
  height: 21px;
  border: 2px solid #fff3cd;
  box-shadow: 0 2px 0 #8a1f26;
  line-height: 17px;
}

.app .status-pill {
  border: 2px solid #176b39;
  border-radius: 12px;
  background: linear-gradient(180deg, #48bd70, #278e4d);
  box-shadow: 0 3px 0 #155b32, 0 7px 14px rgba(0,0,0,.2);
}

/* Request cards stay readable while gaining more personality. */
.app .job-stack {
  width: 252px;
  gap: 12px;
}

.app .job-card {
  position: relative;
  gap: 9px;
  padding: 14px;
  overflow: hidden;
  border: 3px solid #d69a21;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,189,46,.12), transparent 45%),
    linear-gradient(180deg, #fffdf6, #f8ecd4);
  box-shadow: 0 5px 0 #8e5a12, 0 14px 28px rgba(9,17,29,.34);
}

.app .job-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, transparent 49%, rgba(240,138,20,.18) 50%);
  pointer-events: none;
}

.app .job-card.urgent {
  border-color: var(--ui-red);
  box-shadow: 0 5px 0 #8f2725, 0 14px 28px rgba(9,17,29,.34);
}

.app .job-card header {
  color: #8b5b12;
  font-weight: 1000;
  letter-spacing: 1px;
}

.app .job-type {
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 15px;
}

.app .swatch {
  width: 19px;
  height: 19px;
  border: 2px solid #28323f;
  border-radius: 7px;
  box-shadow: 0 2px 0 rgba(0,0,0,.22);
}

.app .job-card dl {
  padding: 8px;
  border: 1px solid #e3d0ad;
  border-radius: 11px;
  background: rgba(255,255,255,.55);
}

.app .job-life,
.app .quest-bar,
.app .cr-progress,
.app .fuel-bar,
.app .cond-bar {
  height: 9px;
  border: 1px solid rgba(84,62,25,.18);
  background: #dfd2b9;
  box-shadow: inset 0 1px 2px rgba(53,36,10,.16);
}

.app .job-life span,
.app .quest-bar i,
.app .cr-progress i,
.app .fuel-bar i {
  background: linear-gradient(90deg, #ff9c16, #ffd242);
  box-shadow: inset 0 1px rgba(255,255,255,.45);
}

/* Buttons get a small physical edge, like a management game control. */
.app .btn,
.app .cr-primary,
.app [data-cr-start-shift],
.app [data-cr-start-challenge] {
  border: 2px solid transparent;
  border-radius: 11px;
  font-weight: 900;
}

.app .btn-primary,
.app .cr-primary,
.app [data-cr-start-shift],
.app [data-cr-start-challenge],
.app .cr-advisor-action {
  border-color: #c9780e;
  background: linear-gradient(180deg, #ffd75c, #ffae1c);
  box-shadow: 0 4px 0 #8f560c;
  color: #362507;
}

.app .btn-primary:active,
.app .cr-primary:active,
.app [data-cr-start-shift]:active,
.app [data-cr-start-challenge]:active,
.app .cr-advisor-action:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #8f560c;
}

.app .btn-ghost {
  border-color: #d8c6a4;
  background: linear-gradient(180deg, #fffef9, #ecdfc6);
  box-shadow: 0 3px 0 #ae9870;
}

.app .btn-danger {
  border-color: #9e2828;
  background: linear-gradient(180deg, #ff7167, #d83f40);
  box-shadow: 0 4px 0 #842327;
}

/* Universal dialogs. */
.app .modal-backdrop,
.app .cr-career-backdrop,
.app .cr-brief-backdrop,
.app .tow-finance-backdrop,
.app .tow-story-intro,
.app .intro-backdrop {
  background: rgba(8,14,23,.76);
  -webkit-backdrop-filter: blur(5px) saturate(.78);
  backdrop-filter: blur(5px) saturate(.78);
}

.app .modal,
.app .cr-career-panel,
.app .cr-brief-card,
.app .cr-tour-card,
.app .tow-finance-card,
.app .tow-story-card,
.app .intro {
  position: relative;
  border: 3px solid var(--ui-yellow) !important;
  outline: 4px solid rgba(255,248,233,.94);
  outline-offset: -8px;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(255,203,76,.16), transparent 30%),
    linear-gradient(180deg, #fffaf0, #f8ecd6) !important;
  color: var(--ui-ink) !important;
  box-shadow:
    0 7px 0 #8d570e,
    0 24px 58px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(153,99,18,.22) !important;
}

.app .modal {
  width: min(450px, 100%);
  padding: 22px;
  gap: 14px;
}

.app .modal.wide {
  width: min(760px, 100%);
}

.app .modal-head {
  min-height: 52px;
  padding: 0 2px 12px;
  border-bottom: 2px solid #ead7b2;
}

.app .modal-head h2,
.app .cr-career-panel h2,
.app .cr-brief-card h2,
.app .cr-tour-card h2,
.app .tow-story-card h2,
.app .tow-finance-card h2 {
  color: var(--ui-ink) !important;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
  font-weight: 900;
  letter-spacing: -.45px;
  text-shadow: 0 1px #fff;
}

.app .modal-head h2 {
  font-size: 23px;
}

.app .modal-head > button,
.app .cr-career-panel > header > button {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border: 2px solid #9f650d !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ffe37a, #ffb52b) !important;
  box-shadow: 0 4px 0 #794909, 0 6px 12px rgba(0,0,0,.22) !important;
  color: #17202b !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
}

.app .modal-hint {
  color: #69727c;
  font-size: 13px;
}

.app .modal-tabs,
.app .cr-career-panel > nav {
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2cfaa;
}

.app .modal-tabs button,
.app .cr-career-panel > nav button {
  min-height: 42px;
  padding: 8px 14px;
  border: 2px solid #dac8a5;
  border-radius: 11px;
  background: linear-gradient(180deg, #fffef9, #ebddc3);
  box-shadow: 0 3px 0 #aa9167;
  color: #56606d;
  font-weight: 900;
}

.app .modal-tabs button.active,
.app .cr-career-panel > nav button.active {
  border-color: #cd7c0a;
  background: linear-gradient(180deg, #ffd968, #ffae1b);
  box-shadow: 0 3px 0 #8c5308;
  color: #302105;
}

/* Quest, upgrade, construction, fleet and achievement cards. */
.app .quest-list,
.app .upgrade-list,
.app .fleet-list,
.app .ach-list,
.app .cr-contracts {
  gap: 11px;
}

.app .quest-row,
.app .upgrade-row,
.app .build-card,
.app .fleet-row,
.app .ach-row,
.app .cr-contract,
.app .cr-tech-card,
.app .cr-shift-offers article {
  border: 2px solid #d9c6a0 !important;
  border-left: 7px solid var(--ui-blue) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #fffef9, #f5e9d3) !important;
  box-shadow: 0 3px 0 #b49d76, 0 7px 13px rgba(66,47,17,.12) !important;
}

.app .quest-row,
.app .upgrade-row,
.app .fleet-row,
.app .ach-row,
.app .cr-contract {
  padding: 13px 14px;
}

.app .quest-row:nth-child(4n+1),
.app .upgrade-row:nth-child(4n+1),
.app .cr-contract:nth-child(4n+1) { border-left-color: var(--ui-blue) !important; }
.app .quest-row:nth-child(4n+2),
.app .upgrade-row:nth-child(4n+2),
.app .cr-contract:nth-child(4n+2) { border-left-color: var(--ui-green) !important; }
.app .quest-row:nth-child(4n+3),
.app .upgrade-row:nth-child(4n+3),
.app .cr-contract:nth-child(4n+3) { border-left-color: var(--ui-orange) !important; }
.app .quest-row:nth-child(4n),
.app .upgrade-row:nth-child(4n),
.app .cr-contract:nth-child(4n) { border-left-color: var(--ui-purple) !important; }

.app .quest-row.active,
.app .quest-row.done,
.app .upgrade-row:hover,
.app .build-card.selected,
.app .ach-row.done,
.app .cr-contract.done {
  border-color: #d29019 !important;
  border-left-color: #f09a18 !important;
  background: linear-gradient(180deg, #fff8d9, #ffe8a5) !important;
}

.app .quest-head b,
.app .upgrade-row h3,
.app .build-card h3,
.app .fleet-row b,
.app .cr-contract h3,
.app .cr-tech-card h3 {
  color: #1e2733;
  font-family: "Arial Black", "Trebuchet MS", sans-serif;
}

.app .quest-reward,
.app .price,
.app .cr-contract > button,
.app .cr-tech-cost {
  color: #16763a !important;
  font-size: 13px;
  font-weight: 1000;
}

.app .build-grid,
.app .cr-tech-grid,
.app .cr-shift-offers {
  gap: 12px;
}

.app .build-card,
.app .cr-tech-card,
.app .cr-shift-offers article {
  padding: 14px;
}

.app .stat-grid > div,
.app .summary-grid > div,
.app .cr-stat-grid > div,
.app .cr-long-goals > div,
.app .cr-manager-steps > div {
  border: 2px solid #d7c39d;
  border-radius: 13px;
  background: linear-gradient(180deg, #fffef9, #efe1c6);
  box-shadow: 0 3px 0 #ae9770;
}

.app .row-icon,
.app .card-icon,
.app .cr-tech-icon,
.app .cr-advisor-icon,
.app .cr-brief-icon,
.app .cr-tour-head > span {
  border: 2px solid #e4b349;
  background: linear-gradient(180deg, #fff6d7, #ffd566) !important;
  box-shadow: 0 3px 0 #a87517;
}

.app .text-input {
  border: 2px solid #c9af82;
  background: #fffef8;
  color: #1d2733;
  box-shadow: inset 0 2px 4px rgba(64,42,10,.1);
}

/* Career hub, advisor and guided briefs use the same visual grammar. */
.app .cr-career-panel {
  width: min(920px, 100%);
}

.app .cr-career-panel > header {
  padding: 20px 24px 12px;
  border-bottom: 2px solid #ead5ad;
}

.app .cr-kicker,
.app .cr-brief-kicker,
.app .cr-tour-head small,
.app .tow-story-kicker,
.app .tow-finance-kicker {
  color: #9a5b06 !important;
  font-weight: 1000 !important;
  letter-spacing: 1.25px;
}

.app .cr-career-panel > nav {
  padding: 12px 24px 14px;
}

.app .cr-panel-content {
  padding: 8px 24px 26px;
}

.app .cr-advisor {
  border: 2px solid #e8a91f;
  border-left: 7px solid #ffbd2e;
  border-radius: 17px;
  background: linear-gradient(180deg, #162740f2, #0a1526f2);
  box-shadow: 0 5px 0 #744809, 0 16px 34px rgba(0,0,0,.42);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app .cr-advisor-copy span {
  color: #ffc743;
}

.app .cr-advisor-copy small {
  color: #cbd8e8;
}

.app .cr-advisor-toggle {
  border: 1px solid rgba(255,255,255,.18);
  background: #ffffff16;
}

.app .cr-brief-tip,
.app .cr-tour-tip,
.app .cr-next-rank,
.app .cr-challenge-hero,
.app .cr-level-card,
.app .receipt {
  border: 2px solid #dec9a2 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffef8, #f0e2c7) !important;
  box-shadow: 0 3px 0 #b39a70;
}

.app .receipt-row.net.good {
  border: 1px solid #84c69a;
  background: linear-gradient(180deg, #e4f7e7, #c8ebd0);
}

.app .receipt-row.net.bad {
  border: 1px solid #e7a09d;
  background: linear-gradient(180deg, #ffe4df, #f5c8c5);
}

.app .toast {
  border: 2px solid #d9a029;
  background: linear-gradient(180deg, #fff9e9, #ffe1a1);
  box-shadow: 0 3px 0 #8d5a13, 0 10px 20px rgba(0,0,0,.25);
}

.app .coach {
  border: 3px solid var(--ui-yellow);
  outline: 3px solid rgba(255,248,233,.92);
  outline-offset: -7px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fffaf0, #f6e7c9);
  box-shadow: 0 5px 0 #8a570f, 0 16px 34px rgba(0,0,0,.36);
}

.app .coach-count,
.app .intro-tag {
  border: 1px solid #bd720c;
  background: linear-gradient(180deg, #ffd966, #ffb21d);
  box-shadow: 0 2px 0 #8b5409;
}

/* Landing gets the same hand-built game framing without replacing its artwork. */
.landing-card {
  border: 3px solid #e4a31d;
  outline: 3px solid rgba(255,248,233,.9);
  outline-offset: -7px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 0, rgba(255,197,57,.17), transparent 34%),
    linear-gradient(180deg, #fffaf0, #f4e4c5);
  box-shadow: 0 7px 0 #704408, 0 28px 60px rgba(0,0,0,.58);
}

.landing-play {
  border-color: #754508;
  background: linear-gradient(180deg, #ffe779, #ffba27 54%, #ec8f0c);
  box-shadow: 0 8px #7f4a07, 0 18px 34px #0009;
}

@media (max-width: 920px) {
  .app .hud {
    border-radius: 15px;
  }

  .app .action-bar {
    border-radius: 14px;
  }

  .app .action-bar > button {
    min-height: 44px;
  }

  .app .modal.wide,
  .app .cr-career-panel {
    width: min(720px, 100%);
  }
}

@media (max-width: 820px) {
  .app .hud {
    gap: 5px;
    padding: 6px;
    border-width: 2px;
  }

  .app .hud-card {
    min-height: 51px;
    padding: 5px 8px;
    border-top-width: 4px;
    box-shadow: 0 2px 0 #a89167, 0 4px 8px rgba(0,0,0,.18);
  }

  .app .hud-label { font-size: 8px; }
  .app .hud-value { font-size: 13px; }

  .app .action-bar {
    padding: 6px 7px max(8px, env(safe-area-inset-bottom));
  }

  .app .action-bar > button {
    min-height: 44px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .app .action-bar > button::before {
    width: 21px;
    height: 21px;
    font-size: 13px;
  }

  .app .job-stack {
    width: min(240px, 67vw);
  }

  .app .modal-backdrop,
  .app .cr-career-backdrop,
  .app .cr-brief-backdrop,
  .app .tow-finance-backdrop,
  .app .tow-story-intro,
  .app .intro-backdrop {
    padding: 9px;
  }

  .app .modal,
  .app .modal.wide,
  .app .cr-career-panel,
  .app .cr-brief-card,
  .app .cr-tour-card,
  .app .tow-finance-card,
  .app .tow-story-card,
  .app .intro {
    max-height: calc(100dvh - 18px);
    border-radius: 20px !important;
    outline-width: 3px;
  }

  .app .modal {
    width: 100%;
    padding: 17px 14px;
  }

  .app .modal-head h2,
  .app .cr-career-panel h2 {
    font-size: 20px;
  }

  .app .modal-tabs,
  .app .cr-career-panel > nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .app .cr-career-panel > header,
  .app .cr-career-panel > nav,
  .app .cr-panel-content {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Final geometry lock: these values align the desktop controls with the
   1680x941 reference while preserving the compact breakpoints below. */
@media (min-width: 821px) {
  .app .hud {
    padding: 6px 170px 4px 12px;
  }

  .app .hud-card {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 7px;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    padding: 10px 9px;
    overflow: hidden;
  }

  .app .hud-card::before {
    width: 30px;
    font-size: 25px;
  }

  .app .hud-label {
    font-size: 9px;
  }

  .app .hud-value {
    font-size: 17px;
    white-space: nowrap;
  }

  .app .hud-card small,
  .app .hud-card .sub {
    overflow: hidden;
    font-size: 8.5px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app .action-bar {
    margin: 12px 24px 0;
  }
}

@media (max-width: 820px) {
  .app .hud-card {
    height: 58px;
    min-height: 58px;
    max-height: 58px;
  }
}

/* Guided-tour overlay: the layer itself must stay transparent. Only the four
   shade pieces dim the world. Otherwise action-required steps (Brand) hide
   their children but leave a full-screen blur over the opened modal. */
body .cr-tour-layer {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body .cr-tour-shade {
  background: rgba(19, 38, 34, .5) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body .cr-tour-action-open {
  background: transparent !important;
}

/* -------------------------------------------------------------------------
   CALM EDITION
   The first pass used a dark navy shell around the HUD. That separated the
   controls too aggressively from the bright isometric world. This layer keeps
   the playful tycoon shapes while moving every large surface to warm paper,
   sand and muted construction-yellow tones.                                    */

:root {
  --ui-ink: #283238;
  --ui-muted: #6f746e;
  --ui-cream: #fbf4e4;
  --ui-cream-2: #efe2c8;
  --ui-paper: #fffdf7;
  --ui-line: #cdbb97;
  --ui-shadow: rgba(58, 46, 25, .2);
}

.app .hud,
.app .action-bar {
  border: 1px solid rgba(133, 96, 37, .58);
  background: rgba(252, 246, 231, .94);
  box-shadow:
    0 5px 18px rgba(52, 43, 25, .18),
    inset 0 1px rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
  backdrop-filter: blur(8px) saturate(.9);
}

.app .hud {
  border-radius: 15px;
}

.app .hud-card {
  min-height: 56px;
  border: 1px solid #d4c39f;
  border-top: 3px solid var(--ui-blue);
  border-radius: 11px;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 2px 5px rgba(71, 55, 27, .13);
}

.app .hud-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(71, 55, 27, .16);
}

.app .hud-card:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(71, 55, 27, .13);
}

.app .hud-card.money,
.app .hud-card.money.release-debt-cash {
  border-color: #d1a43f !important;
  border-top-color: #e7a714 !important;
  background: #fff4c9 !important;
}

.app .hud-card.money.release-debt-cash {
  border-color: #bf625b !important;
  border-top-color: #d74741 !important;
  background: #fde1dc !important;
}

.app .hud-label {
  color: #77736a;
  letter-spacing: .68px;
}

.app .hud-value {
  color: #263139;
}

.app .icon-btn {
  border: 1px solid #c5932c;
  background: #ffd66a;
  box-shadow: 0 2px 5px rgba(82, 56, 10, .2);
}

.app .action-bar {
  padding: 7px 9px 9px;
  border-radius: 14px;
}

.app .action-bar > button {
  border: 1px solid #d2c09e;
  border-bottom-color: #b9a57f;
  background: #fffdf7;
  box-shadow: 0 2px 4px rgba(73, 56, 26, .13);
}

.app .action-bar > button:hover {
  border-color: #d1a342;
  background: #fff2c9;
}

.app .action-bar > button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(73, 56, 26, .14);
}

.app .action-bar > button::before {
  background: #f6ecd7;
  box-shadow: inset 0 0 0 1px rgba(91, 68, 26, .1);
}

.app .cr-operation-nav {
  border-color: #aa93d4 !important;
  background: #eee7f8 !important;
  box-shadow: 0 2px 4px rgba(76, 52, 116, .14) !important;
}

.app .status-pill {
  border: 1px solid #2f8050;
  background: #55a873;
  box-shadow: 0 2px 5px rgba(25, 89, 49, .18);
}

.app .job-card {
  border-width: 2px;
  background: #fffaf0;
  box-shadow: 0 5px 15px rgba(54, 40, 17, .2);
}

.app .modal-backdrop,
.app .confirm-backdrop,
.app .guide-backdrop,
.app .achievements-backdrop,
.app .summary-backdrop {
  background: rgba(34, 31, 24, .48);
  -webkit-backdrop-filter: blur(2px) saturate(.92);
  backdrop-filter: blur(2px) saturate(.92);
}

.app .modal,
.app .confirm-box,
.app .guide,
.app .achievements-panel,
.app .summary {
  border: 2px solid #d4a442;
  outline: 1px solid rgba(255,255,255,.78);
  outline-offset: -5px;
  background: #fbf4e4;
  box-shadow: 0 16px 40px rgba(35, 29, 18, .28);
}

.app .modal-head > button,
.app .guide-head > button,
.app .achievements-panel > header > button,
.app .summary > header > button {
  border: 1px solid #c08a23 !important;
  background: #ffd467 !important;
  box-shadow: 0 2px 4px rgba(87, 57, 7, .18) !important;
}

.app .modal-tabs button,
.app .filter-tabs button,
.app .tab-row button {
  border-width: 1px;
  background: #f7efdf;
  box-shadow: 0 1px 3px rgba(78, 59, 27, .12);
}

.app .modal-tabs button.active,
.app .filter-tabs button.active,
.app .tab-row button.active {
  background: #ffd369;
  box-shadow: 0 2px 4px rgba(98, 62, 5, .16);
}

.app .cr-advisor {
  border: 1px solid #c99a3a;
  border-left: 6px solid #e9ad2f;
  background: #fff2cf;
  box-shadow: 0 5px 14px rgba(72, 51, 16, .16);
}

.app .cr-advisor-copy span {
  color: #8a5708;
}

.app .cr-advisor-copy small {
  color: #62645f;
}

.app .cr-advisor-toggle {
  border: 1px solid #d9bd82;
  background: rgba(255,255,255,.54);
}

body .cr-career-backdrop,
body .cr-brief-backdrop,
body .tow-finance-backdrop,
body .tow-story-intro {
  background: rgba(34, 31, 24, .48) !important;
  -webkit-backdrop-filter: blur(2px) saturate(.92);
  backdrop-filter: blur(2px) saturate(.92);
}

body .cr-career-panel,
body .cr-brief-card,
body .cr-tour-card,
body .tow-finance-card,
body .tow-story-card {
  border: 2px solid #d4a442 !important;
  outline: 1px solid rgba(255,255,255,.78) !important;
  outline-offset: -5px !important;
  background: #fbf4e4 !important;
  box-shadow: 0 16px 40px rgba(35, 29, 18, .28) !important;
}

body .cr-career-panel > header > button,
body .cr-career-panel > header button[data-cr-close] {
  border: 1px solid #c08a23 !important;
  background: #ffd467 !important;
  box-shadow: 0 2px 4px rgba(87, 57, 7, .18) !important;
}

body .cr-career-panel > nav button {
  border-width: 1px !important;
  background: #f7efdf !important;
  box-shadow: 0 1px 3px rgba(78, 59, 27, .12) !important;
}

body .cr-career-panel > nav button.active {
  background: #ffd369 !important;
  box-shadow: 0 2px 4px rgba(98, 62, 5, .16) !important;
}

body .cr-advisor {
  border: 1px solid #c99a3a !important;
  border-left: 6px solid #e9ad2f !important;
  background: rgba(255, 246, 218, .96) !important;
  box-shadow: 0 5px 14px rgba(72, 51, 16, .16) !important;
  color: #2d3538 !important;
}

body .cr-advisor-copy span {
  color: #875508 !important;
}

body .cr-advisor-copy small {
  color: #62645f !important;
}

body .cr-advisor-action {
  border: 1px solid #bd8420 !important;
  background: #ffd264 !important;
  box-shadow: 0 2px 4px rgba(87, 57, 7, .16) !important;
  color: #3b2b0c !important;
}

body .cr-advisor-toggle {
  border: 1px solid #ccb171 !important;
  background: #f1e4c5 !important;
  color: #4e4b43 !important;
}

body .cr-career-launch,
body .language-toggle,
body .cr-streak-pill {
  border: 1px solid #bc8a2b !important;
  background: rgba(255, 246, 218, .95) !important;
  box-shadow: 0 3px 9px rgba(70, 49, 14, .17) !important;
  color: #4a3712 !important;
}

body .cr-tech-card,
body .cr-contract,
body .cr-shift-offers article,
.app .build-card,
.app .upgrade-card,
.app .fleet-row,
.app .ach-row,
.app .quest-card {
  background: #fffdf7 !important;
  box-shadow: 0 2px 6px rgba(66, 47, 17, .11) !important;
}

@media (max-width: 820px) {
  .app .hud,
  .app .action-bar {
    background: rgba(252, 246, 231, .97);
  }

  .app .hud-card {
    box-shadow: 0 1px 3px rgba(71, 55, 27, .12);
  }
}

/* -------------------------------------------------------------------------
   REFERENCE MATCH · airy, bright management-game chrome
   Individual white controls float directly over the world. Teal carries the
   secondary actions; construction orange marks the primary action.              */

:root {
  --tc-teal: #168ba6;
  --tc-teal-dark: #0e687d;
  --tc-orange: #ffae22;
  --tc-orange-dark: #db8211;
  --tc-blue-ink: #29405e;
  --tc-card: rgba(255, 253, 248, .96);
  --tc-card-line: rgba(92, 112, 102, .18);
  --tc-soft-shadow: 0 7px 18px rgba(43, 72, 62, .17);
}

body {
  color: var(--tc-blue-ink);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

.app canvas {
  filter: saturate(1.1) brightness(1.035) contrast(.98);
}

/* The reference has no large backing plate around the top row. */
.app .hud {
  position: relative;
  gap: 8px;
  padding: 10px 142px 4px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app .hud-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  min-width: 106px;
  flex: 1 1 106px;
  min-height: 72px;
  padding: 12px 12px 10px 10px;
  overflow: visible;
  border: 1px solid var(--tc-card-line);
  border-top: 1px solid var(--tc-card-line);
  border-radius: 16px;
  background: var(--tc-card);
  box-shadow: var(--tc-soft-shadow);
}

.app .hud-card::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 36px;
  color: var(--tc-teal);
  font-size: 27px;
  line-height: 1;
  text-align: center;
  filter: saturate(.92);
}

.app .hud-card:nth-child(1)::before { content: "📅"; }
.app .hud-card:nth-child(2)::before { content: "🕘"; }
.app .hud-card:nth-child(3)::before { content: "💵"; }
.app .hud-card:nth-child(4)::before { content: "⛽"; }
.app .hud-card:nth-child(5)::before { content: "🛻"; }
.app .hud-card:nth-child(6)::before { content: "🅿️"; }
.app .hud-card:nth-child(7)::before { content: "⭐"; }
.app .hud-card:nth-child(8)::before { content: "💼"; }

.app .hud-card > * {
  grid-column: 2;
}

.app .hud-card:hover {
  transform: translateY(-2px);
  border-color: rgba(24, 139, 166, .3);
  box-shadow: 0 9px 22px rgba(43, 72, 62, .2);
}

.app .hud-card:active {
  transform: translateY(0);
  box-shadow: 0 4px 11px rgba(43, 72, 62, .16);
}

.app .hud-card.money,
.app .hud-card.money.release-debt-cash {
  border-color: var(--tc-card-line) !important;
  border-top-color: var(--tc-card-line) !important;
  background: var(--tc-card) !important;
}

.app .hud-card.money.release-debt-cash {
  border-color: rgba(214, 65, 64, .36) !important;
  background: rgba(255, 243, 239, .97) !important;
}

.app .hud-card.money.release-debt-cash .hud-label,
.app .hud-card.money.release-debt-cash .hud-value,
.app .hud-card.money.release-debt-cash small {
  color: #973e3c !important;
}

.app .hud-card:nth-child(3) {
  min-width: 138px;
  flex-grow: 1.15;
}

.app .hud-card:nth-child(3) .hud-label {
  font-size: 8px;
  white-space: nowrap;
}

.app .hud-card:nth-child(3) .hud-value {
  font-size: 16px;
  white-space: nowrap;
}

.app .hud-label {
  align-self: end;
  color: #34506a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.05px;
  line-height: 1.1;
}

.app .hud-value {
  align-self: start;
  color: var(--tc-blue-ink);
  font-family: "Arial Rounded MT Bold", "Arial Black", "Trebuchet MS", sans-serif;
  font-size: 18px;
  line-height: 1.14;
}

.app .hud-card small,
.app .hud-card .sub {
  color: #557084;
}

.app .hud-icons {
  position: absolute;
  top: 10px;
  right: 12px;
  margin-left: auto;
  padding: 1px 4px 0 8px;
}

.app .icon-btn {
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  box-shadow: var(--tc-soft-shadow);
  color: var(--tc-teal-dark);
  font-size: 21px;
}

.app .icon-btn:hover {
  border-color: rgba(24,139,166,.28);
  background: #fff;
  transform: translateY(-1px);
}

/* White segmented menu with an orange Operations action. */
.app .action-bar {
  width: max-content;
  max-width: calc(100vw - 24px);
  gap: 0;
  margin: 8px 12px 0;
  padding: 4px;
  overflow: visible;
  border: 1px solid rgba(92, 112, 102, .18);
  border-radius: 15px;
  background: rgba(255, 253, 248, .93);
  box-shadow: var(--tc-soft-shadow);
  -webkit-backdrop-filter: blur(7px) saturate(.92);
  backdrop-filter: blur(7px) saturate(.92);
}

.app .action-bar > button {
  min-height: 48px;
  padding: 9px 16px;
  border: 0;
  border-right: 1px solid #e7e0d3;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: #176477;
  font-size: 13px;
  font-weight: 900;
}

.app .action-bar > button:last-child {
  border-right: 0;
}

.app .action-bar > button:hover {
  border-color: #e7e0d3;
  background: #f3f9f7;
  box-shadow: none;
  transform: none;
}

.app .action-bar > button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.app .action-bar > button::before {
  width: 28px;
  height: 28px;
  margin-right: 5px;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 20px;
}

.app .cr-operation-nav {
  position: relative;
  margin-left: 12px;
  border: 2px solid rgba(255,255,255,.9) !important;
  border-radius: 13px !important;
  background: var(--tc-orange) !important;
  box-shadow: 0 4px 10px rgba(186, 107, 4, .24) !important;
  color: #fff !important;
}

.app .cr-operation-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  background: var(--tc-orange);
  transform: translateX(-50%) rotate(45deg);
}

.app .pip {
  border: 2px solid #fff;
  background: #ed4850;
  box-shadow: 0 2px 5px rgba(119, 25, 33, .22);
}

.app .status-pill {
  border: 1px solid rgba(24,139,166,.26);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(43,72,62,.14);
  color: var(--tc-teal-dark);
}

.app .status-pill.bad {
  display: none;
}

/* Requests use the same clean card language; no folded-paper decoration. */
.app .job-stack {
  width: 258px;
}

.app .job-card {
  gap: 9px;
  padding: 15px;
  border: 2px solid rgba(255, 174, 34, .72);
  border-radius: 17px;
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 9px 22px rgba(43,72,62,.2);
}

.app .job-card::after {
  display: none;
}

.app .job-card header {
  color: #417083;
}

.app .job-card dl {
  border: 1px solid rgba(70, 111, 119, .16);
  background: #f6faf7;
}

.app .job-life,
.app .quest-bar,
.app .cr-progress,
.app .fuel-bar,
.app .cond-bar {
  border: 0;
  background: #dfe7e5;
  box-shadow: inset 0 1px 2px rgba(28,66,72,.1);
}

.app .job-life span,
.app .quest-bar i,
.app .cr-progress i,
.app .fuel-bar i {
  background: linear-gradient(90deg, #1aa0bb, #54c1cc);
  box-shadow: none;
}

.app .btn-primary,
.app .cr-primary,
.app [data-cr-start-shift],
.app [data-cr-start-challenge],
.app .cr-advisor-action {
  border: 1px solid var(--tc-orange-dark);
  background: var(--tc-orange);
  box-shadow: 0 3px 8px rgba(186,107,4,.22);
  color: #593808;
}

.app .btn-ghost {
  border: 1px solid #d8d7ce;
  background: #fffdf8;
  box-shadow: 0 2px 5px rgba(52,63,58,.12);
}

/* Dialogs: clean white sheets, teal structure, orange actions. */
.app .modal,
.app .confirm-box,
.app .guide,
.app .achievements-panel,
.app .summary,
body .cr-career-panel,
body .cr-brief-card,
body .cr-tour-card,
body .tow-finance-card,
body .tow-story-card {
  border: 2px solid rgba(24,139,166,.42) !important;
  outline: 4px solid rgba(255,255,255,.9) !important;
  outline-offset: -7px !important;
  border-radius: 22px !important;
  background: rgba(255,253,248,.98) !important;
  box-shadow: 0 18px 44px rgba(31,61,56,.28) !important;
}

.app .modal-head,
body .cr-career-panel > header {
  border-bottom-color: #dce9e5 !important;
}

.app .modal-head > button,
.app .guide-head > button,
.app .achievements-panel > header > button,
.app .summary > header > button,
body .cr-career-panel > header > button,
body .cr-career-panel > header button[data-cr-close] {
  border: 1px solid #d8d9d1 !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(40,66,60,.14) !important;
  color: var(--tc-teal-dark) !important;
}

.app .modal-tabs button,
.app .filter-tabs button,
.app .tab-row button,
body .cr-career-panel > nav button {
  border: 1px solid #dce5e1 !important;
  background: #f4f8f5 !important;
  box-shadow: none !important;
  color: #5d6f73 !important;
}

.app .modal-tabs button.active,
.app .filter-tabs button.active,
.app .tab-row button.active,
body .cr-career-panel > nav button.active {
  border-color: var(--tc-orange-dark) !important;
  background: var(--tc-orange) !important;
  box-shadow: 0 3px 7px rgba(186,107,4,.2) !important;
  color: #fff !important;
}

body .cr-tech-card,
body .cr-contract,
body .cr-shift-offers article,
.app .build-card,
.app .upgrade-card,
.app .fleet-row,
.app .ach-row,
.app .quest-row {
  border-color: #dfe6e2 !important;
  border-left-color: #55b9c8 !important;
  background: #fffdf8 !important;
  box-shadow: 0 3px 8px rgba(42,66,61,.1) !important;
}

/* The bottom assistant is a wide floating white card in the reference. */
body .cr-advisor {
  left: 50% !important;
  width: min(660px, calc(100vw - 320px)) !important;
  min-height: 84px;
  padding: 12px 14px !important;
  border: 2px solid rgba(24,139,166,.32) !important;
  border-left: 2px solid rgba(24,139,166,.32) !important;
  border-radius: 18px !important;
  background: rgba(255,253,248,.97) !important;
  box-shadow: 0 10px 25px rgba(39,68,61,.22) !important;
  color: var(--tc-blue-ink) !important;
  transform: translateX(-50%) !important;
}

body .cr-advisor-icon {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  border: 3px solid #42a9c5 !important;
  border-radius: 50% !important;
  background: #e8f7fb !important;
  box-shadow: inset 0 0 0 3px #fff, 0 3px 8px rgba(31,106,125,.16) !important;
  font-size: 29px !important;
}

body .cr-advisor-copy span {
  color: #2389aa !important;
}

body .cr-advisor-copy small {
  color: #617087 !important;
}

body .cr-advisor-action {
  min-width: 130px;
  min-height: 48px;
  border: 1px solid var(--tc-orange-dark) !important;
  border-radius: 11px !important;
  background: var(--tc-orange) !important;
  box-shadow: 0 3px 8px rgba(186,107,4,.22) !important;
  color: #583806 !important;
}

body .cr-advisor-toggle {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid #d8dfdc !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: 0 3px 8px rgba(42,66,61,.12) !important;
  color: var(--tc-teal-dark) !important;
}

body .cr-career-launch,
body .language-toggle {
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  background: var(--tc-teal) !important;
  box-shadow: 0 5px 13px rgba(10,101,122,.22) !important;
  color: #fff !important;
}

body .cr-streak-pill {
  border: 2px solid rgba(255,255,255,.85) !important;
  border-radius: 999px !important;
  background: var(--tc-teal) !important;
  box-shadow: 0 5px 13px rgba(10,101,122,.22) !important;
  color: #fff !important;
}

@media (max-width: 1120px) {
  .app .hud {
    gap: 6px;
    padding-right: 116px;
  }

  .app .hud-card {
    grid-template-columns: 29px 1fr;
    min-width: 88px;
    flex-basis: 88px;
    min-height: 64px;
    padding: 9px 8px;
  }

  .app .hud-card::before {
    width: 28px;
    font-size: 22px;
  }

  .app .hud-value {
    font-size: 15px;
  }

  .app .action-bar > button {
    padding: 8px 11px;
  }

  .app .hud-icons {
    right: 7px;
  }

  body .cr-advisor {
    width: min(650px, calc(100vw - 250px)) !important;
  }
}

@media (max-width: 820px) {
  .app .hud {
    padding: 7px 102px 2px 7px;
    overflow-x: auto;
    background: transparent;
  }

  .app .hud-card {
    grid-template-columns: 24px 1fr;
    min-width: 86px;
    flex: 0 0 86px;
    min-height: 58px;
    padding: 7px 8px;
    border-radius: 13px;
  }

  .app .hud-card::before {
    width: 24px;
    font-size: 19px;
  }

  .app .hud-label {
    font-size: 8px;
  }

  .app .hud-value {
    font-size: 13px;
  }

  .app .hud-icons {
    padding-left: 2px;
  }

  .app .icon-btn {
    width: 44px;
    height: 44px;
  }

  .app .action-bar {
    max-width: calc(100vw - 14px);
    margin: 6px 7px 0;
    overflow-x: auto;
  }

  .app .action-bar > button {
    min-width: max-content;
  }

  .app .cr-operation-nav {
    margin-left: 5px;
  }

  body .cr-advisor {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-height: 70px;
    transform: none !important;
  }

  body .cr-advisor-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 23px !important;
  }
}

@media (max-width: 430px) {
  .app .hud-card {
    min-width: 80px;
  }

  body .cr-advisor-icon {
    display: none !important;
  }

  body .cr-advisor-action {
    min-width: 100px;
  }
}

/* Pixel-layout pass based on the approved reference proportions. */
@media (min-width: 821px) {
  .app .hud-card {
    min-width: 88px;
    flex-grow: 0;
    flex-shrink: 1;
  }

  .app .hud-card:nth-child(1) { flex-basis: clamp(104px, 7.5vw, 126px); }
  .app .hud-card:nth-child(2) { flex-basis: clamp(118px, 9.2vw, 156px); }
  .app .hud-card:nth-child(3) { flex-basis: clamp(138px, 10.6vw, 180px); }
  .app .hud-card:nth-child(4) { flex-basis: clamp(145px, 11.3vw, 190px); }
  .app .hud-card:nth-child(5) { flex-basis: clamp(105px, 8vw, 136px); }
  .app .hud-card:nth-child(6) { flex-basis: clamp(115px, 9.1vw, 155px); }
  .app .hud-card:nth-child(7) { flex-basis: clamp(140px, 10.8vw, 183px); }
  .app .hud-card:nth-child(8) { flex-basis: clamp(108px, 8vw, 136px); }

  .app .hud-card:nth-child(3) { flex-grow: 0; }
}

.app .hud-icons {
  gap: 10px;
}

.app .icon-btn {
  width: 64px;
  height: 64px;
  font-size: 25px;
}

.app .action-bar {
  min-height: 62px;
}

.app .action-bar > button {
  min-height: 54px;
  padding-inline: clamp(12px, 1.1vw, 18px);
  font-size: 14px;
}

.app .cr-operation-nav {
  min-width: clamp(125px, 9.7vw, 164px);
}

.app .action-bar > button:nth-child(1)::before { content: "📋"; }
.app .action-bar > button:nth-child(2)::before { content: "✅"; }
.app .action-bar > button:nth-child(3)::before { content: "👷"; }
.app .action-bar > button:nth-child(4)::before { content: "👥"; }
.app .action-bar > button:nth-child(5)::before { content: "📈"; }
.app .action-bar > button:nth-child(6)::before { content: "🏠"; }
.app .action-bar > button:nth-child(7)::before { content: "🎨"; }

body .cr-streak-pill {
  top: 118px !important;
  min-height: 46px;
  padding: 10px 17px !important;
  font-size: 14px !important;
}

body .cr-advisor {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) auto 50px !important;
  column-gap: 14px !important;
  align-items: center !important;
  min-height: 100px;
  padding: 12px 14px !important;
}

body .cr-advisor-icon {
  grid-column: 1;
  width: 68px !important;
  height: 68px !important;
  flex-basis: 68px !important;
}

body .cr-advisor-copy {
  grid-column: 2;
  min-width: 0;
  padding-right: 6px;
}

body .cr-advisor-copy span,
body .cr-advisor-copy b,
body .cr-advisor-copy small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .cr-advisor-copy span {
  font-size: 10px !important;
  letter-spacing: .72px !important;
}

body .cr-advisor-copy b {
  color: var(--tc-blue-ink) !important;
  font-size: 17px !important;
  line-height: 1.22 !important;
}

body .cr-advisor-copy small {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

body .cr-advisor-action {
  grid-column: 3;
}

body .cr-advisor-toggle {
  grid-column: 4;
}

body:has(.coach) .cr-advisor,
body:has(.intro-backdrop) .cr-advisor,
body:has(.tow-story-intro) .cr-advisor {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1120px) and (min-width: 821px) {
  .app .icon-btn {
    width: 54px;
    height: 54px;
    font-size: 21px;
  }

  .app .action-bar > button {
    padding-inline: 10px;
    font-size: 12px;
  }

  body .cr-advisor {
    grid-template-columns: 62px minmax(0, 1fr) auto 46px !important;
    width: min(630px, calc(100vw - 280px)) !important;
  }

  body .cr-advisor-icon {
    width: 60px !important;
    height: 60px !important;
  }
}

@media (max-width: 820px) {
  .app .icon-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  body .cr-advisor {
    grid-template-columns: 50px minmax(0, 1fr) 42px !important;
    gap: 9px !important;
    min-height: 72px;
    padding: 9px !important;
  }

  body .cr-advisor-icon {
    grid-column: 1;
    width: 48px !important;
    height: 48px !important;
  }

  body .cr-advisor-copy {
    grid-column: 2;
  }

  body .cr-advisor-action {
    grid-column: 2 / 4;
  }

  body .cr-advisor-toggle {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 430px) {
  .app .hud-card {
    min-width: 55px;
  }

  .app .hud-icons {
    gap: 5px;
  }

  .app .icon-btn {
    width: 42px;
    height: 42px;
  }

  .app .job-card {
    padding: 11px;
    border-radius: 15px;
  }

  .app .quest-row,
  .app .upgrade-row,
  .app .fleet-row,
  .app .ach-row,
  .app .cr-contract {
    padding: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app .hud-card:hover,
  .app .action-bar > button:hover {
    transform: none;
  }
}

/* Retention and finance panels are mounted beside .app, so they need an
   unscoped cascade layer as well. */
body .cr-career-backdrop,
body .cr-brief-backdrop,
body .tow-finance-backdrop,
body .tow-story-intro {
  background: rgba(8,14,23,.76) !important;
  -webkit-backdrop-filter: blur(5px) saturate(.78);
  backdrop-filter: blur(5px) saturate(.78);
}

body .cr-career-panel,
body .cr-brief-card,
body .cr-tour-card,
body .tow-finance-card,
body .tow-story-card {
  border: 3px solid var(--ui-yellow) !important;
  outline: 4px solid rgba(255,248,233,.94) !important;
  outline-offset: -8px !important;
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 12% 0, rgba(255,203,76,.16), transparent 30%),
    linear-gradient(180deg, #fffaf0, #f8ecd6) !important;
  color: var(--ui-ink) !important;
  box-shadow:
    0 7px 0 #8d570e,
    0 24px 58px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(153,99,18,.22) !important;
}

body .cr-career-panel {
  width: min(920px, 100%) !important;
}

body .cr-career-panel > header {
  padding: 20px 24px 12px !important;
  border-bottom: 2px solid #ead5ad !important;
}

body .cr-career-panel h2,
body .cr-brief-card h2,
body .cr-tour-card h2,
body .tow-story-card h2,
body .tow-finance-card h2 {
  color: var(--ui-ink) !important;
  font-family: "Arial Black", "Trebuchet MS", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.45px !important;
  text-shadow: 0 1px #fff;
}

body .cr-career-panel > header > button,
body .cr-career-panel > header button[data-cr-close] {
  width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border: 2px solid #9f650d !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #ffe37a, #ffb52b) !important;
  box-shadow: 0 4px 0 #794909, 0 6px 12px rgba(0,0,0,.22) !important;
  color: #17202b !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
}

body .cr-career-panel > nav {
  gap: 7px !important;
  padding: 12px 24px 14px !important;
  border-bottom: 1px solid #e2cfaa !important;
}

body .cr-career-panel > nav button {
  min-height: 42px !important;
  padding: 8px 14px !important;
  border: 2px solid #dac8a5 !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #fffef9, #ebddc3) !important;
  box-shadow: 0 3px 0 #aa9167 !important;
  color: #56606d !important;
  font-weight: 900 !important;
}

body .cr-career-panel > nav button.active {
  border-color: #cd7c0a !important;
  background: linear-gradient(180deg, #ffd968, #ffae1b) !important;
  box-shadow: 0 3px 0 #8c5308 !important;
  color: #302105 !important;
}

body .cr-panel-content {
  padding: 8px 24px 26px !important;
}

body .cr-tech-grid,
body .cr-shift-offers,
body .cr-contracts {
  gap: 12px !important;
}

body .cr-tech-card,
body .cr-contract,
body .cr-shift-offers article {
  padding: 14px !important;
  border: 2px solid #d9c6a0 !important;
  border-left: 7px solid var(--ui-blue) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #fffef9, #f5e9d3) !important;
  box-shadow: 0 3px 0 #b49d76, 0 7px 13px rgba(66,47,17,.12) !important;
}

body .cr-tech-card:nth-child(4n+2),
body .cr-contract:nth-child(4n+2) { border-left-color: var(--ui-green) !important; }
body .cr-tech-card:nth-child(4n+3),
body .cr-contract:nth-child(4n+3) { border-left-color: var(--ui-orange) !important; }
body .cr-tech-card:nth-child(4n),
body .cr-contract:nth-child(4n) { border-left-color: var(--ui-purple) !important; }

body .cr-tech-card h3,
body .cr-contract h3,
body .cr-shift-offers h3 {
  color: #1e2733 !important;
  font-family: "Arial Black", "Trebuchet MS", sans-serif !important;
}

body .cr-tech-icon,
body .cr-brief-icon,
body .cr-tour-head > span {
  border: 2px solid #e4b349 !important;
  background: linear-gradient(180deg, #fff6d7, #ffd566) !important;
  box-shadow: 0 3px 0 #a87517 !important;
}

body .cr-brief-tip,
body .cr-tour-tip,
body .cr-next-rank,
body .cr-challenge-hero,
body .cr-level-card,
body .cr-stat-grid > div,
body .cr-long-goals > div,
body .cr-manager-steps > div {
  border: 2px solid #dec9a2 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fffef8, #f0e2c7) !important;
  box-shadow: 0 3px 0 #b39a70 !important;
}

body .cr-primary,
body [data-cr-start-shift],
body [data-cr-start-challenge] {
  border: 2px solid #c9780e !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #ffd75c, #ffae1c) !important;
  box-shadow: 0 4px 0 #8f560c !important;
  color: #362507 !important;
  font-weight: 900 !important;
}

@media (max-width: 820px) {
  body .cr-career-backdrop,
  body .cr-brief-backdrop,
  body .tow-finance-backdrop,
  body .tow-story-intro {
    padding: 9px !important;
  }

  body .cr-career-panel,
  body .cr-brief-card,
  body .cr-tour-card,
  body .tow-finance-card,
  body .tow-story-card {
    max-height: calc(100dvh - 18px) !important;
    border-radius: 20px !important;
    outline-width: 3px !important;
  }

  body .cr-career-panel > header,
  body .cr-career-panel > nav,
  body .cr-panel-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body .cr-career-panel > nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}