/* ===========================================================================
   Slade Collins and the Secret of Tahawus - Players Guide
   Chapter 1: "Lucille"

   Every colour below is taken from the game's own art database
   (assets/game_art/slade_collins_game_art.psproj), read through the artdb
   MCP server's artdb_get_palette, not picked by eye. The NES colour index
   each one comes from is noted beside it so a future editor can trace it
   back to the palette that owns it.

   ---------------------------------------------------------------------------
   Scoping, and why nearly every selector below carries a `.guide` prefix
   ---------------------------------------------------------------------------
   The guide used to be ten standalone pages that loaded this stylesheet and
   nothing else, so bare `h2`, `p`, `a`, `table` selectors were safe. It is now
   the site's third tab: the pages render through lib/layout.php, which means
   bootstrap.min.css and app.css are already loaded, and the site's navbar and
   footer sit on the page alongside the guide's own chrome.

   Two problems follow, and the prefix solves both:

     1. Bleed outward. A bare `a { color: gold }` would repaint the site navbar
        and footer. Everything the guide owns lives inside `<div class="guide">`
        (see lib/guide.php), so scoping there keeps the guide's typography off
        the shared chrome entirely.

     2. Losing to app.css. The one rule that CANNOT be scoped to `.guide` is the
        page background, because the guide's paper tone has to cover the whole
        viewport rather than just its own column. app.css states that as
        `body.sc-body`, so this file states `body.sc-body.sc-guide` -- one class
        more specific, and therefore a win on specificity rather than on the
        accident of which stylesheet the browser read last. render_header()
        takes a $bodyClass argument for exactly this.

   The guide's design is NOT converted to Bootstrap; that is the point of
   keeping this file. Where Bootstrap's reboot would quietly change something
   the guide previously got from browser defaults -- heading and table-cell
   font-weight most of all, since reboot drops both to 500 -- the old value is
   restated here rather than accepted. Those restatements are marked "reboot".

   Self-contained on purpose: no CDN, no webfonts, no external assets.
   =========================================================================== */

:root {
  /* palette.background.black_red_dark_red_white - the town's own palette 1 */
  --ink:          #000000; /* NES $0F */
  --blood:        #982220; /* NES $16 */
  --blood-deep:   #540400; /* NES $06 */
  --bone:         #eceeec; /* NES $30 */

  /* palette.title.logo_gold + palette.cutscene.warm_signage */
  --gold:         #ec9e36; /* NES $28 */
  --gold-bright:  #ffc420;
  --amber:        #744008; /* NES $17 */
  --steel:        #bebebe; /* NES $10 */

  /* palette.title.forest_ground */
  --pine-deep:    #184808; /* NES $0A */
  --pine:         #378412; /* NES $1A */
  --pine-bright:  #70bc2a; /* NES $2A */

  /* palette.sprite.sprite_slade_blue_copy */
  --slade-gold:   #d48820; /* NES $27 */

  --paper:        #0a0a0c;
  --panel:        #141418;
  --panel-edge:   #2a2a32;
  --dim:          #9a9aa4;

  --mono: "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.guide, .guide *, .guide *::before, .guide *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* The page ground. Two classes deep so it beats app.css's body.sc-body
   outright; see the scoping note at the top of this file. */
body.sc-body.sc-guide {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--paper);
}

/* Everything the old stylesheet put on <body> that is about the guide's text
   rather than the page's ground. Kept off <body> so the shared navbar and
   footer go on inheriting the site's own typography. */
.guide {
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

/* --- masthead ------------------------------------------------------------ */

.guide .masthead {
  border-bottom: 4px solid var(--blood);
  background: linear-gradient(180deg, var(--blood-deep) 0%, var(--ink) 100%);
  padding: 1.6rem 1.25rem 1.2rem;
}

.guide .masthead-inner { max-width: 1080px; margin: 0 auto; }

.guide .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.35rem;
}

.guide .masthead h1 {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 4vw, 2.4rem);
  font-weight: 700; /* reboot drops headings to 500 */
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--bone);
  text-shadow: 3px 3px 0 var(--blood-deep);
}

.guide .masthead .chapter {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  color: var(--gold-bright);
  margin: 0.4rem 0 0;
  letter-spacing: 0.12em;
}

/* --- navigation ---------------------------------------------------------- */

.guide nav.guide-nav {
  background: var(--ink);
  border-bottom: 1px solid var(--panel-edge);
  position: sticky;
  top: 0;
  z-index: 10;
}

.guide nav.guide-nav ul {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
}

.guide nav.guide-nav li { margin: 0; }

.guide nav.guide-nav a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--steel);
  border: 1px solid transparent;
}

.guide nav.guide-nav a:hover,
.guide nav.guide-nav a:focus {
  color: var(--gold-bright);
  border-color: var(--amber);
  outline: none;
}

.guide nav.guide-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

/* --- layout -------------------------------------------------------------- */

/* Was `main`. The site's layout owns <main> now, so the guide's reading column
   is its own element inside it. */
.guide .guide-body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
}

.guide h2 {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700; /* reboot */
  letter-spacing: 0.05em;
  color: var(--gold);
  border-bottom: 2px solid var(--blood);
  padding-bottom: 0.35rem;
  margin: 2.5rem 0 1rem;
}

.guide h2:first-of-type { margin-top: 0.5rem; }

.guide h3 {
  font-family: var(--mono);
  font-size: 1.12rem;
  font-weight: 700; /* reboot */
  letter-spacing: 0.04em;
  color: var(--pine-bright);
  margin: 1.9rem 0 0.5rem;
}

.guide h4 {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700; /* reboot */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slade-gold);
  margin: 1.3rem 0 0.35rem;
}

.guide p { margin: 0 0 0.9rem; }

.guide a { color: var(--gold-bright); }
.guide a:hover { color: var(--bone); }

.guide code, .guide kbd, .guide .mono { font-family: var(--mono); }

.guide kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid var(--amber);
  border-bottom-width: 3px;
  border-radius: 3px;
  background: var(--panel);
  color: var(--gold-bright);
  font-size: 0.85em;
  white-space: nowrap;
}

/* --- tables -------------------------------------------------------------- */

.guide .table-scroll { overflow-x: auto; margin: 0 0 1.25rem; }

.guide table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.92rem;
}

.guide caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0; /* reboot adds .5rem */
  padding-bottom: 0.4rem;
}

.guide th,
.guide td {
  border: 1px solid var(--panel-edge);
  padding: 0.45rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.guide th { font-weight: 700; } /* reboot drops th to 500 */

.guide thead th {
  background: var(--blood-deep);
  color: var(--gold-bright);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.022); }

.guide td.num, .guide th.num { text-align: right; font-family: var(--mono); }

/* --- callouts ------------------------------------------------------------ */

.guide .callout {
  border-left: 5px solid var(--gold);
  background: var(--panel);
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
}

.guide .callout > :last-child { margin-bottom: 0; }

.guide .callout .label {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.guide .callout.warn { border-left-color: var(--blood); }
.guide .callout.warn .label { color: var(--blood); }

.guide .callout.tip { border-left-color: var(--pine); }
.guide .callout.tip .label { color: var(--pine-bright); }

.guide .callout.secret { border-left-color: var(--slade-gold); }
.guide .callout.secret .label { color: var(--slade-gold); }

/* --- screenshots --------------------------------------------------------- */

/* An item icon dropped into a sentence rather than sitting in its own
   table cell. */
.guide img.item-icon.inline {
  display: inline-block;
  vertical-align: text-bottom;
  margin: 0 0.1em;
}

/* The enemy roster's portrait column. The pictures are crops of real
   frames, so they are small; the cell keeps them from being stretched
   and keeps the row heights even. */
.guide td.portrait {
  width: 88px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.guide td.portrait img {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  border-radius: 2px;
}

.guide figure.shot {
  margin: 0 0 1.5rem;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  padding: 0.75rem;
}

.guide figure.shot img {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--ink);
}

.guide figure.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--dim);
  text-align: center;
  font-style: italic;
}

/* Two screenshots side by side on a wide screen, stacked on a phone. The
   min() keeps a column from ever being wider than the page, so a screen
   narrower than 260px plus the gutters stacks instead of scrolling sideways. */
.guide .shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.guide .shot-grid figure.shot { margin: 0; }

/* --- card grid (index) --------------------------------------------------- */

.guide .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
  list-style: none;
}

.guide .cards li { margin: 0; }

.guide .cards a {
  display: block;
  height: 100%;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-top: 3px solid var(--blood);
  text-decoration: none;
  color: var(--bone);
}

.guide .cards a:hover,
.guide .cards a:focus {
  border-top-color: var(--gold);
  background: #1b1b21;
  outline: none;
}

.guide .cards .card-title {
  display: block;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--gold-bright);
  margin-bottom: 0.25rem;
}

.guide .cards .card-desc {
  display: block;
  font-size: 0.87rem;
  color: var(--dim);
  line-height: 1.45;
}

/* --- route list ---------------------------------------------------------- */

.guide ol.route {
  counter-reset: routestep;
  list-style: none;
  padding-left: 0;
}

.guide ol.route > li {
  counter-increment: routestep;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
}

.guide ol.route > li::before {
  content: counter(routestep);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1.9rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--gold);
}

/* --- ascii map ----------------------------------------------------------- */

.guide pre.map {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-left: 5px solid var(--pine);
  padding: 0.9rem 1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--bone);
  margin: 0 0 1.25rem;
}

/* --- footer -------------------------------------------------------------- */

.guide footer.guide-footer {
  border-top: 1px solid var(--panel-edge);
  background: var(--ink);
  color: var(--dim);
  font-size: 0.82rem;
  padding: 1.5rem 1.25rem 2.5rem;
}

.guide footer.guide-footer .inner { max-width: 1080px; margin: 0 auto; }
.guide footer.guide-footer p { margin: 0 0 0.5rem; }
.guide footer.guide-footer a { color: var(--slade-gold); }

/* --- item icons (items table) --------------------------------------------- */

/*
 * The icons are lifted straight off the game's own black inventory screen,
 * and several of them (both Travel Mugs, the Fists) draw their outline and
 * the mug's handle in the palette's black - invisible against black, on the
 * page as much as in the game. Sitting them on the panel tone instead of
 * pure black is what makes those edges readable at this size; the pixels
 * themselves are untouched.
 */
.guide .item-icon {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--panel-edge);
  border: 1px solid var(--panel-edge);
}

/* --- small screens ------------------------------------------------------- */

@media (max-width: 560px) {
  .guide { font-size: 15px; }
  .guide .guide-body { padding: 1.25rem 0.9rem 3rem; }
  .guide ol.route > li { padding-left: 2.2rem; }
}