/* Claude and Jev play Pokémon
   Palette: the Game Boy's grey shell, the Pokémon Red cartridge, and the
   four LCD shades used by the screenshots. LCD colours appear only inside
   .screen elements and charts' game-text labels. */

:root {
  --shell: #d9d6cf;
  --shell-deep: #c9c5bd;
  --ink: #23232b;
  --muted: #5d5c60;
  --red: #c8322d;
  --rule: #b9b5ad;
  --lcd-0: #efffde;
  --lcd-1: #add794;
  --lcd-2: #529273;
  --lcd-3: #183442;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --pixel: "VT323", "Courier New", monospace;
  --measure: 62ch;
  --wide: 960px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell: #2b2b2f;
    --shell-deep: #37373c;
    --ink: #e8e6e0;
    --muted: #a4a2a0;
    --red: #e0453f;
    --rule: #46464c;
  }
}
:root[data-theme="dark"] {
  --shell: #2b2b2f;
  --shell-deep: #37373c;
  --ink: #e8e6e0;
  --muted: #a4a2a0;
  --red: #e0453f;
  --rule: #46464c;
}

* { box-sizing: border-box; }

html { background: var(--shell); }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--red); color: #fff; text-decoration: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }

/* Layout: one 960px column, everything left-aligned to the same edge.
   Prose is capped at 62ch; charts and the badge strip run wider;
   code blocks run the full width of the window. */

.hero, main > section, footer {
  width: min(var(--wide), calc(100% - 2 * var(--gutter)));
  margin-left: auto;
  margin-right: auto;
}
.hero > *, main > section > *, footer > * { max-width: var(--measure); }
main > section > .chart, main > section > .code { max-width: none; }
main > section > .badges { max-width: 760px; }

.hero { padding-top: 40px; }
main > section { margin-top: 96px; }
footer { margin-top: 112px; padding-bottom: 64px; font-size: 15px; color: var(--muted); }
footer p { max-width: var(--measure); }

/* Type scale (Newsreader): 18 body, 22 h3, 34 h2, 56 h1. */

h1 {
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 56px 0 20px;
}
h2 {
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 16px;
}
h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 40px 0 8px;
}
h3 small {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: var(--muted);
}
p { margin: 0 0 1em; }
.standfirst { font-size: 20px; line-height: 1.5; }
.hint { font-size: 15px; color: var(--muted); margin-top: 10px; }

/* Headline figures under the intro. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 16px 40px;
  margin: 32px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero > .facts { max-width: none; }
.facts div { display: flex; flex-direction: column-reverse; }
.facts dt { font-size: 15px; color: var(--muted); }
.facts dd { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.source { font-size: 15px; color: var(--muted); margin-top: 12px; }

blockquote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 3px solid var(--red);
}
blockquote p {
  font-size: 22px;
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 6px;
}
blockquote cite { font-style: normal; font-size: 15px; color: var(--muted); }

/* The screen: an LCD box with the game's double-line frame. */

.screen {
  background: var(--lcd-0);
  color: var(--lcd-3);
  font-family: var(--pixel);
  font-size: 26px;
  line-height: 1.2;
  border: 2px solid var(--lcd-3);
  outline: 2px solid var(--lcd-3);
  outline-offset: 2px;
  margin: 4px;
  padding: 20px 24px;
  text-transform: none;
}
.screen:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

.dialog {
  position: relative;
  min-height: 5.4em;
  cursor: pointer;
  user-select: none;
}
.dialog-text { margin: 0; padding-right: 24px; white-space: pre-wrap; }
.dialog-more {
  position: absolute;
  right: 16px;
  bottom: 10px;
  visibility: hidden;
}
.dialog-more.on { visibility: visible; animation: blink 0.8s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.dialog.done { cursor: default; }
.dialog.still .dialog-text p { margin: 0 0 0.75em; }

/* Trainer card */

.card { margin-top: 24px; margin-bottom: 28px; font-size: 24px; }
.card-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid var(--lcd-3);
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-weight: 700;
}
.card-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 2px;
  margin: 0 0 14px;
}
.card-stats dt { margin: 0; }
.card-stats dd { margin: 0; text-align: right; }
.card-party {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 2px solid var(--lcd-3);
}
.card-party li { display: flex; justify-content: space-between; gap: 12px; }

/* Badge chapters: number, screenshot, text. */

.badges {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: badge;
}
.badges li {
  counter-increment: badge;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 44px;
}
.badges li::before {
  content: counter(badge);
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  background: var(--red);
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 9px;
  margin: 4px;
  position: relative;
  z-index: 1;
}
.badges img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  border: 2px solid var(--lcd-3);
}
.badges div { grid-column: 2; }
.badges h3 { margin-top: 0; }
.badges p { margin-bottom: 0; }

/* Champion room figure */

.shot { margin: 32px 0; display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.shot img { border: 2px solid var(--lcd-3); width: 100%; }
.shot figcaption { font-size: 16px; color: var(--muted); }

/* Elite Four ladder: an HTML table drawn as a grid of rooms. */

.ladder {
  border-collapse: separate;
  border-spacing: 4px 4px;
  margin: 24px 0 8px;
  width: 100%;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.ladder th { font-weight: 400; font-size: 15px; color: var(--muted); padding: 0; }
.ladder thead th { padding-bottom: 6px; }
.ladder th.room { text-align: left; width: 22%; font-size: 16px; color: var(--ink); }
.ladder td {
  height: 40px;
  border: 1px solid var(--rule);
  padding: 0;
  position: relative;
}
.ladder td.won { background: var(--ink); border-color: var(--ink); }
.ladder td.lost { background: var(--red); border-color: var(--red); }
.ladder td.fame { background: var(--red); border-color: var(--red); }
.ladder td span { position: absolute; inset: 0; overflow: hidden; clip-path: inset(50%); }
.ladder td.lost::after, .ladder td.fame::after {
  content: attr(data-mark);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--pixel);
  font-size: 17px;
  text-align: center;
  padding: 0 2px;
  line-height: 1.1;
}

/* Bar lists (what Jev was asked) */

.bars { width: 100%; border-collapse: collapse; margin: 24px 0 28px; }
.bars th { text-align: left; font-weight: 400; padding: 6px 16px 6px 0; width: 46%; vertical-align: middle; font-size: 17px; }
.bars td { padding: 6px 0; vertical-align: middle; }
.bars td i { display: inline-block; height: 14px; width: var(--w); background: var(--ink); vertical-align: middle; }
.bars td span { margin-left: 10px; font-variant-numeric: tabular-nums; font-size: 16px; color: var(--muted); vertical-align: middle; }

/* What we learned: two columns of good and weak points per player. */

.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 12px 0 20px; }
.hero > .verdict, main > section > .verdict { max-width: none; }
.verdict h4 { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.verdict ul { margin: 0; padding-left: 20px; font-size: 17px; }
.verdict li { margin-bottom: 10px; }
.lessons { padding-left: 24px; }
.lessons li { margin-bottom: 12px; }
.lessons strong { font-weight: 600; }

/* The Jev question */

.question {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 16px;
  margin: 24px 0;
  font-size: 17px;
}
.question figcaption { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.q-state { color: var(--muted); }
.question dl { margin: 0 0 16px; display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 8px; }
.question dt { font-weight: 600; }
.question dd { margin: 0; }
.q-answer { font-size: 22px; font-weight: 500; margin: 0; }

/* Causes table */

.causes { width: 100%; border-collapse: collapse; margin: 24px 0 8px; font-size: 17px; }
.causes th { text-align: left; font-weight: 500; padding: 0 16px 10px 0; border-bottom: 2px solid var(--ink); }
.causes td { padding: 12px 16px 12px 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
.causes td:first-child { width: 36%; font-weight: 500; }
.causes td:last-child { padding-right: 0; color: var(--muted); }

.quotes { list-style: none; margin: 32px 0 0; padding: 0; }
.quotes blockquote { margin: 0 0 24px; }
.quotes blockquote p { font-size: 19px; }

/* Code: VT323 is a terminal face, so it carries the code blocks too. */

code {
  font-family: var(--pixel);
  font-size: 1.2em;
  line-height: 1;
}
.code {
  font-family: var(--pixel);
  font-size: 20px;
  line-height: 1.25;
  background: var(--shell-deep);
  color: var(--ink);
  /* Full bleed: the band runs edge to edge, the text starts at the column. */
  margin: 20px calc(50% - 50vw) 28px;
  padding: 16px 20px 16px calc(50vw - 50% + 20px);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code .c { color: var(--muted); }
.code:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Charts: SVG drawn by main.js. */

.chart { margin: 28px 0 0; width: 100%; min-height: 340px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .tick { font-family: var(--serif); font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart .stall { fill: var(--ink); opacity: 0.08; }
.chart .stall-label { font-family: var(--pixel); font-size: 16px; fill: var(--lcd-3); }
.chart .badge-tick { stroke: var(--red); stroke-width: 2; }
.chart .badge-num { font-family: var(--serif); font-size: 13px; fill: var(--red); text-anchor: middle; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--ink); }
.chart .deep { fill: var(--red); }
.chart .note { font-family: var(--serif); font-size: 13px; fill: var(--ink); }
.chart .note-line { stroke: var(--ink); stroke-width: 1; }
.chart .legend { font-family: var(--serif); font-size: 13px; fill: var(--muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart .stall { opacity: 0.16; }
  :root:not([data-theme="light"]) .chart .stall-label { fill: var(--lcd-1); }
}
:root[data-theme="dark"] .chart .stall { opacity: 0.16; }
:root[data-theme="dark"] .chart .stall-label { fill: var(--lcd-1); }

/* Motion */

@media (prefers-reduced-motion: reduce) {
  .dialog-more.on { animation: none; }
}

/* Phone */

@media (max-width: 640px) {
  body { font-size: 17px; }
  .standfirst { font-size: 18px; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
  .facts dd { font-size: 26px; }
  .verdict { grid-template-columns: 1fr; gap: 12px; }
  main > section { margin-top: 72px; }
  .screen { padding: 14px 16px; font-size: 22px; }
  .card { font-size: 19px; }
  .dialog { min-height: 6.2em; }
  .badges li { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
  .badges img { max-width: 240px; }
  .badges div { grid-column: 1; }
  .shot { grid-template-columns: 1fr; gap: 12px; }
  .shot img { max-width: 240px; }
  .ladder td { height: 26px; }
  .ladder th.room { width: 30%; font-size: 14px; }
  .ladder td.lost::after, .ladder td.fame::after { font-size: 0; }
  .bars th { width: 52%; font-size: 15px; padding-right: 10px; }
  .bars td i { height: 10px; }
  .bars td span { font-size: 14px; margin-left: 6px; }
  .question dl { grid-template-columns: 1fr; row-gap: 2px; }
  .question dd { margin-bottom: 8px; }
  .causes td:first-child { width: 40%; }
  .code { font-size: 17px; padding: 12px 14px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .chart { min-height: 240px; }
  .chart .tick, .chart .note, .chart .badge-num, .chart .legend { font-size: 15px; }
  .chart .stall-label { font-size: 15px; }
}