:root{
  --bg:#07070c;
  --panel:#0f0e18;
  --panel2:#14111f;
  --text:#f5f3ff;
  --muted:#aaa4bd;
  --line:rgba(255,255,255,.09);
  --violet:#8b5cf6;
  --purple:#5b21b6;
  --cyan:#67e8f9;
  --green:#6ee7b7;
  --shadow:0 24px 70px rgba(0,0,0,.4)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 75% -10%,rgba(91,33,182,.18),transparent 28rem),
  radial-gradient(circle at 20% 18%,rgba(103,232,249,.06),transparent 25rem),
  var(--bg);
  color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.nav-wrap{position:sticky;top:0;z-index:40;background:rgba(7,7,12,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:Cinzel,serif;font-weight:700;font-size:1.18rem;letter-spacing:.04em}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(139,92,246,.5);background:linear-gradient(145deg,rgba(139,92,246,.2),rgba(103,232,249,.05));transform:rotate(45deg);box-shadow:0 0 30px rgba(139,92,246,.15)}
.brand-mark::first-letter{transform:rotate(-45deg)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:.92rem;color:#cbc6d8}
.nav-links a:hover{color:#fff}
.nav-cta{padding:10px 15px;border:1px solid rgba(139,92,246,.5);border-radius:9px;background:rgba(139,92,246,.08)}
.menu-btn{display:none;background:none;color:white;border:0;font-size:1.4rem}
.hero{position:relative;overflow:hidden;min-height:740px;display:grid;align-items:center;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center;padding:86px 0}
.eyebrow{font-size:.73rem;letter-spacing:.22em;color:#bca8ff;font-weight:800}
h1,h2,h3{margin-top:0}
h1{font-family:Cinzel,serif;font-size:clamp(3.5rem,8vw,7rem);line-height:.9;margin:.25em 0 .22em;letter-spacing:-.045em}
h1 span{background:linear-gradient(90deg,#fff,#a78bfa 55%,#67e8f9);background-clip:text;-webkit-background-clip:text;color:transparent}
.lead{max-width:670px;font-size:1.08rem;color:#bbb5c9}
.actions{display:flex;gap:14px;align-items:stretch;margin-top:34px}
.play-card{min-width:410px;display:flex;align-items:center;gap:13px;text-align:left;color:white;border:1px solid rgba(139,92,246,.45);background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(255,255,255,.035));border-radius:14px;padding:16px 18px;cursor:pointer;box-shadow:0 15px 45px rgba(0,0,0,.2)}
.play-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.8)}
.play-text{display:flex;flex-direction:column;flex:1}
.play-text small{font-size:.63rem;letter-spacing:.16em;color:#a9a2b8}
.play-text strong{font-size:1.08rem;margin:2px 0}
.play-text span{font-size:.72rem;color:#8f899d}
.status-dot{width:10px;height:10px;border-radius:50%;background:#7c748c;box-shadow:0 0 18px rgba(255,255,255,.15)}
.status-dot.online{background:var(--green);box-shadow:0 0 20px rgba(110,231,183,.55)}
.status-dot.offline{background:#fb7185}
.copy-icon{font-size:1.3rem;color:#a78bfa}
.discord-btn{display:grid;place-items:center;padding:0 22px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#ddd7ea;opacity:.65}
.server-meta{display:flex;gap:9px;align-items:center;margin-top:14px;color:#8f899d;font-size:.76rem}
.divider{opacity:.5}
.hero-art{position:relative;min-height:470px;display:grid;place-items:center}
.portal{width:340px;height:340px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 42px rgba(139,92,246,.28))}
.portal-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(167,139,250,.6);box-shadow:inset 0 0 40px rgba(139,92,246,.26),0 0 50px rgba(139,92,246,.18);animation:spin 20s linear infinite}
.portal-ring:before,.portal-ring:after{content:"";position:absolute;border-radius:50%;inset:18px;border:1px dashed rgba(103,232,249,.25)}
.portal-ring:after{inset:46px;border-style:solid;border-color:rgba(139,92,246,.22)}
.portal-core{width:215px;height:215px;border-radius:50%;background:radial-gradient(circle at 48% 45%,rgba(103,232,249,.28),rgba(139,92,246,.28) 38%,rgba(20,14,35,.85) 72%);box-shadow:inset 0 0 70px #5b21b6,0 0 55px rgba(103,232,249,.12);animation:pulse 4s ease-in-out infinite}
.rune{position:absolute;color:#bca8ff;text-shadow:0 0 14px #8b5cf6;font-size:1.4rem}
.r1{top:-8px}.r2{right:-3px}.r3{bottom:-8px}.r4{left:-3px}
.floating-card{position:absolute;padding:10px 13px;background:rgba(13,12,20,.78);border:1px solid var(--line);border-radius:10px;font-size:.65rem;letter-spacing:.12em;color:#b9b3c7;backdrop-filter:blur(12px)}
.card-a{left:0;top:72px}.card-b{right:-4px;bottom:78px}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.17}
.orb-a{width:360px;height:360px;background:#7c3aed;right:8%;top:12%}
.orb-b{width:240px;height:240px;background:#22d3ee;left:8%;bottom:5%;opacity:.08}
.section{padding:105px 0}
.section-heading{max-width:700px;margin-bottom:45px}
h2{font-family:Cinzel,serif;font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.05;margin:.28em 0}
.section-heading p,.muted{color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.feature{padding:30px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.015));min-height:230px}
.feature:hover{border-color:rgba(139,92,246,.36);transform:translateY(-3px)}
.feature .icon{font-size:1.7rem;color:#a78bfa;margin-bottom:30px}
.feature h3{font-size:1rem;margin-bottom:9px}
.feature p{font-size:.9rem;color:#918a9f;margin:0}
.panel-section{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.025));border-block:1px solid var(--line)}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:start}
.rules{border-top:1px solid var(--line)}
.rules div{display:grid;grid-template-columns:60px 1fr;align-items:center;border-bottom:1px solid var(--line);padding:18px 0}
.rules span{color:#8b5cf6;font-family:Cinzel,serif}
.rules p{margin:0;color:#c8c2d4}
.community{padding-top:90px}
.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:40px;border:1px solid rgba(139,92,246,.3);border-radius:24px;padding:45px;background:radial-gradient(circle at 90% 20%,rgba(139,92,246,.15),transparent 30%),rgba(255,255,255,.025);box-shadow:var(--shadow)}
.cta-panel p{color:var(--muted);max-width:650px}
.big-copy{border:1px solid rgba(139,92,246,.5);background:#11101a;color:white;border-radius:14px;padding:17px 22px;min-width:270px;cursor:pointer}
.big-copy span{display:block;font-weight:800}.big-copy small{font-size:.6rem;letter-spacing:.15em;color:#8e879c}
footer{border-top:1px solid var(--line);padding:42px 0;background:#050509}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
.footer-inner strong{font-family:Cinzel,serif}.footer-inner p{margin:.2em 0;color:#777080;font-size:.78rem}
.legal{text-align:right}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,25px);opacity:0;background:#171421;border:1px solid rgba(139,92,246,.5);border-radius:999px;padding:11px 18px;font-size:.82rem;z-index:80;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.04);filter:brightness(1.15)}}
@media(max-width:900px){
  .hero{min-height:auto}.hero-grid{grid-template-columns:1fr;padding:70px 0 40px}.hero-art{min-height:400px}
  .feature-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr;gap:35px}.cta-panel{flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
  .container{width:min(100% - 28px,1180px)}
  .nav-links{display:none;position:absolute;top:76px;left:14px;right:14px;flex-direction:column;align-items:stretch;padding:18px;background:#0d0c14;border:1px solid var(--line);border-radius:14px}
  .nav-links.open{display:flex}.menu-btn{display:block}
  .actions{flex-direction:column}.play-card{min-width:0;width:100%}.discord-btn{min-height:54px}
  .hero-art{min-height:330px}.portal{width:260px;height:260px}.portal-core{width:165px;height:165px}
  .feature-grid{grid-template-columns:1fr}.section{padding:75px 0}
  .card-a{left:0;top:30px}.card-b{right:0;bottom:28px}
  .footer-inner{flex-direction:column;align-items:flex-start}.legal{text-align:left}
}