/* Deadly Crusaders — Aion 9.0 theme
   Dark celestial fantasy: Tower of Eternity light, Elyos gold vs Asmodian crimson. */
:root{
  --bg:#06070e; --bg2:#0a0c17; --panel:#0e1122; --panel2:#121631;
  --line:rgba(216,178,90,.18); --line-soft:rgba(255,255,255,.07);
  --ink:#e9ebf4; --muted:#8b91ab; --dim:#666c85;
  --gold:#d8b25a; --gold-hi:#f4dc95; --gold-deep:#a9832f;
  --sky:#6fb5ff; --sky-hi:#a9d6ff;
  --elyos:#e8c66a; --elyos-glow:rgba(232,198,106,.5);
  --asmo:#e0576a; --asmo-glow:rgba(224,87,106,.45);
  --up:#57d38b; --down:#e0576a;
  --radius:16px; --radius-sm:10px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Rajdhani',system-ui,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg);
  background-image:
    radial-gradient(1100px 600px at 50% -8%, rgba(111,181,255,.10), transparent 60%),
    radial-gradient(900px 500px at 88% 8%, rgba(216,178,90,.08), transparent 55%),
    linear-gradient(180deg,#080a13,#06070e 60%);
  background-attachment:fixed; font-size:17px; line-height:1.55; letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sky-hi); text-decoration:none}
a:hover{color:#fff}
.wrap{max-width:1160px; margin:0 auto; padding:0 22px}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.ta-r{text-align:right}
.c-gold{color:var(--gold-hi)} .c-elyos{color:var(--elyos)} .c-asmo{color:var(--asmo)}
h1,h2,h3,h4{font-family:'Cinzel',serif; font-weight:700; letter-spacing:.5px; line-height:1.15; margin:0}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(8,10,20,.92),rgba(8,10,20,.72));
  border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; gap:22px; height:66px}
.brand{font-family:'Cinzel',serif; font-weight:900; font-size:19px; color:#fff; letter-spacing:1px; white-space:nowrap}
.brand em{color:var(--gold-hi); font-style:normal}
.brand-mark{color:var(--gold); filter:drop-shadow(0 0 8px var(--elyos-glow)); margin-right:2px}
.links{display:flex; gap:6px; margin-left:8px; flex:1}
.links a{padding:8px 14px; border-radius:8px; color:var(--muted); font-weight:600; font-size:15px;
  text-transform:uppercase; letter-spacing:1px; transition:.15s}
.links a:hover{color:#fff; background:rgba(255,255,255,.05)}
.links a.active{color:var(--gold-hi); background:rgba(216,178,90,.10)}
.nav-auth{display:flex; gap:8px; align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px; font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:15px; text-transform:uppercase; letter-spacing:1.2px; cursor:pointer; border:1px solid transparent;
  transition:transform .12s, box-shadow .2s, background .2s; white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:8px 15px; font-size:13px}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); color:#241a05;
  box-shadow:0 8px 24px -8px rgba(216,178,90,.6), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{color:#241a05; box-shadow:0 12px 30px -8px rgba(216,178,90,.8)}
.btn-ghost{background:rgba(255,255,255,.03); border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold); color:#fff}
.btn-sm.btn:not(.btn-gold):not(.btn-ghost){color:var(--muted)}
.btn-block{width:100%}

/* ---------- hero ---------- */
.is-home{padding-top:0}
.hero{position:relative; margin:26px 0 30px; border-radius:24px; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,#0b0e1e,#080a15);
  box-shadow:var(--shadow)}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.hero-bg .beam{position:absolute; left:50%; top:-20%; width:340px; height:150%; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(169,214,255,.35), rgba(111,181,255,.10) 45%, transparent 70%);
  filter:blur(6px); animation:pulse 6s ease-in-out infinite}
.hero-bg:before{content:""; position:absolute; left:50%; top:0; width:3px; height:100%; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent, rgba(244,220,149,.55), rgba(169,214,255,.25), transparent)}
.hero-bg .stars{position:absolute; inset:0; background-image:
  radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 70% 20%, #cfe0ff, transparent),
  radial-gradient(1.6px 1.6px at 40% 70%, #fff, transparent),
  radial-gradient(1.1px 1.1px at 85% 55%, #ffe9b0, transparent),
  radial-gradient(1.3px 1.3px at 12% 80%, #cfe0ff, transparent),
  radial-gradient(1.2px 1.2px at 60% 85%, #fff, transparent);
  opacity:.55; animation:drift 18s linear infinite}
.hero-inner{position:relative; padding:64px 46px 52px; max-width:760px}
.eyebrow{margin:0 0 12px; text-transform:uppercase; letter-spacing:4px; font-size:13px; font-weight:600; color:var(--gold)}
.hero h1{font-size:clamp(38px,6vw,68px); font-weight:900; text-wrap:balance;
  background:linear-gradient(180deg,#fff 20%,var(--gold-hi) 60%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(216,178,90,.25))}
.lede{font-size:19px; color:#c7cbdb; max-width:600px; margin:16px 0 26px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-status{display:flex; gap:28px; margin-top:34px; flex-wrap:wrap}
.hs{display:flex; flex-direction:column; gap:6px; font-size:13px; text-transform:uppercase; letter-spacing:1.5px; color:var(--muted)}
.hs .num{font-family:'Cinzel',serif; font-size:26px; color:var(--gold-hi); letter-spacing:0}

/* ---------- pills ---------- */
.pill{display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px}
.pill i{width:8px; height:8px; border-radius:50%; box-shadow:0 0 8px currentColor}
.pill.up{color:var(--up); background:rgba(87,211,139,.12); border:1px solid rgba(87,211,139,.3)}
.pill.down{color:var(--down); background:rgba(224,87,106,.12); border:1px solid rgba(224,87,106,.3)}
.muted{color:var(--dim); font-size:13px; text-transform:uppercase; letter-spacing:1px}

/* ---------- stat strip ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:0 0 30px}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:18px 16px; text-align:center; position:relative; overflow:hidden}
.stat:before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5}
.stat .k{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.6px; color:var(--muted)}
.stat .v{display:block; font-family:'Cinzel',serif; font-size:28px; color:#fff; margin-top:4px}

/* ---------- faction split ---------- */
.faction-split{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:14px; margin:0 0 30px}
.fac{border-radius:var(--radius); padding:24px; border:1px solid var(--line-soft); position:relative; overflow:hidden}
.fac h3{font-size:24px; margin-bottom:6px}
.fac p{color:#b7bcce; margin:0 0 14px; font-size:15px}
.fac-count{font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:13px}
.fac.elyos{background:radial-gradient(120% 120% at 0 0, rgba(232,198,106,.14), transparent 60%),var(--panel)}
.fac.elyos h3,.fac.elyos .fac-count{color:var(--elyos); text-shadow:0 0 20px var(--elyos-glow)}
.fac.elyos{border-color:rgba(232,198,106,.28)}
.fac.asmo{background:radial-gradient(120% 120% at 100% 0, rgba(224,87,106,.16), transparent 60%),var(--panel); text-align:right}
.fac.asmo h3,.fac.asmo .fac-count{color:var(--asmo); text-shadow:0 0 20px var(--asmo-glow)}
.fac.asmo{border-color:rgba(224,87,106,.28)}
.fac-vs{display:flex; align-items:center; font-family:'Cinzel',serif; font-weight:900; color:var(--dim); font-size:20px; padding:0 4px}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; margin-bottom:40px}
.layout.solo{grid-template-columns:1fr}
.col-side{display:flex; flex-direction:column; gap:16px; position:sticky; top:86px}

/* ---------- panels ---------- */
.panel{background:linear-gradient(180deg,var(--panel),#0b0e1c); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 26px; margin-bottom:24px; box-shadow:var(--shadow)}
.panel.narrow{max-width:560px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-soft)}
.panel-head h2{font-size:24px} .panel-head h3{font-size:19px}
.panel-head .more,.more{color:var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:13px}
.sub{font-size:16px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin:6px 0 12px}
.badge{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gold-hi);
  border:1px solid var(--line); border-radius:999px; padding:4px 12px}

/* ---------- ranking table ---------- */
table.rank{width:100%; border-collapse:collapse; font-size:15px}
table.rank th{text-align:left; font-family:'Rajdhani'; font-weight:600; text-transform:uppercase;
  letter-spacing:1.4px; font-size:12px; color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--line-soft)}
table.rank td{padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.04)}
table.rank tbody tr:last-child td,table.rank tr:last-child td{border-bottom:none}
table.rank tbody tr:hover{background:rgba(255,255,255,.025)}
.rk{font-family:'Cinzel',serif; color:var(--dim); width:44px}
.rk.medal{color:#fff; font-weight:700}
.rk.m1{color:#ffd76a; text-shadow:0 0 12px rgba(255,215,106,.6)}
.rk.m2{color:#d8dee8} .rk.m3{color:#e0a56a}
.nm a{color:#fff; font-weight:600} .nm a:hover{color:var(--gold-hi)}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--dim); margin-right:8px; vertical-align:middle}
.dot.on{background:var(--up); box-shadow:0 0 8px var(--up)}
.lv{font-family:'Cinzel',serif; color:var(--gold-hi)}
.cls{display:inline-block; padding:2px 10px; border-radius:6px; font-size:13px; font-weight:600;
  border:1px solid transparent}
.g-warrior{color:#f0a3a3; background:rgba(224,87,87,.10); border-color:rgba(224,87,87,.25)}
.g-scout{color:#9fe0a8; background:rgba(87,211,120,.10); border-color:rgba(87,211,120,.22)}
.g-mage{color:#c9a3f0; background:rgba(160,87,224,.12); border-color:rgba(160,87,224,.28)}
.g-priest{color:#8fdada; background:rgba(87,200,200,.10); border-color:rgba(87,200,200,.24)}
.g-tech{color:#f0c48f; background:rgba(224,150,60,.12); border-color:rgba(224,150,60,.26)}
.g-artist{color:#f0a3d4; background:rgba(224,87,180,.10); border-color:rgba(224,87,180,.24)}
.race{display:inline-block; padding:2px 10px; border-radius:6px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px}
.race.elyos{color:#2a2003; background:linear-gradient(180deg,var(--elyos),#c9a63f)}
.race.asmo{color:#fff; background:linear-gradient(180deg,var(--asmo),#b23046)}
.empty{color:var(--muted); text-align:center; padding:30px 0!important}

/* ---------- filters / chips ---------- */
.filters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.chip{padding:7px 16px; border-radius:999px; border:1px solid var(--line-soft); color:var(--muted);
  font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:13px}
.chip:hover{color:#fff; border-color:var(--gold)}
.chip.on{color:#fff; background:rgba(216,178,90,.12); border-color:var(--gold)}
.chip.elyos.on{background:rgba(232,198,106,.16); border-color:var(--elyos); color:var(--elyos)}
.chip.asmo.on{background:rgba(224,87,106,.16); border-color:var(--asmo); color:var(--asmo)}

/* ---------- forms ---------- */
.form{display:flex; flex-direction:column; gap:15px; max-width:440px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:13px; text-transform:uppercase;
  letter-spacing:1.4px; color:var(--muted); font-weight:600}
.form input{padding:12px 14px; border-radius:10px; border:1px solid var(--line-soft);
  background:rgba(0,0,0,.35); color:#fff; font-family:'Rajdhani'; font-size:16px; letter-spacing:.5px}
.form input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,178,90,.15)}
.form .captcha strong{color:var(--gold-hi)}
.form button{margin-top:6px; align-self:flex-start}
.fineprint{font-size:13px; color:var(--dim); text-transform:none; letter-spacing:0; font-weight:400; margin:2px 0 0}

/* ---------- flash ---------- */
.flash{padding:13px 18px; border-radius:10px; margin:22px 0 0; font-weight:600; border:1px solid}
.flash.ok{background:rgba(87,211,139,.12); border-color:rgba(87,211,139,.35); color:#9be9bd}
.flash.error{background:rgba(224,87,106,.12); border-color:rgba(224,87,106,.35); color:#f0a3ae}

/* ---------- sidebar cards ---------- */
.side-card{background:linear-gradient(180deg,var(--panel),#0b0e1c); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:18px 20px}
.side-card h4{font-size:15px; text-transform:uppercase; letter-spacing:1.6px; color:var(--gold);
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line-soft)}
.status-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.status-list li{display:flex; align-items:center; justify-content:space-between; font-size:15px; color:var(--muted)}
.status-list li b{color:#fff; font-family:'Cinzel',serif}
.cta-card p{color:#b7bcce; font-size:14px; margin:0 0 14px}

/* ---------- downloads ---------- */
.steps{margin:0 0 22px; padding-left:20px; color:#c7cbdb; display:flex; flex-direction:column; gap:8px}
.steps strong{color:#fff}
.dl-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:18px}
.dl-card{background:var(--panel2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px}
.dl-card.locked{border-color:var(--line)}
.dl-card h3{font-size:19px; margin-bottom:8px}
.dl-card p{color:#b7bcce; font-size:15px; margin:0 0 16px}
.dl-note{display:block; margin-top:10px; font-size:12px; color:var(--dim)}
.kv{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.kv li{display:flex; justify-content:space-between; font-size:15px; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.05); padding-bottom:8px}
.kv li b{color:#fff}
.kv.big li{font-size:16px; padding:6px 0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); margin-top:40px; padding:26px 0; background:rgba(6,7,14,.6)}
.foot-inner{display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--dim); font-size:14px; flex-wrap:wrap}
.foot nav{display:flex; gap:18px}
.foot nav a{color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-size:13px; font-weight:600}
.foot nav a:hover{color:var(--gold-hi)}

/* ---------- animations ---------- */
@keyframes pulse{0%,100%{opacity:.75; transform:translateX(-50%) scaleY(1)}50%{opacity:1; transform:translateX(-50%) scaleY(1.04)}}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-40px)}}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .layout{grid-template-columns:1fr}
  .col-side{position:static; flex-direction:row; flex-wrap:wrap}
  .col-side .side-card{flex:1; min-width:220px}
  .stat-strip{grid-template-columns:repeat(3,1fr)}
  .dl-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  body{font-size:16px}
  .links{display:none}
  .nav-inner{gap:12px}
  .hero-inner{padding:44px 24px 40px}
  .faction-split{grid-template-columns:1fr; }
  .fac.asmo{text-align:left}
  .fac-vs{justify-content:center; padding:6px}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .form .row{grid-template-columns:1fr}
  .hero-status{gap:20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; scroll-behavior:auto}
  .btn:hover{transform:none}
}