/* Watershed Collection: mineral surfaces, deep water, quiet brass. */
.map-stars { display: block; margin-block: 10px 6px; color: #e3c879; font-size: .8rem; line-height: 1.5; }
#best-stars { color: #e3c879; }
.board-wrap { display: block; min-height: 0; padding: 24px 12px; }
.endpoint-guide { display: flex; justify-content: space-between; gap: 18px; max-width: 880px; margin: 0 auto 24px; font-size: .72rem; color: #afc0b0; }
.endpoint-guide > span { max-width: 46%; }
.endpoint-guide > span:last-child { text-align: right; }
.endpoint-guide b { display: block; margin-bottom: 6px; color: #e2e7ce; font-size: clamp(.8rem, 1.6vw, 1rem); font-family: Georgia, serif; font-weight: 400; }
.river-stage { --pool-gutter: 100px; position: relative; max-width: 860px; padding-inline: var(--pool-gutter); margin: auto; }
.river-stage .board { width: 100%; }
.river-stage .edge-marker { display: none; }
.endpoint-pool { position: absolute; width: 70px; height: 74px; transform: translateY(-50%); z-index: 4; text-align: center; pointer-events: none; }
.spring-pool { left: 0; }
.downstream-pool { right: 0; }
.pool-name { position: absolute; bottom: calc(100% + 7px); left: 0; right: 0; font-size: .65rem; font-weight: 800; letter-spacing: .12em; color: #e0e5cd; }
.pool-water { display: grid; place-items: center; position: relative; z-index: 2; height: 100%; border: 5px solid #718174; border-radius: 44% 55% 42% 50%; color: #c5eeeb; font-size: 2rem; background: radial-gradient(ellipse at 35% 30%, #70b9b7, #266d7e 55%, #163a49); box-shadow: inset 0 0 0 2px #b0cbc35c, inset 0 -8px 14px #072c4488, 0 4px 0 #263c31, 0 7px 14px #0005; }
.pool-connector { position: absolute; top: 50%; transform: translateY(-50%); height: 18px; line-height: 16px; width: calc(var(--pool-gutter) - 44px); color: #ddf5e9; font-size: 22px; font-weight: bold; background: #397e87; border-block: 2px solid #809c8d; }
.spring-pool .pool-connector { left: 62px; }
.downstream-pool .pool-connector { right: 62px; }
.downstream-pool .pool-water { background: radial-gradient(ellipse at 35% 30%, #496d73, #203b46 65%); color: #91aaae; }
.downstream-pool.connected .pool-water { background: radial-gradient(ellipse at 35% 30%, #70b9b7, #266d7e 55%, #163a49); color: #d8f3eb; }
@media (max-width: 760px) {
  .board-wrap { padding: 24px 5px; }
  .river-stage { --pool-gutter: 72px; }
  .endpoint-pool { width: 54px; height: 59px; }
  .pool-water { border-width: 3px; font-size: 1.4rem; }
  .pool-name { font-size: .6rem; letter-spacing: .04em; }
  .pool-connector { width: 30px; height: 12px; line-height: 9px; font-size: 16px; }
  .spring-pool .pool-connector { left: 46px; }
  .downstream-pool .pool-connector { right: 46px; }
  .endpoint-guide { margin-inline: 5px; font-size: .62rem; }
  .river-stage .board { min-width: 0; padding: 5px; }
}
@media (max-width: 480px) {
  .river-stage { --pool-gutter: 44px; }
  .endpoint-pool { width: 34px; height: 40px; }
  .pool-name { font-size: .5rem; }
  .pool-connector { width: 22px; }
  .spring-pool .pool-connector { left: 27px; }
  .downstream-pool .pool-connector { right: 27px; }
}
:root { --ink: #eee9d9; --muted: #b1baac; --river: #62b6b2; --river-bright: #b4ddd0; --line: rgba(202, 193, 151, .18); }
body { background: radial-gradient(ellipse at 80% 0%, #31483c 0, transparent 48%), radial-gradient(ellipse at 0 45%, #1b3836, transparent 60%), linear-gradient(150deg, #16251f, #071310 75%); background-attachment: fixed; }
body[data-biome="copper"] { --level-land: #574936; --level-glow: #97724528; }
body[data-biome="silver"] { --level-land: #34535a; --level-glow: #8fbcb32a; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: repeating-linear-gradient(168deg, transparent 0 160px, #abbfac04 161px 162px, transparent 163px 260px); }
.game-shell { max-width: 1100px; }
.masthead { padding: 24px 4px 28px; border-bottom: 1px solid #c1b08344; }
.eyebrow, .chapter { color: #c0b38e; font-size: .64rem; letter-spacing: .24em; }
h1 { font-size: clamp(3rem, 7vw, 5rem); letter-spacing: -.065em; text-shadow: 0 3px 25px #0005; }
h1 em { color: #c7d9bd; }
.tagline { letter-spacing: .35em; color: #a9b3a2; font-size: .68rem; }
.icon-button { border-radius: 8px; background: linear-gradient(150deg, #34483c99, #12291fcc); box-shadow: inset 0 1px #f8ecca12, 0 5px 15px #0002; color: #d6d8c8; }
.briefing { padding-block: 32px; }
.briefing h2 { font-size: clamp(2rem, 4vw, 3rem); }
.family-promise { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin: -8px 0 24px; border: 1px solid #b7b17a38; border-radius: 12px; background: linear-gradient(120deg, #253d2f, #12271f); box-shadow: inset 0 1px #f6ecc21a, 0 9px 24px #0002; overflow: hidden; }
.family-promise-copy { display: grid; gap: 5px; align-content: center; padding: 18px 22px; }
.family-promise-copy strong { color: #eef0db; font-family: Georgia, serif; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 400; }
.family-promise-copy > span:last-child { color: #b8c4b4; font-size: .78rem; line-height: 1.5; }
.coin-wallet { display: flex; align-items: center; gap: 12px; min-width: 225px; padding: 16px 22px; border-left: 1px solid #d0bb7640; background: #091d18a8; }
.coin-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e1c46d80; border-radius: 50%; color: #f1d985; background: radial-gradient(circle at 35% 30%, #827037, #2f341f); box-shadow: inset 0 0 0 3px #0b211b, 0 4px 12px #0005; }
.coin-wallet div { display: grid; gap: 2px; }
.coin-wallet div > span { color: #c8b77e; font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.coin-wallet strong { color: #f1e3ac; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.coin-wallet small { max-width: 170px; color: #9fae9e; font-size: .67rem; line-height: 1.35; }
.instrument-panel { border-radius: 14px 14px 0 0; background: linear-gradient(110deg, #263c31ec, #12251eec); box-shadow: inset 0 1px #ebdcb524; }
.instrument { padding: 17px 21px; }
.instrument strong { font-variant-numeric: tabular-nums; }
.instrument small { color: #a1b09d; }
.board-wrap { background: radial-gradient(ellipse at 15% 80%, #53674925, transparent 48%), radial-gradient(ellipse at 80% 0, #71827520, transparent 60%), repeating-radial-gradient(ellipse at 20% 10%, transparent 0 41px, #bbcab006 42px 43px, transparent 44px 65px), #10231d; box-shadow: inset 0 2px 22px #0008, 0 25px 60px #0005; }
.board { background: linear-gradient(140deg, #091812, #1d3025); gap: clamp(4px, .6vw, 7px); border: 1px solid #9aa48630; box-shadow: inset 0 2px 4px #000a, 0 1px #d6c9a526, 0 22px 35px #0005; }
.tile svg { filter: drop-shadow(0 3px 1px #020c09) drop-shadow(0 6px 5px #0006); }
.stone { stroke: #b1b99a55; stroke-width: 1; }
.tile:nth-child(3n) { filter: brightness(1.035); }
.tile:hover { transform: translateY(-1px); filter: brightness(1.13); }
.channel-bed path.bank { stroke: #a19b7c; stroke-width: 32; opacity: .42; }
.channel-bed path:not(.bank) { stroke: #102722; stroke-width: 25; }
.tile.wet .channel-bed path:not(.bank) { stroke: #133d3f; stroke-width: 25; }
.channel-water path { opacity: 0; filter: none; }
.tile.source:not(.wet) .channel-water path { opacity: 0; }
.tile.wet .channel-water path { stroke-dasharray: none; stroke-width: 18; filter: none; animation: fill-reach .55s ease-out both; animation-delay: calc(var(--flow-step) * 130ms); }
.tile.wet .channel-water .water-depth { stroke: #236c77; stroke-width: 21; }
.tile.wet .channel-water .water-surface { stroke: #62bcbf; stroke-width: 11; opacity: .7; }
.tile.wet .channel-water .water-ripple { stroke: #d0eae0; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 17 7 29; opacity: .76; animation: fill-reach .5s ease-out both, river-ripples 2.7s linear infinite; animation-delay: calc(var(--flow-step) * 130ms), calc(var(--flow-step) * 130ms); }
.tile.wet svg, .tile.source svg { filter: drop-shadow(0 3px 1px #020c09) drop-shadow(0 6px 5px #0006); }
.tile-number { color: #e0dec070; font-size: .6rem; }
.edge-marker span { letter-spacing: .08em; background: #102d25; border-color: #b1ceb580; }
.tile.source.wet .source-marker span, .tile.outlet.wet .outlet-marker span { background: #c0dac2; box-shadow: 0 2px 8px #0005; }
.watershed-map { background: radial-gradient(ellipse at 0 0, #65785625, transparent 65%), #13281ff5; border-color: #a99b6844; padding: 28px; }
.map-route { max-height: 62vh; overflow-y: auto; padding: 4px 8px 8px 4px; scrollbar-color: #71836b #14281e; }
.map-region { grid-column: 1 / -1; margin: 19px 0 3px; font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: #d0bf90; }
.map-stop { min-height: 152px; border-radius: 9px; background: linear-gradient(140deg, #344a3b, #182e23); box-shadow: inset 0 1px #e7ddba17, 0 6px 14px #0002; }
.map-stop strong { margin-top: 12px; }
.map-stop-number { color: #cbb987; font-size: 1.25rem; }
.map-stop.current { border-color: #c9bd8d; background: linear-gradient(140deg, #486044, #233c2c); }
.message, .flow-report { background-color: #172f25; box-shadow: inset 0 1px #ffffff08; }
.button { border-radius: 9px; background: linear-gradient(#34493c, #1d3528); box-shadow: inset 0 1px #f3ebc218, 0 5px 12px #0003; }
.flow-button { background: linear-gradient(140deg, #d3d7b4, #8ebbab); color: #17332c; border-color: #d7d6ab55; box-shadow: inset 0 1px #ffffeaaa, 0 8px 24px #0005; }
.flow-button:hover { background: linear-gradient(140deg, #e1e2c3, #a9d0b9); }
.controls { position: sticky; bottom: 0; z-index: 9; padding: 14px 10px; margin-top: 8px; border: 1px solid #b9bc9322; border-radius: 12px; background: #10251ef0; backdrop-filter: blur(14px); }
@keyframes fill-reach { from { opacity: 0; } to { opacity: 1; } }
@keyframes river-ripples { to { stroke-dashoffset: -110; } }
@media (max-width: 760px) { .masthead { gap: 20px; } .mast-actions { flex-wrap: wrap; } .family-promise { flex-direction: column; gap: 0; } .coin-wallet { min-width: 0; border-top: 1px solid #d0bb7640; border-left: 0; } .coin-wallet small { max-width: none; } .map-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } .watershed-map { padding: 16px; } .map-stop { padding: 12px; } .map-stop strong { font-size: 1rem; } .controls { gap: 7px; } .button { min-height: 44px; padding-inline: 13px; font-size: .78rem; } .flow-button { width: auto; flex: 1 0 100%; } }
@media (prefers-reduced-motion: reduce) { .tile.wet .channel-water path { animation: none; opacity: 1; } }

/* RP-003 public play lab: a rainbow watershed around the preserved mineral board. */
body {
  --reach-accent: hsl(var(--level-hue, 174) 76% 68%);
  --theme-bank: #31483c;
  --theme-bank-deep: #071310;
  --water-deep: #236c77;
  --water-mid: #62bcbf;
  --water-light: #d0eae0;
  background:
    radial-gradient(circle at 12% 5%, hsl(var(--level-hue, 174) 82% 56% / .16), transparent 27rem),
    radial-gradient(ellipse at 82% 0%, var(--theme-bank) 0, transparent 48%),
    radial-gradient(ellipse at 0 48%, #1b3836, transparent 60%),
    linear-gradient(150deg, #16251f, var(--theme-bank-deep) 75%);
  background-attachment: fixed;
}
body[data-biome="headwaters"] { --region-name: "Headwaters"; }
body[data-biome="copper"] { --region-name: "Copper Ridge"; }
body[data-biome="laurel"] { --region-name: "Laurel Highlands"; }
body[data-biome="moonlit"] { --region-name: "Blue Valley"; }
body[data-biome="silver"] { --region-name: "Silverwater"; }
body[data-collection-theme="sunrise"] { --theme-bank: #594733; --theme-bank-deep: #18120f; --water-mid: #76c6c3; --water-light: #fff0c5; }
body[data-collection-theme="prism"] { --theme-bank: #394359; --theme-bank-deep: #101322; --water-deep: #376aa2; --water-mid: #72d5cb; --water-light: #f2d7ff; }
body[data-collection-theme="twilight"] { --theme-bank: #372d52; --theme-bank-deep: #0e0b1a; --water-deep: #355b8d; --water-mid: #74a6cf; --water-light: #ded9ff; }

.chapter { color: var(--reach-accent); }
.briefing h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--reach-accent), transparent);
}
.family-promise { border-top-color: hsl(var(--level-hue, 174) 64% 70% / .38); }
.coin-mark { box-shadow: inset 0 0 0 3px #0b211b, 0 4px 12px #0005, 0 0 18px hsl(var(--level-hue, 174) 72% 64% / .18); }
.flow-button { box-shadow: inset 0 1px #ffffeaaa, 0 8px 24px #0005, 0 0 24px hsl(var(--level-hue, 174) 70% 62% / .12); }
.tile.wet .channel-water .water-depth { stroke: var(--water-deep); }
.tile.wet .channel-water .water-surface { stroke: var(--water-mid); }
.tile.wet .channel-water .water-ripple { stroke: var(--water-light); }

.map-region { color: hsl(var(--card-hue) 78% 76%); border-bottom: 1px solid hsl(var(--card-hue) 65% 62% / .22); padding-bottom: 9px; }
.map-stop {
  border-color: hsl(var(--card-hue) 55% 62% / .24);
  background:
    radial-gradient(circle at 100% 0, hsl(var(--card-hue) 70% 58% / .2), transparent 58%),
    linear-gradient(140deg, hsl(var(--card-hue) 28% 23% / .94), #14281f);
}
.map-stop::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: hsl(var(--card-hue) 76% 66%);
  opacity: .72;
}
.map-stop-number, .map-stop-state { color: hsl(var(--card-hue) 80% 76%); }
.map-stop:hover:not(:disabled), .map-stop.current {
  border-color: hsl(var(--card-hue) 75% 70% / .72);
  background:
    radial-gradient(circle at 100% 0, hsl(var(--card-hue) 76% 60% / .28), transparent 62%),
    linear-gradient(140deg, hsl(var(--card-hue) 32% 28% / .98), #183126);
}

.river-club {
  margin: 0 0 24px;
  padding: 26px;
  border: 1px solid hsl(var(--level-hue, 174) 60% 70% / .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 95% 0, hsl(var(--level-hue, 174) 75% 60% / .17), transparent 35%),
    linear-gradient(145deg, #192e27f7, #0c1d19f7);
  box-shadow: 0 20px 48px #0004, inset 0 1px #fff1;
}
.river-club[hidden], .sponsor-preview[hidden] { display: none; }
body.panel-open .controls { position: static; }
.club-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.club-heading h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.club-heading > p { max-width: 430px; margin: 0; color: #b8c5bb; font-size: .82rem; line-height: 1.6; }
.reward-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reward-card {
  min-height: 210px;
  padding: 19px;
  border: 1px solid #d4c79d20;
  border-radius: 12px;
  background: linear-gradient(150deg, #30463a, #162a22);
  box-shadow: inset 0 1px #fff1;
}
.reward-card-live { border-top: 3px solid #65d3a5; }
.reward-card-preview { border-top: 3px solid var(--reach-accent); }
.reward-card > strong, .collection-heading strong, .sponsor-preview strong { display: block; margin-top: 8px; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 400; color: #f3efde; }
.reward-card p, .sponsor-preview p { margin: 10px 0 16px; color: #b8c5bb; font-size: .78rem; line-height: 1.55; }
.reward-kicker, .concept-label { color: var(--reach-accent); font-size: .61rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.concept-label { display: inline-block; margin-top: 5px; color: #d2bf86; }
.club-action, .theme-action {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d5d1b947;
  border-radius: 8px;
  color: #eef1df;
  background: #395345;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.club-action:hover, .theme-action:hover:not(:disabled) { border-color: var(--reach-accent); background: #476756; }
.club-action:disabled, .theme-action:disabled { opacity: .58; cursor: default; }
.club-action.quiet { color: #b7c1b8; background: transparent; }

.sponsor-preview {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 17px;
  border: 1px dashed hsl(var(--level-hue, 174) 66% 74% / .45);
  border-radius: 12px;
  background: #0d201ba6;
}
.sponsor-art { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; color: #e1fff5; font: 2.1rem Georgia, serif; background: radial-gradient(circle at 35% 25%, var(--reach-accent), #236173 58%, #102d3c); box-shadow: inset 0 0 0 5px #bfe7dc29; }
.sponsor-preview p { margin-bottom: 0; }
.sponsor-actions { display: grid; gap: 8px; min-width: 170px; }

.collection-shop { margin-top: 16px; padding-top: 20px; border-top: 1px solid #d8ccb124; }
.collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 13px; }
.collection-heading > span { color: #aeb8ae; font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.theme-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid #d6d4b51c; border-radius: 10px; background: #13261f; }
.theme-card.selected { border-color: var(--reach-accent); box-shadow: inset 0 0 0 1px hsl(var(--level-hue, 174) 68% 70% / .18); }
.theme-card strong, .theme-card small { display: block; }
.theme-card strong { color: #ecebdc; font-family: Georgia, serif; font-size: .94rem; font-weight: 400; }
.theme-card small { margin-top: 3px; color: #9eada2; font-size: .67rem; }
.theme-swatch { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 3px #ffffff15, 0 3px 8px #0005; background: linear-gradient(135deg, #315848, #68b7ad); }
.theme-card[data-theme="sunrise"] .theme-swatch { background: linear-gradient(135deg, #773d51, #f4a15a 55%, #f6dc8d); }
.theme-card[data-theme="prism"] .theme-swatch { background: conic-gradient(from 25deg, #ef7c78, #f4cd72, #70d5a7, #6ebce1, #ae82db, #ef7c78); }
.theme-card[data-theme="twilight"] .theme-swatch { background: linear-gradient(135deg, #181b4f, #655fbd 58%, #bb9be1); }
.club-status { min-height: 1.3em; margin: 12px 0 0; color: #c7d0c6; font-size: .72rem; }

@media (max-width: 820px) {
  .reward-ideas { grid-template-columns: 1fr; }
  .reward-card { min-height: 0; }
  .theme-grid { grid-template-columns: 1fr; }
  .sponsor-preview { grid-template-columns: 70px 1fr; }
  .sponsor-art { width: 62px; height: 62px; }
  .sponsor-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .river-club { padding: 18px 14px; }
  .club-heading { align-items: start; flex-direction: column; }
  .theme-card { grid-template-columns: 38px 1fr; }
  .theme-swatch { width: 34px; height: 34px; }
  .theme-action { grid-column: 1 / -1; width: 100%; }
  .sponsor-preview { display: block; }
  .sponsor-art { margin-bottom: 14px; }
  .sponsor-actions { display: grid; grid-template-columns: 1fr; }
}