/* Edit this block to restyle the whole site. */
:root {
  --color-bg: #b8b8b8;          /* gray: base tone under the tiled background */
  --color-bg-tile: #c8c8c8;     /* light gray: alternate tone, close to --color-bg for a subtle weave */
  --color-panel: #ffffff;       /* white: card face */
  --color-border-light: #eeeeee;
  --color-border-dark: var(--color-bg);  /* darker of the two checkerboard grays */
  --color-navy: #000080;
  --color-yellow: #ffff00;
  --color-fg: #000000;
  --color-link: #0000ee;
  --color-term-bg: #000000;
  --color-term-fg: #00ff00;
  --color-header-shadow: #ff0000; /* red: single hard-offset shadow on every header */
  --color-green: #008000;       /* green: proud banner background for the "make another link" card */
  --color-blue-mid: #4169e1;    /* middle-tone blue: high scores header text shadow */
  --color-blue-rich: #14185c;   /* deep, richer blue: header gradients (darker, not brighter) */
  --color-burnt-orange: #cc5500; /* burnt orange: got/returning banner header background, early-web accent */
  --color-zebra-dark: #dcdcdc;  /* the darker of the table's two stripe tones — still lighter than the card behind it */
  --color-aquamarine: #7fffd4;  /* page header subtext */
  --color-text-dark-grey: #555555;  /* footer webmaster stats line */
  --color-text-light-grey: #aaaaaa; /* footer copyright — lightest, smallest text on the page */
  --font-serif: "Times New Roman", Times, serif;
  --font-mono: "Courier New", Courier, monospace;
  --border-width: 3px;
  --border-width-thin: 2px; /* ad-embed frames: same bevel as .panel, just thinner */
  --spacing-unit: 0.75rem; /* rem, not em: this gets used for both a panel's padding and its child headers' negative margins (to pull them flush to the border) — em would resolve differently on each element depending on its own font-size and throw that cancellation off */
}

* {
  box-sizing: border-box;
}

/* Once html has its own background, browsers paint the overscroll
   bounceback area (rubber-banding past the top/bottom) with it instead of
   propagating body's — a flat color reads better there than body's striped
   pattern would. */
html {
  background-color: var(--color-bg);
}

body {
  font-family: var(--font-serif);
  color: var(--color-fg);
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  /* pure-CSS diagonal stripe, no image file */
  background-image: repeating-linear-gradient(
    -75deg,
    var(--color-bg-tile) 0,
    var(--color-bg-tile) 2px,
    var(--color-bg) 2px,
    var(--color-bg) 4px
  );
}

a {
  color: var(--color-link);
}

/* Shares its width/centering with footer below it, so the visitor counter
   and chumbox read as one loose group sitting above the separate webmaster
   card rather than packed inside it. */
#visitor-block,
footer {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--spacing-unit);
}

/* header and main share this width so the header sits flush above the two
   columns below it (main content + the sponsored card's narrower right
   column). */
header,
main {
  max-width: 820px;
  margin: 0 auto;
}

header {
  padding: var(--spacing-unit);
}

/* Single-row nav strip between header and main — same width as both,
   but only tall enough for one line of links. */
#site-nav {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.3em var(--spacing-unit);
  text-align: center;
}

main {
  /* No padding here: header's border sits right at the 900px edge (outside
     its own padding), so main can't add extra padding of its own without
     insetting its cards' borders past where header's border lands. Each
     card already carries its own padding via .panel. */
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--spacing-unit);
  align-items: start;
}

@media (max-width: 640px) {
  main {
    grid-template-columns: 1fr;
  }
}

header {
  text-align: center;
  background: linear-gradient(to bottom, var(--color-navy), var(--color-blue-rich));
  margin-top: var(--spacing-unit);
  border-top: var(--border-width) solid var(--color-border-light);
  border-left: var(--border-width) solid var(--color-border-light);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  border-right: var(--border-width) solid var(--color-border-dark);
}

h1 {
  margin: 0;
  color: var(--color-yellow);
  letter-spacing: 0.08em;
  font-size: 2.5em;
  /* hard-offset shadow, not a blurred glow */
  text-shadow: 2px 2px 0 var(--color-header-shadow);
}

.tagline {
  font-family: var(--font-mono);
  color: var(--color-aquamarine);
  font-style: normal;
  margin: 0.25em 0 0;
}

/* Shared raised-panel look for every boxed section on the page. */
.panel {
  background: var(--color-panel);
  padding: var(--spacing-unit);
  margin-bottom: var(--spacing-unit);
  border-top: var(--border-width) solid var(--color-border-light);
  border-left: var(--border-width) solid var(--color-border-light);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  border-right: var(--border-width) solid var(--color-border-dark);
}

/* Smaller by default — h1 and the About This Website heading are the only
   headers exempt, and both set their own explicit font-size below. */
.panel h2 {
  margin-top: 0;
  color: var(--color-navy);
  font-size: 1.15em;
  text-shadow: 1px 1px 0 var(--color-header-shadow);
}

/* Same full-bleed proud-banner treatment as the leaderboard/create-section
   headings, in burnt orange, for the got/returning state banner — an
   early-web accent color instead of another navy card. */
.banner h2 {
  margin: calc(-1 * var(--spacing-unit)) calc(-1 * var(--spacing-unit)) var(--spacing-unit);
  padding: 0.5em var(--spacing-unit);
  background: var(--color-burnt-orange);
  color: var(--color-yellow);
  text-shadow: none;
}

/* Diversifies the otherwise-all-white cards with the lighter of the two
   checkerboard grays. */
.panel-alt {
  background: var(--color-bg-tile);
}

/* A prouder banner-style heading for the leaderboard card: full-width navy
   flag instead of plain inline text, so the table below reads as the
   card's focal point rather than competing with its own heading. */
#leaderboard-section h2 {
  margin: calc(-1 * var(--spacing-unit)) calc(-1 * var(--spacing-unit)) 0;
  padding: 0.5em var(--spacing-unit);
  background: var(--color-navy);
  color: var(--color-yellow);
  font-family: var(--font-serif);
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 0 var(--color-blue-mid);
}

/* Fills the rest of the card flush to its edges, right up against the
   heading banner above, so the table itself is the card's whole surface. */
#leaderboard-section table {
  width: calc(100% + 2 * var(--spacing-unit));
  margin: 0 calc(-1 * var(--spacing-unit)) calc(-1 * var(--spacing-unit));
  background: var(--color-zebra-dark);
  border: none;
}

/* Same prouder full-width banner treatment as the leaderboard heading, but
   its own color so the two cards don't read as identical. */
#create-section h2 {
  margin: calc(-1 * var(--spacing-unit)) calc(-1 * var(--spacing-unit)) var(--spacing-unit);
  padding: 0.5em var(--spacing-unit);
  background: var(--color-green);
  color: var(--color-yellow);
  text-align: left;
  text-transform: uppercase;
  font-size: 1.15em;
  text-shadow: none;
}

/* Negative margin on all four sides (not just top/sides like the other
   card headers) so this header fills the entire card — it's a banner-ad
   gag with no body copy, not a heading over content. Same deep navy as the
   high-scores header. font-size is a notch down from the usual 1.15em, and
   nowrap, so "SPONSORED LINKS" doesn't wrap in the narrower 240px column. */
#sponsored-section h2 {
  margin: calc(-1 * var(--spacing-unit));
  padding: 0.5em var(--spacing-unit);
  background: var(--color-navy);
  color: var(--color-yellow);
  text-align: center;
  font-size: 1em;
  white-space: nowrap;
  text-shadow: none;
}

/* No .panel here on purpose — this one sits straight on the page's own
   striped background instead of inside a white/grey card, so the frame
   the img gets from .ad-embed is the only thing setting it apart. */
#ipod-ad-section {
  margin-bottom: var(--spacing-unit);
}

#ipod-ad-section img {
  width: 100%;
  height: auto;
}

/* h2 here overrides only the shadow from .panel h2's default — no colored
   banner background either, deliberately: this card doesn't get the
   full-bleed header treatment the other cards have. */
#offers-section h2 {
  text-shadow: none;
}

#offers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

#offers-list li + li {
  margin-top: 0.5em;
}

/* Same plain-header treatment as #offers-section h2 — this is a sincere
   plug, not another joke-ad card, so no colored banner or shadow either. */
#plug-section h2 {
  text-shadow: none;
  white-space: nowrap;
}

#plug-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
}

#plug-list li + li {
  margin-top: 0.5em;
}

code {
  background: #ffffff;
  border: 1px solid var(--color-border-dark);
  padding: 0.1em 0.4em;
  font-family: var(--font-mono);
}

table {
  width: 100%;
  font-family: var(--font-mono);
  background: var(--color-panel);
  border-collapse: collapse;
  border-top: var(--border-width) solid var(--color-border-light);
  border-left: var(--border-width) solid var(--color-border-light);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  border-right: var(--border-width) solid var(--color-border-dark);
}

th,
td {
  padding: 0.4em 0.6em;
  text-align: left;
}

th {
  /* Kept independent of --color-border-dark: that token is becoming a much
     lighter gray below, which white label text wouldn't read against. */
  background: #404040;
  color: #ffffff;
  text-transform: uppercase;
  border-top: var(--border-width) solid var(--color-border-light);
  border-left: var(--border-width) solid var(--color-border-light);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  border-right: var(--border-width) solid var(--color-border-dark);
}

td {
  border: 1px solid var(--color-border-dark);
}

tbody tr:nth-child(odd) {
  background: var(--color-panel);
}

/* Flavor-only footer row, same height as any other row in the table. */
#leaderboard-table tfoot td {
  background: var(--color-bg);
}

/* Rank and score columns are always bold — they're the numbers that
   matter on this table, name is just label. */
#leaderboard-table tbody td:first-child,
#leaderboard-table tbody td:last-child {
  font-weight: bold;
}

/* Top-3 leaderboard rows only — classes added by renderLeaderboard() in
   app.js. Colors the number itself, on top of the bold above. */
#leaderboard-table td.rank-top {
  color: var(--color-header-shadow);
}

#leaderboard-table td.score-top {
  color: var(--color-green);
}

label {
  display: block;
  margin-bottom: 0.25em;
  font-weight: bold;
}

/* One line: "Your Name: [input] [button]" instead of stacked rows. */
#create-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
}

#create-form label {
  display: inline;
  margin-bottom: 0;
  white-space: nowrap;
}

input[type="text"] {
  font-family: var(--font-mono);
  padding: 0.4em;
  width: 100%;
  max-width: 20em;
  background: #ffffff;
  border-top: var(--border-width) solid var(--color-border-dark);
  border-left: var(--border-width) solid var(--color-border-dark);
  border-bottom: var(--border-width) solid var(--color-border-light);
  border-right: var(--border-width) solid var(--color-border-light);
}

#create-form input[type="text"] {
  width: auto;
  flex: 1;
  min-width: 8em;
}

button {
  font-family: var(--font-serif);
  background: var(--color-panel);
  color: var(--color-fg);
  padding: 0.4em 0.9em;
  cursor: pointer;
  border-top: var(--border-width) solid var(--color-border-light);
  border-left: var(--border-width) solid var(--color-border-light);
  border-bottom: var(--border-width) solid var(--color-border-dark);
  border-right: var(--border-width) solid var(--color-border-dark);
}

button:active {
  border-top-color: var(--color-border-dark);
  border-left-color: var(--color-border-dark);
  border-bottom-color: var(--color-border-light);
  border-right-color: var(--color-border-light);
}

/* Accented call-to-action: stands apart from the neutral beveled buttons
   used everywhere else on the page. */
.cta-button {
  background: var(--color-green);
  color: #ffffff;
  font-weight: bold;
}

/* Applied by app.js when a returning player already has a link — the
   creation form drops in visual weight instead of disappearing. Only
   padding-bottom shrinks: top/left/right must stay at --spacing-unit,
   since the h2's negative margin below is sized to cancel exactly that. */
#create-section.demoted {
  padding-bottom: 0.4em;
}

#create-section.demoted h2 {
  font-size: 1em;
}

.visitor-counter {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 2em;
  letter-spacing: 0.15em;
  color: var(--color-term-fg);
  background: var(--color-term-bg);
  padding: 0.3em 0.6em;
  margin: 0 0 var(--spacing-unit);
  border-top: var(--border-width) solid var(--color-border-dark);
  border-left: var(--border-width) solid var(--color-border-dark);
  border-bottom: var(--border-width) solid var(--color-border-light);
  border-right: var(--border-width) solid var(--color-border-light);
}

#about-section h2 {
  font-weight: normal;
  font-size: 1.5em;
  text-align: center;
  text-shadow: none;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--color-link);
}

#about-section p {
  font-family: var(--font-mono);
}

/* Classic html1 blue/red text accents, used sparingly for emphasis. */
.accent-blue {
  color: var(--color-navy);
}

.accent-red {
  color: var(--color-header-shadow);
}

#visitor-block,
footer {
  text-align: center;
  font-size: 0.85em;
}

.email-icon {
  color: var(--color-link);
  vertical-align: middle;
  margin-right: 0.3em;
  margin-bottom: 0.15em;
}

/* Classic webmaster-footer trivia line — page-size and load-time are real
   numbers, filled in by renderFooterStats() in app.js via the Navigation
   Timing API, not fabricated. */
.footer-stats {
  color: var(--color-text-dark-grey);
  font-size: 0.85em;
  margin: 0.4em 0 0;
}

/* Lightest, smallest text on the page, on purpose — a copyright line, not
   content anyone's meant to read closely. */
.footer-copyright {
  color: var(--color-text-light-grey);
  font-size: 0.7em;
  margin: 0.4em 0 0;
}

.footer-copyright a {
  color: inherit;
}

/* Positions the three invisible link overlays against the image below it.
   margin-top lives here instead of on .chumbox-ad since this wrapper now
   occupies the same box the plain img used to. */
#chumbox-wrap {
  position: relative;
  margin-top: var(--spacing-unit);
}

.chumbox-ad {
  display: block;
  max-width: 100%;
  height: auto;
}

/* One per chumbox panel — doctor/money/puppy, left to right, evenly split
   thirds. Invisible; the ad-embed frame on the image underneath is the
   only thing that needs to be seen. */
.chumbox-region {
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.334%;
}

.chumbox-region:nth-of-type(1) {
  left: 0;
}

.chumbox-region:nth-of-type(2) {
  left: 33.333%;
}

.chumbox-region:nth-of-type(3) {
  left: 66.667%;
}

/* Same raised bevel as .panel (light top/left, dark bottom/right), just
   thinner — shared by every fake ad on the page so they read as embedded
   third-party ad units in the site's own visual language, not plain
   images. */
.ad-embed {
  display: block;
  border-top: var(--border-width-thin) solid var(--color-border-light);
  border-left: var(--border-width-thin) solid var(--color-border-light);
  border-bottom: var(--border-width-thin) solid var(--color-border-dark);
  border-right: var(--border-width-thin) solid var(--color-border-dark);
}

/* The tiny grey disclosure label real ad networks bury under a chumbox. */
.ad-label {
  color: #999999;
  font-size: 0.75em;
  margin: 0.2em 0 0;
}