/* tryrivals.com — the app's "cobalt sky" in CSS. Tokens mirror apps/mobile/src/theme (palette). */
:root {
  color-scheme: light dark;
  --sky-top: #C9DAFF;
  --sky-mid: #E4ECFF;
  --bg: #F3F6FF;
  --fg: #0E1333;
  --muted: #5B6285;
  --accent: #2F5BFF;
  --accent-deep: #1B3FD8;
  --flame: #FF4D00;
  --sun: #FFC81F;
  --mint: #12B886;
  --card: #FFFFFF;
  --line: rgba(14, 19, 51, 0.09);
  --fill: rgba(30, 50, 140, 0.07);
  --shadow: 0 10px 30px rgba(27, 42, 107, 0.12);
  --cloud: #FFFFFF;
  --cloud-opacity: 0.9;
  --danger: #D92D4B;
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #1A2366;
    --sky-mid: #0E1440;
    --bg: #080C26;
    --fg: #F2F4FF;
    --muted: #9DA5CC;
    --accent: #6A87FF;
    --accent-deep: #3E5CE8;
    --card: #141A42;
    --line: rgba(255, 255, 255, 0.08);
    --fill: rgba(255, 255, 255, 0.08);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --cloud: #7896FF;
    --cloud-opacity: 0.1;
    --danger: #FF6B81;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 420px, var(--bg) 900px) no-repeat;
  font: 500 17px/1.5 var(--round);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { position: relative; max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
h1 { font-size: 2.4rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: 900; margin: 0 0 14px; }
h2 { font-size: 1.3rem; font-weight: 800; margin: 32px 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--accent); }
.muted { color: var(--muted); }

/* The R mark + wordmark, drawn in SVG so it follows the theme. */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.35rem; letter-spacing: -0.03em; color: var(--fg); text-decoration: none; margin-bottom: 40px; }
.brand svg { width: 30px; height: 30px; }
.brand i { width: 28px; height: 28px; border-radius: 9px; background: var(--accent); display: inline-block; }

/* Chunky pill with a hard lip it sinks onto, like the app's buttons. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  font: 800 1rem/1 var(--round); padding: 18px 28px; border-radius: 999px; margin: 8px 8px 8px 0;
  box-shadow: 0 5px 0 var(--accent-deep);
  transition: transform 120ms cubic-bezier(.23, 1, .32, 1), box-shadow 120ms cubic-bezier(.23, 1, .32, 1);
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-deep); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 3px; }
.btn.secondary { background: var(--card); color: var(--fg); box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line); }
.btn.secondary:active { box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.btn[disabled] { opacity: 0.55; cursor: default; transform: none; }

.card { background: var(--card); border-radius: 28px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.code {
  font: 900 2.4rem/1 var(--round); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; color: var(--accent);
  background: var(--card); border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line);
  border-radius: 20px; padding: 18px 22px; display: inline-block; margin: 12px 0;
}
footer { margin-top: 64px; font-size: 0.9rem; color: var(--muted); }

/* Background doodles: a few clouds that drift. Solid fill + element opacity, so the
   overlapping circles read as one shape. Purely decorative. */
/* Fixed behind the page, not absolute: an absolute 900px layer made every shorter screen scrollable. */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sky svg { position: absolute; fill: var(--cloud); opacity: var(--cloud-opacity); animation: drift 40s ease-in-out infinite alternate; }
.sky svg:nth-child(2) { animation-duration: 55s; animation-delay: -12s; }
.sky svg:nth-child(3) { animation-duration: 48s; animation-delay: -30s; }
@keyframes drift { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
main, .page { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}