/* Quiet overlay: scenery first; every activity stays available. */
header,.sky,.room,footer,.paths{transition:opacity 1.4s ease}
header{padding:20px 28px}.brand small,.sky .eyebrow,.sky small,.skyline{display:none}.brand{font-size:18px}.sunmark{font-size:28px}
.sky{top:100px;background:transparent!important;backdrop-filter:none;padding:0}.sky h1{font-size:22px;margin:0 0 8px}.sky p{font-size:11px;margin:0;opacity:.8}
.room{top:100px;gap:8px}.room button{background:#fff9ed70;border-color:transparent}.room #zone-label{opacity:.65}
footer{bottom:max(18px,env(safe-area-inset-bottom))}footer nav{background:#fff9ed80;border-color:#ffffff30;padding:4px;box-shadow:0 8px 30px #302f2710}footer nav button{font-size:11px;padding:10px 15px;min-height:44px}.status{font-size:11px;margin-bottom:10px}#connection{display:none}#actions button{background:#fff9edcf;min-height:44px}#play-toggle{display:none}
.paths{top:auto;bottom:23%;opacity:.5}.paths>div{display:none}.paths button{background:#fff9ed45;font-size:10px}.paths:hover{opacity:1}
body.resting header,body.resting .room,body.resting footer,body.resting .paths{opacity:.38}body.resting .sky{opacity:.4}body.resting :is(header,.room,footer,.paths):hover,body.resting :is(header,.room,footer,.paths):focus-within{opacity:1}
#scene{cursor:pointer}#toast{bottom:170px}
@media(max-width:700px){header{padding:12px 14px}.sky{top:86px;left:18px;max-width:60%}.sky h1{font-size:19px}.room{top:85px;right:12px}.room #zone-label{display:none}.room button{min-height:44px}.top button{min-height:44px}.brand{font-size:16px}.brand .sunmark{font-size:26px}footer{width:calc(100% - 24px);max-width:400px}.status{font-size:10px}#play-toggle{display:inline-block;min-height:44px;background:#fff9edb3;padding:10px 20px;margin-bottom:7px}#play-menu{display:none;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px;padding:6px}body.menu-open #play-menu{display:grid}#play-menu button{font-size:12px;padding:10px 5px;min-height:48px}#actions{margin-top:6px;flex-wrap:wrap}#actions button{min-height:44px}.paths{bottom:26%;left:8px;right:8px}#toast{bottom:230px}body.resting footer{opacity:.4}}
@media(max-height:500px) and (orientation:landscape){.sky{top:67px}.room{top:62px}footer{bottom:8px}.paths{bottom:30%}#actions{position:static;transform:none;width:auto;margin-top:5px}.status{display:none}#play-toggle{margin-bottom:2px}body.menu-open #play-menu{grid-template-columns:repeat(6,minmax(0,1fr))}footer{max-width:650px}#toast{bottom:135px}}
@media(prefers-reduced-motion:reduce){header,.sky,.room,footer,.paths{transition:none}}

body.connecting #connection{display:block}body.connecting footer{opacity:1}

body.night header button,body.night .room button{color:#413b3c}body.night #zone-label{color:#f7ddc0}

#secret-action{min-height:44px;margin:0 0 8px;background:#f8edc9e8;border:1px solid #c3ab73;font-size:12px}#secret-action[hidden]{display:none}body.connecting .status{display:flex!important}
/* Prevent the browser's full-canvas touch highlight without hiding keyboard focus. */
html{-webkit-tap-highlight-color:transparent}
#scene,#drawing,button,.brand,.sky{-webkit-user-select:none;user-select:none}
#scene,#drawing{-webkit-touch-callout:none}
@media(hover:none){button:hover{transform:none}}
/* Stable touch controls: quick wake-up, quiet idle, no hover jump. */
header,.sky,.room,footer,.paths{transition:opacity .22s ease}
body.resting :is(header,.sky,.room,footer,.paths){transition:opacity 1.4s ease}
body.resting :is(header,.room,footer){opacity:.65}
button,.brand{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{transition:background .15s ease,box-shadow .15s ease}
button:hover{transform:none}
button:active:not(:disabled){background:#e8dcc5;box-shadow:inset 0 1px 4px #403b4520}
#help{min-width:44px}
dialog{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#secret-action{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:100%;margin:0}
@media(max-width:700px){input,textarea,select{font-size:16px}header{padding-top:max(12px,env(safe-area-inset-top))}footer{bottom:max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){header,.sky,.room,footer,.paths,button,body.resting :is(header,.sky,.room,footer,.paths){transition:none}}
/* Location stays readable even when the other overlays rest. */
.location-badge{position:fixed;top:76px;left:28px;display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:18px;background:#fff9ede8;color:#413b3c;font-size:11px;pointer-events:none;z-index:1}
.location-badge #online{display:inline;margin:0;font-size:11px;border-left:1px solid #74624f40;padding-left:10px}
#neighborhood-intro h2{font-size:25px;line-height:1.5}#neighborhood-intro p{font-size:13px}
@media(max-width:700px){.location-badge{top:calc(max(12px,env(safe-area-inset-top)) + 50px);left:14px;max-width:calc(100% - 28px);gap:8px;font-size:11px}.sky{top:112px}.room{top:163px}.room #map-button{font-size:11px}.location-badge #zone-label,.location-badge #online{display:inline}}
@media(max-height:500px) and (orientation:landscape){.location-badge{top:58px;left:20px}.sky{top:100px}.room{top:62px}}
#map{width:560px;max-width:calc(100vw - 24px)}#map h2{font-size:26px}#map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}#map-grid .zone-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;min-height:104px;min-width:0;padding:12px;border-radius:14px;white-space:normal}#map-grid strong{font-size:13px;line-height:1.5;word-break:keep-all}#map-grid span{font-size:17px;font-weight:700}#map-grid small{font-size:10px;font-weight:400}#map-grid .occupied{border-color:#718563;background:#eef0df}#map-grid .current{border:2px solid #718563;opacity:1;cursor:default}#map-refresh{font-size:12px}#map-place{line-height:1.7}#close-map{position:sticky;bottom:0;background:#fff9ed;box-shadow:0 0 15px #fff9ed}
/* A compact page of nine destinations, rather than a long scrolling list. */
#map{width:460px;padding:20px 16px;max-height:calc(100dvh - 20px)}#map>.eyebrow{display:none}#map h2{font-size:23px;margin:0 0 7px}#map>p{font-size:11px;line-height:1.5;margin:7px 0}#map-refresh{padding:5px 14px;min-height:36px;font-size:11px}#map-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}#map-grid .zone-card{position:relative;align-items:center;justify-content:center;text-align:center;min-height:90px;padding:10px 3px 6px;gap:5px;border-radius:12px}#map-grid strong{font-size:12px;line-height:1.4}#map-grid strong span{display:block;font:inherit}#map-grid .zone-card>span{font-size:15px}#map-grid small{position:absolute;top:2px;right:5px;font-size:9px}.map-pages{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:10px}.map-pages button{min-height:40px;padding:7px 13px;font-size:11px}#map-page{font-size:12px}#map #map-place{font-size:10px;min-height:15px}#close-map{position:static;box-shadow:none;min-height:40px;padding:8px 20px;font-size:12px}@media(max-height:650px){#map{padding:12px}#map h2{font-size:20px}#map-grid .zone-card{min-height:76px}#map-grid{gap:5px}.map-pages{margin-top:7px}#map>p{margin:5px 0}}@media(max-height:450px) and (orientation:landscape){#map{width:740px}#map-grid{grid-template-columns:repeat(9,minmax(0,1fr))}#map-grid strong{font-size:10px}#map-grid .zone-card{min-height:76px}}
#companion-note{font-size:11px;line-height:1.6;color:#fff9ed;text-shadow:0 1px 4px #343c33;margin:6px 0}#companion[hidden],#companion-note[hidden]{display:none!important}
body.night .location-badge #zone-label{color:#413b3c}