/* Shared usability adjustments preserve the original Christmas art and surfaces. */
dialog{overscroll-behavior:contain;touch-action:pan-y}
dialog::backdrop{background:#05162cbb;backdrop-filter:blur(5px)}
dialog button:focus-visible,dialog a:focus-visible{outline:3px solid #ffe49a;outline-offset:3px}
#passportDialog .passport-close{background:#9c2634;color:#fff;border:2px solid #ffe6ad;min-width:44px;min-height:44px;z-index:20}
#journeyDialog{max-height:calc(100dvh - 24px);overflow:auto}
#journeyDialog .icon-button{min-width:44px;min-height:44px}
#directoryDialog{max-height:calc(100dvh - 24px);scroll-padding-top:12px}
#directoryDialog .dialog-header{min-height:158px;padding:24px 156px 12px 24px}
#directoryDialog .dialog-header>.directory-santa{right:44px;width:100px;height:135px}
#directoryTitle{font-size:clamp(28px,3vw,42px)}
#directoryDialog .directory-item .directory-place-label{font-size:12px;letter-spacing:.04em}
#directoryDialog .directory-district .directory-item{min-height:100px;padding-block:16px}
#directoryDialog .directory-district .directory-item strong{font-size:clamp(22px,2.5vw,28px)}
#directoryDialog .directory-activity-button{min-height:88px}
#directoryDialog .directory-activity-button b{font-size:14px;padding:10px;white-space:nowrap}
#directoryList{gap:24px;padding:18px 28px 24px}
.village-radio .vr-panel{position:fixed;inset:0;width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 24px);height:fit-content;margin:auto;padding:18px;color:#fff6df;pointer-events:auto;border:2px solid #d8b973;overflow:auto}
.village-radio .vr-panel:not([open]){display:none}
.village-radio .vr-panel[open]{display:block}
.village-radio .vr-panel header{position:relative;padding-right:52px;min-height:44px}
.village-radio .vr-close{position:absolute;right:0;top:0;width:44px;height:44px}
.village-radio .vr-stations{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.village-radio .vr-station{display:flex;flex-direction:column;text-align:center;position:relative;padding:8px;gap:6px;justify-content:flex-start}
.village-radio .vr-station>img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:10px}
.village-radio .vr-station .vr-selected{position:absolute;top:10px;right:10px;border-radius:50%;background:#123b30;width:24px;height:24px}
.village-radio .vr-feature .vr-art{object-fit:contain}
.village-radio .vr-station strong{font-size:13px}
.village-radio .vr-panel .vr-transport{margin-block:12px}
.topbar .vr-top-pause{font-size:12px!important}
@media(max-width:700px){
 #directoryDialog .dialog-header{min-height:136px;padding:22px 126px 10px 16px}
 #directoryDialog .dialog-header>.directory-santa{right:38px;width:81px;height:110px}
 #directoryTitle{font-size:28px}
 #directoryDialog .dialog-intro{font-size:13px}
 #directoryList{padding-inline:16px}
 .village-radio .vr-panel{padding:14px}
 .village-radio .vr-stations{gap:6px}
 .village-radio .vr-station{padding:5px}
 .village-radio .vr-station span span{font-size:10px}
 .village-radio .vr-feature{padding:7px}
 .village-radio .vr-art{width:60px;height:60px}
 .village-radio .vr-panel h2{font-size:22px}
}
@media(max-height:500px) and (min-width:600px){
 .village-radio .vr-panel[open]{display:grid;grid-template-columns:1.15fr 1fr;gap:8px 18px;width:min(820px,calc(100vw - 24px));padding:12px}
 .village-radio .vr-panel header{grid-column:1/-1;margin:0}
 .village-radio .vr-panel h3{grid-column:1;grid-row:2;margin:0}
 .village-radio .vr-stations{grid-column:1;grid-row:3/7;margin:0}
 .village-radio .vr-feature{grid-column:2;grid-row:2/4}
 .village-radio .vr-transport{grid-column:2;grid-row:4;margin:0!important}
 .village-radio .vr-volume{grid-column:2;grid-row:5}
 .village-radio .vr-status{grid-column:2;grid-row:6;margin:0}
 .village-radio .vr-station>img{max-height:115px}
 #directoryDialog .dialog-header{min-height:120px;padding-top:12px}
 #directoryDialog .dialog-header>.directory-santa{height:105px;width:78px}
}
.avatar-native-actions{display:none}
@media(max-width:600px),(max-height:500px){
 .avatar-chooser.avatar-chooser-image{width:min(820px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;color:#fff6df;background:linear-gradient(145deg,#173e50,#092533);border:2px solid #d5b875;padding:8px;box-sizing:border-box}
 .avatar-chooser .avatar-authority-hit{display:block!important}
 .avatar-native-actions{display:grid;gap:8px;padding:8px}
 .avatar-native-actions h2{font:700 24px/1.2 Georgia,serif;margin:0 0 4px}
 .avatar-native-actions button,.avatar-native-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:1px solid #e2c985;border-radius:12px;background:#154b3c;color:#fff6df;text-decoration:none;font:700 13px/1.3 system-ui,sans-serif;box-sizing:border-box;text-align:center;cursor:pointer}
 .avatar-native-actions a{background:#0b2939}
 .avatar-native-actions button[aria-pressed=true]{background:#f3d18b;color:#123b30}
 .avatar-native-actions .avatar-native-close{background:#9c2634}
 .avatar-chooser.avatar-chooser-image .avatar-choice-status{border-radius:12px;font-size:12px;padding:8px;max-width:90%}
}
@media(max-height:500px) and (min-width:600px){
 .avatar-chooser.avatar-chooser-image[open]{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:center}
 .avatar-native-actions{padding:4px 8px}
 .avatar-native-actions h2{display:none}
 .avatar-chooser .avatar-authority-surface{max-height:calc(100dvh - 40px);aspect-ratio:1200/896}
}
.village-dialog-closebar{position:sticky;top:8px;height:0;z-index:50;pointer-events:none}
dialog .village-dialog-closebar>[data-close-dialog]{position:absolute!important;inset:0 12px auto auto!important;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:8px;pointer-events:auto;background:#9c2634;color:#fff;border:2px solid #ffe6ad;border-radius:50%;font-size:26px;box-sizing:border-box;z-index:50}
.village-dialog-closebar svg{width:22px;height:22px}
/* A readable Resume label keeps a stable, unclipped transport target. */
.topbar .vr-top-chip .vr-top-pause{flex:0 0 64px;width:64px;padding:0 4px;font-size:12px!important}
.topbar .vr-top-chip:not([hidden]){min-width:112px}
@media(max-width:360px){.topbar .vr-top-chip:not([hidden]){flex:0 0 112px}}
