/* Shared source camera. The Explore control is anchored to the clear paving at (768,740). */
.town-home{--scene-width:max(100vw,131svh);--square-y:76svh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.scene-sky-extension{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-home .scene-camera{width:var(--scene-width);top:calc(var(--square-y) - var(--scene-width) * var(--scene-anchor-ratio,.4817708333));bottom:auto}
.town-residents{position:absolute;inset:0;z-index:4;pointer-events:none}
.town-resident{position:absolute;transform:translate(-50%,-95%);pointer-events:none}
.resident-body{position:absolute;inset:0;transform-origin:50% 95%;visibility:hidden}
.resident-body .walker-sprite{filter:drop-shadow(0 1px .5px #263e3522)}
.resident-shadow{position:absolute;left:50%;top:93%;width:35%;height:7%;transform:translateX(-50%);border-radius:50%;background:#28443830}
.town-home #app.home-screen{display:block;flex:1;width:100%;max-width:none;min-height:0;padding:0 16px}
.town-home .home-hero{position:relative;height:100%;min-height:0;padding:4px 0 0;align-self:auto}
.town-home .town-title{font:800 clamp(48px,5.5vw,76px)/1 Georgia,serif;letter-spacing:-.045em;color:#174d50;text-shadow:0 2px 0 #fffbed}
.town-home .home-subtitle{font-size:clamp(17px,1.7vw,21px);font-weight:700;color:#234d50;background:transparent;padding:0;margin:10px 0 0;letter-spacing:.02em}
.town-home .explore-button{position:fixed;top:var(--square-y);left:50%;width:clamp(150px,22svh,230px);margin:0;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 12px #233e3529)}
.town-home .explore-button:hover{transform:translate(-50%,-50%);filter:drop-shadow(0 6px 12px #233e3540) brightness(1.04)}
.town-home .explore-label{font-size:clamp(20px,2vw,25px);padding:7px 25px;border-width:3px;bottom:1%}
.town-home .audio-credits{position:fixed;z-index:20;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;width:max-content;font-size:12px;padding:3px 10px;white-space:normal}
.audio-credits a{display:inline-flex;align-items:center;min-height:24px}
.teacher-panel[open]{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
@media(min-aspect-ratio:4/5) and (min-width:701px){
 .town-home .home-hero{align-items:flex-start;padding:10px 3vw}
 .town-home .town-title{font-size:clamp(48px,5vw,70px);padding:7px 18px;background:var(--cream);border-radius:18px}
 .town-home .home-subtitle{font-size:18px;padding:4px 12px;background:var(--cream);border-radius:10px;margin-top:6px}
}
@media(max-aspect-ratio:4/3){.town-home{--square-y:72svh;--scene-width:max(100vw,153svh)}}
@media(max-width:700px){
 .town-home{--square-y:78svh;--scene-width:max(100vw,121svh)}
 .town-home #app.home-screen,.town-home .home-hero{min-height:0}
 .town-home .home-hero{padding-top:22px}
 .town-home .town-title{font-size:clamp(46px,12vw,70px)}
 .town-home .home-subtitle{font-size:18px;margin-top:8px}
 .town-home .explore-button{width:clamp(150px,22svh,205px)}
}
@media(max-height:550px) and (min-aspect-ratio:4/3){
 .town-home{--square-y:76svh;--scene-width:max(100vw,131svh)}
 .town-home .home-hero{align-items:flex-start;padding:8px 4vw}
 .town-home .town-title{position:static;transform:none;font-size:44px;padding:6px 14px;background:var(--cream);border-radius:16px}
 .town-home .home-subtitle{position:static;transform:none;font-size:17px;padding:4px 12px;background:var(--cream);border-radius:10px;margin-top:4px}
 .town-home .explore-button{width:150px}
 .town-home .audio-credits{left:12px;transform:none}
}
/* At high zoom, keep every control reachable by allowing a normal document flow. */
@media(max-height:420px) and (max-width:480px){
 .town-home{height:auto;min-height:100svh;overflow-y:auto}
 .town-home #app.home-screen{flex:none}
 .town-home .home-hero{height:auto;padding-top:12px}
 .town-home .town-title{font-size:42px;background:var(--cream);border-radius:14px;padding:6px 12px}
 .town-home .home-subtitle{font-size:16px;background:var(--cream);padding:4px 10px;border-radius:10px}
 .town-home .explore-button,.town-home .explore-button:hover{position:relative;top:auto;left:auto;transform:none;margin:24px auto;width:150px}
 .town-home .audio-credits{position:relative;left:auto;bottom:auto;transform:none;margin:4px auto 12px}
}

@media(max-width:360px){.town-home .home-hero{padding-top:6px}.town-home .town-title{font-size:44px}}

/* Warm brass accents and deep ink keep the live interface distinct from the paint. */
.town-home .town-title{color:#102e32;border-bottom:4px solid #b47c25;padding-bottom:8px;text-shadow:0 1px 0 #fffbed}
.town-home .home-subtitle{color:#173338;font-weight:750}
.town-home .home-control,.town-home .control,.town-home .teacher-panel,.town-home .audio-credits{color:#142f33}
.town-home .explore-label{background:#f1ca72;color:#142f33;border-color:#173f40;box-shadow:0 0 0 3px #fffbed;font-weight:850}
.town-home .control[aria-pressed=true]{background:#dce8d6;border-color:#54776a;color:#102e32}
@media(max-width:360px){
 .town-home #toolbar{padding:10px 12px;gap:6px}
 .town-home .home-control{padding:4px 6px}
 .town-home .toolbar-controls{max-width:none;gap:4px;flex-wrap:nowrap}
 .town-home .toolbar-controls .control[data-short-label]{font-size:0;padding:8px}
 .town-home .toolbar-controls .control[data-short-label]::after{content:attr(data-short-label);font-size:12px}
}

/* Per-door canvases share the painting camera; only actual leaves are masked. */
.resident-door{position:absolute;pointer-events:none}
.resident-door-canvas{display:block;width:100%;height:100%}
.resident-sprite{width:100%;height:100%;object-fit:contain}