/* Shared styling for the standalone pages (privacy, pledge).
   Deliberately independent of the game — these must load and read fine
   even if everything else is broken. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  /* Solid colour first so a long page is never left with unreadable text —
     the gradient sits on top and simply runs out. `fixed` attachment is
     unreliable on mobile Safari, so nothing depends on it. */
  background-color: #14432a;
  /* The Club's tabletop, copied out of `--table-bg` in style.css rather than
     approximated: the two crossed weave threads, the two grades of fleck, and
     the same radial underneath. These pages had their own flatter green, which
     read as a different site the moment you left the table — near enough to
     look like a mistake rather than far enough to look deliberate.

     Copied and not shared, because the whole point of this file is that these
     pages still render if the app's stylesheet is missing. If the felt is ever
     retuned, retune it here too. */
  background-image:
    repeating-linear-gradient(27deg, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(-64deg, rgba(0,0,0,.055) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(circle at 26% 30%, rgba(255,255,255,.05) .6px, rgba(0,0,0,0) 1.3px),
    radial-gradient(circle at 72% 68%, rgba(0,0,0,.08) .6px, rgba(0,0,0,0) 1.3px),
    radial-gradient(ellipse at 50% 22%, #236943 0%, #1d5c3a 34%, #14432a 78%, #0e3120 100%);
  background-size: auto, auto, 5px 5px, 7px 7px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  color: var(--pg-text, #f5efe0);
  line-height: 1.7;
  min-height: 100vh;
  padding: 0 18px 60px;
}
.wrap { max-width: 720px; margin: 0 auto; }
/* A desktop gets a wider column and larger type to fill it — 720px of 1900
   read as a strip down the middle of an empty page. 860 at 18px is still
   ~72 characters a line, which is why it stops there. Mike, 25 Aug. */
@media (min-width: 1200px) {
  .wrap { max-width: 860px; }
  body { font-size: 18px; }
  /* The mark gets bigger by being bigger, NOT by `transform: scale(1.45)`.

     A transform paints at the new size and reserves the old one. The header
     therefore drew 45% larger while its layout box stayed put, hanging down
     over the BACK chip below it — and, because a transform also makes a
     stacking context, it won the hit test over what it covered. Measured at
     1200px: the header's box ran to y=161 over a button at 129..171, leaving
     **ten clickable pixels of forty-two**, all at the bottom. Approach the
     button from above and nothing happens; come up from below, catch the live
     strip, and it behaves normally from then on.

     Reported as *"randomly the top back button... does not allow you to click
     when you hover over it from the top."* Not random: the pointer was over
     the header the whole way down.

     340 x 1.45 = 493, so the mark is the same size on screen as it was. The
     difference is that the page now knows how big it is. BACKLOG 1X.4. */
  header a.home .e1 { max-width: 493px; }
  header { padding-bottom: 12px; }
}
header { padding: 30px 0 8px; text-align: center; }
header a.home { display: inline-block; text-decoration: none; }
/* Mark E.1, the flag lockup with the address in it, since 19 Aug. Both cuts
   are in the markup and this picks one: the light cut is the Hall's, the dark
   one everywhere else, which is the rule the app uses. Done in CSS rather than
   with the theme script so the right mark is up before anything runs, and
   stays right with JavaScript off — which is the condition these pages are
   built to survive. */
header a.home .e1 { display: none; width: 100%; max-width: 340px; height: auto; }
header a.home .e1-dark { display: block; margin: 0 auto; }
html[data-theme="kc"] header a.home .e1-dark { display: none; }
html[data-theme="kc"] header a.home .e1-light { display: block; margin: 0 auto; }
h1 { font-size: clamp(28px, 6vw, 40px); color: var(--pg-head, #e0aa3e); margin: 26px 0 6px; }
.sub { opacity: .78; font-style: italic; margin-bottom: 26px; font-size: 16px; }
h2 { font-size: 21px; color: #ffe9b8; margin: 30px 0 8px; }
p { margin-bottom: 14px; font-size: 16.5px; }
ul { margin: 0 0 16px 22px; }
li { margin-bottom: 8px; font-size: 16.5px; }
b, strong { color: #ffe9b8; }
a { color: #e0aa3e; }
.card {
  background: rgba(0,0,0,.32); border: 1px solid rgba(224,170,62,.3);
  border-radius: 12px; padding: 18px 20px; margin: 22px 0;
}
.card.big { border-color: rgba(224,170,62,.6); background: rgba(224,170,62,.09); }
.big-number {
  font-size: 46px; color: #e0aa3e; font-weight: bold; line-height: 1.1;
}
.updated { opacity: .55; font-size: 14px; margin-top: 34px; }
/* The same family the app's `--brand-font` names, and for the same reason:
   the brand's typeface is TeX Gyre Bonum Bold, a Bookman, and these pages
   carry the same marks. Kept in step with `style.css` by hand for now; 1Y.3
   is where one embedded file replaces both stacks. BACKLOG 1Y.1. */
:root { --pg-brand-font: 'TeX Gyre Bonum', 'Bookman Old Style', 'URW Bookman',
                         'URW Bookman L', Bookman, 'Bitstream Charter', Georgia, serif; }
/* ---- BACK is one control, wherever it appears ----

   These pages had two: `.toplink` at 14px in an 81x42 chip and `.backlink` at
   17px in a 106x55 one, doing the same job at opposite ends of the same page.
   The app had two more at 15px. Four classes, three sizes, one meaning —
   reported as *"the back button everywhere is now a different font, size,
   weight, etcetera. Like, things just need to match."*

   One declaration both read. The top one keeps only its smaller margin,
   because it sits under a mark rather than after 2,000 words; everything that
   makes it a button comes from here. BACKLOG 1X.1, 1X.2. */
.backlink, .toplink {
  display: inline-block; padding: 13px 26px;
  background: #e0aa3e; color: #23180f; border-radius: 10px;
  text-decoration: none;
  font-family: var(--pg-brand-font);
  font-weight: bold; font-size: 17px;
  text-transform: uppercase; letter-spacing: .6px;
}
.backlink { margin-top: 30px; }
/* And it stays put while you scroll. These pages are long — the glossary,
   How to play — and a phone at the table reads them from the top; the way
   out should not be 2,000 words back up. Sticky rather than fixed so it
   scrolls with the column until the top edge, then rides it; the page's
   own foot still has the second Back. §1Q.10 part 2, 2 Sep. */
.toplink { margin: 18px 0 0; position: sticky; top: 10px; z-index: 5; }
.toplink:hover, .backlink:hover { opacity: .92; }
footer {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  text-align: center; font-size: 14px; opacity: .72;
}
footer a { margin: 0 9px; white-space: nowrap; }
/* The copyright notice, the footer's last line on every page: quieter and
   smaller than the links above it, and never competing with them. */
footer .legal { margin: 10px 0 0; font-size: 12px; opacity: .75; letter-spacing: .02em; }

/* A source note under a passage of history: present, checkable, not shouting. */
.src { font-size: 13px; opacity: .72; line-height: 1.6; }

/* ---------- the standalone pages follow the table you chose ----------

   These pages are plain HTML with no app in them, so they used to render in
   one fixed green regardless of the table a player had picked — which meant
   tapping "The 42% Pledge" from a maroon Northgate table dropped you onto a
   green page that looked like a different site. The theme is in local storage
   under the same origin, so a page can simply read it.

   Only the surface follows: background, ink and accent. Nothing here tries to
   reproduce the table art itself, because a page of prose wants a quiet
   surface, and a full recreation would be a second copy of the game's CSS
   drifting away from the first. */
html[data-theme] body { background-image: var(--pg-bg); background-color: var(--pg-base); }
/* Every anchor takes the room's accent — every anchor except the one that is
   drawn as a button. `.backlink` paints its background with that same accent,
   so this rule was setting the ink and the fill to one colour and the way back
   went blank: a gold lozenge at the bottom of the page with nothing written on
   it. It reads as a rendering fault rather than a link, which is the worst way
   for a "back" to fail. Dark ink on the accent, as the unthemed one always
   had. */
html[data-theme] h1, html[data-theme] .big-number,
html[data-theme] header a.home em,
html[data-theme] h1 { color: var(--pg-head, var(--pg-accent)); }
/* :not(.toplink) too — without it this rule painted the top chip's text in
   the chip's own fill: gold on gold, a BACK button with no visible word. The
   :not() terms give this more specificity than the chip rules below, so
   exclusion here is the only thing that works. Mike's screenshot, 25 Aug. */
html[data-theme] a:not(.backlink):not(.toplink) { color: var(--pg-accent); }
html[data-theme] h2, html[data-theme] b, html[data-theme] strong { color: var(--pg-bright); }
html[data-theme] .card { border-color: var(--pg-line); }
html[data-theme] .card.big { border-color: var(--pg-accent); background: var(--pg-tint); }
html[data-theme] .backlink,
html[data-theme] .toplink { background: var(--pg-accent); color: var(--pg-onaccent, #23180f); }

html[data-theme="northgate"] {
  --pg-base: #4a2c17; --pg-accent: #e6b566; --pg-bright: #ffe3b0;
  --pg-line: rgba(230,181,102,.34); --pg-tint: rgba(230,181,102,.10);
  --pg-bg:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, rgba(255,255,255,.02) 2px 7px),
    radial-gradient(ellipse at 50% 0%, #6b421f 0%, #4a2c17 62%, #3a2211 100%);
}
/* The one light table, and therefore the one place the fault showed. The
   background here is generated from `style.css`; everything else was tuned
   for the dark page these all used to be. BACKLOG 1K.15. */
html[data-theme="kc"] {
  --pg-base: #c6bda2;            /* the parchment, not a dark blue-grey */
  --pg-text: #2b2114;            /* what the table itself uses for type */
  --pg-head: #1a1208;            /* black, to match the wordmark above it */
  --pg-accent: #6b4a12; --pg-bright: #3a2a14; --pg-onaccent: #fdf6e8;
  --pg-line: rgba(60,50,35,.38); --pg-tint: rgba(107,74,18,.10);
  --pg-bg:
    radial-gradient(circle at 22% 34%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 0%, #3b4356 0%, #2b3140 64%, #242936 100%);
}
html[data-theme="slate"] {
  --pg-base: #1b1d21; --pg-accent: #9ec8f0; --pg-bright: #e8eef5;
  --pg-line: rgba(158,200,240,.28); --pg-tint: rgba(158,200,240,.09);
  --pg-bg:
    repeating-linear-gradient(102deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 50% 0%, #2a2d33 0%, #1f2226 60%, #1b1d21 100%);
}
html[data-theme="standard"] {
  --pg-base: #133f28; --pg-accent: #e0aa3e; --pg-bright: #ffe9b8;
  --pg-line: rgba(224,170,62,.3); --pg-tint: rgba(224,170,62,.09);
  --pg-bg:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 50% 0%, #1d5c3a 0%, #14432a 62%, #133f28 100%);
}

/* The text wordmark stood here — TEXAS ★ BONES over TEXASBONES.COM — and
   became Mark E.1 on 19 Aug, which is a picture with the address inside the
   drawing. Its rules went with it: .wm-star and .site, and the em and .star
   helpers further up, were all left applying to nothing. */

/* A way back at the top as well as the bottom. On a page this long, "back"
   only existing after 2,000 words is not really a way back. */
/* `.toplink` was declared separately here at its own size. It is the same
   control as `.backlink` and is declared with it, above. The one thing worth
   keeping from this block is why it does not ride the scroll: it was asked for
   sticky and then unasked once seen — "don't need back button on this page to
   scroll with it to be honest." */

/* ---------- tables of numbers ---------- the stats page, and the bots page's
   matchups (5 Sep). One set of rules for both; it was inline on the stats page. */
.stats { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.stats th, .stats td { padding: 8px 10px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.12); }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; font-weight: normal; }
.stats td b { font-size: 1.15em; }
.stats-note { font-size: 14px; opacity: .75; margin-top: 4px; }
.stats-when { font-size: 13px; opacity: .6; }


/* ---- GENERATED by build.js from style.css. Do not edit here: edit
   the theme blocks in style.css and rebuild. See BACKLOG 3.31. ---- */
html[data-theme="standard"] body {
  background-image:repeating-linear-gradient(27deg, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(-64deg, rgba(0,0,0,.055) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(circle at 26% 30%, rgba(255,255,255,.05) .6px, rgba(0,0,0,0) 1.3px),
    radial-gradient(circle at 72% 68%, rgba(0,0,0,.08) .6px, rgba(0,0,0,0) 1.3px),
    radial-gradient(ellipse at 50% 22%, #236943 0%, #1d5c3a 34%, #14432a 78%, #0e3120 100%);
  background-size: auto, auto, 5px 5px, 7px 7px, 100% 100%;
  background-attachment: fixed;
}
html[data-theme="northgate"] body {
  background-image:repeating-linear-gradient(92deg, rgba(50,27,10,.25) 0 3px, rgba(0,0,0,0) 3px 9px, rgba(38,20,8,.18) 9px 14px, rgba(0,0,0,0) 14px 27px),
    repeating-linear-gradient(88deg, rgba(255,214,150,.05) 0 2px, rgba(0,0,0,0) 2px 19px),
    radial-gradient(ellipse at 50% 30%, #7c5026 0%, #57351a 65%, #3e250f 100%);
  background-size: auto, auto, 100% 100%;
  background-attachment: fixed;
}
html[data-theme="kc"] body {
  background-image:radial-gradient(circle at 30% 30%, rgba(60,50,30,.09) 1px, rgba(0,0,0,0) 1.7px),
    radial-gradient(circle at 70% 65%, rgba(40,32,18,.08) 1px, rgba(0,0,0,0) 1.7px),
    radial-gradient(ellipse at 50% 25%, #dcd5c0 0%, #c6bda2 65%, #ac9f82 100%);
  background-size: 7px 7px, 11px 11px, 100% 100%;
  background-attachment: fixed;
}
html[data-theme="slate"] body {
  background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.028) .7px, rgba(0,0,0,0) 1.4px),
    radial-gradient(circle at 65% 70%, rgba(0,0,0,.14) .7px, rgba(0,0,0,0) 1.4px),
    repeating-linear-gradient(103deg,
      rgba(255,255,255,.016) 0 2px, rgba(0,0,0,0) 2px 9px,
      rgba(0,0,0,.05) 9px 12px, rgba(0,0,0,0) 12px 31px),
    radial-gradient(ellipse 60% 40% at 18% 22%, rgba(120,132,142,.16), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 50% 55% at 82% 68%, rgba(96,108,118,.13), rgba(0,0,0,0) 72%),
    radial-gradient(ellipse 70% 50% at 55% 92%, rgba(0,0,0,.28), rgba(0,0,0,0) 70%),
    linear-gradient(158deg, #363b40 0%, #262b2f 40%, #1a1e21 72%, #131618 100%);
  background-size: 7px 7px, 11px 11px, auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}