/* Shared across guild.html, character.html, market.html, commands.html:
   base reset, the fixed atmospheric backdrop, and the top nav bar. Brand color is
   intentionally hardcoded here rather than tied to each page's --gold, so the nav stays the
   same icy blue no matter what accent color an individual page uses. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: transparent;
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

.bg-fixed {
  position: fixed; inset: 0; z-index: -2;
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(8,10,14,0.90) 0%, rgba(8,10,14,0.95) 45%, rgba(8,10,14,0.98) 100%),
    url('/grey-banner.png');
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.bg-noise {
  position: fixed; inset: 0; z-index: -1;
  opacity: 0.035; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 52px;
  background: linear-gradient(180deg, var(--surface), var(--surface-deep));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(169,214,234,0.08);
  position: sticky; top: 0; z-index: 200;
}
.nav-brand { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; color: #a9d6ea; text-decoration: none; letter-spacing: 0.06em; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-family: 'Cinzel', serif; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: #a9d6ea; }