/* SING-ALONG — Mo's TV. Prefix `sng-`, checked unused elsewhere.
   Nothing is ever drawn over the player itself (YouTube's API policies):
   Mo, Pip and the buttons all stand outside the screen rectangle. */

#scSing{
  --sng-a1:var(--berry); --sng-a2:var(--sky); --sng-a3:var(--sun);
  justify-content:space-between;gap:clamp(4px,1.4vh,12px);
  padding:calc(var(--pad-top, 0px) + 12px) 10px calc(var(--pad-bot, 0px) + 10px);
  background:
    radial-gradient(70% 50% at 50% 38%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    repeating-conic-gradient(from 0deg at 50% 40%,#FFF3CF 0 10deg,#FFE9B0 10deg 20deg),
    var(--cream);
  overflow:hidden}

.sng-say{margin:0 64px 0 0;max-width:calc(100vw - 90px);padding:8px 18px;border-radius:22px;background:#fff;
  font:800 clamp(18px,5vw,30px)/1.15 var(--font);color:var(--deep);text-align:center;
  box-shadow:0 4px 0 rgba(31,94,138,.12);position:relative;z-index:3;
  animation:sngIn .6s var(--spring)}

.sng-room{flex:0 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;
  padding-top:clamp(34px,7vh,64px)}

/* the TV: a cream cabinet with a gradient outline, rabbit ears, two knobs */
.sng-tv{position:relative;
  width:min(96vw, calc((100dvh - var(--pad-top,0px) - var(--pad-bot,0px) - 240px) * 1.62));
  min-width:min(96vw,330px);
  padding:clamp(8px,1.6vw,18px) clamp(8px,1.6vw,18px) 0;border-radius:clamp(20px,3vw,34px);
  background:linear-gradient(180deg,#FFFDF7,#FFF1DA);
  box-shadow:0 10px 0 rgba(201,139,78,.18),0 18px 34px rgba(31,94,138,.14);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:sngPop .7s var(--spring)}
.sng-tv::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:5px;
  background:linear-gradient(135deg,var(--sng-a1),var(--sng-a3) 50%,var(--sng-a2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.sng-ears{position:absolute;left:50%;bottom:calc(100% - 6px);width:clamp(110px,22%,200px);
  transform:translateX(-50%);overflow:visible;pointer-events:none}
.sng-knobs{display:block;width:100%;height:clamp(18px,3.2vh,30px);margin:4px 0 6px}
.sng-legs{position:absolute;left:0;right:0;top:100%;width:100%;height:clamp(10px,2vh,18px);pointer-events:none}

/* the screen. YouTube's player fills it; until it is ready a soft sky with
   twinkles, never a black box. min-height keeps the player at YouTube's
   200px minimum on a narrow phone (the player letterboxes inside). */
.sng-screen{position:relative;width:100%;aspect-ratio:16/9;min-height:206px;border-radius:12px;
  overflow:hidden;background:linear-gradient(180deg,#BFE9FB,#EAF7FF);
  box-shadow:inset 0 0 0 3px rgba(31,94,138,.10)}
.sng-screen iframe,#sngPlayer{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sng-wait{position:absolute;inset:0}
.sng-wait i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--sun);
  box-shadow:0 0 12px var(--sun);animation:sngTwinkle 1.6s ease-in-out infinite}
.sng-wait i:nth-child(1){left:18%;top:30%}
.sng-wait i:nth-child(2){left:44%;top:58%;animation-delay:.3s;background:var(--berry);box-shadow:0 0 12px var(--berry)}
.sng-wait i:nth-child(3){left:70%;top:26%;animation-delay:.6s;background:var(--sky);box-shadow:0 0 12px var(--sky)}
.sng-wait i:nth-child(4){left:30%;top:70%;animation-delay:.9s;background:var(--grape);box-shadow:0 0 12px var(--grape)}
.sng-wait i:nth-child(5){left:82%;top:64%;animation-delay:1.2s}
#scSing.sng-off .sng-screen{background:linear-gradient(180deg,#FFE9B0,#FFF8EC)}

/* Pip sits on top of the cabinet, beside the ears — never on the screen */
.sng-pip{position:absolute;right:6%;bottom:calc(100% - 8px);width:clamp(46px,8%,74px);pointer-events:none;z-index:2}
.sng-pip .char{width:100%}
.sng-pip .char svg,.sng-mo .char svg{width:100%;height:auto;display:block;overflow:visible}

/* the floor: Mo, and the big way out */
.sng-floor{flex:0 0 auto;width:100%;max-width:1100px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;padding:0 4px;position:relative;z-index:2}
.sng-mo{width:clamp(110px,32vw,170px)}
.sng-mo .char{width:100%;cursor:pointer}

.sng-done{position:relative;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;
  font:800 clamp(20px,5.4vw,30px)/1 var(--font);color:#fff;
  padding:clamp(14px,2.4vh,20px) clamp(22px,5vw,36px);border-radius:999px;margin-bottom:6px;
  background:linear-gradient(180deg,#7DD97B,#4FB35A);
  box-shadow:0 6px 0 #3C8F47,0 12px 22px rgba(60,143,71,.28);
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--spring)}
.sng-done::before{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:4px;
  background:linear-gradient(135deg,var(--sng-a3),var(--sng-a1),var(--sng-a2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.sng-done svg{width:1.3em;height:1.3em}
.sng-done:active{transform:translateY(4px) scale(.97)}

/* before the song: the TV breathes to say "tap me" */
#scSing.sng-ready:not(.sng-on):not(.sng-off) .sng-tv{animation:sngBeckon 1.6s var(--spring) infinite}

@keyframes sngIn{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes sngPop{0%{transform:scale(.7) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes sngBeckon{0%,100%{transform:scale(1)}40%{transform:scale(1.025) rotate(-.6deg)}}
@keyframes sngTwinkle{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.15);opacity:1}}

/* landscape: Mo stands at the TV's left, the button at its right */
@media (orientation:landscape){
  .sng-tv{width:min(78vw, calc((100dvh - var(--pad-top,0px) - var(--pad-bot,0px) - 270px) * 1.62))}
  .sng-floor{position:absolute;left:0;right:0;bottom:calc(var(--pad-bot,0px) + 10px);max-width:none;padding:0 16px;pointer-events:none}
  .sng-floor > *{pointer-events:auto}
  .sng-mo{width:clamp(90px,12vw,150px);margin:0}
  .sng-room{padding-bottom:clamp(40px,8vh,80px)}
}

@media (prefers-reduced-motion:reduce){
  .sng-tv,#scSing.sng-ready .sng-tv,.sng-wait i,.sng-say{animation:none !important}
}

/* our own poster, on the screen only until the tap — then gone, and the
   player is made underneath where it was */
.sng-poster{position:absolute;inset:0;z-index:2;border:0;padding:0;margin:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(60% 70% at 50% 45%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),
             linear-gradient(180deg,#BFE9FB,#EAF7FF);
  font:inherit;-webkit-tap-highlight-color:transparent}
.sng-poster[hidden]{display:none}
.sng-play{width:clamp(70px,16vmin,130px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(180deg,#FF9DB2,#FF6F91);
  box-shadow:0 6px 0 #D9547A,0 0 0 6px rgba(255,255,255,.85),0 12px 26px rgba(255,111,145,.35);
  animation:sngBeckon 1.4s var(--spring) infinite}
.sng-play svg{width:52%;height:52%;margin-left:8%}
.sng-name{font:800 clamp(15px,3.6vw,26px)/1.1 var(--font);color:var(--deep);
  background:rgba(255,255,255,.9);padding:6px 14px;border-radius:14px}