/* Seraph MMO — site theme (midnight & gilt, matching the landing page). */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');
:root {
  --bg: #14101F;
  --bg2: #100C1A;
  --panel: #1E1830;
  --line: rgba(231, 178, 76, 0.22);
  --gold: #E7B24C;
  --gold-bright: #F6E7B4;
  --text: #F3ECDD;
  --dim: #B8AE97;
  --good: #FFE9A8;
  --evil: #D98598;
  --green: #7ad17a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: radial-gradient(120% 80% at 50% -10%, #2A2140 0%, var(--bg) 42%, var(--bg2) 100%) fixed;
  color: var(--text);
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  line-height: 1.6;
  font-size: 18px;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

/* --- Nav --- */
nav {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 36px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
nav .brand { font-family: 'Cinzel', serif; font-weight: 700; font-size: 22px; color: var(--gold); letter-spacing: 2px; }
nav a.navlink { color: var(--dim); font-size: 15px; letter-spacing: 1px; }
nav a.navlink:hover, nav a.navlink.active { color: var(--gold); }
nav .spacer { flex: 1; }
nav .dl-btn {
  background: var(--gold); color: #191307; padding: 8px 20px;
  border-radius: 4px; font-weight: bold; font-size: 14px; letter-spacing: 1px;
}
nav .dl-btn:hover { background: var(--gold-bright); color: #191307; }

/* --- Hero --- */
.hero {
  text-align: center;
  padding: 90px 24px 70px;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(217, 192, 138, 0.12), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-size: 64px; color: var(--gold); letter-spacing: 10px;
  font-variant: small-caps; font-weight: normal;
  text-shadow: 0 2px 18px rgba(217, 192, 138, 0.25);
}
.hero .tagline { font-size: 20px; color: var(--text); margin-top: 10px; }
.hero .pitch { max-width: 620px; margin: 22px auto 0; color: var(--dim); font-size: 16px; }
.hero .cta {
  display: inline-block; margin-top: 34px;
  background: var(--gold); color: #191307;
  font-size: 18px; font-weight: bold; letter-spacing: 1px;
  padding: 14px 44px; border-radius: 6px;
  box-shadow: 0 4px 24px rgba(217, 192, 138, 0.25);
}
.hero .cta:hover { background: var(--gold-bright); color: #191307; }
.hero .sub-cta { display: block; margin-top: 14px; color: var(--dim); font-size: 14px; }

/* --- Sections / panels --- */
main { max-width: 1000px; margin: 0 auto; padding: 40px 24px 80px; }
h2 {
  color: var(--gold-bright); font-family: 'Cinzel', serif; letter-spacing: 1px;
  font-weight: 600; font-size: 28px;
  margin: 44px 0 18px; border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 22px 26px; margin-bottom: 18px;
}

/* --- Screenshot placeholders --- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.shot {
  aspect-ratio: 16/9; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 14px; letter-spacing: 1px;
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* --- News --- */
.news-item { border-left: 3px solid var(--gold); padding-left: 16px; margin-bottom: 22px; }
.news-item .date { color: var(--dim); font-size: 13px; letter-spacing: 1px; }
.news-item h3 { color: var(--gold-bright); font-weight: normal; font-size: 20px; }
.news-item p { margin-top: 4px; }

/* --- Download page --- */
.dl-card {
  display: flex; align-items: center; gap: 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 24px 28px; margin-bottom: 16px;
}
.dl-card .os { font-size: 22px; color: var(--gold-bright); min-width: 130px; font-variant: small-caps; letter-spacing: 2px; }
.dl-card .meta { color: var(--dim); font-size: 14px; flex: 1; }
.dl-card .get {
  background: var(--gold); color: #191307; padding: 10px 28px;
  border-radius: 5px; font-weight: bold; letter-spacing: 1px;
}
.dl-card .get:hover { background: var(--gold-bright); color: #191307; }
.dl-card.soon { opacity: 0.45; }
.dl-card.soon .get { background: var(--line); color: var(--dim); pointer-events: none; }

/* --- Status page --- */
.status-line { font-size: 20px; }
.status-line .dot { font-size: 16px; }
.status-online { color: var(--green); }
.status-offline { color: var(--evil); }
table.roster { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.roster th {
  text-align: left; color: var(--gold); font-variant: small-caps; letter-spacing: 2px;
  font-weight: normal; font-size: 15px;
  border-bottom: 1px solid var(--line); padding: 8px 12px;
}
table.roster td { padding: 8px 12px; border-bottom: 1px solid rgba(53, 48, 74, 0.45); font-size: 15px; }
table.roster tr:last-child td { border-bottom: none; }
table.roster tr:hover td { background: rgba(217, 192, 138, 0.04); }
td.rank { color: var(--dim); width: 40px; }
td.lvl { width: 70px; }
.align-good { color: var(--good); }
.align-evil { color: var(--evil); }
.align-neutral { color: var(--dim); }

footer {
  text-align: center; color: var(--dim); font-size: 13px;
  padding: 26px; border-top: 1px solid var(--line); background: var(--bg2);
}