/* Hallmark · macrostructure: Map / Diagram · tone: playful · theme: Hum · anchor hue: pear
 * Nav: N9 edge-aligned · footer: Ft2 inline · enrichment: original SVG factory
 * Audience: casual mobile players · use: short factory sessions
 * Pre-emit critique: Philosophy 4 · Hierarchy 4 · Execution 4 · Specificity 5 · Restraint 4 · Variety 4 */
@import url('/tokens.css');
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font: 15px/1.5 var(--font-body); }
button, a { -webkit-tap-highlight-color: var(--color-clear); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; min-height: 44px; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
button:disabled { cursor: not-allowed; }
button:active:not(:disabled) { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.shell { max-width: 1216px; padding: 0 20px; margin: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--color-rule); gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; color: var(--color-ink); text-decoration: none; letter-spacing: -0.7px; }
.brand small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.5px; color: var(--color-muted); }
.brand-mark { display: flex; position: relative; align-items: flex-start; justify-content: center; background: var(--color-accent); width: 44px; height: 44px; border-radius: 14px 14px 20px 20px; padding-top: 2px; font-size: 21px; letter-spacing: -2px; }
.brand-mark > span { position: absolute; bottom: 0; font-size: 25px; line-height: 22px; }
.help-button { width: 44px; border: 1px solid var(--color-rule); border-radius: 50%; background: var(--color-clear); font-size: 20px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 0 28px; }
.eyebrow { font-size: 9px; letter-spacing: 1.5px; font-weight: 700; color: var(--color-muted); margin-bottom: 12px; }
h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -1.6px; font-weight: 750; }
.wallet { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.coin { display: grid; place-items: center; background: var(--color-accent); border: 3px solid var(--color-accent-hover); color: var(--color-accent-ink); width: 36px; height: 36px; border-radius: 50%; font-size: 13px; }
.wallet strong { display: block; font-size: 29px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.wallet small { color: var(--color-muted); font-size: 11px; }
.game-layout { display: grid; gap: 24px; }
.world { min-width: 0; border-radius: var(--radius-lg); background: var(--color-sky); overflow: clip; }
.world-visual { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.world-heading { padding: 22px 24px 0; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.world-heading > div { display: flex; align-items: center; gap: 8px; }
.world-heading h2 { font-size: 15px; }
.world-heading > span { font-size: 11px; background: var(--color-cream); padding: 5px 10px; border-radius: 30px; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; background: var(--color-green); border-radius: 50%; }
.factory-scene { padding: 0 8px; }
.factory-scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.window-line { stroke: var(--color-wall-side); stroke-width: 2; }
.door-line { stroke: var(--color-wall-side); stroke-width: 2; fill: none; }
.factory-wordmark { font: 700 16px var(--font-display); fill: var(--color-ink); letter-spacing: -0.7px; }
.truck-mark { font: 800 20px var(--font-display); fill: var(--color-ink); }
.town-sign { font: 600 10px var(--font-body); fill: var(--color-ink); }
.steam { opacity: 0; }
.running .steam { animation: steam 2s var(--ease-out) infinite; }
.running .packages { animation: conveyor 1.4s var(--ease-in-out) infinite; }
.extra-tank { opacity: 0; }
.expanded .extra-tank { opacity: 1; }
.packed { --color-package: var(--color-orange); }
.fleet { --color-truck: var(--color-leaf-light); --color-truck-light: var(--color-wall); }
.delivering .truck { animation: drive 1.8s var(--ease-in-out); }
@keyframes steam { from { opacity: 0; transform: translateY(10px); } 40% { opacity: 0.8; } to { opacity: 0; transform: translateY(-20px); } }
@keyframes conveyor { from { transform: translate(-12px, -4px); } to { transform: translate(12px, 4px); } }
@keyframes drive { 0%,100% { transform: translate(0, 0); opacity: 1; } 45% { transform: translate(150px, 48px); opacity: 0; } 55% { transform: translate(-70px, -22px); opacity: 0; } }
.scene-caption { padding: 12px 24px 24px; display: flex; gap: 12px; justify-content: space-between; font-size: 11px; color: var(--color-muted); }
.scene-coordinate { font-size: 9px; letter-spacing: 1px; white-space: nowrap; }
.mission { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: var(--color-green); color: var(--color-cream); }
.mission-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--color-leaf-light); border-radius: 50%; color: var(--color-accent); font-size: 25px; }
.mission-content { flex: 1; min-width: 0; }
.mission-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mission-heading h3 { font-size: 16px; }
.mission-heading > span { font-size: 13px; color: var(--color-accent); }
.mission p { font-size: 12px; margin-top: 4px; }
.progress-track { margin: 16px 0 8px; height: 7px; border-radius: 8px; background: var(--color-roof-edge); overflow: clip; }
.progress-track > span { display: block; height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }
.mission-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }
.controls { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.section-heading h2 { font-size: 21px; letter-spacing: -0.6px; }
.section-heading > span { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.section-intro { font-size: 13px; color: var(--color-muted); margin-top: 6px; }
.recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.recipe { display: flex; flex-direction: column; align-items: center; position: relative; padding: 15px 8px 12px; border: 1px solid var(--color-rule); background: var(--color-paper); border-radius: var(--radius-md); }
.recipe.selected { border-color: var(--color-green); background: var(--color-mint); }
.recipe.selected::after { content: '✓'; position: absolute; right: 8px; top: 6px; color: var(--color-green); font-size: 12px; font-weight: 800; }
.recipe:disabled { opacity: 0.7; }
.recipe strong { font-size: 15px; margin-top: 6px; }
.recipe small { font-size: 9px; color: var(--color-muted); }
.bowl { display: block; position: relative; width: 65px; height: 42px; margin: 10px 0 6px; border-radius: 4px 4px 30px 30px; background: var(--color-accent); box-shadow: inset -7px -5px var(--color-accent-hover); }
.bowl::before { content: ''; position: absolute; top: -6px; left: 0; width: 65px; height: 16px; border: 3px solid var(--color-cream); border-radius: 50%; background: var(--color-apron); }
.bowl::after { content: ''; position: absolute; top: 4px; right: 8px; width: 5px; height: 4px; border-radius: 50%; background: var(--color-leaf); box-shadow: -16px -5px var(--color-leaf), -28px 0 var(--color-cream); }
.bowl i { display: block; position: absolute; z-index: 1; width: 5px; height: 32px; top: -27px; right: 2px; transform: rotate(25deg); border-radius: 5px; background: var(--color-bark); }
.bowl-soup { background: var(--color-wall); box-shadow: inset -7px -5px var(--color-wall-side); }
.bowl-soup::before { background: var(--color-orange); }
.shift-details { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--color-muted); margin-bottom: 12px; }
.shift-details strong { color: var(--color-ink); }
.primary-button { position: relative; overflow: clip; width: 100%; border-radius: 12px; background: var(--color-accent); color: var(--color-accent-ink); min-height: 54px; font-weight: 700; text-align: left; padding: 0 20px; }
.button-content { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
.button-content > span:last-child { font-size: 24px; }
#shift-fill { position: absolute; inset: 0; background: var(--color-accent-hover); transform-origin: left; transform: scaleX(0); }
.feedback { font-size: 11px; color: var(--color-muted); min-height: 49px; padding: 10px 0; }
.warehouse { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--color-rule); padding: 20px 0 14px; }
.warehouse-label { display: block; color: var(--color-muted); font-size: 12px; }
.warehouse strong { display: block; font-size: 28px; line-height: 1.3; }
.warehouse strong small { font-size: 13px; font-weight: 500; }
.warehouse p { font-size: 10px; color: var(--color-muted); margin-top: 4px; }
.crate { display: block; position: relative; width: 40px; height: 36px; background: var(--color-accent); border: 2px solid var(--color-bark); transform: rotate(-6deg); border-radius: 3px; }
.crate::before, .crate::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; top: 9px; background: var(--color-bark); }
.crate::after { top: 21px; }
.crate i { display: block; width: 2px; height: 32px; background: var(--color-bark); margin: auto; }
.delivery-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0 16px; background: var(--color-green); color: var(--color-cream); border-radius: 10px; font-size: 13px; min-height: 48px; }
.delivery-button > span:last-child { font-size: 11px; }
.delivery-button:disabled { background: var(--color-paper); color: var(--color-muted); }
.delivery-hint { font-size: 10px; text-align: center; margin-top: 9px; color: var(--color-muted); }
.upgrades { padding: 8px 0; min-width: 0; }
.upgrades .section-heading p { font-size: 12px; color: var(--color-muted); margin-top: 6px; }
.upgrade-list { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 20px; gap: 16px; }
.upgrade { border: 1px solid var(--color-rule); padding: 18px 20px 12px; border-radius: var(--radius-md); background: var(--color-surface); }
.upgrade-top { display: flex; align-items: center; justify-content: space-between; }
.upgrade-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--color-orange-light); display: grid; place-items: center; font-size: 24px; }
.upgrade[data-kind="packing"] .upgrade-icon { background: var(--color-mint); }
.upgrade[data-kind="delivery"] .upgrade-icon { background: var(--color-sky); }
.level { font-size: 11px; color: var(--color-muted); }
.upgrade h3 { font-size: 17px; margin-top: 12px; }
.upgrade p { font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.upgrade-bottom { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 16px; }
.upgrade-effect { font-size: 13px; font-weight: 600; }
.upgrade button { background: var(--color-accent); color: var(--color-accent-ink); border-radius: 8px; padding: 0 16px; font-size: 13px; font-weight: 700; }
.upgrade button:disabled { background: var(--color-paper); color: var(--color-muted); }
.upgrade-reason { display: block; color: var(--color-muted); text-align: right; margin-top: 6px; font-size: 10px; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0 max(24px, env(safe-area-inset-bottom)); color: var(--color-muted); font-size: 10px; }
footer > span:last-child { text-align: right; max-width: 370px; }
.save-warning { padding: 16px; background: var(--color-orange-light); color: var(--color-error); border: 1px solid var(--color-error); border-radius: 12px; margin-top: 16px; font-size: 13px; }
dialog { position: fixed; inset: 0; margin: auto; width: min(440px, calc(100% - 32px)); max-height: 85dvh; overflow-y: auto; border: 1px solid var(--color-rule); border-radius: 24px; padding: 32px; background: var(--color-paper); color: var(--color-ink); }
dialog::backdrop { background: var(--color-overlay); }
dialog h2 { font-size: 30px; line-height: 1.13; letter-spacing: -1px; margin: 16px 0; }
dialog p, dialog li { font-size: 13px; color: var(--color-muted); }
dialog ol { padding-left: 20px; }
dialog li { padding-bottom: 10px; }
dialog p + p { margin-top: 12px; }
.dialog-symbol { display: grid; place-items: center; background: var(--color-accent); width: 56px; height: 56px; border-radius: 18px; font-size: 35px; margin-bottom: 16px; }
.close-button { position: absolute; right: 12px; top: 12px; width: 44px; border-radius: 50%; background: var(--color-clear); font-size: 28px; }
.simple { text-align: center; margin-top: 24px; }
@media (hover: hover) { .primary-button:hover:not(:disabled), .upgrade button:hover:not(:disabled) { background: var(--color-accent-hover); } .delivery-button:hover:not(:disabled) { background: var(--color-green-hover); } .recipe:hover:not(:disabled), .help-button:hover, .close-button:hover { background: var(--color-mint); } }
@media (min-width: 48rem) { .game-layout { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; } .world { display: flex; flex-direction: column; } .factory-scene { flex: 1; display: flex; align-items: center; } .mission { min-height: 146px; } .upgrades { grid-column: 1 / -1; } .upgrade-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .shell { padding: 0 40px; } .controls { padding: 28px; } .game-layout { gap: 28px; } .world-heading { padding: 26px 28px 0; } .mission { padding: 26px 28px; } }
@media (max-width: 47.99rem) { .page-heading { padding: 24px 0; } .wallet { gap: 7px; } .wallet small { display: none; } .wallet strong { font-size: 25px; } .coin { width: 28px; height: 28px; } .page-heading .eyebrow { max-width: 190px; font-size: 8px; } .scene-coordinate, .upgrade-note { display: none; } .mission { padding: 20px; gap: 12px; } .mission-icon { display: none; } .world-heading { padding: 18px 20px 0; } .scene-caption { padding: 8px 20px 18px; } .controls { padding: 20px; } .upgrades > .section-heading { flex-direction: column; } footer { flex-direction: column; gap: 8px; } footer > span:last-child { text-align: left; } }
@media (max-width: 23rem) { .shell { padding: 0 16px; } .brand { font-size: 20px; gap: 8px; } .brand small { font-size: 8px; } h1 { font-size: 26px; } .section-heading h2 { font-size: 19px; } .mission-heading h3 { font-size: 14px; } .mission-meta { font-size: 9px; } .wallet { flex-direction: column; gap: 4px; } .world-heading h2 { font-size: 13px; } .recipe small { font-size: 8px; } .delivery-button { font-size: 12px; padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .running .steam { opacity: 0.7; } }
@media (max-width: 47.99rem) {
  .topbar { padding: 16px 0; }
  .page-heading { padding: 20px 0; }
  .page-heading .eyebrow { display: none; }
  .page-heading h1 { font-size: 26px; letter-spacing: -1px; }
  .game-layout { gap: 16px; }
  .world { display: contents; }
  .world-visual { grid-row: 1; background: var(--color-sky); border-radius: var(--radius-lg); overflow: clip; }
  .factory-scene svg { height: 190px; }
  .scene-caption { padding-top: 0; padding-bottom: 12px; }
  .controls { grid-row: 2; }
  .mission { grid-row: 3; border-radius: var(--radius-md); }
  .upgrades { grid-row: 4; }
  .recipes { margin-top: 16px; margin-bottom: 14px; }
}

/* Idle iteration: live workshops, direct collection, separate cycle and storage feedback. */
.scene-stage { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.scene-stage .factory-scene { width: 100%; }
.scene-pickups { position: absolute; inset: 0; pointer-events: none; }
.pickup { position: absolute; left: 27%; top: 8%; pointer-events: auto; background: var(--color-paper); color: var(--color-ink); border: 2px solid var(--color-green); border-radius: 12px; padding: 6px 12px; min-width: 86px; box-shadow: 0 4px 0 var(--color-shadow); transform: translateX(-50%); }
.pickup::after { content: ''; position: absolute; left: calc(50% - 5px); bottom: -7px; width: 10px; height: 10px; background: inherit; border-right: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green); transform: rotate(45deg); }
.pickup > span { display: block; font-size: 10px; line-height: 1.2; }
.pickup > strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.pickup:disabled { color: var(--color-muted); }
.pickup.ready { background: var(--color-accent); color: var(--color-accent-ink); }
.pickup:active:not(:disabled) { transform: translate(-50%, 1px); }
.soup-pickup { left: 66%; top: 17%; }
.collection-pop { position: absolute; left: 50%; top: 25%; pointer-events: none; opacity: 0; font-weight: 800; padding: 8px 16px; border-radius: 24px; background: var(--color-green); color: var(--color-cream); white-space: nowrap; transform: translate(-50%, 0); }
.collection-pop.show { animation: collected 1.8s var(--ease-out); }
@keyframes collected { 0% { opacity: 0; transform: translate(-50%, 10px); } 20%,70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.auto-badge { background: var(--color-mint); color: var(--color-green) !important; border-radius: 20px; padding: 4px 8px; letter-spacing: 1px; font-size: 9px !important; font-weight: 700; }
.idle-lines { margin: 12px 0 16px; }
.idle-line { padding: 16px 0; border-bottom: 1px solid var(--color-rule); }
.line-top { display: flex; align-items: center; gap: 10px; }
.line-top h3 { font-size: 16px; line-height: 1.2; }
.line-rate { font-size: 11px; color: var(--color-muted); }
.line-status { margin-left: auto; font-size: 10px; color: var(--color-muted); }
.full .line-status { color: var(--color-error); font-weight: 700; }
.mini-bowl { display: block; width: 32px; height: 22px; border-radius: 3px 3px 18px 18px; border-top: 5px solid var(--color-apron); background: var(--color-accent); }
.mini-bowl.bowl-soup { background: var(--color-wall); box-shadow: none; }
.line-production { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 4px; font-size: 10px; color: var(--color-muted); }
.cycle-track, .storage-track { height: 4px; overflow: clip; border-radius: 4px; background: var(--color-rule); }
.cycle-track > span, .storage-track > span { display: block; height: 100%; background: var(--color-green); transform-origin: left; transform: scaleX(0); }
.cycle-track > span { transition: transform 220ms var(--ease-out); }
.line-stock { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.line-stock > span { font-size: 11px; color: var(--color-muted); }
.line-stock strong { font-size: 20px; color: var(--color-ink); }
.line-stock button { padding: 0 12px; min-width: 82px; min-height: 44px; border-radius: 8px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 12px; font-weight: 700; }
.line-stock button:disabled { background: var(--color-paper); color: var(--color-muted); }
.storage-track { height: 6px; margin-top: 6px; }
.storage-track > span { background: var(--color-orange); }
.capacity-hint { font-size: 10px; color: var(--color-muted); margin-top: 6px; }
#collect-reward { font-size: 17px; font-variant-numeric: tabular-nums; }
.idle-tip { display: flex; gap: 8px; padding-top: 8px; color: var(--color-muted); border-top: 1px dashed var(--color-rule); }
.idle-tip > span { font-size: 22px; }
.idle-tip p { font-size: 11px; }
.return-note { position: relative; background: var(--color-mint); border-radius: 12px; padding: 16px 40px 16px 16px; margin-top: 16px; }
.return-note strong { font-size: 13px; }
.return-note p { font-size: 11px; margin-top: 4px; color: var(--color-muted); }
.return-note button { position: absolute; right: 0; top: 0; width: 44px; background: var(--color-clear); font-size: 20px; }
.mission-claim { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; padding: 0 16px; border-radius: 8px; margin-top: 12px; font-size: 12px; }
.upgrade-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.upgrade[data-kind="storage"] .upgrade-icon { background: var(--color-accent); color: var(--color-accent-ink); }
.upgrade-effect { font-size: 11px; }
.upgrade-bottom { gap: 8px; }
.upgrade button { padding: 0 12px; }
@media (min-width: 48rem) { .upgrade-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .upgrade-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .pickup { top: 2%; min-width: 76px; padding: 4px 8px; } .pickup strong { font-size: 15px; } .soup-pickup { top: 9%; left: 70%; } .scene-stage .factory-scene svg { height: 220px; } .controls > .section-heading h2 { font-size: 20px; } }
@media (hover: hover) { .pickup.ready:hover, .line-stock button:hover:not(:disabled), .mission-claim:hover { background: var(--color-accent-hover); } }
@media (prefers-reduced-motion: reduce) { .collection-pop.show { opacity: 1; } }
.storage-expansion { opacity: 0; }
.large-storage .storage-expansion { opacity: 1; }
.upgrade-bottom { flex-wrap: wrap; }
.upgrade-bottom button { margin-left: auto; }

/* Region progression: towns are destinations, hexagons are purchasable building sites. */
.game-nav { display: flex; gap: 20px; margin: -8px 0 16px; font-size: 12px; }
.game-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-green); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.game-nav a:first-child { font-weight: 700; }
#factory-panel, #territory-section, #region-section { scroll-margin-top: 16px; }
[hidden] { display: none !important; }
.region-section { border: 1px solid var(--color-rule); border-radius: var(--radius-lg); overflow: clip; background: var(--color-surface); }
.region-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 28px 0; }
.region-top h2 { font-size: 25px; letter-spacing: -.7px; }
.region-top .eyebrow { margin-bottom: 4px; }
.region-count { font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.region-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 20px 28px; background: radial-gradient(ellipse at 50% 25%, var(--color-mint), var(--color-clear) 70%); }
.region-map::before { content: ''; position: absolute; top: 48%; left: 18%; right: 18%; border-top: 3px dashed var(--color-road); }
.city-node { z-index: 1; position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 12px 12px; border: 2px solid var(--color-clear); border-radius: 16px; background: var(--color-paper); min-width: 0; white-space: normal; }
.city-node.selected { border-color: var(--color-green); background: var(--color-mint); }
.city-node.locked svg { filter: saturate(.25); opacity: .65; }
.city-node svg { width: 145px; max-width: 100%; height: 85px; }
.city-node strong { font-size: 17px; }
.city-node > span:not(.city-number) { font-size: 11px; color: var(--color-muted); }
.city-node small { font-size: 11px; padding-top: 8px; font-weight: 600; }
.city-number { position: absolute; left: 12px; top: 8px; font: 11px var(--font-mono); color: var(--color-muted); }
.mini-land { fill: var(--color-grass); }.mini-wall { fill: var(--color-wall); }.mini-roof { fill: var(--color-roof); }.mini-window { stroke: var(--color-window); stroke-width: 5; }.mini-tree { fill: var(--color-leaf); }.mini-sun { fill: var(--color-sun); }.mini-river { fill: none; stroke: var(--color-window); stroke-width: 13; }.mini-mountain { fill: var(--color-cloud); stroke: var(--color-road); stroke-width: 2; }
.city-detail { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 28px 20px; }
.city-detail h3 { font-size: 15px; }.city-detail p { color: var(--color-muted); font-size: 12px; }
.city-detail ul, .stage-section ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; color: var(--color-muted); }
.city-detail li, .stage-section li { margin-top: 4px; }.met { color: var(--color-green); }.met > span { font-weight: 800; }
.region-collection { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--color-rule); padding: 16px 28px; }
.region-collection strong { display: block; font-size: 14px; }.region-collection small { display: block; font-size: 11px; color: var(--color-muted); margin-top: 2px; }
.map-action { background: var(--color-accent); color: var(--color-accent-ink); font-size: 12px; font-weight: 700; padding: 10px 16px; border-radius: 8px; min-height: 44px; white-space: normal; flex-shrink: 0; }
.map-action:disabled { background: var(--color-paper); color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-rule); }
.territory-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; margin: 24px 0; padding: 12px 28px; border-block: 1px solid var(--color-rule); }
.territory-copy h2 { font-size: 23px; letter-spacing: -.5px; }.territory-copy p:not(.eyebrow) { font-size: 13px; max-width: 350px; color: var(--color-muted); margin-top: 8px; }
#city-services { font-size: 11px; color: var(--color-muted); margin: 12px 0; }
.hex-map { position: relative; width: min(100%, 370px); aspect-ratio: 1.23; justify-self: center; }
.hex-tile { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); width: 30%; height: 38%; background: var(--color-sky); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 6px; white-space: normal; transition: background-color var(--dur-fast); }
.hex-tile.occupied { background: var(--color-grass); }.hex-tile.active { background: var(--color-accent); }.hex-tile:active:not(:disabled) { transform: translate(-50%, -49%); }.hex-tile:focus-visible { background: var(--color-accent); outline-offset: -10px; }
.hex-tile strong { font-size: 11px; line-height: 1.2; }.hex-tile small { font-size: 9px; }.hex-icon { font-size: 26px; line-height: 1; height: 35px; }.hex-icon svg { width: 36px; height: 30px; fill: var(--color-cream); stroke: var(--color-green); stroke-width: 2.5; stroke-linejoin: round; }
.factory-stage-two .hex-icon svg { fill: var(--color-orange-light); stroke: var(--color-bark); }
.factory-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; font-size: 12px; }.factory-selection label { font-weight: 700; }.factory-selection select { font: inherit; color: var(--color-ink); min-height: 44px; max-width: 100%; padding: 8px 32px 8px 12px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-surface); }.factory-selection > span { color: var(--color-muted); font-size: 11px; }
.stage-section { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: 24px; }
.stage-section h2 { font-size: 24px; }.stage-section .eyebrow { margin-bottom: 4px; }.stage-section p:not(.eyebrow) { font-size: 12px; color: var(--color-muted); max-width: 650px; margin-top: 6px; }.stage-section ul { display: flex; gap: 16px; flex-wrap: wrap; }.stage-purchase { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }.stage-purchase small { font-size: 11px; color: var(--color-muted); max-width: 220px; }
.factory-wing { display: none; }.stage-two .factory-wing { display: inline; }
#world-section[data-city="river"] { --color-grass: var(--color-mint); --color-road: var(--color-window); }
#world-section[data-city="north"] { --color-grass: var(--color-cloud); --color-grass-edge: var(--color-tank); --color-sun: var(--color-window); }
#build-dialog { width: min(570px, calc(100% - 32px)); }
.build-option { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid var(--color-rule); }.build-option:first-child { margin-top: 20px; }.build-option h3 { font-size: 15px; }.build-option p { font-size: 12px; }.build-option small { display: block; font-size: 10px; color: var(--color-muted); margin-top: 5px; }.build-icon svg { width: 40px; fill: var(--color-mint); stroke: var(--color-green); stroke-width: 2; }
@media (max-width: 47.99rem) {
  .region-top { padding: 18px 16px 0; }.region-top h2 { font-size: 20px; }.region-top .eyebrow { font-size: 7px; letter-spacing: .6px; }.region-count { font-size: 10px; }
  .region-map { gap: 6px; padding: 16px 10px; }.city-node { padding: 6px 3px 10px; border-radius: 12px; }.city-node svg { height: 64px; }.city-node strong { font-size: 12px; }.city-node > span:not(.city-number), .city-node small { font-size: 9px; }.city-number { left: 6px; top: 4px; font-size: 9px; }
  .city-detail { padding: 0 16px 16px; flex-direction: column; align-items: stretch; gap: 12px; }.city-detail h3 { font-size: 13px; }.city-detail p { font-size: 11px; }
  .region-collection { padding: 16px; flex-direction: column; align-items: stretch; gap: 10px; }.region-collection strong { font-size: 12px; }.region-collection small { font-size: 10px; }
  .territory-section { grid-template-columns: 1fr; padding: 20px 0 8px; gap: 8px; margin: 20px 0; }.territory-copy h2 { font-size: 20px; }.territory-copy .eyebrow { margin-bottom: 4px; }.hex-map { width: min(100%, 330px); }.territory-copy p:not(.eyebrow) { font-size: 12px; }
  .factory-selection { gap: 8px; }.factory-selection > span { width: 100%; font-size: 10px; }
  .stage-section { grid-row: 4; padding: 20px; flex-direction: column; align-items: stretch; gap: 16px; }.stage-section ul { display: block; }.stage-purchase small { max-width: none; }.upgrades { grid-row: 5; }
  .build-option { grid-template-columns: 32px 1fr; gap: 10px; }.build-option button { grid-column: 2; justify-self: start; }.build-icon svg { width: 30px; }#build-dialog { padding: 24px; }
}
@media (hover: hover) { .map-action:hover:not(:disabled) { background: var(--color-accent-hover); }.city-node:hover:not(:disabled) { background: var(--color-mint); }.hex-tile:hover:not(:disabled) { background: var(--color-accent-hover); } }

/* Hallmark · macrostructure: Map / Diagram (user-directed) · genre: playful · theme: Hum
 * Single-screen game; full map, bottom navigation, contextual sheets. P5 H5 E4 S5 R4 V5. */
.map-game { height: 100dvh; min-height: 0; overflow-y: clip; background: var(--color-map-ocean); }
.game-shell { height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: clip; }
.game-hud { display: flex; align-items: center; gap: 20px; padding: max(12px,env(safe-area-inset-top)) 24px 12px; background: var(--color-paper); z-index: 3; border-bottom: 1px solid var(--color-rule); }
.game-hud .brand { margin-right: auto; font-size: 20px; }.game-hud .brand small { font-size: 9px; }.game-hud .wallet { flex-direction: row; }.game-hud .wallet strong { font-size: 24px; }.game-hud .help-button { flex-shrink: 0; }
.map-shell { position: relative; min-height: 0; overflow: clip; background: var(--color-map-ocean); }
.map-location { position: absolute; left: 28px; top: 20px; z-index: 2; display: flex; gap: 12px; align-items: center; pointer-events: none; }
.map-location h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.8px; }.map-location p { font-size: 12px; color: var(--color-ink); margin-top: 3px; }.map-location > div > span { font-size: 9px; font-weight: 750; letter-spacing: 1.6px; }
.map-back { pointer-events: auto; width: 44px; height: 44px; border-radius: 14px; background: var(--color-paper); box-shadow: 0 3px 0 var(--color-shadow); font-size: 25px; }
.map-viewport { position: absolute; inset: 80px 0 126px; touch-action: none; cursor: grab; outline-offset: -4px; user-select: none; overflow: clip; }
.map-viewport.dragging, .map-viewport.dragging button { cursor: grabbing; }
.map-stage { position: absolute; width: 760px; height: 760px; top: 50%; left: 50%; transform-origin: center; --map-scale: 1; }
.map-stage #region-section, .map-stage #territory-section { position: absolute; inset: 0; display: block; padding: 0; margin: 0; border: 0; }
.terrain-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-road { stroke: var(--color-map-shore); stroke-width: 21px; fill: none; stroke-linecap: round; stroke-linejoin: round; }.route-line { stroke: var(--color-roof-light); stroke-width: 5px; stroke-dasharray: 9 10; fill: none; opacity: .55; }.route-line.connected { stroke: var(--color-road-line); stroke-width: 6px; opacity: 1; }.map-water-label { font: 12px var(--font-body); letter-spacing: 4px; fill: var(--color-ink); opacity: .55; }
.map-city { position: absolute; width: 210px; min-height: 210px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: end; background: var(--color-clear); padding: 0; }
.map-city:active:not(:disabled) { transform: translate(-50%,-50%); }.map-city > svg { display: block; width: 210px; height: 153px; overflow: visible; pointer-events: none; }
.city-pin-name { display: flex; align-items: center; gap: calc(6px / var(--map-scale)); font-size: calc(14px / var(--map-scale)); font-weight: 800; line-height: 1.25; background: var(--color-paper); border: calc(1px / var(--map-scale)) solid var(--color-green); box-shadow: 0 calc(3px / var(--map-scale)) 0 var(--color-shadow); border-radius: calc(9px / var(--map-scale)); padding: calc(5px / var(--map-scale)) calc(10px / var(--map-scale)); }
.city-pin-name > span { color: var(--color-green); }.city-pin-status { margin-top: calc(4px / var(--map-scale)); border-radius: calc(20px / var(--map-scale)); padding: calc(3px / var(--map-scale)) calc(8px / var(--map-scale)); background: var(--color-green); color: var(--color-cream); font-size: calc(10px / var(--map-scale)); font-weight: 700; }
.map-city.locked > svg { filter: saturate(.45); }.map-city.locked .city-pin-status { background: var(--color-paper); color: var(--color-muted); }
.map-tools { position: absolute; right: 18px; top: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }.map-tools button { width: 44px; height: 44px; border: 1px solid var(--color-rule); background: var(--color-paper); border-radius: 12px; font-size: 25px; box-shadow: 0 3px 0 var(--color-shadow); }.map-tools button:disabled { color: var(--color-muted); box-shadow: none; }
.map-compass { position: absolute; bottom: 148px; left: 28px; font-size: 30px; text-align: center; color: var(--color-ink); pointer-events: none; }.map-compass span { display: block; font-size: 10px; font-weight: 700; }
.map-bottom { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(510px,calc(100% - 32px)); z-index: 2; box-shadow: 0 6px 0 var(--color-shadow); border-radius: 18px; overflow: clip; }
.map-objective { display: flex; width: 100%; gap: 12px; align-items: center; text-align: left; white-space: normal; padding: 10px 16px; background: var(--color-green); color: var(--color-cream); }
.map-objective > span:nth-child(2) { min-width: 0; flex: 1; }.map-objective strong { display: block; font-size: 12px; }.map-objective small { display: block; font-size: 10px; margin-top: 2px; color: var(--color-map-shore); }.map-objective > span:last-child { font-size: 23px; }.objective-icon { color: var(--color-accent); font-size: 25px; }
.map-collect { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--color-paper); }.map-collect strong { display: block; font-size: 13px; }.map-collect small { display: block; color: var(--color-muted); font-size: 10px; }.map-collect button { min-width: 104px; font-size: 14px; }
.game-dock { background: var(--color-paper); display: flex; justify-content: center; gap: 12px; padding: 8px 16px max(8px,env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); z-index: 3; }.game-dock button { position: relative; background: var(--color-clear); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: min(160px,30%); min-height: 52px; border-radius: 12px; color: var(--color-muted); font-size: 11px; font-weight: 600; }.game-dock button[aria-current] { background: var(--color-accent); color: var(--color-ink); }.game-dock svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linejoin: round; stroke-linecap: round; }.game-dock i { position: absolute; top: 7px; right: 30%; width: 8px; height: 8px; background: var(--color-apron); border-radius: 50%; }
.plot-ground { fill: var(--color-grass); stroke: var(--color-grass-edge); stroke-width: 4px; stroke-linejoin: round; }.plot-ground:not(.owned) { fill: var(--color-mint); stroke: var(--color-green); stroke-width: 2px; stroke-dasharray: 7 8; opacity: .8; }.plot-ground.owned { fill: var(--color-grass); }
.map-plot { position: absolute; width: 178px; height: 182px; transform: translate(-50%,-50%); }
.plot-button { position: absolute; inset: 0; width: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: end; background: var(--color-clear); border-radius: 24px; }.plot-art { position: absolute; inset: -28px 0 20px; pointer-events: none; }.plot-art svg { width: 100%; height: 100%; overflow: visible; }
.plot-name { position: relative; border-radius: 8px; background: var(--color-cream); padding: 2px 8px; font-size: calc(11px / var(--map-scale)); line-height: 1.25; font-weight: 750; }.plot-note { position: relative; font-size: calc(9px / var(--map-scale)); line-height: 1.3; padding-top: 3px; font-weight: 500; }
.plot-button.vacant { justify-content: center; gap: 4px; }.vacant .plot-art { position: static; height: auto; }.plot-plus { display: block; font-size: calc(29px / var(--map-scale)); font-weight: 500; line-height: 1.1; color: var(--color-green); }.vacant .plot-name { background: var(--color-clear); }.vacant .plot-note { padding: 0; }
.plot-collect { position: absolute; top: -25px; left: 50%; transform: translate(-50%,-50%); background: var(--color-accent); border: 2px solid var(--color-green); border-radius: 12px; padding: 6px 12px; font-size: calc(11px / var(--map-scale)); line-height: 1.2; font-weight: 800; min-height: calc(32px / var(--map-scale)); min-width: calc(64px / var(--map-scale)); box-shadow: 0 4px 0 var(--color-shadow); z-index: 1; }.plot-collect:active:not(:disabled) { transform: translate(-50%,-49%); }.plot-collect:disabled { background: var(--color-paper); color: var(--color-muted); font-weight: 500; font-size: calc(9px / var(--map-scale)); }
.map-stage[data-city="north"] { --color-grass: var(--color-cloud); --color-grass-edge: var(--color-tank); --color-mint: var(--color-sky); }.map-stage[data-city="river"] { --color-grass: var(--color-wall); }
.map-toast { position: fixed; left: 50%; top: 82px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--color-green); color: var(--color-cream); border-radius: 12px; padding: 12px 16px; font-size: 12px; z-index: 10; box-shadow: 0 4px 16px var(--color-shadow); pointer-events: none; }
.map-game .save-warning { position: absolute; inset: 90px 16px auto; z-index: 4; max-height: 150px; overflow-y: auto; font-size: 12px; margin: 0; }
/* Native dialogs isolate interaction and return focus to the tapped map object. */
.game-sheet { inset: 16px 16px 16px auto; width: min(480px,calc(100% - 32px)); height: max-content; max-height: calc(100dvh - 32px); margin: auto 0; padding: 0; border-radius: 22px; background: var(--color-paper); overflow: clip; box-shadow: 0 12px 50px var(--color-shadow); }
.game-sheet[open] { display: flex; flex-direction: column; }.game-sheet::backdrop { background: var(--color-overlay); }
.sheet-top { display: flex; align-items: center; gap: 12px; padding: 20px 66px 18px 24px; flex-shrink: 0; border-bottom: 1px solid var(--color-rule); position: relative; }.sheet-top h2 { font-size: 23px; line-height: 1.2; letter-spacing: -.6px; margin: 0; }.sheet-top small { display: block; font-size: 10px; color: var(--color-muted); margin-bottom: 4px; }.sheet-top .close-button { top: 14px; right: 12px; }.sheet-top #factory-level { margin-left: auto; font-size: 10px; white-space: nowrap; }.sheet-body { padding: 20px 24px 24px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }.sheet-body > p { font-size: 12px; line-height: 1.55; }
.sheet-tabs { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--color-rule); flex-shrink: 0; }.sheet-tabs button { flex: 1; background: var(--color-clear); color: var(--color-muted); padding: 0 7px; font-size: 12px; font-weight: 600; border-radius: 8px; }.sheet-tabs button[aria-selected="true"] { background: var(--color-green); color: var(--color-cream); }
.factory-sheet .sheet-body { padding: 0 20px 20px; }.factory-sheet .world-visual { display: block; background: var(--color-sky); margin: 12px 0 0; border-radius: 16px; }.factory-sheet .scene-stage { height: 150px; }.factory-sheet .factory-scene { display: block; padding: 0; }.factory-sheet .scene-stage .factory-scene svg { height: 150px; width: 100%; }.factory-sheet .pickup { min-width: 70px; padding: 4px 8px; top: 6px; }.factory-sheet .pickup strong { font-size: 12px; }.factory-sheet .soup-pickup { left: 71%; top: 15px; }.factory-sheet .scene-caption { display: none; }.factory-sheet .controls { padding: 12px 0 0; border: 0; background: var(--color-clear); }.factory-sheet .controls > .section-heading, .factory-sheet .section-intro, .factory-sheet .idle-tip { display: none; }.factory-sheet .idle-lines { margin: 0; }.factory-sheet .idle-line { padding: 12px 0; }.factory-sheet .line-top h3 { font-size: 14px; }.factory-sheet .capacity-hint { font-size: 10px; }.factory-sheet .shift-details { margin-top: 12px; }.factory-sheet #collect-all { min-height: 48px; margin-top: 10px; }.factory-sheet .line-stock strong { font-size: 20px; }
.factory-sheet .upgrade-list { display: flex; flex-direction: column; gap: 0; }.factory-sheet .upgrades > .section-heading { display: none; }.factory-sheet .upgrade { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; background: var(--color-clear); padding: 16px 0; }.factory-sheet .upgrade-top { grid-column: 1 / -1; margin-bottom: 6px; }.factory-sheet .upgrade-icon { display: none; }.factory-sheet .upgrade h3 { font-size: 16px; }.factory-sheet .upgrade > p { grid-column: 1; font-size: 11px; }.factory-sheet .upgrade-bottom { grid-column: 1 / -1; margin-top: 8px; }.factory-sheet .upgrade-reason { grid-column: 1 / -1; font-size: 10px; }.factory-sheet .upgrade-effect { font-size: 12px; }
.factory-sheet .stage-section { padding: 20px 0 0; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: stretch; gap: 18px; }.factory-sheet .stage-section .eyebrow { display: none; }.factory-sheet .stage-section h2 { font-size: 24px; }.factory-sheet .stage-section ul { display: block; margin-top: 16px; }.factory-sheet .stage-section li { margin-top: 10px; }.factory-sheet .stage-purchase small { max-width: none; }
.game-sheet .mission { margin-top: 16px; border-radius: 16px; padding: 20px; }.game-sheet .mission-icon { display: none; }.game-sheet .mission-heading h3 { font-size: 15px; }#goals-route { font-size: 12px; color: var(--color-muted); margin-top: 20px; line-height: 1.6; }
#city-preview-art, #service-art { height: 150px; display: flex; justify-content: center; background: var(--color-mint); border-radius: 16px; margin-bottom: 16px; }#city-preview-art svg, #service-art svg { height: 100%; width: 190px; }#city-requirements { list-style: none; padding: 0; margin: 20px 0; font-size: 12px; }#city-requirements li { margin: 12px 0; }.game-sheet .simple { min-height: 48px; margin-top: 16px; }
#build-dialog.game-sheet { width: min(480px,calc(100% - 32px)); padding: 0; }.game-sheet .build-option { grid-template-columns: 56px 1fr auto; padding: 16px 0; gap: 12px; }.game-sheet .build-icon svg { width: 56px; height: 70px; stroke: none; }.game-sheet .build-option button { grid-column: auto; }.game-sheet .build-option h3 { font-size: 14px; }.game-sheet .build-option p { font-size: 11px; }.game-sheet .build-option small { font-size: 10px; }.game-sheet .build-option:first-child { margin-top: 12px; }
@media (hover:hover) { .map-city:hover .city-pin-name { background: var(--color-accent); }.plot-button:hover { background: var(--color-shadow); }.game-dock button:hover:not([aria-current]) { background: var(--color-mint); }.sheet-tabs button:hover:not([aria-selected="true"]) { background: var(--color-mint); } }
@media(max-width:767px) {
  .game-hud { gap: 10px; padding: max(10px,env(safe-area-inset-top)) 16px 10px; }.game-hud .brand { font-size: 16px; gap: 8px; }.game-hud .brand-mark { width: 38px; height: 38px; font-size: 18px; }.game-hud .brand small { font-size: 8px; letter-spacing: .2px; }.game-hud .wallet { gap: 5px; }.game-hud .wallet strong { font-size: 20px; }.game-hud .coin { width: 22px; height: 22px; border-width: 2px; font-size: 8px; }.game-hud .help-button { width: 44px; border: 0; font-size: 20px; }
  .map-location { left: 16px; top: 16px; gap: 10px; }.map-location h1 { font-size: 25px; }.map-location p { font-size: 10px; }.map-location > div > span { font-size: 8px; }.map-viewport { inset: 78px 0 125px; }.map-tools { right: 12px; top: 17px; gap: 6px; }.map-tools button { width: 40px; min-height: 44px; border-radius: 10px; }.map-compass { left: 16px; bottom: 139px; font-size: 22px; }
  .map-bottom { bottom: 12px; width: calc(100% - 24px); border-radius: 15px; }.map-objective { padding: 9px 12px; gap: 8px; }.map-objective strong { font-size: 11px; }.map-objective small { font-size: 9px; }.map-collect { padding: 10px 12px; gap: 8px; }.map-collect strong { font-size: 12px; }.map-collect small { font-size: 9px; }.map-collect button { min-width: 88px; font-size: 13px; padding: 8px 12px; }
  .game-dock { gap: 8px; padding-top: 6px; padding-bottom: max(6px,env(safe-area-inset-bottom)); }.game-dock button { min-height: 50px; }
  .game-sheet, #build-dialog.game-sheet { inset: auto 0 0; width: 100%; max-height: calc(100dvh - max(20px,env(safe-area-inset-top))); margin: 0; border-radius: 22px 22px 0 0; padding: 0; }.sheet-top { padding: 16px 60px 14px 20px; }.sheet-top h2 { font-size: 21px; }.sheet-top small { font-size: 9px; }.sheet-body { padding: 16px 20px max(20px,env(safe-area-inset-bottom)); }.sheet-tabs { padding: 6px 12px; }.sheet-tabs button { font-size: 11px; padding: 0 5px; }.factory-sheet .sheet-body { padding: 0 16px max(18px,env(safe-area-inset-bottom)); }.game-sheet .build-option { grid-template-columns: 44px 1fr; }.game-sheet .build-icon svg { width: 44px; }.game-sheet .build-option button { grid-column: 2; justify-self: start; }
}
@media(max-width:359px) { .game-hud { padding-inline: 10px; gap: 5px; }.game-hud .brand { font-size: 14px; }.game-hud .brand small { display: none; }.game-hud .wallet strong { font-size: 19px; }.map-location h1 { font-size: 22px; }.map-location p { max-width: 230px; }.sheet-top #factory-level { display: none; }.sheet-tabs button { font-size: 10px; }.map-objective strong { font-size: 10px; }.map-objective small { font-size: 8px; } }
@media(max-height:620px) { .map-location { top: 9px; }.map-location h1 { font-size: 21px; }.map-location p { display: none; }.map-viewport { top: 48px; bottom: 118px; }.map-tools { top: 8px; }.game-hud { padding-top: 6px; padding-bottom: 6px; }.game-dock button { min-height: 44px; }.factory-sheet .scene-stage, .factory-sheet .scene-stage .factory-scene svg { height: 110px; } }
@media(prefers-reduced-motion:reduce) { .map-stage, .game-sheet { transition: none; } }
.city-pin-name > span > svg { display: block; width: calc(12px / var(--map-scale)); height: calc(12px / var(--map-scale)); stroke: currentColor; stroke-width: 2; fill: none; }
@media(max-width:767px) { .game-sheet, #build-dialog.game-sheet { max-width: none; max-height: min(88dvh,calc(100dvh - 20px)); } }
.factory-sheet .upgrade-list { margin-top: 0; }
.factory-sheet .upgrade { padding: 12px 0; row-gap: 2px; }
.factory-sheet .upgrade h3 { grid-row: 1; grid-column: 1; margin: 0; }
.factory-sheet .upgrade-top { grid-row: 1; grid-column: 2; margin: 0; }
.factory-sheet .upgrade > p { grid-row: 2; grid-column: 1 / -1; margin: 0; }
.factory-sheet .upgrade-bottom { grid-row: 3; grid-column: 1 / -1; margin-top: 4px; }
.factory-sheet .upgrade-reason { grid-row: 4; grid-column: 1 / -1; margin: 0; }
.plot-collect { top: 0; min-height: calc(44px / var(--map-scale)); }
@media(max-width:767px) { .map-tools button { width: 44px; } }

/* Suggested purchase and collection stay beside the map. */
.spend-choice { display:flex;background:var(--color-green); }
#next-offer { flex:0 0 38px;padding:0;background:transparent;color:var(--color-cream);font-size:23px;border-right:1px solid var(--color-leaf);border-radius:0; }
.map-objective { gap:8px;padding:11px 12px;min-height:76px; }
.map-objective .objective-icon { display:none; }
.map-objective > span:nth-child(2) { flex:1; }
.map-objective #offer-price { font-size:13px;flex:0 0 auto;max-width:102px;color:var(--color-accent);line-height:1.3; }
.map-objective:disabled { opacity:1;background:var(--color-green); }
.map-objective:disabled #offer-price { color:var(--color-map-shore); }
.map-objective small { line-height:1.35;font-size:10px; }
.map-route-goal { width:100%;background:var(--color-mint);color:var(--color-green);font-size:11px;min-height:52px;padding:7px 10px;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left; }
.map-route-goal > span { min-width:0;flex:1; }
.map-route-goal small { display:block;font-size:10px;font-weight:400;margin-top:3px; }
.map-route-goal > strong { flex-shrink:0;text-align:center;padding:5px 8px;border:1px solid currentColor;border-radius:8px; }
.map-route-goal.can-expand > strong { background:var(--color-accent);color:var(--color-ink);border-color:var(--color-accent); }
.map-viewport { bottom:195px; }
.land-preview { position:relative;text-align:center;font-size:140px;color:var(--color-green);height:160px;line-height:1; }
.land-preview span { position:absolute;inset:39px 0 auto;font-size:50px; }
#land-shortfall { font-weight:700; }
@media(max-width:600px){
 .map-bottom { bottom:10px; }.map-objective { padding:8px;min-height:81px; }.map-objective strong { font-size:11px; }.map-objective small { font-size:9px; }.map-objective #offer-price { font-size:12px;max-width:77px; }.map-route-goal { font-size:10px; }
 .map-viewport { bottom:192px; }
}
@media(max-height:620px){ .map-viewport { top:48px;bottom:182px; }.map-objective { min-height:72px; }.map-route-goal { min-height:28px; }.map-collect { padding-block:8px; }.map-bottom{bottom:7px;} }

/* Regional expansion buttons sit outside the single coastline, never inside city maps. */
.edge-land { position:absolute;width:88px;height:102px;min-height:0;transform:translate(-50%,-50%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0;background:var(--color-map-wave);box-shadow:inset 0 -9px 0 var(--color-map-river);color:var(--color-cloud);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0 10px; }
.edge-land strong { font-size:42px;line-height:1; }
.edge-land small { font-size:calc(10px / var(--map-scale));line-height:1.3;font-weight:800;color:var(--color-green); }
.edge-land:active:not(:disabled) { transform:translate(-50%,-50%); }.edge-land:hover { background:var(--color-window); }.edge-land:focus-visible { background:var(--color-accent); }
@media(min-width:900px){
 .map-viewport { top:68px;right:355px;bottom:20px; }.map-bottom { width:330px;left:auto;right:24px;bottom:24px;transform:none; }.map-objective small { font-size:11px; }.map-objective { min-height:110px; }.map-objective #offer-price { max-width:79px; }.map-tools { right:26px; }
}

#sound-settings svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle; }
.sound-slash { display:none; }.muted .sound-slash { display:block; }
.audio-option { display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--color-rule); }
.audio-option h3 { margin:0;font-size:16px; }.audio-option p { margin:4px 0 0;font-size:12px;color:var(--color-muted); }
.audio-option button { min-width:64px;min-height:44px;background:var(--color-mint);color:var(--color-green); }
.audio-option button[aria-checked="true"] { background:var(--color-green);color:var(--color-cream); }
.audio-option label { grid-column:1/-1;display:flex;justify-content:space-between;font-size:12px; }
.audio-option input { grid-column:1/-1;width:100%;min-height:32px;margin:0;accent-color:var(--color-green);cursor:pointer; }
#audio-preview { min-height:44px; }#audio-status { color:var(--color-green);font-weight:600; }
.audio-option button { border-radius:12px; }#audio-status { margin:12px 0; }
.music-track { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--color-muted); }
.music-track button { font-size:12px;padding:8px 12px;flex-shrink:0; }

/* Hallmark · existing Map / Diagram · verified KashaMilasha brand, 2026-09-06.
 * Orange/white identity, official logo and Tilda Sans; original playable cartography. */
@font-face { font-family: 'Tilda Sans'; src: url('/src/assets/brand/tilda-sans.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
.game-hud { background: var(--color-brand); border-bottom: 3px solid var(--color-accent); padding-block: max(8px,env(safe-area-inset-top)) 8px; }
.game-hud .brand { gap: 20px; min-width: 0; color: var(--color-ink); }
.brand-logo { display: block; width: 79px; height: 66px; object-fit: contain; flex-shrink: 0; }
.game-hud .brand-game-title { font-size: 19px; font-weight: 750; letter-spacing: -.25px; }
.game-hud .brand-game-title small { font-size: 11px; color: var(--color-ink); margin-top: 4px; letter-spacing: .3px; }
.game-hud .wallet { padding: 8px 14px; border-radius: 14px; background: var(--color-paper); white-space: nowrap; }
.game-hud .help-button { background: var(--color-paper); color: var(--color-brand-deep); border: 0; border-radius: 50%; width: 44px; height: 44px; }
.region-navigation { position: absolute; top: 20px; left: 250px; display: flex; gap: 8px; z-index: 2; }
.region-navigation select, .region-navigation button { font: 600 12px var(--font-body); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 10px; min-height: 38px; background: var(--color-paper); padding: 6px 10px; max-width: 180px; cursor: pointer; }
@media(max-width:767px) { .region-navigation { top: 92px; left: 16px; right: 68px; gap: 6px; }.region-navigation select { flex: 1; min-width: 0; }.region-navigation button { font-size: 11px; padding: 6px; }.map-viewport { top: 134px; }.map-shell:has(#region-navigation[hidden]) .map-viewport { top: 80px; } }
@media(max-width:767px) and (max-height:620px) { .map-location { top:8px; }#map-kicker { display:none; }.region-navigation { top:52px; }.region-navigation select,.region-navigation button { min-height:32px; }.map-viewport { top:88px; }.map-shell:has(#region-navigation[hidden]) .map-viewport { top:48px; } }
.game-dock { border-top: 3px solid var(--color-accent); }
.game-dock button[aria-current] { background: var(--color-accent); color: var(--color-ink); }
.map-bottom { border: 2px solid var(--color-paper); }
.map-collect .map-action { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 3px 0 var(--color-brand-deep); }
.map-collect .map-action:disabled { box-shadow: none; }
.sheet-top { background: var(--color-orange-light); border-bottom-color: var(--color-accent); }
.sheet-brand-logo { width: 62px; height: 54px; flex-shrink: 0; object-fit: contain; background: var(--color-brand); border-radius: 10px; padding: 4px; }
.factory-sheet .sheet-top { gap: 12px; padding-left: 18px; }
.factory-sheet .sheet-top > div { min-width: 0; }
.factory-sheet .sheet-top small { line-height: 1.25; }
.factory-sheet .sheet-top h2 { font-size: 23px; }
.sheet-tabs button[aria-selected='true'] { background: var(--color-accent); color: var(--color-accent-ink); }
.factory-sheet .world-visual { background: var(--color-orange-light); }
.brand-packet { display: block; width: 40px; height: 53px; flex-shrink: 0; transform: rotate(-5deg); }
.brand-packet svg { width: 100%; height: 100%; }
.product-brand { display: block; color: var(--color-brand-deep); font-size: 8px; font-weight: 700; letter-spacing: .4px; margin-bottom: 3px; }
.factory-sheet .line-top h3 { font-size: 16px; }
.factory-sheet .line-top { gap: 10px; }
.brand-story { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; padding: 16px; margin: 0 0 20px; border-radius: 16px; background: var(--color-brand); color: var(--color-ink); position: relative; overflow: hidden; }
.brand-story > img:first-child { width: 76px; height: 64px; object-fit: contain; }
.brand-story strong { font-size: 23px; }
.brand-story p { font-size: 12px; line-height: 1.45; margin: 6px 0 0; }
.brand-story .brand-dish { grid-column: 1 / -1; justify-self: center; width: 150px; height: 115px; object-fit: contain; }
.map-stage[data-city='river'] { --color-grass: var(--color-river-grass); }
@media(hover:hover) { .map-collect .map-action:hover:not(:disabled) { background: var(--color-accent-hover); } }
@media(max-width:767px) {
 .game-hud { padding-inline: 16px; gap: 10px; }
 .brand-logo { width: 67px; height: 56px; }
 .game-hud .brand { gap: 10px; }
 .game-hud .brand-game-title { font-size: 14px; max-width: 95px; line-height: 1.15; }
 .game-hud .brand-game-title small { display: none; }
 .game-hud .wallet { padding: 7px 10px; }
 .game-hud .wallet strong { font-size: 21px; }
 .sheet-brand-logo { width: 55px; height: 49px; }
}
@media(max-width:413px) {
 .game-hud .brand-game-title { display: none; }
 .game-hud { gap: 10px; }
 .factory-sheet .line-top h3 { font-size: 15px; }
 .product-brand { font-size: 7px; }
 .factory-sheet .line-status { font-size: 9px; }
 .brand-story { grid-template-columns: 62px 1fr; padding: 12px; }
 .brand-story > img:first-child { width: 62px; }
 .brand-story strong { font-size: 21px; }
}
@media(max-height:620px) { .brand-logo { width: 57px; height: 48px; }.game-hud { padding-block: 5px; } }

.brand-story { background-image: url('/src/assets/brand/stars.svg'); background-size: 48px auto; background-repeat: no-repeat; background-position: right 12px bottom 20px; }

/* Direct investment on the map: distinct offer, location, benefit and buy button. */
.spend-choice { display: block; background: var(--color-paper); padding: 8px 12px 12px; border-top: 4px solid var(--color-rule); }
.spend-choice.can-buy { border-top-color: var(--color-accent); }
.offer-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 27px; }
#offer-status { font-size: 10px; font-weight: 750; color: var(--color-muted); }
.can-buy #offer-status { background: var(--color-mint); border-radius: 5px; padding: 3px 6px; }
.can-buy #offer-status { color: var(--color-green); }
#next-offer { flex: initial; display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--color-clear); color: var(--color-muted); font-size: 11px; }
#next-offer span { font-size: 19px; }
.offer-body { display: grid; grid-template-columns: minmax(0,1fr) 103px; align-items: center; gap: 12px; }
.offer-copy h2 { font-size: 17px; line-height: 1.15; letter-spacing: -.3px; margin: 0; }
#offer-context { font-size: 10px; color: var(--color-muted); margin: 4px 0; }
#map-objective-detail { font-size: 12px; line-height: 1.3; margin: 0; color: var(--color-green); }
#map-objective { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 62px; padding: 8px; border-radius: 12px; border: 1px solid var(--color-accent-hover); background: var(--color-accent); color: var(--color-ink); text-align: center; box-shadow: 0 3px 0 var(--color-brand-deep); }
#map-objective strong { font-size: 16px; line-height: 1.1; }
#map-objective #offer-price { font-size: 13px; color: inherit; max-width: none; flex: initial; line-height: 1.2; }
#map-objective:disabled { opacity: 1; box-shadow: none; background: var(--color-rule); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
#offer-shortfall { margin: 8px 0 0; font-size: 10px; color: var(--color-muted); }
.map-viewport { bottom: 258px; }
.map-compass { bottom: 264px; }
@media(min-width:900px) {
 .map-bottom { width: 350px; }
 .map-viewport { right: 375px; bottom: 20px; }
 .map-compass { bottom: 34px; }
}
@media(max-width:600px) {
 .spend-choice { padding: 4px 10px 10px; }
 .offer-body { gap: 10px; grid-template-columns: minmax(0,1fr) 94px; }
 .offer-copy h2 { font-size: 15px; }
 #map-objective-detail { font-size: 11px; }
 #map-objective { min-height: 58px; }
 #map-objective strong { font-size: 15px; }
 #map-objective #offer-price { font-size: 12px; }
 #next-offer { min-height: 32px; }
}
@media(max-height:620px) and (max-width:899px) {
 .map-viewport { bottom: 240px; }
 .map-compass { display: none; }
 .offer-copy h2 { font-size: 14px; }
 #map-objective-detail { font-size: 10px; }
 .spend-choice { padding-bottom: 8px; }
}
@media(hover:hover) { #map-objective:hover:not(:disabled) { background: var(--color-accent-hover); } #next-offer:hover:not(:disabled) { background: var(--color-mint); } }
@media(max-width:899px) { .map-viewport { bottom:var(--purchase-panel-space,258px); } }