:root {
    --giants-orange: #FD5A1E;
    --warriors-blue: #1D428A;
}

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);
}

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

.events li {
    margin: 0.4em 0;
}

p {
    margin: 0.5em 0;
}

/* Halo: a circular padding zone behind the content filled with a soft
 * radial-gradient glow. Stops use `closest-side` so percentages are measured
 * against the element's half-width (not its diagonal), which makes ring
 * placement intuitive: the 8-ball image covers ~64% of that radius, so visible
 * halo lives in the 60–100% range.
 *
 * The `.halo-*` rules below are deliberately element-agnostic — the 8-ball's
 * `.ball-frame` and the calendar's `.cal-day` both wear them, which is what
 * keeps a day the same color on both pages.
 */
.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);
    }
}

.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%
    );
}

.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%
    );
}

/* Two-halo days: inner ring just outside the image, outer ring at the rim. */
.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%
        );
}

/* Dashed rings — the second channel. The glow above says "a home game";
 * these say "something else has the building". Same hue, so the venue still
 * reads at a glance, but unmistakably a different mark.
 *
 * Built from two gradients rather than a `dashed` border, which gave no
 * control over dash frequency and stamped out a hard-edged stroke that
 * fought with the soft glows. A repeating conic gradient lays down the
 * dashes — the angular ramps in each period soften their ends, so they read
 * as drawn rather than punched — and a radial mask fades the ring in and
 * out along its radius, giving it the same bloom the glows have. Because
 * the period is angular, the rhythm stays proportional at any size.
 *
 * Both rings share one band and interleave within it. Each draws its dashes
 * across the first half of every period and leaves the second half empty;
 * Chase starts half a period later, so its dashes land exactly in Oracle's
 * gaps. One venue busy reads as a dashed ring, both reads as a complete
 * ring alternating orange and blue — the density itself says "both
 * buildings". The duty cycle is what makes this work, so it must stay at or
 * under 50%: push it past and the two rings start painting over each other.
 *
 * `currentColor` and a shared `--dashes` token stream keep one definition
 * for both; each ring declares only its hue and its phase. The phase is
 * derived from `--dash-period`, so overriding the period re-derives the
 * offset and the two can't drift out of interleave.
 *
 * The band sits at 90% of the radius, well outside the 64% where the ball
 * image ends — these pseudo-elements paint above it, so dashes any further
 * in would cross the ball's face. Sharing a radius does mean the venue now
 * reads by hue alone rather than also by position.
 */
.ring-oracle::before,
.ring-chase::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    --dash-period: 36deg; /* 10 dashes per ring, 20 interleaved */
    --dashes:
        transparent 0deg,
        currentColor calc(var(--dash-period) * 0.11),
        currentColor calc(var(--dash-period) * 0.39),
        transparent calc(var(--dash-period) * 0.5),
        transparent var(--dash-period);
    -webkit-mask: radial-gradient(circle closest-side, transparent 78%, #000 90%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 78%, #000 90%, transparent 100%);
}

.ring-oracle::before {
    color: rgba(253, 90, 30, 0.85);
    background: repeating-conic-gradient(from 0deg, var(--dashes));
}

.ring-chase::after {
    color: rgba(29, 66, 138, 0.85);
    /* Half a period out of phase — lands in Oracle's gaps. */
    background: repeating-conic-gradient(from calc(var(--dash-period) / 2), var(--dashes));
}

/* The ball's circumference is ~7x a calendar cell's, so the same angular
 * period would stretch each dash into a long arc. Shorten the period to
 * keep the rhythm looking like the same pen. */
.ball-frame.ring-oracle::before,
.ball-frame.ring-chase::after {
    --dash-period: 18deg;
}

/* Links that shouldn't announce themselves as links — the 8-ball's date and
 * the calendar's title. They're discoverable by hovering; dressing them in
 * blue underline would wreck the hand-drawn look.
 */
a.plain,
a.plain:hover,
a.plain:visited,
a.plain:active {
    color: inherit;
    text-decoration: none;
}

/* Calendar ------------------------------------------------------------- */

/* The nav shares the day grid's exact column geometry so the chevrons sit
 * dead above the Sun and Sat columns. That's the whole point: their position
 * can't depend on how wide the month name is, or the pointer would have to
 * chase them from "May" to "September" while paging through the year.
 */
.cal-nav {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    align-items: center;
    margin: 0.4em 0 0.6em;
}

.cal-title {
    grid-column: 2 / 7;
    text-align: center;
    font-size: 34px;
}

.chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    /* Same hit-circle as a day's `.cal-num`, clamped so it can never spill
     * its column on a narrow screen. */
    aspect-ratio: 1;
    width: min(1.7em, 100%);
    font-size: 44px;
    line-height: 1;
    text-decoration: none;
    color: #000;
    border-radius: 50%;
}

.chev.prev {
    grid-column: 1;
}

.chev.next {
    grid-column: 7;
}

.chev:visited,
.chev:active {
    color: #000;
}

.chev:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* End of the browsable range: the arrow stays put so the header doesn't
 * reflow, but reads as unavailable and doesn't respond to the cursor. */
.chev.disabled {
    opacity: 0.2;
    cursor: default;
}

.chev.disabled:hover {
    background: none;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-weekday {
    font-size: 14px;
    color: #888;
    padding-bottom: 0.2em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Each day is its own circular halo canvas — same gradient machinery as the
 * 8-ball, just scaled down. `aspect-ratio` keeps the cells square so
 * `closest-side` measures a true radius and the rings stay circular.
 */
.cal-day {
    position: relative; /* anchors the dashed-ring pseudo-elements */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 50%;
    text-decoration: none;
    color: #000;
    font-size: 22px;
}

.cal-day:visited,
.cal-day:active {
    color: #000;
}

.cal-day:hover .cal-num {
    background: rgba(0, 0, 0, 0.08);
}

.cal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
}

/* Adjacent-month spill: dimmed, but still live links — unless the day falls
 * outside the browsable range, in which case the cell is a <span> (see the
 * calendar template) and must not pretend to be clickable. */
.cal-day.outside {
    opacity: 0.32;
}

span.cal-day {
    cursor: default;
}

span.cal-day:hover .cal-num {
    background: none;
}

.cal-day.is-today .cal-num {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cal-legend {
    font-size: 13px;
    color: #666;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin-top: 1.4em;
    line-height: 2;
}

.cal-legend .dot {
    font-size: 15px;
}

/* Miniatures of the two ring textures, so the legend shows the mark rather
 * than only naming it. */
.cal-legend .swatch {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    vertical-align: -3px;
    margin-right: 1px;
}

.cal-legend .swatch.solid {
    background: radial-gradient(
        circle closest-side,
        rgba(120, 120, 120, 0) 20%,
        rgba(120, 120, 120, 0.75) 65%,
        rgba(120, 120, 120, 0) 100%
    );
}

.cal-legend .swatch.dashed {
    border: 2px dashed #888;
}

.legend-sep {
    margin: 0 0.5em;
    color: #ccc;
}

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

footer a,
footer a:hover,
footer a:visited,
footer a:active {
    color: inherit;
    text-decoration: none;
}

@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;
    }
    .cal-title {
        font-size: 26px;
    }
    .chev {
        font-size: 30px;
    }
    .cal-day {
        font-size: 17px;
    }
    .cal-weekday {
        font-size: 11px;
    }
}

/* Navigation affordances (optional) ---------------------------------------
 *
 * The base look leaves links undressed on purpose (see `a.plain`), which is
 * right for a page somebody visits daily and wrong for one they've never
 * seen: a first-time reader has to be able to tell the page responds at all.
 * Adding `nav-hints nav-<style>` to <body> (see `_nav_hint_class`) dresses
 * every `.nav-link` in that style, so which links are navigation is a
 * template decision and how they look is entirely this file's.
 *
 * The rule is dotted rather than solid to sit nearer the marker-pen hand
 * than a browser-default underline would. Compare against the undressed
 * original with `?nav=off`, and see `NAV_HINT_STYLES` for adding a style.
 */

body.nav-hints a.nav-link,
body.nav-hints a.nav-link:visited {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    text-underline-offset: 0.18em;
}

body.nav-hints a.nav-link:hover {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

/* The glyph trails the text rather than leading it, which leaves the about
 * page's `\2190 back to today's verdict` reading as the opposite motion it
 * is. It lives in CSS, not the templates, so the default look stays free of
 * it and the whole affordance is one setting away.
 */
body.nav-hints a.nav-link::after {
    /* Not part of the link text, so it mustn't wear the link's rule. */
    display: inline-block;
    text-decoration: none;
    margin-left: 0.28em;
    opacity: 0.55;
    transition: opacity 130ms ease-out, transform 130ms ease-out;
}

body.nav-hints a.nav-link:hover::after {
    opacity: 1;
    transform: translateX(0.12em);
}

/* chevron — the calendar's own paging glyph. Permanent Marker has no
 * `\2192`, so an arrow drops to a fallback font and lands beside the
 * marker text as an obviously foreign thin line; `\203A` is in the face,
 * so it arrives at the right weight in the same hand. Reusing the pager's
 * glyph is consistency rather than confusion — the site already uses it to
 * mean "go somewhere". */
body.nav-chevron a.nav-link::after {
    content: "\203A";
}

@media (prefers-reduced-motion: reduce) {
    body.nav-hints a.nav-link::after {
        transition: none;
    }

    body.nav-hints a.nav-link:hover::after {
        transform: none;
    }
}