html {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 40px 0;
    font-family: Arial, sans-serif;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 230, 150, 0.22), transparent 34%),
        radial-gradient(circle at 15% 80%, rgba(155, 93, 229, 0.28), transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(0, 201, 125, 0.2), transparent 28%),
        linear-gradient(135deg, #103f36 0%, #05724c 38%, #171a43 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    position: relative;
}

body::before,
body::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    content: "";
    background:
        linear-gradient(108deg, transparent 0 10%, rgba(255, 255, 255, 0.14) 10% 18%, transparent 18% 100%),
        linear-gradient(108deg, transparent 0 58%, rgba(255, 210, 94, 0.2) 58% 67%, transparent 67% 100%),
        repeating-linear-gradient(108deg, transparent 0 86px, rgba(255, 255, 255, 0.11) 86px 88px, transparent 88px 178px);
    opacity: 0.65;
    z-index: 0;
}

body::after {
    content: "";
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 212, 105, 0.7) 0 1px, transparent 2px);
    background-size: 120px 120px, 190px 190px;
    background-position: 0 0, 50px 70px;
    opacity: 0.45;
    z-index: 0;
}

.background-scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.zodiac-sign {
    position: absolute;
    width: 118px;
    height: 118px;
    border: 1px solid rgba(255, 224, 140, 0.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 231, 166, 0.78);
    opacity: 0.84;
    text-shadow:
        0 0 18px rgba(255, 222, 137, 0.78),
        0 0 38px rgba(165, 94, 234, 0.35);
    box-shadow:
        inset 0 0 25px rgba(255, 224, 140, 0.08),
        0 0 34px rgba(255, 224, 140, 0.08);
    animation: zodiacFloat 8s ease-in-out infinite alternate;
}

.zodiac-sign::before,
.zodiac-sign::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.zodiac-sign::before {
    inset: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 50%;
}

.zodiac-sign::after {
    width: 6px;
    height: 6px;
    top: 15px;
    right: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        -54px 20px 0 rgba(255, 255, 255, 0.45),
        -18px 72px 0 rgba(255, 255, 255, 0.6);
}

.sign-aries {
    top: 6%;
    left: 5%;
}

.sign-taurus {
    top: 5%;
    left: 29%;
    animation-delay: -0.5s;
}

.sign-gemini {
    top: 5%;
    right: 29%;
    animation-delay: -1s;
}

.sign-cancer {
    top: 6%;
    right: 5%;
    animation-delay: -1.6s;
}

.sign-leo {
    top: 39%;
    left: 1%;
    animation-delay: -2.5s;
}

.sign-virgo {
    top: 39%;
    right: 1%;
    animation-delay: -3s;
}

.sign-libra {
    bottom: 6%;
    left: 5%;
    animation-delay: -3.5s;
}

.sign-scorpio {
    bottom: 5%;
    left: 29%;
    animation-delay: -4.5s;
}

.sign-sagittarius {
    bottom: 5%;
    right: 29%;
    animation-delay: -5s;
}

.sign-capricorn {
    bottom: 6%;
    right: 5%;
    animation-delay: -5.5s;
}

.sign-aquarius {
    top: 66%;
    left: 1%;
    animation-delay: -6s;
}

.sign-pisces {
    top: 66%;
    right: 1%;
    animation-delay: -6.5s;
}

.lottery-bg-ball {
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #17211f;
    font-size: 30px;
    font-weight: 800;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.98) 0 9%, transparent 10%),
        radial-gradient(circle at 42% 44%, #ffffff 0 23%, transparent 24%),
        radial-gradient(circle at 28% 22%, #ffffff 0 5%, rgba(255, 255, 255, 0.45) 6% 12%, transparent 13%),
        radial-gradient(circle at 72% 78%, rgba(0, 0, 0, 0.36), transparent 36%),
        var(--ball-color);
    box-shadow:
        inset -16px -18px 24px rgba(0, 0, 0, 0.34),
        inset 10px 10px 18px rgba(255, 255, 255, 0.38),
        0 22px 30px rgba(0, 0, 0, 0.34),
        0 0 28px var(--ball-glow);
    transform-style: preserve-3d;
    animation: ballDrift 6s ease-in-out infinite alternate;
}

.lottery-bg-ball::before {
    content: "";
    position: absolute;
    inset: 27px;
    z-index: -1;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset -5px -5px 8px rgba(0, 0, 0, 0.16);
}

.ball-one {
    --ball-color: radial-gradient(circle at 32% 24%, #ff8a94, #ff4757 58%, #a51424 100%);
    --ball-glow: rgba(255, 71, 87, 0.34);
    top: 25%;
    left: 19%;
}

.ball-two {
    --ball-color: radial-gradient(circle at 32% 24%, #8fd0ff, #1e90ff 58%, #0b3d91 100%);
    --ball-glow: rgba(30, 144, 255, 0.34);
    top: 67%;
    left: 25%;
    animation-delay: -1.4s;
}

.ball-three {
    --ball-color: radial-gradient(circle at 32% 24%, #ffe18a, #ffa502 58%, #9c5f00 100%);
    --ball-glow: rgba(255, 165, 2, 0.38);
    top: 24%;
    right: 24%;
    animation-delay: -2.2s;
}

.ball-four {
    --ball-color: radial-gradient(circle at 32% 24%, #9cfabc, #2ed573 58%, #0a7d3c 100%);
    --ball-glow: rgba(46, 213, 115, 0.34);
    bottom: 17%;
    right: 27%;
    animation-delay: -3s;
}

.ball-five {
    --ball-color: radial-gradient(circle at 32% 24%, #dfb7ff, #a55eea 58%, #55208c 100%);
    --ball-glow: rgba(165, 94, 234, 0.36);
    top: 49%;
    right: 13%;
    animation-delay: -4s;
}

.ball-six {
    --ball-color: radial-gradient(circle at 32% 24%, #ffffff, #f1f2f6 55%, #8b98a7 100%);
    --ball-glow: rgba(255, 255, 255, 0.28);
    top: 7%;
    left: 37%;
    width: 74px;
    height: 74px;
    font-size: 24px;
    animation-delay: -0.7s;
}

.ball-seven {
    --ball-color: radial-gradient(circle at 32% 24%, #ffcfdf, #ff5fa2 58%, #8d174f 100%);
    --ball-glow: rgba(255, 95, 162, 0.34);
    bottom: 7%;
    left: 43%;
    width: 76px;
    height: 76px;
    font-size: 24px;
    animation-delay: -2.8s;
}

.ball-eight {
    --ball-color: radial-gradient(circle at 32% 24%, #b8fff4, #00cec9 58%, #006b68 100%);
    --ball-glow: rgba(0, 206, 201, 0.34);
    top: 74%;
    right: 8%;
    width: 84px;
    height: 84px;
    font-size: 27px;
    animation-delay: -5s;
}

.ball-nine {
    --ball-color: radial-gradient(circle at 32% 24%, #f5e6ff, #d980fa 58%, #6f1e86 100%);
    --ball-glow: rgba(217, 128, 250, 0.34);
    top: 49%;
    left: 12%;
    width: 70px;
    height: 70px;
    font-size: 23px;
    animation-delay: -6s;
}

.container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

h1 {
    color: #00a264;
    margin-bottom: 25px;
}

input,
select {
    padding: 14px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
    background: #ffffff;
}

input {
    width: 100%;
    margin-top: 10px;
}

.dob-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.dob-row select {
    flex: 1;
}

button {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    border: none;
    border-radius: 10px;
    background: #00a264;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.numerology-button {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 12px;
    border-radius: 10px;
    background: #00a264;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    box-sizing: border-box;
    transition: 0.3s;
}

button:hover,
.numerology-button:hover {
    transform: scale(1.03);
}

.error {
    color: #cc0000;
    margin-top: 20px;
    font-weight: bold;
}

.balls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.ball {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    position: relative;
    animation: bounce 1.5s infinite alternate;
    box-shadow:
        inset -8px -8px 15px rgba(0, 0, 0, 0.25),
        inset 8px 8px 15px rgba(255, 255, 255, 0.25),
        0 10px 20px rgba(0, 0, 0, 0.35);
    transform-style: preserve-3d;
}

.ball::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 18px;
    width: 35%;
    height: 20%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transform: rotate(-20deg);
    filter: blur(2px);
}

.ball::after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 60%;
    height: 15%;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    filter: blur(4px);
}

.ball:nth-child(1) {
    background: radial-gradient(circle at top left, #ff7b89, #ff4757);
}

.ball:nth-child(2) {
    background: radial-gradient(circle at top left, #70b7ff, #1e90ff);
}

.ball:nth-child(3) {
    background: radial-gradient(circle at top left, #ffd36e, #ffa502);
}

.ball:nth-child(4) {
    background: radial-gradient(circle at top left, #7bed9f, #2ed573);
}

.ball:nth-child(5) {
    background: radial-gradient(circle at top left, #d6a2ff, #a55eea);
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.try-again,
.home-action {
    display: inline-block;
    padding: 14px 25px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    min-width: 110px;
    box-sizing: border-box;
    transition: 0.3s;
}

.try-again {
    background: #00a264;
}

.home-action {
    background: #171a43;
}

.try-again:hover,
.home-action:hover {
    transform: translateY(-2px);
}

@keyframes bounce {
    from {
        transform: translateY(0) rotateX(0deg);
    }

    to {
        transform: translateY(-12px) rotateX(12deg);
    }
}

@keyframes zodiacFloat {
    from {
        transform: translateY(0) rotate(-8deg) scale(1);
        opacity: 0.64;
    }

    to {
        transform: translateY(-18px) rotate(8deg) scale(1.06);
        opacity: 0.9;
    }
}

@keyframes ballDrift {
    from {
        transform: translate3d(0, 0, 0) rotate(-8deg);
    }

    to {
        transform: translate3d(10px, -22px, 0) rotate(11deg);
    }
}

@media (max-width: 600px) {
    .container {
        padding: 25px;
    }

    .dob-row {
        flex-direction: column;
    }

    .ball {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .zodiac-sign {
        width: 82px;
        height: 82px;
        font-size: 44px;
    }

    .lottery-bg-ball {
        width: 66px;
        height: 66px;
        font-size: 21px;
    }

    .lottery-bg-ball::before {
        inset: 19px;
    }

    .sign-scorpio,
    .sign-pisces,
    .sign-taurus,
    .sign-cancer,
    .sign-sagittarius,
    .sign-capricorn,
    .sign-aquarius {
        display: none;
    }

    .ball-one {
        left: 4%;
    }

    .ball-three {
        right: 5%;
    }

    .ball-five {
        right: 2%;
    }

    .ball-six {
        top: 5%;
        left: 42%;
    }

    .ball-seven {
        left: 5%;
    }

    .ball-eight {
        display: none;
    }

    .ball-nine {
        left: 2%;
    }

    .result-actions {
        flex-direction: column;
    }
}