:root {
  --bg: #1e0b36;
  --bg-glow: rgba(126, 58, 242, 0.38);
  --text: #ffffff;
  --text-muted: #d8cdea;
  --text-quiet: #b3a4cc;
  --rule: rgba(255, 255, 255, 0.16);
  --focus: #ffe566;
  --badge-h: 56px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  flex-direction: column;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg-glow), transparent 70%) no-repeat
    var(--bg);
}

a {
  color: inherit;
}

a:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

/* Join page */

.join {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 24px
    max(24px, env(safe-area-inset-left));
  text-align: center;
}

.join-logo {
  width: min(100%, clamp(220px, 44vw, 340px));
}

.join h1 {
  margin-top: clamp(28px, 6vh, 48px);
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.join-lede {
  max-width: 26ch;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 4.2vw, 1.25rem);
  line-height: 1.4;
  text-wrap: balance;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 6vh, 44px);
}

.store-link {
  display: block;
  flex: none;
  height: var(--badge-h);
}

.store-link:focus-visible {
  border-radius: 10px;
}

.store-link img {
  max-width: none;
}

.store-link--apple img {
  width: auto;
  height: var(--badge-h);
}

/* The Google PNG is 646x250 with a 41px transparent margin around the 564x168
   badge. Size the image so the visible badge matches the App Store badge, and
   pull the margin back in so the link box hugs the artwork. */
.store-link--google {
  width: calc(var(--badge-h) * 564 / 168);
}

.store-link--google img {
  width: auto;
  height: calc(var(--badge-h) * 250 / 168);
  margin: calc(var(--badge-h) * -41 / 168);
}

.web-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 20px;
  padding: 0 12px;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.web-link:hover {
  color: var(--text);
}

/* Footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  align-items: center;
  justify-content: center;
  padding: 8px 20px max(12px, env(safe-area-inset-bottom));
  color: var(--text-quiet);
  font-size: 0.8125rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.site-footer a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 10px;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Support and privacy pages */

.legal-shell {
  flex: 1;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 48px
    max(20px, env(safe-area-inset-left));
}

.legal-content {
  width: min(100%, 42rem);
  margin: 0 auto;
  overflow-wrap: break-word;
}

.legal-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(36px, 8vw, 64px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.legal-home {
  display: block;
  flex: none;
}

.legal-brand {
  width: auto;
  height: 44px;
}

.legal-brand--chip {
  border-radius: 8px;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-left: -2px;
}

.legal-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--text-quiet);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-content h1 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.legal-content h2 {
  margin-top: 44px;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.legal-content h3 {
  margin-top: 28px;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.legal-content p {
  margin: 12px 0 0;
}

.legal-content ul,
.legal-content ol {
  margin: 12px 0 0;
  padding-left: 1.3em;
}

.legal-content li + li {
  margin-top: 8px;
}

.legal-content p a,
.legal-content li a {
  color: var(--text);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-content strong {
  color: var(--text);
}

.legal-content code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: rgba(255, 255, 255, 0.1);
}

.legal-content .legal-meta {
  margin-top: 8px;
  color: var(--text-quiet);
  font-size: 0.9375rem;
}

.deletion-callout {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--rule);
}

.deletion-callout p {
  margin: 0;
}

#data-deletion {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 16px;
}

#data-deletion:focus {
  outline: none;
}

.legal-content .support-actions {
  margin-top: 24px;
}

.legal-content .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--bg);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--text);
}

.legal-content .button:hover {
  background: #ece5f7;
}

@media (max-height: 520px) {
  :root {
    --badge-h: 48px;
  }

  .join {
    padding-top: 20px;
    padding-bottom: 8px;
  }

  .join-logo {
    width: 200px;
  }

  .join h1 {
    margin-top: 16px;
    font-size: 2rem;
  }

  .join-lede {
    max-width: none;
    margin-top: 8px;
  }

  .store-badges {
    margin-top: 18px;
  }

  .web-link {
    margin-top: 8px;
  }
}

/* zTriviaMAX pages: the game's own coral-and-white look (flat surfaces, navy text).
   Set with class="theme-max" on <html>; the Plus pages keep the purple default. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/ztrivia-join/assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("/ztrivia-join/assets/fonts/raleway-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("/ztrivia-join/assets/fonts/raleway-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

.theme-max {
  --bg: #e8eef4;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #334155;
  --text-quiet: #56657a;
  --rule: #dbe4ee;
  --focus: #0f172a;
  --accent: #ec5c39;
  --accent-ink: #b93a1b;
  color-scheme: light;
}

.theme-max body {
  font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  background: var(--bg);
}

.theme-max h1,
.theme-max h2,
.theme-max h3 {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.theme-max .legal-content {
  padding: clamp(20px, 5vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.06);
}

.theme-max .legal-header {
  margin-bottom: clamp(28px, 6vw, 44px);
}

.theme-max .legal-brand--chip {
  height: 72px;
  margin: -10px 0 -10px -12px;
  border-radius: 0;
}

.theme-max .eyebrow {
  color: var(--accent-ink);
}

.theme-max .legal-nav a,
.theme-max .legal-content p a,
.theme-max .legal-content li a {
  font-weight: 700;
}

.theme-max .legal-content p a,
.theme-max .legal-content li a {
  color: var(--accent-ink);
}

.theme-max .legal-content strong {
  font-weight: 700;
}

.theme-max .legal-content code {
  background: #f1f5f9;
}

.theme-max .deletion-callout {
  padding: 14px 16px;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: #fdf1ed;
}

.theme-max .legal-content .button {
  border-radius: 12px;
  color: #ffffff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: #d94f2e;
}

.theme-max .legal-content .button:hover {
  background: var(--accent-ink);
}