.mascot-container{position:fixed;bottom:20px;right:20px;z-index:10000;pointer-events:auto;width:130px;height:160px;cursor:grab;user-select:none;overflow:visible!important;transition:opacity 0.3s ease}.mascot-container.dragging{cursor:grabbing}.dio-svg{width:100%;height:100%;filter:drop-shadow(0 6px 16px rgba(0,0,0,0.22));transition:transform 0.2s ease,filter 0.2s ease;overflow:visible}.mascot-container:not(.sleeping):not(.dragging) .dio-svg{animation:dioBob 3.2s ease-in-out infinite}@keyframes dioBob{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-7px) rotate(-0.8deg)}70%{transform:translateY(-4px) rotate(0.5deg)}}.mascot-container:not(.sleeping):not(.dragging) .ear-left{transform-origin:50% 90%;animation:earTwitchL 6s ease-in-out infinite}.mascot-container:not(.sleeping):not(.dragging) .ear-right{transform-origin:50% 90%;animation:earTwitchR 6s ease-in-out infinite 2s}@keyframes earTwitchL{0%,80%,100%{transform:rotate(0deg) scaleY(1)}85%{transform:rotate(-8deg) scaleY(1.05)}92%{transform:rotate(4deg) scaleY(0.97)}}@keyframes earTwitchR{0%,80%,100%{transform:rotate(0deg) scaleY(1)}85%{transform:rotate(8deg) scaleY(1.05)}92%{transform:rotate(-4deg) scaleY(0.97)}}.mascot-container:not(.sleeping):not(.dragging) .dio-tail{transform-origin:15% 80%;animation:tailWag 4s ease-in-out infinite 1s}@keyframes tailWag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-10deg)}}.whisker{transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}.whisker-group{transition:transform 0.4s ease}.mascot-container.happy .whisker-left{transform:rotate(-6deg) translateY(-1px);transform-origin:right center}.mascot-container.happy .whisker-right{transform:rotate(6deg) translateY(-1px);transform-origin:left center}.mascot-container.happy .wl1,.mascot-container.happy .wr1{transform:rotate(-4deg)}.mascot-container.thinking .whisker-left{transform:rotate(-10deg);transform-origin:right center}.mascot-container.thinking .whisker-right{transform:rotate(3deg);transform-origin:left center}@keyframes whiskerThink{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-14deg)}}.mascot-container.thinking .whisker-left{animation:whiskerThink 1.2s ease-in-out infinite;transform-origin:right center}.mascot-container.surprised .whisker-left{transform:rotate(10deg) scaleX(1.15);transform-origin:right center}.mascot-container.surprised .whisker-right{transform:rotate(-10deg) scaleX(1.15);transform-origin:left center}.mascot-container.sleeping .whisker-left{transform:rotate(15deg);transform-origin:right center}.mascot-container.sleeping .whisker-right{transform:rotate(-15deg);transform-origin:left center}@keyframes whiskerDizzy{0%,100%{transform:rotate(0deg)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}.mascot-container.dizzy .whisker-group{animation:whiskerDizzy 0.25s linear infinite}.mouth{transition:d 0.35s ease}.mascot-container.sleeping .eye-iris,.mascot-container.sleeping .eye-white{opacity:0}.mascot-container.sleeping .sleep-line{display:block!important}.mascot-container.surprised .eye-white{r:14}.pupil{transition:transform 0.12s ease}.blush-left,.blush-right{transition:opacity 0.4s ease;opacity:0}.mascot-container.blush .blush-left,.mascot-container.blush .blush-right{opacity:1}.mascot-container.happy .blush-left,.mascot-container.happy .blush-right{opacity:0.5}.rune-ring{animation:runeRotate 8s linear infinite;transform-origin:center}@keyframes runeRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.bolt-path{filter:drop-shadow(0 0 4px #FFD700);animation:boltPulse 2.5s ease-in-out infinite}@keyframes boltPulse{0%,100%{filter:drop-shadow(0 0 3px #FFD700) drop-shadow(0 0 6px #FF9500);opacity:0.9}50%{filter:drop-shadow(0 0 7px #FFD700) drop-shadow(0 0 14px var(--accent-purple));opacity:1}}.mascot-container.speaking .bolt-path{animation:boltSpeak 0.6s ease-in-out infinite alternate}@keyframes boltSpeak{from{filter:drop-shadow(0 0 5px #FFD700)}to{filter:drop-shadow(0 0 12px #FF9500) drop-shadow(0 0 20px var(--accent-purple))}}.mascot-container.sleeping .dio-svg{animation:sleepBob 3s ease-in-out infinite}@keyframes sleepBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(1deg)}}.mascot-container.sleeping::after{content:'💤';position:absolute;top:-5px;right:-5px;font-size:18px;animation:floatZzz 2.5s ease-in-out infinite;pointer-events:none}@keyframes floatZzz{0%{opacity:0;transform:translate(0,0) scale(0.7)}40%{opacity:1}100%{opacity:0;transform:translate(-8px,-14px) scale(1.1)}}.mascot-container.startled{animation:startledJump 0.4s cubic-bezier(0.36,0.07,0.19,0.97)}@keyframes startledJump{0%,100%{transform:scale(1) rotate(0deg)}30%{transform:scale(1.12) rotate(-3deg)}60%{transform:scale(0.95) rotate(2deg)}}.star-group{display:none}.mascot-container.dizzy .star-group{display:block}.star-shape{animation:starTwinkle 0.4s ease-in-out infinite alternate;transform-origin:center}.star-shape:nth-child(2){animation-delay:0.15s}.star-shape:nth-child(3){animation-delay:0.3s}@keyframes starTwinkle{from{transform:scale(0.7) rotate(0deg);opacity:0.6}to{transform:scale(1.1) rotate(20deg);opacity:1}}.mascot-container.dizzy .dio-svg{animation:dizzyWobble 0.18s linear infinite}@keyframes dizzyWobble{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}.teleport-flash{animation:teleportFlash 0.35s ease}@keyframes teleportFlash{0%{opacity:1;transform:scale(1);filter:brightness(1)}30%{opacity:0.3;transform:scale(0.7);filter:brightness(3)}60%{opacity:0;transform:scale(0.4)}80%{opacity:0.5;transform:scale(1.1);filter:brightness(2)}100%{opacity:1;transform:scale(1);filter:brightness(1)}}.mascot-container.stretching .dio-svg{animation:stretch 2s ease}@keyframes stretch{0%{transform:scaleY(1) translateY(0)}25%{transform:scaleY(1.12) translateY(-8px)}50%{transform:scaleY(0.94) translateY(3px)}100%{transform:scaleY(1) translateY(0)}}.mascot-container.wave .paw-right{transform-origin:center bottom;animation:pawWave 0.45s ease-in-out infinite alternate}@keyframes pawWave{from{transform:rotate(-15deg) translateY(-4px)}to{transform:rotate(20deg) translateY(-10px)}}.mascot-container.happy .dio-svg{animation:happyBounce 0.5s cubic-bezier(0.36,0.07,0.19,0.97) 2}@keyframes happyBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) scale(1.05)}70%{transform:translateY(-6px)}}.dio-heart{position:fixed;pointer-events:none;z-index:10005;font-size:16px;animation:heartFloat 1.2s ease-out forwards}@keyframes heartFloat{0%{opacity:1;transform:translateY(0) scale(0.5) rotate(var(--rot))}60%{opacity:0.8;transform:translateY(-45px) scale(1.1) rotate(var(--rot))}100%{opacity:0;transform:translateY(-80px) scale(0.6) rotate(var(--rot))}}.dio-sparkle{position:fixed;pointer-events:none;z-index:9999;width:6px;height:6px;border-radius:50%;animation:sparkleLife 0.7s ease-out forwards}@keyframes sparkleLife{0%{opacity:0.9;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(0) translateY(10px)}}.dirt-particle{position:fixed;width:5px;height:5px;background:#8B6040;border-radius:50%;pointer-events:none;animation:dirtFly 0.55s ease-out forwards}@keyframes dirtFly{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}}.dio-ball{position:fixed;width:18px;height:18px;background:radial-gradient(circle at 35% 30%,#FFE066,#FF9500);border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,0.25),inset 0 -2px 4px rgba(0,0,0,0.15);pointer-events:none;z-index:9999}.ball-trail{position:fixed;width:14px;height:14px;background:radial-gradient(circle at 35% 30%,rgba(255,224,102,0.5),rgba(255,149,0,0.3));border-radius:50%;pointer-events:none;z-index:9998;filter:blur(1px)}.spit-bubble{position:fixed;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.95),rgba(200,230,255,0.75));border-radius:60% 40% 70% 30% / 40% 60% 30% 70%;pointer-events:none;z-index:10001;box-shadow:0 0 8px rgba(255,255,255,0.4)}.speech-bubble{position:absolute;bottom:calc(100% + 10px);right:0;background:var(--surface);border:1.5px solid var(--primary-blue);border-radius:14px;padding:10px 14px;width:max-content;max-width:min(260px,calc(100vw - 24px));min-width:150px;font-size:0.82rem;line-height:1.45;color:var(--text-dark);box-shadow:0 4px 20px rgba(31,86,232,0.12),0 2px 8px rgba(0,0,0,0.08);display:none;white-space:normal;word-wrap:break-word;pointer-events:auto;z-index:10002;box-sizing:border-box;animation:bubblePop 0.22s cubic-bezier(0.34,1.56,0.64,1)}@keyframes bubblePop{from{transform:scale(0.8) translateY(6px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.speech-bubble::before{content:'';position:absolute;bottom:-8px;right:24px;width:14px;height:8px;background:var(--primary-blue);clip-path:polygon(0 0,100% 0,50% 100%)}.speech-bubble::after{content:'';position:absolute;bottom:-6px;right:25px;width:12px;height:7px;background:var(--surface);clip-path:polygon(0 0,100% 0,50% 100%)}.speech-bubble.below{bottom:auto;top:calc(100% + 10px)}.speech-bubble.below::before{bottom:auto;top:-8px;clip-path:polygon(0 100%,100% 100%,50% 0)}.speech-bubble.below::after{bottom:auto;top:-6px;clip-path:polygon(0 100%,100% 100%,50% 0)}.speech-text{font-size:0.82rem;color:var(--text-dark);line-height:1.45;font-family:'Space Grotesk',sans-serif}.speech-bubble .button-group{margin-top:9px;display:flex;gap:6px;justify-content:flex-end}.speech-bubble .btn{pointer-events:auto;min-height:30px;padding:5px 12px;font-size:0.78rem;border-radius:8px;touch-action:manipulation;cursor:pointer}.speech-bubble .btn-primary{background:var(--primary-blue);color:white;border:none}.speech-bubble .btn-ghost{background:transparent;color:var(--text-soft);border:1px solid var(--border)}.speech-bubble .btn-primary:hover{background:var(--primary-hover)}.speech-bubble .btn-ghost:hover{color:var(--text-dark)}.speech-bubble.interaction-request{border-color:var(--accent-purple);box-shadow:0 4px 20px rgba(31,86,232,0.15),0 2px 8px rgba(0,0,0,0.08)}.speech-bubble.interaction-request::before{background:var(--accent-purple)}.tutorial-highlight{position:relative;z-index:10001!important;border-radius:var(--radius-md);box-shadow:0 0 0 3px var(--primary-blue),0 0 0 6px rgba(31,86,232,0.25),0 0 30px rgba(31,86,232,0.30),0 0 0 9999px rgba(0,0,0,0.42);animation:tutorialPulse 2s ease-in-out infinite;transition:box-shadow 0.3s ease}@keyframes tutorialPulse{0%,100%{box-shadow:0 0 0 3px var(--primary-blue),0 0 0 6px rgba(31,86,232,0.25),0 0 25px rgba(31,86,232,0.30),0 0 0 9999px rgba(0,0,0,0.42)}50%{box-shadow:0 0 0 4px var(--primary-blue),0 0 0 9px rgba(31,86,232,0.20),0 0 40px rgba(31,86,232,0.45),0 0 0 9999px rgba(0,0,0,0.48)}}.tutorial-counter{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--surface);border:1.5px solid var(--border);border-radius:24px;padding:7px 18px;display:flex;align-items:center;gap:12px;z-index:10004;box-shadow:0 4px 20px rgba(0,0,0,0.12);font-family:'Space Grotesk',sans-serif;animation:counterSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;white-space:nowrap}@keyframes counterSlideIn{from{transform:translateX(-50%) translateY(-20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.tutorial-step-text{font-size:0.78rem;color:var(--text-soft);font-weight:500;letter-spacing:0.02em}.tutorial-dots{display:flex;gap:5px;align-items:center}.tutorial-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1)}.tutorial-dot.active{background:var(--primary-blue);transform:scale(1.3);box-shadow:0 0 6px rgba(31,86,232,0.5)}.tutorial-dot.done{background:var(--success);transform:scale(1.1)}@media (max-width:768px){.mascot-container{width:100px;height:124px}.speech-bubble{max-width:min(240px,calc(100vw - 20px));min-width:140px;font-size:0.8rem;padding:9px 12px}}@media (max-width:480px){.mascot-container{width:82px;height:100px}.speech-bubble{max-width:min(220px,calc(100vw - 16px));min-width:130px;font-size:0.78rem;padding:8px 11px}.speech-bubble .button-group{gap:5px}.speech-bubble .btn{padding:4px 10px}}[data-theme="dark"] .speech-bubble{background:var(--surface-dark);color:var(--text-primary-dark);border-color:var(--primary-blue-dark);box-shadow:0 4px 20px rgba(31,86,232,0.15),0 2px 12px rgba(0,0,0,0.35)}[data-theme="dark"] .speech-bubble::after{background:var(--surface-dark)}[data-theme="dark"] .tutorial-counter{background:var(--surface-dark);border-color:var(--border-dark);box-shadow:0 4px 20px rgba(0,0,0,0.4)}