/* ══════════════════════════════════════════════════════════════════════════════
   PASSIVE NOMADS — SHARED SITE THEME + HEADER
   The system approved in theme-header-mockup.html: the landing page's dark
   atmosphere (layered glows, masked grid, vignette, faint scanlines), a fully
   TRANSPARENT header so that background flows through it, and a clean text tab
   bar — grey, cyan on hover, cyan + glowing underline when active, magenta
   Play ★.

   One file for every standard page. A page includes it, drops its own header /
   theme rules, and keeps its own content CSS and body font.

   TOKENS: the new palette is published under BOTH the new names and the legacy
   ones the pages already use (--cp-accent, --cp-glow, --cp-border-glow …), so
   existing content rules recolour themselves instead of being rewritten.

   The auth chip (js/auth-chip.js) styles itself from these same variables, so it
   follows the theme on its own. The few rules at the bottom only shape its
   container to the mockup's chip — they are ID-scoped so they win over the
   chip's own injected CSS without that script changing at all.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ── */
  --bg:#040308; --bg2:#0a0812; --bg3:#120e1e; --bg4:#1a1430;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.14); --border3:rgba(255,255,255,0.2);
  --text:#eceaf5; --text2:#a8a4c0; --text3:#5f5c82;
  /* ── landing accents ── */
  --cyan:#22d3ee; --purple:#a78bfa; --magenta:#f472b6; --gold:#ffd54a;
  --green:#3ecf8e; --red:#f87171; --amber:#fbbf24; --orange:#fb923c;
  --accent:#22d3ee; --accent2:#a78bfa;
  --glow:rgba(34,211,238,0.12); --border-glow:rgba(34,211,238,0.30);
  /* ── legacy aliases: what the existing page CSS already asks for ── */
  --cp-accent:#22d3ee; --cp-accent2:#a78bfa;
  --cp-glow:rgba(34,211,238,0.12); --cp-border-glow:rgba(34,211,238,0.30);
  --r:6px; --r-lg:10px;
}

/* ═══ LANDING ATMOSPHERE ═══ */
.bg-fx{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 18%, rgba(79,123,255,0.14), transparent 72%),
    radial-gradient(ellipse 50% 38% at 84% 72%, rgba(244,114,182,0.08), transparent 72%),
    radial-gradient(ellipse 50% 38% at 12% 82%, rgba(34,211,238,0.07), transparent 72%);}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(103,232,249,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,0.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 25%,transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 25%,transparent 92%);}
.bg-vig{position:fixed;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 240px rgba(0,0,0,0.75);}
/* lighter than the landing hero's: this sits over long-form reading */
.bg-scan{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,0.10) 3px,rgba(0,0,0,0) 4px);}
html,body{overflow-x:hidden}

/* ═══ NAV — transparent, the background runs straight through it ═══ */
#nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;
  background:transparent;border-bottom:0;box-shadow:none;}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,#22d3ee 0%,#38bdf8 25%,#818cf8 50%,#c084fc 75%,#f472b6 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 14px rgba(129,140,248,0.35);}
.logo-icon svg{width:19px;height:19px;fill:#fff}
.logo-text{font-size:16px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(90deg,#00ffe1,#b44fff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;line-height:1}
.logo-sub{font-family:'Share Tech Mono',monospace;text-transform:uppercase;font-size:9px;color:var(--text3);opacity:1;letter-spacing:2px;margin-top:3px}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
#hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:transparent;border:1px solid var(--border2);border-radius:var(--r);cursor:pointer;padding:0 9px;flex-shrink:0}
#hamburger span{display:block;height:2px;background:var(--text2);border-radius:2px;transition:all .2s}
#hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
#hamburger.open span:nth-child(2){opacity:0}
#hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ═══ TAB BAR — clean text, no icons ═══ */
#site-tabs{position:sticky;top:52px;z-index:190;display:flex;align-items:center;gap:22px;height:46px;padding:0 18px;
  background:transparent;border-bottom:1px solid rgba(255,255,255,0.06);box-shadow:none;overflow:visible}
.site-tab{position:relative;display:flex;align-items:center;height:100%;padding:0;border:0;border-radius:0;
  font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text2);text-decoration:none;white-space:nowrap;background:transparent;transition:color .2s;}
.site-tab:hover{color:var(--cyan);background:transparent}
/* active = the page you are on: cyan with a glowing underline */
.site-tab.active{color:var(--cyan);background:transparent;border-bottom:0}
.site-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
/* the arcade tab keeps the landing's magenta */
.site-tab.play{color:var(--magenta)}
.site-tab.play:hover{color:#ff9ad4;text-shadow:0 0 10px rgba(244,114,182,.5)}
.site-tab.play .star{margin-left:3px}

.tab-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.social-links{display:flex;align-items:center;gap:2px;flex-shrink:0}
.social-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r);color:var(--text3);transition:all .15s;text-decoration:none}
.social-icon svg{width:15px;height:15px;flex-shrink:0}
.social-icon:hover{color:var(--cyan);background:var(--glow)}

/* ═══ MOBILE MENU ═══ */
#mobile-menu{display:none;position:fixed;top:52px;left:0;right:0;z-index:180;flex-direction:column;padding:8px;
  background:var(--bg2);border-bottom:1px solid var(--border-glow);box-shadow:0 14px 40px rgba(0,0,0,0.6)}
#mobile-menu.open{display:flex}
.mobile-tab{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border-radius:8px;border-left:0;
  font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--text3);text-decoration:none;transition:color .15s,background .15s}
.mobile-tab:hover,.mobile-tab.active{color:var(--cyan);background:rgba(34,211,238,0.08);border-left:0}
.mobile-tab.play{color:var(--magenta)}
.mobile-menu-divider{height:1px;background:var(--border);margin:6px 8px}
.mobile-socials{display:flex;gap:6px;padding:8px 12px}

/* ═══ AUTH CHIP — container only. js/auth-chip.js owns the markup and behaviour;
   these ID-scoped rules simply dress what it renders to the mockup's chip. ═══ */
#pn-auth-chip{display:flex;align-items:center;gap:6px}
#pn-auth-chip .pn-badge{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--border2);background:var(--bg2);
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.5px;color:var(--text2);max-width:230px}
#pn-auth-chip .pn-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
#pn-auth-chip .pn-logout{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--border2);background:var(--bg2);
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text3)}
#pn-auth-chip .pn-logout:hover{color:var(--cyan);border-color:rgba(34,211,238,0.4)}
#pn-auth-chip .pn-login-btn{height:32px;padding:0 14px;border-radius:8px;border:1px solid rgba(34,211,238,0.35);
  background:rgba(34,211,238,0.10);color:var(--cyan);font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1px}
#pn-auth-chip .pn-login-btn:hover{background:rgba(34,211,238,0.18)}

@media(max-width:768px){
  #hamburger{display:flex}
  #site-tabs{display:none}
}

/* ═══ MOBILE ACCOUNT ROW — the sim mockup's account row, inside the hamburger menu.
   js/pn-mobile-auth.js mirrors the header's account controls in here; the controls
   themselves still belong to the page (auth-chip.js, or the page's own buttons). ═══ */
#pn-mobile-auth{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px 4px;margin-top:2px;
  border-top:1px solid var(--border);font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text2)}
#pn-mobile-auth .pn-badge,#pn-mobile-auth .user-badge{flex:1 1 auto;height:34px;padding:0 12px;border-radius:8px;
  border:1px solid var(--border2);background:var(--bg2);font-size:11px;color:var(--text2);max-width:none}
#pn-mobile-auth .pn-dot,#pn-mobile-auth .user-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
#pn-mobile-auth .pn-logout,#pn-mobile-auth .btn-logout,#pn-mobile-auth .pn-login-btn,#pn-mobile-auth .btn-login{
  height:34px;padding:0 14px;border-radius:8px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer}
#pn-mobile-auth .pn-login-btn,#pn-mobile-auth .btn-login{flex:1 1 100%;justify-content:center;text-align:center;
  border:1px solid rgba(34,211,238,0.35);background:rgba(34,211,238,0.10);color:var(--cyan)}
#pn-mobile-auth .pn-logout,#pn-mobile-auth .btn-logout{border:1px solid var(--border2);background:var(--bg2);color:var(--text3)}