/* ============================================================
   D4RKS0UL — legal pages (terms + privacy) and settings page
   Everything you'll want to tweak is in the "EDIT ME" block.
   File lives at /assets/legal.css
   ============================================================ */

/* ===================== EDIT ME ===================== */
:root {
  --lg-accent:   #ff416c;               /* main pink/red */
  --lg-accent-2: #ff4b2b;               /* gradient partner */
  --lg-gold:     #ffd700;               /* link colour */
  --lg-text:     #e8e8ee;               /* body text */
  --lg-muted:    #9b9bab;               /* small / secondary text */
  --lg-card:     rgba(16, 16, 22, 0.74);/* card background */
  --lg-border:   rgba(255, 255, 255, 0.08);
  --lg-radius:   22px;
  --lg-width:    860px;                 /* how wide the cards get */

  /* background orbs: colour + how fast they drift (seconds) */
  --orb-1: rgba(255, 65, 108, 0.42);
  --orb-2: rgba(255, 175, 40, 0.26);
  --orb-3: rgba(110, 60, 255, 0.30);
  --orb-speed: 26s;

  /* text glow strength */
  --glow-heading: 0 0 28px rgba(255, 65, 108, 0.65), 0 2px 6px rgba(0, 0, 0, 0.9);
  --glow-body:    0 1px 14px rgba(0, 0, 0, 0.75);
}
/* ==================================================== */

html { scroll-behavior: smooth; }

.legal-body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--lg-text);
  padding: 96px 16px 80px;
  align-items: center;
  position: relative;
  overflow-x: hidden;
}

/* ---------- living background ---------- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  animation: orbFloat var(--orb-speed) ease-in-out infinite alternate;
}
.orb.o1 { width: 52vmax; height: 52vmax; left: -14vmax; top: -16vmax; background: var(--orb-1); }
.orb.o2 { width: 44vmax; height: 44vmax; right: -12vmax; top: 18vh;   background: var(--orb-2); animation-duration: calc(var(--orb-speed) * 1.3); animation-delay: -6s; }
.orb.o3 { width: 48vmax; height: 48vmax; left: 22vw;    bottom: -22vmax; background: var(--orb-3); animation-duration: calc(var(--orb-speed) * 1.6); animation-delay: -12s; }
@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vmax, 4vmax) scale(1.12); }
  100% { transform: translate(-5vmax, 7vmax) scale(0.94); }
}

/* faint drifting dots on top of the orbs */
.bg-dots {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1.4px);
  background-size: 38px 38px;
  animation: dotsDrift 60s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}
@keyframes dotsDrift { to { background-position: 380px 190px; } }

/* ---------- top bar ---------- */
.legal-nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 10px;
  background: rgba(11, 12, 16, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--lg-border);
}
.legal-nav a {
  font-family: 'SFProDisplay', sans-serif;
  color: #ddd; text-decoration: none;
  font-size: 12px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  transition: color .2s, background .2s, box-shadow .2s, transform .2s;
}
.legal-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.legal-nav a.pill {
  color: #fff;
  background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-2));
  box-shadow: 0 0 20px rgba(255, 65, 108, 0.45);
}

/* ---------- page title ---------- */
.legal-hero { position: relative; z-index: 2; text-align: center; max-width: var(--lg-width); margin: 10px auto 26px; }
.legal-hero h1 {
  margin: 0 0 10px;
  font-family: 'ANGELONE', sans-serif;
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  letter-spacing: 6px; text-transform: uppercase;
  color: #fff;
  text-shadow: var(--glow-heading);
}
.legal-hero p { margin: 0; color: var(--lg-muted); font-size: 14px; text-shadow: var(--glow-body); }

/* ---------- cards ---------- */
.doc {
  position: relative; z-index: 2;
  width: min(100%, var(--lg-width));
  margin: 22px auto;
  padding: 38px 42px 44px;
  border-radius: var(--lg-radius);
  background: var(--lg-card);
  border: 1px solid var(--lg-border);
  box-shadow: 0 30px 70px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  scroll-margin-top: 84px;
  animation: docIn .7s cubic-bezier(.19,1,.22,1) both;
}
.doc:nth-of-type(2) { animation-delay: .12s; }
@keyframes docIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.doc:target { border-color: rgba(255, 65, 108, 0.45); box-shadow: 0 30px 70px rgba(0,0,0,0.7), 0 0 0 4px rgba(255,65,108,0.10); }

.doc h2 {
  margin: 0 0 4px;
  font-family: 'ANGELONE', sans-serif;
  font-size: clamp(1.4rem, 4.4vw, 2rem);
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--lg-accent);
  text-shadow: var(--glow-heading);
}
.doc .updated { margin: 0 0 22px; font-size: 12.5px; color: var(--lg-muted); letter-spacing: .5px; }

.doc h3 {
  margin: 30px 0 8px;
  font-family: 'SFProDisplay', sans-serif;
  font-size: 15.5px; letter-spacing: 1px;
  color: #fff;
  text-shadow: var(--glow-heading);
  display: flex; align-items: center; gap: 10px;
}
.doc h3::before {
  content: ''; width: 4px; height: 18px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--lg-accent), var(--lg-accent-2));
  box-shadow: 0 0 12px rgba(255,65,108,0.7);
}
.doc h4 {
  margin: 18px 0 4px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--lg-gold); text-shadow: var(--glow-body);
}
.doc p, .doc li { font-size: 14.8px; line-height: 1.75; text-shadow: var(--glow-body); }
.doc p { margin: 8px 0; }
.doc ul { margin: 8px 0 8px; padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: 22px; margin: 5px 0; }
.doc li::before {
  content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lg-accent); box-shadow: 0 0 10px var(--lg-accent);
}
.doc a { color: var(--lg-gold); text-underline-offset: 3px; }
.doc a:hover { text-shadow: 0 0 14px rgba(255,215,0,0.7); }
.doc strong { color: #fff; }

/* the "short version" box at the top of each document */
.short {
  margin: 4px 0 8px; padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,65,108,0.12), rgba(255,75,43,0.05));
  border: 1px solid rgba(255,65,108,0.28);
}
.short b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--lg-accent); }
.short p { margin: 4px 0; }

/* pill used for "not allowed" items */
.no { color: #ff6b6b; font-weight: 700; }

.doc .back-top { display: inline-block; margin-top: 26px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lg-muted); text-decoration: none; }
.doc .back-top:hover { color: #fff; }

.legal-foot {
  position: relative; z-index: 2; margin: 18px auto 0; text-align: center;
  font-size: 12.5px; color: var(--lg-muted); letter-spacing: .5px; text-shadow: var(--glow-body);
}
.legal-foot a { color: var(--lg-gold); }

/* ---------- settings page bits ---------- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--lg-border); }
.set-row:last-child { border-bottom: none; }
.set-row .lbl { font-size: 14.5px; color: #fff; text-shadow: var(--glow-body); }
.set-row .sub { display: block; font-size: 12.5px; color: var(--lg-muted); margin-top: 2px; }
.set-btn {
  font-family: 'SFProDisplay', sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; text-decoration: none; cursor: pointer;
  padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.set-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); }
.set-btn.main  { border: none; background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-2)); }
.set-btn.main:hover { box-shadow: 0 10px 24px rgba(255,65,108,0.45); }
.set-btn.danger { color: #ff8a8a; border-color: rgba(255,80,80,0.35); background: rgba(255,60,60,0.10); }
/* .doc a (gold links) is more specific than .set-btn, so restate the button colours */
.doc a.set-btn { color: #fff; text-decoration: none; text-shadow: none; }
.doc a.set-btn.danger { color: #ff8a8a; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .doc { padding: 26px 20px 32px; }
  .legal-nav a { padding: 7px 11px; font-size: 10.5px; letter-spacing: 1px; }
  .legal-hero h1 { letter-spacing: 3px; }
}

/* anyone who asked their device for less motion gets a still background */
@media (prefers-reduced-motion: reduce) {
  .orb, .bg-dots, .doc { animation: none !important; }
  html { scroll-behavior: auto; }
}