/* ==========================================================================
   type-race.css — type race's arena (src/assets/js/games/type-race/view.mjs),
   inside the table games.css draws: the words, three lines at a time; under
   them a line about your own typing (the 3-2-1, then your speed); and on a
   touch screen the field that brings the keyboard up. The text is characters,
   so the picture is characters: green once typed, a small tile on the one to
   type next, ink for what is to come. Every class here is .tr-*.
   ========================================================================== */

/* One left edge for the whole arena — the words start there, and so does everything said about
   them (the shell centres an arena's contents; a text is read from its left). */
.tr {
  --tr-line: calc(30 * var(--s, 1px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(14 * var(--s, 1px));
  text-align: start;
}

/* ---- The words ------------------------------------------------------------------
   Mono, large enough to read ahead in, ragged right across the column (sixty-odd characters;
   thirty on a phone). A window of three lines — view.mjs slides the block of lines up under it as
   the typing goes down, so the line being typed stays in view above a phone's keyboard.
   break-spaces: the space that ends a line keeps its width and stays inside the box, so the cursor
   can stand on it and be seen, and no line begins with one. Not selectable: a board, not prose.
   The few pixels of padding (taken back by the margin) are room for the cursor's hairline at the
   start of a line. */
.tr-text {
  padding-inline: calc(3 * var(--s, 1px));
  margin-inline: calc(-3 * var(--s, 1px));
  max-block-size: calc(3 * var(--tr-line));
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: calc(19 * var(--s, 1px));
  font-variant-ligatures: none;
  line-height: var(--tr-line);
  white-space: break-spaces;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
/* The slide is the answer to a key that took the cursor onto a new line; put in place for any other
   reason (a new race, the column changing width) the block does not travel. */
.tr-lines--glide { transition: translate 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .tr-lines--glide { transition: none; }
}
/* Typed: green, from the key that typed it, and it stays green — every finished word stands green
   behind the cursor, and at the end the whole text does. */
.tr-done { color: var(--green); }
/* To come: ink while it is yours to type — the most legible thing on the screen. Before the start
   and after the end it is only to be read: muted. */
.tr[data-phase="count"] .tr-rest,
.tr[data-phase="over"] .tr-lines,
.tr[data-phase="out"] .tr-lines { color: var(--ink-muted); }
/* The character to type next: a tile one character wide — an outline and a tint, which take no
   room of their own, so the lines never re-wrap. Through the count-in it is a green hairline round
   an ink letter: the place to start. Once typing opens it fills a touch, like a picked tile in 24.
   On a touch screen whose keyboard is not up no key can reach it, and it waits in grey (the green
   is on the field to tap). Red for as long as a wrong letter stands (see .tr-bad below). */
.tr-cur {
  color: var(--ink);
  outline: 1px solid var(--green);
  outline-offset: 0;
}
.tr-cur:empty { outline: 0; }
.tr[data-phase="race"] .tr-cur { background: color-mix(in srgb, var(--green) 14%, transparent); }
.tr[data-keys="off"] .tr-cur {
  color: var(--ink-muted);
  outline-color: var(--ink-muted);
  background: none;
}
.tr[data-phase="race"] .tr-cur--miss {
  color: var(--red);
  outline-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
/* A wrong key stays until it is deleted: the cursor's letter is red for as long as one stands, and
   each further wrong key reddens one more letter after it — a red run exactly as long as the
   Backspaces it will take (the line under the game says so in words, never colour alone). */
.tr[data-phase="race"] .tr-bad {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
/* Once there is nothing left to type, nothing marks a place to type it. */
.tr[data-phase="done"] .tr-cur,
.tr[data-phase="over"] .tr-cur,
.tr[data-phase="out"] .tr-cur {
  color: inherit;
  outline: 0;
  background: none;
}

/* ---- The line about your typing ----------------------------------------------
   One cell for two things: the count-in, then the two lines about your own typing. One is shown at
   a time and neither is taller than the cell's forty design pixels, so nothing moves — not when
   the race starts, not when the seconds left appear, not at the finish. */
.tr-read {
  display: grid;
  justify-items: start;
  align-items: start;
  min-block-size: calc(40 * var(--s, 1px));
}
.tr-count,
.tr-live {
  grid-area: 1 / 1;
  min-inline-size: 0;
  max-inline-size: 100%;
}
.tr[data-read="live"] .tr-count,
.tr[data-read="count"] .tr-live { display: none; }
/* The 3-2-1, set as pig sets a turn's total: the big digit, and beside it in small grey what to do
   when it runs out. The digit's place is two characters wide, so the words beside it stay put when
   "1" becomes "go" — which is green: the moment typing opens. The words sit on the digit's
   baseline by their last line, so in a window too narrow for them on one line the second goes up
   beside the digit, not down out of the cell. */
.tr-count {
  display: flex;
  align-items: baseline;
  align-items: last baseline;
  gap: 1.2ch;
}
.tr-count-n {
  flex: none;
  min-inline-size: 2ch;
  font-size: calc(40 * var(--s, 1px));
  font-weight: 500;
  line-height: 1;
}
.tr[data-phase="race"] .tr-count-n { color: var(--green); }
.tr-count-sub {
  line-height: calc(18 * var(--s, 1px));
  text-wrap: pretty;
}
/* Two lines of twenty. The first: "47 wpm" in a place of its own width, then the misses, so
   neither number moves the other ("finished — 62 wpm" in green once you are home). The second,
   kept even while empty: the seconds left once the end is in sight, in ink, on one line whatever
   the width — the time in a place of its own, so the words after it stand still as it counts down
   and are what a narrow screen cuts. */
.tr-stats,
.tr-clock {
  block-size: calc(20 * var(--s, 1px));
  line-height: calc(20 * var(--s, 1px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-speed {
  display: inline-block;
  min-inline-size: 7ch;
  margin-inline-end: 2ch;
}
.tr[data-phase="done"] .tr-speed {
  color: var(--green);
  font-weight: 500;
}
.tr-clock {
  font-size: calc(13 * var(--s, 1px));
  font-weight: 500;
  color: var(--ink);
}
.tr-clock-time {
  display: inline-block;
  min-inline-size: 15ch;
}
.tr-clock-time:empty { display: none; }

/* ---- The keyboard's field (a touch screen's only) ------------------------------------
   As wide as the words, a thumb tall, and never holding what is typed — its caret hidden, since
   the cursor to watch is the one in the words. Its own words say what to do: "tap here to type"
   in green, the one thing to do, until it has the focus; then, quietly, where to look. With the
   focus it wears the site's ring alone (its own hairline steps aside, so it is one box, not two).
   16px type (g-input), so iOS does not zoom in on it. Its cell keeps the field's height after the
   field has gone (the text is typed), so nothing below moves — until the results come up over the
   arena and everything has moved anyway: then the empty cell goes too. */
.tr-pad { min-block-size: calc(44 * var(--s, 1px)); }
.tr[data-phase="over"] .tr-pad { display: none; }
.tr-field {
  display: block;
  inline-size: 100%;
  min-block-size: calc(44 * var(--s, 1px));
  text-align: center;
  caret-color: transparent;
}
.tr-field::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.tr-field:focus { border-color: transparent; }
/* The field holds the wrong letters that stand (so the keyboard's delete key has them to delete): in
   red, and its one ring red with them (the focus ring while the keyboard is up, the border otherwise). */
.tr-field--bad {
  color: var(--red);
  border-color: var(--red);
}
.tr-field--bad:focus {
  border-color: transparent;
  outline-color: var(--red);
}
.tr[data-keys="off"] .tr-field { border-color: var(--green); }
.tr[data-keys="off"] .tr-field::placeholder {
  color: var(--green);
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .tr-pad { display: none; }
}