/* ================================================================
   HELIOS CONQUER — Professional Beauty CSS v5
   RULES: Never moves/wraps existing elements. Pure styling only.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Exo+2:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --gold:     #d4a843;
  --gold-l:   #f0c96a;
  --gold-d:   #7a5818;
  --gold-dim: rgba(212,168,67,.12);
  --fire:     #c8340a;
  --fire-b:   #f04420;
  --onyx:     #070503;
  --onyx-2:   #0d0a05;
  --wood:     #1c1206;
  --panel:    rgba(16,11,4,.97);
  --panel-2:  rgba(22,15,5,.95);
  --bgold:    rgba(212,168,67,.32);
  --bgold-s:  rgba(212,168,67,.08);
  --txt:      rgba(215,195,150,.78);
  --txth:     #ecdda0;
  --txtd:     rgba(175,150,95,.5);
  --glow-g:   0 0 18px rgba(212,168,67,.55);
  --glow-f:   0 0 22px rgba(200,52,10,.5);
  --ease:     cubic-bezier(.4,0,.2,1);
  --fh:       'Cinzel',serif;
  --fb:       'Exo 2',sans-serif;
}

/* ── GLOBAL ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth !important; }
body {
  font-family: var(--fb) !important;
  background: var(--onyx) !important;
  background-image:
    radial-gradient(ellipse 140% 40% at 50% -5%, rgba(90,35,0,.5) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
  color: var(--txt) !important;
}
::-webkit-scrollbar { width: 5px; background: var(--onyx); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold), var(--gold-d)); border-radius: 3px; }

/* ── FONTS ───────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--fh) !important; color: var(--txth) !important; }
a { color: var(--gold) !important; transition: color .2s; }
a:hover { color: var(--gold-l) !important; }

/* ── HERO PHOTO BACKGROUND ───────────────────────────────────── */
/* Photo fills the entire hero wrapper */
.vs-hero-wrapper {
  background-image: url('./background_new.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
/* Hide the ls-bg div and the old GIF it loads */
.vs-hero-wrapper > .ls-bg,
.hc-hero-photo {
  display: none !important;
}
/* Subtle dark bottom vignette so carousel text stays readable */
.vs-hero-wrapper::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(to top, rgba(7,5,3,.75) 0%, transparent 50%) !important;
}
/* Carousel content sits above overlay */
.vs-hero-wrapper .vs-hero-carousel { position: relative !important; z-index: 2 !important; }

/* ── TOP ANNOUNCE BAR ────────────────────────────────────────── */
.animate-line {
  background: linear-gradient(90deg, var(--onyx), var(--wood), var(--onyx)) !important;
  border-bottom: 1px solid var(--bgold) !important;
  padding: 6px 0 !important;
}
.animate-line * { font-family: var(--fb) !important; color: var(--txtd) !important; font-size: 11px; }
.animate-line .fs-16 { font-family: var(--fh) !important; color: var(--gold) !important; font-size: 13px !important; font-weight: 600; }
.animate-line .link-secondary span { color: var(--txtd) !important; }

/* ── STICKY NAV ──────────────────────────────────────────────── */
.sticky-header-wrap, .sticky-header {
  background: linear-gradient(180deg, rgba(7,5,2,.99), rgba(14,9,3,.98)) !important;
  border-bottom: 1px solid var(--bgold) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 2px 28px rgba(0,0,0,.92) !important;
}
.logo img { filter: drop-shadow(0 0 8px rgba(212,168,67,.28)); transition: filter .3s; }
.logo img:hover { filter: drop-shadow(0 0 18px rgba(212,168,67,.6)); }
.main-menu a {
  font-family: var(--fh) !important;
  font-size: 11px !important; letter-spacing: .15em !important;
  text-transform: uppercase !important; font-weight: 600 !important;
  color: rgba(200,175,110,.62) !important;
  padding: 8px 16px !important;
  transition: color .2s !important;
}
.main-menu a:hover, .main-menu ul li.active > a {
  color: var(--gold-l) !important;
  text-shadow: 0 0 10px rgba(240,201,106,.4) !important;
}

/* ── HEADER BAND ─────────────────────────────────────────────── */
.bg-light-gray {
  background: linear-gradient(180deg, var(--wood), rgba(10,6,2,.98)) !important;
  border-bottom: 1px solid var(--bgold) !important;
  box-shadow: 0 3px 20px rgba(0,0,0,.8) !important;
}
.header-info-box .has-border {
  color: var(--txtd) !important;
  border-bottom-color: rgba(212,168,67,.18) !important;
  font-size: 11px !important; letter-spacing: .04em;
}
.header-info-box.has-right-border { border-right-color: rgba(212,168,67,.18) !important; }
.header-info-box.has-left-border  { border-left-color:  rgba(212,168,67,.18) !important; }
.header-info-box h4 {
  font-family: var(--fh) !important;
  color: var(--gold-l) !important;
  text-shadow: 0 0 14px rgba(212,168,67,.45) !important;
  margin: 2px 0 !important;
}
#serverTimeLabel, #serverTimeLabel1 { color: var(--txtd) !important; font-size: 10px !important; }

/* ── LOGIN FORM ──────────────────────────────────────────────── */
.form-login {
  background: rgba(6,4,1,.92) !important;
  border-color: rgba(212,168,67,.2) !important;
  color: var(--txth) !important;
  transition: border-color .25s, box-shadow .25s !important;
}
.form-login:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 8px rgba(212,168,67,.22) !important;
}
.form-login::placeholder { color: var(--txtd) !important; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.vs-btn, .vs-btn2 {
  font-family: var(--fh) !important;
  font-size: 10px !important; letter-spacing: .16em !important;
  text-transform: uppercase !important; font-weight: 700 !important;
  transition: all .28s var(--ease) !important;
  position: relative; overflow: hidden;
}
.vs-btn.gradient-btn, .vs-btn2.gradient-btn {
  background: linear-gradient(135deg, var(--gold-d), var(--gold), var(--gold-l)) !important;
  color: var(--onyx) !important;
  border: 1px solid rgba(212,168,67,.4) !important;
  box-shadow: 0 2px 14px rgba(212,168,67,.22) !important;
}
.vs-btn.gradient-btn:hover, .vs-btn2.gradient-btn:hover {
  box-shadow: var(--glow-g) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.08);
}
/* Shine sweep */
.vs-btn.gradient-btn::after, .vs-btn2.gradient-btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); transition: left .5s var(--ease);
}
.vs-btn.gradient-btn:hover::after, .vs-btn2.gradient-btn:hover::after { left: 130%; }
.vs-btn.black-skew, .vs-btn2.outline3 {
  border: 1px solid var(--bgold) !important; color: var(--gold) !important;
  background: var(--gold-dim) !important;
}
.vs-btn.black-skew:hover, .vs-btn2.outline3:hover {
  background: rgba(212,168,67,.18) !important; box-shadow: var(--glow-g) !important;
}
.form-login-button {
  font-family: var(--fh) !important; font-size: 9px !important; letter-spacing: .12em !important;
  background: linear-gradient(135deg, var(--gold-d), var(--gold)) !important;
  color: var(--onyx) !important; border: none !important;
}

/* ── SECTION BACKGROUNDS ─────────────────────────────────────── */
.bg-light-dark  { background-color: rgba(12,8,3,.97) !important; }
.bg-major-black { background-color: var(--panel) !important; }
.bg-dark        { background-color: var(--onyx) !important; }
/* Fix excess padding/spaces in sections */
.space-top-3    { padding-top: 30px !important; }
.pb-20          { padding-bottom: 16px !important; }
.pt-60          { padding-top: 36px !important; }
.pb-70          { padding-bottom: 40px !important; }
.pt-15          { padding-top: 10px !important; }
.mb-25          { margin-bottom: 16px !important; }

/* ── SIDEBOX ─────────────────────────────────────────────────── */
.vs-sidebox {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important;
  border: 1px solid var(--bgold) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 28px rgba(0,0,0,.6) !important;
  position: relative;
  overflow: hidden;
}
/* gold top edge */
.vs-sidebox::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .5;
}
.sidebox-title {
  font-family: var(--fh) !important;
  font-size: 11px !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: var(--gold) !important;
  padding: 10px 16px 10px 18px !important;
  background: linear-gradient(90deg, rgba(212,168,67,.1), transparent) !important;
  border-bottom: 1px solid var(--bgold) !important;
  margin: 0 !important;
  position: relative !important;
}
.sidebox-title::before {
  content: '' !important; position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(to bottom, var(--gold-l), var(--gold-d)) !important;
}

/* ── CAT LIST (updates sidebar) ──────────────────────────────── */
.vs-cat-list1 { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vs-cat-list1 li {
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(212,168,67,.06) !important;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .16s, padding-left .16s;
}
.vs-cat-list1 li:hover { background: var(--bgold-s) !important; padding-left: 20px !important; }
.vs-cat-list1 li a { font-size: 11px !important; color: var(--txt) !important; transition: color .2s; }
.vs-cat-list1 li a:hover { color: var(--gold-l) !important; }
/* Top-3 rank colours */
.vs-cat-list1 li:first-child  { border-left: 2px solid var(--gold) !important; background: rgba(212,168,67,.04) !important; }
.vs-cat-list1 li:first-child a { color: var(--gold) !important; }
.vs-cat-list1 li:nth-child(2)  { border-left: 2px solid #aaaaB5 !important; }
.vs-cat-list1 li:nth-child(3)  { border-left: 2px solid #b87333 !important; }
.cat-number {
  background: linear-gradient(90deg, var(--gold-d), var(--gold)) !important;
  color: var(--onyx) !important; font-size: 9px !important; font-weight: 700 !important;
  padding: 2px 8px !important; letter-spacing: .05em;
}

/* ── SECTION TITLES ──────────────────────────────────────────── */
.sub-title3 {
  font-family: var(--fh) !important; font-size: 10px !important;
  letter-spacing: .24em !important; text-transform: uppercase !important;
  color: var(--gold) !important; display: block; margin-bottom: 6px;
}
.sec-title2 {
  font-family: var(--fh) !important; color: var(--txth) !important;
  text-shadow: 0 0 28px rgba(212,168,67,.25) !important;
  position: relative !important; display: inline-block !important;
  padding-bottom: 8px !important;
}
.sec-title2::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 40%; height: 2px;
  background: linear-gradient(90deg, var(--fire-b), transparent);
}

/* ── BLOG / NEWS ─────────────────────────────────────────────── */
.blog-meta, .blog-content {
  background: var(--panel) !important;
  border: 1px solid var(--bgold) !important;
  border-radius: 0 !important;
}
.blog-meta   { border-bottom: none !important; }
.blog-content{ border-top:    none !important; }
.blog-meta.has-border { border-bottom: none !important; }
.blog-title a {
  font-family: var(--fh) !important; color: var(--txth) !important;
  font-size: 13px !important; transition: color .2s;
}
.blog-title a:hover { color: var(--gold-l) !important; }
.cat-list a, .cat-list i { color: #e87020 !important; font-size: 10px !important; }

/* ── GUILD EVENTS / VIDEO AREA ───────────────────────────────── */
.vs-events > div,
.vs-video-area .bg-light-dark,
.bg-light-dark > .w-100 {
  background: var(--panel) !important;
  border: 1px solid var(--bgold) !important;
}
.vs-events { transition: border-color .25s, box-shadow .25s; }
.vs-events:hover { border-color: var(--gold) !important; box-shadow: 0 0 18px rgba(212,168,67,.22) !important; }
[data-bg-src] { background-color: var(--onyx) !important; }

/* ── RANKING TABLE ───────────────────────────────────────────── */
.ranking-1 { background: var(--panel) !important; border: 1px solid var(--bgold) !important; }
.row-ranking {
  display: flex !important; border-bottom: 1px solid rgba(212,168,67,.05) !important;
  transition: background .15s;
}
.row-ranking:hover { background: var(--bgold-s) !important; }
.cell-ranking {
  padding: 8px 10px !important; font-size: 11px !important;
  color: var(--txt) !important; border: none !important;
}
.cell-ranking:nth-child(1) {
  min-width: 52px !important; font-family: var(--fh) !important;
  font-size: 12px !important; color: var(--gold) !important;
  border-right: 1px solid rgba(212,168,67,.08) !important;
}
.cell-ranking:nth-child(2) { flex: 1 !important; }
.cell-ranking a { color: var(--txth) !important; }
.cell-ranking a:hover { color: var(--gold-l) !important; }
.row-ranking:nth-child(1) .cell-ranking:nth-child(1) { color: var(--gold-l) !important; text-shadow: 0 0 8px rgba(240,201,106,.5); }
.row-ranking:nth-child(2) .cell-ranking:nth-child(1) { color: #c0c0c8 !important; }
.row-ranking:nth-child(3) .cell-ranking:nth-child(1) { color: #cd7f32 !important; }

/* ── TABLES ──────────────────────────────────────────────────── */
table thead tr { background: linear-gradient(90deg, rgba(70,44,6,.8), rgba(35,22,3,.6)) !important; }
table thead th {
  font-family: var(--fh) !important; font-size: 10px !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--gold) !important; border: none !important; padding: 10px 14px !important;
}
table tbody tr { background: rgba(14,9,3,.6); border-bottom: 1px solid rgba(212,168,67,.04); transition: background .15s; }
table tbody tr:nth-child(even) { background: rgba(20,13,4,.6); }
table tbody tr:hover { background: var(--bgold-s) !important; }
table td { border: none !important; padding: 8px 14px !important; color: var(--txt) !important; font-size: 11px !important; }

/* ── FORM INPUTS ─────────────────────────────────────────────── */
.form-control,
input[type="text"]:not(.form-login),
input[type="email"],
input[type="password"]:not(.form-login),
textarea, select {
  background: rgba(7,5,1,.92) !important;
  border: 1px solid rgba(212,168,67,.2) !important;
  color: var(--txth) !important; font-family: var(--fb) !important;
}
.form-control:focus, input:focus {
  border-color: var(--gold) !important; box-shadow: 0 0 8px rgba(212,168,67,.2) !important;
}

/* ── PLAY BTN ────────────────────────────────────────────────── */
.play-btn { background: rgba(212,168,67,.12) !important; border-color: var(--bgold) !important; color: var(--gold) !important; }
.play-btn:hover { background: rgba(212,168,67,.26) !important; box-shadow: var(--glow-g) !important; }

/* ── DIVIDERS ────────────────────────────────────────────────── */
hr { border: none !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--bgold), transparent) !important; margin: 16px 0 !important; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer-wrapper, footer {
  background: var(--onyx) !important;
  border-top: 1px solid var(--bgold) !important;
  position: relative;
}
.footer-wrapper::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-l), transparent);
  opacity: .35;
}
.widget_title {
  font-family: var(--fh) !important; font-size: 11px !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--gold) !important; border-bottom: 1px solid var(--bgold) !important;
  padding-bottom: 8px !important;
}
.footer-widget ul li a { color: var(--txtd) !important; font-size: 12px !important; transition: color .2s, padding-left .2s; }
.footer-widget ul li a:hover { color: var(--gold) !important; padding-left: 4px !important; }
.footer-copyright { background: rgba(4,2,0,.98) !important; border-top: 1px solid rgba(212,168,67,.06) !important; }
.footer-copyright, .footer-copyright a { color: var(--txtd) !important; font-size: 11px !important; }
.social-links li a {
  width: 34px !important; height: 34px !important;
  border: 1px solid var(--bgold) !important; border-radius: 0 !important;
  color: var(--txtd) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: all .22s !important;
}
.social-links li a:hover { border-color: var(--gold) !important; color: var(--gold) !important; box-shadow: var(--glow-g) !important; }

/* ── SCROLL TO TOP ───────────────────────────────────────────── */
.scrollToTop {
  background: linear-gradient(135deg, var(--gold-d), var(--gold)) !important;
  border: 1px solid rgba(212,168,67,.4) !important; border-radius: 0 !important;
  color: var(--onyx) !important; box-shadow: var(--glow-g) !important;
}

/* ── MEMBERS ONLINE LIST (sidebar) ──────────────────────────── */
/* The existing ASP.NET Members Online repeater gets gold styling */
.vs-cat-list1.members-list li::before { content: '● '; color: #4cae4c; font-size: 8px; }

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes gold-pulse {
  0%,100% { box-shadow: 0 4px 28px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 20px rgba(212,168,67,.3); }
}
.vs-sidebox { animation: gold-pulse 5s ease-in-out infinite; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  .vs-hero-wrapper::before { display: none; }
  .space-top-3 { padding-top: 20px !important; }
}
@media (max-width: 768px) {
  .sec-title2 { font-size: 20px !important; }
  .sidebox-title { font-size: 10px !important; }
}