.extra-scene{background-position:center;background-size:cover;background-repeat:no-repeat}
.extra-scene.theme-active[data-loaded]{opacity:1}
.theme-stage{--art-width:max(100vw,177.683315svh);height:calc(var(--art-width)*.56279904)}
.extra-scene.theme-active .picture-stage *{animation-play-state:running}
.extra-scene .theme-steam{width:5%;height:15%;left:39%;bottom:17%}
.winter-hearth .theme-steam{left:73%;bottom:10.4%;height:16%}

/* The two panes have separate clipping, including the foreground hair silhouette. */
.rain-pane{position:absolute;overflow:hidden;--pane-fall:calc(var(--art-width)*.39)}
.pane-left{left:36.3%;top:0;width:16.2%;height:61%;clip-path:polygon(0 0,100% 0,100% 96%,0 100%)}
.pane-right{left:55.3%;top:0;width:14%;height:60%;clip-path:polygon(0 0,100% 0,100% 10%,69% 22%,41% 43%,36% 62%,31% 94%,0 100%)}
.rain-streak{position:absolute;top:-12%;width:1px;height:var(--length);background:linear-gradient(transparent,#e9e7ff8f,transparent);animation:rain-fall var(--speed) linear var(--delay) infinite;opacity:.55}
.glass-drop{position:absolute;top:-8%;width:2px;height:9px;border-radius:50%;background:linear-gradient(#cce4ff20,#e4ecff8a);box-shadow:1px 0 1px #93a9c84d;animation:glass-slide var(--speed) ease-in var(--delay) infinite}
.bookshop-lamp{position:absolute;left:14%;top:43%;width:39%;height:53%;background:radial-gradient(ellipse at 49% 44%,#ffd78844,transparent 59%);mix-blend-mode:screen;animation:lamplight 9s ease-in-out -3s infinite alternate}
@keyframes rain-fall{from{transform:translate(9px,0)}to{transform:translate(-13px,var(--pane-fall))}}
@keyframes glass-slide{0%{opacity:0;transform:translateY(0)}10%,75%{opacity:.6}100%{opacity:0;transform:translateY(var(--pane-fall))}}
@keyframes lamplight{from{opacity:.35}to{opacity:.7}}

.sea-sky,.sea-water{position:absolute;inset:0;overflow:hidden}
.sea-sky{clip-path:polygon(36% 0,66.7% 0,66.7% 38.8%,33% 38.8%)}
.sea-cloud{position:absolute;left:34%;top:12%;width:31%;height:22%;background:radial-gradient(ellipse at 35% 50%,#fff8e952,transparent 50%),radial-gradient(ellipse at 70% 65%,#ffefdc42,transparent 40%);animation:sea-cloud-drift 28s ease-in-out -12s infinite alternate}
.sea-water{clip-path:polygon(31% 40%,66.7% 40%,66.7% 46%,64.5% 52%,62% 57.4%,31% 60%)}
.sea-wave{position:absolute;left:29%;top:40%;width:40%;height:23%;background:repeating-linear-gradient(178deg,transparent 0 13px,#fff8d949 14px,transparent 16px 26px);mask-image:radial-gradient(ellipse at 44% 44%,#000b,transparent 73%);animation:sea-tide 6s ease-in-out -3s infinite alternate}
.sea-glints{position:absolute;inset:0}.sea-glint{position:absolute;width:var(--width);height:1px;border-radius:50%;background:#fff7cd;box-shadow:0 0 3px #fff6d490;animation:sea-glint var(--speed) ease-in-out var(--delay) infinite}
.curtain-light{position:absolute;left:26%;top:0;width:8.5%;height:81%;background:linear-gradient(97deg,transparent,#fff7de35,transparent 76%);clip-path:polygon(0 0,100% 0,61% 48%,28% 62%,61% 100%,12% 100%);animation:curtain-glow 10s ease-in-out -4s infinite alternate}
@keyframes sea-cloud-drift{from{transform:translateX(-20px);opacity:.4}to{transform:translateX(22px);opacity:.8}}
@keyframes sea-tide{from{transform:translate(-8px,0) scaleX(.98);opacity:.45}to{transform:translate(9px,4px) scaleX(1.04);opacity:.85}}
@keyframes sea-glint{0%,100%{opacity:.08;transform:scaleX(.5) translateX(0)}50%{opacity:.7;transform:scaleX(1.3) translateX(5px)}}
@keyframes curtain-glow{from{opacity:.2;transform:translateX(-3px)}to{opacity:.6;transform:translateX(3px)}}

.snow-pane{position:absolute;left:41.2%;top:0;width:16.2%;height:37.7%;overflow:hidden;--snow-fall:calc(var(--art-width)*.24)}
.snowflake{position:absolute;top:-5%;width:var(--size);height:var(--size);border-radius:50%;background:#f5f8ffb8;filter:blur(.3px);animation:snow-fall var(--speed) linear var(--delay) infinite}
.fire-bounce{position:absolute;left:25%;top:45%;width:41%;height:48%;background:radial-gradient(ellipse at 54% 56%,#ffb3483b,transparent 69%);mix-blend-mode:screen;animation:fire-breathe 3.9s ease-in-out -1s infinite alternate}
.fire-glow{position:absolute;left:41.5%;top:61%;width:14.2%;height:20%;background:radial-gradient(ellipse at 50% 60%,#ffba5b70,transparent 65%);mix-blend-mode:screen;animation:fire-breathe 2.7s ease-in-out -.7s infinite alternate}
.hearth-flames{position:absolute;left:43.2%;top:63.5%;width:10.4%;height:14%;fill:#ffb650;stroke:none;filter:blur(2px);mix-blend-mode:screen;opacity:.52}
.hearth-flames path{transform-origin:50% 100%;animation:fire-tongue 2.2s ease-in-out -.6s infinite alternate}
.hearth-flames path:nth-child(2){fill:#ffd98d;animation-duration:1.7s;animation-delay:-1.1s}.hearth-flames path:nth-child(3){fill:#fff1bc;animation-duration:1.4s;animation-delay:-.3s}
@keyframes snow-fall{0%{opacity:0;transform:translate(0,0)}12%,85%{opacity:.85}100%{opacity:0;transform:translate(var(--drift),var(--snow-fall))}}
@keyframes fire-breathe{0%,100%{opacity:.4}30%{opacity:.65}68%{opacity:.85}}
@keyframes fire-tongue{0%{transform:scale(.92,.81) skewX(-3deg);opacity:.4}45%{transform:scale(1.03,1.04) skewX(3deg);opacity:.8}100%{transform:scale(.96,.92) skewX(-1deg);opacity:.55}}

/* Warm rooms need darker timer ink, while the controls keep their quiet size. */
[data-scene=rain-library] #timer,[data-scene=winter-hearth] #timer{color:#3f4237}
[data-scene=rain-library] .timer-heading,[data-scene=winter-hearth] .timer-heading{color:#505746}
@media(max-width:760px){
 .extra-scene{background-position:72% center}
 body:is([data-scene=rain-library],[data-scene=sea-breeze],[data-scene=winter-hearth]) .workspace::before{content:'';position:absolute;inset:-18px -8px -18px -18px;z-index:-1;background:radial-gradient(ellipse at 38% 44%,#fff5e6ed 10%,#fff5e6b0 48%,transparent 74%);pointer-events:none}
 body:is([data-scene=rain-library],[data-scene=sea-breeze],[data-scene=winter-hearth]) .brand{color:#344b3b;text-shadow:0 1px 6px #fff5df}
}