/* ═══════════════════════════════════════════════════════════════════
   COOKIE EATER GAME — additions / replacements for cookie popup section
   Add these into your existing style.css cookie popup block,
   replacing the old .animation-stage and monster rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card — taller to fit the game stage ───────────────────────── */
.cookie-card {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: white;
    padding: clamp(18px, 3vw, 28px) clamp(18px, 4vw, 32px) clamp(14px, 2.5vw, 22px);
    border-radius: 24px;
    text-align: center;
    border: 3px solid #ffaa00;
    box-shadow: 0 0 40px rgba(255,170,0,0.3), 0 20px 60px rgba(0,0,0,0.6);
    width: clamp(320px, 92vw, 560px);
    max-width: 96vw;
    position: relative;
    overflow: hidden;
}

/* ── Stage — half the screen height, gives the game room ───────── */
.animation-stage {
    position: relative;
    width: 100%;
    height: 46vh;           /* half-screen game area */
    min-height: 220px;
    margin: clamp(10px, 2vw, 18px) 0 clamp(6px, 1.5vw, 12px);
    background:
        radial-gradient(ellipse at 50% 110%, rgba(255,170,0,0.08) 0%, transparent 70%),
        rgba(0,0,0,0.35);
    border-radius: 18px;
    border: 2px solid rgba(255,170,0,0.22);
    overflow: hidden;
}

/* Ground line */
.animation-stage::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255,170,0,0.25) 20%,
        rgba(255,170,0,0.25) 80%,
        transparent
    );
}

/* ── Score display inside the stage ────────────────────────────── */
#cookie-score-wrap {
    position: absolute;
    top: 10px; right: 14px;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1rem, 3vw, 1.3rem);
    color: #ffaa00;
    z-index: 30;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    pointer-events: none;
}
#cookie-score { display: inline; }

/* ── Monster ────────────────────────────────────────────────────── */
.monster-img {
    position: absolute;
    bottom: 20%;            /* sits on the ground line */
    width: clamp(80px, 20vw, 130px);   /* much bigger than before */
    height: auto;
    z-index: 10;
    pointer-events: none;
    transform-origin: bottom center;
    image-rendering: pixelated; /* keeps sprite crisp if pixel-art style */
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55));
    /* Walk transition: smooth glide between left% values */
    transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Monster states ─────────────────────────────────────────────── */
@keyframes monster-breathe {
    0%,100% { transform: scaleY(1)    translateY(0);    }
    50%      { transform: scaleY(1.04) translateY(-3px); }
}
@keyframes monster-walk {
    0%   { transform: translateY(0)    scaleX(1)    scaleY(1);    }
    20%  { transform: translateY(-8px) scaleX(0.90) scaleY(1.10); }
    40%  { transform: translateY(0)    scaleX(1.05) scaleY(0.95); }
    60%  { transform: translateY(-5px) scaleX(0.93) scaleY(1.07); }
    80%  { transform: translateY(0)    scaleX(1)    scaleY(1);    }
    100% { transform: translateY(0)    scaleX(1)    scaleY(1);    }
}
@keyframes monster-happy {
    0%,100% { transform: rotate(0deg)   scale(1);    }
    15%      { transform: rotate(-18deg) scale(1.15); }
    35%      { transform: rotate(18deg)  scale(1.18); }
    55%      { transform: rotate(-12deg) scale(1.12); }
    75%      { transform: rotate(10deg)  scale(1.10); }
}
/* Flash white on chomp */
@keyframes monster-flash-kf {
    0%,100% { filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55)); }
    40%      { filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55)) brightness(3) saturate(0); }
}

.monster-img.state-idle  { animation: monster-breathe 2.2s ease-in-out infinite; }
.monster-img.state-walk  { animation: monster-walk    0.45s ease-in-out infinite; }
.monster-img.state-happy { animation: monster-happy   0.65s ease-in-out 4; }
.monster-img.monster-flash { animation: monster-flash-kf 0.25s ease-out; }

/* ── Stage shake on chomp ───────────────────────────────────────── */
@keyframes stage-shake-kf {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    20%      { transform: translate(-5px, 2px) rotate(-0.8deg); }
    40%      { transform: translate(5px, -2px)  rotate(0.8deg); }
    60%      { transform: translate(-3px, 1px)  rotate(-0.4deg); }
    80%      { transform: translate(3px, -1px)  rotate(0.4deg); }
}
.animation-stage.stage-shake {
    animation: stage-shake-kf 0.3s ease-out;
}

/* ── Cookie slots ───────────────────────────────────────────────── */
.cookie-slot {
    position: absolute;
    bottom: 20%;            /* sit on ground line */
    width: clamp(44px, 11vw, 68px);
    height: clamp(44px, 11vw, 68px);
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 5;
    transition: transform 0.15s ease;
}
.cookie-slot:hover:not(.eaten) {
    transform: translateX(-50%) scale(1.2) translateY(-4px);
}
/* Bounce-in on load */
@keyframes cookie-drop-in {
    0%   { transform: translateX(-50%) translateY(-60px) scale(0.5); opacity: 0; }
    70%  { transform: translateX(-50%) translateY(6px)  scale(1.1);  opacity: 1; }
    100% { transform: translateX(-50%) translateY(0)    scale(1);    opacity: 1; }
}
.cookie-slot {
    animation: cookie-drop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Stagger each cookie's drop-in */
.cookie-slot:nth-child(2) { animation-delay: 0.08s; }
.cookie-slot:nth-child(3) { animation-delay: 0.16s; }
.cookie-slot:nth-child(4) { animation-delay: 0.24s; }
.cookie-slot:nth-child(5) { animation-delay: 0.32s; }

.cookie-slot img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
    pointer-events: none;
}

/* Next-to-eat cookie: subtle glow + bob so player knows what to click */
.cookie-slot.next-cookie img {
    animation: cookie-next-bob 0.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px rgba(255,220,50,0.9)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
@keyframes cookie-next-bob {
    from { transform: translateY(0);   }
    to   { transform: translateY(-8px); }
}

/* Last (accept) cookie: gold pulse */
.cookie-slot.accept-cookie img {
    animation: cookie-pulse 1s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px rgba(255,170,0,0.9)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
@keyframes cookie-pulse {
    from { filter: drop-shadow(0 0  8px rgba(255,170,0,0.7)) drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
    to   { filter: drop-shadow(0 0 20px rgba(255,170,0,1.0)) drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
}

.cookie-slot.eaten { pointer-events: none; visibility: hidden; }

/* ── Score pop ──────────────────────────────────────────────────── */
.score-pop {
    position: absolute;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.9rem, 2.8vw, 1.2rem);
    color: #ffdd57;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    pointer-events: none;
    z-index: 40;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: score-pop-kf 0.9s ease-out forwards;
}
@keyframes score-pop-kf {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(0.7); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.2); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(-28px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.9); }
}

/* ── Crumbs ─────────────────────────────────────────────────────── */
.crumb {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 2px;
    background: #e8b86d;
    pointer-events: none;
    z-index: 20;
    animation: crumb-fly 0.65s ease-out forwards;
}
@keyframes crumb-fly {
    0%   { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: var(--crumb-end) scale(0.2) rotate(var(--crumb-rot)); }
}

/* ── Hint text ──────────────────────────────────────────────────── */
.cookie-accept-label {
    font-size: clamp(0.75rem, 2.2vw, 0.9rem);
    color: rgba(255,170,0,0.8);
    font-family: 'Fredoka One', cursive;
    letter-spacing: 0.4px;
    margin-top: 4px;
    text-align: center;
}