/* The Local — presentation only. Layout, state and simulation remain in their existing modules. */
:root {
  --bg: #f3ecdd;
  --paper: #fbf7ed;
  --ink: #193b32;
  --muted: #62695b;
  --line: #cbc8b6;
  --green: #42664b;
  --coral: #923d33;
  --amber: #aa7d32;
  --blue: #4a7180;
  --red: #923d33;
  --shadow: 0 12px 40px #25292326;
  --local-serif: Georgia, 'Times New Roman', serif;
  --local-sage: #dfe4d0;
  --local-warm: #f2e5c8;
  --local-danger: #f2e1d8;
}
body { color: var(--ink); background: var(--bg); }
button, input, select { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--local-serif); font-weight: 700; }
h1, h2 { letter-spacing: -.65px; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px;
}
.rail, .topbar, .action-dock { background: var(--paper); border-color: var(--line); }
.rail { border-right-color: #9ba78e; }
.brand-symbol { border-radius: 4px; transform: none; box-shadow: none; }
.brand-symbol .icon { transform: none; }
.wordmark { font-family: var(--local-serif); font-size: 33px; font-weight: 700; letter-spacing: -1.8px; }
.wordmark small { color: var(--muted); border-color: var(--line); letter-spacing: 1.8px; }
.nav-item { border-radius: 4px; color: #536254; }
.nav-item.active { background: #dce3cc; color: var(--ink); box-shadow: inset 0 0 0 1px #a9b89a; }
.nav-item:hover, .icon-button:hover { background: #e8e8d8; }
.rail-guide, .icon-button { color: #536254; }
.score-chip { border-radius: 0; background: transparent; border: 0; border-right: 1px solid var(--line); }
.score-chip > span { color: var(--muted); }
.score-chip > strong { font-family: var(--local-serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.day-chip strong { color: var(--ink); }
.day-chip > div > span, .day-chip strong small, .market-chip, .market-chip small { color: var(--muted); }
.market-chip { border-color: var(--line); }
.market-chip > .icon { color: #6e805c; }
.reputation-chip { background: var(--local-warm); border-color: #d9c8a7; border-radius: 5px; }
.reputation-chip > strong { color: #765927; }
.reputation-chip strong small, .reputation-chip > small { color: #796b50; }
.reputation-chip .icon { color: #99702b; }
.sun-disc { background: #f0d89c; color: #906b2f; }
.button { border-radius: 5px; font-weight: 650; }
.button.coral, .button.red { background: var(--coral); color: #fffaf0; box-shadow: none; }
.button.coral:hover, .button.red:hover { background: #7b3029; box-shadow: none; }
.button.green { background: var(--green); color: #fffaf0; }
.button.green:hover { background: #31543d; }
.button.light { background: #e7e8d9; color: #38513d; }
.button.light:hover { background: #d8dec9; }
.button.danger-light { background: var(--local-danger); color: #843c32; }
button:disabled { opacity: .57; }

/* One ruled financial strip, with the same four responsive cells. */
.hud { gap: 0; background: var(--paper); border: 1px solid #a3ac95; border-top: 3px solid #60795c; border-radius: 7px; overflow: hidden; }
.hud-card, .hud-card.cash, .hud-card.debt, .hud-card.energy, .hud-card.leads {
  border: 0; border-radius: 0; background: transparent;
}
.hud-card + .hud-card { border-left: 1px solid var(--line); }
.hud-card:hover { background: #f4f0e3; box-shadow: none; }
.hud-card > span { color: #40574b; }
.hud-card > strong { font-family: var(--local-serif); color: var(--ink); font-size: 30px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.8px; }
.hud-card > strong small, .hud-card > small { color: #606858; }
.hud-card.debt > strong, .hud-card.debt.danger > strong { color: var(--coral); }
.hud-card.energy > strong, .hud-card.leads > strong { color: var(--ink); }
.hud-card.debt.danger { background: var(--local-danger); }
.debt-track { background: #e7dbcd; }
.debt-track b { background: #a25742; }

.town-card { border-color: #9ca88c; border-radius: 7px; background: #e5e8d7; box-shadow: none; }
.town-title { background: var(--paper); border-color: #c3cbb6; }
.town-title h1 { font-size: 24px; letter-spacing: -.6px; }
.town-tag { color: var(--muted); letter-spacing: 1.6px; }
.live-dot { background: var(--ink); box-shadow: none; border-radius: 1px; width: 10px; height: 13px; clip-path: polygon(50% 0,92% 45%,75% 45%,100% 80%,60% 80%,60% 100%,40% 100%,40% 80%,0 80%,25% 45%,8% 45%); animation: none; }
.game-shell { --day-tint: #e3e6d2; }
.game-shell[data-phase=afternoon] { background: #f1e9d7; --day-tint: #e7e4cb; }
.game-shell[data-phase=evening] { background: #f0e4d7; --day-tint: #e6dbcc; }
.game-shell[data-phase=night] { background: #e0e4df; --day-tint: #d4ddd5; }
.map-stage { background: var(--day-tint); }
.next-closing, .player-tag, .map-wellbeing, .zoom-controls {
  background: #fbf7edf5; border: 1px solid #aeb99d; border-radius: 5px; box-shadow: none; backdrop-filter: none;
}
.next-closing span, .next-closing strong small, .player-tag > div > span { color: #5c6955; }
.next-closing strong { color: var(--ink); }
.next-closing > .icon { color: #42664b; }
.player-tag strong { font-family: var(--local-serif); font-size: 15px; letter-spacing: -.25px; }
.player-icon { border-radius: 4px; background: #dbe6e8; color: #436775; }
.map-wellbeing { color: var(--ink); }
.burnout-gauge i { background: #d7d6c7; border-radius: 4px; }
.burnout-gauge i b { background: #809271; border-radius: 4px; }
.wellbeing-strip.overheating { background: #f5e5da; color: #82392e; }
.overheating .burnout-gauge i b { background: #a64b38; }
.wellbeing-strip.recovering { background: #e1e9e9; }
.wellbeing-strip:hover { background: var(--paper); }
.event-inbox { background: #e6c47b; color: #4e3a1f; border-color: #b58c44; border-radius: 5px; box-shadow: none; }
.event-inbox b { background: #fcf2d8; }
.action-dock { border-color: #bcc6ac; gap: 0; }
.action-dock > button { border-radius: 3px; }
.action-dock > button + button { border-left: 1px solid #d6d3c2; }
.action-dock > button:hover { background: #f0eddf; }
.dock-icon, .action-icon { border-radius: 4px; }
.dock-icon.amber { background: #f0dba9; color: #8f6828; }
.dock-icon.blue { background: #d7e4e7; color: #3f6778; }
.dock-icon.violet { background: #e0dce6; color: #675579; }
.dock-icon.coral { background: #eed6c3; color: #8a5135; }
.dock-icon.green { background: #dce4cd; color: #37573b; }
.bottom-line, #save-status, .keyboard-hint { color: #626e58; }
.keyboard-hint kbd { color: #40573d; border-color: #c8ceba; background: #e7e8d7; }
.welcome-card { background: #fbf7edf5; border: 1px solid #acb294; border-radius: 6px; box-shadow: 3px 4px 0 #40513a14; transform: none; backdrop-filter: none; }
.welcome-card h2 { font-size: 30px; letter-spacing: -.75px; }
.welcome-card p, .welcome-kicker { color: #636b53; }
.welcome-load { color: #42664b; }

/* Paper panels, small-radius controls and a restrained semantic colour set. */
.modal-backdrop { background: #1b302b80; backdrop-filter: blur(3px); }
.modal { background: var(--paper); border: 1px solid #9eaa92; border-radius: 9px; }
.modal-heading, .modal-footer { border-color: var(--line); }
.modal-heading h2 { font-size: 30px; letter-spacing: -.8px; }
.modal-heading > .icon-button { border: 1px solid #d4cbb5; background: #f4eddd; border-radius: 4px; color: var(--ink); }
.modal-content { scrollbar-color: #a6b092 var(--paper); }
.modal-footer { background: #f1eddf; }
.eyebrow { color: #58644d; letter-spacing: 1.7px; }
.modal-lead, .modal-footer > span { color: var(--muted); }
.section-label { font-family: 'DM Sans', sans-serif; color: #536248; }
.action-card, .location-grid > button, .shortcut-card, .deal-card, .candidate, .agent-card,
.setup-choice, .allocation-grid article, .event-choices > button, .lead-allocation,
.source-report-card, .pipeline-mix, .development-card, .property-card,
.stock-finance-row, .bet-choices > button {
  background: var(--paper); border-color: #c4cbb7; border-radius: 5px; box-shadow: none;
}
.action-card:not(:disabled):hover, .location-grid > button:hover, .shortcut-card:hover,
.event-choices > button:hover, .bet-choices > button:not(:disabled):hover { background: #edf0df; border-color: #8e9f7d; box-shadow: none; }
.action-card.risky, .agent-card.flagged { background: #f6ecdf; border-color: #d5bca4; }
.action-icon, .location-grid > button > span, .shortcut-card > span,
.journal-symbol, .guide-grid article > b, .portfolio-heading > span, .equity-summary > span {
  border-radius: 4px; background: #e1e7d2; color: #526b45;
}
.action-title { color: var(--ink); }
.action-title em, .action-meta b { background: #e9e7d3; color: #63713f; }
.action-meta b.risk-label, .misconduct-alert { background: var(--local-danger); color: #854333; }
.action-description, .action-reason, .action-meta { color: #66705b; }
.panel-metric, .info-banner, .skills-grid > div, .budget-box, .cost-list .cost-total,
.campaign-summary, .office-brief, .career-time, .capacity-note, .book-progress,
.service-dashboard, .property-market-header, .equity-summary, .stock-portfolio {
  background: #e9ecdc; border-color: #c2ccb2; border-radius: 5px; box-shadow: none;
}
.panel-metric strong, .final-score strong, .property-price strong, .portfolio-value > strong {
  font-family: var(--local-serif); font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.panel-metric.orange, .setup-warning, .brokerage-box, .sale-quote, .inventory-box,
.market-explainer, .market-detail > span, .book-terms, .book-offer,
.tiger-shortcut, .tiger-banner, .quiz-prompt, .quiz-career, .land-project,
.beginner-luck-note, .niche-summary > div > span { background: var(--local-warm); border-color: #d6c6a4; border-radius: 5px; }
.panel-metric.blue { background: #dfe8e7; }
.panel-metric.red, .over-capacity, .scrutiny-note, .service-dashboard.over-capacity,
.inventory-box.questionable, .team-overhead, .weariness-note, .insolvency-meter {
  background: var(--local-danger); border-color: #d1b3a3; border-radius: 5px;
}
.gain, .gain b, .contact-status.warm { color: #42664b; }
.loss, .loss b, .portfolio-loss { color: var(--coral); }
.segmented { background: #e9e7d8; border-radius: 4px; }
.segmented > button { border-radius: 3px; color: #667157; }
.segmented > button.selected { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px #bdc7ac; }
.deal-date, .owned-list > span, .status-pill, .status-pill.closed, .deal-tags small { background: #e1e7d1; color: #47613b; border-radius: 3px; }
.status-pill.active { background: #efddb5; color: #7b5d29; }
.status-pill.collapsed, .deal-tags .shady { background: #eeddd1; color: #884332; }
.skills-grid i, .service-slots, .insolvency-meter i, .build-progress i { background: #d7dac7; }
.skills-grid b, .service-slots > i, .build-progress b { background: #819374; }
.over-capacity .service-slots > i, .insolvency-meter b { background: #a35740; }
.name-field input, .lead-allocation input, .money-input { background: #fffaf0; border-color: #b8c1a8; border-radius: 4px; color: var(--ink); }
.money-input > input { color: var(--ink); }
.money-input > button, .point-control, .point-control button { background: #e3e7d2; color: #456039; border-radius: 4px; }
.point-control button:hover { background: #ced8b9; }
.setup-choice.selected { background: #e5ebd6; border-color: #688359; box-shadow: inset 0 0 0 1px #688359; }
.setup-choice strong { font-family: var(--local-serif); }
.setup-choice i { background: transparent; color: var(--ink); }
.setup-steps > .active b { background: #557449; }
.setup-steps > .done b { background: #e1e8d0; color: #426036; }
.points-header > div > strong { background: #e2e8d0; color: #47673a; border-radius: 4px; }
.point-control strong { font-family: var(--local-serif); }
.setup-intro, .setup-tip, .setup-choice small, .setup-choice > b { color: #667056; }
.story-event .modal-heading { background: #f3e9d1; }
.recruit-event .modal-heading { background: #e6ead7; }
.recruit-event .agent-stats { background: #eef0e4; border-radius: 4px; }
.disaster-event.modal { background: #fbf2e7; }
.disaster-event .modal-heading { background: #923d33; color: #fff7e8; }
.disaster-event .modal-heading h2, .disaster-event .modal-heading .eyebrow { color: #fff7e8; }
.disaster-event .event-choices > button { background: #f8eadb; }
.event-illustration { background: #eddfb8; border-radius: 8px; }
.event-illustration.disaster { background: #edcbb0; }
.event-illustration.disaster > span { background: #a94d38; }
.final-score, .quiz-win { background: #e4ead4; border-radius: 5px; }
.final-score.bankrupt { background: #efdbc9; }
.toast { background: #315840; color: #fff9ed; border-radius: 5px; }
.toast.error { background: #923d33; }
.floating-reward { background: #42664b; border-color: #e2e8cf; border-radius: 5px; box-shadow: none; }
.premium-deal { background: #faf1d9; }
.match-scoreboard { background: #254d40; border-radius: 6px; }
.quiz-result { border-radius: 6px; }
.stake-presets > button { border-radius: 4px; background: #f7edd6; color: #79592c; }
.stake-presets > button.all-in { background: #e7c49c; color: #773f2b; }
.quiz-trophy { background: #e8d29a; color: #866327; border-radius: 5px; }
.quiz-ladder b { border-color: var(--local-warm); }
.quiz-ladder .reached b { background: #a7833e; }

/* Property and team artwork use the same printed-paper frame as the town. */
.property-card { border-color: #aebba0; border-radius: 6px; }
.property-card h3 { font-size: 22px; letter-spacing: -.45px; }
.property-price strong { font-size: 31px; letter-spacing: -.8px; }
.property-label, .property-price > span, .property-ledger, .build-progress > div { color: #616b55; }
.property-ledger { column-gap: 16px; }
.property-ledger > :nth-child(even) { border-left: 1px solid var(--line); padding-left: 14px; }
.property-ledger b { font-size: 14px; }
.property-ledger .loss, .property-ledger .loss b { color: var(--coral); }
.property-scene { border-radius: 5px; }
.property-controls .button { border-radius: 4px; }
.build-progress b, .build-progress i { border-radius: 4px; }
.developer-path > span { background: #ecebdc; border-radius: 3px; }
.developer-path .done { background: #dee7cc; color: #42633a; }
.team-room { background: linear-gradient(#e6e8d9 0 76%,#9f8c68 76% 79%,#d5c39f 79%); border-color: #acb79b; border-radius: 5px; }
.team-room > button > span { background: var(--paper); border: 1px solid #b7bda6; border-radius: 2px; }
.office-door { background: var(--paper); border-color: #8a9b78; transform: none; }

@media (max-width:700px) {
  .wordmark { font-size: 27px; letter-spacing: -1.35px; }
  .topbar { padding-left: 14px; padding-right: 12px; }
  .score-chip { border: 0; padding-right: 4px; }
  .score-chip > strong { font-size: 18px; }
  .score-chip > span { font-size: 7px; letter-spacing: .65px; }
  .hud { gap: 0; }
  .hud-card { padding: 10px 9px; }
  .hud-card > strong { font-size: 24px; }
  .town-title h1 { font-size: 23px; }
  .player-tag strong { font-size: 13px; }
  .rail { border-top-color: #adb69c; }
  .nav-item { border-radius: 3px; }
  .action-dock > button + button { border-color: #d5d1be; }
  .welcome-card { transform: translateX(50%); }
  .welcome-card h2 { font-size: 25px; }
  .welcome-card h2 br, .welcome-card p br { display: initial; }
  .modal-heading h2 { font-size: 27px; line-height: 1.15; }
  .modal { border-radius: 8px; }
}
@media (max-width:420px) {
  .hud-card { padding: 9px 6px 10px; }
  .hud-card > strong { font-size: clamp(18px,5.1vw,22px); letter-spacing: -.65px; }
  .hud-card > strong small { font-size: 9px; }
  .wordmark { font-size: 25px; }
  .modal-heading h2 { font-size: 25px; }
  .welcome-card h2 { font-size: 23px; }
}
@media (max-width:600px) {
  .property-shop .property-card h3 { font-size: 18px; }
  .property-shop .property-price strong { font-size: 24px; }
  .property-shop .property-ledger b { font-size: 12px; }
  .property-shop .property-ledger { column-gap: 8px; }
  .property-shop .property-ledger > :nth-child(even) { padding-left: 7px; }
}
@media (max-width:350px) {
  .wordmark { font-size: 22px; }
  .hud-card { padding-left: 5px; padding-right: 5px; }
  .hud-card > strong { font-size: 17px; }
}

/* The wider town sits on a clean ground, with soft depth at its finite edge. */
.town-title { border-bottom: 0; }
.map-stage.reference-map { background: radial-gradient(ellipse at 50% 48%, #e8ebd6 15%, #d9dfc5 100%); }
.reference-map #world { inset: 0 8px; }
@media (max-width:700px) {
  .reference-map #world { inset: 42px 0 76px; }
}

/* The phone town fits the live viewport, including when browser bars are open. */
@media (max-width:700px) {
  .topbar { height: 40px; padding-left: 12px; padding-right: 10px; gap: 7px; }
  .wordmark { font-size: 25px; }
  .score-chip > strong { font-size: 16px; }
  .score-chip > span { font-size: 6px; }
  .top-actions .icon-button { width: 29px; height: 34px; }
  .game-main {
    padding: 4px 8px;
    gap: 4px;
    overflow: hidden;
  }
  .status-strip { min-height: 36px; gap: 7px; }
  .day-chip { gap: 6px; }
  .day-chip > div { gap: 2px; }
  .day-chip strong { font-size: 11px; }
  .day-chip > div > span { font-size: 9px; }
  .sun-disc { width: 29px; height: 29px; }
  .sun-disc .icon { width: 18px; height: 18px; }
  .reputation-chip { padding: 5px 6px; gap: 4px; }
  .reputation-chip > strong { font-size: 13px; }
  .day-button { min-height: 34px; min-width: 94px; padding: 0 9px; font-size: 11px; }
  .hud-card { min-height: 0; padding: 4px 6px; gap: 1px; }
  .hud-card > span { font-size: 9px; line-height: 1.2; gap: 4px; }
  .hud-card > span .icon { width: 11px; height: 11px; }
  .hud-card > strong { font-size: clamp(17px,5.1vw,21px); line-height: 1.1; }
  .hud-card > strong small { font-size: 9px; }
  .hud-card > small { font-size: 8px; line-height: 1.15; min-height: 19px; }
  .rail { height: calc(52px + env(safe-area-inset-bottom)); }
  .rail nav { padding: 3px 6px; gap: 3px; }
  .nav-item { min-height: 44px; gap: 3px; font-size: 9px; }
  .nav-item .icon { width: 20px; height: 20px; }
  .game-shell { height: calc(100dvh - 52px - env(safe-area-inset-bottom)); }
  .town-card:has(.portrait-map) { position: relative; min-height: 0; flex: 1 1 0; }
  .town-card:has(.portrait-map) .town-title {
    position: absolute; top: 3px; left: 7px; height: auto; padding: 0;
    background: transparent; pointer-events: none; z-index: 2;
  }
  .town-card:has(.portrait-map) .town-title h1 { font-size: 14px; }
  .town-card:has(.portrait-map) .town-title > div { gap: 4px; }
  .portrait-map { min-height: 0; }
  .reference-map.portrait-map #world { inset: 0; }
  .portrait-map .map-topline { top: 6px; left: 6px; right: 6px; gap: 5px; align-items: flex-end; flex-direction: column; }
  .portrait-map .next-closing.empty { display: none; }
  .portrait-map .next-closing { min-width: 0; max-width: 43%; padding: 4px 5px; gap: 4px; }
  .portrait-map .next-closing > .icon { display: block; width: 16px; height: 16px; }
  .portrait-map .next-closing > div { min-width: 0; }
  .portrait-map .next-closing span { font-size: 8px; line-height: 1.2; letter-spacing: .2px; }
  .portrait-map .next-closing strong { margin-top: 2px; font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
  .portrait-map .next-closing strong small { font-size: 9px; margin-left: 3px; }
  .portrait-map .next-closing.empty strong { font-size: 9px; }
  /* The full call text stays accessible; the compact phone badge occupies
     the empty upper-left corner without covering a building or its label. */
  .portrait-map .event-inbox {
    position: absolute; left: 0; top: 28px; width: 44px; height: 44px;
    min-width: 0; max-width: none; min-height: 0; padding: 5px; gap: 4px;
    justify-content: center; font-size: 0; line-height: 1;
  }
  .portrait-map .event-inbox > .icon { width: 16px; height: 16px; }
  .portrait-map .event-inbox b { padding: 2px 4px; }
  .portrait-map .player-tag { left: 6px; bottom: 6px; max-width: 39%; min-height: 34px; padding: 4px 5px; gap: 4px; }
  .portrait-map .player-tag .player-icon { display: grid; width: 25px; height: 25px; flex-shrink: 0; }
  .portrait-map .player-tag .player-icon > .icon { width: 16px; height: 16px; }
  .portrait-map .player-tag > div { min-width: 0; }
  .portrait-map .player-tag strong { font-size: 11px; line-height: 1.15; overflow-wrap: anywhere; }
  .portrait-map .player-tag > div > span { display: block; max-width: none; margin-top: 2px; font-size: 8px; line-height: 1.15; white-space: normal; }
  .portrait-map .map-wellbeing { right: 6px; bottom: 6px; width: 118px; min-height: 34px; padding: 4px 5px; gap: 4px; }
  .portrait-map .map-wellbeing .mood-face { width: 26px; height: 26px; }
  .portrait-map .map-wellbeing .burnout-gauge { gap: 3px; }
  .portrait-map .map-wellbeing .burnout-gauge > span { font-size: 9px; gap: 3px; }
  .portrait-map .map-wellbeing .burnout-gauge > span strong { font-size: 12px; }
  .portrait-map .map-wellbeing .burnout-gauge small { font-size: 8px; }
  .portrait-map .map-wellbeing .burnout-gauge i { height: 5px; }
  .bottom-line { display: flex; min-height: 12px; gap: 6px; font-size: 8px; }
  #save-status { font-size: 8px; }
}

@media (max-width:350px) {
  .topbar { padding-left: 10px; padding-right: 8px; gap: 5px; }
  .wordmark { font-size: 22px; }
  .score-chip > strong { font-size: 14px; }
  .game-main { padding-left: 8px; padding-right: 8px; }
  .hud-card { padding-left: 5px; padding-right: 5px; }
  .portrait-map .map-wellbeing { width: 110px; }
}

/* Portraits are small ink illustrations, with the same warm paper as the town. */
.illustrated-portrait { overflow: visible; filter: none; }
.candidate-top .agent-portrait { width: 72px; height: 82px; }
.applicant-intro .agent-portrait { width: 108px; height: 123px; }
.profile-overview .agent-portrait, .return-career .agent-portrait { width: 82px; height: 93px; }
.mood-face.illustrated-portrait { height: 48px; width: 43px; border-radius: 6px; }
.wellbeing-detail .mood-face.illustrated-portrait { width: 94px; height: 106px; }
.exhausted-face .mood-face.illustrated-portrait { width: 90px; height: 102px; }
.illustrated-portrait .portrait-eyes { transform-origin: 44px 37px; animation: portrait-blink 8s infinite; }
.illustrated-portrait.spent .portrait-eyes, .illustrated-portrait.critical .portrait-eyes { animation-duration: 6s; }
.illustrated-portrait.resting .portrait-eyes { animation: none; }
@keyframes portrait-blink { 0%, 47%, 51%, 100% { transform: scaleY(1); } 49% { transform: scaleY(.1); } }
.team-room { gap: 9px; align-items: flex-end; flex-wrap: wrap; min-height: 145px; background: #e5e7d5; border-color: #b8c0a5; border-radius: 5px; }
.team-room > button { min-width: 66px; padding: 0 2px; }
.team-room > button > span { background: #f9f2e2; color: var(--ink); border: 1px solid #c1c4ab; border-radius: 2px; font-size: 10px; margin-top: 2px; }
.office-door { border-color: #9da98d; background: #eee7d4; transform: none; margin-left: auto; }

/* Keep the burnout readout clear of the notification corner. */
.map-stage .map-wellbeing { left: 15px; right: auto; }
.map-stage .player-tag { left: auto; right: 15px; text-align: left; color: var(--ink); }
button.player-tag { font: inherit; cursor: pointer; }
button.player-tag:hover { background: #fffaf0; border-color: #7b9272; }
button.player-tag:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.map-wellbeing .mood-face.illustrated-portrait { width: 43px; height: 48px; }
.player-icon:has(.illustrated-portrait) { background: transparent; }
.player-icon .mood-face.illustrated-portrait { width: 100%; height: 100%; }

/* Fatigue changes the entire paper palette and the town, while keeping text sharp.
   Edge shading is decorative and never intercepts a click or dims an open dialog. */
body[data-fatigue]::after {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 44%, #67484022 75%, #422c3360 100%),
    linear-gradient(180deg, #47354132, transparent 13%, transparent 87%, #47354128);
  opacity: 0; transition: opacity .8s ease;
}
body[data-fatigue=weary] { --bg: #e9dfce; --paper: #f5eddf; --line: #c7bbaa; }
body[data-fatigue=spent] { --bg: #ded0bd; --paper: #f0e4d5; --line: #c3aa99; --local-sage: #d3d4bd; }
body[data-fatigue=critical] { --bg: #cfbcae; --paper: #eaddcf; --line: #b89c8e; --local-sage: #c4c4ae; }
body[data-fatigue=resting] { --bg: #dce0d9; --paper: #f1f1e5; --line: #b5c0b0; }
body[data-fatigue=weary]::after { opacity: .3; }
body[data-fatigue=spent]::after { opacity: .7; }
body[data-fatigue=critical]::after { opacity: 1; }
body[data-fatigue=resting]::after { opacity: .25; }
body[data-fatigue=weary] .game-shell { background: #e9dfce; --day-tint: #d9d8c2; }
body[data-fatigue=spent] .game-shell { background: #ded0bd; --day-tint: #c8c4aa; }
body[data-fatigue=critical] .game-shell { background: #cfbcae; --day-tint: #bcb8a2; }
body[data-fatigue=resting] .game-shell { background: #dce0d9; --day-tint: #ccd8c9; }
#world { transition: filter .8s ease; }
body[data-fatigue=weary] #world { filter: saturate(.82) sepia(.08); }
body[data-fatigue=spent] #world { filter: saturate(.6) sepia(.17) brightness(.94); }
body[data-fatigue=critical] #world { filter: saturate(.38) sepia(.24) brightness(.88); }
body[data-fatigue=resting] #world { filter: saturate(.7) brightness(.96); }
body[data-fatigue=spent] .town-card, body[data-fatigue=critical] .town-card { border-color: #9f7967; }
body[data-fatigue=spent] .map-wellbeing, body[data-fatigue=critical] .map-wellbeing { border: 2px solid #a05b48; background: #f1d8c6; }
body[data-fatigue=critical] .burnout-gauge i { background: #d9b7a7; }
body[data-fatigue=critical] .burnout-gauge i b { background: #913d35; }
body[data-fatigue=critical] .burnout-gauge > span strong { color: #762e29; }

/* High-use controls fit into the location, without another row of full cards. */
.brokerage-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 17px; }
.brokerage-quick-actions .button { min-height: 48px; padding: 9px 12px; font-size: 12px; line-height: 1.35; white-space: normal; justify-content: center; }
.brokerage-quick-actions .button .icon { flex-shrink: 0; width: 17px; height: 17px; }
.supply-purchase { border: 1px solid #c4cbb7; border-radius: 5px; background: var(--paper); padding: 14px 16px; margin: 10px 0; }
.supply-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; }
.supply-heading h3 { font-size: 17px; }
.supply-heading > span, .supply-heading > small { font-size: 11px; color: var(--muted); }
.supply-purchase > p, .supply-heading p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 5px 0 9px; }
.supply-purchase > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; margin-top: 7px; }
.supply-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.supply-controls > .button { min-height: 44px; padding: 8px 14px; font-size: 12px; }
.supply-controls .stock-toggle { min-height: 44px; }
.supply-controls .stock-toggle > i { background: #d2cebc; }
.supply-controls .stock-toggle.enabled > i { background: #667f56; }
.amount-slider { display: block; padding: 12px 0 8px; margin: 5px 0; }
.amount-slider > label, .amount-slider > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); }
.amount-slider output { margin-left: auto; color: var(--ink); font-family: var(--local-serif); font-size: 25px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; line-height: 1.2; }
.amount-slider > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; }
.amount-slider input[type=range] { display: block; width: 100%; min-height: 44px; margin: 3px 0 0; padding: 0; accent-color: #5b7751; cursor: pointer; background: transparent; }
.amount-slider input[type=range]:disabled { cursor: default; opacity: .45; }
.amount-slider input[type=range]:focus-visible { outline-offset: 1px; border-radius: 3px; }
.stock-portfolio.compact { padding: 13px 15px; margin-bottom: 14px; }
.stock-portfolio.compact .portfolio-heading { margin-bottom: 10px; gap: 9px; }
.stock-portfolio.compact .portfolio-heading > span { width: 30px; height: 30px; }
.stock-portfolio.compact .portfolio-heading h3 { font-size: 16px; }
.stock-portfolio.compact .portfolio-heading p { font-size: 11px; margin-top: 2px; }
.stock-portfolio.compact .portfolio-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; padding-bottom: 9px; }
.stock-portfolio.compact .portfolio-value > span { font-size: 11px; }
.stock-portfolio.compact .portfolio-value > strong { font-size: 27px; margin: 0; margin-left: auto; letter-spacing: -.7px; }
.stock-portfolio.compact .portfolio-value > small { font-size: 11px; }
.stock-portfolio.compact .portfolio-stats { display: flex; justify-content: space-between; gap: 8px 16px; padding-top: 9px; flex-wrap: wrap; }
.stock-portfolio.compact .portfolio-stats > span { font-size: 10px; display: flex; align-items: baseline; gap: 7px; }
.stock-portfolio.compact .portfolio-stats strong { display: inline; font-size: 14px; margin: 0; }
.stock-portfolio.compact .settings-note { font-size: 10px; line-height: 1.4; margin: 9px 0 0; }
.stock-portfolio.compact + .stock-trade-tabs { margin: 10px 0; }
.open-house-roster { display: grid; gap: 7px; margin: 13px 0; }
.open-house-agent { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #c4cbb7; border-radius: 5px; background: var(--paper); }
.open-house-agent > div { min-width: 0; }
.open-house-agent strong { display: block; font-size: 13px; color: var(--ink); }
.open-house-agent small, .open-house-agent p { display: block; font-size: 11px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
.open-house-agent > label { flex: 0 0 155px; max-width: 50%; }
.open-house-agent select { width: 100%; min-height: 44px; border: 1px solid #aeb99e; border-radius: 4px; background: #edf0df; color: var(--ink); font: inherit; font-size: 12px; padding: 7px 9px; }
.deals-sentinel { display: flex; justify-content: center; align-items: center; min-height: 44px; font-size: 11px; color: var(--muted); padding: 12px; }

@media (max-width:700px) {
  /* Leave the entire lower map-card row visible while a notification is up. */
  #toast-root { bottom: calc(130px + env(safe-area-inset-bottom)); right: 10px; max-width: min(340px, calc(100vw - 20px)); }
  #toast-root .toast { padding: 10px 12px; font-size: 11px; line-height: 1.4; }
  .candidate-top .agent-portrait { width: 64px; height: 73px; }
  .team-room { gap: 6px; padding: 12px 9px; }
  .team-room > button { min-width: 57px; }
  .map-stage .map-wellbeing { left: 9px; right: auto; }
  .map-stage .player-tag { left: auto; right: 9px; }
  .map-wellbeing .mood-face.illustrated-portrait { width: 37px; height: 42px; }
  .portrait-map .map-wellbeing { left: 6px; right: auto; width: 132px; min-height: 44px; padding: 4px 5px; }
  .portrait-map .map-wellbeing .mood-face.illustrated-portrait { width: 31px; height: 35px; }
  .portrait-map .player-tag { left: auto; right: 6px; max-width: calc(100% - 150px); min-height: 44px; }
  .brokerage-quick-actions { gap: 7px; margin-bottom: 14px; }
  .brokerage-quick-actions .button { padding: 8px; font-size: 11px; gap: 6px; }
  .supply-purchase { padding: 12px; }
  .supply-heading h3 { font-size: 15px; }
  .supply-controls { gap: 8px; }
  .supply-controls > .button { padding: 8px 10px; font-size: 11px; }
  .supply-controls .stock-toggle { gap: 6px; font-size: 10px; }
  .supply-controls .stock-toggle > span > strong { font-size: 12px; }
  .stock-portfolio.compact { padding: 12px; }
  .stock-portfolio.compact .portfolio-value > strong { font-size: 25px; }
  .stock-portfolio.compact .portfolio-stats { gap: 6px 10px; }
  .stock-portfolio.compact .portfolio-stats > span { font-size: 10px; gap: 5px; }
  .stock-portfolio.compact .portfolio-stats strong { font-size: 12px; }
  .open-house-agent { padding: 9px 10px; gap: 8px; }
  .open-house-agent select { font-size: 11px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .illustrated-portrait .portrait-eyes { animation: none; }
  body[data-fatigue]::after, #world { transition: none; }
}

/* Compact face crops stay inside both map cards. */
.mood-face.illustrated-portrait { overflow: hidden; }
.brokerage-quick-actions .button small { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; opacity: .85; }
.stock-portfolio.compact .stock-trade-tabs { margin: 9px 0; }
.stock-portfolio.compact .amount-slider { padding: 0; margin: 4px 0; }
.stock-portfolio.compact .amount-slider input[type=range] { min-height: 34px; }
.stock-portfolio.compact .stock-availability:empty { display: none; }
.stock-portfolio.compact .trade-footnote { margin: 6px 0 0; }
.stock-portfolio.compact .amount-heading { margin: 8px 0 0; }
.stock-portfolio.compact .amount-slider > .text-link { margin: 0 0 6px; }