/* Sunburst/Glow Effect behind clicker */
.clicker-container::before {
    content: '';
    position: absolute;
    width: calc(900 * var(--px));
    /* Fixed size */
    height: calc(900 * var(--px));
    max-width: none;
    max-height: none;
    background: radial-gradient(circle, rgba(255, 200, 0, 0.4) 0%, rgba(255, 100, 0, 0) 70%);
    z-index: 1;
    animation: pulseGlow 3s infinite alternate;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(-5 * var(--px)));
    }
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Floating Text Animation */
.floating-text {
    position: absolute;
    font-weight: 800;
    color: white;
    pointer-events: none;
    font-family: var(--font-heading);
    font-size: calc(40 * var(--px));
    /* 2.5rem */
    /* Increased for high res */
    text-shadow: calc(3 * var(--px)) calc(3 * var(--px)) 0px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    /* will-change removed for performance */
}

.floating-text {
    animation: floatUp 1s forwards;
    animation-name: none;
}

.floating-text.animate {
    animation-name: floatUp;
}

.floating-text.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(-260 * var(--px))) scale(1.2);
    }
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Tutorial Paw */
.tutorial-paw {
    position: absolute;
    z-index: 2000;
    pointer-events: none;
    width: calc(200 * var(--px));
    /* Base size */
    height: calc(200 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tutorial-paw img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: bottom center;
    filter: drop-shadow(0 calc(15 * var(--px)) calc(25 * var(--px)) rgba(0, 0, 0, 0.4));
}

/* Animations for Paw */
.tutorial-paw.beckoning img {
    animation: paw-beckon 1.2s ease-in-out infinite;
}

.tutorial-paw.clicking img {
    animation: paw-click 0.4s ease-in-out infinite;
}

.tutorial-paw.slapping img {
    animation: paw-slap 0.8s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes paw-beckon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(-40 * var(--px)));
    }
}

@keyframes paw-click {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.85);
    }
}

@keyframes paw-slap {
    0% {
        transform: scale(1) rotate(0) translateY(0);
    }

    40% {
        transform: scale(1.1) rotate(-5deg) translateY(calc(-20 * var(--px)));
    }

    /* Slow creep towards button */
    55% {
        transform: scale(0.85) rotate(10deg) translateY(calc(-60 * var(--px)));
    }

    /* Sharp hit towards button */
    70% {
        transform: scale(1) rotate(0) translateY(0);
    }

    /* Recoil */
    100% {
        transform: scale(1) rotate(0) translateY(0);
    }

    /* Pause */
}

/* Tutorial Ripple Particles (Water drop style) */
.tutorial-ripple {
    position: absolute;
    width: calc(30 * var(--px));
    height: calc(30 * var(--px));
    border: calc(4 * var(--px)) solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2001;
    animation: ripple-expand 0.6s ease-out forwards;
}

@keyframes ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Position classes for Paw (rotation on container) */
.tutorial-paw.top {
    transform: rotate(180deg);
}

.tutorial-paw.bottom {
    transform: rotate(0deg);
}

.tutorial-paw.left {
    transform: rotate(90deg);
}

.tutorial-paw.right {
    transform: rotate(-90deg);
}

.tutorial-paw.bottom-right {
    transform: rotate(-45deg);
}


/* Ensure highlights still work if needed */
.tutorial-highlight {
    animation: tutorial-pulse 1.5s infinite;
    z-index: 1001 !important;
}

@keyframes tutorial-pulse {
    0% {
        outline: 0px solid rgba(255, 159, 28, 0.8);
        outline-offset: 0px;
    }

    50% {
        outline: calc(8 * var(--px)) solid rgba(255, 159, 28, 0);
        outline-offset: calc(15 * var(--px));
    }

    100% {
        outline: 0px solid rgba(255, 159, 28, 0);
        outline-offset: 0px;
    }
}

/* Frenzy Meter */
.frenzy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(12 * var(--px));
    opacity: 0.6;
    transition: all 0.3s ease;
    filter: grayscale(1);
}

.frenzy-container.filling {
    opacity: 0.9;
    filter: grayscale(0.5);
}

.frenzy-container.active {
    opacity: 1;
    filter: grayscale(0);
    animation: frenzyShake 0.2s infinite;
}

@keyframes frenzyShake {
    0% {
        transform: translate(calc(1 * var(--px)), calc(1 * var(--px))) rotate(0deg);
    }

    20% {
        transform: translate(calc(-1 * var(--px)), calc(-2 * var(--px))) rotate(-1deg);
    }

    40% {
        transform: translate(calc(-3 * var(--px)), 0px) rotate(1deg);
    }

    60% {
        transform: translate(calc(3 * var(--px)), calc(2 * var(--px))) rotate(0deg);
    }

    80% {
        transform: translate(calc(1 * var(--px)), calc(-1 * var(--px))) rotate(1deg);
    }

    100% {
        transform: translate(calc(-1 * var(--px)), calc(2 * var(--px))) rotate(-1deg);
    }
}

.frenzy-label {
    font-family: var(--font-heading);
    font-size: calc(24 * var(--px));
    /* 1.5rem */
    color: #fff;
    text-shadow: 0 0 calc(10 * var(--px)) rgba(255, 255, 255, 0.5);
    letter-spacing: calc(2 * var(--px));
}

.frenzy-meter-wrapper {
    position: relative;
    width: calc(90 * var(--px));
    height: calc(135 * var(--px));
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.milk-bottle {
    position: relative;
    width: calc(66 * var(--px));
    height: calc(105 * var(--px));
    background: rgba(255, 255, 255, 0.05);
    border: calc(4 * var(--px)) solid rgba(255, 255, 255, 0.8);
    border-radius: calc(9 * var(--px)) calc(9 * var(--px)) calc(18 * var(--px)) calc(18 * var(--px));
    overflow: hidden;
    backdrop-filter: blur(calc(2 * var(--px)));
}

.milk-bottle::before {
    content: '';
    position: absolute;
    top: calc(-18 * var(--px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(27 * var(--px));
    height: calc(15 * var(--px));
    background: rgba(255, 255, 255, 0.8);
    border-radius: calc(5 * var(--px));
    border: calc(3 * var(--px)) solid rgba(255, 255, 255, 1);
}

.milk-level {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #fff;
    transition: height 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
    box-shadow: inset 0 0 calc(10 * var(--px)) rgba(0, 0, 0, 0.1);
}

.frenzy-container.active .milk-level {
    background: linear-gradient(to top, #ff9f1c, #ffcc33);
    box-shadow: 0 0 calc(15 * var(--px)) #ff9f1c;
}

.frenzy-container.active .frenzy-label {
    color: #ff9f1c;
    text-shadow: 0 0 calc(15 * var(--px)) #ff9f1c;
    animation: pulseText 0.5s infinite alternate;
}

@keyframes pulseText {
    from {
        transform: scale(1);
        opacity: 0.8;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}

.frenzy-container.active .milk-bottle {
    border-color: #ff9f1c;
    box-shadow: 0 0 calc(30 * var(--px)) rgba(255, 159, 28, 0.4);
}

.frenzy-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Fixed */
    height: 100%;
    pointer-events: none;
    z-index: 5;
    box-shadow: inset 0 0 calc(100 * var(--px)) rgba(255, 159, 28, 0);
    transition: box-shadow 0.5s ease;
}

.frenzy-container.active~.frenzy-vignette {
    box-shadow: inset 0 0 calc(250 * var(--px)) rgba(255, 159, 28, 0.4);
    animation: vignettePulse 2s infinite alternate;
}

@keyframes vignettePulse {
    from {
        box-shadow: inset 0 0 calc(150 * var(--px)) rgba(255, 159, 28, 0.3);
    }

    to {
        box-shadow: inset 0 0 calc(300 * var(--px)) rgba(255, 159, 28, 0.6);
    }
}

.screen-shake {
    animation: screenShake 0.1s infinite;
}

@keyframes screenShake {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(calc(3 * var(--px)), calc(3 * var(--px)));
    }

    50% {
        transform: translate(calc(-3 * var(--px)), calc(-3 * var(--px)));
    }

    75% {
        transform: translate(calc(3 * var(--px)), calc(-3 * var(--px)));
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Meme Rain Event */
#rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.meme-rain-particle {
    position: absolute;
    top: calc(-300 * var(--px));
    width: calc(300 * var(--px));
    /* Larger fixed size */
    height: calc(300 * var(--px));
    cursor: pointer;
    pointer-events: auto;
    /* Only the memes are clickable */
    transition: transform 0.1s;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}

.meme-rain-particle.hidden {
    opacity: 0;
    pointer-events: none;
}

.meme-rain-particle.fall {
    animation: fallDown linear forwards;
}

.meme-rain-particle:active {
    transform: scale(0.8);
    filter: brightness(1.2);
}

@keyframes fallDown {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    25% {
        transform: translateY(calc(350 * var(--px))) translateX(calc(30 * var(--px))) rotate(10deg);
    }

    50% {
        transform: translateY(calc(700 * var(--px))) translateX(calc(-30 * var(--px))) rotate(-10deg);
    }

    75% {
        transform: translateY(calc(1050 * var(--px))) translateX(calc(15 * var(--px))) rotate(5deg);
    }

    100% {
        transform: translateY(calc(1400 * var(--px))) translateX(0) rotate(0deg);
    }
}

/* Mobile Performance Overrides removed */

body.mobile-mode .screen-shake {
    animation: none !important;
}

/* Coin Particle */
.coin-particle {
    position: absolute;
    width: calc(48 * var(--px));
    height: calc(48 * var(--px));
    pointer-events: none;
    z-index: 99;
    opacity: 0;
    object-fit: contain;

    will-change: transform, opacity;
}

/* Coin Rain Particle */
.coin-rain-particle {
    position: absolute;
    top: calc(-100 * var(--px));
    /* Start above screen */
    width: calc(64 * var(--px));
    height: calc(64 * var(--px));
    pointer-events: none;
    z-index: 2000;
    /* Behind UI but in front of game elements */
    animation: coinFall linear forwards;
    will-change: transform;
}

.coin-rain-particle.hidden {
    display: none;
}


@keyframes coinFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
        /* Fall past screen height */
        opacity: 1;
    }
}