/* The match HUD on every screen size (#72 musts 5 and 6, #71). The HTML is the same everywhere
   (Game/HudLayout.cs); these rules lay it out:
   - big screens: cards down the sides, timer in the top middle (app.css);
   - tablet portrait: the cards in rows under the timer;
   - xs (a phone upright, under 600 px wide): a 44 px top bar, a 28 px strip of chips that
     scrolls sideways, a drawer with the full cards on a tap, only events about you in the feed;
   - s-land (a phone on its side, under 500 px tall): a 40 px top bar and side strips at most
     64 px wide, the same drawer.
   Boxes that stay on screen carry data-hud; js/hud-layout.ts measures them and the camera fits
   the arena into the rest, so no HUD box covers the arena. Safe areas (notch, rounded corners,
   home bar) are kept clear on phones, and a TV's (overscan) on a TV. */

:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

/* A TV (1800 px wide and up, or TV mode): the match keeps inside the TV's safe area as the menus do
   (tokens.css --safe-*: 5 % of each side, where a TV's overscan may cut the picture). Each part keeps
   its own margin from the edge (about 1rem) or the safe area, whichever is more; at big text the
   margins are more already (#502). */
@media (min-width: 1800px) {
  :root {
    --sa-t: max(var(--env-top), var(--safe-top) - 1rem);
    --sa-r: max(var(--env-right), var(--safe-right) - 1rem);
    --sa-b: max(var(--env-bottom), var(--safe-bottom) - 1rem);
    --sa-l: max(var(--env-left), var(--safe-left) - 1rem);
  }
}

/* TV mode on a smaller screen (a pad drives it), but never a phone's bar and strips. */
@media (min-width: 600px) and (min-height: 500px) {
  :root.tv {
    --sa-t: max(var(--env-top), var(--safe-top) - 1rem);
    --sa-r: max(var(--env-right), var(--safe-right) - 1rem);
    --sa-b: max(var(--env-bottom), var(--safe-bottom) - 1rem);
    --sa-l: max(var(--env-left), var(--safe-left) - 1rem);
  }
}

/* The bottom's boxes stand closer to the edge than 1rem (and the hints' last row takes its 0.25em of
   margin back, hints.css): on a TV their margin or the safe area, whichever is more. The round's pill
   and Pause do the same at the top (app.css). The hint bar and the coach's line are at most as wide
   as the safe area: at big text they ran to 90 % and 94 % of the screen. */
@media (min-width: 1800px) {
  :root :is(.pg-hints, .sg-bottom) {
    bottom: max(1.1em, calc(var(--safe-bottom) + 0.25em));
  }

  :root .pg-hints {
    max-width: min(
      calc(min(90vw, 60em) + 1.1em),
      calc(100vw - var(--safe-left) - var(--safe-right))
    );
  }

  :root :is(.coach-line, .tp-coach) {
    width: min(94vw, 48em, calc(100vw - var(--safe-left) - var(--safe-right)));
  }
}

@media (min-width: 600px) and (min-height: 500px) {
  :root.tv :is(.pg-hints, .sg-bottom) {
    bottom: max(1.1em, calc(var(--safe-bottom) + 0.25em));
  }

  :root.tv .pg-hints {
    max-width: min(
      calc(min(90vw, 60em) + 1.1em),
      calc(100vw - var(--safe-left) - var(--safe-right))
    );
  }

  :root.tv :is(.coach-line, .tp-coach) {
    width: min(94vw, 48em, calc(100vw - var(--safe-left) - var(--safe-right)));
  }
}

/* Where a line starts and ends (#84): the left and right safe areas, swapped right to left. */
:root,
[dir='ltr'] {
  --sa-s: var(--sa-l);
  --sa-e: var(--sa-r);
}

:root[dir='rtl'] {
  --sa-s: var(--sa-r);
  --sa-e: var(--sa-l);
}

/* A card column's width and its distance from the screen's edge (as app.css's panels, in rem), and
   the room between the columns, where a banner wraps (never narrower than a few words). Phones and
   tablets upright set their own --mid-w. */
:root {
  --col-x: 1.4rem;
  --col-w: min(14rem, 50vw - 2rem);
  --mid-w: max(
    6rem,
    calc(100vw - var(--sa-l) - var(--sa-r) - 2 * (var(--col-x) + var(--col-w) + 0.8rem))
  );
  /* The pill's room: the screen less the Pause pill (and the code chip) at both ends. */
  --pause-room: 12rem;
  --top-w: calc(100vw - var(--sa-l) - var(--sa-r) - 2 * (var(--col-x) + var(--pause-room)));
}

@media (min-width: 1800px) {
  :root {
    --col-w: min(11rem, 50vw - 2rem);
  }
}

:root.tv {
  --col-w: min(11rem, 50vw - 2rem);
}

/* Big screens: the players block is only a wrapper; the panels sit at the sides (app.css). */
.hud-players {
  display: contents;
}

.hud-bar {
  display: none;
}

/* The code in the pause menu: phones only, a bigger screen has the chip. */
.pause-code {
  display: none;
}

.pg-left {
  inset-inline-start: calc(1.4em + var(--sa-s));
}

.pg-right {
  inset-inline-end: calc(1.4em + var(--sa-e));
}

.pg-pause-btn {
  top: calc(1.1rem - 2 * var(--pill-y) + var(--sa-t));
  inset-inline-end: calc(1.4em + var(--sa-e));
}

/* One popup at a time where the feed is: while a banner or a message shows, the feed waits, out of
   sight only (opacity, not visibility): it is an aria-live area, so its lines are still read out. */
.pg-hud:has(.pg-banner.show) .pg-feed,
html:has(#toast.show) .pg-feed {
  opacity: 0;
}

/* The feed's line has no room above the bottom's boxes (js/hud-layout.ts feedRoom): the hints step
   aside, at once and keeping their room, so the line never shows over them; they come back after. */
:root.feed-low:not(.hints-paused) .pg-hints {
  opacity: 0;
  transition: none;
}

/* A line that would reach a box that stays (Siegeometry's amount bar) waits out of sight, still read
   out; the frame checks fail on it. */
.pg-feed-line.no-room {
  opacity: 0;
  transition: none;
}

/* ------------------------------------------------------------ big screens: the card columns
   The cards stand in a band between the boxes at the top and at the bottom (--hud-top, --hud-bottom:
   js/hud-layout.ts), so a card never runs under Pause, the pill, the coach's line, the hints or
   Siegeometry's amount bar, however tall those grow at big text (#428, #222, #443). When a column's
   cards do not fit its band, js/hud-layout.ts folds them a step (data-fold on the HUD, the steps
   taken so far: "1", "1 2", "1 2 3"): 1, the name on one line and no who-plays-it line; 2, chips two
   by two with the shape and the main number, as on a phone; 3, three a row, the number alone. The
   band takes no room itself (--hud-skip); its panels do, at their sides. With the touch controls
   (a tablet on its side) the cards stay as they were: the controls take the sides' lower corners,
   not a band at the bottom, and touch.css keeps Siegeometry's column over its meter. */
@media (min-width: 600px) and (min-height: 500px) and (orientation: landscape),
  (min-width: 1200px) and (min-height: 500px) {
  :where(html:not(:has(#touch))) .hud-players {
    --hud-fold: 1;
    --hud-skip: 1;
    display: block;
    position: absolute;
    inset-inline: 0;
    top: var(--hud-top, 4rem);
    bottom: var(--hud-bottom, 4rem);
  }

  :where(html:not(:has(#touch))) .pg-panel {
    --hud-skip: 0;
    top: 0;
    bottom: 0;
    transform: none;
    justify-content: center;
  }

  /* At big text Pause is its sign and its keys (its name stays for screen readers). */
  :root[data-fit='narrow'] {
    --pause-room: 7rem;
  }

  /* At big text the cards fold to chips (below), so their columns are narrower: the room between
     them is wide enough for a banner or a message (at 200 % on a TV it was a few words wide, and a
     message stood as a tall column over Siegeometry's amount bar, #478). Siegeometry's tutorial
     coach goes across the top there (solo.css, #523); a challenge's coach (not .tutorial) still stands
     over the left cards, as wide as them, so there they keep their width (#219). */
  :root[data-fit='narrow']:not(:has(#touch, .sg-coach:not(.hidden, .tutorial))) {
    --col-w: min(9rem, 50vw - 2rem);
  }

  :root[data-fit='narrow']:not(:has(#touch, .sg-coach:not(.hidden, .tutorial))) .pg-panel {
    width: var(--col-w);
  }

  /* At big text the hints take turns (js/hud-layout.ts: each turn for 4 s, a used one skipped). A
     turn is one box (Game/HintBar.cs .hint-turn: each input's hints, then the goal and Esc;
     Siegeometry: each line); the turns share one place, so the bar is as tall as the tallest of them
     and never changes size: one on a line each, they filled half a TV with eight players and four
     kinds of input (#478). A bar of one turn (no input's hint: only the goal and Esc) keeps its
     hints side by side, as at any other size. */
  :root[data-fit='narrow']:not(:has(#touch)) .pg-hints:has(> .hint-turn ~ .hint-turn) {
    display: grid;
    justify-items: center;
  }

  :root[data-fit='narrow']:not(:has(#touch)) .pg-hints:has(> .hint-turn ~ .hint-turn) > .hint-turn {
    display: block;
    grid-area: 1 / 1;
  }

  /* A turn's hints run on as one text (the goal, then Esc on its last line), so the bar is as tall as
     the longest hint, as when each input's took its turn alone. */
  :root[data-fit='narrow']:not(:has(#touch))
    .pg-hints:has(> .hint-turn ~ .hint-turn)
    > .hint-turn
    > .hint {
    display: inline;
  }

  :root[data-fit='narrow']:not(:has(#touch))
    :is(.pg-hints, .sg-bottom):has(> .hint-turn ~ .hint-turn)
    > .hint-turn:not(.turn) {
    visibility: hidden;
  }

  /* Siegeometry: its amount bar, and under it every input's line of hints in one place. */
  :root[data-fit='narrow']:not(:has(#touch)) .sg-bottom {
    display: grid;
    justify-items: center;
  }

  :root[data-fit='narrow']:not(:has(#touch)) .sg-bottom > .pg-hints {
    grid-area: 2 / 1;
  }

  /* Its turns (each line of hints is a turn of its own, straight in .sg-bottom) run on as one text,
     as every other game's do: as boxes of a hint a line, the tallest turn kept the amount bar half way
     up a 1080p TV at 200 % with eight players, under the message (#552). */
  :root[data-fit='narrow']:not(:has(#touch))
    .sg-bottom:has(> .hint-turn ~ .hint-turn)
    > .hint-turn {
    display: block;
    text-align: center;
  }

  :root[data-fit='narrow']:not(:has(#touch))
    .sg-bottom:has(> .hint-turn ~ .hint-turn)
    > .hint-turn
    > .hint {
    display: inline;
  }

  :root[data-fit='narrow'] .pg-pause-btn span {
    display: none;
  }

  /* The round line (and a game's own pill, which wraps) keeps clear of Pause. */
  :is(.pg-round, .br-top, .cl-top, .pm-top) {
    max-width: var(--top-w);
  }

  /* On one line, as before: a line that wrapped as its words change would move the coach's slot and
     the board under it. Too long for its room (a long round line at big text), it ends in "…". */
  .pg-round {
    overflow-x: clip;
    text-overflow: ellipsis;
  }

  :where(html:not(:has(#touch))) .pg-left {
    --hud-side: start;
  }

  :where(html:not(:has(#touch))) .pg-right {
    --hud-side: end;
  }

  /* The feed: at the top of the room between the columns, on the end side, clear of the cards (it
     waits while a banner or a message shows there, above). */
  .pg-feed {
    top: var(--hud-top, 3.6rem);
    inset-inline-end: calc(var(--col-x) + var(--sa-e) + var(--col-w) + 0.8rem);
    max-width: var(--mid-w);
  }

  .pg-feed-line {
    justify-content: flex-end;
  }

  /* At big text (or on a short screen: a TV at 150 %, whose frame keeps inside the safe area) a
     banner is in the smallest label size, so it keeps to fewer lines in the room. */
  :root:is([data-fit='narrow'], [data-fit-y='short']) .pg-banner {
    font-size: var(--fs-small);
  }

  :root:is([data-fit='narrow'], [data-fit-y='short']) .pg-banner b {
    font-size: 1em;
  }

  /* At big text (or on a short screen) the room between the columns is small and a banner or a
     message runs long: the hints step aside while one shows (keeping their room, so nothing moves),
     and come back after. They go at once, so a banner or message fading in never lies over hints
     still fading out (#552). */
  :root:is([data-fit='narrow'], [data-fit-y='short']):has(.pg-banner.show, #toast.show) .pg-hints {
    opacity: 0;
    transition-duration: 0s;
  }

  /* At big text fewer lines (the newest): three would reach far down the board. */
  :root[data-fit='medium'] .pg-feed-line:nth-child(n + 3),
  :root[data-fit='narrow'] .pg-feed-line:not(:first-child) {
    display: none;
  }

  /* Part C's boards (coach.css, .feed-room) keep the feed over the end column, never across the
     board: its two newest lines, each cut to two rows by design (the room keeps its height, a longer
     line wraps out of sight whole: the fit checks read --cut, tests/e2e/fit.ts), and the columns
     start under their room. At big text there is no room for that above eight cards: the feed's one
     line goes where the other games have it, at the top of the room between the columns. */
  :root:not([data-fit='narrow']) .pg-hud:has(> .feed-room) {
    --feed-room: calc((5.6 * var(--line-k) + 1.1) * max(var(--fs-small), 0.8rem) + 0.6rem);
  }

  :root:not([data-fit='narrow']) .pg-hud:has(> .feed-room) .pg-feed {
    inset-inline-end: calc(var(--col-x) + var(--sa-e));
  }

  :root[data-fit='narrow'] .pg-hud:has(> .feed-room) .pg-feed {
    max-width: var(--mid-w);
  }

  .pg-hud:has(> .feed-room) .pg-feed-line:nth-child(n + 3) {
    display: none;
  }

  :root:not([data-fit='narrow']) .pg-hud:has(> .feed-room) .pg-feed-line {
    --cut: by-design;
    max-height: calc((2.8 * var(--line-k) + 0.4) * 1em);
    overflow: hidden;
    line-height: calc(1.4 * var(--line-k));
  }

  /* On a big screen (a TV at 1080p) the cut line keeps its 0.2em above and below as a transparent
     border, not padding, and 0.4em between its rows: a row that does not fit then starts out of
     sight, and so do the marks over its letters (accents, Arabic's), with no sliver in the padding
     (#705). Phones keep the line as it was (their frame fits around it). */
  @media (min-width: 1200px) {
    :root:not([data-fit='narrow']) .pg-hud:has(> .feed-room) {
      --feed-room: calc((5.6 * var(--line-k) + 1.9) * max(var(--fs-small), 0.8rem) + 0.6rem);
    }

    :root:not([data-fit='narrow']) .pg-hud:has(> .feed-room) .pg-feed-line {
      box-sizing: border-box;
      padding-block: 0;
      border-block: 0.2em solid transparent;
      row-gap: 0.4em;
      max-height: calc((2.8 * var(--line-k) + 0.8) * 1em);
    }
  }

  :where(html:not(:has(#touch))) .pg-hud:has(> .feed-room) .hud-players {
    top: calc(var(--hud-top, 4rem) + var(--feed-room, 0px));
  }

  /* Siegeometry's amount bar at big text: the amounts without their keys (the hints say 1 – 4), so
     it keeps to one line between the columns (#222). */
  :root[data-fit='narrow'] :is(.sg-pill, .sg-ability) kbd {
    display: none;
  }

  /* A banner or a message wraps in the room between the columns, but never narrower than 400 px (or
     the screen): at 200 % on a 720p laptop the columns leave a few words' room, and a message there
     stood as a tall column of single words, off the screen. A TV at 200 % has more room than that. */
  :root {
    --pop-w: max(var(--mid-w), min(92vw, 400px));
  }

  /* A message in a match: at the top of the room between the columns, where the feed is (the feed
     waits); at its foot while a banner has the top. */
  html:has(.pg-hud) .toast {
    top: var(--hud-top, 5.6em);
    max-width: var(--pop-w);
  }

  html:has(.pg-banner.show) .toast {
    top: auto;
    bottom: var(--hud-bottom, 4rem);
  }

  /* Over the pause menu or the results: at the foot of the safe area, as wide as it may be (a line or
     two), and the dialog keeps room for two of its lines above it, so it never lies over the dialog's
     buttons; the dialog scrolls in the rest (#550; a phone does the same, #294). It was at the HUD's
     bottom band, which at 200 % on a TV is half way up the pause menu. */
  :root {
    --toast-font: max(var(--fs-small), 0.85rem);
    --toast-room: calc(
      var(--safe-bottom) + 24px + (2 * 1.35 * var(--line-k) + 0.8) * var(--toast-font)
    );
  }

  html:has(#pg-pause:not(.hidden), #pg-results:not(.hidden)) .toast {
    top: auto;
    bottom: calc(var(--safe-bottom) + 12px);
    max-width: min(40em, calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
    /* Two lines at most, the room the dialog keeps (a longer one ends in "…"). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  html:has(#toast.show) #pg-pause:not(.hidden),
  html:has(#toast.show) #pg-results:not(.hidden):has(> .pg-dialog.results) {
    padding-bottom: var(--toast-room);
  }

  /* Siegeometry's perk draft in the same overlay keeps its own top: it scrolls in what the message
     leaves, above and below. */
  html:has(#toast.show) #pg-results:not(.hidden) > .sg-draft {
    max-height: calc(100vh - 2 * var(--toast-room));
  }

  html:has(#toast.show) #pg-pause:not(.hidden) > .pg-dialog {
    max-height: 100%;
  }

  /* At big text the hints have stepped aside for the banner (above): the message takes their room,
     above any other box at the bottom (Siegeometry's amount bar: --hud-floor, js/hud-layout.ts). */
  :root:is([data-fit='narrow'], [data-fit-y='short']):has(.pg-banner.show):not(
      :has(#pg-pause:not(.hidden), #pg-results:not(.hidden))
    )
    .toast {
    bottom: max(var(--hud-floor, 0px), calc(var(--safe-bottom, 0px) + 1.1 * var(--fs-small)));
  }

  /* Fold 1: the name on one line ("…"), no who-plays-it line, tighter. */
  .pg-hud[data-fold~='1'] .pg-card {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  }

  .pg-hud[data-fold~='1'] :is(.pg-you, .pg-card-sub) {
    display: none;
  }

  .pg-hud[data-fold='1'] .pg-card-name {
    white-space: nowrap;
    overflow-x: clip;
    text-overflow: ellipsis;
  }

  /* The name itself is cut at its card's edge (and at fold 2's one pixel, where it is only for
     screen readers): unseen, the rest of a long name ran on past the screen's edge from the
     right-hand column (a TV cannot scroll sideways; the narrower columns at big text cut more
     names, #478). */
  .pg-hud[data-fold~='1'] .pg-card-name > bdi {
    display: inline-block;
    max-width: 100%;
    overflow-x: clip;
    text-overflow: ellipsis;
  }

  /* Fold 2: chips two by two, the shape and the main number (the phone's chips, below). */
  .pg-hud[data-fold~='2'] .pg-panel {
    flex-flow: row wrap;
    align-content: center;
    gap: 0.4rem;
  }

  .pg-hud[data-fold~='2'] .pg-card {
    width: calc(50% - 0.2rem);
    gap: 0.3em;
    padding-block: 0.15em;
    padding-inline: 0.4em;
    font-size: var(--fs-small);
  }

  .pg-hud[data-fold~='2'] .pg-card-icon svg {
    width: 1.2em;
    height: 1.2em;
  }

  .pg-hud[data-fold~='2'] :is(.sg-meter, .tg-share .bar) {
    display: none;
  }

  /* The name goes from sight only (as .sr-only, app.css): the shape's icon is aria-hidden, so a screen
     reader still says whose chip it is, not just its number. */
  .pg-hud[data-fold~='2'] .pg-card-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .pg-hud[data-fold~='2'] .pg-card-stats {
    margin: 0;
    gap: 0.2em;
  }

  .pg-hud[data-fold~='2'] .pg-card-stats :is(.kos, .status, .powers) {
    display: none;
  }

  .pg-hud[data-fold~='2'] .sg-card .pg-card-stats > span:not(:first-child) {
    display: none;
  }

  .pg-hud[data-fold~='2'] .tg-card .pg-card-stats {
    display: none;
  }

  .pg-hud[data-fold~='2'] .tg-share {
    width: auto;
    margin: 0;
  }

  .pg-hud[data-fold~='2'] .tg-share b {
    min-width: 0;
  }

  /* Fold 3: three a row, the number without its word (Siegeometry's units, as a phone's chip). */
  .pg-hud[data-fold~='3'] .pg-card {
    width: calc((100% - 0.8rem) / 3);
  }

  .pg-hud[data-fold~='3'] .sg-card .pg-card-stats > span:first-child {
    font-size: 0;
  }

  .pg-hud[data-fold~='3'] .sg-card .pg-card-stats b {
    font-size: var(--fs-small);
  }

  /* A screen under 1200 px wide at big text (a 1024×768 screen at 200 %): the chips one under another
     in a column of its own width, room for the shape, a mark and four digits (seven of the small
     label's size). Two a row took 324 px a side, more than the camera lets the HUD take (js/scene.ts
     MAX_HUD_SHARE), so the board ran under them (#544). The width never follows the numbers: the
     columns are the HUD's insets, and the camera glides on any change of them, so the board would
     breathe as a number gained a digit (#560 review). A chip that needs more folds to three, which
     drops its word (Siegeometry's units; js/hud-layout.ts), in the same column: fold 3's own three a
     row in --col-w would bring the wide columns back, over the camera's share, the board under them
     and a "100" cut (#560 review). (Its weight is the narrower columns' rule's, an id's, through
     :has(#touch).) The cards whole (before fold 2) keep that width too: at fold 1 a column of
     --col-w was 324 px as well, and Golden Ratio's cards stay there until one grows (#560 review).
     Not under a challenge's coach, which stands over the left column as wide as it (#219); under the
     tutorial's, across the top, yes (solo.css, #523). */
  @media (max-width: 1199.98px) {
    :root[data-fit='narrow']:not(:has(#touch, .sg-coach:not(.hidden, .tutorial))) .pg-panel {
      width: min(var(--col-w), calc(7 * var(--fs-small)));
    }

    :root[data-fit='narrow']:not(:has(#touch)) .pg-hud[data-fold~='2'] .pg-panel {
      flex-flow: column nowrap;
      align-items: stretch;
      width: min(var(--col-w), calc(7 * var(--fs-small)));
    }

    :root[data-fit='narrow']:not(:has(#touch)) .pg-hud[data-fold~='2'] .pg-card {
      width: auto;
    }
  }
}

/* ------------------------------------------------------------ tablet portrait: cards in rows */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1199px) {
  :root {
    --mid-w: 92vw;
  }

  .hud-players {
    position: absolute;
    top: calc(var(--sa-t) + 4.4em);
    inset-inline-start: calc(var(--sa-s) + 1em);
    inset-inline-end: calc(var(--sa-e) + 1em);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
  }

  .pg-panel {
    display: contents;
  }

  .pg-card {
    width: 14em;
    padding: 0.5em 0.7em;
  }

  /* With the touch controls: the touch hint has the line under the timer, the cards start under
     it, and they are narrower (four in a row, so 8 players take 2 rows, not 3), which leaves the
     arena more of the screen (#70). */
  html:has(#touch) .hud-players {
    top: calc(var(--sa-t) + 3.4em + var(--fs-small) * 1.4 * var(--line-k) + 12px);
    gap: 0.4em;
  }

  html:has(#touch) .pg-card {
    width: calc(25% - 0.6em);
    min-width: 9.5em;
    padding: 0.35em 0.5em;
    font-size: max(var(--fs-small), 0.85em);
  }
}

/* ------------------------------------------------------------ phones (xs and s-land) */
@media (max-width: 599px) and (orientation: portrait),
  (max-height: 499px) and (orientation: landscape) {
  /* On :root, not the HUD: the toast and the reconnect note sit beside it and use them too (#261). */
  :root {
    /* The text setting grows the phone HUD up to 125 %, so the bar and strip still fit. */
    --hud-scale: min(var(--scale), 1.25);
    --bar-h: 44px;
    --strip-h: calc(28px * max(1, var(--hud-scale)));
    --mid-w: calc(100vw - var(--sa-l) - var(--sa-r) - 12px);
    /* The touch hint's rows under the bar: two from 130 % text, where it wraps. */
    --hint-rows: calc(1 + clamp(0, (var(--scale) - 1.3) * 100, 1));
  }

  .hud-bar {
    display: block;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: calc(var(--sa-t) + var(--bar-h));
    background: var(--ui);
    border-bottom: 1px solid var(--ui-line);
  }

  .pg-top {
    top: var(--sa-t);
  }

  /* The bar is their pill. */
  :is(.pg-round, .sg-timer, .tg-clock, .br-top, .cl-top, .pm-top):not(:empty) {
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .pg-round,
  .sg-timer,
  .tg-clock {
    display: flex;
    align-items: center;
    gap: 0.3em;
    height: var(--bar-h);
    font-size: calc(22px * var(--hud-scale));
    line-height: calc(1 * var(--line-k));
  }

  .pg-round span {
    font-size: calc(14px * var(--hud-scale));
  }

  /* The round line (and a game's own top line) keeps clear of Pause on a phone too (#708): the
     big-screen rule's room for Pause is in rem, which the text setting grows, so here it is Pause's
     own place, 6 px in, 48 px wide, and a 6 px gap, at both ends. Too long, it ends in "…" (a game's
     own line wraps). */
  :root {
    --top-w: calc(100vw - var(--sa-l) - var(--sa-r) - 2 * (6px + 48px + 6px));
  }

  :is(.pg-round, .br-top, .cl-top, .pm-top) {
    max-width: var(--top-w);
  }

  .pg-round {
    overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-pause-btn {
    top: calc(var(--sa-t) + 4px);
    inset-inline-end: calc(var(--sa-e) + 6px);
    height: calc(var(--bar-h) - 8px);
    min-width: 48px;
    padding-block: 0;
    padding-inline: 0.8em;
    justify-content: center;
    font-size: calc(15px * var(--hud-scale));
  }

  .pg-pause-btn span,
  .pg-pause-btn kbd,
  .pg-pause-btn .pb {
    display: none;
  }

  /* No room in the bar for the code: the menu shows it (#261). */
  .code-chip {
    display: none;
  }

  .pause-code {
    display: block;
  }

  /* The bar's text stays between the edge and the pause button, on both sides so it stays centred
     (#261): the game's long sub-line gives way first, with "…". Cut sideways only (clip, not
     hidden): a tall letter (an accent, Arabic) draws whole above and below its line (#84). A
     clipped box sizes to its text unless told otherwise (hidden did not): min-width 0 lets it give
     way. Safari 15 has no clip: hidden there, the "…" kept. */
  .pg-top > [data-hud='top'] {
    min-width: 0;
    max-width: calc(100vw - 2 * (var(--sa-r) + var(--sa-l) + 60px));
    overflow-x: clip;
  }

  .pg-top > [data-hud='top'] > span {
    min-width: 0;
    overflow-x: clip;
    text-overflow: ellipsis;
  }

  /* A clock at the start of the line (Infectagon, Tipping Point, Golden Ratio, Shadow Drop) never
     gives way: the words after it do (#501). */
  .pg-top > [data-hud='top'] > [role='timer'] {
    flex: none;
    overflow-x: visible;
  }

  @supports not (overflow-x: clip) {
    .pg-top > [data-hud='top'],
    .pg-top > [data-hud='top'] > span {
      overflow: hidden;
    }
  }

  /* While a banner has the room under the bar, a message goes to the foot: just over the touch
     controls upright, between them on its side (--hud-bottom, --hud-sides: js/hud-layout.ts). */
  html:has(.pg-banner.show) #toast {
    top: auto;
    bottom: var(--hud-bottom, calc(var(--sa-b) + 12px));
    max-width: calc(100vw - 2 * max(var(--hud-sides, 0px), 6px));
  }

  /* Over a menu or the results a message would cover their title: it goes to the bottom. It is the
     only place these words are ("Waiting for the host's phone…", a Play again that failed, a refusal). */
  html:has(#pg-pause:not(.hidden)) #toast,
  html:has(#pg-results:not(.hidden)) #toast {
    top: auto;
    bottom: calc(var(--sa-b) + 12px);
  }

  /* A dialog that fills the screen makes room while a message shows, so its sticky buttons stay clear
     of it (#294): two lines of the toast, and its gap. */
  html:has(#toast.show) #pg-pause:not(.hidden),
  html:has(#toast.show) #pg-results:not(.hidden) {
    padding-bottom: calc(var(--sa-b) + 18px + 13px * var(--hud-scale) * 3.6);
  }

  /* Short popups go just under the HUD; never under the text floor (#231). */
  .pg-banner {
    font-size: max(var(--fs-small), calc(13px * var(--hud-scale)));
  }

  /* As wide as its line, up to the screen (centred from the middle, it would stop at half). */
  .pg-feed {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 10px);
    inset-inline: auto;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: var(--mid-w);
    align-items: center;
    font-size: max(var(--fs-small), calc(12px * var(--hud-scale)));
  }

  /* With the touch controls the touch hint has the line under the bar (hints.css): the feed goes
     one line lower, so the two never draw over each other (#70). */
  html:has(#touch) .pg-feed,
  html:has(#touch) .toast {
    top: calc(
      var(--sa-t) + var(--bar-h) + var(--strip-h) + 22px + var(--fs-small) * 1.4 * var(--line-k) *
        var(--hint-rows)
    );
  }

  /* Only the events about a seat played here (a phone shows one player). */
  .pg-feed-line:not(.mine) {
    display: none;
  }

  .toast {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 10px);
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-hints {
    bottom: calc(var(--sa-b) + 6px);
    max-width: 94vw;
    font-size: max(var(--fs-small), calc(11px * var(--hud-scale)));
  }

  .sg-bottom {
    bottom: calc(var(--sa-b) + 6px);
    gap: 4px;
  }

  .sg-fraction {
    gap: 2px;
    padding: 3px;
  }

  .sg-pill {
    min-width: 48px;
    min-height: 40px;
    padding: 0 6px;
    font-size: calc(14px * var(--hud-scale));
  }

  .sg-pill kbd,
  .sg-ability kbd {
    display: none;
  }

  .sg-ability {
    min-height: 40px;
    margin-inline-start: 2px;
    font-size: calc(14px * var(--hud-scale));
  }

  /* Chips: the shape, the main number; your own chip has a ring. */
  .pg-hud:not(.drawer-open) .pg-card {
    flex: none;
    gap: 4px;
    padding-block: 0;
    padding-inline: 5px 8px;
    height: calc(var(--strip-h) - 2px);
    border-radius: 13px;
    border-inline-start-width: 1px;
    font-size: calc(13px * var(--hud-scale));
    pointer-events: auto;
    cursor: pointer;
  }

  .pg-hud:not(.drawer-open) .pg-card:has(.pg-you) {
    box-shadow: inset 0 0 0 2px var(--c);
  }

  .pg-hud:not(.drawer-open) .pg-card-icon svg {
    width: 15px;
    height: 15px;
  }

  .pg-hud:not(.drawer-open) :is(.pg-card-name, .pg-card-sub, .sg-meter, .tg-share .bar) {
    display: none;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats {
    margin: 0;
    gap: 3px;
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-hud:not(.drawer-open) .pg-card-stats :is(.kos, .status, .powers) {
    display: none;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats .pips {
    gap: 2px;
    flex-wrap: wrap;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats .pips i {
    width: 7px;
    height: 7px;
    border-width: 2px;
  }

  /* Siegeometry: the units only; Tessellate: the share only. */
  .pg-hud:not(.drawer-open) .sg-card .pg-card-stats > span:not(:first-child) {
    display: none;
  }

  .pg-hud:not(.drawer-open) .sg-card .pg-card-stats > span:first-child {
    font-size: 0;
  }

  .pg-hud:not(.drawer-open) .sg-card .pg-card-stats b,
  .pg-hud:not(.drawer-open) .tg-share b {
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-hud:not(.drawer-open) .tg-share {
    width: auto;
    margin: 0;
  }

  .pg-hud:not(.drawer-open) .tg-share b {
    min-width: 0;
  }

  .pg-hud:not(.drawer-open) .tg-card .pg-card-stats {
    display: none;
  }

  /* The drawer: every full card over the arena; a tap anywhere on it closes it. */
  .pg-hud.drawer-open .hud-players {
    position: absolute;
    z-index: 6;
    top: calc(var(--sa-t) + var(--bar-h) + 4px);
    inset-inline-start: calc(var(--sa-s) + 6px);
    inset-inline-end: calc(var(--sa-e) + 6px);
    height: auto;
    max-height: calc(100% - var(--sa-t) - var(--bar-h) - var(--sa-b) - 10px);
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
    align-content: start;
    gap: 0.5em;
    padding: 0.6em;
    overflow-y: auto;
    border-radius: 0.9em;
    border: 1px solid var(--ui-line);
    background: var(--bg);
    box-shadow: 0 1em 3em var(--shadow);
    pointer-events: auto;
    cursor: pointer;
  }

  .pg-hud.drawer-open .pg-panel {
    display: contents;
  }

  .pg-hud.drawer-open .hud-players::after {
    /* The words are the block's data-close (Tx: HudLayout.cs). */
    content: attr(data-close);
    grid-column: 1 / -1;
    text-align: center;
    font-size: max(var(--fs-small), 0.75em);
    color: var(--ui-dim);
  }

  /* Pause and results: inside the safe area, scroll inside, the buttons always in reach. */
  .pg-overlay {
    padding-block: max(6px, var(--sa-t)) max(6px, var(--sa-b));
    padding-inline: max(6px, var(--sa-s)) max(6px, var(--sa-e));
  }

  .pg-dialog {
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 0;
    background: var(--bg);
  }

  .pg-actions {
    position: sticky;
    z-index: 1;
    bottom: 0;
    margin: 0.5em -0.5em 0;
    padding: 0.5em 0.5em 0.9em;
    background: var(--bg);
    box-shadow: 0 -0.6em 0.8em var(--bg);
  }

  .pg-actions .btn {
    min-height: 44px;
  }
}

/* No keyboard on a touch phone: its key hints only take room; the touch hint stays (hints.css
   puts it under the top bar, #72 must 8). */
@media (max-width: 599px) and (orientation: portrait) and (pointer: coarse),
  (max-height: 499px) and (orientation: landscape) and (pointer: coarse) {
  .pg-hints .hint:not([data-hint='touch']) {
    display: none;
  }

  /* Paused: the pause menu says it all; the touch hint would draw over its buttons (#70). */
  .hints-paused .pg-hints {
    display: none;
  }
}

/* ------------------------------------------------------------ xs: the chip strip */
@media (max-width: 599px) and (orientation: portrait) {
  .hud-players {
    position: absolute;
    top: calc(var(--sa-t) + var(--bar-h));
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: calc(var(--strip-h) + 4px);
    display: flex;
    align-items: center;
    gap: 4px;
    padding-block: 0;
    padding-inline: calc(var(--sa-s) + 6px) calc(var(--sa-e) + 6px);
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    pointer-events: auto;
    cursor: pointer;
  }

  .hud-players::-webkit-scrollbar {
    display: none;
  }

  .pg-panel {
    display: contents;
  }

  .pg-banner {
    margin-top: calc(var(--strip-h) + 8px);
  }

  .sg-bottom {
    width: calc(100% - 12px - var(--sa-l) - var(--sa-r));
  }

  .sg-fraction {
    width: 100%;
  }

  .sg-pill,
  .sg-ability {
    flex: 1;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ s-land: side strips */
@media (max-height: 499px) and (orientation: landscape) {
  :root {
    --bar-h: 40px;
    --strip-h: 0px;
    /* Between the side strips (64 px, 4 px off the edge) with a gap: a banner, the feed, a message. */
    --mid-w: calc(100vw - var(--sa-l) - var(--sa-r) - 152px);
  }

  .toast {
    max-width: var(--mid-w);
  }

  .pg-panel {
    top: calc(var(--sa-t) + var(--bar-h) + 6px);
    transform: none;
    width: auto;
    gap: 4px;
    max-height: calc(100% - var(--sa-t) - var(--bar-h) - var(--sa-b) - 12px);
    overflow-y: auto;
    scrollbar-width: none;
    pointer-events: auto;
  }

  .pg-left {
    inset-inline-start: calc(var(--sa-s) + 4px);
  }

  .pg-right {
    inset-inline-end: calc(var(--sa-e) + 4px);
  }

  /* A chip per player down each side: shape and number in a row, 26 px tall, so four fit
     above the touch controls' buttons. */
  .pg-hud:not(.drawer-open) .pg-card {
    justify-content: center;
    width: 60px;
    height: calc(26px * max(1, var(--hud-scale)));
    padding: 0 4px;
    border-radius: 10px;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats {
    justify-content: center;
  }

  /* Arabic (#84 A6): a chip's words run longer than English's («نقاط: 0» for "0 pts"), so the chip
     grows a little instead of breaking its number onto a third line its height cuts off; each stat
     stays whole and the pips wrap above it, as in English. */
  :root:lang(ar) .pg-hud:not(.drawer-open) .pg-card {
    width: auto;
    min-width: 60px;
    max-width: 88px;
  }

  :root:lang(ar) .pg-hud:not(.drawer-open) .pg-card-stats > * {
    white-space: nowrap;
  }

  /* The touch controls take the lower part of both sides. */
  html:has(#touch) .pg-panel {
    max-height: calc(50% - var(--sa-t) - var(--bar-h) - 10px);
  }

  /* Pause and results on a short screen: smaller title and rows, so the buttons fit. */
  .pg-dialog {
    min-width: 0;
    width: min(38em, 100%);
    padding: 0.7em 1.2em 0;
  }

  .pg-dialog h2 {
    font-size: 1.5em;
  }

  /* The pause buttons in two rows (Resume, then the four pages), so the list ends above the
     End match / Quit footer (#70). Big text (data-fit narrow) keeps one column and scrolls. */
  :root:not([data-fit='narrow']) .pause-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4em;
    margin-top: 0.5em;
  }

  /* With Full screen (#87) the second row has five. */
  :root[data-fs]:not([data-fit='narrow']) .pause-menu {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :root:not([data-fit='narrow']) .pause-menu .fs-btn {
    grid-column: auto;
  }

  .pause-by {
    margin: 0 0 0.2em;
  }

  .pg-why {
    margin: 0 0 0.4em;
  }

  .pg-table {
    margin-bottom: 0.3em;
  }

  .pg-table td {
    padding: 0.15em 0.5em;
  }
}