/* River Rats website: retro pixel look to match the game. No web fonts, no trackers. */
:root {
  --navy: #0b1a33; --deep: #0d2a52; --river: #1f6fc4; --river-light: #2fa3ec;
  --gold: #ffd83a; --orange: #ff7a1f; --white: #ffffff; --ink: #1b1530; --muted: #a9bdd8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--navy); color: var(--white);
  font: 17px/1.55 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}
img.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--gold); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Headings: chunky, uppercase, with a dark pixel outline */
h1, h2, h3 { text-transform: uppercase; letter-spacing: .04em; font-weight: 900; line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(26px, 5vw, 38px); color: var(--gold);
     text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 4px 5px 0 var(--ink); }
h3 { font-size: 20px; }

/* Hero: a river flowing up the page, in bands like the game's water */
.hero {
  background:
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(255,255,255,.08) 46px 52px),
    linear-gradient(90deg, #2f8a3a 0 6%, #f2d48a 6% 8%, var(--river-light) 8% 22%, var(--river) 22% 78%, var(--river-light) 78% 92%, #f2d48a 92% 94%, #2f8a3a 94%);
  text-align: center; padding: 40px 16px 56px; border-bottom: 8px solid var(--ink);
}
.hero .logo { width: min(640px, 92vw); height: auto; display: block; margin: 0 auto 8px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.tagline { font-size: clamp(20px, 4.5vw, 28px); font-weight: 900; text-transform: uppercase; margin: 8px 0 18px;
           text-shadow: 3px 3px 0 var(--ink); }
.pill { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 900; text-transform: uppercase;
        padding: 12px 22px; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); letter-spacing: .05em; }
.small { color: var(--white); opacity: .9; font-size: 15px; margin-top: 16px; text-shadow: 2px 2px 0 var(--ink); }

section { padding: 48px 0; }
section.alt { background: var(--deep); }
.lead { color: var(--muted); max-width: 640px; }

/* Screenshot strip: swipe sideways on a phone */
.shots { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; }
.shots img { height: 460px; width: auto; border: 4px solid var(--ink); border-radius: 18px; scroll-snap-align: center; flex: none; }

/* Rivers */
.rivers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.river { background: var(--ink); border: 4px solid var(--ink); }
.river img { width: 100%; height: auto; display: block; aspect-ratio: 180 / 40; }
.river p { margin: 0; padding: 8px 10px; font-weight: 800; text-transform: uppercase; font-size: 15px; }
.river span { display: block; color: var(--muted); font-weight: 600; text-transform: none; font-size: 13px; }

/* Rivals */
.rivals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.rival { background: var(--navy); border: 4px solid var(--ink); padding: 18px; text-align: center; box-shadow: 6px 6px 0 var(--ink); }
.rival img { width: 160px; height: 160px; }
.rival h3 { margin-top: 8px; }
.rival p { margin: 0; color: var(--muted); font-size: 15px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; padding: 0; list-style: none; }
.features li { padding-left: 30px; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; background: var(--gold); border: 3px solid var(--ink); }

footer { border-top: 8px solid var(--ink); background: #071226; padding: 28px 0 40px; color: var(--muted); font-size: 15px; }
footer nav a { margin-right: 18px; font-weight: 800; }

/* Text pages (privacy, support) */
.page { padding: 32px 0 56px; max-width: 760px; }
.page h1 { font-size: clamp(28px, 6vw, 40px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.page h2 { font-size: 22px; margin-top: 1.6em; }
.topbar { background: var(--river); border-bottom: 6px solid var(--ink); padding: 10px 0; }
.topbar a { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-weight: 900; text-transform: uppercase; }
.topbar img { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 10px; }
.faq dt { font-weight: 800; margin-top: 1.2em; }
.faq dd { margin: .3em 0 0; color: var(--muted); }