:root {
    --bg: #0e0b16;
    --bg-2: #161021;
    --panel: #1d1630;
    --panel-2: #251a3d;
    --border: #34264f;
    --text: #e7e1f3;
    --muted: #a99ec4;
    --gold: #e8c372;
    --gold-2: #c79a3e;
    --accent: #8b5cf6;
    --accent-2: #5b3fb0;
    --top1: #f4c542;
    --top2: #c9d2dc;
    --top3: #cd8b4b;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(139, 92, 246, 0.18), transparent 60%),
        var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    line-height: 1.6;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); }

.container {
    width: min(1080px, 92vw);
    margin: 0 auto;
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(14, 11, 22, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
}
.brand-mark { color: var(--gold); font-size: 1.4rem; }
.brand-name em { color: var(--gold); font-style: normal; }
.site-nav { display: flex; gap: 22px; }
.site-nav a {
    color: var(--muted);
    font-weight: 600;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--text); border-bottom-color: var(--gold); }

/* Main */
.site-main { padding: 40px 0 64px; min-height: 60vh; }

/* Hero */
.hero {
    text-align: center;
    padding: 56px 20px 48px;
    border-radius: 18px;
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(232, 195, 114, 0.10), transparent 70%),
        linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid var(--border);
    margin-bottom: 40px;
}
.hero-kicker {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.8rem;
    color: var(--gold);
    margin: 0 0 8px;
}
.hero-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    margin: 0;
    font-weight: 800;
    letter-spacing: 1px;
}
.hero-title em { color: var(--gold); font-style: normal; }
.hero-sub {
    max-width: 620px;
    margin: 16px auto 28px;
    color: var(--muted);
    font-size: 1.1rem;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background: linear-gradient(180deg, var(--gold), var(--gold-2));
    color: #20160a;
    box-shadow: 0 6px 20px rgba(232, 195, 114, 0.25);
}
.btn-primary:hover { color: #000; filter: brightness(1.05); }
.btn-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Features */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.card {
    background: linear-gradient(180deg, var(--panel), var(--bg-2));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card-icon { font-size: 1.8rem; margin-bottom: 8px; }
.card h3 { margin: 6px 0 8px; color: var(--gold); }
.card p { margin: 0; color: var(--muted); }

/* Page title */
.page-title {
    font-size: 2rem;
    margin: 8px 0 24px;
    color: var(--gold);
    border-left: 4px solid var(--accent);
    padding-left: 14px;
}

.empty {
    color: var(--muted);
    background: var(--panel);
    border: 1px dashed var(--border);
    padding: 18px;
    border-radius: 12px;
}

/* News */
.news-entry {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.news-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
}
.news-version {
    font-weight: 800;
    color: var(--gold);
    font-size: 1.05rem;
}
.news-date { color: var(--muted); font-size: 0.9rem; }
.news-items { margin: 0; padding-left: 20px; color: var(--text); }
.news-items li { margin: 4px 0; }

/* Leaderboard */
.leaderboard {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.leaderboard th, .leaderboard td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.leaderboard th {
    background: var(--panel-2);
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.leaderboard td.name { font-weight: 700; color: var(--text); }
.leaderboard tr:last-child td { border-bottom: none; }
.leaderboard tbody tr:hover { background: rgba(139, 92, 246, 0.08); }
.leaderboard .top-1 td:first-child { color: var(--top1); font-weight: 800; }
.leaderboard .top-2 td:first-child { color: var(--top2); font-weight: 800; }
.leaderboard .top-3 td:first-child { color: var(--top3); font-weight: 800; }

/* Prose */
.prose p { color: var(--text); max-width: 760px; }
.prose a { border-bottom: 1px solid var(--gold-2); }

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 22px 0;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 760px) {
    .features { grid-template-columns: 1fr; }
    .site-nav { gap: 12px; font-size: 0.9rem; }
}