@font-face {
  font-family: Fredoka;
  src: url('../assets/playfield/fredoka.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url('../assets/playfield/nunito.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --district-display: Fredoka, 'Trebuchet MS', sans-serif;
  --district-paper: #f0f0f0;
  --district-light: #fbfbfb;
  --district-ink: #282828;
  --district-petrol: #535353;
  --district-deep: #303030;
  --district-muted: #585858;
  --district-rule: #c4c4c4;
  --district-copper: #515151;
  --district-gold: #d2d2d2;
  --play-lilac: #e4e4e4;
  --play-mint: #dfdfdf;
  --play-teal: #5e5e5e;
  --play-shadow: #393939;
  --play-focus: #404040;
  font-family: Nunito, system-ui, sans-serif;
  background: var(--play-lilac);
}
.shell { background: var(--play-lilac); color: var(--district-ink); }
.shell :is(button,a,input,select,summary):focus-visible { outline-color: var(--play-focus); }
.shell :is(.topbar,.dock,.opening-departments) :is(button,summary):focus-visible { outline-color: var(--district-gold); }
.game-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.shell .topbar {
  background: var(--district-deep);
  border-color: #595959;
  box-shadow: 0 4px 16px #39393935;
}
.shell .brand { background: transparent; }
.shell .brand > span {
  font-family: var(--district-display);
  font-size: clamp(1.2rem,2.2vw,1.65rem);
  font-weight: 650;
  letter-spacing: .055em;
}
.shell .brand small, .shell .hud-stat > span, .shell .topbar-intro { color: #e2e2e2; }
.shell .hud-stat {
  padding: 6px 11px;
  border-radius: 10px;
  background: #3d3d3d;
  color: white;
}
.shell .hud-stat strong { font-variant-numeric: tabular-nums; }
.shell .utility { background: #525252; color: white; }
.shell .utility .sound-state { color: #ebebeb; }
.shell .utility:hover, .shell .dock button:hover:not(.selected) { background: #636363; }
.shell .dock { background: var(--district-deep); border-color: #979797; }
.shell .dock button.selected { background: var(--play-mint); color: var(--district-deep); }
.shell .dock .game-icon { width: 16px; height: 16px; }

.opening-copy h1, .opening-copy h2, .district-home h1, .department-caption h1,
.scene-result h1, .scene-finale h1, .scene-cinematic h1, .district-build .workspace-head h2 {
  font-weight: 650;
  letter-spacing: -.025em;
}
.opening-copy h1 { color: var(--district-petrol); font-size: clamp(3rem,6.2vw,6.3rem); }
.opening-copy h2 { font-size: clamp(2rem,4vw,4.2rem); line-height: .98; }
.opening-hero {
  background: #f5f5f5;
  grid-template-columns: minmax(320px, 2fr) minmax(0, 3fr);
}
.opening-copy { padding-inline: clamp(24px,4.5vw,76px); }
.opening-facts { color: var(--district-muted); }
.opening-facts li + li { border-inline-start: 1px solid var(--district-rule); padding-inline-start: 11px; }
.opening-scene { background: #9f9f9f; }
.opening-scene > img { object-fit: contain; object-position: center; }
.opening-scene figcaption, .department-scene figcaption {
  background: var(--district-deep);
  color: white;
  font-weight: 800;
  border-radius: 10px;
}
.opening-spread { background: #ededed; }
.opening-departments { background: var(--district-deep); }
.opening-department-list summary img { background: #dadada; border-radius: 14px; object-fit: cover; }
.opening-department-list details { border-color: #a3a3a3; }
.opening-department-list small { color: #e5e5e5; }
.opening-close { background: #b9b9b9 url('../assets/playfield/district.webp') 50% 55% / cover; }
.opening-close > div { border-radius: 22px; }

.shell .district-cta, .shell .modal-card .primary, .scene-result .result-footer .primary,
.scene-finale .finale-actions .primary, .scene-cinematic .cinema-skip {
  background: var(--district-petrol);
  color: white;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--play-shadow);
  font-weight: 900;
}
.shell .district-cta:hover, .shell .modal-card .primary:hover, .scene-result .result-footer .primary:hover,
.scene-finale .finale-actions .primary:hover, .scene-cinematic .cinema-skip:hover { background: #474747; }
.shell:not(.motion-off) .district-cta:active { box-shadow: 0 2px 0 var(--play-shadow); }
.quarter-steps button, .decision-route a { border-radius: 10px; }

.district-home-head { background: var(--district-light); }
.district-map { background: #9f9f9f; height: auto; aspect-ratio: auto; }
.map-world { width: min(100%,840px); margin: 0 auto; aspect-ratio: 3/2; position: relative; }
.map-world > img { display: block; width: 100%; height: 100%; }
.district-map .district-delivery {
  --delivery-start-x: 49%;
  --delivery-end-x: 62%;
  --delivery-start-y: 73%;
  --delivery-end-y: 77%;
}
.district-map .ambient-steam { left: 31%; top: 9%; }
.district-map.workshop-map .ambient-steam { left: 19%; top: 37%; }
.district-home .district-map-nav { --marker-ink: #282828; }
.district-home .map-marker {
  background: #fbfbfb;
  color: var(--marker-ink);
  border: 2px solid #3b3b3b;
  border-radius: 12px;
  box-shadow: 0 3px 0 #3b3b3b;
  font-weight: 900;
}
.district-home .map-marker .game-icon { color: var(--marker-ink); }
.district-home .map-marker:hover { background: var(--play-mint); color: var(--marker-ink); }
.district-home .marker-factory { background: #dddddd; }
.district-home .marker-market { background: #dfdfdf; }
.district-home .marker-people { background: #dadada; }
.district-home .marker-treasury { background: #dadada; }
.district-home .marker-strategy { background: #e3e3e3; }
.district-home .marker-factory { top: 49%; left: 30%; }
.district-home .marker-market { top: 25%; left: 76%; }
.district-home .marker-people { top: 43%; left: 71%; }
.district-home .marker-treasury { top: 66%; left: 73%; }
.district-home .marker-strategy { top: 52%; left: 87%; }
.district-home .workshop-map .marker-factory { top: 54%; left: 25%; }
.district-console, .district-briefing { background: var(--district-light); }
.district-console .district-cta { align-self: center; }
.district-quarters { gap: 4px; }
.district-quarters li {
  background: #e5e5e5;
  color: var(--district-ink);
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  font-weight: 800;
}
.district-quarters li.complete { background: var(--play-mint); border-color: #bababa; }
.district-quarters li.current { background: var(--district-gold); border-color: #818181; }
.district-route { gap: 6px; margin-bottom: 12px; }
.district-route button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f8f8f8;
  color: var(--district-ink);
  border: 1px solid var(--district-rule);
  border-radius: 11px;
  font-weight: 850;
}
.district-route button[aria-current=location] {
  background: var(--district-petrol);
  color: white;
  border-color: var(--district-petrol);
}
.district-route button:hover:not([aria-current]) { background: #dbdbdb; border-color: #9c9c9c; }
.department-scene { border-radius: 20px 20px 0 0; overflow: hidden; background: var(--district-light); }
.department-scene figure { background: #d4d4d4; }
.department-scene figure img { object-position: center 53%; }
.department-scene figcaption { inset: auto 12px 12px auto; }
.department-caption > span { color: #444444; }
.department-actions .district-cta { padding-inline: 16px; }
.district-build .workspace { border-radius: 0 0 20px 20px; }
.district-build .workspace :is(.sku-card,.role-tile,.channel-tile,.machine-tile,.strategy-tile,.panel,.capacity-ribbon,.treasury-hero,.team-visual,.economic-pulse,.dark-panel,.light-panel) {
  border-radius: 14px;
}
.district-build .workspace :is(.dark-panel,.treasury-hero,.strategy-visual,.team-visual,.economic-pulse) { background: var(--district-deep); }
.district-build .workspace :is(.dark-panel,.economic-pulse) :is(.eyebrow,.panel-title span,.micro-row,.balance-line span,div > span) { color: #e6e6e6; }
.district-build .workspace :is(.machine-tile,.sku-card,.role-tile,.finance-primer,.strategy-grid) :is(small,p) { color: var(--district-muted); }
.district-build .workspace .strategy-grid > div > span { color: var(--district-muted); }
.district-build .workspace :is(.sku-details .micro-row > span,.channel-tile .status-indicator,.channel-tile > p,.rival-chip small,.finance-primer small,.mna-heading .eyebrow,.mna-heading p,.pending-note,.mna-locked,summary > span > small) {
  color: var(--district-muted);
}
.district-build .workspace .sku-pack > small { color: var(--district-ink); }
.district-build .workspace :is(.sku-card,.rival-chip,.mna-section,.finance-primer) { background: #f0f0f0; }
.district-build .workspace .mna-locked { background: #e4e4e4; }
.district-build .tile-illustration { background: #e4e4e4; border-color: #c9c9c9; border-radius: 9px; }
.district-build .workspace input[type=range] { accent-color: var(--district-petrol); }
.decision-route a { color: #424242; }
.modal-card { background: var(--district-light); border-radius: 20px; }
.modal-overlay { background: #292929bc; }
.modal-card .site-choices button { background: #eaeaea; border: 1px solid var(--district-rule); border-radius: 14px; color: var(--district-ink); }
.modal-card .site-choices button:hover { background: #dadada; border-color: #979797; }
.quarter-plan { background: #ededed; border-radius: 12px; border: 1px solid var(--district-rule); }
.quarter-plan strong { color: #3d3d3d; }
.quarter-dispatch dl > div:last-child i { background: var(--play-teal); }
.scene-records .records-head, .scene-result .result-art {
  background-image: linear-gradient(90deg,#303030f2,#30303045),url('../assets/playfield/district.webp');
}
.scene-finale .finale-view { background-image: linear-gradient(#303030c9,#303030f2),url('../assets/playfield/district.webp'); }
.scene-result .milestone-banner { background: var(--district-deep); border-color: #b9b9b9; }
.scene-cinematic .cinema-world { --replay-plate: url('../assets/playfield/factory.webp'); }
.scene-cinematic .cinema-world[data-beat=delivery] { --replay-plate: url('../assets/playfield/market.webp'); }
.scene-cinematic .cinema-world[data-beat=finance] { --replay-plate: url('../assets/playfield/treasury.webp'); }
.scene-cinematic .cinema-world[data-beat=news] { --replay-plate: url('../assets/playfield/strategy.webp'); }
.scene-cinematic .cinema-secondary { color: var(--district-ink); background: #fbfbfb; }
.scene-cinematic .cinema-header p { color: var(--district-muted); }

@media(max-width: 620px) {
  .opening-hero { grid-template-columns: minmax(0,1fr); }
  .opening-copy { padding: 22px 20px; }
  .opening-copy h2 { font-size: clamp(2rem,9vw,3.15rem); }
  .shell .hud-stat { padding-inline: 5px; }
  .district-route button { padding-inline: 8px; gap: 4px; }
  .district-route .game-icon { width: 16px; height: 16px; }
  .district-home .map-marker { gap: 4px; padding-inline: 7px; }
  .district-home .map-marker .game-icon { width: 14px; height: 14px; }
  .district-home .marker-market { left: 78%; top: 22%; }
  .district-home .marker-strategy { left: 83%; top: 56%; }
  .district-home .marker-people { left: 62%; top: 40%; }
  .district-home .marker-treasury { left: 61%; top: 78%; }
}
@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off).scene-arrival .map-world > img { animation: room-arrival 450ms var(--game-arrival); }
}
@media(min-width: 621px) {
  .department-scene { grid-template-columns: 1fr 1.55fr; }
}

/* Apply the same surfaces and action hierarchy to the decision screens and playback. */
.district-build .workspace :is(.capacity-ribbon,.light-panel,.crew-section,.department-team,.ship-priority,.finance-statement,.inline-finance,.mna-section,.recovery-hub,.recovery-card,.workforce-role-card,.strategy-grid > div,.role-tile,.channel-tile) {
  background: var(--district-paper);
  color: var(--district-ink);
  border: 1px solid var(--district-rule);
  border-radius: 14px;
  box-shadow: none;
}
.district-build .workspace :is(.capacity-ribbon,.light-panel,.crew-section,.department-team,.ship-priority,.finance-statement,.inline-finance,.mna-section,.recovery-hub) :is(h2,h3) {
  color: var(--district-ink);
  font-family: var(--district-display);
  font-weight: 600;
}
.district-build .workspace :is(.tile-action,.quiet-action,.alt-action,.channel-spend button,.recovery-buttons button,.role-tile button,.mna-target button),
.scene-records .records-tools button,.scene-result .result-footer .quiet-action,.modal-card .alt-action {
  background: var(--play-lilac);
  color: var(--district-deep);
  border: 1px solid var(--district-rule);
  border-radius: 11px;
  box-shadow: 0 2px 0 var(--district-rule);
}
.district-build .workspace :is(.tile-action,.quiet-action,.alt-action,.role-tile button):hover {
  background: var(--play-mint);
}
.district-build .workspace :is(input:not([type=range],[type=checkbox]),select),.modal-card :is(input,select) {
  border-radius: 9px;
  border: 1px solid var(--district-rule);
  background: var(--district-light);
  color: var(--district-ink);
}
.district-build .workspace :is(.crew-intro,.finance-primer,.market-map-context,.market-map-foot,.treasury-district-foot),
.scene-result :is(.economic-outcome,.quarter-cashflow,.result-insight,.sku-results > div),.scene-records .ledger-table {
  background: var(--district-paper);
  color: var(--district-ink);
}
.district-build .district-live :is(.living-world,.market-district,.treasury-district) {
  background: var(--district-deep);
  border-color: var(--district-rule);
  border-radius: 14px;
  overflow: hidden;
}
.district-build .district-live canvas { filter: none; }
.district-build .district-live .market-world-canvas { aspect-ratio: 2 / 1; }
.district-build .district-live :is(.living-world-topline,.market-district-head,.treasury-district-top) {
  background: var(--district-deep);
  color: white;
}
.district-build .district-live :is(.market-district-eyebrow,.market-district-cycle,.living-tools,.treasury-district-top span) {
  color: #ebebeb;
}
.district-build .district-live :is(.market-map-tabs button,.world-station-link,.motion-button) {
  background: #f0f0f0;
  color: var(--district-deep);
  border-color: var(--district-rule);
  border-radius: 10px;
}
.district-build .district-live :is(.market-map-tabs button.selected,.world-station-link:hover) { background: var(--play-mint); }
.district-build .district-live :is(.world-station-link b,.market-map-metrics small) { color: var(--district-ink); }
.district-build .district-live .treasury-district-foot b { color: var(--district-muted); }
.shell :is(.advisor,.decision-bubble) { background: var(--district-light); color: var(--district-ink); border-color: var(--district-rule); border-radius: 14px; }
.shell .decision-bubble :is(strong,p) { color: var(--district-ink); }
.shell :is(.portrait-frame,.reaction-emblem,.cinema-portrait) {
  display: grid;
  place-items: center;
  background: var(--play-lilac);
  color: var(--district-petrol);
  width: 48px;
  height: 48px;
  border-radius: 13px;
  box-shadow: none;
}
.shell :is(.portrait-frame,.reaction-emblem,.cinema-portrait) .game-icon { width: 27px; height: 27px; }
.shell .portrait-frame.mood-concerned { background: #dddddd; color: var(--district-copper); }
.shell .portrait-frame:is(.mood-pleased,.mood-celebrate) { background: var(--play-mint); color: var(--play-teal); }
.scene-cinematic .cinema-world { border-radius: 20px; border-color: var(--district-rule); }
.scene-cinematic .cinema-header h1 { color: var(--district-ink); }
.scene-cinematic .cinema-director-badge {
  background: var(--district-deep);
  color: white;
  border: 0;
  border-radius: 12px;
}
.scene-cinematic .cinema-director-badge small { color: #ebebeb; }
.scene-cinematic .cinema-overlay { background: var(--district-light); color: var(--district-ink); }
.scene-cinematic :is(.cinema-event h2,.cinema-counter,.cinema-counter b,.cinema-speaker > span) { color: var(--district-ink); }
.scene-cinematic #cinema-speaker-name { color: var(--district-muted); }
.scene-cinematic .cinema-event h2 { font-family: var(--district-display); font-weight: 600; }
.scene-cinematic .cinema-event p { color: var(--district-muted); }
.scene-cinematic .cinema-progress {
  grid-column: 1/-1;
  grid-row: auto;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 4px;
}
.scene-cinematic .cinema-progress span {
  width: auto;
  height: auto;
  padding: 5px 2px;
  border-radius: 8px;
  background: var(--play-lilac);
  color: var(--district-ink);
  text-align: center;
  font-size: .75rem;
  font-weight: 800;
}
.scene-cinematic .cinema-progress .current { background: var(--district-petrol); color: white; transform: none; }
.scene-cinematic .cinema-timeline-track { background: var(--district-rule); }
.scene-cinematic #cinema-timebar { background: var(--district-petrol); }
.scene-cinematic .cinema-inset summary { border-radius: 10px; }
.scene-cinematic .cinema-diagram { background: var(--play-lilac); border-color: var(--district-rule); }
.scene-result .result-content { background: var(--district-light); }
.scene-records .table-head { background: var(--district-deep); color: white; }
.scene-records .table-row:nth-child(even) { background: var(--district-light); }
.district-build .workspace :is(.role-icon,.channel-symbol,.recovery-card-icon) {
  display: inline-grid;
  place-items: center;
  background: var(--play-lilac);
  color: var(--district-petrol);
  border-radius: 9px;
  width: 36px;
  height: 36px;
}
@media(prefers-reduced-motion:no-preference) {
  .scene-cinematic:not(.motion-off) .cinema-world.cinema-impact .cinema-event { animation: playfield-beat 260ms var(--game-arrival); }
  .scene-cinematic:not(.motion-off) .cinema-progress span { transition: background-color 160ms ease, color 160ms ease; }
}
@keyframes playfield-beat {
  from { transform: translateY(4px); opacity: .72; }
  to { transform: none; opacity: 1; }
}

.resume-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 14px;
  margin-top: 8px;
  color: var(--district-muted);
  font-size: .89rem;
}
.resume-note .opening-guided { text-decoration: underline; text-underline-offset: .22em; }
.cinema-plate { position: relative; }
.cinema-effect { position: absolute; inset: auto 14px 14px; display: flex; justify-content: flex-start; }
.playback-effect {
  --cargo-color: #e3e3e3;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: center;
  min-width: 155px;
  padding: 8px 12px 8px 8px;
  color: var(--district-ink);
  background: var(--district-light);
  border: 2px solid var(--district-deep);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--district-deep);
}
.effect-made { --cargo-color: #dddddd; }
.effect-sold { --cargo-color: #dfdfdf; }
.effect-money { --cargo-color: #dadada; }
.effect-news { --cargo-color: #dadada; }
.effect-cargo {
  grid-row: 1/3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--cargo-color);
  border-radius: 8px;
}
.effect-cargo img { width: 36px; }
.playback-effect > strong { font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.05; }
.playback-effect > span:last-child { color: var(--district-muted); font-size: .75rem; }
.effect-news > strong { grid-row: 1/3; align-self: center; }
.effect-news > span:last-child { display: none; }
@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off).scene-arrival .opening-scene > img { animation: playfield-start 700ms var(--game-arrival); }
  .shell:not(.motion-off) .opening-department-list summary img,
  .shell:not(.motion-off) .tile-illustration img { transition: transform 220ms var(--game-arrival); }
  .shell:not(.motion-off) :is(.opening-department-list summary,.tile-illustration):is(:hover,:focus-visible) img { transform: scale(1.045); }
  .shell:not(.motion-off) .playback-effect { animation: cargo-arrive calc(520ms / var(--replay-speed,1)) var(--game-arrival); }
  .shell:not(.motion-off) .effect-cargo > :is(svg,img) { animation: cargo-settle calc(580ms / var(--replay-speed,1)) var(--game-arrival); }
  .shell:not(.motion-off).scene-arrival .district-route button[aria-current=location] .game-icon { animation: route-arrive 320ms var(--game-arrival); }
  .shell:not(.motion-off).scene-arrival .result-content .outcome-stats > div { animation: playfield-beat 340ms var(--game-arrival); }
  .shell:not(.motion-off).scene-arrival .result-content .outcome-stats > div:nth-child(2) { animation-delay: 40ms; }
  .shell:not(.motion-off).scene-arrival .result-content .outcome-stats > div:nth-child(3) { animation-delay: 80ms; }
  .shell:not(.motion-off).scene-arrival .result-content .outcome-stats > div:nth-child(4) { animation-delay: 120ms; }
}
@keyframes playfield-start { from { transform: translateY(10px) scale(.985); opacity: .72; } }
@keyframes cargo-arrive { from { transform: translateX(-18px); opacity: .35; } }
@keyframes cargo-settle { from { transform: translateX(-7px) scale(.75); } }
@keyframes route-arrive { from { transform: translateY(3px) scale(.85); } }
@media(max-width: 620px) {
  .cinema-effect { inset: auto 8px 8px; }
  .playback-effect { min-width: 0; padding: 6px; gap: 0 7px; }
  .effect-cargo { width: 32px; height: 32px; }
}

.district-watch, .founder-review {
  padding: clamp(16px,3vw,28px);
  background: var(--district-paper);
  color: var(--district-ink);
  border: 1px solid var(--district-rule);
  border-radius: 16px;
}
.district-watch { margin: 16px clamp(18px,4vw,64px); }
.district-watch h2, .founder-review h2 { font-family: var(--district-display); font-size: clamp(1.45rem,3vw,2.15rem); margin: 0 0 6px; }
.district-watch p, .founder-review p { margin: 0 0 8px; }
.district-watch > ul { list-style: none; margin: 0; padding: 0; }
.district-watch li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 12px; padding-block: 8px; }
.district-watch li + li { border-top: 1px solid var(--district-rule); }
.district-watch li p { margin-bottom: 0; }
.budget-readout { padding: 12px 14px; margin-block: 12px; background: var(--district-paper); border-radius: 10px; }
.founder-review { margin-block: 18px 26px; }
.founder-review-head { display: flex; gap: 10px; align-items: center; }
.founder-review-head > .game-icon { width: 42px; height: 42px; padding: 9px; border-radius: 11px; color: white; background: var(--district-petrol); }
.founder-review-head p { font-weight: 850; }
.founder-plan { font-variant-numeric: tabular-nums; color: var(--district-muted); }
.founder-quiz { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--district-rule); }
.founder-quiz h3 { margin-bottom: 5px; }
.quiz-options { display: grid; gap: 8px; margin-block: 10px; }
.quiz-options button {
  text-align: start;
  color: var(--district-ink);
  background: var(--district-light);
  border: 1px solid var(--district-rule);
  border-radius: 10px;
  min-height: 44px;
  padding: 8px 12px;
  font-weight: 750;
}
.quiz-options button:hover:not([aria-disabled=true]) { background: var(--play-lilac); }
.quiz-options button:is(.quiz-correct,[aria-pressed=true]) { background: var(--play-mint); border-color: var(--play-teal); }
.quiz-options button.quiz-chosen { background: #e3e3e3; border-color: #818181; }
.quiz-feedback { min-height: 1.5em; font-weight: 850; }
.quiz-requirement { color: var(--district-muted); font-weight: 750; }
.scene-records .table-row .positive { color: #4f4f4f; }
.scene-records .records-tools button { min-height: 44px; }
.quarter-records-table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  background: var(--district-light);
  color: var(--district-ink);
  font-size: clamp(.7rem,1.4vw,1rem);
  font-variant-numeric: tabular-nums;
}
.quarter-records-table :is(th,td) {
  padding: 6px clamp(3px,1vw,12px);
  text-align: end;
  border-bottom: 1px solid var(--district-rule);
  overflow-wrap: anywhere;
}
.quarter-records-table th:first-child { text-align: start; }
.quarter-records-table thead { background: var(--district-deep); color: white; }
.quarter-records-table tbody tr:nth-child(even) { background: var(--district-paper); }
.quarter-records-table .positive { color: #4f4f4f; }
.quarter-records-table .negative { color: #515151; }
.founder-review { scroll-margin-top: 96px; }
.campaign-brief {
  color: var(--district-ink);
  background: var(--district-light);
  border: 1px solid var(--district-rule);
  border-radius: 16px;
  margin: 14px clamp(18px,4vw,64px);
  padding: clamp(14px,2vw,24px);
}
.campaign-brief.campaign-compact { margin: 12px 0; padding: 12px; }
.campaign-phase { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--district-muted); }
.campaign-phase > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 850; color: var(--district-petrol); }
.campaign-brief h2 { font-family: var(--district-display); font-size: clamp(1.45rem,2.8vw,2.2rem); margin: 8px 0 4px; }
.campaign-brief p { margin: 0 0 8px; }
.campaign-brief .campaign-objective { margin: 5px 0 0; color: var(--district-muted); }
.campaign-brief .campaign-pressure { color: var(--district-copper); font-weight: 850; }
.campaign-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,155px),1fr)); gap: 8px; }
.campaign-options button {
  display: grid; align-content: start; gap: 4px; text-align: start; padding: 9px 11px;
  background: var(--district-paper); color: var(--district-ink); border: 1px solid var(--district-rule); border-radius: 10px; min-height: 44px;
}
.campaign-options button:hover { border-color: var(--district-petrol); }
.campaign-options button[aria-pressed=true] { background: var(--play-mint); border-color: var(--play-teal); }
.campaign-options button span,.campaign-brief .campaign-status { color: var(--district-muted); font-size: .85rem; }
.campaign-brief .campaign-status { margin-top: 8px; margin-bottom: 0; }
.campaign-lab { margin-block: 12px; background: var(--district-light); padding: 12px; border: 1px solid var(--district-rule); border-radius: 10px; }
.campaign-lab h3 { margin: 0 0 5px; font-family: var(--district-display); }
.campaign-lab table { width: 100%; table-layout: fixed; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: .86rem; }
.campaign-lab :is(th,td) { text-align: start; padding: 6px; border-bottom: 1px solid var(--district-rule); overflow-wrap: anywhere; }
.campaign-lab thead { background: var(--district-paper); }
.campaign-lab th small { display: block; color: var(--district-muted); font-weight: 650; }
.district-world-status { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; padding: 8px 16px; color: var(--district-ink); background: var(--play-lilac); font-size: .84rem; }
.district-world-status span { display: inline-flex; align-items: center; gap: 5px; }
.district-world-status .game-icon { width: 15px; height: 15px; color: var(--district-petrol); }
.factory-idle .ambient-steam { display: none; }
.busy-district .district-delivery { animation-duration: 11s; }
.listing-signal,.district-outlet-lights { position: absolute; top: 14%; left: 76%; pointer-events: none; }
.listing-signal { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #d2d2d2; opacity: 0; }
.district-outlet-lights { display: flex; gap: 5px; transform: translate(-50%,-50%); }
.district-outlet-lights i { width: 10px; height: 10px; border-radius: 50%; background: #585858; border: 2px solid white; }
.district-outlet-lights .outlet-open { background: #5e5e5e; }
@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off) .ambient-visible .listing-signal { animation: listing-arrival 1.3s var(--game-arrival) 2; }
  .shell:not(.motion-off) .campaign-options button[aria-pressed=true] { animation: playfield-beat 220ms var(--game-arrival); }
}
@keyframes listing-arrival { from { transform: scale(.7); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }
.market-response {
  margin-block: 18px 26px; padding: clamp(12px,3vw,24px);
  border: 1px solid var(--district-rule); border-radius: 16px; background: var(--district-paper);
  color: var(--district-ink); scroll-margin-top: 96px;
}
.market-response h3 { font-family: var(--district-display); font-size: clamp(1.4rem,3vw,2.1rem); margin: 0 0 5px; }
.market-response p { margin: 0 0 10px; }
.market-response-select { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 10px; }
.market-response-select label { display: grid; gap: 4px; min-width: 0; font-weight: 800; }
.market-response-select select { min-height: 44px; max-width: 100%; padding: 4px 8px; }
.market-price-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,145px),1fr)); gap: 8px; }
.market-price-metrics > div { padding: 10px; border-radius: 9px; background: var(--district-light); }
.market-price-metrics dt,.market-curve-scale { color: var(--district-muted); font-size: .82rem; }
.market-price-metrics dd { margin: 4px 0 0; font-weight: 900; font-variant-numeric: tabular-nums; }
.market-price-guidance,.market-featured-note { padding: 9px; background: var(--district-light); border-radius: 9px; }
.market-response-curves { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 12px; }
.market-response-curves > div { min-width: 0; padding: 10px; border-radius: 10px; background: var(--district-light); }
.market-curve { margin: 0 0 10px; }
.market-curve figcaption { font-weight: 900; }
.market-curve svg { display: block; width: 100%; }
.market-curve-scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 5px; }
.market-curve .market-curve-scale { margin: 4px 0 0; }
.market-chart-axis { fill: none; stroke: var(--district-rule); stroke-width: 2; }
.market-chart-demand,.market-chart-sold { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.market-chart-demand { stroke: var(--district-petrol); }
.market-chart-sold { stroke: var(--play-teal); stroke-dasharray: 7 7; }
.market-chart-current { fill: var(--district-gold); stroke: var(--district-ink); stroke-width: 2; }
.market-scenarios summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-weight: 850; }
.market-scenario-table { max-height: 310px; overflow-y: auto; }
.market-scenarios thead { position: sticky; top: 0; background: var(--district-light); }
.market-scenarios table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; font-size: .78rem; }
.market-scenarios :is(th,td) { padding: 5px 2px; text-align: end; border-bottom: 1px solid var(--district-rule); overflow-wrap: anywhere; }
.market-scenarios th:first-child { text-align: start; }
.market-response .market-model-note { color: var(--district-muted); margin: 12px 0 0; font-size: .85rem; }
.market-price-editor { display: flex; gap: 8px; align-items: center; }
.market-price-editor > input { flex: 1; min-width: 0; }
.market-price-editor label { display: flex; align-items: center; gap: 4px; font-size: .78rem; }
.market-price-editor input[type=number] { width: 76px; min-height: 44px; }
@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off) .quiz-correct { animation: playfield-beat 250ms var(--game-arrival); }
}

/* Operating decisions and the visible consequences of a quarter. */
.realism-select,.channel-spend .realism-select { display:grid; gap:6px; margin-block:10px 6px; min-width:0; font-weight:700; }
.realism-select select { width:100%; min-width:0; min-height:44px; color:#242424; background:#fdfdfd; border:1px solid #777777; border-radius:9px; padding:6px 10px; font:inherit; font-size:.88rem; }
.realism-help { margin:6px 0 12px; font-size:.84rem; line-height:1.5; }
.ramp-chip { display:inline-block; width:fit-content; border-radius:8px; color:#292929; background:#dcdcdc; padding:4px 7px; font-size:.78rem; font-weight:800; }
.realism-evidence,.cash-forecast,.operations-debrief { margin-block:16px; background:#f8f8f8; color:#242424; border:1px solid #aaaaaa; border-radius:18px; padding:clamp(12px,2.3vw,22px); }
.realism-evidence { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; }
.realism-evidence h4,.cash-forecast h3 { margin:3px 0 5px; color:#242424; }
.realism-evidence .eyebrow,.cash-forecast .eyebrow { color:#4c4c4c; }
.realism-evidence p,.cash-forecast p,.operations-debrief p { margin:7px 0; color:#494949; line-height:1.55; }
.realism-evidence small { line-height:1.45; font-weight:500; }
.cash-forecast header { display:flex; align-items:center; gap:12px; }
.cash-forecast header svg { width:36px; height:36px; flex:none; color:#4c4c4c; }
.cash-forecast-weeks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-block:12px; }
.cash-forecast article,.operations-strip>div { position:relative; padding:12px; background:#ededed; border:1px solid #b3b3b3; border-radius:12px; }
.cash-forecast article.cash-pressure { border-color:#676767; background:#ebebeb; }
.cash-forecast h4 { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.cash-forecast h4 span { width:9px; height:9px; background:#565656; border-radius:50%; }
.cash-pressure h4 span { background:#535353; }
.cash-forecast dl,.cash-forecast dd { margin:0; }
.cash-forecast dl>div { display:flex; justify-content:space-between; gap:8px; padding:4px 0; font-size:.82rem; }
.cash-forecast dl>div:nth-last-child(-n+2) { border-top:1px solid #acacac; font-weight:800; }
.cash-forecast summary,.promotion-receipts summary { cursor:pointer; font-weight:800; line-height:1.5; min-height:32px; }
.operations-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
.operations-strip>div { display:grid; gap:4px; min-width:0; font-size:.8rem; overflow-wrap:anywhere; }
.operations-strip svg { width:25px; height:25px; color:#4f4f4f; }
.operations-strip b { font-size:1.25rem; line-height:1.1; }
.operations-debrief .retail-result { background:#f0f0f0; border-inline-start:4px solid #707070; border-radius:8px; padding:10px; }
.operations-debrief .retail-shortfall { background:#ebebeb; border-color:#676767; }
.retail-result span { display:block; }
.promotion-receipts { margin-top:10px; }
.promotion-receipts>div { margin:8px 0; border-top:1px solid #acacac; padding-top:8px; }
@media(max-width:680px) {
  .realism-evidence,.cash-forecast-weeks { grid-template-columns:1fr; }
  .operations-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off).scene-arrival :is(.operations-strip>div,.cash-forecast article,.realism-evidence) { animation: ledger-unfold 360ms var(--game-arrival) var(--arrival,0ms) both; }
  .shell:not(.motion-off) .cash-forecast[open] article { animation: ledger-unfold 340ms var(--game-arrival) var(--arrival) both; }
  .shell:not(.motion-off).scene-arrival .ramp-chip { animation: ledger-ramp 580ms var(--game-arrival) both; }
  .shell:not(.motion-off).scene-arrival .retail-result { animation: ledger-stamp 400ms var(--game-arrival) 100ms both; transform-origin:left center; }
  .shell:not(.motion-off).scene-arrival .realism-evidence h4 { animation: ledger-ramp 550ms var(--game-arrival) 130ms both; }
}
@keyframes ledger-unfold { from { opacity:0; transform:translateY(9px); } }
@keyframes ledger-ramp { from { opacity:.35; clip-path:inset(0 60% 0 0 round 8px); } to { opacity:1; clip-path:inset(0); } }
@keyframes ledger-stamp { from { opacity:0; transform:scale(.94) rotate(-1deg); } 68% { transform:scale(1.015); } }
.retail-result progress { display:block; width:100%; height:10px; margin-block:7px; accent-color:#6d6d6d; }
.retail-shortfall progress { accent-color:#535353; }
@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off).scene-arrival .retail-result progress { animation: ledger-ramp 610ms var(--game-arrival) 180ms both; }
  .shell:not(.motion-off).scene-arrival .cash-forecast h4 span { animation: cash-marker 470ms var(--game-arrival) var(--arrival,0ms) both; }
  .shell:not(.motion-off) .promotion-receipts[open]>div { animation: ledger-unfold 260ms var(--game-arrival) both; }
}
@keyframes cash-marker { 40% { box-shadow:0 0 0 5px #9595954d; transform:scale(1.25); } }