/* Halloween décor « village du loup-garou » — scene layers built by village.js. 100vw: the width must not
   change when a scrollbar comes or goes (the game locks the page), or the scene would redraw mid-transition. */
.vs-scene{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:-1;pointer-events:none;overflow:hidden;background:#1b2252}
.vs-scene>*{position:absolute}
.vs-sky{inset:0}
.vs-probe{position:fixed;left:0;top:0;width:1px;height:100vh;height:100svh;visibility:hidden}
.vs-sky-day{background:linear-gradient(180deg,#a9bdd6 0%,#cdd3dc 42%,#ecd7bd 74%,#f2c595 100%)}
.vs-sky-dawn{background:linear-gradient(180deg,#3d4b88 0%,#7d6aa6 32%,#d497a8 60%,#f4bf95 84%,#fbe1b6 100%)}
.vs-sky-dusk{background:linear-gradient(180deg,#27295e 0%,#56397a 30%,#b3507a 58%,#ec8850 82%,#f6b465 100%)}
.vs-sky-night{background:radial-gradient(ellipse 70% 38% at 50% 100%,rgba(110,72,150,.38),rgba(110,72,150,0) 70%),linear-gradient(180deg,#0c1130 0%,#1b2252 55%,#2f3568 100%)}
.vs-stars{inset:0}
.vs-star{position:absolute;left:0;top:0}
.vs-orb{left:0;top:0;width:var(--vs-d,64px);height:var(--vs-d,64px);margin:calc(var(--vs-d,64px)/-2) 0 0 calc(var(--vs-d,64px)/-2);will-change:transform,opacity}
.vs-orb i{position:absolute;display:block;border-radius:50%}
.vs-halo{inset:-170%}
.vs-disc{inset:0}
.vs-sun .vs-halo{background:radial-gradient(circle,rgba(255,226,160,.55) 0,rgba(255,214,140,.22) 24%,rgba(255,214,140,0) 58%)}
.vs-sun .vs-disc{background:radial-gradient(circle at 50% 50%,#fffdf3 0 45%,#ffeab0 70%,#ffd57e 100%);box-shadow:0 0 calc(22px*var(--vs-u,1)) rgba(255,214,130,.8)}
.vs-moon .vs-halo{inset:-190%;background:radial-gradient(circle,rgba(255,244,214,.34) 0,rgba(255,244,214,.12) 26%,rgba(255,244,214,0) 56%)}
.vs-moon .vs-disc{background:radial-gradient(circle at 64% 32%,rgba(170,156,132,.36) 0 9%,transparent 10%),radial-gradient(circle at 34% 56%,rgba(170,156,132,.3) 0 13%,transparent 14%),radial-gradient(circle at 60% 72%,rgba(170,156,132,.24) 0 7%,transparent 8%),radial-gradient(circle at 26% 30%,rgba(170,156,132,.2) 0 5%,transparent 6%),radial-gradient(circle at 42% 38%,#fffcf2 0,#f6edd6 62%,#e7dbbf 100%);box-shadow:0 0 calc(20px*var(--vs-u,1)) rgba(255,244,214,.6)}
.vs-clouds{inset:0;overflow:hidden}
.vs-cloud{position:absolute;display:block;left:-30%;width:calc(300px*var(--vs-u,1));height:calc(84px*var(--vs-u,1));background:radial-gradient(ellipse 34% 46% at 30% 62%,rgba(255,255,255,.7),rgba(255,255,255,0) 72%),radial-gradient(ellipse 30% 56% at 55% 44%,rgba(255,255,255,.78),rgba(255,255,255,0) 72%),radial-gradient(ellipse 28% 42% at 78% 64%,rgba(255,255,255,.62),rgba(255,255,255,0) 72%);animation:vsCloud 190s linear infinite;will-change:transform}
.vs-cloud.c1{top:9%;animation-delay:-40s}
.vs-cloud.c2{top:21%;width:calc(230px*var(--vs-u,1));height:calc(64px*var(--vs-u,1));opacity:.8;animation-duration:260s;animation-delay:-150s}
.vs-cloud.c3{top:31%;width:calc(260px*var(--vs-u,1));opacity:.6;animation-duration:230s;animation-delay:-90s}
@keyframes vsCloud{from{transform:translate3d(0,0,0)}to{transform:translate3d(170vw,0,0)}}
.vs-land{left:0;display:block}
.vs-lights{inset:0}
.vs-lg{position:absolute;opacity:0}
.vs-lg i{position:absolute;display:block}
.vs-win{background-color:#ffc861;background-image:linear-gradient(90deg,transparent 44%,rgba(90,48,16,.55) 44% 56%,transparent 56%),linear-gradient(0deg,transparent 44%,rgba(90,48,16,.55) 44% 56%,transparent 56%);box-shadow:0 0 calc(7px*var(--vs-u,1)) calc(1.5px*var(--vs-u,1)) rgba(255,168,60,.55)}
.vs-win.round{border-radius:50%;background-image:none}
.vs-win.flame{background:#ffd98a;box-shadow:0 0 calc(6px*var(--vs-u,1)) calc(2px*var(--vs-u,1)) rgba(255,190,90,.7)}
.vs-win.macle{background:none;box-shadow:none}
.vs-win.macle::before{content:"";position:absolute;inset:-70%;background:radial-gradient(closest-side,rgba(255,150,60,.5),rgba(255,150,60,0))}
.vs-win.macle svg{position:relative;display:block;width:100%;height:100%}
.vs-win.stained{border-radius:50% 50% 1px 1px/28% 28% 1px 1px;background:linear-gradient(180deg,#ffe39a 0%,#ffb458 45%,#e0673a 100%);box-shadow:0 0 calc(10px*var(--vs-u,1)) calc(2px*var(--vs-u,1)) rgba(255,140,60,.45)}
.vs-win.flick{animation:vsFlick 4.2s ease-in-out infinite}
@keyframes vsFlick{0%,100%{opacity:1}42%{opacity:.78}48%{opacity:.95}53%{opacity:.7}60%{opacity:1}}
.vs-pk::before{content:"";position:absolute;inset:-120%;border-radius:50%;background:radial-gradient(circle,rgba(255,150,50,.5) 0,rgba(255,150,50,0) 60%)}
.vs-pk svg{position:relative;display:block;width:100%;height:100%}
.vs-lamp{border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.95) 0 5%,rgba(255,200,100,.42) 12%,rgba(255,180,80,.12) 32%,rgba(255,170,70,0) 60%)}
.vs-walkers{inset:0;z-index:0}
.vs-walker{position:absolute;left:0;top:0;will-change:transform,opacity}
.vs-walker::before{content:"";position:absolute;left:20%;right:20%;bottom:-4%;height:12%;border-radius:50%;background:rgba(0,0,0,.28)}
.vs-walker::after{content:"";position:absolute;left:-35%;right:-35%;top:0;bottom:-25%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,110,.3),rgba(255,200,110,0));opacity:0;transition:opacity 1.2s ease}
body.vs-night .vs-walker::after{opacity:1}
.vs-walker-body{position:absolute;inset:0;z-index:1}
.vs-walker-body img{display:block;width:100%;height:100%;animation:vsHop .56s ease-in-out infinite alternate;transform-origin:50% 100%}
body.vs-night .vs-walker-body img{filter:brightness(.66) saturate(.85)}
@keyframes vsHop{from{transform:translateY(0)}to{transform:translateY(-7%)}}
.vs-walker-mood{position:absolute;left:50%;bottom:100%;z-index:2;font-size:calc(17px*var(--vs-u,1));line-height:1;opacity:0}
.vs-walker.fresh .vs-walker-mood{animation:vsMood 4.8s ease .9s forwards}
@keyframes vsMood{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}12%{opacity:1;transform:translate(-50%,0) scale(1)}80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-8px) scale(1)}}
.vs-fog{left:0;right:0;bottom:0;height:calc(230px*var(--vs-u,1));overflow:hidden;opacity:.28}
.vs-fog-band{position:absolute;display:block;left:0;bottom:0;width:200%;height:100%;background:radial-gradient(ellipse 12% 30% at 8% 78%,rgba(222,228,255,.55),rgba(222,228,255,0) 70%),radial-gradient(ellipse 10% 24% at 30% 86%,rgba(222,228,255,.45),rgba(222,228,255,0) 70%),radial-gradient(ellipse 14% 28% at 55% 80%,rgba(222,228,255,.5),rgba(222,228,255,0) 70%),radial-gradient(ellipse 11% 22% at 80% 88%,rgba(222,228,255,.42),rgba(222,228,255,0) 70%);background-size:50% 100%;background-repeat:repeat-x;animation:vsFog 90s linear infinite;will-change:transform}
.vs-fog-band.b2{bottom:-14%;opacity:.7;animation-duration:140s;animation-direction:reverse}
@keyframes vsFog{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.vs-wolf{opacity:0}
.vs-wolf svg{display:block;width:100%;height:100%;overflow:visible}
.vs-wolf-body{transform-box:fill-box;transform-origin:50% 100%}
.vs-rings path{fill:none;stroke:rgba(246,236,217,.8);stroke-width:1.6;stroke-linecap:round;opacity:0}
.vs-wolf.howl .vs-wolf-body{animation:vsHowl 2.6s ease-in-out 1}
.vs-wolf.howl .vs-rings path{animation:vsRing 1.5s ease-out 2}
.vs-wolf.howl .vs-rings path:nth-child(2){animation-delay:.22s}
.vs-wolf.howl .vs-rings path:nth-child(3){animation-delay:.44s}
@keyframes vsHowl{0%,100%{transform:none}35%,70%{transform:scale(.99,1.035)}}
@keyframes vsRing{0%{opacity:0;transform:translate(0,0)}30%{opacity:.9}100%{opacity:0;transform:translate(-3px,-5px)}}
.vs-bats{inset:0;overflow:hidden}
.vs-bat{position:absolute;left:0;top:0;display:block}
.vs-bat svg{display:block;width:100%;height:100%;fill:#0a0b1d;animation:vsFlap .17s ease-in-out infinite alternate;transform-origin:50% 45%}
@keyframes vsFlap{from{transform:scaleY(1)}to{transform:scaleY(.28)}}
body.vs-night .vs-star.s0{animation:vsTwinkle 3.4s ease-in-out infinite alternate}
body.vs-night .vs-star.s1{animation:vsTwinkle 4.7s ease-in-out -1.3s infinite alternate}
body.vs-night .vs-star.s2{animation:vsTwinkle 6.1s ease-in-out -2.6s infinite alternate}
@keyframes vsTwinkle{from{opacity:1}to{opacity:.3}}
@media (prefers-reduced-motion:reduce){.vs-scene *,.vs-scene *::before{animation:none!important}}
/* Village buttons at the right edge, above the werewolf game layers (900-986). */
.vs-ctl{position:fixed;right:12px;z-index:990;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:2px solid #d9a566;background:rgba(255,255,255,.92);color:#8b1a1a;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background-color 1.2s ease,border-color 1.2s ease,color 1.2s ease}
.vs-ctl:focus-visible{outline:2px solid #ffd27a;outline-offset:2px}
body.vs-night .vs-ctl{background:rgba(20,22,52,.92);border-color:#f6ecd9;color:#f6ecd9}
.vs-look{top:calc(50% - 75px)}
.vs-look svg{width:22px;height:22px}
/* Temporary stg test buttons (village.js testButton, addMoodButton). */
.vs-test{top:50%;margin-top:-21px}
.vs-test svg{width:22px;height:22px}
.vs-add{top:calc(50% + 50px)}
.vs-add svg{width:22px;height:22px}
.vs-test::after,.vs-add::after{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;padding:2px 5px;border-radius:4px;font:700 9px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#8b1a1a;background:rgba(255,255,255,.9)}
.vs-test::after{content:"test"}
.vs-add::after{content:"+ mood"}
/* « Voir le village »: everything but the scene and its buttons fades out. */
body.vs-peek-fade>*:not(.vs-scene):not(.vs-ctl){transition:opacity .35s ease!important}
body.vs-peek>*:not(.vs-scene):not(.vs-ctl){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .35s ease,visibility 0s linear .35s!important}

/* Page chrome over the village, same values as the Décor themes: light sky by day, dark at night. */
body.bg-village .diamonds{display:none}
body.bg-village h1,body.bg-village .user-info,body.bg-village .view-tab,body.bg-village #teamNameBanner,body.bg-village footer,body.bg-village footer a{transition:color 1.2s ease,background-color 1.2s ease,border-color 1.2s ease,text-shadow 1.2s ease}
body.bg-village:not(.vs-night) .view-tab:not(.active){background:rgba(255,255,255,.45);border-color:rgba(60,40,20,.35);color:#555}
body.bg-village:not(.vs-night) .user-info{color:#555}
body.bg-village:not(.vs-night) #teamNameBanner{color:#8b1a1a}
body.bg-village:not(.vs-night) footer{color:rgba(60,40,20,.55)}
body.bg-village:not(.vs-night) footer a{color:#8b1a1a}
body.bg-village.vs-night h1,body.bg-village.vs-night .user-info,body.bg-village.vs-night .view-tab,body.bg-village.vs-night #teamNameBanner{color:#f6ecd9}
body.bg-village.vs-night .view-tab:not(.active){background:rgba(255,255,255,.08);border-color:rgba(246,236,217,.5)}
body.bg-village.vs-night main .btn{box-shadow:0 0 0 1.5px rgba(246,236,217,.55)}
body.bg-village.vs-night .streak-preview,body.bg-village.vs-night #weekendMsg{background:rgba(255,255,255,.88);border-radius:10px}
body.bg-village.vs-night footer{color:rgba(246,236,217,.6)}
body.bg-village.vs-night footer a{color:#f6ecd9}
body.bg-village.vs-night h1,body.bg-village.vs-night #teamNameBanner,body.bg-village.vs-night .user-info{text-shadow:0 1px 3px rgba(0,0,0,.55)}