:root {
  --navy: #06111e;
  --navy-2: #091a2b;
  --navy-3: #0d2438;
  --gold: #e9bd57;
  --gold-light: #ffe9a5;
  --blue: #86b5dc;
  --text: #f4f0df;
  --muted: #aeb8c5;
  --line: rgba(231, 190, 87, .34);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--navy);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
}
body, a, button { cursor: default; }
a { color: inherit; text-decoration: none; }
.top-glow { position: fixed; inset: -30vh 10% auto; height: 50vh; pointer-events: none; background: radial-gradient(circle, rgba(42,103,155,.18), transparent 65%); z-index: -1; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  height: 74px; padding: 0 3.2vw;
  display: flex; align-items: center; gap: 28px;
  background: rgba(4, 16, 28, .94);
  border-bottom: 1px solid rgba(233,189,87,.24);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 210px; font-weight: 700; letter-spacing: .1em; }
.brand img { width: 58px; height: 58px; object-fit: contain; margin-top: 20px; filter: drop-shadow(0 5px 14px rgba(0,0,0,.5)); }
.brand b { color: var(--gold); }
.nav { flex: 1; display: flex; justify-content: center; gap: clamp(16px, 3vw, 42px); }
.nav a, .footer-links a { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #dfe4e8; transition: color .2s; }
.nav a:hover, .footer-links a:hover { color: var(--gold-light); }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 13px 23px; border: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
  font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.25); }
.button-gold { color: #1c1a13; background: linear-gradient(135deg, #f7d77e, #c99a38); border-color: #ffe49b; }
.button-dark { background: rgba(4,15,27,.72); color: #eaf0f5; }
.button-outline { color: var(--gold-light); background: rgba(5,17,29,.45); }
.header-play { min-width: 145px; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }
.menu-toggle { display:none; margin-left:auto; background:none; color:white; border:0; font-size:1.6rem; }
.hero { min-height: 690px; position: relative; overflow: hidden; display:grid; place-items:center; }
.hero-art { background-image:url("assets/art/hero-world.jpg"); background-size:cover; background-position:center; position:absolute; inset:0;
}
.mountain { position:absolute; bottom: 18%; width: 0; height:0; border-left: 180px solid transparent; border-right:180px solid transparent; border-bottom: 250px solid rgba(7,23,37,.68); filter: drop-shadow(0 10px 14px rgba(0,0,0,.22)); }
.mountain-a { display:none; }
.mountain-b { display:none; }
.mountain-c { display:none; }
.castle-glow { display:none; }
.hero-character { display:none; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,10,18,.62),rgba(2,10,18,.16) 45%,rgba(2,10,18,.5)), linear-gradient(0deg,#06111e 0%,transparent 27%,rgba(3,12,20,.2) 100%); }
.hero-content { position:relative; z-index:2; text-align:center; margin-top: -30px; }
.hero-logo { width: 90px; height:90px; object-fit:contain; filter: drop-shadow(0 7px 18px rgba(0,0,0,.55)); }
.eyebrow { margin:0 0 5px; color:var(--gold); font-size:.72rem; font-weight:bold; letter-spacing:.22em; text-transform:uppercase; }
.hero h1 { margin: 4px 0 0; font-size: clamp(3.2rem, 7vw, 6.8rem); line-height:.95; text-transform:uppercase; letter-spacing:.04em; text-shadow: 0 5px 22px rgba(0,0,0,.8); }
.hero h1 span { color:var(--gold); }
.hero-tagline { font-size:clamp(1rem,2vw,1.35rem); color:#e7e9e9; text-shadow:0 2px 10px #000; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.scroll-cue { margin-top:48px; color:#c9d2d9; font-size:.62rem; letter-spacing:.25em; opacity:.7; }
.scroll-cue span { color:var(--gold); margin-left:7px; }
.section { width:min(var(--max), calc(100% - 48px)); margin:auto; }
.feature-strip { margin-top:-18px; position:relative; z-index:4; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card, .update-card { background:linear-gradient(180deg,rgba(14,37,57,.94),rgba(5,18,31,.98)); border:1px solid rgba(228,190,93,.34); box-shadow:0 16px 45px rgba(0,0,0,.24); overflow:hidden; position:relative; }
.feature-art { height:155px; position:relative; }
.feature-art::after, .update-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,15,26,.9),transparent 70%); }
.explore-art { background-image:url("assets/art/explore.jpg"); background-size:cover; background-position:center; }
.craft-art { background-image:url("assets/art/craft.jpg"); background-size:cover; background-position:center; }
.fight-art { background-image:url("assets/art/combat.jpg"); background-size:cover; background-position:center; }
.feature-icon { position:absolute; top:126px; left:50%; transform:translateX(-50%); width:54px;height:54px;border-radius:50%; background:#0b2032; border:1px solid var(--gold); display:grid;place-items:center;color:var(--gold);font-size:1.35rem;z-index:2; }
.feature-body { text-align:center; padding:28px 25px 24px; }
.feature-body h2 { margin:0 0 8px; font-size:1.55rem; color:var(--gold-light); }
.feature-body p { color:var(--muted); min-height:70px; margin:0 0 15px; font-size:.92rem; }
.feature-body a, .update-content a { color:var(--gold); font-size:.72rem; font-weight:bold; text-transform:uppercase; letter-spacing:.1em; }
.updates { padding:105px 0 82px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:30px; }
.section-heading h2 { margin:2px 0 0; font-size:2.2rem; text-transform:uppercase; letter-spacing:.04em; }
.section-heading > div > p:last-child { margin:3px 0 0; color:var(--muted); }
.text-link { color:var(--gold); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.updates-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.update-image { height:190px; position:relative; }
.city-image { background-image:url("assets/art/update-world.jpg"); background-size:cover; background-position:center; }
.forest-image { background-image:url("assets/art/update-gathering.jpg"); background-size:cover; background-position:center; }
.castle-image { background-image:url("assets/art/update-castle.jpg"); background-size:cover; background-position:center; }
.update-content { padding:18px 20px 24px; }
.update-content .tag { display:inline-block; padding:4px 9px; border:1px solid rgba(114,170,221,.55); background:rgba(30,89,137,.4); color:#a7d4fa; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; }
.update-content small { float:right; color:#8393a1; text-transform:uppercase; font-size:.58rem; letter-spacing:.08em; }
.update-content h3 { margin:13px 0 7px; font-size:1.25rem; color:#fff; }
.update-content p { color:var(--muted); font-size:.87rem; min-height:64px; }
.roadmap { border-top:1px solid rgba(226,190,92,.15); border-bottom:1px solid rgba(226,190,92,.15); background:linear-gradient(180deg,#0a1a2b,#081524); }
.roadmap-inner { padding:80px 0 92px; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:52px; }
.timeline::before { content:""; position:absolute; top:29px; left:11%; right:11%; height:1px; background:linear-gradient(90deg,var(--gold),#506579); }
.timeline-item { text-align:center; position:relative; padding:0 22px; }
.timeline-icon { width:58px;height:58px;border-radius:50%; margin:auto; display:grid;place-items:center; background:#0b2133; border:1px solid #64778b; color:#d6e1e8; position:relative; z-index:2; }
.timeline-item.done .timeline-icon, .timeline-item.active .timeline-icon { border-color:var(--gold); color:var(--gold); }
.timeline-label { display:block; margin-top:16px; font-size:1.1rem; color:var(--gold-light); text-transform:uppercase; }
.timeline-item p { color:var(--muted); font-size:.82rem; min-height:50px; }
.timeline-item b { display:inline-block; padding:5px 10px; border:1px solid #43576b; border-radius:20px; font-size:.58rem; color:#9db1c2; text-transform:uppercase; letter-spacing:.08em; }
.timeline-item.active b { border-color:#4c88b6; color:#9fd1f5; }
.economy { display:grid; grid-template-columns:1.1fr 1.35fr .9fr; gap:38px; align-items:center; padding-top:90px; padding-bottom:90px; }
.economy-art { background-image:url("assets/art/economy.jpg"); background-size:cover; background-position:center; min-height:310px; position:relative; background-color:#182c3c; border:1px solid rgba(233,189,87,.25); display:grid; place-items:center; overflow:hidden; }
.economy-art::before { content:""; position:absolute; inset:18% 12%; border-radius:50%; border:1px solid rgba(233,189,87,.18); box-shadow:0 0 70px rgba(233,189,87,.08); }
.coin { width:160px;height:160px;border-radius:50%; display:grid;place-items:center; color:#172131; font-weight:bold; font-size:2.7rem; background:linear-gradient(145deg,#fff1a8,#c9902f); border:7px solid #6e4c16; box-shadow:0 20px 35px rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,255,255,.25); transform:rotate(-10deg); position:relative;z-index:2; }
.coin-small { position:absolute; width:54px;height:54px; font-size:1rem; right:24%; top:20%; border-width:3px; transform:rotate(16deg); }
.economy-copy h2 { margin:3px 0 4px; font-size:2.2rem; text-transform:uppercase; }
.economy-copy .lead { color:#e7dcae; font-size:1.02rem; }
.economy-copy p:not(.eyebrow):not(.lead) { color:var(--muted); font-size:.91rem; }
.economy-points { border-left:1px solid rgba(233,189,87,.24); padding-left:28px; }
.economy-points > div { display:flex; gap:13px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.economy-points > div:last-child { border-bottom:0; }
.economy-points strong { color:var(--gold); width:25px; }
.economy-points b { display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; }
.economy-points small { display:block; color:#8294a3; margin-top:3px; }
.community { padding:86px 0; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.community h2 { margin:3px 0 8px; font-size:2.7rem; text-transform:uppercase; }
.community p:not(.eyebrow) { color:var(--muted); max-width:550px; }
.socials { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.social-card { border:1px solid rgba(233,189,87,.22); background:#091a2a; padding:22px 16px; text-align:center; transition:transform .2s,border-color .2s; }
.social-card:hover { transform:translateY(-3px); border-color:var(--gold); }
.social-card span { display:block; font-size:1.8rem; color:var(--gold); }
.social-card b { display:block; margin-top:7px; }
.social-card small { color:#8493a2; font-size:.7rem; }
.footer { border-top:1px solid rgba(233,189,87,.2); background:#040d17; }
.footer-main { width:min(var(--max),calc(100% - 48px)); margin:auto; padding:35px 0; display:flex; align-items:center; gap:40px; }
.footer-brand { min-width:330px; }
.footer-brand img { width:52px; height:52px; margin:0; }
.footer-brand span { font-size:.85rem; }
.footer-brand small { display:block; color:#71808d; letter-spacing:normal; margin-top:3px; }
.footer-links { flex:1; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.footer-socials { display:flex; gap:14px; color:#9caab5; }
.footer-bottom { width:min(var(--max),calc(100% - 48px)); margin:auto; border-top:1px solid rgba(255,255,255,.07); padding:18px 0 25px; display:flex; justify-content:space-between; color:#657584; font-size:.68rem; }
.footer-bottom a:hover { color:var(--gold); }
.footer-bottom i { margin:0 8px; color:#3f4d59; }

@media (max-width: 900px) {
  .site-header { gap:12px; }
  .nav { display:none; position:absolute; top:74px; left:0; right:0; padding:18px; flex-direction:column; background:#06111e; border-bottom:1px solid var(--line); }
  .nav.open { display:flex; }
  .menu-toggle { display:block; }
  .header-play { display:none; }
  .brand { min-width:0; }
  .brand span { display:none; }
  .feature-strip, .updates-grid { grid-template-columns:1fr; }
  .feature-strip { width:min(620px,calc(100% - 32px)); }
  .economy, .community { grid-template-columns:1fr; }
  .economy-points { border-left:0; border-top:1px solid var(--line); padding:18px 0 0; }
  .timeline { grid-template-columns:1fr 1fr; gap:38px 0; }
  .timeline::before { display:none; }
  .footer-main { flex-wrap:wrap; }
  .footer-brand { min-width:0; }
}
@media (max-width: 560px) {
  .hero { min-height:620px; }
  .hero-content { padding:0 18px; }
  .hero h1 { font-size:3rem; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .section { width:min(100% - 28px,var(--max)); }
  .updates { padding-top:72px; }
  .section-heading { align-items:start; gap:15px; flex-direction:column; }
  .timeline { grid-template-columns:1fr; }
  .socials { grid-template-columns:1fr; }
  .footer-main, .footer-bottom { width:calc(100% - 28px); }
  .footer-bottom { flex-direction:column; gap:10px; }
}