/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=MedievalSharp&display=swap');

/* ===== Theme Vars ===== */
:root {
  --gold: #f9e076;
  --gold-strong: #ffd85a;
  --accent-blue: #4cc0ff;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "MedievalSharp", serif;
  color: #f5e4c3;
  overflow-x: hidden;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.75) 5%,
      rgba(0,0,0,0.45) 20%,
      rgba(0,0,0,0.45) 80%,
      rgba(0,0,0,0.75) 95%
    ),
    url('/images/0/20082283/fantasy_bg-jRHnRS26Z4cG_P5W6E8bhA.png') center center / cover fixed no-repeat;
}

/* ===== Snow (full page) ===== */
#snow-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:9999; pointer-events:none;
}

/* ===== Banner (hero) ===== */
.banner{
  position:relative; width:100%; height:100vh;
  background:url('/images/0/20156630/legacyreborn_banner-44wjrP7dVGwWbD0VGprXbw.png') center top / cover no-repeat;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center;
  z-index:2;
}
.banner::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:220px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,15,6,0.75) 65%, rgba(0,0,0,0.95) 100%);
  z-index:3;
}

/* ===== Fixed Left Vertical Menu (desktop) ===== */
.menu-wrapper{ position:static !important; }
.nav-menu{
  position:fixed; top:10px; left:30px;
  width:170px; display:flex; flex-direction:column; align-items:stretch; gap:12px;
  padding:6px; background:transparent; z-index:99998;
}
.nav-menu a{
  display:block; width:100%; text-align:center;
  color:#e9d88c; text-decoration:none; text-transform:uppercase; letter-spacing:1px;
  font:700 15px/1 "Cinzel Decorative", serif;
  padding:8px 6px; border-radius:8px;
  border:1px solid rgba(255,215,120,.45);
  background:linear-gradient(180deg, rgba(40,35,25,.75) 0%, rgba(15,12,8,.85) 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.7), 0 0 10px rgba(255,215,120,.1);
  transition:all .25s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-menu a:hover{
  color:#fff8da;
  border-color:rgba(255,230,160,.85);
  background:linear-gradient(180deg, rgba(90,70,40,.85) 0%, rgba(35,25,10,.95) 100%);
  box-shadow:0 0 25px rgba(255,215,120,.7), inset 0 0 15px rgba(0,0,0,.8);
  transform:translateY(-1px);
}
.nav-menu a.active{
  color:#fff9d6;
  border-color:rgba(255,235,160,.9);
  background:linear-gradient(180deg, rgba(100,85,40,.9) 0%, rgba(50,35,10,.95) 100%);
  box-shadow:0 0 25px rgba(255,215,120,.8), inset 0 0 20px rgba(0,0,0,.8);
  animation:activeGlow 2.2s ease-in-out infinite alternate;
}
@keyframes activeGlow{
  0%{ box-shadow:0 0 20px rgba(255,215,120,.5), inset 0 0 8px rgba(0,0,0,.8); }
  100%{ box-shadow:0 0 40px rgba(255,235,160,.9), inset 0 0 15px rgba(0,0,0,.9); }
}

/* ===== Banner floating blocks ===== */
.banner-bottom-left{
  position:absolute; bottom:30px; left:40px; z-index:25;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:10px 15px; border-radius:12px; backdrop-filter:blur(4px);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,215,0,.15); box-shadow:0 0 20px rgba(0,0,0,.6);
}
.banner-motto{ font-family:"Cinzel Decorative",serif; color:var(--gold); font-size:15px; margin-bottom:8px; }

.cta.play.small{
  display:inline-block; font:700 16px/1 "Cinzel Decorative",serif; text-decoration:none;
  color:#2b1805; padding:9px 22px; border-radius:10px;
  background:radial-gradient(circle at 30% 20%, #fff7c9 0%, #ffe88a 30%, #d39a2e 100%);
  box-shadow:0 6px 20px rgba(255,215,0,.38); transition:transform .25s ease, box-shadow .25s ease;
}
.cta.play.small:hover{ transform:scale(1.08); box-shadow:0 0 35px rgba(255,215,0,.95); }

/* ===== Socials on banner ===== */
.social-links{
  position:absolute; right:40px; bottom:35px; display:flex; gap:18px; z-index:25;
}
.social-links .icon{ width:40px; height:40px; filter:drop-shadow(0 0 8px rgba(0,0,0,.8)); transition:transform .2s ease, filter .3s ease; }
.social-links a:hover .icon{ transform:scale(1.2); filter:drop-shadow(0 0 10px rgba(255,215,0,.8)); }
.social-links .discord{ fill:#5865F2; } .social-links .telegram{ fill:#26A5E4; } .social-links .youtube{ fill:#FF0000; }

/* ===== Main container ===== */
.container{
  position:relative; z-index:5;
  max-width:1000px; margin:120px auto 36px auto; padding:30px 40px;
  background:rgba(10,10,10,.6);
  border-radius:12px; border:1px solid rgba(255,215,120,.3);
  box-shadow:0 0 25px rgba(255,200,80,.15), inset 0 0 20px rgba(0,0,0,.3);
  backdrop-filter:blur(6px);
  line-height:1.7;
}
.container h2,.container h3,.container p,.container li{
  color:#f5e7b2; font-weight:600; text-shadow:none; line-height:1.65;
}
.container h2,.container h3{
  font-family:"Cinzel Decorative",serif; color:#ffd85a; font-weight:700;
}

/* ===== Footer ===== */
.footer{
  text-align:center; padding:20px 10px; margin-top:40px;
  background:rgba(0,0,0,.75); color:#ffd85a;
  font-family:"Cinzel Decorative",serif; font-size:18px; letter-spacing:1px;
  border-top:1px solid rgba(212,175,55,.3); box-shadow:0 -2px 20px rgba(0,0,0,.6);
}

/* ===== Landing upgrade blocks (ниже баннера) ===== */
.lr-section{ position:relative; z-index:5; margin-top:24px; }

/* Moongate */
.moongate-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin:40px 0; }
@media (max-width:900px){ .moongate-wrap{ grid-template-columns:1fr; } }
.moongate{ position:relative; width:320px; height:320px; margin:0 auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.moongate::before,.moongate::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 40px rgba(100,200,255,.25) inset, 0 0 30px rgba(120,220,255,.2); }
.moongate-core{ position:absolute; inset:12%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(130,210,255,.28), rgba(80,160,220,.12), rgba(0,0,0,0) 70%);
}
.moongate-aura{ position:absolute; inset:-6%; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(120,220,255,.18), rgba(0,0,0,0) 40%, rgba(120,220,255,.18), rgba(0,0,0,0) 75%);
  animation:moongateSpin 16s linear infinite;
}
@keyframes moongateSpin{ to{ transform:rotate(360deg); } }
.moongate:hover .moongate-core{
  background:radial-gradient(closest-side, rgba(150,230,255,.38), rgba(100,180,240,.16), rgba(0,0,0,0) 70%);
}
.moongate-text h2{ font-family:"Cinzel Decorative",serif; color:#ffd85a; margin:0 0 8px; }
.moongate-text p{ color:#f5e7b2; margin:0 0 12px; }
.moongate-text .btn{ display:inline-block; margin-right:10px; padding:10px 16px; border-radius:10px; text-decoration:none; }
.moongate-text .btn.gold{ background:linear-gradient(180deg,#fff0b0,#d39a2e); color:#2b1805; font-weight:700; }
.moongate-text .btn.hollow{ border:1px solid rgba(255,215,120,.5); color:#ffd85a; }

/* Why us */
.why-us h2{ color:#ffd85a; margin:0 0 12px; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }
.why-grid li{ padding:10px 12px; border-radius:10px; background:rgba(12,10,8,.55); border:1px solid rgba(255,215,120,.22); box-shadow:inset 0 0 12px rgba(0,0,0,.25); }

/* Weekly events */
.weekly-events{ margin-top:24px; padding:16px; border-radius:12px; background:rgba(10,10,10,.6); border:1px solid rgba(255,215,120,.25); }
.weekly-events h2{ color:#ffd85a; margin:0 0 8px; }
.weekly-events ul{ margin:0; padding-left:18px; color:#f5e7b2; }
.weekly-events li{ margin:6px 0; }

/* Factions */
.factions{ margin-top:24px; padding:16px; border-radius:12px; background:rgba(10,10,10,.6); border:1px solid rgba(255,215,120,.25); }
.factions h2{ color:#ffd85a; margin:0 0 6px; }
.factions p{ color:#f5e7b2; margin:0 0 10px; }
.factions .btn{ display:inline-block; padding:8px 14px; border-radius:10px; text-decoration:none; border:1px solid rgba(255,215,120,.5); color:#ffd85a; }

/* FAQ */
.faq{ margin-top:28px; }
.faq h2{ color:#ffd85a; margin:0 0 10px; }
.faq details{ border:1px solid rgba(255,215,120,.25); border-radius:10px; padding:10px 12px; background:rgba(12,10,8,.55); margin-bottom:10px; }
.faq summary{ cursor:pointer; color:#ffdca1; font-weight:700; }
.faq p{ margin:8px 0 0; color:#f5e7b2; }

/* Parchment (SEO text) */
.parchment{
  margin:28px 0; padding:22px 24px; border-radius:12px;
  background:linear-gradient(180deg, rgba(62,48,30,.35), rgba(35,26,14,.55));
  border:1px solid rgba(212,175,55,.35);
  box-shadow:inset 0 0 40px rgba(0,0,0,.35), 0 0 18px rgba(212,175,55,.18);
}
.parchment h2{ font-family:"Cinzel Decorative",serif; color:#ffd85a; margin:0 0 10px; }
.parchment p{ color:#f5e7b2; }

/* Torches & Runes */
.torch-row{ display:flex; gap:14px; justify-content:center; margin:10px 0; }
.torch{ width:6px; height:22px; border-radius:3px;
  background:linear-gradient(180deg,#ffecb0,#d39a2e);
  box-shadow:0 0 12px rgba(255,200,80,.8);
  animation:flick 1.6s ease-in-out infinite;
}
@keyframes flick{ 0%{filter:brightness(1)} 50%{filter:brightness(1.25)} 100%{filter:brightness(1)} }
.runes{ display:flex; gap:10px; justify-content:center; margin:8px 0 0; }
.rune{ display:inline-block; padding:6px 10px; border-radius:8px; border:1px solid rgba(255,215,120,.35); color:#ffdca1; text-decoration:none; transition:.25s;
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
}
.rune:hover{ box-shadow:0 0 16px rgba(120,220,255,.35), inset 0 0 10px rgba(0,0,0,.6); transform:translateY(-2px); }

/* ===== Responsive ===== */
@media (max-width:900px){
  .banner{ height:80vh; background-position:center center; }
  .container{ margin:100px 18px 30px; padding:20px; }
}
@media (max-width:768px){
  /* меню превращаем в строку */
  .nav-menu{
    position:static; width:auto; flex-direction:row; gap:10px;
    justify-content:center; padding:10px 0; margin:0 auto;
  }
  .nav-menu a{ font-size:13px; padding:6px 10px; }
  .banner-bottom-left{ left:20px; bottom:20px; }
  .social-links{ right:20px; bottom:20px; gap:14px; }
  .banner{ height:65vh; background-position:center center; }
}