/* ==========================================
   Mascot - 晴玖云精灵 v2
   Pure CSS3 Interactive Character
   Brand: Warm Peach/Apricot (#fdba74 / #f59e0b)
   v2: Body, typing mouth, hover ears, spin easter egg
   ========================================== */

.mascot-wrap{display:flex;justify-content:center;margin-bottom:6px;position:relative;z-index:10;user-select:none}

/* -- Speech Bubble -- */
.speech-bubble{position:absolute;top:-54px;left:50%;transform:translateX(-50%) scale(0);opacity:0;background:#fff;color:#334155;font-size:13px;font-weight:600;padding:8px 16px;border-radius:16px;white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.12);z-index:20;pointer-events:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.speech-bubble::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #fff}
.speech-bubble.show{transform:translateX(-50%) scale(1);opacity:1}
.speech-bubble.happy{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46}
.speech-bubble.happy::after{border-top-color:#bbf7d0}
.speech-bubble.sad{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b}
.speech-bubble.sad::after{border-top-color:#fecaca}
.speech-bubble.shy{background:linear-gradient(135deg,#fce7f3,#fbcfe8);color:#9d174d}
.speech-bubble.shy::after{border-top-color:#fbcfe8}
.speech-bubble.thinking{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
.speech-bubble.thinking::after{border-top-color:#fde68a}

/* -- Zzz -- */
.zzz-box{position:relative}
.zzz{position:absolute;top:-20px;right:10px;font-size:16px;font-weight:700;color:#fdba74;opacity:0;animation:zzz 2s ease-in-out infinite}
.zzz:nth-child(2){right:0;top:-36px;font-size:13px;animation-delay:.6s}
.zzz:nth-child(3){right:-6px;top:-48px;font-size:10px;animation-delay:1.2s}

/* -- Mascot Container -- */
.mascot{position:relative;width:82px;height:82px;cursor:pointer;animation:float 4s ease-in-out infinite}

/* Head */
.m-head{width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#fde8cd 0%,#fdba74 40%,#f59e0b 100%);position:relative;box-shadow:0 8px 28px rgba(245,158,11,.25),inset 0 -4px 10px rgba(217,119,6,.15),0 0 0 2px rgba(253,186,116,.08);transition:transform .3s}
.mascot:not(.clicked):not(.happy):not(.sad):not(.sleepy):not(.spin) .m-head{animation:breathe 3s ease-in-out infinite}
.mascot.clicked .m-head{animation:headBounce .5s ease}
.mascot.happy .m-head{animation:headDance .6s ease 2}
.mascot.sad .m-head{animation:headShake .5s ease 2}
.mascot.sleepy .m-head{animation:headSleepy 3s ease-in-out infinite}


/* Ears */
.m-ear{width:16px;height:20px;border-radius:50% 50% 40% 40%;background:linear-gradient(145deg,#fdba74,#f59e0b);position:absolute;top:4px;box-shadow:inset 0 2px 5px rgba(217,119,6,.2);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.m-ear::after{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:8px;height:10px;border-radius:50%;background:rgba(253,224,189,.5)}
.m-ear.left{left:-5px;transform:rotate(-15deg)}
.m-ear.right{right:-5px;transform:rotate(15deg)}
.mascot:hover .m-ear.left{transform:rotate(-5deg) scaleY(1.1)}
.mascot:hover .m-ear.right{transform:rotate(5deg) scaleY(1.1)}
.mascot.happy .m-ear{transform:rotate(0deg) scaleY(1.2)}
.mascot.sad .m-ear.left{transform:rotate(-30deg) scaleY(.8)}
.mascot.sad .m-ear.right{transform:rotate(30deg) scaleY(.8)}

/* Eyebrows */
.m-brow{width:13px;height:2.5px;background:#92400e;border-radius:2px;position:absolute;top:22px;transition:transform .3s,top .3s}
.m-brow.left{left:17px;transform:rotate(-5deg)}
.m-brow.right{right:17px;transform:rotate(5deg)}
.mascot.sad .m-brow.left{transform:rotate(15deg);top:20px}
.mascot.sad .m-brow.right{transform:rotate(-15deg);top:20px}
.mascot.happy .m-brow{top:20px}

/* Eyes */
.m-eye{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:27px;box-shadow:inset 0 2px 5px rgba(0,0,0,.1);overflow:hidden;transition:height .15s,border-radius .15s,top .3s}
.m-eye.left{left:15px}
.m-eye.right{right:15px}
.m-eye.blink{height:3px;border-radius:2px;background:#78350f;top:36px}
.m-eye.blink .m-pupil,.m-eye.blink .m-hi{opacity:0}
.m-eye.cover{height:4px;border-radius:2px;background:#78350f;top:36px}
.m-eye.cover .m-pupil,.m-eye.cover .m-hi{opacity:0}
.m-eye.sleepy{height:5px;border-radius:3px;background:#78350f;top:35px}
.m-eye.sleepy .m-pupil,.m-eye.sleepy .m-hi{opacity:0}
.m-eye.look-down{top:32px}
.m-eye.sparkle .m-hi{animation:sparkle .6s ease infinite}

/* Pupil */
.m-pupil{width:9px;height:9px;background:radial-gradient(circle at 35% 35%,#78350f,#451a03);border-radius:50%;position:absolute;top:5px;left:5px;transition:transform .08s}
.m-hi{width:3.5px;height:3.5px;background:#fff;border-radius:50%;position:absolute;top:3px;right:4px;opacity:.9}

/* Blush */
.m-blush{width:12px;height:7px;border-radius:50%;background:rgba(251,113,133,.25);position:absolute;top:40px;transition:all .3s}
.m-blush.left{left:7px}
.m-blush.right{right:7px}
.mascot:hover .m-blush{background:rgba(251,113,133,.38)}
.mascot.shy .m-blush,.mascot.clicked .m-blush{background:rgba(251,113,133,.6);width:15px;height:9px}

/* Mouth */
.m-mouth{width:11px;height:5px;border-bottom:2.5px solid #78350f;border-radius:0 0 50% 50%;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);transition:all .15s}
.mascot.happy .m-mouth{width:16px;height:9px;border-bottom-width:3px;bottom:16px}
.mascot.happy.laugh .m-mouth{width:18px;height:11px;background:#78350f;border:none;border-radius:0 0 50% 50%;bottom:15px}
.mascot.sad .m-mouth{border-bottom:none;border-top:2.5px solid #78350f;border-radius:50% 50% 0 0;bottom:16px}
.mascot.typing .m-mouth{animation:talk .25s ease infinite}

/* Arms */
.m-arm{width:16px;height:16px;border-radius:50%;background:linear-gradient(145deg,#fdba74,#f59e0b);position:absolute;top:50px;box-shadow:0 3px 8px rgba(245,158,11,.2);transition:all .4s cubic-bezier(.34,1.56,.64,1);z-index:5}
.m-arm.left{left:-8px}
.m-arm.right{right:-8px}
.m-arm.cover-eyes{top:27px !important;z-index:15}
.m-arm.cover-eyes.left{left:9px !important;transform:rotate(10deg)}
.m-arm.cover-eyes.right{right:9px !important;transform:rotate(-10deg)}
.m-arm.wave{animation:wave .4s ease 3}
.m-arm.cheer{animation:cheer .3s ease 5}

/* -- Spin Easter Egg -- */
.mascot.spin{animation:spin360 .6s cubic-bezier(.25,.46,.45,.94)}
.mascot.spin .m-head{animation:none}

/* ====== Animations ====== */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes headBounce{0%{transform:scale(1)}30%{transform:scale(.9) translateY(4px)}60%{transform:scale(1.1) translateY(-8px)}100%{transform:scale(1)}}
@keyframes headShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-3deg)}40%{transform:translateX(6px) rotate(3deg)}60%{transform:translateX(-4px) rotate(-2deg)}80%{transform:translateX(4px) rotate(2deg)}}
@keyframes headDance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-5deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-8px) rotate(5deg)}}
@keyframes headSleepy{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg) translateY(2px)}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-20deg)}75%{transform:rotate(20deg)}}
@keyframes cheer{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-15deg)}75%{transform:translateY(-8px) rotate(15deg)}}
@keyframes talk{0%,100%{height:5px}50%{height:8px;width:13px;bottom:17px}}
@keyframes spin360{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.85)}100%{transform:rotate(360deg) scale(1)}}
@keyframes sparkle{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
@keyframes zzz{0%{opacity:0;transform:translateY(0) scale(.6)}50%{opacity:1;transform:translateY(-12px) scale(1)}100%{opacity:0;transform:translateY(-24px) scale(.6)}}

/* ====== Mobile ====== */
@media(max-width:768px){
.mascot-wrap{margin-bottom:3px}
.mascot{width:64px;height:64px}
.m-head{width:64px;height:64px}
.m-ear{width:13px;height:16px;top:3px}
.m-brow{width:10px;top:16px}
.m-brow.left{left:12px}.m-brow.right{right:12px}
.m-eye{width:16px;height:16px;top:22px}
.m-eye.left{left:11px}.m-eye.right{right:11px}
.m-eye.blink,.m-eye.cover{top:29px}
.m-eye.sleepy{top:28px}
.m-eye.look-down{top:26px}
.m-pupil{width:7px;height:7px;top:4px;left:4px}
.m-hi{width:2px;height:2px;top:2px;right:3px}
.m-blush{width:9px;height:5px;top:32px}
.m-blush.left{left:4px}.m-blush.right{right:4px}
.m-mouth{bottom:14px;width:9px;height:4px}
.m-arm{width:13px;height:13px;top:40px}
.m-arm.left{left:-6px}.m-arm.right{right:-6px}
.m-arm.cover-eyes{top:22px !important}
.m-arm.cover-eyes.left{left:6px !important}
.m-arm.cover-eyes.right{right:6px !important}
.speech-bubble{top:-46px;font-size:12px;padding:6px 12px}
}