/* Games in progress: a count beside the eye on the home screen, then a list of pairs. */
.watch-button { display: flex; align-items: center; justify-content: center; gap: 5px; }
.watch-count { font-size: 15px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.watch-count:empty { display: none; }

.watch-dialog { width: min(420px, calc(100vw - 24px)); }
.watch-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 20px; background: var(--surface); }
.watch-live { display: flex; align-items: center; gap: 7px; margin: 0; color: #3e5360; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.watch-live svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.watch-status { margin: 0; padding: 6px 20px 24px; color: var(--muted); font-size: 12px; }
.watch-list { display: grid; gap: 6px; margin: 0; padding: 0 12px 14px; list-style: none; }
.watch-list:empty { display: none; }
.watch-game { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px 9px 12px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; transition: background 130ms, transform 130ms; }
.watch-game:hover { background: #e5e6dc; }
.watch-game:active { transform: scale(.985); }
.watch-game:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.watch-game[aria-busy='true'] { opacity: .6; cursor: progress; }
.watch-game > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.watch-players { display: grid; flex: 1; gap: 5px; min-width: 0; }
.watch-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
.watch-player .player-avatar { width: 28px; height: 28px; border-radius: 5px; }
.watch-player .player-avatar .mini { width: 25px; height: 25px; }
.watch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.watch-rating { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }