/* Quartier navigation: gestures stay on the world, text pages keep browser zoom. */
#world-stage,#world-canvas,#world-labels { touch-action:none; }
.exploration-controls {
 --control-ink:#143e47; --control-paper:#f3f3e9; --control-gold:#d4c28e;
 position:fixed; z-index:8; left:50%; bottom:110px; translate:-50% 0;
 width:min(510px,calc(100vw - 48px)); color:var(--control-ink); background:var(--control-paper);
 border:1px solid #799088; box-shadow:0 6px 24px #092d3830; padding:5px 7px 0;
}
.exploration-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.exploration-actions>button {
 display:flex; align-items:center; justify-content:flex-start; gap:13px; width:100%; min-height:60px;
 padding:10px 16px; border:1px solid transparent; color:var(--control-ink); text-align:left;
}
.exploration-actions>button>svg { flex:none; width:23px; height:25px; }
.exploration-actions #walk-toggle { background:var(--control-gold); border-color:#a8945b; }
.exploration-actions #characters-open { border-color:#c8d0c3; }
.exploration-actions>button:hover { background:#e3e8db; border-color:#7d978b; }
.exploration-actions #walk-toggle:hover { background:#dfcf9f; border-color:#9a854e; }
.exploration-actions>button:disabled { opacity:.45; cursor:wait; }
.exploration-copy { display:block; min-width:0; }
.exploration-copy strong { display:block; font:500 14px/1.3 Geist,sans-serif; letter-spacing:-.015em; }
.exploration-copy small { display:block; font:400 11px/1.4 Geist,sans-serif; margin-top:3px; color:#456064; }
.world-zoom { display:flex; align-items:center; gap:7px; min-height:47px; padding:0 9px; }
.world-zoom label { font-size:11px; width:38px; flex:none; }
.world-zoom button { width:44px; height:44px; flex:none; font:400 23px/1 Geist,sans-serif; }
.world-zoom button:hover:not(:disabled) { color:#84662c; }
.world-zoom button:disabled { opacity:.32; }
.world-zoom output { font-size:10px; font-variant-numeric:tabular-nums; width:23px; text-align:right; }
.world-zoom input[type=range] {
 appearance:none; -webkit-appearance:none; width:100%; min-width:45px; height:44px; margin:0;
 padding:0; background:transparent; border:0; cursor:ew-resize; touch-action:pan-y;
}
.world-zoom input[type=range]::-webkit-slider-runnable-track { height:3px; background:#a9b9ab; border-radius:3px; }
.world-zoom input[type=range]::-moz-range-track { height:3px; background:#a9b9ab; border-radius:3px; }
.world-zoom input[type=range]::-webkit-slider-thumb {
 -webkit-appearance:none; width:23px; height:23px; margin-top:-10px; border-radius:50%;
 background:#315b5c; border:3px solid #f5f2df; box-shadow:0 0 0 1px #608079;
}
.world-zoom input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#315b5c; border:3px solid #f5f2df; box-shadow:0 0 0 1px #608079; }
.exploration-controls :is(button,input):focus-visible { outline:2px solid #245e65; outline-offset:2px; }
body.has-detail .exploration-controls,body.character-talking .exploration-controls,body.character-talking .world-caption { display:none; }
body.walk-mode .exploration-controls { left:auto; right:3.3vw; bottom:113px; translate:none; width:205px; padding:5px; }
body.walk-mode .exploration-controls #walk-toggle,body.walk-mode .world-zoom { display:none; }
body.walk-mode .exploration-actions { display:block; }
body.walk-mode .exploration-actions>button { min-height:56px; }
/* The one-time hint leaves the screen centre and new controls unobstructed. */
.explore-prompt { transform:none; left:3.3vw; top:275px; bottom:auto; width:285px; max-width:none; padding:14px 36px 14px 15px; display:block; }
.explore-prompt>span { display:block; max-width:none; }
.explore-prompt>span>strong { font-size:13px; line-height:1.4; margin-bottom:5px; }
.explore-prompt .prompt-desktop { font-size:12px; line-height:1.6; }
.explore-prompt>button:not(#dismiss-help) { display:none; }
.explore-prompt #dismiss-help { position:absolute; top:1px; right:1px; width:36px; height:44px; }
.world-tools button { min-width:44px; min-height:44px; }
/* Access to all characters remains independent of camera angle and moving targets. */
#characters-dialog { max-width:770px; }
#characters-dialog h2 { font-size:clamp(32px,4.3vw,49px); margin-bottom:16px; }
#characters-dialog>p { font-size:14px; line-height:1.65; max-width:52ch; color:#496a6d; }
.characters-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:24px 0; }
.character-card { display:flex; align-items:center; gap:14px; min-height:100px; border:1px solid #b9c8bb; padding:8px 14px 8px 8px; text-align:left; background:#eef1e5; }
.character-card:hover { background:#e2eadc; border-color:#658783; }
.character-card:focus-visible { outline:2px solid #315e61; outline-offset:2px; }
.character-card-portrait { flex:none; width:59px; height:78px; display:grid; place-items:center; }
.character-card-portrait svg { max-width:100%; height:100%; }
.character-card-copy { display:block; flex:1; min-width:0; }
.character-card-copy strong { font:500 21px/1.2 Bricolage,Geist,sans-serif; display:block; margin-bottom:5px; }
.character-card-copy>span { font-size:12px; line-height:1.4; display:block; color:#486b6c; }
.character-card-arrow { align-self:flex-start; margin-top:6px; font-size:17px; }
#characters-dialog .characters-note { font-size:11px; line-height:1.6; }
@media(max-width:760px) {
 .exploration-controls { bottom:calc(96px + env(safe-area-inset-bottom,0px)); width:calc(100vw - 30px); padding:5px 5px 0; }
 .exploration-actions { gap:5px; }
 .exploration-actions>button { min-height:54px; gap:9px; padding:8px 10px; }
 .exploration-actions>button>svg { width:20px; height:23px; }
 .exploration-copy strong { font-size:12px; line-height:1.3; }
 .exploration-copy small { font-size:10px; line-height:1.4; margin-top:3px; }
 .world-zoom { gap:3px; padding-inline:7px; min-height:45px; }
 .world-zoom label { width:30px; font-size:10px; }
 .world-zoom output { width:21px; font-size:9px; }
 .world-zoom button { width:44px; height:44px; }
 body.walk-mode .exploration-controls { bottom:calc(106px + env(safe-area-inset-bottom,0px)); right:15px; width:140px; padding:4px; }
 body.walk-mode .exploration-actions>button { gap:7px; min-height:65px; padding:7px; }
 body.walk-mode .exploration-actions .exploration-copy small { font-size:9px; }
 body.walk-mode .exploration-actions .exploration-copy strong { font-size:11px; }
 body.walk-mode .exploration-actions>button>svg { width:18px; }
 .world-caption { display:none; }
 .explore-prompt { top:103px; left:15px; right:73px; width:auto; max-width:310px; padding:11px 34px 11px 12px; }
 .explore-prompt>span>strong { font-size:12px; line-height:1.4; }
 .explore-prompt .prompt-mobile { font-size:11px; line-height:1.6; }
 .world-tools { right:15px; gap:4px; }
 .world-tools button { width:44px; height:44px; min-height:44px; }
 .characters-list { grid-template-columns:1fr; gap:7px; margin:20px 0; }
 .character-card { min-height:78px; padding:6px 12px 6px 7px; gap:12px; }
 .character-card-portrait { width:51px; height:64px; }
 .character-card-copy strong { font-size:20px; margin-bottom:3px; }
 .character-card-copy>span { font-size:12px; }
 #characters-dialog h2 { font-size:34px; }
 #characters-dialog>p { font-size:13px; }
}
@media(max-width:350px) {
 .exploration-controls { width:calc(100vw - 22px); }
 .exploration-actions>button { gap:6px; padding-inline:7px; }
 .exploration-copy strong { font-size:11px; }
 .exploration-copy small { font-size:9px; }
 .exploration-actions>button>svg { width:18px; }
 body.walk-mode .exploration-controls { right:11px; width:127px; }
}
@media(max-width:760px) and (max-height:580px) {
 .explore-prompt { display:none; }
 .exploration-copy small { display:none; }
 .exploration-actions>button { min-height:44px; }
 .exploration-controls { bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
}
@media(prefers-reduced-motion:reduce) { .exploration-controls,.character-card { transition:none; } }
/* On phones the buildings carry the story; labels give a clear, compact target. */
@media(max-width:760px) {
 .waypoint { min-height:46px; width:130px; padding:11px 12px; }
 .waypoint small,.waypoint .waypoint-enter { display:none; }
 .waypoint strong { padding-right:14px; font-size:12px; line-height:1.4; }
 .waypoint .number { top:6px; right:7px; font-size:7px; }
 .waypoint:after { content:'↗'; position:absolute; display:block; right:9px; bottom:9px; height:auto; width:auto; border:0; background:none; font-size:11px; color:#ded4ad; }
}
body.character-talking .world-tools,body.character-talking .world-footer { visibility:hidden; opacity:0; pointer-events:none; }
body.character-talking .site-header { visibility:hidden; opacity:0; pointer-events:none; }