/* A single illustrated village. Every tooth house is a native keyboard/touch button. */
.voice-notice{position:fixed;z-index:7;bottom:96px;left:50%;transform:translateX(-50%);width:min(90%,540px);padding:14px 20px;background:#fffaf0;color:#383c5c;border:2px solid #7754a4;border-radius:20px;box-shadow:0 4px 16px #33445520;font-size:1rem}
body.on-village{background:#cedde9;padding-bottom:84px}
.on-village main{min-height:calc(100svh - 84px);background:linear-gradient(#9dc5f2,#e4d5dc 62%,#d2e2b9)}
.on-village footer{display:none}
.village-hub{display:flow-root;width:100%;overflow:clip}
.village-map{position:relative;isolation:isolate;width:min(1500px,100%,calc((100svh - 110px)*1.77778));min-width:min(100%,1020px);aspect-ratio:1672/941;margin:0 auto}
.village-landscape,.village-landscape img{display:block;width:100%;height:100%}
.village-landscape{position:absolute;inset:0;z-index:-1}
.village-landscape img{object-fit:fill}
.village-back{position:absolute;top:3%;left:2%;display:flex;align-items:center;gap:8px;background:#fffaf0f5;color:#45416c;border:2px solid #fff;border-radius:50px;box-shadow:0 4px 0 #9caec0,0 5px 12px #3c577d16;min-height:46px;padding:8px 18px;font-family:Fredoka,Arial,sans-serif;font-size:1rem;z-index:3}
.village-back span:first-child{font-size:1.35rem}
.village-heading{position:absolute;left:25%;right:25%;top:0;height:17%;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;z-index:2}
.village-heading h1{width:100%;height:calc(100% - 29px);margin:0;font-size:inherit;line-height:1}
.village-heading h1 img{display:block;width:100%;height:100%;object-fit:contain;margin:0 auto}
.village-heading p{display:inline-block;border:2px solid #ffffffba;border-radius:40px;background:#fffaeeed;padding:0 19px;color:#39445b;font-family:Fredoka,Arial,sans-serif;font-size:clamp(.95rem,1.2vw,1.2rem);font-weight:500;box-shadow:0 3px 0 #b5c3c64d;white-space:nowrap;line-height:25px}
.house-entries{position:absolute;inset:0}
.house-entry{--house-color:#a780cc;position:absolute;left:var(--house-x);top:var(--house-y);width:23%;height:32%;transform:translate(-50%,-50%);background:transparent;border:0;padding:0;border-radius:48%;color:#383c5c}
.house-1{--house-x:18.8%;--house-y:32%;--house-color:#b699d9}
.house-2{--house-x:50.1%;--house-y:32%;--house-color:#edab96}
.house-3{--house-x:81.2%;--house-y:32%;--house-color:#9ebe7d}
.house-4{--house-x:18.8%;--house-y:69%;--house-color:#80c8c5}
.house-5{--house-x:50.1%;--house-y:69%;--house-color:#edcc76}
.house-6{--house-x:81.2%;--house-y:69%;--house-color:#dba3c5}
.house-label{position:absolute;top:var(--label-top,81%);left:50%;transform:translateX(-50%);width:max-content;max-width:114%;min-width:77%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:8px 16px;border:3px solid #fff9ed;border-radius:80px;background:linear-gradient(#fffdf4,#fff3d9);box-shadow:0 5px 0 var(--house-color),0 8px 0 #7e8c9d55,0 10px 16px #4e6d641b;transition:box-shadow .16s,transform .16s}
.house-4,.house-5,.house-6{--label-top:86%}
.house-name{font-family:Fredoka,Arial,sans-serif;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:600;line-height:1.12;max-width:220px;white-space:normal;text-align:center}
.house-playable{display:block;margin-top:4px;font:500 .75rem/1.15 Fredoka,Arial,sans-serif;color:#4c6039}
.house-number{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--house-color);color:#343a51;font-size:1rem;font-weight:bold;box-shadow:inset 0 2px 2px #fff8}
.house-focus{position:absolute;inset:0;border-radius:46%;border:4px solid transparent}
.house-entry:hover .house-label{transform:translate(-50%,-4px);box-shadow:0 7px 0 var(--house-color),0 10px 0 #7e8c9d55,0 13px 18px #4e6d6430}
.house-entry:active .house-label{transform:translate(-50%,2px);box-shadow:0 2px 0 var(--house-color),0 4px 0 #7e8c9d55}
.house-entry:focus-visible{outline:0}
.house-entry:focus-visible .house-focus{border-color:#244d83;box-shadow:0 0 0 4px #fff8e8}
.house-entry:focus-visible .house-label{outline:4px solid #244d83;outline-offset:4px}
.village-below{max-width:1050px;margin:0 auto;padding:0 20px}
.village-status{font-size:.82rem;color:#45514e;text-align:center;margin:6px 0 12px}
.on-village .topbar{background:#fff9ecef;border-color:#ffffffaa;box-shadow:0 -5px 16px #486a6510}
.on-village .tool{border-radius:35px;min-height:48px;border:2px solid #fff;background:#f8f3e8;box-shadow:0 3px 0 #cbd4c5}
.on-village .tool[aria-pressed=true]{border-color:#7754a4;background:#e6dcef}
body.calm .house-label{transition:none}
body.calm .house-entry:hover .house-label{transform:translateX(-50%)}
body.calm .village-landscape{filter:brightness(.94) saturate(.92)}
@media(max-width:1000px) and (min-width:701px){.village-heading p{font-size:.92rem;padding:0 14px}.house-label{padding:6px 9px;gap:5px}.house-name{font-size:1rem}.house-number{width:23px;height:23px;font-size:.85rem}}
@media(max-width:700px){
 .village-map{width:100%;min-width:0;aspect-ratio:2/3;margin-top:78px}
 .village-back{top:-70px;left:12px;min-height:44px;padding:5px 13px;font-size:.95rem}
 .village-heading{left:17%;right:17%;top:-22px;height:calc(13% + 22px)}
 .village-heading p{font-size:1rem;padding:0 12px}
 .house-entry{width:40%;height:27%}
 .house-1{--house-x:27%;--house-y:24%;--label-top:68.5%}
 .house-2{--house-x:73%;--house-y:24%;--label-top:68.5%}
 .house-3{--house-x:27%;--house-y:49%;--label-top:72.2%}
 .house-4{--house-x:73%;--house-y:49%;--label-top:72.2%}
 .house-5{--house-x:27%;--house-y:76%;--label-top:71.3%}
 .house-6{--house-x:73%;--house-y:76%;--label-top:71.3%}
 .house-label{max-width:112%;min-width:99%;min-height:50px;padding:5px 8px;gap:5px;border-width:2px}
 .house-name{font-size:clamp(.95rem,3.8vw,1.25rem);max-width:210px;line-height:1.12}
 .house-number{display:none}
 .village-status{margin-top:0;font-size:.8rem}
 .village-below{padding:0 14px}
 .on-village .topbar .tool{font-size:.73rem;min-height:59px;padding:6px 3px;gap:4px;border-radius:23px}
}
@media(max-width:360px){.house-label{padding:4px 6px}.house-name{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){.house-label{transition:none}.house-entry:hover .house-label{transform:translateX(-50%)}}