/* ============================================================================
   Big Typing Quiz: the game bible stylesheet.

   A reading surface in the same arcade night as the app and the front page:
   near-black indigo stage, cyan as the one interactive accent, amber for
   numbers that matter, magenta for danger. It shares the palette with
   css/app.css and css/home.css and shares no rules with either, for the same
   reason js/bible.js imports nothing from js/: this page has to keep working
   when the app is mid-rewrite.

   Rules this file holds to:
     - DARK ONLY, like the rest of the site. No theme toggle, no
       prefers-color-scheme branch.
     - Every colour comes from a token in :root. A literal below that line is a
       bug waiting to happen.
     - This is a DOCUMENT first. Measure, line height and heading rhythm win
       over decoration everywhere they conflict.
     - Wide tables scroll inside their own box. The page body never scrolls
       sideways.
     - prefers-reduced-motion kills every transition at the end of the file.
   ========================================================================= */

:root{
  --bg:#080B14;
  --surface:#121829;
  --surface-2:#1B2238;
  --surface-3:#252E4A;

  --ink:#E9EFFF;
  --muted:#A4B2D2;
  --faint:#6B799C;

  --line:#222A44;
  --line-strong:#333D63;

  --brand:#38DFD2;
  --brand-2:#7BF5EC;
  --brand-deep:#128C84;
  --brand-ink:#04201E;
  --brand-tint:rgba(56,223,210,.13);

  --xp:#F2B33D;
  --hazard:#FF5D8F;
  --violet:#8B7BFF;
  --good:#5BE59A;

  --radius:14px;
  --radius-sm:9px;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shadow-2:0 6px 22px rgba(0,0,0,.45);
  --shadow-3:0 18px 50px rgba(0,0,0,.55);
  --bar-h:60px;
}


/* ============ reset ============ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Anchored headings must clear the sticky bar, or every deep link lands with
     its own title hidden underneath it. */
  scroll-padding-top:calc(var(--bar-h) + 18px);
}

body{
  margin:0;
  color:var(--ink);
  font:400 16px/1.65 var(--sans);
  background:
    radial-gradient(1100px 620px at 15% -8%,rgba(56,223,210,.08),transparent 62%),
    radial-gradient(900px 520px at 88% 4%,rgba(139,123,255,.07),transparent 60%),
    var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-2); text-decoration:underline; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--brand); color:var(--brand-ink);
  padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }


/* ============ the bar ============ */
.bar{
  position:sticky; top:0; z-index:40;
  height:var(--bar-h);
  background:rgba(8,11,20,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.bar-in{
  max-width:1320px; margin:0 auto; height:100%;
  padding:0 clamp(.7rem,2vw,1.2rem);
  display:flex; align-items:center; gap:.75rem;
}

.brand{ display:flex; align-items:center; gap:.5rem; color:var(--ink); flex:none; }
.brand:hover{ text-decoration:none; color:var(--ink); }
.brand-mark{ width:26px; height:26px; border-radius:7px; }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.brand-name em{ color:var(--brand); font-style:normal; }

.bar-tag{
  flex:none;
  font:600 .66rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-tint);
  border:1px solid rgba(56,223,210,.28); border-radius:999px;
  padding:.34rem .6rem;
}

.btn{
  flex:none;
  background:var(--brand); color:var(--brand-ink);
  font:600 .85rem/1 var(--sans);
  padding:.55rem .95rem; border-radius:999px;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{ background:var(--brand-2); color:var(--brand-ink); text-decoration:none; transform:translateY(-1px); }

.tocbtn{
  display:none; flex:none;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:999px;
  font:600 .8rem/1 var(--sans); padding:.55rem .9rem; cursor:pointer;
}
.tocbtn[aria-expanded="true"]{ background:var(--surface-3); border-color:var(--brand-deep); }


/* ============ search ============ */
.find{ position:relative; flex:1 1 auto; max-width:460px; margin-left:auto; }

.find-icon{
  position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--faint); pointer-events:none;
}

#find{
  width:100%;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:999px;
  font:400 .88rem/1 var(--sans);
  padding:.6rem 2.2rem .6rem 2.1rem;
  -webkit-appearance:none; appearance:none;
}
#find::placeholder{ color:var(--faint); }
#find:focus{ border-color:var(--brand-deep); background:var(--surface-2); outline:none; }
#find::-webkit-search-cancel-button{ -webkit-appearance:none; }

.find-kbd{
  position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  font:500 .7rem/1 var(--mono); color:var(--faint);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:.2rem .4rem; pointer-events:none;
}
.find:focus-within .find-kbd{ display:none; }

.find-out{
  position:absolute; top:calc(100% + .5rem); left:0; right:0;
  max-height:min(70vh,520px); overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-3);
  padding:.35rem; z-index:50;
}

.hit{
  display:block; width:100%; text-align:left;
  background:none; border:0; border-radius:var(--radius-sm);
  padding:.5rem .6rem; cursor:pointer; color:var(--ink);
}
.hit:hover, .hit.on{ background:var(--surface-2); text-decoration:none; }
.hit.on{ box-shadow:inset 2px 0 0 var(--brand); }
/* Each line of a hit is its own block. As inline spans they ran together into
   "8.7 What an encounter pays . table rowBoss Phase", which is unreadable at a
   glance and a glance is all a result list gets. */
.hit-where{
  display:block;
  font:500 .66rem/1.3 var(--mono); color:var(--faint); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hit-what{ display:block; font:600 .9rem/1.35 var(--sans); color:var(--ink); margin-top:.1rem; }
.hit-what mark{ background:rgba(56,223,210,.22); color:var(--brand-2); border-radius:3px; padding:0 .1em; }
.hit-text{
  font:400 .78rem/1.45 var(--sans); color:var(--muted); margin-top:.15rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hit-text mark{ background:rgba(242,179,61,.2); color:var(--xp); border-radius:3px; padding:0 .1em; }
.find-none{ padding:.9rem .7rem; color:var(--muted); font-size:.85rem; }
.find-tip{
  padding:.45rem .7rem .5rem; color:var(--faint);
  font:400 .72rem/1.4 var(--sans); border-top:1px solid var(--line); margin-top:.25rem;
}


/* ============ layout ============ */
.shell{
  max-width:1320px; margin:0 auto;
  padding:0 clamp(.7rem,2vw,1.2rem);
  display:grid; grid-template-columns:288px minmax(0,1fr); gap:clamp(1.2rem,3vw,3rem);
  align-items:start;
}

.toc{
  position:sticky; top:calc(var(--bar-h) + 14px);
  max-height:calc(100vh - var(--bar-h) - 28px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:1.2rem .4rem 2rem 0;
  scrollbar-width:thin;
}
.toc-h{
  margin:0 0 .55rem;
  font:600 .66rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
.toc-list, .toc-sub{ list-style:none; margin:0; padding:0; }
.toc-list > li{ margin:0 0 .1rem; }
.toc-sub{ margin:.1rem 0 .5rem .1rem; padding-left:.7rem; border-left:1px solid var(--line); }

.toc a{
  display:block; border-radius:var(--radius-sm);
  padding:.3rem .55rem; color:var(--muted);
}
.toc a:hover{ background:var(--surface); color:var(--ink); text-decoration:none; }
.toc-2{ font:600 .86rem/1.4 var(--sans); color:var(--ink) !important; }
.toc-3{ font:400 .81rem/1.4 var(--sans); }
.toc a.here{ background:var(--brand-tint); color:var(--brand-2) !important; box-shadow:inset 2px 0 0 var(--brand); }


/* ============ the document ============ */
.doc{
  padding:1.6rem 0 5rem;
  max-width:78ch;                    /* measure wins over available width */
  min-width:0;                       /* so a wide table cannot stretch the grid */
}

.doc h1{
  font:700 clamp(1.9rem,4.4vw,2.7rem)/1.12 var(--serif);
  letter-spacing:-.015em; margin:.2rem 0 1.1rem;
}
.doc h2{
  font:600 clamp(1.35rem,2.9vw,1.75rem)/1.2 var(--serif);
  margin:3.2rem 0 .9rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.doc h3{
  font:600 clamp(1.06rem,2.1vw,1.2rem)/1.3 var(--serif);
  margin:2.2rem 0 .7rem; color:var(--brand-2);
}
.doc h4{ font:600 .98rem/1.35 var(--sans); margin:1.5rem 0 .5rem; color:var(--ink); }
.doc h1 + h2{ margin-top:2rem; }

.anchor{
  margin-left:.45rem; color:var(--faint);
  font:400 .8em/1 var(--mono); opacity:0; transition:opacity .12s ease;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus{ opacity:1; text-decoration:none; }

.doc p{ margin:0 0 1rem; color:var(--muted); }
.doc strong{ color:var(--ink); font-weight:600; }

.doc ul, .doc ol{ margin:0 0 1.1rem; padding-left:1.3rem; color:var(--muted); }
.doc li{ margin:0 0 .45rem; }
.doc li::marker{ color:var(--faint); }
.doc ol > li::marker{ font-family:var(--mono); font-size:.85em; color:var(--brand-deep); }

.doc code{
  font:500 .86em/1.4 var(--mono);
  background:var(--surface-2); color:var(--brand-2);
  border:1px solid var(--line); border-radius:5px;
  padding:.1em .34em;
  overflow-wrap:anywhere;
}

.doc pre{
  margin:0 0 1.2rem; padding:.95rem 1.05rem;
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand-deep); border-radius:var(--radius-sm);
  overflow-x:auto;
}
.doc pre code{
  background:none; border:0; padding:0; color:var(--ink);
  font-size:.83rem; line-height:1.6; white-space:pre;
}

.doc blockquote{
  margin:0 0 1.3rem; padding:.9rem 1.1rem;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-left:3px solid var(--xp);
  border-radius:var(--radius-sm);
}
.doc blockquote p{
  margin:0; color:var(--ink);
  font:600 1.02rem/1.5 var(--serif);
}


/* ============ tables ============
   The reference half of this document is tables, so they get the most care.
   Every one scrolls inside its own box: on a phone a parameter table is wider
   than any screen and the alternative is a page that slides sideways. */
.tw{
  margin:0 0 1.4rem;
  overflow-x:auto;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--shadow-2);
  -webkit-overflow-scrolling:touch;
}

.doc table{ border-collapse:collapse; width:100%; font-size:.87rem; }

.doc thead th{
  position:sticky; top:0; z-index:1;
  background:var(--surface-3); color:var(--ink);
  font:600 .7rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  text-align:left; white-space:nowrap;
  padding:.6rem .8rem;
  border-bottom:1px solid var(--line-strong);
}

.doc tbody td{
  padding:.55rem .8rem;
  border-top:1px solid var(--line);
  color:var(--muted); vertical-align:top;
}
.doc tbody tr:first-child td{ border-top:0; }
.doc tbody tr:nth-child(even){ background:rgba(255,255,255,.016); }
.doc tbody tr:hover{ background:var(--brand-tint); }
.doc tbody td:first-child{ color:var(--ink); font-weight:500; }
.doc td code{ white-space:nowrap; }

.doc th.r, .doc td.r{ text-align:right; }
.doc th.c, .doc td.c{ text-align:center; }
.doc td.r{ font-family:var(--mono); font-size:.84rem; color:var(--xp); white-space:nowrap; }

/* Where search lands. It fades rather than sits, because a permanent highlight
   on a row is indistinguishable from a state the document was authored with.
   A row gets the wash (it is one line in a table of forty and needs finding); a
   heading gets a bar down its side instead, because a full-width wash behind
   display type is loud and makes the words themselves harder to read, which is
   the opposite of what "here is the thing you asked for" should do. */
.doc tr.flash td{ animation:flash 2.2s ease-out 1; }
@keyframes flash{
  0%,45%{ background:rgba(56,223,210,.22); }
  100%{ background:transparent; }
}

.doc h2.flash, .doc h3.flash{
  animation:flashHead 2.2s ease-out 1;
  margin-left:-.85rem; padding-left:.85rem;   /* the bar sits outside the text */
}
@keyframes flashHead{
  0%,45%{ box-shadow:inset 3px 0 0 var(--brand); background:rgba(56,223,210,.07); }
  100%{ box-shadow:inset 3px 0 0 transparent; background:transparent; }
}


/* ============ footer ============ */
.foot{
  border-top:1px solid var(--line);
  padding:1.6rem clamp(.9rem,3vw,2rem) 2.4rem;
  text-align:center; color:var(--faint);
  font-size:.82rem; line-height:1.6;
  background:rgba(18,24,41,.4);
}
.foot p{ margin:0 auto .55rem; max-width:70ch; }
.foot code{ font-family:var(--mono); color:var(--muted); }
.foot-nav{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; justify-content:center; }
.foot-build{ font-family:var(--mono); font-size:.72rem; }


/* ============ narrow screens ============ */
@media (max-width:960px){
  .shell{ grid-template-columns:minmax(0,1fr); gap:0; }
  .tocbtn{ display:block; }
  .bar-tag{ display:none; }

  /* The contents becomes a drawer under the bar rather than a column beside
     the text. It is display:none when closed so its links are out of the tab
     order too, not merely out of sight. */
  .toc{
    display:none;
    position:sticky; top:var(--bar-h); z-index:30;
    max-height:min(72vh,560px);
    margin:0 -.2rem; padding:.9rem .6rem 1.2rem;
    background:var(--surface); border:1px solid var(--line-strong);
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:var(--shadow-3);
  }
  .toc.open{ display:block; }
  .doc{ padding-top:1.2rem; }
}

@media (max-width:720px){
  body{ font-size:15px; }
  .brand-name{ display:none; }
  .find{ max-width:none; }
  .btn{ padding:.5rem .8rem; font-size:.8rem; }
  .doc h2{ margin-top:2.4rem; }
  .doc table{ font-size:.82rem; }
}

@media (max-width:560px){
  /* Search wins the bar on a phone. The Play button is a nicety here and the
     footer carries the same links; a search box too narrow to read what you
     typed into it is not. */
  .bar .btn{ display:none; }
  .find-kbd{ display:none; }
}


/* ============ print ============
   A game bible gets printed. Drop the furniture, keep the text, and let tables
   break across pages instead of scrolling inside a box that does not exist on
   paper. */
@media print{
  .bar, .toc, .foot-nav, .anchor, .find{ display:none !important; }
  body{ background:#fff; color:#111; }
  .shell{ display:block; max-width:none; padding:0; }
  .doc{ max-width:none; padding:0; }
  .doc p, .doc li, .doc tbody td{ color:#222; }
  .doc h1, .doc h2, .doc h3, .doc strong, .doc tbody td:first-child{ color:#000; }
  .doc h2{ page-break-before:always; border-top:0; }
  .tw{ overflow:visible; box-shadow:none; border-color:#bbb; }
  .doc thead th{ position:static; background:#eee; color:#000; }
  .doc code{ background:#f2f2f2; color:#111; border-color:#ddd; }
  .doc tbody tr:nth-child(even){ background:#fafafa; }
  .doc td.r{ color:#111; }
}


/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}