feat: a shared game shell header, starting with the top row - #40

The line was retreating from the end of the phase. Now it fills toward it,
which is the direction a progress bar is read in.

A bar that creeps a percent a second is motion nobody can see, so the head of
the fill breathes: 0.15 to 0.7 over two and a bit seconds, enough to say the
thing is running and not enough to look at. Progress rides on a var so the
fill and the head read the same number and arrive together, and the track is
clipped so the head never escapes at either end.

The phase icon has lost its case. The game icon up top is a badge standing in
for the whole game, but this one is only the phase's mark, so it sits beside
the name at the size of the name and lets the name be the thing you read.

Both headings sit centre now, with a hairline running out either side to the
edge of the section. A centred label floats without something to give it the
width of the thing it names, and the hairline is what the cards already use
to separate one part from the next.

Display Name is just Display, and it has a mark of its own like Join Game
does. Both icons take the label colour rather than being the same grey
knocked back with an inline opacity.

The recents heading is left alone: it lives inside a toggle with a chevron
after it, so it keeps its row.

The rules either side of the centred headings were a second line saying what
was already said. On desktop the sections are split by .hc-divider, and on
mobile each section is its own card with a border, so the hairline landed a
couple of pixels inside one and read as a doubled edge. Centring stays, the
rules go, and the line count is back to what it was.

The icons were centred on the text box correctly, but the labels are
uppercase and caps carry no descender, so the glyphs sit about a pixel above
the middle of that box and the icon looked low. They are nudged onto the cap
centre, which leaves a residual under half a pixel on both breakpoints.

Transform rather than a negative margin: a margin on a centre-aligned flex
item only moves it half as far, and does it by resizing the item.

Not everyone wants the phase panel on screen for a whole match, so a
collapsible header grows a button that puts it away.

Folded, the container is the thing being given up, so it goes entirely: no
border, no fill, no corners. The line moves from the bottom edge to the top,
where it picks up a second job separating the title row from what is under
it, and the pills come down off the top row to sit beneath it with the clock
on the right. The clock loses a few points with nothing left to sit beside.

The phase name is what folding costs you, so the button that gives it back
carries it in its tooltip.

The narrow-screen rule that drops the pills onto their own line is now scoped
to the top row. It was catching the folded pills too and ordering them past
the clock, which put the clock on the left on a phone.

The clock keeps its size. It is meant to be the loudest thing on the header,
and folding the panel away only makes that more true, so the rule that shrank
it is gone.

Around it, everything else gets quieter. The game icon drops its badge shell
and sits as a mark beside the title, since the shell was there to hold its
own against a panel that is no longer on screen. The pills lose their fills
and outlines and read as plain text, because chips with their own outlines
next to a clock that size start arguing with it.

Folding animates now. The panel is kept mounted and closed with a row of 1fr
to 0fr, which is what lets a panel of unknown height shut without a
max-height guessed at from outside, and it goes inert while closed so nothing
in there is still reachable. The container fades its fill, its corners and
its padding on the same curve.

Two things that only showed up once it moved. Taking the panel to no width
rewraps its sentence into a tall column in the frame before the row starts
closing, so the panel shoots up before it goes down; while shut it is held on
one line, which costs nothing as it is being clipped anyway. And the row gap
still counts a panel of no width, walking the pills in off the left edge, so
the gap moves onto the clock where it was wanted.

… colour

The code and the fold button now share one case, split by a hairline, the way
the two roles do. Two things you press, one object.

In the lobby the code is the point of the screen, so it stays readable. Once
play starts it is down to its key, and clicking widens it back out to the
code and copies at the same time, then it shuts itself again. The width
animates rather than snapping, and the label carries its own margin so it can
go to nothing without leaving the gap behind. The lobby is taken to be the
phase a game opens on.

The pills are chips again. Plain text was too far: folded they are most of
what is left beside the clock, so they get a size you can read and the game's
own colour instead of grey, which under a coloured clock was reading as
disabled.

The hairline in the new case had to move below both button rules. Each of
them zeroes its own border and they sit at the same specificity, so whichever
comes last wins, and it has to be this one.