/* bowl.css — bowling'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. Structure lifted
 * from pool/pool.css.
 */

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

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

/* ------------------------------------------------------- the header band
   Everything the player reads or presses is in ONE strip at the top. Owner,
   2026-09-10: "let's put the menu and stuff on the top", and "what is the
   'Board 8' and 'Board 21' stuff in the middle of the lane?" — that was this
   readout, floating over the playfield where it read as debris on the boards.
   Only the power hairline overlaps the lane now. */
#kit-top {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    background: linear-gradient(rgba(12, 15, 20, .93), rgba(12, 15, 20, .78) 78%, rgba(12, 15, 20, 0));
    padding-bottom: .5rem;
    pointer-events: none;
}

#bw-hdr-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

/* The burger, in pool's idiom: three bars from one element, so there is no
   icon font and nothing to load. Left-hand end of the header, where the Menu
   button already was. */
.bw-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    color: var(--ink);
    background: rgba(27, 32, 40, .88);
    border: 1px solid var(--edge);
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.bw-icon:active { transform: translateY(1px); }

.bw-burger, .bw-burger::before, .bw-burger::after {
    display: block;
    width: 1.05rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.bw-burger { position: relative; }
.bw-burger::before { position: absolute; top: -.34rem; }
.bw-burger::after { position: absolute; top: .34rem; }

#bw-status {
    flex: 1;
    text-align: center;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}





/* What the swing was read as. See src/game/hud.js#setThrowRead — the teaching
   surface for the arc throw. */


/* ---------------------------------------------------------- scoreboard ---
   The traditional paper sheet, from the photograph the owner sent: a grey
   ruled header (Name, 1-10, Final), white paper under it, and inside each
   frame the small ball boxes tucked into the TOP RIGHT with the running total
   filling the space beneath them. The tenth frame is wider and carries three
   boxes, because it can take three balls.

   It is deliberately the one bright object on a dark screen. A scoresheet in
   a bowling alley is a piece of paper under a light, and making it dark to
   "match the theme" would lose the thing that makes it instantly readable. */
#bw-scoreboard {
    overflow-x: auto;
    scrollbar-width: none;
    pointer-events: auto;
}

#bw-scoreboard::-webkit-scrollbar { display: none; }

.bw-sheet {
    min-width: 19rem;
    background: #f2efe6;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    color: #14110c;
    font-family: ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

.bw-sheet-head,
.bw-sheet-row {
    display: flex;
    align-items: stretch;
}

.bw-sheet-head {
    background: #cfcabd;
    border-bottom: 1px solid #1a1a1a;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1rem;
}

.bw-sheet-head > span {
    text-align: center;
    border-right: 1px solid #1a1a1a;
}

.bw-sheet-head > span:last-child,
.bw-sheet-row > span:last-child { border-right: 0; }

.bw-sheet-row {
    border-top: 1px solid #1a1a1a;
    min-height: 2.1rem;
}

.bw-sheet-row:first-of-type { border-top: 0; }

/* Whose turn it is. A faint wash rather than a colour change, so the sheet
   still reads as paper. */
.bw-sheet-row.on { background: #fdfbf2; }
.bw-sheet-row:not(.on) { opacity: .62; }

.bw-c-name {
    flex: 0 0 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 600;
    border-right: 1px solid #1a1a1a;
    overflow: hidden;
}

.bw-c-final {
    flex: 0 0 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

.bw-c-frame {
    flex: 1 1 0;
    min-width: 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-right: 1px solid #1a1a1a;
}

/* Three balls fit in the tenth, so it needs the room. */
.bw-c-frame.tenth { flex: 1.5 1 0; min-width: 2.2rem; }

.bw-c-frame.now { background: rgba(224, 163, 62, .28); }

/* The ball about to be bowled. Together with the frame's own wash this says
   "frame 3, ball 2" without writing it over the sheet. */
.bw-box.now {
    background: var(--accent);
    color: #12161d;
    box-shadow: inset 0 0 0 1px #1a1a1a;
}

/* The little boxes, top right, ruled on their left and bottom edges exactly
   as the printed sheet has them. */
.bw-boxes {
    display: flex;
    align-self: flex-end;
}

.bw-box {
    width: .72rem;
    height: .72rem;
    line-height: .72rem;
    text-align: center;
    font-size: .56rem;
    font-weight: 700;
    border-left: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}

.bw-c-total {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .76rem;
    font-weight: 600;
}

.bw-practice-line {
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ----------------------------------------------------------- pinboard ---
   What is still standing, seen from above, in the bottom-right corner. The 3D
   view looks straight down the lane, so a pin can hide exactly behind another
   one; this is the only place a 2-8 is distinguishable from a lone 2. */
#bw-pinboard {
    position: absolute;
    right: .6rem;
    bottom: calc(.6rem + env(safe-area-inset-bottom));
    width: 4.1rem;
    z-index: 6;
    padding: .3rem .35rem;
    border-radius: .4rem;
    background: rgba(12, 15, 20, .62);
    border: 1px solid rgba(255, 255, 255, .10);
    pointer-events: none;
}

#bw-pinboard svg { display: block; width: 100%; height: auto; }

#bw-pinboard circle.up {
    fill: #f4efe2;
    stroke: #b8342f;
    stroke-width: 3;
}

#bw-pinboard circle.down {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 2;
}

/* ------------------------------------------------------------- power ---
   Fills while the ball is held and the wind-up is under way, so how hard you
   are about to throw is visible BEFORE you let go. A hairline under the
   header, the same shape pool's gauge settled on. */
/* The one thing still allowed over the lane: a hairline that fills while the
   swing happens. Sits just under the header band. */
#bw-power {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 7;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

#bw-power-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 40ms linear;
}

#bw-power-fill.hot { background: #e2553c; }

/* ---------------------------------------------------------- frame hint --- */
#bw-frame-hint {
    position: absolute;
    left: 50%;
    top: calc(3.6rem + env(safe-area-inset-top));
    transform: translateX(-50%);
    z-index: 6;
    padding: .35rem .8rem;
    border-radius: .5rem;
    background: rgba(18, 22, 29, .85);
    border: 1px solid var(--edge);
    color: var(--accent);
    font-size: .82rem;
    text-align: center;
    pointer-events: none;
}

/* -------------------------------------------------------------- menu --- */
#bw-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;
}

#bw-menu h1 { margin: 0; font-size: 1.6rem; }
.bw-blurb { margin: 0 0 .5rem; color: var(--muted); max-width: 26rem; }
.bw-how { margin: 0 0 .8rem; color: var(--muted); max-width: 26rem; font-size: .86rem; line-height: 1.45; }
.bw-how b { color: var(--accent); font-weight: 600; }

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

/* ------------------------------------------------------------ ball rack ---
   Twelve swatches on the menu. Each is drawn from its own finish so the
   button looks like the ball it picks: swirl and sparkle get a highlight
   blob, plain ones a flat sheen. Cosmetic only — every finish shares the
   same physics. */
#bw-ball-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin: .2rem 0 .4rem;
}

.bw-pick-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

#bw-ball-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .4rem;
    max-width: 15rem;
}

.bw-swatch {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .16);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 42%),
        var(--ball);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .45);
}

/* The marbled ones show their swirl colour; the sparkle ones get flecks. */
.bw-swatch.swirl {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 68% 62%, var(--ball-swirl), rgba(0, 0, 0, 0) 46%),
        var(--ball);
}

.bw-swatch.sparkle {
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 62% 40%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 9%),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 7%),
        radial-gradient(circle at 74% 72%, var(--ball-swirl), rgba(0, 0, 0, 0) 40%),
        var(--ball);
}

.bw-swatch.on {
    border-color: var(--accent);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(224, 163, 62, .45);
}

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

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


/* ---------------------------------------------------------- the banner ---
   Cornhole's shape exactly: the result centred, a wide yellow Play again
   under it, and the pair reading as one panel.

   The kit's .kit-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 the parent allows 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: it should get smaller rather than wrap,
       which is what the clamp on the text below does. */
    white-space: nowrap;
    max-width: calc(100vw - 1.6rem);
    padding: 1rem 1.4rem;
}

#bw-banner-text {
    white-space: nowrap;
    font-size: clamp(.95rem, 5vw, 1.35rem);
}

#bw-play-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. */
    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;
    cursor: pointer;
    pointer-events: auto;
}

#bw-play-again:active { transform: translateY(1px); }

/* ------------------------------------------------------- header, league ---
   Three buttons and two numbers. Owner, 2026-09-11: "keep the labels and such
   to a minimum, let's make most of it visual or numeric." */
#bw-standing {
    flex: 1;
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#bw-rating {
    font-size: .72rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Reset arms itself for a couple of seconds rather than opening a dialog,
   which on a phone is a lot of ceremony for one button in a corner. */
#bw-reset.armed {
    color: #12161d;
    background: #e2553c;
    border-color: #f08a74;
}

/* ------------------------------------------------------- the league card --
   What the menu is now: who you are, in numbers. No prose, no mode buttons. */
#bw-card {
    width: 100%;
    max-width: 20rem;
    margin: .2rem 0 .9rem;
    padding: .7rem .85rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
}

.bw-card-row {
    display: grid;
    grid-template-columns: repeat(3, auto 1fr);
    align-items: baseline;
    gap: .15rem .4rem;
    margin-bottom: .35rem;
}

.bw-card-row:first-child { grid-template-columns: auto 1fr; }

.bw-card-k {
    font-size: .6rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.bw-card-v {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

#bw-card-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    margin: .1rem 0 .6rem;
    overflow: hidden;
}

#bw-card-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .3s ease;
}

/* Badges as dots: earned filled, the rest outlined, so what is left to get
   has a visible shape without a word of explanation. */
#bw-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    margin-top: .5rem;
}

.bw-badge {
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
    text-align: center;
    border-radius: 50%;
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .14);
}

.bw-badge.on {
    color: #12161d;
    background: var(--accent);
    border-color: #f3c579;
}

#bw-start {
    min-width: 11rem;
    padding: .7rem 1.6rem;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 8px;
    background: var(--accent);
    color: #241804;
    border: 1px solid #f0c986;
    cursor: pointer;
}

#bw-start:active { transform: translateY(1px); }