/*
 * Racket and table boards: rules controls shared by table tennis (first server, timeouts, change of ends)
 * and the squash board (CRs req_bWs1j2cDLhpR, req_Ft3tVunUNOJJ). Classes use the sv2 tokens; no new colours.
 */

/* Timeout button in a player card footer: a pill with a label and the count left. */
.sv2-player__btn--timeout {
    width: auto;
    padding: 0 0.75rem;
    gap: 0.4rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
    font-size: clamp(0.7rem, 1.3vmin, 0.9rem);
    font-weight: 700;
    white-space: nowrap;
}
.sv2-player__btn--timeout:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fbbf24;
}
.sv2-player__btn--timeout:disabled,
.sv2-player__btn--timeout[disabled] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* First-server prompt, shown above the board until the first point is played. */
.sv2-first-server {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--sv2-bg-card);
    border-bottom: 1px solid var(--sv2-border);
    flex-shrink: 0;
}
.sv2-first-server[hidden] {
    display: none;
}
.sv2-first-server__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sv2-text-dim);
}

/* Change-of-ends cue (the deciding game, first player to 5 points). */
.sv2-ends-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: rgba(99, 102, 241, 0.16);
    color: var(--sv2-accent);
    border-bottom: 1px solid rgba(99, 102, 241, 0.35);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
}
.sv2-ends-cue[hidden] {
    display: none;
}
.sv2-ends-cue__btn {
    padding: 0.2rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Squash: fullscreen, keep-awake and spoken score controls (settings rows). */
.sv2-header__btn--on {
    color: var(--sv2-accent);
    border-color: var(--sv2-accent);
}

/* Fullscreen fallback where the browser has no Fullscreen API for a page (iPhone Safari): the board root
   fills the viewport; public/css/fullscreen-lockdown.css hides the site chrome while .is-fullscreen is set. */
.sv2-page.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.sv2-page:fullscreen {
    width: 100vw;
    height: 100vh;
}