/* RepU website. Same palette and fonts as the app (src/theme.ts). */
:root {
  --navy: #0e2c50;
  --bg: #0b111c;
  --surface: #131c2c;
  --sunk: #0f1724;
  --ink: #e7ecf4;
  --muted: #93a0b5;
  --line: #26324a;
  --red: #f0485e;
  --red-deep: #c8102e;
  --gold: #f0bc4a;
  --ok: #3dbe82;
  --display: 'Graduate', Georgia, serif;
  --body: 'Barlow', system-ui, sans-serif;
  --data: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}
:root[data-theme='light'] {
  --bg: #e8ecf2;
  --surface: #ffffff;
  --sunk: #f2f5f9;
  --ink: #111a2c;
  --muted: #586477;
  --line: #cdd5e0;
  --red: #c8102e;
  --gold: #b9800d;
  --ok: #1c8a57;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: var(--red); }
img, svg { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Header */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 12px; }
.nav nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav nav a { color: var(--muted); text-decoration: none; font-family: var(--data); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav nav { display: none; } }

/* Wordmark: "Rep" + a rounded tile with the U, like the app */
.mark { display: inline-flex; align-items: center; font-family: var(--display); color: var(--ink); text-decoration: none; line-height: 1; }
.mark .u { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); border-radius: 0.18em; width: 1.02em; height: 1.02em; margin-left: 0.08em; font-size: 1em; }
.mark.small { font-size: 26px; }

.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-family: var(--data); letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; color: var(--gold); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }

/* Hero */
.hero { position: relative; padding: 72px 0 56px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--red-deep) 38%, transparent), transparent), radial-gradient(closest-side at 80% 30%, color-mix(in srgb, var(--navy) 90%, transparent), transparent); z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-family: var(--display); font-size: clamp(38px, 7vw, 68px); line-height: 1.05; margin: 18px 0 14px; letter-spacing: -0.01em; }
.hero h1 em { font-style: normal; color: var(--red); }
.hero p.lead { font-size: 20px; color: var(--muted); max-width: 560px; margin: 0 0 26px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 13px 20px; font-family: var(--data); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); background: var(--surface); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn:hover { transform: translateY(-1px); }
.note { font-size: 14px; color: var(--muted); margin-top: 14px; }

/* Phone mockup with the rankings */
.phone { justify-self: center; width: min(330px, 100%); background: var(--sunk); border: 10px solid #05080d; border-radius: 42px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; }
.phone .top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.phone .game { font-family: var(--data); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.seg { display: flex; margin: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg span { flex: 1; text-align: center; font-family: var(--data); font-size: 13px; padding: 5px 0; border-radius: 8px; color: var(--muted); }
.seg span.on { background: var(--surface); color: var(--ink); }
.rank { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.rank:first-of-type { border-top: 0; }
.rank .n { width: 22px; font-family: var(--data); font-weight: 700; color: var(--muted); }
.rank .n.gold { color: var(--gold); }
.rank .swatch { width: 10px; height: 30px; border-radius: 3px; }
.rank .who { flex: 1; min-width: 0; }
.rank .who b { display: block; font-weight: 600; font-size: 15px; }
.rank .who small { color: var(--muted); font-size: 12px; }
.rank .elo { font-family: var(--data); font-weight: 700; font-size: 18px; }
.rank .up { color: var(--ok); font-size: 12px; font-family: var(--data); }
.list { margin: 0 12px 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sample { text-align: center; font-size: 11px; color: var(--muted); padding: 0 12px 14px; }

/* Ticker of games */
.ticker { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; white-space: nowrap; }
.ticker .track { display: inline-block; padding: 14px 0; animation: scroll 40s linear infinite; }
.ticker span { font-family: var(--data); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 22px; color: var(--muted); }
.ticker span:nth-child(3n) { color: var(--red); }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }

/* Sections */
section { padding: 72px 0; }
.kicker { font-family: var(--data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); font-size: 15px; margin: 0 0 6px; }
h2 { font-family: var(--display); font-size: clamp(28px, 4.5vw, 42px); line-height: 1.1; margin: 0 0 16px; }
.sub { color: var(--muted); max-width: 680px; margin: 0 0 32px; font-size: 18px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.card h3 { margin: 10px 0 6px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); font-family: var(--data); font-weight: 700; font-size: 20px; }

.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px 20px 20px; }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font-family: var(--data); font-weight: 700; margin-bottom: 10px; }
.step h3 { margin: 0 0 4px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.cat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.cat h3 { margin: 0 0 10px; font-family: var(--data); letter-spacing: 0.1em; text-transform: uppercase; font-size: 16px; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 12px; font-family: var(--data); font-size: 15px; }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }
.board .list { margin: 0; }
.board h3 { font-family: var(--data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-size: 15px; margin: 0 0 8px; }

.story { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; align-items: start; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } }
.quote { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); line-height: 1.3; border-left: 4px solid var(--gold); padding-left: 18px; margin: 0; }
.sign { font-family: var(--display); font-size: 26px; margin: 18px 0 0; }
.story p { color: var(--muted); }

.launch { text-align: center; background: linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--red-deep) 70%, var(--navy))); border-radius: 24px; padding: 48px 20px; color: #fff; }
.launch h2 { color: #fff; }
.launch p { color: #dbe3ef; max-width: 620px; margin: 0 auto 24px; }
.count { display: inline-flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; justify-content: center; }
.count div { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 10px 14px; min-width: 78px; }
.count b { display: block; font-family: var(--display); font-size: 30px; }
.count small { font-family: var(--data); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; color: #c9d4e4; }

details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 600; }
details p { color: var(--muted); margin: 10px 0 0; }

footer { border-top: 1px solid var(--line); padding: 40px 0 30px; color: var(--muted); font-size: 15px; }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot nav a { color: var(--muted); }
.fine { font-size: 11px; line-height: 1.5; margin-top: 22px; opacity: 0.85; }

/* Doc pages (privacy, terms) */
.doc { max-width: 760px; padding-top: 40px; padding-bottom: 60px; }
.doc h1 { font-family: var(--display); font-size: 38px; margin: 0 0 6px; }
.doc h2 { font-size: 24px; margin-top: 36px; }
.doc p, .doc li { color: var(--muted); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--surface); color: var(--ink); }

/* Opening intro (same as the app's LaunchIntro): the U tile slides over, "Rep" comes out, the red bar draws in. */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--navy); display: grid; place-items: center; cursor: pointer; animation: intro-out 0.3s ease-in 1.3s forwards; }
.intro .row { display: inline-flex; align-items: center; font-family: var(--display); color: #fff; font-size: 64px; line-height: 1; }
.intro .rep { margin-right: 0.08em; opacity: 0; transform: translateX(var(--rep-from, 40px)); animation: intro-rep 0.48s cubic-bezier(0.33, 1, 0.68, 1) 0.12s forwards; }
.intro .tile { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.02em; height: 1.02em; border-radius: 0.18em; background: #fff; color: var(--navy); transform: translateX(var(--tile-from, -60px)) scale(1.68); animation: intro-tile 0.48s cubic-bezier(0.33, 1, 0.68, 1) 0.12s forwards; }
.intro .tile span { font-size: 0.86em; }
.intro .bar { position: absolute; top: 109%; left: 12.5%; width: 75%; height: 8.75%; border-radius: 999px; background: #e0243f; transform: scaleX(0); animation: intro-bar 0.22s ease-out 0.6s forwards; }
@keyframes intro-tile { to { transform: translateX(0) scale(1); } }
@keyframes intro-rep { 35% { opacity: 0; } to { opacity: 1; transform: translateX(0); } }
@keyframes intro-bar { to { transform: scaleX(1); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 420px) { .intro .row { font-size: 52px; } }
@media (prefers-reduced-motion: reduce) {
  .intro .rep, .intro .tile, .intro .bar { animation: none; opacity: 1; transform: none; }
  .intro { animation-delay: 0.5s; }
}
/* Held until the font is ready and the positions are measured (see the script in index.html). */
.intro:not(.go), .intro:not(.go) * { animation-play-state: paused; }
.intro.skip { animation: intro-out 0.15s ease-in forwards; }