/* Quiet, tactile controls: a seasonal dial and working brass door knockers. */
.world-top{align-items:center;gap:18px}
.world-weather{gap:14px;flex-shrink:0}
.season-dial{display:flex;align-items:center;padding:0;gap:2px;border:0;background:transparent;box-shadow:none}
.season-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:64px;min-width:44px;min-height:68px;padding:7px 0;border-radius:9px;color:var(--muted);font:400 14px/1.2 var(--reading);transition:color .45s;touch-action:manipulation}
.season-choice>span:first-child{display:flex;transform:scale(.94);transition:transform .6s cubic-bezier(.22,.75,.25,1)}
.season-choice .icon{width:25px;height:25px;stroke-width:1.5;overflow:visible}
.season-choice[aria-pressed=true]{color:var(--ink);background:transparent;box-shadow:none}
.season-choice[aria-pressed=true]>span:first-child{transform:translateY(-1px) scale(1.16)}
.season-choice>span:last-child{font-weight:400;transition:font-weight .4s}
.season-choice[aria-pressed=true]>span:last-child{font-weight:650}
.season-choice:focus-visible,.world-weather>.time-button:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.season-choice:focus:not(:focus-visible),.world-weather>.time-button:focus:not(:focus-visible){outline:none}
.world-weather>.time-button{position:relative;display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:84px;min-height:68px;padding:7px 0;font-size:14px;line-height:1.2;white-space:nowrap;border:0;background:transparent;box-shadow:none;backdrop-filter:none;color:var(--muted)}
.world-weather>.time-button:before{content:'';position:absolute;left:-8px;top:17px;bottom:17px;width:1px;background:var(--line);opacity:.65}
.time-art{display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.22,.75,.25,1)}
.world-weather>.time-button .icon{width:25px;height:25px;stroke-width:1.5;overflow:visible}
/* The icon becomes a little coloured season; the control itself stays unboxed. */
[data-season=spring]{--weather-edge:#985c65;--weather-fill:#eaa89a;--weather-detail:#efc65e;--weather-detail-edge:#8e622f;--weather-vein:#f6d6c5}
[data-season=summer],[data-weather=summer]{--weather-edge:#9e701f;--weather-fill:#efbd4f;--weather-detail:#fff0a9;--weather-detail-edge:#ad771c;--weather-vein:#fff1c2}
[data-season=autumn]{--weather-edge:#965b30;--weather-fill:#d9944d;--weather-detail:#f7d0a0;--weather-detail-edge:#955a31;--weather-vein:#f9dfb5}
[data-season=winter]{--weather-edge:#4c8196;--weather-fill:#badbe5;--weather-detail:#d5eaf0;--weather-detail-edge:#4c8196;--weather-vein:#f0f7f9}
[data-weather=night]{--weather-edge:#9aaecd;--weather-fill:#c9d8ee;--weather-detail:#e9cc85;--weather-detail-edge:#e9cc85;--weather-vein:#f0f4fa}
.weather-icon{color:var(--muted);transition:color .5s,filter .5s}
.weather-icon>*{transform-box:view-box;transform-origin:12px 12px}
.weather-paint{fill:var(--weather-fill);fill-opacity:0;transition:fill-opacity .55s,fill .55s,stroke .55s}
.weather-detail{fill:var(--weather-detail);fill-opacity:0;transition:fill-opacity .55s,fill .55s,stroke .55s}
.weather-vein{transition:stroke .55s}.weather-shine{stroke:var(--weather-vein);opacity:0;transition:opacity .55s}.weather-star{stroke:var(--weather-detail)}
.season-choice[aria-pressed=true] .weather-icon,.time-button .weather-icon{color:var(--weather-edge);filter:drop-shadow(0 2px 2px #14251c12)}
.season-choice[aria-pressed=true] .weather-paint,.time-button .weather-paint{fill-opacity:1}
.season-choice[aria-pressed=true] .weather-detail{fill-opacity:1;stroke:var(--weather-detail-edge)}
.season-choice[aria-pressed=true] .weather-vein{stroke:var(--weather-vein)}
.season-choice[aria-pressed=true] .weather-shine,.time-button .weather-shine{opacity:.9}
body[data-light=night] [data-season=spring]{--weather-edge:#e3aaa5;--weather-fill:#d89189;--weather-detail:#efd080;--weather-detail-edge:#b17f48}
body[data-light=night] [data-season=summer],body[data-light=night] [data-weather=summer]{--weather-edge:#e8c677;--weather-fill:#f0bd53}
body[data-light=night] [data-season=autumn]{--weather-edge:#ebbd8b;--weather-fill:#dd9c5c;--weather-vein:#ffe0aa}
body[data-light=night] [data-season=winter]{--weather-edge:#9dcddd;--weather-detail:#e5f2f5;--weather-detail-edge:#78b3ca}
body[data-motion=on] .season-choice[aria-pressed=true] .weather-bloom{animation:season-bloom .8s cubic-bezier(.2,.7,.2,1)}
body[data-motion=on] .season-choice[aria-pressed=true] .weather-rays{animation:season-sun .9s cubic-bezier(.2,.7,.2,1)}
body[data-motion=on] .season-choice[aria-pressed=true] .weather-leaf{animation:season-leaf .85s cubic-bezier(.2,.7,.2,1)}
body[data-motion=on] .season-choice[aria-pressed=true] .weather-crystal{animation:season-frost .85s cubic-bezier(.2,.7,.2,1)}
body[data-motion=on] .time-art{animation:weather-rise .65s cubic-bezier(.2,.7,.2,1)}
@keyframes season-bloom{0%{transform:rotate(-18deg) scale(.74)}60%{transform:rotate(7deg) scale(1.08)}100%{transform:none}}
@keyframes season-sun{from{transform:rotate(-45deg) scale(.88)}to{transform:none}}
@keyframes season-leaf{0%{transform:rotate(-22deg) translateY(-2px)}55%{transform:rotate(9deg)}100%{transform:none}}
@keyframes season-frost{from{transform:rotate(-60deg) scale(.72)}to{transform:none}}
@keyframes weather-rise{from{opacity:.3;transform:translateY(5px) scale(.9)}to{opacity:1;transform:none}}
.house-directory{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;padding:4px 0 14px;overflow:visible}
.door-knocker{position:relative;display:flex;align-items:center;gap:12px;min-width:0;min-height:98px;padding:12px 9px 12px 0;text-align:left;border:0;border-radius:12px;background:transparent;touch-action:manipulation;color:var(--ink);transition:background .3s}
.door-name{font:400 clamp(21px,1.7vw,27px)/1.08 var(--display);letter-spacing:-.01em;max-width:110px;transition:color .25s}
.knocker-hardware{position:relative;display:block;width:55px;height:76px;flex:0 0 55px;perspective:220px;isolation:isolate}
.knocker-plate{position:absolute;width:35px;height:65px;left:10px;top:5px;border-radius:20px 20px 17px 17px;background:linear-gradient(110deg,#907753,#584830 54%,#84704e);border:1px solid #806e50;box-shadow:inset 1px 1px 1px #efd5a887,inset -1px -1px 1px #251f1680,1px 3px 5px #162a2424}
.knocker-plate:before,.knocker-plate:after{content:'';position:absolute;left:14px;width:4px;height:4px;border-radius:50%;background:linear-gradient(140deg,#e4caa0,#63513a);box-shadow:0 1px 1px #322719b3}
.knocker-plate:before{top:4px}.knocker-plate:after{bottom:4px}
.knocker-strike{position:absolute;left:22px;top:45px;width:11px;height:16px;border-radius:50%;background:linear-gradient(110deg,#b19a70,#675335);box-shadow:inset 1px 0 #e2c79980,0 1px 1px #271f1899}
.knocker-hinge{position:absolute;width:20px;height:13px;top:15px;left:18px;border:1px solid #655034;border-radius:6px;background:linear-gradient(110deg,#a3885d,#e4cfa4 38%,#92723f 75%,#5e4b30);box-shadow:inset 0 1px #fff3d899,0 2px 2px #281f1777;z-index:3}
.knocker-ring{position:absolute;left:5px;top:21px;width:45px;height:43px;border-radius:48% 48% 46% 46%;border:6px solid transparent;background:linear-gradient(150deg,#f1dfb8 0,#bd9b62 19%,#816238 41%,#d8b67a 61%,#f0dcb6 75%,#937340) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;transform:rotateX(0deg);transform-origin:50% 1px;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:2}
.knocker-shadow{position:absolute;left:7px;top:25px;width:44px;height:42px;border:7px solid #15251e;border-radius:50%;opacity:.25;filter:blur(2px);transform-origin:50% 0;pointer-events:none}
.door-visit-mark{position:absolute;bottom:9px;left:24px;width:7px;height:2px;background:var(--rust);opacity:0;border-radius:5px;transition:opacity .3s,width .3s}
.door-knocker.visited .door-visit-mark{opacity:.65}.door-knocker.active .door-visit-mark{opacity:1;width:17px;left:19px}.door-knocker.active .door-name{color:var(--rust)}
.door-knocker:focus-visible{outline:2px solid var(--rust);outline-offset:4px;background:var(--soft)}
.door-knocker:active{background:color-mix(in srgb,var(--soft) 55%,transparent)}
body[data-light=night] .knocker-plate{box-shadow:inset 1px 1px 1px #efd5a860,inset -1px -1px 1px #251f1680,1px 3px 6px #0005}
body[data-light=night] .knocker-shadow{opacity:.4}
@media(hover:hover){.door-knocker:hover .door-name{color:var(--rust)}.season-choice:hover{color:var(--ink)}.season-choice:hover .weather-icon{color:var(--weather-edge)}.world-weather>.time-button:hover{color:var(--ink)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){body[data-motion=on] .door-knocker:hover .knocker-ring{transform:rotateX(-24deg)}body[data-motion=on] .season-choice:not([aria-pressed=true]):hover>span:first-child{transform:translateY(-2px)}body[data-motion=on] .time-button:hover .time-art{transform:translateY(-2px)}}
@media(min-width:1001px) and (max-width:1450px){.world-top>p{max-width:135px;line-height:1.5;font-size:10px}.house-directory{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:7px}.door-knocker{padding-left:10px}.door-name{max-width:none}.door-visit-mark{margin-left:10px}}
@media(min-width:1301px) and (max-width:1450px){.house-directory{grid-template-columns:repeat(7,minmax(0,1fr))}.door-knocker{padding-left:0;gap:10px}.door-name{max-width:106px;font-size:24px}.door-visit-mark{margin-left:0}}
@media(min-width:701px) and (max-width:1000px){.world-top>p{max-width:140px;line-height:1.5}.house-directory{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:6px}.door-knocker{gap:9px}.door-name{font-size:24px}}
@media(max-width:700px){.world-top{left:21px;right:21px;flex-wrap:wrap;gap:9px;justify-content:flex-start}.world-top>p{max-width:none;width:100%;font-size:9px;margin:0}.world-weather{width:100%;justify-content:space-between;gap:8px}.season-dial{gap:0;padding:3px}.season-choice{width:48px;min-height:52px;font-size:12px}.season-choice .icon{width:20px;height:20px}.world-weather>.time-button{min-height:46px;padding:8px 12px;font-size:13px;gap:6px}.village-world{min-height:480px}.scene-wrap{top:90px}.house-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 13px;padding:6px 0 9px;overflow:visible}.door-knocker{min-height:96px;padding:8px 0;gap:10px;border-radius:9px}.door-knocker:last-child{grid-column:1/-1;width:calc(50% - 7px);justify-self:center}.knocker-hardware{width:51px;flex-basis:51px}.door-name{font-size:25px;max-width:100px}.neighbourhood-heading{margin-bottom:10px}}
@media(max-width:360px){.season-choice{width:44px}.world-weather>.time-button{font-size:12px;padding:8px 10px}.door-name{font-size:23px}.door-knocker{gap:7px}.house-directory{column-gap:10px}}
@media(max-width:700px){.season-dial{padding:0;gap:4px}.season-choice{width:50px;min-height:64px;font-size:13px;gap:8px;letter-spacing:-.02em}.season-choice .icon{width:24px;height:24px}.world-weather>.time-button{min-width:78px;min-height:64px;font-size:13px;padding:7px 0;gap:8px}.world-weather>.time-button .icon{width:24px;height:24px}.world-weather{gap:12px}}
@media(max-width:360px){.season-choice{width:44px;font-size:12px}.world-weather>.time-button{min-width:72px;font-size:12px}.world-weather{gap:10px}}
@media(max-width:300px){.world-top{left:12px;right:12px}.season-dial{gap:2px}.season-choice{width:44px}.world-weather>.time-button{min-width:68px}.world-weather{gap:6px}}
@media(prefers-reduced-motion:reduce){.season-choice,.season-choice .icon,.knocker-ring,.door-knocker,.door-name,.door-visit-mark{transition:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.world-weather *{transition:none!important;animation:none!important}}
@media(forced-colors:active){.season-choice[aria-pressed=true] .icon{outline:2px solid Highlight;outline-offset:4px;border-radius:50%}}
body[data-motion=off] .knocker-ring,body[data-motion=off] .season-choice .icon{transition:none;transform:none}