:root {
  color-scheme: dark;
  --ink: #080d19;
  --ink-2: #0f1729;
  --panel: rgba(18, 28, 47, .88);
  --panel-2: #17243b;
  --line: rgba(169, 190, 225, .14);
  --muted: #93a4bf;
  --text: #f6f8fb;
  --saffron: #ffb000;
  --saffron-2: #ff7a00;
  --cyan: #42d6c7;
  --purple: #9d8cff;
  --red: #ff6577;
  --green: #58df97;
  --shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; min-height: 100vh; color: var(--text); background:
  radial-gradient(circle at 10% 10%, rgba(66, 214, 199, .08), transparent 25rem),
  radial-gradient(circle at 90% 20%, rgba(255, 176, 0, .07), transparent 26rem), var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .75rem 1rem; background: white; color: #000; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

.start-screen { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: 2rem 1rem; }
.start-screen::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image:
  linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.start-glow { position: absolute; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(100px); opacity: .18; }
.start-glow-a { background: var(--saffron); left: -12rem; top: -10rem; }
.start-glow-b { background: var(--cyan); right: -12rem; bottom: -10rem; }
.start-card { position: relative; width: min(560px, 100%); text-align: center; padding: clamp(2rem, 6vw, 4rem); border: 1px solid var(--line); border-radius: 32px; background: linear-gradient(145deg, rgba(20,31,52,.94), rgba(9,15,27,.93)); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.logo-mark, .mini-logo { display: grid; place-items: center; background: linear-gradient(145deg, var(--saffron), var(--saffron-2)); color: #171006; font-weight: 1000; letter-spacing: -.08em; box-shadow: 0 10px 30px rgba(255,176,0,.22); }
.logo-mark { width: 82px; height: 82px; margin: 1rem auto 1.3rem; border-radius: 24px 24px 24px 8px; font-size: 1.8rem; }
.start-card h1 { margin: 0; font-size: clamp(2.25rem, 8vw, 4.4rem); line-height: .95; letter-spacing: -.075em; }
.title-line { margin: .7rem 0 1.4rem; font-weight: 800; letter-spacing: .18em; color: var(--muted); font-size: clamp(.8rem, 3vw, 1rem); }
.title-line span { color: var(--saffron); }
.start-copy { max-width: 430px; margin: 0 auto 1.7rem; color: #cbd5e5; line-height: 1.65; }
.eyebrow, .kicker { color: var(--saffron); font-size: .74rem; letter-spacing: .17em; font-weight: 900; }
.start-actions { display: grid; gap: .75rem; }
.microcopy { color: var(--muted); font-size: .78rem; margin: 1rem 0 0; }

.btn, .icon-btn, .gig-btn, .action-card, .city-tab, .close-btn { border: 0; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease; }
.btn:hover, .icon-btn:hover, .gig-btn:hover, .action-card:hover, .city-tab:hover { transform: translateY(-2px); }
.btn:active, .icon-btn:active, .gig-btn:active, .action-card:active, .city-tab:active { transform: translateY(0); }
.btn { min-height: 48px; border-radius: 13px; padding: .8rem 1.1rem; font-weight: 850; }
.btn-primary { color: #181006; background: linear-gradient(135deg, var(--saffron), #ff8a00); box-shadow: 0 10px 24px rgba(255,176,0,.18); }
.btn-secondary { background: #192840; border: 1px solid rgba(255,255,255,.1); }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: #d2dbe9; }
.btn-danger { background: rgba(255,101,119,.12); border: 1px solid rgba(255,101,119,.28); color: #ff9eaa; }
.btn:disabled, button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.wide { width: 100%; }

.game-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: .75rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(8,13,25,.88); backdrop-filter: blur(20px); }
.brand-lockup { display: flex; align-items: center; min-width: 0; gap: .75rem; }
.mini-logo { width: 42px; height: 42px; flex: none; border-radius: 13px 13px 13px 5px; font-size: .9rem; }
.brand-lockup div { min-width: 0; display: grid; }
.brand-lockup strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
.brand-lockup span { color: var(--muted); font-size: .74rem; }
.topbar-actions { display: flex; align-items: center; gap: .55rem; }
.icon-btn { min-height: 42px; padding: .6rem .85rem; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 750; }
.save-state { color: var(--muted); font-size: .76rem; margin-right: .25rem; }
.save-state.saving { color: var(--saffron); }
.save-state.error { color: var(--red); }

main { width: min(1500px, 100%); margin: 0 auto; padding: 1.2rem clamp(.8rem, 3vw, 2rem) 3rem; }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.metric-card { position: relative; overflow: hidden; padding: 1rem 1.1rem; min-height: 112px; border-radius: 17px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(24,37,61,.86), rgba(14,23,40,.9)); }
.metric-card::after { content: ""; position: absolute; width: 75px; height: 75px; right: -25px; top: -25px; border-radius: 50%; background: currentColor; opacity: .08; }
.metric-card span { display: block; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.metric-card strong { display: block; margin-top: .55rem; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.04em; }
.metric-card small { color: var(--muted); font-size: .72rem; }
.cash-card { color: var(--saffron); } .revenue-card { color: var(--cyan); } .profit-card { color: var(--green); } .love-card { color: #ff7b9c; }

.worldbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.15rem 0 .7rem; }
.city-tabs { display: flex; gap: .55rem; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: .15rem; }
.city-tab { flex: none; min-height: 44px; padding: .65rem .9rem; border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); font-weight: 800; }
.city-tab[aria-selected="true"] { color: var(--text); border-color: rgba(66,214,199,.48); background: rgba(66,214,199,.1); }
.city-tab.ready { color: var(--text); border-color: rgba(255,176,0,.75); background: rgba(255,176,0,.16); box-shadow: 0 0 0 2px rgba(255,176,0,.08); }
.city-tab.ready:focus-visible { outline: 3px solid #ffb000; outline-offset: 2px; }
.city-tab.locked { opacity: .48; }
.day-chip { flex: none; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); background: var(--ink-2); border-radius: 999px; padding: .55rem .8rem; font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.day-chip span:last-child { color: var(--saffron); font-variant-numeric: tabular-nums; }

.process-ribbon { display: flex; align-items: center; gap: .45rem; overflow-x: auto; padding: .7rem .85rem; margin-bottom: .85rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(12,20,35,.78); scrollbar-width: none; }
.process-ribbon span { flex: none; color: #6f809c; font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.process-ribbon span.done { color: var(--green); }
.process-ribbon span.active { color: var(--saffron); }
.process-ribbon i { color: #44516a; font-style: normal; }

.game-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); gap: .85rem; align-items: start; }
.operations-column, .action-column { display: grid; gap: .85rem; }
.action-column { position: sticky; top: 84px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,28,47,.9), rgba(12,20,35,.9)); box-shadow: 0 14px 45px rgba(0,0,0,.16); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem .8rem; }
.panel-heading.compact { padding-bottom: .45rem; }
.panel-heading h2 { margin: .25rem 0 0; font-size: 1.08rem; letter-spacing: -.02em; }
.status-pill, .count-pill { flex: none; padding: .4rem .62rem; border-radius: 999px; background: rgba(66,214,199,.1); color: var(--cyan); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.count-pill { color: var(--muted); background: rgba(255,255,255,.05); }

.product-list { display: grid; gap: .65rem; padding: .35rem .8rem .9rem; }
.product-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.product-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, rgba(255,176,0,.18), rgba(66,214,199,.1)); font-size: 1.35rem; }
.product-main { min-width: 0; }
.product-main strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-main small { color: var(--muted); }
.stock-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .48rem; }
.stock-chip { padding: .28rem .45rem; border-radius: 7px; color: #c8d3e4; background: rgba(255,255,255,.055); font-size: .67rem; }
.product-actions { display: flex; flex-direction: column; gap: .35rem; }
.mini-btn { min-height: 36px; padding: .48rem .65rem; border: 1px solid var(--line); border-radius: 10px; background: #1a2942; font-weight: 800; font-size: .72rem; cursor: pointer; }
.mini-btn.primary { background: rgba(255,176,0,.14); border-color: rgba(255,176,0,.32); color: #ffd27b; }
.milestone-banner { margin: 0 .8rem .9rem; padding: .9rem; border: 1px solid rgba(255,176,0,.28); border-radius: 14px; background: linear-gradient(135deg, rgba(255,176,0,.12), rgba(157,140,255,.08)); }

.order-board { display: grid; gap: .6rem; padding: .35rem .8rem .9rem; max-height: 360px; overflow-y: auto; }
.empty-state { padding: 1.4rem 1rem; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 14px; }
.empty-state strong { display: block; color: #dce4ef; margin-bottom: .25rem; }
.order-row { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .75rem .85rem; border-radius: 13px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); }
.order-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 5px rgba(255,176,0,.08); }
.order-dot.pick { background: var(--purple); } .order-dot.delivery { background: var(--cyan); } .order-dot.done { background: var(--green); } .order-dot.late { background: var(--red); }
.order-copy { min-width: 0; }
.order-copy strong { display: block; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-copy small { color: var(--muted); font-size: .7rem; }
.order-value { font-weight: 850; font-size: .78rem; }

.activity-list, .growth-actions { display: grid; gap: .55rem; padding: .35rem .75rem .8rem; }
.action-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; text-align: left; padding: .78rem; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.action-card > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,176,0,.11); font-size: 1.05rem; }
.action-card strong { display: block; font-size: .8rem; }
.action-card small { display: block; color: var(--muted); font-size: .68rem; margin-top: .12rem; line-height: 1.35; }
.action-card b { color: var(--saffron); }
.growth-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: 12px; background: rgba(255,255,255,.025); }
.growth-row strong { display: block; font-size: .79rem; }
.growth-row small { color: var(--muted); font-size: .67rem; }
.gig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: .4rem .75rem .8rem; }
.gig-btn { display: grid; place-items: center; min-height: 92px; padding: .6rem .35rem; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: .72rem; font-weight: 800; }
.gig-btn span { font-size: 1.25rem; margin-bottom: .25rem; }.gig-btn small { color: var(--muted); font-size: .6rem; }

.game-dialog { width: min(630px, calc(100% - 1.5rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; color: var(--text); background: #111b2e; box-shadow: var(--shadow); }
.game-dialog::backdrop { background: rgba(3,7,14,.8); backdrop-filter: blur(7px); }
.confirm-dialog { width:min(460px,calc(100% - 1.5rem));padding:1.2rem; }
.confirm-dialog p { color:var(--muted);line-height:1.55; }
.feature-dialog { width:min(480px,calc(100% - 1.5rem));text-align:center;overflow:hidden; }
.feature-dialog-body { padding:1.55rem; }
.feature-dialog-icon { display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:19px;background:linear-gradient(145deg,rgba(255,176,0,.2),rgba(66,214,199,.13));font-size:1.8rem; }
.feature-dialog h2 { margin:.45rem 0 .55rem;font-size:clamp(1.4rem,5vw,2rem); }
.feature-dialog p { margin:0 0 1.25rem;color:var(--muted);line-height:1.6; }
.game-dialog form, .book-dialog > *, .campaign-dialog > * { margin-inline: 1.2rem; }
.game-dialog form { padding-bottom: 1.25rem; }
.dialog-head { padding: 1.35rem 0 1rem; }
.dialog-head h2 { margin: .25rem 0 .35rem; font-size: 1.55rem; }
.dialog-head p { color: var(--muted); line-height: 1.5; margin: 0; }
.game-dialog label:not(.choice) { display: grid; gap: .4rem; margin: .8rem 0; color: #d8e0eb; font-weight: 750; font-size: .8rem; }
.game-dialog input[type="text"], .game-dialog input[type="password"], .game-dialog input:not([type]) { min-height: 48px; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: .75rem; color: var(--text); background: #0a1221; }
.game-dialog select { min-height:48px;width:100%;border:1px solid var(--line);border-radius:12px;padding:.75rem;color:var(--text);background:#0a1221;font:inherit; }
.game-dialog fieldset { border: 0; padding: 0; margin: 1rem 0; }
.game-dialog legend { margin-bottom: .55rem; font-size: .8rem; font-weight: 750; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.choice { position: relative; min-height: 92px; display: grid; align-content: center; gap: .2rem; padding: .75rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); cursor: pointer; }
.choice:has(input:checked) { border-color: rgba(255,176,0,.65); background: rgba(255,176,0,.08); }
.choice input { position: absolute; opacity: 0; }
.choice span { font-size: 1.3rem; }.choice strong { font-size: .79rem; }.choice small { color: var(--muted); font-size: .66rem; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: .6rem; margin-top: 1rem; }
.notice { padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(66,214,199,.06); color: #c8eae6; font-size: .75rem; }
.book-dialog { width: min(850px, calc(100% - 1.5rem)); }
.book-head { display: flex; justify-content: space-between; align-items: flex-start; }
.close-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); font-size: 1.5rem; }
.book-tabs { display: flex; gap: .35rem; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
.book-tabs button { flex: none; min-height: 40px; padding: .55rem .7rem; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 800; font-size: .73rem; }
.book-tabs button.active { color: #161006; background: var(--saffron); }
.book-content { min-height: 320px; padding: 1rem 0 1.4rem; }
.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.book-stat { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.book-stat span { color: var(--muted); font-size: .7rem; }.book-stat strong { display: block; margin-top: .35rem; font-size: 1.2rem; }
.ledger-list { display: grid; gap: .5rem; max-height: 390px; overflow-y: auto; }
.ledger-item { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .7rem; border-bottom: 1px solid var(--line); }
.ledger-item span { color: var(--saffron); font-size: .68rem; font-weight: 900; }.ledger-item strong { display: block; font-size: .78rem; }.ledger-item small { color: var(--muted); }
.world-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.world-heading h3 { margin: .3rem 0; font-size: 1.3rem; }.world-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.leader-list { display: grid; gap: .55rem; }
.leader-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.leader-rank { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,176,0,.12); color: var(--saffron); font-weight: 950; }
.leader-row strong, .leader-row small { display: block; }.leader-row small { color: var(--muted); font-size: .7rem; }.leader-row b { font-variant-numeric: tabular-nums; color: var(--cyan); }
.world-status { margin-top: 1rem; }

.arcade-overlay { position: fixed; inset: 0; z-index: 100; background: #030710; }
.arcade-frame-wrap { height: 100%; display: grid; grid-template-rows: auto 1fr; }
#arcade-overlay .arcade-frame-wrap { grid-template-rows: auto minmax(0,1fr); }
#arcade-overlay .arcade-frame-wrap.has-sponsor { grid-template-rows: auto auto minmax(0,1fr); }
.arcade-chrome { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: .55rem 1rem; border-bottom: 1px solid var(--line); color: #f6f8fb; background: #0a1120; font-weight: 850; }
.arcade-chrome .icon-btn, html[data-theme="light"] .arcade-chrome .icon-btn { color:#f6f8fb;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16); }
#arcade-frame, #campaign-frame { width: 100%; height: 100%; border: 0; background: #080d19; }
#arcade-frame { min-height: 0; }
.arcade-sponsor { display:flex;align-items:center;justify-content:center;gap:.8rem;min-height:38px;padding:.38rem .8rem;background:#173437;color:#e7fff8;border-bottom:1px solid #377377;font-size:.72rem;white-space:nowrap;overflow:hidden; }
.arcade-sponsor span { color:#97dace;font-size:.63rem;font-weight:850;letter-spacing:.08em; }
.arcade-sponsor strong { overflow:hidden;text-overflow:ellipsis; }
.arcade-sponsor a { color:#eaff7c;font-weight:850; }
.sponsor-panel { border-color:#4e807e;background:linear-gradient(130deg,#17313d,#152d34);padding:1rem 1.1rem 1.05rem; }
.sponsor-panel .kicker { color:#9ce7d7; }
.sponsor-panel h2 { margin:.45rem 0;font-size:1.06rem; }
.sponsor-panel p { color:var(--muted);font-size:.8rem;line-height:1.45; }
.sponsor-panel .btn { display:inline-flex;justify-content:center;text-decoration:none;margin-top:.4rem; }
@media(max-width:600px){.arcade-sponsor{justify-content:flex-start;gap:.4rem;font-size:.64rem}.arcade-sponsor span{font-size:.55rem}.arcade-sponsor a{font-size:.6rem}}
.pause-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(3,7,14,.88); backdrop-filter: blur(10px); }
.pause-overlay > div { width: min(420px, 100%); padding: 2rem; text-align: center; border: 1px solid var(--line); border-radius: 22px; background: #111b2e; }
.pause-overlay h2 { margin: .4rem 0; }.pause-overlay p { color: var(--muted); line-height: 1.5; }
.toast-region { position: fixed; z-index: 300; right: 1rem; bottom: 1rem; width: min(380px, calc(100% - 2rem)); display: grid; gap: .5rem; pointer-events: none; }
.toast { padding: .85rem 1rem; border-radius: 13px; border: 1px solid rgba(255,255,255,.12); color: #f6f8fb; background: #19263d; box-shadow: 0 12px 35px rgba(0,0,0,.35); animation: toast-in .25s ease-out; font-size: .8rem; }
.toast.success { border-color: rgba(88,223,151,.35); }.toast.error { border-color: rgba(255,101,119,.45); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 980px) {
  .game-grid { grid-template-columns: 1fr; }
  .action-column { position: static; grid-template-columns: 1fr 1fr; }
  .arcade-panel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-card { min-height: 96px; padding: .85rem; }
  .game-grid { gap: .7rem; }
  .action-column { grid-template-columns: 1fr; }
  .arcade-panel { grid-column: auto; }
  .topbar { padding-inline: .75rem; }
  .save-state { display: none; }
  .brand-lockup span { display: none; }
  .icon-btn { padding: .55rem .65rem; font-size: .72rem; }
  .product-card { grid-template-columns: auto 1fr; }
  .product-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-actions button { width: 100%; min-height: 44px; white-space: normal; }
  .mini-btn { min-height: 44px; }
  .book-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  main { padding-inline: .55rem; }
  .metric-strip { gap: .45rem; }
  .metric-card { border-radius: 14px; }
  .metric-card strong { font-size: 1.25rem; }
  .worldbar { align-items: flex-end; }
  .day-chip { flex-direction: column; gap: .1rem; border-radius: 12px; }
  .panel { border-radius: 16px; }
  .choice-grid, .choice-grid.three { grid-template-columns: 1fr; }
  .choice { min-height: 66px; }
  .choice-grid.two { grid-template-columns: 1fr 1fr; }
  .gig-grid { grid-template-columns: 1fr; }
  .gig-btn { min-height: 58px; grid-template-columns: auto 1fr auto; justify-items: start; gap: .5rem; padding-inline: .75rem; }
  .gig-btn span { margin: 0; }.gig-btn small { justify-self: end; }
  .book-grid { grid-template-columns: 1fr; }
  .growth-row { align-items: stretch; flex-direction: column; }
  .growth-row > button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Release 2: progressive helpers, guide, route map and mobile navigation. */
.activity-block { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.activity-block > .action-card { border: 0; border-radius: 0; background: transparent; }
.delegate-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .4rem; padding: .55rem .65rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
.delegate-row .mini-btn { min-height: 34px; }
.helper-progress { border-color: rgba(66,214,199,.35); background: rgba(66,214,199,.075); cursor: default; }
.helper-progress b { color: var(--cyan); animation: helper-pulse 1s ease-in-out infinite alternate; }
@keyframes helper-pulse { to { opacity: .35; } }

.guide-card > h3 { margin: .35rem 0 .45rem; font-size: clamp(1.35rem,4vw,2rem); }
.guide-card > p, .guide-tips p { color: var(--muted); line-height: 1.55; }
.win-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; counter-reset: win; }
.win-steps li { counter-increment: win; display: grid; grid-template-columns: auto 1fr; gap: .65rem; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.win-steps li::before { content: counter(win); display: grid; place-items: center; width: 34px; height: 34px; grid-row: 1 / 3; border-radius: 10px; background: var(--saffron); color: #181006; font-weight: 950; }
.win-steps b { font-size: .8rem; }.win-steps span { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.guide-tips { margin-top: 1rem; padding: 1rem; border-radius: 14px; background: rgba(66,214,199,.07); border: 1px solid rgba(66,214,199,.2); }
.map-book-stat { width: 100%; color: var(--text); text-align: left; cursor: pointer; }

.map-dialog { width: min(980px,calc(100% - 1rem)); max-height: min(92vh,920px); padding-bottom:1.25rem; }
.map-dialog > .dialog-head,.map-dialog > .city-map,.map-dialog > .map-route-detail { margin-inline:1.25rem; }
.map-dialog > .dialog-head { margin-top:1.1rem; }
.map-dialog > .city-map { margin-top:.4rem; }
.city-map { display: grid; gap: .75rem; }
.map-arcade-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.map-arcade-tabs button { min-height: 45px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.025); font-weight: 850; cursor: pointer; }
.map-arcade-tabs button[aria-selected="true"] { color: var(--text); border-color: rgba(255,176,0,.5); background: rgba(255,176,0,.09); }
.map-city-activity { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.map-city-chip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .7rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.map-city-chip > span { font-size: 1.25rem; }.map-city-chip strong,.map-city-chip small { display:block; }.map-city-chip small { color:var(--muted);font-size:.66rem; }
.map-city-chip i { width: 8px;height:8px;border-radius:50%;background:#64748b; }.map-city-chip.active i { background:var(--green);box-shadow:0 0 0 5px rgba(88,223,151,.08); }.map-city-chip.locked { opacity:.45; }
.route-grid { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:.55rem; padding:.35rem 0; }
.route-grid::before { content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;background:linear-gradient(90deg,var(--cyan),var(--saffron),var(--purple));opacity:.2; }
.route-node { position:relative;z-index:1;min-height:115px;display:grid;align-content:start;gap:.25rem;padding:.7rem;text-align:left;border:1px solid var(--line);border-radius:14px;color:var(--text);background:var(--ink-2);cursor:pointer; }
.route-node span { color:var(--saffron);font-size:.58rem;font-weight:950;letter-spacing:.11em; }.route-node strong { font-size:.74rem;line-height:1.25; }.route-node small { color:var(--muted);font-size:.6rem; }.route-node b { margin-top:auto;color:var(--cyan);font-size:.62rem; }
.route-node.complete { border-color:rgba(66,214,199,.35); }.route-node.selected { outline:2px solid var(--saffron);box-shadow:0 0 0 5px rgba(255,176,0,.08); }.route-node:disabled { cursor:not-allowed;opacity:.34; }
.map-route-detail { display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;margin-top:.85rem;padding:1rem;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025); }
.map-route-detail h3 { margin:.3rem 0;font-size:1.15rem; }.map-route-detail p,.map-route-detail small { color:var(--muted); }.map-alert { grid-column:1/-1;color:#ff9eaa;font-size:.72rem;font-weight:800; }
.route-feature { display:block;margin-top:.55rem;color:var(--cyan);font-size:.7rem;font-style:normal;font-weight:800; }

.mobile-dock { display:none; }

html[data-theme="light"] { color-scheme: light; --ink:#f4f7fb;--ink-2:#ffffff;--panel:rgba(255,255,255,.94);--panel-2:#ffffff;--line:rgba(31,50,78,.14);--muted:#607089;--text:#142033;--shadow:0 22px 60px rgba(31,50,78,.13); }
html[data-theme="light"] body { background:radial-gradient(circle at 10% 10%,rgba(66,214,199,.12),transparent 25rem),radial-gradient(circle at 90% 20%,rgba(255,176,0,.1),transparent 26rem),var(--ink); }
html[data-theme="light"] .start-card,html[data-theme="light"] .metric-card,html[data-theme="light"] .panel { background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(242,247,252,.96)); }
html[data-theme="light"] .start-copy,html[data-theme="light"] .btn-ghost,html[data-theme="light"] .game-dialog label:not(.choice),html[data-theme="light"] .empty-state strong { color:var(--text); }
html[data-theme="light"] .topbar { background:rgba(255,255,255,.9); }
html[data-theme="light"] .icon-btn,html[data-theme="light"] .city-tab,html[data-theme="light"] .action-card,html[data-theme="light"] .gig-btn,html[data-theme="light"] .choice,html[data-theme="light"] .book-stat,html[data-theme="light"] .leader-row { background:rgba(31,50,78,.04); }
html[data-theme="light"] .process-ribbon { background:#fff; }.process-ribbon span.done { color:var(--green); }
html[data-theme="light"] .stock-chip { color:#52647e;background:rgba(31,50,78,.06); }
html[data-theme="light"] .mini-btn { background:#eef3f8;color:#213149; }.mini-btn.primary { color:#784d00; }
html[data-theme="light"] .btn-secondary { background:#233653;color:#ffffff;border-color:#233653; }
html[data-theme="light"] .game-dialog { background:#fff;color:var(--text); }.game-dialog input { color:var(--text); }
html[data-theme="light"] .game-dialog input[type="text"],html[data-theme="light"] .game-dialog input[type="password"],html[data-theme="light"] .game-dialog input:not([type]) { background:#f7f9fc;color:var(--text); }
html[data-theme="light"] .game-dialog select { background:#f7f9fc;color:var(--text); }
html[data-theme="light"] .notice { color:#285e59; }.mobile-dock { color:var(--text); }

@media (max-width:720px) {
  .topbar-actions #map-btn,.topbar-actions #reward-btn,.topbar-actions #book-btn,.topbar-actions #pause-btn { display:none; }
  main { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
  .game-active .mobile-dock { position:fixed;z-index:45;left:.55rem;right:.55rem;bottom:max(.45rem,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);padding:.35rem;border:1px solid var(--line);border-radius:17px;background:rgba(8,13,25,.92);box-shadow:0 15px 45px rgba(0,0,0,.35);backdrop-filter:blur(18px); }
  .mobile-dock button { min-height:50px;display:grid;place-items:center;gap:.05rem;border:0;border-radius:12px;color:var(--muted);background:transparent;font-size:.59rem;font-weight:850; }
  .mobile-dock button span { color:var(--text);font-size:1rem; }
  .route-grid { grid-template-columns:repeat(2,1fr); }.map-city-activity { grid-template-columns:1fr; }.map-route-detail { grid-template-columns:1fr; }.map-route-detail .btn { width:100%; }.win-steps { grid-template-columns:1fr; }
  .toast-region { bottom:calc(5.2rem + env(safe-area-inset-bottom)); }
}
@media (max-width:480px) {
  .delegate-row { grid-template-columns:1fr 1fr; }.delegate-row > span { grid-column:1/-1; }.route-node { min-height:96px; }
  .process-ribbon { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.1rem;padding:.65rem .3rem;overflow:hidden; }
  .process-ribbon i { display:none; }.process-ribbon span { min-width:0;text-align:center;font-size:.56rem;letter-spacing:.025em; }
}
html[data-theme="light"] .mobile-dock { background:rgba(255,255,255,.94); }

/* Release 3 company brain: progressive mobile onboarding and blocking decisions. */
.onboarding-card { display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;margin-bottom:.8rem;padding:1rem 1.1rem;border:1px solid rgba(255,176,0,.34);border-radius:17px;background:linear-gradient(135deg,rgba(255,176,0,.13),rgba(66,214,199,.07));box-shadow:0 14px 35px rgba(0,0,0,.12); }
.onboarding-step { display:grid;gap:.18rem;min-width:0; }
.onboarding-step > span { color:var(--saffron);font-size:.64rem;font-weight:950;letter-spacing:.14em; }
.onboarding-step > strong { font-size:1rem; }
.onboarding-step > small { color:var(--muted);line-height:1.4; }
.onboarding-card.complete { border-color:rgba(88,223,151,.32);background:rgba(88,223,151,.07); }
.module-note { margin:.1rem .8rem .85rem;color:var(--muted);font-size:.66rem;line-height:1.45; }
.mode-choice { min-height:118px; }
.mode-choice small { line-height:1.4; }
.game-dialog input[type="number"] { min-height:48px;width:100%;border:1px solid var(--line);border-radius:12px;padding:.75rem;color:var(--text);background:#0a1221; }
.field-help { color:var(--muted);font-weight:500;line-height:1.4; }
.resume-dialog,.critical-dialog { width:min(480px,calc(100% - 1.25rem));padding:1.25rem; }
.resume-hero { text-align:center;padding:.35rem .2rem .9rem; }
.resume-hero h2,.critical-dialog h2 { margin:.4rem 0; }
.resume-hero p,.critical-dialog p { color:var(--muted);line-height:1.55; }
.resume-summary { display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin:.4rem 0 1rem; }
.resume-summary div { padding:.75rem;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025); }
.resume-summary span,.resume-summary strong { display:block; }
.resume-summary span { color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em; }
.resume-summary strong { margin-top:.25rem;font-size:.88rem; }
.critical-dialog { text-align:center; }
.critical-icon { display:grid;place-items:center;width:58px;height:58px;margin:0 auto .8rem;border-radius:18px;background:rgba(255,101,119,.13);color:var(--red);font-size:1.6rem;font-weight:950; }
.integrity-status { display:inline-flex;align-items:center;gap:.3rem;color:var(--green); }
.founder-mission-body { display:grid;gap:.65rem;padding:.35rem .75rem .9rem; }
.founder-mission-body label { color:var(--muted);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em; }
.founder-mission-body select { min-height:46px;width:100%;padding:.65rem .75rem;border:1px solid var(--line);border-radius:11px;color:var(--text);background:var(--ink-2);font:inherit; }
.founder-mission-body .module-note { margin:0; }
html[data-theme="light"] .founder-mission-body select { color:var(--text);background:#f7f9fc; }
html[data-theme="light"] .onboarding-card { background:linear-gradient(135deg,rgba(255,176,0,.13),rgba(66,214,199,.1)); }
html[data-theme="light"] .game-dialog input[type="number"] { background:#f7f9fc;color:var(--text); }

@media (max-width:720px) {
  .onboarding-card { position:relative;grid-template-columns:1fr;padding:.9rem;margin-bottom:.6rem; }
  .onboarding-card .btn { width:100%; }
  .founder-panel { order:2; }
  .action-column { order:1; }
  .marketplace-panel { order:3; }
  .game-grid { display:flex;flex-direction:column; }
  .action-panel { border-color:rgba(255,176,0,.26); }
  .action-card { min-height:58px; }
  .mini-btn { min-height:44px; }
  .game-dialog { max-height:calc(100dvh - 1rem); }
}
@media (max-width:480px) {
  .mode-choice-grid { grid-template-columns:1fr; }
  .resume-summary { grid-template-columns:1fr 1fr; }
  .hire-dialog .choice-grid.two { grid-template-columns:1fr; }
}
@media(max-width:480px){.topbar-actions{gap:.22rem}.topbar-actions .icon-btn{min-height:38px;padding:.4rem .45rem;font-size:.65rem}#book-btn,#reward-btn{display:none}.brand-lockup{min-width:0}.brand-lockup strong{font-size:.8rem}.topbar{gap:.3rem}}
@keyframes qcPausePulse{0%,100%{box-shadow:0 0 0 0 #f0525255;background:#8b2233}50%{box-shadow:0 0 0 8px #f0525200;background:#c53042}}#pause-btn[aria-pressed="true"]{color:#fff;border-color:#f77;background:#8b2233;animation:qcPausePulse 2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){#pause-btn[aria-pressed="true"]{animation:none}}

/* V4.2 clarity pass */
:root { --line:rgba(177,200,235,.31); --muted:#b3c2d7; }
html[data-theme="light"] { --line:rgba(28,50,83,.32); --muted:#4f617a; }
.map-dialog { border:2px solid rgba(255,176,0,.52); box-shadow:0 0 0 5px rgba(255,176,0,.08),0 30px 90px #0009; }
.map-city-chip, .route-node, .map-route-detail { border-width:2px; }
.route-node:disabled { opacity:.55; }
.map-city-chip.locked { opacity:.7; }
.advanced-ads-feature { border:2px solid var(--saffron); border-radius:16px; padding:.75rem; background:linear-gradient(115deg,rgba(255,176,0,.19),rgba(66,214,199,.06)); box-shadow:0 0 24px rgba(255,176,0,.15); }
.order-diagnosis { display:grid;gap:.3rem;padding:.8rem;border:1px solid var(--cyan);border-radius:12px;background:rgba(66,214,199,.1);color:var(--text);font-size:.8rem; }
.order-diagnosis span { color:var(--muted); }
.field-help.error, .notice.error { color:#ff9eaa; }
 :root { --border: var(--line); --bg: var(--ink-2); --accent: var(--cyan); }
/* 5.2: a small first company, with progressively revealed layers. */
[hidden] { display: none !important; }
.beginner .metric-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
.beginner .game-grid { grid-template-columns: minmax(0,1fr); max-width: 920px; margin-inline: auto; }
.beginner .action-column { display: none; }
.next-milestone { display:flex;align-items:center;gap:24px;padding:18px 22px;margin-bottom:16px;background:var(--panel);border:1px solid var(--border);border-radius:18px; }
.next-milestone strong,.next-milestone small {display:block;}
.next-milestone strong {font-size:1.12rem;margin:4px 0;}
.next-milestone small {color:var(--muted);}
.next-milestone progress {width:32%;height:12px;flex-shrink:0;}
progress {accent-color:var(--accent);border:0;border-radius:20px;overflow:hidden;}
.discovery-notice {display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;border:1px solid var(--accent);border-radius:14px;margin-bottom:16px;background:var(--panel);}
.discovery-notice small {display:block;margin-top:6px;line-height:1.5;color:var(--muted);}
.discovery-notice button {flex-shrink:0;}
.health-grid,.report-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px;}
.health-grid>span,.report-grid>span {background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:.76rem;color:var(--muted);}
.health-grid b,.report-grid b {display:block;color:var(--text);margin-top:4px;font-size:.83rem;}
.flow-strip {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--border);padding:12px 0;gap:4px;}
.flow-strip span {text-align:center;font-weight:800;color:var(--accent);}
.flow-strip small {display:block;font-size:.62rem;font-weight:500;color:var(--muted);margin-top:4px;}
.trip-line {font-size:.78rem;display:flex;justify-content:space-between;gap:12px;padding:10px 0;line-height:1.5;}
.trip-line b {text-align:right;font-weight:500;color:var(--muted);}
.engagement-panel progress {width:100%;height:6px;}
.streak-row {padding:14px 0;font-size:.87rem;}
.streak-row span {display:block;color:var(--muted);font-size:.76rem;margin-top:5px;}
.journey-detail {border-top:1px solid var(--border);padding:12px 0;}
.journey-detail summary {cursor:pointer;font-weight:650;font-size:.85rem;}
.goal-row {display:grid;grid-template-columns:1fr auto;gap:8px;font-size:.8rem;margin-top:14px;}
.goal-row progress {grid-column:1/-1;}
.goal-row small {color:var(--muted);}
.trend-card,.contract-card {border:1px solid var(--border);border-radius:12px;padding:12px;margin:10px 0;font-size:.82rem;background:var(--bg);}
.contract-card strong,.contract-card small {display:block;margin-top:8px;}
.contract-card small,.trend-card small {color:var(--muted);line-height:1.5;}
.founder-feed {font-size:.8rem;line-height:1.6;}
.founder-feed p {border-bottom:1px solid var(--border);padding:8px 0;margin:0;}
.founder-feed small {color:var(--muted);}
.trophy-list {display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem;margin-top:12px;}
.trophy-list span {border:1px solid var(--border);border-radius:8px;padding:8px;}
.game-grid,.product-main,.growth-row>span,.health-grid>span {min-width:0;}
.growth-row small,.product-main strong,.trip-line {overflow-wrap:anywhere;}
@media(max-width:700px) {
 .next-milestone {display:block;padding:16px;}
 .next-milestone progress {width:100%;margin-top:12px;}
 .discovery-notice {align-items:flex-start;padding:12px;}
 .flow-strip small {font-size:.56rem;}
 .trip-line {flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){progress,.stock-chip,.order-dot{transition:none;animation:none;}}

.mobile-dock.three-items {grid-template-columns:repeat(3,1fr);}
@media(min-width:900px){.operations-column .health-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.operations-column .goal-row{max-width:620px;}}

.gig-grid {grid-template-columns:1fr;}


.earth404-back{position:fixed;top:12px;left:14px;z-index:10050;text-decoration:none;font:800 11px/1 system-ui,sans-serif;letter-spacing:.14em;color:#eaf7ff;background:rgba(5,12,22,.74);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);padding:10px 11px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.earth404-back span{color:#74f0c7}.start-screen .earth404-back{display:block}
@media(max-width:640px){.earth404-back{top:8px;left:8px;padding:8px 9px;font-size:9px}}

/* v0.6 polish */
.marketplace-panel .panel-heading,
.engagement-panel .panel-heading{padding:1.2rem 1.35rem .95rem}
.marketplace-panel .panel-heading h2,
.engagement-panel .panel-heading h2{margin-top:.35rem}
.order-board{padding:.6rem 1rem 1.05rem;gap:.72rem}
.order-row{padding:.95rem 1rem;border-radius:15px}
.order-row small{line-height:1.45}
.health-grid{gap:10px;margin:0 1rem 12px}
.health-grid>span{background:rgba(255,255,255,.03);border:1px solid rgba(31,50,78,.12);padding:12px}
.flow-strip{margin:0 1rem 12px;padding:10px 12px;gap:6px;border:1px solid rgba(31,50,78,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.flow-strip span{color:var(--text);font-weight:800}
.flow-strip small{color:var(--muted)}
.trip-line{padding:10px 1rem}
.engagement-panel .microcopy,
.engagement-panel .streak-row,
.engagement-panel .journey-detail,
.engagement-panel .trend-card,
.engagement-panel .contract-card{margin-left:1rem;margin-right:1rem}
.count-pill,.status-pill{background:rgba(31,50,78,.08);color:var(--text);border:1px solid rgba(31,50,78,.12)}

/* v0.8 layout and monetisation polish */
.game-active .earth404-back{position:static;display:inline-flex;align-items:center;justify-content:center;flex:none;text-decoration:none;font:800 11px/1 system-ui,sans-serif;letter-spacing:.14em;color:#eaf7ff;background:#0b1724;border:1px solid rgba(31,50,78,.18);padding:11px 13px;border-radius:999px;box-shadow:none;backdrop-filter:none}
.game-active .earth404-back span{color:#35cda9}
.game-active .topbar{gap:.8rem}
.game-active .brand-lockup{margin-right:auto;min-width:0}
.start-screen>.earth404-back{position:fixed}
#engagement-content{padding:0 1.25rem 1.15rem}
#engagement-content .health-grid,#engagement-content .flow-strip{margin-left:0;margin-right:0}
#engagement-content .microcopy,#engagement-content .streak-row,#engagement-content .journey-detail,#engagement-content .trend-card,#engagement-content .contract-card{margin-left:0;margin-right:0}
.campaign-status-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(66,214,199,.055);font-size:.8rem}
.campaign-status-row b{font-weight:700;text-align:right;color:var(--muted)}
.queue-note{padding:8px 0;margin-top:4px!important;margin-bottom:4px!important}
.profit-card{cursor:pointer}.profit-card:hover{border-color:rgba(66,214,199,.45)}
.profit-explanation{display:grid;gap:12px}.profit-formula{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(66,214,199,.07)}.profit-formula strong{display:block;font-size:1.7rem}.profit-formula span{display:block;color:var(--muted);margin-top:5px}.profit-explanation ol{margin:0;padding-left:1.25rem;display:grid;gap:10px;line-height:1.55;color:var(--muted)}.profit-explanation li b{color:var(--text)}.profit-explanation p{color:var(--muted);line-height:1.5}
.vip-ad-slot{margin:0 1rem 1rem;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ink-2)}
.vip-ad-slot>a{display:block;color:inherit;text-decoration:none}.vip-ad-label{padding:10px 12px;font-size:.68rem;font-weight:900;letter-spacing:.1em;color:var(--saffron);border-bottom:1px solid var(--line)}.vip-ad-slot img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#e9eef4}.vip-ad-copy{display:grid;gap:4px;padding:12px}.vip-ad-copy b{font-size:.88rem}.vip-ad-copy small{color:var(--muted);line-height:1.45}
.gigs-panel .gig-grid{padding:0 1rem .5rem}.gigs-panel .module-note{margin:.35rem 1rem 1rem;line-height:1.55}
@media(max-width:760px){.game-active .topbar{flex-wrap:wrap}.game-active .earth404-back{order:1}.game-active .brand-lockup{order:2;flex:1}.game-active .topbar-actions{order:3;width:100%;justify-content:flex-end}.campaign-status-row{align-items:flex-start;flex-direction:column}.campaign-status-row b{text-align:left}}

/* v0.8.1 topbar identity + spacing hardening */
.game-active .topbar{display:flex;align-items:center;gap:1rem;min-height:76px;padding:.8rem clamp(1rem,3vw,2.2rem)}
.topbar-identity{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1}
.game-active .earth404-back{position:static!important;display:inline-flex;align-items:center;gap:.22rem;flex:none;min-height:38px;padding:0 .72rem;border-radius:999px;background:#0c1824;border:1px solid rgba(31,50,78,.18);box-shadow:none!important;backdrop-filter:none!important;font:800 10px/1 system-ui,sans-serif;letter-spacing:.13em;color:#eaf7ff;z-index:auto}
.game-active .earth404-back b{font:inherit;color:#eaf7ff}.game-active .earth404-back span:not(.earth-dot){color:#35cda9}.game-active .earth404-back .earth-dot{width:7px;height:7px;border-radius:50%;background:#8af5d7;box-shadow:0 0 10px rgba(138,245,215,.55)}
.topbar-separator{width:1px;height:34px;background:var(--line);flex:none}
.game-active .brand-lockup{margin:0;min-width:0;flex:1}.game-active .brand-lockup strong{font-size:.98rem}.game-active .brand-lockup span{display:block!important}
.game-active .topbar-actions{flex:none}

/* Keep all expanded dashboard content off panel borders. */
.engagement-panel>.panel-heading,.marketplace-panel>.panel-heading,.action-panel>.panel-heading,.growth-panel>.panel-heading,.arcade-panel>.panel-heading,.founder-missions-panel>.panel-heading{padding-left:1.35rem;padding-right:1.35rem}
#engagement-content{padding:0 1.35rem 1.3rem}
#engagement-content>*{max-width:100%}
#engagement-content .health-grid{gap:.65rem;margin:0 0 .75rem}
#engagement-content .health-grid>span{padding:.85rem .9rem}
#engagement-content .flow-strip{margin:.15rem 0 .75rem;padding:.85rem .65rem;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}
#engagement-content .flow-strip span{color:var(--text)}
#engagement-content .campaign-status-row{margin:.7rem 0 0;padding:.85rem .95rem}
#engagement-content .queue-note{margin:.65rem 0!important;padding:0!important}
.marketplace-panel .order-board{padding:.55rem 1.15rem 1.2rem}
.marketplace-panel .order-diagnosis{margin:.15rem 0 .45rem}
.marketplace-panel .order-row{padding:.9rem 1rem}
.growth-panel .growth-actions{padding:.5rem 1.15rem 1.2rem}
.growth-panel .growth-row{padding:.8rem .9rem}
.arcade-panel .gig-grid{padding:0 1.15rem .65rem}
.arcade-panel .module-note{margin:.45rem 1.15rem 1.15rem}
.founder-missions-panel .founder-mission-body{padding:.45rem 1.15rem 1.2rem}

/* calmer KPI cards after unlocks */
html[data-theme="light"] .health-grid>span,html[data-theme="light"] .flow-strip,html[data-theme="light"] .campaign-status-row{background:#fbfdff;border-color:#d7e0e8}
html[data-theme="light"] .campaign-status-row{background:#f7fbfb}

@media(max-width:760px){
 .game-active .topbar{flex-wrap:nowrap!important;gap:.5rem;padding:.65rem .7rem}.topbar-identity{gap:.45rem}.topbar-separator{display:none}.game-active .earth404-back{padding:0 .55rem;font-size:8px;min-height:34px}.game-active .brand-lockup span{display:none!important}.game-active .brand-lockup strong{font-size:.82rem}.game-active .topbar-actions{gap:.25rem}.game-active .topbar-actions .icon-btn{min-height:38px;padding:.42rem .5rem;font-size:.66rem}
 #engagement-content{padding:0 .9rem 1rem}.marketplace-panel .order-board,.growth-panel .growth-actions{padding-left:.85rem;padding-right:.85rem}
}
.campaign-status-row{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;row-gap:5px}
.campaign-status-row>b{text-align:right}
.campaign-status-row>small{grid-column:1/-1;color:var(--muted);font-size:.7rem;line-height:1.45}
@media(max-width:760px){.campaign-status-row{grid-template-columns:1fr}.campaign-status-row>b{text-align:left}.campaign-status-row>small{grid-column:1}}
.profit-breakdown{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02)}
.profit-breakdown>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:.7rem .85rem;border-top:1px solid var(--line);font-size:.78rem}.profit-breakdown>div:first-child{border-top:0}.profit-breakdown span{color:var(--muted)}.profit-breakdown b{white-space:nowrap;color:var(--text)}.profit-breakdown .profit-total{background:rgba(66,214,199,.08);font-size:.84rem}.profit-breakdown .profit-total span,.profit-breakdown .profit-total b{color:var(--text)}

/* v1.4.5 presentation: v1.4.1 gameplay with the 4K Seren Mart dashboard scenery. */
#onboarding-card{display:none!important}
.start-screen{background-image:linear-gradient(180deg,rgba(4,10,18,.16),rgba(4,10,18,.56)),url("worlds/hd/seren-mart-4k.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
.start-screen::before{opacity:.04}
.seren-hero{position:relative;isolation:isolate;height:clamp(250px,28vw,380px);margin:.2rem 0 1rem;border-radius:24px;overflow:hidden;border:1px solid var(--border);background:#dbe7ed url("worlds/hd/seren-mart-4k.webp") center 55%/cover no-repeat;box-shadow:0 18px 48px rgba(31,48,65,.16)}
.seren-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(5,14,22,.04) 30%,rgba(5,14,22,.64) 100%),linear-gradient(90deg,rgba(4,15,23,.28),transparent 44%);pointer-events:none}
.seren-hero-label{position:absolute;z-index:2;left:1rem;top:1rem;display:grid;gap:.22rem;padding:.72rem .82rem;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(5,17,26,.62);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 9px 24px rgba(0,0,0,.16)}
.seren-hero-label span{color:#ffd269;font-size:.67rem;font-weight:900;letter-spacing:.15em}.seren-hero-label strong{font-size:.95rem}
.seren-worldbar{position:absolute;z-index:2;left:1rem;right:1rem;bottom:.85rem;margin:0;align-items:flex-end}.seren-worldbar .city-tabs{padding:0}.seren-worldbar .city-tab{background:rgba(4,18,29,.72);border-color:rgba(255,255,255,.22);color:#eaf2f7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.seren-worldbar .city-tab[aria-selected="true"]{background:rgba(5,91,83,.78);border-color:rgba(89,231,210,.7);color:#fff}.seren-worldbar .day-chip{background:rgba(255,255,255,.94);color:#0d1c29;border-color:rgba(255,255,255,.6);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.metric-strip{margin-top:0}.game-grid{align-items:start}.action-column{position:sticky;top:5.8rem;align-self:start}.action-panel{border-color:rgba(255,176,0,.26);box-shadow:0 16px 42px rgba(34,51,68,.13)}
.founder-focus{display:grid;grid-template-columns:1fr auto;gap:.32rem .8rem;align-items:center;margin:.1rem .15rem .8rem;padding:.85rem .9rem;border:1px solid rgba(255,176,0,.36);border-radius:14px;background:linear-gradient(135deg,rgba(255,176,0,.10),rgba(66,214,199,.08))}
.founder-focus>span{grid-column:1;color:#d99200;font-size:.64rem;font-weight:900;letter-spacing:.14em}.founder-focus>strong{grid-column:1;font-size:.95rem;line-height:1.25}.founder-focus>small{grid-column:1;color:var(--muted);line-height:1.35}.founder-focus-action{grid-column:2;grid-row:1/4;min-width:132px;align-self:center}
html[data-theme="dark"] .seren-hero{border-color:rgba(255,255,255,.12)}html[data-theme="dark"] .founder-focus{background:linear-gradient(135deg,rgba(255,176,0,.14),rgba(66,214,199,.1))}
@media(max-width:980px){.action-column{position:static}.seren-hero{height:280px}.seren-worldbar{left:.65rem;right:.65rem}.founder-focus{grid-template-columns:1fr}.founder-focus-action{grid-column:1;grid-row:auto;width:100%}}
@media(max-width:620px){.seren-hero{height:220px;border-radius:18px}.seren-hero-label{left:.65rem;top:.65rem;max-width:78%;padding:.58rem .64rem}.seren-hero-label strong{font-size:.78rem}.seren-hero-label span{font-size:.56rem}.seren-worldbar{bottom:.55rem;gap:.4rem}.seren-worldbar .city-tab{min-height:36px;padding:.42rem .55rem;font-size:.64rem}.seren-worldbar .day-chip{font-size:.62rem;padding:.42rem .55rem}.founder-focus{margin:.05rem 0 .65rem;padding:.75rem}.founder-focus-action{min-width:0}}
/* Keep What Needs You visible from the first minute. */
.beginner .game-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,.72fr);max-width:none;margin-inline:0}
.beginner .action-column{display:grid}
@media(max-width:980px){.beginner .game-grid{grid-template-columns:1fr}.beginner .action-column{display:grid}}

/* v1.4.5: preserve v1.4.1 gameplay and make the action path explicit. */
.beginner .game-grid{grid-template-columns:minmax(0,1.6fr) minmax(320px,.72fr);max-width:none;margin-inline:0}
.beginner .action-column{display:grid!important}
.beginner .action-panel{display:block!important}
.action-job-cta{display:inline-flex;align-items:center;margin-top:.48rem;padding:.28rem .5rem;border-radius:999px;background:rgba(255,176,0,.14);border:1px solid rgba(255,176,0,.42);color:#c27a00;font-size:.67rem;font-style:normal;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="dark"] .action-job-cta{color:#ffd26a;background:rgba(255,176,0,.16)}
@media(max-width:980px){.beginner .game-grid{grid-template-columns:1fr}.beginner .action-column{display:grid!important;position:static}}

/* v1.5.0: keep dashboard sponsor spacing even and readable in both themes. */
.sponsor-panel>*:first-child{margin-top:0}.sponsor-panel>*:last-child{margin-bottom:0}

/* v1.5.0 How-to-win progression + public competition */
.unlock-roadmap{margin-top:1rem;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025)}
.roadmap-head{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;background:rgba(255,176,0,.08)}
.roadmap-head small{color:var(--muted)}
.roadmap-row{display:grid;grid-template-columns:74px 1fr;gap:.8rem;align-items:start;padding:.78rem 1rem;border-top:1px solid var(--line)}
.roadmap-row>span{font-weight:900;color:var(--saffron);letter-spacing:.04em}
.roadmap-row strong{display:block;font-size:.83rem}.roadmap-row small{display:block;color:var(--muted);line-height:1.45;margin-top:.12rem}
.leaderboard-list{display:grid;gap:.5rem;margin-top:.9rem}
.leaderboard-row{display:grid;grid-template-columns:48px 1fr auto;gap:.8rem;align-items:center;padding:.78rem .9rem;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03)}
.leaderboard-row>span{font-weight:950;color:var(--muted)}.leaderboard-row strong{display:block}.leaderboard-row small{display:block;color:var(--muted);margin-top:.12rem}.leaderboard-row>b{color:var(--saffron)}
.leaderboard-row.podium{border-color:rgba(255,176,0,.32);background:rgba(255,176,0,.06)}
@media(max-width:600px){.roadmap-head{display:grid}.roadmap-row{grid-template-columns:60px 1fr}.leaderboard-row{grid-template-columns:40px 1fr}.leaderboard-row>b{grid-column:2}}

/* v2.0 finance, ownership and rewards */
.finance-content{display:grid;gap:.8rem}.finance-card{border:1px solid var(--line);border-radius:14px;padding:.85rem;background:rgba(255,255,255,.025);display:grid;gap:.55rem}.finance-card h3{margin:0;font-size:.98rem}.finance-card p,.finance-card small{margin:0;color:var(--muted);line-height:1.45}.finance-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.finance-numbers div{padding:.55rem;border-radius:10px;background:rgba(255,255,255,.035)}.finance-numbers span{display:block;color:var(--muted);font-size:.72rem}.finance-numbers b{display:block;margin-top:.15rem}.finance-actions{display:flex;flex-wrap:wrap;gap:.45rem}.finance-actions button{flex:1 1 90px}.reward-grid-v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}.reward-card-v2{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:rgba(255,255,255,.025);display:grid}.reward-media-v2{aspect-ratio:16/9;background:rgba(255,255,255,.05);display:grid;place-items:center;overflow:hidden}.reward-media-v2 img{width:100%;height:100%;object-fit:cover}.reward-body-v2{padding:.85rem;display:grid;gap:.55rem}.reward-body-v2 h3,.reward-body-v2 p{margin:0}.reward-body-v2 p,.reward-body-v2 small{color:var(--muted);line-height:1.45}.reward-card-v2.selected{border-color:rgba(255,176,0,.55);background:rgba(255,176,0,.06)}.reward-meta-v2{display:flex;gap:.4rem;flex-wrap:wrap}.reward-meta-v2 span{font-size:.68rem;border:1px solid var(--line);padding:.25rem .42rem;border-radius:999px}.ownership-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.ownership-bar i{display:block;height:100%;background:var(--saffron)}@media(max-width:600px){.finance-numbers{grid-template-columns:1fr}}

.reward-carousel-v2{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}.reward-carousel-v2 img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}.reward-carousel-v2::-webkit-scrollbar{height:5px}

/* final v2 reward media */
.reward-video-v2{width:100%;border-radius:12px;overflow:hidden;background:#000}.reward-video-v2 iframe,.reward-video-v2 video{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}.reward-media-hint{font-size:.68rem;color:var(--muted)}

/* v2.2.1 mobile command deck -------------------------------------------------
   Desktop keeps the full two-column company board. On phones, the founder sees
   one important operating area at a time: Founder → Needs You → Orders → Growth
   → Arcade. Finance lives inside How to Win so the dashboard stays focused. This keeps high-value actions one tap away without long
   vertical dashboard scrolling. */
.mobile-section-tabs{display:none}
@media(max-width:720px){
  .seren-hero{height:190px}
  .mobile-section-tabs{
    position:sticky;top:76px;z-index:29;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;
    margin:0 0 .7rem;padding:.42rem;
    border:1px solid var(--line);border-radius:16px;
    background:rgba(8,13,25,.94);backdrop-filter:blur(18px);
    box-shadow:0 12px 34px rgba(0,0,0,.2)
  }
  .mobile-section-tabs[hidden]{display:none!important}
  .mobile-section-tabs button{
    position:relative;min-width:0;min-height:48px;padding:.38rem .28rem;
    display:grid;grid-template-columns:auto 1fr;align-items:center;justify-content:center;gap:.35rem;
    border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted);
    font-size:.67rem;font-weight:900;cursor:pointer
  }
  .mobile-section-tabs button span{font-size:.95rem}
  .mobile-section-tabs button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-section-tabs button[aria-selected="true"]{
    color:var(--text);border-color:rgba(255,176,0,.42);background:rgba(255,176,0,.1)
  }
  .mobile-section-tabs button i{
    position:absolute;right:5px;top:4px;min-width:17px;height:17px;padding:0 4px;
    display:grid;place-items:center;border-radius:999px;background:var(--red);color:#fff;
    font-size:.56rem;font-style:normal;font-weight:950
  }
  .game-grid{display:flex;flex-direction:column;gap:.65rem}
  .operations-column,.action-column{display:contents}
  [data-mobile-section].mobile-section-off{display:none!important}
  [data-mobile-section]{scroll-margin-top:174px}
  .founder-panel,.action-panel,.marketplace-panel,.engagement-panel,.growth-panel,.finance-panel,.arcade-panel,.founder-missions-panel,.sponsor-panel{width:100%}
}
html[data-theme="light"] .mobile-section-tabs{background:rgba(255,255,255,.96)}

.mobile-sync-state{display:none;font-size:.58rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.mobile-sync-state[data-mode="saving"]{color:var(--saffron)}.mobile-sync-state[data-mode="error"]{color:var(--red)}
@media(max-width:720px){.mobile-sync-state{display:inline}.day-chip{gap:.38rem;flex-wrap:wrap}.day-chip .mobile-sync-state{flex-basis:100%}}

/* v3.1 protected-action validation: shown only for finance/ownership/reward/finale actions. */
.validation-dialog{width:min(470px,calc(100% - 1.25rem));padding:1.4rem;text-align:center}
.validation-dialog::backdrop{background:rgba(7,17,33,.34);backdrop-filter:blur(2px)}
.validation-dialog h2{margin:.45rem 0 .5rem}.validation-dialog p{margin:.35rem 0;color:var(--muted);line-height:1.55}.validation-dialog small{display:block;margin-top:.8rem;color:var(--muted);line-height:1.45}
.validation-spinner{width:38px;height:38px;border:4px solid color-mix(in srgb,var(--saffron) 22%,transparent);border-top-color:var(--saffron);border-radius:50%;margin:0 auto .75rem;animation:qc-validation-spin .8s linear infinite}
@keyframes qc-validation-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.validation-spinner{animation-duration:1.8s}}


.guide-finance{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.guide-finance-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.75rem}.guide-finance-head h3{margin:0}.guide-finance-head span{font-size:.68rem;color:var(--muted);font-weight:850}
@media(max-width:600px){.map-dialog > .dialog-head,.map-dialog > .city-map,.map-dialog > .map-route-detail{margin-inline:.75rem}.map-dialog{width:min(100% - .5rem,980px)}}

.boot-status{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:32px;margin:0 0 .8rem;color:var(--muted);font-size:.82rem}
.boot-status[hidden]{display:none}
.boot-spinner{width:16px;height:16px;border:2px solid color-mix(in srgb,var(--saffron) 30%,transparent);border-top-color:var(--saffron);border-radius:50%;animation:qc-validation-spin .8s linear infinite}
.dialog-status{margin:.75rem 0 0;text-align:center;color:var(--muted);font-size:.82rem}
.btn.is-loading{cursor:wait;opacity:.8}
@media(max-width:700px){.game-dialog{max-width:calc(100vw - 16px)}.arcade-frame-wrap{width:100vw;max-width:100vw}.arcade-chrome{padding-left:max(.65rem,env(safe-area-inset-left));padding-right:max(.65rem,env(safe-area-inset-right))}}

/* v3.1.2 compact arcade chrome: keep more playable height on phones in landscape. */
@media(max-height:520px){
  .arcade-chrome{min-height:48px;padding-top:.35rem;padding-bottom:.35rem}
  .arcade-chrome .icon-btn{min-height:42px}
}

/* v3.1.3 mobile payload: phones use a right-sized Seren Mart scene instead of decoding the 3840px source. */
@media(max-width:720px){
  .start-screen{background-image:linear-gradient(180deg,rgba(4,10,18,.16),rgba(4,10,18,.56)),url("worlds/hd/seren-mart-mobile.webp")}
  .seren-hero{background-image:url("worlds/hd/seren-mart-mobile.webp")}
}