/* FIGURE 1.
 *
 * The subject is a USPTO grant sheet: black ink on paper, serif specification prose,
 * condensed technical legends, and non-photo blue — the pencil a draughtsman uses
 * because it does not reproduce photographically. That blue is the accent, and it
 * appears as the "circled in pencil" state on an armed callout.
 *
 * The drawing keeps its paper plate in both themes. A patent drawing inverted to
 * white-on-black reads as a photographic negative, so the room around the sheet
 * changes with the theme and the sheet itself does not — which is why --plate and
 * --plate-line are declared once, outside every theme block, and never overridden.
 *
 * Part names are set in a serif because they are lifted verbatim from the
 * specification; callout numerals and every piece of chrome are monospaced because
 * they are data about the document rather than the document.
 */

:root {
  --ink:        #16181d;
  --ink-soft:   #565d69;
  --ink-faint:  #8d95a1;
  --bg:         #eceae4;
  --surface:    #f7f6f3;
  --line:       #cfccc4;
  --blue:       #35618f;
  --blue-wash:  #cfe2f1;
  --lock:       #2f6b46;
  --lock-wash:  #d3e6da;
  --strike:     #a8442a;

  /* The sheet. Theme-independent on purpose — see the note above. */
  --plate:      #f2f1ed;
  --plate-line: #b9b6ae;

  --radius: 3px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e6e4df;
    --ink-soft:   #9aa1ac;
    --ink-faint:  #6b727d;
    --bg:         #131519;
    --surface:    #1c1f24;
    --line:       #2e333a;
    --blue:       #7fb2e0;
    --blue-wash:  #1e3346;
    --lock:       #6cc191;
    --lock-wash:  #1c3a2a;
    --strike:     #e08b70;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 940px; margin: 0 auto; padding: 22px 20px 80px; }

/* ------------------------------------------------------------------ masthead -- */

.masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 18px;
}
.masthead h1 {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(22px, 4.4vw, 32px); letter-spacing: .04em;
  margin: 0;
}
.masthead-right {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; color: var(--ink-soft);
}
.help {
  width: 26px; height: 26px; padding: 0; flex: none;
  font-family: var(--mono); font-size: 14px; line-height: 1;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.help:hover { color: var(--ink); border-color: var(--blue); }

.instruction { margin: 0 0 18px; max-width: 62ch; color: var(--ink); }
.withheld { color: var(--ink-soft); }

.notice {
  font-family: var(--mono); font-size: 14px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--surface);
}

/* -------------------------------------------------------------------- status -- */

.status {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
.status-label { color: var(--ink-soft); }
.pips { display: flex; gap: 5px; }
.pip {
  width: 11px; height: 11px; border: 1.5px solid var(--ink-faint); border-radius: 50%;
  transition: background .15s, border-color .15s;
}
.pip.gone { background: var(--strike); border-color: var(--strike); }

/* --------------------------------------------------------------------- plate -- */

/* The sheet is capped by *height*, not width, and it hugs the drawing.
 *
 * Patent sheets are portrait and some of these figures are 900x1856. Left to fill the
 * column, one fills the whole viewport and pushes the part names below the fold —
 * which turns every match into scroll down, read a name, scroll up, tap. The two
 * halves of this game have to be on screen together. And a full-width plate around a
 * portrait figure leaves two hands of empty paper either side, which reads as a
 * layout that has lost its content rather than as a grant sheet.
 *
 * --w and --h are the figure's intrinsic pixels, set on this element by the server and
 * inherited by .figbox. The cap is a height; the max-width converts it back into a
 * width, which is what actually shrinks a tall sheet. It is applied here rather than
 * on .figbox because `width: fit-content` cannot hug a child whose own width is a
 * percentage of it — the two would resolve against each other.
 *
 * svh rather than vh or dvh: dvh changes as a mobile address bar hides, which would
 * resize the plate under a player's thumb mid-tap, and vh overshoots on the first
 * paint of exactly the phones that matters on.
 */
.plate {
  --plate-pad: 14px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius);
  padding: var(--plate-pad);
  position: relative;
  margin-inline: auto;
  max-width: min(100%, calc(var(--fig-cap) * var(--w) / var(--h) + 2 * var(--plate-pad) + 2px));
}
:root { --fig-cap: min(58svh, 720px); }
/* The inner rule a grant sheet is printed with. */
.plate::after {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid var(--plate-line); opacity: .5; pointer-events: none;
  border-radius: 2px;
}

/* aspect-ratio keeps the box the right shape before the PNG decodes, so the callout
   overlay — positioned in percentages of this element — never lands on a zero-height
   parent mid-load and stacks every callout in the corner. */
.figbox {
  position: relative;
  line-height: 0;
  aspect-ratio: var(--w) / var(--h);
}

/* multiply, so the 1-bit scan's white ground drops out onto the plate instead of
   sitting on it as a slightly different white rectangle. */
.figbox img { width: 100%; height: 100%; display: block; mix-blend-mode: multiply; }

.callout {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 40px; min-height: 40px;
  background: transparent; border: 2px solid transparent; border-radius: 50%;
  cursor: pointer; padding: 0;
  transition: background .12s, border-color .12s;
}
.callout:hover:not(.done) { border-color: rgba(53, 97, 143, .45); }
.callout:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* "Circled in pencil": every unmatched callout breathes while a name is held, which
   is what turns the drawing from a picture into a set of targets. */
.armed .callout:not(.done) {
  border-color: rgba(53, 97, 143, .5);
  background: rgba(122, 178, 224, .22);
  animation: breathe 1.9s ease-in-out infinite;
}
.callout.done { background: rgba(47, 107, 70, .16); border-color: rgba(47, 107, 70, .5); cursor: default; }
.callout.wrong { animation: nope .32s ease; border-color: var(--strike); }

@keyframes breathe { 50% { background: rgba(122, 178, 224, .38); } }
@keyframes nope {
  25% { transform: translate(-58%, -50%); }
  75% { transform: translate(-42%, -50%); }
}

/* --------------------------------------------------------------------- names -- */

.names { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.name {
  font-family: var(--serif); font-size: 16px; line-height: 1.25;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer; transition: all .13s;
}
.name:hover:not(.done) { border-color: var(--blue); }
.name:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.name.sel { background: var(--blue-wash); border-color: var(--blue); color: var(--ink); }
.name.done {
  background: var(--lock-wash); border-color: var(--lock); color: var(--lock); cursor: default;
}
.name.done::before { content: "· "; font-family: var(--mono); }
.name .num { font-family: var(--mono); font-size: 13px; color: var(--lock); margin-right: 7px; }

/* Tapping a callout with no name held is not a mistake — it points at the list. */
.names.nudge { animation: nudge .5s ease; }
@keyframes nudge {
  30% { transform: translateY(-3px); }
  60% { transform: translateY(1px); }
}

/* ------------------------------------------------------------------- outcome -- */

.outcome { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.outcome[hidden] { display: none; }

.verdict {
  font-family: var(--mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 6px;
}
.reveal { font-size: 22px; margin: 0 0 4px; text-wrap: balance; }
.reveal .yr { color: var(--ink-soft); }
.cite { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin: 0 0 16px; }
.share {
  font-family: var(--mono); font-size: 15px; letter-spacing: .04em;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin: 0 0 14px; overflow-x: auto; white-space: nowrap;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.afterword { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); margin: 18px 0 0; }
.afterword a { color: var(--ink-soft); }

/* The way out to the document the board was cut from. Sits under the citation because
   it is the same fact continued — the number, then the record it names. */
.source {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  margin: -8px 0 16px;
}
.source a { color: var(--blue); text-decoration: none; border-bottom: 1px solid currentColor; }
.source a:hover, .source a:focus-visible { color: var(--ink); }

/* ------------------------------------------------------------------- archive -- */

.masthead .back {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--ink-soft); text-decoration: none;
}
.masthead .back:hover, .masthead .back:focus-visible { color: var(--ink); text-decoration: underline; }

.days { margin: 12px 0 0; padding: 0; list-style: none; }
.days a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.days a:hover .day-date, .days a:focus-visible .day-date { text-decoration: underline; }
.days a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The sheet number is data about the document, so it is monospaced like the rest of
   the chrome; the date is prose and stays in the body serif. */
.day-no {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-soft); min-width: 46px;
}
.day-status {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Three outcomes, three colours, and they are the board's own: the green a matched
   callout locks to, the red a spent pip turns, and plain ink for a round still open. */
.day-status.won { color: var(--lock); }
.day-status.lost { color: var(--strike); }
.day-status.started { color: var(--ink-soft); }

button.act {
  font-family: var(--mono); font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--radius); padding: 11px 18px; cursor: pointer;
}
button.act.ghost { background: transparent; color: var(--ink); }
button.act:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------------------------------- intro -- */

dialog#intro {
  max-width: 480px; width: calc(100% - 32px);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px;
}
dialog#intro::backdrop { background: rgba(10, 12, 16, .55); }
dialog#intro h2 {
  font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin: 0 0 14px;
}
.intro-lede { margin: 0 0 14px; }
.intro-rules { margin: 0 0 14px; padding-left: 20px; }
.intro-rules li { margin-bottom: 5px; }
.intro-rule { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 20px; }

/* ------------------------------------------------------------------ responses -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 16px 14px 60px; }
  /* 40px targets collide once a 900px sheet is scaled to a phone. */
  .callout { min-width: 30px; min-height: 30px; }
  .name { font-size: 15px; padding: 7px 11px; }
  .plate { padding: 9px; }
}