/* Header, footer and page chrome shared by every page.
   The board page uses these to fill the viewport exactly; the prose pages
   scroll normally under the same bar. */
:root { --cyan: #55ffff; --dim: #777; --line: #333; --bar: 34px; }

html, body { margin: 0; background: #000; color: #bbb; }
body {
  font: 15px/1.6 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0 1rem; height: var(--bar); flex: 0 0 auto;
  font-size: .8rem; color: var(--dim);
}
header.bar { border-bottom: 1px solid var(--line); }
footer.bar { border-top: 1px solid var(--line); }
.bar a { color: var(--cyan); text-decoration: none; }
.bar a:hover { text-decoration: underline; }
.bar .brand { color: var(--cyan); font-weight: 600; letter-spacing: .06em; }
.bar nav { display: flex; gap: 1.1rem; margin-left: auto; }
.bar nav a[aria-current="page"] { color: #fff; }
.bar .tag { color: var(--dim); }
@media (max-width: 640px) { .bar .tag { display: none; } }

/* The board fills whatever is left between the two bars and never causes a
   scrollbar. min-height:0 is load-bearing: without it a flex child refuses
   to shrink below its content and the canvas pushes the footer off screen. */
#board {
  flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center; padding: .5rem;
}
/* The canvas keeps its real backing store and is scaled to fit by CSS, so
   the framebuffer stays exact while the box adapts to the window. */
#board canvas {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  image-rendering: pixelated;
}

main.prose { flex: 1 1 auto; max-width: 76ch; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
main.prose h1 { color: var(--cyan); font-size: 1.5rem; margin: 0 0 .6rem; }
main.prose h2 { color: var(--cyan); font-size: 1.05rem; margin: 2.4rem 0 .6rem; letter-spacing: .03em; }
main.prose h3 { color: #ddd; font-size: .95rem; margin: 1.4rem 0 .3rem; }
main.prose a { color: var(--cyan); }
main.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0 1.5rem; }
main.prose .lede { color: #ddd; }
main.prose ul { padding-left: 1.2rem; }
main.prose li { margin: .4rem 0; }

/* The consent prompt is styled as a board panel rather than a modern
   cookie bar, but it stays a native <dialog>: showModal() gives focus
   move-in, a focus trap, Escape and focus return for free. */
.consent {
  max-width: 52ch; padding: 1.2rem 1.4rem; color: #aaa;
  background: #000; border: 1px solid #55ffff;
  font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace;
}
.consent[open] { display: flex; flex-direction: column; gap: 1rem; }
.consent::backdrop { background: rgba(0, 0, 0, .72); }
.consent h2 { margin: 0; color: #55ffff; font-size: .95rem; letter-spacing: .05em; }
.consent p { margin: 0; }
.consent-actions { display: flex; gap: .75rem; justify-content: flex-end; }
.consent button {
  font: inherit; padding: .45em 1.2em; cursor: pointer;
  background: #000; color: #aaa; border: 1px solid #555;
}
.consent button[data-consent-accept] { color: #000; background: #ffff55; border-color: #ffff55; }