/* 波波乐园 · Bobo comes alive (js/bobo-play.js) */
svg.bobo{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bobo .bp-face>g,.bobo .bp-yawn,.bobo .bp-grin,.bobo .bp-orbit,.bobo .bp-starglow{display:none}
.bobo .bp-star{transform-origin:100px 184px}
.bobo .bp-orbit{transform-origin:100px 40px}
.bobo .bp-look{transform-origin:100px 150px}

/* faces */
.bobo.bp-giggle .eyes,.bobo.bp-content .eyes,.bobo.bp-squeeze .eyes,.bobo.bp-dizzy .eyes,.bobo.bp-sleep .eyes,.bobo.bp-yawning .eyes{display:none}
.bobo.bp-giggle .bp-happy,.bobo.bp-content .bp-happy,.bobo.bp-yawning .bp-sleepy{display:inline}
.bobo.bp-squeeze .bp-squeeze{display:inline}
.bobo.bp-dizzy .bp-dizzy,.bobo.bp-dizzy .bp-orbit{display:inline}
.bobo.bp-sleep .bp-sleepy{display:inline}
.bobo.bp-giggle .bp-blush,.bobo.bp-grinning .bp-blush{display:inline;animation:bpBlush .5s ease-out}
.bobo.bp-giggle .mouth,.bobo.bp-grinning .mouth,.bobo.bp-yawning .mouth{display:none}
.bobo.bp-giggle .bp-grin,.bobo.bp-grinning .bp-grin{display:inline}
.bobo.bp-yawning .bp-yawn{display:inline;transform-origin:100px 124px;animation:bpYawn 1.7s ease-in-out}
.bobo.bp-dizzy .bp-dizzy path{transform-box:fill-box;transform-origin:center;animation:bpSpin .7s linear infinite}
.bobo.bp-squeeze .browL,.bobo.bp-squeeze .browR{transform:translateY(5px)}
.bobo.bp-up .browL,.bobo.bp-up .browR,.bobo.bp-watch .browL,.bobo.bp-watch .browR{transform:translateY(-6px)}
.bobo.bp-watch .eyes{transform:scale(1.08)}
.bobo.bp-watch .sprout{animation-duration:1.1s}
.bobo.bp-shine .bp-starglow{display:inline;transform-origin:100px 184px;animation:bpGlow 1.4s ease-out forwards}

/* sleeping on the home page */
.bobo.bp-sleep .head{animation:bpNod 3.2s ease-in-out infinite}
.bobo.bp-sleep .torso{animation:breathe 3.2s ease-in-out infinite}
.bobo.bp-sleep .armL .sw,.bobo.bp-sleep .armR .sw{animation-duration:3.2s}
.bobo.bp-sleep .sprout{animation:bpDroop 3.2s ease-in-out infinite}

/* cheer variants (game.js still sets data-state=cheer) */
.bobo[data-state=cheer][data-cheer=clap] .rig{animation:bpBounce .45s ease-in-out 3}
.bobo[data-state=cheer][data-cheer=clap] .shadow{animation:none}
.bobo[data-state=cheer][data-cheer=clap] .armL{transform:rotate(-62deg)}
.bobo[data-state=cheer][data-cheer=clap] .armR{transform:rotate(62deg)}
.bobo[data-state=cheer][data-cheer=clap] .armL .fa{transform:none;animation:bpClapL .22s ease-in-out infinite alternate}
.bobo[data-state=cheer][data-cheer=clap] .armR .fa{transform:none;animation:bpClapR .22s ease-in-out infinite alternate}
.bobo[data-state=cheer][data-cheer=fist] .rig{animation:bpBounce .5s ease-in-out 3}
.bobo[data-state=cheer][data-cheer=fist] .shadow{animation:none}
.bobo[data-state=cheer][data-cheer=fist] .armL{transform:rotate(18deg)}
.bobo[data-state=cheer][data-cheer=fist] .armL .fa{transform:rotate(-30deg)}
.bobo[data-state=cheer][data-cheer=fist] .armR{animation:bpPump .5s ease-in-out infinite alternate}
.bobo[data-state=cheer][data-cheer=fist] .armR .fa{transform:rotate(-30deg)}
.bobo[data-state=cheer][data-cheer=clap] .eyes,.bobo[data-state=cheer][data-cheer=fist] .eyes{display:none}
.bobo[data-state=cheer][data-cheer=clap] .bp-happy,.bobo[data-state=cheer][data-cheer=fist] .bp-happy{display:inline}

@keyframes bpBlush{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes bpYawn{0%,100%{transform:scaleY(.3)}30%,70%{transform:scaleY(1.15)}}
@keyframes bpSpin{to{transform:rotate(360deg)}}
@keyframes bpGlow{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.7) rotate(40deg)}}
@keyframes bpNod{0%,100%{transform:rotate(1.5deg)}50%{transform:rotate(3deg)}}
@keyframes bpDroop{0%,100%{transform:rotate(22deg)}50%{transform:rotate(30deg)}}
@keyframes bpBounce{50%{transform:translateY(-10px)}}
@keyframes bpClapL{from{transform:rotate(0)}to{transform:rotate(28deg)}}
@keyframes bpClapR{from{transform:rotate(0)}to{transform:rotate(-28deg)}}
@keyframes bpPump{from{transform:rotate(-150deg)}to{transform:rotate(-120deg)}}

/* floating decorations */
.bp-fx{position:fixed;z-index:60;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(43,29,20,.18))}
.bp-fx svg{width:100%;height:100%;display:block;overflow:visible}

@media (prefers-reduced-motion:reduce){
  .bobo.bp-sleep .head,.bobo.bp-sleep .sprout,.bobo[data-state=cheer][data-cheer] .rig,.bobo[data-state=cheer][data-cheer] .armR,.bobo[data-state=cheer][data-cheer] .fa,.bobo .bp-dizzy path,.bobo .bp-starglow{animation:none!important}
}

/* the head always stays on the neck: gentle bob only, no big tilts */
.bobo .head{animation-name:bpHeadBob}
@keyframes bpHeadBob{50%{transform:rotate(1.2deg)}}
.bobo[data-state=sad] .head{animation:none;transform:rotate(2.5deg)}
.bobo .bp-look{transform:none}
.bobo[data-state=think] .head{transform:rotate(-2.5deg)}

/* speech bubbles of the background friends (js/scenes-play.js): above the question card */
.sp-say{position:fixed;z-index:70;pointer-events:none;padding:6px 14px;background:#fffdf6;border:3px solid var(--ink,#2b1d14);border-radius:16px;box-shadow:0 4px 0 var(--ink,#2b1d14);font:900 16px/1.2 "ZCOOL KuaiLe","Noto Sans SC",sans-serif;color:var(--ink,#2b1d14);white-space:nowrap;transform-origin:var(--tail,50%) 100%}
.sp-say::after{content:"";position:absolute;left:calc(var(--tail,50%) - 8px);bottom:-11px;width:14px;height:14px;background:#fffdf6;border-right:3px solid var(--ink,#2b1d14);border-bottom:3px solid var(--ink,#2b1d14);transform:rotate(45deg);border-radius:0 0 4px 0}