/* Randomania theme. Loaded AFTER style.css on /randomania/* only, scoped to
   body.rm so every other page is untouched.

   The base site is kept: same near-black teal ground, same cards, same HUD
   strip and corner brackets. Only the accent family changes, from the guild's
   butter yellow to the pastels in the Randomania wordmark. Overriding the
   tokens re-tints all 55 var(--accent) uses in style.css at once, so nothing
   downstream needs a second rule.

   Hexes are sampled from assets/randomania-wordmark.png -- the letter fills of
   R-A-N-D-O-M-A-N-I-A in order. Resample if the logo is ever redrawn. */
body.rm {
  --rm-peri:  #c3c9df;
  --rm-mint:  #c9e5d2;
  --rm-teal:  #c0d8d3;
  --rm-sage:  #d8e7c9;
  --rm-cream: #eee9d0;
  --rm-peach: #f2dbc2;
  --rm-tan:   #e9cdbf;
  --rm-rose:  #e2c2c7;
  --rm-lilac: #d3c3db;

  /* Border-only variants of the nine. Same hues, more saturation and a touch
     less light: the wordmark's pastels are tuned to sit on white behind black
     outlines, and unmodified they read as grey once they are a thin edge on a
     near-black page. */
  --rm-peri-edge:  #9eace0;
  --rm-mint-edge:  #a3e7b9;
  --rm-teal-edge:  #9dd7cb;
  --rm-sage-edge:  #c6eaa2;
  --rm-cream-edge: #f3e6a7;
  --rm-peach-edge: #ffca91;
  --rm-tan-edge:   #f2b292;
  --rm-rose-edge:  #e69ba6;
  --rm-lilac-edge: #c7a0da;

  /* The nine, left to right, as one gradient. Every container border on these
     pages is a slice of this. */
  --rm-spectrum: linear-gradient(115deg,
    var(--rm-peri-edge), var(--rm-mint-edge), var(--rm-teal-edge), var(--rm-sage-edge),
    var(--rm-cream-edge), var(--rm-peach-edge), var(--rm-tan-edge), var(--rm-rose-edge),
    var(--rm-lilac-edge));

  --accent: var(--rm-cream);
  --accent-strong: #f9f3cc;

  /* The guild's ground is a saturated teal-green. Randomania drops it to a
     near-neutral, darker base so the pastel borders are the only colour in
     the frame and nothing competes with them. */
  --bg: #06070a;
  --surface: #0c0e13;
  --surface-2: #11141b;
  --line: #1c202a;
  --text: #edeff4;
  --text-dim: #949cab;
}

/* A wash of the logo's two ends, cool at the left and warm at the right, over
   the base radial. Purely decorative and very low alpha; text contrast is
   unchanged. */
body.rm {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(195, 201, 223, 0.055), transparent 62%),
    radial-gradient(900px 520px at 88% -8%, rgba(233, 205, 191, 0.045), transparent 62%),
    var(--bg);
}

/* ---------- Gradient container borders ---------- */
/* A 1px transparent border with two background layers: the panel fill clipped
   to the padding box, the spectrum clipped to the border box. That paints the
   gradient in the border only, keeps border-radius, and needs no extra markup
   or inline style, so the CSP is untouched. */
body.rm .rm-stat,
body.rm .rm-card,
body.rm .rm-soon,
body.rm .kofi-wrap,
body.rm .card,
body.rm .frame-hero,
body.rm .frame-wide,
body.rm .frame-inner {
  border: 2px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rm-spectrum) border-box;
}
/* Rotating the gradient per column keeps a row of panels from reading as one
   striped band. */
body.rm .rm-stat:nth-child(2), body.rm .rm-card:nth-child(2) {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(200deg, var(--rm-mint-edge), var(--rm-cream-edge), var(--rm-rose-edge)) border-box;
}
body.rm .rm-stat:nth-child(3), body.rm .rm-card:nth-child(3) {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(295deg, var(--rm-peach-edge), var(--rm-lilac-edge), var(--rm-peri-edge)) border-box;
}
body.rm .rm-stat:nth-child(4) {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(20deg, var(--rm-rose-edge), var(--rm-sage-edge), var(--rm-cream-edge)) border-box;
}
/* The subnav has a bottom edge only, so border-image can carry the gradient
   there: it paints only the sides that have a width. */
body.rm .rm-subnav {
  border-bottom: 2px solid transparent;
  border-image: var(--rm-spectrum) 1;
  background: rgba(12, 14, 19, 0.75);
}

/* ---------- Secondary nav ---------- */
/* Sits directly under the site header on Randomania pages. The hub itself is
   reached by the wordmark above, so it is not repeated here. */
.rm-subnav {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(4, 35, 29, 0.55);
}
.rm-subnav a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.rm-subnav a:hover { color: var(--text); }
.rm-subnav a[aria-current="page"] {
  color: var(--rm-cream);
  border-bottom-color: var(--rm-cream);
}

/* ---------- Hidden containers ---------- */
/* These are drawn by randomania.js and start hidden so nothing flashes empty
   while the content file loads. A display:flex/grid rule OUTRANKS the browser's
   own [hidden] { display: none }, so each of them needs saying explicitly --
   without this the "hidden" containers stay on screen as empty boxes. */
.rm-subnav[hidden],
.rm-stats[hidden],
.rm-cards[hidden],
.rm-soon[hidden],
.rm-roster-grid[hidden],
#rm-settings[hidden],
#rm-sections[hidden],
#rm-roster[hidden] { display: none; }

/* ---------- Layout ---------- */
/* Matches .hero's container (1100px, same side padding) without its large
   leading gap, so content sections can follow a hero on the same page. */
.rm-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) 2.5rem;
}
/* For pages whose content starts straight after the subnav with no hero. */
.rm-wrap-top { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.rm-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  margin-bottom: 0.7rem;
}
.rm-lede { color: var(--text-dim); max-width: 66ch; margin-bottom: 2rem; }

/* ---------- Hub ---------- */
.rm-hero {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 0.5rem;
}
.rm-hero .hero-sub { margin-left: auto; margin-right: auto; }
.rm-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.1;
  margin: 0.4rem 0 0.9rem;
}
/* The nine letter colours, used as a rule under the hero. */
.rm-rule {
  height: 3px;
  max-width: 640px;
  margin: 1.4rem auto;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--rm-peri), var(--rm-mint), var(--rm-teal), var(--rm-sage),
    var(--rm-cream), var(--rm-peach), var(--rm-tan), var(--rm-rose), var(--rm-lilac));
}

/* Headline numbers. */
.rm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.rm-stat { padding: 1.1rem 1rem; text-align: center; }
.rm-stat b {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--rm-cream);
}
.rm-stat span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Rotate the pastels across the row so the stats read as the wordmark does. */
.rm-stat:nth-child(1) b { color: var(--rm-peri); }
.rm-stat:nth-child(2) b { color: var(--rm-mint); }
.rm-stat:nth-child(3) b { color: var(--rm-peach); }
.rm-stat:nth-child(4) b { color: var(--rm-lilac); }

/* Cards linking to the subpages. */
.rm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  margin: 1.6rem 0 2.5rem;
}
.rm-card {
  display: block;
  padding: 1.3rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Border colour cannot animate through a background layer, so the hover lifts
   the card and glows instead. */
.rm-card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }
.rm-card h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--rm-cream);
}
.rm-card p { color: var(--text-dim); font-size: 0.93rem; }
.rm-card:nth-child(1) h3 { color: var(--rm-peri); }
.rm-card:nth-child(2) h3 { color: var(--rm-mint); }
.rm-card:nth-child(3) h3 { color: var(--rm-peach); }

/* ---------- Placeholder state ---------- */
/* Used by games/settings until their data ships. Deliberately says what is
   coming rather than 404ing, because the subnav links to them from day one. */
.rm-soon {
  padding: clamp(1.6rem, 5vw, 3rem);
  text-align: center;
  margin: 2rem 0 3rem;
}
.rm-soon h2 { font-family: var(--display); color: var(--rm-cream); margin-bottom: 0.6rem; }
.rm-soon p { color: var(--text-dim); max-width: 60ch; margin: 0 auto; }

/* ---------- Games roster ---------- */
.rm-roster-intro { color: var(--text-dim); max-width: 66ch; margin-bottom: 0.4rem; }
.rm-roster-total {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-peri);
  margin-bottom: 2rem;
}

/* Franchise heading with its count on the same baseline. */
.rm-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 2.2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  border-image: var(--rm-spectrum) 1;
}
.rm-group-title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--rm-cream);
}
.rm-group-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.rm-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Same gradient-border treatment as every other container on these pages. */
.rm-game {
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.2rem;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rm-spectrum) border-box;
}
/* Rotating the angle per column stops a grid of fifty cards reading as one
   repeated stripe. :nth-child(3n) follows the widest layout; narrower ones
   reflow and simply shuffle which angle lands where, which is still varied. */
.rm-roster-grid .rm-game:nth-child(3n + 2) {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(200deg, var(--rm-mint-edge), var(--rm-cream-edge), var(--rm-rose-edge)) border-box;
}
.rm-roster-grid .rm-game:nth-child(3n) {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(295deg, var(--rm-peach-edge), var(--rm-lilac-edge), var(--rm-peri-edge)) border-box;
}

.rm-game-name {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--rm-cream);
  margin-bottom: 0.8rem;
}
.rm-field-label {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-top: 0.7rem;
}
.rm-field-label:first-of-type { margin-top: 0; }
.rm-field-extras { color: var(--rm-rose); }
.rm-field-body { font-size: 0.88rem; color: var(--text); margin-top: 0.15rem; }

/* Goal lines are a list, not prose: one condition per line, no bullets, which
   is how Terra writes them. */
.rm-goal { list-style: none; margin-top: 0.15rem; }
.rm-goal li { font-size: 0.88rem; color: var(--text); }

/* ---------- Settings ---------- */
/* Link out to the roster for anyone who wanted an overview rather than this. */
.rm-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rm-cream-edge);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem;
  margin-bottom: 1.6rem;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rm-spectrum) border-box;
  transition: transform 0.12s ease;
}
.rm-btn:hover { transform: translateY(-1px); color: #fff3c0; }
.rm-btn[hidden] { display: none; }

/* Native <details>, so the browser's own find-in-page and keyboard handling
   come for free. Only the marker is restyled. */
.rm-set {
  border: 2px solid transparent;
  border-radius: var(--radius);
  margin-bottom: 0.55rem;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--rm-spectrum) border-box;
}
.rm-set-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}
.rm-set-head::-webkit-details-marker { display: none; }
/* Own marker, so it can sit on the left in the site's type rather than the
   browser's triangle. */
.rm-set-head::before {
  content: "+";
  font-family: var(--mono);
  color: var(--rm-peri);
  width: 1ch;
}
.rm-set[open] > .rm-set-head::before { content: "-"; }
.rm-set-name {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--rm-cream);
  flex: 1 1 auto;
}
.rm-set-slot {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rm-set-slot { color: var(--rm-mint-edge); }

.rm-set-body { padding: 0 1rem 1rem; }
.rm-set-note {
  color: var(--text-dim);
  font-size: 0.85rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.rm-opt { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.rm-opt:last-child { border-bottom: 0; }
.rm-opt-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.rm-opt-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
}
.rm-opt-value {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--rm-peach);
  /* Long values (an exclusion list) wrap instead of stretching the row. */
  overflow-wrap: anywhere;
  flex: 1 1 14rem;
}
.rm-opt-stock {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.8;
}
.rm-opt-about { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem; }

/* ---------- Search ---------- */
/* A plain filter box, not the challenges page's combobox: there is no list of
   suggestions to offer here, and <datalist> is still off the table because the
   native popup renders in OS chrome and breaks the dark theme. */
.rm-search { margin: 0 0 1.4rem; max-width: 420px; }
.rm-search label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.rm-search input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
}
.rm-search input::placeholder { color: var(--text-dim); opacity: 0.75; }
.rm-search input:focus-visible {
  outline: 2px solid var(--rm-peri);
  outline-offset: 2px;
}

/* Filtering toggles a class rather than rebuilding the list, so nothing is
   re-rendered and an entry the reader had expanded stays expanded. */
.rm-game.is-hidden,
.rm-set.is-hidden,
.rm-opt.is-hidden { display: none; }
/* Grid and flex containers outrank the browser's own [hidden] rule, so the
   emptied group heading and its grid each need saying explicitly. */
.rm-group-head[hidden],
.rm-group-wrap[hidden] { display: none; }

.rm-empty {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 1.5rem 0;
}

/* ---------- Corner brackets off ---------- */
/* style.css draws an accent bracket at two corners of every .frame. That motif
   belongs to the guild pages; against a gradient border it reads as a stray
   mark sitting on top of the edge, so it is dropped here only. */
body.rm .frame::before,
body.rm .frame::after { content: none; }

/* ---------- Ko-fi panel ---------- */
/* Ko-fi's embed is white and cannot be themed: it ignores prefers-color-scheme
   and every theme/dark/bg parameter, verified 2026-09-23. So rather than fight
   it, the widget is seated inside the page's own card -- gradient border, dark
   gutter, a label above it -- and the white panel reads as the thing being
   presented instead of a hole in the page. */
body.rm .kofi-wrap { padding: 0.9rem; }
body.rm .kofi-wrap .kofi-label {
  margin-bottom: 0.65rem;
  color: var(--rm-cream-edge);
}
body.rm .kofi-wrap iframe {
  display: block;
  padding: 0;
  border-radius: var(--radius);
  /* The widget's own ground, so the rounded corners do not show a seam. */
  background: #ffffff;
}