/* PhoenixMUD public site. Same identity tokens as the web client
 * (app/globals.css): the ash/heat ladder. Dark by design: a text world
 * served over telnet; the page keeps the terminal's ground and lights it
 * with embers, not with a white page.
 *
 * System: spacing from {8,12,16,24,32,48}; text sizes 12 (labels) / 14
 * (small, mono) / 15 (secondary) / 17 (body) / 19 (lede, h3); one label
 * recipe (.eyebrow .how .kind .pill .stats dt th); one box recipe (ash-1
 * ground, smoke hairline; rows 8x12, blocks 12x16); breakpoints 560 / 760
 * / 820. Headings are Plex Serif, body Plex Sans, labels and game text
 * Plex Mono. */
:root {
  --ash-0: #0C0907; --ash-1: #171210; --ash-2: #26201B;
  --smoke: #40372F; --cinder: #9C9184; --parch: #CFC6BA; --ivory: #F2EADC;
  --ember-deep: #7A2E12; --ember: #B4441E; --flame: #E8842A; --gold: #FFC96B;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--ash-0); color: var(--parch);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
a:hover { border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ash-2); color: var(--ivory); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Type */
h1, h2, h3 { font-family: var(--display); color: var(--ivory); line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.5vw, 46px); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.01em; margin-top: 32px; }
.eyebrow + h2, h2:first-child { margin-top: 0; }
h3 { font-size: 19px; font-weight: 600; }
p { margin: 0 0 16px; max-width: 68ch; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 6px 0; }
code { font-family: var(--mono); }
.mono { font-family: var(--mono); font-size: 0.95em; }
.strong { color: var(--ivory); font-weight: 500; }
.muted { color: var(--cinder); }
.small { font-size: 14px; }
.lede { font-size: 19px; line-height: 1.55; color: var(--parch); max-width: 58ch; }
.toc { font-size: 15px; color: var(--cinder); }
.toc a, .crumbs a { color: var(--parch); }

/* Labels: one recipe, colour per role. */
.eyebrow, .how, .kind, .pill, .stats dt, th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.eyebrow { color: var(--flame); margin: 0 0 8px; }
.eyebrow.spaced { margin-top: 24px; }
.how { color: var(--flame); margin-right: 6px; }
.kind, .stats dt, th { color: var(--cinder); }
.pill { display: inline-block; padding: 1px 7px; border: 1px solid var(--ember); color: var(--flame); border-radius: 999px; vertical-align: middle; }

/* Boxes: ash-1 ground, smoke hairline. Rows 8x12, blocks 12x16. */
pre, .identify { background: var(--ash-1); border: 1px solid var(--smoke); padding: 12px 16px; overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.5; margin: 0 0 16px; color: var(--parch); }
.idl, pre.desc { white-space: pre-wrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* A reading measure, LEFT-ALIGNED in the full wrap — not a narrower centred
   column. Centring 780px inside a 1120px header indents every heading on
   /play/, /who/ and /rules/ relative to the brand above it, so those pages
   read as a different site from /, /leaderboard/ and the catalog. The measure
   is what prose needs; the centring was never the point. */
.wrap.narrow { max-width: var(--wrap); }
.wrap.narrow > * { max-width: 780px; }

/* Header: brand, the play button, then the nav. Narrow screens wrap the nav onto its own row. */
.site-header { border-bottom: 1px solid var(--smoke); background: rgba(12, 9, 7, 0.92); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 5; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-height: 58px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory); font-family: var(--display); font-size: 22px; border: 0; margin-right: auto; }
.site-nav { display: flex; gap: 18px; font-size: 15px; order: 3; }
.site-nav a { color: var(--parch); border: 0; padding: 7px 0; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ivory); box-shadow: inset 0 -2px 0 var(--ember); }
@media (min-width: 761px) { .site-nav { order: 2; margin-left: auto; } .brand { margin-right: 0; } .bar .live-pill { order: 3; } .bar .cta.small { order: 4; } }

/* The online indicator: right of the nav, before the Play now button. It takes
   the nav's own type, colour and vertical padding so it reads as part of that
   row rather than as a badge dropped beside it. There is no Online Now tab —
   this IS the link, which is why it still says so when the feed is quiet.
   No dot until there is a reading behind it: an unlit dot next to the words
   reads as "nobody is on", and a missing file cannot make that claim. */
.live-pill { display: inline-flex; align-items: center; font-size: 15px; color: var(--parch); border: 0; padding: 7px 0; white-space: nowrap; }
.live-pill:hover, .live-pill[aria-current="page"] { color: var(--ivory); box-shadow: inset 0 -2px 0 var(--ember); }
.live-pill .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--smoke); margin-right: 8px; }
.live-pill.live .dot { display: inline-block; }
.live-pill.on { color: var(--ivory); }
.live-pill.on .dot { background: var(--flame); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flame) 22%, transparent); }
@media (max-width: 760px) { .site-nav { width: 100%; } }

/* Buttons */
.cta { display: inline-block; background: var(--ember); color: var(--ivory); font-weight: 500; padding: 11px 18px; border: 1px solid var(--ember); border-radius: 3px; text-align: center; }
.cta:hover { background: #c84f24; border-color: #c84f24; }
.cta.ghost { background: transparent; color: var(--parch); border-color: var(--smoke); }
.cta.ghost:hover { border-color: var(--cinder); color: var(--ivory); }
.cta.small { padding: 7px 13px; font-size: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero: banner, tagline, lede, button, address, one 16px step between each. */
.hero { position: relative; overflow: hidden; background: #000; border-bottom: 1px solid var(--smoke); }
.hero-stack { padding: 48px 0; display: grid; gap: 16px; justify-items: start; }
.hero .hero-stack > * { margin: 0; }
.banner { width: 100%; max-width: none; }
.banner img { width: min(100%, 1040px); height: auto; display: block; }
.tagline { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); color: var(--ivory); }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.9s ease-out both; }
  .addr::after { animation: blink 1.1s steps(1) infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
/* The address block: the cursor is decoration (::after), so copying the text yields a clean address. */
.addr { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 16px; background: var(--ash-1); border: 1px solid var(--smoke); padding: 8px 12px; color: var(--ivory); }
.addr::after { content: "_"; color: var(--flame); }
.addr-label { color: var(--cinder); }
.addr-host { font-weight: 500; }
.addr-inline { color: var(--ivory); }

/* Sections */
.section { padding: 48px 0; border-bottom: 1px solid var(--smoke); }
.section:last-of-type { border-bottom: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cards { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; background: var(--ash-1); border: 1px solid var(--smoke); padding: 16px 24px 20px; margin: 0; }
.card h3 { margin-bottom: 8px; }
.card h3 a { color: var(--ivory); border: 0; }
.card > p:last-child { margin-top: auto; margin-bottom: 0; }

/* Numbers: a flex strip, so 4 or 7 cells fill their rows at any width. */
.numbers { background: var(--ash-1); }
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.stats > div { flex: 1 1 120px; border-top: 2px solid var(--ember); padding-top: 8px; }
.stats dd { margin: 2px 0 0; font-family: var(--mono); font-size: clamp(22px, 2.6vw, 30px); color: var(--ivory); font-variant-numeric: tabular-nums; }

/* Linked stat blocks — the figures on the home page and the catalog head are
   doors into the catalog. The whole block is the target, not just the label,
   because a two-word <dt> is a small thing to hit; the number under it is the
   part the eye is already on. */
.stats.linked > div { transition: border-color 120ms ease, background 120ms ease; }
.stats.linked > div:hover { border-top-color: var(--flame); background: var(--ash-1); }
.stats.linked dt a { color: inherit; text-decoration: none; }
.stats.linked dt a::after { content: ""; position: absolute; inset: 0; }
.stats.linked > div { position: relative; padding-left: 6px; padding-right: 6px; }
.stats.linked > div:hover dd { color: var(--gold); }
.stats.four { margin: 8px 0 0; }

/* Ladder */
.ladder { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; max-width: 420px; }
.ladder li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px minmax(0, 1fr); align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 15px; background: var(--ash-1); border: 1px solid var(--smoke); padding: 8px 12px; margin: 0; }
.ladder .lv { color: var(--cinder); }
.ladder .arrow { color: var(--ember); }
.ladder .tier { color: var(--gold); font-weight: 500; }

/* Definition grids (classes, races): name + one line, even cells. */
.defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 32px; margin: 0 0 8px; }
.defs div { border-top: 1px solid var(--smoke); padding: 10px 0 12px; }
.defs dt { color: var(--ivory); font-weight: 600; }
.defs dd { margin: 2px 0 0; color: var(--parch); font-size: 15px; line-height: 1.5; }
.defs.one { grid-template-columns: 1fr; }
.defs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Lists */
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { margin: 0 0 8px; }
ul.plain strong { color: var(--ivory); font-weight: 500; }
ul.cols { columns: 2; column-gap: 24px; }
ul.cols li { break-inside: avoid; }
details { margin: 0 0 12px; }
summary { cursor: pointer; color: var(--ivory); }
.shot { margin: 24px 0 0; }
.shot img { border: 1px solid var(--smoke); }
.shot figcaption { font-size: 14px; color: var(--cinder); margin-top: 8px; }

/* Rules page */
.rules { padding-left: 26px; }
.rules > li { margin: 0 0 12px; }
.rules li::marker { color: var(--flame); font-family: var(--mono); }
.subrules { list-style: none; padding-left: 0; margin: 8px 0 0; }
.subrules li { margin: 0 0 8px; padding-left: 46px; position: relative; }
.subnum { position: absolute; left: 0; top: 0; font-family: var(--mono); color: var(--flame); font-size: 15px; }
.preamble { color: var(--cinder); border-left: 2px solid var(--ember); padding-left: 14px; }
.epilogue { color: var(--cinder); }

/* Footer */
/* The footer wears the site's own recipes: the ember rule and mono label the
   stats blocks use, and the gold that marks a link everywhere else. It was the
   one region where a link was the same colour as the prose beside it. */
.site-footer { border-top: 1px solid var(--smoke); background: var(--ash-1); padding: 48px 0; font-size: 15px; color: var(--cinder); }
.foot-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; }
.foot-grid > div { border-top: 2px solid var(--ember); padding-top: 12px; }
.foot-title { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame); margin: 0 0 10px; }
.site-footer p { margin: 0 0 8px; }
/* The address is a fact people copy, so it reads at prose contrast. */
.site-footer p.mono { color: var(--parch); }
.foot-links { line-height: 2; }
.foot-links a { margin-right: 2px; }

/* Catalog */
.crumbs { font-size: 15px; color: var(--cinder); margin: 0 0 16px; }
.crumbs .sep { margin: 0 6px; }
.search { margin: 0 0 16px; }
.search input { width: 100%; max-width: 640px; font: inherit; font-size: 16px; padding: 8px 12px; background: var(--ash-1); color: var(--ivory); border: 1px solid var(--smoke); border-radius: 3px; }
.wrap.narrow .search input { max-width: none; }
.search input:focus { outline: 2px solid var(--flame); outline-offset: 2px; border-color: var(--ember); }
.hits { list-style: none; padding: 0; margin: 0 0 24px; max-width: 640px; }
.hits li { margin: 0; }
.hits a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--smoke); color: var(--ivory); }
.hits a:hover { background: var(--ash-1); }
.hit-sub { font-size: 14px; color: var(--cinder); }
.sites { list-style: none; padding: 0; margin: 0 0 16px; }
.sites li { margin: 0 0 8px; padding: 8px 12px; background: var(--ash-1); border: 1px solid var(--smoke); }
.room { color: var(--ivory); }
.cont-grid { columns: 3; column-gap: 32px; }
.cont-grid > div { margin: 0 0 24px; }
.cont-grid h3 { break-after: avoid; }
.cont-grid li { break-inside: avoid; }
.tablewrap { overflow-x: auto; border: 1px solid var(--smoke); background: var(--ash-1); margin: 0 0 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--smoke); }
th { font-weight: 500; }
tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Legacy &X colour tokens, the web client's terminal palette. */
.c-k { color: #555; } .c-r { color: #c44; } .c-g { color: #4c4; } .c-y { color: #cc4; } .c-b { color: #55f; } .c-m { color: #c4c; } .c-c { color: #4cc; } .c-w { color: #ccc; }
.c-K { color: #888; } .c-R { color: #f66; } .c-G { color: #6f6; } .c-Y { color: #ff6; } .c-B { color: #88f; } .c-M { color: #f6f; } .c-C { color: #6ff; } .c-W { color: #fff; }

/* Breakpoints: 820 collapses columns, 760 wraps the nav (above), 560 is the phone. */
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .cards.three { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .defs.two { grid-template-columns: 1fr; }
  .cont-grid { columns: 2; }
}
@media (max-width: 560px) {
  .section, .hero-stack, .site-footer { padding-top: 32px; padding-bottom: 32px; }
  .cta-row, .cta-row .cta, .hero-stack .addr { width: 100%; }
  ul.cols { columns: 1; }
  .cont-grid { columns: 1; }
  .hits a { grid-template-columns: 64px minmax(0, 1fr); }
  .hit-sub { grid-column: 2; }
}

/* Live pages (/who/, /leaderboard/). Both are a static shell the browser
   fills from a JSON file the host refreshes, so every one of these rules has
   to look deliberate while EMPTY as well as full — the shell is what a reader
   sees for the first few hundred milliseconds, and all of what they see if the
   feed is down. Same recipes as the rest: ash-1 ground, smoke hairline, mono
   uppercase labels, tabular numerals on anything ranked. */
.live-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 0 0 24px; }
.live-count { font-family: var(--mono); font-size: clamp(22px, 2.6vw, 30px); color: var(--ivory); font-variant-numeric: tabular-nums; }
.live-count .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); margin-right: 10px; vertical-align: middle; }
.live-count.on .dot { background: var(--flame); box-shadow: 0 0 0 4px color-mix(in srgb, var(--flame) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .live-count.on .dot { animation: pulse 2.4s ease-in-out infinite; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--flame) 8%, transparent); } }
.live-age { font-size: 14px; color: var(--cinder); font-family: var(--mono); }
.live-note { font-size: 15px; color: var(--cinder); margin: 0 0 24px; }
.live-empty { background: var(--ash-1); border: 1px solid var(--smoke); padding: 24px; color: var(--cinder); }
.live-empty .strong { display: block; margin-bottom: 8px; }

/* Who: one table, name carries the weight, flags trail as chips. */
.who td.lv, .who td.cls { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--cinder); white-space: nowrap; }
.who td.nm { color: var(--ivory); font-weight: 500; white-space: nowrap; }
.who td.ti { color: var(--parch); }
.who td.cl { color: var(--gold); white-space: nowrap; }
.flag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinder); border: 1px solid var(--smoke); border-radius: 999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.flag.afk { color: var(--flame); border-color: var(--ember-deep); }

/* Leaderboard: cards in a grid, one board each. min 300px keeps three across
   on a desktop and one on a phone without a breakpoint of its own. */
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 0 0 32px; }
.board { background: var(--ash-1); border: 1px solid var(--smoke); padding: 16px 20px 8px; }
.board h3 { margin-bottom: 4px; }
.board .blurb { font-size: 14px; color: var(--cinder); margin: 0 0 12px; max-width: none; }
.board table { font-size: 15px; }
.board th, .board td { padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--smoke) 55%, transparent); }
.board tr:last-child td { border-bottom: 0; }
.board td.rk { width: 26px; font-family: var(--mono); color: var(--smoke); font-variant-numeric: tabular-nums; }
.board tr.top td.rk { color: var(--flame); }
/* The name cell WRAPS rather than truncating. An ellipsis here (nowrap +
   max-width:1px, the usual table trick) hides the level and class on a 300px
   card, and those are the two things that tell a reader whether a rank is
   impressive. A name is at most 20 characters; letting it take a second line
   costs nothing. */
.board td.nm { color: var(--ivory); }
.board td.nm .who-sub { color: var(--cinder); font-family: var(--mono); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.board td.vl { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; padding-left: 12px; }
.board tr.top td.vl { color: var(--flame); font-weight: 500; }
.board .det { font-size: 12px; color: var(--cinder); padding: 0 0 6px 26px; border: 0; }
.board .skel { color: var(--smoke); }
.group-head { margin-top: 32px; }
.group-head + .boards { margin-top: 16px; }

/* The hero's live count. Same dot as .live-count, at body size, and dim until
   somebody is actually on — a lit ember for an empty world would be a lie the
   eye reads before the words do. */
.live-inline { font-family: var(--mono); font-size: 15px; margin: 0; }
.live-inline a { color: var(--cinder); border: 0; }
.live-inline a:hover { color: var(--ivory); }
.live-inline .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--smoke); margin-right: 9px; vertical-align: middle; }
.live-inline.on a { color: var(--parch); }
.live-inline.on .dot { background: var(--flame); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flame) 22%, transparent); }

/* A pointer to a catalog page that is not one of the counted categories.
   Kept out of the stats grid on purpose: a count beside it would claim it is
   a browsable set the same size as Items or Zones. */
.ref-also { color: var(--cinder); font-size: 15px; margin: 18px 0 0; }
.ref-also a { color: var(--parch); }
.ref-also a:hover { color: var(--ivory); }

/* Racial resistances (/ref/resistances/).
   The marks are the site's own ember ladder, NOT traffic lights: this page has
   to read as part of the catalog, and a red/green pair is the one combination
   the commonest colour blindness cannot separate. The LETTER carries the
   meaning; colour and weight only reinforce it. */
.rs { font-size: 14px; }
.rs th, .rs td { padding: 4px 6px; text-align: center; }
.rs .rs-race { text-align: left; white-space: nowrap; color: var(--ivory); font-weight: 500; padding-right: 12px; }
.rs .rs-grp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame); border-bottom: 1px solid var(--smoke); }
.rs .rs-col { font-family: var(--mono); font-size: 11px; color: var(--cinder); font-weight: 400; white-space: nowrap; }
.rs .rs-col span { display: inline-block; }
.rs td.rs-x { font-family: var(--mono); font-weight: 500; color: var(--smoke); width: 34px; }
.rs tbody tr:hover { background: var(--ash-1); }
/* Immune = brightest, susceptible = the ember warning, resist = quiet gold. */
.rs-i { color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.rs-r { color: var(--parch) !important; background: color-mix(in srgb, var(--parch) 8%, transparent); }
.rs-s { color: var(--ember) !important; background: color-mix(in srgb, var(--ember) 16%, transparent); }
.rs-key { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--cinder); }
.rs-key li { margin: 0; display: flex; align-items: center; gap: 8px; }
.rs-key .rs-x { font-family: var(--mono); font-weight: 500; padding: 1px 7px; border: 1px solid var(--smoke); }

/* Damage bars: relative only — the dice are deliberately not published. */
.rs-types { columns: 2; column-gap: 32px; margin: 0 0 16px; }
.rs-type { break-inside: avoid; margin: 0 0 20px; }
.rs-type h3 { font-size: 15px; margin-bottom: 8px; }
.rs-bars { list-style: none; padding: 0; margin: 0; }
.rs-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 10px; margin: 0 0 5px; }
.rs-sp { font-size: 14px; color: var(--parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-bar { display: block; height: 7px; background: var(--ash-2); border: 1px solid var(--smoke); }
.rs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--flame)); }
@media (max-width: 820px) { .rs-types { columns: 1; } }