:root{--story-panel-width:min(520px,calc(100vw - 48px))}
.city-icon{display:block;width:24px;height:24px;flex:none}
.family-panel{width:var(--story-panel-width)}
.family-content{min-width:0;min-height:0;max-width:100%;overflow-x:hidden;overflow-y:auto;overflow-wrap:anywhere}
.family-member-list{grid-template-columns:minmax(0,1fr);min-width:0}
.family-member{display:grid;grid-template-columns:48px minmax(0,1fr) 16px;gap:12px;min-width:0;max-width:100%;white-space:normal}
.family-person{width:100%;min-width:0;max-width:100%}
.family-person strong,.family-member[data-family-profile=jiujiu] .family-person strong{display:block;white-space:normal;line-height:1.4}
.family-person strong small{display:block;font-size:14px;line-height:1.5;margin-top:2px}
.family-person>span{white-space:normal;overflow:visible;text-overflow:clip;font-size:15px;line-height:1.5;margin-top:3px}
.family-member>span:last-child{font-size:25px;margin:0}
.family-profile>div,.family-options button,.family-policy{min-width:0;white-space:normal;overflow-wrap:anywhere}
.family-bmw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:14px;margin:12px 0;background:#edf6f8;border:1px solid #b8d8df;border-radius:13px;color:#225c71}
.family-bmw strong{grid-column:1/-1;font-size:20px}
.family-bmw span{font-size:13px;line-height:1.5}
.family-bmw b{display:block;font-size:26px;font-weight:900}
body #explorer[open]:not([data-reader-view=arrival]){inset:100px 24px auto auto;width:var(--story-panel-width);height:auto;max-height:calc(100dvh - 135px)}
#drawerContent{min-width:0;overflow-x:hidden;overflow-wrap:anywhere}
body #explorer[open]:not([data-reader-view=arrival]) .policy-card h3{white-space:normal;overflow:visible;text-overflow:clip}
.blueprint-card{min-width:0;max-width:100%}
.blueprint-card>span,#blueprintNav button>span{min-width:0}
.blueprint-card strong,#blueprintNav button span strong{white-space:normal;overflow-wrap:anywhere}
.blueprint-card i .city-icon,#blueprintNav i .city-icon{width:25px;height:25px}
.island-header{align-items:flex-start}
.home-mark{width:clamp(344px,22vw,430px);min-height:116px;gap:20px;padding:16px 20px;background:#fffdf7f5;border:1px solid #c7dacc;border-radius:17px;box-shadow:0 5px 20px #244f3e20;color:#087562}
.home-mark>span{min-width:0;flex:1}.home-mark strong{font-size:40px;letter-spacing:-.04em;line-height:1.14;white-space:nowrap}
.home-mark small{font-size:20px;letter-spacing:.18em;line-height:1.4;margin-top:5px}
.home-mark em{align-self:center;flex:none;font-style:normal;font-weight:850;font-size:24px;line-height:1.35;color:#3e6b58;border-left:1px solid #cbdcd0;padding-left:18px;writing-mode:horizontal-tb;letter-spacing:.1em;white-space:nowrap}
.map-heading{display:none}
.map-utility{position:absolute;z-index:18;right:24px;bottom:24px;display:flex;align-items:center;gap:5px;padding:6px;background:#fffdf5f2;border:1px solid #bfd7c4;border-radius:16px;box-shadow:0 5px 18px #215e3b20}
.map-utility .view-tools,.map-utility .map-compass{position:static!important;inset:auto!important;transform:none;box-shadow:none;background:none;border:0;margin:0}
.map-utility .view-tools{display:flex;gap:4px}
.map-utility .view-tools button{display:flex;gap:7px;align-items:center;justify-content:center;width:auto;min-width:76px;min-height:44px;padding:0 10px;border:0;border-radius:11px;background:transparent;color:#215947}
.map-utility .view-tools button:hover{background:#e9f2e9}
.map-utility .view-tools button[aria-pressed=true]{background:#236b5b;color:white}
.map-utility .view-tools .city-icon{width:21px;height:21px}
.map-utility .map-compass{display:grid;place-items:center;width:47px;height:44px;padding:0;border-right:1px solid #d0e0d1;border-radius:0;color:#27634e}
.map-utility #northArrow{display:flex;align-items:center;gap:2px;width:auto;transform-origin:center}
.map-utility #northArrow .city-icon{width:19px;height:24px}
.map-utility #northArrow b{font-size:11px;position:static;transform:none}
.family-open .map-utility{display:none}
.reader-open .map-utility{right:calc(min(520px,100vw - 48px) + 42px)}
#entryWelcome{inset:0;margin:auto;height:max-content;width:min(600px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 32px);padding:27px;border:1px solid #d0e0d0;border-radius:25px;background:#fffdf7;color:#244c3d;box-shadow:0 20px 80px #173c4340;overflow-y:auto}
#entryWelcome::backdrop{background:#183d3b55;backdrop-filter:blur(3px)}
.welcome-head{display:flex;align-items:center;justify-content:space-between;gap:15px}
.welcome-head>span{font-size:14px;font-weight:800;letter-spacing:.1em;color:#338c78}
.welcome-close{display:grid;place-items:center;width:42px;height:42px;min-width:42px;border-radius:50%;background:#edf3e9;color:#245a47;font-size:25px}
#entryWelcome h2{font-size:29px;line-height:1.4;margin:12px 0 7px}
.welcome-lead{font-size:17px;line-height:1.6;color:#5c7466;margin:0 0 22px}
.welcome-entries{display:grid;gap:11px}
.welcome-entries button{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:14px;min-height:86px;text-align:left;padding:16px;border:1px solid #bfd9cf;border-radius:15px;background:#edf7f0;color:#225a48;white-space:normal}
.welcome-entries button:nth-child(2){background:#edf5fa;border-color:#bfd6e6;color:#2b607c}
.welcome-entries button:nth-child(3){background:#fcf2df;border-color:#e4d0a4;color:#805f30}
.welcome-entries .city-icon{width:31px;height:31px}
.welcome-entries strong{display:block;font-size:21px;line-height:1.4}
.welcome-entries small{display:block;font-size:14px;line-height:1.5;font-weight:500;margin-top:4px;color:#546d61}
.welcome-note{font-size:13px;color:#708372;text-align:center;margin:20px 0 0}
#mapLoading{position:fixed;inset:0;z-index:200;background:#f1f7e9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;color:#185a48;text-align:center;padding:28px}
#mapLoading[hidden]{display:none}
.loading-character{width:128px;height:180px;background:url('assets/chiu-walk-run-v2.png') 0 0/512px 341.33px no-repeat}
#mapLoading p{font-size:22px;font-weight:850;margin:0;line-height:1.6}
#mapLoading small{font-size:15px;color:#5c7969}
#mapLoading progress{width:min(300px,80vw);height:9px;border:0;border-radius:20px;overflow:hidden;accent-color:#0e8c74;background:#d4e8d7}
#mapLoading progress::-webkit-progress-bar{background:#d4e8d7;border-radius:20px}
#mapLoading progress::-webkit-progress-value{background:#0e8c74;border-radius:20px;transition:width .18s}
.loading-retry{padding:9px 20px;min-height:44px;color:white;background:#137d65;border-radius:11px;font-weight:750}
@media(max-width:1199px) and (min-width:800px){:root{--story-panel-width:min(480px,calc(100vw - 48px))}.reader-open .map-utility{right:522px}.home-mark{width:306px;min-height:108px;padding:14px 18px;gap:16px}.home-mark strong{font-size:34px}.home-mark small{font-size:18px}.home-mark em{font-size:22px;padding-left:15px}}
@media(max-width:799px){
 :root{--story-panel-width:100%}
 .family-panel{left:0;right:0;width:100%;bottom:0;border-radius:22px 22px 0 0;max-height:53dvh;padding-bottom:env(safe-area-inset-bottom)}
 .family-panel[data-stage=list]{max-height:55dvh}
 .family-content{padding:12px 16px 18px}
 .family-member{grid-template-columns:44px minmax(0,1fr) 13px;padding:11px;gap:10px}
 .family-avatar{width:44px;height:44px}
 .family-person strong{font-size:19px}
 .family-person strong small{font-size:13px}
 .family-person>span{font-size:14px}
 body #explorer[open]:not([data-reader-view=arrival]){inset:calc(67dvh - 78px) 0 0;width:100%;max-width:100%;max-height:none}body #explorer[open][data-expanded=true]:not([data-reader-view=arrival]){top:calc(50dvh - 78px)}
 .island-header{top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);align-items:center;gap:8px 5px}
 .home-mark{grid-column:1;grid-row:1;justify-self:start;width:max-content;min-height:56px;gap:5px;padding:6px 7px;border-radius:11px}
 .home-mark strong{font-size:clamp(18px,5.2vw,20px);letter-spacing:-.04em}
 .home-mark small{font-size:11px;margin-top:3px;letter-spacing:.1em}
 .home-mark em{font-size:12px;padding-left:6px}
 .header-actions{display:contents}
 .header-actions .family-entry{position:static;grid-column:1 / -1;grid-row:2;justify-self:start;margin:0}
 .header-actions #rollDice{grid-column:2;grid-row:1}
 .header-actions .header-tools{grid-column:3;grid-row:1}
 .header-actions #menuToggle{grid-column:4;grid-row:1}
 .map-utility{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:4px;gap:1px;border-radius:14px}
 .map-utility .view-tools button{min-width:67px;padding:0 7px;font-size:14px;gap:5px}
 .map-utility .map-compass{width:37px}
 .reader-open .map-utility{display:none}
 #entryWelcome{padding:19px;border-radius:21px}
 #entryWelcome h2{font-size:25px}
 .welcome-lead{font-size:15px;margin-bottom:16px}
 .welcome-entries button{padding:13px;grid-template-columns:32px minmax(0,1fr) 15px;gap:10px;min-height:82px}
 .welcome-entries strong{font-size:19px}
 .welcome-entries small{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#mapLoading progress::-webkit-progress-value{transition:none}}

#cityWrap .home-mark,#cityWrap .home-mark strong{color:#087562}#cityWrap .home-mark small{color:#47685c}

/* Keep the larger brand above navigation, with the same left alignment. */
@media(min-width:800px){.island-header{left:20px}#cityWrap #mapNav{top:156px}}
@media(min-width:800px) and (max-width:1199px){.island-header{left:14px}#cityWrap #mapNav{top:148px}}

@media(min-width:800px){.city-art .noon-sun{display:none!important}}

.family-policy-copy small{display:block;color:#688072;font-size:13px;line-height:1.55;margin-top:8px}

/* Desktop navigation ends after its content instead of filling the window. */
@media(min-width:800px){
 #cityWrap #mapNav{top:var(--nav-top,180px);bottom:auto;height:max-content;max-height:var(--nav-max-height,calc(100dvh - 200px))}
 #cityWrap #mapNav .nav-panel-scroll{flex:0 1 auto}
}
.family-policy-copy.family-difficulty-copy{background:#fff0ed;border-left-color:#d9776a;color:#8e2f38}
.family-policy-copy.family-difficulty-copy strong,.family-policy-copy.family-difficulty-copy p{color:#8e2f38}
.family-content blockquote,.family-content blockquote[class]{background:#fff0ed;border-left-color:#d9776a;color:#8e2f38}
.family-comparison button:first-child[aria-pressed=true]{background:#fff0ed;color:#8e2f38}
.family-comparison button:last-child[aria-pressed=true]{background:#eaf5ed;color:#23745c}
.family-options button:first-child{background:#fff0ed;border-color:#e6b9b0;color:#8e2f38}
.family-options button:last-child{background:#eaf5ed;border-color:#b9dac5;color:#23745c}

/* Party emblem sits beside the existing name and slogan as one brand card. */
#cityWrap .home-mark{width:max-content;max-width:calc(100vw - 40px);gap:12px;padding-inline:18px}
#cityWrap .home-mark>span{flex:0 0 auto}
#cityWrap .home-mark em{padding-left:14px}
.home-mark .party-emblem{display:block;flex:none;width:64px;height:64px;object-fit:cover;object-position:center;border-radius:4px}
@media(min-width:800px) and (max-width:1199px){
 #cityWrap .home-mark{gap:12px;padding-inline:14px}
 .home-mark .party-emblem{width:54px;height:54px}
}
@media(max-width:799px){
 #cityWrap .home-mark{max-width:calc(100vw - 24px);gap:5px;padding-inline:7px}
 .home-mark .party-emblem{width:28px;height:28px}
 #cityWrap .home-mark em{padding-left:6px}
}
/* On very narrow phones, preserve full touch targets without covering the brand. */
@media(max-width:349px){
 .home-mark{grid-column:1 / -1}
 .header-actions .family-entry{grid-column:1}
 .header-actions #rollDice,.header-actions .header-tools,.header-actions #menuToggle{grid-row:2}
}

/* Wide desktops keep the same compact brand size instead of scaling with vw. */
@media(min-width:1200px){
 #cityWrap .home-mark{min-height:104px;gap:10px;padding:12px 16px}
 #cityWrap .home-mark em{padding-left:12px}
 .home-mark .party-emblem{width:60px;height:60px}
}