/* 汴河市集营造记 — 清明上河图风格 UI */
@font-face {
  font-family: "PressStart2P";
  src: url("./assets/fonts/press-start-2p/PressStart2PRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #f7ecd6;
  --font-game: "PressStart2P", "Courier New", monospace;
  --muted: rgba(247,236,214,.68);
  --line: rgba(86,54,30,.22);
  --panel: rgba(46,33,22,.92);
  --panel-2: rgba(72,48,30,.94);
  --shadow: rgba(0,0,0,.36);
  --accent: #d8a645;
  --green: #c8d08a;
  --danger: #ff6565;
  --tile-w: 54px;
  --tile-h: 27px;
  --scene-zoom: 1;
  --world-scale: 1;
  --world-x: 0px;
  --world-y: 0px;
  --scene-bg-w: 100vw;
  --scene-bg-h: 100vh;
  --ui-edge: 18px;
  --dock-bottom: 18px;
  --dock-outer-h: 104px;
  --modal-gap: 18px;
  --modal-top-safe: 98px;
}
* { box-sizing: border-box; -webkit-touch-callout:none; }
html, body, body *, body *::before, body *::after {
  user-select:none !important;
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
}
::selection, *::selection { background:transparent !important; color:inherit !important; }
::-moz-selection, *::-moz-selection { background:transparent !important; color:inherit !important; }
html, body { width:100%; height:100%; min-height:100dvh; margin:0; overflow:hidden; overscroll-behavior:none; touch-action:none; }
body { font-family: var(--font-game); color: var(--ink); background: #8f744f; }
body.app-loading .game-shell { visibility:hidden; }
.loading-screen { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; background:#3d2b1d; color:#fff7e8; }
.loading-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 34%, rgba(216,166,69,.18), transparent 34%), linear-gradient(180deg, rgba(216,166,69,.08), transparent 38%, rgba(0,0,0,.34)), #3d2b1d; filter:blur(3px) saturate(.9) brightness(.72); transform:scale(1.02); }
.loading-panel { position:relative; z-index:1; width:min(560px, calc(100vw - 48px)); padding:24px 26px; border:1px solid rgba(255,255,255,.14); background:rgba(28,18,12,.9); box-shadow:0 20px 70px rgba(0,0,0,.48); }
.loading-title { font-size:18px; line-height:1.5; color:#fff7e8; text-shadow:0 2px 0 #000; }
.loading-label { margin-top:18px; color:var(--accent); font-size:9px; }
.loading-bar { position:relative; height:18px; margin-top:12px; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); overflow:hidden; }
.loading-bar i { display:block; width:0%; height:100%; background:linear-gradient(90deg, #c8d08a, #d8a645); box-shadow:0 0 16px rgba(216,166,69,.45); transition:width .16s ease; }
.loading-count { margin-top:10px; color:rgba(255,255,255,.72); font-size:8px; text-align:right; }
body.app-ready .loading-screen { opacity:0; visibility:hidden; transition:opacity .24s ease, visibility .24s ease; }
button { font: inherit; color: inherit; }
img, canvas, svg { user-select:none !important; -webkit-user-select:none !important; -webkit-user-drag:none !important; pointer-events:none; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.game-shell { position:relative; width:100%; height:100vh; height:100dvh; min-width:0; min-height:0; overflow:hidden; background: #8f744f; transform-origin:center center; }
.game-shell::before { content:""; display:none; }
.game-shell::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(34,39,49,.34), transparent 28%, rgba(16,18,23,.26)); z-index:0; }
.top-hud { position:absolute; left:22px; top:18px; z-index:1000; min-height:58px; display:flex; align-items:center; gap:18px; padding:10px 18px; border:1px solid rgba(255,255,255,.08); background:rgba(55,38,23,.88); box-shadow:0 10px 24px rgba(0,0,0,.32); border-radius:0; }
.brand-block { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark { width:auto; height:auto; display:inline; border:0; background:transparent; color:#d8a645; font-size:16px; font-weight:1000; box-shadow:none; }
.sys-label { display:none; }
h1 { margin:0; max-width:310px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; line-height:1; color:#fff7e8; letter-spacing:.02em; text-shadow:0 2px 0 #000; }
.cycle-card { min-width:92px; height:40px; padding:0; border:0; background:transparent; box-shadow:none; font-weight:1000; display:flex; flex-direction:row; align-items:center; gap:8px; justify-content:center; cursor:default; color:#fff7e8; }
.cycle-card span { font-size:8px; color:var(--green); }
.cycle-card b { font-size:8px; color:#fff7e8; }
.scene-stage { position:absolute; inset:0; z-index:1; }
.map-wrap { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; background:transparent; border:0; box-shadow:none; pointer-events:auto; touch-action:none; transform:translate3d(var(--world-x, 0px), var(--world-y, 0px), 0) scale(var(--world-scale, 1)); transform-origin:center center; will-change:transform; }
.map-wrap::before { content:""; position:absolute; inset:-2px; z-index:0; background:url('./assets/image2-clean/scene/main-density-2x.webp') center center / cover no-repeat; filter:saturate(1.04) contrast(1.02); pointer-events:none; }
.map-wrap .agent-layer, .map-wrap .float-layer { pointer-events:none; }
.map-wrap .iso-map { pointer-events:auto; }
.map-wrap .tile { pointer-events:none; }
.map-wrap .building { pointer-events:auto; }
.river-label { display:none; }
.iso-map, .road-layer, .agent-layer, .float-layer { position:absolute; inset:0; }
.iso-map { z-index:20; }
.road-layer { z-index:12; pointer-events:none; }
.agent-layer { z-index:25; pointer-events:none; }
.float-layer { z-index:90; pointer-events:none; }
.tile { position:absolute; width:var(--tile-w); height:var(--tile-h); transform:translate(-50%,-50%); border:1px solid rgba(20,38,18,.20); background:transparent; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); cursor:pointer; transition: filter .12s ease, background .12s ease, box-shadow .12s ease; pointer-events:none; }
.placement-cell { pointer-events:none; border-width:2px; filter:drop-shadow(0 0 8px rgba(0,0,0,.28)); }
.placement-footprint { position:absolute; pointer-events:none; filter:drop-shadow(0 0 8px rgba(0,0,0,.28)); }
.placement-footprint svg { display:block; width:100%; height:100%; overflow:visible; }
.placement-footprint polygon { fill:rgba(101,224,100,.30); stroke:rgba(255,255,255,.72); stroke-width:2; vector-effect:non-scaling-stroke; }
.placement-footprint.place-bad polygon { fill:rgba(231,89,78,.50); stroke:rgba(255,110,95,.86); }
.tile.region-active { border-color:rgba(255,218,80,.28); }
.tile:hover { filter:brightness(1.12); background:rgba(255,244,150,.22); box-shadow:0 0 0 2px rgba(255,255,255,.22); }
.tile.place-ok { background:rgba(101,224,100,.30); box-shadow:0 0 0 4px rgba(255,255,255,.30); }
.tile.place-bad { background:rgba(231,89,78,.52); }
.preset-road { position:absolute; width:calc(var(--tile-w) * 1.09); height:calc(var(--tile-h) * 1.09); transform:translate(-50%,-50%); pointer-events:none; }
.preset-road img { display:block; width:100%; height:100%; object-fit:contain; }
.preset-road.road-draft { opacity:.58; }
.preset-road.road-draft img { filter:brightness(1.08); }
.building { position:absolute; width:72px; height:92px; transform:translate(-50%,-82%); pointer-events:auto; cursor:pointer; filter: drop-shadow(0 6px 0 rgba(0,0,0,.16)); z-index:60; }
.building[data-footprint="2x2"] { width:94px; height:94px; }
.building[data-footprint="3x2"] { width:132px; height:94px; }
.building[data-footprint="2x3"] { width:94px; height:132px; }
.building[data-footprint="3x3"] { width:132px; height:132px; }
.building[data-footprint="4x1"] { width:170px; height:58px; }
.building[data-footprint="3x1"] { width:132px; height:58px; }
.building[data-footprint="4x2"] { width:170px; height:94px; }
.building[data-footprint="2x4"] { width:94px; height:170px; }
.building[data-footprint="4x3"] { width:170px; height:132px; }
.building[data-footprint="3x4"] { width:132px; height:170px; }
.building[data-footprint="4x4"] { width:170px; height:170px; }
.building[data-footprint="common-ground"] { width:var(--tile-w); height:var(--tile-h); transform:translate(-50%,-50%); filter:none; }
.building-sprite { position:absolute; left:50%; bottom:-10px; width:var(--sprite-size, 132px); height:var(--sprite-size, 132px); object-fit:contain; transform:translateX(-50%); z-index:3; image-rendering:auto; pointer-events:none; }
.building.selected .building-sprite { filter:drop-shadow(0 0 10px var(--accent)); }
.ground-asset .building-sprite { left:50%; top:50%; bottom:auto; width:calc(var(--tile-w) * 1.09); height:calc(var(--tile-h) * 1.09); transform:translate(-50%,-50%); object-fit:contain; }
.prop-asset .building-sprite { bottom:-8px; }
.placement-ghost { pointer-events:none; }
.placement-ghost .building-sprite { opacity:.52; filter:drop-shadow(0 0 12px rgba(255,255,255,.9)); }
.placement-ghost.bad .building-sprite { opacity:.38; filter:drop-shadow(0 0 12px rgba(255,80,70,.95)); }
.grid-origin { display:none; position:absolute; z-index:140; transform:translate(-50%,-50%); padding:8px 10px; border:2px solid rgba(255,255,255,.14); border-radius:0; background:rgba(55,38,23,.88); box-shadow:0 8px 18px rgba(0,0,0,.26); font-size:8px; font-weight:1000; cursor:grab; user-select:none; touch-action:none; pointer-events:auto; }
.grid-origin.active { color:var(--accent); border-color:var(--accent); }
.grid-origin.invalid { color:var(--danger); border-color:var(--danger); }
.tile.region-overlap { background:rgba(255,70,50,.32) !important; border-color:rgba(160,35,24,.52) !important; }
.grid-origin:active { cursor:grabbing; }
body.grid-editing .tile { background:rgba(255,230,90,.18); border-color:rgba(60,52,46,.28); }
.level-badge { display:none; position:absolute; right:-5px; top:24px; z-index:4; padding:2px 5px; border:1px solid rgba(255,255,255,.18); border-radius:4px; background:rgba(55,38,23,.88); color:#fff7e8; font-size:8px; font-weight:1000; }
.building.selected .level-badge { display:block; }
.building.needs-road::after { content:"NO ROAD"; display:none; position:absolute; right:-8px; top:48px; z-index:5; padding:3px 5px; border:1px solid rgba(255,255,255,.18); border-radius:4px; background:rgba(55,38,23,.88); color:var(--accent); font-size:9px; font-weight:1000; }
.building.selected.needs-road::after, .building.needs-road:hover::after { display:block; }
.agent { position:absolute; transform:translate(-50%,-50%); width:42px; height:42px; display:grid; place-items:center; background:transparent; border:0; box-shadow:none; transition:left .52s linear, top .52s linear; overflow:visible; pointer-events:none; }
.agent img, .agent .agent-sprite { width:38px; height:38px; object-fit:contain; transform:translateY(-7px); filter:drop-shadow(0 3px 0 rgba(0,0,0,.26)) drop-shadow(0 0 5px rgba(255,255,255,.55)); pointer-events:none; }
.agent::after { content:attr(data-line); position:absolute; left:34px; bottom:34px; transform:none; min-width:96px; max-width:164px; padding:7px 9px; border:1px solid rgba(255,255,255,.10); border-radius:0; background:rgba(55,38,23,.88); opacity:0; font-size:9px; line-height:1.45; font-weight:900; pointer-events:none; white-space:normal; overflow-wrap:anywhere; text-align:left; box-shadow:0 6px 16px rgba(0,0,0,.22); }
.agent::before { content:""; position:absolute; left:28px; bottom:34px; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:7px solid rgba(55,38,23,.88); opacity:0; pointer-events:none; }
.agent.bubble-left::after { left:auto; right:34px; }
.agent.bubble-left::before { left:auto; right:28px; border-right:0; border-left:7px solid rgba(55,38,23,.88); }
.agent.bubble-below::after { bottom:auto; top:32px; }
.agent.bubble-below::before { bottom:auto; top:32px; }
.agent.speaking::after, .agent.speaking::before { opacity:1; }
.panel { position:absolute; z-index:930; width:310px; }
.panel-tab { display:none; }
.modal-panel { left:50%; bottom:calc(var(--dock-bottom) + var(--dock-outer-h) + var(--modal-gap)); width:min(900px, calc(100vw - 72px)); max-height:calc(100dvh - var(--modal-top-safe) - var(--dock-bottom) - var(--dock-outer-h) - var(--modal-gap)); transform:translate(-50%, 20px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility .14s ease; }
.modal-panel.open { transform:translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto; }
.panel-content { max-height:calc(100dvh - var(--modal-top-safe) - var(--dock-bottom) - var(--dock-outer-h) - var(--modal-gap)); overflow:auto; padding:16px; border:1px solid var(--line); border-radius:0; background:var(--panel); box-shadow:0 20px 60px rgba(0,0,0,.42); scrollbar-width:none; -ms-overflow-style:none; }
.panel-content::-webkit-scrollbar, .build-panel-content::-webkit-scrollbar, .info-panel .panel-content::-webkit-scrollbar { width:0; height:0; display:none; }
.build-panel { width:min(1080px, calc(100vw - 72px)); }
.build-panel-content { max-height:calc(100dvh - var(--modal-top-safe) - var(--dock-bottom) - var(--dock-outer-h) - var(--modal-gap)); }
.status-panel { width:min(680px, calc(100vw - 72px)); }
.status-panel .resource-bar { display:grid; grid-template-columns:repeat(4, minmax(118px, 1fr)); gap:8px; }
.res-card { min-height:52px; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:0; background:var(--panel-2); box-shadow:none; font-weight:1000; }
.res-card small { display:block; color:var(--muted); font-size:9px; letter-spacing:.05em; }
.res-card b { font-size:16px; color:#fff7e8; text-shadow:0 2px 0 #000; }
.res-card.bad { background:rgba(92,28,28,.96); }
.res-card.good b { color:var(--green); }
.info-panel { width:min(560px, calc(100vw - 72px)); }
.goal-panel { width:min(480px, calc(100vw - 72px)); }
.goal-panel .panel-content { max-height:420px; }
.settings-panel { width:min(360px, calc(100vw - 72px)); }
.settings-menu { display:grid; grid-template-columns:1fr; gap:8px; }
.settings-menu button, .category-tabs button, .build-card, .info-actions button { border:1px solid rgba(255,255,255,.08); border-radius:0; background:var(--panel-2); box-shadow:none; color:#fff7e8; font-weight:1000; cursor:pointer; }
.settings-menu button { width:100%; min-height:46px; padding:6px 8px; text-align:center; }
.settings-menu button.active { color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.reset-btn { color:var(--danger) !important; }
.panel-header { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; margin-bottom:12px; font-weight:1000; color:#fff7e8; }
.panel-header i { font-style:normal; color:var(--accent); }
.category-tabs { display:flex; gap:8px; margin-bottom:10px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tabs button { flex:1 0 104px; padding:9px 8px; font-size:8px; color:var(--muted); white-space:nowrap; }
.category-tabs button.active { color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); }
.building-list { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.build-card { min-height:148px; display:grid; grid-template-columns:1fr; grid-template-rows:92px auto; gap:7px; align-items:center; justify-items:center; padding:10px 8px; text-align:center; }
.build-card img, .build-card .card-sprite { width:104px; height:90px; object-fit:contain; border:0; background:transparent; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.build-card.road-card img, .build-card.road-card .card-sprite { width:116px; height:84px; aspect-ratio:256 / 184; object-fit:contain; }
.build-card:not(.road-card) img, .build-card:not(.road-card) .card-sprite { object-fit:cover; object-position:center center; }
.build-card.active { box-shadow:inset 0 0 0 3px var(--accent), 0 0 18px rgba(247,223,42,.24); }
.build-card.locked { opacity:.36; cursor:not-allowed; }
.build-card > span { display:block; width:100%; min-width:0; overflow:hidden; }
.build-card b { display:block; max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; color:#fff7e8; }
.build-card small { display:block; max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--accent); font-size:8px; line-height:1.35; }
.hint { margin:12px 0 0; color:var(--muted); font-size:8px; font-weight:800; line-height:1.35; }
.info-title { margin:0 0 8px; font-size:16px; color:#fff7e8; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.info-grid div, .source-box, .synergy-box { padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:0; background:var(--panel-2); color:rgba(255,255,255,.88); font-size:8px; font-weight:800; }
.source-box a { color:#80d6ff; word-break:break-all; }
.info-actions { display:flex; gap:8px; margin-top:10px; }
.info-actions button { flex:1; padding:10px; }
.empty-info { margin:0; color:var(--muted); font-weight:900; }
.goals { margin:0; padding-left:18px; font-size:9px; line-height:1.8; font-weight:900; color:#fff7e8; }
.goals li.done { color:var(--green); text-decoration:line-through; }
.city-log { margin-top:10px; display:grid; gap:6px; font-size:8px; color:var(--muted); font-weight:800; }
.log-line { padding:7px 8px; border-radius:0; background:var(--panel-2); }
.message-strip { position:absolute; right:var(--ui-edge); bottom:var(--dock-bottom); z-index:920; width:auto; max-width:min(360px,28vw); min-height:30px; display:flex; align-items:center; justify-content:flex-end; padding:7px 10px; border:1px solid rgba(255,255,255,.07); border-radius:0; background:rgba(5,6,8,.74); box-shadow:0 8px 18px rgba(0,0,0,.22); color:#fff7e8; font-size:10px; line-height:1.38; font-weight:900; text-align:right; pointer-events:none; }
.message-strip::before { content:""; margin:0; }
.minimap { position:absolute; right:var(--ui-edge); top:18px; z-index:1040; width:176px; height:176px; padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:0; background:rgba(5,6,8,.78); box-shadow:0 10px 24px rgba(0,0,0,.28); pointer-events:auto; user-select:none; transition:opacity .14s ease, visibility .14s ease; }
body.modal-open .minimap, body.modal-open .message-strip { opacity:0; visibility:hidden; pointer-events:none; }
.minimap-world { position:relative; width:100%; height:100%; border:1px solid rgba(255,255,255,.16); background:linear-gradient(rgba(27,32,40,.18), rgba(27,32,40,.18)), url('./assets/image2-clean/scene/main.webp') center center / cover no-repeat; overflow:hidden; cursor:grab; touch-action:none; }
.minimap-world::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px), radial-gradient(circle at center, transparent 0 56%, rgba(5,6,8,.20) 100%); background-size:25% 25%, 25% 25%, 100% 100%; opacity:.72; }
.minimap-dot { position:absolute; width:3px; height:3px; transform:translate(-50%,-50%); background:#f7ecd6; box-shadow:0 0 5px rgba(247,236,214,.42); }
.minimap-dot.prop { width:2px; height:2px; background:#8de38b; box-shadow:none; }
.minimap-view { position:absolute; transform:none; border:2px solid rgba(255,255,255,.86); background:rgba(255,255,255,.08); box-shadow:0 0 10px rgba(255,255,255,.22); }
.bottom-dock { position:absolute; left:50%; bottom:var(--dock-bottom); z-index:1050; display:flex; align-items:center; gap:10px; transform:translateX(-50%); padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:0; background:rgba(55,38,23,.88); box-shadow:0 14px 40px rgba(0,0,0,.42); }
.bottom-dock button { width:104px; height:78px; display:grid; grid-template-rows:1fr auto; place-items:center; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:0; background:var(--panel-2); box-shadow:none; color:#fff7e8; font-weight:1000; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.bottom-dock button span { font-size:24px; line-height:1; filter:drop-shadow(0 2px 0 #000); }
.bottom-dock button b { font-size:8px; color:var(--accent); text-shadow:0 2px 0 #000; }
.bottom-dock button.active, .bottom-dock button[aria-expanded="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent), 0 0 18px rgba(247,223,42,.24); transform:translateY(-3px); }
.float-text { position:absolute; transform:translate(-50%,-50%); color:var(--green); text-shadow:2px 2px 0 #000; font-size:18px; font-weight:1000; animation:floatUp 1.2s ease-out forwards; }
.build-impact { position:absolute; width:1px; height:1px; transform:translate(-50%,-50%); pointer-events:none; }
.build-impact-dust { position:absolute; left:0; top:0; width:7px; height:5px; transform:translate(-50%,-50%) scale(var(--dust-scale, 1)); background:rgba(210,204,180,.92); box-shadow:0 1px 0 rgba(82,78,68,.44); clip-path:polygon(18% 20%, 82% 10%, 100% 64%, 68% 100%, 14% 86%, 0 44%); animation:impactDust .58s cubic-bezier(.15,.75,.22,1) forwards; }
@keyframes floatUp { 0%{opacity:0; transform:translate(-50%,-10%) scale(.9)} 20%{opacity:1} 100%{opacity:0; transform:translate(-50%,-150%) scale(1.08)} }
@keyframes impactDust { 0%{opacity:0; transform:translate(-50%,-50%) scale(calc(var(--dust-scale, 1) * .58))} 16%{opacity:1} 100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(calc(var(--dust-scale, 1) * .18))} }
body.placing .map-wrap { cursor:copy; }
body.placing .building { pointer-events:none; }
body.road-building .building { pointer-events:none; }
body.grid-editing .building { pointer-events:none; }
body.road-building .map-wrap { cursor:crosshair; }
body.map-panning .map-wrap { cursor:grabbing; }
body.minimap-panning .minimap-world { cursor:grabbing; }
body.road-building .message-strip::before { content:""; }
body.camera-rpg-topdown .tile { clip-path:none; border-style:dashed; }
body.camera-rpg-topdown .tile:hover { background:rgba(255,244,150,.18); }
body.camera-rpg-topdown .placement-cell { clip-path:none; border-radius:4px; background:rgba(110,190,90,.18); }
body.camera-rpg-topdown .preset-road { width:var(--tile-w); height:var(--tile-h); transform:translate(-50%,-50%); }
body.camera-rpg-topdown .preset-road img { object-fit:contain; }
body.camera-rpg-topdown .building { transform:translate(-50%,-76%); }
body.camera-rpg-topdown .building[data-footprint="common-ground"] { transform:translate(-50%,-50%); }
body.camera-rpg-topdown .building-sprite { bottom:-6px; }
body.camera-rpg-topdown .ground-asset .building-sprite { object-fit:cover; }
@media (max-width: 1400px) {
  .top-hud { min-height:56px; }
  .building-list { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .status-panel .resource-bar { grid-template-columns:repeat(3, minmax(118px, 1fr)); }
}
@media (max-width: 1100px) {
  :root { --ui-edge:14px; --dock-bottom:12px; --dock-outer-h:76px; --modal-gap:12px; --modal-top-safe:88px; }
  .top-hud { left:14px; top:12px; min-height:56px; padding:8px 12px; gap:10px; }
  h1 { max-width:260px; font-size:16px; }
  .cycle-card { min-width:76px; }
  .minimap { top:12px; width:136px; height:136px; padding:8px; }
  .bottom-dock { gap:6px; padding:8px; }
  .bottom-dock button { width:92px; height:58px; padding:6px 8px; }
  .bottom-dock button span { font-size:21px; }
  .modal-panel, .build-panel, .status-panel, .info-panel, .goal-panel, .settings-panel { width:min(var(--panel-max, 900px), calc(100vw - 28px)); }
  .build-panel { --panel-max:1080px; }
  .status-panel { --panel-max:680px; }
  .info-panel { --panel-max:560px; }
  .goal-panel { --panel-max:480px; }
  .settings-panel { --panel-max:360px; }
  .build-card { min-height:136px; grid-template-rows:82px auto; }
  .build-card img, .build-card .card-sprite { width:94px; height:80px; }
  .build-card.road-card img, .build-card.road-card .card-sprite { width:104px; height:76px; }
  .message-strip { max-width:240px; font-size:8px; }
}
@media (max-width: 760px) {
  :root { --ui-edge:8px; --dock-bottom:max(8px, env(safe-area-inset-bottom)); --dock-outer-h:70px; --modal-gap:8px; --modal-top-safe:76px; }
  .top-hud { left:8px; right:104px; top:8px; min-height:52px; padding:7px 8px; gap:7px; }
  .brand-block { gap:7px; }
  .brand-mark { font-size:14px; }
  h1 { max-width:128px; font-size:12px; }
  .cycle-card { min-width:54px; height:34px; gap:5px; }
  .cycle-card span, .cycle-card b { font-size:7px; }
  .minimap { right:8px; top:8px; width:88px; height:88px; padding:5px; }
  .bottom-dock { left:8px; right:8px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; padding:7px; transform:none; }
  .bottom-dock button { width:auto; min-width:0; height:54px; padding:5px 3px; }
  .bottom-dock button span { font-size:19px; }
  .bottom-dock button b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7px; }
  .modal-panel, .build-panel, .status-panel, .info-panel, .goal-panel, .settings-panel { left:8px; right:8px; width:auto; transform:translateY(16px); }
  .modal-panel.open { transform:translateY(0); }
  .panel-content { padding:12px; }
  .panel-header { margin-bottom:9px; padding-bottom:8px; font-size:9px; }
  .category-tabs { gap:6px; margin-bottom:8px; }
  .category-tabs button { flex-basis:94px; min-height:34px; }
  .building-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .build-card { min-height:128px; grid-template-rows:76px auto; padding:8px 6px; }
  .build-card img, .build-card .card-sprite { width:88px; height:74px; }
  .build-card.road-card img, .build-card.road-card .card-sprite { width:96px; height:70px; }
  .build-card b, .build-card small { max-width:100%; }
  .build-card small { display:-webkit-box; max-height:2.7em; white-space:normal; overflow:hidden; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .status-panel .resource-bar { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .message-strip { left:8px; right:8px; bottom:calc(var(--dock-bottom) + var(--dock-outer-h) + 8px); width:auto; max-width:none; justify-content:center; text-align:center; }
}
@media (max-height: 520px) {
  :root { --dock-bottom:6px; --dock-outer-h:54px; --modal-gap:6px; --modal-top-safe:68px; }
  .top-hud { top:6px; min-height:46px; padding-top:5px; padding-bottom:5px; }
  .minimap { top:6px; width:84px; height:84px; padding:5px; }
  .bottom-dock { gap:4px; padding:5px; }
  .bottom-dock button { width:84px; height:42px; grid-template-columns:24px 1fr; grid-template-rows:1fr; gap:4px; padding:4px 6px; }
  .bottom-dock button span { font-size:17px; }
  .build-card { min-height:106px; grid-template-rows:58px auto; }
  .build-card img, .build-card .card-sprite { width:78px; height:56px; }
  .build-card.road-card img, .build-card.road-card .card-sprite { width:88px; height:54px; }
  .message-strip { left:auto; right:8px; top:96px; bottom:auto; width:auto; max-width:240px; }
}