/* The coach's line (#297; the kit's Game/Coach.cs) for every game that keeps it in the top column
   (.coach-line; Tipping Point has its own, .tp-coach). One rule on every screen: while coaching lasts
   (a browser's first two matches of the game) the line has a fixed slot in the top column, under
   the bar (and the chips): the same height and width the whole match, speaking or not, so the board
   never moves when a line comes or goes. It is in the layout (data-hud: the camera fits the board
   under it), never over the board. A line longer than the slot is cut to it ("…"), never let to grow
   it: the lines are written to fit at 200 % text, and coach-slot.spec.ts checks every one. After
   coaching there is no slot, and the HUD is laid out as if there had never been one.
   --coach-rows: the slot's rows on this screen (on :root, so the feed and Outlier's task can follow
   it): one on a big screen, where a line of the longest words at 200 % text still fits across;
   --coach-h: the slot's height, for the same. */
:root {
  --coach-rows: 1;
  --coach-font: max(var(--fs-small), 0.9em);
  --coach-h: calc(var(--coach-rows) * 1.35 * var(--line-k) * var(--coach-font) + 0.3em);
}

.coach-line {
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--coach-rows);
  line-clamp: var(--coach-rows);
  overflow: hidden;
  flex: none;
  width: min(94vw, 48em);
  height: calc(var(--coach-rows) * 1.35em * var(--line-k) + 0.3em);
  margin-top: 0.25em;
  padding: 0.15em 0.6em;
  border-radius: var(--r-m);
  text-align: center;
  font-size: var(--coach-font);
  font-weight: 700;
  line-height: calc(1.35 * var(--line-k));
  pointer-events: none;
}

.coach-line svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
}

/* A key or a badge no taller than its row, so a row with one is as tall as one without. */
.coach-line kbd,
.coach-line .pb {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  line-height: calc(1.2 * var(--line-k));
  vertical-align: 0.05em;
}

/* A black card (A · Console, #414); in high contrast a white edge drawn inside it, so the slot keeps
   its size. */
.coach-line:not(:empty) {
  background: var(--ui);
}

.high-contrast .coach-line:not(:empty) {
  box-shadow: inset 0 0 0 2px var(--ui-line);
}

@media (max-width: 599px) and (orientation: portrait),
  (max-height: 499px) and (orientation: landscape) {
  :root {
    --coach-font: var(--fs-small);
    --coach-h: calc(
      var(--coach-rows) * 1.35 * var(--line-k) * var(--fs-small) + 0.4 * var(--fs-small)
    );
  }

  .pg-top:has(> .coach-line) {
    z-index: 2;
  }

  /* Under the bar and the chips; the bar's own limit (hud-layout.css keeps its words clear of the
     pause button) is not for this slot. */
  .pg-top > .coach-line[data-hud] {
    max-width: none;
    margin-top: calc(var(--strip-h) + 2px);
    padding: 0.2em 0.8em;
    height: calc(var(--coach-rows) * 1.35em * var(--line-k) + 0.4em);
  }

  .coach-line:not(:empty) {
    background: linear-gradient(var(--ui), var(--ui)), var(--bg);
  }

  /* While a line is showing it stands in for the touch hint under the bar: the hint's letters would
     peek out round it. */
  html:has(.coach-line:not(:empty)) .pg-hints [data-hint='touch'] {
    visibility: hidden;
  }

  /* A banner follows under the slot, so "Yellow Pyramid is it!" never hides behind it. The feed's
     place is the same: while a banner shows (a few seconds), the feed waits. */
  .pg-top:has(> .coach-line) .pg-banner {
    margin-top: 4px;
  }

  html:has(.coach-line):has(.pg-banner.show) .pg-feed {
    visibility: hidden;
  }

  /* The feed is not in that column: it goes under the slot, and never higher than its own place
     under the touch hint (hud-layout.css), which shows over the empty slot and can be taller. */
  html:has(.coach-line) .pg-feed {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 2px + var(--coach-h) + 6px);
  }

  html:has(#touch):has(.coach-line) .pg-feed {
    top: calc(
      var(--sa-t) + var(--bar-h) + var(--strip-h) +
        max(2px + var(--coach-h) + 6px, 22px + var(--fs-small) * 1.4 * var(--line-k))
    );
  }
}

/* Upright: a band as wide as the phone, over the touch hint's rows. Three rows (a name never breaks
   inside itself, so "Purple Dodecahedron is on the bench…" takes three at 200 %), two at the usual
   text sizes. */
@media (max-width: 599px) and (orientation: portrait) {
  :root {
    --coach-rows: calc(2 + clamp(0, (var(--scale) - 1.45) * 100, 1));
  }

  .pg-top > .coach-line[data-hud] {
    width: 100vw;
    border-radius: 0;
  }

  /* Arabic's letters run wider than Latin ones: at 200 % the longest lines take a fourth row (#84;
     Dodgecahedron's bench line took four in the fit checks' Arabic letters). */
  :root:lang(ar) {
    --coach-rows: calc(
      2 + clamp(0, (var(--scale) - 1.45) * 100, 1) + clamp(0, (var(--scale) - 1.95) * 100, 1)
    );
  }
}

/* On its side: between the side strips, so a line takes two rows at most; a banner (a few seconds)
   lies over the slot, not over the floor, and the line is there again after it. */
@media (max-height: 499px) and (orientation: landscape) {
  :root {
    --coach-rows: calc(1 + clamp(0, (var(--scale) - 1.2) * 100, 1));
  }

  .pg-top > .coach-line[data-hud] {
    width: calc(100vw - var(--sa-l) - var(--sa-r) - 140px);
  }

  .pg-top:has(> .coach-line) > :is(#pg-banner-wrap, #sg-banner-wrap) {
    position: absolute;
    z-index: 3;
    top: calc(var(--bar-h) + 2px);
    left: 50%;
    width: max-content;
    max-width: 70vw;
    transform: translateX(-50%);
  }

  .pg-top:has(> .coach-line) > :is(#pg-banner-wrap, #sg-banner-wrap) .pg-banner {
    max-width: 100%;
    margin-top: 0;
    padding: 0.1em 0.8em;
    font-size: var(--fs-small);
    line-height: calc(1.25 * var(--line-k));
  }
}

/* The feed never covers the board (#297) in Part C's games (Tessellate, Blast Radius, Perimeter,
   Collinear). On a phone, either way up, it has a place of its own above the board (.feed-room: an
   empty box the camera keeps out of, under the touch hint's row), and shows only the newest line
   about you, cut to the place's rows (one, two at large text). While coaching lasts it shows in the
   coach's slot instead (the line covers it while it speaks), so the board loses no more. On a big
   screen it stays in the end column, over the cards' column and never across the board; the cards
   start under its room (hud-layout.css). */
.feed-room {
  display: none;
}

@media (min-width: 600px) and (min-height: 500px) {
  .pg-hud:has(> .feed-room) .pg-feed {
    max-width: var(--col-w);
  }

  .pg-hud:has(> .feed-room) .pg-feed-line {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0;
  }
}

@media (max-width: 599px) and (orientation: portrait),
  (max-height: 499px) and (orientation: landscape) {
  /* On the HUD, so the feed sees them too. */
  .pg-hud:has(> .feed-room) {
    --feed-rows: calc(1 + clamp(0, (var(--scale) - 1.2) * 2, 1));
  }

  .pg-hud > .feed-room {
    --hud-side: top;
    display: block;
    position: absolute;
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h));
    inset-inline-start: 0;
    width: 1px;
    height: calc(
      (
          var(--feed-top) + (var(--feed-rows) * 1.4 * var(--line-k) + 0.4) *
            max(var(--fs-small), calc(12px * var(--hud-scale))) + 6px
        ) *
        var(--feed-on, 1)
    );
    pointer-events: none;
  }

  /* Cut to the place's rows by design: the place keeps its height so the board never moves, and
     what does not fit wraps out of sight whole (the fit checks read --cut, tests/e2e/fit.ts). */
  .pg-hud:has(> .feed-room) .pg-feed-line {
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 16px);
    max-height: calc((var(--feed-rows) * 1.4 * var(--line-k) + 0.4) * 1em);
    overflow: hidden;
    --cut: by-design;
    row-gap: 0;
    white-space: nowrap;
    line-height: calc(1.4 * var(--line-k));
  }

  /* The newest line about you; the older ones would push it down over the board. */
  .pg-hud:has(> .feed-room) .pg-feed-line:not(:nth-child(1 of .mine)) {
    display: none;
  }

  .pg-hud:has(> .feed-room) .pg-feed,
  html:has(#touch) .pg-hud:has(> .feed-room) .pg-feed {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + var(--feed-top));
  }

  /* While coaching lasts: the slot's rows hold the feed's newest line, under the coach's line. */
  .pg-hud:has(.coach-line) > .feed-room {
    display: none;
  }

  .pg-hud:has(> .feed-room):has(.coach-line) .pg-feed,
  html:has(#touch) .pg-hud:has(> .feed-room):has(.coach-line) .pg-feed {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 2px);
    font-size: var(--fs-small);
  }

  .pg-hud:has(> .feed-room):has(.coach-line) .pg-feed-line {
    --feed-rows: var(--coach-rows);
    box-sizing: border-box;
    max-height: var(--coach-h);
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    line-height: calc(1.35 * var(--line-k));
  }

  /* A line about you over the touch hint's row: the hint steps aside, as it does for the coach. */
  html:has(.feed-room):has(.coach-line):has(.pg-feed-line.mine:not(.gone))
    .pg-hints
    [data-hint='touch'] {
    visibility: hidden;
  }
}

/* Under the touch hint's rows: two upright (it wraps at large text), one on its side. */
@media (max-width: 599px) and (orientation: portrait) {
  .pg-hud:has(> .feed-room) {
    --feed-top: calc(var(--fs-small) * 2.7 * var(--line-k) + 12px);
  }
}

/* A short upright phone (360 × 640) at large text has no rows to spare: the HUD would be more than
   the camera allows, and it would squeeze the whole board under it. No place there. */
@media (max-width: 599px) and (orientation: portrait) and (max-height: 699px) {
  .pg-hud:has(> .feed-room) {
    --feed-on: clamp(0, (1.45 - var(--scale)) * 100, 1);
  }
}

@media (max-height: 499px) and (orientation: landscape) {
  .pg-hud:has(> .feed-room) {
    --feed-top: calc(var(--fs-small) * 1.4 * var(--line-k) + 22px);
  }
}