:root{
  --bg:#0b0f14; --card:#121925; --text:#e7eef7; --muted:#a7b3c2; --line:#223043;
  --accent:#6aa9ff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--text); }
a{ color:var(--text); text-decoration:none; }
a:hover{ color:var(--accent); }

.wrap{ max-width:1000px; margin:0 auto; padding:20px; }
.nav{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line); background:rgba(18,25,37,.65); backdrop-filter: blur(6px);
  position:sticky; top:0;
}
.nav .left{ display:flex; gap:10px; align-items:center; }
.brand{ font-weight:700; letter-spacing:.4px; }
.links{ display:flex; gap:14px; flex-wrap:wrap; }
.links a{ padding:8px 10px; border-radius:10px; }
.links a.active{ background:rgba(106,169,255,.16); border:1px solid rgba(106,169,255,.25); }

.hero{ padding:28px 0 12px; }
.hero h1{ margin:0 0 8px; font-size:40px; }
.hero p{ margin:0; color:var(--muted); max-width:70ch; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px; margin:16px 0;
}
.grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(106,169,255,.35);
  background:rgba(106,169,255,.16);
  color:var(--text);
}
.btn:hover{ border-color:rgba(106,169,255,.6); }

.footer{ border-top:1px solid var(--line); margin-top:30px; padding-top:18px; color:var(--muted); font-size:14px; }
.small{ color:var(--muted); font-size:14px; }
/* --- Nav layout helpers (clock + auth) --- */
.nav .nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav .nav-left { display:flex; align-items:center; gap:12px; }
.nav .nav-left .clock { opacity: .9; }
.nav .nav-right { display:flex; align-items:center; }

/* ---- Clock + footer alignment tweaks ---- */
.nav .clockline{
  font-size: 12px;
  opacity: .9;
  margin-top: 2px;
}

.footer{
  text-align: center;
  width: 100%;
  margin-top: 24px;
}

/* --- Clock + footer tweaks --- */
.clockline { margin-top: 2px; opacity: .9; }

.footer { text-align: center; width: 100%; margin-top: 24px; }

/* --- Header layout polish --- */
.nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.nav .left{
  display:flex;
  align-items:baseline;
  gap:12px;
  min-width: 340px;
}
.nav .links{
  display:flex;
  justify-content:center;
  gap:18px;
  flex:1;
}
.nav [data-auth-slot]{
  min-width: 140px;
  display:flex;
  justify-content:flex-end;
}
.clockline{
  white-space:nowrap;
  opacity:.85;
}





/* ===== Nav polish overrides (clock left, links centered, auth right) ===== */
header.nav .wrap{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Left zone: clock */
header.nav .left{
  flex:1 1 0;
  display:flex;
  align-items:center;
  min-width:0;
}

/* Hide brand text in the top bar (per request) */
header.nav .brand{
  display:none !important;
}

/* Clock: no wrap + remove inline margin */
#worldClock{
  white-space:nowrap;
  margin-left:0 !important;
}

/* Center zone: nav links/buttons */
header.nav .links{
  flex:0 0 auto;
  display:flex;
  gap:18px;
  justify-content:center;
  margin:0 auto;
}

/* Right zone: Discord/Login button */
header.nav [data-auth-slot],
header.nav #authSlot{
  flex:1 1 0;
  display:flex;
  justify-content:flex-end;
}

/* Footer centered */
.footer{
  text-align:center;
}
.footer > *{
  margin-left:auto;
  margin-right:auto;
}





/* ===== Nav layout polish ===== */
.nav .wrap{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Left cluster: brand + clock */
.nav .left{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap; /* keep clock on one line */
}

/* Center nav links */
.nav .links{
  margin:0 auto;             /* centers this block */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

/* Right auth slot */
.nav [data-auth-slot],
.nav #authSlot{
  margin-left:auto;
  display:flex;
  align-items:center;
}





/* ===== Nav layout polish ===== */
.nav .wrap{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Left cluster: brand + clock */
.nav .left{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap; /* keep clock on one line */
}

/* Center nav links */
.nav .links{
  margin:0 auto;             /* centers this block */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

/* Right auth slot */
.nav [data-auth-slot],
.nav #authSlot{
  margin-left:auto;
  display:flex;
  align-items:center;
}





/* ===== Nav layout override (wins over inline styles) ===== */
header.nav .wrap{
  max-width: 100% !important;     /* lets left side go farther left */
  justify-content: flex-start !important; /* overrides inline space-between */
  gap: 16px !important;
}

/* Left cluster */
header.nav .left{
  display:flex;
  align-items:center;
  gap:12px;
  white-space: nowrap;            /* keep brand + clock on one line */
}

/* Center buttons */
header.nav .links{
  margin-left: auto;
  margin-right: auto;             /* centers the nav links block */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

/* Right button */
header.nav [data-auth-slot],
header.nav #authSlot{
  margin-left: auto;              /* pushes auth to the far right */
  display:flex;
  align-items:center;
}

/* Footer centered */
.footer{
  text-align:center;
}