/* MU Drakon premium visual system
   This layer intentionally overrides the legacy stylesheet without changing
   functional selectors used by the PHP and JavaScript integrations. */

:root {
  --bg-0: #07080b;
  --bg-1: #0e1012;
  --bg-2: #121416;
  --blood: #5f3b29;
  --blood-deep: #12202b;
  --crimson: #9f6142;
  --crimson-soft: #c1945e;
  --tomato: #b5874e;
  --tomato-soft: #d0a97a;
  --tomato-bright: #efcfa8;
  --gold: #b99a61;
  --gold-bright: #dfc58e;
  --ember: #7f4f37;
  --ember-soft: #c59d6c;
  --text: #f2eee8;
  --text-dim: #bcb4ac;
  --text-faint: #7f7873;
  --line: rgba(201, 171, 112, 0.25);
  --line-soft: rgba(201, 171, 112, 0.12);
  --line-strong: rgba(201, 171, 112, 0.5);
  --panel-bg: rgba(14, 15, 17, 0.86);
  --panel-bg-strong: rgba(8, 10, 11, 0.95);
  --danger: #ff4757;
  --good: #55c38b;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Geist", "Segoe UI", sans-serif;
  --font-tech: "Geist", "Segoe UI", sans-serif;
  --section-gap: clamp(72px, 8vw, 118px);
  --section-pad-y: clamp(44px, 6vw, 82px);
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 11px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --shadow-sm: 0 8px 22px rgba(2, 3, 4, 0.32);
  --shadow-md: 0 18px 46px rgba(2, 3, 4, 0.4);
  --shadow-lg: 0 28px 74px rgba(2, 3, 4, 0.48);
  --shadow-xl: 0 42px 110px rgba(2, 3, 4, 0.56);
  --glow-red: 0 0 24px rgba(181, 135, 78, 0.14);
  --glow-red-strong: 0 0 42px rgba(181, 135, 78, 0.22);
  --premium-max: 1360px;
  --premium-gutter: clamp(20px, 4vw, 64px);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--bg-0);
}

body {
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -0.006em;
  background: #07080b;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

a,
button,
input,
select,
textarea {
  font: inherit;
}

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100001;
  top: 12px;
  left: 16px;
  padding: 10px 16px;
  color: #090a0b;
  background: var(--gold-bright);
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

::selection {
  color: #fff;
  background: rgba(159, 97, 66, 0.72);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #08090c; }
::-webkit-scrollbar-thumb {
  border: 2px solid #08090c;
  border-radius: 8px;
  background: #5d4c45;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Atmosphere */
.bg-layer {
  background-position: center 18%;
  filter: grayscale(0.22) saturate(0.72) brightness(0.46) contrast(1.08);
  transform: scale(1.015);
}

.bg-overlay {
  background:
    radial-gradient(circle at 20% 10%, rgba(114, 65, 41, 0.24), transparent 42%),
    radial-gradient(circle at 78% 36%, rgba(153, 107, 58, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(7, 8, 11, 0.44), rgba(7, 8, 11, 0.8) 58%, #07080b 100%);
}

.bg-vignette {
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(5, 7, 8, 0.72) 100%),
    linear-gradient(90deg, rgba(5, 7, 8, 0.42), transparent 24%, transparent 76%, rgba(5, 7, 8, 0.42));
}

.embers { opacity: 0.28; }
.ember:nth-child(2n) { display: none; }
.mouse-trail-layer { display: none; }

/* Global navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 76px;
  padding: 0 var(--premium-gutter);
  border-bottom: 1px solid rgba(201, 171, 112, 0.16);
  background: rgba(7, 8, 11, 0.9);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(1.1);
}

.topbar::after {
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--crimson) 26%, var(--gold) 50%, var(--crimson) 74%, transparent 96%);
  opacity: 0.42;
  box-shadow: none;
}

.brand { gap: 11px; text-decoration: none; }
.brand__logo {
  width: 42px;
  height: 42px;
  filter: saturate(0.8) drop-shadow(0 7px 16px rgba(181, 135, 78, 0.24));
}
.brand:hover .brand__logo { transform: translateY(-1px) scale(1.025); }
.brand__title,
.drawer__brand-title,
.footer__brand-title,
.svf-brand-name {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-shadow: none;
}
.brand__title { font-size: 24px; line-height: 0.9; }
.brand__sub,
.drawer__brand-sub,
.footer__brand-sub {
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.23em;
}

.topbar__nav { gap: clamp(20px, 3vw, 46px); }
.nav-link,
.footer__nav a {
  color: #b8b0a9;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.nav-link::after {
  bottom: -9px;
  height: 1px;
  background: var(--gold);
  box-shadow: none;
}
.nav-link:hover,
.nav-link.is-active,
.nav-link--rainbow:hover,
.nav-link--rainbow.is-active { color: #fff; text-shadow: none; }
.nav-link--rainbow .nav-link__rainbow,
.drawer__link--rainbow .drawer__link-rainbow {
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.nav-link--svfast::before { background: var(--good); box-shadow: none; }

.hamburger,
.drawer__close {
  border-color: rgba(201, 171, 112, 0.25);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}
.hamburger:hover,
.drawer__close:hover { border-color: var(--gold); background: rgba(201, 171, 112, 0.08); }
.hamburger__bar { background: var(--text); box-shadow: none; }

.drawer {
  width: min(390px, calc(100vw - 24px));
  border-left-color: rgba(201, 171, 112, 0.28);
  background: rgba(9, 11, 12, 0.98);
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.48);
}
.drawer__head { border-bottom-color: var(--line-soft); background: rgba(255, 255, 255, 0.018); }
.drawer__section { border-bottom-color: var(--line-soft); }
.drawer__section-title { color: var(--gold); font-family: var(--font-ui); }
.drawer__link {
  min-height: 48px;
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.025em;
  text-transform: none;
}
.drawer__link:hover,
.drawer__link:focus-visible { color: #fff; background: rgba(201, 171, 112, 0.08); box-shadow: inset 2px 0 var(--gold); }
.drawer__link svg { color: var(--gold); }
.drawer-backdrop { background: rgba(4, 6, 7, 0.75); backdrop-filter: blur(4px); }

.drakon-visitors {
  min-width: 82px;
  height: 36px;
  color: var(--text);
  border-color: rgba(201, 171, 112, 0.22);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}
.drakon-visitors::after { display: none; }
.drakon-visitors__icon { color: var(--gold); border-color: rgba(201, 171, 112, 0.22); background: rgba(201, 171, 112, 0.05); }
.drakon-visitors__copy small { color: var(--text-faint); font-family: var(--font-ui); }
.drakon-visitors__copy strong { font-family: var(--font-ui); font-weight: 600; text-shadow: none; }

/* Shared controls */
.btn,
.mk-btn,
.ws-item__btn,
.ws-cfg__buy,
.svf-submit,
.pf-back,
.svf-back,
.mk-tab,
.auth-tab,
.dash-tab,
.rank-tab {
  min-height: 44px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.btn::before { display: none; }
.btn--blade { clip-path: none; }
.btn--primary,
.mk-btn,
.ws-item__btn,
.ws-cfg__buy,
.svf-submit {
  color: #fff;
  border: 1px solid #c2955d;
  background: linear-gradient(180deg, #b98b53, #8c5539);
  box-shadow: 0 12px 28px rgba(116, 67, 43, 0.24), inset 0 1px rgba(255, 255, 255, 0.12);
}
.btn--primary:hover,
.mk-btn:hover,
.ws-item__btn:hover,
.ws-cfg__buy:hover,
.svf-submit:hover {
  color: #fff;
  border-color: #ddb482;
  background: linear-gradient(180deg, #c99b63, #9a5f41);
  box-shadow: 0 16px 34px rgba(116, 67, 43, 0.32);
  transform: translateY(-2px);
}
.btn--secondary,
.btn--ghost,
.pf-back,
.svf-back {
  color: var(--text);
  border: 1px solid rgba(201, 171, 112, 0.34);
  background: rgba(201, 171, 112, 0.045);
  box-shadow: none;
}
.btn--secondary:hover,
.btn--ghost:hover,
.pf-back:hover,
.svf-back:hover {
  color: #fff;
  border-color: var(--gold);
  background: rgba(201, 171, 112, 0.1);
  box-shadow: none;
  transform: translateY(-2px);
}
.btn:active,
.mk-btn:active,
.ws-item__btn:active,
.svf-submit:active { transform: translateY(1px) scale(0.99); }
.btn:disabled,
.mk-btn:disabled,
.ws-item__btn:disabled,
.ws-cfg__buy:disabled,
.svf-submit:disabled {
  color: #6d6864;
  border-color: rgba(255, 255, 255, 0.08);
  background: #17181a;
  box-shadow: none;
  opacity: 1;
}

.field input,
.admin-field input,
.admin-field textarea,
.admin-field select,
.mk-form-group input,
.mk-form-group select,
.ws-cfg__group input,
.ws-cfg__group select,
.wa-form__group input,
.wa-form__group select,
.pk-catalog__search input,
.pk-list-item__field input,
.pk-list-item__field select,
.svf-field input {
  min-height: 46px;
  color: var(--text);
  border: 1px solid rgba(201, 171, 112, 0.22);
  border-radius: var(--r-md);
  background: rgba(6, 8, 9, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.field input:hover,
.admin-field input:hover,
.admin-field textarea:hover,
.admin-field select:hover,
.mk-form-group input:hover,
.mk-form-group select:hover,
.ws-cfg__group input:hover,
.ws-cfg__group select:hover,
.wa-form__group input:hover,
.wa-form__group select:hover,
.svf-field input:hover { border-color: rgba(201, 171, 112, 0.4); }
.field input:focus,
.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus,
.mk-form-group input:focus,
.mk-form-group select:focus,
.ws-cfg__group input:focus,
.ws-cfg__group select:focus,
.wa-form__group input:focus,
.wa-form__group select:focus,
.svf-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185, 154, 97, 0.12);
  outline: none;
}
.field__label,
.admin-field__label,
.mk-form-group label,
.ws-cfg__group label,
.wa-form__group label,
.svf-field__label {
  color: #aaa29b;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.mk-modal,
.ws-modal,
.admin-modal,
.event-editor,
.dl-modal,
.chaos-modal,
.lightbox {
  background: rgba(4, 6, 7, 0.82);
  backdrop-filter: blur(12px);
}
.mk-modal__card,
.ws-modal__card,
.admin-modal__card,
.event-editor__card,
.dl-modal__card,
.chaos-modal__card {
  border: 1px solid rgba(201, 171, 112, 0.28);
  border-radius: var(--r-xl);
  background: #0e0f11;
  box-shadow: var(--shadow-xl);
}
.mk-modal__head,
.ws-modal__head,
.admin-modal__head,
.event-editor__head,
.dl-modal__head,
.chaos-modal__head { border-bottom-color: var(--line-soft); background: rgba(255, 255, 255, 0.02); }

.mu-tooltip {
  border-color: rgba(201, 171, 112, 0.46);
  border-radius: var(--r-md);
  background: rgba(8, 10, 11, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
  font-family: var(--font-ui);
  line-height: 1.45;
}
.mu-tooltip__name { border-bottom-color: var(--line-soft); text-shadow: none; }

/* Status strip */
.hud-strip {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(calc(100% - (var(--premium-gutter) * 2)), var(--premium-max));
  margin: 22px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(201, 171, 112, 0.16);
  border-radius: var(--r-lg);
  background: rgba(9, 11, 12, 0.72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}
.hud-strip__item {
  min-width: 0;
  padding: 15px 20px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hud-strip__item:last-of-type { border-right: 0; }
.hud-strip__divider { display: none; }
.hud-strip__icon {
  width: 36px;
  height: 36px;
  color: var(--gold);
  border-color: rgba(201, 171, 112, 0.22);
  border-radius: var(--r-md);
  background: rgba(201, 171, 112, 0.05);
  box-shadow: none;
}
.hud-strip__label {
  color: var(--text-faint);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.hud-strip__value {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.025em;
  text-shadow: none;
}
.hud-strip__value--online { color: var(--good); text-shadow: none; }
.hud-strip__value--offline { color: var(--danger); text-shadow: none; }
.hud-strip__value--castle { color: var(--gold-bright); }

/* Home layout */
.main {
  width: 100%;
  max-width: calc(var(--premium-max) + (var(--premium-gutter) * 2));
  margin: 28px auto 0;
  padding: 0 var(--premium-gutter) 96px;
  overflow-x: clip;
}

.main > section { margin-bottom: var(--section-gap); }
.main > .hero { margin-bottom: 0; }

.hero {
  min-height: clamp(610px, 70vh, 720px);
  grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: clamp(28px, 5vw, 82px);
  padding: clamp(54px, 7vw, 92px);
  border: 1px solid rgba(201, 171, 112, 0.2);
  border-top: 1px solid rgba(201, 171, 112, 0.42);
  border-radius: var(--r-xl);
  background:
    linear-gradient(104deg, rgba(9, 11, 12, 0.98) 0 46%, rgba(11, 12, 14, 0.7) 66%, rgba(9, 11, 12, 0.46)),
    linear-gradient(180deg, rgba(122, 72, 46, 0.08), transparent 52%);
  box-shadow: var(--shadow-xl), inset 0 1px rgba(255, 255, 255, 0.035);
}
.hero::before {
  background-image: linear-gradient(90deg, rgba(201, 171, 112, 0.06) 1px, transparent 1px);
  background-size: 112px 100%;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  opacity: 0.22;
}
.hero::after {
  z-index: 0;
  background:
    radial-gradient(circle at 76% 52%, rgba(142, 85, 57, 0.2), transparent 30%),
    linear-gradient(180deg, transparent 66%, rgba(5, 7, 8, 0.7));
}
.hero__bg {
  background: radial-gradient(circle at 77% 50%, rgba(201, 171, 112, 0.08), transparent 33%);
  animation: none;
}
.hero__corner {
  width: 22px;
  height: 22px;
  border-color: var(--gold);
  opacity: 0.34;
  filter: none;
}
.hero__content { width: 100%; max-width: 78rem; }
.hero__eyebrow {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 0;
  color: var(--gold);
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
}
.hero__title {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0.16em;
  max-width: 78rem;
  margin: 0 0 22px;
  font-family: var(--font-display);
  line-height: 0.84;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.hero__title-primary,
.hero__title-secondary {
  color: #f3eee7;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: none;
  animation: none;
}
.hero__title-primary { font-size: clamp(76px, 8.2vw, 124px); font-weight: 600; }
.hero__title-secondary {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 78px);
  font-weight: 500;
  letter-spacing: -0.045em;
}
.hero__title-secondary::before { display: none; }
.hero__tagline {
  max-width: 59ch;
  margin-bottom: 34px;
  color: #c9c1b9;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.68;
  text-wrap: pretty;
}
.hero__cta { gap: 12px; }
.hero__cta .btn { min-width: 184px; }
.btn--lg { padding: 14px 23px; font-size: 12px; letter-spacing: 0.085em; }
.hero__hero-art { min-height: 520px; }
.hero__art {
  height: 590px;
  max-width: 510px;
  filter: grayscale(0.08) saturate(0.78) contrast(1.04) drop-shadow(0 36px 34px rgba(0, 0, 0, 0.62));
  animation: premium-float 7s ease-in-out infinite;
}
.hero__art-glow {
  width: 420px;
  height: 420px;
  opacity: 0.44;
  background: radial-gradient(circle, rgba(159, 97, 66, 0.24), rgba(185, 154, 97, 0.06) 46%, transparent 68%);
  animation: premium-breathe 7s ease-in-out infinite;
}
@keyframes premium-float { 50% { transform: translateY(-7px); } }
@keyframes premium-breathe { 50% { transform: scale(1.08); opacity: 0.58; } }

.realm-strip {
  width: calc(100% + 2px);
  margin: 0 -1px clamp(72px, 8vw, 118px) !important;
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.018);
}
.realm-strip__track { display: flex; width: max-content; animation: realm-marquee 34s linear infinite; }
.realm-strip__group {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  min-width: min(100vw, var(--premium-max));
}
.realm-strip__group > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 76px;
  padding: 15px 32px;
  border-right: 1px solid var(--line-soft);
}
.realm-strip small { color: var(--text-faint); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.realm-strip strong { color: var(--gold-bright); font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.realm-strip em { grid-column: 1 / -1; color: var(--text-dim); font-size: 11px; font-style: normal; }
@keyframes realm-marquee { to { transform: translateX(-50%); } }
.realm-strip:hover .realm-strip__track { animation-play-state: paused; }

.section-head {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.section-head::after { display: none; }
.section-head h2,
.auth-title,
.welcome-title,
.download-card__title,
.hslider__title,
.mk-head h1,
.ws-head h1,
.cs-hero__title,
.pf-name,
.svf-title,
.mk-modal__head h3,
.ws-modal__head h3 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-shadow: none;
}
.section-head h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.section-head h2::before {
  width: 26px;
  height: 1px;
  background: var(--gold);
  box-shadow: none;
}
.section-head h2::after { display: none; }
.section-head__hint,
.mk-head__hint,
.ws-head__hint,
.cs-panel-title__hint {
  color: var(--text-faint);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Home editorial rail */
.hslider {
  border: 0;
  border-radius: var(--r-xl);
  background: #0d0e10;
  box-shadow: var(--shadow-md);
}
.hslider__slide { min-height: 410px; padding: clamp(38px, 6vw, 74px); }
.hslider__slide::after {
  background: linear-gradient(90deg, rgba(8, 10, 11, 0.98) 0 38%, rgba(8, 10, 11, 0.58) 66%, rgba(8, 10, 11, 0.2));
}
.hslider__slide::before { filter: saturate(0.7) contrast(1.05); }
.hslider__content { max-width: 540px; }
.hslider__eyebrow { color: var(--gold); font-family: var(--font-ui); text-shadow: none; }
.hslider__title { font-size: clamp(42px, 5vw, 68px); }
.hslider__desc { max-width: 54ch; color: var(--text-dim); font-size: 16px; line-height: 1.65; }
.hslider__nav { width: 40px; height: 40px; border-color: rgba(201, 171, 112, 0.32); background: rgba(8, 10, 11, 0.72); box-shadow: none; }
.hslider__dot {
  position: relative;
  width: 18px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hslider__dot::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-50%);
}
.hslider__dot:hover { background: transparent; }
.hslider__dot:hover::after { background: rgba(201, 171, 112, 0.7); }
.hslider__dot.is-active { width: 42px; background: transparent; box-shadow: none; }
.hslider__dot.is-active::after { background: var(--gold); }

.promo-row {
  gap: 0;
  border-block: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.012);
}
.promo-box {
  min-height: 116px;
  padding: 24px 28px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.promo-box:last-child { border-right: 0; }
.promo-box:hover { z-index: 1; background: rgba(201, 171, 112, 0.045); box-shadow: none; transform: none; }
.promo-box__icon {
  width: 46px;
  height: 46px;
  color: var(--gold);
  border: 1px solid rgba(201, 171, 112, 0.22);
  border-radius: var(--r-md);
  background: rgba(201, 171, 112, 0.04);
  box-shadow: none;
}
.promo-box__body h4 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.promo-box__body p { color: var(--text-faint); font-size: 13px; }
.promo-box__arrow { color: var(--gold); }

.auth-view,
.stats-view,
.classes-view,
.killer-view,
.ranking-view,
.benefits-view,
.events-view,
.latest-market,
.chaos-view,
.gallery-view,
.download-view,
.user-panel-view {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.auth-card,
.auth-side,
.stat-card,
.benefit-card,
.event-card,
.lm-card,
.chaos-card,
.my-char,
.download-card {
  border: 1px solid rgba(201, 171, 112, 0.14);
  background: rgba(13, 14, 16, 0.86);
  box-shadow: var(--shadow-sm);
}
.auth-card::before,
.auth-card::after,
.stat-card::before,
.stat-card::after,
.benefit-card::before,
.event-card::before,
.download-card::before,
.download-card::after { opacity: 0.28; box-shadow: none; }
.auth-view { gap: clamp(18px, 3vw, 34px); }
.auth-card { border-radius: var(--r-xl); }
.auth-side {
  border-radius: var(--r-xl);
  background:
    linear-gradient(120deg, rgba(11, 12, 14, 0.92), rgba(11, 12, 14, 0.48)),
    url("img/drakon/slides/drakon-awakening.webp") center / cover;
}
.auth-tabs { border-bottom-color: var(--line-soft); }
.auth-tab { color: var(--text-faint); border: 0; background: none; }
.auth-tab.is-active { color: var(--gold-bright); background: rgba(201, 171, 112, 0.055); box-shadow: inset 0 -1px var(--gold); }

.stats-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-card { min-height: 154px; padding: 24px; border-radius: var(--r-lg); }
.stat-card:hover { border-color: rgba(201, 171, 112, 0.3); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stat-card__icon { width: 74px; height: 74px; filter: grayscale(0.18) saturate(0.76); }
.stat-card__label { color: var(--text-faint); font-family: var(--font-ui); }
.stat-card__value { color: var(--text); font-family: var(--font-display); font-weight: 600; text-shadow: none; }

.classes-view {
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(34px, 5vw, 74px);
}
.classes-view .section-head {
  position: sticky;
  top: 112px;
  margin: 0;
  padding: 0 0 22px;
}
.classes-view .section-head__hint { display: block; margin-top: 14px; line-height: 1.7; }
.classes-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
}
.class-card {
  grid-column: span 3;
  height: 430px;
  overflow: hidden;
  border: 1px solid rgba(201, 171, 112, 0.15);
  border-radius: var(--r-lg);
  background: #0d0e10;
  box-shadow: var(--shadow-sm);
}
.class-card:first-child { grid-column: span 6; }
.class-card:hover,
.class-card:focus-visible { border-color: rgba(201, 171, 112, 0.42); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.class-card::before { background: linear-gradient(180deg, transparent 30%, rgba(8, 10, 11, 0.95)); }
.class-card::after { background: var(--gold); box-shadow: none; }
.class-card__art { filter: grayscale(0.08) saturate(0.78) contrast(1.03); transform: scale(0.96); }
.class-card.is-premium-visible .class-card__art,
.class-card:hover .class-card__art { transform: scale(1.035); filter: grayscale(0) saturate(0.92) contrast(1.03); }
.class-card__rune { color: var(--gold); border-color: rgba(201, 171, 112, 0.28); background: rgba(8, 10, 11, 0.86); box-shadow: none; }
.class-card__name { color: var(--text); font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -0.015em; text-shadow: none; }
.class-card__role { color: var(--gold); font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.13em; }
.class-card__desc { color: var(--text-dim); font-family: var(--font-ui); font-size: 13px; }
.class-card__stats li { border-color: var(--line-soft); background: rgba(255, 255, 255, 0.025); }

/* The featured card is twice as wide, but its portrait should keep the same
   physical scale as the remaining class portraits instead of filling by crop. */
@media (min-width: 1181px) {
  .class-card:first-child .class-card__art {
    width: min(64%, 270px);
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

.killer-frame,
.podium {
  border-color: rgba(201, 171, 112, 0.2);
  background: rgba(13, 14, 16, 0.86);
  box-shadow: var(--shadow-md);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(201, 171, 112, 0.15);
  border-radius: var(--r-lg);
  background: rgba(11, 12, 14, 0.82);
  box-shadow: var(--shadow-sm);
}
.data-table { font-family: var(--font-ui); }
.data-table thead th,
.cs-table th {
  color: var(--gold);
  border-bottom-color: rgba(201, 171, 112, 0.2);
  background: rgba(201, 171, 112, 0.035);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
}
.data-table tbody td,
.cs-table td { border-bottom-color: rgba(201, 171, 112, 0.075); }
.data-table tbody tr:hover td,
.cs-table tr:hover td { color: #fff; background: rgba(201, 171, 112, 0.045); }
.rank-cell { color: var(--gold-bright); font-family: var(--font-ui); }
.rank-tabs { border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.018); }
.rank-tab { color: var(--text-faint); border: 0; background: transparent; }
.rank-tab.is-active { color: #fff; background: rgba(201, 171, 112, 0.08); box-shadow: inset 0 -1px var(--gold); }

.benefits-grid { gap: 16px; }
.benefit-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(8, 10, 11, 0.9);
}
.benefit-icon--exp { color: var(--gold-bright); }
.benefit-icon--drop { color: var(--good); }
.benefit-icon--gem { color: var(--crimson-bright); }
.benefit-card { border-radius: var(--r-lg); }
.benefit-card--vip { border-color: rgba(201, 171, 112, 0.32); background: linear-gradient(145deg, rgba(25, 20, 17, 0.94), rgba(12, 13, 15, 0.92)); }
.benefit-card__title { color: var(--text); font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.benefit-card__badge { color: var(--gold-bright); border-color: var(--line); background: rgba(201, 171, 112, 0.06); }
.benefit-list li { border-color: var(--line-soft); background: rgba(255, 255, 255, 0.018); }
.benefit-list li:hover { background: rgba(201, 171, 112, 0.045); transform: translateX(3px); }

.events-grid {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding-bottom: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
.events-grid::-webkit-scrollbar { height: 5px; }
.events-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.025); }
.events-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(201, 171, 112, 0.34); }
.events-grid > .events-grid__state { flex: 1 0 100%; }
.event-card {
  flex: 0 0 clamp(210px, 18.5vw, 268px);
  min-width: 0;
  min-height: 410px;
  border-radius: var(--r-lg);
  scroll-snap-align: start;
  transition: flex 440ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms ease, border-color 260ms ease;
}
.event-card:hover,
.event-card:focus-within { flex-basis: clamp(300px, 27vw, 390px); border-color: rgba(201, 171, 112, 0.38); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.event-card__icon { filter: grayscale(0.1) saturate(0.78); }
.event-card__title { color: var(--text); font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -0.012em; text-shadow: none; }
.event-card:hover .event-card__title { letter-spacing: -0.012em; }
.event-card__cadence { color: var(--gold); font-family: var(--font-ui); }
.event-card__toggle { color: var(--text-dim); border-color: var(--line-soft); background: rgba(255, 255, 255, 0.02); }

.latest-market__grid,
.chaos-feed { gap: 12px; }
.lm-card,
.chaos-card { border-radius: var(--r-lg); }
.lm-card:hover,
.chaos-card:hover { border-color: rgba(201, 171, 112, 0.34); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.gallery { border: 1px solid rgba(201, 171, 112, 0.16); border-radius: var(--r-xl); background: #0c0d0f; box-shadow: var(--shadow-md); }
.gallery__slide img { filter: saturate(0.78) contrast(1.04); }
.gallery__slide.is-active img { transform: scale(1); }

.download-card {
  min-height: 440px;
  border-radius: var(--r-xl);
  background:
    linear-gradient(90deg, rgba(9, 11, 12, 0.98) 0 45%, rgba(9, 11, 12, 0.5)),
    url("img/drakon/slides/drakon-forge.webp") 72% center / cover;
  box-shadow: var(--shadow-lg);
}
.download-card__title { font-size: clamp(42px, 5vw, 66px); }
.download-card__desc { max-width: 52ch; color: var(--text-dim); }
.download-card__art { opacity: 0; }

.footer {
  border-top: 1px solid rgba(201, 171, 112, 0.14);
  background: rgba(7, 8, 11, 0.88);
  box-shadow: none;
}
.footer__inner { max-width: var(--premium-max); }
.footer__nav a:hover { color: var(--gold-bright); text-shadow: none; }
.footer__copy { color: var(--text-faint); }

.drakon-credit {
  right: 14px;
  bottom: 14px;
  width: 172px;
  min-height: 44px;
  border-color: rgba(201, 171, 112, 0.3);
  border-radius: var(--r-md);
  background: rgba(10, 12, 13, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}
.drakon-credit::before { background: linear-gradient(105deg, transparent 26%, rgba(201, 171, 112, 0.1) 50%, transparent 74%); }
.drakon-credit:hover { border-color: var(--gold); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46); }
.drakon-credit__seal { color: var(--gold); border-color: rgba(201, 171, 112, 0.34); border-radius: var(--r-sm); background: rgba(201, 171, 112, 0.05); box-shadow: none; }
.drakon-credit__copy small { color: var(--gold); font-family: var(--font-ui); }
.drakon-credit__copy strong { font-family: var(--font-ui); font-weight: 600; text-shadow: none; }
.drakon-credit__spark { background: var(--gold-bright); box-shadow: 0 0 7px rgba(201, 171, 112, 0.5); }

/* Market and webshop */
.mk-page,
.ws-page,
.pf-page,
.cs-page {
  width: 100%;
  max-width: var(--premium-max);
  margin: 0 auto;
  padding: 52px var(--premium-gutter) 96px;
}
.mk-head,
.ws-head {
  align-items: end;
  min-height: 122px;
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.mk-head h1,
.ws-head h1 { font-size: clamp(46px, 5.6vw, 72px); line-height: 0.92; }
.mk-tabs {
  width: max-content;
  max-width: 100%;
  margin-bottom: 28px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.018);
  box-shadow: none;
}
.mk-tab {
  padding: 10px 22px;
  color: var(--text-faint);
  border: 0;
  background: transparent;
  transform: none;
  box-shadow: none;
}
.mk-tab span { transform: none; }
.mk-tab:hover { color: #fff; }
.mk-tab.is-active { color: #fff; border: 0; background: rgba(201, 171, 112, 0.09); box-shadow: inset 0 -1px var(--gold); }
.mk-grid,
.ws-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mk-card,
.ws-item {
  min-height: 338px;
  border: 1px solid rgba(201, 171, 112, 0.14);
  border-radius: var(--r-lg);
  background: rgba(12, 13, 15, 0.9);
  box-shadow: var(--shadow-sm);
}
.mk-card:hover,
.ws-item:hover { border-color: rgba(201, 171, 112, 0.36); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.mk-card__icon-wrap,
.ws-item__icon-wrap { border-color: var(--line-soft); background: rgba(255, 255, 255, 0.018); box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.24); }
.mk-card__icon,
.ws-item__icon { filter: saturate(0.88) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38)); }
.mk-card__name,
.ws-item__name { color: var(--text); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.mk-card__price,
.ws-item__price { color: var(--gold-bright); font-family: var(--font-ui); text-shadow: none; }
.mk-card__seller { color: var(--text-faint); font-family: var(--font-ui); }
.mk-card__seller b { color: var(--text-dim); }
.mk-empty,
.ws-empty,
.pf-state,
.cs-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  border: 1px dashed rgba(201, 171, 112, 0.2);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.012);
}
.mk-empty,
.ws-empty { grid-column: 1 / -1; }

.ws-page { grid-template-columns: 246px minmax(0, 1fr); gap: 20px 34px; }
.ws-sidebar {
  top: 104px;
  align-self: start;
  padding: 18px;
  border: 1px solid rgba(201, 171, 112, 0.16);
  border-radius: var(--r-lg);
  background: rgba(11, 12, 14, 0.88);
  box-shadow: var(--shadow-sm);
}
.ws-wallet {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(201, 171, 112, 0.035);
  box-shadow: none;
}
.ws-wallet__lbl { color: var(--text-faint); font-family: var(--font-ui); }
.ws-wallet__val { color: var(--gold-bright); font-family: var(--font-display); font-weight: 600; text-shadow: none; }
.ws-sidebar__title {
  margin: 0 0 12px;
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ws-cats button {
  min-height: 42px;
  color: var(--text-dim);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ws-cats button:hover { color: #fff; border: 0; background: rgba(201, 171, 112, 0.05); }
.ws-cats button.is-active { color: #fff; border: 0; background: rgba(201, 171, 112, 0.09); box-shadow: inset 2px 0 var(--gold); }
.ws-cats svg { color: var(--gold); }
.ws-cat-code {
  width: 23px;
  flex: 0 0 23px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
.ws-msg.is-good { color: var(--good); border-color: rgba(85, 195, 139, 0.35); background: rgba(85, 195, 139, 0.08); }
.ws-msg.is-bad { color: var(--danger); border-color: rgba(230, 178, 114, 0.36); background: rgba(230, 178, 114, 0.08); }
.ws-cfg__preview,
.wa-form__preview,
.pk-image-preview,
.pk-catalog,
.pk-list { border-color: var(--line-soft); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.018); }
.ws-cfg__chk { border-color: var(--line-soft); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.018); }
.ws-cfg__chk:hover,
.ws-cfg__chk.is-on { border-color: rgba(201, 171, 112, 0.42); background: rgba(201, 171, 112, 0.07); box-shadow: none; }
.ws-cfg__price { border-color: var(--line); background: rgba(201, 171, 112, 0.05); }
.ws-cfg__price-val { color: var(--gold-bright); font-family: var(--font-ui); text-shadow: none; }

/* Castle Siege */
.page-castle .bg-layer { filter: grayscale(0.1) saturate(0.68) brightness(0.4) contrast(1.08); }
.cs-hero {
  min-height: 420px;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.8fr);
  gap: clamp(34px, 6vw, 86px);
  padding: clamp(38px, 6vw, 78px);
  border: 1px solid rgba(201, 171, 112, 0.27);
  border-top: 1px solid var(--gold);
  border-radius: var(--r-xl);
  background:
    linear-gradient(100deg, rgba(10, 11, 12, 0.96), rgba(24, 16, 14, 0.76)),
    url("img/drakon/slides/castle-siege.webp") center / cover;
  box-shadow: var(--shadow-xl);
  transform: none !important;
}
.cs-hero__glare { display: none; }
.cs-hero__mark { border-color: rgba(201, 171, 112, 0.28); border-radius: var(--r-lg); background: rgba(5, 6, 7, 0.64); box-shadow: none; transform: none; }
.cs-hero__mark img { filter: saturate(0.78) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42)); }
.cs-hero__crown { color: var(--gold-bright); text-shadow: none; }
.cs-hero__title { font-size: clamp(52px, 6.4vw, 86px); line-height: 0.92; }
.cs-hero__subtitle { color: var(--text-faint); font-family: var(--font-ui); }
.cs-hero__subtitle span { color: var(--gold-bright); }
.cs-stats { gap: 0; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: rgba(5, 6, 7, 0.48); }
.cs-stat { min-width: 120px; padding: 16px 20px; border-right: 1px solid var(--line-soft); }
.cs-stat:last-child { border-right: 0; }
.cs-stat span:first-child { color: var(--text-faint); font-family: var(--font-ui); }
.cs-stat span:last-child { color: var(--text); font-family: var(--font-ui); text-shadow: none; }
.cs-stat--tax span:last-child { color: var(--gold-bright); text-shadow: none; }
.cs-panel { border: 1px solid rgba(201, 171, 112, 0.15); border-radius: var(--r-xl); background: rgba(11, 12, 14, 0.9); box-shadow: var(--shadow-md); }
.cs-panel::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: none; opacity: 0.4; }
.cs-timer-frame { border-color: rgba(201, 171, 112, 0.28); border-radius: var(--r-md); background: rgba(201, 171, 112, 0.035); box-shadow: none; }
.cs-timer-label { color: var(--text-dim); font-family: var(--font-ui); }
.cs-timer-label svg { color: var(--gold); }
.cs-timer-value { color: var(--text); font-family: var(--font-ui); font-weight: 600; text-shadow: none; }
.cs-schedule::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: none; }
.cs-step { color: var(--text-faint); border-color: rgba(201, 171, 112, 0.22); background: #111214; box-shadow: none; }
.cs-step.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(201, 171, 112, 0.08); box-shadow: 0 0 0 5px rgba(201, 171, 112, 0.04); }
.cs-step.is-warfare { color: #d2ab7c; border-color: #a88151; }
.cs-step__label { color: var(--text-dim); font-family: var(--font-ui); }
.cs-panel-title { color: var(--text); font-family: var(--font-display); font-size: 30px; font-weight: 600; }
.cs-panel-title svg { color: var(--gold); }

/* Profile */
.pf-back { margin-bottom: 30px; }
.pf-hero,
.pf-panel,
.pf-equip {
  border: 1px solid rgba(201, 171, 112, 0.15);
  border-radius: var(--r-xl);
  background: rgba(11, 12, 14, 0.88);
  box-shadow: var(--shadow-md);
}
.pf-hero::before,
.pf-panel::before,
.pf-equip::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: none; opacity: 0.35; }
.pf-avatar img { filter: grayscale(0.06) saturate(0.78) drop-shadow(0 24px 26px rgba(0, 0, 0, 0.48)); }
.pf-avatar::after { background: radial-gradient(ellipse, rgba(159, 97, 66, 0.2), transparent 70%); filter: blur(8px); }
.pf-name { font-size: clamp(52px, 6vw, 80px); }
.pf-subline { color: var(--text-faint); font-family: var(--font-ui); }
.pf-subline b { color: var(--gold-bright); }
.pf-metric,
.pf-sibling,
.pf-guild { border-color: var(--line-soft); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.018); box-shadow: none; }
.pf-metric:hover,
.pf-sibling:hover,
.pf-guild:hover { color: #fff; border-color: rgba(201, 171, 112, 0.38); background: rgba(201, 171, 112, 0.04); box-shadow: none; }
.pf-metric__lbl { color: var(--text-faint); font-family: var(--font-ui); }
.pf-metric__val { color: var(--text); font-family: var(--font-ui); font-weight: 600; text-shadow: none; }
.pf-metric--accent .pf-metric__val { color: var(--gold-bright); }
.pf-panel__title,
.pf-equip__title { color: var(--text); border-bottom-color: var(--line-soft); font-family: var(--font-display); font-size: 27px; font-weight: 600; }
.pf-panel__title svg,
.pf-equip__title svg { color: var(--gold); }
.equip__board,
.equip__side { border-color: var(--line-soft); border-radius: var(--r-lg); background-color: rgba(5, 7, 8, 0.52); box-shadow: none; }
.equip__slot { border-color: rgba(201, 171, 112, 0.22); background-color: rgba(255, 255, 255, 0.022); box-shadow: none; }
.equip__slot:hover,
.equip__slot.is-selected { border-color: var(--gold); background-color: rgba(201, 171, 112, 0.075); box-shadow: 0 0 0 3px rgba(201, 171, 112, 0.05); }
.equip__itemname,
.equip__k,
.pf-sibling-name { font-family: var(--font-ui); }

/* SV Fast */
.svf-shell { min-height: 100dvh; padding: 72px 20px; }
.svf-card {
  max-width: 580px;
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid rgba(201, 171, 112, 0.22);
  border-top: 1px solid var(--gold);
  border-radius: var(--r-xl);
  background: rgba(11, 12, 14, 0.94);
  box-shadow: var(--shadow-xl);
}
.svf-card::before { background: radial-gradient(circle, rgba(159, 97, 66, 0.12), transparent 62%); }
.svf-corner { border-color: var(--gold); opacity: 0.3; }
.svf-brand { margin-bottom: 26px; }
.svf-brand img { filter: saturate(0.76) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)); animation: none; }
.svf-brand-name { font-size: 26px; }
.svf-badge { color: var(--gold); border-color: rgba(201, 171, 112, 0.3); border-radius: var(--r-sm); background: rgba(201, 171, 112, 0.045); box-shadow: none; }
.svf-badge::before { background: var(--gold); box-shadow: none; animation: none; }
.svf-title { font-size: clamp(42px, 6vw, 58px); line-height: 1; }
.svf-sub { max-width: 46ch; margin-inline: auto; color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.svf-form { gap: 17px; text-align: left; }
.svf-msg.is-good { color: var(--good); text-shadow: none; }
.svf-msg.is-bad { color: var(--danger); text-shadow: none; }

/* Native scroll reveals */
.premium-reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-reveal.is-premium-visible { opacity: 1; transform: translateY(0) scale(1); }
.premium-media-reveal { opacity: 0.42; transform: scale(0.94); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.premium-media-reveal.is-premium-visible { opacity: 1; transform: scale(1); }

.drakon-route-transition { background: rgba(6, 8, 9, 0.96); }
.drakon-route-transition__veil { background: linear-gradient(90deg, #08090c, #131517 48%, #08090c); filter: none; }
.drakon-route-transition__mist { background: radial-gradient(ellipse, rgba(159, 97, 66, 0.18), transparent 66%); }
.drakon-route-transition__rift { background: linear-gradient(180deg, transparent, var(--gold) 50%, transparent); box-shadow: 0 0 22px rgba(201, 171, 112, 0.3); }
.drakon-route-transition__seal::before,
.drakon-route-transition__seal::after { border-color: rgba(201, 171, 112, 0.32); box-shadow: none; }
.drakon-route-transition__seal img { filter: saturate(0.74) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42)); }
.drakon-route-transition__orbit { border-top-color: var(--gold); }
.drakon-route-transition__eyebrow { color: var(--gold); font-family: var(--font-ui); }
.drakon-route-transition__label { font-family: var(--font-display); text-shadow: none; }
.drakon-route-transition__dots i { background: var(--gold); box-shadow: none; }
.drakon-network-progress__bar { background: linear-gradient(90deg, var(--crimson), var(--gold)); box-shadow: none; }
.drakon-action-loader { background: #121416; }
.drakon-action-loader i { border-top-color: var(--gold); box-shadow: none; }

@media (max-width: 1180px) {
  .topbar__nav { gap: 22px; }
  .nav-link { font-size: 11px; }
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr); }
  .classes-view { grid-template-columns: 1fr; }
  .classes-view .section-head { position: static; }
  .class-card:first-child,
  .class-card { grid-column: span 4; }
  .events-grid { flex-wrap: nowrap; }
}

@media (max-width: 900px) {
  :root { --premium-gutter: clamp(18px, 4vw, 32px); --section-gap: 72px; }
  .hero { min-height: 620px; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); padding: 50px 40px; }
  .hero__art { height: 500px; }
  .promo-row { grid-template-columns: 1fr; }
  .promo-box { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .promo-box:last-child { border-bottom: 0; }
  .stats-grid { grid-template-columns: 1fr; }
  .class-card:first-child,
  .class-card { grid-column: span 6; }
  .ws-page { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .ws-head,
  .ws-sidebar,
  .ws-main { min-width: 0; max-width: 100%; }
  .ws-sidebar { position: static; }
  .ws-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .cs-hero { grid-template-columns: 1fr; text-align: center; }
  .cs-hero__mark { margin-inline: auto; }
  .cs-stats { justify-content: center; }
}

@media (max-width: 700px) {
  :root { --premium-gutter: 18px; --section-gap: 62px; }
  html { scroll-padding-top: 76px; }
  body { font-size: 15px; }
  input,
  select,
  textarea { font-size: 16px; }
  .topbar { min-height: 68px; padding: 0 14px; }
  .brand { gap: 8px; }
  .brand__logo { width: 38px; height: 38px; }
  .brand__title { font-size: 21px; white-space: nowrap; }
  .brand__sub { display: none; }
  .topbar__actions > .btn { min-width: 0; min-height: 38px; padding: 8px 11px; font-size: 10px; }
  .drakon-visitors { min-width: 38px; width: 38px; padding: 5px; justify-content: center; }
  .drakon-visitors__copy { display: none; }
  .topbar__actions .drakon-visitors__icon { display: grid; }

  .hud-strip {
    width: calc(100% - 28px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
    border-radius: var(--r-md);
  }
  .hud-strip__item {
    min-height: 74px;
    padding: 10px 7px;
    gap: 6px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .hud-strip__icon { width: 28px; height: 28px; }
  .hud-strip__icon svg { width: 16px; height: 16px; }
  .hud-strip__label { font-size: 7px; letter-spacing: 0.08em; white-space: nowrap; }
  .hud-strip__value { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

  .main { margin-top: 18px; padding-inline: 18px; padding-bottom: 54px; }
  .hero {
    min-height: 650px;
    display: block;
    padding: 44px 24px 36px;
    border-radius: var(--r-lg);
  }
  .hero__content { position: relative; z-index: 3; max-width: 100%; }
  .hero__eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: 0.13em; }
  .hero__title { display: block; margin-bottom: 20px; line-height: 0.78; }
  .hero__title-primary { display: block; font-size: clamp(66px, 23vw, 90px); }
  .hero__title-secondary { display: block; margin-top: 8px; font-size: clamp(38px, 14vw, 54px); }
  .hero__tagline { max-width: 31ch; margin-bottom: 28px; font-size: 15px; line-height: 1.62; }
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .hero__cta .btn { width: 100%; min-width: 0; }
  .hero__hero-art {
    display: flex !important;
    position: absolute;
    right: -66px;
    bottom: -80px;
    width: 310px;
    min-height: 430px;
    opacity: 0.3;
    z-index: 1;
  }
  .hero__art {
    display: block !important;
    width: 100%;
    height: 430px;
    filter: grayscale(0.18) saturate(0.62);
    animation: none;
  }
  .hero__art-glow { display: none; }
  .hero::after { background: linear-gradient(90deg, rgba(8, 10, 11, 0.98) 0 56%, rgba(8, 10, 11, 0.58)); }

  .realm-strip { margin-bottom: 62px !important; }
  .realm-strip__track { width: 100%; animation: none; }
  .realm-strip__group { width: 100%; min-width: 0; grid-template-columns: repeat(2, 1fr); }
  .realm-strip__group[aria-hidden="true"] { display: none; }
  .realm-strip__group > span { min-height: 72px; padding: 12px 14px; }
  .realm-strip strong { font-size: 23px; }

  .section-head { display: block; margin-bottom: 24px; padding-bottom: 14px; text-align: left; }
  .section-head h2 { font-size: 35px; letter-spacing: -0.025em; }
  .section-head h2::before { display: none; }
  .section-head__hint { margin-top: 8px; text-align: left; }

  .hslider { border-radius: var(--r-lg); }
  .hslider__slide { min-height: 420px; padding: 38px 24px 68px; }
  .hslider__slide::after { background: linear-gradient(180deg, rgba(8, 10, 11, 0.5), rgba(8, 10, 11, 0.96) 72%); }
  .hslider__content { align-self: end; }
  .hslider__title { font-size: 38px; }
  .hslider__desc { font-size: 14px; }
  .promo-box { min-height: 96px; padding: 18px; }

  .auth-view { grid-template-columns: 1fr; }
  .auth-card,
  .auth-side { border-radius: var(--r-lg); }
  .auth-side { min-height: 300px; }
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 116px; padding: 16px; }
  .stat-card__icon { width: 58px; height: 58px; }

  .classes-view { display: block; }
  .classes-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(278px, 82vw);
    gap: 12px;
    margin-inline: -18px;
    padding: 0 18px 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }
  .class-card:first-child,
  .class-card {
    grid-column: auto;
    height: 460px;
    scroll-snap-align: start;
  }
  .class-card__art-wrap { min-height: 300px; }
  .class-card:first-child .class-card__art {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
  }
  .event-card,
  .event-card:hover,
  .event-card:focus-within { flex: 0 0 min(82vw, 310px); min-height: 440px; }
  .events-grid { display: flex; grid-template-columns: none; margin-inline: -18px; padding-inline: 18px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .download-card { min-height: 500px; padding: 36px 24px; background-position: 64% center; }
  .download-card__body { max-width: 100%; }
  .download-card__title { font-size: 42px; }

  .mk-page,
  .ws-page,
  .pf-page,
  .cs-page { padding: 34px 18px 64px; }
  .mk-head,
  .ws-head { display: block; min-height: 0; margin-bottom: 24px; padding-bottom: 18px; }
  .mk-head h1,
  .ws-head h1 { font-size: 48px; }
  .mk-head__hint,
  .ws-head__hint { display: block; margin-top: 10px; line-height: 1.6; }
  .mk-tabs { width: 100%; }
  .mk-tab { flex: 1; padding-inline: 10px; }
  .mk-grid,
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk-card,
  .ws-item { min-height: 310px; padding: 14px 12px; }
  .mk-card__name,
  .ws-item__name { font-size: 18px; }
  .ws-sidebar { padding: 14px; }
  .ws-cats { width: 100%; max-width: 100%; min-width: 0; display: flex; overflow-x: auto; gap: 5px; padding-bottom: 5px; scrollbar-width: thin; }
  .ws-cats::-webkit-scrollbar { height: 4px; }
  .ws-cats::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
  .ws-cats::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(201, 171, 112, 0.42); }
  .ws-cats li { flex: 0 0 auto; }
  .ws-cats button { padding-inline: 14px; border: 1px solid var(--line-soft); }
  .ws-cats button.is-active { border-color: rgba(201, 171, 112, 0.34); box-shadow: inset 0 -2px var(--gold); }
  .ws-modal__card,
  .mk-modal__card { max-height: calc(100dvh - 24px); padding-bottom: env(safe-area-inset-bottom); border-radius: var(--r-lg); }
  .ws-cfg__row,
  .mk-form-row,
  .wa-form__row,
  .pk-items-area,
  .pkb-detail { grid-template-columns: 1fr; }

  .cs-page { padding-top: 28px; }
  .cs-hero { min-height: 0; padding: 30px 20px; border-radius: var(--r-lg); }
  .cs-hero__mark { width: 190px; height: 190px; }
  .cs-hero__title { font-size: 48px; }
  .cs-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
  .cs-stat { min-width: 0; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .cs-panel { padding: 26px 16px; border-radius: var(--r-lg); }
  .cs-timer-value { font-size: 25px; letter-spacing: 0.035em; white-space: nowrap; }
  .cs-schedule { width: 100%; margin-inline: 0; padding-inline: 14px; overflow-x: auto; }
  .cs-step { flex: 0 0 52px; }
  .cs-step__label { width: 82px; font-size: 9px; }
  .cs-page .table-wrap { overflow-x: auto; }
  .cs-table { min-width: 560px; }

  .pf-hero { padding: 24px 18px; }
  .pf-name { font-size: 48px; }
  .pf-metrics { gap: 8px; }
  .pf-equip { padding: 20px 14px; }
  .pf-equip__head { display: block; }
  .pf-equip__hint { margin-top: 7px; text-align: left; }

  .svf-shell { padding: 62px 18px 52px; align-items: flex-start; }
  .svf-card { width: 100%; padding: 34px 22px; border-radius: var(--r-lg); }
  .svf-title { font-size: 42px; }

  .footer { padding: 38px 18px 28px; }
  .footer__inner { gap: 22px; }
  .footer__nav { flex-wrap: wrap; justify-content: center; }

  .drakon-credit {
    position: relative;
    z-index: 8;
    right: auto;
    bottom: auto;
    width: min(184px, calc(100% - 36px));
    margin: 24px auto calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 430px) {
  .topbar__actions { gap: 5px; }
  .topbar__actions > .btn { display: none; }
  .hero { min-height: 630px; }
  .hero__title-primary { font-size: 70px; }
  .hero__title-secondary { font-size: 43px; }
  .realm-strip__group > span { grid-template-columns: 1fr; gap: 0; }
  .realm-strip em { display: none; }
  .mk-grid,
  .ws-grid { grid-template-columns: 1fr; }
  .mk-card,
  .ws-item { min-height: 330px; }
  .cs-timer-value { font-size: 22px; }
  .pf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  .premium-reveal,
  .premium-media-reveal { opacity: 1; transform: none; }
  .realm-strip__track { animation: none; }
}