/* Fly Pong, embedded in the blog post. Everything is scoped under #fly-pong so the
   site's global styles (button, margins) don't leak in, and nothing leaks out. */
#fly-pong {
    --fp-ink: #181818;
    --fp-ink2: #666666;
    --fp-line: #d4d4d4;
    --fp-court: #f7f7f7;
    --fp-accent: #fc9803;   /* the site's orange */
    --fp-fly: #2a78d6;
    --fp-you: #fc9803;
    --fp-cpu: #9a9a9a;
    --fp-scope: #181818;
    --fp-shadow: 1px 5px 5px 1px rgba(0, 0, 0, 0.2);

    /* Wide screens: court on the left, live brain and stats on the right. The court is
       capped by the window height so the whole game fits on screen at once. */
    --fp-court-size: min(58%, max(300px, calc(100vh - 250px)));
    margin: 1em 0;
    display: grid;
    grid-template-columns: minmax(0, var(--fp-court-size)) minmax(0, 1fr);
    grid-template-areas:
        "modes modes"
        "board ."
        "court info";
    gap: 10px 24px;
    align-items: start;
    color: var(--fp-ink);
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
#fly-pong .fp-modes { grid-area: modes; margin-bottom: 4px; }
/* the scoreboard gets its own row, so the brain panel's top lines up with the court's */
#fly-pong .fp-play { display: contents; }
#fly-pong .fp-board { grid-area: board; }
#fly-pong .fp-court { grid-area: court; }
#fly-pong .fp-info { grid-area: info; display: flex; flex-direction: column; gap: 14px; }

/* Narrow screens (the site's own 850px breakpoint): one column, brain above the court */
@media screen and (max-width: 850px) {
    #fly-pong {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 520px;
        margin: 1em auto;
    }
    #fly-pong .fp-play,
    #fly-pong .fp-info { display: contents; }
    /* let the canvases shrink to the column instead of to their pixel size */
    #fly-pong .fp-scope,
    #fly-pong .fp-board,
    #fly-pong .fp-court { min-width: 0; width: 100%; }
    #fly-pong .fp-modes { order: 0; }
    #fly-pong .fp-scope { order: 1; }
    #fly-pong .fp-board { order: 2; }
    #fly-pong .fp-court { order: 3; }
    #fly-pong .fp-stats { order: 4; }
    #fly-pong .fp-help { order: 5; }
}

#fly-pong .fp-modes {
    display: flex;
    justify-content: center;
    gap: 28px;
    border-bottom: 1px solid var(--fp-line);
}
#fly-pong .fp-modes button {
    all: unset;
    cursor: pointer;
    padding: 6px 0 8px;
    color: var(--fp-ink2);
    font: 400 16px 'Roboto', sans-serif;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease-in;
}
#fly-pong .fp-modes button:hover { color: var(--fp-ink); }
#fly-pong .fp-modes button[aria-pressed="true"] {
    color: var(--fp-ink);
    font-weight: 700;
    border-bottom-color: var(--fp-accent);
}
#fly-pong .fp-modes button:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 2px; }

#fly-pong .fp-board { display: flex; justify-content: space-between; align-items: baseline; }
#fly-pong .fp-side { display: flex; align-items: baseline; gap: 10px; }
#fly-pong .fp-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-ink2);
}
#fly-pong .fp-chip {
    display: inline-block;
    width: 14px;
    height: 4px;
    margin-right: 6px;
    vertical-align: middle;
}
#fly-pong .fp-num { font-size: 32px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
#fly-pong .fp-ctl {
    all: unset;
    box-sizing: border-box;
    min-width: 96px;
    padding: 6px 14px;
    border: 2px solid var(--fp-ink);
    font: 500 14px 'Roboto', sans-serif;
    text-align: center;
    color: var(--fp-ink);
    cursor: pointer;
    transition: background-color 0.15s ease-in, color 0.15s ease-in;
}
#fly-pong .fp-ctl:hover:not(:disabled) { background: var(--fp-ink); color: #ffffff; }
#fly-pong .fp-ctl:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 2px; }
#fly-pong .fp-ctl:disabled { opacity: 0.4; cursor: default; }

#fly-pong canvas { display: block; width: 100%; max-width: 100%; min-width: 0; }
#fly-pong .fp-court {
    aspect-ratio: 1 / 1;
    background: var(--fp-court);
    box-shadow: var(--fp-shadow);
    touch-action: none;
    cursor: pointer;
}
#fly-pong .fp-court:focus { outline: none; }
#fly-pong .fp-court:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 3px; }

#fly-pong .fp-scope {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--fp-scope);
    box-shadow: var(--fp-shadow);
}
#fly-pong .fp-brain { aspect-ratio: 2 / 1; }
#fly-pong .fp-scope-text { font-size: 13px; line-height: 1.5; color: #b8b8b8; }
#fly-pong .fp-in { color: #6aa8f0; }
#fly-pong .fp-out { color: #f08a5d; }

#fly-pong .fp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#fly-pong .fp-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#fly-pong .fp-stat .fp-num { font-size: 22px; }
#fly-pong .fp-help { font-size: 15px; line-height: 1.5; color: var(--fp-ink2); }