/* Crate Crawl (PL-31). Loaded after style.css, so this only adds.
   A terminal look, because the game is a 1976 text adventure over a database
   whose legacy half is bit-identical to 1998. */

body.crawl main {
  max-width: 42rem;
}

.crawl-title {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  margin: 0 0 0.25rem;
  white-space: pre-wrap;
}

.crawl-sub {
  font-style: italic;
  margin-top: 0;
  opacity: 0.8;
}

.crawl-prompt {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.crawl-search input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

.crawl-hits {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  border: 1px solid rgba(128, 128, 128, 0.45);
  max-height: 17rem;
  overflow-y: auto;
}

.crawl-hits li {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.crawl-hits li:last-child { border-bottom: 0; }
.crawl-hits li:hover,
.crawl-hits li:focus { background: rgba(128, 128, 128, 0.16); outline: none; }
.crawl-hits .hit-artist { opacity: 0.75; }

/* The room description. Monospace and preserved line breaks, so the Colossal
   Cave text keeps its shape. */
.crawl-story {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 1.2rem 0;
}

.crawl-story .said { opacity: 0.72; }

/* The running route. Same monospace as the room text, so it reads as part of
   the terminal rather than as a widget bolted beside it. */
.crawl-path {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 1.2rem 0;
  padding-left: 0.8rem;
  border-left: 2px solid rgba(128, 128, 128, 0.4);
}

.crawl-doors-label { margin-bottom: 0.5rem; }

.crawl-doors {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

/* Doors are buttons, not links: they post a move. Full width so a thumb can
   hit them on a phone without aiming. */
.crawl-doors button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.9rem;
  font: inherit;
  cursor: pointer;
  border: 1px solid rgba(128, 128, 128, 0.55);
  background: transparent;
  color: inherit;
  border-radius: 3px;
}

.crawl-doors button:hover:not(:disabled) { background: rgba(128, 128, 128, 0.14); }
.crawl-doors button:disabled { cursor: default; opacity: 0.55; }
.crawl-doors .door-n { font-weight: 700; margin-right: 0.5rem; }
.crawl-doors .door-artist { display: block; opacity: 0.78; font-size: 0.94rem; }

.crawl-verdict {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  font-weight: 600;
  margin: 0.8rem 0;
}

/* The end-of-game headline. Same size for both endings, different colour:
   "Oops, not that one." in the site's existing red, "You have won." in green.
   Sized in em so it stays proportional to the verdict rather than to the root.

   The green is local to the game because the shared palette has no green, and
   adding one to style.css would be a site-wide change for a single line here.
   Picked to sit alongside --error and --warn in weight, and to clear 4.5:1
   against --bg. */
.crawl-headline {
  font-size: 1.35em;
}

.crawl-headline.lose { color: var(--error); }
.crawl-headline.win { color: #5fc98a; }

/* The album the player should have picked. It is the payoff of a lost game and
   it sits inside a paragraph that is already 600 weight in --text, so plain
   bold would not have read as bright. Amber, because the two colours already
   in play here mean won and lost, and the right answer is neither. */
.crawl-answer {
  color: var(--warn);
  font-weight: 700;
}

.crawl-msg { margin-top: 0.8rem; }

.crawl-again button {
  padding: 0.6rem 1.1rem;
  font: inherit;
  cursor: pointer;
}

/* Dimmed with a colour rather than `opacity`, which was what it used to be.
   `opacity` composites the entire subtree into one layer, so nothing inside
   this paragraph can be brighter than 0.75 - a child setting `opacity: 1` does
   not undo it. That is what made the /game-about link unreadable: browser
   default blue, dimmed a further quarter. */
.crawl-foot {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Links on the game pages.

   style.css carries NO global anchor rule - it styles links per block
   (.byline a, .store-block a), so anything here was falling back to the
   browser default #0000EE, which against --bg (#0f1115) is very nearly
   invisible. #8ab4f8 is the standard dark-theme link blue and clears 8.9:1
   against this background, where --accent (#5b8def) manages 4.6:1.

   Listed per block on purpose rather than as `body.crawl a`. The Easter egg on
   game-about.html lives in a .faq-q and is held at `color: inherit` by an
   inline rule of specificity (0,1,0); a `body.crawl a` rule is (0,1,2) and
   would beat it, painting the egg bright blue and handing over the answer the
   next line refuses to give. Naming .faq-a and not .faq-q keeps the egg out of
   reach of the cascade entirely, instead of relying on specificity arithmetic
   staying correct forever. */
.crawl-foot a,
.crawl-byline a,
.faq-a a,
.faq-back a {
  color: #8ab4f8;
}

/* The standing instruction belongs WITH the doors it is about, so it drops the
   2rem the other footers carry. Sits directly under the last door. */
#task {
  margin-top: 0;
}

/* The byline. Small, but full-strength white rather than the 0.75 opacity the
   other footers carry - it is a credit, and it should be readable. */
.crawl-byline {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--text);
}

/* game-about.html */
.faq-head {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.faq {
  margin-bottom: 1.6rem;
}

/* No gap between a question and its answer: the pair reads as one block, and
   the 1.6rem on .faq is what separates one pair from the next. */
.faq-q {
  margin-bottom: 0;
  font-weight: 600;
}

.faq-a {
  margin-top: 0;
  color: var(--muted);
}

.faq-back {
  margin-top: 2.5rem;
}

@media (max-width: 30rem) {
  .crawl-title { font-size: 1.15rem; letter-spacing: 0.25em; }
  .crawl-story,
  .crawl-path { font-size: 0.94rem; }
}