/* ================= ROOT ================= */

:root {
    --base-font: 18px;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: var(--base-font);
    color: white;
    text-align: center;
    overflow-x: hidden;
    cursor: none;
    position: relative;

    background: linear-gradient(
        60deg,
        #ff00cc,
        #00ffff,
        #ff6600,
        #00ff66,
        #ff00cc
    );
    background-size: 500% 500%;
    animation: vortexShift 20s ease infinite;
}

@keyframes vortexShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================= GLOBAL PAUSE ================= */

body.paused *,
body.paused *::before,
body.paused *::after {
    animation-play-state: paused !important;
}

/* ================= DYSLEXIA MODE ================= */

body.dyslexia {
    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
    letter-spacing: 0.08em;
    word-spacing: 0.15em;
    line-height: 1.8;
}

body.dyslexia * {
    font-family: inherit !important;
}

/* ================= CONTROLS ================= */

.controls {
    margin: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 20;
    position: relative;
}

button {
    padding: 10px 18px;
    border-radius: 25px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    background: linear-gradient(45deg, yellow, hotpink);
    box-shadow: 0 0 15px cyan;
}

/* ================= BANNER ================= */

.banner-wrapper {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner {
    padding: 20px 60px;
    font-size: 2.5rem;
    font-weight: bold;
    border-radius: 50px;
    background: linear-gradient(90deg, yellow, hotpink, cyan);
    color: black;
    text-shadow: 2px 2px 6px purple;
    box-shadow: 0 0 40px cyan;
    animation: bannerGlow 3s infinite alternate;
}

@keyframes bannerGlow {
    from { transform: scale(1); box-shadow: 0 0 30px cyan; }
    to { transform: scale(1.08); box-shadow: 0 0 60px yellow; }
}

/* ================= BUNNIES ================= */

.bunny {
    width: 120px;
    height: 160px;
    background: white;
    border-radius: 60px;
    position: relative;
    margin: 0 20px;
    animation: bunnyBounce 3s infinite ease-in-out;
}

@keyframes bunnyBounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bunny::before,
.bunny::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 80px;
    background: white;
    border-radius: 20px;
    top: -70px;
    animation: earWiggle 2s infinite alternate ease-in-out;
}

.bunny::before { left: 15px; }
.bunny::after { right: 15px; }

@keyframes earWiggle {
    from { transform: rotate(0deg); }
    to { transform: rotate(8deg); }
}

/* ================= BACKGROUND EGGS ================= */

.egg-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bg-egg {
    position: absolute;
    width: 70px;
    height: 95px;
    border-radius: 50% 50% 45% 45%;
    opacity: 0.3;
    background: linear-gradient(45deg, yellow, hotpink, cyan, lime);
    background-size: 300% 300%;
    box-shadow: 0 0 40px hotpink;

    animation:
        eggFloat linear infinite,
        eggSpin 8s linear infinite,
        eggColor 6s ease infinite;
}

@keyframes eggFloat {
    from { transform: translateY(110vh); }
    to { transform: translateY(-120vh); }
}

@keyframes eggSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes eggColor {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ================= CURSOR TRAIL ================= */

.trail {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    animation: fadeOut 0.8s linear forwards;
    z-index: 9999;
}

@keyframes fadeOut {
    to { opacity: 0; transform: scale(0.5); }
}