:root {
  --ink: #142a40;
  --ink-2: #1d3b54;
  --ink-3: #31546a;
  --paper: #fff0cc;
  --paper-2: #f0d8a5;
  --paper-3: #b98d4b;
  --white: #fff9e8;
  --coral: #e96244;
  --coral-dark: #a33b2c;
  --mustard: #e6b54b;
  --jade: #5f8845;
  --good: #6e9b48;
  --bad: #bd4d37;
  --line: #694927;
  --muted: #75654d;
  --pixel-border: 3px solid var(--line);
  --frame-shadow: inset 0 0 0 2px #fff8dd, inset 0 -5px #e8c78b, 3px 3px 0 #513b27;
  --command-height: 254px;
  color-scheme: light;
  font: 14px/1.4 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
html { background: #091825; }
body { display: grid; place-items: center; min-width: 320px; color: var(--ink); -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; }
button:disabled { cursor: default; opacity: .45; filter: saturate(.4); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #327abb; outline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
button svg { pointer-events: none; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
strong, b { font-weight: 850; }
button, .paper-card { border-radius: 2px; }
.positive { color: #3d7134; }
.negative { color: #b43b2a; }

/* The entire game is one phone screen. Every collection is paginated in JS. */
.page-shell {
  display: grid;
  grid-template-rows: calc(48px + env(safe-area-inset-top)) minmax(0, 1fr) calc(68px + env(safe-area-inset-bottom));
  width: min(100%, 460px);
  height: 100dvh;
  max-height: 1040px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 0 1px #39516a, 0 18px 90px #0008;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: env(safe-area-inset-top) 12px 0; color: var(--paper); background: linear-gradient(#17364f, #102438); border-bottom: 3px solid #081a29; box-shadow: inset 0 2px #38556a; }
.brand-lockup { min-width: 0; }
.brand-kicker, .eyebrow { display: none; }
h1 { color: #ffe6ab; font-size: clamp(20px, 5.7vw, 25px); font-weight: 900; letter-spacing: .01em; white-space: nowrap; text-shadow: 2px 2px #091b2b; }
h1 span { display: none; }
.time-cluster { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.time-cluster strong { display: block; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.speed-button, .chip-button { display: grid; min-width: 44px; min-height: 44px; place-items: center; border: 2px solid #758694; background: #112639; color: #ffedbf; box-shadow: inset 0 0 0 2px #233e56, 2px 2px #071420; font-weight: 900; }
.speed-button { font-size: 20px; }
.game-frame { display: grid; grid-template-rows: 62px minmax(0, 1fr) var(--command-height); min-height: 0; overflow: hidden; }
.status-strip { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 5px; padding: 3px 5px 5px; background: #152f45; }
.stat { display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border: 2px solid #946735; background: linear-gradient(#fff3d4, #f5dda9); box-shadow: inset 0 0 0 2px #fff8dc, inset 0 -3px #d9b775, 2px 2px #081a28; }
.stat-icon { display: grid; width: 29px; height: 32px; place-items: center; color: #8fb361; filter: drop-shadow(1px 2px #7c5528); }
.stat:nth-child(2) .stat-icon { color: #f0bd4c; }
.stat:nth-child(3) .stat-icon { color: #ecb94a; }
.stat-icon svg { width: 31px; height: 31px; overflow: visible; }
.stat-icon path { fill: currentColor; stroke: #523c27; stroke-width: 1.5; stroke-linejoin: miter; }
.stat-copy { min-width: 0; }
.stat-copy > span { display: block; font-size: 12px; font-weight: 850; line-height: 1.2; }
.stat-copy > strong { display: block; overflow: hidden; font-size: clamp(18px, 4.7vw, 22px); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.stat:first-child .stat-copy > strong { color: #3e6d36; }
.stat:nth-child(3) .stat-copy > strong { color: #285e88; }
.stat-copy > small { display: none; }
.stat strong.is-changing { animation: stat-pop 320ms ease-out; }

.office-card { position: relative; min-height: 0; overflow: hidden; border-block: 2px solid #112b2d; background: #477d2a; }
#office-game, #office-game canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.scene-topline { position: absolute; inset: 8px 9px auto; display: flex; align-items: start; justify-content: space-between; gap: 8px; pointer-events: none; }
.scene-topline > div { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 2px solid #60462d; background: #fff1cfed; color: #2f4937; box-shadow: inset 0 0 0 1px #fff9e4, 2px 2px #203b2680; }
.scene-topline span { font-size: 12px; font-weight: 850; }
.scene-topline b { color: #a55130; font-size: 12px; }
.scene-topline .chip-button { min-height: 44px; padding: 3px 9px; border-color: #674626; background: #fff1c9; color: #4d3b26; font-size: 12px; box-shadow: inset 0 0 0 2px #fff8dd, 2px 2px #29452c99; pointer-events: auto; }
.scene-live { position: absolute; left: 10px; bottom: 9px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 20px); padding: 5px 8px; border: 2px solid #50633b; background: #fff2cdeb; color: #344b2f; box-shadow: 2px 2px #203b2666; pointer-events: none; }
.scene-live i { width: 6px; height: 6px; flex: 0 0 auto; background: #67904a; box-shadow: 0 0 0 1px #375c30; animation: live-beat 1400ms steps(2) infinite; }
.scene-live strong { font-size: 12px; }
.scene-live span { display: none; }
.office-card.is-paused .scene-live i { background: var(--mustard); animation-play-state: paused; }
.active-project-ribbon { display: none; }
.feedback-banner { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 42px; width: min(calc(100% - 24px), 346px); margin-inline: auto; padding: 8px 10px; border: 2px solid #71522f; background: #fff0ccf5; color: #2f402f; box-shadow: inset 0 0 0 2px #fff9e3, 3px 3px #1d352b80; pointer-events: none; animation: feedback-arrive 160ms steps(3); }
.feedback-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feedback-heading > div { min-width: 0; }
.feedback-heading strong { display: block; overflow: hidden; font-size: 17px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.feedback-heading span:not(.staff-avatar-frame) { display: block; color: #78643e; font-size: 11px; }
.feedback-mark { display: grid !important; place-items: center; flex: 0 0 32px; height: 32px; border: 2px solid #7b8b4b; background: #dbe5a9; color: #47733a !important; font-size: 23px !important; font-weight: 900; }
.feedback-banner .feedback-avatar { width: 36px; height: 44px; border-width: 1px; }
.feedback-banner .feedback-avatar .staff-sprite { width: 32px; height: 40px; max-width: 32px; filter: none; }
.feedback-banner p { margin-top: 5px; font-size: 11px; line-height: 1.35; color: #6d654c; }
.feedback-changes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.feedback-changes > span { padding: 3px 4px; border: 1px solid #b6b783; background: #e5e9bf; font-size: 11px; white-space: nowrap; }
.feedback-changes em { color: #51763b; font-style: normal; font-weight: 850; }
.feedback-costs { display: block; margin-top: 4px; font-size: 10px; color: #896744; }
@keyframes feedback-arrive { from { transform: translateY(4px); opacity: .2; } to { transform: none; opacity: 1; } }
.guide-nudge { position: absolute; z-index: 2; inset: auto 8px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 5px; min-height: 52px; padding: 4px 4px 4px 8px; border: 2px solid #7c8659; background: #f4edcbee; box-shadow: 2px 2px #213c2b66; }
.guide-nudge p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #526041; font-size: 11px; line-height: 1.4; }
.guide-nudge button { min-width: 44px; min-height: 44px; max-width: 108px; padding: 4px 7px; border: 1px solid #98a166; background: #dce4b8; color: #466233; font-size: 11px; font-weight: 850; }
.guide-nudge .guide-dismiss { width: 44px; padding: 0; border-color: transparent; background: transparent; font-size: 20px; }
.office-card.has-guide:not(.has-feedback) .scene-live { display: none; }
.office-card.has-feedback .guide-nudge { display: none; }
.guide-help { display: grid; gap: 14px; color: #726548; font-size: 13px; line-height: 1.55; }
.guide-fact { padding: 10px; border: 1px solid #acb477; background: #e9ecc8; }
.guide-fact strong, .guide-fact small { display: block; }
.guide-fact .production-burst { margin-block: 7px; }
.guide-fact small { color: #7b7954; font-size: 11px; }

/* Cream command panel mirrors the approved production-screen concept. */
.content-panel { display: flex; flex-direction: column; gap: 7px; min-height: 0; padding: 10px 12px 12px; overflow: hidden; border: 3px solid var(--line); border-top-color: #9c773e; background: var(--paper); box-shadow: inset 0 0 0 2px #fff8e1, inset 0 -4px #dfbd80; }
.command-head, .command-heading { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 10px; min-height: 31px; }
.command-head > div, .command-heading > div { flex: 1; min-width: 0; }
.command-head span, .command-heading span { display: block; color: #86653f; font-size: 11px; line-height: 1.2; }
.command-head h2, .command-heading h2 { overflow: hidden; color: var(--ink); font-size: 19px; line-height: 1.25; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.command-head > b, .command-heading > b { flex: 0 0 auto; color: #d26731; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.command-heading .artifact { width: 40px; min-height: 40px; height: 40px; flex: 0 0 auto; }
.output-grid, .production-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 0 auto; gap: 7px; }
.output-grid > div, .metric-tile { --metric: #d4a132; --metric-bg: #f9e4aa; min-width: 0; padding: 6px 7px; border: 2px solid #c09950; background: var(--metric-bg); box-shadow: inset 0 0 0 1px #fff6d7; }
.metric-tile[data-axis="visual"], .output-grid > div:nth-child(2) { --metric: #659348; --metric-bg: #e1e7b5; border-color: #93a46b; }
.metric-tile[data-axis="conversion"], .output-grid > div:nth-child(3) { --metric: #d37750; --metric-bg: #f4cdae; border-color: #c89169; }
.metric-tile[data-axis="delivery"], .output-grid > div:nth-child(4) { --metric: #4c85ac; --metric-bg: #d1e1e5; border-color: #819fad; }
.output-grid span, .metric-tile > span { display: block; color: var(--ink); font-size: 13px; font-weight: 850; white-space: nowrap; }
.output-grid strong, .metric-tile > strong { display: block; margin: 1px 0 4px; color: #213329; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.output-grid i, .metric-tile > i { display: block; height: 7px; overflow: hidden; border: 1px solid var(--metric); border-radius: 2px; background: #ffffff60; }
.output-grid i b, .metric-tile > i b { display: block; height: 100%; background: var(--metric); transition: width 300ms steps(5); }
.metric-tile svg { width: 17px; height: 17px; vertical-align: -3px; }
.focus-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 0 0 auto; gap: 7px; }
.focus-choice { position: relative; min-height: 44px; padding: 5px 4px; border: 2px solid #ab8347; background: #fae7b9; color: #20374b; font-size: 13px; font-weight: 850; box-shadow: inset 0 0 0 1px #fff6d7, inset 0 -3px #e4c385, 2px 2px #a07d49; }
.focus-choice strong, .focus-choice span { display: block; }
.focus-choice strong { font-size: 13px; line-height: 1.25; }
.focus-choice span { margin-top: 3px; font-size: 10px; line-height: 1.2; font-weight: 650; opacity: .8; }
.focus-choice.is-selected { border-color: #46622e; background: #71984a; color: #fffadf; box-shadow: inset 0 0 0 2px #c6d68d, inset 0 -3px #4c7433, 2px 2px #435a2b; }
.focus-choice.is-selected::after { content: "✓"; position: absolute; right: -3px; bottom: -3px; display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #eee7b2; border-radius: 50%; background: #426631; color: #fff8d8; font-size: 11px; }
.stage-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 0 0 auto; gap: 5px; padding: 2px 0; }
.stage-step { position: relative; min-width: 0; color: #8d7f61; text-align: center; }
.stage-step:not(:last-child)::after { content: "›"; position: absolute; top: 0; right: -6px; color: #b49661; font-size: 20px; font-weight: 900; }
.stage-step i { display: grid; width: 23px; height: 23px; margin: 0 auto 2px; place-items: center; border: 2px solid #b39a6b; border-radius: 50%; background: #fff3d0; font-size: 11px; font-style: normal; font-weight: 850; }
.stage-step span { display: block; overflow: hidden; font-size: 10px; font-weight: 750; line-height: 1.15; white-space: nowrap; }
.stage-step.is-current { color: #3c6a33; }
.stage-step.is-current i, .stage-step.is-done i { border-color: #577b3b; background: #dce7b2; color: #31542b; }
.game-status { overflow: hidden; padding: 5px 8px; border: 1px solid #c09c5e; background: #f4dfb4; color: #66583f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.production-burst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; animation: card-arrive 220ms ease-out; }
.production-burst span { overflow: hidden; padding: 2px; border: 1px solid #c0ac77; background: #ede5bb; color: #5c623b; font-size: 10px; text-align: center; white-space: nowrap; }
.production-burst b { color: #397037; }
.company-actions { display: flex; gap: 8px; }
.company-actions > button { flex: 1; min-width: 0; }
.command-primary { flex: 0 0 auto; width: 100%; }
.company-mini-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #c4a56b; background: #f1ddb0; }
.company-mini-row > div { min-width: 0; padding: 5px 6px; border: 1px solid #c4a56b; background: #f1ddb0; }
.company-mini-row span, .company-mini-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-mini-row span { color: #887451; font-size: 11px; }
.company-mini-row strong { color: #384939; font-size: 12px; }
.mission-card { display: grid; gap: 7px; padding: 10px; border: 2px solid #ac8d4c; background: #f6e6b9; box-shadow: inset 0 0 0 2px #fff6d5; }
.mission-card h3 { font-size: 18px; }
.mission-card p { color: #726044; font-size: 12px; }
.mission-label { color: #a8602d; font-size: 11px; font-weight: 850; }
.mission-card .primary-button { width: 100%; }
.compact-utilities { display: none; }
.legacy-banner { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid #9e8d4f; background: #e3dda3; font-size: 11px; }
.legacy-banner i { color: #9c5b28; font-size: 18px; font-style: normal; }
.legacy-banner span, .legacy-banner small { display: none; }

.primary-button, .secondary-button, .text-button, .danger-button { min-height: 44px; padding: 7px 14px; border: 2px solid #674627; font-weight: 850; line-height: 1.2; box-shadow: inset 0 0 0 1px #ffffff66, inset 0 -3px #00000012, 2px 3px #7b562e; }
.primary-button { border-color: #8f3c2b; background: var(--coral); color: #fff9e9; text-shadow: 1px 1px #9e442b; }
.secondary-button { background: #ffedc0; color: #403723; }
.text-button { min-height: 44px; padding: 7px 10px; border-color: #b69964; background: #f5e4bc; color: #4d583f; box-shadow: inset 0 0 0 1px #fff7d8, 1px 2px #b0925b; }
.danger-button { background: #f3d4bf; color: #9d3b2b; border-color: #ab7051; }
button { transition: transform 100ms ease-out, filter 100ms ease-out, background-color 100ms ease-out; }
button:active:not(:disabled) { transform: translate(1px, 2px); }

/* One visible record per category, with large explicit previous/next controls. */
.panel-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.panel-head > div { min-width: 0; }
.panel-head h2 { font-size: 19px; line-height: 1.1; }
.panel-head p { overflow: hidden; margin-top: 3px; color: #8a7451; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.panel-pager, .setup-option-pager { display: grid; grid-template-columns: 44px auto 44px; align-items: center; gap: 6px; flex: 0 0 auto; }
.panel-pager button, .setup-option-pager button { display: grid; width: 44px; min-height: 44px; padding: 0; place-items: center; border: 2px solid #ab8750; background: #ffedc3; color: #4b402b; font-size: 24px; line-height: 1; box-shadow: inset 0 0 0 1px #fff7df, 2px 2px #b3955a; }
.panel-pager span, .setup-option-pager span, .page-count { color: #847047; font-size: 12px; font-weight: 850; white-space: nowrap; }
.single-card-stage { flex: 1; min-height: 0; animation: card-arrive 180ms ease-out; }
.paper-card { padding: 10px; border: 2px solid #b39057; background: #fff4d6; color: var(--ink); box-shadow: inset 0 0 0 1px #fffbe9, 2px 2px #c5a168; }
.paper-card h3 { font-size: 18px; line-height: 1.25; }
.paper-card p { color: #716448; font-size: 12px; line-height: 1.4; }
.offer-card { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; overflow: hidden; }
.offer-kicker { display: flex; justify-content: space-between; gap: 8px; color: #966638; font-size: 11px; font-weight: 850; }
.offer-card h3 { flex-shrink: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.offer-card > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.offer-meta { display: flex; flex-wrap: nowrap; gap: 5px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 6px; background: #efdeb8; color: #6b623f; font-size: 11px; font-weight: 700; white-space: nowrap; }
.offer-signals { display: none; }
.offer-footer { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 9px; margin-top: auto; padding-top: 6px; border-top: 1px solid #dcc599; }
.offer-money strong, .offer-money span { display: block; }
.offer-money strong { color: #3d7239; font-size: 19px; line-height: 1.2; }
.offer-money span { color: #8f7b57; font-size: 11px; }
.offer-footer .primary-button { min-height: 44px; font-size: 13px; }
.active-detail-card .compact-output { margin: 0; }
.active-detail-card .stage-status, .active-detail-foot { color: #78674b; font-size: 11px; }
.active-detail-card .stage-status { display: none; }
.active-detail-card .output-grid strong { font-size: 23px; }
.active-detail-card .stage-rail { margin: 0; }
.active-detail-foot { display: flex; justify-content: space-between; gap: 6px; overflow: hidden; white-space: nowrap; }
.active-detail-foot strong { overflow: hidden; text-overflow: ellipsis; }
.roster-state { display: inline-block; margin: 0 0 6px; padding: 2px 7px; border: 1px solid #bf9061; background: #efd6ae; color: #9c6131; font-size: 11px; font-weight: 850; }
.roster-state.is-owned { border-color: #9da367; background: #e4e6b7; color: #55703a; }
.staff-card, .client-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 2px solid #b9975d; background: #fff2cf; box-shadow: inset 0 0 0 1px #fff9e1; }
.staff-card.compact-staff-card { grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: 18px 84px 44px; gap: 3px 9px; min-height: 0; padding: 5px; }
.compact-staff-card .staff-heading { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.compact-staff-card .staff-heading strong { flex-shrink: 0; font-size: 15px; line-height: 18px; }
.compact-staff-card .staff-heading span { overflow: hidden; color: #89704b; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.compact-staff-card .staff-copy { align-self: center; }
.compact-staff-card .staff-copy > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0; }
.compact-staff-card .staff-copy .staff-focus { white-space: nowrap; font-size: 11px; }
.compact-staff-card .staff-actions { display: flex; grid-column: 1 / -1; gap: 5px; margin: 0; }
.compact-staff-card .staff-actions > button { flex: 1; min-width: 0; min-height: 44px; padding: 4px; }
.staff-copy, .client-copy { min-width: 0; }
.staff-copy strong, .client-copy strong { display: block; font-size: 16px; }
.staff-copy > span, .client-copy > span, .client-copy > small { display: block; margin-top: 3px; color: #7b6b50; font-size: 11px; line-height: 1.4; }
.staff-focus { display: block; margin-top: 4px; color: #8b682f; font-size: 11px; }
.staff-skills { color: #827041; font-size: 12px; text-align: right; }
.staff-skills > .primary-button { min-height: 44px !important; }
.staff-actions { display: flex; gap: 5px; margin-top: 5px; }
.staff-actions .text-button { min-width: 44px; min-height: 44px; padding: 4px 6px; font-size: 11px; }
.avatar, .staff-avatar-frame { display: grid; width: 62px; height: 76px; flex: 0 0 auto; align-items: end; justify-items: center; overflow: hidden; border: 2px solid #9c7f4d; background: linear-gradient(#faeecb, var(--avatar, #d7d89c)); box-shadow: inset 0 0 0 2px #fff7d9, 2px 2px #b29054; }
.staff-avatar-frame { width: 68px; height: 84px; }
.avatar { height: 60px; align-items: center; color: #443b29; font-size: 26px; font-weight: 900; }
.staff-sprite { display: block; width: 64px; max-width: 64px; height: 80px; object-fit: contain; object-position: center bottom; image-rendering: pixelated; }
.dual-meter { display: grid; gap: 3px; margin-top: 5px; }
.dual-meter label { display: flex; align-items: center; gap: 5px; color: #8b7d5b; font-size: 10px; }
.dual-meter i, .tiny-meter { display: block; flex: 1; height: 5px; overflow: hidden; background: #d8ca99; }
.dual-meter b, .tiny-meter i { display: block; height: 100%; background: #86a35a; }
.dual-meter label:nth-child(2) b { background: #ceaa4d; }
.tiny-meter { width: 90px; margin-top: 6px; }
.team-links { display: flex; gap: 4px; margin-top: 4px; }
.team-links em { color: #66803f; font-size: 10px; font-style: normal; }
.featured-client { min-height: 156px; }
.archive-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; width: 100%; padding: 8px; border: 2px solid #aa8c56; background: #fff3d3; }
.artifact { min-height: 80px; border: 2px solid #8c7245; background-color: #d5ccb0; background-image: url("assets/deliverables.webp?v=pixel-actors-2"); background-size: 400% 300%; background-position: var(--artifact-x, 0%) var(--artifact-y, 0%); box-shadow: inset 0 0 0 1px #fff7d8, 2px 2px #b99962; }
.featured-archive .artifact { min-height: 126px; }
.archive-copy { align-self: center; min-width: 0; }
.archive-copy strong { display: block; color: var(--ink); font-size: 16px; }
.archive-copy p { margin: 5px 0; color: #7b6d53; font-size: 11px; line-height: 1.5; }
.score-pill { display: inline-block; padding: 2px 7px; background: #e4b75b; color: #5e452a; font-size: 12px; font-weight: 850; }
.discovery-strip { display: flex; gap: 7px; overflow: hidden; padding: 4px 7px; border: 1px solid #b4ab72; background: #e9e4b6; font-size: 11px; }
.discovery-strip span { flex: 0 0 auto; color: #80734f; }
.discovery-strip strong { overflow: hidden; color: #5b6b3c; white-space: nowrap; text-overflow: ellipsis; }
.empty-state { display: grid; align-content: center; gap: 8px; height: 100%; min-height: 120px; padding: 15px; border: 2px dashed #c4ac75; color: #927953; font-size: 13px; text-align: center; }
.empty-state b { color: #594b35; font-size: 17px; }

.bottom-nav { z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 0; padding-bottom: env(safe-area-inset-bottom); border-top: 3px solid #071929; background: #112a42; box-shadow: inset 0 2px #385673; }
.nav-item { position: relative; min-width: 0; padding: 5px 0 3px; border: 0; border-right: 2px solid #081c2e; border-radius: 0; background: transparent; color: #f8e5bc; font-size: 12px; font-weight: 850; text-shadow: 1px 1px #071622; box-shadow: inset -1px 0 #314d66; }
.nav-item:last-child { border-right: 0; }
.nav-item .nav-icon { display: grid; width: 32px; height: 32px; margin: 0 auto 2px; place-items: center; color: #bdccd3; filter: drop-shadow(2px 2px #061522); }
.nav-icon svg { width: 32px; height: 32px; overflow: visible; }
.nav-icon path, .nav-icon circle { fill: currentColor; stroke: #071827; stroke-width: 1.5; stroke-linejoin: miter; }
.nav-item.is-active { background: #69773c; color: #fff4ce; box-shadow: inset 0 0 0 2px #a1a657, inset 0 4px #c1bb66; }
.nav-item.is-active .nav-icon { color: #f2ca68; }
.nav-item i { position: absolute; top: 5px; right: 20%; width: 10px; height: 10px; border: 2px solid #ffe3a0; border-radius: 50%; background: var(--coral); box-shadow: 1px 1px #7c3b29; }

/* Solid, legible pixel windows. No document or modal scroll areas. */
.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); background: #07162480; backdrop-filter: blur(1px); }
.modal { display: flex; flex-direction: column; width: min(100%, 436px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: hidden; border: 3px solid #664526; background: #fff0cd; color: var(--ink); box-shadow: 0 0 0 2px #e1b35f, 0 0 0 5px #172c37, 5px 8px #07101960, inset 0 0 0 2px #fff9df; animation: menu-rise 180ms ease-out; }
.modal-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 2px solid #b49359; background: linear-gradient(#fff5d9, #f2ddb0); box-shadow: inset 0 -2px #e9c98e; }
.modal-header > div { min-width: 0; }
.modal-header h2 { color: var(--ink); font-size: 19px; line-height: 1.25; font-weight: 900; }
.modal-header p { margin-top: 4px; color: #806745; font-size: 12px; line-height: 1.4; }
.modal-kicker, .outcome-page-kicker { display: block; margin-bottom: 4px; color: #a56a30; font-size: 11px; font-weight: 850; }
.close-button { display: grid; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; place-items: center; border: 2px solid #8f6637; background: #f3d59e; color: #ac452e; font-size: 24px; font-weight: 900; line-height: 1; box-shadow: inset 0 0 0 2px #fff1cd, 2px 2px #b18b4d; }
.modal-body { flex: 1 1 auto; min-height: 0; padding: 13px; overflow: hidden; }
.modal-footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 9px; padding: 11px 13px 13px; border-top: 2px solid #b99659; background: #efd7a5; box-shadow: inset 0 2px #fff3d0; }
.modal-footer button { min-height: 46px; }
.modal-footer > .primary-button { flex: 1; }
.modal-footer > .secondary-button { flex: .8; }
.modal-setup, .setup-modal { height: min(724px, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.setup-header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-header p { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.setup-project-icon { width: 48px; min-height: 44px; height: 44px; flex: 0 0 auto; }
.decision-tabs, .setup-step-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 0 auto; gap: 5px; padding: 7px 10px; border-bottom: 1px solid #bf9e64; background: #ead1a0; }
.decision-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.decision-tabs button, .setup-step-track button { position: relative; min-width: 0; min-height: 44px; padding: 4px 3px; border: 1px solid #ad8c53; background: #fff0c9; color: #826941; font-size: 12px; font-weight: 850; box-shadow: inset 0 0 0 1px #fff8df; }
.decision-tabs button.is-selected, .decision-tabs button.is-current, .decision-tabs button[aria-selected="true"], .setup-step-track button.is-current { border-color: #9b422d; background: #e88259; color: #fff7dc; box-shadow: inset 0 0 0 1px #ffc59a, 1px 2px #a15a36; }
.setup-step-track button.is-done { color: #436b35; background: #dce2af; }
.setup-step-track i { margin-right: 3px; font-style: normal; }
.setup-step-track span { white-space: nowrap; }
.setup-brief { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 37px; padding: 6px 12px; border-bottom: 1px solid #d5b77e; background: #f5e4bb; }
.setup-brief > span { flex: 0 0 auto; padding: 2px 5px; background: #e3c18a; color: #8a482c; font-size: 11px; font-weight: 850; }
.setup-brief strong { overflow: hidden; color: #6c6046; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.setup-brief em { display: none; }
.setup-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.setup-step { display: flex; flex: 1; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.setup-step-title { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; }
.setup-step-title > div { display: flex; align-items: baseline; gap: 7px; }
.setup-step-title span { color: #af6636; font-size: 11px; font-weight: 850; white-space: nowrap; }
.setup-step-title h3 { font-size: 20px; font-weight: 900; }
.setup-step-title p { color: #8c7855; font-size: 11px; text-align: right; }
.setup-step-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.setup-decision-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; flex: 1; gap: 12px; min-height: 0; }
.setup-body > .decision-tabs, .setup-step-content > .decision-tabs { padding: 0 0 8px; margin-bottom: 10px; background: transparent; }
.choice-grid, .option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.modal .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setup-choice-grid { grid-auto-rows: minmax(76px, 1fr); min-height: 0; }
.choice-button, .check-card { position: relative; min-width: 0; min-height: 60px; padding: 10px; border: 2px solid #b38d50; background: #fff0c9; color: var(--ink); text-align: left; box-shadow: inset 0 0 0 2px #fff9e2, inset 0 -4px #e8c98e, 2px 2px #a7854e; }
.choice-button.is-selected, .check-card.is-selected { border-color: #b14e32; background: #f69b72; box-shadow: inset 0 0 0 2px #ffdfb0, inset 0 -4px #e98256, 2px 2px #9c5231; }
.choice-button strong, .check-card strong { display: block; font-size: 15px; line-height: 1.3; }
.choice-button span, .check-card span { display: block; }
.choice-copy { min-width: 0; }
.choice-copy > span, .check-card > span { margin-top: 4px; color: #827250; font-size: 12px; line-height: 1.4; }
.choice-button strong em { display: block; margin-top: 4px; color: #a7723b; font-size: 10px; font-style: normal; font-weight: 750; }
.choice-button.is-selected .choice-copy > span { color: #82502f; }
.choice-check { position: absolute; right: -5px; bottom: -5px; z-index: 2; display: none; width: 22px; height: 22px; place-items: center; border: 2px solid #ffe5b9; border-radius: 50%; background: #dc6744; color: #fffce4; box-shadow: 0 0 0 1px #95402c, 1px 2px #a15b34; font-size: 14px; font-style: normal; font-weight: 900; }
.choice-button.is-selected .choice-check { display: grid; }
.choice-button.has-audience-art { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 6px; padding: 7px 6px; }
.audience-art { display: block; width: 58px; height: 62px; border: 1px solid #cca15a; background-color: #fff3d4; background-image: url("assets/audience-archetypes-v1.webp?v=pixel-actors-2"); background-size: 300% 200%; background-position: var(--audience-x) var(--audience-y); image-rendering: pixelated; }
.has-audience-art .choice-copy strong { font-size: 14px; }
.has-audience-art .choice-copy > span { display: none; }
.setup-live-match { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 68px; padding: 7px; border: 2px solid #8d9b5f; background: #e3e6b6; box-shadow: inset 0 0 0 2px #f9f5d3, 2px 2px #819054; }
.setup-live-match .artifact { width: 68px; min-height: 46px; height: 46px; }
.setup-live-match strong { display: block; color: #3d5935; font-size: 13px; line-height: 1.3; }
.setup-live-match span { display: block; margin-top: 3px; color: #7b8151; font-size: 11px; line-height: 1.3; }
.setup-live-match > b { flex: 0 0 auto; padding: 5px 6px; border: 1px solid #a79249; border-radius: 12px; background: #f1d898; color: #8b7136; font-size: 11px; }
.setup-live-match > b.is-good { border-color: #678149; background: #96b970; color: #34552b; }
.setup-quote-stage { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 22px; }
.setup-quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.setup-quote { min-height: 145px; padding: 12px 6px; text-align: center; }
.setup-quote strong { font-size: 15px; }
.setup-quote b { display: block; margin-top: 17px; color: #4b793e; font-size: 16px; }
.setup-quote > span { margin-top: 10px; color: #847049; font-size: 11px; line-height: 1.5; }
.quote-feedback { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid #a2a46c; background: #e8e6b8; box-shadow: inset 0 0 0 2px #f8f3cf; }
.quote-feedback > div { padding: 10px 5px; border-right: 1px solid #bfc38c; text-align: center; }
.quote-feedback > div:last-child { border: 0; }
.quote-feedback span, .quote-feedback strong { display: block; }
.quote-feedback span { color: #858457; font-size: 11px; }
.quote-feedback strong { margin-top: 4px; color: #456137; font-size: 14px; }
.setup-paged-list { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 10px; }
.setup-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8d7750; font-size: 12px; font-weight: 750; }
.staff-pick-grid, .supplier-pick-grid { flex: 1; grid-auto-rows: minmax(86px, 1fr); }
.staff-check-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 7px; padding: 6px; }
.staff-check-card .pick-avatar { width: 68px; height: 84px; }
.staff-check-card .staff-sprite { width: 64px; max-width: 64px; height: 80px; }
.staff-check-copy { min-width: 0; margin: 0 !important; }
.staff-check-copy strong { font-size: 14px; }
.staff-check-copy > span { margin-top: 4px; color: #89734d; font-size: 10px; line-height: 1.4; }
.supplier-pick strong { font-size: 14px; }
.supplier-pick b { display: block; margin: 7px 0 4px; color: #4d7339; font-size: 15px; }
.supplier-pick > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 11px; }
.setup-final { display: grid; align-content: center; gap: 13px; flex: 1; }
.compatibility-note { padding: 11px; border: 2px solid #a3a06a; background: #e7e5b7; color: #5d7140; line-height: 1.5; }
.setup-combo strong, .setup-combo span { display: block; }
.setup-combo strong { font-size: 16px; }
.setup-combo span { margin-top: 5px; color: #85835b; font-size: 12px; }
.setup-plan-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.setup-plan-strip span { padding: 6px; border: 1px solid #c0a164; background: #fff4d5; color: #856b42; font-size: 12px; text-align: center; }
.forecast-grid, .settlement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settlement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forecast-grid > div, .settlement-item { min-width: 0; padding: 10px; border: 1px solid #c1a265; background: #f6e5bd; }
.forecast-grid span, .settlement-item span { display: block; color: #907751; font-size: 12px; }
.forecast-grid strong, .settlement-item strong { display: block; margin-top: 5px; color: #415f3a; font-size: 19px; }
.settlement-item { padding: 8px 6px; }
.settlement-item strong { font-size: 16px; }
.settlement-item span { font-size: 11px; }
.forecast-grid small { display: block; margin-top: 4px; color: #96815e; font-size: 11px; }
.forecast-wide { grid-column: 1 / -1; }
.setup-final-note { color: #8a7858; font-size: 12px; line-height: 1.5; text-align: center; }
.setup-footer { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; }
.setup-footer button { width: 100%; min-height: 48px; }

.start-screen { text-align: center; }
.welcome-office { width: 100%; height: clamp(130px, 21dvh, 205px); margin-bottom: 14px; border: 2px solid #ab8b52; background: #618735 url("assets/office/room.png?v=pixel-actors-2") center 55% / cover; image-rendering: pixelated; box-shadow: inset 0 0 0 2px #ffffff55; }
img.welcome-office { object-fit: cover; }
.start-mark { display: grid; width: 74px; height: 74px; margin: 4px auto 14px; place-items: center; border: 3px solid #956b34; background: #f1c462; color: #8e572a; box-shadow: inset 0 0 0 3px #ffe9a0, 4px 4px #be9252; font-size: 37px; font-weight: 900; }
.start-screen h2 { color: #203b4d; font-size: 30px; line-height: 1.2; }
.start-screen .slogan { margin: 12px auto 17px; color: #8b744e; font-size: 13px; line-height: 1.7; }
.start-actions { display: grid; gap: 9px; }
.credits { margin-top: 13px; color: #9b865e; font-size: 11px; line-height: 1.5; }
.founder-grid { display: grid; gap: 10px; }
.founder-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 4px 11px; min-height: 116px; padding: 9px; border: 2px solid #b09053; background: #fff0ca; color: var(--ink); box-shadow: inset 0 0 0 2px #fff9df, 2px 2px #bd985a; text-align: left; }
.founder-avatar { grid-row: span 2; width: 68px; height: 84px; }
.founder-avatar .staff-sprite { width: 64px; max-width: 64px; height: 80px; }
.founder-card > span:not(.founder-avatar) { min-width: 0; }
.founder-card strong, .founder-card small, .founder-card em { display: block; }
.founder-card strong { font-size: 18px; }
.founder-card small { margin-top: 3px; color: #a66f39; font-size: 12px; }
.founder-card em { margin-top: 5px; color: #85734d; font-size: 11px; font-style: normal; }
.founder-card > b { color: #688048; font-size: 12px; }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.route-card { min-width: 0; padding: 10px 8px; border: 1px solid #bd9c5d; background: #f3e2b5; text-align: left; }
.route-card span, .route-card strong, .route-card small { display: block; }
.route-card span { color: #a4773f; font-size: 11px; }
.route-card strong { margin-top: 5px; font-size: 15px; line-height: 1.4; }
.route-card small { margin-top: 7px; color: #89774f; font-size: 11px; line-height: 1.5; }
.event-page > p, .event-page > .modal-body > p { color: #756448; font-size: 14px; line-height: 1.7; }
.event-choices { display: grid; gap: 10px; margin-top: 17px; }
.event-choice { min-height: 76px; padding: 11px; border: 2px solid #ad8a51; background: #fff2d1; color: var(--ink); text-align: left; box-shadow: inset 0 0 0 1px #fff9e6, 2px 2px #b89658; }
.event-choice strong, .event-choice > span { display: block; }
.event-choice strong { font-size: 15px; }
.event-choice > span { margin-top: 5px; color: #89764f; font-size: 12px; line-height: 1.5; }
.impact-list { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 7px !important; }
.impact-chip { padding: 2px 5px; border: 1px solid #d8a477; background: #f7dbb9; color: #a36736; font-size: 10px; font-style: normal; font-weight: 750; }
.impact-chip.is-good { border-color: #a1b17a; background: #e4eac2; color: #5c793f; }
.modal-outcome { height: min(680px, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.outcome-body { display: flex; flex-direction: column; gap: 12px; }
.outcome-summary, .outcome-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.outcome-artifact { min-height: 202px; }
.outcome-score-card { display: grid; align-content: center; justify-items: center; gap: 5px; padding: 10px; border: 2px solid #c0a067; background: #fff4d7; text-align: center; }
.outcome-score-card > span { color: #9a8257; font-size: 12px; }
.big-score { color: #d06c38; font-size: 62px; line-height: 1.1; font-weight: 900; text-shadow: 2px 2px #efc179; animation: score-reveal 300ms ease-out; }
.outcome-score-card > strong { font-size: 21px; }
.outcome-score-card > small { margin-top: 5px; font-size: 12px; font-weight: 850; }
.outcome-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.outcome-impact > div { min-width: 0; padding: 9px 7px; border: 1px solid #c6b16d; background: #eee7bd; }
.outcome-impact span, .outcome-impact strong { display: block; }
.outcome-impact span { color: #8a7c4f; font-size: 11px; }
.outcome-impact strong { overflow: hidden; margin-top: 4px; color: #456737; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.outcome-page-lead { color: #927b52; font-size: 13px; line-height: 1.5; }
.breakdown { border-top: 1px solid #cfb680; }
.break-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 9px 0; border-bottom: 1px solid #ddc999; }
.break-row strong { font-size: 14px; }
.break-row small { display: block; margin-top: 4px; color: #998359; font-size: 12px; line-height: 1.4; }
.break-row > span { font-size: 18px; font-weight: 900; }
.client-quote { margin: 0; padding: 12px; border-left: 4px solid #c5a056; background: #f1e1b5; color: #82704b; font-size: 14px; line-height: 1.65; }
.client-quote > span { display: block; margin-bottom: 5px; color: #af7339; font-size: 11px; font-weight: 850; }
.growth-section h3, .decision-replay h3 { margin-bottom: 8px; font-size: 16px; }
.growth-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.growth-list > div { padding: 8px; border: 1px solid #b5ad73; background: #eee9c0; }
.growth-list span, .growth-list strong { display: block; font-size: 12px; }
.growth-list span { color: #8c8058; }
.growth-list strong { margin-top: 4px; color: #4d743d; }
.decision-replay { padding: 10px; border: 1px solid #c8ad71; background: #f8e8bd; }
.decision-replay > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 6px 0; border-top: 1px dashed #cdb582; font-size: 12px; }
.decision-replay span { color: #9b8256; }
.decision-replay strong { text-align: right; }
.talent-invite { display: grid; gap: 4px; padding: 10px; border: 2px solid #c7a34e; background: #f5e4a3; color: #88703d; font-size: 12px; }
.outcome-footer { display: grid; grid-template-columns: .8fr 1.2fr; }
.modal-outcome { height: min(724px, calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
.outcome-header .text-button { min-width: 52px; min-height: 44px; flex-shrink: 0; }
.outcome-cover { flex: 0 0 auto; min-height: 180px; height: clamp(180px, 31dvh, 270px); width: 100%; }
.outcome-art-caption strong, .outcome-art-caption span { display: block; }
.outcome-art-caption strong { color: #436139; font-size: 19px; }
.outcome-art-caption span { margin-top: 5px; color: #897147; font-size: 12px; }
.outcome-saved-note { color: #84724e; font-size: 11px; line-height: 1.55; }
.outcome-rating-line { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; padding: 8px 12px; border: 2px solid #b49855; background: #f1dda6; }
.outcome-rating-line > strong { color: #be6638; font-size: 43px; line-height: 1; }
.outcome-rating-line b, .outcome-rating-line span { display: block; }
.outcome-rating-line b { font-size: 21px; }
.outcome-rating-line span { margin-top: 4px; color: #887245; font-size: 11px; }
.outcome-axes strong { margin-bottom: 0; font-size: 23px; }
.outcome-ledger { display: grid; border: 1px solid #b6a36e; }
.outcome-ledger > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #d4c291; font-size: 13px; }
.outcome-ledger > div:last-child { border-bottom: 0; }
.outcome-ledger span { color: #847147; }
.outcome-ledger .ledger-total { background: #e8e5b8; }
.outcome-next h3 { margin-bottom: 5px; font-size: 15px; }
.outcome-next p { color: #81744f; font-size: 12px; line-height: 1.45; }
.outcome-next > div { display: flex; gap: 8px; margin-top: 9px; }
.outcome-next button { flex: 1; min-width: 0; min-height: 46px; padding-inline: 5px; font-size: 12px; }
.growth-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.growth-heading h3 { margin-bottom: 0; }
.growth-list small { display: block; margin-top: 3px; color: #88784e; font-size: 11px; }
.outcome-compact-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.outcome-compact-hero .artifact { width: 72px; height: 72px; min-height: 72px; }
.outcome-compact-hero strong, .outcome-compact-hero span { display: block; }
.outcome-compact-hero strong { color: #a65e34; font-size: 24px; }
.outcome-compact-hero span { color: #897147; font-size: 12px; }
.outcome-money-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.outcome-money-summary > div { padding: 10px; border: 1px solid #b5a36c; background: #ede6bc; }
.outcome-money-summary span, .outcome-money-summary strong { display: block; }
.outcome-money-summary span { color: #8a7a53; font-size: 11px; }
.outcome-money-summary strong { margin-top: 4px; font-size: 19px; }
.command-head[data-action="stage-preview"] { min-height: 44px; cursor: pointer; }
.command-head[data-action="stage-preview"]:focus-visible { outline: 3px solid #327abb; outline-offset: 1px; }
.phase-preview { display: grid; gap: 12px; color: #82704b; font-size: 13px; line-height: 1.5; }
.phase-wireframe { display: grid; gap: 12px; min-height: 225px; padding: 18px; border: 2px solid #a49b70; background: #eee6c6; color: #8e8667; }
.phase-wireframe > span { font-size: 18px; font-weight: 850; }
.phase-wireframe > i { width: 62%; height: 12px; border: 1px solid #bdb48e; background: #d5ccb0; }
.phase-wireframe > b { height: 60px; border: 2px dashed #b2ab88; }
.phase-wireframe > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.phase-wireframe > div i { height: 45px; border: 1px solid #bdb48e; background: #e0d8bb; }
.phase-wireframe small { font-size: 12px; }
.phase-artifact { position: relative; height: 250px; overflow: hidden; }
.phase-artifact .artifact { height: 100%; width: 100%; }
.phase-artifact.is-making > span { position: absolute; inset: 65% 0 0; display: grid; place-items: center; border-top: 2px dashed #b8a675; background: #f0e9cce8; color: #82704b; font-size: 12px; }
.legacy-choice { margin-top: 16px; text-align: left; }
.legacy-choice h3 { font-size: 16px; }
.legacy-choice > p { margin: 5px 0 10px; color: #9b8257; font-size: 12px; }
.legacy-choice > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.legacy-choice button { min-width: 0; padding: 8px 6px; border: 2px solid #b39758; background: #fff1c9; color: #665737; text-align: left; }
.legacy-choice button.is-selected { border-color: #ae5c38; background: #f5c69b; }
.legacy-choice button i, .legacy-choice button strong, .legacy-choice button span { display: block; }
.legacy-choice button i { color: #a77936; font-style: normal; }
.legacy-choice button strong { margin: 4px 0; font-size: 12px; }
.legacy-choice button span { color: #958159; font-size: 10px; line-height: 1.4; }
.settings-grid { display: grid; gap: 11px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px; border: 2px solid #bc9d61; background: #fff2ce; color: var(--ink); text-align: left; box-shadow: inset 0 0 0 1px #fff8e0; }
.settings-row strong, .settings-row span { display: block; }
.settings-row strong { font-size: 14px; }
.settings-row span { color: #826b45; font-size: 14px; }
.settings-row input, .settings-row select { min-height: 40px; border: 1px solid #af965c; background: #fff6dc; color: #705d3b; }
.settings-grid > button { width: 100%; }
.save-note { margin-top: 10px; padding: 9px; border: 1px solid #c8bb81; background: #ece6bd; color: #8b8158; font-size: 12px; line-height: 1.5; }
.utility-row { display: flex; flex-wrap: wrap; gap: 8px; }
.toast { position: fixed; z-index: 200; right: 14px; bottom: calc(86px + var(--command-height) + env(safe-area-inset-bottom)); left: 14px; width: min(calc(100% - 28px), 418px); margin: auto; padding: 12px; border: 2px solid #9a7636; background: #fbe0a0; color: #6d532d; box-shadow: inset 0 0 0 2px #fff2c5, 3px 4px #172a3480; font-size: 13px; font-weight: 850; line-height: 1.45; text-align: center; opacity: 0; transform: translateY(9px); pointer-events: none; transition: opacity 150ms, transform 150ms; }
.toast:not(.is-visible) { visibility: hidden; }
.toast.is-visible { opacity: 1; transform: none; }

.scene-tools { display: flex; gap: 5px; }
.scene-topline > .scene-tools { padding: 0; border: 0; background: none; box-shadow: none; }
.scene-topline > div:first-child { max-width: 43%; flex-direction: column; align-items: flex-start; gap: 1px; }
.scene-topline > div:first-child b { font-size: 10px; }
.scene-tools .chip-button { padding-inline: 8px; min-height: 44px; }
.method-chip { color: #ffe0a2; }
.studio-controls { display: grid; grid-template-columns: 1.45fr 1fr .85fr; gap: 6px; }
.studio-controls > * { min-width: 0; min-height: 48px; padding: 6px 8px; border: 2px solid #b39758; background: #fff0cb; color: #665737; text-align: left; }
.studio-controls span, .studio-controls strong { display: block; }
.studio-controls span { color: #887548; font-size: 10px; }
.studio-controls strong { margin-top: 3px; font-size: 13px; white-space: nowrap; }
.studio-controls .has-issues { background: #f5d2ad; color: #924e30; }
.decision-budget, .method-result { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid #c2aa71; background: #eee5bc; color: #6d653c; font-size: 12px; }
.event-choice.is-selected { border-color: #68834b; background: #e5eabd; }
.event-choice:disabled { opacity: .55; cursor: not-allowed; }
.support-note { padding: 12px; background: #eee7bd; border: 1px solid #c3af73; }
.support-note strong { color: #526c3e; font-size: 16px; }
.support-note p { margin-top: 8px; color: #8a754e; font-size: 13px; line-height: 1.5; }

@keyframes stat-pop { 0% { transform: translateY(-2px) scale(1.06); } 100% { transform: none; } }
@keyframes live-beat { 50% { opacity: .55; } }
@keyframes card-arrive { from { transform: translateX(5px); } to { transform: none; } }
@keyframes menu-rise { from { transform: translateY(9px); } to { transform: none; } }
@keyframes score-reveal { from { opacity: .3; transform: scale(.83); } to { opacity: 1; transform: none; } }

@media (max-width: 400px) {
  .topbar { padding-inline: 9px; gap: 7px; }
  .time-cluster { gap: 6px; }
  .time-cluster strong { font-size: 11px; }
  .stat { grid-template-columns: 26px minmax(0, 1fr); gap: 4px; padding-inline: 4px; }
  .stat-icon, .stat-icon svg { width: 27px; }
  .content-panel { padding-inline: 10px; }
  .command-heading h2, .command-head h2 { font-size: 18px; }
  .focus-choice { font-size: 12px; }
  .choice-button.has-audience-art { grid-template-columns: 50px minmax(0, 1fr); gap: 5px; }
  .audience-art { width: 50px; height: 57px; }
  .has-audience-art .choice-copy strong { font-size: 13px; }
  .setup-live-match { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 6px; }
  .setup-live-match .artifact { width: 54px; }
  .staff-card { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
  .staff-card .staff-avatar-frame { width: 68px; }
  .staff-copy strong { font-size: 15px; }
}

@media (max-height: 760px) {
  :root { --command-height: 236px; }
  .staff-card.compact-staff-card { gap: 2px 7px; padding: 3px; }
  .page-shell { grid-template-rows: calc(44px + env(safe-area-inset-top)) minmax(0, 1fr) calc(61px + env(safe-area-inset-bottom)); }
  .game-frame { grid-template-rows: 57px minmax(0, 1fr) var(--command-height); }
  .content-panel { gap: 6px; padding-block: 7px 10px; }
  .output-grid strong, .metric-tile > strong { font-size: 24px; }
  .focus-choice { min-height: 44px; }
  .scene-live { display: none; }
  .nav-item { padding-top: 4px; }
  .nav-item .nav-icon, .nav-icon svg { width: 29px; height: 29px; }
  .panel-head p { display: none; }
  .offer-card > p { -webkit-line-clamp: 1; }
  .setup-step-title p { display: none; }
  .setup-step { gap: 8px; }
  .setup-quote { min-height: 126px; }
  .setup-live-match { min-height: 59px; }
  .setup-live-match span { display: none; }
  .setup-body, .modal-body { padding: 10px; }
  .modal-header { padding-block: 9px; }
  .welcome-office { max-height: 136px; }
  .start-screen .slogan { margin-block: 9px 12px; }
  .outcome-artifact { min-height: 160px; }
}

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