:root{
  --gold:#c9a66b;
  --antique-gold:#b9935a;
  --night:#0c1320;
  --stone:#2a2f36;
  --copper:#7a4a2b;
  --paper:#e7dec8;
  --ink:#0a0d12;
}
/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(#0a0f1a,#0c1320);
  color:#e9e9e9; font-family:"IM Fell English", serif; line-height:1.5;
  overflow-x:hidden;
}
/* Canvas FX sits behind */
#fx-canvas{position:fixed; inset:0; z-index:-2;}

/* Header */
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(1.1) blur(6px);}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.75rem 1rem; border-bottom:1px solid rgba(201,166,107,.25);
  background:linear-gradient(to bottom, rgba(10,13,18,.65), rgba(10,13,18,.35));
}
.logo{height:54px; width:auto; image-rendering:auto}
.main-nav a{
  font-family:"Cinzel", serif; color:#d7c7a0; text-decoration:none; margin:0 .5rem;
  padding:.25rem .5rem; border-radius:4px; transition:color .2s, text-shadow .2s;
}
.main-nav a:hover{color:var(--gold); text-shadow:0 0 6px rgba(185,147,90,.65)}

/* Hero */
.hero{position:relative; min-height:72vh; display:grid; place-items:center; text-align:center; overflow:hidden;}
.hero-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.1) saturate(1.05) brightness(.75)}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 55%, rgba(57,108,179,.25), transparent 60%),
             linear-gradient(to bottom, rgba(12,19,32,.2), rgba(12,19,32,.8));
  pointer-events:none;
}
.hero-content{position:relative; z-index:1; padding:2rem 1rem; max-width:950px}
.hero h1{
  font-family:"Cinzel", serif; font-weight:800; letter-spacing:.5px;
  color:#f1e3c1; text-shadow:0 0 12px rgba(130,196,255,.25), 0 0 2px #000;
  margin:0 0 .5rem; font-size:clamp(1.8rem, 3vw + 1rem, 3.2rem);
}
.subtitle{font-style:italic; color:#d6c7a6; margin:0 0 1rem}
.description{color:#ddd; max-width:60ch; margin:0 auto 1.5rem}
.cta{
  display:inline-block; font-family:"Cinzel", serif; font-weight:700;
  color:#0b0f16; background:linear-gradient(180deg, #e8c884, #b98a42);
  border:1px solid #9e7a3e; border-radius:6px; padding:.8rem 1.2rem;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
  text-decoration:none; transition:transform .1s ease, box-shadow .2s ease;
}
.cta:hover{box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 10px rgba(185,147,90,.45)}
.cta:active{transform:translateY(1px)}

/* Magic smoke overlay */
.hero-smoke{
  position:absolute; inset:auto 0 0 0; height:45%;
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(190,221,255,.07), transparent 60%),
    radial-gradient(40% 30% at 60% 100%, rgba(124,178,255,.08), transparent 60%);
  filter:blur(2px);
  animation:mist 18s ease-in-out infinite alternate;
}
@keyframes mist{
  0%{transform:translateY(0)}
  100%{transform:translateY(10px)}
}

/* Containers */
.container{width:min(1200px, 92%); margin-inline:auto}

/* Quick Links */
.quick-links{padding:3rem 0; background:
  radial-gradient(60% 100% at 50% 0%, rgba(42,47,54,.65), rgba(12,19,32,.2) 70%, transparent 100%)}
.quick-links h2, .vivi-solaris h2{
  font-family:"Cinzel", serif; color:#f2e6c8; letter-spacing:.5px; text-align:center; margin:0 0 1.5rem
}
.links-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  position:relative; display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem; border-radius:10px; color:#eadfc7; text-decoration:none;
  border:1px solid rgba(185,147,90,.35);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.25);
}
.card .icon{font-size:1.4rem}
.card .card-body h3{
  font-family:"Cinzel", serif; margin:.1rem 0 .25rem; color:#f3e8cf; font-size:1.05rem
}
.card .card-body p{margin:0; color:#d8ceb7; font-size:.95rem}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(130,196,255,.45);
  box-shadow:0 12px 26px rgba(0,0,0,.35), 0 0 18px rgba(130,196,255,.18);
}
.card.wood{background:linear-gradient(180deg,#33261b,#251b13); outline:1px solid rgba(88,56,28,.45)}
.card.rune{background:linear-gradient(180deg,#1f2430,#171b24)}
.card.map{background:linear-gradient(180deg,#2a2f36,#1a1f26)}
.map-img{position:absolute; right:.5rem; bottom:.5rem; width:42%; max-width:220px; border-radius:6px; opacity:.9; border:1px solid rgba(185,147,90,.35)}

/* LED for server status */
.led{width:12px; height:12px; border-radius:50%; margin-right:.4rem; box-shadow:0 0 0 2px rgba(0,0,0,.35) inset}
.led-green{
  background:#36d26a; box-shadow:
  0 0 10px rgba(54,210,106,.8),
  0 0 20px rgba(54,210,106,.45);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.6)}
}
.icon-row{display:flex; align-items:center}
.card .icon-row .icon{font-size:1.1rem}

/* Vivi Solaris (carousel) */
.vivi-solaris{position:relative; padding:3rem 0 3.5rem; overflow:hidden}
.vivi-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; filter:grayscale(.15) sepia(.1) brightness(.6)}
.vivi-solaris .container{position:relative; z-index:1}
.carousel{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem; margin:1rem auto; max-width:1000px}
.slides{position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(185,147,90,.35); box-shadow:0 12px 28px rgba(0,0,0,.35)}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
.slide.is-active{position:relative; opacity:1}
.slide img{display:block; width:100%; height:420px; object-fit:cover}
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.6rem .9rem;
  background:linear-gradient(180deg, transparent, rgba(10,13,18,.75));
  font-style:italic; color:#f0e6cf; text-shadow:0 1px 2px #000;
}
.nav{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(185,147,90,.55);
  background:linear-gradient(180deg,#2a3344,#1b2230); color:#f3e8cf;
  font-size:1.3rem; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .1s, box-shadow .2s;
}
.nav:hover{box-shadow:0 10px 22px rgba(0,0,0,.45), 0 0 10px rgba(130,196,255,.25)}
.nav:active{transform:translateY(1px)}
.quote{margin:1rem auto 0; text-align:center; color:#d8cfb6; font-size:1.05rem}

/* Footer */
.site-footer{
  background:
    linear-gradient(180deg, rgba(38,28,18,.85), rgba(24,18,12,.9)),
    url('') center/cover no-repeat;
  border-top:1px solid rgba(185,147,90,.35);
}
.footer-inner{
  background:
    repeating-linear-gradient(145deg, rgba(120,77,38,.15) 0 12px, rgba(120,77,38,.2) 12px 24px),
    radial-gradient(80% 60% at 50% 0%, rgba(201,166,107,.06), transparent 60%),
    linear-gradient(180deg, rgba(58,43,28,.65), rgba(44,32,21,.65));
  padding:1.4rem; text-align:center; color:#eadfc7
}
.footer-inner a{color:#e6c98b; text-decoration:none}
.footer-inner a:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 720px){
  .slide img{height:280px}
  .main-nav{display:none}
  .logo{height:46px}
}