/* ===== Chess clock - every game (Story 18.7) =====
   The clock is the framework's (bb/js/battle/chess-clock.js); its look was
   The Old World's alone, scoped to it, so a Horus Heresy clock would have
   rendered bare. Same rules, in the shell's own tokens.

   Requested 2026-08-12: "bigger and visible to both players, in a more
   prominent location in real time for both people." It leads the screen,
   because the clock is the thing both players look up at, from across a
   table, without picking the phone up. The numbers are tabular so they
   stop jittering as the digits change. */

.chess-clock {
    display: grid;
    /* The min-content trap: `.clock-name` is nowrap, so a team name set
       the column floor and pushed the second clock off the screen. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--bb-space-2);
    align-items: center;
    background-color: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-lg);
    padding: var(--bb-space-2) var(--bb-space-3);
    margin-bottom: var(--bb-space-3);
}

.clock-player {
    text-align: center;
    padding: var(--bb-space-1);
    border-radius: var(--bb-radius-md);
    border: 1px solid transparent;
}

.clock-name {
    display: block;
    font-size: var(--bb-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clock-time {
    display: block;
    font-size: clamp(1.75rem, 9vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--bb-text-primary);
}

/* Whose clock is running. Border AND background, because at arm's length
   under a table lamp a colour change alone is easy to miss. */
.clock-player.clock-active {
    border-color: var(--bb-accent-primary);
    background-color: color-mix(in srgb, var(--bb-accent-primary) 10%, transparent);
}

.clock-player.clock-active .clock-time {
    color: var(--bb-accent-primary);
}

.clock-player.clock-warning .clock-time {
    color: var(--bb-accent-warning);
}

.clock-player.clock-expired .clock-time {
    color: var(--bb-accent-danger);
}

.clock-controls {
    display: flex;
    justify-content: center;
}

#btn-clock-toggle {
    min-height: 44px;
    min-width: 72px;
}

/* Narrow phones: the same layout with less chrome (an iPhone 12 is 390pt,
   field-reported 2026-08-14). */
@media (max-width: 430px) {
    .chess-clock {
        padding: var(--bb-space-1) var(--bb-space-2);
        gap: var(--bb-space-1);
    }

    #btn-clock-toggle {
        min-width: 60px;
        padding-left: var(--bb-space-1);
        padding-right: var(--bb-space-1);
    }
}