/* Final Shipment UI overhaul — intentionally loaded after the legacy sheet. */
:root {
  color-scheme: dark;
  --ink: #f7f2e8;
  --muted: #a9b5ae;
  --canvas: #07100d;
  --canvas-soft: #0b1713;
  --surface: rgba(17, 31, 26, 0.94);
  --surface-2: rgba(25, 43, 36, 0.92);
  --surface-3: #203d32;
  --line: rgba(208, 226, 218, 0.12);
  --line-strong: rgba(208, 226, 218, 0.22);
  --accent: #e9ad45;
  --accent-strong: #ffc85c;
  --accent-ink: #21180a;
  --green: #4fc38a;
  --red: #ee6b69;
  --blue: #66b9d7;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --radius: 18px;
  --radius-sm: 11px;
  --content: 1560px;
}

html {
  min-width: 0;
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 2%, rgba(233, 173, 69, 0.09), transparent 26rem),
    radial-gradient(circle at 88% 16%, rgba(79, 195, 138, 0.07), transparent 34rem),
    linear-gradient(145deg, #07100d 0%, #0a1712 48%, #07100d 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, select, input[type="checkbox"] { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid rgba(255, 200, 92, 0.7);
  outline-offset: 3px;
}

#game-container { min-width: 0; }

header {
  padding: 10px clamp(14px, 2.4vw, 38px) 12px;
  gap: 10px;
  background: rgba(7, 16, 13, 0.88);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(130%);
}

body.start-screen-active header {
  position: absolute;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.start-screen-active nav#main-menu,
body.start-screen-active #hamburger-menu,
body.start-screen-active #top-bar {
  display: none !important;
}

#top-bar {
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(155px, 1fr) repeat(5, max-content);
  align-items: center;
  gap: 8px;
}

#game-logo {
  width: clamp(150px, 18vw, 250px);
  height: 46px;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

#top-bar span {
  position: static;
  top: auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#top-bar #money,
#top-bar #bank-balance { color: var(--accent-strong); }
#top-bar #player-name { color: var(--ink); }

nav#main-menu,
body.game-started nav#main-menu {
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
}

body.game-started nav#main-menu.hidden { display: none; }

nav#main-menu button {
  min-width: 0;
  min-height: 43px;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: clamp(0.67rem, 0.75vw, 0.8rem);
  font-weight: 750;
  line-height: 1.15;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

nav#main-menu button .icon { margin: 0; font-size: 1.05rem; }
nav#main-menu button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
nav#main-menu button.active,
nav#main-menu button[aria-current="page"] {
  color: var(--accent-strong);
  background: rgba(233, 173, 69, 0.1);
  border-color: rgba(233, 173, 69, 0.24);
}

#save-game { color: var(--green) !important; }
#end-game { color: #f08a83 !important; }

#hamburger-menu {
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 15px;
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 800;
}

.page {
  width: min(100%, var(--content));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 46px) clamp(14px, 2.4vw, 38px) 64px;
  background-image: none !important;
  min-width: 0;
}

.page > h2 {
  margin: 0 0 24px;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.page > h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-top: 12px;
  border-radius: 99px;
  background: var(--accent);
}

.card,
.staff-card,
.drug-card,
.territory-card,
.shop-item,
.shop-gear-card,
.pawn-card,
.gear-card,
.henchmen-card,
.recruitment-agent-card,
.assistant-staff-card,
.lab-assistant-card,
.supply-runner-card {
  min-width: 0;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(27, 47, 39, 0.96), rgba(15, 29, 24, 0.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card h3, .staff-card h3, .drug-card h3, .territory-card h3 {
  color: var(--ink);
  letter-spacing: -0.015em;
}

.dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-grid > .card {
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 280px;
  padding: 20px;
  overflow: hidden;
}

#dashboard .dashboard-grid .card h3,
.category-header,
.territory-summary-header,
.pawn-header {
  color: var(--accent-strong);
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  padding: 0 0 12px;
  margin-bottom: 12px;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.inventory-row, .staff-row, .sales-report-item, .dealer-inventory-row {
  min-height: 38px;
  padding: 7px 0;
  border-color: var(--line);
}

.shop-menu, #staff-menu, .leaderboard-tabs {
  display: flex;
  width: 100%;
  gap: 8px;
  margin: 0 0 20px;
  padding: 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.shop-menu button, #staff-menu button, .leaderboard-tabs button {
  flex: 1 0 auto;
  min-height: 42px;
  margin: 0;
  padding: 9px 15px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-weight: 750;
  white-space: nowrap;
}

.shop-menu button:hover, #staff-menu button:hover, .leaderboard-tabs button:hover {
  color: var(--ink);
  background: rgba(255,255,255,.05);
}

.shop-menu button.active, #staff-menu button.active, .leaderboard-tabs button.active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(233,173,69,.18);
}

#shop-content, #staff-content, #territories-list, #drug-list { min-width: 0; }

button:not(#hamburger-menu):not(.dashboard-reorder-btn):not(.production-reorder-btn):not(.production-toggle-btn):not(.equipment-repair-btn):not(.smart-stock-btn) {
  border-radius: 9px;
}

.page button {
  min-height: 40px;
  font-weight: 750;
  transition: filter 150ms ease, background 150ms ease, border-color 150ms ease;
}

.page button:hover { transform: none; box-shadow: none; filter: brightness(1.1); }

.shop-buy-btn, .shop-action, .qty-btn, .chem-btn, .territory-assign-controls button,
#bank button, .settings-btn, #start-button, .pawn-sell-confirm {
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid transparent;
}

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 44px;
  max-width: 100%;
  color: var(--ink);
  background: rgba(5, 13, 10, 0.72);
  border: 1px solid var(--line-strong) !important;
  border-radius: 9px !important;
  padding: 9px 11px;
}

input::placeholder { color: #84928b; opacity: 1; }
select option { color: var(--ink); background: #13251e; }

.progress-bar, .gear-durability-bar, .progress-line-container {
  overflow: hidden;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--line);
  border-radius: 99px;
}

.bank-columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  height: auto !important;
}

#bank .bank-left, #bank .bank-right { min-width: 0; }
#bank .bank-deposit, #bank .bank-savings, #bank .bank-loan {
  min-width: 0;
  max-height: none;
  height: auto;
  padding: 20px;
}

#bank .bank-image { max-width: min(140px, 34%); height: auto; }
.deposit-controls, .savings-controls, .loan-form, .loan-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#bank input { flex: 1 1 170px; min-width: 0; margin: 0; }
#bank button { margin: 0; }

.territory-card, .drug-card { min-width: 0 !important; width: 100%; }
.drug-main-content { min-width: 0; }
.chemist-assignment-column, .production-lines-column, .drug-details { min-width: 0 !important; }

.staff-card, .chemist-staff-card, .dealer-staff-card, .supply-runner-staff-card,
.henchman-staff-card, .assistant-staff-card, .recruitment-agent-card {
  overflow: hidden;
}

.pawn-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .75fr) minmax(0, 1fr);
  min-width: 0;
  gap: 1px;
}

.pawn-column { min-width: 0; }
.pawn-row { height: auto; min-height: 44px; overflow: hidden; }

#leaderboard-tables, #start-leaderboard-table, #financial-record, #sales-report-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
}

table { width: 100%; border-collapse: collapse; }
th { color: var(--accent-strong); background: rgba(233,173,69,.08); }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line); }

#help details, #settings details, .settings-group {
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

#help summary, #settings summary { cursor: pointer; color: var(--ink); }
#help details p { color: #c4cec9; }

#settings.page.active { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 12px 22px; }
#settings > h2, #settings > .settings-btn { grid-column: 1 / -1; justify-self: start; }
#settings .donate-section {
  position: static;
  width: auto;
  transform: none;
  grid-column: 2;
  grid-row: 3 / span 6;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#settings .donate-section img { max-width: 100%; height: auto; }

#toast-container {
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  max-width: min(380px, calc(100vw - 24px));
}
.toast { border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* Start screen */
#start-screen.page.active {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  display: grid !important;
  grid-template-columns: minmax(300px, .82fr) minmax(480px, 1.18fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 10px clamp(28px, 5vw, 90px);
  padding: clamp(32px, 7vw, 90px) max(clamp(18px, 5vw, 88px), calc((100vw - 1560px) / 2));
  text-align: left;
  background:
    linear-gradient(90deg, rgba(7,16,13,.97) 0%, rgba(7,16,13,.82) 44%, rgba(7,16,13,.55) 100%),
    radial-gradient(circle at 75% 28%, rgba(233,173,69,.13), transparent 33rem) !important;
}

#start-screen .start-hero {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

#start-screen .start-hero::before {
  content: "STRATEGY  •  PRODUCTION  •  SURVIVAL";
  color: var(--accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .16em;
}

#start-screen #start-logo {
  width: min(100%, 600px);
  height: clamp(115px, 16vw, 210px);
  margin: 0;
  background-position: left center;
}

#start-screen .start-hero > p {
  max-width: 500px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

#player-input { width: min(100%, 440px); height: 48px; font-size: 1rem; }
#start-button { width: min(100%, 440px); height: 50px; min-height: 50px; font-size: 1rem; }
#name-error { width: min(100%, 440px); min-height: 24px; }

#start-leaderboards {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 0;
  max-height: min(760px, calc(100svh - 70px));
  padding: clamp(16px, 2vw, 26px);
  overflow: auto;
  background: rgba(16, 29, 24, .8);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

#start-leaderboards::before {
  content: "Global leaderboard";
  display: block;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -.02em;
}

.start-donate-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.start-donate-center { display: none; }
#start-extra-buttons { position: static; grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 10px; }
#start-extra-buttons button { min-height: 44px; padding: 8px 14px; font-size: .85rem; background: transparent; border: 1px solid var(--line-strong); }

@media (max-width: 1180px) {
  #top-bar { grid-template-columns: minmax(150px, 1fr) repeat(3, max-content); }
  #top-bar #player-name, #top-bar #bank-balance { display: none; }
  nav#main-menu button { flex-direction: column; }
  #bank .bank-columns { grid-template-columns: minmax(0, 1fr); }
  #bank .bank-left,
  #bank .bank-right { height: auto !important; min-height: 0; }
  #bank .bank-deposit,
  #bank .bank-savings,
  #bank .bank-loan { flex: 0 0 auto !important; }
  #settings.page.active { grid-template-columns: 1fr; }
  #settings .donate-section { grid-column: 1; grid-row: auto; }
}

@media (max-width: 900px) {
  #start-screen.page.active {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-content: start;
    padding-top: 44px;
    text-align: center;
  }
  #start-screen .start-hero, #start-extra-buttons, #start-leaderboards {
    grid-column: 1;
    grid-row: auto;
  }
  #start-screen .start-hero { align-items: center; }
  #start-screen #start-logo { margin: 0 auto; background-position: center; }
  #start-screen .start-hero > p { margin-inline: auto; }
  #player-input, #start-button, #name-error { margin-inline: auto; }
  #start-leaderboards { width: 100%; max-height: none; margin-top: 18px; text-align: left; }
  #start-extra-buttons { justify-content: center; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  body.leaderboards-active { overflow-y: auto; }
  #leaderboards.page { overflow-y: visible; }
  body.game-started { padding-bottom: env(safe-area-inset-bottom); }
  header {
    padding: 8px 12px 10px;
    max-height: 100svh;
    overflow-y: auto;
  }
  #top-bar, header.menu-open #top-bar, header.menu-closed #top-bar {
    display: grid !important;
    grid-template-columns: minmax(110px, 1fr) repeat(3, max-content);
    gap: 5px;
  }
  #game-logo { width: clamp(110px, 34vw, 160px); height: 39px; }
  #top-bar #player-name, #top-bar #bank-balance { display: none; }
  #top-bar span { min-height: 32px; padding: 5px 8px; font-size: .68rem; }
  #hamburger-menu { width: 100%; display: flex; }
  nav#main-menu, body.game-started nav#main-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 4px 0 6px;
  }
  nav#main-menu button { min-height: 52px; flex-direction: column; font-size: .7rem; background: rgba(255,255,255,.035); border-color: var(--line); }
  .page, #dashboard, #shop, #staff, #production, #territories, #bank, #leaderboards, #help, #settings {
    padding: 22px 12px 52px;
  }
  .page > h2 { margin-bottom: 18px; }
  .dashboard-grid > .card { min-height: 0; padding: 15px; }
  .staff-grid { grid-template-columns: 1fr; }
  #staff-content, #territories-list, #shop-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .staff-grid .staff-row { border-right: 0; padding-right: 0; }
  .pawn-columns { grid-template-columns: 1fr; gap: 12px; }
  .pawn-column { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
  .territory-card { padding: 14px; }
}

/* Production cards use all three panels at every width. On tablets the
   primary information spans the card and the two operational panels sit
   below it; phones stack all three panels vertically. */
@media (max-width: 1200px) {
  #production .drug-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr);
    gap: 16px;
    overflow: hidden;
  }
  #production .drug-card .resizer { display: none !important; }
  #production .drug-card .drug-main-content {
    display: flex !important;
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
  }
  #production .drug-card .chemist-assignment-column,
  #production .drug-card .production-lines-column {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0;
  }
}

@media (max-width: 700px) {
  #production .drug-card { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  #production .drug-card .drug-main-content,
  #production .drug-card .chemist-assignment-column,
  #production .drug-card .production-lines-column { grid-column: 1; }
  #production .drug-header { flex-wrap: wrap; gap: 8px; }
  #production .production-priority-wrapper { margin-left: auto; }
  #production .produce-row { flex-wrap: wrap; }
  #production .manual-progress { flex: 1 1 150px; min-width: 0; }

  #bank .bank-deposit,
  #bank .bank-savings,
  #bank .bank-loan {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden;
  }
  #bank .bank-image {
    display: block;
    width: 72px;
    max-width: 72px;
    margin: 0 auto 12px !important;
  }
  #bank .deposit-info,
  #bank .savings-info-container,
  #bank .loan-info-container { width: 100%; min-width: 0; padding-left: 0; }
  #bank .bank-deposit > h3,
  #bank .bank-savings > h3,
  #bank .bank-loan > h3 { width: auto; max-width: none; }
  #bank .deposit-controls,
  #bank .savings-controls { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --radius: 14px; }
  #top-bar, header.menu-open #top-bar, header.menu-closed #top-bar {
    grid-template-columns: minmax(88px, 1fr) repeat(3, max-content);
    gap: 4px;
  }
  #game-logo { width: clamp(88px, 27vw, 116px); }
  #top-bar #game-time { display: flex; }
  #top-bar span { min-height: 30px; padding: 4px 6px; font-size: .62rem; }
  #top-bar #money { color: var(--accent-strong); }
  nav#main-menu, body.game-started nav#main-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #start-screen.page.active { padding: 30px 12px 42px; }
  #start-screen .start-hero::before { font-size: .62rem; }
  #start-screen #start-logo { height: 120px; }
  #start-leaderboards { padding: 12px; border-radius: 16px; }
  .start-leaderboard-tabs { padding: 4px; }
  .start-donate-row { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .shop-menu, #staff-menu, .leaderboard-tabs { margin-inline: -12px; width: calc(100% + 24px); border-inline: 0; border-radius: 0; padding-inline: 12px; }
  .card, .staff-card, .drug-card, .territory-card, .shop-item, .shop-gear-card { border-radius: 14px; }
  #dashboard .ingredients-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboard .inventory-row { min-width: 0; gap: 8px; }
  #dashboard .inventory-row .inv-left { min-width: 0; overflow-wrap: anywhere; }
  .deposit-controls, .savings-controls, .loan-form, .loan-inputs { flex-direction: column; }
  #bank input, #bank button { width: 100%; flex: none; }
  .territory-assign-controls, .assign-row, .supply-row, .produce-row { flex-wrap: wrap; }
  .territory-qty-input, .assign-qty-input, .supply-qty-input, .shop-qty-input { min-width: 72px; }
  #toast-container { left: 12px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Keep the pre-game header empty even when the mobile menu script adds its
   menu-open/menu-closed state classes after initial rendering. */
html body.start-screen-active header #top-bar,
html body.start-screen-active header #hamburger-menu,
html body.start-screen-active header nav#main-menu {
  display: none !important;
}

/* ============================================================
   RESPONSIVE POLISH PASS
   Appended last so these rules are authoritative over both the
   legacy sheet and the earlier overhaul rules. Grouped by the
   area each fix targets.
   ============================================================ */

/* ---- Start screen (pre-game) Help & Settings buttons ----
   On the name-entry screen these two sat as a mismatched pair: oversized
   icons against tiny text, unequal (content-sized) widths, floating loose
   under the name box. Make them an even, themed pair that lines up under
   the hero's input / Start button block. */
#start-extra-buttons {
  display: flex;
  gap: 10px;
  width: min(100%, 440px);
  margin-top: 14px;
}
#start-extra-buttons button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  font-size: 0.95rem;
  font-weight: 750;
}
#start-extra-buttons button:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent);
  color: var(--accent-strong);
}
#start-extra-buttons button .icon {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1;
}
@media (max-width: 900px) {
  #start-extra-buttons { margin-inline: auto; justify-content: center; }
}

/* ---- 2. Dashboard card headers: breathing room, not squashed ----
   Wrap the "Inventory" / "Staff" / etc. titles in a subtle chip with
   balanced padding so the text no longer hugs the left edge. */
#dashboard .dashboard-grid .card > h3 {
  padding: 9px 13px;
  margin: 0 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* Keep the panel-swap dropdown pinned to the right inside the chip. */
#dashboard .dashboard-grid .card > h3 .dashboard-reorder-btn { margin-left: auto; }

/* ---- 4. Staff cards: uniform height regardless of row ----
   The hire/info panel is the first grid item and is taller than a
   staff card. With the default stretch alignment it forced every card
   sharing its row to match that height, so row one looked bigger than
   the rows below. Aligning items to the start lets each card keep its
   natural (uniform) height. */
#staff-content { align-items: start; }

/* ---- 5. Production: keep the ON/OFF toggle inside the card ----
   The pause-at-stock ON/OFF button lives at the right edge of the
   chemist column and could sit flush against (or spill over) the drug
   card edge. Guarantee the column and its contents stay comfortably
   inside the card at every width, and give the button a little room so
   it never touches the border. */
#production .drug-card { overflow: hidden; }
#production .drug-card .drug-main-content,
#production .drug-card .production-lines-column,
#production .drug-card .chemist-assignment-column { min-width: 0; }
#production .drug-card .chemist-assignment-column {
  padding-right: 0.85rem;
  box-sizing: border-box;
}
/* The pause-at-stock row and its controls never exceed their column, so
   the ON/OFF button always stays put. */
#production .pause-stock-row,
#production .chemist-assignment-column > div { max-width: 100%; min-width: 0; }
#production .chemist-assignment-column .pause-stock-input { min-width: 0; }
#production .chemist-assignment-column .recruit-toggle { margin-right: 2px; flex: 0 0 auto; }

/* ---- 6. Bank: uniform inputs and buttons ----
   The legacy sheet sized each button to its label (so "Deposit" was
   narrower than "Deposit All") and gave the loan amount input and the
   days dropdown different heights. Rebuild each control group as a tidy
   grid: the amount field spans the full width on top, and the action
   buttons below share equal columns. Every control gets the same
   height. */
#bank .deposit-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
#bank .savings-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
#bank .deposit-controls > input,
#bank .savings-controls > input { grid-column: 1 / -1; }

#bank .loan-form .loan-inputs,
#bank .loan-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
/* Cancel the legacy fixed widths/heights so loan amount + days match. */
#bank .loan-inputs > input,
#bank .loan-inputs > select,
#bank #loan-amount,
#bank #loan-days-select {
  flex: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 44px;
  line-height: normal;
  margin: 0;
}
/* All bank buttons: equal width within their group, consistent height. */
#bank .deposit-controls > button,
#bank .savings-controls > button,
#bank #take-loan-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
}
#bank #take-loan-button { grid-area: auto; }
/* Normalise the deposit/savings amount fields to the shared height too. */
#bank #bank-amount,
#bank #savings-amount { min-height: 44px; height: auto; margin: 0; }

/* ---- 1 (mobile). Dashboard inventory separators: drop when stacked ----
   The two-column inventory grid draws a divider on the right of each
   left-hand cell. Once the grid collapses to a single column on phones
   that divider (and its padding) just shoves alternating rows — and the
   "Use" buttons — inward. Remove it while single-column; it stays on
   wider screens where the two columns actually exist. */
@media (max-width: 560px) {
  #dashboard .ingredients-grid,
  .ingredients-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ingredients-grid .inventory-row,
  .ingredients-grid .inventory-row:nth-child(2n) {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---- 7. Mobile sweep: stop wide staff grids from overflowing ----
   Supply-runner, recruitment-agent and henchmen views forced a 360px /
   300px minimum column, which overflowed narrow phones. Collapse them
   to a single fluid column on small screens. */
@media (max-width: 800px) {
  #staff-content.supply-runners-view,
  #staff-content.recruitment-agents-view,
  #staff-content.henchmen-view {
    grid-template-columns: minmax(0, 1fr);
  }
  .staff-card,
  .henchman-staff-card,
  .henchmen-card,
  .supply-runner-staff-card,
  .recruitment-agent-card,
  .chemist-staff-card,
  .dealer-staff-card,
  .assistant-staff-card { min-width: 0; }
}

/* ---- 6 (mobile). Bank controls stack cleanly on phones ---- */
@media (max-width: 560px) {
  #bank .deposit-controls,
  #bank .savings-controls,
  #bank .loan-form .loan-inputs,
  #bank .loan-inputs { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 7. Mobile sweep: shop cards fill the column instead of a fixed
   250px width that left them stranded and left-aligned on phones. ---- */
@media (max-width: 560px) {
  .shop-item,
  .shop-gear-card { width: auto; min-width: 0; }
}

/* ---- 7. Mobile sweep: sales reports stack the territory image above its
   figures rather than squeezing them into a 175px-wide side column. ---- */
@media (max-width: 560px) {
  .sales-report-item { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .sales-report-header { width: 100%; flex-direction: row; align-items: center; gap: 0.6rem; }
  .sales-report-image { width: 96px; height: 96px; }
}

/* ============================================================
   PAWN SHOP — full restyle
   Three themed panels: "Warehouse Inventory" and "Actions" run in
   parallel and must line up row-for-row, so their rows and category
   separators are given identical metrics. "Selling Basket" stands on
   its own. On smaller screens the item/controls pair stays together and
   the basket drops beneath them.
   ============================================================ */

/* Header bar */
#shop-content .pawn-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#shop-content .pawn-broker-image {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 12px;
}
#shop-content .pawn-header h3 {
  margin: 0 0 4px;
  color: var(--accent-strong);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
#shop-content .pawn-header p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Columns container: a real grid, no forced 60vh height. The middle
   (Actions) column is sized to min-content so it takes exactly the width its
   compact controls need and can never expand to squeeze the item names in
   the inventory column. */
.pawn-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) min-content minmax(0, 1.2fr);
  gap: 14px;
  min-height: 0;
  align-items: start;
}

/* Each panel */
.pawn-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}
.pawn-column h4 {
  margin: 0 0 12px;
  padding: 0 0 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Let the whole page scroll instead of each column scrolling on its own —
   independent scrollbars would let the Inventory and Actions lists drift
   out of alignment. */
.pawn-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-grow: 1;
  max-height: none;
  overflow: visible;
}

/* Rows + category separators share identical metrics across columns so the
   two parallel lists always line up. */
.pawn-row,
.pawn-column.pawn-middle .pawn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  font-size: 0.82rem;
}
.pawn-category-header,
.pawn-column.pawn-middle .pawn-category-header,
.pawn-column.pawn-left .pawn-category-header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
}
/* "Move All" (and any category action) lives inside the header on the right.
   Keep it compact so it sits within the header instead of overlapping the
   row beneath it. */
.pawn-category-header .pawn-btns { margin-left: auto; display: flex; gap: 6px; }
.pawn-category-header .pawn-btns button {
  min-height: 0;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.pawn-category-header .pawn-btns button:hover {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}
.pawn-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pawn-row span:first-child { flex: 1 1 auto; min-width: 0; }
.pawn-row span:last-child { flex: 0 0 auto; text-align: right; color: var(--muted); }

/* Actions column: compact, centred, uniform transfer controls */
.pawn-column.pawn-middle .pawn-row {
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
}
.pawn-column.pawn-middle .pawn-row button {
  width: 32px;
  height: 32px;
  min-height: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.pawn-column.pawn-middle .pawn-row button:hover {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}
.pawn-column.pawn-middle .pawn-row button:disabled { opacity: 0.4; cursor: not-allowed; }
.pawn-column.pawn-middle .pawn-row input {
  width: 44px !important;
  max-width: 44px;
  height: 32px;
  min-height: 0 !important;
  margin: 0;
  padding: 2px;
  text-align: center;
  color: var(--ink);
  background: rgba(5, 13, 10, 0.72);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

/* Selling basket */
.pawn-right .pawn-row span:last-child { color: var(--accent-strong); font-weight: 700; }
.pawn-right .pawn-list p { margin: 0; padding: 14px 8px; color: var(--muted); font-size: 0.85rem; }
.pawn-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}
.pawn-total span:last-child { color: var(--accent-strong); }
.pawn-sell-confirm {
  width: 100%;
  margin-top: 12px;
  min-height: 46px;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.pawn-sell-confirm:hover { filter: brightness(1.08); }
.pawn-sell-confirm:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* Responsive: keep each item beside its controls; basket drops below. As the
   inventory column narrows, stack each item's name over its stock/price line
   so the name is always fully readable. Rows grow to two lines and the Actions
   rows grow to match, so the two columns still line up. */
@media (max-width: 900px) {
  .pawn-columns { grid-template-columns: minmax(0, 1fr) min-content; }
  .pawn-right { grid-column: 1 / -1; }
  .pawn-row,
  .pawn-column.pawn-middle .pawn-row { height: 56px; min-height: 56px; }
  .pawn-column.pawn-left .pawn-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
  }
  .pawn-column.pawn-left .pawn-row span { flex: 0 0 auto; }
  .pawn-column.pawn-left .pawn-row span:first-child {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ink);
  }
  .pawn-column.pawn-left .pawn-row span:last-child {
    text-align: left;
    font-size: 0.72rem;
    color: var(--muted);
  }
  .pawn-column.pawn-middle .pawn-row { gap: 4px; padding: 0 4px; }
  .pawn-column.pawn-middle .pawn-row button { width: 30px; height: 30px; }
  .pawn-column.pawn-middle .pawn-row input { width: 40px !important; max-width: 40px; }
}
@media (max-width: 520px) {
  #shop-content .pawn-header { flex-direction: column; text-align: center; gap: 10px; }
  .pawn-columns { grid-template-columns: minmax(0, 1fr) min-content; gap: 8px; }
  .pawn-column { padding: 10px; }
  .pawn-column.pawn-middle .pawn-row { gap: 3px; padding: 0 2px; }
  .pawn-column.pawn-middle .pawn-row button { width: 27px; height: 28px; font-size: 0.72rem; }
  .pawn-column.pawn-middle .pawn-row input { width: 32px !important; max-width: 32px; }
  .pawn-category-header .pawn-btns button { padding: 0 7px; font-size: 0.6rem; }
}

/* ============================================================
   BANK — clean, aligned panel layout
   The legacy sheet absolutely-positioned the panel headers, used an
   image|info grid that stranded the icon (and, worse, let the savings
   content escape its panel), force-centred the text, and pinned the amount
   inputs to a fixed 150px. Rebuild each panel with an explicit grid — header
   across the top, icon in a left column, description + controls in a body
   column — with the amount box spanning the full width and lining up with the
   buttons beneath it, exactly like the loans panel.
   ============================================================ */

/* Headers: pull them back into normal flow as a full-width themed chip
   (cancel the legacy absolute positioning and its top-padding offset). */
#bank .bank-deposit > h3,
#bank .bank-savings > h3,
#bank .bank-loan > h3,
#bank .bank-card > h3 {
  position: static !important;
  top: auto;
  right: auto;
  width: auto;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#bank .bank-deposit,
#bank .bank-savings,
#bank .bank-loan {
  padding-top: 20px !important;
  height: auto !important;
}

/* Wider screens: icon column + body column, laid out with explicit grid
   areas so every element is placed and nothing can float out of the panel. */
@media (min-width: 701px) {
  #bank .bank-deposit,
  #bank .bank-savings,
  #bank .bank-loan {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "image  body";
    column-gap: 20px;
    row-gap: 14px;
    align-items: start;
  }
  #bank .bank-deposit > h3,
  #bank .bank-savings > h3,
  #bank .bank-loan > h3 { grid-area: header !important; }
  #bank .bank-image,
  #bank .savings-image,
  #bank .loan-image {
    grid-area: image !important;
    align-self: start;
    justify-self: start;
    width: 96px;
    height: 96px;
    max-width: 96px;
    margin: 0;
    object-fit: contain;
  }
  /* !important defeats the legacy `grid-area: info` (higher specificity) that
     pointed at an area this grid no longer defines — which is what let the
     savings content auto-place itself outside the panel. */
  #bank .deposit-info,
  #bank .savings-info-container,
  #bank .loan-info-container { grid-area: body !important; }
}

/* Body column: description then controls, all full width and left-aligned. */
#bank .deposit-info,
#bank .savings-info-container,
#bank .loan-info-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
#bank .deposit-info p,
#bank .savings-info-container p,
#bank .loan-info-container p { text-align: left; margin: 0; }

/* Control groups: the amount box spans the full width on its own row; the
   action buttons share equal columns directly beneath it and line up with
   it (mirroring the loans panel). */
#bank .deposit-controls,
#bank .savings-controls {
  display: grid;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
#bank .deposit-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#bank .savings-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#bank .deposit-controls > input,
#bank .savings-controls > input {
  grid-column: 1 / -1;
  justify-self: stretch;
}
#bank .loan-form { display: block; width: 100%; }
#bank .loan-form .loan-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
#bank #take-loan-button {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  grid-area: auto;
}
/* Every amount box / dropdown spans its group and matches the button height. */
#bank .deposit-controls > input,
#bank .savings-controls > input,
#bank .loan-inputs > input,
#bank .loan-inputs > select,
#bank #bank-amount,
#bank #savings-amount,
#bank #loan-amount,
#bank #loan-days-select {
  width: 100% !important;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 44px;
  line-height: normal;
  margin: 0;
}
#bank .deposit-controls > button,
#bank .savings-controls > button,
#bank #take-loan-button { min-height: 44px; }

/* Mobile: every control group collapses to a single column. */
@media (max-width: 560px) {
  #bank .deposit-controls,
  #bank .savings-controls,
  #bank .loan-form .loan-inputs { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   SHOP / STAFF / LEADERBOARD TABS — wrap instead of side-scroll
   A horizontal scrollbar under the tab strip looked out of place on
   narrow screens. Let the tabs wrap onto as many rows as needed so
   they're all visible at once, no scrollbar.
   ============================================================ */
@media (max-width: 760px) {
  .shop-menu,
  #staff-menu,
  .leaderboard-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }
  .shop-menu button,
  #staff-menu button,
  .leaderboard-tabs button {
    flex: 1 1 auto;
    min-width: max-content;
  }
}

/* ============================================================
   LEADERBOARD TABLE — compact, phone-friendly
   Trophies stand alone for ranks 1-3 (no number beneath). The day shows
   above the score so the Day column can go away, and dates are DD/MM/YY.
   On phones/tablets the four columns are sized so everything — including
   the full date — fits with no horizontal scrolling.
   ============================================================ */
/* Rank column: centre the trophy / number. */
#leaderboard-tables th:first-child,
#start-leaderboard-table th:first-child,
#leaderboard-tables td.lb-rank-cell,
#start-leaderboard-table td.lb-rank-cell {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.lb-rank-cell .trophy-icon { display: block; margin: 0 auto; }
/* Score column: "Day X" on top, the score beneath it. */
.lb-score-cell { vertical-align: middle; }
.lb-score-cell .lb-day {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.lb-score-cell .lb-score {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

/* Phones and large phones/tablets: fixed layout so the four columns always
   fit the width and the date is never clipped. */
@media (max-width: 900px) {
  #leaderboard-tables,
  #start-leaderboard-table { overflow-x: hidden; }
  #leaderboard-tables table,
  #start-leaderboard-table table {
    width: 100%;
    table-layout: fixed;
    font-size: 0.8rem;
  }
  #leaderboard-tables th,
  #leaderboard-tables td,
  #start-leaderboard-table th,
  #start-leaderboard-table td {
    padding: 8px 5px;
  }
  /* rank / score / date are fixed; the name column takes the rest and
     ellipsises when long. */
  #leaderboard-tables th:nth-child(1),
  #leaderboard-tables td.lb-rank-cell,
  #start-leaderboard-table th:nth-child(1),
  #start-leaderboard-table td.lb-rank-cell { width: 40px; }
  #leaderboard-tables th:nth-child(3),
  #leaderboard-tables td.lb-score-cell,
  #start-leaderboard-table th:nth-child(3),
  #start-leaderboard-table td.lb-score-cell { width: 128px; }
  #leaderboard-tables th:nth-child(4),
  #leaderboard-tables td:nth-child(4),
  #start-leaderboard-table th:nth-child(4),
  #start-leaderboard-table td:nth-child(4) {
    width: 66px;
    white-space: nowrap;
    font-size: 0.74rem;
    text-align: right;
  }
  #leaderboard-tables td:nth-child(2),
  #start-leaderboard-table td:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lb-score-cell .lb-score { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .trophy-icon { width: 30px !important; height: 30px !important; }
}
/* Very narrow phones: trim the score column a touch more so names keep room. */
@media (max-width: 400px) {
  #leaderboard-tables th:nth-child(3),
  #leaderboard-tables td.lb-score-cell,
  #start-leaderboard-table th:nth-child(3),
  #start-leaderboard-table td.lb-score-cell { width: 108px; }
  #leaderboard-tables table,
  #start-leaderboard-table table { font-size: 0.74rem; }
}

/* ============================================================
   SHOP QUANTITY CONTROLS
   Adds -10 / +10 quick-increment buttons (created in script.js) and, on
   smaller screens, centres the whole -10 / - / amount / + / +10 row.
   ============================================================ */
.qty-btn-lg { font-weight: 800; letter-spacing: 0.01em; }
@media (max-width: 760px) {
  .qty-controls {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}