/* Reflex Chess -- the rating test at /rating-test.
 *
 * Loaded AFTER seo.css, board.css and pieces.css, and it needs all three:
 *
 *   seo.css     the page chrome, the palette and the type. Everything here
 *               reads its custom properties and defines none of its own
 *               colours, so a change to the house palette moves this page too.
 *   board.css   the board's geometry -- absolute squares, piece transforms,
 *               the coordinate rails.
 *   pieces.css  the artwork.
 *
 * WHAT IS DUPLICATED HERE AND WHY. board.css deliberately owns no appearance:
 * the square colours, the 1:1 box and the highlight colours live in styles.css,
 * which is the app shell's stylesheet -- 100dvh, a pinned tab bar, overscroll
 * locked. A document that Google sends a stranger to must not load that, and
 * styles.css is not mine to split, so the twenty lines of board APPEARANCE it
 * owns are restated here against the same tokens. If the app's board changes
 * colour, this block is the one that has to be changed with it.
 *
 * NO EXTERNAL ANYTHING. Same rule as seo.css: one font already fetched by
 * seo.css, no CDN, no icon font, no image that is not already on the origin.
 */

:root {
  /* styles.css defines this; seo.css does not, and the destination dots and
     the selected square are drawn from it. */
  --mark: 91 108 255;
}

/* ---------- the board ---------- */

.cg-wrap { width: 100%; aspect-ratio: 1 / 1; height: auto; }

.cg-wrap cg-board {
  border-radius: .7rem;
  background-color: var(--sq-light);
  background-image: conic-gradient(
    var(--sq-dark) 0 25%, var(--sq-light) 0 50%,
    var(--sq-dark) 0 75%, var(--sq-light) 0);
  background-size: 25% 25%;
  background-position: 0 0;
  background-repeat: repeat;
}

.cg-wrap coords {
  font-family: var(--mono);
  font-size: clamp(.5rem, 1.9vw, .68rem);
  letter-spacing: .04em;
  font-weight: 600;
  opacity: .9;
  text-shadow: 0 1px 2px rgb(0 0 0 / .45);
  color: #fff;
}

/* board.css offsets the file letters 24px to the right of the board, which
   pushes the "h" clean off the right-hand edge. Inside the app that board sits
   in .board-wrap, which has a gutter and a 4px ring around it, so the spill
   lands on furniture nobody looks at. Here the board sits flush against the
   edge of a card and the stray letter is the first thing you see. Corrected
   for this page only: board.css is not mine to change and the app's board must
   not move because of a landing page. */
.cg-wrap coords.files { left: 0; bottom: 1px; }

.cg-wrap cg-board square.move-dest {
  background: radial-gradient(rgb(var(--mark) / .70) 22%, rgb(var(--mark) / .90) 0,
                              rgba(0,0,0,.3) 0, rgba(0,0,0,0) 0);
}
.cg-wrap cg-board square.oc.move-dest {
  background: radial-gradient(transparent 0%, transparent 80%, rgb(var(--mark) / .45) 80%);
}
.cg-wrap cg-board square.last-move { background-color: rgba(155,199,0,.41); }
.cg-wrap cg-board square.selected   { background: rgb(var(--mark) / .50); }
.cg-wrap cg-board square.check {
  background: radial-gradient(ellipse at center, rgba(255,0,0,1) 0%, rgba(231,0,0,1) 25%,
    rgba(169,0,0,0) 89%, rgba(158,0,0,0) 100%);
}

/* ---------- the tool ---------- */

/* The card is the one thing on this page that is an app rather than a
   document, so it is the one thing given a hard edge and a shelf. Everything
   below it reads as prose because it is prose. */
.rt-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.15rem 1.5rem;
  margin: 0 0 2.25rem;
}

.rt-card h2 {
  margin: .1rem 0 .55rem;
  font-size: 1.42rem;
  line-height: 1.24;
}

.rt-kicker {
  margin: 0 0 .35rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}

.rt-note { margin: .9rem 0 0; font-size: .92rem; color: var(--dim); }

.rt-challenge {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  background: var(--card-2);
  border: 1px dashed var(--rule);
  font-size: .95rem;
}

/* A button, not a link, because it starts something rather than going
   somewhere. Full width on a phone: the thumb should not have to aim. */
.rt-go {
  display: block;
  width: 100%;
  margin: 1rem 0 0;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--shelf) 0 var(--brand-dk);
}
.rt-go:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--brand-dk); }
a.rt-go:hover { color: #fff; }

/* ---------- the run ---------- */

.rt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
}

.rt-count {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
}

.rt-dots { display: flex; gap: .28rem; flex-wrap: wrap; justify-content: flex-end; }
.rt-dots i {
  width: .58rem; height: .58rem;
  border-radius: 50%;
  background: var(--rule);
  display: block;
}
.rt-dots i.hit  { background: var(--good); }
.rt-dots i.miss { background: var(--bad); }
.rt-dots i.now  { background: var(--brand-lt); }

.rt-prompt {
  margin: 0 0 .7rem;
  font-weight: 600;
  font-size: 1.06rem;
  min-height: 1.6em;
}
.rt-prompt.dim  { color: var(--dim); font-weight: 400; }
.rt-prompt.good { color: var(--good); }
.rt-prompt.bad  { color: var(--bad); }

/* The board is capped so it does not become a 640px slab on a laptop, where
   the eye then has to travel further than the position is worth. */
.rt-board { max-width: 30rem; margin: 0 auto; }

.rt-under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}

.rt-hint { margin: 0; font-size: .88rem; color: var(--dim); flex: 1 1 12rem; }

.rt-skip {
  flex: 0 0 auto;
  padding: .5rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.rt-skip:hover { color: var(--ink); border-color: var(--dim); }

.rt-reveal { margin-top: .9rem; }
.rt-answer {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  background: var(--card-2);
  font-size: .95rem;
}
.rt-answer b { font-family: var(--mono); font-size: 1rem; }

/* ---------- the result ---------- */

.rt-result { text-align: left; }

.rt-score {
  margin: 0;
  font-size: clamp(2.5rem, 12vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  /* Tabular figures so "1350-1550" and "1400-1600" do not shuffle width when
     the card is re-rendered on a retake. */
  font-variant-numeric: tabular-nums;
}

.rt-sub { margin: .35rem 0 1.1rem; color: var(--dim); font-size: .95rem; }

.rt-strip {
  list-style: none;
  display: flex;
  gap: .4rem;
  margin: 0 0 1.15rem;
  padding: 0 0 .35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rt-strip li {
  flex: 0 0 auto;
  min-width: 4.6rem;
  margin: 0;
  padding: .45rem .5rem;
  border-radius: .7rem;
  background: var(--card-2);
  border-top: 3px solid var(--rule);
  text-align: center;
  line-height: 1.25;
}
.rt-strip li.hit  { border-top-color: var(--good); }
.rt-strip li.miss { border-top-color: var(--bad); }
.rt-strip li b { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.rt-strip li span { display: block; font-size: .7rem; color: var(--dim); }
.rt-strip li em { display: block; font-size: .68rem; color: var(--dim); font-style: normal; }

.rt-honest, .rt-speed { margin: 0 0 1rem; font-size: .95rem; }
.rt-honest { color: var(--dim); }
.rt-honest b { color: var(--ink); }

.rt-next, .rt-share {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.rt-why { margin: .7rem 0 0; font-size: .93rem; color: var(--dim); }
.rt-why b { color: var(--ink); }

.rt-quote {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  background: var(--card-2);
  font-size: .92rem;
  /* A line meant to be pasted somewhere else should look like the thing that
     will be pasted, wrapping and all. */
  overflow-wrap: anywhere;
}

.rt-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }

.rt-copy {
  flex: 1 1 8rem;
  padding: .65rem .9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card-2);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.rt-copy:hover { border-color: var(--dim); }
.rt-copy:active { transform: translateY(1px); }

/* ---------- the data table ---------- */

/* seo.css sets .line to nowrap, which is right for a SAN line -- "34...Kxd8
   35.Qd2+" must never break across a line. An equation is different: it is
   read once and it has to be READ, and a formula the reader has to drag
   sideways to finish is a formula nobody finishes. */
.formula {
  white-space: normal;
  overflow-x: visible;
  text-align: center;
  font-size: clamp(.78rem, 3.4vw, .95rem);
}

/* The table has to survive 320px. It scrolls inside its own box rather than
   making the DOCUMENT scroll sideways, which is the failure that shows up on
   every phone and in no desktop screenshot -- but the scroll is the fallback,
   not the plan. The narrow-screen rules below shrink it enough to fit a 390px
   phone outright, because a column the reader never discovers is a column that
   may as well not have been computed. */
.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

table.dist {
  border-collapse: collapse;
  width: 100%;
  min-width: 33rem;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
table.dist caption {
  caption-side: bottom;
  padding: .7rem .9rem;
  text-align: left;
  font-size: .85rem;
  color: var(--dim);
  line-height: 1.5;
}
table.dist th, table.dist td {
  padding: .5rem .75rem;
  text-align: right;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.dist thead th { color: var(--dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
table.dist th[scope="row"] { text-align: left; font-weight: 600; }
table.dist td:last-child, table.dist thead th:last-child { text-align: left; }
table.dist tbody tr:hover { background: var(--card-2); }
table.dist tfoot th, table.dist tfoot td { border-bottom: 0; color: var(--dim); }

@media (max-width: 34rem) {
  table.dist {
    min-width: 0;
    font-size: .82rem;
  }
  table.dist th, table.dist td { padding: .45rem .35rem; }
  /* Headers and the motif names wrap; the numbers never do, because a number
     broken over two lines stops being one number. */
  table.dist thead th,
  table.dist td:last-child { white-space: normal; }
  table.dist caption { padding: .6rem .55rem; font-size: .8rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .rt-go:active, .rt-copy:active { transform: none; }
}