/* Page styles for index.php */

/* ================================================================
   ROOT — DARK ALCHEMY PALETTE
================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:    #0B0B0C;
  --deep:   #0E0E10;
  --abyss:  #111214;
  --void:   #141416;

  --g0: #fff6d0;
  --g1: #D09A55;
  --g2: #D09A55;
  --g3: #D09A55;
  --g4: #B67A35;
  --g5: #D09A55;
  --gold-grad: linear-gradient(135deg,#fff6d0 0%,#D09A55 30%,#D09A55 60%,#D09A55 100%);

  --ruby:   #B67A35;
  --ember:  #D09A55;
  --jade:   #27ae60;
  --sapph:  #D09A55;
  --ameth:  #D09A55;

  --t1: #f0e8d0;
  --t2: #D09A55;
  --t3: #B67A35;
  --t4: #655F59;

  --b1: rgba(208,154,85,.10);
  --b2: rgba(208,154,85,.22);
  --b3: rgba(208,154,85,.40);

  --card: rgba(16,16,18,.94);
  --card2: rgba(20,20,22,.96);

  --shadow-gold: 0 0 40px rgba(208,154,85,.12);
  --shadow-deep: 0 24px 80px rgba(0,0,0,.6);
  --ease: cubic-bezier(.23,1,.32,1);
  --nav-h: 72px;
}

html{scroll-behavior:smooth}
body{
  font-family:'Cormorant Garamond',Georgia,serif;
  background:var(--ink);
  color:var(--t1);
  overflow-x:hidden;
  min-height:100vh;
}

a{text-decoration:none;color:inherit}

/* noise overlay */
body::before{
  content:'';
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:.4;
}

/* ================================================================
   NAVBAR — ORNATE PREMIUM
================================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;
  padding:0 48px;
  background:rgba(112,69,31,.85);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--b1);
  transition:all .4s var(--ease);
}
.navbar.scrolled{
  background:rgba(112,69,31,.97);
  border-bottom-color:var(--b2);
  box-shadow:0 4px 40px rgba(0,0,0,.5),0 1px 0 rgba(208,154,85,.08);
}

/* top accent line */
.navbar::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--g3) 20%,var(--g1) 50%,var(--g3) 80%,transparent 100%);
  opacity:.55;
}

/* Logo */
.nav-logo{
  display:flex;align-items:center;gap:14px;
  margin-right:56px;flex-shrink:0;
}
.nav-logo-emblem{
  width:44px;height:44px;position:relative;
}
.nav-logo-emblem svg{width:100%;height:100%}
.nav-logo-text{
  font-family:'Cinzel Decorative',serif;
  font-size:18px;font-weight:900;letter-spacing:2px;
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.nav-logo-sub{
  font-family:'Cinzel',serif;
  font-size:8px;letter-spacing:4px;color:var(--t3);
  text-transform:uppercase;margin-top:3px;
}

/* Nav links */
.nav-links{
  display:flex;align-items:center;gap:4px;flex:1;
}

.nav-item{position:relative}

.nav-link{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  font-family:'Cinzel',serif;
  font-size:11px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--t2);
  border-radius:8px;
  transition:all .25s var(--ease);
  position:relative;
  white-space:nowrap;
}
.nav-link svg{width:16px;height:16px;opacity:.6;transition:all .25s;flex-shrink:0}
.nav-link:hover{color:var(--g1);background:rgba(208,154,85,.06)}
.nav-link:hover svg{opacity:1;filter:drop-shadow(0 0 6px rgba(208,154,85,.5))}
.nav-link.active{color:var(--g2)}
.nav-link.active::after{
  content:'';
  position:absolute;bottom:-2px;left:16px;right:16px;height:2px;
  background:linear-gradient(90deg,transparent,var(--g2),transparent);
  border-radius:2px;
}

/* Dropdown */
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown{
  position:absolute;top:calc(100% + 16px);left:0;
  min-width:220px;
  background:rgba(112,69,31,.98);
  border:1px solid var(--b2);border-radius:16px;
  padding:8px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:all .3s var(--ease);
  box-shadow:var(--shadow-deep);
  backdrop-filter:blur(20px);
}
.nav-dropdown::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--g2),transparent);
  border-radius:16px 16px 0 0;
}
.dd-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;
  font-family:'Cinzel',serif;font-size:11px;font-weight:600;
  letter-spacing:1px;color:var(--t2);
  transition:all .2s;
}
.dd-item:hover{background:rgba(208,154,85,.08);color:var(--g1)}
.dd-item svg{width:18px;height:18px;opacity:.5;flex-shrink:0}
.dd-item:hover svg{opacity:1}
.dd-sep{height:1px;background:var(--b1);margin:6px 0}

/* Online pill in nav */
.nav-online{
  display:flex;align-items:center;gap:8px;
  padding:6px 16px;
  background:rgba(39,174,96,.08);
  border:1px solid rgba(39,174,96,.2);
  border-radius:40px;margin-right:16px;
  font-family:'Cinzel',serif;font-size:10px;font-weight:700;
  letter-spacing:1.5px;color:#4ade80;
  white-space:nowrap;
}
.nav-online-dot{
  width:7px;height:7px;background:#4ade80;border-radius:50%;
  box-shadow:0 0 10px #4ade80;animation:onlinePulse 2s infinite;
}

/* CTA buttons */
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.nav-btn{
  font-family:'Cinzel',serif;
  font-size:10px;font-weight:700;letter-spacing:2px;
  padding:9px 20px;border-radius:8px;
  transition:all .25s var(--ease);
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.nav-btn-outline{
  color:var(--g2);
  border:1px solid var(--b2);
  background:rgba(208,154,85,.03);
}
.nav-btn-outline:hover{
  background:rgba(208,154,85,.1);
  border-color:var(--g2);
  box-shadow:0 0 20px rgba(208,154,85,.15);
}
.nav-btn-primary{
  background:linear-gradient(135deg,var(--g1),var(--g3));
  color:#0B0B0C;
  border:none;
  box-shadow:0 4px 20px rgba(208,154,85,.25),inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(208,154,85,.35);
}
.nav-btn svg{width:14px;height:14px}

/* Hamburger */
.nav-hamburger{
  display:none;
  flex-direction:column;gap:5px;cursor:pointer;
  padding:8px;margin-left:auto;
}
.nav-hamburger span{
  width:24px;height:2px;background:var(--g2);border-radius:2px;
  transition:all .3s;
}

/* Mobile nav */
.nav-mobile{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;bottom:0;
  background:rgba(112,69,31,.98);backdrop-filter:blur(24px);
  z-index:999;
  flex-direction:column;padding:32px 24px;gap:8px;
  overflow-y:auto;
}
.nav-mobile.open{display:flex}
.nm-link{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:12px;
  font-family:'Cinzel',serif;font-size:13px;font-weight:600;
  letter-spacing:1.5px;color:var(--t2);
  border:1px solid transparent;
  transition:all .2s;
}
.nm-link:hover,.nm-link.active{
  background:rgba(208,154,85,.06);
  border-color:var(--b1);color:var(--g1);
}
.nm-link svg{width:20px;height:20px;opacity:.5}
.nm-link:hover svg{opacity:1}
.nm-sep{height:1px;background:var(--b1);margin:8px 0}

/* ================================================================
   HERO — CINEMATIC
================================================================ */
.hero{
  margin-top: calc(var(--off) - 150px);
  height:calc(100vh - var(--nav-h));
  min-height:660px;max-height:980px;
  position:relative;overflow:hidden;
}
.hslider{height:100%;position:relative}
.hslide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity 1.2s var(--ease),visibility 1.2s;
}
.hslide.active{opacity:1;visibility:visible}
.hbg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.08);transition:transform 14s ease;
}
.hslide.active .hbg{transform:scale(1)}
.hbg-default{
  background:
    radial-gradient(ellipse 120% 60% at 50% -5%,rgba(208,154,85,.14) 0%,transparent 55%),
    radial-gradient(ellipse 70% 90% at 5% 50%,rgba(182,122,53,.22) 0%,transparent 58%),
    radial-gradient(ellipse 70% 90% at 95% 50%,rgba(182,122,53,.18) 0%,transparent 58%),
    linear-gradient(180deg,#0B0B0C 0%,#0E0E10 48%,#0B0B0C 100%);
}
.hgrid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(208,154,85,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(208,154,85,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 25%,transparent 80%);
}
.hatmos{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,12,.34) 0%,rgba(11,11,12,.10) 40%,rgba(11,11,12,.08) 60%,rgba(11,11,12,.68) 100%);
}
.hvig{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 110% 110% at 50% 50%,transparent 30%,rgba(5,5,6,.70) 100%);
}

.hcontent{
  position:relative;z-index:5;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:32px 20px 78px;
  max-width:940px;margin:0 auto;
}
.heyebrow{
  display:inline-flex;align-items:center;gap:14px;
  padding:8px 22px;margin-bottom:22px;
  background:rgba(0,0,0,.5);
  border:1px solid var(--b2);border-radius:60px;
  backdrop-filter:blur(12px);
  font-family:'Cinzel',serif;
  font-size:9px;letter-spacing:4px;text-transform:uppercase;
  color:var(--g2);font-weight:700;
  animation:fadeUp .8s ease;
}
.heyebrow-dot{width:6px;height:6px;background:#4ade80;border-radius:50%;box-shadow:0 0 12px #4ade80;animation:onlinePulse 2s infinite}

.htitle{
  font-family:'Cinzel',serif;
  font-size:clamp(32px,6.2vw,76px);
  font-weight:900;line-height:1.04;
  margin-bottom:20px;letter-spacing:1.5px;
  animation:fadeUp .8s .15s ease both;
}
.htitle-line1{display:block;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.8)}
.htitle-gold{
  display:block;
  background:var(--gold-grad);background-size:250% 250%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gShift 5s ease infinite;
  filter:drop-shadow(0 0 32px rgba(208,154,85,.5));
}

.hdesc{
  font-size:clamp(14px,1.25vw,18px);
  color:rgba(240,232,208,.72);
  max-width:580px;margin-bottom:30px;
  line-height:1.75;font-style:italic;
  animation:fadeUp .8s .3s ease both;
}

.hstats{
  display:grid;
  grid-template-columns:repeat(4,minmax(96px,1fr));
  width:min(100%,680px);
  max-width:calc(100vw - 32px);
  gap:0;margin:0 auto 34px;
  min-height:84px;
  background:rgba(0,0,0,.55);
  border:1px solid var(--b1);border-radius:70px;
  backdrop-filter:blur(16px);
  overflow:visible;
  animation:fadeUp .8s .45s ease both;
}
.hstat{
  min-width:0;
  min-height:82px;
  padding:12px 10px 14px;
  text-align:center;
  border-right:1px solid var(--b1);transition:all .3s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
}
.hstat:last-child{border-right:none}
.hstat:hover{background:rgba(208,154,85,.05)}
.hstat-val{
  font-family:'Cinzel',serif;font-size:clamp(20px,1.95vw,32px);font-weight:900;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;line-height:1;white-space:nowrap;
  margin:0;
}
.hstat-lbl{
  font-family:'Cinzel',serif;
  font-size:clamp(8px,.65vw,9px);
  letter-spacing:clamp(1px,.12vw,1.6px);
  text-transform:uppercase;color:rgba(240,232,208,.78);
  margin:0;display:block;white-space:nowrap;line-height:1.25;
  text-shadow:0 1px 8px rgba(0,0,0,.75);
}

.hbtns{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  animation:fadeUp .8s .6s ease both;
}
.btn-primary{
  font-family:'Cinzel',serif;
  font-size:11px;font-weight:700;letter-spacing:2px;
  padding:14px 36px;border-radius:44px;
  background:linear-gradient(135deg,var(--g0),var(--g1),var(--g2));
  color:#0B0B0C;
  box-shadow:0 8px 32px rgba(208,154,85,.3),inset 0 2px 0 rgba(255,255,255,.35);
  display:inline-flex;align-items:center;gap:10px;
  transition:all .3s var(--ease);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 44px rgba(208,154,85,.45)}
.btn-secondary{
  font-family:'Cinzel',serif;
  font-size:10px;font-weight:700;letter-spacing:1.8px;
  padding:14px 30px;border-radius:44px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--b2);color:var(--g2);
  backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:10px;
  transition:all .3s var(--ease);
}
.btn-secondary:hover{background:rgba(208,154,85,.1);border-color:var(--g2);transform:translateY(-2px);color:var(--g1)}

.hdots{
  position:absolute;bottom:36px;left:0;right:0;
  display:flex;justify-content:center;gap:10px;z-index:6;
}
.hdot{height:4px;border-radius:4px;cursor:pointer;transition:all .4s var(--ease);background:rgba(255,255,255,.2);width:24px}
.hdot.active{width:56px;background:linear-gradient(90deg,var(--g2),var(--g1));box-shadow:0 0 14px rgba(208,154,85,.6)}
.harrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .3s;z-index:6;backdrop-filter:blur(12px);
}
.harrow:hover{background:rgba(208,154,85,.15);border-color:var(--g2)}
.harrow svg{width:20px;height:20px;color:var(--g2)}
.harrow-l{left:28px}
.harrow-r{right:28px}

/* ================================================================
   MAIN LAYOUT
================================================================ */
.pw{max-width:1440px;margin:0 auto;padding:80px 48px 0;position:relative;z-index:1}
.section{margin-bottom:110px}
.section:last-child{margin-bottom:0}

/* Section Header */
.sh{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:52px;flex-wrap:wrap;gap:20px;
  padding-bottom:24px;
  border-bottom:1px solid var(--b1);
  position:relative;
}
.sh::after{
  content:'';
  position:absolute;bottom:-1px;left:0;width:120px;height:1px;
  background:linear-gradient(90deg,var(--g2),transparent);
}
.sh-left{display:flex;align-items:center;gap:22px}
.sh-icon{
  width:60px;height:60px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(208,154,85,.1),rgba(208,154,85,.02));
  border:1px solid var(--b2);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.sh-icon svg{width:30px;height:30px;color:var(--g2)}
.sh-title{
  font-family:'Cinzel',serif;
  font-size:clamp(22px,2.8vw,36px);font-weight:800;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:1.5px;margin-bottom:6px;
}
.sh-sub{font-family:'Cinzel',serif;font-size:11px;color:var(--t3);letter-spacing:3px;text-transform:uppercase}
.sh-link{
  display:flex;align-items:center;gap:8px;
  font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--g2);padding:10px 22px;
  border:1px solid var(--b2);border-radius:40px;
  background:rgba(208,154,85,.03);
  transition:all .3s var(--ease);
}
.sh-link:hover{gap:14px;color:var(--g1);background:rgba(208,154,85,.08);border-color:var(--g2);box-shadow:var(--shadow-gold)}
.sh-link svg{width:16px;height:16px}

/* Divider */
.fdiv{
  height:1px;margin:0 0 110px;
  background:linear-gradient(90deg,transparent,var(--g3) 15%,var(--g1) 50%,var(--g3) 85%,transparent);
  opacity:.35;position:relative;
}
.fdiv::before{
  content:'';
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.fdiv::after{
  content:'⚜';
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:16px;color:var(--g3);background:var(--ink);padding:0 20px;
  text-shadow:0 0 20px rgba(208,154,85,.6);
}

/* ================================================================
   STATS STRIP
================================================================ */
.stats-strip{
  display:grid;grid-template-columns:repeat(6,1fr);
  background:linear-gradient(135deg,rgba(112,69,31,.96),rgba(112,69,31,.98));
  border:1px solid var(--b1);border-radius:100px;
  overflow:hidden;margin:0 0 90px;
  box-shadow:0 8px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(8px);
  position:relative;
}
.stats-strip::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--g2) 30%,var(--g1) 50%,var(--g2) 70%,transparent);
  opacity:.4;
}
.sc{
  padding:22px 12px;text-align:center;
  position:relative;transition:all .3s;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.sc:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:50%;
  background:linear-gradient(180deg,transparent,var(--b2),transparent);
}
.sc:hover{background:rgba(208,154,85,.04);transform:translateY(-3px)}
.sc-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:all .3s}
.sc-icon svg{width:24px;height:24px;color:var(--g3);transition:all .3s}
.sc:hover .sc-icon svg{color:var(--g1);filter:drop-shadow(0 0 8px rgba(208,154,85,.5));transform:scale(1.1)}
.sc-val{
  font-family:'Cinzel',serif;font-size:26px;font-weight:900;line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-flex;align-items:baseline;gap:3px;
}
.sc-val.live{
  background:linear-gradient(135deg,#6effa0,#4ade80);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(74,222,128,.35));
}
.sc-small{font-size:13px;font-weight:700;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-small.live{background:linear-gradient(135deg,#6effa0,#4ade80);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-lbl{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--t3);font-weight:700}

/* ================================================================
   WORLD CHRONICLE
================================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.gc{
  background:var(--card);
  border:1px solid var(--b1);border-radius:24px;overflow:hidden;
  transition:all .4s var(--ease);position:relative;
  backdrop-filter:blur(16px);
}
.gc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--g2),transparent);
  opacity:0;transition:opacity .4s;
}
.gc:hover{border-color:var(--b2);transform:translateY(-8px);box-shadow:var(--shadow-deep),var(--shadow-gold)}
.gc:hover::before{opacity:.7}

.gc-head{
  padding:22px 26px;
  background:linear-gradient(135deg,rgba(208,154,85,.055),rgba(208,154,85,.01),transparent);
  border-bottom:1px solid var(--b1);
  display:flex;align-items:center;justify-content:space-between;
}
.gc-tg{display:flex;align-items:center;gap:14px}
.gc-ico{
  width:50px;height:50px;
  background:linear-gradient(135deg,rgba(208,154,85,.1),rgba(208,154,85,.02));
  border:1px solid var(--b2);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.gc-ico svg{width:26px;height:26px;color:var(--g2)}
.gc-label{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--g2);letter-spacing:1.5px}
.gc-meta{font-family:'Cinzel',serif;font-size:10px;color:var(--t3);margin-top:3px;letter-spacing:.5px}
.gc-badge{
  font-family:'Cinzel',serif;font-size:9px;padding:5px 14px;letter-spacing:1.5px;
  background:rgba(208,154,85,.07);border:1px solid var(--b2);
  border-radius:40px;color:var(--g2);white-space:nowrap;font-weight:700;
}
.gc-badge.live-badge{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.3);color:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.2)}
.gc-body{padding:24px 26px}

/* News */
.news-feed{max-height:420px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--g3) transparent}
.news-feed::-webkit-scrollbar{width:3px}
.news-feed::-webkit-scrollbar-thumb{background:var(--g3);border-radius:3px}
.ni{
  padding:16px 0;border-bottom:1px solid rgba(208,154,85,.06);
  cursor:pointer;transition:all .25s;
}
.ni:last-child{border-bottom:none;padding-bottom:0}
.ni:hover{padding-left:10px}
.ni-tag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Cinzel',serif;font-size:8px;letter-spacing:2.5px;font-weight:900;
  padding:3px 10px;background:rgba(208,154,85,.08);border:1px solid rgba(208,154,85,.2);
  border-radius:4px;color:var(--g2);margin-bottom:8px;text-transform:uppercase;
}
.ni-date{font-family:'Cinzel',serif;font-size:9px;color:var(--t4);display:block;margin-bottom:5px;letter-spacing:.5px}
.ni-title{font-size:14px;font-weight:600;line-height:1.5;color:var(--t1);transition:color .2s}
.ni:hover .ni-title{color:var(--g2)}

/* Updates */
.uplist{display:flex;flex-direction:column;gap:16px}
.uprow{display:flex;gap:16px;align-items:flex-start}
.up-tl{display:flex;flex-direction:column;align-items:center;padding-top:5px;flex-shrink:0}
.up-dot{
  width:10px;height:10px;border-radius:50%;background:var(--g2);
  box-shadow:0 0 10px rgba(208,154,85,.6);flex-shrink:0;
}
.up-line{flex:1;width:1px;background:linear-gradient(180deg,rgba(208,154,85,.3),transparent);min-height:22px;margin-top:5px}
.uprow:last-child .up-line{display:none}
.up-info{flex:1}
.up-date{font-family:'Cinzel',serif;font-size:9px;color:var(--g2);letter-spacing:1.5px;font-weight:700;text-transform:uppercase;display:block;margin-bottom:4px}
.up-text{font-size:13.5px;line-height:1.6;color:var(--t2)}

/* Events */
.evlist{display:flex;flex-direction:column;gap:10px}
.evrow{
  display:flex;gap:16px;align-items:center;
  padding:14px 16px;border-radius:16px;
  border:1px solid transparent;transition:all .25s;cursor:default;
}
.evrow:hover{background:rgba(208,154,85,.04);border-color:var(--b1);transform:translateX(6px)}
.ev-ico{
  width:54px;height:54px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(208,154,85,.1),rgba(208,154,85,.02));
  border:1px solid var(--b2);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.ev-ico svg{width:28px;height:28px;color:var(--g2)}
.ev-info{flex:1}
.ev-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;margin-bottom:4px;color:var(--t1)}
.ev-time{font-family:'Cinzel',serif;font-size:10px;color:var(--g2);margin-bottom:6px;letter-spacing:.5px}
.ev-live{display:inline-flex;align-items:center;gap:7px;font-family:'Cinzel',serif;font-size:9px;color:#4ade80;text-transform:uppercase;letter-spacing:1.5px;font-weight:800}
.ev-live-d{width:7px;height:7px;background:#4ade80;border-radius:50%;box-shadow:0 0 10px #4ade80;animation:onlinePulse 1.6s infinite}

.emptybox{
  padding:48px 20px;text-align:center;color:var(--t3);
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.5px;
  border:1px dashed var(--b1);border-radius:16px;
}
.emptybox svg{width:48px;height:48px;color:var(--t4);margin:0 auto 16px;display:block}

/* ================================================================
   HALL OF GLORY
================================================================ */
.champions{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;margin-bottom:28px}
.champ-card{
  background:var(--card);border:1px solid var(--b1);border-radius:24px;
  padding:32px 20px;text-align:center;
  transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.champ-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.champ-1::before{background:linear-gradient(90deg,transparent,#D09A55,transparent)}
.champ-2::before{background:linear-gradient(90deg,transparent,#c0c0c0,transparent)}
.champ-3::before{background:linear-gradient(90deg,transparent,#70451F,transparent)}
.champ-card:hover{transform:translateY(-6px);border-color:var(--b2);box-shadow:var(--shadow-deep)}
.champ-crown{font-size:36px;margin-bottom:12px;display:block;animation:float 3s ease infinite}
.champ-pos{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;color:var(--t3);text-transform:uppercase;margin-bottom:10px}
.champ-name{font-family:'Cinzel',serif;font-size:18px;font-weight:800;color:var(--g2);margin-bottom:8px}
.champ-lvl{
  font-family:'Cinzel',serif;font-size:36px;font-weight:900;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:6px;
}
.champ-lbl{font-family:'Cinzel',serif;font-size:9px;color:var(--t3);letter-spacing:2px}

/* Rankings table */
.glory-card{
  background:var(--card);border:1px solid var(--b1);border-radius:24px;
  overflow:hidden;backdrop-filter:blur(16px);
}
.glory-table{width:100%;border-collapse:collapse}
.glory-table thead th{
  padding:16px 22px;font-family:'Cinzel',serif;
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--t3);border-bottom:1px solid var(--b1);text-align:left;font-weight:700;
}
.glory-table tbody tr{transition:background .2s;border-bottom:1px solid rgba(208,154,85,.05)}
.glory-table tbody tr:last-child{border-bottom:none}
.glory-table tbody tr:hover{background:rgba(208,154,85,.04)}
.glory-table td{padding:15px 22px;font-size:14px;vertical-align:middle}
.glory-table tbody tr:nth-child(1){background:linear-gradient(90deg,rgba(208,154,85,.04),transparent)}
.glory-table tbody tr:nth-child(2){background:linear-gradient(90deg,rgba(192,192,192,.025),transparent)}
.glory-table tbody tr:nth-child(3){background:linear-gradient(90deg,rgba(112,69,31,.03),transparent)}

.rk{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;font-family:'Cinzel',serif;font-weight:900;font-size:13px}
.rk1{background:linear-gradient(135deg,#70451F,#B67A35,#D09A55);color:#0B0B0C;box-shadow:0 0 20px rgba(208,154,85,.45)}
.rk2{background:linear-gradient(135deg,#505050,#a0a0a0,#d0d0d0);color:#0a0a0a;box-shadow:0 0 12px rgba(192,192,192,.35)}
.rk3{background:linear-gradient(135deg,#70451F,#70451F,#D09A55);color:#0B0B0C;box-shadow:0 0 12px rgba(112,69,31,.35)}
.rk-other{background:rgba(208,154,85,.07);border:1px solid var(--b1);color:var(--t3);font-size:12px}
.pname{font-family:'Cinzel',serif;font-weight:700;font-size:14px;color:var(--t1)}
.plvl{font-family:'Cinzel',serif;font-weight:900;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:15px}
.pbar{width:100px;height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.pbar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--g3),var(--g1));box-shadow:0 0 8px rgba(208,154,85,.5);width:0;transition:width 1.3s cubic-bezier(.23,1,.32,1)}

.cb{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:8px;font-family:'Cinzel',serif;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.cb-warrior{background:rgba(208,154,85,.14);border:1px solid rgba(208,154,85,.28);color:#D09A55}
.cb-taoist{background:rgba(208,154,85,.14);border:1px solid rgba(208,154,85,.28);color:#D09A55}
.cb-archer{background:rgba(61,170,96,.14);border:1px solid rgba(61,170,96,.28);color:#6eff9e}
.cb-ninja{background:rgba(208,154,85,.14);border:1px solid rgba(208,154,85,.28);color:#D4A466}
.cb-trojan{background:rgba(208,154,85,.14);border:1px solid rgba(208,154,85,.28);color:#D09A55}
.cb-monk{background:rgba(208,154,85,.14);border:1px solid rgba(208,154,85,.28);color:#D09A55}

/* ================================================================
   CLASS CARDS
================================================================ */
/* Classes Section */
        .classes-gaming {
            padding: 50px 20px;
            position: relative;
        }

        .classes-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 35px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .class-card-gaming {
            position: relative;
            text-align: center;
            padding: 30px 25px;
            background: linear-gradient(135deg, rgba(216,178,122, 0.03) 0%, rgba(112,69,31, 0.98) 100%);
            border: 2px solid rgba(216,178,122, 0.15);
            transition: 0.6s;
            overflow: hidden;
            clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
        }

        .class-card-gaming::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(216,178,122, 0.15) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: 0.8s;
            border-radius: 50%;
        }

        .class-card-gaming::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-neon);
            transform: scaleX(0);
            transition: 0.6s;
        }

        .class-card-gaming:hover::before {
            width: 700px;
            height: 700px;
        }

        .class-card-gaming:hover::after {
            transform: scaleX(1);
        }

        .class-card-gaming:hover {
            transform: translateY(-20px) scale(1.03);
            border-color: var(--neon-cyan);
            box-shadow: 0 35px 80px rgba(216,178,122, 0.5);
        }

        .class-image-gaming {
            width: 120px;
            height: auto;
            margin-bottom: 20px;
            filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.7));
            transition: 0.6s;
            position: relative;
            z-index: 2;
        }

        .class-card-gaming:hover .class-image-gaming {
            filter: drop-shadow(0 20px 60px rgba(216,178,122, 0.8));
            transform: scale(1.1) rotateY(5deg);
        }

        .class-name-gaming {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.4rem;
            color: var(--neon-cyan);
            margin-bottom: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            z-index: 2;
            text-shadow: var(--glow-cyan);
        }

        .class-desc {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }
		.classes-container,
            .features-container {
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                gap: 25px;
            }
        }


        /* Features Section */
        .features-gaming {
            padding: 50px 20px;
            background: linear-gradient(180deg, transparent 0%, rgba(216,178,122, 0.02) 50%, transparent 100%);
            position: relative;
        }

        .features-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .feature-card-gaming {
            background: rgba(112,69,31, 0.8);
            border: 2px solid rgba(216,178,122, 0.2);
            padding: 28px 25px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: 0.5s;
            clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
        }

        .feature-card-gaming::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-neon);
            transform: scaleX(0);
            transition: 0.5s;
        }

        .feature-card-gaming:hover::after {
            transform: scaleX(1);
        }

        .feature-card-gaming:hover {
            transform: translateY(-12px);
            border-color: var(--neon-cyan);
            box-shadow: 0 20px 60px rgba(216,178,122, 0.3);
            background: rgba(112,69,31, 0.95);
        }

        .feature-icon-gaming {
            font-size: 2.4rem;
            color: var(--neon-cyan);
            margin-bottom: 20px;
            filter: drop-shadow(var(--glow-cyan));
        }

        .feature-title-gaming {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            color: var(--neon-cyan);
            margin-bottom: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .feature-desc {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.7;
            font-size: 0.9rem;
        }

.classes-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.class-card{
  background:var(--card);border:1px solid var(--b1);border-radius:22px;
  overflow:hidden;transition:all .4s var(--ease);cursor:pointer;position:relative;
}
.class-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cl-color,var(--g2));opacity:0;transition:opacity .3s;z-index:2}
.class-card:hover{transform:translateY(-10px);border-color:var(--cl-border,var(--b2));box-shadow:0 28px 56px rgba(0,0,0,.65),0 0 32px var(--cl-glow,rgba(208,154,85,.12))}
.class-card:hover::before{opacity:1}
.class-image{position:relative;height:230px;overflow:hidden;background:linear-gradient(135deg,#70451F,#70451F)}
.class-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.class-card:hover .class-image img{transform:scale(1.06)}
.class-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(112,69,31,.9) 100%)}
.class-icon{
  position:absolute;bottom:14px;right:14px;
  width:46px;height:46px;background:rgba(0,0,0,.65);
  border:1px solid var(--b2);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);transition:all .3s;
}
.class-icon svg{width:24px;height:24px;color:var(--g2);transition:all .3s}
.class-card:hover .class-icon{transform:scale(1.1);background:var(--cl-color,var(--g2));border-color:var(--cl-color,var(--g2))}
.class-card:hover .class-icon svg{color:#fff}
.class-info{padding:22px}
.class-name{font-family:'Cinzel',serif;font-size:18px;font-weight:800;color:var(--cl-color,var(--g2));margin-bottom:5px;letter-spacing:1px}
.class-role{display:inline-block;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t3);background:rgba(255,255,255,.04);padding:3px 12px;border-radius:40px;margin-bottom:12px}
.class-desc{font-size:13.5px;color:var(--t2);line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.class-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.class-tag{font-family:'Cinzel',serif;font-size:8px;padding:3px 10px;border-radius:5px;background:rgba(208,154,85,.07);border:1px solid var(--b1);color:var(--t2);letter-spacing:1px;text-transform:uppercase;font-weight:700}
.class-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--g2);padding:10px 0;transition:all .3s;
  border-top:1px solid var(--b1);width:100%;
}
.class-btn svg{width:14px;height:14px;transition:transform .3s}
.class-btn:hover{color:var(--g1);gap:14px}
.class-btn:hover svg{transform:translateX(5px)}

/* ================================================================
   VOTE BANNER
================================================================ */
.vote-banner{
  background:linear-gradient(135deg,rgba(112,69,31,.95),rgba(112,69,31,.98));
  border:1px solid var(--b2);border-radius:32px;
  padding:56px 60px;
  display:flex;align-items:center;justify-content:space-between;gap:48px;
  flex-wrap:wrap;position:relative;overflow:hidden;backdrop-filter:blur(16px);
}
.vote-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g2) 25%,var(--g1) 50%,var(--g2) 75%,transparent);opacity:.6}
.vb-glow{position:absolute;top:-40%;right:-8%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(208,154,85,.07) 0%,transparent 70%);pointer-events:none}
.vote-content{position:relative;z-index:1;max-width:440px}
.vote-title{font-family:'Cinzel',serif;font-size:clamp(20px,2.4vw,28px);font-weight:900;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.vote-desc{font-size:14.5px;color:var(--t2);line-height:1.7;font-style:italic}
.vote-rewards{display:flex;gap:18px;position:relative;z-index:1;flex-wrap:wrap}
.vr{
  text-align:center;padding:20px 24px;min-width:94px;
  background:rgba(208,154,85,.05);border:1px solid var(--b1);border-radius:18px;
  transition:all .3s;
}
.vr:hover{background:rgba(208,154,85,.12);border-color:var(--b2);transform:translateY(-5px);box-shadow:var(--shadow-deep)}
.vr-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto 10px}
.vr-ico svg{width:36px;height:36px;color:var(--g2)}
.vr-name{font-family:'Cinzel',serif;font-size:9px;color:var(--t2);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;line-height:1.5}
.btn-gold{
  font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:2px;
  padding:16px 40px;border-radius:50px;
  background:linear-gradient(135deg,var(--g0),var(--g1),var(--g2));
  color:#0B0B0C;
  box-shadow:0 8px 28px rgba(208,154,85,.25),inset 0 2px 0 rgba(255,255,255,.3);
  display:inline-flex;align-items:center;gap:10px;
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(208,154,85,.4);gap:14px}

/* ================================================================
   CTA SECTION
================================================================ */
.cta-section{
  text-align:center;padding:88px 48px;
  background:linear-gradient(135deg,rgba(112,69,31,.9),rgba(112,69,31,.95));
  border:1px solid var(--b1);border-radius:40px;
  position:relative;overflow:hidden;
}
.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--g2) 30%,var(--g1) 50%,var(--g2) 70%,transparent)}
.cta-bg1{position:absolute;top:-50%;left:-10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(208,154,85,.055) 0%,transparent 70%);pointer-events:none}
.cta-bg2{position:absolute;bottom:-50%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(182,122,53,.04) 0%,transparent 70%);pointer-events:none}
.cta-rune{font-family:'Cinzel',serif;font-size:18px;letter-spacing:10px;color:rgba(208,154,85,.18);margin-bottom:28px;display:block}
.cta-title{
  font-family:'Cinzel',serif;
  font-size:clamp(30px,5vw,58px);font-weight:900;
  background:var(--gold-grad);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gShift 6s ease infinite;margin-bottom:20px;
  position:relative;z-index:1;
}
.cta-sub{font-size:clamp(15px,1.5vw,19px);color:var(--t2);max-width:580px;margin:0 auto 44px;line-height:1.75;font-style:italic;position:relative;z-index:1}
.cta-btns{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes gShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes onlinePulse{0%,100%{opacity:1;box-shadow:0 0 10px #4ade80}50%{opacity:.5;box-shadow:0 0 20px #4ade80,0 0 40px rgba(74,222,128,.3)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes runeSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:1300px){
  .pw{padding:60px 32px 0}
  .classes-grid{grid-template-columns:repeat(3,1fr)}
  .stats-strip{grid-template-columns:repeat(3,1fr);border-radius:40px}
  .sc:not(:last-child)::after{display:none}
  .sc{border-bottom:1px solid var(--b1)}
  .sc:nth-child(3){border-bottom:none}
}
@media(max-width:1100px){
  .grid-3{grid-template-columns:1fr}
  .champions{grid-template-columns:1fr 1.1fr 1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .navbar{padding:0 24px}
  .nav-links{gap:0}
  .nav-link{padding:8px 12px;font-size:10px}
}
@media(max-width:900px){
  .nav-links,.nav-online{display:none}
  .nav-hamburger{display:flex}
  .nav-cta{display:none}
  .pw{padding:48px 20px 0}
  .section{margin-bottom:70px}
  .stats-strip{grid-template-columns:repeat(2,1fr);border-radius:24px;margin-bottom:56px}
  .sc{border-bottom:1px solid var(--b1)}
  .sc:nth-child(5),.sc:nth-child(6){border-bottom:none}
  .classes-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .champions{grid-template-columns:1fr}
  .vote-banner{flex-direction:column;text-align:center;padding:40px 28px}
  .vote-rewards{justify-content:center}
  .cta-section{padding:56px 24px}
}

@media(max-width:700px){
  .hstats{grid-template-columns:repeat(2,minmax(110px,1fr));border-radius:26px;max-width:380px;margin-bottom:28px;min-height:auto}
  .hstat{border-right:1px solid var(--b1);border-bottom:1px solid var(--b1);min-height:82px;padding:12px 10px 14px}
  .hstat:nth-child(2n){border-right:none}
  .hstat:nth-child(3),.hstat:nth-child(4){border-bottom:none}
}
@media(max-width:380px){
  .hstats{grid-template-columns:1fr;border-radius:20px;max-width:240px}
  .hstat{border-right:none!important;border-bottom:1px solid var(--b1);min-height:78px}
  .hstat:last-child{border-bottom:none}
}

@media(max-width:480px){
  .pw{padding:40px 16px 0}
  .classes-grid{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:1fr;border-radius:20px}
  .hbtns{flex-direction:column;width:100%;max-width:280px;margin:0 auto}
  .btn-primary,.btn-secondary{width:100%;justify-content:center}
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn-gold,.cta-btns .btn-secondary{width:100%;max-width:300px;justify-content:center}
}

/* ================================================================
   GoldenConquer HOME IDENTITY - THE THUNDER REIGN
   Scope: index.php only. Layout and responsive rules stay unchanged.
================================================================ */
body.page-index {
  --home-storm: #0B0B0C;
  --home-surface: #141416;
  --home-electric: #B67A35;
  --home-lightning: #D09A55;
  --home-border: #33291F;
  --home-text: #FFFFFF;
  --home-muted: #B8B2AA;
  --home-electric-soft: rgba(182,122,53,.12);
  --home-lightning-soft: rgba(208,154,85,.12);
  background:
    radial-gradient(circle at 18% 16%, rgba(182,122,53,.055), transparent 30%),
    linear-gradient(180deg, #0B0B0C 0%, #0E0E10 58%, #09090A 100%) !important;
  color: var(--home-text) !important;
}

/* Hero: palette, atmosphere, borders and interaction only. */
body.page-index .hero {
  background:
    linear-gradient(rgba(208,154,85,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(208,154,85,.022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(182,122,53,.055), transparent 38%),
    var(--home-storm) !important;
  background-size: 62px 62px, 62px 62px, auto, auto !important;
  border-color: var(--home-border) !important;
  color: var(--home-text) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.56), inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .hbg-default {
  background:
    linear-gradient(125deg, rgba(182,122,53,.055), transparent 32%),
    linear-gradient(180deg, var(--home-storm), #0E0E10) !important;
}
body.page-index .hgrid {
  background-image:
    linear-gradient(rgba(208,154,85,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(208,154,85,.045) 1px, transparent 1px) !important;
}
body.page-index .hatmos {
  background:
    linear-gradient(90deg, rgba(11,11,12,.90) 0%, rgba(11,11,12,.66) 32%, rgba(11,11,12,.20) 64%, rgba(11,11,12,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(11,11,12,.56)) !important;
}
body.page-index .hvig {
  background: radial-gradient(ellipse 112% 96% at 58% 48%, transparent 20%, rgba(5,5,6,.76) 100%) !important;
}
body.page-index .hcontent::before {
  color: var(--home-lightning) !important;
  background: rgba(182,122,53,.10) !important;
  border-color: rgba(208,154,85,.38) !important;
}
body.page-index .heyebrow {
  color: var(--home-muted) !important;
  background: rgba(20,20,22,.76) !important;
  border-color: var(--home-border) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.06) !important;
}
body.page-index .heyebrow-kicker {
  color: var(--home-lightning) !important;
}
body.page-index .heyebrow-dot {
  color: var(--home-lightning) !important;
  background: var(--home-lightning) !important;
  box-shadow: 0 0 12px rgba(208,154,85,.56) !important;
}
body.page-index .hdot.active {
  background: linear-gradient(90deg, var(--home-electric), var(--home-lightning)) !important;
  box-shadow: 0 0 14px rgba(182,122,53,.32) !important;
}
body.page-index .htitle-line1 {
  color: var(--home-text) !important;
  text-shadow: 0 12px 34px rgba(0,0,0,.68) !important;
}
body.page-index .htitle-gold {
  background: linear-gradient(135deg, #FFFFFF 0%, #D09A55 48%, #B67A35 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(182,122,53,.28)) !important;
}
body.page-index .hdesc,
body.page-index .hserver-title,
body.page-index .hstat-lbl {
  color: var(--home-muted) !important;
}
body.page-index .hserver-title span {
  background: linear-gradient(90deg, var(--home-lightning), rgba(208,154,85,.08)) !important;
  box-shadow: 0 0 14px rgba(182,122,53,.24) !important;
}
body.page-index .hserver-title strong {
  color: var(--home-text) !important;
}
body.page-index .hserver .hstat {
  border-color: var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(208,154,85,.035), rgba(208,154,85,.008)),
    rgba(20,20,22,.88) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .hserver .hstat:hover {
  border-color: rgba(208,154,85,.52) !important;
  background:
    linear-gradient(180deg, rgba(182,122,53,.13), rgba(182,122,53,.035)),
    rgba(20,20,22,.94) !important;
}
body.page-index .hstat-val,
body.page-index .hstat-status.is-online .hstat-val {
  color: var(--home-text) !important;
}
body.page-index .hstat-status.is-offline .hstat-val {
  color: var(--home-muted) !important;
}
body.page-index .hero .btn-primary {
  color: var(--home-text) !important;
  border: 1px solid rgba(208,154,85,.38) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 12px 28px rgba(182,122,53,.22), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
body.page-index .hero .btn-primary:hover {
  border-color: var(--home-lightning) !important;
  background: linear-gradient(180deg, #D09A55, #B67A35) !important;
  box-shadow: 0 15px 32px rgba(182,122,53,.28), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
body.page-index .hero .btn-secondary {
  color: var(--home-text) !important;
  border-color: var(--home-border) !important;
  background: rgba(20,20,22,.78) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .hero .btn-secondary:hover {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.56) !important;
  background: rgba(182,122,53,.13) !important;
}

/* Shared storm surfaces for the six home sections. */
body.page-index .zcp-why-shell,
body.page-index .home-news-section,
body.page-index .home-events-section,
body.page-index .zcp-hog,
body.page-index .vote-mission-section {
  border: 1px solid var(--home-border) !important;
  background:
    linear-gradient(135deg, rgba(182,122,53,.075), transparent 32%),
    linear-gradient(180deg, rgba(20,20,22,.98), rgba(11,11,12,.98)) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.34), inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .zcp-why-shell::before,
body.page-index .home-news-section::before,
body.page-index .home-events-section::before,
body.page-index .zcp-hog::before,
body.page-index .vote-mission-section::before {
  background:
    linear-gradient(105deg, rgba(182,122,53,.09), transparent 30%, transparent 70%, rgba(208,154,85,.035)),
    repeating-linear-gradient(90deg, rgba(208,154,85,.018) 0 1px, transparent 1px 140px) !important;
  opacity: .45 !important;
}
body.page-index .zcp-why-shell::after,
body.page-index .home-news-section::after,
body.page-index .home-events-section::after,
body.page-index .zcp-hog::after,
body.page-index .vote-mission-section::after {
  content: none !important;
  display: none !important;
}

body.page-index .zcp-section-head,
body.page-index .sh {
  border-bottom-color: var(--home-border) !important;
}
body.page-index .zcp-section-head::after,
body.page-index .sh::after {
  background: linear-gradient(90deg, var(--home-electric), var(--home-lightning), transparent) !important;
}
body.page-index .zcp-section-kicker,
body.page-index .zcp-why-kicker {
  color: var(--home-lightning) !important;
}
body.page-index .zcp-why-kicker::before {
  background: linear-gradient(90deg, var(--home-lightning), transparent) !important;
  box-shadow: 0 0 12px rgba(208,154,85,.30) !important;
}
body.page-index .sh-title,
body.page-index .zcp-why-title,
body.page-index .zcp-why-card h3,
body.page-index .home-news-featured h3,
body.page-index .home-news-mini strong,
body.page-index .home-event-card strong,
body.page-index .zcp-hog .hog-name,
body.page-index .zcp-hog .hog-runner h4,
body.page-index .zcp-hog .hog-board-head span,
body.page-index .zcp-hog .hog-empty h3,
body.page-index .zcp-hog .hog-row-name,
body.page-index .vote-mission .vm-copy h2,
body.page-index .vote-mission .vm-copy h3,
body.page-index .vote-mission .vm-reward strong,
body.page-index .vote-mission .vm-action-card strong {
  color: var(--home-text) !important;
  -webkit-text-fill-color: var(--home-text) !important;
  text-shadow: none !important;
}
body.page-index .sh-sub,
body.page-index .zcp-why-sub,
body.page-index .zcp-why-card p,
body.page-index .home-news-featured p,
body.page-index .home-news-mini p,
body.page-index .home-event-card span,
body.page-index .zcp-hog .hog-row-score,
body.page-index .zcp-hog .hog-empty p,
body.page-index .zcp-hog .hog-meta span:not(.cb),
body.page-index .zcp-hog .hog-runner-meta span:not(.cb),
body.page-index .zcp-hog .hog-board-head small,
body.page-index .vote-mission .vm-copy p,
body.page-index .vote-mission .vm-reward small,
body.page-index .vote-mission .vm-action-card p {
  color: var(--home-muted) !important;
}
body.page-index .zcp-section-mark,
body.page-index .zcp-hog .zcp-hog-icon {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.36) !important;
  background: linear-gradient(180deg, rgba(182,122,53,.22), rgba(182,122,53,.08)) !important;
  box-shadow: 0 10px 24px rgba(182,122,53,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.page-index .zcp-section-mark svg,
body.page-index .zcp-hog .zcp-hog-icon svg {
  color: var(--home-lightning) !important;
  filter: drop-shadow(0 0 8px rgba(182,122,53,.22)) !important;
}
body.page-index .sh-link svg {
  color: var(--home-lightning) !important;
}
body.page-index .sh-link,
body.page-index .home-news-count {
  color: var(--home-text) !important;
  border-color: var(--home-border) !important;
  background: rgba(20,20,22,.84) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .sh-link:hover {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.56) !important;
  background: rgba(182,122,53,.13) !important;
  box-shadow: 0 10px 24px rgba(182,122,53,.10) !important;
}
body.page-index .home-news-count b {
  color: var(--home-lightning) !important;
}

/* Why Play GoldenConquer. */
body.page-index .zcp-why-action {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.38) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 12px 28px rgba(182,122,53,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body.page-index .zcp-why-action:hover {
  border-color: var(--home-lightning) !important;
  background: linear-gradient(180deg, #D09A55, #B67A35) !important;
  box-shadow: 0 15px 32px rgba(182,122,53,.26), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
body.page-index .zcp-why-card {
  border-color: var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(208,154,85,.035), rgba(208,154,85,.008)),
    rgba(20,20,22,.92) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(208,154,85,.045) !important;
}
body.page-index .zcp-why-card::before {
  background: linear-gradient(90deg, transparent, var(--home-electric), var(--home-lightning), transparent) !important;
  opacity: .58 !important;
}
body.page-index .zcp-why-card::after {
  background: linear-gradient(135deg, rgba(182,122,53,.12), transparent 42%) !important;
}
body.page-index .zcp-why-card:hover {
  border-color: rgba(208,154,85,.52) !important;
  background:
    linear-gradient(180deg, rgba(182,122,53,.10), rgba(182,122,53,.025)),
    rgba(20,20,22,.96) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.26), 0 0 22px rgba(182,122,53,.08) !important;
}
body.page-index .zcp-why-ico {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.36) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 10px 24px rgba(182,122,53,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
body.page-index .zcp-why-card > span {
  color: rgba(208,154,85,.24) !important;
}

/* World Chronicle. */
body.page-index .home-news-featured,
body.page-index .home-news-mini,
body.page-index .home-news-all,
body.page-index .home-news-empty {
  color: var(--home-text) !important;
  border-color: var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(208,154,85,.035), rgba(208,154,85,.008)),
    rgba(20,20,22,.92) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(208,154,85,.045) !important;
}
body.page-index .home-news-featured::before {
  background:
    linear-gradient(135deg, rgba(182,122,53,.18), transparent 42%),
    linear-gradient(180deg, rgba(11,11,12,.08), rgba(11,11,12,.88)) !important;
}
body.page-index .home-news-featured::after {
  background: linear-gradient(90deg, var(--home-electric), var(--home-lightning), transparent) !important;
  box-shadow: 0 0 18px rgba(182,122,53,.18) !important;
}
body.page-index .home-news-media {
  background:
    linear-gradient(135deg, rgba(182,122,53,.16), rgba(208,154,85,.035)),
    var(--home-storm) !important;
}
body.page-index .home-news-media.no-image span {
  color: rgba(208,154,85,.09) !important;
}
body.page-index .home-news-kicker span {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.34) !important;
  background: rgba(182,122,53,.22) !important;
}
body.page-index .home-news-kicker em,
body.page-index .home-news-mini > span,
body.page-index .home-news-read svg,
body.page-index .home-news-all svg {
  color: var(--home-lightning) !important;
}
body.page-index .home-news-kicker,
body.page-index .vote-mission .vm-badges {
  color: var(--home-muted) !important;
}
body.page-index .home-news-read,
body.page-index .home-news-all {
  color: var(--home-text) !important;
}
body.page-index .home-news-mini::before,
body.page-index .home-news-all::before {
  background: linear-gradient(180deg, var(--home-lightning), var(--home-electric)) !important;
  opacity: .64 !important;
}
body.page-index .home-news-featured:hover,
body.page-index .home-news-mini:hover,
body.page-index .home-news-all:hover {
  border-color: rgba(208,154,85,.52) !important;
  background:
    linear-gradient(180deg, rgba(182,122,53,.10), rgba(182,122,53,.025)),
    rgba(20,20,22,.96) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,.28), 0 0 22px rgba(182,122,53,.08) !important;
}

/* Realm Events. */
body.page-index .home-event-card {
  border-color: var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(208,154,85,.035), rgba(208,154,85,.008)),
    rgba(20,20,22,.92) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(208,154,85,.045) !important;
}
body.page-index .home-event-card::before {
  background: linear-gradient(180deg, var(--home-lightning), var(--home-electric)) !important;
  opacity: .64 !important;
}
body.page-index .home-event-card:hover {
  border-color: rgba(208,154,85,.52) !important;
  background:
    linear-gradient(180deg, rgba(182,122,53,.10), rgba(182,122,53,.025)),
    rgba(20,20,22,.96) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.26), 0 0 20px rgba(182,122,53,.08) !important;
}
body.page-index .home-event-card .event-countdown,
body.page-index .home-event-card.is-live .event-countdown {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.34) !important;
  background: rgba(182,122,53,.14) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.06) !important;
}

/* Hall of Glory. */
body.page-index .zcp-hog .hog-spotlight,
body.page-index .zcp-hog .hog-runner,
body.page-index .zcp-hog .hog-board,
body.page-index .zcp-hog .hog-empty {
  border-color: var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(208,154,85,.035), rgba(208,154,85,.008)),
    rgba(20,20,22,.92) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(208,154,85,.045) !important;
}
body.page-index .zcp-hog .hog-spotlight,
body.page-index .zcp-hog .hog-spotlight-v2 {
  background:
    linear-gradient(135deg, rgba(182,122,53,.16), transparent 42%),
    linear-gradient(180deg, rgba(20,20,22,.98), rgba(11,11,12,.98)) !important;
}
body.page-index .zcp-hog .hog-spotlight::before {
  background:
    linear-gradient(115deg, transparent 40%, rgba(208,154,85,.07) 41%, transparent 43%),
    linear-gradient(180deg, rgba(182,122,53,.05), rgba(11,11,12,.18)) !important;
}
body.page-index .zcp-hog .hog-spotlight::after {
  background: linear-gradient(90deg, transparent, var(--home-lightning), rgba(208,154,85,.14), transparent) !important;
  box-shadow: none !important;
}
body.page-index .zcp-hog .hog-storm {
  background:
    linear-gradient(115deg, transparent 42%, rgba(208,154,85,.16) 43%, transparent 45%),
    linear-gradient(25deg, transparent 50%, rgba(182,122,53,.12) 51%, transparent 53%) !important;
  opacity: .18 !important;
}
body.page-index .zcp-hog .hog-topline,
body.page-index .zcp-hog .hog-runner-label,
body.page-index .zcp-hog .hog-board-head small,
body.page-index .zcp-hog .cb {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.28) !important;
  background: rgba(182,122,53,.14) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .zcp-hog .hog-live-dot {
  background: var(--home-lightning) !important;
  box-shadow: 0 0 0 4px rgba(208,154,85,.12) !important;
}
body.page-index .zcp-hog .hog-rank-mark,
body.page-index .zcp-hog .hog-runner-rank,
body.page-index .zcp-hog .hog-stat strong,
body.page-index .zcp-hog .hog-row-rank {
  color: var(--home-lightning) !important;
  text-shadow: none !important;
}
body.page-index .zcp-hog .hog-stat {
  border-color: var(--home-border) !important;
  background: rgba(11,11,12,.52) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.04) !important;
}
body.page-index .zcp-hog .hog-stat span {
  color: var(--home-muted) !important;
}
body.page-index .zcp-hog .hog-main-link {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.38) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 12px 28px rgba(182,122,53,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body.page-index .zcp-hog .hog-main-link:hover {
  border-color: var(--home-lightning) !important;
  background: linear-gradient(180deg, #D09A55, #B67A35) !important;
  box-shadow: 0 15px 32px rgba(182,122,53,.24) !important;
}
body.page-index .zcp-hog .hog-runner::before,
body.page-index .zcp-hog .hog-board::before,
body.page-index .zcp-hog .hog-empty::before {
  background: linear-gradient(180deg, var(--home-lightning), var(--home-electric)) !important;
  opacity: .64 !important;
}
body.page-index .zcp-hog .hog-runner:hover,
body.page-index .zcp-hog .hog-board:hover,
body.page-index .zcp-hog .hog-empty:hover {
  border-color: rgba(208,154,85,.48) !important;
}
body.page-index .zcp-hog .hog-row:hover,
body.page-index .zcp-hog .hog-row:nth-child(even):hover {
  background: rgba(182,122,53,.12) !important;
}
body.page-index .zcp-hog .hog-empty-icon {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.36) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 10px 24px rgba(182,122,53,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Vote Rewards. */
body.page-index .vote-mission {
  border-color: var(--home-border) !important;
  background:
    linear-gradient(135deg, rgba(182,122,53,.10), transparent 38%),
    linear-gradient(180deg, rgba(20,20,22,.98), rgba(11,11,12,.98)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .vote-mission::before {
  background: linear-gradient(90deg, transparent, var(--home-electric), var(--home-lightning), transparent) !important;
  opacity: .70 !important;
}
body.page-index .vote-mission::after {
  border-color: rgba(208,154,85,.08) !important;
  box-shadow: inset 0 0 64px rgba(182,122,53,.035) !important;
}
body.page-index .vote-mission .vm-glow {
  display: none !important;
  background: transparent !important;
}
body.page-index .vote-mission .vm-eyebrow,
body.page-index .vote-mission .vm-action-kicker {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.28) !important;
  background: rgba(182,122,53,.14) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.05) !important;
}
body.page-index .vote-mission .vm-eyebrow span {
  background: var(--home-lightning) !important;
  box-shadow: 0 0 12px rgba(208,154,85,.42) !important;
}
body.page-index .vote-mission .vm-badges span,
body.page-index .vote-mission .vm-secondary {
  color: var(--home-muted) !important;
  border-color: var(--home-border) !important;
  background: rgba(20,20,22,.76) !important;
  box-shadow: inset 0 1px 0 rgba(208,154,85,.04) !important;
}
body.page-index .vote-mission .vm-badges span:hover,
body.page-index .vote-mission .vm-secondary:hover {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.52) !important;
  background: rgba(182,122,53,.13) !important;
}
body.page-index .vote-mission .vm-reward,
body.page-index .vote-mission .vm-action-card {
  border-color: var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(208,154,85,.035), rgba(208,154,85,.008)),
    rgba(20,20,22,.92) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(208,154,85,.045) !important;
}
body.page-index .vote-mission .vm-reward::before,
body.page-index .vote-mission .vm-action-card::before {
  background: linear-gradient(180deg, var(--home-lightning), var(--home-electric)) !important;
  opacity: .62 !important;
}
body.page-index .vote-mission .vm-reward:hover,
body.page-index .vote-mission .vm-action-card:hover {
  border-color: rgba(208,154,85,.50) !important;
  background:
    linear-gradient(180deg, rgba(182,122,53,.10), rgba(182,122,53,.025)),
    rgba(20,20,22,.96) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.26), 0 0 20px rgba(182,122,53,.08) !important;
}
body.page-index .vote-mission .vm-reward-icon {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.36) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 10px 24px rgba(182,122,53,.16), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
body.page-index .vote-mission .vm-primary,
body.page-index .vote-mission .btn-gold.vm-primary {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.38) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 12px 28px rgba(182,122,53,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body.page-index .vote-mission .vm-primary:hover,
body.page-index .vote-mission .btn-gold.vm-primary:hover {
  border-color: var(--home-lightning) !important;
  background: linear-gradient(180deg, #D09A55, #B67A35) !important;
  box-shadow: 0 15px 32px rgba(182,122,53,.24) !important;
}

/* Home-only floating utilities follow the same identity. */
body.page-index .zcp-social-dock::before {
  background: linear-gradient(180deg, transparent, rgba(208,154,85,.42), rgba(182,122,53,.28), transparent) !important;
}
body.page-index .zcp-social-dock-link {
  color: var(--home-lightning) !important;
  border-color: var(--home-border) !important;
  background:
    linear-gradient(145deg, rgba(20,20,22,.98), rgba(11,11,12,.96)),
    var(--home-storm) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.42), inset 0 1px 0 rgba(208,154,85,.06), 0 0 16px rgba(182,122,53,.07) !important;
}
body.page-index .zcp-social-dock-link::after,
body.page-index .zcp-social-dock-text {
  border-color: rgba(208,154,85,.26) !important;
}
body.page-index .zcp-social-dock-link:hover {
  color: var(--home-text) !important;
  border-color: rgba(208,154,85,.56) !important;
  background: linear-gradient(180deg, #B67A35, #70451F) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.46), 0 0 24px rgba(182,122,53,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.page-index .zcp-social-dock-icon {
  filter: drop-shadow(0 0 8px rgba(208,154,85,.30)) !important;
}
body.page-index .zcp-social-dock-text {
  color: var(--home-text) !important;
  background: rgba(11,11,12,.96) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.42) !important;
}

body.page-index .logo-img,
body.page-index .mob-head img {
  filter: drop-shadow(0 0 14px rgba(182,122,53,.22)) !important;
}
body.page-index .mob-toggle span {
  background: var(--home-lightning) !important;
}
body.page-index .mob-close {
  color: var(--home-lightning) !important;
  border-color: var(--home-border) !important;
  background: rgba(20,20,22,.82) !important;
}
body.page-index .mob-divider,
body.page-index .mob-stats {
  background: rgba(182,122,53,.08) !important;
}
body.page-index .mob-stat b {
  color: var(--home-lightning) !important;
}
body.page-index .mob-stats b,
body.page-index .mob-stat.live b {
  color: var(--home-lightning) !important;
  background: none !important;
  -webkit-text-fill-color: var(--home-lightning) !important;
}
body.page-index #hdrOnline[data-status="Offline"],
body.page-index #mobOnline[data-status="Offline"] {
  color: var(--home-muted) !important;
  background: none !important;
  -webkit-text-fill-color: var(--home-muted) !important;
}
body.page-index #hdrOnline[data-status="Online"],
body.page-index #mobOnline[data-status="Online"] {
  color: var(--home-lightning) !important;
  background: none !important;
  -webkit-text-fill-color: var(--home-lightning) !important;
}
body.page-index .mob-footer .btn-outline {
  color: var(--home-text) !important;
  border-color: var(--home-border) !important;
  background: rgba(20,20,22,.84) !important;
}
body.page-index .mob-footer .btn-outline:hover {
  color: var(--home-lightning) !important;
  border-color: rgba(208,154,85,.52) !important;
  background: rgba(182,122,53,.13) !important;
}

html:has(body.page-index),
body.page-index,
body.page-index * {
  scrollbar-color: #B67A35 #0B0B0C !important;
}
html:has(body.page-index)::-webkit-scrollbar-thumb,
body.page-index::-webkit-scrollbar-thumb,
body.page-index *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D09A55, #B67A35) !important;
}
html:has(body.page-index)::-webkit-scrollbar-track,
body.page-index::-webkit-scrollbar-track,
body.page-index *::-webkit-scrollbar-track {
  background: #0B0B0C !important;
}

/* ================================================================
   Vote Rewards — refined editorial layout
   Cleaner hierarchy: story + CTA on top, rewards in one compact strip.
================================================================ */
body.page-index .vote-mission{
  display:grid !important;
  grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr) !important;
  grid-template-areas:
    "copy action"
    "rewards rewards" !important;
  gap:18px !important;
  align-items:stretch !important;
  padding:24px !important;
  border-radius:30px !important;
}

body.page-index .vote-mission .vm-copy{
  grid-area:copy !important;
  min-width:0;
  min-height:248px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px 32px !important;
  border:1px solid var(--home-border) !important;
  border-radius:24px !important;
  background:
    linear-gradient(145deg, rgba(208,154,85,.055), transparent 34%),
    rgba(17,17,19,.88) !important;
  box-shadow:inset 0 1px 0 rgba(208,154,85,.045), 0 16px 36px rgba(0,0,0,.18) !important;
}

body.page-index .vote-mission .vm-copy h3{
  max-width:560px !important;
  margin:0 0 14px !important;
  font-size:clamp(34px,3.5vw,48px) !important;
  line-height:1.02 !important;
  letter-spacing:-.7px !important;
}

body.page-index .vote-mission .vm-copy p{
  max-width:620px !important;
  font-size:15px !important;
  line-height:1.7 !important;
}

body.page-index .vote-mission .vm-badges{
  margin-top:18px !important;
  gap:8px !important;
}

body.page-index .vote-mission .vm-badges span{
  min-height:31px !important;
  padding:0 12px !important;
  font-size:10px !important;
  letter-spacing:1.15px !important;
}

body.page-index .vote-mission .vm-action-card{
  grid-area:action !important;
  min-height:248px !important;
  padding:28px !important;
  justify-content:center !important;
  border-radius:24px !important;
  background:
    linear-gradient(155deg, rgba(182,122,53,.12), transparent 48%),
    rgba(17,17,19,.92) !important;
}

body.page-index .vote-mission .vm-action-card strong{
  max-width:300px;
  font-size:clamp(24px,2.2vw,31px) !important;
  line-height:1.08 !important;
}

body.page-index .vote-mission .vm-action-card p{
  margin:12px 0 20px !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

body.page-index .vote-mission .vm-actions{
  margin-top:auto;
  gap:9px !important;
}

body.page-index .vote-mission .vm-primary,
body.page-index .vote-mission .vm-secondary{
  min-height:46px !important;
  padding:12px 16px !important;
  border-radius:14px !important;
}

body.page-index .vote-mission .vm-rewards{
  grid-area:rewards !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
}

body.page-index .vote-mission .vm-reward{
  min-width:0;
  min-height:88px !important;
  padding:15px 16px !important;
  gap:12px !important;
  border-radius:18px !important;
}

body.page-index .vote-mission .vm-reward-icon{
  width:40px !important;
  height:40px !important;
  border-radius:13px !important;
}

body.page-index .vote-mission .vm-reward-icon svg{
  width:20px !important;
  height:20px !important;
}

body.page-index .vote-mission .vm-reward strong{
  font-size:14px !important;
  line-height:1.15 !important;
}

body.page-index .vote-mission .vm-reward small{
  margin-top:4px !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

@media (max-width: 1040px){
  body.page-index .vote-mission{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "copy"
      "rewards"
      "action" !important;
  }
  body.page-index .vote-mission .vm-rewards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.page-index .vote-mission .vm-action-card{
    min-height:auto !important;
  }
}

@media (max-width: 680px){
  body.page-index .vote-mission{
    padding:14px !important;
    gap:12px !important;
    border-radius:24px !important;
  }
  body.page-index .vote-mission .vm-copy,
  body.page-index .vote-mission .vm-action-card{
    min-height:auto !important;
    padding:22px 20px !important;
    border-radius:20px !important;
  }
  body.page-index .vote-mission .vm-copy h3{
    font-size:32px !important;
  }
  body.page-index .vote-mission .vm-rewards{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.page-index .vote-mission .vm-reward{
    min-height:76px !important;
  }
}


/* ================================================================
   HOME — Current Guild War Champion
================================================================ */
body.page-index .home-gw-champion {
  position: relative;
}

body.page-index .home-gw-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(460px, 1.35fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 168px;
  padding: 28px 30px;
  overflow: hidden;
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 18%, rgba(208,154,85,.14), transparent 28%),
    linear-gradient(100deg, rgba(182,122,53,.09), rgba(20,20,22,.96) 38%, rgba(11,11,12,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
}

body.page-index .home-gw-shell::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--home-lightning), var(--home-electric));
}

body.page-index .home-gw-shell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--home-electric), var(--home-lightning), transparent);
  opacity: .7;
}

body.page-index .home-gw-crown {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: var(--home-lightning);
  border: 1px solid rgba(208,154,85,.28);
  background: linear-gradient(145deg, rgba(208,154,85,.14), rgba(182,122,53,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.22);
}

body.page-index .home-gw-crown svg {
  width: 38px;
  height: 38px;
}

body.page-index .home-gw-main {
  min-width: 0;
}

body.page-index .home-gw-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: var(--home-lightning);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.45px;
  text-transform: uppercase;
}

body.page-index .home-gw-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--home-lightning);
  box-shadow: 0 0 0 5px rgba(208,154,85,.10), 0 0 18px rgba(208,154,85,.35);
}

body.page-index .home-gw-main h2 {
  margin: 0;
  color: var(--home-text);
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -.7px;
  overflow-wrap: anywhere;
}

body.page-index .home-gw-main p {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.65;
}

body.page-index .home-gw-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-index .home-gw-fact {
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid rgba(208,154,85,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}

body.page-index .home-gw-fact span,
body.page-index .home-gw-fact strong {
  display: block;
}

body.page-index .home-gw-fact span {
  margin-bottom: 6px;
  color: rgba(184,178,170,.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

body.page-index .home-gw-fact strong {
  color: var(--home-text);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.page-index .home-gw-result strong {
  color: var(--home-lightning);
}

body.page-index .home-gw-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 132px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(208,154,85,.28);
  border-radius: 14px;
  color: var(--home-text);
  background: linear-gradient(90deg, rgba(182,122,53,.18), rgba(208,154,85,.10));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .85px;
  text-transform: uppercase;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

body.page-index .home-gw-link svg {
  width: 16px;
  height: 16px;
  color: var(--home-lightning);
}

body.page-index .home-gw-link:hover {
  transform: translateY(-2px);
  border-color: var(--home-lightning);
  background: linear-gradient(90deg, rgba(182,122,53,.28), rgba(208,154,85,.16));
}

body.page-index .home-gw-shell.is-empty {
  grid-template-columns: auto minmax(260px, 1fr);
}

body.page-index .home-gw-shell.is-empty .home-gw-facts,
body.page-index .home-gw-shell.is-empty .home-gw-link {
  display: none;
}

@media (max-width: 1180px) {
  body.page-index .home-gw-shell {
    grid-template-columns: auto minmax(0, 1fr) minmax(360px, 1fr);
  }

  body.page-index .home-gw-link {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

@media (max-width: 860px) {
  body.page-index .home-gw-shell,
  body.page-index .home-gw-shell.is-empty {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 24px;
  }

  body.page-index .home-gw-facts {
    grid-column: 1 / -1;
  }

  body.page-index .home-gw-link {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  body.page-index .home-gw-shell,
  body.page-index .home-gw-shell.is-empty {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    border-radius: 20px;
  }

  body.page-index .home-gw-crown {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }

  body.page-index .home-gw-main h2 {
    font-size: 30px;
  }

  body.page-index .home-gw-facts {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   HOME — Guild War Champion clean horizontal redesign
   One full-width rectangle, no Guild ID, dynamic Guild Rank instead.
================================================================ */
body.page-index .home-gw-shell.home-gw-shell--clean {
  display: grid !important;
  grid-template-columns: auto minmax(260px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: 154px !important;
  padding: 26px 30px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(208,154,85,.11), transparent 28%),
    linear-gradient(105deg, rgba(208,154,85,.035), rgba(20,20,22,.97) 42%, rgba(11,11,12,.99)) !important;
}

body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-crown {
  width: 70px !important;
  height: 70px !important;
  border-radius: 20px !important;
}

body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-main {
  min-width: 0 !important;
}

body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-main p {
  max-width: 520px !important;
  margin-top: 8px !important;
}

body.page-index .home-gw-stats {
  display: flex;
  align-items: stretch;
  min-width: 420px;
  border: 1px solid rgba(208,154,85,.13);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.012);
}

body.page-index .home-gw-stat {
  flex: 1 1 0;
  min-width: 120px;
  padding: 14px 17px;
}

body.page-index .home-gw-stat + .home-gw-stat {
  border-left: 1px solid rgba(208,154,85,.12);
}

body.page-index .home-gw-stat span,
body.page-index .home-gw-stat strong {
  display: block;
}

body.page-index .home-gw-stat span {
  margin-bottom: 6px;
  color: rgba(184,178,170,.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.05px;
  text-transform: uppercase;
}

body.page-index .home-gw-stat strong {
  color: var(--home-text);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.page-index .home-gw-stat:nth-child(2) strong {
  color: var(--home-lightning);
}

body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-link {
  min-width: 122px !important;
  white-space: nowrap;
}

body.page-index .home-gw-shell.home-gw-shell--clean.is-empty {
  grid-template-columns: auto minmax(260px, 1fr) !important;
}

@media (max-width: 1180px) {
  body.page-index .home-gw-shell.home-gw-shell--clean {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  body.page-index .home-gw-stats {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-link {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 760px) {
  body.page-index .home-gw-shell.home-gw-shell--clean,
  body.page-index .home-gw-shell.home-gw-shell--clean.is-empty {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 22px !important;
  }

  body.page-index .home-gw-stats {
    grid-column: 1 / -1;
  }

  body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-link {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  body.page-index .home-gw-shell.home-gw-shell--clean,
  body.page-index .home-gw-shell.home-gw-shell--clean.is-empty {
    grid-template-columns: 1fr !important;
    padding: 20px 17px !important;
  }

  body.page-index .home-gw-stats {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.page-index .home-gw-stat + .home-gw-stat {
    border-left: 0;
    border-top: 1px solid rgba(208,154,85,.12);
  }

  body.page-index .home-gw-shell.home-gw-shell--clean .home-gw-link {
    grid-column: 1;
  }
}

/* Server Status: colors matched to the site's dark gold palette */
body.page-index .hstat-status {
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
body.page-index .hstat-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex: 0 0 8px;
  display: inline-block;
  vertical-align: middle;
}
body.page-index .hstat-status.is-online {
  border-color: rgba(208,154,85,.48) !important;
  background: linear-gradient(180deg, rgba(208,154,85,.12), rgba(208,154,85,.025)), rgba(20,20,22,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 22px rgba(208,154,85,.09) !important;
}
body.page-index .hstat-status.is-online::before {
  background: #d09a55;
  box-shadow: 0 0 10px rgba(208,154,85,.82);
}
body.page-index .hstat-status.is-online .hstat-val {
  color: #e2b978 !important;
  text-shadow: 0 0 13px rgba(208,154,85,.24);
}
body.page-index .hstat-status.is-offline {
  border-color: rgba(125,108,91,.34) !important;
  background: linear-gradient(180deg, rgba(125,108,91,.075), rgba(125,108,91,.018)), rgba(17,17,19,.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.page-index .hstat-status.is-offline::before {
  background: #75675a;
  box-shadow: 0 0 8px rgba(117,103,90,.36);
}
body.page-index .hstat-status.is-offline .hstat-val {
  color: #a89786 !important;
  text-shadow: none;
}