/* =========================================================================
   ABYSS DIVER — Glass/Tech theme
   Shared across every page. Deep-ocean palette lifted from the game itself
   so the marketing site and the game feel like one product.
   ========================================================================= */

:root {
  --bg-0: #01131f;         /* deep water background */
  --bg-1: #04202f;         /* panel base, slightly lighter */
  --bg-2: #062a3d;
  --cyan: #7fe0ff;         /* primary accent — sonar/glass glow */
  --mint: #6dffb8;         /* secondary accent — portal/success */
  --amber: #ffe98a;        /* highlight — headings, active state */
  --coral: #ff8a6a;        /* warning / destructive */
  --ink-0: #eaf6fb;        /* primary text on dark */
  --ink-1: #9fd8ee;        /* secondary text */
  --ink-2: #5c8aa0;        /* tertiary / muted text */
  --glass-border: rgba(127, 224, 255, 0.22);
  --glass-fill: rgba(10, 40, 55, 0.45);
  --glass-fill-strong: rgba(10, 40, 55, 0.72);
  --radius: 14px;
  --font-head: 'JetBrains Mono', 'Courier New', monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(127,224,255,0.10), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 20%, rgba(109,255,184,0.06), transparent 55%),
    linear-gradient(180deg, #01131f 0%, #021723 40%, #01131f 100%);
  background-attachment: fixed;
}

/* faint moving "current" texture behind content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: repeating-linear-gradient(115deg, rgba(127,224,255,0.035) 0 2px, transparent 2px 90px);
}

h1, h2, h3, h4, .mono {
  font-family: var(--font-head);
  color: var(--amber);
  letter-spacing: 0.2px;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

p { line-height: 1.7; color: var(--ink-1); margin: 0 0 1em; max-width: 68ch; }
a { color: var(--cyan); }
a:focus-visible, button:focus-visible, input:focus-visible, .glass-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ---------------------------- layout shell ---------------------------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }

/* ---------------------------- glass surfaces --------------------------- */
.glass-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 28px;
}

.glass-panel {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* ------------------------------- nav bar -------------------------------- */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--safe-t);
  background: rgba(1, 19, 31, 0.72);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
#site-nav .bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#site-nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head);
  color: var(--amber);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.5px;
}
#site-nav .brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
}
#site-nav .links {
  display: flex; align-items: center; gap: 22px;
  list-style: none; margin: 0; padding: 0;
}
#site-nav .links a {
  color: var(--ink-1);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
#site-nav .links a:hover,
#site-nav .links a.active { color: var(--ink-0); border-color: var(--cyan); }

#nav-toggle { display: none; }
#nav-auth-slot { display: flex; align-items: center; gap: 10px; }

.hamburger {
  display: none;
  background: none; border: 1px solid var(--glass-border);
  border-radius: 8px; color: var(--ink-0);
  width: 38px; height: 34px; cursor: pointer;
}

@media (max-width: 760px) {
  #site-nav .links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start;
    padding: 14px 24px 20px;
    background: rgba(1, 19, 31, 0.96);
    border-bottom: 1px solid var(--glass-border);
    display: none;
  }
  #nav-toggle:checked ~ .links { display: flex; }
  .hamburger { display: flex; align-items: center; justify-content: center; }
}

/* -------------------------------- buttons ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.4px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(127,224,255,0.08);
  color: var(--ink-0);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: rgba(127,224,255,0.16); border-color: var(--cyan); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, rgba(127,224,255,0.28), rgba(109,255,184,0.22)); border-color: var(--cyan); color: var(--bg-0); background-color: var(--cyan); font-weight: 600; }
.btn-primary:hover { background-color: #9be9ff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 8px 14px; font-size: 12px; }

/* -------------------------------- footer -------------------------------- */
#site-footer {
  border-top: 1px solid var(--glass-border);
  padding: 40px 0 calc(28px + var(--safe-b));
  color: var(--ink-2);
  font-size: 13px;
}
#site-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
#site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
#site-footer a { color: var(--ink-2); text-decoration: none; }
#site-footer a:hover { color: var(--cyan); }

/* --------------------------------- misc ---------------------------------- */
.eyebrow-note { color: var(--ink-2); font-size: 13px; }
.divider { height: 1px; background: var(--glass-border); border: 0; margin: 32px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* AdSense slots — swap the data-ad-slot values for your own once approved */
.ad-slot {
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius);
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: 12px;
  margin: 32px 0;
  background: rgba(255,255,255,0.02);
}

/* visited-explorers module */
.explorer-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(127,224,255,0.10);
}
.explorer-row:last-child { border-bottom: none; }
.explorer-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  object-fit: cover;
  background: var(--bg-2);
}
.explorer-name { color: var(--ink-0); font-size: 14px; }
.explorer-time { color: var(--ink-2); font-size: 12px; margin-left: auto; }