/* ==========================================================================
   LOKI DESIGN SYSTEM  —  loki.ragnarevival.com
   One stylesheet for the whole site. Page files should only add small,
   page-specific rules in css/pages/<module>.css using these tokens.
   Prefix: lk-   (see css/DESIGN.md for usage)
   ========================================================================== */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/baloo2-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
/* Metric-matched fallbacks: until Inter / Baloo 2 have loaded, text is drawn in Arial (Roboto on Android) scaled to
   the same average width and line metrics, so the swap to the web fonts does not move the layout (CLS).
   size-adjust = measured width ratio on the site's own text; ascent/descent = web font metric / size-adjust;
   unicode-range = the latin subset of the web fonts, so other scripts still fall through to the system fonts. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 105.4%; ascent-override: 91.91%; descent-override: 22.89%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 101.4%; ascent-override: 95.54%; descent-override: 23.79%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback Android'; src: local('Roboto'), local('Roboto-Regular'); font-weight: 100 549; size-adjust: 106.9%; ascent-override: 90.62%; descent-override: 22.56%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback Android'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 550 900; size-adjust: 107.8%; ascent-override: 89.87%; descent-override: 22.38%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2 Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 91.9%; ascent-override: 117.3%; descent-override: 57.02%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2 Fallback Android'; src: local('Roboto Bold'), local('Roboto-Bold'); font-weight: 100 900; size-adjust: 98.2%; ascent-override: 109.78%; descent-override: 53.36%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  /* surfaces (deep night purple) */
  --lk-bg: #0b0817;
  --lk-bg-2: #100b20;
  --lk-surface: #151027;
  --lk-surface-2: #1b1532;
  --lk-surface-3: #241b42;
  --lk-overlay: rgba(11, 8, 23, .86);

  /* lines */
  --lk-line: rgba(176, 140, 255, .14);
  --lk-line-2: rgba(176, 140, 255, .24);
  --lk-line-strong: rgba(176, 140, 255, .42);

  /* text */
  --lk-text: #eeeaf9;
  --lk-text-2: #bdb5d6;
  --lk-text-3: #8f87ad;
  --lk-text-on-brand: #ffffff;

  /* brand purple (kept from the existing identity) */
  --lk-purple-200: #ddc8ff;
  --lk-purple-300: #c9a3ff;
  --lk-purple-400: #b77dff;
  --lk-purple-500: #a135ff;
  --lk-purple-600: #8b2cf0;
  --lk-purple-700: #6d28d9;
  --lk-purple-900: #2a1052;

  /* accents */
  --lk-blue-300: #a9c4ff;
  --lk-blue-400: #8fb4ff;
  --lk-blue-500: #4d7cff;
  --lk-gold-300: #ffe08a;
  --lk-gold-400: #f6c453;
  --lk-gold-500: #e0a526;
  --lk-silver: #cfd6e6;
  --lk-bronze: #e3a173;
  --lk-discord: #5865f2;

  /* status */
  --lk-success: #34d399;
  --lk-success-bg: rgba(52, 211, 153, .12);
  --lk-danger: #fb7185;
  --lk-danger-bg: rgba(251, 113, 133, .12);
  --lk-warning: #fbbf24;
  --lk-warning-bg: rgba(251, 191, 36, .12);
  --lk-info: #8fb4ff;
  --lk-info-bg: rgba(77, 124, 255, .13);

  /* gradients */
  --lk-grad-brand: linear-gradient(135deg, #7c3aed 0%, #a135ff 55%, #c77dff 100%);
  --lk-grad-brand-hover: linear-gradient(135deg, #8b4cf6 0%, #b04dff 55%, #d595ff 100%);
  --lk-grad-gold: linear-gradient(135deg, #ffe08a 0%, #f6c453 45%, #e0a526 100%);
  --lk-grad-text: linear-gradient(135deg, #e3ccff 0%, #b77dff 55%, #8fb4ff 100%);
  --lk-grad-surface: linear-gradient(180deg, rgba(33, 24, 60, .92) 0%, rgba(21, 16, 39, .96) 100%);

  /* type */
  --lk-font: 'Inter', 'Inter Fallback', 'Inter Fallback Android', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --lk-font-display: 'Baloo 2', 'Baloo 2 Fallback', 'Baloo 2 Fallback Android', 'Inter', system-ui, sans-serif;
  --lk-fs-xs: .75rem;
  --lk-fs-sm: .875rem;
  --lk-fs-md: 1rem;
  --lk-fs-lg: 1.125rem;
  --lk-fs-xl: 1.375rem;
  --lk-fs-2xl: 1.75rem;
  --lk-fs-3xl: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  --lk-fs-4xl: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);

  /* shape */
  --lk-radius-xs: 6px;
  --lk-radius-sm: 9px;
  --lk-radius: 14px;
  --lk-radius-lg: 20px;
  --lk-radius-pill: 999px;

  /* depth */
  --lk-shadow-sm: 0 2px 8px rgba(4, 2, 12, .35);
  --lk-shadow: 0 14px 34px rgba(4, 2, 12, .5);
  --lk-shadow-lg: 0 24px 60px rgba(4, 2, 12, .6);
  --lk-glow: 0 0 0 1px rgba(161, 53, 255, .35), 0 10px 32px rgba(124, 58, 237, .32);
  --lk-ring: 0 0 0 3px rgba(183, 125, 255, .55);

  /* layout */
  --lk-container: 1200px;
  --lk-container-wide: 1400px;
  --lk-container-narrow: 780px;
  --lk-gutter: 24px;
  --lk-header-h: 72px;
  --lk-ease: cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 640px) { :root { --lk-gutter: 16px; --lk-header-h: 64px; } }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--lk-header-h) + 16px); }
html, body { overflow-x: clip; max-width: 100%; }
/* Site-wide artwork behind every page: fixed, faded towards the centre where the content sits.
   A fixed pseudo-element instead of background-attachment: fixed, which phones ignore. */
body.lk-body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 75% at 50% 42%, rgba(11, 8, 23, .82) 0%, rgba(11, 8, 23, .6) 55%, rgba(11, 8, 23, .28) 100%),
    linear-gradient(180deg, rgba(11, 8, 23, .25) 0%, rgba(11, 8, 23, .45) 55%, rgba(11, 8, 23, .85) 100%),
    url('../img/lk/bg-site.webp') center top / cover no-repeat;
  /* same layers, AVIF where supported (browsers without image-set()/type() keep the WebP shorthand above) */
  background-image:
    radial-gradient(ellipse 58% 75% at 50% 42%, rgba(11, 8, 23, .82) 0%, rgba(11, 8, 23, .6) 55%, rgba(11, 8, 23, .28) 100%),
    linear-gradient(180deg, rgba(11, 8, 23, .25) 0%, rgba(11, 8, 23, .45) 55%, rgba(11, 8, 23, .85) 100%),
    image-set(url('../img/lk/bg-site.avif') type('image/avif'), url('../img/lk/bg-site.webp') type('image/webp'));
}
@media (max-width: 640px) {
  body.lk-body::before {
    background:
      linear-gradient(180deg, rgba(11, 8, 23, .5) 0%, rgba(11, 8, 23, .72) 45%, rgba(11, 8, 23, .9) 100%),
      url('../img/lk/bg-site-mobile.webp') 22% top / cover no-repeat;
    background-image:
      linear-gradient(180deg, rgba(11, 8, 23, .5) 0%, rgba(11, 8, 23, .72) 45%, rgba(11, 8, 23, .9) 100%),
      image-set(url('../img/lk/bg-site-mobile.avif') type('image/avif'), url('../img/lk/bg-site-mobile.webp') type('image/webp'));
  }
}
body.lk-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--lk-font);
  font-size: var(--lk-fs-md);
  line-height: 1.6;
  color: var(--lk-text);
  background-color: var(--lk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}
:where(.lk-body) :where(img, video, canvas, iframe) { max-width: 100%; }
:where(.lk-body) img { height: auto; }
:where(.lk-body) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--lk-font-display);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}
:where(.lk-body) h1 { font-size: var(--lk-fs-3xl); font-weight: 800; }
:where(.lk-body) h2 { font-size: var(--lk-fs-2xl); }
:where(.lk-body) h3 { font-size: var(--lk-fs-xl); }
:where(.lk-body) h4 { font-size: var(--lk-fs-lg); }
:where(.lk-body) :where(h5, h6) { font-size: var(--lk-fs-md); }
:where(.lk-body) p { margin: 0 0 1em; }
:where(.lk-body) a { color: var(--lk-purple-300); text-decoration: none; transition: color .15s var(--lk-ease); }
:where(.lk-body) a:hover { color: #fff; }
/* plain links inside running text are underlined, not only coloured (WCAG 1.4.1, Lighthouse link-in-text-block);
   links with a class (buttons, cards, nav) keep their own look */
:is(.lk-auth__intro, .lk-help, p.lk-auth__alt, .lk-accordion__body, .lk-legal :is(p, li)) a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(201, 163, 255, .5);
}
:is(.lk-auth__intro, .lk-help, p.lk-auth__alt, .lk-accordion__body, .lk-legal :is(p, li)) a:not([class]):hover { text-decoration-color: currentColor; }
:where(.lk-body) :where(strong, b) { font-weight: 700; color: #fff; }
:where(.lk-body) small { font-size: var(--lk-fs-sm); }
:where(.lk-body) hr { border: 0; height: 1px; background: var(--lk-line); margin: 32px 0; }
:where(.lk-body) :where(code, kbd) {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .9em;
  background: rgba(161, 53, 255, .14);
  color: var(--lk-purple-200);
  padding: .1em .45em;
  border-radius: var(--lk-radius-xs);
}
.lk-body ::selection { background: rgba(161, 53, 255, .45); color: #fff; }
.lk-body :focus { outline: none; }
.lk-body :focus-visible { outline: none; box-shadow: var(--lk-ring); border-radius: var(--lk-radius-xs); }
.lk-body [hidden] { display: none !important; }

.lk-skip {
  position: absolute; left: 16px; top: -60px; z-index: 5000;
  background: var(--lk-purple-500); color: #fff !important; padding: 10px 16px;
  border-radius: var(--lk-radius-sm); font-weight: 600; transition: top .2s;
}
.lk-skip:focus { top: 12px; }
.lk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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

/* ---------- Layout ---------- */
.lk-container { width: 100%; max-width: calc(var(--lk-container) + var(--lk-gutter) * 2); margin-inline: auto; padding-inline: var(--lk-gutter); }
.lk-container--wide { max-width: calc(var(--lk-container-wide) + var(--lk-gutter) * 2); }
.lk-container--narrow { max-width: calc(var(--lk-container-narrow) + var(--lk-gutter) * 2); }
.lk-main { flex: 1 0 auto; position: relative; padding-bottom: 72px; }
.lk-main--flush { padding-bottom: 0; }
.lk-main > .lk-container { padding-top: 8px; }
.lk-section { margin-block: 40px; }
.lk-section:first-child { margin-top: 0; }
.lk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.lk-section-head h2, .lk-section-title { margin: 0; font-size: var(--lk-fs-2xl); }
.lk-section-head p { margin: 6px 0 0; color: var(--lk-text-2); max-width: 64ch; }
.lk-stack { display: flex; flex-direction: column; gap: 16px; }
.lk-stack--lg { gap: 28px; }
.lk-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lk-row--between { justify-content: space-between; }
.lk-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lk-grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lk-grid-4 { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lk-split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
@media (max-width: 1024px) { .lk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lk-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .lk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lk-grid-2, .lk-grid-3, .lk-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* text helpers */
.lk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--lk-font); font-size: var(--lk-fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lk-purple-300);
}
.lk-eyebrow i { color: var(--lk-gold-400); }
.lk-lead { font-size: var(--lk-fs-lg); color: var(--lk-text-2); max-width: 62ch; }
.lk-muted { color: var(--lk-text-3) !important; }
.lk-dim { color: var(--lk-text-2) !important; }
.lk-text-gradient { background: var(--lk-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.lk-gold { color: var(--lk-gold-400) !important; }
.lk-success { color: var(--lk-success) !important; }
.lk-danger { color: var(--lk-danger) !important; }
.lk-center { text-align: center; }
.lk-right { text-align: right; }
.lk-nowrap { white-space: nowrap; }
.lk-num { font-variant-numeric: tabular-nums; }
.lk-mt-0 { margin-top: 0 !important; } .lk-mb-0 { margin-bottom: 0 !important; }
.lk-mt { margin-top: 24px !important; } .lk-mb { margin-bottom: 24px !important; }
@media (max-width: 480px) { .lk-hide-xs { display: none !important; } }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.lk-header {
  position: sticky; top: 0; z-index: 1000;
  height: var(--lk-header-h);
  background: rgba(11, 8, 23, .78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--lk-line);
  transition: background .2s var(--lk-ease), box-shadow .2s var(--lk-ease);
}
.lk-header.is-scrolled { background: rgba(11, 8, 23, .94); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.lk-header:not(.is-scrolled) { border-bottom-color: transparent; }
.lk-header--overlay:not(.is-scrolled) { background: linear-gradient(180deg, rgba(8, 5, 18, .85), rgba(8, 5, 18, 0)); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lk-header__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.lk-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none !important; }
.lk-brand__logo { height: 36px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(161, 53, 255, .45)); }
.lk-brand__tag {
  font-family: var(--lk-font-display); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  color: var(--lk-gold-300); padding: 1px 8px 0; border: 1px solid rgba(246, 196, 83, .45);
  border-radius: var(--lk-radius-xs); line-height: 20px; background: rgba(246, 196, 83, .08);
}
.lk-online {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 6px 12px; border-radius: var(--lk-radius-pill);
  background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .25);
  color: var(--lk-text-2); font-size: var(--lk-fs-sm); line-height: 1; text-decoration: none !important;
}
.lk-online:hover { border-color: rgba(52, 211, 153, .5); color: #fff; }
.lk-online b { color: #fff; font-variant-numeric: tabular-nums; }
.lk-online__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lk-success); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: lk-pulse 2.2s infinite; }
@keyframes lk-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

.lk-nav { display: flex; align-items: center; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.lk-nav__item { position: relative; }
.lk-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border-radius: var(--lk-radius-sm);
  color: var(--lk-text-2) !important; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color .15s var(--lk-ease), background .15s var(--lk-ease);
}
.lk-nav__link:hover, .lk-nav__item.is-open > .lk-nav__link { color: #fff !important; background: rgba(176, 140, 255, .1); }
.lk-nav__link.is-active { color: #fff !important; }
.lk-nav__link.is-active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -16px; height: 2px; border-radius: 2px; background: var(--lk-grad-brand); }
.lk-nav__caret { font-size: 10px; opacity: .7; transition: transform .2s var(--lk-ease); }
.lk-nav__item.is-open .lk-nav__caret { transform: rotate(180deg); }
.lk-nav__link--free { color: var(--lk-gold-300) !important; }
.lk-nav__link--free i { color: var(--lk-gold-400); }
.lk-nav__link--free:hover { color: var(--lk-gold-300) !important; background: rgba(246, 196, 83, .1); }

.lk-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px);
  min-width: 240px; padding: 8px;
  background: rgba(21, 16, 39, .98); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius);
  box-shadow: var(--lk-shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--lk-ease), transform .16s var(--lk-ease), visibility 0s .16s;
  z-index: 1100;
}
.lk-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.lk-nav__item.is-open > .lk-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.lk-menu--right { left: auto; right: 0; transform: translate(0, 6px); }
.lk-nav__item.is-open > .lk-menu--right { transform: translate(0, 0); }
.lk-menu--cols { display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 4px 8px; min-width: 470px; }
.lk-menu__label { display: block; padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lk-text-3); }
.lk-menu__link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--lk-radius-sm);
  color: var(--lk-text) !important; font-size: 14px; font-weight: 500; line-height: 1.3;
}
.lk-menu__link:hover, .lk-menu__link:focus-visible { background: rgba(176, 140, 255, .12); color: #fff !important; }
.lk-menu__link i:first-child { width: 18px; text-align: center; color: var(--lk-purple-400); font-size: 14px; }
.lk-menu__link small { display: block; color: var(--lk-text-3); font-size: 12px; font-weight: 400; }
.lk-menu__ext { margin-left: auto; font-size: 10px !important; color: var(--lk-text-3) !important; width: auto !important; }
.lk-menu hr { margin: 6px 4px; }

.lk-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lk-burger {
  display: none; width: 44px; height: 44px; margin-left: auto; padding: 0;
  border-radius: var(--lk-radius-sm); border: 1px solid var(--lk-line-2); background: rgba(176, 140, 255, .06);
  color: #fff; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.lk-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--lk-ease), opacity .2s; }
.lk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lk-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.lk-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.lk-drawer {
  position: fixed; inset: var(--lk-header-h) 0 0 0; z-index: 990;
  background: rgba(8, 6, 18, .98); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px var(--lk-gutter) 40px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--lk-ease), transform .2s var(--lk-ease), visibility 0s .2s;
}
.lk-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lk-drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.lk-drawer__group { border-bottom: 1px solid var(--lk-line); }
.lk-drawer__link, .lk-drawer__toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 4px; color: var(--lk-text) !important; font-size: 16px; font-weight: 600;
  background: none; border: 0; text-align: left; font-family: inherit; cursor: pointer;
}
.lk-drawer__link i, .lk-drawer__toggle > i:first-child { width: 20px; text-align: center; color: var(--lk-purple-400); }
.lk-drawer__toggle .lk-nav__caret { margin-left: auto; font-size: 12px; }
.lk-drawer__toggle[aria-expanded="true"] .lk-nav__caret { transform: rotate(180deg); }
.lk-drawer__sub { display: none; padding: 0 0 12px 32px; }
.lk-drawer__toggle[aria-expanded="true"] + .lk-drawer__sub { display: block; }
.lk-drawer__sub a { display: flex; align-items: center; gap: 8px; padding: 10px 4px; color: var(--lk-text-2) !important; font-size: 15px; }
.lk-drawer__sub a:hover { color: #fff !important; }
.lk-drawer__online { margin: 20px 0 0; }
body.lk-drawer-open { overflow: hidden; }

@media (max-width: 1180px) {
  .lk-nav__link { padding: 0 9px; font-size: 14px; }
  .lk-brand__tag { display: none; }
}
@media (max-width: 1080px) {
  .lk-nav, .lk-header__actions .lk-hide-mobile, .lk-header .lk-online { display: none; }
  .lk-burger { display: inline-flex; }
}
@media (min-width: 1081px) { .lk-drawer { display: none; } }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.lk-hero {
  position: relative;
  padding: 56px 0 44px; margin-bottom: 24px;
}
/* The page header sits directly on the site artwork. Its ::after is a calm veil behind the title that
   dissolves like a soft shadow (eased curve) from 60px above the hero's bottom edge to 260px below it,
   so there is no line or brightness step; the sides stay lighter so the artwork shows left and right.
   No overflow/isolation on .lk-hero, so the veil (z-index -1) sits behind the first content cards. */
.lk-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 -260px 0;
  background:
    radial-gradient(ellipse 760px 260px at max(30%, calc(50% - 360px)) 150px, rgba(109, 40, 217, .16) 0%, rgba(109, 40, 217, .08) 45%, rgba(109, 40, 217, 0) 100%),
    linear-gradient(180deg,
      rgba(11, 8, 23, .45) 0,
      rgba(11, 8, 23, .45) calc(100% - 320px),
      rgba(11, 8, 23, .43) calc(100% - 280px),
      rgba(11, 8, 23, .38) calc(100% - 240px),
      rgba(11, 8, 23, .31) calc(100% - 200px),
      rgba(11, 8, 23, .225) calc(100% - 160px),
      rgba(11, 8, 23, .14) calc(100% - 120px),
      rgba(11, 8, 23, .07) calc(100% - 80px),
      rgba(11, 8, 23, .02) calc(100% - 40px),
      rgba(11, 8, 23, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 22%, #000 78%, rgba(0, 0, 0, .55));
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 22%, #000 78%, rgba(0, 0, 0, .55));
}
.lk-hero__inner { position: relative; display: flex; flex-direction: column; gap: 12px; }
.lk-hero__crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--lk-fs-sm); color: var(--lk-text-3); }
.lk-hero__crumbs a { color: var(--lk-text-2) !important; }
.lk-hero__crumbs a:hover { color: #fff !important; }
.lk-hero__crumbs i { font-size: 10px; opacity: .6; }
.lk-hero__title { display: flex; align-items: center; gap: 16px; margin: 0 !important; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.lk-hero__icon {
  flex-shrink: 0; display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 16px; background: var(--lk-grad-brand); color: #fff; font-size: 24px;
  box-shadow: 0 10px 30px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lk-hero__lead { margin: 0; max-width: 64ch; color: var(--lk-text-2); font-size: var(--lk-fs-lg); }
.lk-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lk-hero__nav { margin-top: 18px; }
@media (max-width: 640px) {
  .lk-hero { padding: 32px 0 28px; margin-bottom: 16px; }
  .lk-hero::after { bottom: -180px; -webkit-mask-image: none; mask-image: none; }
  .lk-hero__icon { width: 44px; height: 44px; font-size: 19px; border-radius: 12px; }
  .lk-hero__lead { font-size: var(--lk-fs-md); }
}

/* sub navigation (module tabs + page actions) */
.lk-subnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: var(--lk-radius); background: rgba(21, 16, 39, .78); border: 1px solid var(--lk-line); width: fit-content; max-width: 100%; }
.lk-subnav a, .lk-subnav button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--lk-radius-sm);
  color: var(--lk-text-2) !important; font-size: 14px; font-weight: 600; white-space: nowrap; border: 0; background: none; cursor: pointer; font-family: inherit;
}
.lk-subnav a:hover, .lk-subnav button:hover { color: #fff !important; background: rgba(176, 140, 255, .1); }
.lk-subnav a.is-active, .lk-subnav button.is-active, .lk-subnav [aria-selected="true"] { color: #fff !important; background: var(--lk-grad-brand); box-shadow: 0 6px 18px rgba(124, 58, 237, .35); }
.lk-subnav--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.lk-subnav--scroll::-webkit-scrollbar { display: none; }
.lk-pageactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lk-pageactions__label { font-size: var(--lk-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lk-text-3); margin-right: 4px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* legacy submit buttons get the primary look via :where() so .lk-btn--* modifiers always win */
.lk-btn, :where(.lk-body) :where(.button, input[type="submit"], button[type="submit"]:not(.lk-modal__close):not(.lk-flash__close), input[type="button"], input[type="reset"]) {
  --lk-btn-bg: var(--lk-grad-brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border-radius: var(--lk-radius-sm);
  font-family: var(--lk-font); font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: .01em;
  color: #fff !important; text-decoration: none !important; white-space: nowrap; cursor: pointer;
  background: var(--lk-btn-bg); border: 1px solid transparent;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .15s var(--lk-ease), box-shadow .15s var(--lk-ease), background .15s var(--lk-ease), border-color .15s, color .15s;
  -webkit-appearance: none; appearance: none;
}
.lk-btn:hover, :where(.lk-body) :where(.button, input[type="submit"], button[type="submit"], input[type="button"]):hover {
  transform: translateY(-1px); box-shadow: 0 10px 28px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .22); color: #fff !important;
  background: var(--lk-btn-bg-hover, var(--lk-grad-brand-hover));
}
.lk-btn:active { transform: translateY(0); }
.lk-btn:focus-visible { box-shadow: var(--lk-ring); }
.lk-btn[disabled], .lk-btn.is-disabled, :where(.lk-body) input[type="submit"][disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.lk-btn i { font-size: .95em; }
.lk-btn--secondary { --lk-btn-bg: rgba(161, 53, 255, .08); --lk-btn-bg-hover: rgba(161, 53, 255, .18); color: var(--lk-purple-200) !important; border-color: rgba(183, 125, 255, .5); box-shadow: none; }
.lk-btn--secondary:hover { border-color: var(--lk-purple-300); box-shadow: 0 8px 22px rgba(124, 58, 237, .22); }
.lk-btn--ghost { --lk-btn-bg: transparent; --lk-btn-bg-hover: rgba(176, 140, 255, .1); color: var(--lk-text) !important; border-color: var(--lk-line-2); box-shadow: none; }
.lk-btn--ghost:hover { border-color: var(--lk-line-strong); box-shadow: none; }
.lk-btn--gold { --lk-btn-bg: var(--lk-grad-gold); --lk-btn-bg-hover: linear-gradient(135deg, #fff0b8, #ffd76e 45%, #f0b533); color: #2a1600 !important; box-shadow: 0 6px 22px rgba(224, 165, 38, .32), inset 0 1px 0 rgba(255, 255, 255, .5); }
.lk-btn--gold:hover { color: #2a1600 !important; box-shadow: 0 10px 28px rgba(224, 165, 38, .45); }
.lk-btn--discord { --lk-btn-bg: var(--lk-discord); --lk-btn-bg-hover: #6b76ff; box-shadow: 0 6px 20px rgba(88, 101, 242, .35); }
.lk-btn--danger { --lk-btn-bg: rgba(251, 113, 133, .1); --lk-btn-bg-hover: rgba(251, 113, 133, .2); color: #fecdd3 !important; border-color: rgba(251, 113, 133, .45); box-shadow: none; }
.lk-btn--success { --lk-btn-bg: linear-gradient(135deg, #10b981, #34d399); --lk-btn-bg-hover: linear-gradient(135deg, #14c890, #5ee3b1); color: #04261a !important; box-shadow: 0 6px 20px rgba(16, 185, 129, .3); }
.lk-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: var(--lk-radius-xs); }
.lk-btn--lg { min-height: 54px; padding: 0 28px; font-size: 16.5px; border-radius: var(--lk-radius); }
.lk-btn--block { display: flex; width: 100%; }
.lk-btn--icon { width: 44px; padding: 0; }
.lk-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ==========================================================================
   CARDS / PANELS
   ========================================================================== */
.lk-card {
  position: relative; background: var(--lk-grad-surface);
  border: 1px solid var(--lk-line); border-radius: var(--lk-radius-lg);
  box-shadow: var(--lk-shadow); padding: 24px; min-width: 0;
}
.lk-card--flat { box-shadow: none; background: var(--lk-surface); }
.lk-card--tight { padding: 16px; }
.lk-card--flush { padding: 0; overflow: hidden; }
.lk-card--glow { border-color: rgba(183, 125, 255, .45); box-shadow: var(--lk-glow); }
.lk-card--accent::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--lk-grad-brand); }
.lk-card--gold { border-color: rgba(246, 196, 83, .4); }
.lk-card--gold::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--lk-grad-gold); }
.lk-card--link { transition: transform .18s var(--lk-ease), border-color .18s, box-shadow .18s; color: inherit !important; display: block; }
.lk-card--link:hover { transform: translateY(-3px); border-color: var(--lk-line-strong); box-shadow: var(--lk-shadow-lg); }
.lk-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lk-card--flush .lk-card__head { padding: 18px 22px 0; }
.lk-card__title { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: var(--lk-fs-xl); }
.lk-card__title i { color: var(--lk-purple-400); font-size: .85em; }
.lk-card__sub { margin: 4px 0 0; color: var(--lk-text-3); font-size: var(--lk-fs-sm); }
.lk-card__body > :last-child { margin-bottom: 0; }
.lk-card__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lk-line); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lk-icon-tile {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: rgba(161, 53, 255, .14); border: 1px solid rgba(183, 125, 255, .25); color: var(--lk-purple-300); font-size: 18px;
}
.lk-icon-tile--gold { background: rgba(246, 196, 83, .12); border-color: rgba(246, 196, 83, .3); color: var(--lk-gold-400); }
.lk-icon-tile--blue { background: rgba(77, 124, 255, .14); border-color: rgba(143, 180, 255, .3); color: var(--lk-blue-400); }
.lk-icon-tile--green { background: var(--lk-success-bg); border-color: rgba(52, 211, 153, .3); color: var(--lk-success); }

/* stats */
.lk-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.lk-stat { padding: 16px 18px; border-radius: var(--lk-radius); background: rgba(21, 16, 39, .8); border: 1px solid var(--lk-line); min-width: 0; }
.lk-stat__label { display: flex; align-items: center; gap: 8px; font-size: var(--lk-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-text-3); }
.lk-stat__label i { color: var(--lk-purple-400); }
.lk-stat__value { margin-top: 6px; font-family: var(--lk-font-display); font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lk-stat__meta { margin-top: 2px; font-size: var(--lk-fs-sm); color: var(--lk-text-3); }

/* key-value list */
.lk-kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 0; margin: 0; }
.lk-kv dt, .lk-kv dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--lk-line); }
.lk-kv dt { color: var(--lk-text-3); font-size: var(--lk-fs-sm); font-weight: 600; padding-right: 20px; }
.lk-kv dd { color: var(--lk-text); font-weight: 500; overflow-wrap: anywhere; }
.lk-kv > :nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 480px) { .lk-kv { grid-template-columns: 1fr; } .lk-kv dt { border-bottom: 0; padding-bottom: 0; } }

/* badges */
.lk-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--lk-radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; white-space: nowrap;
  background: rgba(161, 53, 255, .14); color: var(--lk-purple-200); border: 1px solid rgba(183, 125, 255, .3);
}
.lk-badge--gold { background: rgba(246, 196, 83, .12); color: var(--lk-gold-300); border-color: rgba(246, 196, 83, .35); }
.lk-badge--green { background: var(--lk-success-bg); color: #a7f3d0; border-color: rgba(52, 211, 153, .35); }
.lk-badge--red { background: var(--lk-danger-bg); color: #fecdd3; border-color: rgba(251, 113, 133, .35); }
.lk-badge--blue { background: var(--lk-info-bg); color: var(--lk-blue-300); border-color: rgba(143, 180, 255, .35); }
.lk-badge--muted { background: rgba(255, 255, 255, .05); color: var(--lk-text-2); border-color: var(--lk-line-2); }
.lk-badge--solid { background: var(--lk-grad-brand); color: #fff; border-color: transparent; }
.lk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lk-text-3); }
.lk-dot--on { background: var(--lk-success); box-shadow: 0 0 10px rgba(52, 211, 153, .7); }
.lk-dot--off { background: var(--lk-danger); }

/* alerts */
.lk-alert {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 20px;
  border-radius: var(--lk-radius); border: 1px solid rgba(143, 180, 255, .3); background: var(--lk-info-bg); color: var(--lk-text);
  font-size: var(--lk-fs-sm); line-height: 1.55;
}
.lk-alert > i:first-child { margin-top: 2px; color: var(--lk-blue-400); font-size: 16px; }
.lk-alert--success { border-color: rgba(52, 211, 153, .35); background: var(--lk-success-bg); }
.lk-alert--success > i:first-child { color: var(--lk-success); }
.lk-alert--danger { border-color: rgba(251, 113, 133, .4); background: var(--lk-danger-bg); }
.lk-alert--danger > i:first-child { color: var(--lk-danger); }
.lk-alert--warning { border-color: rgba(251, 191, 36, .38); background: var(--lk-warning-bg); }
.lk-alert--warning > i:first-child { color: var(--lk-warning); }
.lk-alert p:last-child { margin-bottom: 0; }

/* empty state */
.lk-empty { text-align: center; padding: 48px 20px; color: var(--lk-text-3); }
.lk-empty > i { font-size: 34px; color: var(--lk-purple-400); opacity: .7; margin-bottom: 12px; display: block; }
.lk-empty h2, .lk-empty h3 { color: var(--lk-text); margin-bottom: 6px; }
.lk-empty h2 { font-size: var(--lk-fs-xl); }

/* steps */
.lk-steps { list-style: none; margin: 0; padding: 0; counter-reset: lk-step; display: grid; gap: 12px; }
.lk-steps > li { counter-increment: lk-step; position: relative; padding: 16px 18px 16px 66px; border-radius: var(--lk-radius); background: rgba(21, 16, 39, .8); border: 1px solid var(--lk-line); color: var(--lk-text-2); }
.lk-steps > li::before { content: counter(lk-step); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lk-grad-brand); color: #fff; font-family: var(--lk-font-display); font-weight: 800; font-size: 17px; }
.lk-steps > li strong { color: #fff; }

/* accordion (details/summary) */
.lk-accordion { display: grid; gap: 10px; }
.lk-accordion details { border-radius: var(--lk-radius); background: rgba(21, 16, 39, .8); border: 1px solid var(--lk-line); transition: border-color .15s; }
.lk-accordion details[open], .lk-accordion details:hover { border-color: var(--lk-line-2); }
.lk-accordion summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; font-weight: 600; color: #fff; font-size: 15.5px;
}
.lk-accordion summary::-webkit-details-marker { display: none; }
.lk-accordion summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--lk-purple-300); transition: transform .2s var(--lk-ease); flex-shrink: 0; }
.lk-accordion details[open] summary::after { transform: rotate(180deg); }
.lk-accordion summary:focus-visible { box-shadow: var(--lk-ring); border-radius: var(--lk-radius); }
.lk-accordion__body { padding: 0 18px 16px; color: var(--lk-text-2); font-size: 15px; line-height: 1.7; }
.lk-accordion__body p:last-child { margin-bottom: 0; }

/* tabs (in-page segmented) */
.lk-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--lk-radius-sm); background: rgba(11, 8, 23, .6); border: 1px solid var(--lk-line); }
.lk-tabs a, .lk-tabs button { padding: 7px 14px; border-radius: var(--lk-radius-xs); border: 0; background: none; color: var(--lk-text-2) !important; font: 600 13.5px var(--lk-font); cursor: pointer; white-space: nowrap; }
.lk-tabs a:hover, .lk-tabs button:hover { color: #fff !important; background: rgba(176, 140, 255, .1); }
.lk-tabs .is-active, .lk-tabs [aria-selected="true"] { color: #fff !important; background: rgba(161, 53, 255, .3); box-shadow: inset 0 0 0 1px rgba(183, 125, 255, .45); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.lk-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--lk-radius); border: 1px solid var(--lk-line); background: rgba(16, 11, 32, .85); }
.lk-card > .lk-table-wrap:last-child { margin-bottom: 0; }
.lk-table-wrap--auto { border: 0; background: none; border-radius: var(--lk-radius); margin-bottom: 20px; }
.lk-table-wrap--auto > table { margin-bottom: 0 !important; }
.lk-card--flush > .lk-table-wrap { border: 0; border-radius: 0; background: transparent; }
.lk-table, .lk-body table.horizontal-table, .lk-body table.vertical-table, .lk-body table.generic-form-table, .lk-body table.woe-table, .lk-body table.shop-table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 14.5px; color: var(--lk-text);
}
.lk-table th, .lk-body table.horizontal-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 12px 16px; text-align: left; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-text-3);
  background: rgba(27, 21, 50, .97); border-bottom: 1px solid var(--lk-line-2);
}
.lk-table th a, .lk-body table.horizontal-table th a { color: var(--lk-text-2) !important; }
.lk-table td, .lk-body table.horizontal-table td { padding: 12px 16px; border-bottom: 1px solid var(--lk-line); vertical-align: middle; }
.lk-table tbody tr:last-child td, .lk-body table.horizontal-table tr:last-child td { border-bottom: 0; }
.lk-table tbody tr, .lk-body table.horizontal-table tr { transition: background .12s; }
.lk-table tbody tr:hover, .lk-body table.horizontal-table tr:hover td { background: rgba(176, 140, 255, .06); }
.lk-table .num, .lk-table td.lk-num, .lk-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lk-table .center { text-align: center; }
.lk-table--compact th, .lk-table--compact td { padding: 9px 12px; }
.lk-table--zebra tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .018); }
.lk-table tr.is-me td { background: rgba(161, 53, 255, .12); }

/* rank cell + medals */
.lk-rank { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; font-family: var(--lk-font-display); font-weight: 800; font-size: 15px; color: var(--lk-text-2); background: rgba(255, 255, 255, .04); font-variant-numeric: tabular-nums; }
.lk-rank--1 { color: #2a1600; background: var(--lk-grad-gold); box-shadow: 0 4px 14px rgba(246, 196, 83, .35); }
.lk-rank--2 { color: #1b2030; background: linear-gradient(135deg, #f4f7ff, #cfd6e6 50%, #a5aec4); }
.lk-rank--3 { color: #2b1405; background: linear-gradient(135deg, #ffd2b0, #e3a173 50%, #b86b3b); }
.lk-table tr.lk-top-1 { background: linear-gradient(90deg, rgba(246, 196, 83, .1), transparent 60%); }
.lk-table tr.lk-top-2 { background: linear-gradient(90deg, rgba(207, 214, 230, .07), transparent 60%); }
.lk-table tr.lk-top-3 { background: linear-gradient(90deg, rgba(227, 161, 115, .08), transparent 60%); }
.lk-player { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; min-width: 0; }
.lk-table .lk-player { vertical-align: middle; }
.lk-player__sub { display: block; color: var(--lk-text-3); font-size: 12.5px; font-weight: 500; }
.lk-emblem { width: 24px; height: 24px; image-rendering: pixelated; border-radius: 4px; flex-shrink: 0; }
.lk-item-icon { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; }

/* podium (top 3 cards) */
.lk-podium { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: 24px; }
.lk-podium__card { text-align: center; padding: 22px 16px; border-radius: var(--lk-radius-lg); background: var(--lk-grad-surface); border: 1px solid var(--lk-line); min-width: 0; }
.lk-podium__card--1 { order: 2; padding-top: 30px; border-color: rgba(246, 196, 83, .45); box-shadow: 0 16px 40px rgba(224, 165, 38, .14); }
.lk-podium__card--2 { order: 1; }
.lk-podium__card--3 { order: 3; }
.lk-podium__name { font-family: var(--lk-font-display); font-size: 1.25rem; font-weight: 700; color: #fff; margin: 10px 0 2px; overflow-wrap: anywhere; }
.lk-podium__value { font-size: var(--lk-fs-sm); color: var(--lk-text-2); }
@media (max-width: 640px) { .lk-podium { grid-template-columns: 1fr; } .lk-podium__card--1, .lk-podium__card--2, .lk-podium__card--3 { order: 0; } }

/* ==========================================================================
   FORMS
   ========================================================================== */
.lk-form { display: grid; gap: 18px; }
.lk-field { display: grid; gap: 7px; min-width: 0; }
.lk-label, .lk-body label.lk-label { font-size: 13.5px; font-weight: 600; color: var(--lk-text); }
.lk-help { font-size: 13px; color: var(--lk-text-3); margin: 0; }
.lk-input, .lk-select, .lk-textarea,
.lk-body input[type="text"], .lk-body input[type="password"], .lk-body input[type="email"], .lk-body input[type="number"],
.lk-body input[type="search"], .lk-body input[type="tel"], .lk-body input[type="url"], .lk-body input[type="date"], .lk-body input[type="datetime-local"],
.lk-body select, .lk-body textarea {
  width: 100%; max-width: 100%; min-height: 46px; padding: 11px 14px;
  font: 500 15px/1.4 var(--lk-font); color: var(--lk-text);
  background: rgba(11, 8, 23, .75); border: 1px solid var(--lk-line-2); border-radius: var(--lk-radius-sm);
  transition: border-color .15s var(--lk-ease), box-shadow .15s var(--lk-ease), background .15s;
  -webkit-appearance: none; appearance: none;
}
.lk-body textarea { min-height: 120px; resize: vertical; }
.lk-body select, .lk-select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a3ff' d='M1.4 0 6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.lk-body select option { background: #1b1532; color: var(--lk-text); }
.lk-body select[multiple] { background-image: none; padding-right: 14px; min-height: 120px; }
.lk-body input::placeholder, .lk-body textarea::placeholder { color: rgba(189, 181, 214, .5); }
.lk-body input:hover, .lk-body select:hover, .lk-body textarea:hover { border-color: var(--lk-line-strong); }
.lk-body input[type="text"]:focus, .lk-body input[type="password"]:focus, .lk-body input[type="email"]:focus, .lk-body input[type="number"]:focus,
.lk-body input[type="search"]:focus, .lk-body input[type="date"]:focus, .lk-body select:focus, .lk-body textarea:focus, .lk-input:focus {
  outline: none; border-color: var(--lk-purple-400); background: rgba(161, 53, 255, .07); box-shadow: 0 0 0 3px rgba(161, 53, 255, .25);
}
.lk-body input:-webkit-autofill, .lk-body input:-webkit-autofill:hover, .lk-body input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lk-text); -webkit-box-shadow: 0 0 0 60px #160f2c inset; caret-color: #fff; transition: background-color 9999s;
}
.lk-body input[type="checkbox"], .lk-body input[type="radio"] { accent-color: var(--lk-purple-500); width: 17px; height: 17px; vertical-align: middle; cursor: pointer; }
.lk-body input[type="file"] { color: var(--lk-text-2); font-size: 14px; }
.lk-body input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: var(--lk-radius-xs); border: 1px solid var(--lk-line-2); background: rgba(161, 53, 255, .12); color: #fff; font: 600 13px var(--lk-font); cursor: pointer; }
.lk-input-group { position: relative; display: flex; align-items: stretch; }
.lk-input-group > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--lk-text-3); pointer-events: none; font-size: 14px; }
.lk-body .lk-input-group > i ~ input { padding-left: 40px; }
.lk-check { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--lk-text-2); font-size: 14px; cursor: pointer; }
.lk-check input { margin-top: 2px; }
.lk-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }

/* ==========================================================================
   AUTH PAGES (login / register / recovery)
   ========================================================================== */
.lk-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-radius: var(--lk-radius-lg); overflow: hidden; border: 1px solid var(--lk-line-2); box-shadow: var(--lk-shadow-lg); background: var(--lk-surface); max-width: 1060px; margin: 0 auto; }
/* Art panel, made to measure for any panel height: the Loki logo with its two characters on a
   purple glow at the top, the night-castle scene (img/lk/auth-scene.webp, transparent at its top)
   anchored at the bottom, and a repeating star tile filling the sky above it. Nothing is scaled up. */
.lk-auth__art {
  position: relative; min-height: 520px; display: flex; align-items: flex-end; padding: 32px;
  background:
    url('../img/lk/hero-logo.webp') center 22px / min(82%, 440px) auto no-repeat,
    radial-gradient(ellipse 72% 250px at 50% 170px, rgba(161, 53, 255, .32), rgba(161, 53, 255, 0) 70%),
    url('../img/lk/auth-scene.webp') center bottom / 100% auto no-repeat,
    url('../img/lk/auth-stars.webp') center top / 270px 270px repeat,
    #120a26;
  /* same layers: AVIF where supported, and a 540px logo unless the screen needs the 1080px one */
  background-image:
    image-set(url('../img/lk/hero-logo-540.avif') type('image/avif') 1x, url('../img/lk/hero-logo-1080.avif') type('image/avif') 2x, url('../img/lk/hero-logo-540.webp') type('image/webp') 1x, url('../img/lk/hero-logo.webp') type('image/webp') 2x),
    radial-gradient(ellipse 72% 250px at 50% 170px, rgba(161, 53, 255, .32), rgba(161, 53, 255, 0) 70%),
    image-set(url('../img/lk/auth-scene.avif') type('image/avif'), url('../img/lk/auth-scene.webp') type('image/webp')),
    url('../img/lk/auth-stars.webp');
}
/* shade only behind the text at the bottom, so tall panels keep a bright moon and castle */
.lk-auth__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 8, 23, .95) 0, rgba(11, 8, 23, .78) 140px, rgba(11, 8, 23, .35) 250px, rgba(11, 8, 23, 0) 340px); }
.lk-auth__art > * { position: relative; z-index: 1; }
.lk-auth__art h2 { font-size: var(--lk-fs-2xl); margin-bottom: 8px; }
.lk-auth__art p { color: var(--lk-text-2); margin: 0; }
.lk-auth__perks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.lk-auth__perks li { display: flex; gap: 10px; align-items: center; color: var(--lk-text); font-size: 14.5px; }
.lk-auth__perks i { color: var(--lk-gold-400); width: 16px; text-align: center; }
.lk-auth__panel { padding: 40px 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.lk-auth__panel h1, .lk-auth__panel h2 { font-size: var(--lk-fs-2xl); margin-bottom: 4px; }
.lk-auth__intro { color: var(--lk-text-2); margin: 0 0 24px; }
.lk-auth__alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--lk-line); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 14px; color: var(--lk-text-3); }
.lk-auth--single { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
@media (max-width: 860px) {
  .lk-auth { grid-template-columns: 1fr; }
  /* phones/tablets: the art becomes a banner with just the logo; the form below has the heading */
  .lk-auth__art {
    min-height: 210px; padding: 0;
    background:
      url('../img/lk/hero-logo.webp') center 10px / auto 90% no-repeat,
      radial-gradient(ellipse 60% 70% at 50% 45%, rgba(161, 53, 255, .3), rgba(161, 53, 255, 0) 70%),
      url('../img/lk/auth-scene.webp') center 58% / cover no-repeat,
      #120a26;
    /* the logo is drawn about 283px wide here: 540px covers up to 2x screens */
    background-image:
      image-set(url('../img/lk/hero-logo-540.avif') type('image/avif') 2x, url('../img/lk/hero-logo-1080.avif') type('image/avif') 4x, url('../img/lk/hero-logo-540.webp') type('image/webp') 2x, url('../img/lk/hero-logo.webp') type('image/webp') 4x),
      radial-gradient(ellipse 60% 70% at 50% 45%, rgba(161, 53, 255, .3), rgba(161, 53, 255, 0) 70%),
      image-set(url('../img/lk/auth-scene.avif') type('image/avif'), url('../img/lk/auth-scene.webp') type('image/webp'));
  }
  .lk-auth__art > * { display: none; }
  .lk-auth__art::after { background: linear-gradient(0deg, rgba(11, 8, 23, .55) 0, rgba(11, 8, 23, 0) 45%); }
  .lk-auth__panel { padding: 28px 20px; }
}

/* ==========================================================================
   FLUXCP LEGACY MARKUP (applies the system to un-migrated/admin views)
   ========================================================================== */
.lk-body table.horizontal-table, .lk-body table.vertical-table, .lk-body table.generic-form-table {
  background: rgba(16, 11, 32, .85); border: 1px solid var(--lk-line); border-radius: var(--lk-radius); overflow: hidden; margin-bottom: 20px;
}
.lk-body table.vertical-table th, .lk-body table.generic-form-table th {
  width: 1%; white-space: nowrap; padding: 12px 18px; text-align: left; vertical-align: top;
  font-size: 13px; font-weight: 600; color: var(--lk-text-3); background: rgba(27, 21, 50, .7);
  border-bottom: 1px solid var(--lk-line); text-transform: none; letter-spacing: 0;
}
.lk-body table.vertical-table td, .lk-body table.generic-form-table td { padding: 12px 18px; border-bottom: 1px solid var(--lk-line); color: var(--lk-text); vertical-align: middle; }
.lk-body table.vertical-table tr:last-child > *, .lk-body table.generic-form-table tr:last-child > * { border-bottom: 0; }
.lk-body table.generic-form-table label { color: var(--lk-text); font-weight: 600; font-size: 14px; }
.lk-body table.generic-form-table td p, .lk-body .generic-form-div p { margin: 6px 0 0; font-size: 13px; color: var(--lk-text-3); }
.lk-body .generic-form, .lk-body .generic-form-div { margin: 0 0 20px; }
.lk-body .horizontal-table td.td-action, .lk-body .td-action { white-space: nowrap; }
.lk-body p.message, .lk-body .message {
  padding: 13px 16px; margin: 0 0 20px; border-radius: var(--lk-radius); font-size: 14.5px;
  border: 1px solid rgba(143, 180, 255, .3); background: var(--lk-info-bg); color: var(--lk-text);
}
.lk-body p.red, .lk-body .red { color: var(--lk-danger); }
.lk-body p.red { padding: 13px 16px; margin: 0 0 20px; border-radius: var(--lk-radius); border: 1px solid rgba(251, 113, 133, .4); background: var(--lk-danger-bg); color: #fecdd3; }
.lk-body p.green, .lk-body .green { color: var(--lk-success); }
.lk-body p.green { padding: 13px 16px; margin: 0 0 20px; border-radius: var(--lk-radius); border: 1px solid rgba(52, 211, 153, .35); background: var(--lk-success-bg); color: #d1fae5; }
.lk-body .notice, .lk-body p.notice { color: var(--lk-warning); }
.lk-body .not-applicable { color: var(--lk-text-3); font-style: italic; font-size: .92em; }
.lk-body .important { color: var(--lk-gold-300); font-weight: 600; }
.lk-body .info-text { color: var(--lk-text-2); }
.lk-body .online, .lk-body .up { color: var(--lk-success); font-weight: 600; }
.lk-body .offline, .lk-body .down { color: var(--lk-danger); font-weight: 600; }
.lk-body .state-banned, .lk-body .state-permanently-banned { color: var(--lk-danger); font-weight: 600; }
.lk-body .state-pending { color: var(--lk-warning); font-weight: 600; }
.lk-body .equipped { color: var(--lk-gold-300); }
.lk-body .keyword { color: var(--lk-gold-300); font-weight: 600; }
.lk-body .script, .lk-body pre, .lk-body .raw-txn-log {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13px; line-height: 1.6;
  background: rgba(8, 5, 18, .85); border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); color: #d8ccff;
  padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lk-body .toggler { color: var(--lk-purple-300); cursor: pointer; font-weight: 600; }
.lk-body .search-form, .lk-body form.search-form {
  padding: 20px; margin: 0 0 20px; border-radius: var(--lk-radius-lg); background: var(--lk-grad-surface); border: 1px solid var(--lk-line);
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
}
.lk-body .search-form p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; }
.lk-body .search-form label { font-size: 13px; font-weight: 600; color: var(--lk-text-2); }
.lk-body .search-form input[type="text"], .lk-body .search-form select { width: auto; min-width: 140px; flex: 1 1 160px; }
/* FluxCP date / date-time selects (dateField helpers) */
:where(.lk-body) :where(.date-field, .date-time-field) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--lk-text-3); }
:where(.lk-body) :where(.date-field, .date-time-field) select { width: auto; min-width: 0; padding-right: 30px; background-position: right 10px center; }
.lk-body select:disabled, .lk-body input:disabled { opacity: .45; cursor: not-allowed; }
/* pagination */
.lk-body .pages { font-size: 0 !important; } /* hides FluxCP's ' | ' separator text nodes */
.lk-body .pages > * { font-size: 14px; }
.lk-body .pages, .lk-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 24px 0 8px; color: var(--lk-text-3); font-size: 14px; }
.lk-body .pages a, .lk-body .pages .current-page, .lk-pagination a, .lk-pagination span {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--lk-radius-sm);
  border: 1px solid var(--lk-line-2); background: rgba(21, 16, 39, .8); color: var(--lk-text-2) !important; font-weight: 600; font-variant-numeric: tabular-nums;
}
.lk-body .pages a:hover, .lk-pagination a:hover { border-color: var(--lk-purple-400); color: #fff !important; }
.lk-body .pages .current-page, .lk-pagination .is-active { background: var(--lk-grad-brand); border-color: transparent; color: #fff !important; }
.lk-body .jump-to-page { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--lk-text-3); font-size: 14px; }
.lk-body .jump-to-page input { width: 80px; min-height: 38px; }
/* credit balance (donate/purchase) */
.lk-body .credit-balance { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--lk-radius-pill); background: rgba(246, 196, 83, .1); border: 1px solid rgba(246, 196, 83, .35); }
.lk-body .credit-balance .balance-text { color: var(--lk-text-2); font-size: 13px; font-weight: 600; }
.lk-body .credit-balance .balance-amount { color: var(--lk-gold-300); font-family: var(--lk-font-display); font-weight: 800; font-size: 18px; }
/* guild emblems & item images in legacy tables */
.lk-body img.emblem, .lk-body .horizontal-table img[src*="emblem"] { image-rendering: pixelated; vertical-align: middle; }
/* bootstrap-ish compatibility used by a few views */
.lk-body .table { color: var(--lk-text); }
.lk-body .form-control { width: 100%; }
.lk-body .text-center { text-align: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.lk-cta {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 24px;
  padding: 72px 0; text-align: center; border-top: 1px solid var(--lk-line);
}
.lk-cta::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../img/lk/hero-heroes.webp') center 25% / cover no-repeat; background-image: image-set(url('../img/lk/hero-heroes.avif') type('image/avif'), url('../img/lk/hero-heroes.webp') type('image/webp')); opacity: .55; }
/* phones up to 440px show at most the middle 852px of the 1600px art (band at least 551px tall): a centred 900px crop draws identically */
@media (max-width: 440px) { .lk-cta::before { background-image: image-set(url('../img/lk/hero-heroes-mobile.avif') type('image/avif'), url('../img/lk/hero-heroes.webp') type('image/webp')); } }
.lk-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 300px at 50% 60%, rgba(124, 58, 237, .35), transparent 70%), linear-gradient(180deg, var(--lk-bg) 0%, rgba(11, 8, 23, .78) 35%, rgba(11, 8, 23, .85) 70%, #08051200 100%); }
.lk-cta h2 { font-size: var(--lk-fs-3xl); margin-bottom: 10px; }
.lk-cta p { color: var(--lk-text-2); font-size: var(--lk-fs-lg); margin: 0 auto 26px; max-width: 52ch; }
.lk-cta .lk-btn-row { justify-content: center; }

.lk-footer { background: #07050f; border-top: 1px solid var(--lk-line); color: var(--lk-text-3); font-size: 14px; }
.lk-footer__main { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 36px; padding-block: 56px 40px; }
.lk-footer__brand img { height: 34px; width: auto; margin-bottom: 14px; }
.lk-footer__brand p { margin: 0 0 18px; line-height: 1.7; max-width: 34ch; }
.lk-footer__social { display: flex; gap: 8px; flex-wrap: wrap; }
.lk-footer__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(176, 140, 255, .07); border: 1px solid var(--lk-line); color: var(--lk-text-2) !important; font-size: 16px; transition: all .15s var(--lk-ease); }
.lk-footer__social a:hover { background: rgba(161, 53, 255, .2); border-color: var(--lk-line-strong); color: #fff !important; transform: translateY(-2px); }
.lk-footer h4, .lk-footer .lk-footer__heading { font-family: var(--lk-font); font-size: 12px; font-weight: 700; line-height: 1.15; letter-spacing: .14em; text-transform: uppercase; color: var(--lk-purple-300); margin: 6px 0 14px; }
.lk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lk-footer ul a { color: var(--lk-text-2) !important; font-size: 14px; }
.lk-footer ul a:hover { color: #fff !important; }
.lk-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid var(--lk-line); font-size: 13px; }
.lk-footer__bar a { color: var(--lk-text-3) !important; }
.lk-footer__bar a:hover { color: #fff !important; }
.lk-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 960px) { .lk-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lk-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 340px) { .lk-footer__main { grid-template-columns: 1fr; gap: 28px; } }

/* ==========================================================================
   OVERLAYS: support modal, flash message, vote badge
   ========================================================================== */
.lk-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 3, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lk-modal.is-open { display: flex; }
.lk-modal__dialog { position: relative; width: 100%; max-width: 520px; padding: 32px; text-align: center; border-radius: var(--lk-radius-lg); background: var(--lk-surface); border: 1px solid var(--lk-line-2); box-shadow: var(--lk-shadow-lg); }
.lk-modal__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .05); color: var(--lk-text-2); font-size: 18px; cursor: pointer; }
.lk-modal__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lk-modal__dialog .lk-icon-tile { width: 60px; height: 60px; font-size: 26px; margin-bottom: 14px; border-radius: 18px; }
.lk-modal__dialog p { color: var(--lk-text-2); }

.lk-flash { position: fixed; top: calc(var(--lk-header-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 2500; width: min(640px, calc(100% - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--lk-radius); background: rgba(27, 21, 50, .98); border: 1px solid var(--lk-line-strong); box-shadow: var(--lk-shadow-lg); color: var(--lk-text); animation: lk-flash-in .3s var(--lk-ease); }
.lk-flash > i { color: var(--lk-purple-300); font-size: 18px; margin-top: 2px; }
.lk-flash__body { flex: 1; min-width: 0; font-size: 14.5px; }
.lk-flash__close { border: 0; background: none; color: var(--lk-text-3); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
.lk-flash__close:hover { color: #fff; }
@keyframes lk-flash-in { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* title tooltip built by js/loki.js (and by the legacy js/flux.unitip.js); moved here from css/flux/unitip.css */
#unitip { position: absolute; z-index: 10000; top: -1000px; color: #e6e6f0; font: normal 600 12px/1.4 'Segoe UI', Arial, Helvetica, sans-serif; display: none; pointer-events: none; }
#unitippoint, #unitipmid, #unitipcap { position: relative; top: 0; left: 0; display: block; }
#unitippoint, #unitipcap { background: none; height: 0; overflow: hidden; }
#unitipmid {
  background: rgba(15, 10, 30, .95); border: 1px solid rgba(161, 53, 255, .25); border-radius: 8px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .5), 0 0 12px rgba(161, 53, 255, .1);
  width: auto; max-width: 280px; height: auto; padding: 8px 14px; color: #c77dff; font-size: 12px; white-space: nowrap;
}

.lk-vote { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: block; width: 180px; transition: transform .2s var(--lk-ease); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5)); }
.lk-vote:hover { transform: translateY(-4px) scale(1.03); }
.lk-vote img { width: 100%; height: auto; display: block; }
@media (max-width: 1080px) { .lk-vote { display: none; } }

/* ==========================================================================
   HOME
   ========================================================================== */
.lk-home-hero { position: relative; isolation: isolate; min-height: min(860px, 100svh); margin-top: calc(var(--lk-header-h) * -1); padding: calc(var(--lk-header-h) + 40px) 0 72px; display: flex; align-items: center; overflow: hidden; }
.lk-home-hero__media { position: absolute; inset: 0; z-index: -3; background: #0b0817 url('../img/lk/hero-battle.webp') center / cover no-repeat; background-image: image-set(url('../img/lk/hero-battle.avif') type('image/avif'), url('../img/lk/hero-battle.webp') type('image/webp')); }
/* phones: a centred 560x848 crop of the same art covers every phone hero (box narrower than 0.66:1) pixel for pixel.
   Breakpoint and URLs must match the preloads in main/head_preload.php. */
@media (max-width: 480px) { .lk-home-hero__media { background-image: url('../img/lk/hero-battle-mobile.webp'); background-image: image-set(url('../img/lk/hero-battle-mobile.avif') type('image/avif'), url('../img/lk/hero-battle-mobile.webp') type('image/webp')); } }
.lk-home-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-home-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(11, 8, 23, .94) 0%, rgba(11, 8, 23, .78) 34%, rgba(42, 16, 82, .35) 64%, rgba(11, 8, 23, .25) 100%); }
.lk-home-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 8, 23, .4) 0%, rgba(11, 8, 23, 0) 30%, rgba(11, 8, 23, 0) 62%, var(--lk-bg) 100%); }
.lk-home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.lk-home-hero h1 { font-size: var(--lk-fs-4xl); line-height: 1.02; margin: 14px 0 16px; text-shadow: 0 6px 40px rgba(0, 0, 0, .55); }
.lk-home-hero__lead { font-size: 1.2rem; color: var(--lk-text-2); max-width: 54ch; margin-bottom: 28px; }
.lk-home-hero__logo { justify-self: center; width: min(100%, 560px); filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .6)); animation: lk-float 7s ease-in-out infinite; }
@keyframes lk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.lk-home-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; color: var(--lk-text-2); font-size: 14.5px; }
.lk-home-hero__facts span { display: inline-flex; align-items: center; gap: 8px; }
.lk-home-hero__facts i { color: var(--lk-gold-400); }
@media (max-width: 900px) {
  .lk-home-hero { min-height: 0; padding: calc(var(--lk-header-h) + 28px) 0 48px; }
  .lk-home-hero__grid { grid-template-columns: 1fr; gap: 12px; }
  .lk-home-hero__logo { order: -1; width: min(78%, 340px); }
  .lk-home-hero::before { background: linear-gradient(180deg, rgba(11, 8, 23, .55) 0%, rgba(11, 8, 23, .82) 45%, rgba(11, 8, 23, .95) 100%); }
  .lk-home-hero__lead { font-size: 1.05rem; }
}
@media (max-width: 640px) {
  .lk-home-hero .lk-btn-row .lk-btn { flex: 1 1 100%; }
  .lk-home-hero__facts { gap: 10px 16px; font-size: 14px; }
}
.lk-home-hero__logo img { display: block; width: 100%; height: auto; }
.lk-home-hero__facts a { color: var(--lk-text-2) !important; display: inline-flex; align-items: center; gap: 8px; }
.lk-home-hero__facts a:hover { color: #fff !important; }
.lk-home-hero__facts .lk-online { padding: 5px 12px; }
.lk-home-facts { position: relative; z-index: auto; margin-top: -40px; }
.lk-home-facts .lk-stat { background: rgba(21, 16, 39, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--lk-shadow); }
.lk-home-start { align-items: center; }
.lk-home-start h2 { margin-bottom: 20px; }
.lk-home-start__card h3 { margin: 14px 0 6px; }
.lk-home-link { display: flex !important; align-items: center; gap: 14px; }
.lk-home-link strong { display: block; color: #fff; font-size: 15.5px; }
.lk-home-link small { display: block; color: var(--lk-text-3); font-size: 13px; }
.lk-home-link__arrow { margin-left: auto; color: var(--lk-text-3); transition: transform .15s var(--lk-ease), color .15s; }
.lk-home-link:hover .lk-home-link__arrow { color: var(--lk-purple-300); transform: translateX(3px); }
.lk-home-faq { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.lk-home-faq__intro { position: sticky; top: calc(var(--lk-header-h) + 24px); }
@media (max-width: 900px) { .lk-home-faq { grid-template-columns: 1fr; gap: 24px; } .lk-home-faq__intro { position: static; } .lk-home-facts { margin-top: -24px; } }
.lk-feature { display: flex; gap: 16px; align-items: flex-start; }
.lk-feature h3 { font-size: 1.15rem; margin: 2px 0 6px; }
.lk-feature p { color: var(--lk-text-2); margin: 0; font-size: 14.5px; }
.lk-band { padding: 64px 0; }
.lk-band--alt { background: linear-gradient(180deg, rgba(21, 16, 39, 0) 0%, rgba(21, 16, 39, .65) 18%, rgba(21, 16, 39, .65) 82%, rgba(21, 16, 39, 0) 100%); }
@media (max-width: 640px) { .lk-band { padding: 44px 0; } }

/* ==========================================================================
   Seamless "shadow" transitions: home hero -> stat tiles -> bands -> CTA band -> footer.
   Replacement rules for themes/default/css/loki.css. Each block says what it replaces.
   Idea: nothing ends in a solid colour or a border any more. The hero/CTA artwork dissolves
   (mask-image, eased curve) into a soft dark shadow, and that shadow dissolves into the
   fixed site artwork. Two shadows (.lk-home-facts::before, .lk-footer::before) use z-index -1
   without a stacking context around them, so they sit in the page background layer: above the
   fixed body::before artwork, under the hero/CTA and under all content (text and cards are
   never darkened).
   ========================================================================== */

/* ---------- HOME section ---------- */

/* NEW: the hero video/poster and both overlays fade to fully transparent at the bottom edge,
   so the hero always ends on exactly what is behind it (no solid colour, so no cut line). */
.lk-home-hero {
  --lk-hero-fade: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, .88) 60%, rgba(0, 0, 0, .64) 70%, rgba(0, 0, 0, .36) 80%, rgba(0, 0, 0, .12) 90%, rgba(0, 0, 0, .03) 96%, transparent 100%);
}
.lk-home-hero__media,
.lk-home-hero::before,
.lk-home-hero::after { -webkit-mask-image: var(--lk-hero-fade); mask-image: var(--lk-hero-fade); }

/* REPLACES the background of .lk-home-hero::after
   (old: ... rgba(11, 8, 23, 0) 62%, var(--lk-bg) 100%  -> solid #0b0817 at the bottom = the hard line).
   Keep content/position/inset/z-index as they are. */
.lk-home-hero::after { background: linear-gradient(180deg, rgba(11, 8, 23, .4) 0%, rgba(11, 8, 23, 0) 30%, rgba(11, 8, 23, 0) 50%, rgba(11, 8, 23, .45) 80%, rgba(11, 8, 23, .7) 100%); }

/* CHANGE in the existing .lk-home-facts rule: z-index: 2  ->  z-index: auto
   (keep position: relative and margin-top: -40px, and the -24px in the max-width: 900px query).
   The tiles still paint over the hero (they come later in the document), and it lets the
   ::before below join the page background layer. */
.lk-home-facts { z-index: auto; }

/* NEW: the shadow the hero sinks into. Peaks around the hero's bottom edge (behind the tiles) and
   lets the site artwork come back gradually ~320px further down. */
.lk-home-facts::before {
  content: ''; position: absolute; left: 0; right: 0; top: -480px; height: 880px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 8, 23, 0) 0, rgba(11, 8, 23, .04) 40px, rgba(11, 8, 23, .15) 80px, rgba(11, 8, 23, .32) 120px,
    rgba(11, 8, 23, .52) 170px, rgba(11, 8, 23, .7) 220px, rgba(11, 8, 23, .8) 270px, rgba(11, 8, 23, .88) 320px,
    rgba(11, 8, 23, .92) 400px, rgba(11, 8, 23, .92) 560px, rgba(11, 8, 23, .82) 620px, rgba(11, 8, 23, .55) 700px,
    rgba(11, 8, 23, .25) 780px, rgba(11, 8, 23, .07) 840px, rgba(11, 8, 23, 0) 880px);
}

/* REPLACES the background of .lk-band--alt (old: linear 0 -> .65 over 18% of the band height;
   same .65 tint, now an eased 180px fade at both ends, so the band has no visible edge). */
.lk-band--alt {
  background: linear-gradient(180deg,
    rgba(21, 16, 39, 0) 0, rgba(21, 16, 39, .055) 30px, rgba(21, 16, 39, .195) 60px, rgba(21, 16, 39, .36) 90px,
    rgba(21, 16, 39, .5) 120px, rgba(21, 16, 39, .6) 150px, rgba(21, 16, 39, .65) 180px,
    rgba(21, 16, 39, .65) calc(100% - 180px), rgba(21, 16, 39, .6) calc(100% - 150px), rgba(21, 16, 39, .5) calc(100% - 120px),
    rgba(21, 16, 39, .36) calc(100% - 90px), rgba(21, 16, 39, .195) calc(100% - 60px), rgba(21, 16, 39, .055) calc(100% - 30px), rgba(21, 16, 39, 0) 100%);
}

/* ---------- FOOTER section ---------- */

/* REPLACES .lk-cta: border-top removed (border-top: 0 also works if this is appended instead); padding 72px 0 -> 120px 0 128px (room for the fades);
   NEW background = its own soft shadow (transparent at both edges) that the artwork rises out of. */
.lk-cta {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 24px;
  padding: 120px 0 128px; text-align: center; border-top: 0;
  background: linear-gradient(180deg, rgba(11, 8, 23, 0) 0%, rgba(11, 8, 23, .12) 6%, rgba(11, 8, 23, .4) 13%, rgba(11, 8, 23, .7) 21%, rgba(11, 8, 23, .85) 29%, rgba(11, 8, 23, .85) 60%, rgba(11, 8, 23, .55) 78%, rgba(11, 8, 23, .2) 91%, rgba(11, 8, 23, 0) 100%);
  --lk-cta-fade: linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, .3) 19%, rgba(0, 0, 0, .72) 30%, #000 40%, #000 56%, rgba(0, 0, 0, .8) 66%, rgba(0, 0, 0, .5) 77%, rgba(0, 0, 0, .22) 87%, rgba(0, 0, 0, .06) 94%, transparent 100%);
}
/* NEW: artwork (::before) and its overlay (::after) dissolve at top and bottom. */
.lk-cta::before,
.lk-cta::after { -webkit-mask-image: var(--lk-cta-fade); mask-image: var(--lk-cta-fade); }
/* REPLACES the background of .lk-cta::after (old linear part started with solid var(--lk-bg) at 0%
   = the step at the top). Same purple glow, plus an even readability shade. */
.lk-cta::after { background: radial-gradient(800px 300px at 50% 60%, rgba(124, 58, 237, .35), transparent 70%), linear-gradient(180deg, rgba(11, 8, 23, .66), rgba(11, 8, 23, .58)); }

/* REPLACES .lk-footer: border-top: 1px solid var(--lk-line) removed (border-top: 0); position: relative added. */
.lk-footer { position: relative; background: #07050f; border-top: 0; color: var(--lk-text-3); font-size: 14px; }
/* NEW: a 260px shadow that rises from the footer into whatever is above it (CTA band or page
   content), ending exactly in the footer colour, so the footer has no top edge. */
.lk-footer::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 260px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 5, 15, 0) 0%, rgba(7, 5, 15, .06) 14%, rgba(7, 5, 15, .2) 28%, rgba(7, 5, 15, .4) 43%, rgba(7, 5, 15, .6) 57%, rgba(7, 5, 15, .8) 72%, rgba(7, 5, 15, .94) 87%, #07050f 100%);
}