:root {
    --giants-orange: #FD5A1E;
    --warriors-blue: #1D428A;
    --concert-purple: #7E2F8E;
}

body {
    font-family: 'Permanent Marker', arial, sans-serif;
    font-size: 20px;
    text-align: center;
    width: 80%;
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
    color: #000;
}

h1,
.verdict {
    font-size: 40px;
    margin: 0.5em 0;
}

.verb {
    font-size: 50px;
}

.page-date {
    font-size: 36px;
    margin: 0.5em 0;
}

/* Day-color classes — applied generically (verb, page-date, inline team names). */
.giants {
    color: var(--giants-orange);
}

.warriors {
    color: var(--warriors-blue);
}

.concert {
    color: var(--concert-purple);
}

.events {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.events li {
    margin: 0.4em 0;
}

p {
    margin: 0.5em 0;
}

/* 8-ball halo: a circular padding zone behind the image filled with a soft
 * radial-gradient glow. Stops use `closest-side` so percentages are measured
 * against the wrapper's half-width (not its diagonal), which makes ring
 * placement intuitive: the image covers ~64% of that radius, so visible halo
 * lives in the 60–100% range.
 */
.ball-frame {
    display: inline-block;
    padding: 60px;
    border-radius: 50%;
    line-height: 0;
    position: relative;
}

.ball-frame > img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* A duplicate of the ball image, positioned exactly over the base, clipped
 * to just the answer window. The animation pulses only this overlay, so the
 * shimmer is confined to the window region while the rest of the ball stays
 * static.
 */
.ball-glow {
    position: absolute;
    top: 60px;
    left: 60px;
    pointer-events: none;
    clip-path: circle(23% at 50% 47%);
    animation: ball-glow 3s ease-in-out infinite;
}

@keyframes ball-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) brightness(1) contrast(1);
    }
    33%,
    67% {
        filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.85)) brightness(1.25) contrast(1.15);
    }
}

.ball-frame.halo-giants {
    background: radial-gradient(
        circle closest-side,
        rgba(253, 90, 30, 0) 60%,
        rgba(253, 90, 30, 0.7) 80%,
        rgba(253, 90, 30, 0) 100%
    );
}

.ball-frame.halo-warriors {
    background: radial-gradient(
        circle closest-side,
        rgba(29, 66, 138, 0) 60%,
        rgba(29, 66, 138, 0.7) 80%,
        rgba(29, 66, 138, 0) 100%
    );
}

.ball-frame.halo-concert {
    background: radial-gradient(
        circle closest-side,
        rgba(126, 47, 142, 0) 60%,
        rgba(126, 47, 142, 0.7) 80%,
        rgba(126, 47, 142, 0) 100%
    );
}

/* Two-halo days: inner ring just outside the image, outer ring at the rim. */
.ball-frame.halo-giants.halo-warriors {
    background:
        radial-gradient(
            circle closest-side,
            rgba(253, 90, 30, 0) 60%,
            rgba(253, 90, 30, 0.7) 73%,
            rgba(253, 90, 30, 0) 84%
        ),
        radial-gradient(
            circle closest-side,
            rgba(29, 66, 138, 0) 82%,
            rgba(29, 66, 138, 0.7) 92%,
            rgba(29, 66, 138, 0) 100%
        );
}

.ball-frame.halo-giants.halo-concert {
    background:
        radial-gradient(
            circle closest-side,
            rgba(253, 90, 30, 0) 60%,
            rgba(253, 90, 30, 0.7) 73%,
            rgba(253, 90, 30, 0) 84%
        ),
        radial-gradient(
            circle closest-side,
            rgba(126, 47, 142, 0) 82%,
            rgba(126, 47, 142, 0.7) 92%,
            rgba(126, 47, 142, 0) 100%
        );
}

.ball-frame.halo-warriors.halo-concert {
    background:
        radial-gradient(
            circle closest-side,
            rgba(29, 66, 138, 0) 60%,
            rgba(29, 66, 138, 0.7) 73%,
            rgba(29, 66, 138, 0) 84%
        ),
        radial-gradient(
            circle closest-side,
            rgba(126, 47, 142, 0) 82%,
            rgba(126, 47, 142, 0.7) 92%,
            rgba(126, 47, 142, 0) 100%
        );
}

/* All three: orange innermost, blue middle, purple outermost. */
.ball-frame.halo-giants.halo-warriors.halo-concert {
    background:
        radial-gradient(
            circle closest-side,
            rgba(253, 90, 30, 0) 60%,
            rgba(253, 90, 30, 0.7) 68%,
            rgba(253, 90, 30, 0) 76%
        ),
        radial-gradient(
            circle closest-side,
            rgba(29, 66, 138, 0) 75%,
            rgba(29, 66, 138, 0.7) 84%,
            rgba(29, 66, 138, 0) 92%
        ),
        radial-gradient(
            circle closest-side,
            rgba(126, 47, 142, 0) 91%,
            rgba(126, 47, 142, 0.7) 96%,
            rgba(126, 47, 142, 0) 100%
        );
}

footer {
    margin-top: 3em;
    font-size: 12px;
    color: #888;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}

@media (max-width: 480px) {
    body {
        width: 95%;
        font-size: 18px;
    }
    h1,
    .verdict {
        font-size: 32px;
    }
    .verb {
        font-size: 40px;
    }
    .page-date {
        font-size: 28px;
    }
    .ball-frame {
        padding: 40px;
    }
    .ball-glow {
        top: 40px;
        left: 40px;
    }
}