/* The page's styles (see style/base.css): small screens and every other
   size and shape of screen; last, so its rules win where they meet. */

/* ------------------------------------------------------ small screens */

/* Cards by the board's size (the board is a size container), whatever the
   screen. Up to 490 px, a phone's card: tighter, and the rivals as a row of
   names (tap a tag above the board for how one plays). That's every board
   a phone gives, held upright (up to 432 px) or on its side (up to 490 in
   full screen), and a short or narrow window's. (It went by the screen's
   width, 440 px or less: on its side, and in a window 441 to 520 px wide,
   a board of 381 to 470 px had the desktop's card, which scrolled: the
   start card 50 px at 381, 14 at 397 in a 441 px window; with a note 69 at
   404, 37 at 416, 3 at 470; the fullest death card 15 at 404, where the
   same board held upright fits.) The steps below were set on phones held
   upright, and hold on their sides with the same card. */
.board { container-type: size; }
@container (max-height: 490px) {
  .card { --pad-x: 14px; --pad-y: 12px; }
  .card h2 { font-size: 1.5rem; }
  .opponents { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .opponents li { margin: 2px 0; }
  .opponents .blurb { display: none; } /* (they live in the tags' tooltips, and the notes) */
  .opponents .tap-tip { display: block; flex-basis: 100%; font-size: 0.78rem; color: var(--ink-soft); }
  /* (a start card that outgrows the board, its names on two rows (fitStartCard): the tip goes, then its lines sit closer) */
  .card.snug .opponents .tap-tip { display: none; }
  .card.snugger h2 { margin-bottom: 2px; }
  .card.snugger #overlay-text { margin-bottom: 2px; }
  .card.snugger .opponents { margin-bottom: 2px; row-gap: 0; }
  .card.snugger .hint { margin-top: 0 !important; }
  /* (the seats as plain names, as the roll-call was, a dotted line under each saying it's a button: chips with
     their swap mark wrapped onto a second row and the card scrolled, 40 px at 320x640) */
  .card .opponents .seat, .card .opponents .seat:not(:disabled):hover { min-height: 0; margin: -7px -5px; padding: 7px 5px; gap: 7px; background: none; } /* (a fingertip's height, without taking it from the card) */
  .opponents .seat strong { text-decoration: underline dotted var(--ink-soft) 1.5px; text-underline-offset: 3px; }
  .card .opponents .seat.chosen { box-shadow: none; } /* (chosen: its line drawn solid, in heartwood; a ring a fingertip tall crossed the words above) */
  .card .opponents .seat.chosen strong { text-decoration: underline solid var(--heartwood) 2px; }
  .card .opponents .seat:focus-visible { outline-offset: -4px; outline-width: 2px; }
  .opponents .swap { display: none; }
  /* (the pin next to no width, so three still fit one row at 320 px; its ::before is a fingertip's room to tap) */
  .card .opponents .unpin { position: relative; width: auto; height: auto; margin: 0 -2px 0 -4px; padding: 0; overflow: visible; }
  .card .opponents .unpin::before { content: ''; position: absolute; inset: -12px -7px; }
}
@container (max-height: 380px) {
  .card-links { gap: 0 8px; } /* (How to play and Play with friends still share a row on a phone) */
  .card-links .text-button { padding-inline: 4px; }
  .card h2 { font-size: 1.45rem; margin-bottom: 4px; }
  .card.beat h2 { font-size: 2.4rem; }
  .card p { margin-bottom: 8px; font-size: 0.92rem; }
  .opponents { margin-bottom: 8px; }
  .buttons .text-button { margin-top: 0; min-height: 32px; }
  .buttons { gap: 6px 10px; }
  .rival-note { margin-bottom: 8px; padding: 6px 10px 7px 12px; font-size: 0.92rem; } /* (as the card's words it stands in for) */
  .card .rival-note .now { margin-top: 2px; }
  .card.noting .opponents { display: none; } /* (here the roll-call is just names, the tags' names right above: the note stands in for it too) */
  .card.noting .badge, .card.noting .name-row:not(:focus-within) { display: none; } /* (so do the new best's badge and the carve: they come back with the card's words; never while you're typing) */
  .hint span:nth-of-type(n+4) { display: none; } /* (a small card: how to steer, jump and flash; the rest is under the board) */
  .hint span:nth-of-type(3) .sep { display: none; }
  .card:has(.name-row:not([hidden])) .flavor { display: none; }
  .name-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 8px; font-size: 0.9rem; }
  .name-row input { width: 140px; padding-block: 6px; }
  .name-row { margin-bottom: 8px; }
  .lobby { gap: 8px; }
  .buttons button { padding-inline: 18px; }
  .hint { margin-top: 6px !important; font-size: 0.74rem; } /* (the steering hint stays: phones need it most) */
}
/* A phone's edge-to-edge board a little over that (382 px on a 390 px
   phone, 404 on a 412, either way up): the fullest card, a first good
   round's with the new best's badge, the carve and the Field guide's link,
   lets the death's quip go while the carve is offered, up to 403 px (with
   it the card scrolled 15 px at 382), and a rival's note on it stands in
   for the badge and the carve, as on a small board, up to 455 (it scrolled
   27 px at 382, 5 at 404, and the round's card, below, 25 at 422), and up
   to 403 for the start card's roll-call. */
@container (max-height: 403px) {
  .card:has(.name-row:not([hidden])) .flavor { display: none; }
  .card.noting .opponents { display: none; } /* (the start card's roll-call too: with a note it scrolled 2 px at 382) */
}
@container (max-height: 455px) {
  .card.noting .badge, .card.noting .name-row:not(:focus-within) { display: none; }
}
/* The round's card, when your death ended it (it's your death's card then:
   the carve, the badge and the Field guide's link are on it), says a little
   more ("· lasted 2:41"), a line more with the longest reason: while the
   carve is offered its quip waits up to 419 px (with it the card scrolled
   13 px at 404), and the new best's badge up to 390 (5 px at 382), and a
   note stands in for the badge and the carve up to 455 (25 px at 422, 7 at
   440; your death's card fit from 420). On the smallest board, 266 px on
   its side (568×320), it still scrolls 10 px, past nothing but its bottom
   edge: everything left on it is wanted. */
@container (max-height: 419px) {
  .card.ended:has(.name-row:not([hidden])) .flavor { display: none; }
}
@container (max-height: 390px) {
  .card.ended:has(.name-row:not([hidden])) .badge { display: none; }
}
@container (max-height: 340px) {
  .card:has(.name-row:not([hidden])) .badge { display: none; } /* (the prompt is the celebration here; Best shows the number. Up to 340: a Galaxy Fold's cover screen, 336 px, scrolled 6 px) */
}
@container (max-height: 300px) {
  .card-links { gap: 0 6px; }
  .card-links .text-button { font-size: 0.92rem; padding-inline: 2px; } /* (the smallest card: both on one row, 205 px of 214 on 568×320's 266 px board; at 4 px and 8 apart, 215, the roll-call went under Play) */
  .card h2 { font-size: 1.25rem; }
  .rival-note { font-size: 0.85rem; margin-bottom: 4px; } /* (the longest note on a nap at 266 px scrolled 1 px at 6) */
  .card .rival-note .now { font-size: 0.92em; } /* (no smaller than 12.5px) */
  .card.noting .card-links, .card:has(.name-row:not([hidden]):not(.carved)) .card-links { display: none; } /* (the card's quieter links, the Field guide's and friends', wait under a note here, and while you carve your name) */
  .name-row.carved:not(:focus-within) input { display: none; } /* (once a name's in, the row is one line: "Carved: …", or "…, as …" if you had one, and the links are back) */
  .flavor { display: none !important; }
  .opponents .tap-tip { display: none !important; } /* (the hint needs the room: how to steer comes first) */
  /* Just the first two items of the hint ("Swipe to steer · Tap to jump"): a new player has to be told that much (the flash has its own lesson). */
  .card p.hint { font-size: 0.72rem; margin-top: 4px !important; }
  .hint span:nth-of-type(n+3) { display: none; }
  .hint span:nth-of-type(2) .sep { display: none; }
  button { padding-block: 8px; }
  .name-row { font-size: 0.82rem; }
  .buttons .text-button { min-height: 30px; padding-block: 2px; }
  .card p { font-size: 0.85rem; margin-bottom: 6px; }
}
/* The two buttons share one row (a stacked pair would cover the card): on
   the small boards, and on a phone's edge-to-edge one (310 px on its side). */
@container (max-height: 330px) {
  .opponents li { margin: 1px 0; } /* (the start card with the longest names scrolled 2 to 3 px at 310 and 312 px) */
  .buttons { gap: 8px; }
  .buttons button:not(.text-button) { flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: 0.85rem; line-height: 1.15; }
  #start { --call-x: 1.18; --call-y: 1.8; } /* (its ring as wide on a smaller button) */
}

@media (max-width: 440px) {
  h1 { font-size: 1.7rem; }
  /* The header in two rows: the title with Score and Best, then the buttons. */
  header { align-items: center; }
  .brand { flex: 1; }
  .hud, .stats { display: contents; }
  .stats .stat { font-size: 1rem; }
  .stats .stat strong { min-width: 2ch; }
  .hud .stat { order: 0; }
  header::after { content: ''; order: 1; flex-basis: 100%; }
  .hud button { order: 2; }
  /* Best at the end of the buttons' row, under Score: beside the title the
     two ran out of room at 100 or 1000, and the header grew a row in the
     middle of a round, the board shrinking under it. Its room is kept for
     four digits, its words to the right, so the buttons never move as it
     grows. (The narrowest phones keep it on the title's row.) */
  .hud .stat + .stat { order: 3; min-width: 4.5em; text-align: right; }
  .hud .stat + .stat strong { text-align: left; } /* (its digits under Score's) */
  h1 { white-space: nowrap; }
  /* The Hall of Fame as a trophy, so the header stays one row high. */
  .trophy { min-width: 34px; padding: 0 8px; justify-content: center; }
  .scoreboard li { padding-inline: 7px; gap: 4px; } /* (two tags a row: every letter of a name counts) */
  .trophy svg { display: block; }
  .trophy .trophy-text { display: none; }
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Three tabs and the close on one row: the Hall of Fame's tab is its trophy too. */
  .records-head .tab { white-space: nowrap; }
  .records-head .tab-icon { display: inline-block; }
  .records-head .tab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card h2 { font-size: 1.5rem; } /* (the phone's card is by the board's size, above; held upright its title stays 1.5rem on the small boards too) */
  .scores-table .date { display: none; }
  .scores-table { table-layout: fixed; } /* long names get an ellipsis instead of pushing the table wide */
  /* The room goes to the names: Result fits "Won" or "4th" ("Shared 1st" takes two lines),
     and a tag ("this round", "friend") goes under its name, so a long name can't cut it off. */
  .scores-table th:nth-child(1) { width: 22px; }
  .scores-table th:nth-child(3) { width: 50px; }
  .scores-table th:nth-child(4), .scores-table th:nth-child(5) { width: 42px; }
  .hud { gap: 6px; }
  .scores-table td, .scores-table th { padding-inline: 5px; }
  .scores-table .name .who { display: block; margin: 1px 0 0 19px; line-height: 1.1; }
  .bar-row { grid-template-columns: 100px 1fr 28px; } /* ("Edge & holes" on one line) */
}

/* The smallest phones. The Hall of Fame takes more of the screen, so the
   names have room (they were cut to three letters) and each tab is one line. */
@media (max-width: 360px) {
  h1 { font-size: 1.45rem; }
  .hud .stat { font-size: 0.9rem; }
  .records { padding: 8px; }
  .records-card { padding: 12px; }
  .records-head { top: -9px; margin: -9px -9px 4px; padding: 9px 9px 8px; }
  .records-head .tab { padding-inline: 8px; white-space: nowrap; }
  .scores-table td, .scores-table th { padding-inline: 4px; }
}

/* The narrowest phones: the title, Score and Best still on one row ("Barkstreet Snakes" is longer than the old name). */
@media (max-width: 340px) {
  h1 { font-size: 1.25rem; }
  .hud .stat { font-size: 0.8rem; }
  header { column-gap: 6px; }
  .hud .stat + .stat { order: 0; min-width: 0; } /* (Best: four digits fit beside the title here) */
}
/* Touch, held upright: the buttons' row keeps room for Best's four digits
   at 341 px (five 44 px buttons, 6 px apart at least, as on its side). */
@media (pointer: coarse) and (max-width: 440px) {
  header { column-gap: 6px; }
}
/* Six buttons held upright (full screen, where the browser allows it, and
   the Field guide's door): six 44 px buttons take 294 px of the row, and
   Best keeps 72 for four digits, so under a 396 px phone Best wrapped onto
   a row of its own. With six, Best sits beside Score on the title's row, as
   on the narrowest phones, and the buttons have a row to themselves. The
   title is as big as leaves the two their room for four digits each (all
   1.7rem from a 400 px phone, 1.4rem at 360), and its line keeps its
   height, so the header's rows and the board stay where they were. */
@media (max-width: 440px) {
  header:has(#fullscreen:not([hidden])) .hud .stat + .stat { order: 0; min-width: 0; }
}
@media (min-width: 341px) and (max-width: 440px) {
  header:has(#fullscreen:not([hidden])) h1 { font-size: min(1.7rem, calc((100cqw - 183px) / 8.25)); line-height: 1.7rem; }
  header:has(#fullscreen:not([hidden])) .tagline { font-size: min(0.85rem, calc((100cqw - 183px) / 13.17)); } /* (on a phone taller than 720 px, where it shows: no wider than the title, so four digits fit beside it too; under 354 px it was wider, and at 1000 Score and Best went onto a row of their own) */
  header:has(#fullscreen:not([hidden])) .hud .stat { font-size: 0.9rem; }
}
@media (pointer: coarse) and (min-width: 341px) and (max-width: 440px) {
  header:has(#fullscreen:not([hidden])) h1 { font-size: min(1.7rem, calc((100cqw - 175px) / 8.25)); } /* (the gaps 6 px, not 10) */
  header:has(#fullscreen:not([hidden])) .tagline { font-size: min(0.85rem, calc((100cqw - 175px) / 13.17)); }
}
@media (min-width: 341px) and (max-width: 360px) {
  header:has(#fullscreen:not([hidden])) h1 { line-height: 1.45rem; }
}
/* Where the buttons' row has room, the Field guide is named: its word
   beside the trophy (from a 371 px phone with six buttons; with five, Best
   at the row's end, from 399, an iPhone Plus or Pro Max), and from 428 with
   six the Hall of Fame too. Narrower, each is its picture. */
@media (min-width: 371px) and (max-width: 440px) {
  header:has(#fullscreen:not([hidden])) #guide-open { padding: 5px 12px; }
  header:has(#fullscreen:not([hidden])) #guide-open svg { display: none; }
  header:has(#fullscreen:not([hidden])) #guide-open .trophy-text { display: inline; }
}
@media (min-width: 399px) and (max-width: 440px) {
  #guide-open { padding: 5px 12px; }
  #guide-open svg { display: none; }
  #guide-open .trophy-text { display: inline; }
}
@media (min-width: 428px) and (max-width: 440px) {
  header:has(#fullscreen:not([hidden])) #records-open { padding: 5px 12px; }
  header:has(#fullscreen:not([hidden])) #records-open svg { display: none; }
  header:has(#fullscreen:not([hidden])) #records-open .trophy-text { display: inline; }
}

/* Phones held upright under 800 px tall: no tagline (the chatter has its
   room; 390×844 and taller keep it). */
@media (max-width: 440px) and (max-height: 800px) {
  .tagline { display: none; }
}

/* Phones held upright: the board runs edge to edge (346 → 382 px on a
   390 px phone), its frame a thin rim, the moss and the corner leaves
   running off the screen's edges (clipped there, so nothing scrolls
   sideways); everything else keeps its 12 px margin from the screen's
   edge. The page is one screen tall: right under the board come the row
   under the board (the help, or the speed buttons, and the chatter's
   switch) and the chatter, folded to a strip of one row until a tap opens
   it to what's left, down to none (the owner's playtest: "The phone gap").
   The woodpecker perches at full size over that row (game/screen.js
   placeBoard): no ledge of its own. Where the screen is too short for the
   board edge to edge with that row (an iPhone SE with Safari's bars
   showing), the board is as big as fits over the row, centred. All of it
   is laid out for the screen with the browser's bars showing (svh), so the
   board doesn't change as they come and go (the chatter does: it's what's
   left). */
@media (max-width: 440px) {
  :root { --pad-t: max(8px, var(--safe-t)); --pad-b: max(8px, var(--safe-b)); }
  body { padding-left: var(--safe-l); padding-right: var(--safe-r); }
  main {
    --head: 160px; /* (what's above the board, until the page has measured it: the page's top, the header in two rows, the tags in two, and their margins) */
    /* (--above: what's above the frame, measured, whatever the header's
       rows and font: game/screen.js measureAbove. --room: the height for
       the board and the chatter, under that and over the row under the
       board. The board: as big as fits it, up to edge to edge) */
    --over-foot: 6px; /* (the gap over the row under the board) */
    --wide: calc(100vw - var(--safe-l) - var(--safe-r));
    --room: calc(100vh - var(--above, calc(var(--head) + max(0px, var(--safe-t) - 8px))) - var(--over-foot) - var(--foot) - var(--pad-b));
    --board: min(760px, max(240px, min(var(--wide), var(--room))));
    max-width: none;
    overflow-x: hidden; /* (before Safari 16) */
    overflow-x: clip;
  }
  /* (svh in a test of its own: a value with var() in it is only checked as
     it's used, so a browser without svh wouldn't drop a second declaration,
     it would lose the property) */
  @supports (height: 1svh) {
    main { --room: calc(100svh - var(--above, calc(var(--head) + max(0px, var(--safe-t) - 8px))) - var(--over-foot) - var(--foot) - var(--pad-b)); }
  }
  .frame { width: var(--board); margin-inline: auto; }
  header, .scoreboard, .foot, .chatter { margin-inline: 12px; }
  /* (slimmer than on a desktop: the header's two rows 4 px apart, 6 px
     under it and under the tags, the tags 25 px a row, as on its side) */
  header { row-gap: 0; margin-bottom: 6px; }
  header::after { height: 6px; } /* (the break between the rows is a row of its own: the gap, once) */
  .scoreboard { margin-bottom: 6px; gap: 4px; position: relative; z-index: 5; } /* (over the frame's top moss and corner leaves, which reach 12 px up into its 6 px gap: they hung over the second row's rims and hunger bars) */
  .scoreboard li { padding: 3px 7px 6px; font-size: 0.86rem; }
  .scoreboard .hunger { left: 7px; right: 7px; bottom: 2px; }
  .frame { padding: 4px; border-radius: 9px; }
  .moss.top { top: -12px; }
  .moss.bottom { bottom: -12px; }
  .leaves { width: 28px; height: 28px; } /* (their blades along the rim, never over a cell) */
  .leaves.tl { left: -10px; top: -10px; }
  .leaves.tr { right: -10px; top: -10px; }
  .leaves.bl { left: -10px; bottom: -10px; }
  .leaves.br { right: -10px; bottom: -10px; }
  /* (the ledge, laid out but 0 px tall: it says the page is held upright,
     and the bird stands over the row and the chatter, at full size) */
  .perch-ledge { display: block; height: 0; }
  .foot { margin-top: var(--over-foot); }
  /* Watching, the speed buttons take the help's place (it only says what
     they do, and how to nap: the nap button's in the header). */
  .speed:not([hidden]) + .help { display: none; }
  .chatter-head { margin-top: var(--over-foot); }
  .chatter[data-fit="strip"] .chatlog { margin-top: var(--over-foot); } /* (open or folded, the chatter keeps the row's own gap under the row: the buttons' rims never meet its panel) */
  /* (folded, a tap opens it: a caret at the strip's end says so; open, at
     its caption's) */
  .chatter[aria-expanded] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .chatter[aria-expanded] .chatlog { position: relative; padding-right: 26px; }
  .chatter.folded .chatlog::after, .chatter[aria-expanded="true"] .chatter-head::after, .chatter[aria-expanded="true"][data-fit="strip"] .chatlog::after {
    content: ''; position: absolute; right: 10px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
    border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .chatter[aria-expanded="true"] .chatter-head { position: relative; }
  .chatter[aria-expanded="true"] .chatter-head::after, .chatter[aria-expanded="true"][data-fit="strip"] .chatlog::after { margin-top: -2px; transform: rotate(-135deg); } /* (open: up, at its caption, or at the strip's end where it has no room for the caption) */
}
@media (max-width: 340px) {
  main { --head: 150px; } /* (the narrowest phones: the header in two rows, its title smaller) */
}
@media (max-width: 300px) {
  .speed > span { display: none; } /* (a Galaxy Fold folded, 280 px: the word, three buttons and the switch don't fit the row; the group's name, "Watching speed", says it) */
}
/* Phones less than 1.7 times as tall as wide (an iPhone SE or mini with
   Safari's bars showing, 375×548 to 635; a small Android with its browser's
   bars, 320×460; 390 and 414 px wide under about 660 and 700 tall): the
   row under the board is slimmer, its buttons 30 px tall (a fingertip's
   44 elsewhere) and the help's two lines closer, 2 px under the board and
   2 off the screen's bottom, and the page 4 px off its top, so the board is
   as big as the phones work made it on the shortest (280 at 320×460, 341
   at 375×548), and never smaller than it was before that (where the old
   page ran the row and the chatter off the screen: 320×460 by 254 px while
   you watched, 375×553 by 347), and an iPhone in Safari has a strip of
   chatter (375×635). */
@media (max-width: 440px) and (min-aspect-ratio: 10/17) {
  :root { --pad-t: max(4px, var(--safe-t)); --pad-b: max(2px, var(--safe-b)); }
  main { --over-foot: 2px; }
  header::after { height: 4px; }
  .foot .help { line-height: 1.15; }
}
@media (max-width: 440px) and (min-aspect-ratio: 10/17) and (pointer: coarse) {
  html main { --foot: 30px; } /* (over the touch screens' 44, below) */
  .foot button { min-height: 30px; }
}
/* (where the row under the board is closer than the moss and the corner
   leaves hang off the frame's bottom, any phone held upright ("The phone
   gap": the row right under the board), they're left off, as on its side:
   over the help and the switch they were clutter. game/screen.js
   placeBoard: .snug) */
.frame.snug .moss.bottom, .frame.snug .leaves.bl, .frame.snug .leaves.br { display: none; }

/* Wide screens up to 1180 px tall (laptops, a 1080p or 1200p desktop's
   browser, short windows, phones on their side): the header and tags sit
   beside the board, which takes the full height (up to 900 px), and the
   column beside it is as tall as the board: the header, the tags, the help
   on a row of its own, then the speed buttons and the chatter's switch, and
   the chatter in what's left (its whole lines, its caption first to go).
   (It went up to 900 px tall: a 1080p desktop's browser, 945 or 969 px,
   had the board over the chatter, 665 px, and with the chatter full the
   page ran 78 to 116 px past the screen.) */
@media (min-aspect-ratio: 5/4) and (max-height: 1180px) and (min-width: 480px) {
  main {
    container-type: normal; /* (sized by its content here: a size container would collapse it) */
    --board: min(900px, calc(100vh - 32px), calc(100vw - 260px));
    width: auto;
    max-width: none;
    height: var(--board);
    display: grid;
    grid-template-columns: minmax(180px, 300px) var(--board);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
  }
  header, .scoreboard, .foot, .chatter { grid-column: 1; }
  .frame { grid-column: 2; grid-row: 1 / -1; }
  .foot { grid-row: 3; margin-top: 0; flex-wrap: wrap; }
  .foot .help { order: -1; flex: 1 1 100%; } /* (a row of its own, the column's width; under it the speed buttons and the switch, which is then just over the chatter it switches) */
  .chatter { grid-row: 4; align-self: stretch; }
  .scoreboard { grid-template-columns: 1fr; }
  header { flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .brand { flex-basis: 100%; }
  .hud, .stats { display: contents; }
  .stats .stat { font-size: 1rem; }
  .stats .stat strong { min-width: 2ch; }
  .hud .stat { order: 0; }
  header::after { content: ''; order: 1; flex-basis: 100%; }
  .hud button { order: 2; }
  .trophy { min-width: 34px; padding: 0 8px; justify-content: center; }
  .trophy svg { display: block; }
  .trophy .trophy-text { display: none; }
  /* (dvh in a test of its own: a custom property takes any value, so a
     browser without dvh wouldn't drop a second declaration, it would lose
     the board's size) */
  @supports (height: 1dvh) {
    main { --board: min(900px, calc(100dvh - 32px), calc(100vw - 260px)); }
  }
}
/* Beside the board on a desktop (not a phone on its side, whose column is
   too short for it), the chatter reads like a chat: newest at the bottom,
   the panel growing with its lines down to the board's bottom edge, then
   scrolling, older lines fading at its top and a scroll (the wheel, or the
   bar) reading back. game/screen.js fitChatter sees the scroll and fades
   them (fadeChatter). The log keeps the round's last 50 lines
   (chatter/talk.js LOG_SIZE). (It stopped at 5 lines, with about 290 px
   empty under it at 1920×945.) */
@media (min-aspect-ratio: 5/4) and (max-height: 1180px) and (min-width: 480px) and (min-height: 501px) {
  .chatlog {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(246, 236, 210, 0.25) transparent;
  }
  .chatlog li { flex: none; }
}
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (max-height: 1180px) and (min-width: 480px) {
  header { column-gap: 6px; } /* (five buttons in a row, 44 px each on a touch screen, in a 244 px column; with a mouse they're 34 px, and keep their 10 px) */
}

/* Phones on their side: the board takes the full height less a thin rim
   (268 → 310 px with a phone's browser bars showing, about 380 in full
   screen), and the column beside it gets compact enough to fit the height
   too: no tagline, smaller words, the tags two by two, and the chatter
   taking what's left (its newest lines; the oldest are cut, and never
   into its padding). Nothing scrolls; the column keeps a hair off the
   screen's top and bottom. The woodpecker perches beside the board, in the
   gap or the margin. The frame's rim meets the screen's top and bottom,
   with no room for moss hanging off it, so the moss stays on the log, and
   the leaves rest beside its corners in the gap, on the column's side. */
@media (min-aspect-ratio: 5/4) and (max-height: 500px) and (min-width: 480px) {
  :root { --pad-t: var(--safe-t); --pad-b: var(--safe-b); }
  main {
    /* (--tall: the screen's height inside its safe area. The column takes
       all of it, though the board, on a screen under about 600 px wide,
       takes less: squeezed into the board's height, a full chatter had no
       room for a row of words) */
    --tall: calc(100vh - var(--safe-t) - var(--safe-b));
    --board: min(var(--tall), calc(100vw - 268px - max(12px, var(--safe-l)) - max(12px, var(--safe-r))));
    height: var(--tall);
    overflow: hidden; /* (before Safari 16) */
    overflow: visible clip; /* (clipped top and bottom only: a focus ring at the column's left edge stays whole) */
    gap: 0 24px; /* (the woodpecker's room, where the screen has no margin to spare: 24 px, and the column at least 244) */
  }
  header { grid-row: 1; margin-top: 6px; margin-bottom: 6px; row-gap: 4px; }
  .scoreboard { grid-row: 2; margin-bottom: 6px; gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* (the column's short: the help beside the switch, in smaller words;
     watching, the speed buttons have the row over them) */
  .foot { gap: 4px 8px; }
  .foot .help { order: 0; flex: 1 1 140px; font-size: 0.74rem; }
  main.help-yields .speed > span { display: none; } /* (where the help gives way, the switch has room beside the buttons without the word: the group's name says it) */
  .chatter { margin-bottom: 4px; } /* (4 px off the screen's bottom) */
  .chatter-head { margin-top: 4px; padding: 3px 10px 0; font-size: 0.8rem; }
  .chatlog { padding: 2px 10px 5px; font-size: 0.82rem; }
  .chatter[data-fit="strip"] .chatlog { margin-top: 4px; padding-top: 3px; }
  .frame { grid-row: 1 / -1; padding: 5px; border-radius: 12px; }
  h1 { font-size: 1.4rem; white-space: nowrap; }
  .tagline { display: none; }
  .hud .stat { font-size: 0.9rem; }
  .scoreboard li { padding: 3px 7px 6px; gap: 4px; font-size: 0.84rem; }
  .scoreboard .hunger { left: 7px; right: 7px; bottom: 2px; }
  .moss.top, .moss.bottom, .leaves.tr, .leaves.br { display: none; }
  .leaves { width: 24px; height: 24px; scale: -1 1; } /* (turned round: growing from the rim out into the gap) */
  .leaves.tl { left: -21px; top: 3px; }
  .leaves.bl { left: -21px; bottom: 3px; }
  @supports (height: 1dvh) {
    main { --tall: calc(100dvh - var(--safe-t) - var(--safe-b)); }
  }
}

/* The header over the board (wider than a phone, not beside the board):
   the title, Score over Best, and the buttons, in one row where they fit
   with 5 px to spare (Score and Best at four digits, for another system's
   fonts); narrower, the title with Score over Best has the first row and
   the buttons the next. A door is named where its row has room for its
   word, else it's its picture, round like the icons beside it (its name in
   its tooltip, and for a screen reader). The steps are the page's width,
   which is the window's less 24 px, or less on a short window, where the
   page narrows with the board (a 460×612 window's page is 352 px): with six
   buttons (full screen, where the browser allows it) and with five (an
   older Safari, a page in a frame without full screen, which had the
   doors' pictures where their words fit), a mouse's 34 px buttons and a
   touch screen's 44 px:

   | Page from (px)               | Mouse, six | five | Touch, six | five |
   | One row, both doors pictures | 592        | 552  | 652        | 602  |
   | ...the Field guide named     | 649        | 609  | 699        | 649  |
   | ...both named                | 716        | 676  | 756        | 706  |
   | ...the buttons 8 px apart    | 728        | 686  | 768        | 716  |
   | Two rows, both named         | 384        | 340  | 404        | 354  |
   | ...the Field guide named     | 317        | any  | 347        | 297  |
   | ...the title 2rem            | 352        | 352  | 348        | 348  |

   (Half a 1920×1080 screen, 960×945, is a 694 px page, and a 2560×1440
   screen's maximized browser a 900 px one; an iPad mini held upright 720,
   an iPad 744. A 1080p screen's maximized browser, 685 px and 653 with a
   bookmarks bar here, has the column beside the board now. In two rows
   the doors' words had the buttons' row from 280 px up, and narrower than
   384 px the full-screen button went onto a row of its own; under 352 the
   title went onto two lines beside Score and Best, 32 px. Under that the
   title is as big as leaves them their room, and under 299 px a touch
   screen's six buttons are 40 px, 4 apart, as in a narrow column.) */
@media (min-width: 441px) {
  @media not all and (pointer: coarse) {
    @container page (max-width: 551px) { /* two rows */
      header { justify-content: flex-start; row-gap: 0; }
      .brand { flex: 1; }
      .hud { display: contents; }
      header::after { content: ''; order: 1; flex-basis: 100%; } /* (the row's break: a line of its own, so no gap round it) */
      .hud button { order: 2; margin-top: 8px; }
    }
    @container page (min-width: 552px) and (max-width: 591px) {
      header:has(#fullscreen:not([hidden])) { justify-content: flex-start; row-gap: 0; }
      header:has(#fullscreen:not([hidden])) .brand { flex: 1; }
      header:has(#fullscreen:not([hidden])) .hud { display: contents; }
      header:has(#fullscreen:not([hidden]))::after { content: ''; order: 1; flex-basis: 100%; }
      header:has(#fullscreen:not([hidden])) .hud button { order: 2; margin-top: 8px; }
    }
    @container page (max-width: 351px) {
      h1 { font-size: min(2rem, calc((100cqw - 88px) / 8.25)); } /* (the title, 10 px, Score over Best's 72.75 and 5 to spare) */
    }
    @container page (max-width: 383px) {
      header:has(#fullscreen:not([hidden])) .hud #records-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen:not([hidden])) .hud #records-open svg { display: block; }
      header:has(#fullscreen:not([hidden])) .hud #records-open .trophy-text { display: none; }
    }
    @container page (max-width: 339px) {
      header:has(#fullscreen[hidden]) .hud #records-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen[hidden]) .hud #records-open svg { display: block; }
      header:has(#fullscreen[hidden]) .hud #records-open .trophy-text { display: none; }
    }
    @container page (max-width: 316px) {
      header:has(#fullscreen:not([hidden])) .hud #guide-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen:not([hidden])) .hud #guide-open svg { display: block; }
      header:has(#fullscreen:not([hidden])) .hud #guide-open .trophy-text { display: none; }
    }
    @container page (min-width: 592px) and (max-width: 727px) { /* one row */
      header:has(#fullscreen:not([hidden])) .hud { gap: 6px; }
    }
    @container page (min-width: 552px) and (max-width: 685px) {
      header:has(#fullscreen[hidden]) .hud { gap: 6px; }
    }
    @container page (min-width: 592px) and (max-width: 715px) {
      header:has(#fullscreen:not([hidden])) .hud #records-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen:not([hidden])) .hud #records-open svg { display: block; }
      header:has(#fullscreen:not([hidden])) .hud #records-open .trophy-text { display: none; }
    }
    @container page (min-width: 552px) and (max-width: 675px) {
      header:has(#fullscreen[hidden]) .hud #records-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen[hidden]) .hud #records-open svg { display: block; }
      header:has(#fullscreen[hidden]) .hud #records-open .trophy-text { display: none; }
    }
    @container page (min-width: 592px) and (max-width: 648px) {
      header:has(#fullscreen:not([hidden])) .hud #guide-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen:not([hidden])) .hud #guide-open svg { display: block; }
      header:has(#fullscreen:not([hidden])) .hud #guide-open .trophy-text { display: none; }
    }
    @container page (min-width: 552px) and (max-width: 608px) {
      header:has(#fullscreen[hidden]) .hud #guide-open { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; }
      header:has(#fullscreen[hidden]) .hud #guide-open svg { display: block; }
      header:has(#fullscreen[hidden]) .hud #guide-open .trophy-text { display: none; }
    }
  }
}
@media (pointer: coarse) and (min-width: 441px) {
  @container page (max-width: 601px) { /* two rows */
    header { justify-content: flex-start; row-gap: 0; column-gap: 6px; }
    .brand { flex: 1; }
    .hud { display: contents; }
    header::after { content: ''; order: 1; flex-basis: 100%; }
    .hud button { order: 2; margin-top: 8px; }
  }
  @container page (min-width: 602px) and (max-width: 651px) {
    header:has(#fullscreen:not([hidden])) { justify-content: flex-start; row-gap: 0; }
    header:has(#fullscreen:not([hidden])) .brand { flex: 1; }
    header:has(#fullscreen:not([hidden])) .hud { display: contents; }
    header:has(#fullscreen:not([hidden]))::after { content: ''; order: 1; flex-basis: 100%; }
    header:has(#fullscreen:not([hidden])) .hud button { order: 2; margin-top: 8px; }
    header:has(#fullscreen:not([hidden])) { column-gap: 6px; }
  }
  @container page (max-width: 347px) {
    h1 { font-size: min(2rem, calc((100cqw - 84px) / 8.25)); } /* (the gap 6 px, not 10) */
  }
  @container page (max-width: 403px) {
    header:has(#fullscreen:not([hidden])) .hud #records-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen:not([hidden])) .hud #records-open svg { display: block; }
    header:has(#fullscreen:not([hidden])) .hud #records-open .trophy-text { display: none; }
  }
  @container page (max-width: 353px) {
    header:has(#fullscreen[hidden]) .hud #records-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen[hidden]) .hud #records-open svg { display: block; }
    header:has(#fullscreen[hidden]) .hud #records-open .trophy-text { display: none; }
  }
  @container page (max-width: 346px) {
    header:has(#fullscreen:not([hidden])) .hud #guide-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen:not([hidden])) .hud #guide-open svg { display: block; }
    header:has(#fullscreen:not([hidden])) .hud #guide-open .trophy-text { display: none; }
  }
  @container page (max-width: 296px) {
    header:has(#fullscreen[hidden]) .hud #guide-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen[hidden]) .hud #guide-open svg { display: block; }
    header:has(#fullscreen[hidden]) .hud #guide-open .trophy-text { display: none; }
  }
  @container page (max-width: 298px) {
    header:has(#fullscreen:not([hidden])) { column-gap: 4px; }
    header:has(#fullscreen:not([hidden])) .hud :is(button, #guide-open, #records-open) { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; } /* (after the doors' pictures, which it takes in) */
  }
  @container page (min-width: 652px) and (max-width: 767px) { /* one row */
    header:has(#fullscreen:not([hidden])) .hud { gap: 6px; }
  }
  @container page (min-width: 602px) and (max-width: 715px) {
    header:has(#fullscreen[hidden]) .hud { gap: 6px; }
  }
  @container page (min-width: 652px) and (max-width: 755px) {
    header:has(#fullscreen:not([hidden])) .hud #records-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen:not([hidden])) .hud #records-open svg { display: block; }
    header:has(#fullscreen:not([hidden])) .hud #records-open .trophy-text { display: none; }
  }
  @container page (min-width: 602px) and (max-width: 705px) {
    header:has(#fullscreen[hidden]) .hud #records-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen[hidden]) .hud #records-open svg { display: block; }
    header:has(#fullscreen[hidden]) .hud #records-open .trophy-text { display: none; }
  }
  @container page (min-width: 652px) and (max-width: 698px) {
    header:has(#fullscreen:not([hidden])) .hud #guide-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen:not([hidden])) .hud #guide-open svg { display: block; }
    header:has(#fullscreen:not([hidden])) .hud #guide-open .trophy-text { display: none; }
  }
  @container page (min-width: 602px) and (max-width: 648px) {
    header:has(#fullscreen[hidden]) .hud #guide-open { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; }
    header:has(#fullscreen[hidden]) .hud #guide-open svg { display: block; }
    header:has(#fullscreen[hidden]) .hud #guide-open .trophy-text { display: none; }
  }
}

/* Beside the board (a laptop, a short window, a phone on its side), the
   column's width decides how the doors show: the header is its container.
   Its rows: the title, Score and Best, then the icons, the doors among them
   where the trophy always was. Six icons in a row need 254 px with a mouse,
   294 with touch; where they don't fit (the full-screen button wrapped onto
   a row of its own), it goes up a row (below). */
@media (min-aspect-ratio: 5/4) and (max-height: 1180px) and (min-width: 480px) {
  header { container: column / inline-size; }
  .hud .trophy { min-height: 34px; padding: 0 8px; } /* (as icons, round like the others beside them) */
}
/* A column tall enough gives the two doors, the Field guide's and the Hall
   of Fame's, a row of their own under the icons, each with its picture and
   its name (an icon alone was easy to miss: the trophy was the guide's only
   door). The row costs 50 px, so it's there only where the column still
   ends above the board's bottom with the chatter's log full (five lines): a
   window 700 px tall or more with a mouse, 780 with touch, and a column of
   236 px or more, where both names share the row. (The column is the
   board's height now, the chatter what's left of it: where it's short, the
   row costs the chatter a line, never a scroll.) */
@media not all and (pointer: coarse) {
  @media (min-aspect-ratio: 5/4) and (min-height: 700px) and (max-height: 1180px) and (min-width: 480px) {
    @container column (min-width: 236px) {
      .hud::before { content: ''; order: 3; flex-basis: 100%; } /* (the row's break: .hud has no box here, so its ::before is one of the header's items) */
      .hud .trophy { order: 4; gap: 5px; min-height: 34px; padding: 0 10px 0 8px; }
      .hud .trophy .trophy-text { display: inline; }
    }
  }
}
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (min-height: 780px) and (max-height: 1180px) and (min-width: 480px) {
  @container column (min-width: 236px) {
    .hud::before { content: ''; order: 3; flex-basis: 100%; }
    .hud .trophy { order: 4; gap: 5px; min-height: 44px; padding: 0 12px 0 10px; }
    .hud .trophy .trophy-text { display: inline; }
  }
}
/* Shorter, the doors stay in the icons' row. Where six icons don't fit at
   34 px with a mouse (a column under 254 px: a 4:3 or 5:4 window's 216 px,
   800×600 or 900×720; a window 230 to 250 px wider than tall, 920×690),
   they're 32 px, 4 px apart: 212 px, in the narrowest column's 216. (The
   full-screen button took the column's top corner there, beside the title,
   two lines in that column: the header was 176 px, 14 more than the phones
   work's 162 with five icons in a row, and at 920×690, watching, a full
   chatter scrolled the page 45 px.) With a touch screen's 44 px, where six
   don't fit, the full-screen button takes the corner: in a column that
   narrow (a tablet on its side in full screen, 244) the title is two lines
   already, and the button fits beside them; its row had cost 50 px. A touch
   column of 264 to 293 px, where the title is one line, has it end Score
   and Best's row instead (25 px taller, not 50). */
@media not all and (pointer: coarse) {
  @media (min-aspect-ratio: 5/4) and (min-height: 501px) and (max-height: 1180px) and (min-width: 480px) {
    @container column (max-width: 235px) {
      header:has(#fullscreen:not([hidden])) .hud button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; margin-right: -6px; } /* (4 px apart: the header's 10 less 6) */
    }
  }
  @media (min-aspect-ratio: 5/4) and (min-height: 501px) and (max-height: 699px) and (min-width: 480px) {
    @container column (max-width: 253px) {
      header:has(#fullscreen:not([hidden])) .hud button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; margin-right: -6px; }
    }
  }
}
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (min-height: 501px) and (max-height: 1180px) and (min-width: 480px) {
  @container column (max-width: 235px) {
    header:has(#fullscreen:not([hidden])) .brand { flex-basis: calc(100% - 50px); }
    .hud .stat { order: 1; }
    #fullscreen { order: 0; align-self: flex-start; }
  }
}
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (min-height: 501px) and (max-height: 779px) and (min-width: 480px) {
  @container column (max-width: 263px) {
    header:has(#fullscreen:not([hidden])) .brand { flex-basis: calc(100% - 50px); }
    .hud .stat { order: 1; }
    #fullscreen { order: 0; align-self: flex-start; }
  }
  @container column (min-width: 264px) and (max-width: 293px) {
    #fullscreen { order: 0; margin-left: auto; }
  }
}
/* A phone on its side (or a window 500 px tall or less) has no height to
   spare: the full-screen button takes the title's row, at the column's top
   corner (the smaller title leaves it 59 px or more), reaching down beside
   Score and Best, its margins keeping the row as tall as the title. The
   icons' row has the other five, and where it has room (a 297 px column, or
   273 with a mouse) the Field guide's word. */
@media (min-aspect-ratio: 5/4) and (max-height: 500px) and (min-width: 480px) {
  header:has(#fullscreen:not([hidden])) .brand { flex-basis: calc(100% - 44px); } /* (the title's row: the title, and the button 10 px after it) */
  .hud .stat { order: 1; } /* (Score and Best begin the next) */
  #fullscreen { order: 0; margin: 3.5px 0 calc(1.4rem - 37.5px); } /* (34 px, centred on the title's and the scores' rows: 3.5 px down, its outer height the title's 1.4rem) */
  @container column (min-width: 273px) {
    .hud #guide-open { padding: 0 12px; }
    .hud #guide-open svg { display: none; }
    .hud #guide-open .trophy-text { display: inline; }
  }
}
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (max-height: 500px) and (min-width: 480px) {
  header:has(#fullscreen:not([hidden])) .brand { flex-basis: calc(100% - 50px); } /* (6 px apart) */
  #fullscreen { margin: -1.5px 0 calc(1.4rem - 42.5px); } /* (44 px: 1.5 px above the title's row) */
  @container column (max-width: 296px) {
    .hud #guide-open { padding: 0; }
    .hud #guide-open svg { display: block; }
    .hud #guide-open .trophy-text { display: none; }
  }
}
/* A laptop's column with five icons (no full screen: an older Safari, a
   page in a frame) has the sixth's room for the Field guide's word, as on
   a phone on its side: from a 273 px column with a mouse (1366×657's is
   300), 297 with touch. (It was its book there, the row 90 px short of full.) */
@media not all and (pointer: coarse) {
  @media (min-aspect-ratio: 5/4) and (min-height: 501px) and (max-height: 699px) and (min-width: 480px) {
    @container column (min-width: 273px) {
      header:has(#fullscreen[hidden]) .hud #guide-open { padding: 0 12px; }
      header:has(#fullscreen[hidden]) .hud #guide-open svg { display: none; }
      header:has(#fullscreen[hidden]) .hud #guide-open .trophy-text { display: inline; }
    }
  }
}
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (min-height: 501px) and (max-height: 779px) and (min-width: 480px) {
  @container column (min-width: 297px) {
    header:has(#fullscreen[hidden]) .hud #guide-open { padding: 0 12px; }
    header:has(#fullscreen[hidden]) .hud #guide-open svg { display: none; }
    header:has(#fullscreen[hidden]) .hud #guide-open .trophy-text { display: inline; }
  }
}
/* (On a touch screen, five 44 px buttons share a 244 px column's row: 6 px
   apart; the doors are a fingertip's 44 px too. A narrower column, 216 to
   243 px, a 4:3 or 5:4 touch screen in full screen, has them 40 px, 4 px
   apart: at 44 the trophy wrapped onto a row of its own.) */
@media (pointer: coarse) and (min-aspect-ratio: 5/4) and (max-height: 1180px) and (min-width: 480px) {
  header { column-gap: 6px; }
  .hud .trophy { min-height: 44px; }
  @container column (max-width: 243px) {
    header .hud button, header .hud .trophy { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; margin-inline: -1px; } /* (4 px apart: the header's gap less 2) */
  }
}

/* Touch: comfortable targets. */
@media (pointer: coarse) {
  main { --foot: 44px; } /* (the row under the board: the switch and the speed buttons a fingertip's height) */
  button, .text-button, button.link, input { min-height: 44px; }
  button.small, .speed button, .tab, .close, button.icon { min-width: 44px; }
  .speed { gap: 10px; }
  .note-close { top: 0; right: 0; width: 36px; height: 36px; } /* (a fingertip's room, in the note's corner) */
  .opponents .seat, .lobby-players .seat { min-height: 30px; }
  .opponents .unpin { min-height: 0; } /* (a seat's pin: as tall as its seat, by its padding, not a 44 px button's) */
  .lobby-players .seat { margin: -4px 0; } /* (the lobby's: as tall, the row no taller than a friend's) */ /* (the start card's seats: a fingertip's room, without the card outgrowing a phone's board) */
}

/* Reduced motion: no pops, rises or rumbles; the information stays. */
@media (prefers-reduced-motion: reduce) {
  .card, .overlay, .badge, .records-card, .rival-note, .scoreboard li.starving::after { animation: none !important; }
  .toast { animation: toast-fade-in 0.2s ease-out; } /* (a banner only fades, in and out) */
  .toast.leaving, .toast.settled.leaving { animation: toast-fade-out 0.24s ease-in forwards; }
  .toast.settled { animation: none; }
  .guide li.spot { animation: none; background: rgba(253, 230, 138, 0.55); } /* (lit, and it stays lit) */
  h1 .snake-s *, .leaves, .frame-sheen > i, #start::after, .chatlog li, .bubble > span, .scoreboard li.leader .len::before { animation: none !important; }
  .scoreboard li.starving::after { opacity: 1; }
  button, button:active { transition: none; transform: none; }
  .toast, .steer-hint { transition: none; }
}

/* Windows High Contrast: keep outlines and the colored dots. */
@media (forced-colors: active) {
  button { border: 1px solid ButtonText; }
  .tab[aria-pressed="true"], .speed button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .dot, .hunger i, .bar-fill { forced-color-adjust: none; }
  .name-row input, .lobby input { border: 1px solid FieldText; }
  .name-row input:focus-visible, .lobby input:focus-visible { outline: 2px solid Highlight; }
  h1 .snake-s { color: inherit; } /* (the plain letter: the drawing keeps its own colours, so it goes) */
  #voices-toggle::before, #chatter-toggle::before { forced-color-adjust: none; background: ButtonText; } /* (the switch's bubble in the button's own text colour) */
  h1 .snake-s > i { display: none; }
}