/* Base turtle styling */
#turtle-mascot {
    cursor: pointer;
    --turtle-scale: 1;
    transform: scale(var(--turtle-scale));
    transition:
        transform 0.25s ease,
        filter 0.3s ease;

    /* already had, but keep: */
    -webkit-user-drag: none;

    /* stop it being selectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* iOS Safari: no callout menu / highlight */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Levels driven by body classes */
body.turtle-level-0 #turtle-mascot {
    /* calm, nothing special */
}

body.turtle-level-1 #turtle-mascot {
    animation: turtle-wiggle 0.4s ease;
}

body.turtle-level-2 #turtle-mascot {
    animation: turtle-wiggle 0.5s ease;
    filter: drop-shadow(0 0 4px rgba(0, 255, 150, 0.5));
}

body.turtle-level-3 #turtle-mascot {
    animation: turtle-spin 0.6s ease;
    filter: drop-shadow(0 0 6px rgba(0, 255, 150, 0.8));
}

body.turtle-level-4 #turtle-mascot {
    filter: drop-shadow(0 0 10px rgba(255, 120, 0, 0.9));
}

body.turtle-level-5 #turtle-mascot {
    filter: drop-shadow(0 0 14px rgba(255, 0, 120, 0.95));
}

/* Footer tilt and subtle chaos at higher levels */
.site-footer {
    transition: transform 0.3s ease, filter 0.3s ease;
}

body.turtle-level-3 .site-footer {
    transform: rotate(-1deg);
}

body.turtle-level-4 .site-footer {
    transform: rotate(-2deg) translateY(-2px);
}

body.turtle-level-5 .site-footer {
    transform: rotate(-4deg) translateY(-4px);
    filter: hue-rotate(10deg);
}

/* Keyframes */
@keyframes turtle-wiggle {
    0%   { transform: scale(var(--turtle-scale)) translateX(0); }
    25%  { transform: scale(var(--turtle-scale)) translateX(-2px); }
    50%  { transform: scale(var(--turtle-scale)) translateX(2px); }
    75%  { transform: scale(var(--turtle-scale)) translateX(-1px); }
    100% { transform: scale(var(--turtle-scale)) translateX(0); }
}

@keyframes turtle-spin {
    0%   { transform: scale(var(--turtle-scale)) rotate(0deg); }
    50%  { transform: scale(var(--turtle-scale)) rotate(180deg); }
    100% { transform: scale(var(--turtle-scale)) rotate(360deg); }
}

/* Floating “+1 turtle” text */
.turtle-floaty {
    position: fixed;
    pointer-events: none;
    font-size: 0.8rem;
    opacity: 0;
    animation: turtle-float-up 0.8s ease-out forwards;
    z-index: 9999;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 3px;
}

@keyframes turtle-float-up {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-20px); opacity: 0; }
}

#turtle-chaos {
	font-size: 0.8em;
	opacity: 0.6;
    z-index: -1;
}