/* Coach page: Zen's stage with the coach panel as a fourth column, right
   of the next queue. The well's height cap also takes the panel's width
   out, so the four columns fit; the stage stays centred, which moves the
   well left of centre. Below 900px the panel goes under the stage.

   The coach is Coach T. Its logo sits over the panel's top-left corner,
   and its name before each coaching message is in its colour, --coach-t.
   The review's board he picked as the best glows in the I's, --coach-i. */

body.page-coach {
  --mode: var(--mino-J);
  /* The T tile's colour, lightened for text on the dark panel the way
     theme.css lightens every page colour for its accents. */
  --coach-t: color-mix(in srgb, var(--mino-T) 62%, #fff);
  /* The I tile's colour as it is: a frame, not text, and light enough on
     the panel. */
  --coach-i: var(--mino-I);
}

.page-coach .game-layout {
  --coach-w: clamp(20.75rem, 26vw, 24rem);
  --well-h: min(
    calc(100vh - var(--topbar-h) - 2 * var(--pad-y) - 0.5rem),
    calc((100vw - 4.95rem - var(--coach-w) - 1.4rem) * 1.155)
  );
}

.stage--coach {
  grid-template-columns:
    minmax(0, var(--side-w)) auto minmax(0, var(--next-w)) minmax(0, var(--coach-w));
}

/* --logo-x and --logo-y place the logo's box against the panel's corner. */
.coach-panel {
  --logo: 3.5rem;
  --logo-x: -1rem;
  --logo-y: -1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Coach T's logo: a T in the game's tiles, bar on top like the letter,
   turned 20 degrees counter-clockwise on an off-white disc in a black ring.
   The shadow falls down and to the right of the whole disc; only the T
   turns, so the shadow does not. */
.coach-logo {
  position: absolute;
  top: var(--logo-y);
  left: var(--logo-x);
  z-index: 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--logo);
  height: var(--logo);
  border: calc(var(--logo) * 0.06) solid #000;
  border-radius: 50%;
  background: #f4f1ea;
  box-shadow: calc(var(--logo) * 0.08) calc(var(--logo) * 0.1) calc(var(--logo) * 0.12)
    rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.coach-logo-t {
  --g: calc(var(--logo) * 0.2);
  width: calc(var(--g) * 3);
  height: calc(var(--g) * 2);
  background-image: url("/img/mino/T.png"), url("/img/mino/T.png"),
    url("/img/mino/T.png"), url("/img/mino/T.png");
  background-position: 0 0, var(--g) 0, calc(var(--g) * 2) 0, var(--g) var(--g);
  background-repeat: no-repeat;
  background-size: var(--g) var(--g);
  /* Drawn bar up rather than turned 180 degrees, so the tiles keep their
     light from above. Turned about the T's middle (a quarter tile above
     its box's), which then moves down to the disc's centre. */
  transform-origin: 50% 37.5%;
  transform: translateY(calc(var(--g) * 0.25)) rotate(-20deg);
}

/* The title starts clear of the logo: the logo's right edge, less the
   panel's padding, plus a gap. */
.coach-title {
  padding-left: calc(var(--logo) + var(--logo-x) - 1rem + 0.45rem);
}

/* "Coach T:" before each coaching message. */
.coach-name {
  color: var(--coach-t);
  font-weight: 800;
}

/* "Coach T's" in a caption stays on one line. */
.coach-nowrap {
  white-space: nowrap;
}

.coach-slot {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* The previous clear's attack under the two big counts. It is a small
   sentence, not a third big counter: the number stays legible but much
   smaller than the combo and B2B numbers. */
.zen-sent {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.22em;
  visibility: hidden;
  opacity: 0;
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.zen-sent.is-on {
  visibility: visible;
  opacity: 1;
}

.zen-sent-value {
  color: var(--mino-T);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Empty slots keep their height, so filling them does not move the
   settings below. */
.coach-style {
  min-height: 1.4rem;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 800;
}

.coach-message {
  min-height: 4.5rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.coach-count {
  min-height: 1.2em;
  line-height: 1.2;
  color: #fff;
  font-size: clamp(1.3rem, calc(var(--cell, 1.6rem) * 0.85), 2.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.coach-settings {
  display: grid;
  gap: 0.6rem;
}

.coach-log-link {
  font-size: var(--text-min);
}

/* In the four-column layout below about 1280px the panel is too narrow for
   three one-line score headings at panel text size. Let the title bars wrap
   and give them the same two-line height, so the boards below stay level. */
@media (min-width: 901px) and (max-width: 1279px) {
  .coach-review-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.25em;
    min-height: 2.4em;
    line-height: 1.15;
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .page-coach .game-layout {
    --well-h: min(
      calc(100vh - var(--topbar-h) - 2 * var(--pad-y) - 0.5rem),
      calc((100vw - 4.95rem) * 1.155)
    );
  }

  .stage--coach {
    grid-template-columns: minmax(0, var(--side-w)) auto minmax(0, var(--next-w));
  }

  .coach-side {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* Under the stage the panel spans the page: the logo stays inside the
     page padding and off the panels above. */
  .coach-panel {
    --logo-x: -0.45rem;
    --logo-y: -0.6rem;
  }
}

/* What layout.css does for every stage below 760px, again here because
   the rules above are more specific than its. */
@media (max-width: 760px) {
  .page-coach .game-layout {
    --well-h: min(
      calc(100vh - var(--topbar-h) - 2 * var(--pad-y) - 0.5rem),
      calc((100vw - 1.5rem) * 2.3)
    );
  }

  .stage--coach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* At the review the step line is empty and the message one line: drop
   their reserved heights so the three boards sit under the message. */
.coach-panel:has(.coach-review:not(.hidden), .coach-show:not(.hidden)) :is(.coach-message, .coach-step) {
  min-height: 0;
}

/* What to do now, under the stop message. */
.coach-step {
  min-height: 2.8rem;
  margin: 0;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Rewind and Play on, side by side, or Flag, or the flag's Save and
   Cancel; with all of a row's hidden it takes no room. */
.coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.coach-actions:not(:has(> :not(.hidden))) {
  display: none;
}

/* An optional note on the stop up, with which was best under it. At the
   review the boards are the choice: with no button shown, the question
   and its row take no room. */
.coach-verdict {
  display: grid;
  gap: 0.5rem;
}

.coach-verdict:not(:has(.coach-verdict-buttons > :not(.hidden)))
  > :is(#coach-verdict-label, .coach-verdict-buttons) {
  display: none;
}

.coach-verdict-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The one he picked is filled in the stop log's green (coach-log.css),
   brighter than the grey of the others, with dark text. The id outranks
   theme.css's hover colour. */
#coach-verdict .coach-verdict-buttons > .btn[aria-pressed="true"] {
  --btn-c: #86efac;
  border-color: var(--btn-c);
  color: var(--accent-ink);
  text-shadow: none;
}

/* The flag's note box, in Flag's place while the game waits: what went
   wrong, then Save and Cancel. */
.coach-flag {
  display: grid;
  gap: 0.5rem;
}

.coach-verdict-note,
.coach-flag-note {
  box-sizing: border-box;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  font-size: var(--text-min);
}

/* Show: his board and Coach T's after its line, side by side. Both SVGs
   have one size and the same limits, so they stay at one scale: their own
   size, less if the column is narrower or they would pass 7rem tall (a
   tall stack; 10rem on a tall screen), so the boards fit under the verdict
   box at 1280x800. The summary line also says when the boards are, to
   save a line. */
.coach-show > summary {
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 700;
  cursor: pointer;
}

.coach-show[open] > summary {
  margin-bottom: 0.4rem;
  color: var(--text);
}

.coach-show-when {
  margin-left: 0.3rem;
  color: var(--muted);
  font-size: var(--text-min);
  font-weight: 600;
}

.coach-show-boards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.coach-show-board {
  margin: 0;
  min-width: 0;
}

.coach-show-board svg {
  display: block;
  max-width: 100%;
  max-height: 7rem;
  width: auto;
  height: auto;
  margin: 0 auto;
}

@media (min-height: 950px) {
  .coach-show-board svg {
    max-height: 10rem;
  }
}

.coach-show-board figcaption {
  margin-top: 0.2rem;
  font-size: var(--text-min);
  font-weight: 400;
  text-align: center;
}

.coach-show-legend {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: var(--text-min);
}

/* The review: his first try, his replay and Coach T's side by side at one
   scale, as the Show boards are. Each board is a little window: its score
   is a chrome-style title bar rounded at the top and attached to the board
   below. Signed in (is-picking) the question sits over them and each board
   is a button that picks it; the one picked glows in --coach-i. Boards
   with the same cells show as one: the boards left keep their width and
   sit in the middle. */
.coach-review-ask {
  display: block;
  margin-bottom: 0.35rem;
}

.coach-review:not(.is-picking) .coach-review-ask {
  display: none;
}

.coach-review-boards {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* A third of the row each. The figure holds the button's click area (its
   ::after), so a click on the label or the score picks the board too. */
.coach-review-board {
  position: relative;
  flex: 0 1 calc((100% - 1rem) / 3);
  margin: 0;
  min-width: 0;
}

/* The board and its score as one window: the title bar above the board,
   sharing its width, the top corners rounded on the bar. The button is
   the board below it (the click area's ::after still covers the figure,
   so the caption is clickable too). */
.coach-review-window {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* As wide as its board, so the frame fits the board's edge. No transform
   or filter here: either would hold the ::after inside the button. */
.coach-review-pick {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 0 2px 2px;
  background: none;
  color: inherit;
  font: inherit;
}

.coach-review-pick:enabled {
  cursor: pointer;
}

.coach-review-pick:enabled::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* A faint frame under the pointer, but not over the I's frame. */
.coach-review-pick:enabled:not([aria-pressed="true"]):hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.coach-review-pick[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--coach-i),
    0 0 0.7rem 0.15rem color-mix(in srgb, var(--coach-i) 70%, transparent);
}

/* The focus ring stands off the frame, in white, so the two never read as
   one. */
.coach-review-pick:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.coach-review-board svg {
  display: block;
  max-width: 100%;
  max-height: 7rem;
  width: auto;
  height: auto;
  margin: 0 auto;
}

@media (min-height: 950px) {
  .coach-review-board svg {
    max-height: 10rem;
  }
}

.coach-review-board figcaption {
  margin-top: 0.2rem;
  font-size: var(--text-min);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* The window's title bar: panel-body text size, rounded on top, with a
   faint inset edge so it reads as chrome attached to the board. */
.coach-review-score {
  margin: 0;
  padding: 0.18rem 0.2rem;
  border-radius: 0.4rem 0.4rem 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: color-mix(in srgb, var(--muted) 55%, #fff);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

/* The score's chip is the title bar's own edge here: keep the number in
   the mono face but drop the extra chip padding, so the longer scores fit
   a third of a narrow panel beside their siblings. */
.coach-review-score .bscore {
  padding: 0 0.18em;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 1em;
}

/* A board 7rem tall is narrower than a long score at panel text size. */
@media (max-height: 949px) {
  .coach-review-score {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
    font-size: var(--text-min);
  }
}

.coach-review-legend {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: var(--text-min);
}

/* The countdown keeps its place when there is nothing to count. */
.coach-slot.is-off {
  visibility: hidden;
}

/* The dots while the coach's words are asked for. */
.coach-message.is-waiting {
  animation: coach-wait 0.8s ease-in-out infinite alternate;
}

@keyframes coach-wait {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* A failed analysis or save: the game plays on. */
.coach-note {
  margin: 0;
  color: #fbbf24;
}

/* Nothing went wrong: a flag saved, in the stop log's green. */
.coach-note.is-said {
  color: #86efac;
}

/* The ghost's piece is the other one: hold first. */
.page-coach .hold-panel.is-coach-hold {
  outline: 2px dotted var(--accent);
  outline-offset: 3px;
}

/* The banner while Coach T holds the game (coach.js, from CoachPlay's
   banner): across the inside of the well from its top edge (3 of the 23
   rows down, as .board::after), two grey lines as thick as the well's
   walls, a dark backing between them, the title in caps and what to do
   now. It fades in and out and never takes a click. */
.coach-banner {
  position: absolute;
  top: calc((100% - var(--well-wall)) * 3 / 23);
  right: var(--well-wall);
  left: var(--well-wall);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem 0.8rem;
  border-block: var(--well-wall) solid #4a4b53;
  background: rgba(9, 9, 11, 0.86);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.coach-banner.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease;
}

.coach-banner-title {
  color: var(--coach-t);
  font-size: clamp(1.05rem, calc(var(--cell, 2rem) * 0.66), 1.9rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coach-banner-text {
  color: var(--text);
  font-size: clamp(var(--text-min), calc(var(--cell, 2rem) * 0.46), 0.95rem);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .coach-message.is-waiting {
    animation: none;
  }
}

/* Solution: Coach T's whole line over the stretch on one board, numbered,
   no rows cleared (miniboard.js solutionBoard). Its summary and legend are
   Show's. The board keeps its own size, less if the column is narrower or
   it would pass 13rem tall (16rem on a tall screen); its gutter on the
   right holds the marks of the rows that clear. */
.coach-solution-board svg {
  display: block;
  max-width: 100%;
  max-height: 13rem;
  width: auto;
  height: auto;
  margin: 0 auto;
}

@media (min-height: 950px) {
  .coach-solution-board svg {
    max-height: 16rem;
  }
}

/* Portrait screens (layout.css): the well is as big as Zen's and the
   coach panel goes under the stage, across it, in two columns: Coach T's
   words on the left, then the boards, buttons and settings on the right.
   The well leaves the panel room for its tallest state, the ghost with
   Show and the Solution open. The stage starts under the top bar, so the
   panel growing and shrinking never moves the well. */
@media (min-width: 901px) and (max-aspect-ratio: 4/5) {
  .page-coach .game-layout {
    --panel-room: 46rem;
    align-content: start;
    --well-h: min(
      calc(100vh - var(--topbar-h) - 2 * var(--pad-y) - var(--stage-gap) - var(--panel-room)),
      calc((100vw - 4.95rem) * 1.155)
    );
  }

  /* The well's column is fixed, so a long message in the panel under it
     cannot widen the stage and move the hold and next panels. */
  .stage--coach {
    grid-template-columns: minmax(0, var(--side-w)) var(--well-w) minmax(0, var(--next-w));
  }

  .coach-side {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* Margins under each part rather than the flex gap: a margin before
     the column break drops away, so both columns start level. */
  .coach-panel {
    display: block;
    columns: 2;
    column-gap: 2rem;
  }

  .coach-panel > * {
    margin: 0 0 0.8rem;
    break-inside: avoid;
  }

  .coach-panel > :last-child {
    margin-bottom: 0;
  }

  #coach-countdown {
    break-after: column;
  }

  /* The boards are drawn bigger than their own size (zoom scales their
     limits with them), as wide as the column lets them be. */
  :is(.coach-show-board, .coach-review-board) svg {
    zoom: 1.6;
  }

  .coach-solution-board svg {
    zoom: 1.25;
  }
}

/* The technique Coach T's line builds, under the step line (coach.js): its
   name links to its four.lol page, the Japanese name beside it, smaller. */
.coach-technique {
  margin: 0.4rem 0 0;
}

.coach-technique-link {
  color: inherit;
  font-weight: 600;
}

.coach-technique-ja {
  margin-left: 0.4em;
  font-size: max(0.8em, var(--text-min));
  opacity: 0.75;
}