/* A single clipped viewport owns every scenic layer; no scaled image can bleed out. */
#yunyi-preview{--house-scene-filter:saturate(.64) sepia(.1) contrast(.94)}
#yunyi-preview[data-weather="night"]{--house-scene-filter:brightness(.53) saturate(.55) contrast(.97)}
#yunyi-preview[data-rain="true"]{--house-scene-filter:brightness(.84) saturate(.40) contrast(.90)}
#yunyi-preview[data-rain="true"][data-weather="night"]{--house-scene-filter:brightness(.45) saturate(.40) contrast(.92)}
.house-scenery{position:fixed;inset:0 0 auto;height:100vh;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none;isolation:isolate;background:#706559}
#yunyi-preview .house-scenery .yy-bg{position:absolute;left:0;top:0;width:100%;height:100%;object-position:50% 50%;filter:var(--house-scene-filter);transition:filter 1s ease;z-index:0}
.house-film{position:absolute;max-width:none;object-fit:fill;z-index:1;opacity:0;filter:var(--house-scene-filter);transition:opacity 1s ease,filter 1s ease;pointer-events:none}
.house-film[data-ready="true"]{opacity:1}
.house-film[data-scene="pavilion"]{mask-image:radial-gradient(ellipse 10% 7% at 86% 76%,#000 65%,transparent 100%)}
.house-moon{position:absolute;z-index:2;translate:-50% -50%;border-radius:50%;opacity:0;background:radial-gradient(ellipse at 37% 38%,#a3a7a629 0 11%,transparent 28%),radial-gradient(ellipse at 66% 62%,#828e922e 0 16%,transparent 34%),radial-gradient(ellipse at 32% 74%,#8d92992e 0 7%,transparent 22%),radial-gradient(circle at 38% 30%,#f7ecd3,#e8dec8 64%,#c2bdaf 90%,#f4ebd6);box-shadow:0 0 35px 12px #f2ebcf19,0 0 100px 40px #f1e8ce0d;transition:opacity 1s;filter:blur(.5px)}
#yunyi-preview[data-weather="night"] .house-moon{opacity:.88}#yunyi-preview[data-rain="true"] .house-moon{opacity:0}
#yunyi-preview[data-weather="night"][data-rain="true"] .house-moon{opacity:.32;filter:blur(3px)}
.house-scene-settings{position:relative;flex-shrink:0}
#yunyi-preview #house-scene-open{padding:11px 15px;border-radius:24px;background:#c9b29b28;color:var(--yy-bar-text);font-size:12px;white-space:nowrap}
#house-scene-panel{position:absolute;right:0;top:54px;width:284px;padding:24px;box-sizing:border-box;border:1px solid #d8c0aa5c;border-radius:20px;background:#504239f2;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);color:#f1dfcd;box-shadow:0 18px 60px #251b184d;text-shadow:none}
.house-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
#yunyi-preview .house-settings-heading h2{font-size:21px;letter-spacing:3px;line-height:1.5;color:#f1dfcd;margin:0}
#yunyi-preview #house-scene-close{font-size:25px;padding:2px 7px;color:#e8d5c2}
.house-season-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
#yunyi-preview .house-season-options button{padding:12px 8px;border:1px solid #c4aa9259;border-radius:12px;font-size:16px;color:#ead8c5;background:#b99d851a}
#yunyi-preview .house-season-options button[aria-pressed="true"]{color:#4b3a2c;background:#d7bea5;border-color:#ead6c2}
#yunyi-preview #house-scene-panel p{font-size:12px;color:#d5bea9;line-height:1.7;margin:16px 0}
.house-effect-options{display:grid;gap:4px;padding:12px 0;border-top:1px solid #d6bba138;border-bottom:1px solid #d6bba138}
.house-effect-options label{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px;cursor:pointer}
.house-effect-options input{appearance:none;width:34px;height:20px;border:1px solid #b49b83;border-radius:12px;background:#352b23;position:relative;cursor:pointer;flex-shrink:0}
.house-effect-options input:before{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;background:#bfa58c;border-radius:50%;transition:translate .2s}
.house-effect-options input:checked{background:#cbb197;border-color:#e3c9b0}.house-effect-options input:checked:before{translate:14px 0;background:#4c3b2e}
.house-effect-options input:focus-visible{outline:2px solid #ffe1bb;outline-offset:3px}
.house-effects-actions{display:flex;justify-content:space-between;margin:14px 0}
#yunyi-preview .house-effects-actions button{font-size:12px;color:#eed9c4;padding:8px 0}
#yunyi-preview #house-scene-panel small{font-size:11px;color:#cdb49d;line-height:1.7}
#yunyi-preview .yy-header{gap:16px}
#yunyi-preview .yy-weather{flex-shrink:0}
/* The hint is part of the feathered footer rather than a hard extra bottom strip. */
#yunyi-preview .yy-preview-foot{display:none}
@media(max-width:800px){#yunyi-preview .yy-header{gap:10px}#yunyi-preview .yy-weather button{padding:8px 11px}}
@media(max-width:620px){
 #yunyi-preview .yy-header{min-height:125px;padding:16px 20px 10px;column-gap:12px}
 #yunyi-preview .yy-weather{order:3;flex-basis:100%;justify-content:center}
 #yunyi-preview .house-scene-settings{margin-left:auto}#yunyi-preview .yy-sound-wrap{margin-left:0}
 #house-scene-panel{right:-54px;max-width:calc(100vw - 40px);top:48px}
 #yunyi-preview .yy-home-list{flex-wrap:wrap}#yunyi-preview .yy-hero-actions{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.house-film{display:none!important}.house-moon{transition:none}}

.house-atmosphere{mask-image:linear-gradient(to bottom,transparent,#000 60px,#000 calc(100% - 150px),transparent)}
/* Reuse the approved moon's surface detail; clip its atlas window in CSS. */
.house-moon{background-image:url('/assets/landscape_night.webp');background-size:1056.604% 704.717%;background-position:30.079% 6.24%;background-repeat:no-repeat;filter:saturate(.55) brightness(.95);box-shadow:0 0 30px 10px #f5e3b82b,0 0 85px 30px #f5e3b810}

.house-water-surface{position:absolute;max-width:none;z-index:1;opacity:0;filter:var(--house-scene-filter);transition:opacity .5s ease,filter 1s ease;pointer-events:none}
.house-water-surface[data-ready="true"]{opacity:1}
@media(prefers-reduced-motion:reduce){.house-water-surface{display:none!important}}

/* Relight only the foreground with the exact same art and local frame.
   The soft mask keeps the distant mountains and moving lake in moonlight. */
.house-candlelight{position:absolute;max-width:none;z-index:2;pointer-events:none;opacity:0;object-fit:fill;filter:brightness(.98) saturate(.82) sepia(.13);mask-image:radial-gradient(ellipse 29% 23% at 50% 81%,#000 15%,#000b 42%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 29% 23% at 50% 81%,#000 15%,#000b 42%,transparent 100%);transition:opacity 1s ease}
#yunyi-preview[data-weather="night"] .house-scenery[data-scene="pavilion"] .house-candlelight{opacity:1}