:root {
  --bg: #030308;
  --panel: rgba(7, 5, 14, 0.91);
  --panel-soft: rgba(11, 7, 21, 0.82);
  --line: rgba(163, 115, 202, 0.23);
  --violet: #9d4de5;
  --violet-bright: #c77cff;
  --ember: #ff5a23;
  --ember-light: #ffb25d;
  --text: #d7ccd9;
  --muted: #887d90;
  --green: #64e744;
  --gold: #d99a59;
  --display: "Cinzel", Georgia, serif;
  --body: "Rajdhani", "Trebuchet MS", sans-serif;
  --shell: min(1400px, calc(100% - 64px));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 52% 22%, rgba(82, 13, 135, 0.2), transparent 29rem),
    radial-gradient(circle at 93% 58%, rgba(160, 29, 9, 0.12), transparent 25rem),
    #030308;
  font-family: var(--body);
  font-size: 15px;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  opacity: 0.3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }

.shell { width: var(--shell); margin-inline: auto; }

.particle-field {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Header */
.site-header {
  position: relative;
  z-index: 30;
  height: 82px;
  display: grid;
  grid-template-columns: 330px 1fr 220px;
  align-items: center;
  border-bottom: 1px solid rgba(156, 102, 201, .14);
  background: linear-gradient(180deg, rgba(2,2,7,.99), rgba(5,3,10,.92));
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
}

.brand {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 14px;
  overflow: hidden;
}

.brand img {
  width: 315px;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(1.15);
}

.main-nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.15vw, 38px);
}

.main-nav a {
  position: relative;
  display: grid;
  height: 100%;
  place-items: center;
  color: #d4cdd7;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  transition: color .25s ease, text-shadow .25s ease;
}

.main-nav a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--ember-light), transparent);
  box-shadow: 0 0 12px var(--ember);
  transition: width .25s ease, left .25s ease;
}

.main-nav a:hover, .main-nav a.active { color: #fff; text-shadow: 0 0 14px #9a50db; }
.main-nav a:hover::after, .main-nav a.active::after { left: 10%; width: 80%; }

.menu-toggle { display: none; }

.ember-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 38px;
  color: #ffd19b;
  border: 1px solid rgba(255, 111, 42, .55);
  background:
    linear-gradient(90deg, transparent, rgba(92, 14, 8, .58), transparent),
    rgba(13, 4, 5, .85);
  box-shadow: inset 0 0 15px rgba(255,75,21,.14), 0 0 12px rgba(255,75,21,.25);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.ember-button::before, .ember-button::after {
  position: absolute;
  inset: -5px 12px;
  z-index: -1;
  content: "";
  border-top: 1px solid #74240f;
  border-bottom: 1px solid #74240f;
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
}

.ember-button::after {
  inset: -9px 22px;
  border-color: rgba(255,69,16,.32);
  filter: blur(2px);
}

.ember-button:hover {
  color: #fff2d5;
  transform: translateY(-2px);
  box-shadow: inset 0 0 25px rgba(255,75,21,.28), 0 0 24px rgba(255,75,21,.5);
}

.header-cta { justify-self: center; min-width: 170px; }

/* Hero */
.hero {
  position: relative;
  min-height: 485px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center 26%, rgba(89,22,153,.45), transparent 40%),
    linear-gradient(180deg, rgba(20,5,40,.15), #05020a 93%);
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 27% 32%, rgba(135,29,221,.13), transparent 18%),
    radial-gradient(circle at 73% 45%, rgba(116,14,195,.12), transparent 21%),
    linear-gradient(120deg, transparent 20%, rgba(126,60,205,.06) 50%, transparent 70%);
  animation: aurora 9s ease-in-out infinite alternate;
}

.hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  content: "";
  background: linear-gradient(transparent, #030208), repeating-linear-gradient(115deg, transparent 0 29px, rgba(136,31,205,.045) 30px 31px);
}

.hero-scenery { position: absolute; inset: 0; }
.hero-scenery::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent 12%, #08020c 35%, #08020c 65%, transparent 89%);
  opacity: .35;
}

.castle-art, .dragon-art {
  position: absolute;
  width: clamp(350px, 31vw, 520px);
  height: 250px;
  object-fit: cover;
  opacity: .86;
  filter: saturate(1.3) contrast(1.08);
  mix-blend-mode: screen;
}

.castle-art { top: 0; left: 0; object-position: left top; mask-image: linear-gradient(90deg, #000 55%, transparent); }
.dragon-art { top: 2px; right: 0; object-position: right top; mask-image: linear-gradient(270deg, #000 58%, transparent); animation: dragon-breathe 7s ease-in-out infinite; }

.lightning {
  position: absolute;
  z-index: 3;
  width: 2px;
  height: 200px;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 7px #fff, 0 0 18px #9a39ff, 0 0 32px #6e14b8;
  clip-path: polygon(50% 0, 100% 26%, 57% 24%, 85% 55%, 39% 48%, 62% 100%, 0 55%, 41% 59%, 12% 20%, 44% 25%);
  animation: lightning-flash 6s linear infinite;
}
.lightning-one { top: 25px; left: 33%; transform: rotate(21deg); }
.lightning-two { top: 0; right: 28%; height: 160px; animation-delay: 3.1s; transform: rotate(-16deg); }

.hero-layout {
  position: relative;
  z-index: 5;
  min-height: 485px;
  display: grid;
  grid-template-columns: 265px minmax(480px, 1fr) 250px;
  gap: 16px;
  align-items: end;
  padding-bottom: 18px;
}

.ornate-panel, .data-panel {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(13,8,22,.94), rgba(3,3,8,.96));
  box-shadow: inset 0 0 35px rgba(0,0,0,.75), 0 12px 30px rgba(0,0,0,.45);
}

.ornate-panel { min-height: 318px; padding: 13px 20px 14px; text-align: center; }
.ornate-panel::before, .data-panel::before {
  position: absolute;
  inset: 5px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(112,68,137,.09);
}

.panel-corner { position: absolute; width: 26px; height: 26px; opacity: .65; }
.panel-corner::before, .panel-corner::after { position: absolute; content: ""; background: #815496; }
.panel-corner::before { width: 26px; height: 1px; }
.panel-corner::after { width: 1px; height: 26px; }
.corner-tl { top: -4px; left: -4px; }
.corner-tr { top: -4px; right: -4px; transform: rotate(90deg); }
.corner-br { right: -4px; bottom: -4px; transform: rotate(180deg); }
.corner-bl { bottom: -4px; left: -4px; transform: rotate(270deg); }

.ornate-panel h2, .data-panel h2, .footer-inner h2 {
  margin: 0;
  color: #d8b6ee;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 0 0 13px rgba(174,78,239,.5);
}

.ornate-panel h2 { padding-bottom: 10px; border-bottom: 1px solid rgba(141,93,166,.16); }

.login-form { display: grid; gap: 7px; margin-top: 9px; }
.login-form label { position: relative; display: block; }
.login-form input {
  width: 100%;
  height: 37px;
  padding: 0 10px 0 34px;
  color: #eee3ef;
  outline: none;
  border: 1px solid rgba(92,67,107,.2);
  background: rgba(1,1,5,.7);
  transition: border-color .2s, box-shadow .2s;
}
.login-form input:focus { border-color: rgba(174,85,231,.55); box-shadow: 0 0 13px rgba(130,40,190,.2); }
.login-form input::placeholder { color: #746c78; }
.field-icon { position: absolute; z-index: 2; top: 9px; left: 11px; color: #b17a50; }

.violet-button {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  color: #e9dbef;
  border: 1px solid #6e3a8a;
  background: linear-gradient(90deg, #190c28, #4b0d76 50%, #1b0b2d);
  box-shadow: inset 0 0 12px rgba(203,113,255,.18), 0 0 10px rgba(84,18,123,.32);
  font-family: var(--display);
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}
.violet-button:hover { filter: brightness(1.35); transform: translateY(-1px); }
.violet-button.compact { min-height: 30px; margin-top: 8px; font-size: 12px; }
.minor-link { display: block; margin: 7px 0 5px; color: #9e84ae; font-size: 11px; }
.minor-link:hover { color: var(--violet-bright); }
.connect-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; color: #7c6d83; font-size: 10px; text-transform: uppercase; }
.connect-line::before, .connect-line::after { height: 1px; flex: 1; content: ""; background: rgba(130,86,148,.2); }
.discord-link { color: #8f69ff; font-weight: 600; }
.discord-link b { display: inline-grid; width: 20px; height: 17px; margin-right: 4px; place-items: center; border-radius: 6px; color: #fff; background: #6854e7; }

.hero-center { align-self: center; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-top: 10px; }
.hero-emblem-wrap { position: relative; width: min(100%, 705px); overflow: hidden; }
.hero-emblem-wrap::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #09020e 0, transparent 10%, transparent 90%, #09020e 100%);
  pointer-events: none;
}
.hero-emblem {
  width: 100%;
  max-height: 390px;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: screen;
  filter: contrast(1.08) saturate(1.12);
  animation: emblem-float 5s ease-in-out infinite;
}
.sigil-glow {
  position: absolute;
  top: 32%;
  left: 50%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,35,213,.42), transparent 67%);
  filter: blur(15px);
  transform: translate(-50%, -50%);
  animation: sigil-pulse 3.5s ease-in-out infinite;
}
.hero-cta { min-width: 205px; margin-top: -10px; font-size: 19px; }
.hero-cta .lock { margin-right: 12px; color: #e6b073; font-size: 24px; }

.status-panel { padding-inline: 18px; }
.server-name { margin: 3px 0 6px; color: #806f87; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.online { padding: 8px 0; color: #7eed55; border-block: 1px solid rgba(109,72,125,.15); font-family: var(--display); font-size: 16px; text-transform: uppercase; text-shadow: 0 0 10px rgba(91,236,53,.45); }
.online span { display: inline-block; width: 11px; height: 11px; margin-right: 7px; border: 2px solid var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); animation: online-pulse 2s infinite; }
.server-stats { margin: 0; }
.server-stats div { padding: 7px 0; border-bottom: 1px solid rgba(112,75,130,.12); }
.server-stats dt { color: #807483; font-size: 10px; }
.server-stats dd { margin: 2px 0 0; color: #db9e73; font-family: var(--display); font-size: 19px; text-shadow: 0 0 12px rgba(220,89,47,.25); }
.server-stats div:last-child dd { color: #c7a17f; font-family: var(--body); font-size: 11px; }

/* Feature cards */
.features {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(225px, 1.8fr);
  gap: 10px;
  margin-top: -3px;
}

.feature-card, .gear-banner {
  position: relative;
  min-height: 144px;
  overflow: hidden;
  border: 1px solid rgba(129,79,155,.27);
  background: #08050d;
  box-shadow: 0 10px 26px rgba(0,0,0,.48), inset 0 0 20px rgba(87,27,120,.08);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.feature-card:hover, .gear-banner:hover { z-index: 2; transform: translateY(-5px); border-color: rgba(185,92,236,.62); box-shadow: 0 14px 32px rgba(0,0,0,.6), 0 0 18px rgba(113,30,176,.18); }
.feature-image { height: 91px; overflow: hidden; }
.feature-image::after { position: absolute; inset: 45px 0 auto; height: 50px; content: ""; background: linear-gradient(transparent, #08050d); }
.feature-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.22) contrast(1.08); transition: transform .65s ease, filter .65s ease; }
.feature-card:hover img { transform: scale(1.08); filter: saturate(1.5) contrast(1.12); }
.feature-card h3 { position: relative; margin: -1px 4px 2px; color: #bda3d2; font-family: var(--display); font-size: 12px; font-weight: 500; text-align: center; text-transform: uppercase; }
.feature-card p { position: relative; margin: 0 3px 7px; color: #807783; font-size: 10px; line-height: 1.15; text-align: center; }
.gear-banner { display: flex; align-items: center; }
.gear-banner img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.25) contrast(1.08); transition: transform .6s; }
.gear-banner:hover img { transform: scale(1.035); }

/* Data panels */
.dashboard {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1.25fr 1.4fr 1.2fr 1.35fr;
  gap: 12px;
  padding: 10px 0 14px;
}
.data-panel { min-width: 0; padding: 10px 14px 8px; }
.data-panel header { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; }
.data-panel header a { color: #9f7466; font-size: 9px; text-transform: uppercase; }
.data-panel header a:hover { color: var(--ember-light); }
.news-list, .drop-list, .rank-list { position: relative; margin: 0; padding: 0; list-style: none; }
.news-list li { display: grid; grid-template-columns: 14px 1fr auto; gap: 5px; align-items: center; min-height: 28px; color: #958b99; font-size: 10px; }
.news-list .gem { color: #a64aea; font-size: 8px; }
.news-list time, .drop-list time { color: #6f6672; white-space: nowrap; }
.rank-list { counter-reset: ranking; }
.rank-list li { display: grid; grid-template-columns: 20px 25px minmax(80px, 1fr) auto auto; gap: 4px; align-items: center; min-height: 26px; color: #a79eaa; font-size: 10px; }
.rank-list b { color: #d69c62; font-family: var(--display); font-size: 17px; font-weight: 400; }
.rank-list .avatar { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(134,74,161,.25); border-radius: 50%; color: #e5a66c; background: #090611; }
.rank-list small, .rank-list em { color: #8f4cb6; font-size: 9px; font-style: normal; white-space: nowrap; }
.rank-list em { color: #9951b7; text-align: right; }
.guilds li { grid-template-columns: 20px 25px minmax(80px, 1fr) auto; }
.drop-list li { display: grid; grid-template-columns: 27px 1fr auto; gap: 5px; align-items: center; min-height: 28px; color: #c19b7d; font-size: 10px; }
.drop-list li > span:nth-child(2) { line-height: 1; }
.drop-list small { display: block; margin-top: 2px; color: #c66e4c; font-size: 9px; }
.item-icon { display: grid; width: 23px; height: 23px; place-items: center; color: #ff7b38; border: 1px solid #762414; background: #160807; box-shadow: inset 0 0 8px rgba(255,69,18,.17); font-size: 15px; }
.item-icon.sword { font-size: 24px; transform: rotate(35deg); }

/* Footer */
.site-footer { position: relative; z-index: 5; border-top: 1px solid rgba(114,73,138,.2); background: rgba(4,3,9,.94); }
.site-footer::before { position: absolute; top: -1px; left: 32%; width: 35%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(176,93,235,.45), transparent); }
.footer-inner { min-height: 120px; display: grid; grid-template-columns: 1.65fr 1.2fr 1.05fr 1fr; gap: 28px; align-items: center; padding-block: 12px; }
.footer-about { display: grid; grid-template-columns: 245px 1fr; gap: 15px; align-items: center; }
.footer-about img { width: 245px; mix-blend-mode: screen; }
.footer-about p, .footer-community p, .copyright { color: #77707c; font-size: 10px; line-height: 1.55; }
.footer-links h2, .footer-community h2 { margin-bottom: 8px; font-size: 11px; }
.footer-links div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 20px; }
.footer-links a { color: #706877; font-size: 9px; text-transform: uppercase; transition: color .2s; }
.footer-links a:hover { color: #c77cff; }
.discord-pill { display: inline-flex; padding: 6px 10px; color: #d8d0ff; border: 1px solid #5844ac; background: rgba(64,43,146,.42); font-size: 10px; text-transform: uppercase; }
.copyright { align-self: start; margin-top: 28px; }

/* Motion */
@keyframes aurora { 0% { transform: scale(1) translateX(-1%); filter: hue-rotate(0deg); } 100% { transform: scale(1.08) translateX(1%); filter: hue-rotate(18deg); } }
@keyframes dragon-breathe { 0%, 100% { transform: translateY(0) scale(1); filter: saturate(1.25) contrast(1.08); } 50% { transform: translateY(-5px) scale(1.015); filter: saturate(1.5) contrast(1.12) brightness(1.08); } }
@keyframes emblem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sigil-pulse { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes online-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; box-shadow: 0 0 18px var(--green); } }
@keyframes lightning-flash { 0%, 20%, 22%, 24%, 100% { opacity: 0; } 21%, 23% { opacity: .8; } }

@media (max-width: 1250px) {
  :root { --shell: min(1160px, calc(100% - 38px)); }
  .site-header { grid-template-columns: 250px 1fr 165px; }
  .brand img { width: 235px; }
  .main-nav { gap: 15px; }
  .main-nav a { font-size: 10px; }
  .header-cta { min-width: 145px; padding-inline: 20px; font-size: 15px; }
  .hero-layout { grid-template-columns: 235px minmax(390px, 1fr) 225px; }
  .features { grid-template-columns: repeat(5, 1fr); }
  .gear-banner { grid-column: 1 / -1; min-height: 82px; }
  .gear-banner img { object-position: center 48%; }
  .dashboard { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr; }
  .copyright { display: none; }
}

@media (max-width: 900px) {
  :root { --shell: min(760px, calc(100% - 30px)); }
  .site-header { height: 72px; grid-template-columns: 230px 1fr 52px; }
  .brand { padding-left: 7px; }
  .header-cta { justify-self: end; min-width: 138px; }
  .menu-toggle {
    position: relative;
    z-index: 3;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 10px;
    align-content: center;
    gap: 5px;
    border: 1px solid rgba(160,88,198,.35);
    background: rgba(16,7,25,.85);
    cursor: pointer;
  }
  .menu-toggle span { display: block; height: 1px; background: #d3b0e8; transition: transform .25s, opacity .25s; }
  .menu-toggle.open span:first-child { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .main-nav {
    position: absolute;
    top: 72px;
    right: 0;
    width: min(330px, 100%);
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(158,87,198,.25);
    background: rgba(4,2,9,.98);
    box-shadow: 0 20px 40px #000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { height: 42px; }
  .hero-layout { grid-template-columns: 1fr 1fr; padding-top: 15px; }
  .hero-center { grid-column: 1 / -1; grid-row: 1; }
  .hero-emblem { max-height: 345px; }
  .hero-cta { margin-top: -5px; }
  .ornate-panel { min-height: 315px; }
  .features { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
  .gear-banner { grid-column: span 2; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 24px); }
  .site-header { grid-template-columns: 1fr 46px; }
  .brand img { width: 220px; }
  .header-cta { display: none; }
  .hero-layout { display: flex; flex-direction: column; align-items: stretch; }
  .hero-center { order: -1; }
  .hero-emblem-wrap { width: calc(100% + 24px); margin-left: -12px; }
  .hero-emblem { height: 270px; object-fit: cover; }
  .hero-cta { align-self: center; margin-top: -6px; }
  .ornate-panel { width: 100%; }
  .castle-art, .dragon-art { width: 70%; opacity: .45; }
  .features { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gear-banner { grid-column: 1 / -1; }
  .dashboard { grid-template-columns: 1fr; }
  .footer-inner { display: block; padding-block: 22px; }
  .footer-about { display: block; }
  .footer-about img { width: 230px; margin-bottom: 8px; }
  .footer-links, .footer-community { margin-top: 20px; }
}

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