:root {
  --bg: #1f2218;
  --bg-deep: #14160f;
  --panel: #332d20;
  --panel-light: #4a3c28;
  --paper: #d8c28c;
  --paper-dark: #a9854f;
  --ink: #f8efd2;
  --muted: #c7b78e;
  --goblin: #8bd650;
  --goblin-dark: #4d8b2e;
  --danger: #d96a4c;
  --chaos: #d9b84c;
  --success: #78c86f;
  --shadow: rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(139, 214, 80, 0.12), transparent 32rem),
    linear-gradient(135deg, var(--bg-deep), var(--bg) 46%, #2b2519);
  font-family: Georgia, "Times New Roman", serif;
}

button,
input {
  font: inherit;
}

.page-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid rgba(216, 194, 140, 0.18);
  background: rgba(51, 45, 32, 0.38);
}

.world-event-banner {
  display: grid;
  gap: 8px;
  padding: 12px 18px;
  border-block: 1px solid rgba(217, 184, 76, 0.2);
  background: rgba(38, 34, 24, 0.72);
}

.brand-mark {
  display: block;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  position: relative;
}

.brand-mark .pixel-sprite {
  position: absolute;
  left: 4px;
  top: 10px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.site-header p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 1.05rem;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(290px, 3fr);
  gap: 22px;
  align-items: start;
}

.feed-column,
.primary-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.management-column {
  position: sticky;
  top: 18px;
  min-width: 0;
}

.latest-incident-panel {
  order: 1;
}

.incident-history-panel {
  order: 2;
}

.active-panel {
  order: 3;
}

.compact-dispatch-board {
  order: 4;
}

.dispatch-board,
.panel,
.management-card {
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px;
  background: rgba(51, 45, 32, 0.88);
}

.dispatch-board {
  padding: 16px 18px;
  background: rgba(51, 45, 32, 0.62);
}

.section-heading,
.panel h2,
.management-card h2 {
  margin-bottom: 16px;
}

.dispatch-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dispatch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--goblin);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h2 {
  color: var(--paper);
  font-size: 1.55rem;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mission-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 0;
  background: transparent;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.mission-card:hover {
  transform: translateX(2px);
  border-color: rgba(139, 214, 80, 0.48);
  box-shadow: none;
}

.mission-icon {
  display: block;
  position: relative;
  width: 58px;
  height: 42px;
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.mission-icon .pixel-sprite {
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
}

.mission-card h3 {
  min-height: 0;
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.25;
}

.mission-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.compact-mission-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.compact-mission-top p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.compact-mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.compact-mission-meta span {
  padding: 5px 7px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(20, 22, 15, 0.36);
  font-size: 0.78rem;
  font-weight: 800;
}

.mission-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: auto 0 12px;
  padding-top: 18px;
}

.meta-box {
  padding: 10px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.38);
}

.meta-box span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.meta-box strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
}

.assignment-control {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.assignment-control select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(216, 194, 140, 0.28);
  border-radius: 8px;
  color: var(--ink);
  background: #1f2117;
  cursor: pointer;
}

.assignment-control select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.selected-goblin-note,
.trait-bonus,
.match-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.32;
}

.match-hint {
  color: #f0d480;
  font-weight: 800;
}

.match-good {
  color: #9fdb65;
}

.match-bad {
  color: #f08a58;
}

.trait-bonus {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.estimate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 9px 10px;
  border: 1px solid rgba(139, 214, 80, 0.18);
  border-radius: 8px;
  color: var(--goblin);
  background: rgba(20, 22, 15, 0.38);
  font-size: 0.82rem;
  font-weight: 800;
}

.start-button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #13200e;
  background: linear-gradient(180deg, var(--goblin), #6cb83d);
  cursor: pointer;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  transition: transform 90ms ease, filter 140ms ease, opacity 140ms ease;
}

.start-button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.start-button:active:not(:disabled) {
  transform: translateY(2px) scale(0.99);
}

.start-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.sidebar {
  display: grid;
  gap: 16px;
}

.panel,
.management-card {
  padding: 18px;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(216, 194, 140, 0.14);
  color: var(--muted);
}

.stat-row strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.hire-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.38);
}

.hire-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.hire-row strong {
  color: var(--paper);
}

.hire-button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #13200e;
  background: linear-gradient(180deg, var(--goblin), #6cb83d);
  cursor: pointer;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  transition: transform 90ms ease, filter 140ms ease, opacity 140ms ease;
}

.hire-button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.secondary-button,
.panel-toggle {
  min-height: 34px;
  border: 1px solid rgba(139, 214, 80, 0.35);
  border-radius: 8px;
  color: var(--goblin);
  background: rgba(20, 22, 15, 0.5);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
}

.secondary-button {
  padding: 8px 12px;
  white-space: nowrap;
}

.panel-toggle {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
}

.inline-toggle {
  width: auto;
  margin-top: 0;
  padding: 8px 12px;
  white-space: nowrap;
}

.secondary-button:hover,
.panel-toggle:hover {
  border-color: rgba(139, 214, 80, 0.68);
  background: rgba(34, 46, 24, 0.55);
}

.secondary-button:active,
.panel-toggle:active {
  transform: translateY(2px) scale(0.99);
}

.hire-button:active:not(:disabled) {
  transform: translateY(2px) scale(0.99);
}

.hire-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.world-event-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.world-event-card h2 {
  color: var(--paper);
  font-size: 1rem;
}

.world-event-card p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.32;
}

.world-event-card strong {
  color: var(--chaos);
  font-size: 0.95rem;
  white-space: nowrap;
}

.department-list {
  display: grid;
  gap: 10px;
}

.company-panel:not(.is-expanded) .department-list {
  display: none;
}

.department-card {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.34);
}

.department-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.department-heading h3 {
  color: var(--paper);
  font-size: 0.98rem;
}

.department-heading span {
  color: var(--goblin);
  font-size: 0.76rem;
  font-weight: 900;
}

.department-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.department-button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  color: #13200e;
  background: linear-gradient(180deg, var(--goblin), #6cb83d);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  transition: transform 90ms ease, filter 140ms ease, opacity 140ms ease;
}

.department-button:hover:not(:disabled) {
  filter: brightness(1.06);
}

.department-button:active:not(:disabled) {
  transform: translateY(2px) scale(0.99);
}

.department-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.company-records {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.28);
}

.reset-game-button {
  justify-self: end;
  width: auto;
  margin: 0 0 10px;
  padding-inline: 12px;
  color: #f08a58;
}

.company-records-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.company-records-heading h3 {
  color: var(--paper);
  font-size: 0.96rem;
}

.company-identity-panel {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(216, 194, 140, 0.06);
}

.company-identity-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(216, 194, 140, 0.06);
}

.company-identity-summary div {
  min-width: 0;
}

.company-identity-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.company-identity-summary strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--paper);
  font-size: 0.96rem;
}

.company-identity-summary button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(240, 212, 128, 0.28);
  border-radius: 6px;
  color: #f0d480;
  background: rgba(240, 212, 128, 0.1);
  cursor: pointer;
  font-weight: 900;
}

.company-identity-panel label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.company-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.company-name-row input {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(216, 194, 140, 0.22);
  border-radius: 6px;
  color: var(--paper);
  background: rgba(9, 10, 7, 0.5);
}

.company-name-row button {
  padding: 8px 10px;
  border: 1px solid rgba(240, 212, 128, 0.28);
  border-radius: 6px;
  color: #f0d480;
  background: rgba(240, 212, 128, 0.1);
  cursor: pointer;
  font-weight: 900;
}

.company-name-message {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.company-name-message.error {
  color: #f08a58;
}

.company-name-message.success {
  color: #9dcc88;
}

.reputation-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(240, 212, 128, 0.2);
  border-radius: 8px;
  background: rgba(240, 212, 128, 0.08);
}

.reputation-panel div {
  min-width: 0;
}

.reputation-panel .company-title-row {
  grid-column: 1 / -1;
}

.reputation-panel span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.reputation-panel strong {
  display: block;
  color: #f0d480;
  font-size: 0.92rem;
  line-height: 1.2;
}

.reputation-panel p {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.season-panel {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(139, 214, 80, 0.22);
  border-radius: 8px;
  background: rgba(139, 214, 80, 0.07);
}

.season-panel.is-complete {
  border-color: rgba(240, 212, 128, 0.34);
  background: rgba(240, 212, 128, 0.08);
}

.season-heading,
.season-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.season-heading strong {
  color: var(--paper);
  font-size: 0.96rem;
}

.season-score {
  min-width: 76px;
  text-align: right;
}

.season-score span,
.season-meta span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.season-score strong {
  display: block;
  color: var(--goblin);
  font-size: 1.08rem;
}

.season-next {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 6px;
  background: rgba(139, 214, 80, 0.11);
}

.season-next span {
  flex: 0 0 auto;
  color: var(--goblin);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.season-next strong {
  min-width: 0;
  color: var(--paper);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.weekly-objectives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.weekly-objective {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 7px;
  border-radius: 6px;
  background: rgba(20, 22, 15, 0.35);
}

.weekly-objective span {
  min-width: 0;
  color: var(--paper);
  font-size: 0.72rem;
  line-height: 1.2;
}

.weekly-objective strong {
  flex: 0 0 auto;
  color: #f0d480;
  font-size: 0.72rem;
}

.weekly-objective.is-complete {
  background: rgba(139, 214, 80, 0.14);
}

.season-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.season-badges span {
  padding: 3px 6px;
  border: 1px solid rgba(240, 212, 128, 0.2);
  border-radius: 999px;
  color: #f0d480;
  background: rgba(240, 212, 128, 0.08);
  font-size: 0.66rem;
  font-weight: 900;
}

.season-reset-button {
  justify-self: start;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(139, 214, 80, 0.32);
  border-radius: 7px;
  color: #13200e;
  background: linear-gradient(180deg, var(--goblin), #6cb83d);
  cursor: pointer;
  font-weight: 900;
}

.company-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.company-record-grid div {
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: rgba(216, 194, 140, 0.07);
}

.company-record-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.company-record-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--paper);
  font-size: 0.78rem;
  line-height: 1.25;
}

.company-feed {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 194, 140, 0.12);
}

.company-feed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.company-feed-heading strong {
  color: var(--paper);
  font-size: 0.82rem;
}

.company-feed ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-feed li,
.company-feed p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.company-feed li span {
  margin-right: 6px;
  color: #f0d480;
  font-weight: 800;
}

.contract-chain-board,
.rival-board,
.rival-leaderboard {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(216, 194, 140, 0.12);
}

.rival-leaderboard:first-child,
.rival-board:first-child,
.contract-chain-board:first-child,
.company-feed:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.contract-chain-board p,
.rival-board p,
.rival-leaderboard p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.chain-start-list {
  display: grid;
  gap: 6px;
}

.chain-completion-card {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(240, 212, 128, 0.2);
  border-radius: 8px;
  background: rgba(240, 212, 128, 0.08);
}

.chain-completion-card span {
  color: var(--acid);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.chain-completion-card strong {
  color: var(--paper);
  font-size: 0.86rem;
  line-height: 1.15;
}

.chain-completion-card p {
  margin: 0;
}

.chain-start-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px;
  color: var(--paper);
  background: rgba(216, 194, 140, 0.07);
  cursor: pointer;
  text-align: left;
}

.chain-start-list span {
  color: #f0d480;
  font-size: 0.72rem;
  font-weight: 900;
}

.rival-list {
  display: grid;
  gap: 8px;
}

.rival-list article {
  padding: 8px;
  border-radius: 8px;
  background: rgba(216, 194, 140, 0.07);
}

.rival-list h4 {
  color: var(--paper);
  font-size: 0.84rem;
}

.rival-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0;
}

.rival-list div span {
  color: #f0d480;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.rival-list small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.leaderboard-table {
  display: grid;
  gap: 5px;
  overflow-x: auto;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 42px minmax(120px, 1.5fr) 48px 44px 64px minmax(100px, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--muted);
  background: rgba(216, 194, 140, 0.055);
  font-size: 0.72rem;
  line-height: 1.2;
}

.leaderboard-head {
  color: #f0d480;
  background: transparent;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leaderboard-row.is-player {
  border: 1px solid rgba(240, 212, 128, 0.28);
  color: var(--paper);
  background: rgba(240, 212, 128, 0.12);
}

.leaderboard-row strong,
.leaderboard-row small {
  display: block;
  overflow-wrap: anywhere;
}

.leaderboard-row strong {
  color: var(--paper);
}

.leaderboard-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
}

.goblin-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.workforce-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.summary-stat {
  padding: 8px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.34);
}

.summary-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.summary-stat strong {
  display: block;
  margin-top: 2px;
  color: var(--paper);
  font-size: 1rem;
}

.workforce-panel:not(.is-expanded) .goblin-list {
  display: none;
}

.workforce-panel.is-expanded .goblin-list {
  margin-top: 12px;
}

.goblin-card {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.34);
}

.goblin-card.working {
  border-color: rgba(217, 184, 76, 0.32);
  background: rgba(83, 62, 22, 0.24);
}

.goblin-card-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background: rgba(139, 214, 80, 0.12);
}

.goblin-card-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.goblin-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.goblin-card h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--paper);
  font-size: 1rem;
}

.status-pill {
  flex: 0 0 auto;
  max-width: 150px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #15150e;
  background: var(--success);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.status-pill.working {
  background: var(--chaos);
}

.goblin-card strong {
  display: block;
  margin-top: 2px;
  color: var(--goblin);
  font-size: 0.84rem;
}

.goblin-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.goblin-card .nickname-reason {
  color: #f0d480;
  font-size: 0.76rem;
  font-weight: 800;
}

.goblin-memory {
  display: -webkit-box;
  max-height: 2.7em;
  margin-top: 7px;
  overflow: hidden;
  color: var(--paper);
  font-size: 0.78rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.empty-memory {
  color: var(--muted);
}

.memory-failure {
  color: #e59a86;
}

.memory-disaster {
  color: var(--chaos);
}

.memory-success {
  color: var(--success);
}

.memory-weird {
  color: #b9aae8;
}

.gold-pop {
  animation: goldPop 420ms ease;
}

.latest-incident-panel {
  padding: 28px 24px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(217, 184, 76, 0.1), transparent 52%),
    rgba(51, 45, 32, 0.58);
}

.latest-incident-card {
  display: grid;
  gap: 18px;
  padding-top: 12px;
  border-top: 3px solid var(--paper-dark);
  background: transparent;
}

.latest-incident-card.cleanSuccess {
  border-left-color: var(--success);
}

.latest-incident-card.messySuccess {
  border-left-color: var(--paper-dark);
}

.latest-incident-card.failure {
  border-left-color: var(--danger);
}

.latest-incident-card.profitableDisaster {
  border-left-color: var(--chaos);
}

.latest-incident-card.weirdIncident {
  border-left-color: #9c8de8;
}

.latest-incident-meta,
.latest-incident-subject {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.latest-incident-subject {
  justify-content: flex-start;
}

.latest-incident-subject h3,
.latest-incident-card h3 {
  color: var(--paper);
  font-size: 1.45rem;
}

.latest-incident-subject p {
  margin-top: 3px;
  color: var(--muted);
}

.latest-story {
  display: grid;
  gap: 10px;
  color: var(--ink);
  font-size: 1.22rem;
  line-height: 1.68;
}

.latest-face {
  flex: 0 0 auto;
}

.empty-latest {
  grid-template-columns: 64px 1fr;
  align-items: center;
}

.active-mission {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px dashed rgba(139, 214, 80, 0.42);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.42);
}

.active-mission.running {
  animation: activePulse 1.5s ease-in-out infinite;
}

.active-mission-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-height: none;
  overflow: visible;
  gap: 8px;
}

.active-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy timer"
    "bar bar"
    "rush rush";
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.38);
}

.active-job.is-rushed {
  border-color: rgba(240, 212, 128, 0.34);
  background: rgba(240, 212, 128, 0.08);
}

.active-job h3 {
  overflow: hidden;
  color: var(--paper);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-job p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.active-job-copy {
  grid-area: copy;
  min-width: 0;
}

.rush-note {
  color: #f0d480;
  font-weight: 800;
}

.rush-button {
  grid-area: rush;
  justify-self: start;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(240, 212, 128, 0.3);
  border-radius: 7px;
  color: #17140e;
  background: linear-gradient(180deg, #f0d480, #d8a84f);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.rush-button:hover {
  filter: brightness(1.05);
}

.active-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(216, 194, 140, 0.1);
}

.empty-active .active-icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
}

.empty-active-face {
  border-color: rgba(139, 214, 80, 0.45);
  background: #15180f;
}

.empty-active-face .goblin-face-svg {
  width: 56px;
  height: 56px;
}

.pixel-sprite,
.pixel-sprite::before,
.pixel-sprite::after {
  display: block;
  width: 4px;
  height: 4px;
  image-rendering: pixelated;
  content: "";
}

.pixel-sprite {
  position: relative;
  transform-origin: 50% 100%;
}

.pixel-sprite::before,
.pixel-sprite::after {
  position: absolute;
  top: 0;
  left: 0;
}

.goblin-face-frame {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid #161910;
  border-radius: 0;
  background: #0f120c;
  image-rendering: pixelated;
}

.goblin-face-frame.working-face {
  border-color: var(--chaos);
}

.goblin-face-svg {
  display: block;
  width: 54px;
  height: 54px;
  overflow: visible;
  image-rendering: pixelated;
}

.goblin-face {
  --face-color: #5f9f3a;
  position: relative;
  width: 44px;
  height: 44px;
  border: 3px solid #11140c;
  border-radius: 0;
  background: var(--face-color);
  box-shadow:
    inset 0 -7px 0 rgba(0, 0, 0, 0.16),
    inset 5px 0 0 rgba(255, 255, 255, 0.08);
}

.goblin-pixel,
.goblin-pixel::before,
.goblin-pixel::after {
  position: absolute;
  display: block;
  content: "";
  image-rendering: pixelated;
}

.face-moss { --face-color: #5f9f3a; }
.face-swamp { --face-color: #4f8431; }
.face-sickly-lime { --face-color: #a2d943; }
.face-dull-olive { --face-color: #8da544; }
.face-yellow-green { --face-color: #c5bf3d; }
.face-grey-green { --face-color: #78937d; }
.face-bruised-purple { --face-color: #7a6b90; }

.shape-wide {
  width: 48px;
  height: 40px;
}

.shape-tall {
  width: 40px;
  height: 48px;
}

.shape-blocky {
  box-shadow:
    inset 0 -7px 0 rgba(0, 0, 0, 0.16),
    inset 5px 0 0 rgba(255, 255, 255, 0.08),
    -4px 8px 0 var(--face-color),
    4px 8px 0 var(--face-color);
}

.face-ear {
  top: 17px;
  width: 8px;
  height: 12px;
  background: var(--face-color);
  border: 3px solid #11140c;
}

.face-ear-left {
  left: -11px;
}

.face-ear-right {
  right: -11px;
}

.face-nose {
  left: 20px;
  top: 21px;
  width: 5px;
  height: 7px;
  background: rgba(31, 42, 20, 0.36);
}

.face-eyes::before,
.face-eyes::after {
  top: 13px;
  width: 6px;
  height: 6px;
  background: #10120c;
}

.face-eyes::before {
  left: 10px;
}

.face-eyes::after {
  right: 10px;
}

.eyes-sleepy-lines::before,
.eyes-sleepy-lines::after {
  height: 3px;
  top: 15px;
}

.eyes-one-big-eye::before {
  left: 15px;
  top: 10px;
  width: 13px;
  height: 13px;
  background: #f3e6b7;
  box-shadow: inset 4px 4px 0 #10120c;
}

.eyes-one-big-eye::after {
  display: none;
}

.eyes-angry-eyes::before {
  height: 5px;
  transform: skewY(18deg);
}

.eyes-angry-eyes::after {
  height: 5px;
  transform: skewY(-18deg);
}

.eyes-confused-eyes::before {
  top: 10px;
  width: 5px;
}

.eyes-confused-eyes::after {
  top: 17px;
  width: 8px;
  height: 4px;
}

.eyes-tiny-eyes::before,
.eyes-tiny-eyes::after {
  top: 16px;
  width: 3px;
  height: 3px;
}

.eyes-x-eyes::before,
.eyes-x-eyes::after {
  width: 7px;
  height: 7px;
  background:
    linear-gradient(45deg, transparent 38%, #10120c 42%, #10120c 58%, transparent 62%),
    linear-gradient(-45deg, transparent 38%, #10120c 42%, #10120c 58%, transparent 62%);
}

.eyes-side-eye::before {
  left: 8px;
  width: 9px;
  height: 4px;
}

.eyes-side-eye::after {
  right: 7px;
  width: 4px;
  height: 4px;
}

.face-mouth {
  left: 16px;
  top: 30px;
  width: 13px;
  height: 4px;
  background: #10120c;
}

.mouth-grin {
  height: 4px;
  box-shadow: inset 0 2px 0 #f3e6b7;
}

.mouth-toothy-grin {
  width: 17px;
  left: 14px;
  height: 7px;
  background: #f3e6b7;
  box-shadow:
    inset 0 3px 0 #10120c,
    inset 5px 0 0 rgba(0, 0, 0, 0.2),
    inset 11px 0 0 rgba(0, 0, 0, 0.2);
}

.mouth-missing-tooth {
  width: 16px;
  height: 7px;
  background: #f3e6b7;
  box-shadow:
    inset 0 3px 0 #10120c,
    inset 7px 4px 0 #10120c;
}

.mouth-flat-line {
  height: 3px;
}

.mouth-open-scream {
  left: 18px;
  top: 28px;
  width: 10px;
  height: 12px;
}

.mouth-tiny-frown {
  left: 18px;
  top: 32px;
  width: 9px;
  height: 3px;
  transform: rotate(6deg);
}

.mouth-drool-mouth {
  width: 14px;
  height: 5px;
  box-shadow: 9px 5px 0 -1px #a7d9d0;
}

.face-accessory {
  z-index: 4;
}

.accessory-eyepatch {
  left: 9px;
  top: 11px;
  width: 10px;
  height: 10px;
  background: #10120c;
  box-shadow: 8px -5px 0 -3px #10120c;
}

.accessory-sunglasses {
  left: 8px;
  top: 12px;
  width: 28px;
  height: 8px;
  background: #10120c;
  box-shadow: inset 12px 0 0 #26261a;
}

.accessory-tiny-hat {
  left: 10px;
  top: -9px;
  width: 24px;
  height: 8px;
  background: #4050a8;
  box-shadow: 16px 4px 0 -4px #26336f;
}

.accessory-traffic-cone-hat {
  left: 15px;
  top: -19px;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-bottom: 18px solid #e06b2f;
  border-left: 8px solid transparent;
}

.accessory-traffic-cone-hat::after {
  left: -5px;
  top: 10px;
  width: 10px;
  height: 3px;
  background: #f3e6b7;
}

.accessory-bandage {
  left: 8px;
  top: 8px;
  width: 28px;
  height: 7px;
  background: #ead8a8;
  transform: rotate(-10deg);
  box-shadow: inset 12px 0 0 #c9b587;
}

.accessory-monocle {
  right: 8px;
  top: 10px;
  width: 11px;
  height: 11px;
  border: 3px solid #f1d37a;
  box-shadow: 4px 9px 0 -3px #f1d37a;
}

.accessory-cardboard-crown {
  left: 9px;
  top: -12px;
  width: 27px;
  height: 13px;
  background: #bf8a43;
  clip-path: polygon(0 100%, 0 35%, 20% 65%, 38% 20%, 54% 65%, 75% 30%, 100% 65%, 100% 100%);
}

.face-mark {
  z-index: 5;
}

.mark-cheek-scar {
  right: 8px;
  top: 24px;
  width: 10px;
  height: 3px;
  background: #5d3228;
  transform: rotate(-22deg);
}

.mark-forehead-bruise {
  left: 17px;
  top: 4px;
  width: 10px;
  height: 8px;
  background: #625095;
}

.mark-dirt-smudge {
  left: 7px;
  top: 25px;
  width: 8px;
  height: 8px;
  background: rgba(63, 44, 24, 0.62);
  box-shadow: 6px 4px 0 -2px rgba(63, 44, 24, 0.62);
}

.mark-nose-wart {
  left: 25px;
  top: 22px;
  width: 5px;
  height: 5px;
  background: #263b16;
}

.mark-single-tooth {
  left: 22px;
  top: 34px;
  width: 5px;
  height: 6px;
  background: #f3e6b7;
}

.mark-drool-pixel {
  left: 29px;
  top: 35px;
  width: 4px;
  height: 9px;
  background: #a7d9d0;
}

.pixel-crate {
  color: #8a5a2b;
  box-shadow:
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    8px 16px, 12px 16px, 20px 16px, 28px 16px, 32px 16px,
    8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px,
    8px 24px, 12px 24px, 20px 24px, 28px 24px, 32px 24px,
    8px 28px, 12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px, 32px 28px;
}

.pixel-crate::before {
  color: #c58b42;
  box-shadow:
    12px 16px, 16px 16px, 24px 16px, 28px 16px,
    12px 20px, 20px 20px, 28px 20px,
    12px 24px, 16px 24px, 24px 24px, 28px 24px;
}

.pixel-crate::after {
  color: #4b2f17;
  box-shadow:
    8px 12px, 32px 12px,
    8px 16px, 32px 16px,
    8px 20px, 32px 20px,
    8px 24px, 32px 24px,
    8px 32px, 12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px, 32px 32px;
}

.pixel-goblin {
  color: #7bc943;
  box-shadow:
    12px 8px, 28px 8px,
    8px 12px, 12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px, 32px 12px,
    4px 16px, 8px 16px, 12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px, 32px 16px, 36px 16px,
    8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px,
    12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px,
    12px 28px, 20px 28px, 28px 28px,
    8px 32px, 12px 32px, 28px 32px, 32px 32px;
}

.pixel-goblin::before {
  color: #1a1a12;
  box-shadow:
    12px 16px, 28px 16px,
    20px 24px;
}

.pixel-goblin::after {
  color: #d7c07b;
  box-shadow:
    16px 4px, 20px 4px, 24px 4px,
    16px 28px, 24px 28px;
}

.pixel-barrel {
  color: #7a4a24;
  box-shadow:
    16px 8px, 20px 8px, 24px 8px,
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px,
    12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px,
    16px 28px, 20px 28px, 24px 28px;
}

.pixel-barrel::before {
  color: #c6843d;
  box-shadow:
    16px 12px, 20px 12px, 24px 12px,
    16px 20px, 20px 20px, 24px 20px,
    16px 24px, 20px 24px, 24px 24px;
}

.pixel-barrel::after {
  color: #3d2b1d;
  box-shadow:
    12px 12px, 28px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 28px, 28px 28px;
}

.pixel-chicken {
  color: #f1ead0;
  box-shadow:
    20px 8px,
    16px 12px, 20px 12px, 24px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px,
    16px 24px, 20px 24px, 24px 24px, 28px 24px,
    20px 28px, 28px 28px,
    16px 32px, 28px 32px;
}

.pixel-chicken::before {
  color: #d4472f;
  box-shadow:
    20px 0,
    16px 4px, 20px 4px, 24px 4px,
    32px 16px;
}

.pixel-chicken::after {
  color: #dca642;
  box-shadow:
    36px 20px,
    16px 36px, 28px 36px;
}

.pixel-bee {
  color: #e0bf38;
  box-shadow:
    16px 12px, 20px 12px, 24px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px,
    16px 24px, 20px 24px, 24px 24px;
}

.pixel-bee::before {
  color: #1b1a13;
  box-shadow:
    16px 16px, 24px 16px,
    16px 20px, 24px 20px,
    32px 20px;
}

.pixel-bee::after {
  color: #d8efe9;
  box-shadow:
    8px 8px, 12px 8px, 28px 8px, 32px 8px,
    8px 12px, 12px 12px, 28px 12px, 32px 12px;
}

.pixel-goat {
  color: #d9d0b8;
  box-shadow:
    16px 8px, 24px 8px,
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    8px 16px, 12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px, 32px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px,
    16px 24px, 24px 24px,
    16px 28px, 24px 28px;
}

.pixel-goat::before {
  color: #10120c;
  box-shadow:
    16px 16px, 28px 16px,
    20px 24px;
}

.pixel-goat::after {
  color: #c8943b;
  box-shadow:
    12px 4px, 28px 4px,
    12px 8px, 28px 8px;
}

.pixel-ramp {
  color: #9f6a31;
  box-shadow:
    28px 8px,
    24px 12px, 28px 12px,
    20px 16px, 24px 16px, 28px 16px,
    16px 20px, 20px 20px, 24px 20px, 28px 20px,
    12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px,
    8px 28px, 12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px;
}

.pixel-ramp::before {
  color: #d8b15d;
  box-shadow:
    24px 16px,
    20px 20px, 28px 20px,
    16px 24px, 24px 24px,
    12px 28px, 20px 28px, 28px 28px;
}

.pixel-ramp::after {
  color: #10120c;
  box-shadow:
    8px 32px, 12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px, 32px 32px;
}

.pixel-forklift {
  color: #d9a83b;
  box-shadow:
    12px 12px, 16px 12px, 20px 12px,
    12px 16px, 16px 16px, 20px 16px, 28px 16px,
    8px 20px, 12px 20px, 16px 20px, 20px 20px, 28px 20px,
    8px 24px, 12px 24px, 16px 24px, 20px 24px, 28px 24px,
    12px 28px, 20px 28px;
}

.pixel-forklift::before {
  color: #10120c;
  box-shadow:
    8px 28px, 12px 28px, 20px 28px, 24px 28px,
    32px 8px, 32px 12px, 32px 16px, 32px 20px, 32px 24px, 36px 24px;
}

.pixel-forklift::after {
  color: #7c5725;
  box-shadow:
    8px 16px, 24px 16px,
    24px 20px, 24px 24px;
}

.pixel-clipboard {
  color: #d8c28c;
  box-shadow:
    16px 8px, 20px 8px, 24px 8px,
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px,
    12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px,
    12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px;
}

.pixel-clipboard::before {
  color: #10120c;
  box-shadow:
    16px 4px, 20px 4px, 24px 4px,
    16px 16px, 20px 16px, 24px 16px,
    16px 20px, 24px 20px,
    16px 24px, 20px 24px, 24px 24px;
}

.pixel-clipboard::after {
  color: #9b7742;
  box-shadow:
    12px 12px, 28px 12px,
    12px 16px, 28px 16px,
    12px 20px, 28px 20px,
    12px 24px, 28px 24px,
    12px 28px, 28px 28px;
}

.pixel-conveyor {
  color: #6f7580;
  box-shadow:
    8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px,
    8px 24px, 12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px, 32px 24px,
    12px 28px, 28px 28px;
}

.pixel-conveyor::before {
  color: #10120c;
  box-shadow:
    12px 20px, 20px 20px, 28px 20px,
    12px 24px, 20px 24px, 28px 24px,
    8px 28px, 12px 28px, 28px 28px, 32px 28px;
}

.pixel-conveyor::after {
  color: #d8c28c;
  box-shadow:
    16px 8px, 20px 8px, 24px 8px,
    16px 12px, 24px 12px,
    16px 16px, 20px 16px, 24px 16px;
}

.pixel-warehouse {
  color: #8a5a2b;
  box-shadow:
    20px 4px,
    16px 8px, 20px 8px, 24px 8px,
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    8px 16px, 12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px, 32px 16px,
    8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px,
    8px 24px, 12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px, 32px 24px,
    8px 28px, 12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px, 32px 28px;
}

.pixel-warehouse::before {
  color: #10120c;
  box-shadow:
    16px 20px, 20px 20px, 24px 20px,
    16px 24px, 24px 24px,
    16px 28px, 20px 28px, 24px 28px;
}

.pixel-warehouse::after {
  color: #c58b42;
  box-shadow:
    12px 16px, 20px 16px, 28px 16px,
    12px 20px, 28px 20px,
    12px 24px, 28px 24px;
}

.pixel-invoice {
  color: #ead8a8;
  box-shadow:
    12px 8px, 16px 8px, 20px 8px, 24px 8px,
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px,
    12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px,
    12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px;
}

.pixel-invoice::before {
  color: #10120c;
  box-shadow:
    16px 16px, 20px 16px, 24px 16px,
    16px 20px, 24px 20px,
    16px 24px, 20px 24px, 24px 24px;
}

.pixel-invoice::after {
  color: #78c86f;
  box-shadow:
    28px 8px, 32px 8px,
    28px 12px, 32px 12px,
    32px 16px;
}

.pixel-door {
  color: #7a4a24;
  box-shadow:
    12px 8px, 16px 8px, 20px 8px, 24px 8px, 28px 8px,
    12px 12px, 16px 12px, 20px 12px, 24px 12px, 28px 12px,
    12px 16px, 16px 16px, 20px 16px, 24px 16px, 28px 16px,
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px,
    12px 24px, 16px 24px, 20px 24px, 24px 24px, 28px 24px,
    12px 28px, 16px 28px, 20px 28px, 24px 28px, 28px 28px;
}

.pixel-door::before {
  color: #10120c;
  box-shadow:
    24px 20px,
    12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px;
}

.pixel-door::after {
  color: #d8c28c;
  box-shadow:
    16px 12px, 20px 12px, 24px 12px,
    16px 16px, 24px 16px;
}

.pixel-gravity {
  color: #8da544;
  box-shadow:
    20px 4px, 24px 4px,
    16px 8px, 20px 8px, 24px 8px, 28px 8px,
    16px 12px, 20px 12px, 24px 12px, 28px 12px,
    20px 16px, 24px 16px,
    20px 24px,
    20px 28px,
    20px 32px;
}

.pixel-gravity::before {
  color: #d8c28c;
  box-shadow:
    12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px;
}

.pixel-gravity::after {
  color: #10120c;
  box-shadow:
    20px 24px,
    16px 28px, 20px 28px, 24px 28px,
    12px 32px, 16px 32px, 20px 32px, 24px 32px, 28px 32px;
}

.pixel-pallet {
  color: #9f6a31;
  box-shadow:
    8px 12px, 12px 12px, 16px 12px, 24px 12px, 28px 12px, 32px 12px,
    8px 16px, 12px 16px, 16px 16px, 24px 16px, 28px 16px, 32px 16px,
    8px 24px, 12px 24px, 16px 24px, 24px 24px, 28px 24px, 32px 24px,
    8px 28px, 12px 28px, 16px 28px, 24px 28px, 28px 28px, 32px 28px;
}

.pixel-pallet::before {
  color: #10120c;
  box-shadow:
    8px 20px, 12px 20px, 16px 20px, 20px 20px, 24px 20px, 28px 20px, 32px 20px,
    16px 32px, 24px 32px;
}

.pixel-pallet::after {
  color: #d8b15d;
  box-shadow:
    12px 12px, 28px 12px,
    12px 24px, 28px 24px;
}

.pixel-empty-box {
  color: #c58b42;
  box-shadow:
    16px 8px, 20px 8px, 24px 8px,
    12px 12px, 16px 12px, 24px 12px, 28px 12px,
    8px 16px, 12px 16px, 28px 16px, 32px 16px,
    8px 20px, 12px 20px, 28px 20px, 32px 20px,
    12px 24px, 16px 24px, 24px 24px, 28px 24px,
    16px 28px, 20px 28px, 24px 28px;
}

.pixel-empty-box::before {
  color: #10120c;
  box-shadow:
    16px 12px, 20px 12px, 24px 12px,
    12px 16px, 16px 16px, 24px 16px, 28px 16px,
    12px 20px, 28px 20px,
    16px 24px, 20px 24px, 24px 24px;
}

.pixel-empty-box::after {
  color: #ead8a8;
  box-shadow:
    20px 16px,
    20px 20px;
}

.goblin-idle {
  animation: goblinBounce 1.7s ease-in-out infinite;
}

.sprite-idle {
  animation: spriteIdle 1.8s steps(2, end) infinite;
}

.crate-idle {
  animation: crateSettle 2.4s steps(2, end) infinite;
}

.package-wiggle {
  animation: packageWiggle 800ms steps(2, end) infinite;
}

.timer {
  grid-area: timer;
  color: var(--goblin);
  font-size: 1.05rem;
  font-weight: 900;
  white-space: nowrap;
}

.progress-track {
  grid-area: bar;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
}

.progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--goblin-dark), var(--goblin));
  transition: width 220ms linear;
}

.result-log {
  display: grid;
  max-height: none;
  overflow-y: visible;
  gap: 0;
  padding-right: 4px;
}

.incident-history-panel.is-expanded .result-log {
  max-height: 520px;
  overflow-y: auto;
}

.empty-log {
  color: var(--muted);
  line-height: 1.45;
}

.log-entry {
  padding: 13px 0;
  border: 0;
  border-top: 1px solid rgba(216, 194, 140, 0.13);
  border-left: 0;
  border-radius: 0;
  background: transparent;
  animation: slideFade 260ms ease both;
}

.log-entry.failure {
  border-top-color: rgba(217, 106, 76, 0.38);
}

.log-entry.success {
  border-top-color: rgba(120, 200, 111, 0.36);
}

.log-entry.chaos {
  border-top-color: rgba(217, 184, 76, 0.36);
}

.log-entry.cleanSuccess {
  border-top-color: rgba(120, 200, 111, 0.36);
}

.log-entry.messySuccess {
  border-top-color: rgba(169, 133, 79, 0.4);
}

.log-entry.profitableDisaster {
  border-top-color: rgba(217, 184, 76, 0.45);
}

.log-entry.weirdIncident {
  border-top-color: rgba(156, 141, 232, 0.38);
}

.log-entry.new-failure {
  animation: slideFade 260ms ease both, failureShake 320ms ease 280ms;
}

.log-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.log-time {
  color: var(--muted);
  font-size: 0.78rem;
}

.tag {
  padding: 3px 7px;
  border-radius: 999px;
  color: #15150e;
  font-size: 0.7rem;
  font-weight: 900;
}

.tag.success {
  background: var(--success);
}

.tag.failure {
  background: var(--danger);
}

.tag.chaos {
  background: var(--chaos);
}

.tag.cleanSuccess {
  background: var(--success);
}

.tag.messySuccess {
  background: var(--paper-dark);
}

.tag.profitableDisaster {
  background: var(--chaos);
}

.tag.weirdIncident {
  color: var(--ink);
  background: #6a5ac5;
}

.log-entry h3 {
  margin-bottom: 6px;
  color: var(--paper);
  font-size: 1rem;
}

.log-entry p {
  color: var(--ink);
  line-height: 1.35;
}

.incident-history-panel:not(.is-expanded) .log-entry p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.incident-history-panel:not(.is-expanded) .log-notes {
  display: none;
}

.log-notes {
  display: grid;
  gap: 4px;
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.gold-delta {
  margin-top: 8px;
  color: var(--goblin);
  font-weight: 800;
}

.gold-delta.negative {
  color: var(--danger);
}

@keyframes activePulse {
  0%, 100% { border-color: rgba(139, 214, 80, 0.35); }
  50% { border-color: rgba(139, 214, 80, 0.85); }
}

@keyframes goblinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes spriteIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes crateSettle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

@keyframes packageWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes slideFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes goldPop {
  0% { transform: scale(1); color: var(--ink); }
  45% { transform: scale(1.24); color: var(--chaos); }
  100% { transform: scale(1); color: var(--ink); }
}

@keyframes failureShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 920px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .primary-column,
  .feed-column {
    order: 1;
  }

  .sidebar,
  .management-column {
    order: 2;
    position: static;
  }

  .mission-grid {
    grid-template-columns: 1fr;
  }

  .mission-card {
    min-height: auto;
  }

  .active-mission-list {
    grid-template-columns: 1fr;
  }

  .latest-incident-panel {
    order: 1;
  }

  .compact-dispatch-board {
    order: 2;
  }

  .active-panel {
    order: 3;
  }

  .incident-history-panel {
    order: 3;
  }

  .management-column .active-panel {
    order: 1;
  }

  .management-column .ledger-panel {
    order: 2;
  }

  .management-column .workforce-panel {
    order: 3;
  }

  .management-column .company-panel {
    order: 4;
  }
}

@media (max-width: 560px) {
  .page-shell {
    width: min(100% - 20px, 1180px);
    padding: 10px 0;
  }

  .site-header {
    align-items: flex-start;
    padding: 16px;
  }

  .brand-mark {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .dispatch-board,
  .panel,
  .management-card {
    padding: 14px;
  }

  .world-event-card,
  .latest-incident-meta,
  .dispatch-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .latest-incident-subject {
    align-items: flex-start;
  }

  .empty-latest {
    grid-template-columns: 1fr;
  }

  .assignment-control {
    grid-template-columns: 1fr;
  }

  .latest-story {
    font-size: 1rem;
  }
}

body {
  overflow: auto;
}

.app-shell {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  width: min(1240px, calc(100% - 24px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 12px 0;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 86px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px 8px 0 0;
  background: rgba(51, 45, 32, 0.76);
}

.brand-cluster {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 14px;
}

.brand-cluster h1 {
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.brand-cluster p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

.header-status {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 8px;
  align-items: center;
  justify-content: end;
}

.header-stat {
  min-width: 76px;
  padding: 7px 9px;
  border: 1px solid rgba(216, 194, 140, 0.14);
  border-radius: 8px;
  background: rgba(20, 22, 15, 0.36);
}

.header-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
}

.header-stat strong {
  display: block;
  margin-top: 2px;
  color: var(--paper);
  font-size: 0.86rem;
  white-space: nowrap;
}

.event-stat {
  min-width: 170px;
}

.back-site-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(216, 194, 140, 0.2);
  border-radius: 8px;
  background: rgba(241, 198, 110, 0.14);
  color: var(--paper);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.back-site-link:hover {
  transform: rotate(-1deg) translateY(-1px);
}

.back-site-link:focus-visible {
  outline: 3px solid rgba(241, 198, 110, 0.4);
  outline-offset: 2px;
}

.tab-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-inline: 1px solid rgba(216, 194, 140, 0.16);
  background: rgba(31, 34, 24, 0.9);
}

.tab-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(216, 194, 140, 0.12);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(20, 22, 15, 0.34);
  cursor: pointer;
  font-weight: 800;
}

.tab-button.is-active {
  color: #13200e;
  border-color: rgba(139, 214, 80, 0.7);
  background: linear-gradient(180deg, var(--goblin), #6cb83d);
}

.onboarding-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.5fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-inline: 1px solid rgba(216, 194, 140, 0.16);
  border-top: 1px solid rgba(216, 194, 140, 0.12);
  background: rgba(139, 214, 80, 0.07);
}

.onboarding-panel[hidden] {
  display: none;
}

.onboarding-copy strong {
  display: block;
  color: var(--paper);
  font-size: 0.95rem;
}

.onboarding-copy p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.onboarding-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.onboarding-checklist div {
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(216, 194, 140, 0.12);
  border-radius: 7px;
  background: rgba(20, 22, 15, 0.28);
}

.onboarding-checklist div.is-done {
  border-color: rgba(139, 214, 80, 0.24);
  background: rgba(139, 214, 80, 0.1);
}

.onboarding-checklist span,
.onboarding-checklist small {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.15;
}

.onboarding-checklist span {
  color: var(--goblin);
  font-weight: 900;
  text-transform: uppercase;
}

.onboarding-checklist strong {
  display: block;
  margin: 1px 0;
  color: var(--paper);
  font-size: 0.72rem;
  line-height: 1.15;
}

.onboarding-panel button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(240, 212, 128, 0.26);
  border-radius: 7px;
  color: #f0d480;
  background: rgba(20, 22, 15, 0.32);
  cursor: pointer;
  font-weight: 900;
  white-space: nowrap;
}

.tab-content {
  min-height: 0;
  overflow: visible;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 0 0 8px 8px;
  background: rgba(32, 29, 21, 0.72);
}

.tab-panel {
  display: none;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 16px;
}

.tab-panel.is-active {
  display: grid;
}

.incident-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  gap: 14px;
}

.world-event-banner {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
}

.latest-incident-panel {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
  padding: 18px;
}

.latest-incident-card {
  gap: 14px;
}

.latest-incident-card .gold-delta {
  margin-top: 0;
}

.latest-story {
  overflow: hidden;
  font-size: clamp(1rem, 2vh, 1.2rem);
  line-height: 1.55;
}

.incident-feed {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(216, 194, 140, 0.12);
  border-radius: 8px;
  background: transparent;
}

.incident-feed .dispatch-heading {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 8px;
  gap: 8px;
}

.incident-feed .inline-toggle {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-history {
  min-height: 0;
  overflow: hidden;
}

.incident-history .log-entry:nth-child(n+4) {
  display: none;
}

.incident-history .log-entry {
  padding: 10px 0;
  min-width: 0;
}

.incident-history .log-entry h3 {
  overflow: hidden;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-history .log-entry p {
  font-size: 0.88rem;
}

.incident-history .log-topline {
  align-items: flex-start;
  gap: 6px;
}

.incident-history .log-time {
  flex: 0 0 auto;
  max-width: 72px;
  overflow: hidden;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.dispatch-tab-layout {
  display: grid;
  grid-template-rows: minmax(112px, auto) auto;
  min-height: 0;
  gap: 14px;
}

.dispatch-tab-layout .active-panel {
  overflow: visible;
}

.tab-section,
.compact-job-list {
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 8px;
  background: rgba(51, 45, 32, 0.62);
}

.compact-job-list {
  display: grid;
  grid-template-rows: auto auto;
  overflow: visible;
}

.compact-mission-grid {
  min-height: 0;
  overflow: visible;
  padding-right: 6px;
  gap: 6px;
}

.compact-job-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr) 116px;
  grid-template-areas:
    "summary assignment action"
    "details assignment action";
  align-items: start;
  gap: 8px 12px;
  padding: 10px 0;
  min-width: 0;
}

.compact-job-row .compact-mission-top {
  grid-area: summary;
  min-width: 0;
}

.contract-detail-stack {
  grid-area: details;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-left: 70px;
}

.contract-detail-stack > * {
  min-width: 0;
}

.contract-detail-stack .compact-mission-meta {
  margin: 0;
}

.contract-taxonomy,
.contract-context-chips,
.contract-reward-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.contract-taxonomy {
  margin-top: 3px;
}

.contract-taxonomy > span:first-child {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-context-chips span {
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid rgba(216, 194, 140, 0.16);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(216, 194, 140, 0.07);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.contract-context-chips span.is-warning {
  color: #f08a58;
  border-color: rgba(240, 138, 88, 0.28);
  background: rgba(240, 138, 88, 0.08);
}

.contract-reward-strip {
  padding: 5px 7px;
  border-radius: 6px;
  color: var(--muted);
  background: rgba(20, 22, 15, 0.26);
  font-size: 0.72rem;
  font-weight: 900;
}

.contract-reward-strip strong {
  color: #f0d480;
}

.contract-assignment-stack {
  grid-area: assignment;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.contract-assignment-stack > * {
  min-width: 0;
}

.compact-job-row .assignment-control {
  margin: 0;
}

.compact-job-row .selected-goblin-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.compact-job-row .trait-bonus {
  display: none;
}

.compact-job-row .start-button {
  grid-area: action;
  min-height: 44px;
  width: 100%;
}

.contract-row {
  grid-template-columns: minmax(220px, 1.1fr) minmax(260px, 1fr) 104px;
}

.contract-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.contract-tags span {
  padding: 2px 5px;
  border: 1px solid rgba(139, 214, 80, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(20, 22, 15, 0.18);
  font-size: 0.62rem;
  font-weight: 800;
}

.staff-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.staff-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  padding-right: 0;
}

#tab-staff .workforce-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

#tab-staff .goblin-card {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  min-height: 126px;
  padding: 12px;
  align-items: start;
}

#tab-staff .goblin-card-icon {
  width: 58px;
  height: 58px;
  margin-top: 4px;
}

#tab-staff .goblin-face-frame {
  width: 52px;
  height: 52px;
}

#tab-staff .goblin-face-svg {
  width: 48px;
  height: 48px;
}

#tab-staff .goblin-card h3 {
  font-size: 0.96rem;
}

#tab-staff .goblin-card-heading {
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
}

#tab-staff .status-pill {
  justify-self: end;
  max-width: 128px;
  min-width: 78px;
}

#tab-staff .goblin-card p,
#tab-staff .goblin-memory {
  font-size: 0.76rem;
}

#tab-staff .goblin-memory {
  max-height: 2.4em;
  -webkit-line-clamp: 2;
}

.company-tab-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  min-height: 0;
  gap: 14px;
}

.upgrade-list {
  max-height: none;
  min-height: 0;
  overflow: visible;
}

#tab-company .company-panel {
  display: grid;
  grid-template-rows: auto auto auto;
  min-height: 0;
  overflow: visible;
}

.hidden-control {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(9, 10, 7, 0.72);
}

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

.archive-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(820px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  padding: 18px;
  border: 1px solid rgba(216, 194, 140, 0.26);
  border-radius: 8px;
  background: rgba(51, 45, 32, 0.98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.contracts-modal {
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(980px, 100%);
}

.modal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.archive-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.contract-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.filter-chip {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(139, 214, 80, 0.28);
  border-radius: 999px;
  color: var(--goblin);
  background: rgba(20, 22, 15, 0.42);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.filter-chip.is-active {
  color: #13200e;
  background: linear-gradient(180deg, var(--goblin), #6cb83d);
}

.contracts-list {
  display: grid;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.contract-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) 92px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgba(216, 194, 140, 0.13);
}

.contract-main {
  min-width: 0;
}

.contract-title-line {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.contract-main h3 {
  overflow: hidden;
  color: var(--paper);
  font-size: 0.98rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-main p {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rarity-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #17140e;
  background: #d8c28c;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.rarity-risky {
  color: #201205;
  background: #f0a94f;
}

.rarity-illegal {
  color: #f6eed7;
  background: #8f4eb8;
}

.rarity-legendary {
  color: #150a08;
  background: #f06b58;
}

.contract-rarity-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.contract-rarity-flavor {
  color: var(--muted);
}

.contract-event-note {
  margin-top: 5px;
  color: #f0d480;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.contract-gate-note {
  margin-top: 5px;
  color: #f08a58;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.chain-match-note,
.rival-contract-note,
.rival-sponsor-note {
  margin-top: 5px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.chain-match-note {
  color: #f0d480;
}

.rival-contract-note {
  color: #f08a58;
}

.rival-sponsor-note {
  color: #9fdb65;
}

.client-type-line {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.client-type-line span {
  display: block;
  color: #f0d480;
  font-weight: 900;
  text-transform: uppercase;
}

.client-type-line p {
  margin-top: 2px;
  overflow: visible;
  white-space: normal;
}

.contract-modifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.contract-modifiers span {
  padding: 3px 6px;
  border: 1px solid rgba(240, 212, 128, 0.2);
  border-radius: 999px;
  color: #f0d480;
  background: rgba(240, 212, 128, 0.08);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.prep-control {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.prep-control select {
  min-height: 32px;
  border: 1px solid rgba(216, 194, 140, 0.28);
  border-radius: 8px;
  color: var(--ink);
  background: #1f2117;
}

.prep-description {
  margin: -3px 0 7px;
  overflow: visible;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: normal;
}

.contract-list-row .compact-mission-meta {
  margin: 5px 0 0;
}

.contract-list-row .compact-mission-meta span {
  padding: 3px 6px;
  font-size: 0.7rem;
}

.contract-list-row .contract-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.contract-assignment {
  grid-template-columns: 52px minmax(0, 1fr);
  margin: 0;
}

.contract-list-row .start-button {
  min-height: 38px;
}

@media (max-width: 860px) {
  .app-shell {
    width: min(100% - 16px, 1240px);
    padding: 8px 0;
  }

  .app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-status {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .event-stat {
    min-width: 0;
  }

  .tab-nav {
    overflow-x: auto;
  }

  .tab-button {
    flex: 0 0 auto;
  }

  .onboarding-panel {
    grid-template-columns: 1fr;
  }

  .onboarding-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tab-panel {
    padding: 10px;
  }

  .incident-tab-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .world-event-banner,
  .latest-incident-panel,
  .incident-feed {
    grid-column: 1;
  }

  .world-event-banner {
    grid-row: 1;
  }

  .latest-incident-panel {
    grid-row: 2;
  }

  .incident-feed {
    grid-row: 3;
    max-height: 30vh;
    overflow: hidden;
  }

  .company-tab-layout,
  .staff-toolbar {
    grid-template-columns: 1fr;
  }

  .staff-list {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .compact-job-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "details"
      "assignment"
      "action";
  }

  .contract-detail-stack {
    padding-left: 0;
  }

  .contract-detail-stack .compact-mission-meta {
    margin: 8px 0 0;
  }

  .contract-reward-strip,
  .contract-context-chips,
  .contract-taxonomy {
    align-items: flex-start;
  }

  .contract-reward-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .weekly-objectives,
  .company-record-grid,
  .reputation-panel {
    grid-template-columns: 1fr;
  }

  .season-heading,
  .season-meta,
  .company-identity-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .contract-list-row {
    grid-template-columns: 1fr;
  }

  .onboarding-checklist {
    grid-template-columns: 1fr;
  }

  .contract-assignment {
    grid-template-columns: 1fr;
  }

  .brand-mark {
    width: 52px;
    height: 52px;
  }
}