/* Hero chalk plays (2026-09-28): an X's-and-O's play behind each hero title that ends on the title's
   period. Markup: ~/bin/lib/fct-hero-plays.cjs (sport homes, front door) and index.html (NFL, pasted
   from the same module). Every size is in em of the title, so the drawing tracks the title. */

.fct-has-play {
    --fct-chalk: #1d4ed8;
    --fct-x: #64748b;
    --fct-surf: rgba(15, 23, 42, 0.11);
    --fct-surf-fill: rgba(37, 99, 235, 0.08);
    --fct-label: #1d4ed8;
    --fct-muted: #475569;
    --fct-card: #ffffff;
    --fct-ball-a: #2563eb;
    --fct-ball-b: #4338ca;
    --fct-paper: var(--ffn-ed-bg, #f1f5fb);
    --fct-t: min(19cqi, 8rem);
}

html[data-theme="dark"] .fct-has-play {
    --fct-chalk: #7dd3fc;
    --fct-x: #94a3b8;
    --fct-surf: rgba(238, 243, 251, 0.12);
    --fct-surf-fill: rgba(125, 211, 252, 0.08);
    --fct-label: #93c5fd;
    --fct-muted: #93a7c9;
    --fct-card: #0b1a33;
    --fct-ball-a: #60a5fa;
    --fct-ball-b: #818cf8;
}

/* Title: room above for the play (1.6em = 96px at a 60px title), a stacking context so the drawing sits
   behind the letters, and the desktop size of the approved mockup (78px in a 499px column). */
.ffn-pilot-home .ffn-pilot-hero .ffn-pilot-title.fct-hero-play {
    position: relative;
    isolation: isolate;
    margin-top: 1.6em;
    font-size: var(--fct-t);
}

.ffn-pilot-home .ffn-pilot-hero .ffn-pilot-title.fct-hero-play.fct-title-long {
    margin-top: 1.7778em;
    font-size: min(15cqi, 6.4rem);
}

.ffn-pilot-home .ffn-pilot-hero .ffn-pilot-title.fct-hero-play.fct-front-split {
    margin-top: 1.6667em;
}

/* Room between the hero and the next section (owner 2026-09-28); desktop fills the first screen below. */
.ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) {
    margin-bottom: 5rem;
}

@media (min-width: 1261px) {
    /* Capped so wide screens keep the play, title, lead and buttons on the first screen. */
    .fct-has-play {
        --fct-t: min(15.6cqi, 5.5rem);
    }

    .ffn-pilot-home .ffn-pilot-hero .ffn-pilot-title.fct-hero-play.fct-title-long {
        font-size: min(14cqi, 5rem);
    }

    /* Each column keeps its own height (no stretch): the buttons follow the lead, the play band starts just
       under the header, and the board sits centred against the hero column (owner 2026-09-28). */
    /* The hero fills the first screen (header ends 166 px down without the rename banner), so the next
       section starts below the fold; its content sits centred in that space. */
    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) {
        align-items: center;
        align-content: start;
        min-height: calc(100vh - 166px);
        min-height: calc(100svh - 166px);
        margin-bottom: 4rem;
    }

    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-home-board-side {
        padding-top: 0;
    }

    .ffn-pilot-home .ffn-pilot-hero-main.fct-has-play {
        justify-content: flex-start;
        padding-top: 0.5rem;
    }

    /* The four sport boards and the front door's share the NFL board's height (the front's too since 2026-09-29);
       a longer tab scrolls inside the card. */
    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-shell {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 36rem;
    }

    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-head {
        flex: none;
    }

    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-panel:not([hidden]) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    /* Nothing in a tab shrinks (a long tab scrolls instead); a short tab's rows share the spare height, so the table
       meets the footer instead of leaving a gap (2026-09-29). */
    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-panel:not([hidden]) > * {
        flex-shrink: 0;
    }

    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-panel:not([hidden]) > .ffn-board-table {
        flex-grow: 1;
    }

    /* The footer link stays on the card's bottom edge: after a short tab, and pinned over a long one while it
       scrolls. It covers the panel's bottom padding (negative margin); Chrome pins sticky boxes to the scroller's
       content box, hence the negative bottom. */
    .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-panel:not([hidden]) > .ffn-board-foot {
        position: sticky;
        z-index: 2;
        bottom: -1.1rem;
        margin-top: auto;
        margin-bottom: -1.1rem;
        padding: 0.95rem 0 1.1rem;
        background: var(--ffn-ed-surface);
    }

    /* A fade over the rows above the pinned footer while there is more to scroll (no scroll, no fade). */
    @supports (animation-timeline: scroll()) {
        .ffn-pilot-home .ffn-pilot-hero:has(> .fct-has-play) .ffn-board-panel:not([hidden]) > .ffn-board-foot::before {
            content: "";
            position: absolute;
            right: 0;
            bottom: 100%;
            left: 0;
            height: 3rem;
            background: linear-gradient(to bottom, transparent, var(--ffn-ed-surface));
            opacity: 0;
            pointer-events: none;
            animation: fct-more-below linear both;
            animation-timeline: scroll(nearest block);
        }
    }
}

@keyframes fct-more-below { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Hero boards (owner 2026-09-29): team colors, league rows ----------
   NBA/NHL/MLB and front-door rows carry --ffn-row-team-color and --ffn-row-team-contrast inline from each league's
   teams.v1.json (~/bin/lib/fct-sports-pages.cjs); NFL rows get them from [data-team] (brand-tokens.css). The row's
   edge (.ffn-board-ranks td:first-child) and name ink (--ffn-team-ink, editorial-pilot.css) follow from there. */

/* Team chips in the team's color, the NFL badge's size and type. */
.ffn-board .fct-team[style] strong {
    min-width: 2.6rem;
    padding: 0.18rem 0.45rem;
    border-radius: 0.35rem;
    background: var(--ffn-row-team-color);
    color: var(--ffn-row-team-contrast, #fff);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ffn-board .fct-team[style]:is(:hover, :focus-visible) strong {
    background: var(--ffn-row-team-color);
    color: var(--ffn-row-team-contrast, #fff);
    box-shadow: 0 0 0 2px var(--ffn-ed-surface), 0 0 0 3.5px var(--ffn-row-team-color);
}

html[data-theme="dark"] .ffn-board .fct-team[style] strong {
    box-shadow: inset 0 0 0 1px rgba(243, 247, 255, 0.16);
}

/* Matchups: each code in its team's ink, the "@" / "vs" between them quiet. */
.ffn-board .ffn-bk-player b:has(.fct-ink) {
    color: var(--ffn-ed-text-soft);
}

.ffn-board .fct-ink {
    color: var(--ffn-team-ink, var(--ffn-ed-text));
}

/* Dark mode: lift navy and black team colors so the row edge still shows (the desk rows' rule). */
@supports (color: oklch(from red l c h)) {
    html[data-theme="dark"] .ffn-board-ranks :is(.has-team-tint, [data-team]) > td:first-child {
        box-shadow: inset 3px 0 0 oklch(from var(--ffn-row-team-color, #6b7280) max(l, 0.62) min(c, 0.2) h);
    }
}

/* NFL Byes: the week's teams as chips under the week. */
.ffn-bk-teams {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

/* Front door, All tab: a row per league, its top pages as pills, its chalk ball as the chip. */
.ffn-board .fct-lg-name {
    color: inherit;
    text-decoration: none;
}

.ffn-board .fct-lg-name span {
    margin-left: 0.3rem;
    color: var(--ffn-ed-text-soft);
    font-size: 0.8rem;
    font-weight: 600;
}

.ffn-board .fct-lg-name:hover {
    color: var(--ffn-ed-accent);
}

/* Rows with pills sit a little tighter so all four leagues fit the card. */
.ffn-board-ranks .ffn-board-row:has(.ffn-bk-links) > td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ffn-bk-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.ffn-bk-links a {
    padding: 0.06rem 0.5rem;
    border: 1px solid var(--ffn-ed-border-strong);
    border-radius: 999px;
    color: var(--ffn-ed-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ffn-bk-links a:is(:hover, :focus-visible) {
    border-color: var(--ffn-ed-accent);
    color: var(--ffn-ed-accent);
}

.ffn-board .fct-lg-home {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--ffn-ed-accent-soft);
    transition: transform 0.2s ease;
}

.ffn-board .fct-lg-home:is(:hover, :focus-visible) {
    transform: rotate(-12deg) scale(1.08);
}

.fct-lg-ball {
    width: 1.9rem;
    height: 1.9rem;
    overflow: visible;
}

.fct-lg-ball .ic { fill: var(--ffn-ed-surface); stroke: var(--ffn-ed-accent); stroke-width: 3.4; stroke-linejoin: round; }
.fct-lg-ball .icl { fill: none; stroke: var(--ffn-ed-accent); stroke-width: 2.8; stroke-linecap: round; }
.fct-lg-ball .pk { fill: var(--ffn-ed-accent); fill-opacity: 0.22; stroke: var(--ffn-ed-accent); stroke-width: 3.4; stroke-linejoin: round; }

/* Phones: narrower number and value columns so names get the room, the NFL badge's phone size, a long sub line (a week
   of games, goalie pairs) held to two lines, and no league pills (the Pick your sport cards below carry them). */
@media (max-width: 640px) {
    .ffn-board-ranks .ffn-bk-rank {
        width: 1.5rem;
        padding-right: 0.2rem;
        font-size: 0.92rem;
    }

    .ffn-board-ranks .ffn-bk-pts {
        width: 3.6rem;
    }

    .ffn-board .ffn-bk-links {
        display: none;
    }

    .ffn-board .fct-team[style] strong {
        min-width: 2.3rem;
        padding: 0.16rem 0.3rem;
        font-size: 0.6rem;
    }

    .ffn-board .ffn-board-ranks .ffn-bk-sub {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .ffn-board .fct-lg-home {
        width: 2.2rem;
        height: 2.2rem;
    }

    .fct-lg-ball {
        width: 1.6rem;
        height: 1.6rem;
    }
}

.ffn-pilot-title.fct-hero-play .fct-last > .is-dim {
    display: inline;
}

.ffn-pilot-title.fct-hero-play .fct-last > .fct-ball {
    position: relative;
    display: inline-block;
    width: 0.2em;
    height: 0.2em;
    margin-left: 0.06em;
    vertical-align: baseline;
}

.ffn-pilot-title.fct-hero-play .fct-ball > span {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
}

.ffn-pilot-title.fct-hero-play .fct-dot {
    background: linear-gradient(135deg, var(--fct-ball-a), var(--fct-ball-b));
    animation: fct-ballpop 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}

.ffn-pilot-title.fct-hero-play .fct-ball > .fct-ring {
    inset: -3px;
    border: 2px solid var(--fct-chalk);
    opacity: 0;
    animation: fct-ripple 1s ease-out both;
}

.fct-play,
.fct-slot,
.fct-fx {
    position: absolute;
    z-index: -1;
    overflow: visible;
    pointer-events: none;
    text-transform: none;
    letter-spacing: normal;
    -webkit-text-fill-color: initial;
}

.fct-play .s { fill: none; stroke: var(--fct-surf); stroke-width: 1.6; animation: fct-fade 0.7s ease both; }
.fct-play .sf { fill: var(--fct-surf-fill); stroke: none; animation: fct-fade 0.7s ease both; }
.fct-play .o, .fct-fx .o { fill: var(--fct-paper); stroke: var(--fct-chalk); stroke-width: 2.4; }
.fct-play .x, .fct-fx .x { fill: none; stroke: var(--fct-x); stroke-width: 2.6; stroke-linecap: round; }
.fct-play .n { font: 700 10px 'JetBrains Mono', monospace; fill: var(--fct-chalk); stroke: none; text-anchor: middle; dominant-baseline: central; }
.fct-play .p, .fct-fx .p { transform-box: fill-box; transform-origin: center; animation: fct-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.fct-play .r, .fct-fx .r { fill: none; stroke: var(--fct-chalk); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; animation: fct-draw 0.6s ease-in-out both; }
.fct-play .pa, .fct-fx .pa { fill: none; stroke: var(--fct-chalk); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1.5 6.5; }
.fct-play .rv, .fct-fx .rv { fill: none; stroke: #ffffff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1 2; animation: fct-draw 0.6s ease-in-out both; }
.fct-play .h, .fct-fx .h { fill: none; stroke: var(--fct-chalk); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: fct-fade 0.15s linear both; }
.fct-play .hs { fill: var(--fct-chalk); animation: fct-fade 0.15s linear both; }
.fct-play .si { fill: none; stroke: var(--fct-paper); stroke-width: 3; stroke-dasharray: 1 2; animation: fct-draw 0.35s ease-in both; }
.fct-play .rim { fill: none; stroke: var(--fct-chalk); stroke-width: 2.6; stroke-linecap: round; }
.fct-play .netl { fill: none; stroke: var(--fct-chalk); stroke-width: 1.5; stroke-linecap: round; }
.fct-play .swish { transform-box: fill-box; transform-origin: 50% 0; animation: fct-swish 0.55s ease-out both; }
.fct-play .bulge { transform-box: fill-box; transform-origin: 0 50%; animation: fct-bulge 0.5s ease-out both; }
.fct-play .l { font: 700 23px Caveat, cursive; fill: var(--fct-label); animation: fct-fade 0.5s ease both; }
.fct-play .ls { font: 700 19px Caveat, cursive; fill: var(--fct-label); animation: fct-fade 0.4s ease both; }
.fct-play .t, .fct-fx .t { font: 700 9px 'JetBrains Mono', monospace; letter-spacing: 0.14em; fill: var(--fct-muted); text-anchor: end; animation: fct-fade 0.5s ease both; }
.fct-play .ga { stop-color: var(--fct-ball-a); }
.fct-play .gb { stop-color: var(--fct-ball-b); }
.fct-play .run { fill: var(--fct-paper); stroke: var(--fct-chalk); stroke-width: 2.5; }

/* Front door: the title splits, four balls spin in the gap, it closes, the route points at the tagline. */
.fct-front-split .fct-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
}

.fct-front-split .fct-slot { left: 0; top: 0.6333em; width: 5.7em; height: 1.2em; z-index: 1; }
.fct-front-split .fct-fx { left: 0; top: 0; width: 5.7em; height: 4.1667em; }
.fct-slot .ic { fill: var(--fct-card); stroke: var(--fct-chalk); stroke-width: 2.6; stroke-linejoin: round; }
.fct-slot .icl { fill: none; stroke: var(--fct-chalk); stroke-width: 2.2; stroke-linecap: round; }
.fct-slot .pk { fill: var(--fct-chalk); fill-opacity: 0.22; stroke: var(--fct-chalk); stroke-width: 2.6; stroke-linejoin: round; }
.fct-slot .sp { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fct-spin 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
.fct-slot .sl { font: 700 32px Caveat, cursive; fill: var(--fct-label); opacity: 0; animation: fct-labcycle 0.7s ease both; }
.fct-front-split .fct-up { animation: fct-lift 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1s both; }
.fct-front-split .fct-down { animation: fct-drop 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1s both; }

.fct-tagline {
    margin: calc(var(--fct-t) * 0.2) 0 0;
    font: 700 calc(var(--fct-t) * 0.5) / 1.05 Caveat, cursive;
    color: var(--fct-label);
}

.fct-tagline span {
    display: block;
    width: fit-content;
    animation: fct-write 0.55s ease-out both;
}

@keyframes fct-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fct-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes fct-pop { 0% { opacity: 0; transform: scale(0.3); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fct-ballpop { 0% { transform: scale(1); } 35% { transform: scale(2); } 100% { transform: scale(1); } }
@keyframes fct-ripple { 0% { opacity: 0; transform: scale(1); } 1% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }
@keyframes fct-swish { 0% { transform: scaleY(1); } 35% { transform: scaleY(1.4); } 70% { transform: scaleY(0.9); } 100% { transform: scaleY(1); } }
@keyframes fct-bulge { 0% { transform: scaleX(1); } 40% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } }
@keyframes fct-lift { 0% { transform: translateY(0); } 14% { transform: translateY(-0.3em); } 86% { transform: translateY(-0.3em); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); } 100% { transform: translateY(0); } }
@keyframes fct-drop { 0% { transform: translateY(0); } 14% { transform: translateY(0.9667em); } 86% { transform: translateY(0.9667em); animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); } 100% { transform: translateY(0); } }
@keyframes fct-spin { 0% { opacity: 0; transform: rotate(-160deg) scale(0.3); } 28% { opacity: 1; transform: rotate(0deg) scale(1); } 78% { opacity: 1; transform: rotate(25deg) scale(1); } 100% { opacity: 0; transform: rotate(170deg) scale(0.3); } }
@keyframes fct-labcycle { 0% { opacity: 0; transform: translateY(10px); } 28% { opacity: 1; transform: translateY(0); } 78% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes fct-write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }

/* Reduced motion: the finished drawing, no moving ball, the title stays closed. */
@media (prefers-reduced-motion: reduce) {
    .fct-hero-play *,
    .fct-tagline * {
        animation: none !important;
    }

    .fct-play .gh,
    .fct-play .run {
        display: none;
    }
}