/* future.css: Future family website tokens and components, extracted from Future 2048's site
   (neon2048/website/public/Future2048/assets/site.css, the reference). CSP-safe for the DanCo hub:
   system fonts only, no web fonts, no images, no inline styles needed.

   Use: copy into public/<Game>/assets/ and link it before your site.css:
     <link rel="stylesheet" href="/<Game>/assets/future.css">
     <link rel="stylesheet" href="/<Game>/assets/site.css">
   Page skeleton: <div class="future-backdrop" aria-hidden="true"><div class="future-floor"></div></div>
   right after <body>, then your nav/main/footer. */

:root {
  /* Palette (STYLE.md § Palette) */
  --void: #05060f;          /* page background */
  --deep: #1a1046;          /* top of the backdrop gradient */
  --cyan: #27d9ff;
  --blue: #3d7bff;
  --violet: #8a4dff;
  --magenta: #ff3bd4;
  --coral: #ff4f87;
  --amber: #ffb23b;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.7);
  --text-faint: rgba(255, 255, 255, 0.48);
  --panel: rgba(255, 255, 255, 0.045);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --title-gradient: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));

  /* Shape and type */
  --radius: 22px;
  --max: 1160px;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* ---------- ambient backdrop: drifting cyan/magenta blooms over a synthwave floor ---------- */

.future-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--deep), var(--void) 70%);
  overflow: hidden;
  pointer-events: none;
}
.future-backdrop::before,
.future-backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: future-drift 18s ease-in-out infinite alternate;
}
.future-backdrop::before {
  width: 60vmax; height: 60vmax;
  left: -20vmax; top: -25vmax;
  background: rgba(39, 217, 255, 0.15);
}
.future-backdrop::after {
  width: 65vmax; height: 65vmax;
  right: -25vmax; bottom: -30vmax;
  background: rgba(255, 59, 212, 0.17);
  animation-delay: -9s;
}
.future-floor {
  position: absolute;
  left: -50%; right: -50%; bottom: 0;
  height: 45vh;
  background-image:
    linear-gradient(rgba(255, 59, 212, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 77, 255, 0.24) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(400px) rotateX(62deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 80%);
  mask-image: linear-gradient(transparent, #000 80%);
}
@keyframes future-drift {
  to { transform: translate(6vmax, 4vmax) scale(1.08); }
}

/* ---------- type ---------- */

/* Spaced caps above headings (the App Store "kicker"). */
.future-kicker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* The gradient accent word in a two-line headline: "Slide. Merge.<br><span class="future-grad">Glow.</span>" */
.future-grad {
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- hero lockup: the website version of the in-app title ---------- */
/* <div class="future-lockup">
     <span class="future-lockup__title">MINES</span>
     <span class="future-lockup__tagline">Future Protocol</span>
   </div>
   Same rules as the app: rounded black-weight name in the title gradient with a violet bloom and a tight cyan edge,
   then SF Mono semibold spaced caps at 50% white. Proportions match the app (tagline = 18.5% of the title size,
   tracking = 45% of the tagline size, 3/54 indent). */
.future-lockup {
  --size: clamp(56px, 9vw, 108px);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.future-lockup__title {
  font-family: var(--font);
  font-size: var(--size);
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 calc(var(--size) * 0.17) rgba(138, 77, 255, 0.9))
          drop-shadow(0 0 calc(var(--size) * 0.04) rgba(39, 217, 255, 0.4));
}
.future-lockup__tagline {
  margin-top: calc(var(--size) * 0.04);
  padding-left: calc(var(--size) * 0.056);
  font-family: var(--mono);
  font-size: calc(var(--size) * 0.185);
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.future-lockup--center { align-items: center; }
.future-lockup--center .future-lockup__tagline { padding-left: 0.45em; } /* balances the trailing tracking */

/* ---------- surfaces and buttons ---------- */

.future-glass {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* "Coming soon" App Store badge: not a link until the app is live. */
.future-badge {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 8px 26px;
  border-radius: 999px; border: 0;
  color: var(--void); font-weight: 800; font-size: 16px; text-decoration: none;
  background: var(--title-gradient);
  box-shadow: 0 0 28px rgba(39, 217, 255, 0.3), 0 0 36px rgba(255, 59, 212, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .future-backdrop::before, .future-backdrop::after { animation: none; }
}