/* Live spectating (plans/live-spectate.md): the row of players to watch, above the submit button, and the
   blocked input while the view follows someone. Each theme sets the --watch-* colours in its style.css. */
#watch-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
  background: var(--watch-bg, rgba(12, 6, 25, .88)); color: var(--watch-text, #fff);
}
#watch-row[hidden] { display: none; }
#watch-row .watch-opt {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 3px var(--ring, #888);
  transition: box-shadow .15s;
}
#watch-row .watch-opt.on { box-shadow: 0 0 0 3px var(--ring, #888), 0 0 0 6px var(--watch-on, #fff); }
#watch-row .watch-free {
  margin-left: auto; min-height: 32px; padding: 0 12px; cursor: pointer; font: inherit; font-size: 14px;
  border: 1px solid var(--watch-line, rgba(255, 255, 255, .4)); border-radius: var(--watch-radius, 4px);
  background: transparent; color: var(--watch-text, #fff);
}
#watch-row .watch-free.on { background: var(--watch-on, #fff); color: var(--watch-on-text, #000); border-color: var(--watch-on, #fff); }
#watch-row button:focus-visible { outline: 2px solid var(--watch-on, #fff); outline-offset: 3px; }
/* following someone: their feed drives Street View and the map, so the viewer's own input is off */
#game-screen.following #street-view, #game-screen.following #guess-map-box { pointer-events: none; }
#game-screen.following #map-size-btns, #game-screen.following #tb-undo, #game-screen.following #tb-reset { visibility: hidden; }