/* 정치 타이쿤 — 선거 캠프 운영실 */
:root {
  --bg: #f3f3ee;
  --ink: #19313b;
  --muted: #6d7d80;
  --line: #dce3df;
  --card: #fff;
  --hud: #142e39;
  --hud2: #1b3b46;
  --good: #168368;
  --bad: #bf4c43;
  --warn: #ba832b;
  --gold: #e7bd64;
  --teal: #168368;
  --soft: #f4f7f4;
  --shadow: 0 4px 20px #17332f06;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); line-height: 1.5; letter-spacing: -.025em; }
button, input { font: inherit; }
button { transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .16s; }
button:focus-visible, a:focus-visible { outline: 3px solid #41a992; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
button:not(:disabled):active { transform: translateY(1px); }
::selection { color: #123c31; background: #c6e6d7; }
#app { width: calc(100% - 48px); max-width: 1240px; margin: 24px auto 0; background: transparent; padding-bottom: 90px; }
.hud { position: relative; top: auto; padding: 20px 24px 18px; background: var(--hud); border-radius: 15px 15px 0 0; box-shadow: none; }
.hud-top { margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 4px; font-size: 23px; letter-spacing: -1.2px; font-weight: 850; }
.brand::before { content: ''; width: 9px; height: 23px; background: #b5d5bd; border-radius: 2px; margin-right: 8px; box-shadow: 5px -4px 0 -2px #d5b96d; }
.brand b { margin-left: 1px; background: transparent; padding: 0; color: #9ed8bd; border-radius: 0; }
.brand small { margin-left: 12px; color: #8da9a9; font-size: 8px; letter-spacing: 1.6px; font-weight: 600; }
.hud .who { gap: 8px; font-size: 12px; }
.party-chip, .rank { border-radius: 5px; padding: 4px 9px; box-shadow: none; font-weight: 750; }
.rank { background: #2c4852; color: #e1ece8; }
.who .quit { color: #a8bdbf; background: transparent; border-color: #47616a; border-radius: 5px; font-weight: 600; }
.pills { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.pill { border-radius: 0; border: 0; border-left: 1px solid #3b535c; background: transparent; padding: 0 20px; gap: 12px; min-height: 47px; }
.pill:first-child { border-left: 0; padding-left: 0; }
.pill i { flex-basis: 29px; width: 29px; height: 29px; opacity: .9; }
.pill b { font-size: 23px; line-height: 1.3; font-weight: 780; letter-spacing: -.6px; }
.pill small { color: #b5c8c9; font-size: 11px; font-weight: 550; line-height: 1.5; }
.gauge { height: 6px; margin: 4px 0 7px; background: #36515a; }
.gauge span { background: #89c5a6; }
#controlBar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 49px; padding: 9px 24px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; font-size: 12px; }
.control-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); margin-right: auto; font-weight: 650; }
.control-state::before { content: ''; width: 6px; height: 6px; background: #33a482; border-radius: 50%; box-shadow: 0 0 0 3px #e6f4eb; }
.control-state.paused::before { background: var(--warn); box-shadow: 0 0 0 3px #fff3db; }
#controlBar button { padding: 5px 10px; border: 1px solid #dfe6e2; border-radius: 5px; background: #fff; color: #5b7174; font-size: 11px; font-weight: 750; min-height: 29px; }
#controlBar button:hover { border-color: #7fae9e; background: #f4f8f5; }
#controlBar button.on, #controlBar button.active, #controlBar button[aria-pressed="true"] { color: #fff; background: #1a4e45; border-color: #1a4e45; }
#controlBar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#pauseBtn { margin-left: 6px; }
#helpBtn { margin-left: 5px; }
.campaign-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; margin: 22px 0 17px; align-items: stretch; }
.stage { height: auto; min-height: 310px; border: 1px solid #c7d9d3; border-radius: 12px; box-shadow: var(--shadow); background: #d5e6df; isolation: isolate; }
.stage::after { content: 'CAMPAIGN HEADQUARTERS'; position: absolute; left: 14px; bottom: 13px; font-size: 8px; letter-spacing: 2px; font-weight: 750; color: #fff; background: #14372bb8; padding: 4px 7px; border-radius: 3px; pointer-events: none; }
.nameplate { left: 12px; top: 12px; border: 1px solid #ffffffb8; padding: 6px 11px 6px 6px; gap: 7px; border-radius: 8px; box-shadow: 0 2px 8px #1e382b12; background: #fffffff2; backdrop-filter: blur(8px); max-width: 74%; }
.nameplate .num { border-radius: 5px; height: 32px; width: 32px; flex-basis: 32px; font-size: 20px; }
.nameplate b { font-size: 13px; line-height: 1.5; }
.nameplate small { font-size: 10px; font-weight: 550; }
.mailbox { right: 12px; top: auto; bottom: 12px; padding: 5px 8px; border-radius: 7px; font-size: 11px; box-shadow: 0 2px 8px #1b332b22; animation: none; }
.mailbox svg { width: 23px; height: 23px; }
.mailbox b { font-size: 10px; min-width: 18px; border-radius: 5px; }
.mailbox.hot { border: 1px solid #d78576; animation: none; }
.campaign-intel { min-width: 0; display: flex; flex-direction: column; padding: 23px 24px 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.campaign-brief { margin-bottom: auto; }
.campaign-brief > small, .campaign-brief .eyebrow { display: block; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; margin-bottom: 6px; text-transform: uppercase; }
.campaign-brief > small:last-child:not(:first-child) { font-size: 10px; color: #728c7d; letter-spacing: 0; text-transform: none; font-weight: 550; }
.campaign-brief h1 { font-size: clamp(24px, 2.2vw, 32px); margin: 0; line-height: 1.35; letter-spacing: -1.4px; font-weight: 820; }
.campaign-brief h2 { font-size: 24px; margin: 0; line-height: 1.35; letter-spacing: -1px; }
.campaign-brief p { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 7px 0 13px; }
.brief-track { display: flex; align-items: center; gap: 5px; margin: 12px 0 17px; height: 5px; background: #e8eee5; border-radius: 3px; overflow: hidden; }
.brief-track > i { display: block; height: 100%; background: #5fa17b; border-radius: 3px; transition: width .4s; }
.brief-track span { flex: 1; min-width: 0; padding: 5px 3px; border-top: 3px solid #e8ece9; color: #98a5a5; font-size: 10px; font-weight: 700; text-align: center; }
.brief-track span.done { border-color: #82baa0; color: #528c74; }
.brief-track span.on, .brief-track span.now { border-color: #1e856a; color: #1e856a; font-weight: 850; }
.mood { padding: 0; margin: 4px 0 15px; gap: 8px; }
.gchip { border: 1px solid #e3e8e3; border-radius: 7px; box-shadow: none; background: #fafbf8; padding: 9px 7px 11px; min-height: 64px; grid-template-columns: 24px 1fr; gap: 4px; }
.gchip .gi { width: 23px; height: 30px; align-self: center; opacity: .9; }
.gchip .gn { font-size: 10px; line-height: 1.4; font-weight: 650; }
.gchip .gn small { font-size: 9px; font-weight: 500; margin-top: 1px; }
.gchip b { right: 8px; bottom: 7px; font-size: 17px; font-weight: 800; line-height: 1; }
.gchip i { height: 3px; border-radius: 0; }
.gchip.hi { box-shadow: none; background: #f3f8f1; border-color: #d8e6d4; }
.gchip.lo { box-shadow: none; background: #fcf5ee; border-color: #eedbcf; }
.newsbar { height: 35px; border: 0; border-top: 1px solid #e5e9e2; background: #fafbf7; color: #62746e; margin: 0 -24px; flex-shrink: 0; }
.nlabel { background: transparent; color: #25836b; border-right: 1px solid #e1e7df; padding: 0 12px; font-size: 10px; letter-spacing: 1px; }
#newsText { font-size: 11px; font-weight: 550; }
.tabs { display: flex; gap: 4px !important; padding: 0 !important; border-bottom: 1px solid #d4ddd6; margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; background: transparent; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1; min-width: 68px; border-radius: 0; box-shadow: none; padding: 13px 8px !important; background: transparent; font-weight: 700; color: #7a8988; font-size: 13px !important; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--ink); background: #e9eee8; }
.tabs button.on { color: #15674e; box-shadow: none; background: transparent; border-bottom-color: #188467; }
.tabs button .dot { top: 7px; right: 10px; min-width: 14px; height: 14px; font-size: 9px; line-height: 14px; background: #bd7240; animation: none; }
.panel { padding: 0; }
.panel > .muted { background: #fff; border: 1px dashed #d0dcd3; border-radius: 10px; padding: 40px 20px; font-size: 13px; }
.tycoon-board { display: flex; flex-direction: column; gap: 20px; }
.tycoon-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; margin: 1px 0 -3px; }
.tycoon-hero h1, .tycoon-hero h2 { margin: 2px 0 4px; font-size: 25px; line-height: 1.35; letter-spacing: -1px; font-weight: 800; }
.tycoon-hero > div > small, .tycoon-eyebrow { color: #70887c; font-size: 10px; letter-spacing: 1.4px; font-weight: 750; text-transform: uppercase; }
.tycoon-hero p { color: var(--muted); margin: 0; font-size: 12px; }
.tycoon-status, .tycoon-chip { display: inline-flex; align-items: center; gap: 5px; background: #e8f2e8; border: 1px solid #d7e5d4; color: #3e7559; border-radius: 5px; padding: 5px 8px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.tycoon-status.bad, .tycoon-chip.bad { background: #fbebe4; border-color: #edd6ca; color: #ac5544; }
.tycoon-status.warn, .tycoon-chip.warn { background: #faf2df; border-color: #e9ddb9; color: #9f752d; }
.tycoon-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tycoon-metric { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 114px; padding: 17px 18px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); overflow: hidden; }
.tycoon-metric::after { content: ''; position: absolute; width: 34px; height: 3px; background: #a6c6b5; bottom: 0; left: 18px; }
.tycoon-metric > small, .tycoon-metric > span { display: block; color: #758481; font-size: 11px; font-weight: 650; line-height: 1.5; }
.tycoon-metric b, .tycoon-metric strong { display: block; font-size: 27px; line-height: 1.5; font-variant-numeric: tabular-nums; font-weight: 780; letter-spacing: -1px; }
.tycoon-metric em { display: block; font-style: normal; color: var(--teal); font-size: 10px; font-weight: 650; line-height: 1.5; }
.tycoon-metric.bad em, .tycoon-metric .bad { color: var(--bad); }
.tycoon-metric b.good { color: #237650; }
.tycoon-metric.warn em, .tycoon-metric .warn { color: var(--warn); }
.tycoon-section { min-width: 0; }
.tycoon-section-head, .tycoon-section > header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.tycoon-section h2 { margin: 0; font-size: 16px; font-weight: 780; letter-spacing: -.4px; }
.tycoon-section-head p, .tycoon-section > header p { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.tycoon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tycoon-grid.two, .tycoon-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tycoon-grid.four, .tycoon-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tycoon-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 17px 18px; box-shadow: var(--shadow); }
.tycoon-card.active, .tycoon-card.selected { border-color: #80ae96; background: #f8fcf7; }
.tycoon-card.locked { background: #ecefe8; color: #87958a; box-shadow: none; }
.tycoon-card h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 780; margin: 0 0 5px; }
.tycoon-card p { font-size: 11px; line-height: 1.75; color: var(--muted); margin: 5px 0 11px; }
.tycoon-card > small { display: block; font-size: 10px; color: #7f8b83; line-height: 1.7; }
.tycoon-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.tycoon-card-head h3 { margin: 0; }
.tycoon-card-head > b { font-size: 11px; color: #547263; font-weight: 750; }
.tycoon-card .value { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.5; }
.tycoon-card .meta, .tycoon-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #75857c; font-size: 10px; font-weight: 600; margin: 8px 0; }
.tycoon-meta b, .tycoon-card .meta b { font-weight: 750; color: #405f4d; }
.tycoon-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tycoon-actions button, .tycoon-card > button, .tycoon-district > button, .tycoon-btn { flex: 1; min-height: 33px; border: 1px solid #d5e2d7; border-radius: 5px; padding: 7px 9px; background: #f0f6ed; color: #35674e; font-size: 11px; font-weight: 750; line-height: 1.45; }
.tycoon-actions button:hover:not(:disabled), .tycoon-card > button:hover:not(:disabled), .tycoon-district > button:hover:not(:disabled) { background: #e1eee0; border-color: #8eb59b; }
.tycoon-actions button.primary, .tycoon-btn.primary { color: #fff; background: #1f7b60; border-color: #1f7b60; }
.tycoon-actions button.danger { color: #a95742; background: #fbf0e8; border-color: #eddcd0; }
.tycoon-actions button:disabled, .tycoon-card > button:disabled, .tycoon-district > button:disabled { background: #f2f3ee; border-color: #e4e7e0; color: #9aa69c; }
.tycoon-actions button small { font-size: 9px; opacity: .8; font-weight: 600; }
.tycoon-meter { width: 100%; height: 5px; background: #e9eee7; border-radius: 3px; overflow: hidden; margin: 8px 0; }
.tycoon-meter > i, .tycoon-meter > span { display: block; height: 100%; background: #3b9977; border-radius: 3px; transition: width .4s ease; }
.tycoon-meter.bad > i, .tycoon-meter.bad > span { background: #c77e64; }
.tycoon-meter.warn > i, .tycoon-meter.warn > span { background: #c69c53; }
.tycoon-alert { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px; background: #fbf5e8; border: 1px solid #eadfc4; border-left: 3px solid #bf9550; border-radius: 5px; font-size: 11px; color: #8e754a; line-height: 1.7; }
.tycoon-alert b { font-weight: 750; }
.tycoon-alert.bad { background: #fcf0e9; border-color: #eddbce; border-left-color: #b86e50; color: #a35c44; }
.tycoon-alert.good { background: #edf5e9; border-color: #d4e4cb; border-left-color: #74a66b; color: #537b4e; }
.tycoon-districts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tycoon-district { position: relative; min-width: 0; padding: 15px; border: 1px solid #dbe5d7; border-radius: 8px; background: #fff; }
.tycoon-district.selected, .tycoon-district.active { background: #f3f8ef; border-color: #8fb38a; }
.tycoon-district h3 { font-size: 13px; margin: 0 0 6px; font-weight: 780; }
.tycoon-district > b { display: block; font-size: 22px; font-weight: 800; line-height: 1.4; }
.tycoon-district p { font-size: 10px; color: #78897b; line-height: 1.7; margin: 3px 0 9px; }
.tycoon-district small { font-size: 10px; color: #728274; line-height: 1.6; }
.tycoon-district > button { width: 100%; margin-top: 9px; }
.tycoon-tabs { display: flex; gap: 5px; padding: 3px; background: #e7eee4; border-radius: 6px; width: max-content; max-width: 100%; overflow-x: auto; }
.tycoon-tabs button { border: 0; border-radius: 4px; background: transparent; font-size: 11px; padding: 6px 11px; font-weight: 700; color: #778671; white-space: nowrap; }
.tycoon-tabs button.on, .tycoon-tabs button.active { background: #fff; box-shadow: 0 1px 4px #243f2910; color: #2d5d3c; }
.tycoon-report { padding: 15px 17px; border: 1px solid #dbe3d6; border-radius: 8px; background: #fff; color: #61745f; font-size: 11px; line-height: 1.8; }
.tycoon-report h3 { color: #2f4f36; font-size: 13px; margin: 0 0 7px; }
.tycoon-report ul, .tycoon-report ol { margin: 5px 0 0; padding-left: 17px; }
.tycoon-report li + li { margin-top: 4px; }
.tycoon-map { position: relative; overflow: hidden; border: 1px solid #dce5d5; border-radius: 10px; background: #edf3e5; }
.tycoon-map svg { display: block; width: 100%; height: auto; max-height: 360px; }
.tycoon-map text { font-family: inherit; }
.tycoon-map-caption { display: flex; justify-content: space-between; gap: 10px; padding: 11px 15px; border-top: 1px solid #d7e2d1; background: #f8faf4; font-size: 10px; color: #6c8062; }
.tycoon-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; border: 1px solid #d9e3d3; border-radius: 7px; padding: 11px 14px; background: #f7faf2; font-size: 11px; color: #617554; }
.tycoon-summary b { font-weight: 800; color: #35552f; }
.tycoon-ledger { width: 100%; border-collapse: collapse; font-size: 11px; }
.tycoon-ledger td, .tycoon-ledger th { padding: 9px 0; text-align: left; border-bottom: 1px solid #e9eee3; }
.tycoon-ledger td:last-child, .tycoon-ledger th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tycoon-ledger th { color: #7e8e75; font-size: 10px; font-weight: 650; }
.tycoon-ledger tr:last-child td { border-bottom: 0; }
.tycoon-ledger > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; color: #72816a; border-bottom: 1px solid #e8eddf; }
.tycoon-ledger > div:first-child { padding-top: 0; }
.tycoon-ledger > div:last-child { border: 0; padding-bottom: 0; }
.tycoon-ledger > div > b { color: #405e37; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tycoon-ledger > .total { margin-top: 4px; padding-top: 14px; border-top: 2px solid #dce5d2; color: #36562f; font-weight: 750; }
.tycoon-ledger .bad { color: var(--bad); }
.tycoon-ledger .good { color: var(--good); }
/* Existing organization, election, budget and record screens. */
.plan, .race, .hirebox, .missions, .rivallog, .kvs { border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.plan { padding: 16px 18px; margin-bottom: 17px; }
.planhead b { font-size: 15px; font-weight: 780; }
.planhead span { font-size: 11px; font-weight: 550; }
.slots { gap: 9px; margin-top: 12px; }
.slot { min-height: 66px; background: #f0f5ee; box-shadow: none; border: 1px solid #d5e3d3; border-radius: 6px; gap: 5px; padding: 9px; }
.slot.empty { border-width: 1px; border-color: #d5ded2; background: #fafbf7; }
.slot .si { font-size: 21px; }
.slot b { font-size: 11px; font-weight: 700; }
.weeklog { font-size: 11px; color: #65876b; font-weight: 550; }
.buyqty { gap: 4px; margin-bottom: 12px; }
.buyqty button { box-shadow: none; border: 1px solid #d6dfd1; border-radius: 5px; font-size: 11px; padding: 5px 12px; background: #fff; font-weight: 700; }
.buyqty button.on { background: #315341; box-shadow: none; border-color: #315341; }
.gens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.gen { grid-template-columns: 48px minmax(0, 1fr) 87px; gap: 3px 11px; border: 1px solid var(--line); border-radius: 9px; padding: 15px; box-shadow: var(--shadow); }
.gen .ic { width: 48px; height: 48px; }
.gen .ic svg { width: 48px; height: 48px; }
.gen .t { font-size: 13px; font-weight: 780; }
.gen .d, .gen .p { font-size: 10px; font-weight: 550; line-height: 1.7; }
.gen .p { color: #4d896e; }
.gen .p .mo { color: #a8813d; }
.gen .lv { font-size: 9px; background: #40654b; border-radius: 4px; }
.gen .prog { height: 3px; background: #eaf0e3; }
.gen .prog i { background: #abc794; }
.gen .buy, .gen .buy:active:not(:disabled) { background: #e9f3e6; border: 1px solid #c5dbc0; border-radius: 6px; box-shadow: none; color: #357446; font-size: 12px; min-width: 80px; padding: 8px 6px; }
.gen .buy:hover:not(:disabled) { background: #dbeed5; border-color: #90b882; }
.gen .buy small { margin-top: 3px; font-size: 10px; font-weight: 650; }
.gen .buy:disabled { box-shadow: none; background: #f0f2ec; color: #9caa97; border-color: #e1e7dc; }
.gen.locked { opacity: .65; box-shadow: none; background: #edf0e9; }
.hirebox { background: #1c3e42; padding: 19px 20px; margin-bottom: 15px; }
.hirebox b { font-size: 18px; font-weight: 780; }
.hirebox small { color: #afc8c4; font-size: 11px; font-weight: 500; }
.big-buy { box-shadow: none; border-radius: 7px; padding: 11px 18px; background: #e8c675; font-size: 13px; }
.big-buy:disabled { box-shadow: none; }
.sgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.scard { border-radius: 9px; padding: 19px 12px; border-width: 1px; box-shadow: var(--shadow); }
.scard .sface { width: 76px; height: 76px; margin-bottom: 12px; background: #e7eee3; }
.scard .sface svg { width: 76px; height: 76px; }
.scard b { font-size: 14px; font-weight: 750; }
.scard small, .scard em { font-size: 10px; font-weight: 550; line-height: 1.6; }
.scard em { color: #2f7b5f; margin-top: 9px; }
.scard .srar { font-size: 8px; border-radius: 3px; top: 9px; left: 9px; }
.scard.empty, .scard.lock { border-width: 1px; background: #ebefe6; }
.race { padding: 22px 24px; max-width: 800px; margin: 0 auto; }
.race .title { font-size: 23px; font-weight: 800; letter-spacing: -.8px; }
.race .vs { margin: 18px 0 22px; }
.race .side { background: #f4f7ef; border-radius: 8px; padding: 13px; font-size: 13px; }
.race .side.topriv { background: #faf4df; box-shadow: inset 0 0 0 1px #e4d292; }
.need { grid-template-columns: 55px 1fr auto; font-size: 12px; font-weight: 650; gap: 10px; }
.need .bar { height: 7px; background: #e9eee4; }
.need b { font-size: 10px; font-weight: 650; }
.boosts { gap: 8px; margin: 18px 0 12px; }
.boosts div { background: #f3f6ed; border: 1px solid #e6ecdf; border-radius: 6px; font-size: 10px; font-weight: 600; padding: 11px; }
.boosts b { font-size: 18px; font-weight: 750; margin-top: 3px; }
.prep { gap: 8px; }
.prep button { border-radius: 6px; background: #244e49; padding: 11px; font-size: 12px; font-weight: 700; box-shadow: none; }
.prep button:disabled { box-shadow: none; }
.chance { font-size: 11px; line-height: 1.8; margin: 14px 0; font-weight: 550; }
.chance em { font-size: 15px; font-weight: 800; }
.chance small { font-size: 10px; font-weight: 500; }
.dday { border-radius: 7px; padding: 12px; background: #1c413f; gap: 4px; }
.dday b { font-size: 18px; font-weight: 780; }
.dday span { font-size: 10px; font-weight: 500; color: #b8cfc4; }
.dday.soon { background: #b66946; animation: none; }
.rivgrow { color: #a36a4c; font-size: 10px; font-weight: 550; background: #faf1e4; border-radius: 5px; }
.ladder { justify-content: center; gap: 6px; margin-top: 18px; }
.ladder li { box-shadow: none; border: 1px solid #dce5d5; border-radius: 5px; padding: 4px 10px; font-size: 11px; }
.missions, .rivallog { padding: 16px 18px; }
.missions > b, .rivallog > b { font-size: 14px; }
.missions small { font-size: 10px; font-weight: 550; margin-top: 4px; }
.missions ul, .rivallog ul { gap: 7px; margin-top: 10px; }
.missions li { font-size: 11px; }
.missions li span { color: #518b5c; }
.rivallog b { color: #a8774b; }
.rivallog li { font-size: 11px; font-weight: 550; }
.blist li, .devlist li { background: #f6f8f1; border-radius: 6px; border-left-width: 3px; padding: 12px; }
.devlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; gap: 11px; margin-top: 17px; }
.devlist li { border: 1px solid #dde6d5; border-top: 3px solid var(--sc, #83a873); background: #fff; padding: 16px; }
.devlist small { font-size: 10px; font-weight: 550; }
.devlist .dt { margin-bottom: 8px; }
.devlist .dt b { font-size: 13px; }
.devlist .dt em { font-size: 11px; }
.dbar { height: 4px; margin-top: 12px; }
.book { max-width: 940px; margin: 0 auto; }
.book h2 { font-size: 16px; margin: 20px 0 10px; font-weight: 780; }
.kvs { padding: 5px 18px; }
.kv { font-size: 12px; padding: 12px 0; color: #6b8066; }
.kv b { color: #304d31; font-size: 13px; }
.achs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ach { border: 1px solid #dce4d2; border-radius: 7px; background: #e9eee1; padding: 12px; }
.ach b { font-size: 12px; font-weight: 750; }
.ach small { font-size: 10px; line-height: 1.7; }
.ach.got { background: #faf5df; border-color: #e4d6a4; box-shadow: none; }
.endings { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ending { background: #e8eddf; border: 1px solid #dce4d2; border-radius: 7px; padding: 14px; font-size: 10px; }
.ending.got { box-shadow: none; }
.ending .en { font-size: 12px; font-weight: 750; }
.rankhead { gap: 5px; padding: 4px; background: #e7ede2; border-radius: 7px; margin-bottom: 19px; }
.rankhead button { background: transparent; border-radius: 4px; padding: 8px; font-size: 12px; font-weight: 700; box-shadow: none; color: #7b8b72; }
.rankhead button.on { background: #fff; color: #345b35; box-shadow: 0 1px 3px #223d1b10; }
.ranklist li { border: 1px solid #dce5d5; border-radius: 7px; padding: 13px 15px; box-shadow: none; }
.ranklist .who { display: block; }
.ranklist .who b { font-size: 13px; }
.ranklist .who small { font-size: 10px; font-weight: 550; margin-top: 3px; }
.ranklist .sc { font-size: 16px; }
.ranklist .sc small { font-size: 10px; font-weight: 550; }
.podium { max-width: 600px; margin-left: auto; margin-right: auto; gap: 15px; }
.pblock { border-radius: 5px 5px 0 0; }
/* Forms and deliberation windows. */
.modal { padding: 24px; align-items: center; background: #0d2d34b8; backdrop-filter: blur(7px); }
.modal .card { max-width: 590px; max-height: calc(100dvh - 48px); padding-bottom: 22px; border-radius: 13px; box-shadow: 0 24px 100px #0c252d66; border: 1px solid #c8d8cf; scrollbar-width: thin; scrollbar-color: #bccdbd #f4f7f0; }
.modal .card.wide { max-width: 700px; }
.card .inner { padding: 23px 26px 0; }
.card h3 { font-size: 25px; font-weight: 800; letter-spacing: -1px; margin-bottom: 10px; line-height: 1.4; }
.card p { font-size: 13px; line-height: 1.85; color: #71806e; margin-bottom: 18px; }
.card .tag { border-radius: 4px; font-size: 10px; letter-spacing: .6px; font-weight: 750; background: #e8f2e4; color: #487442; padding: 4px 7px; margin-bottom: 9px; }
.card .tag.bad { background: #f7e9df; color: #a16042; }
.card .banner, .preview, .tv, .gacha, .ending-hero, .rscene { border-radius: 12px 12px 0 0; }
.preview { height: 186px; background: #c5ddd2; border-bottom: 1px solid #c4d4c4; }
.setup label { font-size: 11px; letter-spacing: .1px; font-weight: 750; margin: 17px 0 7px; color: #536c4f; }
.setup-intro { margin-bottom: 12px !important; font-size: 12px !important; }
.setup-features { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 15px; }
.setup-features span { color: #6b835d; background: #f2f6e9; border: 1px solid #e0e8d2; border-radius: 4px; padding: 3px 7px; font-size: 9px; font-weight: 650; }
.tycoon-guide p { padding-bottom: 13px; border-bottom: 1px solid #e6ecdf; margin-bottom: 14px; font-size: 12px; }
.tycoon-guide p:last-child { border-bottom: 0; padding-bottom: 0; }
.tycoon-guide p b { color: #3e6844; font-weight: 750; }
.setup input { padding: 10px 12px; background: #f5f7ef; border: 1px solid #dce5d4; border-radius: 6px; color: #294b2c; font-size: 15px; font-weight: 650; box-shadow: none; height: 44px; }
.setup input:focus { border-color: #80a36d; outline: 3px solid #dcebcf; }
.setup input::placeholder { color: #a4b49a; }
.setup .homes { gap: 8px; }
.homes button { padding: 11px 13px; border: 1px solid #dee6d4; border-radius: 6px; background: #fafbf6; box-shadow: none; }
.homes button b { font-size: 12px; font-weight: 750; }
.homes button small { font-size: 10px; line-height: 1.6; color: #839378; margin-top: 3px; }
.homes button.on { background: #eef6e8; box-shadow: none; border-color: #80a86b; color: #3b6434; }
.homes button.on small { color: #78926a; }
.swatches { gap: 11px; padding: 3px; }
.swatches button { width: 29px; height: 29px; border: 3px solid #fff; box-shadow: 0 0 0 1px #dae2d3; }
.swatches button.on { box-shadow: 0 0 0 2px #64865c; }
.big, .big.dark { background: #205e4e; box-shadow: none; border: 1px solid #205e4e; border-radius: 7px; font-size: 14px; letter-spacing: .1px; font-weight: 750; padding: 13px 16px; }
.big:hover:not(:disabled), .big.dark:hover:not(:disabled) { background: #194c3f; }
.big:active:not(:disabled), .big.dark:active:not(:disabled) { box-shadow: none; }
.big:disabled { background: #e8eddf; border-color: #e2e8d7; color: #a5b09a; box-shadow: none; }
.row2 { gap: 8px; }
.row2 button { border: 1px solid #dce5d0; border-radius: 6px; background: #f2f6e9; padding: 12px; font-size: 12px; font-weight: 750; box-shadow: none; }
.row2 button.primary { background: #205e4e; border-color: #205e4e; color: #fff; box-shadow: none; }
.choices { gap: 9px; }
.choices button { padding: 14px; border: 1px solid #dbe4d0; border-radius: 7px; background: #f8faf1; box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1.6; }
.choices button:hover { border-color: #9fb88a; background: #f1f6e7; }
.choices button:active { box-shadow: none; background: #eaf1db; }
.choices button small { font-size: 11px; font-weight: 500; color: #849477; margin-top: 5px; line-height: 1.7; }
.result-line { font-size: 14px; line-height: 1.85; }
.fx { gap: 5px; }
.fx span { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; }
.fx .up { background: #e8f2df; color: #4f7f3e; }
.fx .down { background: #f7e7dc; color: #aa6947; }
.actgrid { gap: 8px; }
.actgrid button { padding: 12px; border: 1px solid #dce5d0; border-radius: 6px; background: #f7f9ef; grid-template-columns: 32px 1fr; }
.actgrid button.on { background: #f3e9c6; border-color: #d6bd78; }
.actgrid b { font-size: 12px; }
.actgrid small { font-size: 10px; font-weight: 500; line-height: 1.6; }
.plist li { background: #f6f8ec; border: 1px solid #e1e6d5; border-radius: 7px; padding: 13px; }
.plist li.urgent { background: #faf0e1; box-shadow: none; border-color: #e8cba7; }
.plist .pb button { box-shadow: none; border: 1px solid #dce5ce; border-radius: 5px; font-size: 11px; background: #fff; }
.plist .pb button[data-k=self] { background: #2a785b; box-shadow: none; border-color: #2a785b; }
.perks li { background: #f7f9ee; border: 1px solid #dce6ce; border-radius: 6px; padding: 13px; }
.perks b { font-size: 12px; }
.perks small { font-size: 10px; font-weight: 500; margin-top: 3px; }
.perks button { background: #e5cc82; border-radius: 5px; font-size: 11px; }
.small-btn { box-shadow: none; font-size: 11px; background: transparent; border: 1px solid #dfcdbf; color: #aa785c; border-radius: 5px; padding: 8px 12px; }
.tv { background: #153838; }
.tv .live { background: #b46d4d; font-size: 9px; letter-spacing: .5px; }
.tv h3 { font-size: 24px; }
.tv .rate { color: #adc3ae; font-size: 11px; }
.votes .vb { height: 12px; background: #33514a; }
.votes .nm { font-size: 12px; }
.rbtn { font-size: 19px; border-radius: 8px; background: #b98050; box-shadow: 0 3px 0 #8e6039; }
.rbtn:active { box-shadow: 0 1px 0 #8e6039; }
.dq { font-size: 17px; line-height: 1.65; font-weight: 750; }
.scorebox { background: #f3f6e9; border: 1px solid #e0e7ce; border-radius: 7px; }
.legacy { font-size: 11px; font-weight: 550; line-height: 1.8; }
.toast { max-width: 600px; border: 1px solid #38594b; border-radius: 8px; background: #1b4438; box-shadow: 0 5px 24px #172f2622; padding: 12px 17px; font-size: 12px; font-weight: 650; line-height: 1.7; }
.toast.bad { background: #9e5a40; border-color: #9e5a40; }
.toast.good { background: #337653; border-color: #337653; }
.toast.gold { background: #e9cf85; color: #65501e; border-color: #c5a855; }
.ticker { bottom: env(safe-area-inset-bottom, 0px); padding: 14px 20px; }
.mobile-command { display: none; }
@media (min-width: 1440px) {
  #app { margin-top: 32px; }
  .campaign-overview { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
  .stage { min-height: 324px; }
  .campaign-intel { padding-top: 27px; }
}
@media (max-width: 1023px) {
  #app { width: calc(100% - 32px); margin-top: 16px; }
  .hud { padding: 18px; }
  .pill { padding: 0 12px; gap: 8px; }
  .pill b { font-size: 20px; }
  .pill i { width: 24px; height: 24px; flex-basis: 24px; }
  #controlBar { padding-left: 18px; padding-right: 18px; }
  .campaign-overview { gap: 14px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .stage { min-height: 297px; }
  .campaign-intel { padding: 19px 16px 0; }
  .campaign-brief h1 { font-size: 26px; }
  .campaign-brief p { font-size: 11px; }
  .newsbar { margin-left: -16px; margin-right: -16px; }
  .mood { gap: 4px; }
  .gchip { padding-left: 5px; padding-right: 5px; grid-template-columns: 20px 1fr; gap: 2px; }
  .gchip .gi, .gchip .gi svg { width: 20px; }
  .gchip .gn { font-size: 9px; }
  .gchip b { right: 5px; }
  .tycoon-grid.four, .tycoon-grid.cols-4, .tycoon-districts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tycoon-card { padding: 14px; }
  .gen { padding: 12px; gap: 3px 8px; grid-template-columns: 44px minmax(0, 1fr) 78px; }
  .gen .ic, .gen .ic svg { width: 44px; height: 44px; }
  .gen .buy { min-width: 70px; }
  .sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .devlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  #app { width: calc(100% - 24px); margin-top: 12px; }
  #app { padding-bottom: 24px; }
  .panel, .tycoon-section, .tycoon-tabs { scroll-margin-top: 16px; }
  .hud { padding: 16px 14px; border-radius: 11px 11px 0 0; }
  .hud-top { margin-bottom: 16px; }
  .brand { font-size: 20px; gap: 2px; }
  .brand small { display: none; }
  .brand::before { width: 6px; height: 18px; margin-right: 6px; }
  .hud .who { font-size: 10px; gap: 5px; }
  .party-chip { max-width: 85px; padding: 3px 6px; }
  .rank { padding: 3px 6px; }
  .who .quit { font-size: 10px; padding: 3px 6px; }
  .pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .pill { min-height: 40px; padding: 0 8px; }
  .pill:nth-child(3) { border-left: 0; padding-left: 0; }
  .pill b { font-size: 21px; }
  .pill small { font-size: 10px; }
  .pill i { flex-basis: 25px; width: 25px; height: 25px; }
  .gauge { margin-top: 3px; }
  #controlBar { padding: 8px 12px; gap: 4px; min-height: 45px; border-radius: 0 0 8px 8px; }
  #controlBar button { font-size: 10px; padding: 4px 7px; min-height: 27px; }
  .control-state { font-size: 10px; gap: 5px; }
  #pauseBtn, #helpBtn { margin-left: 1px; }
  .campaign-overview { grid-template-columns: 1fr; gap: 12px; margin: 14px 0; }
  .stage { height: 182px; min-height: 0; border-radius: 9px; }
  .campaign-intel { padding: 13px 16px 0; border-radius: 9px; }
  .campaign-brief h1 { font-size: 22px; letter-spacing: -1px; }
  .campaign-brief > small, .campaign-brief .eyebrow { font-size: 9px; }
  .campaign-brief p { font-size: 11px; line-height: 1.7; margin: 4px 0 6px; }
  .campaign-brief > small:last-child:not(:first-child) { font-size: 9px; margin: 0 0 9px; }
  .brief-track { margin: 6px 0 7px; }
  .brief-track span { font-size: 9px; padding-top: 4px; }
  .mood { gap: 6px; margin: 0 0 10px; }
  .gchip { min-height: 55px; grid-template-columns: 22px 1fr; gap: 3px; padding: 6px 6px 9px; }
  .gchip .gi, .gchip .gi svg { width: 22px; }
  .gchip .gn { font-size: 9px; }
  .gchip .gn small { font-size: 8px; }
  .gchip b { font-size: 16px; right: 6px; }
  .newsbar { height: 31px; }
  .tabs { margin-bottom: 17px; gap: 0 !important; }
  .tabs button { min-width: 56px; font-size: 11px !important; padding: 11px 4px !important; }
  .tabs button .dot { top: 5px; right: 4px; min-width: 12px; height: 12px; line-height: 12px; font-size: 8px; }
  .tycoon-board { gap: 17px; }
  .tycoon-hero { gap: 9px; }
  .tycoon-hero h1, .tycoon-hero h2 { font-size: 22px; }
  .tycoon-hero p { font-size: 11px; line-height: 1.7; }
  .tycoon-hero > div > small, .tycoon-eyebrow { font-size: 9px; }
  .tycoon-status, .tycoon-chip { font-size: 9px; padding: 4px 7px; }
  .tycoon-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tycoon-metric { min-height: 100px; padding: 13px 14px; border-radius: 7px; }
  .tycoon-metric b, .tycoon-metric strong { font-size: 24px; }
  .tycoon-metric > small, .tycoon-metric > span { font-size: 10px; }
  .tycoon-metric em { font-size: 9px; }
  .tycoon-grid, .tycoon-grid.two, .tycoon-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .tycoon-card { padding: 13px 12px; border-radius: 7px; }
  .tycoon-card h3 { font-size: 12px; }
  .tycoon-card p { font-size: 11px; line-height: 1.8; }
  .tycoon-card > small { font-size: 9px; }
  .tycoon-card .meta, .tycoon-meta { font-size: 9px; }
  .tycoon-actions { gap: 5px; margin-top: 10px; }
  .tycoon-actions button, .tycoon-card > button, .tycoon-district > button { font-size: 10px; padding: 7px 6px; min-height: 44px; }
  .tycoon-actions button { word-break: keep-all; }
  .tycoon-tabs { gap: 2px; width: 100%; }
  .tycoon-tabs button { min-height: 42px; flex: 1; padding: 7px 6px; font-size: 10px; }
  .gen .buy { min-height: 48px; }
  .tycoon-section h2 { font-size: 14px; }
  .tycoon-section-head p { font-size: 10px; }
  .tycoon-alert { font-size: 10px; padding: 9px 11px; }
  .tycoon-districts { gap: 9px; }
  .tycoon-district { padding: 13px; }
  .tycoon-map svg { max-height: 300px; }
  .tycoon-report { padding: 13px; font-size: 10px; }
  .plan { padding: 14px; border-radius: 8px; }
  .planhead { align-items: flex-start; }
  .planhead b { font-size: 13px; }
  .planhead span { font-size: 10px; text-align: right; max-width: 62%; }
  .slots { gap: 6px; }
  .slot { padding: 8px 4px; min-height: 61px; }
  .slot b { font-size: 10px; }
  .gens { grid-template-columns: 1fr; gap: 9px; }
  .gen { grid-template-columns: 46px minmax(0, 1fr) 80px; padding: 13px; gap: 3px 10px; }
  .gen .ic, .gen .ic svg { width: 46px; height: 46px; }
  .gen .t { font-size: 13px; }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .scard { padding: 18px 11px; }
  .hirebox { padding: 16px 14px; border-radius: 8px; }
  .hirebox b { font-size: 15px; }
  .hirebox small { font-size: 9px; }
  .big-buy { min-width: 78px; padding: 9px 12px; font-size: 12px; }
  .race { padding: 17px 14px; border-radius: 8px; }
  .race .title { font-size: 21px; }
  .need { grid-template-columns: 44px 1fr auto; gap: 7px; font-size: 11px; }
  .need b { font-size: 9px; }
  .race .vs { margin-top: 13px; gap: 9px; }
  .race .side { padding: 10px 6px; font-size: 12px; }
  .boosts div { padding: 9px 5px; font-size: 9px; }
  .missions, .rivallog { padding: 14px; }
  .missions li { font-size: 10px; }
  .devlist { gap: 9px; }
  .devlist li { padding: 13px; }
  .devlist .dt b { font-size: 12px; }
  .achs, .endings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modal { padding: 13px; }
  .modal .card { max-height: calc(100dvh - 26px); border-radius: 10px; padding-bottom: 19px; }
  .card .inner { padding: 20px 19px 0; }
  .card h3 { font-size: 23px; }
  .card p { font-size: 12px; margin-bottom: 15px; }
  .preview { height: 132px; }
  .card .banner, .preview, .tv, .gacha, .ending-hero, .rscene { border-radius: 9px 9px 0 0; }
  .setup label { margin-top: 14px; }
  .homes button { padding: 9px 10px; }
  .setup input { height: 42px; }
  .swatches { gap: 8px; }
  .swatches button { width: 27px; height: 27px; }
  .big, .big.dark { padding: 12px; font-size: 13px; }
  .toast { font-size: 11px; }
  .ticker { bottom: calc(119px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px; }
  .mobile-command { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; padding: 7px max(10px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px)); background: #fffffff7; border-top: 1px solid #ccdcd1; box-shadow: 0 -5px 25px #173b3020; backdrop-filter: blur(14px); }
  .mobile-command-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 44px; padding: 0 2px 6px; border-bottom: 1px solid #e5ece2; }
  #mobileSummary, .mobile-progress-line { flex: 1 1 150px; min-width: 0; font-size: 11px; line-height: 1.55; color: #566f60; font-weight: 600; font-variant-numeric: tabular-nums; }
  #mobileSummary b { color: #204b39; font-weight: 800; }
  #mobileSummary b.good { color: #237650; }
  #mobileSummary b.bad { color: #b05a43; }
  #mobileSummary small { display: block; color: #839479; font-size: 9px; line-height: 1.5; font-weight: 550; }
  #mobilePause, #mobileField { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 5px 10px; border: 1px solid #d2dfcb; border-radius: 7px; background: #f6f9ef; color: #547347; font-size: 11px; font-weight: 750; white-space: nowrap; }
  #mobileField { background: #215f4d; color: #fff; border-color: #215f4d; }
  #mobileField:disabled { color: #9aab91; background: #eff4e7; border-color: #dce5d1; }
  #mobilePause[aria-pressed="true"], #mobilePause.on { color: #fff; background: #916b3b; border-color: #916b3b; }
  .mobile-command-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .mobile-command-nav button { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; min-width: 0; min-height: 54px; padding: 8px 3px 9px; border: 0; border-radius: 0; background: transparent; color: #7d8d77; font-size: 11px; font-weight: 650; line-height: 1.3; }
  .mobile-command-nav button i, .mobile-command-nav button svg { display: block; width: 19px; height: 19px; font-size: 17px; font-style: normal; line-height: 19px; }
  .mobile-command-nav button > span { display: block; height: 20px; font-size: 20px; line-height: 20px; font-weight: 500; }
  .mobile-command-nav button > b { display: block; font-size: 11px; font-weight: inherit; }
  .mobile-command-nav button small { color: #9aa78f; font-size: 8px; letter-spacing: .5px; font-weight: 600; line-height: 1.1; }
  .mobile-command-nav button.on, .mobile-command-nav button.active, .mobile-command-nav button[aria-pressed="true"] { color: #1a7959; background: #f1f7eb; font-weight: 800; }
  .mobile-command-nav button.on::before, .mobile-command-nav button.active::before, .mobile-command-nav button[aria-pressed="true"]::before { content: ''; position: absolute; left: 25%; right: 25%; top: 0; height: 2px; border-radius: 2px; background: #2e8766; }
  .mobile-command-nav button:hover { background: #f3f7ee; }
  .modal { z-index: 20; }
  .coronation { z-index: 30; }
}
@media (max-width: 560px) {
  .tycoon-grid, .tycoon-grid.two, .tycoon-grid.cols-2, .tycoon-grid.four, .tycoon-grid.cols-4 { grid-template-columns: 1fr; }
  .tycoon-districts { grid-template-columns: 1fr; }
  .tycoon-card { padding: 16px; }
  .tycoon-card h3, .tycoon-district h3 { font-size: 13px; }
  .tycoon-card > small, .tycoon-district small { font-size: 10px; }
  .tycoon-actions button, .tycoon-card > button, .tycoon-district > button { font-size: 11px; }
  .tycoon-card .meta, .tycoon-meta { font-size: 10px; }
  .tycoon-map-caption { font-size: 8px; padding: 10px; }
  .tycoon-map-caption span:last-child { text-align: right; }
  .tycoon-district p { font-size: 11px; }
  .tycoon-section-head p { font-size: 11px; }
  .tycoon-ledger { font-size: 12px; }
}
@media (max-width: 380px) {
  #app { width: calc(100% - 16px); margin-top: 8px; }
  .hud { padding-left: 11px; padding-right: 11px; }
  .brand { font-size: 18px; }
  .hud .who { gap: 3px; }
  .party-chip { max-width: 69px; }
  .rank { font-size: 9px; }
  .stage { height: 182px; }
  .campaign-intel { padding-left: 12px; padding-right: 12px; }
  .newsbar { margin-left: -12px; margin-right: -12px; }
  .gchip .gi { display: none; }
  .gchip { display: block; }
  .gchip .gn { font-size: 10px; }
  .gchip b { right: 8px; bottom: 9px; }
  .tycoon-grid, .tycoon-grid.two, .tycoon-grid.cols-2 { grid-template-columns: 1fr; }
  .campaign-brief h1 { font-size: 21px; }
  .brief-track { gap: 3px; }
  .brief-track span { font-size: 8px; }
  .tabs button { min-width: 50px; font-size: 10px !important; }
  #controlBar { gap: 3px; padding-left: 9px; padding-right: 9px; }
  #controlBar button { padding-left: 5px; padding-right: 5px; }
  .modal { padding: 8px; }
  .modal .card { max-height: calc(100dvh - 16px); }
  .card .inner { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #newsText { animation: none !important; padding-left: 10px; }
}