body {
  background: radial-gradient(circle at top, #141826, #05070a 50%, #000);
  color: #e2e8f0;
}
.btn-info {
  background-color: #38bdf8;
  border: none;
}
/* ===== Site Header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.site-header .brand img {
  height: 58px;            /* adjust as needed */
  width: auto;
  display: block;
}

/* ===== Page Background with Eagle Symbol ===== */
body {
  background:
    url("../assets/eagle.png") center center no-repeat fixed,
    radial-gradient(circle at center, #141826 0%, #05070a 50%, #000 100%);
  background-size: clamp(360px, 42vw, 720px) auto, cover;  /* 1st = eagle, 2nd = gradient */
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
  margin: 0;
  padding-top: 82px; /* offset for fixed header */
}

/* Optional: slightly fade the watermark */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* ========= Header / Brand ========= */
.site-header{
  position:fixed; inset:0 auto auto 0; width:100%;
  padding:.65rem 1.1rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.10));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:1000;
}
.site-header .brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.site-header .brand img{ height:56px; width:auto; display:block; opacity:.95; transition:.2s ease; }
.site-header .brand:hover img{ opacity:1; transform:translateY(-1px); }

/* ========= Page Background + Watermark ========= */
/* Layers: 1) animated eagle, 2) soft vignette gradient */
body{
  margin:0; color:#e2e8f0; padding-top:82px;
  background:
    url("../assets/eagle.png") center 16vh / clamp(360px, 42vw, 720px) no-repeat fixed,
    radial-gradient(120% 90% at 50% 0%, #111628 0%, #06080f 52%, #000 100%);
}

/* Dim overlay for readability, slightly animated “breathing” */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(900px 900px at 10% 80%, rgba(120,150,255,.06), transparent 60%),
    rgba(0,0,0,.26);
  animation: ambience 14s ease-in-out infinite alternate;
}
@keyframes ambience{
  0%   { filter:brightness(.98) saturate(.98); }
  100% { filter:brightness(1.03) saturate(1.03); }
}

/* ========= Hero polish ========= */
.hero{
  position:relative; z-index:1; /* above the ::before overlay */
  padding-top: min(8vh, 4rem);
  padding-bottom: min(10vh, 6rem);
}
.hero h1{
  font-size:clamp(2rem, 5vw, 3.5rem);
  line-height:1.05; letter-spacing:-.015em; margin-bottom:.6rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero p.lead{
  color:#c7d2fe; opacity:.85; max-width:52ch;
}
.hero .btn-accent{
  background:#38bdf8; border:none; color:#000; font-weight:700;
  box-shadow:0 10px 30px rgba(56,189,248,.25);
}
.hero .btn-accent:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* ========= Subtle parallax on scroll (no JS needed for basic effect) ========= */
:root{ --wm-y: 16vh; }
body{
  background-position: center var(--wm-y), center;
}
@media (prefers-reduced-motion: no-preference){
  /* Slow drift of the watermark even without scrolling */
  body{ animation: wmfloat 28s ease-in-out infinite alternate; }
  @keyframes wmfloat{
    from{ --wm-y: 16vh; }
    to  { --wm-y: 22vh; }
  }
}

/* ========= Cards & sections polish ========= */
.server-card,.info-card{
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(11,13,17,.35));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.server-card:hover,.info-card:hover{
  transform: translateY(-3px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 16px 40px rgba(56,189,248,.10);
}
.tag{ color:#94a3b8; opacity:.9; }

/* ========= Footer faint glow ========= */
footer{
  position:relative; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.4), transparent);
  border-top:1px solid rgba(255,255,255,.06);
}

/* ========= Respect reduced motion ========= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
  body{ background-attachment: scroll; }
}

/* ========= Small screens tweaks ========= */
@media (max-width: 575.98px){
  body {
    background-size: clamp(260px, 60vw, 480px) auto, cover;
  }
  body::before {
    background: rgba(0, 0, 0, 0.65); /* a touch darker on phones */
  }
  .site-header .brand img{ height:46px; }
  .hero{ padding-top: 3.75rem; }
}
/* ===== BattleMetrics status cards ===== */
.bm-card{
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(11,13,17,.35));
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  min-height: 172px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bm-card:hover{ transform: translateY(-2px); border-color: rgba(56,189,248,.35); box-shadow: 0 16px 40px rgba(56,189,248,.10); }
.bm-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding: .85rem 1rem .5rem; }
.bm-title{ font-weight:700; font-size:1rem; margin:0; }
.bm-sub{ color:#94a3b8; font-size:.85rem; }
.bm-body{ padding: .25rem 1rem 1rem; }
.bm-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.stat{
  font-size:.85rem; color:#cbd5e1; background: rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.18); padding:.35rem .55rem; border-radius:.6rem;
}
.status-dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block; margin-right:.45rem; }
.online{ background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.35); }
.offline{ background:#ef4444; box-shadow:0 0 10px rgba(239,68,68,.25); }
.unknown{ background:#f59e0b; box-shadow:0 0 10px rgba(245,158,11,.25); }

/* skeleton while loading */
.skel{ position:relative; overflow:hidden; background: rgba(148,163,184,.12); border-radius:.5rem; height:1.2rem; }
.skel::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } }
/* ===== Discord Widget Adjustments ===== */
#community .embed-frame {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(17,24,39,0.6);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* Make Discord widget taller (default embeds use ~62%) */
#community .embed-ratio {
  position: relative;
  width: 100%;
  padding-top: 85%;  /* increase this for taller Discord panel */
}

#community iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1rem;
}
.header-actions a[aria-current="page"] {
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
}
/* Make whole card behave like a link without changing look */
.bm-link {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}
.bm-link:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
  border-radius: 1rem;
}