/* Brain Out Loud, the game shell. One stylesheet for every domain: the
   page differs by copy and by its data-domain attribute, never by CSS.
   Visual language: 1820s engraved star chart meeting a mid-century science
   textbook plate. Dark ground, warm ink, one measured accent. */

:root {
  --ground: #0d1020;
  --ground-lift: #151a30;
  --rule: #2b3252;
  --ink: #e8e4d9;
  --ink-quiet: #9aa0bd;
  --indigo: #6b7ccf;
  --indigo-bright: #94a4ee;
  --ember: #e0a458;
  --hit: #7fd1a5;
  --plate: #11162a;
  --measure: 34rem;
  --display: "Baumans", "Trebuchet MS", system-ui, sans-serif;
  /* Monoton is a marquee face built for short words like MOTEL. Its inline
     stripes chained across nine letters and BIRDBRAIN read as pure buzz. Alfa
     Slab is the 19th-century display idiom the plate language already claims. */
  --marquee: "Alfa Slab One", "Baumans", Georgia, serif;
  --text: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b2140 0%, transparent 60%),
    var(--ground);
  color: var(--ink);
  font-family: var(--text);
  line-height: 1.55;
  min-height: 100vh;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--ink);
  color: var(--ground);
  padding: 0.5rem 0.9rem;
  border-radius: 0.3rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

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

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 1rem 0.9rem;
  text-align: center;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  font-family: var(--display);
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  letter-spacing: 0.06em;
  color: var(--indigo-bright);
  text-decoration: none;
}
.wordmark:hover,
.wordmark:focus-visible { color: var(--ink); }

/* The brain replaces the O in LOUD. Carried over from the 2018 mark. */
.brain-o {
  width: 1.05em;
  height: 1.05em;
  display: block;
  transform: translateY(0.06em);
}

/* ---------- shell ---------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
}

.title-block { text-align: center; margin-bottom: 1.6rem; }

.game-title {
  font-family: var(--marquee);
  font-size: clamp(2.05rem, 11.5vw, 3.5rem);
  line-height: 1;
  margin: 0;
  color: var(--ember);
  /* Slab wants tight tracking. Negate the trailing letter-space so the centred
     word actually sits on centre. */
  letter-spacing: 0.012em;
  margin-right: -0.012em;
}

/* Every edition name is a compound with a joke in the seam: BIRD + BRAIN,
   BARK + BRILLIANT. Two colors so people can see the seam. */
.title-brain { color: var(--ink); }

.game-sub {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-quiet);
}

.status { text-align: center; color: var(--ink-quiet); }

/* ---------- the ask ---------- */

.stage { margin-top: 0.5rem; }

.round-count {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: center;
}

.ask, .reveal, .summary, .colophon {
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 0.55rem;
  padding: 1.3rem 1.1rem;
}

.prompt {
  font-family: var(--display);
  font-size: clamp(1.6rem, 8vw, 2.1rem);
  margin: 0 0 1rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.target {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  text-align: center;
  padding: 0.75rem 0.6rem;
  margin-bottom: 1.1rem;
  border: 1px dashed var(--rule);
  border-radius: 0.4rem;
  background: #0b0f1e;
}

.target-label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.band-name {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ember);
  letter-spacing: 0.04em;
}

.band-hint { font-size: 0.88rem; color: var(--ink-quiet); }

.answer { display: flex; gap: 0.5rem; }

.answer input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.72rem 0.8rem;
  color: var(--ink);
  background: #080b18;
  border: 1px solid var(--rule);
  border-radius: 0.35rem;
}
.answer input::placeholder { color: #6a7096; }
.answer input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--indigo-bright);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-family: var(--display);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.72rem 1.1rem;
  color: var(--ground);
  background: var(--indigo-bright);
  border: 1px solid var(--indigo-bright);
  border-radius: 0.35rem;
}
button:hover { background: var(--ink); border-color: var(--ink); }

.retry {
  min-height: 1.3rem;
  margin: 0.65rem 0 0;
  font-size: 0.9rem;
  color: var(--ember);
  text-align: center;
}

/* ---------- reveal ---------- */

.reveal { margin-top: 0.9rem; }

.verdict {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.35rem;
  text-align: center;
}
.verdict[data-hit="true"] { color: var(--hit); }
.verdict[data-hit="false"] { color: var(--ember); }

.reading {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--ink-quiet);
  font-size: 0.95rem;
}
.reading strong { color: var(--ink); font-weight: 600; }

.chart-wrap { margin: 0 0 1rem; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }

.chart-caption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-quiet);
  text-align: center;
}

.next { display: block; margin: 0 auto; }

/* ---------- summary ---------- */

.summary { margin-top: 0.9rem; text-align: center; }

.summary-score {
  font-family: var(--marquee);
  font-size: 2.6rem;
  margin: 0;
  color: var(--ember);
}

.summary-line { margin: 0.2rem 0 1rem; color: var(--ink-quiet); }

.streak-line {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.card {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.9rem;
  padding: 0.9rem;
  background: #080b18;
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  overflow-x: auto;
  text-align: left;
  white-space: pre;
}

.copy-status { min-height: 1.2rem; font-size: 0.85rem; color: var(--hit); }

.profile-link { margin: 0 0 1rem; font-size: 0.85rem; }
.profile-link a { color: var(--ink-quiet); text-decoration-color: var(--rule); }
.profile-link a:hover,
.profile-link a:focus-visible { color: var(--ink); }

.recap {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink-quiet);
}
.recap li { margin-bottom: 0.35rem; }
.recap strong { color: var(--ink); font-weight: 600; }

/* ---------- colophon ---------- */

.colophon { margin-top: 1.6rem; }
.colophon h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.6rem;
  color: var(--indigo-bright);
}
.colophon p { margin: 0 0 0.7rem; font-size: 0.9rem; color: var(--ink-quiet); }
.colophon .quiet { font-style: italic; margin-bottom: 0; }

.foot {
  border-top: 1px solid var(--rule);
  padding: 1rem;
  text-align: center;
}
.foot p { margin: 0; font-size: 0.78rem; color: var(--ink-quiet); }
.foot a { color: var(--ink-quiet); text-decoration-color: var(--rule); }
.foot a:hover, .foot a:focus-visible { color: var(--ink); }
/* These need .foot in front of them. Bare .foot-credit loses to .foot p on
   specificity, which silently kills the auto margin and left-jams the text. */
.foot p.foot-brand { font-family: var(--display); letter-spacing: 0.04em; }
.foot p.foot-credit {
  max-width: var(--measure);
  margin: 0.5rem auto 0;
  line-height: 1.5;
}
.foot-social {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal[data-fresh="true"] { animation: rise 260ms ease-out; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* Small screens. At 320x568 the submit button landed 7px inside the fold,
   which means it is cut off once real browser chrome is present. The first
   action has to be reachable without scrolling. */
@media (max-width: 400px), (max-height: 640px) {
  .masthead { padding: 0.7rem 0.75rem 0.6rem; }
  .wrap { padding: 1rem 0.75rem 2.25rem; }
  .title-block { margin-bottom: 0.9rem; }
  .game-title { font-size: clamp(1.75rem, 10vw, 2.3rem); }
  .game-sub { font-size: 0.82rem; letter-spacing: 0.14em; }
  .ask, .reveal, .summary, .colophon { padding: 0.9rem 0.8rem; }
  .round-count { margin-bottom: 0.4rem; }
  .prompt { margin-bottom: 0.7rem; }
  .target { padding: 0.5rem; margin-bottom: 0.7rem; gap: 0.05rem; }
  .band-name { font-size: 1.25rem; }
  .band-hint { font-size: 0.8rem; line-height: 1.35; }
  .answer input, .answer button { padding: 0.6rem 0.7rem; }
}

/* The classification. A score is a number, a title is a thing you post. */
.badge {
  margin: 0 0 1.1rem;
  padding: 1rem 0.9rem;
  border: 1px solid var(--ember);
  border-radius: 0.4rem;
  background: rgba(224, 164, 88, 0.07);
}

.badge-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.badge-title {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: clamp(1.2rem, 6vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--ember);
}

.badge-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}