/* Shared styles for Block Heist legal/support pages — matches the in-game design system. */
:root {
  --surface: #131315;
  --navy-deep: #0a0e17;
  --navy: #16213e;
  --primary: #bbc5eb;
  --gold: #ecc14a;
  --gold-bright: #FFD35A;
  --green: #53dea5;
  --green-bright: #73fbbf;
  --on-surface: #e4e2e5;
  --on-surface-var: #c6c6ce;
  --outline-var: #45464d;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy-deep);
  color: var(--on-surface);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: #241a00; }
a { color: var(--gold-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

.bg-fx { position: fixed; inset: 0; z-index: -1; }
.bg-fx::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 500px at 80% -10%, rgba(236,193,74,.12), transparent 60%),
    radial-gradient(700px 600px at 5% 8%, rgba(79,140,255,.1), transparent 60%),
    linear-gradient(180deg, #0a0e17, #090b12);
}

/* Header */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(10,14,23,.62);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 66px; max-width: 880px; margin: 0 auto; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: 1.4px; font-size: 15px; }
.brand .mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(145deg, #1f2a4a, #11182c);
  border: 1px solid var(--outline-var);
  box-shadow: 0 0 18px rgba(236,193,74,.3);
}
.brand .mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.brand .name b { color: var(--gold); }
.nav .home-link { color: var(--on-surface-var); font-weight: 600; font-size: 14px; }
.nav .home-link:hover { color: var(--gold-bright); text-decoration: none; }

/* Doc body */
.doc { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }
.doc .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.doc h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 800; letter-spacing: -1px; margin: 12px 0 10px; }
.doc .meta { color: var(--on-surface-var); font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.doc .intro {
  color: var(--on-surface-var); font-size: 17px; font-weight: 500;
  padding: 20px 22px; border-radius: 16px; margin: 26px 0 36px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
}
.doc h2 {
  font-size: 21px; font-weight: 700; margin: 40px 0 12px; letter-spacing: -.3px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06);
}
.doc h2:first-of-type { border-top: none; padding-top: 0; }
.doc h3 { font-size: 16.5px; font-weight: 700; margin: 22px 0 6px; color: var(--primary); }
.doc p { color: var(--on-surface-var); font-size: 15.5px; margin-bottom: 14px; }
.doc ul, .doc ol { color: var(--on-surface-var); font-size: 15.5px; margin: 0 0 16px 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--on-surface); font-weight: 700; }
.doc .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(83,222,165,.1); border: 1px solid rgba(83,222,165,.25);
  color: var(--green-bright); font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; margin: 6px 0;
}
.doc .contact-card {
  margin-top: 34px; padding: 24px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(22,33,62,.6), rgba(12,19,38,.6));
  border: 1px solid rgba(236,193,74,.22);
}
.doc .contact-card h2 { border: none; padding: 0; margin: 0 0 8px; }
.doc .contact-card a { font-weight: 700; }

/* Footer */
footer { border-top: 1px solid rgba(255,255,255,.06); padding: 36px 24px; }
.foot { max-width: 820px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.foot .links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot .links a { color: var(--on-surface-var); font-size: 13.5px; font-weight: 600; }
.foot .links a:hover { color: var(--gold-bright); text-decoration: none; }
.foot .copy { color: #6f7079; font-size: 13px; }

@media (max-width: 520px) {
  .doc { padding: 40px 18px 60px; }
}