:root {
  --bg: #040306;
  --bg-soft: #09070d;
  --panel: rgba(8, 7, 11, 0.88);
  --panel-strong: rgba(5, 4, 8, 0.96);
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.075);
  --text: #f7f2f7;
  --muted: #aaa3ad;
  --red: #ff3a37;
  --purple: #bd3dff;
  --blue: #28a5ff;
  --yellow: #ffcb32;
  --green: #21e05a;
  --header-height: 72px;
  --shell: min(1390px, calc(100% - 42px));
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(112, 18, 155, .13), transparent 30%),
    radial-gradient(circle at 90% 7%, rgba(148, 7, 12, .16), transparent 28%),
    var(--bg);
  font-family: var(--sans);
  overflow-x: hidden;
}
body.modal-open, body.menu-open { overflow: hidden; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(198, 58, 255, .55); color: white; }

.shell { width: var(--shell); margin-inline: auto; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

#embersCanvas {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 80;
  opacity: .8;
}
.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 79;
  opacity: .13;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 1px, rgba(255,255,255,.08) 1.2px 1.4px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
  background-size: 170px 130px, 100% 4px;
}
.storm-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 78;
  opacity: 0;
  background: radial-gradient(circle at var(--flash-x, 50%) 5%, rgba(238, 222, 255, .75), rgba(139, 53, 255, .16) 26%, transparent 68%);
  mix-blend-mode: screen;
}
.storm-flash.is-flashing { animation: screenFlash .72s ease-out; }
@keyframes screenFlash {
  0%, 100% { opacity: 0; }
  4% { opacity: .95; }
  9% { opacity: .1; }
  15% { opacity: .62; }
  22% { opacity: .06; }
  34% { opacity: .28; }
}

.experience-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 30%, rgba(84, 10, 120, .2), transparent 38%),
    rgba(2, 2, 4, .92);
  backdrop-filter: blur(14px);
  transition: opacity .55s ease, visibility .55s ease;
}
.experience-gate.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-card {
  position: relative;
  isolation: isolate;
  width: min(520px, 100%);
  padding: 50px 46px 42px;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(221, 73, 255, .38);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(17, 9, 23, .95), rgba(5, 4, 8, .97)),
    var(--panel-strong);
  box-shadow: 0 0 0 1px rgba(255, 48, 56, .1) inset, 0 36px 100px rgba(0,0,0,.75), 0 0 80px rgba(150, 24, 255, .16);
}
.gate-card::before {
  content: "";
  position: absolute;
  inset: -80%;
  z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 40%, rgba(238, 48, 255, .48), transparent 52% 76%, rgba(255, 48, 55, .34), transparent 86%);
  animation: rotateAura 10s linear infinite;
}
.gate-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15, 8, 20, .98), rgba(5,4,8,.99));
}
.gate-aura {
  position: absolute;
  top: -110px; left: 50%;
  width: 340px; height: 210px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(205, 50, 255, .26), transparent 67%);
  filter: blur(8px);
  z-index: -1;
}
.gate-logo { width: min(310px, 78%); margin: 0 auto 8px; filter: drop-shadow(0 0 20px rgba(202, 52, 255, .35)); }
.gate-eyebrow, .modal-eyebrow { margin: 2px 0 9px; color: #e36bff; letter-spacing: .26em; font-size: .7rem; font-weight: 800; }
.gate-card h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; letter-spacing: .05em; }
.gate-copy { width: min(400px,100%); margin: 14px auto 26px; color: var(--muted); line-height: 1.65; }
.gate-actions { display: grid; gap: 12px; justify-items: center; }
.gate-note { margin: 22px 0 0; color: #77717b; font-size: .72rem; }
.text-button { border: 0; background: transparent; color: #b8b1bb; cursor: pointer; padding: 8px 12px; }
.text-button:hover { color: white; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-height);
  background: linear-gradient(180deg, rgba(2,2,4,.98), rgba(4,3,7,.82));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(140%);
  transition: height .25s ease, box-shadow .25s ease;
}
.topbar.is-scrolled { box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 1px rgba(255,61,54,.07); }
.topbar__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { flex: 0 0 auto; width: 152px; filter: drop-shadow(0 0 10px rgba(193,61,255,.18)); }
.brand img { width: 100%; }
.main-nav { display: flex; align-items: stretch; justify-content: center; gap: clamp(15px, 2vw, 31px); height: 100%; margin-inline: auto; }
.main-nav a {
  position: relative;
  display: flex; align-items: center;
  color: #c3bcc6;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  white-space: nowrap;
  transition: color .2s ease, text-shadow .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--purple));
  box-shadow: 0 0 12px var(--red);
  transition: left .24s ease, right .24s ease;
}
.main-nav a:hover, .main-nav a.is-active { color: #fff; text-shadow: 0 0 14px rgba(255,80,86,.4); }
.main-nav a:hover::after, .main-nav a.is-active::after { left: 0; right: 0; }
.topbar-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.header-button, .sound-control {
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.025);
  color: #d8d2dc;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
.header-button { padding: 0 16px; }
.header-button--ghost:hover { border-color: rgba(255,255,255,.42); color: #fff; }
.header-button--download {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,60,63,.65);
  box-shadow: 0 0 18px rgba(255,45,49,.18), 0 0 0 1px rgba(201,55,255,.15) inset;
}
.header-button--download::before {
  content: ""; position: absolute; inset: -70%;
  background: conic-gradient(transparent 0 30%, rgba(255,55,62,.8), transparent 42% 66%, rgba(194,48,255,.75), transparent 78%);
  animation: rotateAura 4.8s linear infinite;
}
.header-button--download::after { content:""; position:absolute; inset:1px; border-radius:7px; background:#0a070c; }
.header-button--download > *, .header-button--download { isolation: isolate; }
.header-button--download { z-index: 0; }
.header-button--download span, .header-button--download { }
.header-button--download { text-shadow: 0 0 10px rgba(255,255,255,.18); }
.header-button--download > span { position: relative; z-index: 2; margin-left: 5px; color:#ff6c65; }
.header-button--download { color: white; }
.header-button--download::after { z-index: -1; }
.header-button--download::before { z-index: -2; }
.sound-control { width: 58px; padding: 0; display: grid; place-items: center; position: relative; }
.sound-control__label { display: none; }
.sound-control__waves { height: 15px; display: flex; align-items: end; gap: 2px; }
.sound-control__waves i { display:block; width:2px; height:5px; background:#8d8790; border-radius:4px; }
.sound-control__waves i:nth-child(2) { height:11px; }
.sound-control__waves i:nth-child(3) { height:7px; }
.sound-control[aria-pressed="true"] { border-color: rgba(38,226,95,.55); box-shadow:0 0 14px rgba(38,226,95,.18); }
.sound-control[aria-pressed="true"] i { background:#4bff78; animation: soundBars .7s ease-in-out infinite alternate; }
.sound-control[aria-pressed="true"] i:nth-child(2) { animation-delay:-.22s; }
.sound-control[aria-pressed="true"] i:nth-child(3) { animation-delay:-.4s; }
@keyframes soundBars { to { height: 14px; } }
.menu-toggle { display:none; width:42px; height:40px; border:0; background:transparent; padding:9px; cursor:pointer; }
.menu-toggle span { display:block; height:2px; background:#eee; margin:5px 0; transition:.25s ease; }

.hero {
  position: relative;
  min-height: min(760px, 79vh);
  padding-top: var(--header-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 42%, rgba(84, 12, 112, .16), transparent 35%),
    linear-gradient(180deg, #050307 0%, #08050c 52%, #030205 100%);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,3,8,.25), transparent 22% 78%, rgba(5,2,7,.35)),
    radial-gradient(ellipse at 50% 105%, rgba(255,37,44,.12), transparent 46%);
}
.hero__backdrop { position:absolute; inset:var(--header-height) 0 0; z-index:-1; overflow:hidden; }
.hero-art { position:absolute; top:0; height:100%; object-fit:cover; opacity:.94; user-select:none; will-change:transform; }
.hero-art--left {
  left:0; width:43%; object-position:left center;
  -webkit-mask-image: linear-gradient(90deg,#000 0 62%,transparent 100%);
  mask-image: linear-gradient(90deg,#000 0 62%,transparent 100%);
  filter:saturate(1.18) contrast(1.08) brightness(.78);
}
.hero-art--right {
  right:0; width:53%; object-position:right center;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 32% 100%);
  mask-image: linear-gradient(90deg,transparent 0,#000 32% 100%);
  filter:saturate(1.2) contrast(1.12) brightness(.76);
}
.hero-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 15%,rgba(2,1,3,.14) 55%,rgba(2,1,3,.88) 110%); }
.hero-fog { position:absolute; left:-20%; width:140%; height:42%; filter:blur(22px); opacity:.25; background:radial-gradient(ellipse,rgba(137,51,173,.24),transparent 62%); animation:fogMove 22s ease-in-out infinite alternate; }
.hero-fog--one { bottom:-12%; }
.hero-fog--two { top:34%; opacity:.12; animation-duration:30s; animation-direction:alternate-reverse; }
@keyframes fogMove { from { transform:translate3d(-6%,0,0) scale(1); } to { transform:translate3d(7%,-5%,0) scale(1.12); } }
.blood-moon {
  position:absolute;
  top:2.3%; right:18.2%;
  width:clamp(110px, 11vw, 172px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:.56;
  background:
    radial-gradient(circle at 27% 25%, rgba(255,153,128,.78) 0 2%, transparent 2.6%),
    radial-gradient(circle at 68% 36%, rgba(43,0,3,.65) 0 9%, transparent 10%),
    radial-gradient(circle at 42% 68%, rgba(45,0,4,.66) 0 12%, transparent 13%),
    radial-gradient(circle at 72% 74%, rgba(255,80,68,.23) 0 7%, transparent 8%),
    radial-gradient(circle at 40% 35%, #ff6f58, #b10e19 44%, #4b0007 72%);
  box-shadow: 0 0 20px rgba(255,48,47,.95), 0 0 70px rgba(255,32,39,.58), 0 0 135px rgba(255,33,45,.25);
  mix-blend-mode:screen;
  animation:moonPulse 5.8s ease-in-out infinite, moonFloat 10s ease-in-out infinite;
}
.blood-moon::before, .blood-moon::after { content:""; position:absolute; inset:-12%; border-radius:50%; border:1px solid rgba(255,80,72,.26); animation:moonRing 3.8s ease-out infinite; }
.blood-moon::after { inset:-27%; animation-delay:1.4s; }
@keyframes moonPulse { 50% { filter:brightness(1.35) saturate(1.25); box-shadow:0 0 30px rgba(255,60,52,1),0 0 95px rgba(255,32,39,.75),0 0 165px rgba(255,33,45,.34); } }
@keyframes moonFloat { 50% { transform:translateY(8px) rotate(1.5deg); } }
@keyframes moonRing { 0%{opacity:.6;transform:scale(.8)} 100%{opacity:0;transform:scale(1.25)} }
.lightning-stage { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; mix-blend-mode:screen; }
.lightning-bolt { fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.lightning-bolt--glow { stroke:rgba(164,61,255,.52); stroke-width:12; filter:url(#boltGlow); }
.lightning-bolt--main { stroke:#fff; stroke-width:2.1; filter:drop-shadow(0 0 6px #af56ff) drop-shadow(0 0 15px #6f24ff); }
.lightning-bolt.is-live { animation:boltLife .62s steps(1,end) forwards; }
@keyframes boltLife { 0%{opacity:0} 4%{opacity:1} 10%{opacity:.1} 17%{opacity:.92} 28%{opacity:.05} 36%{opacity:.45} 48%,100%{opacity:0} }
.hero__content { position:relative; z-index:3; padding:55px 0 96px; text-align:center; display:grid; place-items:center; }
.hero-copy { width:min(720px, 90vw); display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
.hero-logo { width:min(690px, 92vw); margin-bottom:-4px; filter:drop-shadow(0 0 18px rgba(193,52,255,.26)) drop-shadow(0 0 28px rgba(255,42,50,.17)); mix-blend-mode:screen; animation:logoBreathe 5s ease-in-out infinite; }
@keyframes logoBreathe { 50% { filter:drop-shadow(0 0 29px rgba(193,52,255,.42)) drop-shadow(0 0 42px rgba(255,42,50,.24)); transform:translateY(-2px) scale(1.006); } }
.hero-kicker { margin:0; font-family:var(--serif); font-size:clamp(1.02rem,2vw,1.55rem); letter-spacing:.21em; text-transform:uppercase; text-shadow:0 0 22px rgba(255,255,255,.28); }
.hero-description { width:min(610px, 92%); margin:12px auto 24px; color:#cbc4cd; font-size:clamp(.87rem,1.15vw,1rem); line-height:1.65; text-shadow:0 3px 8px #000; }
.hero-actions { display:flex; align-items:center; gap:14px; }
.neon-button {
  position:relative;
  isolation:isolate;
  min-height:52px;
  padding:0 29px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:transparent;
  font-weight:800;
  letter-spacing:.06em;
  cursor:pointer;
  overflow:hidden;
  text-shadow:0 0 12px rgba(255,255,255,.3);
  transform:translateZ(0);
}
.neon-button::before {
  content:"";
  position:absolute;
  inset:-130% -40%;
  z-index:-2;
  background:conic-gradient(from 0deg, transparent 0 24%, #ff3d3a 31%, transparent 38% 58%, #d03dff 66%, transparent 74%);
  animation:rotateAura 4s linear infinite;
}
.neon-button::after {
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(18,10,18,.96),rgba(5,4,8,.99));
  box-shadow:0 0 22px rgba(255,52,55,.22) inset;
}
.neon-button:hover { transform:translateY(-2px); filter:brightness(1.18); }
.neon-button:active { transform:translateY(0) scale(.985); }
.neon-button--primary { min-width:245px; }
.neon-button--download { min-width:265px; font-size:1rem; }
.button-icon { color:#ff7368; font-size:1.25em; filter:drop-shadow(0 0 7px currentColor); }
.round-play {
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(5,3,8,.66);
  box-shadow:0 0 18px rgba(197,64,255,.2),0 0 0 5px rgba(255,255,255,.02);
  cursor:pointer;
  transition:.2s ease;
}
.round-play:hover { border-color:#e75cff; box-shadow:0 0 28px rgba(197,64,255,.5); transform:scale(1.06); }
.round-play span { margin-left:3px; }
.server-status { margin-top:19px; display:flex; align-items:center; gap:8px; color:#aaa3ad; font-size:.76rem; letter-spacing:.04em; }
.server-status b { color:#d55aff; font-size:.72rem; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#31ef69; box-shadow:0 0 12px #31ef69; animation:statusPulse 1.6s ease-in-out infinite; }
@keyframes statusPulse { 50% { opacity:.35; box-shadow:0 0 3px #31ef69; } }
.scroll-cue { position:absolute; bottom:25px; left:50%; z-index:5; width:28px; height:44px; border:1px solid rgba(255,255,255,.28); border-radius:18px; transform:translateX(-50%); }
.scroll-cue span { position:absolute; width:4px; height:7px; border-radius:4px; background:#fff; top:8px; left:50%; transform:translateX(-50%); animation:scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue { 0%{opacity:0;transform:translate(-50%,0)} 35%{opacity:1} 100%{opacity:0;transform:translate(-50%,18px)} }

.features-section { position:relative; z-index:8; margin-top:-78px; }
.feature-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.feature-card {
  --accent:#c143ff;
  position:relative;
  isolation:isolate;
  min-height:174px;
  padding:25px 20px 20px;
  border-radius:13px;
  overflow:hidden;
  text-align:center;
  background:transparent;
  box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 24px rgb(var(--accent-rgb) / .14);
  transform-style:preserve-3d;
  transition:transform .22s ease, filter .22s ease;
}
.feature-card::before {
  content:"";
  position:absolute;
  inset:-85%;
  z-index:-2;
  background:conic-gradient(from 0deg, transparent 0 22%, var(--accent) 29%, transparent 36% 57%, var(--accent) 64%, transparent 73%);
  animation:rotateAura var(--orbit) linear infinite;
  filter:blur(.4px);
}
.feature-card::after {
  content:"";
  position:absolute;
  inset:2px;
  z-index:-1;
  border-radius:11px;
  background:
    linear-gradient(180deg,rgb(var(--accent-rgb) / .09),transparent 36%),
    radial-gradient(circle at 50% 0,rgb(var(--accent-rgb) / .14),transparent 45%),
    rgba(6,5,9,.96);
  box-shadow:0 0 20px rgb(var(--accent-rgb) / .16) inset;
}
.feature-card:hover { filter:brightness(1.12); transform:translateY(-7px); }
.feature-card:hover::after { background:linear-gradient(180deg,rgb(var(--accent-rgb) / .16),transparent 42%),rgba(6,5,9,.96); }
.feature-icon { color:var(--accent); font-size:2.25rem; line-height:1; text-shadow:0 0 13px var(--accent),0 0 30px rgb(var(--accent-rgb) / .44); transform:translateZ(24px); }
.feature-card h2 { margin:13px 0 8px; color:var(--accent); font-size:.96rem; text-transform:uppercase; letter-spacing:.03em; text-shadow:0 0 14px rgb(var(--accent-rgb) / .48); transform:translateZ(18px); }
.feature-card p { margin:0 auto; max-width:215px; color:#c5bec8; font-size:.8rem; line-height:1.55; transform:translateZ(12px); }
@keyframes rotateAura { to { transform:rotate(360deg); } }

.command-section { position:relative; z-index:4; display:grid; grid-template-columns:1fr 1.08fr 1fr; gap:16px; padding-block:18px; }
.panel { min-width:0; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:linear-gradient(180deg,rgba(10,8,13,.96),rgba(5,4,8,.96)); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.panel-heading { height:42px; padding:0 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(90deg,rgba(255,55,61,.035),transparent 70%); }
.panel-heading > div { display:flex; align-items:center; gap:9px; }
.panel-heading h2 { margin:0; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.heading-glyph { color:#ff453e; text-shadow:0 0 9px #ff453e; }
.panel-heading a { color:#f05751; font-size:.67rem; text-transform:uppercase; font-weight:800; }
.live-badge { color:#ff5550; font-size:.62rem; font-weight:900; letter-spacing:.13em; animation:livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 50%{opacity:.35;text-shadow:0 0 0 transparent} 0%,100%{text-shadow:0 0 10px #ff413c} }
.news-list { padding:0 11px 7px; }
.news-item { width:100%; min-height:66px; display:grid; grid-template-columns:88px minmax(0,1fr) 18px; gap:11px; align-items:center; padding:8px 2px; border:0; border-bottom:1px solid var(--line-soft); background:transparent; text-align:left; cursor:pointer; }
.news-item:last-child { border-bottom:0; }
.news-item img { width:88px; height:48px; object-fit:cover; border:1px solid rgba(255,255,255,.11); }
.news-item span { min-width:0; }
.news-item b { display:block; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s; }
.news-item small { display:block; margin-top:5px; color:#99919d; font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.news-item i { color:#ff4d47; font-style:normal; font-size:1.7rem; transition:transform .2s; }
.news-item:hover b { color:#ff7772; }
.news-item:hover i { transform:translateX(3px); }
.trailer-preview { position:relative; display:block; width:calc(100% - 18px); height:171px; margin:9px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#050308; cursor:pointer; }
.trailer-preview img { width:100%; height:100%; object-fit:cover; filter:saturate(1.15) brightness(.78); transition:transform .5s ease,filter .5s ease; }
.trailer-overlay { position:absolute; inset:0; background:radial-gradient(circle at center,transparent,rgba(3,2,5,.36)); }
.trailer-play { position:absolute; left:50%; top:50%; width:62px; height:62px; transform:translate(-50%,-50%); display:grid; place-items:center; padding-left:4px; border:3px solid #ff4a45; border-radius:50%; background:rgba(4,3,6,.58); color:white; font-size:1.35rem; box-shadow:0 0 20px rgba(255,61,57,.55),0 0 45px rgba(191,45,255,.2); transition:.3s ease; }
.trailer-scan { position:absolute; left:0; right:0; top:-25%; height:30%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.1),transparent); transform:skewY(-4deg); animation:trailerScan 4.5s linear infinite; }
@keyframes trailerScan { to { top:120%; } }
.trailer-preview:hover img { transform:scale(1.045); filter:saturate(1.35) brightness(.92); }
.trailer-preview:hover .trailer-play { transform:translate(-50%,-50%) scale(1.09); box-shadow:0 0 34px rgba(255,61,57,.8),0 0 60px rgba(191,45,255,.35); }
.trailer-thumbs { height:46px; padding:0 9px 9px; display:grid; grid-template-columns:repeat(4,1fr) 38px; gap:6px; }
.trailer-thumbs span { background-size:cover; background-position:center; border:1px solid rgba(196,65,255,.35); }
.trailer-thumbs i { border:1px solid rgba(255,255,255,.15); position:relative; }
.trailer-thumbs i::before, .trailer-thumbs i::after { content:""; position:absolute; top:50%; left:50%; width:14px; height:1px; background:#aaa; transform:translate(-50%,-4px); }
.trailer-thumbs i::after { transform:translate(-50%,4px); }
.mission-list { padding:2px 12px 0; }
.mission { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:45px; border-bottom:1px solid var(--line-soft); }
.mission-symbol { color:var(--mission); text-shadow:0 0 10px var(--mission); }
.mission b { display:block; font-size:.68rem; color:#d4cdd6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mission i { display:block; width:100%; height:3px; margin-top:6px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.09); }
.mission i span { display:block; width:0; height:100%; background:var(--mission); box-shadow:0 0 8px var(--mission); transition:width 1.3s cubic-bezier(.2,.8,.2,1); }
.mission.is-visible i span { width:var(--progress); }
.mission small { display:flex; gap:7px; color:#bbb4be; font-size:.64rem; }
.mission em { color:#be4cff; font-style:normal; }
.mission strong { color:#e6bc35; font-weight:600; }
.panel-footer-button { width:100%; height:37px; border:0; background:rgba(255,255,255,.015); color:#d4cdd6; font-size:.68rem; letter-spacing:.08em; cursor:pointer; }
.panel-footer-button:hover { background:rgba(255,63,61,.07); color:white; }

.stats-section { display:grid; grid-template-columns:repeat(5,1fr); margin-bottom:18px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(90deg,rgba(255,57,55,.025),rgba(196,52,255,.025),rgba(39,164,255,.025),rgba(255,200,45,.025),rgba(33,224,87,.025)); overflow:hidden; }
.stat { position:relative; min-height:78px; display:flex; align-items:center; justify-content:center; gap:13px; padding:12px; color:var(--stat); }
.stat:not(:last-child)::after { content:""; position:absolute; right:0; top:20%; bottom:20%; width:1px; background:var(--line); }
.stat > span { font-size:2rem; text-shadow:0 0 14px var(--stat); }
.stat b { display:block; font-family:var(--serif); font-size:1.35rem; letter-spacing:.06em; text-shadow:0 0 15px color-mix(in srgb,var(--stat),transparent 55%); }
.stat b::after { content:"+"; }
.stat small { display:block; margin-top:2px; font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.footer { position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,#08050a,#030205); }
.footer::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 73% 30%,rgba(171,25,229,.18),transparent 29%),radial-gradient(circle at 88% 60%,rgba(255,40,46,.13),transparent 24%); }
.footer-art { position:absolute; right:4%; bottom:0; width:min(430px,34vw); height:100%; background:url('assets/footer-art.webp') right bottom/contain no-repeat; opacity:.55; filter:saturate(1.3) brightness(.78); -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%); mask-image:linear-gradient(90deg,transparent,#000 35%); }
.footer-grid { position:relative; display:grid; grid-template-columns:1.35fr repeat(3,.75fr); gap:42px; padding-block:34px 26px; }
.footer-brand img { width:190px; }
.footer-brand p { width:min(260px,100%); color:#9d96a0; font-size:.76rem; line-height:1.6; }
.socials { display:flex; gap:13px; }
.socials a { color:#8f8992; font-weight:800; transition:.2s; }
.socials a:hover { color:#e262ff; text-shadow:0 0 10px #bc3cff; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.footer-links h2 { margin:4px 0 7px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.footer-links a { color:#98919b; font-size:.72rem; }
.footer-links a:hover { color:white; }
.footer-bottom { position:relative; display:flex; justify-content:space-between; gap:20px; padding:14px 0 18px; border-top:1px solid var(--line-soft); color:#766f79; font-size:.65rem; }

.modal { position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:22px; opacity:0; visibility:hidden; transition:.25s ease; }
.modal.is-open { opacity:1; visibility:visible; }
.modal-backdrop { position:absolute; inset:0; background:rgba(1,1,3,.82); backdrop-filter:blur(10px); }
.modal-card { position:relative; z-index:1; width:min(700px,100%); max-height:calc(100vh - 44px); overflow:auto; border:1px solid rgba(205,62,255,.35); border-radius:16px; background:linear-gradient(180deg,rgba(17,9,21,.98),rgba(5,4,8,.99)); box-shadow:0 35px 100px rgba(0,0,0,.75),0 0 70px rgba(173,38,255,.16); padding:34px; transform:translateY(22px) scale(.98); transition:.3s cubic-bezier(.2,.8,.2,1); }
.modal.is-open .modal-card { transform:none; }
.modal-close { position:absolute; right:13px; top:12px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.03); font-size:1.6rem; cursor:pointer; }
.modal-close:hover { color:#ff5c58; border-color:#ff5c58; }
.modal-card h2 { margin:0 0 10px; font-family:var(--serif); font-size:clamp(1.7rem,4vw,2.5rem); font-weight:500; text-transform:uppercase; }
.modal-card > p:not(.modal-eyebrow):not(.modal-hint) { color:#aaa3ad; line-height:1.6; }
.modal-card code { color:#e56dff; background:rgba(255,255,255,.06); padding:.15em .4em; border-radius:4px; }
.download-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.download-option { position:relative; min-height:130px; padding:23px 50px 20px 20px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:linear-gradient(145deg,rgba(255,61,57,.07),rgba(190,58,255,.06)); transition:.2s; }
.download-option:hover { transform:translateY(-3px); border-color:#e45dff; box-shadow:0 0 30px rgba(190,58,255,.16); }
.download-option span { color:#ff625c; font-size:.64rem; font-weight:900; letter-spacing:.16em; }
.download-option b { display:block; margin:10px 0 5px; font-size:1.08rem; }
.download-option small { color:#8f8792; }
.download-option i { position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#e05cff; font-size:1.8rem; font-style:normal; }
.requirements { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }
.requirements span { padding:7px 10px; border:1px solid var(--line-soft); border-radius:20px; color:#8f8792; font-size:.68rem; }
.trailer-modal-card { width:min(900px,100%); }
.cinematic-player { position:relative; aspect-ratio:16/8.4; margin-top:20px; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#020103; }
.cinematic-player > img { width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(1.2); transform:scale(1.08); transition:2.5s ease; }
.cinematic-player.is-playing > img { transform:scale(1); filter:brightness(.82) saturate(1.35); }
.cinematic-player::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px #000; pointer-events:none; }
.cinematic-lightning { position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 25% 0,rgba(211,173,255,.9),transparent 43%); mix-blend-mode:screen; }
.cinematic-player.is-playing .cinematic-lightning { animation:cinemaFlash 3.4s ease infinite; }
@keyframes cinemaFlash { 0%,42%,50%,100%{opacity:0} 43%{opacity:.9} 45%{opacity:.08} 47%{opacity:.48} }
.cinematic-caption { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); text-align:center; text-shadow:0 4px 20px #000; }
.cinematic-caption b { display:block; font-family:var(--serif); font-size:clamp(2rem,7vw,5rem); letter-spacing:.08em; }
.cinematic-caption span { letter-spacing:.24em; font-size:clamp(.6rem,1.6vw,.95rem); }
.cinematic-player > button { position:absolute; left:50%; bottom:25px; z-index:3; transform:translateX(-50%); border:1px solid rgba(255,255,255,.35); border-radius:30px; background:rgba(5,3,8,.72); padding:11px 17px; cursor:pointer; }
.cinematic-player > button span { color:#ff4f4b; margin-right:6px; }
.modal-hint { margin-bottom:0; color:#79727c; font-size:.72rem; }
.login-card { width:min(450px,100%); display:flex; flex-direction:column; gap:14px; }
.login-card h2 { margin-bottom:4px; }
.login-card label { color:#aaa3ad; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.login-card input { width:100%; height:48px; margin-top:7px; padding:0 14px; border:1px solid var(--line); border-radius:8px; outline:none; color:#fff; background:rgba(255,255,255,.035); }
.login-card input:focus { border-color:#ce56ff; box-shadow:0 0 0 3px rgba(206,86,255,.12); }
.login-card small { color:#77717a; line-height:1.5; }
.toast { position:fixed; left:50%; bottom:26px; z-index:800; max-width:min(470px,calc(100% - 32px)); transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:12px 17px; border:1px solid rgba(224,77,255,.35); border-radius:10px; background:rgba(9,6,12,.94); box-shadow:0 15px 50px rgba(0,0,0,.55),0 0 25px rgba(196,63,255,.13); color:#e7e0e9; font-size:.78rem; transition:.3s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1260px) {
  :root { --shell:min(1180px,calc(100% - 32px)); }
  .main-nav { gap:15px; }
  .main-nav a { font-size:.64rem; }
  .brand { width:135px; }
  .header-button { padding-inline:12px; }
  .feature-card { padding-inline:14px; }
  .feature-card h2 { font-size:.83rem; }
  .feature-card p { font-size:.73rem; }
}

@media (max-width: 1040px) {
  :root { --header-height:64px; }
  .menu-toggle { display:block; order:-1; }
  .brand { width:145px; }
  .main-nav {
    position:fixed;
    top:var(--header-height); left:0; right:0;
    height:auto;
    max-height:calc(100vh - var(--header-height));
    overflow:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 20px 24px;
    background:rgba(5,4,8,.98);
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-115%);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
  }
  body.menu-open .main-nav { transform:none; opacity:1; visibility:visible; }
  .main-nav a { min-height:48px; justify-content:center; font-size:.74rem; border-bottom:1px solid rgba(255,255,255,.06); }
  .main-nav a::after { bottom:-1px; }
  body.menu-open .menu-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2) { opacity:0; }
  body.menu-open .menu-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .topbar__inner { gap:12px; }
  .topbar-actions { margin-left:auto; }
  .header-button--ghost { display:none; }
  .hero { min-height:700px; }
  .hero-art--left { width:54%; opacity:.68; }
  .hero-art--right { width:63%; opacity:.72; }
  .blood-moon { right:13%; }
  .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .feature-card:nth-child(4), .feature-card:nth-child(5) { grid-column:span 1; }
  .command-section { grid-template-columns:1fr 1fr; }
  .missions-panel { grid-column:1 / -1; }
  .mission-list { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
  .stats-section { grid-template-columns:repeat(3,1fr); }
  .stat:nth-child(3)::after { display:none; }
  .stat:nth-child(n+4) { border-top:1px solid var(--line); }
  .footer-grid { grid-template-columns:1.2fr repeat(3,.7fr); gap:22px; }
}

@media (max-width: 720px) {
  :root { --shell:min(100% - 22px,660px); }
  .topbar-actions .header-button--download { display:none; }
  .sound-control { width:42px; }
  .hero { min-height:650px; padding-top:var(--header-height); }
  .hero__backdrop { top:var(--header-height); }
  .hero-art--left { width:75%; height:82%; top:2%; object-position:left top; opacity:.55; }
  .hero-art--right { width:85%; height:83%; top:0; opacity:.64; }
  .blood-moon { top:4%; right:8%; width:118px; opacity:.65; }
  .hero__content { padding:80px 0 108px; align-items:center; }
  .hero-copy { width:100%; }
  .hero-logo { width:min(520px,96vw); }
  .hero-description { max-width:440px; }
  .features-section { margin-top:-66px; }
  .feature-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
  .feature-card { grid-column:span 2; min-height:132px; padding:18px 8px 12px; border-radius:10px; }
  .feature-card:nth-child(4), .feature-card:nth-child(5) { grid-column:span 3; }
  .feature-icon { font-size:1.7rem; }
  .feature-card h2 { margin:9px 0 4px; font-size:.68rem; }
  .feature-card p { display:none; }
  .command-section { grid-template-columns:1fr; }
  .missions-panel { grid-column:auto; }
  .mission-list { display:block; }
  .stats-section { grid-template-columns:repeat(2,1fr); }
  .stat { min-height:72px; }
  .stat:nth-child(2)::after, .stat:nth-child(4)::after { display:none; }
  .stat:nth-child(3)::after { display:block; }
  .stat:nth-child(n+3) { border-top:1px solid var(--line); }
  .stat:last-child { grid-column:1 / -1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
  .footer-art { width:70vw; opacity:.27; }
  .download-options { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  :root { --header-height:60px; }
  .topbar__inner { width:calc(100% - 18px); }
  .brand { width:119px; }
  .menu-toggle { width:38px; padding-inline:7px; }
  .hero { min-height:610px; }
  .hero__content { padding-top:96px; }
  .hero-logo { width:108vw; max-width:none; }
  .hero-kicker { font-size:.92rem; letter-spacing:.17em; }
  .hero-description { font-size:.78rem; max-width:330px; margin-top:10px; }
  .hero-actions { gap:9px; }
  .neon-button--download { min-width:215px; min-height:47px; padding-inline:20px; font-size:.82rem; }
  .round-play { width:47px; height:47px; }
  .server-status { margin-top:15px; font-size:.66rem; }
  .scroll-cue { display:none; }
  .feature-card { min-height:112px; }
  .feature-card h2 { font-size:.6rem; line-height:1.2; }
  .command-section { padding-top:12px; }
  .news-item { grid-template-columns:72px minmax(0,1fr) 14px; gap:8px; }
  .news-item img { width:72px; height:43px; }
  .news-item b { font-size:.72rem; }
  .news-item small { font-size:.62rem; }
  .trailer-preview { height:150px; }
  .mission { grid-template-columns:20px minmax(0,1fr); }
  .mission small { grid-column:2; padding-bottom:7px; }
  .stat > span { font-size:1.5rem; }
  .stat b { font-size:1.05rem; }
  .stat small { font-size:.53rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:25px 14px; }
  .footer-brand img { width:160px; }
  .footer-links h2 { font-size:.64rem; }
  .footer-links a { font-size:.65rem; }
  .footer-bottom { flex-direction:column; gap:5px; }
  .gate-card { padding:39px 22px 31px; }
  .gate-copy { font-size:.83rem; }
  .modal { padding:12px; }
  .modal-card { padding:29px 20px 22px; }
  .cinematic-player { aspect-ratio:16/10; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  #embersCanvas, .lightning-stage { display:none; }
}


/* FINAL FIX: clean empty area behind NECROVIX logo */
.hero-logo-clean-zone {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: min(760px, 52vw);
  height: 330px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(4,3,7,.99) 0%,
      rgba(4,3,7,.98) 42%,
      rgba(4,3,7,.90) 58%,
      rgba(4,3,7,.58) 72%,
      transparent 88%);
}

/* Keep content above the clean zone. */
.hero__content { z-index: 4 !important; }

.server-status {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: stretch !important;
  text-align: center !important;
  margin: 19px auto 0 !important;
  gap: 8px !important;
}

@media (min-width: 1041px) {
  .hero { min-height: clamp(690px, 78vh, 810px) !important; }
  .hero__content { padding: 35px 0 110px !important; }
  .hero-copy { width: min(650px, 84vw) !important; }
  .hero-logo { width: min(520px, 68vw) !important; max-width: 520px !important; }
  .hero-art { object-fit: contain !important; top: auto !important; bottom: 0 !important; height: 92% !important; }
  .hero-art--left { width: 46% !important; object-position: left bottom !important; }
  .hero-art--right { width: 54% !important; object-position: right bottom !important; }
}
@media (max-width: 720px) {
  .hero-logo-clean-zone { width: 94vw; height: 285px; top: 45%; }
}