/* u-Substitution Match — styles for this page only.
 *
 * Built on the tokens in ../../assets/site.css (--panel, --border, --accent,
 * --radius, --shadow …) so the game sits in the same light theme as the rest of
 * the site, and kept out of site.css because no other page uses any of it —
 * site.css is linked from every page on the site and touching it means bumping
 * its cache-buster in all of them. The header, footer and .readout here are
 * site.css's.
 *
 * Each of the four steps carries its own colour, and carries it everywhere: the
 * legend chip on the start card, the column heading, and the tiles under it.
 * Every ink below is held at 7:1 against the palest background it meets — for
 * the four step colours that is the page grey behind the column headings, not
 * the tile tint, which is the paler of the two and so the binding one.
 */

/* the four steps, in order */
:root {
  --s1-ink: #893f07;  --s1-bg: #fffaf3;  --s1-line: #f6d9b0;  /* ∫ f(x) dx   */
  --s2-ink: #10612e;  --s2-bg: #f4fcf6;  --s2-line: #b7e5c4;  /* u =         */
  --s3-ink: #6926d0;  --s3-bg: #faf7ff;  --s3-line: #d5c9f5;  /* du =        */
  --s4-ink: #1b48c7;  --s4-bg: #f5f9ff;  --s4-line: #bcd4f7;  /* ∫ … du      */

  --good: #105f2d;
  --bad: #952923;
  --tile-h: 58px;
}

.game {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 18px 10px;
  width: 100%;
}

/* announced to screen readers, never shown */
.sr-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- the start / over cards */

.card-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
  max-width: 660px;
  margin: 0 auto;
}
.card-panel h1 {
  font-size: 25px;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.card-panel .lede {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.card-panel .group:last-of-type { margin-bottom: 4px; }

/* the chain, spelled out once on the start card */
.chain-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  margin-bottom: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: #fbfcfd;
}
.chain-legend .chip {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.chain-legend .arrow { color: var(--muted); font-size: 12px; }
.chip.c1 { color: var(--s1-ink); background: var(--s1-bg); border-color: var(--s1-line); }
.chip.c2 { color: var(--s2-ink); background: var(--s2-bg); border-color: var(--s2-line); }
.chip.c3 { color: var(--s3-ink); background: var(--s3-bg); border-color: var(--s3-line); }
.chip.c4 { color: var(--s4-ink); background: var(--s4-bg); border-color: var(--s4-line); }

/* ----------------------------------------------------------- level picker */

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.level {
  display: block;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}
.level small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
}
.level:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.level:active:not(:disabled) { transform: translateY(0); }
.level:disabled { opacity: .5; cursor: not-allowed; }
.lv-easy   { border-left-color: var(--s2-ink); }
.lv-medium { border-left-color: var(--s1-ink); }
.lv-hard   { border-left-color: var(--s3-ink); }

/* -------------------------------------------------------------- the rules */

.how {
  margin-top: 20px;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}
.how summary {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: "▸ "; font-size: 10px; }
.how[open] summary::before { content: "▾ "; }
.how ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.how li { margin-bottom: 6px; }

/* ------------------------------------------------------------------- HUD */

.hud {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}
.hud .spacer { flex: 1 1 auto; }

.clock { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.clock-num {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 52px;
}
.clock-bar {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 999px;
  background: #eaeef3;
  overflow: hidden;
}
.clock-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .12s linear, background-color .2s ease;
}
/* under ten seconds the whole clock reads urgent */
.clock.low .clock-num { color: var(--bad); }
.clock.low .clock-bar i { background: var(--bad); }

/* the ±5s, flashed on the numerals themselves */
.clock.gain .clock-num { animation: gainFlash .5s ease; }
.clock.lose .clock-num { animation: loseFlash .5s ease; }
@keyframes gainFlash {
  0%, 100% { transform: none; }
  30% { transform: scale(1.18); color: var(--good); }
}
@keyframes loseFlash {
  0%, 100% { transform: none; }
  30% { transform: scale(1.18); color: var(--bad); }
}

.hud-stat { display: flex; align-items: baseline; gap: 7px; position: relative; }
.hud-stat .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
}
.hud-stat .v {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* --border is too faint against the panel to carry text; the resting combo is
   still quiet at --muted but stays legible (8:1) */
.hud-stat .v.combo { color: var(--muted); }
.hud-stat .v.combo.on { color: var(--s1-ink); }

/* the points earned, floating off the score */
.pop {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--good);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.pop.show { animation: popUp .75s ease-out; }
@keyframes popUp {
  0%   { opacity: 0; transform: translateY(2px); }
  25%  { opacity: 1; transform: translateY(-3px); }
  100% { opacity: 0; transform: translateY(-14px); }
}

.hud-level {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

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

.board-wrap { position: relative; }

.board {
  display: grid;
  grid-template-columns:
    minmax(210px, 1.6fr)
    minmax(118px, 0.9fr)
    minmax(132px, 1fr)
    minmax(160px, 1.2fr);
  /* the columns are further apart than the rows on purpose: it lets the four
     steps read as four lanes rather than one dense block of notation */
  row-gap: 9px;
  column-gap: 22px;
  align-items: stretch;
}

.col-head {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 4px 6px;
  text-align: center;
}
.col-head.c1 { color: var(--s1-ink); }
.col-head.c2 { color: var(--s2-ink); }
.col-head.c3 { color: var(--s3-ink); }
.col-head.c4 { color: var(--s4-ink); }

/* ------------------------------------------------------------ the tiles */

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tile-h);
  padding: 8px 10px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.2;
  cursor: pointer;
  overflow-x: auto;
  overflow-y: hidden;
  transition: transform .1s ease, box-shadow .1s ease, background-color .12s ease;
}
.tile .katex { white-space: nowrap; }
.tile.raw {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  overflow-wrap: anywhere;
}

.tile.c1 { background: var(--s1-bg); border-color: var(--s1-line); }
.tile.c2 { background: var(--s2-bg); border-color: var(--s2-line); }
.tile.c3 { background: var(--s3-bg); border-color: var(--s3-line); }
.tile.c4 { background: var(--s4-bg); border-color: var(--s4-line); }

.tile:hover:not(.is-gone) { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile.is-picked {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 73, 174, .18);
  transform: none;
}

.tile.is-wrong {
  border-color: var(--bad);
  background: var(--err-bg);
  animation: shake .34s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* A cleared row leaves its cells behind as ghosts rather than collapsing: with
   four columns and a pick at a time, a board that reflows mid-round slides the
   next tile out from under the cursor. */
/* the resting state is on the rule rather than the last keyframe, so a ghost
   still reads as a ghost if the animation is cut short or never runs */
.tile.is-gone {
  color: transparent;
  background: transparent;
  border-style: dashed;
  border-color: var(--border-soft);
  box-shadow: none;
  transform: scale(.97);
  pointer-events: none;
  cursor: default;
  animation: clearAway .34s ease;
}
@keyframes clearAway {
  0%   { color: var(--ink); transform: none; }
  35%  { color: var(--good); transform: scale(1.05); border-style: solid;
         border-color: var(--good); box-shadow: 0 0 0 3px rgba(16, 95, 45, .2); }
  100% { color: transparent; transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile.is-gone, .board-flash, .pop, .clock-num { animation: none !important; }
  .tile { transition: none; }
}

/* the between-boards flash */
.board-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  border-radius: var(--radius);
  background: rgba(247, 248, 250, .82);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent);
  animation: flashIn .35s ease;
}
@keyframes flashIn {
  0% { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- the over card */

.final-score {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.final-score small {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}
.new-best {
  display: inline-block;
  margin: 0 0 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eaf7ee;
  border: 1px solid #b7e5c4;
  color: var(--good);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#overCard .readout { margin: 14px 0 0; max-width: 320px; }
.best-line {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
}
.btn-row button.primary { width: auto; padding: 8px 20px; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 860px) {
  :root { --tile-h: 52px; }
  .game { padding: 18px 12px 8px; }
  .card-panel { padding: 20px 18px 18px; }
  .hud { gap: 12px; padding: 9px 11px; }
  .clock { min-width: 150px; }
}

/* Four columns of typeset maths cannot honestly be squeezed into a phone, so
   below this the board scrolls sideways instead of crushing the notation. */
@media (max-width: 700px) {
  .board-wrap { overflow-x: auto; padding-bottom: 8px; }
  .board { min-width: 700px; }
  .hud-level { display: none; }
}