:root {
  color-scheme: light;
  --ink: #24312f;
  --muted: #68736f;
  --paper: #f7f0df;
  --paper-2: #efe2c7;
  --line: #b8aa8c;
  --teal: #168d86;
  --teal-dark: #145450;
  --navy: #173b3a;
  --amber: #e39a3b;
  --coral: #cf654d;
  --green: #4f936c;
  --blue: #4c7f9f;
  --shadow: 0 14px 40px rgba(25, 45, 40, .22);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; }
body { background: #112c2b; color: var(--ink); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #ffcf62; outline-offset: 2px; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

/* Start and story screens */
.title-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, .65fr); background: var(--paper); }
.title-art { position: relative; min-height: 100dvh; overflow: hidden; background: #345e55; }
.title-art > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.title-art-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(14, 39, 37, .88)); }
.title-story { position: absolute; left: clamp(24px, 5vw, 72px); right: 32px; bottom: 6%; color: white; max-width: 680px; }
.title-story span { display: inline-block; padding: 7px 11px; border: 1px solid rgba(255,255,255,.45); background: rgba(13,48,45,.62); font-size: 14px; letter-spacing: .12em; }
.title-story p { margin: 16px 0 0; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.5; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.title-menu { min-height: 100dvh; padding: clamp(42px, 8vh, 96px) clamp(28px, 4vw, 58px) 32px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #d5c9ae; background: radial-gradient(circle at 20% 10%, #fffaf0 0, var(--paper) 52%, #ecdec1 100%); }
.title-mark, .mini-logo { display: inline-grid; grid-template-columns: repeat(3, 12px); gap: 4px; width: max-content; transform: skew(-12deg); }
.title-mark i, .mini-logo i { height: 28px; background: var(--teal); box-shadow: inset -3px -3px rgba(0,0,0,.1); }
.title-mark i:nth-child(2), .mini-logo i:nth-child(2) { height: 20px; margin-top: 8px; background: var(--amber); }
.title-mark i:nth-child(3), .mini-logo i:nth-child(3) { height: 13px; margin-top: 15px; background: var(--coral); }
.title-kicker { margin: 26px 0 10px; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.title-menu h1 { margin: 0; font-size: clamp(44px, 5vw, 72px); letter-spacing: .03em; line-height: 1.08; }
.title-menu h2 { margin: 7px 0 22px; color: var(--teal); font-size: clamp(22px, 2vw, 32px); font-weight: 500; }
.title-description { margin: 0 0 36px; color: #5c675f; line-height: 1.9; font-size: 16px; }
.title-actions { display: grid; gap: 12px; }
.primary-action, .paper-action { min-height: 70px; border: 1px solid #8c7d62; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; text-align: left; box-shadow: 4px 4px 0 #7b6e59; transition: transform .16s, box-shadow .16s; }
.primary-action { color: white; background: var(--teal); border-color: #0d6661; }
.paper-action { background: #e9dcc0; }
.primary-action:hover, .paper-action:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #7b6e59; }
.primary-action span, .paper-action span { font-size: 18px; font-weight: 800; }
.primary-action small, .paper-action small { opacity: .8; font-size: 13px; }
.title-footnote { margin: 32px 0 0; color: #877b66; font-size: 12px; line-height: 1.6; }
.story-screen { position: relative; min-height: 100dvh; overflow: hidden; background: #183f3c; }
.story-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.story-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,41,39,.05) 15%, rgba(16,41,39,.15) 48%, rgba(16,41,39,.9) 100%); }
.story-sheet { position: absolute; z-index: 2; right: 5vw; top: 50%; transform: translateY(-50%); width: min(520px, 40vw); padding: 36px 40px; color: #fffaf0; border: 1px solid rgba(255,255,255,.25); background: rgba(18,54,50,.9); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.story-sheet > span { color: #77d7c8; font-size: 14px; letter-spacing: .1em; }
.story-sheet h1 { margin: 18px 0; font-size: clamp(30px, 3vw, 48px); }
.story-sheet p { min-height: 140px; margin: 0; color: #e4e6db; font-size: 18px; line-height: 1.85; }
.story-dots { display: flex; gap: 8px; margin: 24px 0; }
.story-dots i { width: 24px; height: 4px; background: rgba(255,255,255,.3); }
.story-dots i.current, .story-dots i.done { background: #65cfc1; }
.story-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.text-action { border: 0; padding: 10px; color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.primary-action.compact { min-height: 52px; width: auto; gap: 32px; padding: 10px 20px; box-shadow: 3px 3px 0 #0b312e; }

/* Company creation */
.setup-screen { min-height: 100dvh; background: linear-gradient(135deg, #e8d7b7, #f9f4e8); padding-bottom: 40px; }
.setup-screen > header { height: 78px; padding: 0 max(20px, calc((100vw - 860px)/2)); display: flex; align-items: center; gap: 14px; color: white; background: var(--navy); }
.setup-screen > header div { display: grid; }
.setup-screen > header span { color: #78d4c8; font-size: 12px; letter-spacing: .12em; }
.setup-screen > header b { font-size: 17px; }
.setup-screen > header em { margin-left: auto; padding: 6px 10px; font-style: normal; font-size: 12px; border: 1px solid rgba(255,255,255,.25); }
.back-button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); color: white; background: rgba(255,255,255,.06); }
.setup-form { width: min(760px, calc(100% - 32px)); margin: 34px auto 0; padding: 34px; background: rgba(255,252,244,.96); border: 1px solid #b8a98b; box-shadow: 8px 8px 0 rgba(90,75,51,.17); }
.setup-intro { display: flex; gap: 18px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #d7ccb7; }
.setup-seal { flex: 0 0 62px; height: 62px; display: grid; place-content: center; color: white; background: var(--coral); border-radius: 50%; font-weight: 800; text-align: center; line-height: 1.1; box-shadow: inset 0 0 0 5px rgba(255,255,255,.25); }
.setup-intro h1 { margin: 0 0 7px; font-size: 28px; }
.setup-intro p { margin: 0; color: var(--muted); line-height: 1.6; }
.setup-form > label { display: grid; gap: 8px; margin-top: 22px; font-weight: 700; }
.setup-form input { height: 52px; padding: 0 15px; border: 1px solid #aa9b7f; color: var(--ink); background: #fffdf8; border-radius: 0; font-size: 17px; }
.setup-form fieldset { margin: 24px 0 0; padding: 0; border: 0; }
.setup-form legend { margin-bottom: 10px; font-weight: 700; }
.origin-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.origin-option { min-height: 170px; padding: 16px 14px; border: 1px solid #b7a887; background: #efe4cd; text-align: left; transition: .16s; }
.origin-option > i { display: grid; place-content: center; width: 40px; height: 40px; color: white; background: #6f7d6f; font-style: normal; font-size: 20px; }
.origin-option span { display: grid; gap: 7px; margin-top: 13px; }
.origin-option small { color: #6f756e; line-height: 1.45; }
.origin-option em { color: var(--teal-dark); font-size: 12px; font-style: normal; font-weight: 800; }
.origin-option.selected { border: 2px solid var(--teal); background: #e4f1e8; box-shadow: inset 0 0 0 3px #fff; transform: translateY(-2px); }
.origin-option.selected > i { background: var(--teal); }
.open-factory { width: 100%; margin-top: 24px; }

/* Main game */
.game-screen { height: 100dvh; overflow: hidden; display: grid; grid-template-rows: 76px minmax(0, 1fr) 40px; background: #d7e0d2; }
.topbar { z-index: 20; display: flex; align-items: center; padding: 0 16px; color: white; background: var(--navy); border-bottom: 3px solid #dfaa49; box-shadow: 0 3px 14px rgba(8,27,26,.35); }
.game-brand { min-width: 230px; display: flex; align-items: center; gap: 12px; }
.mini-logo { grid-template-columns: repeat(3, 7px); gap: 2px; }
.mini-logo i { height: 20px; }
.mini-logo i:nth-child(2) { height: 15px; margin-top: 5px; }
.mini-logo i:nth-child(3) { height: 10px; margin-top: 10px; }
.game-brand div { display: grid; gap: 3px; }
.game-brand b { font-size: 18px; }
.game-brand small { color: #b8d6cc; }
.resources { flex: 1; display: flex; justify-content: center; gap: 8px; }
.resource-chip { min-width: 116px; padding: 8px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.resource-chip > i { width: 29px; height: 29px; display: grid; place-content: center; color: #172c2b; background: #b5c9bf; font-style: normal; font-weight: 900; }
.resource-chip span { display: grid; }
.resource-chip small { color: #b4c9c0; font-size: 11px; }
.resource-chip b { font-size: 16px; }
.resource-chip.cash > i { background: #efc362; }
.resource-chip.capacity > i { background: #79c3b9; }
.resource-chip.reputation > i { background: #e5a256; }
.resource-chip.team > i { background: #9cc49a; }
.top-menu { width: 48px; height: 40px; border: 1px solid rgba(255,255,255,.18); color: white; background: rgba(255,255,255,.06); font-weight: 900; letter-spacing: 2px; }
.game-board { min-height: 0; display: grid; grid-template-columns: 200px minmax(420px, 1fr) 250px; }
.stage-rail, .action-rail { min-height: 0; padding: 14px 12px; overflow-y: auto; background: var(--paper); }
.stage-rail { border-right: 1px solid #a99b7e; }
.rail-company { padding: 12px; border: 1px solid #c0b291; background: #e9ddc4; display: grid; gap: 4px; }
.rail-company span { color: var(--teal-dark); font-size: 12px; }
.rail-company b { font-size: 19px; }
.rail-company small { color: var(--muted); }
.rail-title { margin: 18px 4px 8px; color: #6a6f66; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.rail-stage { position: relative; width: 100%; min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; background: transparent; text-align: left; }
.rail-stage:not(:last-of-type)::after { content: ""; position: absolute; left: 19px; top: 42px; width: 2px; height: 22px; background: #cbbfa8; }
.rail-stage > i { z-index: 1; width: 29px; height: 29px; display: grid; place-content: center; flex: 0 0 29px; border: 2px solid #a99e89; border-radius: 50%; background: var(--paper); font-style: normal; font-size: 12px; font-weight: 800; }
.rail-stage span { display: grid; gap: 2px; }
.rail-stage small { color: #858779; font-size: 11px; }
.rail-stage.running > i { color: white; border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 5px rgba(24,141,134,.15); }
.rail-stage.done > i { color: white; border-color: #6c9274; background: #6c9274; }
.rail-stage.blocked > i { color: white; border-color: var(--coral); background: var(--coral); }
.rail-report { width: 100%; margin-top: 18px; padding: 12px; display: grid; gap: 5px; border: 1px solid #aa9d82; background: #f9f5eb; text-align: left; }
.rail-report span { color: var(--teal-dark); font-size: 12px; font-weight: 800; }
.rail-report b { font-size: 13px; }
.factory-scene { position: relative; min-width: 0; overflow: hidden; background: #59786b; }
.factory-scene > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 53%; }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,35,33,.12), transparent 22%, transparent 70%, rgba(10,35,33,.34)); box-shadow: inset 0 0 45px rgba(12,36,34,.25); }
.scene-date { position: absolute; left: 14px; top: 14px; padding: 8px 11px; display: grid; gap: 2px; color: white; border-left: 4px solid #efb84f; background: rgba(17,56,52,.88); box-shadow: 3px 3px 0 rgba(15,38,36,.25); }
.scene-date span { font-weight: 800; }
.scene-date small { color: #c6ded5; font-size: 11px; }
.scene-hotspot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 0; display: flex; align-items: center; border: 0; background: transparent; filter: drop-shadow(0 2px 5px rgba(9,28,27,.48)); }
.scene-hotspot > i { position: relative; width: 20px; height: 20px; border: 3px solid white; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(20,141,134,.32); }
.scene-hotspot > i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: white; }
.scene-hotspot > span { margin-left: 7px; padding: 6px 9px; display: grid; color: white; border: 1px solid rgba(255,255,255,.42); background: rgba(23,59,58,.88); text-align: left; white-space: nowrap; }
.scene-hotspot b { font-size: 12px; }
.scene-hotspot small { color: #c9ded7; font-size: 10px; }
.scene-hotspot:hover, .scene-hotspot.active { z-index: 2; transform: translate(-50%, -50%) scale(1.06); }
.scene-hotspot:hover > i, .scene-hotspot.active > i { background: var(--amber); box-shadow: 0 0 0 7px rgba(227,154,59,.34); }
.scene-bottom-status { position: absolute; left: 16px; right: 16px; bottom: 14px; min-height: 62px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; color: white; border: 1px solid rgba(255,255,255,.28); background: rgba(18,53,50,.9); backdrop-filter: blur(8px); }
.scene-bottom-status .status-light { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #72c493; box-shadow: 0 0 0 6px rgba(114,196,147,.18); }
.scene-bottom-status .status-light.busy { background: #efb74f; box-shadow: 0 0 0 6px rgba(239,183,79,.2); animation: pulse 1.8s infinite; }
.scene-bottom-status div { flex: 1; display: grid; gap: 3px; min-width: 0; }
.scene-bottom-status small { color: #bdd2ca; font-size: 11px; }
.scene-bottom-status b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.scene-bottom-status button { padding: 7px 10px; border: 1px solid #7dcac0; color: white; background: var(--teal); }
.action-rail { display: flex; flex-direction: column; border-left: 1px solid #a99b7e; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-grid > button { min-height: 87px; padding: 10px 8px; display: grid; justify-items: center; gap: 5px; border: 1px solid #9f9278; background: #e6d9bf; box-shadow: 3px 3px 0 #9c8f75; }
.action-grid > button:hover, .action-grid > button.active { border-color: var(--teal); background: #d9eee6; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #658f82; }
.action-grid i { width: 28px; height: 28px; display: grid; place-content: center; color: white; background: #64766d; font-style: normal; }
.action-grid button.active i { background: var(--teal); }
.action-grid span { display: grid; gap: 2px; }
.action-grid b { font-size: 13px; }
.action-grid small { display: none; color: var(--muted); font-size: 10px; }
.advance-week { width: 100%; margin-top: auto; min-height: 72px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #0e6963; color: white; background: var(--teal); box-shadow: 4px 4px 0 #6e6655; }
.advance-week span { display: grid; text-align: left; }
.advance-week small { opacity: .75; font-size: 11px; }
.advance-week b { font-size: 18px; }
.advance-week > i { font-size: 25px; font-style: normal; }
.rail-tools { display: flex; justify-content: space-between; margin-top: 12px; }
.rail-tools button { border: 0; color: #6b6b61; background: transparent; font-size: 11px; }
.news-ticker { display: flex; align-items: center; min-width: 0; color: #dbded5; background: #122e2d; border-top: 1px solid #315957; font-size: 12px; }
.news-ticker span { align-self: stretch; padding: 0 16px; display: grid; place-content: center; color: white; background: var(--teal); font-weight: 800; }
.news-ticker p { flex: 1; margin: 0; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-ticker b { padding: 0 14px; color: #efb950; }
.mobile-nav, .mobile-advance { display: none; }

/* Drawers and management views */
.drawer-backdrop { position: fixed; z-index: 50; inset: 76px 250px 40px 200px; background: rgba(9,27,26,.4); backdrop-filter: blur(2px); }
.game-drawer { position: fixed; z-index: 60; top: 86px; right: 268px; bottom: 54px; width: min(560px, calc(100vw - 510px)); display: grid; grid-template-rows: 72px minmax(0, 1fr); border: 1px solid #92856f; background: #f9f4e8; box-shadow: -12px 16px 45px rgba(13,33,31,.32); animation: drawer-in .2s ease-out; }
.game-drawer > header { padding: 0 18px; display: flex; align-items: center; gap: 12px; color: white; background: var(--navy); border-bottom: 3px solid var(--amber); }
.game-drawer > header > span { width: 35px; height: 35px; display: grid; place-content: center; color: var(--navy); background: #74c7bc; font-size: 19px; }
.game-drawer > header div { flex: 1; display: grid; gap: 2px; }
.game-drawer h2 { margin: 0; font-size: 18px; }
.game-drawer header p { margin: 0; color: #b9d2c9; font-size: 11px; }
.game-drawer header button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); color: white; background: rgba(255,255,255,.06); font-size: 25px; }
.drawer-content { min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.panel-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #c1b599; background: #eee2c8; }
.panel-summary > span { min-width: 0; padding: 10px 12px; display: grid; gap: 3px; border-right: 1px solid #c1b599; }
.panel-summary > span:last-child { border-right: 0; }
.panel-summary small { color: var(--muted); font-size: 11px; }
.panel-summary b { overflow: hidden; color: var(--teal-dark); font-size: 17px; text-overflow: ellipsis; }
.order-layout { display: grid; gap: 12px; margin-top: 14px; }
.order-list { display: grid; max-height: 230px; overflow-y: auto; border: 1px solid #c5b89e; }
.order-row { width: 100%; min-height: 62px; padding: 8px 10px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto 12px; align-items: center; gap: 9px; border: 0; border-bottom: 1px solid #d7ccb6; background: #fffcf5; text-align: left; }
.order-row:last-child { border-bottom: 0; }
.order-row:hover, .order-row.selected { background: #e5f2eb; box-shadow: inset 4px 0 var(--teal); }
.order-row.locked, .order-row.expired { filter: saturate(.55); opacity: .72; }
.order-row > span:nth-child(2), .order-row > span:nth-child(3) { display: grid; gap: 3px; min-width: 0; }
.order-row > span:nth-child(3) { text-align: right; }
.order-row b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.order-row small { color: var(--muted); font-size: 10px; }
.order-type { width: 42px; height: 34px; display: grid; place-content: center; color: white; background: var(--teal); font-size: 11px; font-weight: 800; }
.order-type.orange, .product-symbol.orange { background: #bf7840; }
.order-type.blue, .product-symbol.blue { background: var(--blue); }
.order-type.rose, .product-symbol.rose { background: #b96168; }
.order-type.lime, .product-symbol.lime { background: #6f985f; }
.order-type.violet, .product-symbol.violet { background: #766c9f; }
.order-detail { padding: 15px; border: 1px solid #c5b89e; background: #fffdf8; }
.detail-heading { display: flex; align-items: center; gap: 11px; }
.detail-heading div { min-width: 0; }
.detail-heading h3 { margin: 0; font-size: 18px; }
.detail-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.detail-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 0; border: 1px solid #d3c8b4; }
.detail-metrics span { padding: 8px; display: grid; gap: 3px; border-right: 1px solid #d3c8b4; }
.detail-metrics span:last-child { border: 0; }
.detail-metrics small { color: var(--muted); font-size: 10px; }
.detail-metrics b { font-size: 13px; }
.risk-high { color: #b44f43; } .risk-mid { color: #b1782f; } .risk-low { color: #397c61; }
.detail-note { margin: 12px 0; color: #686c64; font-size: 12px; line-height: 1.55; }
.primary-inline, .row-action { width: 100%; min-height: 54px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #0d6862; color: white; background: var(--teal); text-align: left; box-shadow: 3px 3px 0 #8b7d65; }
.primary-inline span { font-weight: 800; }
.primary-inline small { color: #d0e8e3; font-size: 11px; }
.primary-inline b { grid-row: 1/3; grid-column: 2; font-size: 20px; }
.choice-block { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #c8bda8; }
.choice-block > b { display: block; margin-bottom: 9px; font-size: 13px; }
.choice-block > p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.segmented, .mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.segmented button, .mode-grid button { min-height: 42px; border: 1px solid #b5a98e; background: #ede2cb; }
.segmented button.selected, .mode-grid button.selected { color: white; border-color: var(--teal-dark); background: var(--teal); }
.mode-grid button { padding: 7px; display: grid; gap: 2px; text-align: left; }
.mode-grid small { font-size: 10px; opacity: .75; }
.quote-grid { display: grid; gap: 7px; }
.quote-grid button { padding: 10px; display: grid; gap: 5px; border: 1px solid #b7aa90; background: #f0e4cc; text-align: left; }
.quote-grid button > span { display: flex; justify-content: space-between; }
.quote-grid em { color: var(--teal-dark); font-size: 10px; font-style: normal; }
.quote-grid small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.quote-grid button:hover { border-color: var(--teal); background: #e2f0e9; }
.price-ledger { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #b8ad95; background: #f1e8d7; }
.price-ledger > span { padding: 8px; display: grid; gap: 3px; border-right: 1px solid #c9bea9; }
.price-ledger > span:nth-child(3) { border-right: 0; }
.price-ledger small { color: var(--muted); font-size: 10px; }
.price-ledger b { font-size: 12px; }
.price-ledger p, .price-ledger em { grid-column: 1/-1; margin: 0; padding: 8px; border-top: 1px solid #c9bea9; font-size: 10px; font-style: normal; line-height: 1.45; }
.price-ledger.ok { border-left: 4px solid var(--green); }
.price-ledger.warn { border-left: 4px solid var(--amber); }
.price-ledger.blocked { border-left: 4px solid var(--coral); }
.quote-feedback, .locked-note, .success-note { margin: 12px 0; padding: 10px; font-size: 12px; line-height: 1.5; background: #eee5d4; }
.success-note { color: #376e56; background: #e5f1e6; }
.stage-progress { margin-top: 15px; }
.stage-progress > div:first-child { display: flex; justify-content: space-between; }
.stage-progress > i { height: 8px; display: block; margin: 8px 0; background: #d8ceba; }
.stage-progress > i em { height: 100%; display: block; background: var(--teal); }
.mini-stage-path { display: flex; justify-content: space-between; color: #9a9588; font-size: 9px; }
.mini-stage-path .done { color: #54866e; } .mini-stage-path .current { color: var(--teal-dark); font-weight: 800; }
.panel-banner { padding: 14px; display: flex; gap: 12px; align-items: center; color: white; background: var(--navy); border-bottom: 3px solid var(--amber); }
.panel-banner > i { width: 40px; height: 40px; display: grid; place-content: center; color: var(--navy); background: #73cabe; font-style: normal; }
.panel-banner b { font-size: 15px; }
.panel-banner p { margin: 4px 0 0; color: #bed4cd; font-size: 11px; }
.product-list, .employee-list, .strategy-list, .upgrade-list { display: grid; gap: 8px; margin-top: 12px; }
.product-row { padding: 12px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #c8bba0; background: #fffdf8; }
.product-row.locked { background: #eee6d7; }
.product-symbol { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-content: center; color: white; background: var(--teal); font-weight: 800; }
.product-copy { flex: 1; min-width: 0; }
.product-copy > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.product-copy em { color: var(--teal-dark); font-size: 10px; font-style: normal; }
.product-copy p { margin: 6px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.segmented.pricing button { min-height: 38px; display: grid; gap: 1px; }
.segmented.pricing small { font-size: 9px; }
.row-action { min-height: 40px; padding: 7px 10px; display: flex; justify-content: space-between; font-size: 11px; box-shadow: none; }
.panel-section { margin-top: 16px; }
.section-heading { margin-bottom: 8px; display: flex; justify-content: space-between; }
.section-heading div { display: grid; gap: 2px; }
.section-heading b { font-size: 14px; }
.section-heading small { color: var(--muted); font-size: 10px; }
.recruit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.recruit-grid > button { padding: 9px; display: grid; gap: 6px; border: 1px solid #b7a98e; background: #eee2c8; text-align: left; }
.recruit-grid i { width: 28px; height: 28px; display: grid; place-content: center; color: white; background: var(--teal); font-style: normal; }
.recruit-grid span { display: grid; gap: 2px; }
.recruit-grid b { font-size: 11px; }
.recruit-grid small { color: var(--muted); font-size: 9px; }
.recruit-grid em { color: #9c6425; font-size: 10px; font-style: normal; font-weight: 800; }
.candidate-list { border: 1px solid #c8bba0; }
.candidate-list > div, .stock-list > div { min-height: 56px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #d6cbb5; background: #fffdf8; }
.candidate-list > div:last-child, .stock-list > div:last-child { border: 0; }
.candidate-list span:nth-child(2), .stock-list span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.candidate-list small, .stock-list small { color: var(--muted); font-size: 10px; }
.candidate-list button, .stock-list button { padding: 7px 10px; border: 1px solid #19716b; color: white; background: var(--teal); }
.avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-content: center; color: white; background: #607b72; border-radius: 50%; font-weight: 800; }
.avatar.coral { background: #bc6957; } .avatar.orange { background: #b57b40; } .avatar.cyan { background: #348e91; } .avatar.green { background: #5f8f65; } .avatar.violet { background: #756997; }
.employee-list article { padding: 11px; display: flex; gap: 10px; border: 1px solid #c8bba0; background: #fffdf8; }
.employee-copy { flex: 1; min-width: 0; }
.employee-copy > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.employee-copy em { color: var(--teal-dark); font-size: 10px; font-style: normal; }
.person-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.person-meter { display: grid; gap: 3px; }
.person-meter small { color: var(--muted); font-size: 9px; }
.person-meter > i { height: 5px; background: #ddd4c3; }
.person-meter em { height: 100%; display: block; background: var(--teal); }
.person-meter.energy em { background: var(--amber); } .person-meter.morale em { background: var(--green); }
.employee-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.employee-actions button { padding: 5px 7px; border: 1px solid #a99b80; background: #eee3cd; font-size: 10px; }
.material-symbol { width: 35px; height: 35px; display: grid; place-content: center; color: white; background: var(--teal); font-style: normal; }
.material-symbol.orange { background: #bd793b; } .material-symbol.green { background: #5e9168; } .material-symbol.violet { background: #756997; }
.upgrade-list > button, .strategy-list > button { min-height: 62px; padding: 9px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #b9ad94; background: #fffdf8; text-align: left; }
.upgrade-list > button > i, .strategy-list > button > i { width: 34px; height: 34px; display: grid; place-content: center; flex: 0 0 34px; color: white; background: #66847a; font-style: normal; }
.upgrade-list span, .strategy-list span { flex: 1; display: grid; gap: 2px; }
.upgrade-list small, .strategy-list small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.upgrade-list em, .strategy-list em { max-width: 120px; color: #8e5d25; font-size: 10px; font-style: normal; font-weight: 800; text-align: right; }
.company-stage-banner { padding: 17px; color: white; background: linear-gradient(135deg, #17534f, #26776e); border-bottom: 4px solid var(--amber); }
.company-stage-banner > span { color: #91d4ca; font-size: 11px; }
.company-stage-banner h3 { margin: 5px 0; font-size: 24px; }
.company-stage-banner p { margin: 0; color: #d1e4dc; font-size: 11px; line-height: 1.55; }
.company-stage-banner > div { display: flex; gap: 24px; margin-top: 15px; }
.company-stage-banner > div i { position: relative; width: 26px; height: 26px; display: grid; place-content: center; border: 2px solid rgba(255,255,255,.42); border-radius: 50%; font-style: normal; font-size: 10px; }
.company-stage-banner > div i:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 10px; width: 28px; height: 2px; background: rgba(255,255,255,.28); }
.company-stage-banner > div i.done { color: #173b3a; background: #8ad0c5; }
.company-stage-banner > div i.current { color: #173b3a; border-color: #ffc75e; background: #ffc75e; box-shadow: 0 0 0 5px rgba(255,199,94,.16); }
.path-list { display: grid; gap: 8px; }
.path-list article { padding: 10px; border: 1px solid #c2b59a; background: #fffdf8; }
.path-list article > div { display: flex; justify-content: space-between; margin-bottom: 7px; }
.path-list article > div em { color: var(--teal-dark); font-style: normal; font-weight: 800; }
.path-list article > span { padding: 4px 0; display: grid; grid-template-columns: 18px 1fr auto; gap: 5px; color: #77776f; font-size: 10px; }
.path-list article > span.met { color: #447d61; }
.path-list article > span small { color: #989184; }
.report-hero { padding: 15px; color: white; background: var(--navy); border-bottom: 3px solid var(--amber); }
.report-hero > span { color: #8ad0c5; font-size: 11px; }
.report-hero > div { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 11px; }
.report-hero b { display: grid; font-size: 17px; }
.report-hero small { color: #b9d1c8; font-size: 9px; }
.report-hero .income { color: #8ed5ae; } .report-hero .expense { color: #f2ad8d; }
.next-focus { margin-top: 12px; padding: 12px; display: flex; gap: 10px; background: #e5f0e8; border-left: 4px solid var(--teal); }
.next-focus > i { font-style: normal; color: var(--teal); }
.next-focus p { margin: 4px 0 0; color: #5f6b64; font-size: 11px; line-height: 1.5; }
.report-notes, .log-list { margin-top: 12px; padding: 12px; border: 1px solid #c9bda3; background: #fffdf8; }
.report-notes p, .log-list p { margin: 0; padding: 7px 0; display: flex; gap: 8px; border-bottom: 1px dashed #ded5c3; font-size: 11px; line-height: 1.5; }
.report-notes p:last-child, .log-list p:last-child { border: 0; }
.report-notes p i, .log-list p i { width: 6px; height: 6px; margin-top: 5px; flex: 0 0 6px; border-radius: 50%; background: var(--teal); }
.empty-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; color: #777b70; text-align: center; }
.empty-state > i { width: 48px; height: 48px; display: grid; place-content: center; color: white; background: #7c8a7e; font-style: normal; font-size: 22px; }
.empty-state p { max-width: 320px; margin: 0; font-size: 11px; line-height: 1.55; }
.settings-panel { display: grid; gap: 12px; }
.settings-panel section { padding: 14px; border: 1px solid #c8bba0; background: #fffdf8; }
.settings-panel section p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settings-panel > button { min-height: 48px; border: 1px solid #9f9176; background: #e9ddc5; }
.settings-panel > button.danger { color: #a0443d; border-color: #c88f83; background: #f2ded8; }
.settings-panel > small { color: #817a6d; font-size: 10px; line-height: 1.5; }

/* Tutorial, events and end states */
.tutorial-coach { position: fixed; z-index: 80; left: 218px; bottom: 58px; width: min(420px, calc(100vw - 500px)); padding: 14px; color: #26332f; border: 1px solid #81765f; background: #fff8e9; box-shadow: 8px 8px 0 rgba(22,44,41,.28); }
.tutorial-coach > header { display: flex; justify-content: space-between; color: var(--teal-dark); font-size: 11px; font-weight: 800; }
.tutorial-coach header button { border: 0; color: #7d786c; background: transparent; font-size: 10px; }
.tutorial-coach > div { display: flex; gap: 10px; margin-top: 9px; }
.tutorial-coach > div > i { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-content: center; color: white; background: var(--teal); border-radius: 50%; font-style: normal; font-weight: 800; }
.tutorial-coach > div > span { display: grid; gap: 3px; }
.tutorial-coach p { margin: 0; color: #6a716b; font-size: 11px; line-height: 1.45; }
.coach-action { width: 100%; margin-top: 10px; padding: 9px 11px; display: flex; justify-content: space-between; border: 1px solid #16716b; color: white; background: var(--teal); font-weight: 800; }
.tutorial-coach footer { display: flex; gap: 5px; margin-top: 10px; }
.tutorial-coach footer i { height: 4px; flex: 1; background: #d7ccb8; }
.tutorial-coach footer i.done, .tutorial-coach footer i.current { background: var(--teal); }
.tutorial-target { position: relative; z-index: 2; animation: tutorial-glow 1.3s infinite; }
.modal-layer { position: fixed; z-index: 120; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(8,28,27,.76); backdrop-filter: blur(5px); }
.decision-modal, .ending-modal { width: min(540px, 100%); padding: 28px; border: 1px solid #8f8169; background: #fff9eb; box-shadow: 9px 9px 0 rgba(8,25,24,.35); }
.decision-icon { width: 46px; height: 46px; display: grid; place-content: center; color: white; background: var(--teal); font-style: normal; font-size: 25px; font-weight: 800; }
.decision-modal > span, .ending-modal > span { display: block; margin-top: 16px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.decision-modal h2, .ending-modal h2 { margin: 7px 0 10px; font-size: 26px; }
.decision-modal > p, .ending-modal > p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.decision-modal > small { display: block; margin-bottom: 12px; color: #9a642c; }
.decision-modal > div { display: grid; gap: 8px; }
.decision-modal > div > button { min-height: 64px; padding: 11px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ad9f83; background: #eee2cb; text-align: left; }
.decision-modal button span { display: grid; gap: 3px; }
.decision-modal button small { color: var(--muted); font-size: 11px; }
.decision-modal button > i { font-style: normal; font-size: 20px; }
.decision-modal .danger-choice { color: #9c3e39; background: #f2ddd5; }
.ending-modal { text-align: center; }
.ending-modal > i { width: 62px; height: 62px; margin: auto; display: grid; place-content: center; color: white; background: var(--teal); border-radius: 50%; font-size: 30px; font-style: normal; }
.ending-modal > b { display: block; margin: 10px; color: var(--teal-dark); font-size: 38px; }
.ending-modal > small { display: block; margin-bottom: 18px; color: var(--muted); line-height: 1.5; }
.ending-modal .primary-action { margin: 0 auto; }
.toast { position: fixed; z-index: 200; left: 50%; top: 18px; transform: translateX(-50%); max-width: min(480px, calc(100% - 32px)); padding: 11px 16px; color: white; background: #184e49; border: 1px solid #74c8bb; box-shadow: 4px 4px 0 rgba(5,24,23,.25); font-size: 13px; }
.toast.warn { background: #8c4b3f; border-color: #eba28f; }

@keyframes drawer-in { from { opacity: 0; transform: translateX(25px); } }
@keyframes sheet-in { from { transform: translateY(35px); opacity: .5; } }
@keyframes pulse { 50% { opacity: .5; transform: scale(.85); } }
@keyframes tutorial-glow { 50% { box-shadow: 0 0 0 7px rgba(255,196,75,.38), 3px 3px 0 #8b7d65; } }

@media (min-width: 1280px) {
  .game-board { grid-template-columns: 230px minmax(520px, 1fr) 290px; }
  .action-grid small { display: block; }
  .action-grid > button { min-height: 96px; }
  .game-drawer { right: 310px; width: min(620px, calc(100vw - 580px)); }
  .drawer-backdrop { right: 290px; left: 230px; }
  .tutorial-coach { left: 248px; }
}

@media (max-width: 760px) {
  body { background: #173b3a; }
  .title-screen { display: grid; grid-template-columns: 1fr; grid-template-rows: 54dvh minmax(46dvh, auto); }
  .title-art { min-height: 0; }
  .title-art > img { object-position: 50% 55%; }
  .title-art-shade { background: linear-gradient(180deg, transparent 48%, rgba(16,43,41,.78)); }
  .title-story { left: 18px; right: 18px; bottom: 18px; }
  .title-story span { padding: 5px 8px; font-size: 10px; }
  .title-story p { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .title-menu { min-height: 0; padding: 24px 22px calc(22px + env(safe-area-inset-bottom)); justify-content: flex-start; border: 0; }
  .title-mark { display: none; }
  .title-kicker { margin: 0 0 6px; font-size: 10px; }
  .title-menu h1 { font-size: 34px; }
  .title-menu h2 { margin: 3px 0 10px; font-size: 19px; }
  .title-description { margin-bottom: 15px; font-size: 12px; line-height: 1.55; }
  .title-actions { gap: 8px; }
  .primary-action, .paper-action { min-height: 56px; padding: 9px 13px; box-shadow: 3px 3px 0 #7b6e59; }
  .primary-action span, .paper-action span { font-size: 15px; }
  .primary-action small, .paper-action small { font-size: 10px; }
  .title-footnote { margin-top: 14px; font-size: 9px; }
  .story-screen > img { object-position: 50% 50%; }
  .story-fade { background: linear-gradient(180deg, transparent 36%, rgba(13,42,39,.96) 68%); }
  .story-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; min-height: 48dvh; padding: 24px 22px calc(20px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid rgba(255,255,255,.22); background: rgba(17,52,49,.94); }
  .story-sheet h1 { margin: 10px 0; font-size: 28px; }
  .story-sheet p { min-height: 100px; font-size: 15px; line-height: 1.7; }
  .story-dots { margin: 14px 0; }
  .setup-screen > header { height: 64px; padding: 0 14px; }
  .setup-form { width: calc(100% - 20px); margin-top: 10px; padding: 18px 16px 24px; box-shadow: 4px 4px 0 rgba(90,75,51,.17); }
  .setup-intro { gap: 12px; padding-bottom: 16px; }
  .setup-seal { flex-basis: 48px; height: 48px; font-size: 12px; }
  .setup-intro h1 { font-size: 20px; }
  .setup-intro p { font-size: 11px; }
  .setup-form > label { margin-top: 15px; font-size: 13px; }
  .setup-form input { height: 46px; font-size: 15px; }
  .setup-form fieldset { margin-top: 17px; }
  .origin-list { grid-template-columns: 1fr; }
  .origin-option { min-height: 88px; padding: 10px; display: flex; gap: 11px; align-items: flex-start; }
  .origin-option > i { flex: 0 0 36px; width: 36px; height: 36px; }
  .origin-option span { margin-top: 0; gap: 3px; }
  .origin-option small { font-size: 10px; }
  .origin-option em { font-size: 9px; }
  .open-factory { margin-top: 17px; }
  .game-screen { grid-template-rows: 64px minmax(0,1fr) 32px 64px; padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding: 0 8px 0 10px; border-bottom-width: 2px; }
  .game-brand { min-width: 0; flex: 1; gap: 7px; }
  .mini-logo { grid-template-columns: repeat(3, 5px); gap: 1px; }
  .mini-logo i { height: 16px; } .mini-logo i:nth-child(2) { height: 12px; margin-top: 4px; } .mini-logo i:nth-child(3) { height: 8px; margin-top: 8px; }
  .game-brand b { max-width: 104px; overflow: hidden; display: block; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .game-brand small { font-size: 9px; }
  .resources { flex: 0; gap: 3px; }
  .resource-chip { min-width: 48px; padding: 5px 4px; display: grid; justify-items: center; gap: 1px; border: 0; background: transparent; }
  .resource-chip > i { display: none; }
  .resource-chip span { justify-items: center; }
  .resource-chip small { font-size: 8px; }
  .resource-chip b { font-size: 10px; }
  .top-menu { width: 30px; height: 30px; padding: 0; border: 0; font-size: 12px; }
  .game-board { display: block; min-height: 0; }
  .stage-rail, .action-rail { display: none; }
  .factory-scene { height: 100%; }
  .factory-scene > img { object-position: 50% 52%; }
  .scene-date { left: 8px; top: 8px; padding: 6px 8px; }
  .scene-date span { font-size: 11px; } .scene-date small { font-size: 8px; }
  .scene-hotspot > i { width: 15px; height: 15px; border-width: 2px; box-shadow: 0 0 0 4px rgba(20,141,134,.32); }
  .scene-hotspot > i::after { inset: 3px; }
  .scene-hotspot > span { margin-left: 4px; padding: 4px 6px; }
  .scene-hotspot b { font-size: 9px; }
  .scene-hotspot small { font-size: 7px; }
  .scene-bottom-status { left: 8px; right: 8px; bottom: 10px; min-height: 50px; padding: 7px 8px; }
  .scene-bottom-status small { font-size: 8px; }
  .scene-bottom-status b { font-size: 10px; }
  .scene-bottom-status button { display: none; }
  .news-ticker { grid-row: 3; font-size: 9px; }
  .news-ticker span { padding: 0 8px; }
  .news-ticker b { display: none; }
  .mobile-nav { position: relative; z-index: 70; grid-row: 4; display: grid; grid-template-columns: repeat(6, 1fr); height: 64px; background: #f7efdf; border-top: 1px solid #a99d82; box-shadow: 0 -4px 16px rgba(18,42,39,.2); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav button { display: grid; place-content: center; justify-items: center; gap: 2px; border: 0; color: #687169; background: transparent; }
  .mobile-nav i { width: 26px; height: 24px; display: grid; place-content: center; font-style: normal; font-size: 14px; }
  .mobile-nav span { font-size: 9px; }
  .mobile-nav button.active { color: var(--teal-dark); background: #e3eee7; }
  .mobile-nav button.active i { color: white; background: var(--teal); }
  .mobile-advance { position: fixed; z-index: 45; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #0d6862; color: white; background: var(--teal); box-shadow: 3px 3px 0 rgba(25,47,43,.35); font-size: 11px; font-weight: 800; }
  .mobile-advance b { font-size: 17px; }
  .drawer-backdrop { inset: 64px 0 calc(64px + env(safe-area-inset-bottom)); }
  .game-drawer { top: auto; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); width: 100%; height: min(78dvh, 720px); grid-template-rows: 62px minmax(0,1fr); border: 0; border-top: 1px solid #8f816b; border-radius: 18px 18px 0 0; animation: sheet-in .22s ease-out; }
  .game-drawer > header { padding: 0 13px; border-radius: 18px 18px 0 0; }
  .game-drawer > header > span { width: 31px; height: 31px; }
  .game-drawer h2 { font-size: 15px; }
  .drawer-content { padding: 12px; }
  .tutorial-coach { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; padding: 11px; box-shadow: 4px 4px 0 rgba(22,44,41,.28); }
  .tutorial-coach > div > i { width: 28px; height: 28px; flex-basis: 28px; }
  .tutorial-coach b { font-size: 11px; }
  .tutorial-coach p { font-size: 9px; }
  .panel-summary b { font-size: 13px; }
  .order-list { max-height: 180px; }
  .order-row { grid-template-columns: 40px minmax(0,1fr) auto 10px; }
  .detail-heading h3 { font-size: 15px; }
  .detail-metrics b { font-size: 11px; }
  .recruit-grid { grid-template-columns: 1fr; }
  .recruit-grid > button { display: flex; align-items: center; }
  .recruit-grid span { flex: 1; }
  .person-meters { gap: 3px; }
  .strategy-list em { max-width: 90px; }
  .decision-modal, .ending-modal { padding: 20px; }
  .decision-modal h2, .ending-modal h2 { font-size: 22px; }
  .modal-layer { padding: 14px; }
}

@media (max-width: 380px) {
  .resource-chip { min-width: 43px; }
  .scene-hotspot > span { display: none; }
  .detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .detail-metrics span:nth-child(2) { border-right: 0; }
  .detail-metrics span:nth-child(-n+2) { border-bottom: 1px solid #d3c8b4; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }