/* BOOKLOG v1.7 — illustrated reading city */
.city-page{color:#24364a;max-width:1380px;margin:auto}.city-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px}.city-heading h1{font-family:Georgia,'Yu Mincho',serif;font-size:30px;letter-spacing:.035em;margin:5px 0 7px;color:#21324b}.city-heading h1 span{font-family:system-ui,sans-serif;font-size:17px;color:#947445}.city-heading p{font-size:13px;line-height:1.8;margin:0;color:#788493}.city-eyebrow{font-size:10px;letter-spacing:.2em;color:#aa8d5c;font-weight:900}.city-crest{flex-shrink:0;text-align:center;min-width:102px;border:1px solid #d8bd86;border-radius:12px;background:linear-gradient(145deg,#fff8ea,#e8d7b3);padding:9px 17px;box-shadow:0 2px 10px #7b69401b}.city-crest span{font-size:10px;color:#9c7b48;display:block}.city-crest strong{font-size:30px;font-family:Georgia,serif;color:#29374a}.city-crest small{font-size:13px;margin-left:3px}.city-topline{display:flex;gap:11px;align-items:stretch;margin-bottom:12px}.city-top-stat{min-width:0;flex:1;background:#1a2c3f;border:1px solid #4d5360;border-radius:9px;padding:11px 16px;color:#f0e4c5}.city-top-stat small{display:block;color:#b7b9b4;font-size:10px;margin-bottom:4px}.city-top-stat strong{font-weight:800;font-size:17px}.city-demo-btn{border:1px solid #b58b4e;border-radius:9px;background:#fbf3e5;color:#7e6035;font-size:12px;font-weight:800;padding:10px 16px;cursor:pointer}.city-demo-btn[aria-pressed="true"]{background:#334e61;color:#fff;border-color:#67818c}.city-frame{border:3px solid #2a3446;background:#132c3c;overflow:hidden;border-radius:14px;box-shadow:0 9px 27px #1b2f402f}.city-map-head{height:48px;background:linear-gradient(90deg,#101d2f,#273c50);display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#f5d598;border-bottom:1px solid #967b4d}.city-map-title{font-size:16px;font-weight:900;font-family:Georgia,'Yu Mincho',serif;letter-spacing:.06em}.city-live{font-size:11px;color:#dbe5dd}.city-viewport{position:relative;width:100%;height:490px;overflow:hidden;background:#95adb2}.city-viewport canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.city-viewport canvas:active{cursor:grabbing}.city-map-help{pointer-events:none;position:absolute;left:15px;bottom:16px;background:#12283ac9;color:#e2e7de;border:1px solid #a8b29b66;border-radius:20px;padding:8px 12px;font-size:10px;letter-spacing:.02em}.city-tools{position:absolute;right:16px;bottom:15px;display:flex;flex-direction:column;gap:7px}.city-tools button{border:1px solid #b1a377;color:#f0dfaa;background:#12283add;width:43px;height:43px;border-radius:9px;font-size:24px;box-shadow:0 2px 8px #10212b66;cursor:pointer}.city-tools button:active{background:#4c6471}.city-map-footer{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:10px;padding:9px 16px;background:#162639;color:#d6caba;font-size:11px}.city-light-btn{border:1px solid #c7ac76;border-radius:7px;color:#f6e8cb;background:transparent;font-size:11px;padding:5px 8px}.city-growth{margin:16px 0;border:1px solid #e3dfd7;padding:20px 22px 14px;background:linear-gradient(135deg,#fffdf7,#f7f2e8);border-radius:13px}.city-growth-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.city-growth-head p{font-size:12px;color:#7b8592;margin:5px 0 8px}.city-growth-head strong{font-size:17px;color:#3c4d60;white-space:nowrap}.city-growth input[type="range"]{width:100%;accent-color:#b88d4c;min-height:24px;cursor:pointer}.city-timeline-labels{display:flex;justify-content:space-between;color:#8e806d;font-size:10px}.city-caption{font-size:11px;color:#87909b;line-height:1.8;margin:11px 0}.city-detail-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}.city-panel{border:1px solid #e5e8eb;background:white;border-radius:12px;padding:18px 19px;min-height:150px}.city-subtitle{font-weight:900;font-size:16px;color:#30435b}.city-panel>p{font-size:12px;color:#738092;line-height:1.8}.city-genre-list{display:grid;gap:5px;margin-top:12px}.city-genre-item{display:flex;align-items:center;gap:8px;border:1px solid transparent;background:#f6f7f8;padding:8px;border-radius:7px;width:100%;color:#45556b;text-align:left;font-size:12px;cursor:pointer}.city-genre-item.current{background:#f3ede2;border-color:#d3bc8b}.city-genre-item>span:nth-child(2){min-width:42px}.city-genre-emoji{font-size:18px;width:22px}.city-genre-item strong{width:40px;text-align:right}.city-genre-bar{flex:1;height:7px;border-radius:8px;background:#e0e4e7;overflow:hidden}.city-genre-bar i{height:100%;background:linear-gradient(90deg,#a7a56c,#bd9856);display:block;border-radius:8px}.city-zone-count{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 0}.city-zone-count strong{font-size:32px;font-family:Georgia,serif;color:#a68149}.city-zone-count span{font-size:11px;color:#758395}.city-zone-books{display:grid;gap:5px;max-height:180px;overflow:auto;margin-top:10px}.city-zone-books button{border:0;border-bottom:1px solid #e9ecef;background:transparent;color:#41627f;text-align:left;padding:8px 0;font-size:12px;cursor:pointer}.city-muted{color:#8895a0;font-size:12px;line-height:1.7}.city-home-link{display:flex;align-items:center;gap:13px;padding:16px 20px;margin:20px 0 8px;background:linear-gradient(115deg,#172c41,#3c5668);color:white;border-radius:13px}.city-home-link>span{font-size:32px;color:#e4c182}.city-home-link>div{flex:1}.city-home-link strong{display:block;font-size:14px;color:#efd6a1}.city-home-link small{display:block;margin-top:4px;color:#d7e2e5;font-size:11px}.city-home-link .btn{flex-shrink:0;border-color:#d4b580;background:#f4e6d1;color:#394d60}
@media(max-width:750px){.city-heading{align-items:center;margin-bottom:14px}.city-heading h1{font-size:26px}.city-heading h1 span{display:block;font-size:13px;margin-top:4px}.city-heading p{font-size:11px}.city-crest{min-width:72px;padding:10px 9px}.city-crest strong{font-size:26px}.city-topline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.city-top-stat{padding:10px 6px;text-align:center}.city-top-stat small{font-size:9px}.city-top-stat strong{font-size:12px}.city-demo-btn{grid-column:1/-1;padding:9px}.city-viewport{height:410px}.city-map-head{height:45px;padding:0 11px}.city-map-title{font-size:13px}.city-live{font-size:10px}.city-tools{right:10px;bottom:12px}.city-tools button{height:39px;width:39px;font-size:21px}.city-map-help{left:7px;bottom:10px;padding:6px;font-size:9px;max-width:calc(100% - 63px)}.city-map-footer{padding:8px 10px;line-height:1.6}.city-growth{padding:15px 13px 12px}.city-growth-head{align-items:flex-start}.city-growth-head strong{font-size:12px}.city-growth-head p{font-size:11px}.city-detail-grid{grid-template-columns:1fr;gap:11px}.city-panel{padding:15px}.city-home-link{padding:12px;gap:9px}.city-home-link strong{font-size:12px}.city-home-link small{font-size:10px}.city-home-link .btn{font-size:10px;padding:7px}.bottom-nav button{min-width:0}.bottom-nav button span{font-size:22px}.bottom-nav button small{font-size:9px}}
.city-crest strong{white-space:nowrap;display:block}

/* v1.7: keep the read count on one line at narrow widths. */
.city-crest strong{display:flex;align-items:baseline;justify-content:center;gap:3px}
.city-crest strong span{display:inline;font-size:inherit;color:inherit}