/* ===== «Тени» (shadows): театр теней. Все правила — через #s-shadows, классы и анимации с префиксом sh- ===== */
#s-shadows{background:#1c1640;touch-action:none;user-select:none;-webkit-user-select:none}
#s-shadows .sh-bg{filter:brightness(.8) saturate(1.05)}
#s-shadows.sh-in-scene .sh-bg{filter:none}
/* --- the theatre: screen, shadows, figures, curtains, valance, stage; --vh / --sth (px) set by layout() --- */
#s-shadows .sh-th{position:absolute;z-index:3;transition:opacity .4s}
#s-shadows .sh-th.sh-hidden,#s-shadows.sh-in-scene .sh-hall,#s-shadows.sh-in-scene .sh-cards{opacity:0;pointer-events:none;visibility:hidden}
#s-shadows .sh-scr{position:absolute;left:7%;right:7%;top:calc(var(--vh) * .55);bottom:calc(var(--sth) * .55);border-radius:1.2vmin;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 58%,#fff9e6 0,#fbe7b8 45%,#e9c27e 80%,#c9934e 100%);box-shadow:inset 0 0 4vmin rgba(120,60,10,.45);transition:filter .35s}
#s-shadows .sh-scr:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(90deg,rgba(150,100,40,.06) 0 2px,transparent 2px 5px),repeating-linear-gradient(0deg,rgba(150,100,40,.05) 0 2px,transparent 2px 6px)}
#s-shadows .sh-scr.sh-off{filter:brightness(.32) saturate(.6)}
#s-shadows .sh-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 75%,rgba(255,240,190,.55),transparent 55%);animation:sh-flicker 3.2s ease-in-out infinite;pointer-events:none}
#s-shadows .sh-dust{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.7) 0 .25vmin,transparent .4vmin),radial-gradient(circle at 70% 20%,rgba(255,255,255,.6) 0 .2vmin,transparent .35vmin),radial-gradient(circle at 45% 60%,rgba(255,255,255,.6) 0 .22vmin,transparent .38vmin),radial-gradient(circle at 85% 70%,rgba(255,255,255,.5) 0 .2vmin,transparent .35vmin);animation:sh-dust 9s ease-in-out infinite alternate;opacity:.8}
@keyframes sh-flicker{0%,100%{opacity:1}30%{opacity:.82}55%{opacity:.96}70%{opacity:.86}}
@keyframes sh-dust{from{transform:translateY(4%)}to{transform:translateY(-6%)}}
#s-shadows .sh-wall{position:absolute;inset:0}
#s-shadows .sh-out{position:absolute;left:9%;right:9%;top:calc(var(--vh) * .55);bottom:calc(var(--sth) * .62);pointer-events:none;z-index:2}
#s-shadows .sh-cur{position:absolute;top:calc(var(--vh) * .45);bottom:calc(var(--sth) * .5);width:17%;object-fit:fill;z-index:3;filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.4));transform-origin:50% 0}
#s-shadows .sh-cur.sh-l{left:-1%}
#s-shadows .sh-cur.sh-r{right:-1%;transform:scaleX(-1)}
#s-shadows .sh-th.sh-shut .sh-cur{transition:width .8s cubic-bezier(.5,0,.3,1);width:54%}
#s-shadows .sh-cur.sh-sway{animation:sh-sway .9s ease-in-out}
#s-shadows .sh-cur.sh-r.sh-sway{animation:sh-swayr .9s ease-in-out}
@keyframes sh-sway{30%{transform:skewX(4deg)}65%{transform:skewX(-2deg)}}
@keyframes sh-swayr{30%{transform:scaleX(-1) skewX(4deg)}65%{transform:scaleX(-1) skewX(-2deg)}}
#s-shadows .sh-val{position:absolute;left:-2%;width:104%;top:0;height:var(--vh);object-fit:fill;z-index:4;filter:drop-shadow(0 .6vmin .8vmin rgba(0,0,0,.35));pointer-events:none}
#s-shadows .sh-stage{position:absolute;left:0;width:100%;bottom:0;height:var(--sth);z-index:4}
#s-shadows .sh-stage img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 .8vmin 1vmin rgba(0,0,0,.4))}
#s-shadows .sh-stage.sh-blink img{animation:sh-blink .3s 4 alternate}
@keyframes sh-blink{to{filter:brightness(1.35) drop-shadow(0 0 2vmin #ffe58a)}}

/* --- shadows on the screen --- */
#s-shadows .sh-sh{position:absolute;transform-origin:50% 100%;transform:rotate(var(--tilt,0deg));animation:sh-breathe 3.4s ease-in-out infinite}
#s-shadows .sh-si{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:brightness(0) blur(.22vmin);opacity:.8;transition:filter .5s,opacity .5s}
#s-shadows .sh-hand .sh-si{filter:blur(.3vmin);opacity:.82}
#s-shadows .sh-sh .sh-f2{opacity:0}
#s-shadows .sh-sh.sh-alt .sh-si:first-child{opacity:0}
#s-shadows .sh-sh.sh-alt .sh-f2{opacity:.82}
@keyframes sh-breathe{0%,100%{scale:1 1}50%{scale:1.012 1.025}}
#s-shadows .sh-sh.sh-come{animation:sh-come 1.1s ease-out}
@keyframes sh-come{0%{scale:1.55;opacity:0;filter:blur(1.4vmin)}55%{scale:.94;opacity:.8}80%{scale:1.03}100%{scale:1;opacity:1;filter:blur(0)}}
#s-shadows .sh-sh.sh-near{animation:sh-near 1.2s ease-out}
@keyframes sh-near{0%{scale:.4;opacity:0}65%{scale:1.08;opacity:1}100%{scale:1;opacity:1}}
#s-shadows .sh-huge .sh-si{filter:brightness(0) blur(.9vmin);opacity:.7}
#s-shadows .sh-sh.sh-live{animation:sh-live 1.1s ease-in-out}
@keyframes sh-live{20%{rotate:-4deg}45%{rotate:3deg;translate:0 -3%}70%{rotate:-2deg}}
#s-shadows .sh-sh.sh-glimpse .sh-si{filter:brightness(.55) saturate(.5) blur(.1vmin);opacity:.9}
#s-shadows .sh-sh.sh-gone{transition:opacity .45s,scale .45s;opacity:0;scale:1.25}
#s-shadows .sh-sh.sh-walk{animation:sh-walk 7s ease-in-out infinite}
@keyframes sh-walk{0%,100%{translate:-14% 0}25%{translate:-7% -2%}50%{translate:14% 0}75%{translate:7% -2%}}
/* moving family shadows: each pose lives its own way — a hint who it is */
#s-shadows .sh-m-dance{animation:sh-mdance 1.3s ease-in-out infinite}
#s-shadows .sh-m-wave{animation:sh-mwave 2.4s ease-in-out infinite}
#s-shadows .sh-m-jump{animation:sh-mjump 1.6s ease-in-out infinite}
#s-shadows .sh-m-clap{animation:sh-mclap 1s ease-in-out infinite}
@keyframes sh-mdance{0%,100%{rotate:-4deg;translate:-2% 0}50%{rotate:4deg;translate:2% -2%}}
@keyframes sh-mwave{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
@keyframes sh-mjump{0%,60%,100%{translate:0 0}75%{translate:0 -8%}}
@keyframes sh-mclap{0%,100%{scale:1 1}50%{scale:1.03 .98}}
#s-shadows .sh-fam .sh-si{filter:brightness(0) blur(.3vmin);opacity:.78}
#s-shadows .sh-fam.sh-color .sh-si{filter:none;opacity:1}
#s-shadows .sh-fam.sh-won{animation:sh-mjump .8s ease-in-out 2}
#s-shadows .sh-dimsh{opacity:.35}
#s-shadows .sh-tap{cursor:pointer}
/* the compared shadow of a wrong choice: bluish, comes and goes */
#s-shadows .sh-cmp .sh-si{filter:brightness(0) blur(.2vmin) drop-shadow(0 0 0 #3b4a9a);opacity:.5}
#s-shadows .sh-cmp{animation:none}
#s-shadows .sh-cmp.sh-cmp-in{animation:sh-shake .8s ease-in-out}
#s-shadows .sh-fade{transition:opacity .5s;opacity:0!important}
@keyframes sh-shake{0%,100%{rotate:0deg}20%{rotate:-7deg}40%{rotate:6deg}60%{rotate:-5deg}80%{rotate:3deg}}
/* a part of the shadow (P): it peeks out more for a moment */
#s-shadows .sh-part.sh-pl.sh-peekmore{animation:sh-pml 1.4s ease-in-out}
#s-shadows .sh-part.sh-pr.sh-peekmore{animation:sh-pmr 1.4s ease-in-out}
#s-shadows .sh-part:not(.sh-pl):not(.sh-pr).sh-peekmore{animation:sh-pmu 1.4s ease-in-out}
@keyframes sh-pml{40%,60%{translate:16% 0}}
@keyframes sh-pmr{40%,60%{translate:-16% 0}}
@keyframes sh-pmu{40%,60%{translate:0 -14%}}
#s-shadows .sh-prop{position:absolute;bottom:0;height:auto;z-index:1;filter:drop-shadow(0 .6vmin .6vmin rgba(0,0,0,.35));transform-origin:50% 100%;transition:transform .6s,opacity .6s}
#s-shadows .sh-prop.sh-fold{transform:scaleX(.15) translateX(-150%);opacity:0}
/* hand shadows live */
#s-shadows .sh-h-ears.sh-live{animation:sh-ears 1.1s ease-in-out}
@keyframes sh-ears{25%{skew:-5deg 0}50%{skew:4deg 0}75%{skew:-3deg 0}}
#s-shadows .sh-h-fly{animation:sh-fly 6s ease-in-out infinite}
@keyframes sh-fly{0%,100%{translate:-18% 6%}25%{translate:0 -6%}50%{translate:18% 4%}75%{translate:2% -8%}}
#s-shadows .sh-h-crawl{animation:sh-crawl 8s ease-in-out infinite}
@keyframes sh-crawl{0%,100%{translate:-12% 0}50%{translate:12% 0}}
#s-shadows .sh-h-nod.sh-live{animation:sh-nod 1.1s ease-in-out}
@keyframes sh-nod{30%{rotate:6deg}60%{rotate:-3deg}}
#s-shadows .sh-sh.sh-magic{transition:filter .4s,opacity .4s;filter:brightness(3);opacity:0}
#s-shadows .sh-fly{animation:sh-flyaway 2.1s ease-out forwards}
@keyframes sh-flyaway{0%{opacity:0;scale:.3}20%{opacity:.8;scale:1}100%{opacity:0;translate:40% -260%;rotate:20deg}}
#s-shadows .sh-ghostsh{animation:sh-ghost 9s ease-in-out forwards;cursor:pointer}
#s-shadows .sh-ghostsh .sh-si{opacity:.55}
@keyframes sh-ghost{0%{translate:-60% 0;opacity:0}10%{opacity:1}50%{translate:160% -10%}90%{opacity:1}100%{translate:330% 0;opacity:0}}

/* --- figures that come out and bow --- */
#s-shadows .sh-fig{position:absolute;object-fit:contain;filter:drop-shadow(0 1vmin .8vmin rgba(60,30,0,.35));transform-origin:50% 100%}
#s-shadows .sh-fig.sh-bow{animation:sh-bow 1s ease-in-out}
@keyframes sh-bow{25%{scale:1.06 .86}45%{scale:1 1.06;rotate:-3deg}65%{scale:1.02 .94;rotate:2deg}}
#s-shadows .sh-fig.sh-pop{animation:pop-in .5s cubic-bezier(.3,1.6,.5,1)}
#s-shadows .sh-fig.sh-boo{animation:sh-boo 1.2s ease-out}
@keyframes sh-boo{0%{scale:.3;opacity:0}60%{scale:1.15;opacity:1}100%{scale:1}}
#s-shadows .sh-peek{position:absolute;bottom:0;left:-6%;height:46%;width:auto;animation:sh-peek .7s ease-out;transform-origin:50% 100%;rotate:12deg;filter:drop-shadow(0 .6vmin .6vmin rgba(0,0,0,.3))}
#s-shadows .sh-peek.sh-tall{height:80%}
#s-shadows .sh-peek.sh-pr{left:auto;right:-6%;rotate:-12deg}
@keyframes sh-peek{from{translate:-70% 0;opacity:0}}
#s-shadows .sh-peek.sh-pr{animation-name:sh-peekr}
@keyframes sh-peekr{from{translate:70% 0;opacity:0}}

/* --- cards --- */
#s-shadows .sh-cards{position:absolute;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:3vmin}
#s-shadows .sh-cards.sh-col{gap:3vmin 2.4vmin}
#s-shadows .sh-card{width:var(--c);height:var(--c);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0,transparent 45%),var(--cc);border:max(3px,.9vmin) solid #fff;
  box-shadow:0 .9vmin 0 rgba(0,0,0,.18),0 1.4vmin 2.4vmin rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;animation:pop-in .45s cubic-bezier(.3,1.6,.5,1) backwards;cursor:pointer;position:relative;touch-action:none}
#s-shadows .sh-card img{width:78%;height:78%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 .4vmin .3vmin rgba(0,0,0,.25))}
#s-shadows .sh-card.sh-ok{animation:sh-cardok .7s ease-out;box-shadow:0 0 0 1.2vmin #ffe46b,0 0 4vmin #ffd23f}
@keyframes sh-cardok{40%{scale:1.15}}
#s-shadows .sh-card.sh-dim{opacity:.35;scale:.9;transition:opacity .3s,scale .3s}
#s-shadows .sh-card.sh-no{animation:sh-shake .7s ease-in-out}
#s-shadows .sh-card.sh-glow{animation:sh-glowc 1s ease-in-out infinite alternate}
@keyframes sh-glowc{to{box-shadow:0 0 0 1.2vmin #fff3a0,0 0 5vmin 1vmin #ffd23f;scale:1.06}}
#s-shadows .sh-card.sh-used{opacity:0;scale:.5;transition:opacity .3s,scale .3s;pointer-events:none}
#s-shadows .sh-card.sh-small img{width:46%;height:46%}
#s-shadows .sh-card.sh-askcard{scale:1.15;background:radial-gradient(circle at 35% 30%,#fff8 0,transparent 45%),#ffe0a3}
#s-shadows .sh-card.sh-askcard:after{content:'?';position:absolute;right:-6%;top:-8%;width:36%;height:36%;border-radius:50%;background:#7b5cff;color:#fff;font:900 calc(var(--c) * .26)/1 system-ui,sans-serif;display:flex;align-items:center;justify-content:center;border:.6vmin solid #fff}
#s-shadows .sh-card.sh-wiggle,#s-shadows .sh-sh.sh-wiggle,#s-shadows .sh-ani.sh-wiggle{animation:sh-shake .6s ease-in-out}
/* D: the shadows to fill */
#s-shadows .sh-slot.sh-over .sh-si{filter:brightness(0) blur(.1vmin) drop-shadow(0 0 1.2vmin #fff7b0);opacity:.9}
#s-shadows .sh-slot.sh-fill{animation:sh-fill .6s ease-out}
#s-shadows .sh-slot.sh-fill .sh-si{filter:drop-shadow(0 .8vmin .3vmin rgba(60,30,0,.4));opacity:1}
@keyframes sh-fill{30%{scale:1.12}}
.sh-ghost{position:fixed;z-index:60;pointer-events:none;object-fit:contain;transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 1.4vmin 1vmin rgba(0,0,0,.35))}
.sh-handhint{position:fixed;z-index:61;width:12vmin;height:12vmin;pointer-events:none;transform:translate(-20%,-10%)}
.sh-handhint svg{width:100%;height:100%;filter:drop-shadow(0 .5vmin .5vmin rgba(0,0,0,.3))}

/* --- the hall: spectators (the collection) --- */
#s-shadows .sh-hall{position:absolute;z-index:4;display:flex;flex-wrap:wrap-reverse;align-items:flex-end;align-content:flex-start;justify-content:center;gap:1vmin;pointer-events:auto}
#s-shadows .sh-fan{height:var(--hh);width:var(--hh);display:flex;align-items:flex-end;justify-content:center;animation:sh-sit 3s ease-in-out infinite;position:relative}
#s-shadows .sh-fan img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 .4vmin .3vmin rgba(0,0,0,.35))}
#s-shadows .sh-fan.sh-face img{border-radius:50%;background:#ffe9c4;border:.5vmin solid #fff;width:86%;height:86%;object-fit:cover;object-position:50% 15%}
#s-shadows .sh-fan.sh-new:after{content:'';position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,140,.7),transparent 65%);z-index:-1;animation:sh-glowc 1s ease-in-out infinite alternate}
@keyframes sh-sit{0%,100%{translate:0 0}50%{translate:0 -4%}}
#s-shadows .sh-hall.sh-cheer .sh-fan{animation:sh-cheer .35s ease-in-out infinite alternate}
@keyframes sh-cheer{to{translate:0 -14%;rotate:4deg}}

/* --- L: the night room with a torch --- */
#s-shadows .sh-scene{position:absolute;inset:0;z-index:2;pointer-events:none}
#s-shadows .sh-scene.sh-L,#s-shadows .sh-scene.sh-S{pointer-events:auto}
#s-shadows .sh-toy{position:absolute;z-index:2;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
#s-shadows .sh-toy img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 .5vmin .4vmin rgba(0,0,0,.4));transition:filter .4s}
#s-shadows .sh-toy.sh-lit{z-index:6}
#s-shadows .sh-toy.sh-lit img{filter:drop-shadow(0 0 2vmin #fff3b0) brightness(1.1)}
#s-shadows .sh-toy.sh-glint:after{content:'';position:absolute;left:30%;top:10%;width:40%;height:40%;background:radial-gradient(circle,#fff 0,#fff8 20%,transparent 60%);animation:sh-glint 1.2s ease-out;z-index:7}
@keyframes sh-glint{0%,100%{opacity:0;scale:.3}40%{opacity:1;scale:1.2}}
#s-shadows .sh-tsh{position:absolute;z-index:4;object-fit:contain;filter:brightness(0) blur(.6vmin);opacity:0;pointer-events:none}
#s-shadows .sh-bigsh{position:absolute;z-index:1;object-fit:contain;filter:brightness(0) blur(.5vmin);opacity:.72;pointer-events:none;transform-origin:50% 100%;animation:sh-breathe 3.4s ease-in-out infinite}
#s-shadows .sh-bigsh.sh-come{animation:sh-come 1.1s ease-out}
#s-shadows .sh-bigsh.sh-merge{animation:sh-merge 1.2s ease-out forwards}
@keyframes sh-merge{40%{scale:1.15;filter:brightness(0) blur(.2vmin) drop-shadow(0 0 3vmin #fff3a0)}100%{opacity:.25}}
#s-shadows .sh-dark{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#s-shadows .sh-eyes{position:absolute;z-index:5;width:16vmin;height:10vmin;display:flex;gap:4vmin;justify-content:center;align-items:center;cursor:pointer}
#s-shadows .sh-eyes i{width:2.6vmin;height:3.4vmin;border-radius:50%;background:radial-gradient(circle,#fffbd0 0,#c8ff5a 45%,#5fbf1a 70%,transparent 72%);animation:sh-blinkeye 4s infinite}
#s-shadows .sh-eyes.run{animation:sh-run 1.4s ease-in forwards}
@keyframes sh-blinkeye{0%,46%,54%,100%{scale:1 1}50%{scale:1 .1}}
@keyframes sh-run{to{translate:-60vmin 0;opacity:0}}
#s-shadows .sh-owlspot{position:absolute;z-index:5;right:3%;top:3%;width:22vmin;height:22vmin;cursor:pointer}
#s-shadows .sh-owl{width:100%;height:100%;object-fit:contain;animation:sh-boo 1s ease-out;filter:brightness(.7)}
#s-shadows .sh-scene.sh-lights .sh-dark{opacity:0;transition:opacity .8s}

/* --- S: the meadow, the sun and shade --- */
#s-shadows .sh-sunb{position:absolute;z-index:6;cursor:grab;touch-action:none;filter:drop-shadow(0 0 3vmin rgba(255,220,80,.9))}
#s-shadows .sh-sunb img{width:100%;height:100%;object-fit:contain;animation:sh-spin 20s linear infinite}
#s-shadows .sh-sunb:before{content:'';position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,150,.55),transparent 65%);animation:sh-glowc 1.4s ease-in-out infinite alternate}
#s-shadows .sh-sunb.sh-hold{scale:1.12}
@keyframes sh-spin{to{rotate:360deg}}
#s-shadows .sh-obj{position:absolute;z-index:3;display:flex;align-items:flex-end;justify-content:center}
#s-shadows .sh-obj>img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
#s-shadows .sh-treeo{z-index:2;pointer-events:none}
#s-shadows .sh-gsh{position:absolute;z-index:1;object-fit:contain;object-position:50% 100%;filter:brightness(0) blur(.4vmin);opacity:.42;transform-origin:50% 100%;pointer-events:none}
#s-shadows .sh-ani{z-index:4;cursor:pointer;transition:filter .4s}
#s-shadows .sh-ani.sh-hot>img{animation:sh-pant .9s ease-in-out infinite;filter:sepia(.25) saturate(1.4) hue-rotate(-12deg)}
#s-shadows .sh-ani.sh-shade>img{filter:brightness(.82)}
@keyframes sh-pant{50%{scale:1.03 .97}}
#s-shadows .sh-drops{position:absolute;right:8%;top:6%;width:18%;height:22%;display:none}
#s-shadows .sh-hot .sh-drops{display:block;background:radial-gradient(ellipse 30% 40% at 30% 40%,#7cc8ff 0 60%,transparent 62%),radial-gradient(ellipse 25% 35% at 75% 75%,#7cc8ff 0 60%,transparent 62%);animation:sh-drip 1.4s ease-in infinite}
@keyframes sh-drip{0%{translate:0 -20%;opacity:0}30%{opacity:1}100%{translate:0 60%;opacity:0}}
#s-shadows.sh-sun .sh-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,170,60,var(--warm,0)),transparent 70%);z-index:0}
#s-shadows.sh-dusk .sh-scene:after{transition:background 2s;background:linear-gradient(rgba(255,120,40,.45),rgba(120,40,90,.25));--warm:.45}

/* помощник из семьи (ведущий театра): место считает layout() (helper.place) — портрет снизу слева под карточками, альбом слева */
#s-shadows .helper.fam3d{--hp-h:30%;--hp-x:2vmin;--hp-y:1%;z-index:7}
@media (orientation:portrait){#s-shadows .helper.fam3d{--hp-h:28%}}
#s-shadows .sh-hall:empty{display:none}
/* 07.10 after the review: the asked shadow steps aside for a wrong choice; the one who came out (F) shines — not mistaken for the host */
#s-shadows .sh-sh.sh-aside{translate:-30% 0;scale:.7;transition:translate .35s,scale .35s}
#s-shadows .sh-sh{transition:translate .35s,scale .35s}
#s-shadows .sh-cmp .sh-si{filter:brightness(0) blur(.2vmin);opacity:.55}
#s-shadows .sh-fig.sh-star{filter:drop-shadow(0 0 1.6vmin #fff2a8) drop-shadow(0 0 3vmin #ffd23f)}
/* every kind of round has its own light on the screen: one theatre, different shows */
#s-shadows[data-kind="P"] .sh-scr{background:radial-gradient(ellipse 70% 60% at 50% 58%,#eef6ff 0,#c9dcf5 45%,#93acd6 80%,#6f84b8 100%)}
#s-shadows[data-kind="H"] .sh-scr{background:radial-gradient(ellipse 70% 60% at 50% 58%,#fff1f4 0,#ffd0dc 45%,#f29bb3 80%,#c9708e 100%)}
#s-shadows[data-kind="F"] .sh-scr{background:radial-gradient(ellipse 70% 60% at 50% 58%,#fffbe0 0,#ffe98f 45%,#f5c64a 80%,#d39a28 100%)}
#s-shadows[data-kind="D"] .sh-scr{background:radial-gradient(ellipse 70% 60% at 50% 58%,#f2fff0 0,#d4f3cc 45%,#a4dc96 80%,#76b866 100%)}
/* 07.10, the customer: closed curtains must cover the stage (the pedestal) too — down to the floor, over the stage, under the valance */
#s-shadows .sh-cur{transition:width .8s cubic-bezier(.5,0,.3,1),bottom .8s cubic-bezier(.5,0,.3,1)}
#s-shadows .sh-th.sh-shut .sh-cur{bottom:0;z-index:5}
#s-shadows .sh-th.sh-shut .sh-val{z-index:6}
/* closed: a velvet drape fills the gap between the tied-back curtains — the screen and the stage are fully hidden */
#s-shadows .sh-th:after{content:'';position:absolute;left:6%;right:6%;top:calc(var(--vh) * .45);bottom:-55%;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s .35s;
  background:repeating-linear-gradient(90deg,#8e0f16 0,#c81d25 3.5%,#e0353b 6%,#c81d25 8.5%,#8e0f16 12%);box-shadow:inset 0 -3vmin 4vmin rgba(60,0,0,.45)}
#s-shadows .sh-th.sh-shut:after{opacity:1}
#s-shadows .sh-th.sh-shut .sh-cur{z-index:6}
#s-shadows .sh-th.sh-shut .sh-val{z-index:7}

/* ---------- polish 14.10: отклик, живой фон, серия, вспышка (shp-*). Только transform/opacity; частицы ≤ 36 — в shadows.js (SP) ---------- */
#s-shadows .shp-amb,#s-shadows .shp-glow,#s-shadows .shp-rb,#s-shadows .shp-flash{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#s-shadows .shp-amb{z-index:1}
#s-shadows .shp-glow{z-index:2;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,236,160,.7),rgba(255,236,160,0) 62%)}
#s-shadows .shp-rb{z-index:2;opacity:0;transition:opacity 1.2s ease-in-out}
#s-shadows .shp-rb:before{content:"";position:absolute;left:-50%;top:0;width:200%;height:100%;background:linear-gradient(100deg,#ff7b8a,#ffc65a,#fff27a,#7be08a,#6cc4ff,#b48cff,#ff7b8a,#ffc65a,#fff27a,#7be08a,#6cc4ff,#b48cff)}
#s-shadows .shp-rb.on{opacity:.5}
/* review 15.10: in the scenes L/S the rainbow stays under the toys/animals (the scene layer is z-index 2), only the background is tinted */
#s-shadows.sh-in-scene .shp-rb{z-index:1}
#s-shadows.sh-in-scene .shp-rb.on{opacity:.35}
#s-shadows .shp-rb.on:before{animation:shp-rb 4s ease-in-out infinite alternate}
@keyframes shp-rb{to{transform:translateX(25%)}}
#s-shadows .shp-flash{z-index:19;opacity:0;background:radial-gradient(circle at 50% 40%,#fff,rgba(255,255,255,.7))}
#s-shadows .shp-lit{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.9),rgba(255,255,255,0) 65%)}
#s-shadows .shp-mote{position:absolute;bottom:-4vmin;width:var(--s);aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff 0 25%,rgba(255,255,255,0) 70%);opacity:0;animation:shp-mote var(--d) ease-in-out var(--dl) infinite}
@keyframes shp-mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}85%{opacity:.45}100%{transform:translate(var(--dx),-105vh);opacity:0}}
#s-shadows .shp-glint{position:absolute;width:30vmin;height:30vmin;border-radius:50%;background:radial-gradient(rgba(255,244,200,.45),rgba(255,244,200,0) 65%);opacity:.12;animation:shp-glint 5s ease-in-out var(--dl) infinite alternate}
@keyframes shp-glint{to{opacity:.5;transform:scale(1.25)}}
/* fireflies of the night room (L only) */
#s-shadows .shp-fly{display:none;position:absolute;width:2.6vmin;height:2.6vmin;border-radius:50%;background:radial-gradient(#f4ffa0 0 30%,rgba(200,255,90,0) 70%);opacity:0;animation:shp-fly var(--d) ease-in-out var(--dl) infinite}
#s-shadows[data-kind="L"] .shp-fly{display:block}
@keyframes shp-fly{0%,100%{transform:translate(0,0);opacity:0}30%{opacity:.9}60%{transform:translate(4vmin,-3vmin);opacity:.5}}
#s-shadows .shp-ban{position:absolute;z-index:40;left:50%;top:6vmin;opacity:0;pointer-events:none;white-space:nowrap;font:900 7.4vmin/1 'Nunito','Arial Rounded MT Bold',system-ui,sans-serif;letter-spacing:.02em;color:#ffd23f;-webkit-text-stroke:.9vmin #7a3fb0;paint-order:stroke fill;text-shadow:0 .6vmin 0 rgba(60,20,90,.35)}
#s-shadows .shp-ban[data-t="2"]{color:#7be08a;-webkit-text-stroke-color:#1d7a4a}
#s-shadows .shp-ban[data-t="3"]{color:#6cc4ff;-webkit-text-stroke-color:#1f5fa8}
#s-shadows .shp-ban[data-t="4"]{color:#ff8fc8;-webkit-text-stroke-color:#a8265f}
#s-shadows .shp-ban[data-t="rec"]{color:#fff27a;-webkit-text-stroke-color:#b3541a;font-size:8.4vmin}
.shp-ring{position:fixed;z-index:975;pointer-events:none;border-radius:50%;border:.7vmin solid rgba(255,255,255,.95);box-shadow:0 0 1.4vmin rgba(255,255,255,.8)}
.shp-plus{position:fixed;z-index:975;pointer-events:none;font:900 6vmin/1 'Nunito',system-ui,sans-serif;color:#ffd23f;-webkit-text-stroke:.6vmin #b3541a;paint-order:stroke fill;white-space:nowrap}
/* hit-stop: only the living background holds still (touches go through); a hidden tab pauses everything */
#s-shadows.shp-freeze .shp-mote,#s-shadows.shp-freeze .shp-glint,#s-shadows.shp-freeze .shp-fly,#s-shadows.shp-freeze .sh-glow,#s-shadows.shp-freeze .sh-dust,#s-shadows.shp-freeze .sh-sh,#s-shadows.shp-paused *,#s-shadows.shp-paused *:before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#s-shadows .shp-amb,#s-shadows .shp-rb,#s-shadows .shp-flash,#s-shadows .shp-glow,#s-shadows .shp-lit{display:none}}