/* Game-world layout: readable controls float above a fully interactive 3D city. */
/* Layout overrides are defined at the end of this file. */
.district-intro{margin:14px 0;color:#527471;font-size:14px}.district-intro summary{cursor:pointer;line-height:1.7;font-weight:700}.district-intro .description{margin-top:10px}.district-intro .tags{margin-bottom:4px}
:root{--ink:#244c54;--green:#278f87;--paper:#f8fbf5;--pink:#ed7d83}body{background:#d7edf0}header{height:78px;position:absolute;top:0;left:0;right:0;background:linear-gradient(#fffdf6f5,#fffdf6d9);border:0;padding:0 25px;box-shadow:0 3px 20px #265b6420;backdrop-filter:blur(12px)}.brand{font-size:25px;letter-spacing:1px}.brand-mark{background:#efbd5a;color:#fff7df;box-shadow:inset 0 -4px #c9933866;border:2px solid #ffe6a2;border-radius:17px;transform:rotate(-6deg)}nav{gap:24px}nav button{font-size:16px;color:#356675}nav button.active{border-color:#e48375;color:#264d56}main{display:block;position:relative;height:100dvh;min-height:720px}.world{height:100%;width:100%;background:#9ddcf0}.district-dock{position:absolute;z-index:12;top:96px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);padding:9px 12px 10px;background:#fffdf2ed;border:2px solid #fff;border-radius:24px;box-shadow:0 8px 25px #36617e24;backdrop-filter:blur(12px)}.group-nav{display:flex;justify-content:center;gap:8px}.group-nav button{border:1px solid #e0e9dd;border-radius:18px;background:#edf3ea;min-width:115px;padding:9px 13px;font-size:16px;font-weight:700;white-space:nowrap;box-shadow:inset 0 -2px #d3e1d0}.group-nav button span{font-size:20px;vertical-align:middle}.group-nav b{font-size:14px;border-radius:50%;background:#fff8;padding:1px 6px;margin-left:4px}.group-nav button.active{background:#ed8585;color:white;border-color:#e97d80;box-shadow:inset 0 -3px #d96473}.group-nav button:nth-child(2).active{background:#419b77;box-shadow:inset 0 -3px #247d5c}.group-nav button:nth-child(3).active{background:#429fb9;box-shadow:inset 0 -3px #247f9e}.group-nav button:nth-child(4).active{background:#dfa551;box-shadow:inset 0 -3px #bf883d}.district-nav{margin:8px 0 0;display:flex;justify-content:center;gap:5px}.district-nav button{background:#f1f0e7;border:1px solid #e3e7db;border-radius:13px;padding:7px 11px;font-size:14px;white-space:nowrap}.district-nav button.active{background:#2e8d86;border-color:#2e8d86;color:#fff}.scene-title{top:auto;bottom:154px;left:28px;max-width:275px;text-shadow:0 2px 8px #f2fcf0}.scene-title .eyebrow{display:none}.scene-title h1{font-size:28px;margin:0 0 8px;line-height:1.45}.scene-title p{font-size:14px;color:#355f61;background:#fff9e4dc;border-radius:10px;padding:6px 10px;max-width:none}.world.is-close .scene-title{display:none}.view-toolbar{top:210px;right:23px;gap:8px;z-index:3}.view-toolbar button{background:#fffdf2ed;border:2px solid white;border-radius:14px;box-shadow:0 4px 12px #28565a25;font-size:14px;padding:10px 14px}.scene-bottom{left:auto;right:360px;bottom:30px}.mouse-help{background:#fffdf3e0;box-shadow:0 3px 12px #28565a15;font-size:14px}.zoom{border:2px solid white}.scene-note{left:28px;bottom:12px;color:#326170;max-width:50%;text-shadow:0 1px #ffffff80;font-size:14px}.compass{right:370px;bottom:100px}.guide-badge{position:absolute;bottom:42px;left:25px;display:flex;align-items:center;gap:12px;padding:9px 18px 9px 9px;background:#fffdf3e8;border:2px solid white;border-radius:50px;box-shadow:0 5px 20px #27616c26}.guide-badge>span{display:grid;place-items:center;width:54px;height:54px;background:#f2c86c;border-radius:50%;color:#fffdf0;font-size:38px;border:3px solid #fff6d0}.guide-badge b{display:block;font-size:16px}.guide-badge small{display:block;font-size:14px;color:#63858a;margin-top:4px}#districtPanel{position:absolute;right:22px;bottom:22px;width:312px;max-height:calc(100% - 310px);padding:16px 20px 24px;border:2px solid white;border-radius:24px;background:#fffdf5f5;box-shadow:0 14px 40px #174b6433;backdrop-filter:blur(12px);scrollbar-width:thin;z-index:5}.panel-toggle{display:block;width:100%;font-size:14px;background:transparent;text-align:right;margin-bottom:12px;color:#65817c}.panel-top{display:flex;font-size:14px;margin-bottom:13px}.panel-top>span:first-child{font-size:14px;letter-spacing:0}#districtCount{display:block}.district-heading h2{font-size:29px}.district-heading .number{font-size:14px}.english{font-size:14px}.subtitle{font-size:18px;margin:17px 0 8px}.description{line-height:1.8;font-size:14px}.tags{margin:12px 0;font-size:14px}.photo-button img{height:160px}.heart{background:#ffe8df;color:#b66058;border:1px solid #efb0a3;min-width:66px}.heart.liked{background:#f28186;border-color:#e67780;color:white}.place-info h4{font-size:16px}.address{font-size:14px}.map-label{background:#fffdf3ed;border:2px solid #fff;padding:7px 13px;font-size:14px;box-shadow:0 4px 0 #43897844,0 7px 16px #255b6c25;font-weight:600}.map-label.selected{background:#ed8585;border-color:#fff4db;box-shadow:0 0 0 3px #ffd67f88,0 5px 15px #85484f33}#districtPanel.folded{max-height:62px;overflow:hidden}#districtPanel.folded>:not(.panel-toggle){display:none}#districtPanel.folded .panel-toggle{margin:0}#dashboard{padding-top:116px;background:#fffdf6;min-height:100dvh;max-width:1400px}.metrics article{background:#e9f3ec}.rank-row .heart{min-width:100px}#loading{background:#d7efed}.loading-icon{color:#e8a94d}.rank-heading h1{font-size:36px}
@media(max-width:1100px){.district-dock{top:92px}.group-nav button{min-width:102px}.district-nav button{padding:7px 9px}.scene-title{max-width:230px;bottom:165px}.scene-title h1{font-size:24px}.mouse-help{display:none}.scene-bottom{right:345px}#districtPanel{width:292px;right:16px}.compass{right:353px}.guide-badge{max-width:calc(100% - 355px)}.guide-badge small{max-width:180px}.brand{font-size:22px}}
@media(max-width:760px){header{position:relative;min-height:78px;height:auto;padding:12px 16px;gap:8px}.brand{font-size:21px}.brand small{font-size:14px}.brand-mark{width:41px;height:41px}nav{gap:14px}nav button{font-size:14px}main{height:auto;min-height:0;padding-top:0}.world{height:700px;min-height:75dvh}.district-dock{top:14px;width:calc(100% - 20px);max-width:none;border-radius:18px;padding:8px}.group-nav{gap:4px}.group-nav button{min-width:0;flex:1;padding:8px 4px;font-size:14px}.group-nav button span{display:none}.group-nav b{margin-left:2px;padding:1px 4px}.district-nav{gap:5px;flex-wrap:wrap}.district-nav button{padding:7px 9px;font-size:14px}.view-toolbar{top:164px;right:13px;gap:5px}.view-toolbar button{padding:8px 10px;font-size:14px}.scene-title{left:16px;bottom:145px;max-width:240px}.scene-title h1{font-size:24px}.scene-title p{font-size:14px;max-width:none}.guide-badge{left:14px;bottom:45px;max-width:calc(100% - 100px);padding:7px 13px 7px 7px;gap:7px}.guide-badge>span{width:42px;height:42px;font-size:29px}.guide-badge b{font-size:14px}.guide-badge small{font-size:14px;max-width:210px}.scene-bottom{right:12px;bottom:115px}.zoom span{display:none}.zoom{flex-direction:column}.zoom button{width:36px;height:36px;font-size:22px}.compass{right:23px;bottom:45px}.scene-note{left:16px;bottom:10px;font-size:14px;max-width:95%}.world.is-close .scene-title{display:none}#districtPanel{position:relative;right:auto;bottom:auto;width:auto;max-height:none;margin:0 10px 20px;border-radius:22px;padding:20px;box-shadow:0 6px 25px #32657325}#districtPanel.folded{max-height:62px}.photo-button img{height:220px}#dashboard{padding:28px 18px 50px}.rank-heading h1{font-size:28px}.metrics strong{font-size:32px}.lightbox-main h2{font-size:20px}}
@media(min-width:761px){.view-toolbar{flex-direction:row;top:218px}.view-toolbar button{padding:9px 12px}.panel-top{margin-bottom:8px}.panel-toggle{margin-bottom:8px}.english{display:none}.section-heading{margin-top:13px}.district-heading h2{font-size:27px}}

/* The city extends behind the header; no full-width white banner. */
header{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;pointer-events:none}.brand,header nav{pointer-events:auto}.brand{text-shadow:0 1px 8px #f5ffeb,0 0 16px #f5ffeb}.brand-mark{text-shadow:none}header nav{padding:3px 13px;border-radius:22px;background:#ffffffb5;backdrop-filter:blur(8px)}
@media(max-width:760px){header{position:absolute!important;left:0;right:0;top:0;min-height:0;height:auto;align-items:flex-start;padding:10px 12px}.brand{font-size:18px}.brand small{font-size:14px}.brand-mark{width:35px;height:35px;font-size:27px}header nav{padding:0 9px;margin-left:auto;gap:10px}header nav button{font-size:14px}.district-dock{top:124px}.view-toolbar{top:284px}.world{height:820px}.scene-title{bottom:145px}}
/* Dedicated guide column and stacked brand navigation. */
@media(min-width:761px){main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0;min-height:650px}.world{grid-column:1;min-width:0}#districtPanel{position:relative;grid-column:2;top:auto;right:auto;bottom:auto;width:auto;margin:12px 12px 12px 0;height:calc(100dvh - 24px);max-height:none;box-sizing:border-box;align-self:start}.district-dock{left:calc((100% - 330px)/2);top:142px;max-width:calc(100% - 350px)}header{right:330px;height:auto;padding:16px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}header nav{margin:0}.scene-bottom{right:20px;bottom:25px}.compass{right:30px}.scene-title{bottom:32px}.group-nav button{min-width:0}.district-nav{flex-wrap:wrap}}
@media(max-width:760px){header{flex-direction:column;gap:8px}header nav{margin:0}.district-dock{top:148px}.scene-title{bottom:100px}}

/* Full-height, wider guide and top-aligned district selection. */
@media(min-width:761px){main{grid-template-columns:minmax(0,1fr) 430px}#districtPanel{margin:0;height:100dvh;max-height:100dvh;border-radius:0;width:100%;border:0}header{right:430px}.district-dock{top:16px;left:calc((100% - 430px)/2);max-width:calc(100% - 450px)}header nav{flex-wrap:wrap;max-width:290px;gap:3px 12px}.photo-button img{height:215px}}
@media(min-width:761px) and (max-width:1450px){.district-dock{left:280px;transform:none;width:calc(100% - 725px);max-width:none}.group-nav{flex-wrap:wrap}.group-nav button{flex:1 1 40%;padding:7px 4px}.district-nav{gap:4px}.district-nav button{padding:6px 8px}}
@media(min-width:761px) and (max-width:1000px){.district-dock{top:166px;left:12px;width:calc(100% - 454px)}header nav{max-width:none}}
#community{min-height:100dvh;padding:175px 24px 60px;max-width:1000px;margin:auto;background:#eef6ec}#community h1{font-size:32px}#community p{line-height:1.7}#messageForm{display:grid;gap:10px;padding:24px;background:#fffdf6;border-radius:20px}#messageForm label{font-weight:700}#messageForm input,#messageForm textarea{font:inherit;font-size:16px;border:1px solid #adc6b8;border-radius:10px;padding:12px;width:100%;box-sizing:border-box}#messageForm button,#refreshMessages{font:inherit;font-size:16px;border:0;border-radius:12px;padding:12px 20px;background:#318b7d;color:white;cursor:pointer}#messageForm button:disabled{opacity:.5}#messageForm p,#messageStatus{font-size:14px}.board-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0 12px}.message-card{padding:20px;border-radius:16px;background:#fffdf6;margin:12px 0}.message-card header{position:static!important;display:flex;flex-direction:row;width:auto;padding:0;gap:15px;justify-content:space-between;pointer-events:auto}.message-card time{font-size:14px;color:#617870}.message-card p{white-space:pre-wrap;overflow-wrap:anywhere}.message-card button{font:inherit;font-size:14px;background:none;border:1px solid #a7bdb3;border-radius:10px;padding:6px 12px;cursor:pointer}#community[hidden]{display:none}@media(max-width:760px){#community{padding-top:175px}header nav{flex-wrap:wrap;max-width:100%;gap:10px}.district-dock{top:166px}}
@media(min-width:761px){body>header nav{max-width:235px}#community{padding-top:220px}}

/* Navigation sits to the right of district selection. */
.map-topbar{position:absolute;z-index:20;top:16px;left:235px;right:446px;display:flex;justify-content:center;align-items:flex-start;gap:14px;pointer-events:none}.map-topbar .district-dock{position:static;transform:none;width:520px;max-width:none;flex:0 1 520px;pointer-events:auto}.map-topbar nav{pointer-events:auto;display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 14px;flex:0 0 210px;border-radius:22px;background:#ffffffbd;backdrop-filter:blur(8px)}.map-topbar nav button{font-size:16px}.map-topbar .group-nav{flex-wrap:nowrap}.map-topbar .group-nav button{flex:1;min-width:0;padding:9px 7px}.map-topbar .district-nav{flex-wrap:wrap}body[data-view="board"] .map-topbar,body[data-view="rank"] .map-topbar{justify-content:flex-end}#districtPanel .panel-top{margin-top:12px}
@media(min-width:761px) and (max-width:1450px){.map-topbar{left:215px;right:442px;gap:8px}.map-topbar nav{flex-basis:145px;padding:8px 10px;gap:2px}.map-topbar nav button{font-size:14px}.map-topbar .district-dock{width:0;flex:1;padding:8px}.map-topbar .group-nav{flex-wrap:wrap}.map-topbar .group-nav button{flex:1 1 40%;font-size:14px;padding:6px 2px}.map-topbar .district-nav button{padding:6px}}
@media(max-width:1000px){.map-topbar{top:100px;left:12px;right:442px}.map-topbar nav{flex-basis:125px}}
@media(max-width:760px){.map-topbar{top:86px;left:10px;right:10px;gap:7px}.map-topbar .district-dock{width:0;flex:1;padding:7px}.map-topbar .group-nav{flex-wrap:wrap}.map-topbar .group-nav button{flex:1 1 40%;padding:6px 2px}.map-topbar nav{flex:0 0 100px;padding:7px;gap:0}.map-topbar nav button{font-size:14px}.map-topbar .district-nav button{padding:6px}.scene-title{bottom:60px}}

/* Three separate horizontal navigation buttons. */
.map-topbar nav{display:flex;flex-direction:row;flex-wrap:nowrap;flex:0 0 auto;gap:8px;padding:0;background:none;backdrop-filter:none;border-radius:0}.map-topbar nav button{white-space:nowrap;background:#fffdf2ed;border:2px solid #fff;border-radius:17px;padding:13px 15px;margin:0;font-size:14px;box-shadow:0 4px 12px #345b5720}.map-topbar nav button.active{background:#328b7e;color:white;border-color:#e5f3df}.cloud-frame{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.cloud-frame i{position:absolute;display:block;background:url('cloud-edge.svg') repeat-x;background-size:240px 70px;height:70px;opacity:.9}.cloud-frame i:nth-child(1){top:-22px;left:0;right:0}.cloud-frame i:nth-child(2){bottom:-22px;left:0;right:0;transform:rotate(180deg)}.cloud-frame i:nth-child(3){left:-24px;top:0;width:100vh;transform:rotate(-90deg) translateX(-100%);transform-origin:top left}.cloud-frame i:nth-child(4){right:-24px;top:0;width:100vh;transform:rotate(90deg) translateX(100%);transform-origin:top right}
@media(max-width:1450px){.map-topbar{top:90px;left:14px;right:444px;flex-wrap:wrap;justify-content:flex-end}.map-topbar .district-dock{flex:1 1 330px;width:auto}.map-topbar nav{flex:0 0 auto}.map-topbar nav button{padding:10px 12px}}
@media(max-width:760px){.map-topbar{top:85px;left:10px;right:10px;gap:7px}.map-topbar .district-dock{flex:1 1 100%}.map-topbar nav{width:100%;justify-content:center}.map-topbar nav button{padding:10px;flex:1;font-size:14px}.cloud-frame i{opacity:.8}}

/* Zoom out gathers the four cloud banks inward; zoom in opens the view. */
.cloud-frame{inset:var(--cloud-inset-y,0%) var(--cloud-inset-x,0%);overflow:visible;filter:drop-shadow(0 5px 10px #ffffff30)}
.cloud-frame i{background-size:300px 110px;height:110px;opacity:.82}
.cloud-frame i:nth-child(1){top:-32px;left:-40px;right:-40px}
.cloud-frame i:nth-child(2){bottom:-32px;left:-40px;right:-40px}
.cloud-frame i:nth-child(3){left:-32px;top:-40px;width:110px;height:calc(100% + 80px);transform:none;background-repeat:repeat-y;background-size:110px 300px;background-image:url('cloud-edge.svg');mask-image:linear-gradient(90deg,#000 45%,transparent)}
.cloud-frame i:nth-child(4){right:-32px;top:-40px;width:110px;height:calc(100% + 80px);transform:rotate(180deg);background-repeat:repeat-y;background-size:110px 300px;background-image:url('cloud-edge.svg');mask-image:linear-gradient(90deg,#000 45%,transparent)}
.world{overflow:hidden}

.cloud-frame i:nth-child(n){left:var(--cx);top:var(--cy);right:auto;bottom:auto;width:260px;height:110px;transform:translate(-50%,-50%) scale(var(--cs));transform-origin:center;background:url(cloud-edge.svg) center/contain no-repeat;mask-image:none;opacity:.88}
.cloud-frame i:nth-child(n){width:clamp(140px,19vw,230px);height:100px;opacity:.78}

/* Uneven diagonal banks only: the middles of all four edges stay open. */
.cloud-frame{inset:var(--cloud-inset-y,0%) var(--cloud-inset-x,0%)}
.cloud-frame i:nth-child(n){width:clamp(130px,17vw,220px);height:110px;transform:translate(-50%,-50%) rotate(var(--turn)) scale(var(--cs));opacity:calc(var(--base) + var(--cloud-zoom,0)*var(--gain));filter:blur(.6px)}