/* ch.css — cornhole's own HUD, linked after smashkit/ui/kit.css. Uses
 * kit.css's variables (--bg, --panel, --edge, --ink, --muted, --accent,
 * --win, --lose) so the two sheets read as one system. See kit.css's header
 * for what it already provides (canvas fill, top/bottom bars, buttons, the
 * banner, the loading overlay) — nothing here repeats that.
 */

#ch-mode-label {
    color: var(--ink);
    font-weight: 600;
}

#ch-score {
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

#ch-round {
    color: var(--muted);
}

/* ------------------------------------------------------------- reticle --- */


/* ---------------------------------------------------------- arc slider ---
 * PLAN.md: "the most obvious control on screen" — pinned to the right edge,
 * tall, high-contrast, with plain-language labels at each end rather than
 * numbers (nobody needs to know it is 8 to 68 degrees to feel what it does).
 */





/* -------------------------------------------------------------- menu --- */
#ch-menu {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 1.5rem;
    background: rgba(18, 22, 29, .93);
    text-align: center;
}

#ch-menu h1 { margin: 0; font-size: 1.6rem; }
.ch-blurb { margin: 0 0 .5rem; color: var(--muted); max-width: 26rem; }

.ch-mode-buttons { flex-direction: column; width: 100%; max-width: 20rem; }
.ch-mode-buttons button { width: 100%; padding: .7rem; font-size: .95rem; }

#ch-ai-options { color: var(--muted); font-size: .9rem; }
#ch-ai-options select { margin-left: .4rem; font: inherit; }

.ch-toggle-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted);
    font-size: .85rem;
    max-width: 20rem;
}

#ch-start {
    margin-top: .5rem;
    padding: .7rem 2.2rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--accent);
    color: #12161d;
    border-color: #f3c579;
}

/* -------------------------------------------------------------- stats --- */
#ch-stats {
    font-size: .8rem;
    color: var(--muted);
    pointer-events: none;
}

/* ---------------------------------------------------------------- strip ---
 * The whole scoreboard: both scores, the round, and each side's bags as
 * outcome-coloured pips. Sized for a phone, so it is one compact line that
 * never reaches the lower half of the screen where the throw happens.
 */
/* The strip is HIDDEN: the whole scoreboard is on the fence now, in the 3D
   scene, which is legible by construction and costs the HUD nothing on a
   phone. hud.js still fills these elements and they are still in the DOM,
   because a missing element is a boot failure. Delete this one rule to bring
   the HTML scoreboard back. */
#ch-strip { display: none; }

#ch-strip-disabled {
    position: absolute;
    /* Sits just under the button row. With the bag pips now on the fence this
       carries only numbers, so it is short and never reaches the throwing
       half of the screen even on a small phone. */
    top: 2.7rem;
    left: 0;
    right: 0;
    z-index: 14;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .9rem;
    padding: 0 .6rem;
    font-variant-numeric: tabular-nums;
}
/* Each side sits on its own dark pill.
 *
 * The strip used to be bare text over the 3D scene, so its contrast depended
 * entirely on what happened to be behind it: sky, grass, board or fence. Gold
 * on a pale sky is close to unreadable, and the small grey "AI" label after a
 * score was almost invisible. Owner, 2026-09-09: "the yellow score is hard to
 * read against the blue and the AI after its score is almost impossible to
 * see."
 *
 * A backing fixes it for every background at once, which is the only way to
 * be sure: the camera moves, and any colour picked against one backdrop will
 * eventually sit against another.
 */
.ch-side {
    display: flex;
    flex-direction: column;
    gap: .22rem;
    min-width: 5.4rem;
    padding: .28rem .5rem;
    border-radius: 9px;
    background: rgba(10, 14, 20, .72);
    border: 1px solid rgba(255, 255, 255, .10);
}
.ch-side-right { align-items: flex-end; }
.ch-side-top { display: flex; align-items: baseline; gap: .35rem; }
/* Bright enough to read at a glance. It was --muted, which is a body-text
   grey meant for use on a solid panel, not a label over a sunlit lawn. */
.ch-name { font-size: .74rem; letter-spacing: .07em; color: #c3ccd8; font-weight: 600; }
.ch-pts { font-size: 1.25rem; font-weight: 700; color: #f2f5f8; }

/* The side to throw is marked by its PILL, not by recolouring the text.
   Yellow-on-anything was the readability problem; a lit border and a warmer
   backing say the same thing without touching the contrast of the numbers. */
.ch-side.on {
    background: rgba(58, 42, 14, .82);
    border-color: var(--accent);
}
.ch-side.on .ch-name { color: var(--accent); }
.ch-side.on .ch-pts { color: #fff3dc; }

.ch-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .3rem .45rem;
    border-radius: 9px;
    background: rgba(10, 14, 20, .72);
    border: 1px solid rgba(255, 255, 255, .10);
    min-width: 2.6rem;
}
#ch-round { font-size: .95rem; font-weight: 700; color: #f2f5f8; }
#ch-net { font-size: .7rem; color: #aab4c2; }

/* ------------------------------------------------------ top controls ---
 * The buttons moved out of the footer so the bottom of the screen is clear
 * for the throw. They are compact and pushed to the right of the header so
 * they do not crowd the score.
 */
.ch-top-buttons {
    margin-left: auto;
    display: flex;
    gap: .3rem;
}
.ch-top-buttons button {
    padding: .28rem .5rem;
    font-size: .78rem;
    line-height: 1.1;
}
#kit-top { display: flex; align-items: center; gap: .5rem; }

/* The end-of-match banner carries its own Play again button, so finishing a
   match does not dead-end into a screen with no way forward. */
/* The kit's banner sets pointer-events: none, which is right for a banner
   that only announces something and wrong for one carrying a button: the
   button would render and never respond, because a child cannot receive
   events through a parent that has opted out unless it opts back IN, and
   the parent must allow it. Both halves are needed. */
#kit-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    pointer-events: auto;
    /* The result stays on ONE line. I had set this to `normal` when the
       banner gained a button, which let "You win, 21 to 14" wrap on a narrow
       phone. The text should never wrap; it should get smaller, which is what
       the clamp below does, and the banner is allowed to grow to nearly the
       full width before that matters. */
    white-space: nowrap;
    max-width: calc(100vw - 1.6rem);
    padding: 1rem 1.4rem;
}
#ch-banner-text {
    white-space: nowrap;
    /* Shrinks on a small screen instead of wrapping. At the floor a 360px
       phone still fits "Player 2 wins, 21 to 19" on one line. */
    font-size: clamp(.95rem, 5vw, 1.35rem);
}

#ch-again {
    /* Wide enough to be an obvious target on a phone rather than a link-sized
       button, and at least as wide as the result above it so the pair reads
       as one panel. */
    min-width: 11rem;
    padding: .6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--accent);
    color: #241804;
    border: 1px solid #f0c986;
    pointer-events: auto;
}