/* Christmas belongs to the controls as well as the surrounding illustrations.
   Reuses approved media-journey artwork; no character or cover image is replaced. */
:root{--christmas-wood:repeating-linear-gradient(3deg,transparent 0 12px,#ffe4a810 13px 14px),linear-gradient(110deg,#205942,#103d32 60%,#164833);--christmas-red:linear-gradient(145deg,#c64542,#8c202e);--christmas-gold:#e1bf76;--christmas-cream:#fff4d5}
#villageViewDialog{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:26px;background:#032d3d;color:var(--christmas-cream);container-type:inline-size;overflow:auto}
#villageViewDialog .view-christmas-scene{box-sizing:border-box;min-height:75cqw;padding:0 0 24.1713cqw;border:0 solid transparent;border-image-source:url('/assets/img/media-journey/desktop-v1.webp');border-image-slice:630 140 350 140 fill;border-image-width:43.5083cqw 9.6685cqw 24.1713cqw;border-image-repeat:stretch round}
#villageViewDialog header{display:block;box-sizing:border-box;min-height:43.5083cqw;margin:0;padding:12.4cqw 28cqw 0 25cqw;text-align:center}
#villageViewDialog h2{margin:0;font:800 clamp(24px,5.5cqw,34px)/1.08 Georgia,serif;color:#fff1c7;text-shadow:0 2px 4px #002232}
#villageViewDialog .village-view-selector,#villageViewDialog .village-view-zoom{margin:0 12% 12px;gap:10px}
#villageViewDialog .view-motion{display:block;width:76%;margin:0 12%}
#villageViewDialog .world-control,#villageViewDialog .view-motion,.avatar-native-actions button,.avatar-native-actions a,.village-radio .vr-station,.village-radio .vr-panel-play,.village-radio .vr-prev,.village-radio .vr-next,.village-radio .vr-mute{
 position:relative;box-sizing:border-box;min-height:44px;border:2px solid var(--christmas-gold);border-radius:14px;background:var(--christmas-wood);color:var(--christmas-cream);box-shadow:inset 0 0 0 2px #092f29,inset 0 3px #ffffff15,0 4px 0 #573820,0 6px 9px #00192355;text-shadow:0 1px 2px #06251d;font:750 14px/1.25 system-ui,sans-serif;padding:10px;white-space:normal}
#villageViewDialog button[aria-pressed=true],.avatar-native-actions button[aria-pressed=true]{background:repeating-linear-gradient(4deg,transparent 0 12px,#fff4c320 13px 14px),linear-gradient(#f6d88e,#d8ac56);color:#143d30;text-shadow:none;box-shadow:inset 0 0 0 2px #ffedb2,0 4px 0 #805126,0 0 12px #ffda8044}
#villageViewDialog button[aria-pressed=true]::after{content:'✓';position:absolute;right:-6px;top:-8px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #ffe9a9;border-radius:50%;background:#235c35;color:#fff8df;font:800 13px/1 system-ui;text-shadow:none;box-shadow:0 2px 4px #001c24}
#villageViewDialog .view-motion{margin-top:16px}
#villageViewDialog .village-view-zoom button{width:auto;font-size:14px}
#villageViewDialog .village-view-selector button{font-size:13px}
#villageViewDialog [hidden]{display:none!important}
@media(max-width:700px){
 #villageViewDialog{width:min(430px,calc(100vw - 24px))}
 #villageViewDialog .view-christmas-scene{min-height:0;padding-bottom:63.1342cqw;border-image-source:url('/assets/img/media-journey/mobile-v1.webp');border-image-slice:550 85 560 85 fill;border-image-width:62.0068cqw 9.5839cqw 63.1342cqw}
 #villageViewDialog header{min-height:62.0068cqw;padding:26cqw 31cqw 0 17cqw}
 #villageViewDialog h2{font-size:clamp(22px,6.8cqw,29px)}
}
/* On short displays the full frame scrolls, with Close pinned above the artwork. */
@media(max-height:500px) and (min-width:701px){#villageViewDialog{width:min(540px,calc(100vw - 24px))}}

/* A snowy row of carved signs stays compact while clearly belonging to the village. */
#world .world-controls.village-controls{padding:7px 6px 6px;border:3px solid #c7a15a;border-radius:23px;background:repeating-linear-gradient(2deg,#784828 0 13px,#845433 14px 16px);box-shadow:inset 0 0 0 2px #e4c481,0 6px 0 #42281f,0 12px 24px #00172688}
#world .world-controls.village-controls::before{content:'';position:absolute;pointer-events:none;left:2px;right:2px;top:-6px;height:10px;border-radius:65% 45% 55% 35%;background:linear-gradient(#fffef2,#d9f2ef);box-shadow:0 3px 0 #8aafaa}
#world .village-controls>.world-control{border:1px solid #d7b56c;background:var(--christmas-wood);border-radius:14px;color:#fff4d5;box-shadow:inset 0 1px #fff6c633,0 2px 2px #351f1b;font-weight:800;text-shadow:0 1px 2px #061e22}
#world .village-controls>.world-control[aria-expanded=true]{background:linear-gradient(#edcf83,#cca153);color:#163d30;text-shadow:none;border-color:#fff0b5}
#world .village-controls>.world-control:hover{filter:brightness(1.15)}
#world .village-controls #worldStop{background:var(--christmas-red);border:2px solid #efcf87;padding:10px 16px}
.topbar .utility-button{border:1px solid #d1b273;border-radius:12px;background:var(--christmas-wood);color:#fff4d5;box-shadow:inset 0 1px #fff5ca22,0 3px 0 #53371f}
.topbar .vr-top-chip:not([hidden]){border:2px solid #d8b573;background:var(--christmas-wood);box-shadow:inset 0 2px #fff4d022,0 3px 0 #53371f}
.topbar .vr-top-chip .vr-top-pause{background:linear-gradient(#f6d894,#d0a858);color:#183c2c!important;border:1px solid #fff0b5}

/* Radio keeps its complete illustrated covers; the surrounding controls become signs. */
.village-radio .vr-panel{padding-top:43px;border:3px solid #d8b573;background:radial-gradient(ellipse at 50% 0,#32614844,transparent 50%),repeating-linear-gradient(3deg,transparent 0 18px,#d6ba7910 19px 20px),linear-gradient(135deg,#153f36,#062d2e);box-shadow:inset 0 0 0 3px #375b41,0 20px 60px #001727aa}
.village-radio .vr-panel header{padding-right:46px;margin-bottom:12px}
.village-radio .vr-panel h2{font:800 26px/1.1 Georgia,serif;color:#fff1cb;text-shadow:0 2px 3px #002328}
.village-radio .vr-feature{border:1px solid #cda75c;background:#062b2699;box-shadow:inset 0 0 14px #f9da7c10}
.village-radio .vr-station{padding:8px;border-width:2px!important;border-color:#c2a364!important}
.village-radio .vr-station>img{border:1px solid #e6c88a;border-radius:9px}
.village-radio .vr-station[aria-pressed=true]{border-color:#ffe4a0!important;box-shadow:inset 0 0 0 2px #fce39b55,0 4px 0 #674722,0 0 13px #f1cd6933;background:var(--christmas-wood)}
.village-radio .vr-panel .vr-panel-play{background:linear-gradient(#f4d997,#cdab62);color:#153d30;text-shadow:none;box-shadow:inset 0 0 0 2px #ffeab4,0 3px 0 #614225}
.village-radio .vr-station span span{color:#fff0d0}
.village-radio .vr-station strong{color:#ffe6a0}
.village-radio .vr-volume input{accent-color:#f5d27e}
.festive-lights{position:absolute;top:0;left:20px;right:20px;height:30px;display:flex;justify-content:space-around;align-items:flex-start;border-top:3px solid #538151;border-radius:0 0 50% 50%;pointer-events:none}
.festive-lights i{position:relative;display:block;width:8px;height:12px;margin-top:6px;border-radius:48% 48% 45% 45%;background:radial-gradient(circle at 35% 25%,#fffacb,#f0be53 55%,#ba721f);box-shadow:0 0 9px #e4b75388;transform:rotate(-14deg)}
.festive-lights i::before{content:'';position:absolute;left:2px;top:-7px;width:4px;height:7px;background:#588755;border-radius:2px}
.festive-lights i:nth-child(3n){background:radial-gradient(circle at 35% 25%,#fff,#87d7e5 45%,#2781a0);box-shadow:0 0 9px #9ed9df88;transform:rotate(16deg)}
.festive-lights i:nth-child(3n+1){background:radial-gradient(circle at 35% 25%,#ffd3a4,#e55849 45%,#ad2531);box-shadow:0 0 9px #ef775877}
@media(max-width:700px){.village-radio .vr-panel{padding:39px 12px 12px}.village-radio .vr-panel h2{font-size:23px}.village-radio .vr-station{padding:5px}}
@media(max-height:500px) and (min-width:600px){.village-radio .vr-panel[open]{padding:34px 12px 12px}.village-radio .vr-panel .village-dialog-closebar{grid-column:1/-1;grid-row:1}.village-radio .vr-panel header{grid-row:1}}

/* Common ornament-style Close: visible, consistent, and never smaller than 44px. */
dialog .village-dialog-closebar>button,.avatar-native-actions .avatar-native-close,#passportDialog .passport-close{min-width:44px;min-height:44px;border:3px solid #f3d18a!important;background:radial-gradient(circle at 32% 20%,#e1745d,#b02e38 55%,#6a1828)!important;color:#fff7df!important;box-shadow:inset 0 0 0 2px #8c2532,0 3px 0 #48252a,0 5px 12px #00162188!important;text-shadow:0 2px 1px #681927}
dialog .village-dialog-closebar>button{position:absolute!important;inset:0 12px auto auto!important;display:grid;place-items:center;width:44px;height:44px;padding:8px;border-radius:50%;pointer-events:auto;font-size:26px;box-sizing:border-box;z-index:50}
#villageViewDialog .village-dialog-closebar,#villageRadioPanel .village-dialog-closebar{top:10px}
.avatar-native-actions{border-radius:16px;background:repeating-linear-gradient(3deg,transparent 0 13px,#edca7312 14px 15px)}
.avatar-native-actions .avatar-native-close{border-radius:14px}
#passportDialog #clearPassportButton{min-height:44px;border:2px solid #dfbb76;border-radius:14px;background:var(--christmas-red);color:#fff4d5;padding:10px 16px}
#toast{border:2px solid #d5b470;background:var(--christmas-wood);color:#fff4d5;box-shadow:0 4px 0 #654329,0 12px 28px #00152566}
@media(prefers-reduced-motion:reduce){.festive-lights i{animation:none}}
/* Short landscape: the complete illustration sits beside the controls. */
@media(max-height:500px) and (min-width:600px){
 #villageViewDialog{width:min(720px,calc(100vw - 24px));border:2px solid #dabd79;background:linear-gradient(135deg,#153f36,#052c36)}
 #villageViewDialog .view-christmas-scene{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px 16px;min-height:0;padding:12px;border:0;border-image:none}
 #villageViewDialog header{grid-column:1;grid-row:1/4;position:relative;align-self:center;aspect-ratio:1448/1086;min-height:0;padding:0;background:url('/assets/img/media-journey/desktop-v1.webp') center/contain no-repeat}
 #villageViewDialog h2{position:absolute;left:25%;top:18%;width:47%;font-size:clamp(18px,3.3cqw,25px)}
 #villageViewDialog .village-view-selector{grid-column:2;grid-row:1;align-self:end;margin:0;padding-top:40px}
 #villageViewDialog .village-view-zoom{grid-column:2;grid-row:2;align-self:center;margin:0}
 #villageViewDialog .view-motion{grid-column:2;grid-row:3;align-self:start;width:100%;margin:0}
 #villageViewDialog .village-view-selector button{font-size:12px;padding:10px 6px}
}
.village-radio .vr-station span span{font-weight:500;line-height:1.35}
#villageViewDialog .village-view-zoom button span:last-child{white-space:nowrap}
@media(max-height:500px) and (min-width:600px){#villageViewDialog .village-view-zoom button{font-size:13px;padding:9px 6px}}