/* 第 13 关：宅家敲门节奏对话，作用域 .sg */
.sg{position:absolute;inset:0;overflow:hidden;background:#ffd3ad;touch-action:none;user-select:none}
.sg-bg{position:absolute;inset:0}
.sg-bg .art{width:100%;height:100%}

/* 门 */
.sg-door{position:absolute;left:246px;top:190px;width:110px;height:300px;z-index:2;transform-origin:50% 100%;transition:transform .08s}
.sg-door .sg-door-leaf{transform-box:fill-box;transform-origin:0 50%;transition:transform .4s}
.sg-door.push .sg-door-leaf{transform:perspective(300px) rotateY(-14deg)}
.sg-door.open .sg-door-leaf{transform:perspective(300px) rotateY(-70deg)}
.sg-peep{position:absolute;left:214px;top:96px;width:150px;z-index:6;opacity:0;transform:translateY(10px) scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
.sg-peep.on{opacity:1;transform:none}
.sg-peep.leave{opacity:0;transform:translateX(30px)}
.sg-peep-face{position:absolute;right:8px;top:0;width:80px;height:80px;border-radius:50%;background:#1c1c30;border:4px solid #7fe0c0;box-shadow:0 0 0 3px #1c1c30,0 6px 12px rgba(0,0,0,.35);overflow:hidden;transition:transform .08s}
.sg-peep-face .art{width:100%;height:100%;transform:scale(1.15) translateY(4px)}
.sg-peep-line{position:absolute;right:0;top:86px;max-width:170px;background:#fff;color:#1c1c30;font-weight:900;font-size:12px;padding:5px 9px;border-radius:10px;border:2.5px solid #1c1c30;box-shadow:2px 2px 0 #1c1c30;white-space:nowrap}

/* 沙发 / 她 / 猫 */
.sg-sofa{position:absolute;left:6px;top:372px;width:240px;height:150px;z-index:3;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.sg-girl{position:absolute;left:44px;top:280px;width:160px;height:190px;z-index:4;transition:transform .15s}
.sg-girl .sg-head{transform-box:fill-box;transform-origin:50% 90%;transition:transform .12s}
.sg-girl .sg-face-shout{display:none}
.sg-girl.shout .sg-face-shout{display:block}
.sg-girl.shout .sg-face-idle{display:none}
.sg-girl.shout .sg-head{transform:rotate(14deg) translateX(6px)}
.sg-girl.shout .sg-phone{opacity:.4}
.sg-girl.oops .sg-head{transform:rotate(-8deg)}
.sg-girl.buzz{transform:translateY(-3px)}
.sg-girl.win{animation:sgwin .6s ease-in-out infinite alternate}
@keyframes sgwin{from{transform:translateY(0)}to{transform:translateY(-8px) rotate(-3deg)}}
.sg-girl.dragged{transform:translateX(140px) rotate(20deg);opacity:.6;transition:transform .8s ease-in,opacity .8s}
.sg-cat{position:absolute;left:168px;top:352px;width:70px;height:56px;z-index:5;transition:transform .15s}
.sg-cat .sg-cat-meow{display:none}
.sg-cat.meow .sg-cat-meow{display:block}
.sg-cat.meow .sg-cat-idle{display:none}
.sg-cat.meow{transform:translateY(-8px)}
.sg-cat .sg-cat-head{transform-box:fill-box;transform-origin:50% 100%;transition:transform .15s}
.sg-cat.meow .sg-cat-head{transform:rotate(-12deg)}

/* 特效 / 文案 */
.sg-fx{position:absolute;inset:0;pointer-events:none;z-index:7}
.sg-pow{position:absolute;transform:translate(-50%,-50%);font-size:24px;font-weight:900;color:#fff;-webkit-text-stroke:1.5px #1c1c30;paint-order:stroke fill;text-shadow:3px 3px 0 #1c1c30;white-space:nowrap;animation:sgpow .7s ease-out forwards}
.sg-pow.robot{color:#9ad;font-family:monospace}
.sg-pow.cat{color:#ffb0c0;font-size:20px}
.sg-pow.good{color:#7fe0c0;font-size:20px}
.sg-pow.perfect{color:#ffd166;font-size:24px}
.sg-pow.bad{color:#ff6b6b;font-size:20px}
@keyframes sgpow{from{transform:translate(-50%,-50%) scale(.5)}35%{transform:translate(-50%,-60%) scale(1.15);opacity:1}to{transform:translate(-50%,-110%);opacity:0}}
.sg-hud{position:absolute;left:0;right:0;top:12px;text-align:center;z-index:8}
.sg-dots{display:flex;justify-content:center;gap:6px}
.sg-dots i{width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid #1c1c30;box-shadow:2px 2px 0 #1c1c30}
.sg-dots i.ok{background:#7fe0c0}
.sg-dots i.ok::after{content:'✓';display:block;font-size:10px;font-weight:900;line-height:12px;color:#1c1c30;font-style:normal}
.sg-dots i.bad{background:#ff8c42}
.sg-dots i.bad::after{content:'✕';display:block;font-size:10px;font-weight:900;line-height:12px;color:#1c1c30;font-style:normal}
.sg-round{margin-top:6px;font-size:13px;font-weight:900;color:#1c1c30;background:#fff;display:inline-block;padding:3px 10px;border-radius:999px;border:2px solid #1c1c30;box-shadow:2px 2px 0 #1c1c30}
.sg-cue{position:absolute;left:0;right:0;top:230px;text-align:center;font-size:30px;font-weight:900;color:#fff;-webkit-text-stroke:2px #1c1c30;paint-order:stroke fill;text-shadow:4px 4px 0 #1c1c30;opacity:0;z-index:9;pointer-events:none}
.sg-cue.big{font-size:44px}
.sg-cue.on{animation:sgcue .8s ease-out forwards}
@keyframes sgcue{from{opacity:0;transform:scale(.4) rotate(-6deg)}30%{opacity:1;transform:scale(1.1) rotate(-3deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}
.sg-say{position:absolute;left:110px;top:262px;background:#fff;color:#1c1c30;font-weight:900;font-size:22px;padding:4px 14px;border-radius:999px;border:3px solid #1c1c30;box-shadow:3px 3px 0 #1c1c30;opacity:0;z-index:8;white-space:nowrap;pointer-events:none}
.sg-say::after{content:'';position:absolute;left:14px;bottom:-11px;border:6px solid transparent;border-top-color:#1c1c30;border-bottom:0}
.sg-say.on{animation:sgsay .5s ease-out forwards}
@keyframes sgsay{from{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:translateY(-8px)}}
.sg-notif{position:absolute;left:50%;top:-50px;transform:translateX(-50%);width:300px;background:#fff;color:#1c1c30;font-weight:800;font-size:13px;padding:8px 12px;border-radius:12px;border:2.5px solid #1c1c30;box-shadow:3px 3px 0 #1c1c30;z-index:9;transition:top .2s;pointer-events:none}
.sg-notif::before{content:'经纪人 · 宣传日程';display:block;font-size:10px;color:#888;margin-bottom:2px}
.sg-notif.on{top:64px}
.sg-tutor{position:absolute;left:50%;top:120px;transform:translateX(-50%);background:rgba(28,28,48,.78);color:#ffd166;font-weight:900;font-size:14px;padding:8px 16px;border-radius:12px;text-align:center;line-height:1.4;z-index:9;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.sg-tutor small{color:#fff;font-size:12px}
.sg-tutor.off{opacity:0}
.sg-peep{left:212px;width:144px}
.sg-peep-face{border-color:#e5bb76}
.sg-peep-line{max-width:186px;white-space:normal;width:max-content;background:#fff0d2;border-color:#966b3e}
.sg-peep-line::before{content:'门外';display:block;font-size:9px;color:#9a653c;letter-spacing:2px;margin-bottom:2px}

.sg[data-phase="listen"] .sg-door{filter:drop-shadow(0 0 2px #ffd38a)}.sg[data-phase="reply"] .sg-girl{filter:drop-shadow(0 0 3px #b4f3d8)}.sg-mode{font-size:12px!important;line-height:17px!important}