/* 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 {
  /* Jeff's own 2018 artwork, cropped out of the original horizontal lockup.
     It is a painting, not a geometry, so it ships as the raster rather than
     as a trace that would throw away the texture. Sized to the proportion it
     holds in that lockup: about 1.5x the cap height of the letters either
     side of it. */
  width: 1.6em;
  height: 1.6em;
  margin: 0 -0.08em;
  flex: none;
  display: block;
}

/* ---------- 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, RIM + RECALL. 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); }

/* ---------- league picker (RimRecall only) ---------- */

/* One slot on the hub fronts two data domains, nba and wnba. This is how a
   player standing on the page itself switches between them. Every other
   domain's page never renders this markup at all, so these rules are
   dormant everywhere else. */
.league-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
}

.picker-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.picker-btn {
  font: inherit;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.5rem 1rem;
  color: var(--ink-quiet);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0.35rem;
}
.picker-btn:hover,
.picker-btn:focus-visible { color: var(--ink); border-color: var(--indigo-bright); }

/* The button describing the league the picker actually resolved to. Set by
   the inline script in rimrecall/index.html, never by CSS alone -- this
   rule only says how "you are here" looks once JS marks it. */
.picker-btn[aria-current="page"] {
  color: var(--ground);
  background: var(--ember);
  border-color: var(--ember);
}

/* ---------- 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); }

/* What a scale's words are measuring, said in plain English. Only RimRecall
   carries one today, because On fire and Ice cold read as a rating of the
   player unless the page says otherwise. Quieter than the hint above it, so
   it reads as a footnote to the question rather than as part of it. */
.scale-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-quiet);
  opacity: 0.85;
}

/* The hidden attribute is only a default of display:none, and any class
   selector with its own display beats it. That is not theoretical here: the
   typed form carries display:flex, so marking it hidden for multiple-choice
   mode left it sitting under the four buttons in a real browser while the
   attribute said otherwise. The choices grid and the hint row have the same
   shape, so settle it once for every element this page toggles. */
[hidden] { display: none !important; }

/* ---------- multiple choice ---------- */

.choices {
  display: grid;
  /* Two up where there is room, stacked on a phone. Four names of wildly
     different lengths ("Emu" next to "Southern cassowary") make a single row
     of equal columns read as ragged, so the grid stays coarse on purpose. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.choice {
  /* Options are answers, not actions. The filled indigo button is reserved for
     the thing that moves the game forward, so a choice reads as a plate the
     player is picking up. */
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 0.9rem;
  text-align: center;
  letter-spacing: 0.02em;
  font-family: var(--text);
  font-size: 1rem;
  color: var(--ink);
  background: #0b0f1e;
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
}

.choice:hover:not(:disabled) {
  border-color: var(--indigo-bright);
  color: var(--indigo-bright);
}

/* A hinted-away option stays on the board rather than vanishing, so the four
   buttons do not reflow under a finger already on its way down. */
.choice[data-removed="true"] {
  opacity: 0.3;
  text-decoration: line-through;
  cursor: default;
}

.hint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
}

.hint {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  color: var(--ink-quiet);
  background: transparent;
  border: 1px dashed var(--rule);
}

.hint:hover:not(:disabled) { color: var(--ember); border-color: var(--ember); }
.hint:disabled { opacity: 0.4; cursor: default; }

.hint-note { font-size: 0.82rem; color: var(--ember); }

.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-image {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin: 0 auto 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
}

.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;
  /* pre would keep the whole card on one unbroken line each, which pushed the
     verdict note out of the panel and out of sight on any narrow screen. The
     note is the only long line, and the grid rows are nine characters, so
     wrapping costs the layout nothing and stops the card hiding its own joke.
     Copy is unaffected either way: it reads textContent, not the render. */
  white-space: pre-wrap;
}

/* Share is disabled for the moment between the summary appearing and the
   picture finishing its render. Visibly so, or a tap in that window looks
   like a broken button. */
.copy:disabled { opacity: 0.45; cursor: progress; }

.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);
}