/* RadioX site.
 *
 * Dark, one column, no webfonts and no framework. The app is a black screen
 * with one green accent; these pages are the same thing in a browser. It is
 * read by two audiences — someone deciding whether to install the app, and
 * someone looking for a privacy policy or a takedown address — so it stays out
 * of the way of both.
 *
 * Two languages, as separate pages rather than a JS toggle: `/` is Chinese and
 * `/en/` is English. Real URLs mean the pages are indexable and work with
 * scripting off; the cost is that the two copies have to be kept in step, which
 * is the same cost the in-app privacy page already carries.
 */

:root {
  --bg: #000;
  --surface: #101314;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --outline: #2a2f31;
  --accent: #00e676;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Latin first, then the CJK faces. An English page never reaches the CJK
     entries; a Chinese page gets them for the characters the Latin faces lack. */
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 3rem;
}

/* --- language switch ---------------------------------------------------- */

.lang {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
}

.lang a {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--outline);
  border-radius: 999px;
  color: var(--muted);
}

.lang a[aria-current] {
  border-color: var(--accent);
  color: var(--accent);
}

.lang a:hover { text-decoration: none; border-color: var(--muted); }

/* --- header ------------------------------------------------------------- */

.hero { text-align: center; margin-bottom: 2.5rem; }

.app-icon {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 1.25rem;
  border-radius: 24px;
  /* The icon is drawn on the accent green; the shadow is the same colour so
     the tile appears to glow rather than sit on a grey card. */
  box-shadow: 0 12px 40px rgba(0, 230, 118, 0.22);
}

h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tagline {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* --- screenshot carousel ------------------------------------------------ */

/* One slide per view, moved by scrolling rather than by transforms: touch
   momentum and scroll-snap come free and behave the way the platform does,
   which a hand-rolled slider never quite matches. The arrows and dots drive the
   same scroll container.

   The track is a plain block, NOT a flex item beside the arrows. As a flex item
   it defaulted to `min-width: auto`, refused to shrink below its contents, grew
   to three slides wide, pushed the arrows off the screen and never scrolled —
   a 100%-wide child inside an auto-sized parent is also circular, so the slides
   were sized against nothing. Arrows now sit in their own row underneath. */
/* Deliberately NOT `scroll-behavior: smooth`.
 *
 * Both ways of animating a slide change — this property, and
 * `scrollTo({behavior: 'smooth'})` — leave the track's `scrollLeft` stuck at 0
 * in the only harness available for checking this, so neither can be verified
 * before shipping. An instant jump is verified working end to end; a glide is
 * not, and "the arrows do nothing" is the exact bug this carousel was reported
 * with once already. Snappy beats unverifiable. */
.car-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.car-track::-webkit-scrollbar { display: none; }

/* Snap fights a finger-driven scrollLeft assignment: mid-drag it keeps yanking
   the track to the nearest slide. Mouse dragging therefore turns it off and
   re-snaps on release. Touch is left alone — the browser's own snapping there
   is better than anything this script would do. */
.car-track.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  /* A mouse drag would otherwise select the caption text on the way past. */
  user-select: none;
}

.shot {
  flex: 0 0 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
}

.shot img {
  display: block;
  width: 232px;
  max-width: calc(100% - 1rem);
  border: 1px solid var(--outline);
  border-radius: 30px;
  padding: 7px;
  background: #05070a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  /* Without this a mouse drag starts a native image drag instead of scrolling,
     which is the whole gesture on a desktop. */
  -webkit-user-drag: none;
  user-select: none;
}

.shot figcaption {
  padding: 0.9rem 1rem 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.car-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 0.4rem 0 2.75rem;
}

.car-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.car-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.car-btn:disabled { opacity: 0.3; cursor: default; }

.car-dots {
  display: flex;
  gap: 0.45rem;
}

.car-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--outline);
  cursor: pointer;
}

.car-dots button[aria-current] { background: var(--accent); }

/* --- content ------------------------------------------------------------ */

section { margin-bottom: 2.5rem; }

.lead {
  font-size: 1.1rem;
  color: var(--text);
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}

h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

p { margin: 0 0 1rem; color: var(--muted); }
p:last-child { margin-bottom: 0; }

strong { color: var(--text); font-weight: 600; }

ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--muted); }
li { margin-bottom: 0.4rem; }

.features { list-style: none; padding: 0; }

.features li {
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 2px solid var(--outline);
  margin-bottom: 0.75rem;
}

.features strong { display: block; }

.features span { font-size: 0.9rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- footer ------------------------------------------------------------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline);
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

footer span { margin: 0 0.5rem; }

.copy { margin: 1rem 0 0; font-size: 0.8rem; opacity: 0.7; }