/* 6B9T — shared site styles (navbar fixed + UI kit)
   v2: fixes background canvas pushing content down */
:root{
  --bg:#0a0d12;
  --text:#e5e7eb;
  --muted:#a1a9b3;
  --neon:#22d3ee;           /* primary cyan */
  --ring:rgba(34,211,238,.35);
  --ring-strong:rgba(34,211,238,.55);
  --panel:rgba(0,0,0,.40);
  --panel-2:rgba(0,0,0,.55);
  --accent:#5865F2;         /* Discord */
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* BACKGROUND CANVAS MUST NOT AFFECT LAYOUT  */
#motherboard-bg{
  position: fixed;       /* take it out of normal flow */
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  width: 100vw;
  height: 100vh;
  z-index: -1;           /* sit behind everything */
  pointer-events: none;  /* don't block clicks */
  display: block;        /* avoid inline whitespace quirks */
}

/* Links */
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--neon); }

/* Layout helpers */
.centered{ max-width:1100px; margin-inline:auto; }
.glow{ text-shadow:0 0 6px rgba(34,211,238,.25), 0 0 12px rgba(34,211,238,.12); }
.sub-glow{ text-shadow:0 0 4px rgba(34,211,238,.18); color:#d2d8df; }

/* Navbar */
nav.glass{
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,13,18,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--ring-strong);
  transition: border-color .25s ease, background .25s ease;
}
nav.glass.scrolled{ border-bottom-color:var(--ring-strong); background:rgba(10,13,18,.75); }

/* Reserve space below fixed nav */
:root{ --nav-h:64px; }
@media (max-width: 767px){ :root{ --nav-h:56px; } }
body{ padding-top: var(--nav-h); }

/* Active nav link */
nav .btn[aria-current="page"]{ color:#0a0d12; background:var(--neon); }
nav .btn[aria-current="page"]:hover{ filter:brightness(1.05); box-shadow:0 0 14px rgba(34,211,238,.45); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:2.35rem; padding:0 .9rem; border-radius:.75rem; background:var(--panel); border:1px solid transparent; color:var(--text); cursor:pointer; transition:transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease; user-select:none; -webkit-tap-highlight-color:transparent; }
.btn:active{ transform:translateY(1px); }
.btn:hover{ box-shadow:0 0 10px rgba(34,211,238,.25); }
.btn-ghost{ background:transparent; border-color:transparent; color:#d6dde6; }
.btn-ghost:hover{ color:#ffffff; background:rgba(34,211,238,.08); border-color:var(--ring); }
.btn-primary{ color:#0a0d12; background:var(--neon); }
.btn-primary:hover{ filter:brightness(1.05); box-shadow:0 0 18px rgba(34,211,238,.55); }
.discord-btn{ color:#fff; background:var(--accent); border-color:rgba(255,255,255,.1); }
.discord-btn:hover{ filter:brightness(1.08); box-shadow:0 0 18px rgba(88,101,242,.45); }

/* Badges / Chips */
.badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .6rem; border-radius:999px; background:rgba(34,211,238,.08); border:1px solid var(--ring); color:#d6dde6; font-size:.8rem; }
.chip{ display:inline-flex; align-items:center; padding:.25rem .6rem; border-radius:999px; background:rgba(34,211,238,.08); border:1px dashed var(--ring); color:#d6dde6; font-size:.75rem; }

/* Panes / Cards */
.pane{ background:var(--panel); border:1px solid var(--neon); border-radius:16px; box-shadow:0 0 10px rgba(34,211,238,.35); }

/* Divider */
.divider{ height:1px; width:100%; background:linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.35), rgba(34,211,238,0)); opacity:.8; margin:2rem 0; }

/* Motion */
@media (prefers-reduced-motion:reduce){ .btn, nav.glass{ transition:none; } }