.tool[data-tool=chess-clock] .chess-clock,.tool[data-tool=chess-clock] .clock-faces{gap:var(--space-3);display:grid}.tool[data-tool=chess-clock] .face{align-content:center;justify-items:center;gap:var(--space-1);min-block-size:9rem;padding:var(--space-3);border:3px solid var(--c-border-strong);border-radius:var(--r-md);background:var(--c-surface-2);color:var(--c-text);cursor:pointer;font:inherit;display:grid}.tool[data-tool=chess-clock] .face.side-1{transform:rotate(180deg)}.tool[data-tool=chess-clock] .face.on{border-color:var(--c-primary);background:var(--c-surface)}.tool[data-tool=chess-clock] .face.low .time,.tool[data-tool=chess-clock] .face.flag .time{color:var(--c-danger,#c0392b)}.tool[data-tool=chess-clock] .face.flag{border-color:var(--c-danger,#c0392b)}.tool[data-tool=chess-clock] .face:disabled{cursor:default;opacity:1}.tool[data-tool=chess-clock] .time{font-variant-numeric:tabular-nums;font-size:4rem;font-weight:700;line-height:1.1}.tool[data-tool=chess-clock] .side-name,.tool[data-tool=chess-clock] .sub{color:var(--c-text-2);font-size:var(--fs-sm)}.tool[data-tool=chess-clock] .clock-actions{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.tool[data-tool=chess-clock] .clock-actions .btn{min-block-size:var(--tap,2.75rem)}