:root {
  color-scheme: light;
  --ink: #282723;
  --muted: #716c62;
  --paper: #f5f0e4;
  --paper-light: #fffdf7;
  --paper-deep: #e8ddc8;
  --line: #c9b995;
  --wine: #8a3441;
  --wine-dark: #61252e;
  --moss: #3f694f;
  --moss-light: #dbe5d9;
  --brass: #ae7b2e;
  --navy: #26313a;
  --danger: #a23d38;
  --shadow: 0 18px 46px rgba(30, 28, 23, 0.28);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #2f3434; color: var(--ink); display: flex; justify-content: center; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
h1, h2, h3, p, dl, dd { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }

.phone-shell { width: min(100vw, 430px); height: 100dvh; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.game-frame { height: 100%; position: relative; }
.app-background { height: 100%; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.app-background > .screen-body { grid-row: 4; }

.top-bar { min-height: 58px; padding: max(8px, env(safe-area-inset-top)) 10px 7px; display: grid; grid-template-columns: 1.1fr .9fr .8fr 1fr; gap: 1px; background: var(--navy); color: white; }
.top-bar div { min-width: 0; padding: 4px 5px; border-left: 1px solid rgba(255,255,255,.13); text-align: center; }
.top-bar div:first-child { border-left: 0; }
.top-bar span, .top-bar strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-bar span { color: #c9c4b7; font-size: .64rem; }
.top-bar strong { margin-top: 3px; font-size: .9rem; }

.phase-progress { height: 58px; padding: 7px 8px 5px; display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); background: var(--paper-light); }
.phase-progress button { min-width: 0; padding: 0; background: transparent; color: var(--muted); position: relative; }
.phase-progress button::after { content: ""; position: absolute; z-index: 0; top: 12px; left: 62%; width: 76%; height: 1px; background: var(--line); }
.phase-progress button:last-child::after { display: none; }
.phase-progress span { width: 25px; height: 25px; margin: 0 auto 3px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); display: grid; place-items: center; position: relative; z-index: 1; font-size: .68rem; font-weight: 900; }
.phase-progress b { display: block; font-size: .62rem; white-space: nowrap; }
.phase-progress .complete span { background: var(--moss); border-color: var(--moss); color: white; }
.phase-progress .active span { background: var(--wine); border-color: var(--wine); color: white; box-shadow: 0 0 0 3px rgba(138,52,65,.14); }
.phase-progress .active b { color: var(--wine); }

.context-scene { height: 142px; position: relative; overflow: hidden; background: var(--navy); }
.context-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.context-scene::after { content: ""; position: absolute; inset: 0; background: rgba(21,24,25,.35); }
.context-scene div { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; color: white; text-shadow: 0 2px 8px #171715; }
.context-scene small, .scene-banner small, .phase-heading small, .section-heading small, .settlement-hero small, .rental-screen > header small { color: #f1cf88; font-weight: 900; }
.context-scene h1 { max-width: 340px; margin: 3px 0 0; font-family: "STKaiti", "KaiTi", serif; font-size: 1.45rem; line-height: 1.15; }

.screen-body { padding: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.phase-screen, .secondary-screen, .rental-screen { min-height: 100%; padding: 12px 12px 88px; }
.scene-banner { height: 148px; margin: -12px -12px 12px; position: relative; overflow: hidden; background: var(--navy); color: white; }
.scene-banner img { width: 100%; height: 100%; object-fit: cover; }
.scene-banner::after { content: ""; position: absolute; inset: 0; background: rgba(21,25,26,.5); }
.scene-banner div { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; }
.scene-banner h2 { margin: 3px 0 4px; font-size: 1.24rem; }
.scene-banner p { max-width: 360px; margin: 0; color: #eee8dc; font-size: .76rem; line-height: 1.4; }

.phase-heading, .section-heading { min-height: 50px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.phase-heading h2, .section-heading h2 { margin: 2px 0 0; font-size: 1.18rem; }
.phase-heading strong, .section-heading > span { flex: none; padding: 5px 8px; border: 1px solid var(--line); background: var(--paper-light); color: var(--wine); font-size: .84rem; }
.compact-note { margin-bottom: 10px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.section-title { margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center; }
.section-title h3 { margin: 0; font-size: .9rem; }
.section-title span { color: var(--muted); font-size: .7rem; }
.section-block { margin: 12px 0; padding-top: 11px; border-top: 1px solid var(--line); }

.forecast-lead { display: grid; grid-template-columns: 1fr 1.15fr 1.25fr; border: 1px solid var(--line); background: var(--paper-light); }
.forecast-lead > div { min-width: 0; min-height: 92px; padding: 9px 6px; border-left: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; justify-content: center; }
.forecast-lead > div:first-child { border-left: 0; }
.forecast-lead span, .forecast-lead small { color: var(--muted); font-size: .65rem; }
.forecast-lead strong { margin: 3px 0; font-size: 1.38rem; }
.weather-seal > span { width: 34px; height: 34px; margin: 0 auto 4px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); display: grid; place-items: center; font-family: "KaiTi", serif; font-size: 1rem; font-weight: 900; }
.weather-seal b { font-size: .8rem; }
.fixed-pressure strong { color: var(--wine); font-size: 1rem; }
.mix-list { display: grid; gap: 7px; }
.mix-list > div { display: grid; grid-template-columns: 10px 50px 1fr 34px; gap: 7px; align-items: center; font-size: .72rem; }
.segment-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--wine); }
.swatch-2 { background: var(--moss); } .swatch-3 { background: var(--brass); }
meter { width: 100%; height: 7px; accent-color: var(--moss); }
.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.signal { min-height: 54px; padding: 7px; border: 1px solid var(--line); background: var(--paper-light); text-align: center; }
.signal span, .signal b { display: block; }
.signal span { color: var(--muted); font-size: .65rem; }
.signal b { margin-top: 5px; font-size: .78rem; }
.signal.good b { color: var(--moss); } .signal.risk b { color: var(--danger); }

.quality-stars { display: inline-flex !important; gap: 3px; vertical-align: middle; }
.quality-stars i { width: 9px; height: 9px; border: 1px solid var(--brass); transform: rotate(45deg); display: block; }
.quality-stars i.filled { background: var(--brass); }

.recipe-list, .market-list, .prep-list, .people-list, .warehouse-list, .journal-list, .shop-list { display: grid; gap: 8px; }
.recipe-row { min-height: 104px; padding: 9px 8px; border: 1px solid var(--line); background: var(--paper-light); display: grid; grid-template-columns: 24px 62px minmax(0, 1fr); gap: 8px; align-items: start; }
.recipe-row.selected { border-left: 4px solid var(--wine); padding-left: 5px; }
.recipe-row.locked { background: #ebe7de; color: #77736b; }
.recipe-select { padding-top: 19px; display: grid; place-items: center; }
.recipe-select input { position: absolute; opacity: 0; }
.recipe-select span { width: 20px; height: 20px; border: 2px solid var(--line); background: white; display: block; }
.recipe-select input:checked + span { background: var(--moss); border-color: var(--moss); box-shadow: inset 0 0 0 4px white; }
.dish-art, .dish-thumb { background-image: url("./assets/euro-food-board.png"); background-size: 300% 200%; background-repeat: no-repeat; }
.dish-art { width: 62px; aspect-ratio: 1; border: 1px solid var(--line); background-color: var(--paper-deep); }
.dish-thumb { width: 30px; height: 30px; border: 1px solid rgba(110,90,60,.35); display: block; flex: none; }
.dish-0 { background-position: 0 0; } .dish-1 { background-position: 50% 0; } .dish-2 { background-position: 100% 0; }
.dish-3 { background-position: 0 100%; } .dish-4 { background-position: 50% 100%; } .dish-5 { background-position: 100% 100%; }
.recipe-main { min-width: 0; }
.recipe-name { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.recipe-name h3 { margin: 2px 0 5px; font-size: .88rem; }
.star-button { width: 30px; height: 30px; padding: 0; background: transparent; color: #b9ad95; font-size: 1.2rem; }
.star-button.active { color: var(--brass); }
.materials { display: flex; flex-wrap: wrap; gap: 3px; }
.materials span { padding: 2px 4px; border: 1px solid #d8cdb7; background: #f2ecdf; color: #625e56; font-size: .59rem; white-space: nowrap; }
.materials span.short { border-color: #d6aaa4; background: #f2dfdc; color: var(--danger); }
.unlock-reason { margin: 3px 0; color: #796d62; font-size: .67rem; line-height: 1.4; }
.recipe-controls { grid-column: 1 / -1; margin-top: 7px; display: flex; justify-content: space-between; gap: 6px; }
.stepper { height: 34px; display: grid; grid-template-columns: 34px 42px 34px; border: 1px solid var(--line); background: white; }
.stepper button { min-width: 34px; padding: 0; background: var(--paper-deep); color: var(--ink); font-size: 1.1rem; }
.stepper input { width: 42px; min-width: 0; padding: 0; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { display: none; }
.segmented { display: grid; border: 1px solid var(--line); background: white; }
.price-segment { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented button { min-height: 32px; padding: 0 5px; border-left: 1px solid var(--line); background: white; color: var(--muted); font-size: .66rem; font-weight: 900; }
.segmented button:first-child { border-left: 0; }
.segmented button.active { background: var(--wine); color: white; }
.menu-summary { position: sticky; z-index: 7; top: 0; margin: 0 0 10px; padding: 9px; border: 1px solid var(--line); background: rgba(232,221,200,.97); display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.menu-summary div { min-width: 0; }
.menu-summary span, .menu-summary strong { display: block; }
.menu-summary span { color: var(--muted); font-size: .61rem; }
.menu-summary strong { margin-top: 2px; overflow-wrap: anywhere; font-size: .75rem; }

.market-summary { margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr 100px; border: 1px solid var(--line); background: var(--paper-light); }
.market-summary > div { padding: 7px; border-right: 1px solid var(--line); }
.market-summary span, .market-summary b { display: block; }
.market-summary span { color: var(--muted); font-size: .62rem; }
.market-summary b { margin-top: 3px; font-size: .78rem; }
.market-summary button, .quantity-buy > button, .person-row > button { background: var(--moss); color: white; font-weight: 900; }
.market-row { min-height: 92px; padding: 8px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 36px minmax(0, 1fr) 106px; gap: 8px; align-items: center; }
.market-row.needed { background: var(--paper-light); }
.market-row.complete { opacity: .68; }
.ingredient-mark, .person-mark { width: 36px; height: 36px; border: 1px solid var(--brass); border-radius: 50%; background: var(--paper-deep); color: var(--wine); display: grid; place-items: center; font-family: "KaiTi", serif; font-weight: 900; }
.market-main { min-width: 0; }
.market-main > div { display: flex; justify-content: space-between; gap: 5px; }
.market-main h3 { margin: 0; font-size: .82rem; }
.market-main p { margin: 3px 0; color: var(--muted); font-size: .66rem; }
.market-main p b { color: var(--danger); }
.market-main small { color: var(--muted); font-size: .61rem; }
.quantity-buy { display: grid; gap: 4px; }
.quantity-buy .stepper { width: 106px; grid-template-columns: 32px 40px 32px; height: 30px; }
.quantity-buy .stepper button { min-width: 32px; }
.quantity-buy .stepper input { width: 40px; }
.quantity-buy > button { min-height: 30px; padding: 3px; font-size: .63rem; }
.speculative-stock { margin-top: 12px; border-top: 1px solid var(--line); }
.speculative-stock summary { min-height: 44px; padding: 12px 2px; cursor: pointer; font-size: .8rem; font-weight: 900; }
.speculative-stock summary span { float: right; color: var(--muted); font-size: .66rem; font-weight: 400; }

.work-meter { padding: 10px; border: 1px solid var(--line); background: var(--paper-light); }
.work-meter > div { display: flex; justify-content: space-between; font-size: .76rem; }
.work-meter progress { width: 100%; height: 10px; margin: 6px 0; accent-color: var(--moss); }
.work-meter p { margin: 0; color: var(--muted); font-size: .66rem; }
.prep-list { margin-top: 10px; }
.prep-row { min-height: 64px; padding: 8px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.prep-row .dish-thumb { width: 42px; height: 42px; }
.prep-row h3 { margin: 0 0 3px; font-size: .82rem; }
.prep-row p { margin: 0; color: var(--muted); font-size: .66rem; }
.prep-tags { display: grid; gap: 3px; justify-items: end; }
.prep-tags span { padding: 3px 5px; border: 1px solid var(--line); background: var(--paper-deep); font-size: .59rem; }
.prep-tags .ready { color: var(--moss); } .prep-tags .live { color: var(--brass); } .prep-tags .short { color: var(--danger); }
.alert-banner { margin-top: 10px; padding: 9px; border-left: 4px solid var(--danger); background: #f0ded9; }
.alert-banner b, .alert-banner span { display: block; }
.alert-banner b { font-size: .78rem; }.alert-banner span { margin-top: 2px; color: var(--muted); font-size: .66rem; }

.service-screen { padding-top: 8px; background: #e8dfce; }
.service-hud { display: grid; grid-template-columns: 1fr 1fr 106px; border: 1px solid #9d8c6e; background: var(--navy); color: white; }
.service-hud > div { min-width: 0; min-height: 48px; padding: 6px; border-left: 1px solid rgba(255,255,255,.16); }
.service-hud > div:first-child { border-left: 0; }
.service-hud span, .service-hud b { display: block; white-space: nowrap; }
.service-hud span { color: #c9c4b7; font-size: .58rem; }.service-hud b { margin-top: 4px; font-size: .72rem; }
.speed-control { padding: 6px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.speed-control button { background: #515d63; color: white; font-size: .68rem; font-weight: 900; }
.speed-control button.active { background: var(--brass); color: #201d16; }
.wave-track { height: 42px; padding: 7px 12px 3px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper-light); }
.wave-track > div { text-align: center; position: relative; color: var(--muted); }
.wave-track > div::after { content: ""; position: absolute; top: 5px; left: 58%; width: 84%; height: 1px; background: var(--line); }
.wave-track > div:last-child::after { display: none; }
.wave-track span { width: 11px; height: 11px; margin: 0 auto 3px; border: 2px solid var(--line); border-radius: 50%; background: white; display: block; position: relative; z-index: 1; }
.wave-track b { display: block; font-size: .58rem; }
.wave-track .complete span { background: var(--moss); border-color: var(--moss); }.wave-track .active span { background: var(--wine); border-color: var(--wine); }
.restaurant-stage { height: 318px; margin: 0 -12px; position: relative; overflow: hidden; background: #3b342c; }
.restaurant-stage > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-shade { position: absolute; inset: 0; background: rgba(21,22,19,.18); }
.queue-zone { position: absolute; left: 5px; bottom: 18px; width: 65px; min-height: 140px; padding: 3px; border-left: 2px solid rgba(255,255,255,.7); }
.queue-zone small { padding: 2px 4px; background: rgba(30,35,36,.85); color: white; font-size: .55rem; }
.table-zone { position: absolute; inset: 36px 80px 24px 69px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; align-content: center; }
.service-table { min-width: 58px; min-height: 42px; border: 4px solid #4b2d20; border-radius: 50%; background: #956641; box-shadow: 0 5px 0 #382318; position: relative; display: flex; justify-content: center; gap: 2px; }
.service-table > span { color: #ead8b7; font-size: .55rem; }
.service-table.resetting { opacity: .64; }.service-table.ready { filter: saturate(.75); }
.guest-token { width: 22px; height: 34px; border: 2px solid #473529; border-radius: 11px 11px 5px 5px; background: var(--wine); position: relative; flex: none; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.guest-token i { width: 12px; height: 12px; margin: 2px auto 0; border-radius: 50%; background: #e5c5a0; display: block; }
.segment-craftspeople, .segment-knights { background: #496073; }.segment-merchants, .segment-nobles { background: #725b85; }.segment-travelers, .segment-special { background: #49725a; }.segment-ladies { background: #9a5568; }
.guest-token meter { position: absolute; left: -2px; right: -2px; bottom: -6px; width: 22px; height: 4px; accent-color: #74b269; }
.order-bubble { position: absolute; left: 13px; top: -14px; width: 26px; height: 26px; border: 1px solid #62513d; border-radius: 50%; background: white; display: grid; place-items: center; }
.order-bubble::after { content: ""; position: absolute; left: 2px; bottom: -4px; width: 6px; height: 6px; background: white; transform: rotate(45deg); }
.order-bubble .dish-thumb { width: 19px; height: 19px; border-radius: 50%; position: relative; z-index: 1; }
.table-zone .guest-token { margin-top: -24px; }
.queue-zone .guest-token { margin: 7px 0 0 calc(var(--guest) * 7px); }
.free-guests { position: absolute; left: 76px; right: 86px; bottom: 4px; display: flex; gap: 5px; }
.kitchen-window { position: absolute; top: 12px; right: 4px; width: 78px; min-height: 126px; padding: 6px; background: rgba(38,49,58,.9); color: white; }
.kitchen-window > small { display: block; margin-bottom: 5px; color: #e8cc91; font-size: .58rem; font-weight: 900; }
.kitchen-window > p { color: #d8d1c3; font-size: .55rem; }
.ticket { min-height: 28px; margin-top: 3px; padding: 3px; background: #f7f0df; color: var(--ink); display: grid; grid-template-columns: 22px 1fr; gap: 3px; align-items: center; }
.ticket .dish-thumb { width: 22px; height: 22px; }.ticket b { overflow: hidden; font-size: .48rem; line-height: 1.2; }.ticket.cooking { border-left: 3px solid var(--brass); }
.command-dock { margin-top: 8px; border: 1px solid var(--line); background: var(--paper-light); }
.command-dock header { padding: 6px 8px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: .68rem; }
.command-dock header span { color: var(--wine); font-weight: 900; }
.command-dock > div { display: grid; grid-template-columns: repeat(4, 1fr); }
.command-dock button { min-height: 58px; padding: 4px 2px; border-left: 1px solid var(--line); background: white; color: var(--ink); }
.command-dock button:first-child { border-left: 0; }
.command-dock button i { width: 25px; height: 25px; margin: 0 auto 3px; border: 1px solid var(--brass); border-radius: 50%; color: var(--wine); display: grid; place-items: center; font-family: "KaiTi", serif; font-style: normal; font-weight: 900; }
.command-dock button span { display: block; font-size: .55rem; font-weight: 900; white-space: nowrap; }
.text-button { background: transparent; color: var(--wine); text-decoration: underline; }
.skip-service { width: 100%; min-height: 40px; margin-top: 5px; font-size: .68rem; }

.settlement-screen { background: var(--paper); }
.settlement-hero { margin: -12px -12px 10px; padding: 18px 14px 14px; background: var(--navy); color: white; text-align: center; }
.settlement-hero h2 { margin: 4px 0; font-family: "KaiTi", serif; font-size: 1.3rem; }
.settlement-hero > strong { display: block; font-size: 2rem; }
.settlement-hero p { margin: 6px 0 0; color: #d7d0c4; font-size: .66rem; }
.settlement-tabs { height: 40px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.settlement-tabs button { border-left: 1px solid var(--line); background: white; color: var(--muted); font-size: .72rem; font-weight: 900; }
.settlement-tabs button:first-child { border-left: 0; }.settlement-tabs button.active { background: var(--wine); color: white; }
.ledger-list { margin: 10px 0; }
.ledger-list > div { min-height: 35px; padding: 7px 4px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-size: .75rem; }
.ledger-list dd { font-weight: 900; }.ledger-list .total { margin-top: 5px; padding: 10px 7px; border: 1px solid var(--brass); background: var(--paper-deep); font-size: .86rem; }
.positive { color: var(--moss) !important; }.negative { color: var(--danger) !important; }
.dish-ledger { margin-top: 9px; }.dish-ledger article { min-height: 60px; padding: 7px 2px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; }
.dish-ledger .dish-thumb { width: 42px; height: 42px; }.dish-ledger h3 { margin: 0 0 3px; font-size: .78rem; }.dish-ledger p { margin: 0; color: var(--muted); font-size: .61rem; }.dish-ledger strong { font-size: .72rem; }
.loss-ledger { margin: 10px 0; }.loss-total { min-height: 62px; padding: 9px; border: 1px solid var(--line); background: var(--paper-light); text-align: center; }.loss-total span, .loss-total strong { display: block; }.loss-total span { color: var(--muted); font-size: .65rem; }.loss-total strong { margin-top: 2px; color: var(--wine); font-size: 1.6rem; }
.loss-ledger > div:not(.loss-total) { min-height: 35px; display: grid; grid-template-columns: 76px 1fr 26px; gap: 8px; align-items: center; font-size: .68rem; }
.diagnostic { margin-top: 10px; padding: 10px; border-left: 4px solid var(--brass); background: var(--paper-deep); }
.diagnostic span, .diagnostic b { display: block; }.diagnostic span { color: var(--muted); font-size: .62rem; }.diagnostic b { margin-top: 3px; font-size: .78rem; }.diagnostic p { margin: 4px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }

.rental-screen > header { margin-bottom: 10px; }.rental-screen > header h2 { margin: 3px 0 5px; font-size: 1.22rem; }.rental-screen > header p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.shop-row { padding: 11px; border: 1px solid var(--line); background: var(--paper-light); }.shop-row.locked { opacity: .65; }
.shop-row-head { display: flex; justify-content: space-between; gap: 8px; }.shop-row-head small { color: var(--wine); font-weight: 900; }.shop-row-head h3 { margin: 2px 0; font-size: .98rem; }.shop-row-head p { margin: 0; color: var(--muted); font-size: .65rem; }.shop-row-head > strong { color: var(--wine); white-space: nowrap; font-size: .8rem; }
.shop-row > p { margin: 8px 0; color: var(--muted); font-size: .7rem; line-height: 1.4; }.shop-row dl { margin-bottom: 9px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper-deep); }.shop-row dl div { padding: 5px; border-left: 1px solid var(--line); text-align: center; }.shop-row dl div:first-child { border-left: 0; }.shop-row dt { color: var(--muted); font-size: .59rem; }.shop-row dd { margin: 2px 0 0; font-size: .74rem; font-weight: 900; }

.person-row { min-height: 78px; padding: 9px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 42px minmax(0, 1fr) 62px; gap: 8px; align-items: center; }.person-row .person-mark { width: 42px; height: 42px; }.person-row h3 { margin: 0 0 3px; font-size: .82rem; }.person-row p { margin: 0 0 3px; color: var(--muted); font-size: .64rem; }.person-row small { color: var(--muted); font-size: .58rem; }.person-row > button { min-height: 36px; padding: 4px; font-size: .66rem; }.staff-row { grid-template-columns: 42px 1fr; }
.staff-meter { height: 5px; margin: 5px 0 3px; background: var(--paper-deep); }.staff-meter span { height: 100%; background: var(--moss); display: block; }
.warehouse-list { grid-template-columns: 1fr 1fr; }.warehouse-list article { min-height: 64px; padding: 8px; border: 1px solid var(--line); background: var(--paper-light); display: grid; grid-template-columns: 36px 1fr auto; gap: 7px; align-items: center; }.warehouse-list h3 { margin: 0; font-size: .75rem; }.warehouse-list p { margin: 3px 0 0; color: var(--muted); font-size: .58rem; }.warehouse-list strong { color: var(--wine); }
.journal-list article { padding: 9px 3px; border-bottom: 1px solid var(--line); }.journal-list small { color: var(--wine); font-size: .58rem; }.journal-list h3 { margin: 3px 0; font-size: .8rem; }.journal-list p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }

.primary-button { width: 100%; min-height: 46px; padding: 8px 12px; background: var(--wine); color: white; font-weight: 900; }
.sticky-action { position: fixed; z-index: 8; left: 50%; bottom: calc(62px + env(safe-area-inset-bottom)); width: min(calc(100vw - 16px), 414px); margin: 0; padding: 8px 4px; background: rgba(245,240,228,.97); border-top: 1px solid var(--line); transform: translateX(-50%); }
.empty-line { min-height: 90px; padding: 30px 10px; border: 1px dashed var(--line); color: var(--muted); text-align: center; font-size: .74rem; }
.empty-state { padding: 45px 18px; text-align: center; }.empty-mark { width: 58px; height: 58px; margin: 0 auto 12px; border: 1px solid var(--brass); border-radius: 50%; color: var(--wine); display: grid; place-items: center; font-family: "KaiTi", serif; font-size: 1.6rem; }.empty-state h2 { margin-bottom: 6px; }.empty-state p { color: var(--muted); font-size: .74rem; }.empty-state .primary-button { max-width: 220px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-light); color: var(--wine); font-weight: 900; }.danger-button { width: 100%; min-height: 42px; margin-top: 18px; border: 1px solid var(--danger); background: transparent; color: var(--danger); font-weight: 900; }

.bottom-nav { grid-row: 5; min-height: 62px; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; background: var(--navy); }
.bottom-nav button { min-width: 0; background: transparent; color: #c8c5bd; }
.bottom-nav i { width: 25px; height: 25px; margin: 0 auto 2px; border: 1px solid #7f888d; border-radius: 50%; display: grid; place-items: center; font-family: "KaiTi", serif; font-size: .7rem; font-style: normal; }
.bottom-nav span { display: block; font-size: .58rem; font-weight: 900; }.bottom-nav button.active { color: #f1cf88; }.bottom-nav button.active i { border-color: #f1cf88; background: #f1cf88; color: var(--navy); }

.intro-overlay { position: absolute; z-index: 30; inset: 0; overflow: hidden; background: var(--navy); display: flex; align-items: end; }
.intro-overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-shade { position: absolute; inset: 0; background: rgba(20,22,24,.46); }
.intro-copy { position: relative; z-index: 1; width: 100%; margin: 0 12px max(12px, env(safe-area-inset-bottom)); padding: 15px; border-top: 3px solid var(--brass); background: rgba(255,253,247,.95); }
.intro-copy small { color: var(--wine); font-weight: 900; }.intro-copy h1 { margin: 4px 0 8px; font-family: "KaiTi", serif; font-size: 1.6rem; }.intro-copy p { color: #56534d; font-size: .82rem; line-height: 1.6; }
.intro-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 12px 0; }.intro-progress span { height: 4px; background: var(--paper-deep); }.intro-progress span.active { background: var(--wine); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 76px; width: min(calc(100vw - 30px), 398px); padding: 11px 13px; background: var(--navy); color: white; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 20px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; font-size: .76rem; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Staff and progression management */
.management-screen { min-height: 100%; padding: 0 12px 88px; background: #f5f0e4; }
.management-tabs { position: sticky; z-index: 9; top: 0; margin: 0 -12px; padding: 5px 6px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; border-bottom: 1px solid var(--line); background: rgba(255,253,247,.98); }
.management-tabs button { min-width: 0; min-height: 44px; padding: 4px 2px; background: transparent; color: var(--muted); font-size: .65rem; font-weight: 900; }
.management-tabs button.active { background: var(--wine); color: white; }
.management-hero { height: 152px; margin: 0 -12px 12px; position: relative; overflow: hidden; background: var(--navy); color: white; }
.management-hero > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.management-hero::after { content: ""; position: absolute; inset: 0; background: rgba(25,29,29,.43); }
.management-hero > div { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; text-shadow: 0 2px 8px #171715; }
.management-hero small { color: #f1cf88; font-weight: 900; }
.management-hero h1 { margin: 3px 0 0; font-family: "KaiTi", serif; font-size: 1.42rem; line-height: 1.15; }
.management-hero p { margin: 3px 0 0; color: #f3eee5; font-size: .72rem; }
.management-hero .owner-portrait { position: absolute; z-index: 3; right: 12px; bottom: 0; width: 72px; height: 102px; object-fit: cover; object-position: 50% 20%; border: 2px solid #e8c67c; border-bottom: 0; }

.candidate-list, .staff-list, .equipment-list, .relocation-list, .expedition-list, .debt-list { display: grid; gap: 9px; }
.candidate-row { min-height: 142px; padding: 9px; border: 1px solid var(--line); background: var(--paper-light); display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; align-items: start; }
.staff-portrait { width: 58px; height: 76px; border: 1px solid #9a815b; background-color: #d6c6aa; background-image: url("./assets/euro-staff-roster.webp"); background-repeat: no-repeat; background-size: 500% 100%; }
.portrait-0 { background-position: 0 0; }.portrait-1 { background-position: 25% 0; }.portrait-2 { background-position: 50% 0; }.portrait-3 { background-position: 75% 0; }.portrait-4 { background-position: 100% 0; }
.candidate-main { min-width: 0; }
.candidate-title span, .staff-record-head span { color: var(--wine); font-size: .62rem; font-weight: 900; }
.candidate-title h2, .staff-record-head h2 { margin: 2px 0 5px; overflow-wrap: anywhere; font-size: .86rem; }
.compact-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ded3bf; border-bottom: 1px solid #ded3bf; }
.compact-facts div { min-width: 0; padding: 5px 3px; border-left: 1px solid #ded3bf; }
.compact-facts div:first-child { border-left: 0; }
.compact-facts dt { color: var(--muted); font-size: .56rem; }.compact-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: .66rem; font-weight: 900; }
.skill-line, .unlock-line { margin: 5px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }.skill-line b, .unlock-line b { color: var(--ink); }
.candidate-row > button { align-self: stretch; min-height: 72px; padding: 4px; background: var(--moss); color: white; font-size: .68rem; font-weight: 900; }

.staff-record { padding: 10px; border: 1px solid var(--line); background: var(--paper-light); }
.staff-record-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.staff-record-head p { margin: 0; color: var(--muted); font-size: .66rem; }.staff-record-head strong { max-width: 75px; color: var(--moss); font-size: .7rem; text-align: right; }
.staff-vitals { margin-top: 8px; padding: 7px 0; border-top: 1px solid #ded3bf; border-bottom: 1px solid #ded3bf; display: grid; grid-template-columns: 1.4fr repeat(3, auto); gap: 7px; align-items: center; font-size: .62rem; }
.staff-vitals label { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; align-items: center; }.staff-vitals meter { min-width: 35px; }
.contribution-line { margin: 7px 0; color: var(--muted); font-size: .66rem; }.contribution-line b { color: var(--ink); }
.staff-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6px; }.staff-actions button { min-height: 44px; padding: 5px; border: 1px solid var(--line); background: var(--paper-deep); color: var(--ink); font-size: .65rem; font-weight: 900; }.staff-actions button:last-child { background: var(--moss); color: white; }

.equipment-category, .relocation-row, .expedition-row, .debt-row { padding: 10px; border: 1px solid var(--line); background: var(--paper-light); }
.equipment-category > header, .relocation-row > header, .expedition-row > header, .debt-row > header { display: flex; justify-content: space-between; gap: 9px; align-items: start; }
.equipment-category h2, .relocation-row h2, .expedition-row h2, .debt-row h2 { margin: 2px 0 0; overflow-wrap: anywhere; font-size: .82rem; }
.equipment-category small, .relocation-row small, .expedition-row small { color: var(--wine); font-size: .6rem; font-weight: 900; }
.equipment-category header > strong, .relocation-row header > strong, .expedition-row header > strong, .debt-row header > strong { flex: none; color: var(--moss); font-size: .72rem; }
.equipment-compare { margin: 8px 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ded3bf; }
.equipment-compare div { min-width: 0; padding: 6px; }.equipment-compare div + div { border-left: 1px solid #ded3bf; }.equipment-compare span, .equipment-compare b { display: block; }.equipment-compare span { color: var(--muted); font-size: .58rem; }.equipment-compare b { margin-top: 3px; overflow-wrap: anywhere; font-size: .66rem; }
.requirements, .gate-reasons { margin: 0 0 7px; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.equipment-category > button, .relocation-row > button { width: 100%; min-height: 44px; padding: 6px; background: var(--moss); color: white; font-size: .7rem; font-weight: 900; }

.relocation-row > p { margin: 4px 0 7px; color: var(--muted); font-size: .65rem; }
.shop-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #ded3bf; border-left: 1px solid #ded3bf; }
.shop-facts div { min-width: 0; padding: 6px; border-right: 1px solid #ded3bf; border-bottom: 1px solid #ded3bf; }.shop-facts dt { color: var(--muted); font-size: .56rem; }.shop-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; font-size: .64rem; font-weight: 900; }
.gate-reasons { margin-top: 7px; color: var(--danger); }

.active-expeditions, .last-outcome { margin: 0 0 9px; padding: 8px; border-left: 3px solid var(--brass); background: #eee4d0; font-size: .66rem; line-height: 1.45; }.active-expeditions p { margin: 0; }
.expedition-row dl { margin: 8px 0; display: grid; grid-template-columns: 72px 1fr; font-size: .64rem; }.expedition-row dl div { display: contents; }.expedition-row dt, .expedition-row dd { padding: 5px; border-bottom: 1px solid #ded3bf; }.expedition-row dt { color: var(--muted); }.expedition-row dd { margin: 0; overflow-wrap: anywhere; font-weight: 900; }
.expedition-action { display: grid; grid-template-columns: 1fr 92px; gap: 7px; align-items: end; }.expedition-action label { color: var(--muted); font-size: .6rem; }.expedition-action select { width: 100%; min-height: 44px; margin-top: 3px; border: 1px solid var(--line); background: white; color: var(--ink); font-size: .66rem; }.expedition-action button { min-height: 44px; padding: 5px; background: var(--moss); color: white; font-size: .68rem; font-weight: 900; }
.debt-row progress { width: 100%; height: 12px; margin: 9px 0; accent-color: var(--wine); }.debt-row p { margin: 0; color: var(--muted); font-size: .65rem; }
.management-empty { min-height: 150px; padding: 35px 12px; border: 1px dashed var(--line); text-align: center; }.management-empty h2 { font-size: 1rem; }.management-empty p { color: var(--muted); font-size: .7rem; }.management-empty button { min-height: 44px; padding: 8px 18px; background: var(--wine); color: white; font-weight: 900; }

.modal-layer { position: absolute; z-index: 40; inset: 0; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); background: rgba(24,27,28,.78); display: grid; place-items: center; }
.event-dialog, .king-dialog { width: 100%; max-height: 100%; overflow-y: auto; outline: 0; border: 1px solid #d9bd7c; background: var(--paper-light); box-shadow: var(--shadow); }
.event-dialog > img, .king-dialog > img { width: 100%; height: min(30vh, 230px); object-fit: cover; display: block; }
.event-copy, .king-copy { padding: 12px; }.event-copy small, .king-copy small { color: var(--wine); font-weight: 900; }.event-copy h1, .king-copy h1 { margin: 3px 0 7px; font-family: "KaiTi", serif; font-size: 1.28rem; }.event-copy p, .king-copy p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }
.event-options { padding: 0 12px 12px; display: grid; gap: 7px; }.event-options button { min-height: 60px; padding: 8px 10px; border: 1px solid var(--line); background: #e8efe4; color: var(--ink); text-align: left; }.event-options b, .event-options span, .event-options small { display: block; }.event-options b { font-size: .75rem; }.event-options span { margin-top: 4px; color: #4e6454; font-size: .63rem; line-height: 1.4; }.event-options small { margin-top: 3px; color: var(--wine); font-size: .6rem; }
.dialog-required { margin: 9px 0 0 !important; padding: 7px 8px; border-left: 3px solid var(--danger); background: #f3dfdc; color: var(--danger) !important; font-weight: 900; }.dialog-required[hidden] { display: none; }
.king-dialog > img { height: min(46vh, 360px); object-position: center 24%; }.king-copy { padding: 14px; }.chapter-preview { margin: 12px 0; padding: 10px; border-left: 3px solid var(--brass); background: #e6eadf; }.chapter-preview b, .chapter-preview span { display: block; }.chapter-preview b { color: var(--moss); font-size: .75rem; }.chapter-preview span { margin-top: 4px; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.bottom-nav { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 700px) {
  body { padding: 18px 0; }
  .phone-shell { height: calc(100dvh - 36px); border: 1px solid #555; }
  .sticky-action { bottom: 80px; }
}

@media (max-width: 380px) {
  .phase-progress b { font-size: .56rem; }
  .market-row { grid-template-columns: 34px minmax(0, 1fr); }
  .quantity-buy { grid-column: 1 / -1; grid-template-columns: 106px 1fr; }
  .recipe-controls { flex-direction: column; }
  .menu-summary { grid-template-columns: 1fr 1fr; }
  .restaurant-stage { height: 300px; }
}

@media (max-width: 400px) {
  .management-tabs button { font-size: .6rem; }
  .candidate-row { grid-template-columns: 52px minmax(0, 1fr); }
  .candidate-row > button { grid-column: 1 / -1; min-height: 44px; }
  .staff-portrait { width: 52px; height: 70px; }
  .staff-vitals { grid-template-columns: 1fr 1fr; }
  .staff-vitals label { grid-column: 1 / -1; }
  .expedition-action { grid-template-columns: 1fr; }
  .event-dialog > img { height: 24vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}