:root {
  color-scheme: light;
  --paper: #e9ddbd;
  --paper-deep: #cfbb8b;
  --ink: #28251e;
  --ink-soft: #625b49;
  --night: #314230;
  --panel: rgba(226, 210, 168, 0.9);
  --panel-soft: rgba(211, 190, 140, 0.88);
  --line: rgba(71, 56, 31, 0.22);
  --line-bright: rgba(109, 78, 30, 0.48);
  --text: #2c291f;
  --muted: #6f654f;
  --gold: #d4a94f;
  --gold-pale: #efd28a;
  --jade: #79916b;
  --good: #9cbd7c;
  --warn: #d8a04a;
  --danger: #c76750;
  --shadow: 0 12px 34px rgba(48, 42, 25, 0.18), 0 2px 7px rgba(48, 42, 25, 0.12);
  --radius: 10px;
}

* { box-sizing: border-box; }

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  color: var(--text);
  background: #b9c99b;
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button {
  appearance: none;
  color: inherit;
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible,
canvas:focus-visible {
  outline: 2px solid var(--gold-pale);
  outline-offset: 3px;
}

h1, h2, h3, p { margin: 0; }

.ui-surface {
  border: 1px solid rgba(76, 55, 27, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 45%),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
}

.ui-surface::after {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgba(231, 206, 143, 0.055);
  border-radius: inherit;
}

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #dce5bf, #b7c794 58%, #93aa73);
}

#viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 24%, transparent 84%, rgba(73,91,50,.1));
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#app[data-tool]:not([data-tool="inspect"]) #game { cursor: crosshair; }
#app.is-dragging #game { cursor: grabbing; }

.loading-card {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100vw - 36px));
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  padding: 20px;
  color: var(--text);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: rgba(25, 29, 23, 0.96);
  box-shadow: 0 30px 100px rgba(0,0,0,.62);
  transition: opacity .35s ease, transform .35s ease;
}

.loading-card.is-hidden { opacity: 0; transform: translate(-50%, -48%); pointer-events: none; }
.loading-seal, .seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px 4px 8px 4px;
  color: #f6e3b6;
  background: #8d342b;
  border: 1px solid rgba(255, 226, 170, .28);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.06);
  font-weight: 800;
  font-size: 21px;
}
.loading-card strong { display:block; font-size: 17px; letter-spacing: .06em; }
.loading-card span:not(.loading-seal) { display:block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.loading-line { grid-column: 1 / -1; height: 2px; overflow: hidden; background: rgba(255,255,255,.08); }
.loading-line::after { content:""; display:block; width:38%; height:100%; background: var(--gold); animation: loading 1.2s ease-in-out infinite; }
@keyframes loading { 0%{transform:translateX(-110%)} 100%{transform:translateX(360%)} }

.topbar {
  position: fixed;
  z-index: 10;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  top: max(14px, env(safe-area-inset-top));
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(180px, 230px) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 9px;
  border-radius: 11px;
}

.city-mark {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:0;
  text-align:left;
  background:transparent;
}
.city-title { min-width: 0; }
.city-title strong { display:block; font-size:16px; letter-spacing:.13em; white-space:nowrap; }
.city-title small { display:block; margin-top:3px; color:var(--muted); font-size:11px; letter-spacing:.08em; }

.resources {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.resource {
  position:relative;
  min-width: 76px;
  padding: 3px 9px 3px 28px;
  border-left: 1px solid var(--line);
}
.resource:first-child { border-left:0; }
.resource-icon {
  position:absolute;
  left:7px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  color:#2b2619;
  overflow:hidden;
  background:#6f5229;
  border:1px solid rgba(230,198,126,.46);
  border-radius:5px;
  font-size:10px;
  font-style:normal;
  font-weight:800;
}
.resource-icon svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.resource-icon img { width:100%; height:100%; object-fit:cover; }
.resource span { display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; }
.resource b { display:block; margin-top:1px; font-family: Georgia, serif; font-size:15px; font-variant-numeric: tabular-nums; }
.resource.delta-up b::after { content:"↑"; margin-left:4px; color:var(--good); font-size:10px; }
.resource.delta-down b::after { content:"↓"; margin-left:4px; color:var(--danger); font-size:10px; }

.time-controls { display:flex; align-items:center; gap:8px; }
.icon-button,
.speed button,
.map-controls button {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(255,255,255,.045);
  border-radius:9px;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.icon-button svg, .speed svg, .map-controls svg, .orientation-tools svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.game-icon-button, .map-controls button { overflow:hidden; padding:2px; }
.game-icon-button img, .map-controls button img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
#audioButton .audio-off { display:none; }
#audioButton[aria-pressed="false"] .audio-on { display:none; }
#audioButton[aria-pressed="false"] .audio-off { display:block; }
#audioButton[aria-pressed="false"] { color:#9b6b5f; }
.icon-button:hover, .speed button:hover, .speed button.active, .map-controls button:hover {
  color:var(--gold-pale);
  border-color:var(--line-bright);
  background:rgba(212,169,79,.12);
}
.icon-button:active, .speed button:active, .map-controls button:active { transform:scale(.92); }
.speed { display:flex; gap:4px; padding:3px; border-radius:11px; background:rgba(0,0,0,.16); }
.speed button { width:30px; height:28px; border:0; border-radius:7px; font-family:Georgia,serif; font-size:12px; }

.objectives {
  position:fixed;
  z-index:8;
  top:82px;
  left:max(18px, env(safe-area-inset-left));
  width:238px;
  border-radius:var(--radius);
  overflow:hidden;
  transition: max-height .25s ease, transform .25s ease;
}

.overview-card {
  position:fixed;
  z-index:8;
  top:88px;
  right:18px;
  width:154px;
  padding:12px 13px 10px;
  border-radius:4px;
}
.overview-card h2 { padding-bottom:8px; border-bottom:1px solid rgba(83,62,31,.22); text-align:center; font-size:14px; letter-spacing:.16em; }
.overview-card dl { margin:6px 0 0; }
.overview-card dl div { display:flex; justify-content:space-between; gap:10px; padding:5px 2px; font-size:11px; }
.overview-card dt { color:#544832; }
.overview-card dd { margin:0; color:#405d34; font-family:Georgia,"Songti SC",serif; font-weight:700; font-variant-numeric:tabular-nums; }

.side-rail { position:fixed; z-index:9; right:19px; top:295px; display:grid; gap:7px; }
.side-rail button { width:58px; min-height:62px; display:grid; place-items:center; gap:2px; padding:4px; color:#e6d6aa; background:linear-gradient(180deg,#4c412e,#29271f); border:2px solid #a57d3f; box-shadow:0 4px 10px rgba(38,31,20,.28); }
.side-rail b { display:grid; place-items:center; width:40px; height:40px; overflow:hidden; border:1px solid rgba(231,205,142,.48); border-radius:50%; font-size:13px; }
.side-rail b img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.side-rail span { font-size:9px; letter-spacing:.08em; }
.side-rail button:hover { transform:translateX(-2px); filter:brightness(1.12); }
.section-heading {
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 12px;
  color:var(--text);
  background:transparent;
  font-size:13px;
  letter-spacing:.08em;
}
.section-heading span { display:flex; align-items:center; gap:8px; }
.section-heading b { color:var(--gold-pale); font-family:Georgia,serif; font-size:12px; }
.ink-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,169,79,.1); }
.quest-list { max-height:200px; overflow:hidden; padding:0 10px 9px; transition:max-height .25s ease, padding .25s ease; }
.objectives.is-collapsed .quest-list { max-height:0; padding-top:0; padding-bottom:0; }
.quest {
  width:100%;
  display:grid;
  grid-template-columns:18px 1fr;
  gap:8px;
  padding:5px 3px;
  color:var(--muted);
  font-size:11px;
  border-top:1px solid rgba(255,255,255,.045);
  border-right:0;
  border-bottom:0;
  border-left:0;
  text-align:left;
  background:transparent;
}
.quest:not(:disabled):hover { color:#6f5125; background:rgba(184,132,57,.07); }
.quest:disabled { cursor:default; }
.quest i { display:grid; place-items:center; width:16px; height:16px; margin-top:1px; border:1px solid var(--line-bright); border-radius:50%; font-style:normal; font-size:9px; }
.quest.done { color:var(--good); }
.quest.done i { color:#182017; background:var(--good); border-color:var(--good); }
.quest-deadline { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; padding:8px 4px 0; border-top:1px solid rgba(93,66,28,.14); color:#7d5c28; font-size:10px; font-weight:700; letter-spacing:.05em; }
.quest-deadline button { min-height:28px; padding:0 9px; border:1px solid rgba(130,83,28,.28); border-radius:7px; color:#623e19; background:linear-gradient(180deg,#f0dba3,#d8b765); font-size:9px; font-weight:700; }
.quest-deadline button:hover { transform:translateY(-1px); filter:saturate(1.1); }
.quest-deadline.done { color:#647b52; }

.drawer {
  position:fixed;
  z-index:14;
  top:96px;
  bottom:92px;
  width:min(360px, calc(100vw - 36px));
  padding:18px;
  overflow:auto;
  border-radius:18px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,219,181,.2) transparent;
}
.city-drawer { left:max(18px, env(safe-area-inset-left)); transform:translateX(calc(-100% - 36px)); opacity:0; }
.inspector { right:max(18px, env(safe-area-inset-right)); transform:translateX(calc(100% + 36px)); opacity:0; }
.drawer.is-open { transform:translateX(0); opacity:1; }
.drawer-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.drawer h2 { margin-top:3px; font-size:23px; font-weight:600; letter-spacing:.08em; }
.eyebrow { color:var(--gold); font-size:10px; letter-spacing:.18em; }
.close-drawer { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:50%; font-size:20px; line-height:1; }
.close-drawer img { width:30px; height:30px; object-fit:contain; mix-blend-mode:multiply; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stat { position:relative; padding:12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.035); }
.stat span { display:block; color:var(--muted); font-size:11px; }
.stat b { display:block; margin-top:4px; font-family:Georgia,"Songti SC",serif; font-size:20px; font-weight:500; }
.drawer-section { position:relative; z-index:1; margin-top:22px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.section-title h3 { font-size:13px; letter-spacing:.08em; }
.section-title span { color:var(--gold); font-size:10px; }
.needs-list { display:grid; gap:7px; }
.need { display:grid; grid-template-columns:56px 1fr 34px; gap:8px; align-items:center; color:var(--muted); font-size:11px; }
.need-track { height:5px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.075); }
.need-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--jade),var(--gold)); transition:width .35s ease; }
.need b { color:var(--text); text-align:right; font:11px Georgia,serif; }
.log { display:flex; flex-direction:column; gap:8px; }
.log-entry { position:relative; padding:9px 9px 9px 18px; color:var(--muted); font-size:11px; line-height:1.55; border-left:1px solid var(--line); }
.log-entry::before { content:""; position:absolute; left:-3px; top:15px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.drawer-actions { position:relative; z-index:1; display:flex; gap:8px; margin-top:20px; }
.primary-action { color:#2b2416; background:linear-gradient(180deg,#efd491,#cda450); border:1px solid #f6df9d; box-shadow:0 6px 20px rgba(212,169,79,.18); font-weight:700; }
.quiet-danger { color:#d99b8d; background:rgba(199,103,80,.08); border:1px solid rgba(199,103,80,.22); }
.drawer-actions button { flex:1; min-height:40px; border-radius:9px; }

.selection { position:relative; z-index:1; }
.selection-hero { position:relative; height:156px; margin:-3px -3px 15px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:radial-gradient(circle at 50% 60%,rgba(176,150,89,.2),transparent 58%),rgba(0,0,0,.13); }
.selection-hero img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 14px rgba(0,0,0,.34)); }
.state-badge { position:absolute; left:10px; top:10px; padding:5px 8px; color:#20231d; background:var(--gold-pale); border-radius:6px; font-size:10px; font-weight:700; }
.selection-copy { color:var(--muted); font-size:12px; line-height:1.6; }
.detail-rows { margin-top:14px; border-top:1px solid var(--line); }
.detail-row { display:flex; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid rgba(255,255,255,.045); font-size:11px; }
.detail-row span { color:var(--muted); }
.detail-row b { color:var(--text); font-weight:500; text-align:right; }
.building-health { margin-top:13px; }
.health-label { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.health-track { height:6px; margin-top:6px; background:rgba(255,255,255,.07); border-radius:8px; overflow:hidden; }
.health-track i { display:block; height:100%; background:linear-gradient(90deg,var(--danger),var(--good)); }
.selection-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.selection-actions button { min-height:40px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.05); font-size:12px; }
.selection-actions .primary-action { background:linear-gradient(180deg,#efd491,#cda450); }

.build-dock {
  position:fixed;
  z-index:21;
  left:50%;
  bottom:max(14px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:3px;
  padding:6px 8px;
  border-radius:17px;
}
.dock-main {
  position:relative;
  min-width:74px;
  height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--muted);
  background:transparent;
  border-radius:11px;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.dock-main i { display:grid; place-items:center; width:48px; height:42px; overflow:hidden; border:0; border-radius:7px; color:var(--gold-pale); background:transparent; box-shadow:none; font-style:normal; font-size:13px; }
.dock-main i svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dock-main i img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(49,34,17,.22)); mix-blend-mode:multiply; }
.dock-main span { font-size:10px; letter-spacing:.08em; }
.dock-main:hover { color:var(--text); background:rgba(255,255,255,.045); transform:translateY(-2px); }
.dock-main.active { color:#272319; background:linear-gradient(180deg,#efd694,#c8a050); box-shadow:0 7px 18px rgba(0,0,0,.26); }
.dock-main.active i { color:#332b18; border-color:rgba(51,43,24,.36); }
.dock-main.active i img { filter:drop-shadow(0 4px 3px rgba(49,34,17,.32)) saturate(1.08); }

.build-tray {
  position:fixed;
  z-index:20;
  left:50%;
  bottom:84px;
  width:min(760px,calc(100vw - 36px));
  padding:12px;
  border-radius:16px;
  transform:translate(-50%,18px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:transform .23s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}
.build-tray.is-open { transform:translate(-50%,0) scale(1); opacity:1; pointer-events:auto; }
.build-tray.visual-variants { width:min(1040px,calc(100vw - 36px)); }
.build-tray.visual-variants .orientation-tools { display:none; }
.tray-grip, .tray-close, .mobile-city-tabs { display:none; }
.tray-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; padding:0 3px; }
.tray-head strong { font-size:13px; letter-spacing:.08em; }
.tray-head span { color:var(--muted); font-size:10px; }
.orientation-tools { display:flex; align-items:center; gap:7px; margin-left:auto; padding-left:10px; }
.orientation-tools button { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; color:#503f25; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.28); }
.orientation-tools button img { width:28px; height:28px; object-fit:contain; mix-blend-mode:multiply; }
.orientation-tools button:hover { color:#8b5b1f; border-color:var(--gold); transform:rotate(8deg); }
.orientation-tools b { min-width:72px; color:#756039; font-size:9px; font-weight:600; letter-spacing:.05em; }
.tray-items { position:relative; z-index:1; display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.tray-items::-webkit-scrollbar { display:none; }
.build-tray.visual-variants .tray-items { display:grid; grid-template-columns:repeat(6,minmax(124px,1fr)); gap:8px; overflow:visible; }
.build-card { flex:0 0 112px; min-height:74px; display:grid; grid-template-columns:34px 1fr; gap:7px; align-items:center; padding:9px; text-align:left; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:11px; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.build-tray.visual-variants .build-card { min-width:0; min-height:92px; grid-template-columns:54px 1fr; }
.build-card:hover { transform:translateY(-2px); border-color:var(--line-bright); background:rgba(212,169,79,.08); }
.build-card.active { color:var(--text); border-color:var(--gold); background:rgba(212,169,79,.13); box-shadow:inset 0 0 0 1px rgba(212,169,79,.15); }
.build-card i { display:grid; place-items:center; width:34px; height:34px; color:var(--gold-pale); border-radius:9px; background:rgba(0,0,0,.18); font-style:normal; font-size:16px; }
.build-card i svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.build-card i.build-preview { width:54px; height:54px; overflow:hidden; background:rgba(222,210,175,.38); border:1px solid rgba(108,76,34,.16); }
.build-card i.build-preview img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 4px rgba(65,44,20,.18)); }
.build-card strong { display:block; color:inherit; font-size:11px; }
.build-card span { display:block; margin-top:3px; color:var(--muted); font:10px Georgia,"Songti SC",serif; white-space:nowrap; }

.map-controls { position:fixed; z-index:8; right:max(18px,env(safe-area-inset-right)); bottom:94px; display:flex; flex-direction:column; gap:3px; padding:4px; border-radius:12px; }
.map-controls button { border:0; background:transparent; }
.mobile-build-actions { display:none; }
.map-hint { position:fixed; z-index:7; left:50%; top:88px; transform:translateX(-50%); padding:6px 10px; color:rgba(240,231,209,.68); background:rgba(19,23,17,.46); border-radius:20px; font-size:10px; letter-spacing:.08em; opacity:0; animation:hint 4s ease 1.2s both; pointer-events:none; }
.map-hint.tool-active { opacity:1; animation:none; }
@keyframes hint { 0%,100%{opacity:0;transform:translate(-50%,-4px)} 15%,75%{opacity:1;transform:translate(-50%,0)} }
.placement-tip { position:fixed; z-index:16; display:none; pointer-events:none; padding:6px 9px; color:var(--text); background:rgba(22,25,20,.9); border:1px solid var(--line); border-radius:7px; font-size:10px; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.placement-tip.show { display:block; }
.placement-tip.invalid { color:#efb6a9; border-color:rgba(199,103,80,.5); }

.tutorial {
  position:fixed;
  z-index:18;
  left:max(18px,env(safe-area-inset-left));
  bottom:94px;
  width:min(420px,calc(100vw - 36px));
  display:grid;
  grid-template-columns:64px 1fr;
  grid-template-areas:
    "portrait index"
    "portrait copy"
    "portrait actions";
  gap:5px 13px;
  padding:15px;
  border-radius:15px;
  transition:opacity .24s ease,transform .24s ease;
}
.tutorial-portrait { grid-area:portrait; align-self:end; width:64px; height:82px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 8px rgba(72,55,29,.18)); }
.tutorial-copy { grid-area:copy; }
.tutorial-copy small { display:block; margin-bottom:3px; color:#8d342b; font-size:9px; letter-spacing:.14em; }
.tray-open .tutorial { bottom:194px; width:min(300px,calc(100vw - 36px)); }
.tutorial.is-hidden { opacity:0; transform:translateY(14px); pointer-events:none; }
.tutorial-index { grid-area:index; color:var(--gold); font-size:9px; letter-spacing:.18em; }
.tutorial strong { display:block; font-size:14px; letter-spacing:.06em; }
.tutorial p { margin-top:5px; color:var(--muted); font-size:11px; line-height:1.55; }
.tutorial-actions { grid-area:actions; display:flex; justify-content:flex-end; gap:7px; margin-top:8px; }
.tutorial-actions button { min-height:34px; padding:0 13px; color:var(--muted); background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:8px; font-size:11px; }
.tutorial-actions .primary-action { color:#2b2416; background:linear-gradient(180deg,#efd491,#cda450); }

.event-card {
  position:fixed;
  z-index:24;
  left:50%;
  top:50%;
  width:min(390px,calc(100vw - 36px));
  padding:20px;
  border-radius:18px;
  transform:translate(-50%,-46%) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.9,.2,1);
}
.event-card.is-open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.event-card h2 { margin-top:5px; font-size:22px; letter-spacing:.08em; }
.event-card p { margin-top:9px; color:var(--muted); font-size:12px; line-height:1.65; }
.event-illustration { float:right; display:grid; place-items:center; width:62px; height:62px; color:#2d2718; background:radial-gradient(circle,var(--gold-pale),var(--gold)); border-radius:50% 42% 48% 44%; font:700 30px Georgia,serif; box-shadow:0 8px 30px rgba(212,169,79,.18); }
.event-actions { display:flex; gap:8px; margin-top:17px; }
.event-actions button { flex:1; min-height:40px; color:var(--muted); background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:9px; font-size:11px; }
.event-actions button:first-child { color:#2b2416; background:linear-gradient(180deg,#efd491,#cda450); }

.toast-stack { position:fixed; z-index:40; right:max(18px,env(safe-area-inset-right)); top:92px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.toast { max-width:320px; padding:10px 13px; color:var(--text); background:rgba(28,31,25,.94); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:9px; box-shadow:0 12px 36px rgba(0,0,0,.34); font-size:11px; animation:toast-in .26s ease both; }
.toast.good { border-left-color:var(--good); }
.toast.bad { border-left-color:var(--danger); }
.toast.is-leaving { animation:toast-out .22s ease both; }
@keyframes toast-in { from{opacity:0;transform:translateX(16px)} }
@keyframes toast-out { to{opacity:0;transform:translateX(12px)} }

.scenario-picker { position:fixed; z-index:40; inset:0; display:grid; place-items:center; padding:24px; background:rgba(28,31,23,.56); backdrop-filter:blur(7px); transition:opacity .25s ease; }
.scenario-picker.is-hidden { opacity:0; pointer-events:none; }
.scenario-sheet { width:min(780px,100%); padding:25px; border-radius:6px; }
.scenario-sheet h1 { margin-top:5px; font-size:25px; letter-spacing:.08em; }
.scenario-sheet > p { margin-top:7px; color:var(--muted); font-size:12px; }
.scenario-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.scenario-grid button { position:relative; min-height:132px; display:grid; grid-template-columns:48px 1fr; grid-template-areas:"icon title" "icon copy" "icon tag"; gap:3px 12px; padding:17px; text-align:left; color:#493c28; background:rgba(255,251,229,.42); border:1px solid rgba(91,64,28,.24); transition:.2s ease; }
.scenario-grid button:hover { transform:translateY(-3px); background:rgba(255,248,219,.72); border-color:#a67835; box-shadow:0 10px 22px rgba(64,47,24,.14); }
.scenario-grid i { grid-area:icon; display:grid; place-items:center; width:54px; height:64px; overflow:hidden; color:#f2dfad; background:linear-gradient(180deg,#e7d19a,#bd9252); border:2px solid #8e642f; font-style:normal; font-size:22px; }
.scenario-grid i img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 4px rgba(64,43,19,.22)); }
.scenario-grid strong { grid-area:title; align-self:end; font-size:16px; letter-spacing:.08em; }
.scenario-grid span { grid-area:copy; color:#716349; font-size:11px; line-height:1.5; }
.scenario-grid b { grid-area:tag; color:#8d6630; font-size:9px; letter-spacing:.12em; }

@media (max-width: 1180px) {
  .topbar { grid-template-columns:220px 1fr auto; }
  .resource { min-width:72px; padding-right:8px; padding-left:28px; }
  .resource:nth-child(n+5) { display:none; }
}

@media (max-width: 820px) {
  .topbar { left:8px; right:8px; top:max(6px,env(safe-area-inset-top)); min-height:52px; grid-template-columns:1fr auto; gap:5px; padding:4px; border-color:#a97e42; }
  .city-mark { padding:1px 3px; }
  .city-mark .seal { width:38px; height:38px; flex:0 0 38px; }
  .city-title strong { color:#392f20; font-size:15px; }
  .city-title small { color:#746044; font-size:9px; }
  .resources { position:fixed; top:calc(max(6px,env(safe-area-inset-top)) + 57px); left:8px; right:8px; height:52px; justify-content:space-around; padding:4px 2px; color:#eadbb4; border:1px solid #99733e; border-radius:9px; background:linear-gradient(180deg,rgba(70,58,39,.96),rgba(42,37,28,.96)); backdrop-filter:blur(10px); box-shadow:0 8px 22px rgba(42,34,22,.24); }
  .resources .resource span { color:#c7b78e; }
  .resources .resource-icon { color:#ead8aa; background:#765e35; }
  .resource { flex:1; min-width:0; padding:1px 2px 1px 28px; }
  .resource-icon { left:4px; width:22px; height:22px; }
  .resource:nth-child(n+5) { display:none; }
  .time-controls .icon-button { display:none; }
  .time-controls #audioButton { display:none; }
  .speed button[data-speed="4"] { display:none; }
  .time-controls { gap:3px; }
  .city-mark { min-width:132px; }
  .objectives { top:calc(max(6px,env(safe-area-inset-top)) + 115px); left:8px; width:min(220px,calc(100vw - 84px)); }
  .overview-card, .side-rail { display:none; }
  .drawer, .city-drawer, .inspector { z-index:30; top:auto; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); left:8px; width:calc(100vw - 16px); max-height:calc(100dvh - max(92px,env(safe-area-inset-top) + 74px)); padding:16px 14px calc(14px + env(safe-area-inset-bottom)); border-radius:22px 22px 14px 14px; transform:translateY(calc(100% + 28px)); overscroll-behavior:contain; }
  .drawer.is-open { transform:translateY(0); }
  .build-dock { left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); height:76px; transform:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:stretch; gap:2px; padding:5px; overflow:visible; color:#5a462a; border-color:#a77d42; }
  .dock-main i { color:#dbc48c; background:rgba(225,197,134,.08); border-color:rgba(225,197,134,.22); }
  .dock-main.active { color:#2b2316; }
  .dock-main { min-width:0; width:100%; height:64px; border-radius:12px; }
  .dock-main i { width:42px; height:38px; font-size:12px; border-radius:7px; }
  .dock-main[data-category="landscape"], .dock-main[data-category="manage"] { display:none; }
  .dock-main span { font-size:9px; letter-spacing:.02em; }
  .build-tray { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 88px); width:calc(100vw - 16px); max-height:min(42dvh,360px); overflow:auto; padding:7px 10px 12px; border-radius:22px 22px 14px 14px; overscroll-behavior:contain; }
  .build-tray.visual-variants { width:calc(100vw - 16px); }
  .tray-grip { display:block; width:38px; height:4px; margin:0 auto 7px; border-radius:4px; background:rgba(86,62,29,.26); }
  .tray-head { gap:8px; min-height:44px; margin-bottom:8px; }
  .tray-head strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .tray-head > span { display:none; }
  .tray-close { flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; color:#655235; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.28); }
  .tray-close img { width:32px; height:32px; object-fit:contain; mix-blend-mode:multiply; }
  .drawer .close-drawer { width:44px; height:44px; }
  .drawer .close-drawer img { width:34px; height:34px; }
  .mobile-city-tabs { display:none; grid-template-columns:repeat(3,1fr); gap:6px; margin:0 0 10px; padding:4px; border-radius:12px; background:rgba(96,70,33,.08); }
  .cityworks-open .mobile-city-tabs { display:grid; }
  .mobile-city-tabs button { min-height:38px; color:#6e6047; border-radius:9px; background:transparent; font-size:12px; font-weight:700; }
  .mobile-city-tabs button.active { color:#392c19; background:linear-gradient(180deg,#efd694,#d0a957); box-shadow:0 4px 10px rgba(77,55,24,.16); }
  .build-tray.visual-variants .tray-items { display:flex; overflow-x:auto; }
  .build-tray.visual-variants .build-card { flex:0 0 142px; min-height:102px; }
  .build-card { min-height:88px; }
  .build-card strong { font-size:12px; line-height:1.35; }
  .build-card span { font-size:10px; }
  .map-controls { right:10px; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 86px); }
  .map-controls #undoBuild, .map-controls #zoomIn, .map-controls #zoomOut { display:none; }
  .mobile-build-actions { position:fixed; z-index:22; left:8px; right:8px; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 88px); height:64px; display:grid; grid-template-columns:minmax(0,1fr) repeat(3,54px); align-items:center; gap:4px; padding:5px 6px; transform:translateY(12px); opacity:0; pointer-events:none; border:1px solid rgba(103,74,32,.26); border-radius:15px; background:rgba(246,234,202,.96); box-shadow:0 8px 24px rgba(55,42,23,.22); transition:opacity .18s ease,transform .18s ease; }
  .mobile-tool-status { min-width:0; display:flex; align-items:center; gap:8px; padding:0 5px; color:#463820; }
  .mobile-tool-status > i { flex:0 0 42px; display:grid; place-items:center; width:42px; height:42px; overflow:hidden; border:1px solid rgba(113,78,31,.22); border-radius:9px; background:rgba(180,131,54,.14); }
  .mobile-tool-status > i img { width:100%; height:100%; object-fit:contain; }
  .mobile-tool-status svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-tool-status span { min-width:0; }
  .mobile-tool-status small { display:block; color:#88775a; font-size:8px; }
  .mobile-tool-status b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
  .mobile-build-actions button { min-width:52px; min-height:52px; display:grid; place-items:center; align-content:center; gap:1px; padding:3px; color:#4b3b23; border:1px solid rgba(113,78,31,.18); border-radius:10px; background:rgba(255,255,255,.42); font-size:8px; font-weight:700; }
  .mobile-build-actions button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-build-actions button img { width:32px; height:32px; object-fit:contain; border-radius:5px; }
  .mobile-build-actions button:last-child { color:#8a3b31; }
  .tutorial { left:10px; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 78px); width:min(310px,calc(100vw - 20px)); padding:11px; }
  .tray-open .tutorial { opacity:0; pointer-events:none; }
  .toast-stack { top:176px; right:10px; }
  .map-hint, #app.is-building .map-hint { display:none; }
  .placement-tip { display:none !important; }
  /* Once a tool is selected, the map becomes the entire working surface.
     Mission text and tutorial can be reopened, but never cover a placement. */
  #app.is-building .objectives,
  #app.is-building .tutorial { opacity:0; transform:translateY(-12px); pointer-events:none; }
  #app.is-building .resources { opacity:.72; }
  #app.is-building .map-controls { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 158px); }
  #app.is-building .mobile-build-actions { opacity:1; transform:translateY(0); pointer-events:auto; }
  /* Template picking and map actions are mutually exclusive on a phone. */
  #app.tray-open .mobile-build-actions { opacity:0; pointer-events:none; transform:translateY(18px); }
  #app.has-drawer-open .build-dock,
  #app.has-drawer-open .map-controls,
  #app.has-drawer-open .mobile-build-actions { opacity:0; pointer-events:none; transform:translateY(calc(100% + 24px)); }
  #app.has-drawer-open .build-tray { opacity:0; pointer-events:none; }
  #app.has-drawer-open .toast-stack { opacity:0; visibility:hidden; }
}

/* 山河长卷界面：案牍纸、青铜和朱砂，而不是悬浮黑色后台面板。 */
.topbar, .objectives, .drawer, .build-dock, .build-tray, .tutorial, .event-card, .map-controls {
  background:
    linear-gradient(135deg, rgba(255,255,255,.46), transparent 40%),
    repeating-linear-gradient(0deg, rgba(106,77,33,.025) 0 1px, transparent 1px 4px),
    var(--panel);
  border-color:rgba(83,62,31,.26);
}
.ui-surface::after { border-color:rgba(103,74,32,.09); }
.topbar { border-top:2px solid rgba(145,94,35,.48); }
.build-dock { border-bottom:3px solid #694624; }
.resource-icon { color:#f7e7b4; background:#81632f; }
.icon-button, .speed button, .map-controls button { color:#6c6048; background:rgba(255,255,255,.22); }
.icon-button:hover, .speed button:hover, .speed button.active, .map-controls button:hover { color:#8a531d; background:rgba(178,123,42,.15); }
.speed { background:rgba(86,65,33,.08); }
.quest { border-top-color:rgba(80,59,27,.09); }
.close-drawer { color:#675a44; background:rgba(255,255,255,.22); }
.stat, .build-card, .selection-actions button, .tutorial-actions button, .event-actions button { background:rgba(255,255,255,.2); }
.selection-hero { background:radial-gradient(circle at 50% 60%,rgba(176,150,89,.24),transparent 58%),rgba(111,87,45,.08); }
.dock-main i { color:#755323; background:rgba(255,255,255,.18); }
.dock-main.active { color:#2e2518; }
.dock-main.active i { color:#352611; }
.build-card i { color:#7c5928; background:rgba(87,62,26,.1); }
.map-hint { color:#4c452f; background:rgba(240,227,191,.82); border:1px solid rgba(94,70,32,.16); }
.placement-tip { color:#342e20; background:rgba(244,232,199,.96); }
.toast { color:#302b20; background:rgba(243,230,195,.96); box-shadow:0 12px 30px rgba(61,48,27,.22); }
.loading-card { color:#2e2a20; background:rgba(239,226,190,.98); box-shadow:0 30px 90px rgba(61,48,27,.28); }

@media (min-width: 821px) {
  .topbar {
    color:#eee0ba;
    background:linear-gradient(180deg,rgba(70,59,40,.97),rgba(43,39,29,.97));
    border-color:#b38a4d;
    box-shadow:0 5px 18px rgba(29,25,18,.34), inset 0 0 0 1px rgba(236,207,145,.16);
  }
  .city-mark { align-self:stretch; margin:-6px 0 -6px -9px; padding:5px 15px 5px 8px; color:#30291e; background:linear-gradient(180deg,#e6d4a8,#cdb57d); border-right:2px solid #9e753e; }
  .city-title small, .topbar .resource span { color:#cdbf9b; }
  .city-mark .city-title small { color:#756344; }
  .topbar .resource { border-left-color:rgba(232,209,154,.18); }
  .topbar .resource-icon { color:#ead8a8; background:#756039; }
  .topbar .icon-button, .topbar .speed button { color:#dfc994; background:rgba(235,211,157,.08); border-color:rgba(230,204,145,.2); }
}

@media (max-width: 390px) {
  .topbar { min-height:48px; }
  .city-mark .seal { width:35px; height:35px; flex-basis:35px; font-size:18px; }
  .city-title strong { font-size:14px; }
  .city-title small { font-size:8px; }
  .speed button { width:28px; height:28px; }
  .resources { top:calc(max(6px,env(safe-area-inset-top)) + 53px); height:49px; }
  .resource { padding-left:25px; }
  .resource-icon { width:19px; height:19px; }
  .resource span { font-size:8px; }
  .resource b { font-size:14px; }
  .objectives { top:calc(max(6px,env(safe-area-inset-top)) + 108px); }
  .dock-main i { width:36px; height:33px; }
  .dock-main span { font-size:8px; }
}

@media (max-width: 620px) {
  .dock-main span { position:static; width:auto; height:auto; overflow:visible; clip:auto; font-size:8px; }
  .dock-main { min-width:0; }
  .orientation-tools b { display:none; }
  .tutorial { left:10px; bottom:calc(max(8px,env(safe-area-inset-bottom)) + 80px); width:246px; display:block; padding:9px 10px 8px; }
  .tutorial-portrait, .tutorial-index, .tutorial-copy small { display:none; }
  .tutorial strong { font-size:12px; }
  .tutorial p { max-height:30px; overflow:hidden; font-size:9px; line-height:1.4; }
  .tutorial-actions { margin-top:6px; }
  .tutorial-actions button { min-height:27px; padding:0 9px; font-size:9px; }
  .scenario-picker { padding:12px; }
  .scenario-sheet { padding:17px 13px 14px; max-height:calc(100dvh - 24px); overflow:auto; }
  .scenario-sheet h1 { font-size:19px; }
  .scenario-grid { grid-template-columns:1fr; gap:7px; margin-top:13px; }
  .scenario-grid button { min-height:94px; grid-template-columns:40px 1fr; padding:11px; }
  .scenario-grid i { width:40px; height:48px; font-size:18px; }
}

@media (max-width: 520px) {
  .objectives { width:210px; }
  .quest:nth-child(n+4) { display:none; }
  .drawer { width:calc(100vw - 20px); }
  .dock-main { min-width:0; }
  .dock-main span { font-size:8px; }
  .tray-head span { display:none; }
  .build-card { flex-basis:104px; }
}

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