/* ================================================================
 * Currents and Critters — THE RULE BOOK, one stylesheet, three homes.
 *
 * The markup comes from js/rulebook.js and is skin-agnostic: every .rb-*
 * rule reads its colours from variables, and the wrapper class picks the
 * skin — .rb-light on a pale page, .rb-dark over the table at night.
 *
 * Rendered by:
 *   • Player Home → How to play → Full Rulebook   (.rb-light)
 *   • In game     → Menu → Rule Book              (.rb-dark)
 *   • rules.html, the published How to Play page  (.rb-light)
 *
 * That third home is why this is a separate file: rules.html is a small
 * static page and must not drag in the game's whole 13,000-line stylesheet.
 * Load it AFTER css/preview.css in the game so the cascade is unchanged.
 * ================================================================ */

    /* ══ THE RULE BOOK ════════════════════════════════════════════ */
    /* Light skin: the frosted Player Home page. */
    .rb.rb-light {
      --rb-ink:      #0f5390;
      --rb-body:     #4f7ba6;
      --rb-muted:    #7a9db8;
      --rb-accent:   #c89320;
      --rb-accent-s: rgba(224,173,52,.16);
      --rb-coral:    #e8736a;
      --rb-coral-s:  rgba(232,115,106,.12);
      --rb-surface:  rgba(252,255,255,.93);
      --rb-surface2: rgba(238,249,255,.9);
      --rb-line:     rgba(169,203,230,.62);
      --rb-line-2:   rgba(140,200,235,.45);
      --rb-shadow:   0 4px 18px rgba(20,85,150,.09);
      --rb-hero-bg:  linear-gradient(160deg, rgba(255,255,255,.97) 0%, rgba(224,245,255,.95) 60%, rgba(224,252,244,.95) 100%);
    }
    /* Deep-ocean skin: over the table, matching the 💡 Help screen. */
    .rb.rb-dark {
      --rb-ink:      #e8b34a;
      --rb-body:     #d8c8aa;
      --rb-muted:    #b0986e;
      --rb-accent:   #e8b34a;
      --rb-accent-s: rgba(232,179,74,.13);
      --rb-coral:    #f4a574;
      --rb-coral-s:  rgba(244,165,116,.12);
      --rb-surface:  rgba(255,255,255,.045);
      --rb-surface2: rgba(255,255,255,.075);
      --rb-line:     rgba(244,165,116,.22);
      --rb-line-2:   rgba(244,165,116,.3);
      --rb-shadow:   0 4px 18px rgba(0,0,0,.3);
      --rb-hero-bg:  linear-gradient(160deg, rgba(244,165,116,.11) 0%, rgba(232,179,74,.06) 55%, transparent 100%);
    }
    .rb { font-family: "Nunito", sans-serif; color: var(--rb-body); }
    .rb * { box-sizing: border-box; }

    /* Cover */
    .rb-hero {
      text-align: center; padding: 26px 22px 22px; margin-bottom: 18px;
      border-radius: 22px; border: 1px solid var(--rb-line-2);
      background: var(--rb-hero-bg); box-shadow: var(--rb-shadow);
    }
    .rb-hero-title {
      margin: 0; font-family: "Luckiest Guy", "Cinzel", serif; font-weight: 400;
      font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.02;
      letter-spacing: 1.2px; color: var(--rb-ink);
    }
    .rb.rb-dark .rb-hero-title { text-shadow: 0 2px 14px rgba(232,179,74,.35); }
    .rb-hero-eyebrow {
      margin-top: 6px; font-family: "Cinzel", serif; font-weight: 900;
      font-size: clamp(.86rem, 1.5vw, 1.08rem); letter-spacing: 3px; text-transform: uppercase;
      color: var(--rb-coral);
    }
    .rb-hero-sub { margin: 12px auto 0; max-width: 58ch; font-size: 1rem; line-height: 1.6; color: var(--rb-body); font-style: italic; }
    .rb-components {
      display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
      margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--rb-line-2);
    }
    .rb-comp-lbl {
      font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
      color: var(--rb-muted); margin-right: 4px;
    }
    .rb-comp-chip {
      font-size: 12px; font-weight: 800; color: var(--rb-body);
      padding: 4px 11px; border-radius: 999px;
      background: var(--rb-surface2); border: 1px solid var(--rb-line);
    }

    /* Contents */
    .rb-toc {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 12px 14px; margin-bottom: 22px;
      border-radius: 16px; background: var(--rb-surface); border: 1px solid var(--rb-line);
    }
    .rb-toc-btn {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: "Nunito", sans-serif; font-size: 12px; font-weight: 800; cursor: pointer;
      color: var(--rb-body); background: transparent;
      border: 1px solid var(--rb-line); border-radius: 999px; padding: 5px 12px;
      transition: background .13s ease, color .13s ease, transform .12s ease, border-color .13s ease;
    }
    .rb-toc-btn:hover {
      color: var(--rb-ink); border-color: var(--rb-accent);
      background: var(--rb-accent-s); transform: translateY(-1px);
    }
    .rb-toc-n { font-size: 10px; font-weight: 900; color: var(--rb-muted); }

    /* Sections */
    .rb-sec {
      padding: 20px 20px 22px; margin-bottom: 16px;
      border-radius: 20px; background: var(--rb-surface);
      border: 1px solid var(--rb-line); box-shadow: var(--rb-shadow);
      scroll-margin-top: 12px;
    }
    .rb-sec.rb-flash { animation: rb-flash 1.1s ease; }
    @keyframes rb-flash {
      0%   { box-shadow: 0 0 0 3px var(--rb-accent), var(--rb-shadow); }
      100% { box-shadow: 0 0 0 0 transparent, var(--rb-shadow); }
    }
    .rb-h2 {
      display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
      margin: 0 0 14px; padding-bottom: 11px; border-bottom: 2px solid var(--rb-line-2);
      font-family: "Luckiest Guy", "Cinzel", serif; font-weight: 400;
      font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: .8px; color: var(--rb-ink);
    }
    .rb-h2-ico {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; border-radius: 11px; font-size: 17px; flex: 0 0 auto;
      background: var(--rb-accent-s); border: 1px solid var(--rb-line-2);
      font-family: "Nunito", sans-serif;
    }
    .rb-h2-tail, .rb-h3-tail {
      font-family: "Nunito", sans-serif; font-size: .62em; font-weight: 800;
      letter-spacing: 0; color: var(--rb-muted);
    }
    .rb-h3 {
      margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; color: var(--rb-ink);
      font-family: "Baloo 2", "Nunito", sans-serif;
    }
    .rb-h3-big {
      margin-top: 22px; font-family: "Luckiest Guy", "Cinzel", serif; font-weight: 400;
      font-size: 1.28rem; letter-spacing: .6px;
    }
    .rb-lead { margin: 0 0 12px; font-size: 1.02rem; font-weight: 700; line-height: 1.55; color: var(--rb-ink); }
    .rb-p { margin: 0 0 9px; font-size: .95rem; line-height: 1.68; color: var(--rb-body); }
    .rb-p:last-child { margin-bottom: 0; }
    .rb-p-muted { color: var(--rb-muted); font-weight: 700; }
    .rb-p-warn { color: var(--rb-coral); font-weight: 700; }
    .rb-list { margin: 0 0 4px; padding-left: 22px; display: grid; gap: 6px; }
    .rb-list li { font-size: .95rem; line-height: 1.62; color: var(--rb-body); }
    .rb-list li::marker { color: var(--rb-accent); }
    .rb-list li b { color: var(--rb-ink); }
    .rb-list-lg li { font-size: 1rem; }
    .rb-list-slots li { padding: 3px 0; }
    .rb-arrow { color: var(--rb-coral); font-weight: 900; }
    .rb-link { color: var(--rb-coral); font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; }
    .rb-link:hover { color: var(--rb-accent); }

    .rb-block {
      margin: 14px 0 0; padding: 14px 16px; border-radius: 14px;
      background: var(--rb-surface2); border: 1px solid var(--rb-line);
    }
    .rb-block-gold { background: var(--rb-accent-s); border-color: var(--rb-line-2); }
    .rb-block-warn { background: var(--rb-coral-s); border-color: var(--rb-coral); }
    .rb-callout {
      display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
      margin: 14px 0 0; padding: 12px 16px; border-radius: 14px;
      background: var(--rb-accent-s); border-left: 4px solid var(--rb-accent);
      font-size: .96rem; font-weight: 700; line-height: 1.55; color: var(--rb-body);
    }
    .rb-callout-lbl { font-weight: 900; color: var(--rb-ink); }
    .rb-callout-tip { background: var(--rb-surface2); border-left-color: var(--rb-coral); }
    .rb-quote {
      margin: 14px 0 0; padding: 14px 18px; border-radius: 14px;
      background: var(--rb-surface2); border-left: 4px solid var(--rb-coral);
      font-size: .95rem; line-height: 1.66; font-style: italic; color: var(--rb-body);
    }

    /* Numbered setup steps */
    .rb-steps { display: grid; gap: 10px; }
    .rb-step {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 14px 16px; border-radius: 14px;
      background: var(--rb-surface2); border: 1px solid var(--rb-line);
    }
    .rb-steps-flat .rb-step { padding: 11px 16px; align-items: center; }
    .rb-step-n {
      flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: "Baloo 2", "Nunito", sans-serif; font-size: 15px; font-weight: 800;
      color: #1a1208; background: linear-gradient(180deg,#f6c178 0%,#e8a052 100%);
      box-shadow: 0 2px 8px rgba(216,150,50,.32);
    }
    .rb-step-body { flex: 1; min-width: 0; }
    .rb-step-body .rb-h3 { margin-bottom: 6px; }

    /* Three turn choices */
    .rb-choose { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
    .rb-choice {
      padding: 16px; border-radius: 16px;
      background: var(--rb-surface2); border: 1px solid var(--rb-line-2);
    }
    .rb-choice-ico {
      width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px;
      display: flex; align-items: center; justify-content: center; font-size: 20px;
      background: var(--rb-accent-s); border: 1px solid var(--rb-line-2);
    }

    /* Card art in figures */
    .rb-face {
      display: block; position: relative; overflow: hidden;
      border-radius: 10px; background: var(--rb-surface2);
      box-shadow: 0 6px 18px rgba(6,30,60,.22);
    }
    .rb-face img { display: block; }
    .rb-face-h { aspect-ratio: 720 / 504; }
    .rb-face-h img { position: absolute; left: 0; width: 100%; height: auto; }
    .rb-face-h.rb-face-top img    { top: 0; }
    .rb-face-h.rb-face-bottom img { top: -100%; }
    .rb-face-v { aspect-ratio: 360 / 1008; }
    .rb-face-v img { position: absolute; top: 0; height: 100%; width: auto; max-width: none; }
    .rb-face-v.rb-face-left img  { left: 0; }
    .rb-face-v.rb-face-right img { left: -100%; }
    .rb-face-o img { width: 100%; height: auto; }
    /* A whole, uncropped card — both of its ends. All three decks print on the
       same 720×1008 page, so every full card is the same portrait outline. */
    .rb-face-full { aspect-ratio: 720 / 1008; }
    .rb-face-full img { width: 100%; height: auto; }

    .rb-fig {
      margin: 18px 0 0; padding: 18px 16px 16px; border-radius: 18px;
      background: var(--rb-surface2); border: 1px dashed var(--rb-line-2); text-align: center;
    }
    .rb-fig-head {
      font-size: 11px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
      color: var(--rb-muted); margin-bottom: 14px;
    }
    .rb-fig-note { margin-top: 12px; font-size: .86rem; font-weight: 700; color: var(--rb-muted); }
    .rb-fig-note-gold { color: var(--rb-accent); }
    .rb-figcard { margin: 0; display: flex; flex-direction: column; gap: 7px; width: max-content; max-width: 230px; }
    .rb-figcard .rb-face-h { width: min(215px, 62vw); }
    .rb-figcard .rb-face-v { width: min(90px, 26vw); }
    .rb-figcard .rb-face-o { width: min(160px, 46vw); }
    .rb-figcard figcaption { max-width: 215px; }
    .rb-figcard figcaption { display: flex; flex-direction: column; gap: 2px; }
    .rb-figcard-name { font-size: .82rem; font-weight: 800; color: var(--rb-ink); }
    .rb-figcard-note { font-size: .72rem; line-height: 1.4; color: var(--rb-muted); }

    /* Ocean layout diagram */
    .rb-ocean-diagram { display: grid; gap: 10px; justify-items: center; }
    .rb-od-mid { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
    .rb-od-card { position: relative; width: min(210px, 46vw); flex: 0 0 auto; }
    .rb-od-slot {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 8px 12px; border-radius: 12px; min-width: 96px;
      background: var(--rb-accent-s); border: 1.5px dashed var(--rb-line-2);
    }
    .rb-od-arrow { font-size: 13px; color: var(--rb-coral); line-height: 1; }
    .rb-od-lbl { font-size: .8rem; font-weight: 900; color: var(--rb-ink); white-space: nowrap; }
    @media (max-width: 620px) {
      .rb-od-mid { flex-wrap: wrap; }
      .rb-od-slot { min-width: 80px; padding: 6px 10px; }
    }

    /* Card anatomy */
    .rb-anatomy { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: left; }
    .rb-an-card { position: relative; width: min(330px, 78vw); flex: 0 0 auto; }
    .rb-an-pin {
      position: absolute; width: 24px; height: 24px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 900; color: #1a1208;
      background: linear-gradient(180deg,#f6c178 0%,#e8a052 100%);
      border: 2px solid #fef5e6; box-shadow: 0 2px 9px rgba(0,0,0,.35);
      transform: translate(-50%, -50%);
    }
    .rb-an-pin-cost { left: 27%; top: 14%; }
    .rb-an-pin-sym  { left: 71%; top: 14%; }
    .rb-an-pin-name { left:  8%; top: 57%; }
    .rb-an-pin-spec { left: 76%; top: 62%; }
    .rb-an-pin-abil { left: 50%; top: 78%; }
    .rb-an-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1 1 340px; max-width: 46ch; }
    .rb-an-key li {
      display: flex; gap: 10px; align-items: baseline;
      font-size: .92rem; line-height: 1.55; color: var(--rb-body);
    }
    .rb-an-txt { flex: 1 1 auto; min-width: 0; }
    .rb-an-key li b { color: var(--rb-ink); }
    .rb-an-num {
      flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 900; color: #1a1208;
      background: linear-gradient(180deg,#f6c178 0%,#e8a052 100%);
    }

    /* Pool figure — two rows of five, the shape of the real board */
    .rb-pool-board {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
      width: min(760px, 100%); margin: 0 auto;
      padding: 12px; border-radius: 14px;
      background: var(--rb-surface); border: 1.5px dashed var(--rb-line-2);
    }
    .rb-pool-card { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    /* Each Pool slot is one WHOLE card, filling the column. The old version
       cropped every card down to the single end being described, which is the
       one thing that confuses a new player: a card is not one animal, it is two,
       one at each end. Show the card the way it lies on the table. */
    .rb-pool-card .rb-face-full { width: 100%; box-shadow: 0 3px 10px rgba(6,30,60,.22); }
    .rb-pool-card figcaption {
      font-size: 10.5px; font-weight: 800; line-height: 1.25; text-align: center;
      color: var(--rb-muted); overflow-wrap: anywhere;
    }
    /* Both creatures are named, split by a hairline — the caption echoes the
       two-ended card above it. */
    .rb-pool-name { display: block; }
    .rb-pool-name + .rb-pool-name {
      margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--rb-line-2);
    }
    @media (max-width: 560px) {
      .rb-pool-board { gap: 5px; padding: 8px; }
      .rb-pool-card figcaption { font-size: 8.5px; }
    }
    .rb-pool-flow {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
      margin-top: 14px;
    }
    .rb-pool-step {
      font-size: .8rem; font-weight: 800; color: var(--rb-body);
      padding: 5px 12px; border-radius: 999px;
      background: var(--rb-surface); border: 1px solid var(--rb-line);
    }
    .rb-pool-step-done { color: var(--rb-accent); border-color: var(--rb-accent); }

    /* Goby set */
    .rb-goby-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .rb-goby { display: block; width: min(158px, 40vw); }

    /* ── "Play a free crustacean": three numbered board steps ──────────
       Each step is a real mini-board (Ocean + what is on its floor) beside the
       sentence that explains it, so the ★ reads as a sequence of placements
       rather than two loose cards with a star between them. */
    .rb-steps-cards { gap: 12px; }
    .rb-steps-cards .rb-step { align-items: center; }
    .rb-step-art { flex: 0 0 auto; }
    .rb-mini-board { display: flex; flex-direction: column; align-items: center; width: min(104px, 25vw); }
    .rb-mini-ocean { width: 100%; }
    .rb-mini-ocean .rb-face-o { display: block; }
    .rb-mini-slot { width: 100%; margin-top: 4px; }
    .rb-mini-slot .rb-face-h { width: 100%; box-shadow: 0 3px 12px rgba(6,30,60,.3); }
    .rb-mini-lbl {
      margin-top: 5px; font-size: 9.5px; font-weight: 900; letter-spacing: .5px;
      text-transform: uppercase; color: var(--rb-muted); text-align: center;
    }
    /* An empty ocean-floor space, drawn as the dashed hole it is. */
    .rb-mini-open {
      aspect-ratio: 720 / 504; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; text-align: center;
      background: var(--rb-accent-s); border: 2px dashed var(--rb-coral);
    }
    .rb-mini-open span {
      font-size: 9.5px; font-weight: 900; letter-spacing: .5px; line-height: 1.2;
      text-transform: uppercase; color: var(--rb-coral);
    }
    /* The card the ★ just paid for, ringed so step 3 reads at a glance. */
    .rb-mini-new .rb-face-h { outline: 3px solid var(--rb-accent); outline-offset: 2px; }
    /* .rb-fig centres everything; the step sentences must read left-aligned. */
    .rb-steps-cards .rb-step-body { text-align: left; }
    .rb-steps-cards .rb-step-body .rb-p { margin: 0; }
    @media (max-width: 560px) {
      .rb-steps-cards .rb-step { flex-wrap: wrap; gap: 10px; }
      .rb-steps-cards .rb-step-body { flex: 1 1 100%; }
    }

    /* Example boxes */
    .rb-example {
      margin: 14px 0 0; padding: 14px 16px; border-radius: 14px;
      background: var(--rb-surface2); border: 1px solid var(--rb-line);
      border-left: 4px solid var(--rb-coral);
    }
    .rb-example-lbl {
      font-size: 10.5px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
      color: var(--rb-coral); margin-bottom: 8px;
    }
    .rb-example-txt { margin: 0 0 12px; font-size: .93rem; line-height: 1.6; color: var(--rb-body); }
    .rb-example-cards { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
    .rb-example-plus { align-self: center; font-size: 20px; color: var(--rb-accent); }
    .rb-inline-jump {
      font: inherit; color: var(--rb-coral); background: none; border: none;
      padding: 0; cursor: pointer; font-weight: 800; text-decoration: underline dotted;
    }
    .rb-inline-jump:hover { color: var(--rb-accent); }

    /* Shooting the Moon award */
    .rb-big-award {
      margin: 6px 0 10px; font-family: "Luckiest Guy", "Cinzel", serif; font-weight: 400;
      font-size: 1.45rem; letter-spacing: .8px; color: var(--rb-accent);
    }

    /* Scoring total */
    .rb-total {
      margin-top: 14px; padding: 16px; border-radius: 16px; text-align: center;
      background: var(--rb-accent-s); border: 1px solid var(--rb-line-2);
    }
    .rb-total-eq { font-size: 1.02rem; font-weight: 800; color: var(--rb-ink); margin-bottom: 6px; }
    .rb-total-win {
      font-family: "Luckiest Guy", "Cinzel", serif; font-weight: 400;
      font-size: 1.35rem; letter-spacing: 1px; color: var(--rb-accent);
    }
    .rb-snap {
      display: flex; align-items: center; gap: 13px; margin-top: 14px;
      padding: 14px 16px; border-radius: 16px; text-decoration: none;
      background: var(--rb-surface2); border: 1px solid var(--rb-coral);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .rb-snap:hover { transform: translateY(-1px); box-shadow: var(--rb-shadow); }
    .rb-snap-ico { font-size: 24px; flex: 0 0 auto; }
    .rb-snap-txt { font-size: .93rem; line-height: 1.55; color: var(--rb-body); }
    .rb-snap-txt b { color: var(--rb-coral); }

    /* Competitive turn order */
    .rb-order { margin: 0 0 11px; padding-left: 22px; display: grid; gap: 7px; }
    .rb-order li { font-size: .96rem; font-weight: 700; color: var(--rb-body); }
    .rb-order li::marker { color: var(--rb-accent); }
    .rb-order-p { font-weight: 900; padding: 2px 9px; border-radius: 999px; }
    .rb-order-p1 { color: #1a6fc4; background: rgba(38,128,200,.12); }
    .rb-order-p2 { color: #7a6800; background: rgba(224,173,52,.20); }
    .rb.rb-dark .rb-order-p1 { color: #5fb3d6; }
    .rb.rb-dark .rb-order-p2 { color: #e8b34a; }
    .rb-order-dash { color: var(--rb-muted); }

    /* Encyclopedia */
    .rb-enc { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      align-items: start; }  /* families have very different lengths — don't stretch the short ones */
    .rb-enc-group {
      padding: 14px 16px; border-radius: 16px;
      background: var(--rb-surface2); border: 1px solid var(--rb-line);
      border-top: 4px solid var(--fam-c, var(--rb-accent));
      /* hairline under the colour bar, so a white (Birds) bar still reads as a
         bar on the pale skin instead of dissolving into the card */
      box-shadow: inset 0 1px 0 var(--rb-line);
    }
    /* --fam-c is the canonical family colour (right on the dark table skin);
       --fam-ink is the same hue pushed dark enough to read as TEXT on the pale
       Player Home skin, where white birds and yellow coral would vanish. */
    .rb-enc-group[data-fam="coral"]        { --fam-c: #facc15; --fam-ink: #9a7400; }
    .rb-enc-group[data-fam="mammal"]       { --fam-c: #f25fa6; --fam-ink: #c02a6f; }
    .rb-enc-group[data-fam="crosscurrent"] { --fam-c: #7fd8ff; --fam-ink: #1f86b8; }
    .rb-enc-group[data-fam="invertebrate"] { --fam-c: #a855f7; --fam-ink: #7c3aed; }
    .rb-enc-group[data-fam="gamefish"]     { --fam-c: #2b5fd9; --fam-ink: #2249b8; }
    .rb-enc-group[data-fam="crustacean"]   { --fam-c: #ef4444; --fam-ink: #c02626; }
    .rb-enc-group[data-fam="cephalopod"]   { --fam-c: #d9a066; --fam-ink: #9a6a2f; }
    .rb-enc-group[data-fam="bird"]         { --fam-c: #ffffff; --fam-ink: #6b7f96; }
    .rb-enc-group[data-fam="baitfish"]     { --fam-c: #8a5a2b; --fam-ink: #6b4420; }
    .rb-enc-group[data-fam="ocean"]        { --fam-c: #14c7d4; --fam-ink: #0b7f88; }
    .rb-enc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
    .rb-enc-ico { font-size: 17px; }
    .rb-enc-title {
      font-family: "Baloo 2", "Nunito", sans-serif; font-size: 1.02rem; font-weight: 800;
      color: var(--rb-ink); flex: 1; min-width: 0;
    }
    .rb-enc-total { font-size: 10.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--rb-muted); }
    .rb-enc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
    .rb-enc-list li {
      display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
      padding: 4px 0; border-bottom: 1px dotted var(--rb-line);
      font-size: .88rem; color: var(--rb-body);
    }
    .rb-enc-list li:last-child { border-bottom: none; }
    .rb-enc-x { font-weight: 900; color: var(--fam-c, var(--rb-accent)); white-space: nowrap; }
    .rb.rb-light .rb-enc-x { color: var(--fam-ink, var(--rb-accent)); }
    /* On the deep-ocean skin the colour bar keeps the true hue, but the small
       count text is lifted towards white so the darkest families (Bait Fish,
       Game Fish) stay readable over navy. */
    .rb.rb-dark .rb-enc-x { color: color-mix(in srgb, var(--fam-c, #e8b34a) 74%, #eaf2ff); }

    .rb-end {
      margin: 22px 0 6px; text-align: center;
      font-family: "Cinzel", serif; font-size: 1.05rem; font-weight: 900;
      letter-spacing: 1px; color: var(--rb-muted);
    }
    .rb-end span { color: var(--rb-coral); }
    .rb-missing { padding: 40px 12px; text-align: center; color: var(--rb-muted); font-weight: 700; }

    /* Narrow screens: the same tightening the How to Play tab applies. */
    @media (max-width: 820px) {
      .rb-sec { padding: 16px 14px 18px; }
      .rb-anatomy { gap: 16px; }
    }