/* pool.css — pool'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.
 *
 * EVERY control is in the header now. Owner, 2026-09-09: "the instructions
 * and errors show up over top of the board on the phone app and don't always
 * go away... put the menu (make it a burger instead of a button) and a
 * Restart button and everything else at the top."
 *
 * That is tidier, and it is also the finding cornhole reached the hard way:
 * the shot gesture is a drag that starts on the cloth and pulls DOWN toward
 * the player, so anything along the bottom sits under the thumb at the exact
 * moment the gesture begins. The header is the one place a control can live
 * without being either under the thumb or on top of the table — and
 * src/play/table.js#overheadFraming measures this header's real height and
 * frames the table into the band underneath, so the two never overlap at any
 * viewport shape.
 */

#kit-top {
    display: block;                 /* kit.css lays its top bar out as a row */
    padding: max(.35rem, env(safe-area-inset-top)) .5rem .3rem;
    background: linear-gradient(180deg, rgba(12, 15, 19, .96) 72%, rgba(12, 15, 19, 0));
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
}

#pl-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    pointer-events: auto;           /* kit.css turns pointers off for the bar */
}

/* ------------------------------------------------------------- buttons --- */
.pl-icon {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--ink);
    background: rgba(27, 32, 40, .9);
    border: 1px solid var(--edge);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pl-icon:active { transform: translateY(1px); }
.pl-icon.on { border-color: var(--accent); color: var(--accent); }

/* The burger: three bars from one element, so there is no icon font and
   nothing to load. */
.pl-burger, .pl-burger::before, .pl-burger::after {
    display: block;
    width: 1.05rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}
.pl-burger { position: relative; }
.pl-burger::before { position: absolute; top: -.34rem; }
.pl-burger::after { position: absolute; top: .34rem; }

/* ------------------------------------------------------------ readout ---- */
#pl-readout {
    flex: 1 1 auto;
    min-width: 0;                   /* lets the text truncate instead of pushing */
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    padding-left: .1rem;
}
#pl-score {
    color: var(--ink);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#pl-mode-label {
    color: var(--muted);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------- status ---- *
 * One line for everything the game has to say. It always holds at least a
 * non-breaking space, so the header never changes height and the camera
 * framing under it never has to move. One line also means a new message
 * REPLACES the last one, which is what guarantees nothing gets stranded.
 */
#pl-status {
    margin-top: .25rem;
    min-height: 1.05rem;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
#pl-status.warn { color: var(--lose); }
#pl-status.good { color: var(--accent); }

/* -------------------------------------------------------- power readout --
 * A hairline under the header. It was a slider pinned to the right edge, on
 * top of the table; power comes from the drag now, so this has to be visible,
 * not reachable.
 */
#pl-power-track {
    margin-top: .22rem;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .10);
    overflow: hidden;
    pointer-events: none;
}
#pl-power-fill {
    height: 100%;
    width: 0%;                      /* JS keeps this in sync with power */
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), #f0c274);
}

/* ------------------------------------------------------- english widget ---
 * Small enough to sit in the bar. It belongs at the top with everything
 * else: the pull gesture owns the whole lower screen.
 */
#pl-english-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .25rem;
    pointer-events: auto;
    touch-action: none;
}

#pl-english-ball {
    position: relative;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbf8f0, #dcd6c2 70%);
    border: 2px solid var(--edge);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    cursor: crosshair;
}

#pl-english-dot {
    position: absolute;
    width: .45rem;
    height: .45rem;
    left: 50%;
    top: 50%;
    margin: -.225rem 0 0 -.225rem;
    border-radius: 50%;
    background: var(--lose);
    border: 1px solid #6e1f2a;
    box-shadow: 0 0 4px rgba(0, 0, 0, .6);
    /* JS keeps left/top in sync with the chosen tip offset */
}

#pl-english-pin {
    font: inherit;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: rgba(27, 32, 40, .9);
    border: 1px solid var(--edge);
    border-radius: 6px;
    padding: .45rem .2rem;
    writing-mode: vertical-rl;
    cursor: pointer;
}
#pl-english-pin.on { color: var(--accent); border-color: var(--accent); }

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

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

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

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

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

/* ------------------------------------------------------------- banner --- *
 * Game over only, and tappable so it can always be dismissed. kit.css makes
 * it pointer-transparent, which was right when it was also used for messages
 * that timed out on their own.
 */
.kit-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    pointer-events: auto;
    cursor: pointer;
    /* Shrinks on a small screen instead of wrapping, same clamp cornhole
       settled on: a 360px phone still fits "P1 wins (opponent potted the 8)"
       on one line. */
    font-size: clamp(.95rem, 4.4vw, 1.35rem);
}

#pl-again {
    /* An obvious phone target, not a link-sized button, and at least as wide
       as the result above it so the pair reads as one panel. */
    min-width: 11rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: .6rem 1.5rem;
    border-radius: 8px;
    background: var(--accent);
    color: #241804;
    border: 1px solid #f0c986;
    pointer-events: auto;
    cursor: pointer;
}
#pl-again:active { transform: translateY(1px); }