:root {
  --bg: #120a02;
  --amber: #ffb000;
  --amber-dim: #9a6a10;
  --pink: #ff2e88;
  --font: "Consolas", "Menlo", "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--amber);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: var(--amber); text-decoration: none; border-bottom: 1px dotted var(--amber-dim); }
a:hover, a:focus { background: var(--amber); color: var(--bg); outline: none; }
.crumb { color: var(--pink); }
a.crumb { border-color: var(--pink); }
a.crumb:hover { background: var(--pink); color: var(--bg); }
.dim { color: var(--amber-dim); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { max-width: 900px; margin: 0; padding: 16px; }
footer.wrap { margin-top: auto; }
pre { margin: 0 0 1em 0; white-space: pre-wrap; word-break: break-word; }
h1, h2 { font-size: 1em; text-transform: lowercase; }
h2::before { content: ":: "; color: var(--amber-dim); }

header.term-nav {
  border-bottom: 1px solid var(--amber-dim);
  padding: 8px 16px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
}
header.term-nav .host { color: var(--amber-dim); }

/* crt: scanlines + vignette, subtle enough for phones */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35));
}
@media (prefers-reduced-motion: no-preference) {
  .flicker { animation: flick 6s infinite steps(1); }
  @keyframes flick {
    0%, 93% { opacity: 1; }
    94% { opacity: .3; }
    95% { opacity: 1; }
    97% { opacity: .5; }
    98%, 100% { opacity: 1; }
  }
}

/* terminal */
.banner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin: 0 0 1em 0; max-width: 100%; overflow-x: auto; }
.banner pre { margin: 0; white-space: pre; }
/* the brewery wordmark has two forms: a wide two-liner (desktop, beside the
   glass) and a narrow four-word stack (mobile, glass hidden). */
.banner .title-stack { display: none; }
.prompt-line { display: flex; gap: 8px; }
.prompt-line .ps1 { color: var(--amber-dim); white-space: nowrap; }
.input-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
#term-in {
  flex: 1; min-width: 0;
  background: transparent; border: none;
  color: var(--amber); font: inherit;
  outline: none; caret-color: transparent;
}
/* block cursor: an obvious "type here" beacon, parked after the typed text */
.term-cursor {
  position: absolute; left: 0; top: .12em;
  width: .6em; height: 1.2em;
  background: var(--amber); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .term-cursor { animation: blink 1.06s steps(1) infinite; }
  @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
}

/* the board: a wall of little amber boxes, packed masonry-style. */
#board { columns: 220px; column-gap: 16px; margin: 0 0 1.2em; }
.post {
  break-inside: avoid;
  border: 1px solid var(--amber-dim);
  padding: 9px 12px 10px;
  margin: 0 0 16px;
}
.post:hover { border-color: var(--amber); }
.post-head { color: var(--amber-dim); margin-bottom: 5px; }
.post-head .who { color: var(--amber); }
.post-msg { margin: 0; white-space: pre-wrap; word-break: break-word; }
.post.system { border-style: dotted; }
.post.system .post-msg { color: var(--amber-dim); }

/* composer: type your note straight into the terminal */
.composer .field { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.composer .fp { color: var(--amber-dim); }
.composer textarea, .composer input {
  flex: 1; min-width: 0; background: transparent; border: none;
  border-bottom: 1px solid var(--amber-dim);
  color: var(--amber); font: inherit; outline: none; caret-color: var(--amber);
  resize: vertical;
}
.composer textarea::placeholder, .composer input::placeholder { color: var(--amber-dim); opacity: .8; }
.composer textarea:focus, .composer input:focus { border-bottom-color: var(--amber); }
#note-web { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.board-actions { display: flex; gap: 14px; align-items: baseline; margin-bottom: 1em; }
.board-actions button {
  background: transparent; border: none; padding: 0;
  color: var(--amber); font: inherit; cursor: pointer;
  border-bottom: 1px dotted var(--amber-dim);
}
.board-actions button:hover, .board-actions button:focus {
  background: var(--amber); color: var(--bg); outline: none;
}
.board-actions button:disabled { color: var(--amber-dim); cursor: not-allowed; }
#pin-form { margin-bottom: 1em; }

/* brewery: each brew boxed in its own amber frame */
.brew {
  border: 1px solid var(--amber-dim);
  padding: 10px 14px 12px;
  margin: 0 0 16px;
}
.brew:hover { border-color: var(--amber); }
.brew pre { margin: 0 0 .5em; }
.brew pre:last-child, .brew .chart:last-child { margin-bottom: 0; }

/* the arcade floor: cabinets of assorted shapes standing on one line.
   the fix for narrow screens is structural, not this rule: the markup
   splits what used to be one wide <pre> into three separate per-cabinet
   <pre>s (16-19 columns each), which stack and fit at 375px on their
   own. don't re-fuse them into one wide block — that reintroduces the
   old bug (a single 63-column <pre> rendered as 18 visual rows at
   375px) even with this CSS untouched. white-space: pre here is just
   defensive hardening on top of that split, guaranteeing no wrap
   regardless of future copy length or viewport. align-items: flex-end
   stands the mismatched cabinets on a shared floor. */
.cab-row {
  display: flex; gap: 24px; align-items: flex-end;
  flex-wrap: wrap; overflow-x: auto; margin: 0 0 1em;
}
.cab { white-space: pre; margin: 0; }
/* mourngrave: an unlit cabinet in the corner. the dimming carries the
   joke before you read the jammed coin plate. */
.cab.dark { color: var(--amber-dim); }

/* the token is a real button (it is clickable and focusable) but should
   look like nothing but the ASCII it wraps. */
.token-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.token-btn:focus { outline: none; }
.token-btn:focus-visible { outline: 1px dotted var(--amber-dim); }
/* deliberately no dimmed resting state for .token: the coin stays lit like
   everything else on the page — it is part of the banner, not a control that
   has to earn its brightness. cursor: pointer and the focus-visible outline
   above carry the affordance instead. */

/* charts (brewery): brewfather-style combined fermentation plot */
.chart { width: 100%; max-width: 420px; display: block; height: auto; margin-bottom: 1em; }
.chart .sg-line { fill: none; stroke: var(--amber); stroke-width: 1.5; }
.chart .temp-line { fill: none; stroke: var(--amber-dim); stroke-width: 1.2; stroke-dasharray: 4 3; }
.chart .axis { fill: var(--amber-dim); font: 8px var(--font); }
.chart .axis-sg { fill: var(--amber); }

@media (max-width: 600px) {
  body { font-size: 14px; }
  /* swap the wide title for the four-word stack, and tuck the glass into the
     top-right gap the shorter words (KING/OF/HECK) leave above BREWING — it
     fits within BREWING's width, so nothing overflows or overlaps. */
  .banner { position: relative; }
  .banner .title-wide { display: none; }
  .banner .title-stack { display: block; }
  /* nudged down so the glass sits centered against the KING/OF/HECK block
     (the three narrow words) rather than hugging the top. */
  .banner .beer { position: absolute; top: 3.6em; right: 0; margin: 0; }
  /* one cabinet per row on a phone — three abreast is 57 columns and will
     not fit the ~44 a 375px screen affords. */
  .cab-row { flex-direction: column; align-items: flex-start; }
}