:root{
  --bg:#0e0f16; --bg2:#12141c; --panel:#1a1d29; --panel2:#222634; --border:#2c3142;
  --gold:#c8a24b; --gold-dim:#8c7233; --text:#e8e6e0; --dim:#8a8f9e; --danger:#d8664f; --ok:#6fbf73;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:#e0c163}
img{max-width:100%}
.container{width:100%; max-width:1120px; margin:0 auto; padding:0 20px}
.muted{color:var(--dim)}
.gold{color:var(--gold)}

/* ---- top bar ---- */
header.nav{
  position:sticky; top:0; z-index:50; background:rgba(14,15,22,.9);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; gap:8px; height:62px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:1px; color:var(--gold)}
.brand .mark{width:30px;height:30px;border:2px solid var(--gold);border-radius:6px;display:grid;place-items:center;font-size:15px}
.nav-links{display:flex; gap:4px; margin-left:24px; flex:1}
.nav-links a{
  color:var(--text); padding:8px 14px; border-radius:6px; font-weight:500; font-size:15px;
}
.nav-links a:hover{background:var(--panel)}
.nav-links a.active{color:var(--gold)}
.nav-cta{display:flex; gap:8px; align-items:center}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--gold); color:#12141c; font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:7px; border:0; cursor:pointer; transition:.15s;
}
.btn:hover{background:#dab353; color:#12141c}
.btn.ghost{background:#232838; color:var(--text); border:1px solid var(--border)}
.btn.ghost:hover{background:#2c3245}
.btn.discord{background:#5865F2; color:#fff}
.btn.discord:hover{background:#6b78f5}
.btn.sm{padding:8px 14px; font-size:14px}
.btn.block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---- hero ---- */
.hero{
  position:relative; padding:88px 0 72px; text-align:center;
  background:radial-gradient(1200px 400px at 50% -10%, rgba(200,162,75,.14), transparent 70%), var(--bg);
  border-bottom:1px solid var(--border);
}
.hero h1{font-size:52px; line-height:1.05; letter-spacing:1px; margin-bottom:16px}
.hero h1 .gold{text-shadow:0 0 40px rgba(200,162,75,.4)}
.hero p{font-size:19px; color:var(--dim); max-width:640px; margin:0 auto 28px}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.tagline{display:inline-block; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dim); margin-bottom:18px}

/* ---- sections / cards ---- */
main{flex:1}
section.block{padding:56px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap}
.section-head h2{font-size:28px; letter-spacing:.5px}
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px}
.card h3{font-size:18px; margin-bottom:8px}
.card .date{font-size:13px; color:var(--gold-dim); margin-bottom:10px; display:block}
.card.feature .ico{font-size:26px; margin-bottom:10px}

/* ---- panels / forms ---- */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px}
.panel.narrow{max-width:440px; margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; color:var(--dim); margin-bottom:6px}
.field input{
  width:100%; background:#0c0e15; border:1px solid var(--border); color:var(--text);
  padding:11px 12px; border-radius:8px; font-size:15px; outline:none;
}
.field input:focus{border-color:var(--gold-dim)}
.msg{margin-top:14px; text-align:center; font-size:14px; min-height:20px}
.msg.err{color:var(--danger)}
.msg.ok{color:var(--ok)}
.form-title{font-size:22px; font-weight:600; margin-bottom:6px; text-align:center}
.form-sub{color:var(--dim); text-align:center; margin-bottom:22px; font-size:14px}

/* ---- table (rankings) ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px}
table{width:100%; border-collapse:collapse; min-width:520px}
th,td{padding:13px 16px; text-align:left}
th{background:var(--panel); color:var(--dim); font-size:13px; text-transform:uppercase; letter-spacing:.5px; font-weight:600}
tbody tr{border-top:1px solid var(--border)}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
tbody tr:hover{background:rgba(200,162,75,.06)}
.rank-badge{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:7px; font-weight:700; background:var(--panel2); color:var(--dim)}
.rank-1 .rank-badge{background:linear-gradient(135deg,#c8a24b,#8c7233); color:#12141c}
.rank-2 .rank-badge{background:#b7bcc9; color:#12141c}
.rank-3 .rank-badge{background:#b5793f; color:#12141c}
.pill{display:inline-block; font-size:12px; padding:3px 9px; border-radius:20px; border:1px solid var(--border); color:var(--dim)}
.pill.Mage{color:#8ab4ff;border-color:#2a3a5a}
.pill.Archer{color:#8fe08f;border-color:#2a4a2a}
.pill.Swordsman{color:#ff9d7a;border-color:#5a352a}
.pill.MartialArtist{color:#e0c163;border-color:#5a4a2a}

/* ---- server status ---- */
.status-row{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:14px; font-size:14px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.dot.up{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.dot.down{background:var(--danger)}

/* ---- shop ---- */
.shop-card{text-align:center; position:relative; overflow:hidden}
.shop-card .price{font-size:30px; font-weight:800; color:var(--gold); margin:8px 0}
.shop-card ul{list-style:none; margin:14px 0; color:var(--dim); font-size:14px}
.shop-card li{padding:5px 0; border-top:1px solid var(--border)}
.ribbon{position:absolute; top:14px; right:-30px; transform:rotate(45deg); background:var(--gold); color:#12141c; font-size:11px; font-weight:700; padding:4px 36px}

/* ---- footer ---- */
footer{border-top:1px solid var(--border); background:var(--bg2); padding:30px 0; margin-top:40px}
.foot-inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:14px}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}

@media(max-width:820px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .nav-links{display:none}
}