/* The village is the front door; the original atlas remains one click away. */
:root{--village-ink:#f4f4e8;--village-paper:#1d3233f0}
.topbar{background:#17292b;border-bottom-color:#385052;height:74px}.app-shell{height:calc(100dvh - 74px)}.topbar nav{gap:30px}.brand-symbol{color:#d2e3a6}.brand-wordmark small{color:#abc4ba}.nav-link.active:after{background:#d2e3a6}
.village-view{height:calc(100dvh - 74px);position:relative;overflow:hidden;background:#35545b;color:var(--village-ink);isolation:isolate}
#village-canvas{position:absolute;inset:0;outline-offset:-5px;touch-action:none;cursor:crosshair}#village-canvas canvas{width:100%;height:100%;display:block}
.village-welcome{position:absolute;top:30px;left:34px;pointer-events:none;max-width:360px;text-shadow:0 2px 20px #16353d77}
.world-chapter{display:block;font:11px var(--atlas);letter-spacing:1px;color:#d3e5ce;margin-bottom:9px}.village-welcome h1{font:700 36px/1.4 var(--font);letter-spacing:-1.3px;margin:0 0 10px}.village-welcome p{font:400 15px/1.7 var(--font);margin:0;color:#d5e4df}
.traveler-card{position:absolute;right:30px;top:28px;display:flex;align-items:center;gap:11px;background:var(--village-paper);border:1px solid #78968c66;padding:11px 13px;border-radius:13px;box-shadow:0 6px 30px #0b242522;backdrop-filter:blur(12px)}
.traveler-face{background:#f3cd89;color:#314440;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:28px;transform:rotate(-5deg)}.traveler-card strong{font-size:13px;display:block;font-weight:600}.traveler-card div>span{font-size:11px;color:#b3c9bf;display:block;margin-top:3px}.traveler-card button{font-size:25px;padding:3px 6px;margin-left:8px;border-left:1px solid #69827655}
.village-tools{position:absolute;top:108px;right:30px;display:flex;gap:7px}.village-tools button{background:#203739e8;border:1px solid #6b8a8166;border-radius:8px;min-height:38px;padding:7px 11px;font-size:12px;backdrop-filter:blur(12px)}.village-tools button[aria-pressed=true]{border-color:#bdd2a9;color:#e8efd1}.village-tools button:nth-last-child(-n+2){font-size:19px;padding:3px 10px}
.village-passport{position:absolute;top:166px;right:30px;width:253px;z-index:4;border:1px solid #78968c66;border-radius:11px;background:var(--village-paper);backdrop-filter:blur(12px);box-shadow:0 8px 35px #0b242526}.village-passport summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:13px}.village-passport summary::-webkit-details-marker{display:none}.village-passport summary>b{font:12px var(--atlas);color:#d5e8b3}.village-passport[open] summary{border-bottom:1px solid #78968c44}.passport-content{padding:14px}.passport-content>strong{font-size:13px;font-weight:600}.passport-content p{font-size:12px;line-height:1.7;color:#b8cdc4;margin:7px 0 13px}.passport-content small{font-size:10px;color:#a9c0b4;display:block;margin-top:15px}
.stamp-stop{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 0;gap:8px;border-bottom:1px solid #68817944;font-size:12px;text-align:left}.stamp-stop span{display:flex;align-items:center;gap:8px}.stamp-stop i{font-style:normal;color:#c9ddad;border:1px dashed #a0b88a88;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}.stamp-stop small{margin:0;color:#b1d2bc;font-size:11px}.stamp-stop.collected i{background:#d7e5b7;color:#304437;border-style:solid}
.village-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.portal-label{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;display:flex;align-items:center;gap:6px;color:#f6f5e8;background:#1e3434eb;border:1px solid #a0b9a577;padding:6px 9px;border-radius:7px;font-size:12px;box-shadow:0 3px 12px #1b30243a;will-change:transform}.portal-label:before{content:'';width:5px;height:5px;background:var(--portal-color,#dfedb2);border-radius:50%;box-shadow:0 0 7px var(--portal-color)}.portal-label.nearby{background:#e1e9bd;color:#273c33;border-color:#fff9}.portal-label.nearby:before{background:#477449}.portal-label:focus-visible{z-index:8}
.village-bottom{position:absolute;bottom:26px;left:32px;right:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:15px;pointer-events:none}.village-bottom>*{pointer-events:auto}.district-picker{background:var(--village-paper);border:1px solid #78968c66;padding:13px 14px;border-radius:12px;backdrop-filter:blur(12px);box-shadow:0 5px 25px #16353433}.district-picker>span{font-size:11px;color:#b9d1c4;display:block;margin-bottom:9px}.district-picker>div{display:flex;gap:7px}.district-picker button{font-size:13px;background:#45615955;border:1px solid #8da28b33;border-radius:7px;padding:9px 10px;display:flex;gap:6px;align-items:center}.district-picker i{background:var(--district);width:6px;height:6px;border-radius:50%;display:inline-block}.walking-hint{display:flex;align-items:center;gap:7px;background:#233c3bd9;border:1px solid #78968c44;padding:12px 15px;border-radius:9px;font-size:12px;backdrop-filter:blur(12px)}.walking-hint small{font-size:11px;color:#afc4b7;margin-left:5px}
.portal-prompt{position:absolute;bottom:139px;left:50%;transform:translateX(-50%);z-index:3;min-width:360px;max-width:calc(100% - 40px);display:flex;align-items:center;gap:24px;background:#213738f5;border:1px solid #cadcaf88;box-shadow:0 12px 40px #10232450;border-radius:13px;padding:17px 20px}.portal-prompt span{font-size:10px;color:#b9d2a9;display:block;margin-bottom:4px}.portal-prompt strong{font-size:19px}.portal-prompt p{font-size:12px;color:#cad8ce;margin:5px 0 0}.portal-prompt .primary{white-space:nowrap;font-size:13px;min-height:42px;padding:10px 13px;background:#dce9b6}
.world-loading,.world-fallback{position:absolute;inset:0;background:#304e55;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;z-index:6;padding:30px;text-align:center}.world-loading span{font-size:50px;color:#dbe7b4}.world-loading strong,.world-fallback strong{font-size:18px}.world-fallback p{font-size:15px;line-height:1.7;max-width:320px}.walk-pad{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1150px){.walking-hint small{display:none}.village-welcome h1{font-size:30px}.district-picker button{font-size:12px;padding:9px 8px}.village-bottom{left:24px;right:24px}.village-welcome{left:25px}}
@media(max-width:760px){
 .topbar{height:65px;padding:0 13px;gap:11px}.app-shell,.village-view{height:calc(100dvh - 65px)}.brand-wordmark{font-size:21px}.brand-symbol{font-size:25px}.topbar nav{gap:12px;margin-left:auto}.nav-link{font-size:12px}#save-count{display:none}.guide-button{display:none}
 .village-welcome{top:21px;left:19px;max-width:220px}.world-chapter{font-size:9px;letter-spacing:.4px;margin-bottom:6px}.village-welcome h1{font-size:25px;letter-spacing:-1px;margin-bottom:7px}.village-welcome p{font-size:12px;line-height:1.6}
 .traveler-card{top:22px;right:15px;padding:7px;gap:0;background:#203637cf}.traveler-face{width:29px;height:29px;border-radius:9px;font-size:22px}.traveler-card div{display:none}.traveler-card button{font-size:23px;margin-left:5px;padding:2px 4px}
 .village-tools{top:84px;right:15px;display:grid;grid-template-columns:1fr 1fr;gap:5px}.village-tools button{font-size:10px;min-height:31px;padding:5px 7px}.village-tools button:nth-last-child(-n+2){font-size:16px;padding:0}
 .village-passport{top:166px;right:15px;width:132px}.village-passport[open]{width:245px}.village-passport summary{font-size:11px;padding:10px}.village-passport summary>b{font-size:10px}.passport-content{padding:12px}
 .village-bottom{left:14px;right:14px;bottom:16px;display:block}.district-picker{padding:10px;border-radius:10px}.district-picker>span{font-size:11px;margin-bottom:7px}.district-picker>div{gap:5px}.district-picker button{flex:1;justify-content:center;font-size:11px;padding:9px 4px;gap:4px}.district-picker i{width:4px;height:4px}.walking-hint{font-size:11px;padding:0;border:0;background:none;justify-content:center;margin:10px 0 0}.walking-hint small{display:none}
 .portal-label{font-size:11px;padding:5px 7px;border-radius:5px}.portal-label:before{width:4px;height:4px}.portal-prompt{bottom:135px;left:15px;right:15px;max-width:none;min-width:0;transform:none;gap:10px;padding:12px 13px;border-radius:10px}.portal-prompt strong{font-size:16px}.portal-prompt p{font-size:11px;max-width:160px;line-height:1.5}.portal-prompt .primary{font-size:11px;padding:9px;min-height:39px}.portal-prompt span{font-size:9px}
 .walk-pad{position:absolute;bottom:143px;left:16px;display:grid;grid-template-columns:32px 32px 32px;grid-template-rows:32px 32px;gap:4px}.walk-pad button{border:1px solid #b9cbb478;border-radius:7px;background:#203637cb;font-size:17px;touch-action:none}.walk-pad button:first-child{grid-column:2}.walk-pad button:nth-child(2){grid-column:1;grid-row:2}.walk-pad button:nth-child(3){grid-column:2;grid-row:2}.walk-pad button:nth-child(4){grid-column:3;grid-row:2}.village-view.has-portal .walk-pad{bottom:225px}
}
@media(max-width:360px){.topbar nav{gap:9px}.nav-link{font-size:11px}.brand-symbol{display:none}.district-picker button{font-size:10px}}
.world-today{pointer-events:auto;margin-top:15px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border-left:2px solid #d5e6b5;padding:3px 0 3px 11px;font-size:13px;font-weight:600;color:#f3f4d8}.world-today small{font-size:10px;letter-spacing:.4px;font-weight:400;color:#bccfc2}.world-today:hover{color:#fff}.traveler-label{font-size:10px;padding:3px 7px;background:#243f3d;z-index:2}.traveler-label:before{display:none}
.world-unavailable .village-labels,.world-unavailable .village-tools,.world-unavailable .village-passport,.world-unavailable .village-bottom,.world-unavailable .walk-pad{display:none}
@media(max-width:760px){.world-today{font-size:11px;margin-top:11px;padding-left:8px;gap:2px}.world-today small{font-size:9px}}
.station-label{background:#e1ddba;color:#344e45;border-color:#fcf7d1;font-weight:600}.station-label:before{background:#718d62;box-shadow:none}
.district-picker>div{flex-wrap:wrap}.district-picker button{white-space:nowrap}
.portal-story-link{display:inline-block;margin:0 0 16px;color:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.district-picker>div{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.district-picker button{flex:0 0 auto;min-width:65px}.district-picker>div::-webkit-scrollbar{display:none}}
.village-welcome{background:#1c3537e0;border:1px solid #8da99844;backdrop-filter:blur(12px);border-radius:12px;padding:16px 18px;left:28px;top:25px;max-width:330px;box-shadow:0 6px 25px #17313420;text-shadow:none}.village-welcome h1{font-size:30px}.village-welcome p{font-size:13px;line-height:1.7}.world-today{font-size:12px;margin-top:12px}.world-chapter{font-size:10px}
@media(max-width:760px){.village-welcome{left:15px;top:20px;width:215px;padding:12px;border-radius:10px}.village-welcome h1{font-size:23px;margin-bottom:6px}.village-welcome p{font-size:11px;line-height:1.65}.world-chapter{font-size:8px;letter-spacing:.3px}.world-today{font-size:10px;line-height:1.5;margin-top:10px}.world-today small{font-size:8px}.village-tools{top:84px}}
@media(max-width:760px){.guide-button{display:block;font-size:0;width:18px;min-width:18px;padding:0;margin-left:0}.guide-button span{font-size:16px;margin:0}.topbar{gap:9px}.topbar nav{gap:10px}.village-welcome p{font-size:12px}}

/* The sound control stays beside the walking hint, away from camera tools. */
.walking-hint{max-width:100%;min-width:0}.walking-hint #walking-status{min-width:0;line-height:1.5}
.village-sound{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;min-height:30px;padding:4px 8px;border:1px solid #8b85b466;border-radius:7px;background:#252c49;color:#cfc9e6;font-size:11px;white-space:nowrap}.village-sound[aria-pressed=true]{border-color:#b1a3d699;color:#eee4ff}.village-sound svg{flex-shrink:0}.village-sound:focus-visible{outline:2px solid #d7c3ff;outline-offset:3px}.village-sound:disabled{opacity:.6}
@media(max-width:760px){.walking-hint{gap:6px;margin-top:7px}.walking-hint #walking-status{font-size:10px}.village-sound{font-size:10px;min-height:30px;padding:4px 6px}}

/* Sound is a small, non-modal mixer; its two channels never share a mute. */
.sound-settings-panel{position:absolute;right:32px;bottom:96px;z-index:8;width:320px;max-width:calc(100% - 28px);padding:20px;border:1px solid #9e92c575;border-radius:16px;background:#182138f7;box-shadow:0 18px 55px #05081a66;color:#f0eefa;backdrop-filter:blur(18px);pointer-events:auto;max-height:calc(100% - 130px);overflow:auto;scrollbar-width:thin;scrollbar-color:#766b94 transparent}
.sound-settings-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.sound-settings-heading>div>span{font-size:10px;color:#b7a9d7;letter-spacing:.08em}.sound-settings-heading h2{font:600 20px/1.5 var(--font);margin:4px 0 0;letter-spacing:-.5px}.sound-settings-close{border:1px solid #9c96bc55!important;background:#303951!important;border-radius:50%;width:28px;height:28px;padding:0!important;line-height:24px;font-size:22px!important;color:#e3dff2;flex-shrink:0}.sound-settings-track{margin:12px 0 22px;font-size:12px;color:#ded6ef;line-height:1.6}.sound-settings-track span{color:#a9afc5}
.sound-settings-channel+.sound-settings-channel{margin-top:22px}.sound-settings-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.sound-settings-label label{font-size:13px;color:#f2eef8}.sound-settings-label output{font:11px var(--atlas);color:#c4b6e8;min-width:36px;text-align:right}.sound-settings-range{display:flex;gap:12px;align-items:center}.sound-settings-range input[type=range]{appearance:none;-webkit-appearance:none;min-width:0;flex:1;width:100%;height:6px;margin:12px 0;cursor:pointer;border:0;border-radius:8px;background:linear-gradient(to right,#cbb5ec var(--sound-fill),#47516b var(--sound-fill));touch-action:pan-y;accent-color:#d4bff2}.sound-settings-range input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;background:#e4d7fa;border:3px solid #b29acb;border-radius:50%;box-shadow:0 2px 8px #0003;cursor:grab}.sound-settings-range input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#e4d7fa;border:3px solid #b29acb;border-radius:50%;cursor:grab}.sound-settings-range input[type=range]:focus-visible{outline:2px solid #dbc1ff;outline-offset:7px}.sound-channel-mute{min-width:42px;min-height:32px;border:1px solid #706985!important;border-radius:7px;background:#2b3450!important;font-size:11px!important;padding:4px 7px!important;color:#e4dcef}.sound-channel-mute[aria-pressed=true]{color:#d6c5ed;border-color:#b19acb!important;background:#403956!important}.sound-settings-status{font-size:11px;line-height:1.6;color:#c5b8df;margin:19px 0 0}.sound-settings-note{font-size:10px;line-height:1.6;color:#9ca9c3;border-top:1px solid #8290ae33;padding-top:12px;margin:10px 0 0}
.village-sound[aria-expanded=true]{border-color:#d3b8ed;background:#3a3556;color:#f1e7ff}
@media(max-width:760px){.sound-settings-panel{left:14px;right:14px;bottom:64px;width:auto;max-width:none;padding:18px;border-radius:14px;max-height:calc(100% - 100px)}.sound-settings-heading h2{font-size:19px}.sound-settings-track{font-size:12px;margin-bottom:19px}.sound-settings-label label{font-size:13px}.sound-settings-range input[type=range]{margin:15px 0}.sound-settings-range input[type=range]::-webkit-slider-thumb{width:22px;height:22px}.sound-channel-mute{min-height:36px}.sound-settings-channel+.sound-settings-channel{margin-top:18px}}