/* Guess the word. The essay's type is the point, so nothing here introduces a
   second voice: the boxes, the reader's guesses and the words put back are all
   set in the body face at the body size, and the only thing that separates them
   is weight of colour. A blank that shouted would stop being part of a
   paragraph and start being a form. */

/* The offer, at the foot of the essay — where it is safe. Higher up, beside
   "read with rain", a first-time reader could press it and meet the piece full
   of holes before ever reading it. */
.essay-guess-wrap { text-align: center; margin: 38px 0 0; }
.essay-guess,
.guess-action {
  appearance: none;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 2px 6px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--vizon);
  cursor: pointer;
  transition: color 0.2s ease;
}
.essay-guess:hover,
.guess-action:hover { color: var(--petrol); }
.essay-guess:focus-visible,
.guess-action:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

/* The strip travels with the reader. Seven words across an essay means the
   foot of the page is nowhere near where anyone is working, and a way out of a
   mode has to be reachable from inside it. It carries the count for the same
   reason: at this spacing a reader cannot see how many are left by looking. */
.guess-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: baseline;
  gap: 16px;
  max-width: calc(100vw - 24px);
  /* The three read as one line or the strip is not worth having: wrapped onto
     three, "show this word" stops looking like something to press. */
  flex-wrap: nowrap;
  padding: 9px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.guess-bar { transition: bottom 0.18s ease; }
.guess-count {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--vizon);
  white-space: nowrap;
  flex: 0 0 auto;
}
.guess-bar .guess-action { flex: 0 0 auto; padding: 2px 0; }
.guess-next { font-style: normal; font-size: 1.05rem; line-height: 1; }
@media (max-width: 480px) { .guess-bar .guess-next { font-size: 1rem; } }
.guess-action[disabled] { color: var(--rule-strong); cursor: default; }
.guess-action[disabled]:hover { color: var(--rule-strong); }


/* The blank sits on the baseline of the line it interrupts, so the paragraph
   keeps its rhythm while the game is open. */
.guess-blank { display: inline; white-space: nowrap; }
/* Plain enough to belong to the paragraph, plain enough to find. The first
   version was a hairline and nothing else, and with six or seven of them spread
   across an essay a reader could not see where the next one was — which matters
   more now that being shown a word leaves them standing where they are rather
   than carrying them on. A faint wash of the page's own accent does it without
   turning the line into a form. */
.guess-input {
  font: inherit;
  color: var(--ink);
  background: color-mix(in srgb, var(--petrol) 9%, transparent);
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--petrol) 70%, transparent);
  border-radius: 3px 3px 0 0;
  padding: 0 3px;
  margin: 0;
  min-width: 3ch;
  text-align: center;
  /* The essay sets its lines at 1.75, and an input inherits that as its own box
     height, which drops the rule a third of a line below the words it belongs
     to. Held at the height of the type instead, and sat on the baseline, so the
     blank underlines its own place in the sentence rather than the gap under it. */
  line-height: 1.15;
  height: 1.15em;
  vertical-align: baseline;
  /* A phone puts its keyboard over the bottom half of the screen, and a focused
     box at the bottom of the viewport ends up under it. This asks the browser
     to bring the line well up the page instead. */
  scroll-margin-block: 32vh;
}
/* iOS zooms the whole page in on a focused input below 16px, and the essay is
   set smaller than that. Holding the box at 16px on touch keeps the page still. */
@media (hover: none) {
  .guess-input { font-size: max(1rem, inherit); }
}
.guess-input:focus {
  outline: none;
  background: color-mix(in srgb, var(--petrol) 16%, transparent);
  border-bottom-color: var(--petrol);
}
.guess-input:focus-visible { outline: none; }
/* The first letter, once asked for. Faint, but not so faint it has to be
   hunted for a second time. */
.guess-input::placeholder { color: var(--vizon); opacity: 0.75; font-style: normal; }

/* A word the reader wrote that is not the essay's. It is not an error state —
   no red, no strike, no shake — it is simply theirs, and it stays. */
.guess-blank.is-yours .guess-input {
  color: var(--vizon);
  font-style: italic;
  border-bottom-style: dotted;
}

/* Every word the game puts back takes the piece's own accent — the colour the
   blank's wash and underline were already drawn in, so the box does not change
   voice when it closes; it simply stops being a box. Seven words an essay apart
   is further than anyone can hold in their head, and this is how a reader looks
   up and sees where the game has been.

   Found or asked for, both, and the same colour for each. A reader who could
   not reach a word and pressed "show the word" has still been there. Marking
   only the ones they got would turn the colour into a score and pick out, in
   the accent, exactly the words they would rather not have picked out — and it
   would leave the word they most wanted to look at afterwards as the one word
   they cannot find again.

   What separates the two is still on the page and is quieter than a colour:
   where the reader wrote something of their own, it stands beside the essay's
   word in .guess-yours.

   None of it outlives the game. "Read the original" swaps the untouched
   paragraph back in, accents and all, which is exactly what lets the mark be
   this plain: it is a light left on in a room, not ink on the page. */
.guess-word { color: inherit; }
.guess-word.is-found,
.guess-word.is-revealed { color: var(--petrol); border-bottom: 0; }

/* What the reader had written, standing beside the word that was there. Small
   and quiet: it is a second thought next to the sentence, not a correction of
   one. */
.guess-yours {
  font-style: italic;
  font-size: 0.82em;
  color: var(--vizon);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .guess-bar { gap: 11px; padding: 8px 13px; }
  .guess-count { font-size: 0.8rem; }
  .guess-bar .guess-action { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .essay-guess, .guess-action, .guess-input, .guess-bar { transition: none; }
}