/* manfishing — Solarized Dark colorscheme.
   Palette: https://ethanschoonover.com/solarized/ */
:root {
  /* Solarized base tones */
  --base03:  #002b36;  /* darkest background        */
  --base02:  #073642;  /* background highlights      */
  --base01:  #586e75;  /* secondary / de-emphasised  */
  --base00:  #657b83;
  --base0:   #839496;  /* body text                  */
  --base1:   #93a1a1;  /* emphasised text            */
  --base2:   #eee8d5;
  --base3:   #fdf6e3;
  /* Solarized accents */
  --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;

  /* Semantic mapping */
  --bg: var(--base03);
  --paper: var(--base02);
  --ink: var(--base0);
  --bright: var(--base1);
  --muted: var(--base01);
  --rule: #0b4553;
  --accent: var(--blue);
  --accent-soft: var(--cyan);
  --link: var(--blue);

  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
  --sans: "Helvetica Neue", "Arial", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.6;
}
.wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header {
  background: var(--paper);
  border-bottom: 3px double var(--base01);
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding-top: 1rem; padding-bottom: 1rem;
}
.brand {
  font-family: var(--serif);
  font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em;
  color: var(--bright); text-decoration: none;
}
.brand::first-letter { color: var(--orange); }
.search { display: flex; flex: 1 1 260px; min-width: 200px; }
.search input {
  flex: 1; padding: .5rem .7rem; border: 1px solid var(--rule);
  background: var(--base03); color: var(--base1); font-family: var(--sans);
  border-radius: 4px 0 0 4px; min-width: 0;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.search button {
  padding: .5rem .9rem; border: 1px solid var(--accent); cursor: pointer;
  background: var(--accent); color: var(--base03); font-family: var(--sans);
  font-weight: 600; border-radius: 0 4px 4px 0;
}
.dice {
  font-family: var(--sans); font-size: .85rem; text-decoration: none;
  color: var(--accent); white-space: nowrap; border: 1px solid var(--rule);
  padding: .45rem .7rem; border-radius: 4px;
}
.dice:hover { border-color: var(--accent); background: var(--base03); }
.tagline {
  font-family: var(--serif); font-style: italic; color: var(--muted);
  margin: 0 auto; max-width: 960px; padding: 0 1.25rem .9rem;
  text-align: center; font-size: 1.05rem;
}

/* Links */
a { color: var(--link); }
main a { text-decoration-color: var(--rule); text-underline-offset: 2px; }
main a:hover { text-decoration-color: var(--accent); }

/* Masthead / daily edition */
.masthead { padding: 2rem 0 .5rem; text-align: center; }
.edition-date {
  font-family: var(--sans); color: var(--muted); font-size: .9rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: .5rem 0; margin: .5rem 0 0;
}

/* Hero */
.hero {
  padding: 2rem 0; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem;
}
.kicker {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; color: var(--orange); font-weight: 700;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin: .4rem 0; }
.hero h1 a { color: var(--bright); text-decoration: none; }
.hero h1 .sec { color: var(--muted); font-size: .5em; vertical-align: super; }
.standfirst { font-size: 1.25rem; color: var(--base1); max-width: 46ch; }
.read-on {
  display: inline-block; margin-top: .8rem; font-family: var(--sans);
  font-weight: 600; text-decoration: none; color: var(--accent);
}
.read-on:hover { color: var(--accent-soft); }

/* Section labels */
.section-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--rule);
  padding-bottom: .4rem; margin: 2.5rem 0 1.2rem;
}

/* Reveal-more block */
.reveal { margin: 1.5rem 0 .5rem; padding: 1.2rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 6px; }
.reveal .read-on { font-size: 1.1rem; }
.reveal-note { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: .5rem 0 0; }

/* Desk grid */
.desk-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.desk-card {
  display: flex; flex-direction: column; gap: .2rem; text-decoration: none;
  padding: 1rem; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 6px; color: var(--ink); transition: border-color .15s;
}
.desk-card:hover { border-color: var(--accent); }
.desk-num {
  font-family: var(--serif); font-weight: 800; font-size: 2rem; color: var(--orange);
  line-height: 1;
}
.desk-title { font-weight: 700; color: var(--bright); }
.desk-count { font-family: var(--sans); font-size: .78rem; color: var(--muted); }

/* Listing lists */
.pick-list { list-style: none; padding: 0; margin: 0; }
.pick-list li {
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .15rem;
}
.pick-list li a { text-decoration: none; font-size: 1.15rem; color: var(--base1); }
.pick-list li a:hover { color: var(--accent); }
.pick-list li a strong { font-weight: 700; }
.sec { color: var(--muted); font-size: .8em; }
.blurb { color: var(--muted); font-size: .95rem; }

/* Listing/article headers */
.listing h1, .manpage h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: .3rem 0; color: var(--bright); }
.count { color: var(--muted); font-family: var(--sans); font-size: .9rem; }

/* Article (man page) */
.manpage { padding: 2rem 0 3rem; max-width: 74ch; margin: 0 auto; }
.article-head { border-bottom: 3px double var(--base01); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.back { font-family: var(--sans); font-size: .85rem; text-decoration: none; color: var(--accent); }
.manpage h1 .sec { font-size: .5em; vertical-align: super; }
.also-in { font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.article-foot { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; }

/* Rendered man body */
.manbody { font-size: 1.06rem; }
.manbody h2, .manbody .Sh {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em;
  font-size: 1rem; color: var(--orange); margin: 2rem 0 .6rem; font-weight: 700;
  border-bottom: 1px solid var(--rule); padding-bottom: .3rem;
}
.manbody h3, .manbody .Ss {
  font-family: var(--sans); font-size: .95rem; color: var(--yellow);
  margin: 1.4rem 0 .4rem; text-transform: none;
}
.manbody p { margin: .6rem 0; }
.manbody b { color: var(--bright); font-weight: 700; }
.manbody i { color: var(--base1); font-style: italic; }
.manbody code { font-family: var(--mono); font-size: .92em; color: var(--cyan); }
.manbody a { color: var(--link); }
.manbody dl { margin: .6rem 0; }
.manbody dt { font-family: var(--mono); font-size: .92em; color: var(--bright); margin-top: .9rem; }
.manbody dd { margin: .15rem 0 .15rem 2rem; color: var(--ink); }
.manbody ul, .manbody ol { margin: .6rem 0 .6rem 1.4rem; }
.manbody li { margin: .25rem 0; }
.manbody pre, pre.man-pre, pre.plain {
  background: var(--base03); border: 1px solid var(--rule); border-radius: 6px;
  padding: 1rem; overflow-x: auto; line-height: 1.45; font-size: .88rem;
  color: var(--base1); font-family: var(--mono);
}
.manbody .indent-1 { margin-left: 1.5rem; }
.manbody .indent-2 { margin-left: 3rem; }
.manbody .indent-3 { margin-left: 4.5rem; }
.manbody .indent-4 { margin-left: 6rem; }
.error { color: var(--red); }

/* Footer */
.site-footer {
  margin-top: 3rem; border-top: 3px double var(--base01); background: var(--paper);
  font-family: var(--sans); font-size: .8rem; color: var(--muted);
}
.site-footer .wrap {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding-top: 1.2rem; padding-bottom: 1.2rem;
}
.site-footer code { color: var(--cyan); }
.site-footer a { color: var(--link); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Header */
.brand-tag { font-family: var(--sans); font-size: .85rem; color: var(--muted); letter-spacing: .04em; }
.cat-line { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: .2rem 0 0; }

/* ---- Game ---------------------------------------------------------------- */
.game { padding-bottom: 3rem; }
.game-title { font-size: clamp(1.8rem, 5vw, 2.8rem); color: var(--bright); margin: .3rem 0; max-width: 20ch; }
.masthead .game-title { max-width: none; }
.game-blurb { color: var(--base1); max-width: 52ch; margin: 0 auto; font-size: 1.05rem; }
.masthead { text-align: center; }
.masthead .game-blurb { margin: .6rem auto 0; }

/* Progress dots */
.progress { display: flex; align-items: center; gap: .4rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; }
.dot.current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(38,139,210,.2); }
.dot.hit { background: var(--green); border-color: var(--green); }
.dot.miss { background: var(--red); border-color: var(--red); }
.progress-score { margin-left: .6rem; font-family: var(--sans); font-size: .85rem; color: var(--muted); }

/* Round card */
.round-card {
  max-width: 640px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: 1.6rem 1.6rem 2rem;
}
.round-card .kicker { color: var(--orange); }
.clue-label {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; color: var(--muted); margin: 1rem 0 .3rem; font-weight: 700;
}
.clue-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.clue-chip {
  font-family: var(--mono); font-size: .95rem; color: var(--cyan);
  background: var(--base03); border: 1px solid var(--rule); border-radius: 6px;
  padding: .35rem .6rem; user-select: none;
}
.clue-chip.empty { color: var(--muted); font-style: italic; }

/* Guess form */
.guess-form { display: flex; gap: .5rem; }
.guess-input {
  flex: 1; min-width: 0; padding: .7rem .8rem; font-size: 1.05rem;
  font-family: var(--mono); background: var(--base03); color: var(--base1);
  border: 1px solid var(--rule); border-radius: 6px;
}
.guess-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(38,139,210,.15); }
.guess-input:disabled { opacity: .6; }
.guess-btn {
  padding: .7rem 1.2rem; font-family: var(--sans); font-weight: 700; font-size: 1rem;
  color: var(--base03); background: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; cursor: pointer;
}
.guess-btn:disabled { opacity: .5; cursor: default; }

/* Feedback + answer reveal */
.feedback { margin-top: 1.2rem; }
.verdict { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; margin: .3rem 0 1rem; }
.verdict.hit { color: var(--green); }
.verdict.miss { color: var(--red); }
.answer-card {
  display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.2rem;
  background: var(--base03); border: 1px solid var(--rule); border-radius: 8px;
  border-left: 4px solid var(--orange);
}
.answer-label, .answer-cat { font-family: var(--sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.answer-name { font-size: 1.5rem; font-weight: 700; color: var(--bright); text-decoration: none; }
.answer-name:hover { color: var(--accent); }
.answer-name .sec { color: var(--muted); font-size: .6em; vertical-align: super; }
.answer-desc { color: var(--base1); margin: .2rem 0; }
/* Other pages the same SEE ALSO list fits, each with what it's for — a family
   can run to dozens, so the list scrolls rather than burying the Next button. */
.answer-alts { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.alt-list { display: flex; flex-direction: column; gap: .55rem; max-height: 14rem; overflow-y: auto; }
.alt-item { display: flex; flex-direction: column; gap: .1rem; }
.alt-name {
  font-family: var(--mono); font-size: .95rem; font-weight: 700;
  color: var(--base1); text-decoration: none;
}
.alt-name:hover { color: var(--accent); }
.alt-name .sec { color: var(--muted); font-size: .75em; font-weight: 400; }
.alt-desc { margin: 0; color: var(--ink); font-size: .82rem; line-height: 1.4; }
/* Difficulty, and the vote that argues with it */
.vote-row { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.band { font-weight: 700; }
.band.easy { color: var(--green); }
.band.medium { color: var(--yellow); }
.band.hard { color: var(--red); }
.vote-msg { font-family: var(--sans); font-size: .9rem; color: var(--base1); margin: 0; }
.vote-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.vote-btn {
  font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--base1);
  background: var(--base02); border: 1px solid var(--rule); border-radius: 6px;
  padding: .35rem .8rem; cursor: pointer;
}
.vote-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.vote-btn:disabled { opacity: .45; cursor: default; }
.vote-btn.picked { opacity: 1; color: var(--base03); background: var(--accent); border-color: var(--accent); }
.next-btn { margin-top: 1.2rem; font-size: 1.05rem; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--sans); font-weight: 600; color: var(--accent); }

/* Summary */
.summary-card { text-align: center; }
.big-score { font-size: 3rem; font-weight: 800; color: var(--bright); margin: .3rem 0; }
.emoji-grid { font-size: 1.6rem; letter-spacing: .15rem; margin: .4rem 0 1.4rem; }
.recap-list { list-style: none; padding: 0; margin: 0 0 1.4rem; text-align: left; }
.recap { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: .95rem; }
.recap a { text-decoration: none; color: var(--base1); font-family: var(--mono); }
.recap.hit .recap-n { color: var(--green); }
.recap.miss .recap-n { color: var(--red); }
.recap-n { font-weight: 700; width: 1.4rem; flex: none; text-align: right; line-height: 1.5; }
/* Every page the round would have accepted — the one it was called first, each
   under its own name with the blurb that says what it was for. The round is
   over; this is the part you take away from it. */
/* flex: 1 so the body owns the row's width instead of shrinking to its own
   longest line. Without it a round's width is however wide its clue chips
   happened to be, which the scoreboard's bars would then be measured against
   — the same 100% drawing five different lengths down the page. */
.recap-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
/* The clues the round actually asked, so the recap reads as question-then-answer
   rather than a list of names. Same cyan as the round card's chips, smaller. */
.recap-clues { display: flex; flex-direction: column; gap: .25rem; }
.recap-label { font-family: var(--sans); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.recap-clue-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.recap-clue {
  font-family: var(--mono); font-size: .78rem; color: var(--cyan);
  background: var(--base03); border: 1px solid var(--rule); border-radius: 5px;
  padding: .1rem .4rem;
}
.recap-page { display: flex; flex-direction: column; gap: .1rem; }
.recap a.recap-page-name { color: var(--muted); font-weight: 700; font-size: 1rem; }
.recap a.recap-page-name.answered { color: var(--bright); }
.recap a.recap-page-name:hover { color: var(--accent); }
.recap-page-name .sec { color: var(--muted); font-size: .75em; font-weight: 400; }
.recap-page-desc { margin: 0; color: var(--ink); font-size: .85rem; line-height: 1.4; }
.recap-guess { color: var(--muted); font-size: .85rem; margin: 0; }

/* How the room answered: one bar per page anyone actually named, misses last.
   The outer columns are fixed rather than sized to their text, so the 1fr
   track between them comes out identical on every row of every round. Let
   either end size to content and the bars stop being a chart: the same
   percentage draws longer next to "1 · 9.1%" than next to "5 · 45.5%", purely
   because the shorter label leaves more room. */
.scoreboard { display: flex; flex-direction: column; gap: .25rem; margin-top: .2rem; }
.score-row { display: grid; grid-template-columns: 7rem 1fr 6rem; gap: .5rem; align-items: center; }
.score-name {
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.score-name .sec { font-size: .75em; }
.score-row.mine .score-name { color: var(--bright); font-weight: 700; }
.score-bar { height: .5rem; border-radius: .25rem; background: var(--base03); overflow: hidden; }
.score-fill { display: block; height: 100%; border-radius: inherit; background: var(--green); opacity: .55; }
.score-row.miss .score-fill { background: var(--red); }
.score-row.mine .score-fill { opacity: 1; }
.score-count {
  font-family: var(--mono); font-size: .75rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.score-row.mine .score-count { color: var(--bright); }
@media (max-width: 30rem) {
  .score-row { grid-template-columns: 4.5rem 1fr 5.5rem; }
}
.summary-card .read-on { cursor: pointer; background: none; border: none; font-family: var(--sans); font-size: 1rem; }

@media (max-width: 620px) {
  .site-header .wrap { flex-direction: column; align-items: stretch; }
  .brand { text-align: center; }
  .site-nav { justify-content: center; }
}