/* ═══════════════════════════════════════════════════════════
   DevDrill — Mascot (Dio) v2
   static/css/components/mascot.css
   ═══════════════════════════════════════════════════════════ */

/* ── CONTAINER ───────────────────────────────────────────── */
.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;
}

/* ── IDLE BOB ────────────────────────────────────────────── */
.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);
    }
}

/* ── EAR TWITCH ──────────────────────────────────────────── */
.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);
    }
}

/* ── TAIL WAG ────────────────────────────────────────────── */
.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 STATES ──────────────────────────────────────── */
.whisker {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whisker-group {
    transition: transform 0.4s ease;
}

/* happy: whiskers point slightly up */
.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);
}

/* thinking: one side lifted */
.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;
}

/* surprised: spread outward */
.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;
}

/* sleeping: droop */
.mascot-container.sleeping .whisker-left {
    transform: rotate(15deg);
    transform-origin: right center;
}

.mascot-container.sleeping .whisker-right {
    transform: rotate(-15deg);
    transform-origin: left center;
}

/* dizzy: shake */
@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 ───────────────────────────────────────────────── */
.mouth {
    transition: d 0.35s ease;
}

/* ── EYES / PUPILS ───────────────────────────────────────── */
.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 transitions */
.pupil {
    transition: transform 0.12s ease;
}

/* ── BLUSH ───────────────────────────────────────────────── */
.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;
}

/* ── CHEST BOLT GLOW ─────────────────────────────────────── */
.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 #7C61FF);
        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 #7C61FF);
    }
}

/* ── SLEEPING ────────────────────────────────────────────── */
.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);
    }
}

/* ── STARTLED ────────────────────────────────────────────── */
.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);
    }
}

/* ── DIZZY STARS ─────────────────────────────────────────── */
.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 ────────────────────────────────────────────── */
.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);
    }
}

/* ── STRETCHING ──────────────────────────────────────────── */
.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);
    }
}

/* ── WAVE ────────────────────────────────────────────────── */
.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);
    }
}

/* ── HAPPY BOUNCE ────────────────────────────────────────── */
.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);
    }
}

/* ── HEARTS (click particles) ────────────────────────────── */
.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));
    }
}

/* ── SPARKLE TRAIL ───────────────────────────────────────── */
.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 PARTICLES ──────────────────────────────────────── */
.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);
    }
}

/* ── BALL ────────────────────────────────────────────────── */
.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 ─────────────────────────────────────────── */
.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  — compact, clean, cute
   ══════════════════════════════════════════════════════════ */
.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(42, 104, 255, 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;
    }
}

/* Tail pointing down-right */
.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%);
}

/* When below mascot */
.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);
}

/* Interaction request bubble (special variant) */
.speech-bubble.interaction-request {
    border-color: var(--accent-purple);
    box-shadow: 0 4px 20px rgba(124, 97, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.speech-bubble.interaction-request::before {
    background: var(--accent-purple);
}

/* ══════════════════════════════════════════════════════════
   TUTORIAL  — spotlight & step counter
   ══════════════════════════════════════════════════════════ */
.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(42, 104, 255, 0.25),
        0 0 30px rgba(42, 104, 255, 0.3),
        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(42, 104, 255, 0.25),
            0 0 25px rgba(42, 104, 255, 0.3),
            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(42, 104, 255, 0.2),
            0 0 40px rgba(42, 104, 255, 0.45),
            0 0 0 9999px rgba(0, 0, 0, 0.48);
    }
}

/* Step counter pill */
.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(42, 104, 255, 0.5);
}

.tutorial-dot.done {
    background: var(--success);
    transform: scale(1.1);
}

/* ── MOBILE ──────────────────────────────────────────────── */
@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;
    }
}

/* ── DARK THEME TWEAKS ───────────────────────────────────── */
[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(77, 132, 255, 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);
}