/* City is a playable illustrated surface; the approved HUD is unchanged. */
#pageView.city-page { padding:0; min-height:0; }
.city-scene { position:relative; isolation:isolate; --city-lift:16px; min-height:300px; height:calc(100dvh - var(--header-height) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:hidden; background:#102a32; }
.city-backdrop { position:absolute; inset:calc(-1 * var(--city-lift)) 0 auto; width:100%; height:calc(100% + var(--city-lift)); object-fit:fill; z-index:-2; }
.city-scene::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(#05131c88,transparent 20%,transparent 80%,#05131cc7); pointer-events:none; }
/* Dark translucent centers keep the town visible; only the metal border uses artwork. */
.city-service { position:absolute; left:var(--city-x); top:calc(var(--city-y) - var(--city-lift)); transform:translate(-50%,-50%); width:39%; max-width:156px; min-height:44px; padding:7px 5px 8px; border:0; border-radius:9px; background:linear-gradient(155deg,rgba(12,18,25,.78),rgba(5,10,16,.72)); box-shadow:0 3px 9px #0006; text-align:center; isolation:isolate; }
.city-service::before { content:""; position:absolute; inset:0; z-index:-1; border:9px solid transparent; border-image:url('/assets/ui-mmorpg/action-frame.webp') 64 / 9px / 0 stretch; filter:saturate(.45) brightness(.78); opacity:.86; pointer-events:none; }
.city-service::after { content:""; position:absolute; bottom:-3px; left:calc(50% - 5px); width:10px; height:12px; background:var(--hud-crystal) center/contain no-repeat; filter:brightness(.85) drop-shadow(0 0 2px #55cdff33); pointer-events:none; }
.city-service b { display:block; color:#eff9ff; font-size:11px; line-height:1.2; font-weight:550; text-shadow:0 1px 3px #000; }
.city-service small { display:block; margin-top:3px; color:#c2cbd1; font-size:8px; line-height:1.2; }
.city-service:active:not(:disabled) { transform:translate(-50%,-50%) translateY(1px); }
.city-service:focus-visible { outline:2px solid #70e5ff; outline-offset:4px; }
.city-building { padding:14px; margin:14px 0; border:1px solid #315361; border-radius:12px; background:#102630; display:flex; align-items:center; gap:12px; }
.city-building>div { flex:1; min-width:0; }
.city-building h3 { margin:0; font-size:14px; }
.city-building p { font-size:12px; margin:5px 0; color:#aac1cc; }
.city-building .action-button { flex-shrink:0; font-size:12px; }
.craft-card { padding:15px; border:1px solid #355467; border-radius:13px; margin:12px 0; background:linear-gradient(145deg,#142e3b,#101f2c); }
.craft-heading { display:flex; gap:12px; align-items:center; }
.craft-heading>.ui-icon { width:48px; height:48px; flex-shrink:0; object-fit:contain; }
.craft-heading h3 { font-size:15px; font-weight:600; margin:0; }
.craft-heading p { font-size:12px; line-height:1.45; margin:5px 0; color:#abc3d0; }
.recipe-ingredients { display:grid; gap:5px; margin:13px 0; }
.recipe-ingredient { display:flex; align-items:center; gap:8px; min-height:30px; font-size:12px; }
.recipe-ingredient>.ui-icon { width:29px; height:29px; object-fit:contain; flex-shrink:0; }
.recipe-ingredient>span { flex:1; }
.recipe-ingredient b { font-weight:550; white-space:nowrap; }
.recipe-ingredient.missing b { color:#ffb3a8; }
.recipe-ingredient.enough b { color:#80dccc; }
.recipe-ingredient.with-source { display:grid; grid-template-columns:29px minmax(0,1fr) auto; gap:5px 8px; padding:8px 0; border-bottom:1px solid #ffffff09; }
.recipe-ingredient.with-source>.ui-icon { grid-column:1; grid-row:1 / 3; }
.recipe-ingredient.with-source>span { grid-column:2; grid-row:1; min-width:0; overflow-wrap:anywhere; }
.recipe-ingredient.with-source>b { grid-column:2; grid-row:2; }
.recipe-ingredient small { display:block; margin-top:4px; color:#849ba6; font-size:10px; line-height:1.35; }
.recipe-ingredient .resource-find { grid-column:3; grid-row:1 / 3; justify-self:end; min-height:40px; padding:6px 10px; font-size:12px; font-weight:500; border:1px solid #456573; background:linear-gradient(#18323e,#0e222d); color:#d2e9f2; }
.recipe-ingredient .resource-find:disabled { color:#879ba7; opacity:.7; }
.city-gate { color:#efc77f; font-size:13px; }
.active-boost { padding:12px; border:1px solid #2f857f; border-radius:9px; color:#8ee2cc; font-size:13px; }
.consumable-art { display:grid; place-items:center; padding:12px; }
.consumable-art>.ui-icon { width:96px; height:96px; }
.inventory-slot.consumable-slot { border-color:#437c8e; text-align:center; font:inherit; }
.consume-hint { font-size:8px; color:#8fd8e4; line-height:1.2; }
@media(min-width:600px) { .city-scene { height:calc(100dvh - var(--header-height) - var(--nav-height) - 24px); } }
@media(max-width:350px) { .city-service b { font-size:10px; } .city-service small { font-size:7.5px; } .city-building { padding:10px; gap:8px; } }
.consume-hint { position:absolute; top:4px; left:4px; max-width:calc(100% - 26px); overflow:hidden; white-space:nowrap; font-size:7px; text-overflow:ellipsis; }
.inventory-slot.consumable-slot .inventory-item-art { top:17px; }