/* Shannon's guessing game — scoped under #shannon.
   ----------------------------------------------------------------------
   Added 2026-10-05. A reading exhibit rather than a machine: the page has
   enough glowing panels, so this one is set as text on paper with a small
   instrument panel underneath. */

#shannon{
  background:var(--bg-alt);
  border-top:1px solid var(--border);
}

#shannon .sh-intro{
  max-width:62ch;
  color:var(--muted);
}

#shannon .sh-board{
  margin-top:var(--space-m);
  padding:clamp(16px, 3vw, 26px);
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--bg);
}

#shannon .sh-cite{
  font-size:var(--fs-sm);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}

#shannon .sh-text{
  font-family:var(--mono);
  font-size:clamp(14px, 2.5vw, 17px);
  line-height:1.9;
  letter-spacing:.06em;
  word-break:break-word;
  margin:0 0 14px;
  min-height:5.5em;
}

#shannon .sh-done{ color:var(--text); }
/* The dots stand in for letters you have not reached yet. They were set
   to --border, which measured 1.25:1 — all but invisible. They are not
   decoration: their grouping is what tells you where the word boundaries
   are, which is most of what makes the next letter guessable. --muted
   keeps them clearly subordinate to revealed text while being legible. */
#shannon .sh-hidden{ color:var(--muted); }

#shannon .sh-cursor{
  color:var(--accent);
  animation:sh-blink 1.1s steps(2, start) infinite;
}

@keyframes sh-blink{ 50%{ opacity:.25 } }

@media (prefers-reduced-motion: reduce){
  #shannon .sh-cursor{ animation:none; }
}

#shannon .sh-tried{
  font-family:var(--mono);
  font-size:var(--fs-md);
  letter-spacing:.22em;
  color:#c2403f;
  margin:0 0 12px;
  min-height:1.2em;
}

#shannon .sh-tried[hidden]{ display:none; }

/* ---------- controls ---------- */

#shannon .sh-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

#shannon .sh-key{
  width:3.2em;
  font-family:var(--mono);
  font-size:20px;
  text-align:center;
  text-transform:uppercase;
  padding:8px 4px;
  border-radius:var(--radius-sm);
  border:1px solid var(--muted);
  background:var(--bg);
  color:var(--text);
}

#shannon .sh-key:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

#shannon .sh-key:disabled{ opacity:.4; }

#shannon .sh-label{
  font-size:var(--fs-sm);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--muted);
}

#shannon .sh-btn,
#shannon .sh-select{
  font:inherit;
  font-size:var(--fs-base);
  padding:8px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  min-width:0;
  max-width:100%;
}

#shannon .sh-btn:hover,
#shannon .sh-select:hover{ border-color:var(--muted); }

#shannon .sh-status{
  min-height:1.4em;
  margin:12px 0 0;
  font-size:var(--fs-md);
  color:var(--muted);
}

/* ---------- the instrument panel ---------- */

#shannon .sh-stats{
  list-style:none;
  margin:var(--space-s) 0 0;
  padding:0;
  display:grid;
  gap:10px 18px;
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
}

#shannon .sh-stats li{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
}

#shannon .sh-stat-k{
  display:block;
  font-size:var(--fs-xs);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:3px;
}

#shannon .sh-stat-v{
  display:block;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:21px;
  color:var(--accent);
}

#shannon .sh-note{
  margin:var(--space-m) 0 0;
  font-size:var(--fs-md);
  color:var(--muted);
  max-width:62ch;
}

#shannon .sh-nojs{
  margin:var(--space-s) 0 0;
  font-size:var(--fs-md);
  color:var(--muted);
}
#shannon.sh-ready .sh-nojs{ display:none; }