feat(focus): the game chips answer the pointer, as the dailies do

They are the same object twice — a pill carrying a game's colour, pressed
or not, that you tap — so they get the same hover rather than a second
one: a ring in the game's hue, a one-pixel lift, and the label coming up
to full ink while the chip is not the pressed one.

Sharing it meant `.tick-chip` becoming `.hue-chip`, and dropping the
`data-done` attribute it keyed off. Both chips were already saying the
same thing in `aria-pressed`, and a second attribute repeating it is one
more thing to keep in step — a rule that reads the announced state cannot
disagree with it.

The focus strip needed a pixel of headroom for that lift. `scroll-x` sets
`overflow-x: auto`, which computes the vertical axis to `auto` as well,
so a chip that rises loses that pixel and its ring to the scroller's
edge; `pt-1` is the room, and `mt` gives the same total gap back.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/client/components/Dailies.tsx

@@ -194,11 +194,11 @@ function TickChip({
       aria-pressed={isDone}
       aria-label={`${ariaLabel}${isDone ? ", done today" : ", not done today"}`}
       title={title}
-      // Done-ness for the stylesheet: the chip's own colours are the game's
-      // hue and arrive inline, which no rule can override, so the hover has to
-      // be drawn from what inline does not own — see `.tick-chip`.
-      data-done={isDone}
-      className="tick-chip flex max-w-[15rem] items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
+      // `.hue-chip` is the shared hover: the chip's own colours are the game's
+      // hue and arrive inline, which no rule can override, so it is drawn from
+      // what inline does not own. `--hue` below is the only thing it needs;
+      // pressed-ness it reads off `aria-pressed`, which is already up there.
+      className="hue-chip flex max-w-[15rem] items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium"
       style={{
         ["--hue" as string]: hue,
         borderColor: isDone ? hue : `color-mix(in srgb, ${hue} 20%, transparent)`,
@@ -222,7 +222,7 @@ function TickChip({
           opacity={isDone ? 1 : 0.25}
         />
       </svg>
-      <span className="tick-label truncate">{label}</span>
+      <span className="hue-chip-label truncate">{label}</span>
       {streak > 1 && (
         <span className="tnum shrink-0 text-[0.625rem] opacity-70">{streak}d</span>
       )}