@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Poppins:wght@400;500;600;700;800;900&display=swap");

/* ── RESET / BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:       #0a0a0a;
  --panel:    rgba(10,10,15,.82);
  --border:   rgba(255,255,255,.08);
  --gold:     #c9a84c;
  --gold2:    #f0d080;
  --teal:     #1de9b6;
  --text:     #e8e8e8;
  --muted:    #9aa0b0;
  --red:      #e53935;
}

.wyd-body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── NAVBAR ── */
.wyd-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(5,5,8,.96);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.wyd-nav-brand { display: flex; align-items: center; }
.wyd-nav-logo-img { height: 34px; }
.wyd-nav-links {
  display: flex;
  list-style: none;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.wyd-nav-links a {
  color: #c8cdd8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 6px 16px;
  border-radius: 4px;
  transition: color .2s;
}
.wyd-nav-links a:hover,
.wyd-nav-links a.active { color: #fff; }
.wyd-nav-right { display: flex; align-items: center; gap: 12px; }
.wyd-btn-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  background: transparent;
  padding: 7px 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  transition: all .2s;
}
.wyd-btn-area:hover { background: rgba(29,233,182,.12); color: var(--teal); }

/* ── HERO ── */
.wyd-hero {
  position: relative;
  min-height: 100vh;
  padding-top: 52px;
  display: flex;
  align-items: stretch;
  background:
    url("../img/bg/hero-bg.jpg") center/cover no-repeat;
  overflow: hidden;
}
/* dark overlay */
.wyd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(5,5,8,.88) 0%,
    rgba(5,5,8,.55) 45%,
    rgba(5,5,8,.20) 70%,
    rgba(5,5,8,.55) 100%
  );
  z-index: 0;
}

/* ── LEFT PANEL ── */
.wyd-hero-left {
  position: relative;
  z-index: 2;
  width: 420px;
  min-width: 340px;
  padding: 40px 32px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wyd-hero-logo-wrap { margin-bottom: 4px; }
.wyd-hero-logo { width: 200px; filter: drop-shadow(0 0 18px rgba(201,168,76,.35)); }

/* online indicator */
.wyd-online {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #b0ffb0;
}
.wyd-online-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4caf50;
  box-shadow: 0 0 6px #4caf50;
  flex-shrink: 0;
}

/* ── NEWS BOARD ── */
.wyd-board {
  background: rgba(5,5,10,.75);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.wyd-board-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.3);
}
.wyd-board-list { display: flex; flex-direction: column; }
.wyd-board-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  text-decoration: none;
  transition: background .2s;
}
.wyd-board-item:last-child { border-bottom: none; }
.wyd-board-item:hover { background: rgba(255,255,255,.04); }
.wyd-board-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  background: rgba(201,168,76,.15);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 5px;
  padding: 4px 6px;
  flex-shrink: 0;
}
.wyd-board-day {
  font-size: 16px;
  font-weight: 800;
  color: var(--gold2);
  line-height: 1;
}
.wyd-board-month {
  font-size: 9px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wyd-board-item-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.wyd-board-item-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── DOWNLOAD BUTTON ── */
.wyd-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 13px 0;
  background: transparent;
  border: 2px solid var(--teal);
  color: var(--teal);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  border-radius: 6px;
  text-decoration: none;
  transition: all .25s;
  margin-top: 8px;
}
.wyd-btn-download:hover {
  background: rgba(29,233,182,.12);
  box-shadow: 0 0 20px rgba(29,233,182,.25);
  color: var(--teal);
}

/* ── RIGHT SIDEBAR ── */
.wyd-sidebar {
  position: absolute;
  right: 0;
  top: 52px;
  bottom: 0;
  z-index: 2;
  width: 160px;
  display: flex;
  flex-direction: column;
  background: rgba(5,5,10,.78);
  border-left: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.wyd-sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none;
  color: #9aa0b0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-align: center;
  transition: all .2s;
}
.wyd-sidebar-item:hover { color: #fff; background: rgba(255,255,255,.04); }
.wyd-sidebar-active { color: #fff !important; background: rgba(255,255,255,.06); }
.wyd-sidebar-highlight {
  color: var(--text) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.4;
  background: rgba(201,168,76,.08);
  border-bottom: 1px solid rgba(201,168,76,.15) !important;
}
.wyd-sidebar-icon {
  font-size: 22px;
  color: var(--teal);
}
.wyd-sidebar-highlight .wyd-sidebar-icon { color: var(--gold); }

/* ── OTHER PAGES: legacy helpers ── */
.vex-btn-ghost {
  background: transparent;
  border: 1px solid rgba(139,92,246,.4);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 22px;
  border-radius: 8px;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.vex-btn-ghost:hover { background: rgba(139,92,246,.15); color: #fff; }
.vex-btn-primary {
  background: linear-gradient(135deg,#7c3aed,#6d28d9);
  border: none; color: #fff;
  padding: 14px 28px; border-radius: 10px;
  font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: all .3s;
}
.vex-btn-primary:hover { transform: translateY(-2px); color: #fff; }

/* News page */
:root { --vex-bg:#080808; --vex-panel:#121212; --vex-accent:#8b5cf6; --vex-accent-2:#c084fc; --vex-text:#f3f4f6; }
.vex-section-head { padding: 110px 0 24px; background: linear-gradient(180deg,rgba(9,12,20,.96),rgba(9,12,20,.98)); }
.vex-section-head .container, .vex-news-list .container { max-width: 1100px; }
.vex-gradient-title { font-family:"Poppins",sans-serif; font-weight:900; font-size:clamp(38px,6vw,64px); background:linear-gradient(90deg,#8b5cf6,#c084fc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 8px; }
.vex-section-sub { color:#c7cde0; opacity:.9; }
.vex-news-list { padding: 24px 0 80px; }
.vex-empty { display:flex; align-items:center; justify-content:center; text-align:center; min-height:86px; max-width:960px; margin:24px auto 0; background:#141a29; border:1px solid rgba(123,97,255,.22); border-radius:16px; color:#ff6b6b; font-weight:800; padding:22px; }
.vex-news-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.vex-news-card { grid-column:span 4; background:#121212; border:1px solid rgba(123,97,255,.25); border-radius:14px; overflow:hidden; transition:.2s; }
.vex-news-card:hover { border-color:#8b5cf6; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.vex-news-card img { width:100%; height:180px; object-fit:cover; }
.vex-news-body { padding:18px; }
.vex-news-title { font-family:"Poppins",sans-serif; font-weight:800; font-size:18px; color:#f3f4f6; }
.vex-news-meta { color:#c084fc; font-weight:700; font-size:13px; margin-bottom:6px; }
.vex-news-excerpt { color:#b8c2cf; }
.vex-news-actions { margin-top:12px; }

/* Navbar for other pages */
.zelda-nav { background:rgba(5,5,8,.96); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06); }
.zelda-nav .navbar-nav .nav-link { font-family:"Poppins",sans-serif; font-weight:500; font-size:14px; color:#c8cdd8; padding:12px 16px !important; transition:color .2s; }
.zelda-nav .navbar-nav .nav-link:hover, .zelda-nav .navbar-nav .nav-link.active { color:#fff; }
.zelda-nav .navbar-brand img { height:38px !important; }
.zelda-responsive-nav { background:rgba(5,5,8,.96); border-bottom:1px solid rgba(255,255,255,.06); }
.vex-nav-actions .vex-btn-ghost { border-color:var(--teal,#1de9b6); color:var(--teal,#1de9b6); }
.vex-nav-actions .vex-btn-ghost:hover { background:rgba(29,233,182,.1); }

/* Responsive */
@media(max-width:768px) {
  .wyd-hero-left { width: 100%; min-width: unset; padding: 24px 16px; }
  .wyd-sidebar { position: relative; width: 100%; flex-direction: row; flex-wrap: wrap; top: auto; right: auto; }
  .wyd-sidebar-item { flex: 1 1 80px; }
}