#main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: auto;
  min-height: var(--nav-h);
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  transition: border-color .3s;
  overflow: visible;
}

#main-header.scrolled {
  border-bottom-color: var(--accent-border);
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(12px, 1.8vw, 22px);
  height: 100%;
  overflow: visible;
}

.header-inner.header-container {
  width: 100%;
  max-width: 100%;
}

#main-header .header-inner.header-container.container {
  padding-inline: clamp(22px, 4.5vw, 40px);
}

.header-logo,
.footer-logo {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo-mu     { color: var(--accent); font-size: 1.4rem; }
.logo-dot    { color: var(--text-dim); font-size: 1rem; margin: 0 1px; }
.logo-online { color: var(--text-primary); font-size: 1.1rem; letter-spacing: .12em; }

#main-header a.header-logo.theme-brand-logo {
  display: block;
  width: clamp(148px, 28vw, 232px);
  height: clamp(44px, 7.5vw, 58px);
  max-height: calc(var(--nav-h) - 20px);
  flex-shrink: 0;
  background-image: var(--theme-brand-logo-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  transition: filter 0.2s ease, transform 0.2s ease;
}
#main-header a.header-logo.theme-brand-logo:hover {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px var(--accent-glow));
}

.footer-brand a.footer-logo.theme-brand-logo {
  display: block;
  width: min(248px, 72vw);
  height: 68px;
  margin-bottom: 14px;
  background-image: var(--theme-brand-logo-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

.auth-logo.theme-brand-logo {
  display: block;
  width: min(272px, 86vw);
  height: clamp(70px, 13vh, 96px);
  margin: 0 auto 6px;
  background-image: var(--theme-brand-logo-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.5));
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  position: relative;
  z-index: 10020;
}

.desktop-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}

.desktop-nav > ul > li {
  margin: 0;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  min-height: 48px;
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color .2s, background .2s;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.2;
}

.nav-link > i {
  font-size: 0.92em;
  opacity: 0.88;
  width: 1.15em;
  text-align: center;
  flex-shrink: 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 16px; right: 16px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s;
  transform-origin: left;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-caret {
  font-size: .7rem;
  transition: transform .2s;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 200px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s, visibility .2s, transform .2s;
  box-shadow: var(--shadow-card);
}

.dropdown-menu a {
  display: block;
  padding: 9px 14px;
  font-size: .87rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.dropdown-menu a:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.nav-dd {
  position: relative;
}

.nav-dd::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  top: 100%;
  height: 16px;
  z-index: 0;
}
.nav-dd-btn {
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  transition: color 0.2s, background 0.2s;
  line-height: 1.2;
}

.nav-dd-btn > i:first-of-type {
  font-size: 0.92em;
  opacity: 0.88;
  width: 1.15em;
  text-align: center;
  flex-shrink: 0;
}
.nav-dd-btn:hover {
  color: var(--text-primary);
  background: var(--accent-dim);
}
.nav-dd-chevron {
  font-size: 0.76rem;
  color: var(--text-dim);
  transition: transform 0.2s;
  margin-left: 2px;
  flex-shrink: 0;
}
.nav-dd:hover .nav-dd-chevron,
.nav-dd:focus-within .nav-dd-chevron {
  transform: rotate(180deg);
}
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 10030;
  box-shadow: var(--shadow-card);
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.is-open .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dd.is-open .nav-dd-chevron {
  transform: rotate(180deg);
}
.nav-dd-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.93rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.nav-dd-menu a:hover {
  color: var(--accent);
  background: var(--accent-dim);
}
.nav-dd-menu a::after {
  display: none !important;
}
.nav-dd-sep {
  height: 1px;
  background: var(--border);
  margin: 2px 2px;
}

.nav-buy-vip-link {
  color: var(--accent);
}
.nav-buy-vip-link:hover {
  color: var(--text-primary);
}

.nav-dd-menu .nav-vip-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-dd-menu .nav-vip-opt:hover {
  color: var(--text-primary);
  background: var(--accent-dim);
  border-color: rgba(94, 184, 255, 0.28);
}
.nav-vip-opt__name {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-vip-opt__price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.mm-vip {
  display: grid;
  gap: 8px;
  margin: 4px 0 2px;
}
.mm-vip-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 4px;
}
.mm-vip-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(94, 184, 255, 0.35);
  background: linear-gradient(135deg, rgba(94, 184, 255, 0.16), rgba(120, 200, 255, 0.08));
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.mm-vip-btn:hover {
  border-color: rgba(94, 184, 255, 0.55);
  background: linear-gradient(135deg, rgba(94, 184, 255, 0.24), rgba(120, 200, 255, 0.12));
}
.mm-vip-btn__price {
  font-size: 0.85rem;
  opacity: 0.92;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  flex-shrink: 0;
}

#main-header .logo {
  flex-shrink: 0;
}

#main-header .header-right {
  flex-shrink: 0;
}

.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-auth-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-cta {
  display: inline-flex;
}

.nav-link--soft {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  padding: 9px 12px !important;
  min-height: 40px !important;
  opacity: 0.92;
}

.header-auth {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sm {
  padding: 8px 18px !important;
  font-size: .8rem !important;
}

.btn-gold {
  background: var(--brand-gradient, linear-gradient(135deg, #0d4798 0%, #0a307e 100%));
  color: #f5f8ff;
  border: 1px solid rgba(122, 166, 255, 0.45);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(18, 59, 148, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #1578c8 0%, #0d4798 50%, #0a307e 100%);
  color: #fff;
  box-shadow: 0 16px 36px rgba(18, 59, 148, 0.5), 0 0 32px rgba(62, 123, 250, 0.25);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.server-select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}
.server-select:hover,
.server-select:focus {
  border-color: var(--accent-border);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: transform .25s, opacity .25s;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 20px;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.mobile-nav a:hover { color: var(--accent); background: var(--accent-dim); }

.mobile-nav-auth {
  display: flex;
  gap: 10px;
  padding: 10px 14px 0;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .2s;
}
.user-chip:hover { border-color: var(--accent-border); }
.user-chip-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: .8rem;
}

#main-footer {
  background: var(--bg-void);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.15fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.footer-col--legal ul a.footer-terms-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
}

.footer-col--legal ul a.footer-terms-all i {
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.footer-col--legal ul a.footer-terms-all:hover i {
  transform: translateX(3px);
}

.footer-legal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  padding: 20px 0 8px;
  margin-bottom: 8px;
}

.footer-legal-bar a {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}

.footer-legal-bar a:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.footer-legal-sep {
  color: var(--text-dim);
  font-size: 0.82rem;
  user-select: none;
}

.footer-brand .footer-logo {
  font-size: 1.2rem;
  margin-bottom: 14px;
  display: inline-flex;
}

.footer-tagline {
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 280px;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: .9rem;
  transition: color .2s, border-color .2s, background .2s;
}
.social-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  color: var(--text-muted);
  font-size: .88rem;
  transition: color .15s;
}
.footer-col ul a:hover { color: var(--accent); }

.footer-bottom {
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.footer-copy,
.footer-disclaimer {
  color: var(--text-dim);
  font-size: .8rem;
}

@media (max-width: 1024px) {
  .desktop-nav > ul { gap: 6px; }
  .nav-link { padding: 10px 14px; min-height: 44px; font-size: 0.84rem; gap: 8px; }
  .nav-dd-btn { padding: 10px 14px; min-height: 44px; font-size: 0.84rem; gap: 8px; }
}

@media (min-width: 1025px) {
  #main-header .hamburger,
  #main-header #mobile-menu-toggle {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  
  .hamburger,
  #main-header .hamburger,
  #mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    flex-shrink: 0;
    position: relative;
    z-index: 10040;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.42);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  }
  .hamburger span,
  #main-header .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    opacity: 0.92;
  }
  .header-auth { display: none; }
  .server-selector { display: none; }
  
  #header-cta {
    display: none !important;
  }
  .header-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
    overflow: visible;
  }
  #header-server-dd .dd-label,
  #header-lang-dd .dd-label {
    max-width: min(120px, 28vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--legal { grid-column: 1 / -1; }
  .footer-legal-bar { gap: 4px 2px; padding: 16px 0 4px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-legal-sep { display: none; }
  .footer-legal-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .footer-legal-bar a { text-align: center; }
}

.page-hero {
  width: 100%;
  background: rgba(19, 17, 23, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 48px;
  min-height: min(22rem, 52vh);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 150%, var(--accent-glow), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--theme-page-hero-badge-image, url("../icon/cioara.png"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.42;
  filter: saturate(1.05) contrast(1.06);
}

.page-hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero .badge {
  margin-bottom: 18px;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--text-primary);
  margin-bottom: 10px;
  max-width: min(48rem, 100%);
  width: 100%;
}
.page-hero-title span { color: var(--accent); }
.page-hero-sub {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 36rem;
  width: 100%;
  margin: 0 auto;
}

.header-dd {
  position: relative;
}

.header-dd-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: clamp(0.86rem, 1vw, 0.94rem);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.header-dd-btn:hover { border-color: var(--accent-border); color: var(--text-primary); }

.dd-caret {
  font-size: .65rem;
  transition: transform .2s;
}
.header-dd-btn[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

.header-dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: var(--shadow-card);
  z-index: 500;
}

.dd-opt {
  padding: 9px 12px;
  font-size: .87rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s, background .15s;
}
button.dd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dd-opt:hover { color: var(--accent); background: var(--accent-dim); }
.dd-opt.active { color: var(--accent); font-weight: 700; }

.dd-label.dd-label--lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dd-lang-code {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}
.dd-lang-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text-primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--text-primary));
}
.dd-lang-flag--btn {
  width: 18px;
  height: 13px;
}
.dd-opt.dd-opt--lang {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.dd-opt.dd-opt--lang .dd-lang-name {
  min-width: 0;
  flex: 1;
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
  background: transparent;
}

.mobile-menu-overlay.open {
  display: block;
  pointer-events: all;
  background: rgba(2, 8, 18, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-menu-inner {
  position: absolute;
  top: var(--nav-h, 72px);
  right: 0;
  width: min(320px, 92vw);
  height: calc(100% - var(--nav-h, 72px));
  max-height: calc(100dvh - var(--nav-h, 72px));
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px 32px;
  overflow-y: auto;
  animation: slideInRight .25s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.mm-title {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-dim);
}

.mm-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mm-close:hover { color: var(--accent); border-color: var(--accent-border); }

.mm-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s, background .15s;
  cursor: pointer;
}
.mm-link i {
  flex-shrink: 0;
  width: 1.15em;
  text-align: center;
  color: var(--accent, #f59e0b);
  opacity: 0.95;
}
.mm-link span {
  flex: 1;
  min-width: 0;
}
.mm-link:hover, .mm-link.active { color: var(--accent); background: var(--accent-dim); }

.mm-group { display: flex; flex-direction: column; gap: 2px; }
.mm-sub { padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.mm-sub .mm-link { font-size: .83rem; text-transform: none; letter-spacing: .02em; }

.mm-sep { height: 1px; background: var(--border); margin: 8px 0; }

.mm-lang {
  margin: 10px 0 4px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
}
.mm-lang-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.mm-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mm-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mm-lang-btn.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}
.mm-lang-btn img {
  flex-shrink: 0;
}

.mm-cta-wrap {
  padding: 6px 0 4px;
}
.mm-cta-wrap .mm-cta-adventure {
  width: 100%;
  justify-content: center;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal.show { display: flex; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal-content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 440px;
  margin: 0 16px;
  box-shadow: var(--shadow-card);
  animation: fadeInUp .2s ease;
}

@keyframes fadeInUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.modal-close:hover { color: var(--accent); }

.modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.modal-message {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 20px;
}

.modal-input-group { margin-bottom: 24px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1024px) {
  #header-server-dd.header-dd,
  #header-lang-dd.header-dd {
    flex: 0 1 auto;
    min-width: 0;
  }
  #header-server-dd .header-dd-btn,
  #header-lang-dd .header-dd-btn {
    max-width: min(140px, 32vw);
    min-width: 0;
    padding-inline: 8px 10px;
  }
  .theme-switcher {
    flex-shrink: 0;
  }
}

body:not(.page-home) {
  background-color: var(--bg-void, #030a14) !important;
  background-image:
    radial-gradient(ellipse 55% 42% at 50% 28%, rgba(13, 71, 152, 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 40% 32% at 88% 78%, rgba(10, 48, 126, 0.12) 0%, transparent 58%),
    linear-gradient(180deg, rgba(4, 12, 28, 0.92) 0%, rgba(2, 8, 20, 0.98) 50%, #030a14 100%),
    var(--theme-hero-bg-image) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, cover !important;
  background-position: center, center, center, center 14% !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

body:not(.page-home) > main,
body:not(.page-home) .si-main,
body:not(.page-home) .si-hub-main {
  background: transparent;
  position: relative;
  z-index: 1;
}

body.page-downloads .dl-main-card,
body.page-downloads .dl-section,
body.page-downloads .dl-launcher-card,
body.page-auth .auth-panel,
body.page-auth .auth-side-inner,
body.page-terms .terms-content-panel,
body.page-dashboard .db-sidebar,
body.page-dashboard .db-user-card,
body.page-dashboard .db-card,
body.page-dashboard .db-balance-card,
body.page-dashboard .db-stat-card,
body.page-dashboard .db-stream-card,
body.page-dashboard .db-stream-apply,
body.page-ranking .ranking-table-wrapper--page,
body.page-ranking .ranking-tabs,
body.page-guide .guide-sidebar,
body.page-guide .guide-article,
body.page-events .ev-list,
body.page-events .ev-clocks,
body.page-shop .shop-login-gate-card,
body.page-shop .cart-view-container,
body.page-shop .package-card {
  background: var(--card-surface) !important;
  background-image: var(--card-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--card-border, rgba(13, 71, 152, 0.22)) !important;
}

body:not(.page-home) .section-title {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

body:not(.page-home) .section-title span {
  color: var(--accent);
}

body.page-guide main > section.guide-section,
body.page-events main > section.site-content-section {
  position: relative;
  z-index: 1;
  padding-top: clamp(24px, 3.5vw, 40px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

body.page-guide {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page-guide > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.page-guide .page-hero {
  padding: 44px 0 36px;
  min-height: 0;
}

body.page-guide .guide-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(32px, 4vw, 56px);
}

body.page-guide .guide-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

body.page-guide .guide-layout {
  flex: 1 1 auto;
  min-height: clamp(320px, calc(100vh - var(--nav-h) - 22rem - 14rem), 640px);
}

body.page-guide .page-hero-sub {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

body.page-guide .guide-sidebar,
body.page-guide .guide-article {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(94, 184, 255, 0.08);
}

#main-header .dd-btn,
#main-header .header-dd-btn {
  width: auto;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  grid-template-columns: unset;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: clamp(0.86rem, 1vw, 0.94rem);
  font-weight: 600;
  box-shadow: none;
  white-space: nowrap;
}

#main-header .dd-btn:hover,
#main-header .header-dd-btn:hover {
  border-color: var(--accent-border);
  color: var(--text-primary);
}

#main-header .dd-panel,
#main-header .header-dd-panel {
  left: auto;
  right: 0;
  width: auto;
  min-width: 160px;
  top: calc(100% + 8px);
  border-radius: var(--radius-md);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  padding: 6px;
  max-height: none;
  box-shadow: var(--shadow-card);
}

#main-header .dd-opt {
  padding: 9px 12px;
  font-size: 0.87rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  cursor: pointer;
}

#main-header .dd-opt:hover {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: transparent;
}

#main-header .dd-label {
  color: inherit;
  text-align: left;
}

#main-header .dd-caret,
#main-header .dd-chevron {
  color: var(--text-dim);
}

#main-header .header-actions .btn,
#main-header #header-auth-controls .btn,
#main-header #header-cta .btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  flex: 0 0 auto;
  justify-content: center;
  padding: 8px 18px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2;
  border-radius: var(--radius-sm);
}

:root {
    --mr-accent:        #5eb8ff;
    --mr-accent-rgb:    94, 184, 255;
    --mr-accent-light:  #9ad4ff;
    --mr-accent-deep:   #2a7fd4;
    --mr-bg:            #031428;
    --mr-panel:         rgba(6, 34, 96, 0.88);
    --mr-border:        rgba(94, 184, 255, 0.14);
    --mr-border-subtle: rgba(255, 255, 255, 0.055);
    --mr-radius-sm:     10px;
    --mr-radius-md:     16px;
    --mr-radius-lg:     22px;
    --mr-radius-xl:     28px;
    --mr-shadow-sm:     0 4px 16px rgba(0,0,0,0.50);
    --mr-shadow-md:     0 12px 40px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);
    --mr-shadow-lg:     0 24px 70px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.45);
    --mr-glow-accent:   0 0 30px rgba(94, 184, 255, 0.22);
    --mr-glow-strong:   0 0 60px rgba(94, 184, 255, 0.32);
    --mr-transition:    0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

.nav-dd-menu,
.dd-panel--server,
.dd-panel--header,
.mobile-menu-inner,
.news-modal__panel {
    background: rgba(8, 5, 3, 0.94) !important;
}

.ranking-table th {
    background: rgba(6, 4, 2, 0.96) !important;
}

#main-header,
#main-header .header-inner {
    overflow: visible !important;
}
.desktop-nav {
    position: relative !important;
    z-index: 10020 !important;
}

header:not(#main-header) {
    background: rgba(4, 18, 48, 0.55) !important;
    border-bottom: 1px solid rgba(94, 184, 255, 0.12) !important;
    backdrop-filter: blur(24px) saturate(180%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.04) !important;
    box-shadow:
        0 1px 0 rgba(94, 184, 255, 0.08),
        0 16px 50px rgba(0, 0, 0, 0.38) !important;
    transition: all var(--mr-transition) !important;
}

header:not(#main-header).scrolled {
    background: rgba(3, 12, 36, 0.88) !important;
    border-bottom-color: rgba(94, 184, 255, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(94, 184, 255, 0.14),
        0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

#main-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.logo-text,
.header-logo.logo .logo-text,
a.header-logo .logo-text {
    background: linear-gradient(135deg, var(--text-primary) 15%, var(--accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

#main-header a.header-logo.theme-brand-logo {
    -webkit-text-fill-color: unset !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

#main-header .nav-link,
#main-header .nav-dd-btn {
    font-size: clamp(0.88rem, 1.05vw, 1rem) !important;
}

@media (max-width: 1024px) {
    #main-header .nav-link,
    #main-header .nav-dd-btn {
        font-size: 0.86rem !important;
    }
}

.desktop-nav > ul > li > a::after,
.nav-dd-btn::after {
    height: 2px !important;
    border-radius: 2px !important;
    bottom: 2px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(94, 184, 255, 1) 40%,
        rgba(155, 220, 255, 0.9) 60%,
        transparent) !important;
    box-shadow: 0 0 8px rgba(94, 184, 255, 0.45) !important;
}

.dd-btn--server {
    border-radius: var(--mr-radius-sm) !important;
    border: 1px solid rgba(94, 184, 255, 0.32) !important;
    background: rgba(94, 184, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    transition: all var(--mr-transition) !important;
}
.dd-btn--server:hover {
    background: rgba(94, 184, 255, 0.14) !important;
    border-color: rgba(94, 184, 255, 0.52) !important;
    box-shadow: var(--mr-glow-accent) !important;
}

.dd-btn--header {
    border-radius: var(--mr-radius-sm) !important;
    backdrop-filter: blur(10px) !important;
    transition: all var(--mr-transition) !important;
}

#header-cta .btn.btn-gold {
    border-radius: var(--mr-radius-sm) !important;
    background: linear-gradient(135deg,
        #2a7fd4 0%,
        #5eb8ff 50%,
        #9ad4ff 100%) !important;
    color: #031428 !important;
    box-shadow:
        0 4px 20px rgba(94, 184, 255, 0.35),
        0 0 0 1px rgba(94, 184, 255, 0.22) !important;
    letter-spacing: 1.8px !important;
    font-size: clamp(0.74rem, 1vw, 0.82rem) !important;
    transition: all var(--mr-transition) !important;
}
#header-cta .btn.btn-gold:hover {
    box-shadow:
        0 8px 35px rgba(94, 184, 255, 0.45),
        0 0 0 1px rgba(94, 184, 255, 0.32) !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
}

.nav-dd-menu {
    z-index: 10030 !important;
    border-radius: var(--mr-radius-lg) !important;
    border: 1px solid rgba(94, 184, 255, 0.12) !important;
    background: rgba(5, 5, 8, 0.93) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    padding: 10px !important;
}
.nav-dd-menu a {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    transition: all 0.18s ease !important;
}
.nav-dd-menu a:hover {
    border-color: rgba(94, 184, 255, 0.32) !important;
    background: rgba(94, 184, 255, 0.08) !important;
    transform: translateX(4px) !important;
}

.dd-panel--server,
.dd-panel--header {
    border-radius: var(--mr-radius-md) !important;
    border: 1px solid rgba(94, 184, 255, 0.10) !important;
    background: rgba(4, 4, 7, 0.95) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow: var(--mr-shadow-lg) !important;
}

.btn {
    border-radius: var(--mr-radius-sm) !important;
    transition: all var(--mr-transition) !important;
    position: relative;
    overflow: hidden;
    letter-spacing: 1.6px !important;
}

.btn-gold {
    background: linear-gradient(135deg,
        #2a7fd4 0%,
        #5eb8ff 48%,
        #9ad4ff 100%) !important;
    box-shadow:
        0 6px 22px rgba(42, 127, 212, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.45) !important;
    border: 0 !important;
    color: rgba(3, 20, 40, 0.94) !important;
}
.btn-gold:hover {
    box-shadow:
        0 12px 38px rgba(94, 184, 255, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.09) !important;
}
.btn-gold:active { transform: translateY(0) !important; filter: brightness(1.02) !important; }

.btn-outline {
    border: 1px solid rgba(94, 184, 255, 0.38) !important;
    color: rgba(200, 232, 255, 0.96) !important;
    background: rgba(10, 58, 120, 0.22) !important;
    transition: all var(--mr-transition) !important;
}
.btn-outline:hover {
    background: rgba(94, 184, 255, 0.12) !important;
    border-color: rgba(94, 184, 255, 0.62) !important;
    box-shadow: 0 0 22px rgba(94, 184, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

.btn-transparent {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) !important;
}
.btn-transparent:hover {
    background: rgba(94, 184, 255, 0.09) !important;
    border-color: rgba(94, 184, 255, 0.40) !important;
}

.title-glow {
    background: linear-gradient(135deg,
        #ffffff 25%,
        rgba(180, 220, 255, 0.96) 75%,
        rgba(94, 184, 255, 0.92) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 18px rgba(94, 184, 255, 0.16)) !important;
    letter-spacing: 4px !important;
}

.title-gold {
    background: linear-gradient(120deg,
        #69b7ff 0%,
        #a8d9ff 55%,
        #e4f3ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 14px rgba(94, 184, 255, 0.32)) !important;
}

.subtitle-text {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.90rem !important;
    letter-spacing: 0.6px !important;
    margin-top: 10px !important;
}

.section-header {
    position: relative;
}
.section-header::after {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    margin: 18px auto 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(105, 183, 255, 0.95) 40%,
        rgba(184, 226, 255, 0.82) 60%,
        transparent);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(94, 184, 255, 0.45);
}

.home-news__title {
    font-family: var(--font-head) !important;
    font-size: 0.70rem !important;
    letter-spacing: 4.5px !important;
    color: rgba(155, 220, 255, 0.90) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(94, 184, 255, 0.10) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.home-news__title::before {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, #5eb8ff, #9ad4ff);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(94, 184, 255, 0.50);
}

.section-card,
.info-card,
.class-card,
.side-menu-card,
.dh-card,
.overview-card,
.server-card,
.playtime-card,
.feature-card,
.champion-card,
.download-card,
.dl-card,
.req-card,
.ranking-table-wrapper,
.ranking-tabs,
.status-card,
.card,
.si-hub-card,
.si-hub-rule,
.si-stat-card {
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(94, 184, 255, 0.10), transparent 45%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.34)) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.section-card:hover,
.info-card:hover,
.class-card:hover,
.side-menu-card:hover,
.dh-card:hover,
.overview-card:hover,
.server-card:hover,
.playtime-card:hover,
.feature-card:hover,
.champion-card:hover,
.download-card:hover,
.dl-card:hover,
.req-card:hover,
.status-card:hover,
.card:hover,
.si-hub-card:hover,
.si-hub-rule:hover,
.si-stat-card:hover {
    border-color: rgba(94, 184, 255, 0.26) !important;
    box-shadow:
        0 24px 65px rgba(0, 0, 0, 0.60),
        0 0 28px rgba(94, 184, 255, 0.08) !important;
}

.server-card {
    border-radius: var(--mr-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
    transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.server-card:hover {
    border-color: rgba(94, 184, 255, 0.26) !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.75),
        0 0 35px rgba(94, 184, 255, 0.09),
        inset 0 1px 0 rgba(94, 184, 255, 0.14) !important;
    transform: translateY(-10px) !important;
}

.server-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.97) 0%,
        rgba(0, 0, 0, 0.65) 45%,
        rgba(0, 0, 0, 0.10) 100%
    ) !important;
}

.server-status {
    border-radius: 999px !important;
    backdrop-filter: blur(10px) !important;
    background: rgba(0, 0, 0, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.server-name {
    font-size: 1.85rem !important;
    letter-spacing: 2.5px !important;
}

.server-type {
    letter-spacing: 3.5px !important;
    font-size: 0.70rem !important;
    color: rgba(164, 218, 255, 0.95) !important;
}

.server-tag {
    border-radius: 8px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.9px !important;
    padding: 5px 10px !important;
}

.server-card .btn-sm {
    border-radius: var(--mr-radius-sm) !important;
    font-size: 0.68rem !important;
    letter-spacing: 2px !important;
}

.champions-grid {
    gap: 16px !important;
}
.champion-card {
    border-radius: var(--mr-radius-md) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.champion-card:hover {
    border-color: rgba(94, 184, 255, 0.28) !important;
    transform: translateY(-6px) !important;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.68),
        0 0 22px rgba(94, 184, 255, 0.07) !important;
}

.champion-overlay {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.45) 65%,
        rgba(0, 0, 0, 0.08) 100%
    ) !important;
}

.card-icon {
    background: rgba(94, 184, 255, 0.08) !important;
    border: 1px solid rgba(94, 184, 255, 0.18) !important;
    box-shadow: 0 0 22px rgba(94, 184, 255, 0.10) !important;
    width: 52px !important;
    height: 52px !important;
}

.ranking-section {
    background: transparent !important;
}

.ranking-tabs {
    border-radius: var(--mr-radius-md) !important;
    backdrop-filter: blur(14px) !important;
    padding: 7px !important;
}
.tab-btn {
    border-radius: 12px !important;
    font-size: 0.70rem !important;
    letter-spacing: 1.6px !important;
    transition: all 0.20s ease !important;
}
.tab-btn.active {
    background: linear-gradient(135deg,
        rgba(43, 110, 214, 0.95),
        rgba(105, 183, 255, 0.92)) !important;
    border-color: rgba(94, 184, 255, 0.45) !important;
    box-shadow:
        0 4px 18px rgba(42, 127, 212, 0.32),
        0 0 0 1px rgba(214, 239, 255, 0.18) inset !important;
    color: #fff !important;
}

.ranking-table-wrapper {
    border-radius: var(--mr-radius-lg) !important;
    backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.ranking-table th {
    background: rgba(5, 5, 8, 0.95) !important;
    font-size: 0.66rem !important;
    letter-spacing: 2.8px !important;
    color: rgba(155, 220, 255, 0.80) !important;
    padding: 18px 16px !important;
    border-bottom: 1px solid rgba(94, 184, 255, 0.10) !important;
}
.ranking-table td {
    padding: 18px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.038) !important;
}
.ranking-table tbody tr:hover {
    background: rgba(94, 184, 255, 0.055) !important;
}

.home-story,
.home-news,
.features,
.ranking-section,
.playtime-section,
.home-hero__inner,
.home-hero {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.playtime-section {
    background: transparent !important;
}
.playtime-card {
    border-radius: var(--mr-radius-lg) !important;
    transition: all 0.30s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.playtime-card:hover {
    border-color: rgba(94, 184, 255, 0.24) !important;
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.68),
        0 0 28px rgba(94, 184, 255, 0.07) !important;
    transform: translateY(-7px) !important;
}

.playtime-icon {
    background: rgba(94, 184, 255, 0.08) !important;
    border: 1px solid rgba(94, 184, 255, 0.18) !important;
    box-shadow: 0 0 20px rgba(94, 184, 255, 0.12) !important;
}

.feature-card {
    border-radius: var(--mr-radius-lg) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.feature-card:hover {
    border-color: rgba(94, 184, 255, 0.26) !important;
    transform: translateY(-7px) !important;
    box-shadow:
        0 28px 72px rgba(0, 0, 0, 0.68),
        0 0 26px rgba(94, 184, 255, 0.07) !important;
}

.news-modal__panel {
    border-radius: var(--mr-radius-xl) !important;
    border: 1px solid rgba(94, 184, 255, 0.10) !important;
    background: rgba(5, 5, 9, 0.93) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.promo-modal__panel {
    border-radius: var(--mr-radius-xl) !important;
    border: 1px solid var(--accent-border) !important;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.82),
        0 0 0 1px color-mix(in srgb, var(--text-primary) 5%, transparent),
        var(--shadow-glow) !important;
}

.promo-modal__backdrop {
    background: color-mix(in srgb, var(--bg-void) 82%, black) !important;
    backdrop-filter: blur(10px) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(6, 6, 10, 0.80) !important;
    backdrop-filter: blur(8px) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    transition: border-color 0.20s ease, box-shadow 0.20s ease !important;
}
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(94, 184, 255, 0.48) !important;
    box-shadow: 0 0 0 3px rgba(94, 184, 255, 0.09) !important;
    outline: none !important;
}
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.32) !important;
}

footer {
    background: rgba(3, 3, 5, 0.88) !important;
    border-top: 1px solid rgba(94, 184, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(94, 184, 255, 0.35) 30%,
        rgba(196, 232, 255, 0.22) 70%,
        transparent);
}

.social-link {
    border-radius: 14px !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(94, 184, 255, 0.16) !important;
    background: rgba(4, 4, 8, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    transition: all var(--mr-transition) !important;
}
.social-link:hover {
    background: rgba(94, 184, 255, 0.11) !important;
    border-color: rgba(94, 184, 255, 0.44) !important;
    box-shadow: 0 0 22px rgba(94, 184, 255, 0.20) !important;
    transform: translateY(-3px) !important;
}

.mobile-menu-inner {
    border-radius: var(--mr-radius-lg) !important;
    border: 1px solid rgba(94, 184, 255, 0.10) !important;
    background: rgba(3, 3, 6, 0.93) !important;
    backdrop-filter: blur(24px) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.72) !important;
}
.mm-link {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    transition: all 0.18s ease !important;
}
.mm-link:hover {
    border-color: rgba(94, 184, 255, 0.28) !important;
    background: rgba(94, 184, 255, 0.07) !important;
    transform: translateX(3px) !important;
}
.mm-link.active {
    background: rgba(94, 184, 255, 0.10) !important;
    border-color: rgba(94, 184, 255, 0.34) !important;
}

.slider-container {
    border-radius: var(--mr-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.65) !important;
}
.slider-arrow {
    border-radius: 12px !important;
    backdrop-filter: blur(12px) !important;
    background: rgba(0, 0, 0, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    transition: all 0.18s ease !important;
}
.slider-arrow:hover {
    background: rgba(94, 184, 255, 0.16) !important;
    border-color: rgba(94, 184, 255, 0.40) !important;
    box-shadow: 0 0 20px rgba(94, 184, 255, 0.18) !important;
}

.online .status-dot {
    background: #22dd55 !important;
    box-shadow: 0 0 8px #22dd55, 0 0 16px rgba(34, 221, 85, 0.40) !important;
}
.maintenance .status-dot {
    background: #5eb8ff !important;
    box-shadow: 0 0 8px rgba(105, 183, 255, 0.7), 0 0 18px rgba(105, 183, 255, 0.3) !important;
}

.rank-badge.gold {
    background: linear-gradient(135deg, #ffe44d, #c8900a) !important;
    box-shadow: 0 2px 12px rgba(255, 200, 0, 0.40) !important;
}
.rank-badge.silver {
    background: linear-gradient(135deg, #e8e8e8, #a8a8a8) !important;
    box-shadow: 0 2px 10px rgba(200, 200, 200, 0.30) !important;
}
.rank-badge.bronze {
    background: linear-gradient(135deg, #e0943c, #8b5020) !important;
    box-shadow: 0 2px 10px rgba(200, 130, 50, 0.35) !important;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: rgba(4, 4, 6, 0.80);
}
::-webkit-scrollbar-thumb {
    background: rgba(94, 184, 255, 0.28);
    border-radius: 4px;
    border: 1px solid rgba(4, 4, 6, 0.80);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(94, 184, 255, 0.50);
}

::selection {
    background: rgba(94, 184, 255, 0.28);
    color: #fff;
}

.toast,
.notification,
[class*="toast"],
[class*="notification"] {
    border-radius: var(--mr-radius-md) !important;
    border: 1px solid rgba(94, 184, 255, 0.14) !important;
    background: rgba(5, 5, 9, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: var(--mr-shadow-lg) !important;
}

.home-hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 50% 12%, rgba(105, 183, 255, 0.18), transparent 62%),
        radial-gradient(700px 420px at 10% 40%, rgba(43, 110, 214, 0.12), transparent 60%),
        radial-gradient(700px 420px at 90% 45%, rgba(134, 208, 255, 0.1), transparent 58%),
        radial-gradient(circle at 50% 70%, rgba(0,0,0,0.22), transparent 68%) !important;
}

html.theme-orange .hero::before {
    background:
        radial-gradient(900px 520px at 50% 12%, rgba(105, 183, 255, 0.2), transparent 62%),
        radial-gradient(700px 420px at 10% 40%, rgba(43, 110, 214, 0.12), transparent 60%),
        radial-gradient(700px 420px at 90% 45%, rgba(184, 226, 255, 0.1), transparent 58%),
        radial-gradient(circle at 50% 70%, rgba(0,0,0,0.20), transparent 68%) !important;
}

.hero-overlay {
    background: radial-gradient(
        circle at 50% 15%,
        rgba(5, 5, 5, 0.10) 0%,
        rgba(5, 5, 5, 0.45) 100%
    ) !important;
}

.home-hero::after {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(ellipse at center,
        rgba(105, 183, 255, 0.18) 0%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
}

body.page-auth .auth-panel {
    border-radius: var(--mr-radius-xl) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(94, 184, 255, 0.10), transparent 45%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.34)) !important;
    backdrop-filter: blur(22px) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46) !important;
}

.download-card,
.dl-card {
    border-radius: var(--mr-radius-lg) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.26s ease !important;
}
.download-card:hover,
.dl-card:hover {
    border-color: rgba(94, 184, 255, 0.26) !important;
    transform: translateY(-5px) !important;
    box-shadow:
        0 26px 68px rgba(0, 0, 0, 0.65),
        0 0 24px rgba(94, 184, 255, 0.07) !important;
}

body.page-downloads .page-hero {
    padding: 56px 0 32px !important;
    position: relative;
    text-align: center;
}
body.page-downloads .page-hero::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(94, 184, 255,0.85), transparent);
    border-radius: 2px;
}
body.page-downloads .page-hero__title {
    font-size: clamp(2.2rem, 5vw, 4rem) !important;
    letter-spacing: 8px !important;
    background: linear-gradient(135deg, #ffffff 20%, rgba(180, 220, 255, 0.95) 70%, rgba(94, 184, 255, 0.90) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 20px rgba(94, 184, 255, 0.20)) !important;
}
body.page-downloads .page-hero__title-accent {
    -webkit-text-fill-color: unset !important;
}

body.page-downloads .downloads-section {
    padding: 24px 0 60px !important;
}
body.page-downloads .downloads-grid {
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 20px !important;
    align-items: start;
}
@media (max-width: 991px) {
    body.page-downloads .downloads-grid { grid-template-columns: 1fr !important; }
}

body.page-downloads .download-card {
    border-radius: var(--mr-radius-xl) !important;
    padding: 36px 32px !important;
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(94, 184, 255, 0.10), transparent 45%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.34)) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46) !important;
    position: relative;
    overflow: hidden;
}

body.page-downloads .download-card::before {
    background:
        radial-gradient(420px 280px at 100% 0%, rgba(94, 184, 255,0.14), transparent 65%),
        radial-gradient(300px 200px at 0% 100%, rgba(43,110,214,0.1), transparent 65%) !important;
}

body.page-downloads .download-card__tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(43,110,214,0.26), rgba(94, 184, 255,0.18)) !important;
    border: 1px solid rgba(94, 184, 255,0.38) !important;
    color: rgba(210, 238, 255, 0.96) !important;
    font-size: 0.64rem !important;
    letter-spacing: 2.5px !important;
    box-shadow: 0 0 16px rgba(94, 184, 255,0.12) !important;
}
body.page-downloads .download-card__tag::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(105, 183, 255, 0.95);
    box-shadow: 0 0 8px rgba(94, 184, 255, 0.65);
    animation: mr-glow-pulse 1.8s ease-in-out infinite;
}

body.page-downloads .download-card__title {
    margin-top: 20px !important;
    font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
    letter-spacing: 2.5px !important;
    color: #fff !important;
}

body.page-downloads .download-btn {
    margin-top: 22px !important;
    height: 60px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg,
        rgba(43, 110, 214, 0.96) 0%,
        rgba(94, 184, 255, 0.94) 50%,
        rgba(212, 237, 255, 0.92) 100%) !important;
    border: 0 !important;
    box-shadow:
        0 8px 30px rgba(42, 127, 212, 0.40),
        0 2px 8px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    font-size: 0.78rem !important;
    letter-spacing: 2.5px !important;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: rgba(0,0,0,0.88) !important;
    font-weight: 900 !important;
}
body.page-downloads .download-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 16px 45px rgba(42, 127, 212, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    filter: brightness(1.06) !important;
}
body.page-downloads .download-btn:active {
    transform: translateY(0) !important;
}

body.page-downloads .download-btn__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(0,0,0,0.20) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-size: 1rem !important;
}

body.page-downloads .download-meta {
    margin-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    padding-top: 16px !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
body.page-downloads .download-meta__item {
    padding: 12px 14px !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
    transition: background 0.18s ease !important;
}
body.page-downloads .download-meta__item:hover {
    background: rgba(94, 184, 255,0.05) !important;
    border-radius: 10px !important;
}
body.page-downloads .download-meta__label {
    font-size: 0.62rem !important;
    letter-spacing: 2.2px !important;
    color: rgba(184,226,255,0.78) !important;
}
body.page-downloads .download-meta__value {
    font-size: 0.92rem !important;
    margin-top: 5px !important;
    color: rgba(255,255,255,0.94) !important;
}

body.page-downloads .req-card {
    border-radius: var(--mr-radius-xl) !important;
    padding: 30px 28px !important;
    background:
        radial-gradient(1200px 500px at 20% -10%, rgba(94, 184, 255, 0.10), transparent 45%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.34)) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46) !important;
}

body.page-downloads .req-card::before {
    width: 3px !important;
    top: 20px !important;
    bottom: 20px !important;
    background: linear-gradient(180deg,
        rgba(94, 184, 255,0.95),
        rgba(43,110,214,0.55),
        transparent) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 16px rgba(94, 184, 255,0.30) !important;
}

body.page-downloads .req-card__title {
    font-size: 0.72rem !important;
    letter-spacing: 4px !important;
    color: rgba(184,226,255,0.88) !important;
    margin-bottom: 18px !important;
}

body.page-downloads .req-col {
    border-radius: 16px !important;
    padding: 16px 14px !important;
    background: rgba(5,5,10,0.55) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: border-color 0.20s ease !important;
}
body.page-downloads .req-col:hover {
    border-color: rgba(94, 184, 255,0.18) !important;
}
body.page-downloads .req-col__head {
    font-size: 0.64rem !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 14px !important;
    color: rgba(176,221,255,0.92) !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(94, 184, 255,0.10) !important;
}

body.page-downloads .req-row {
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    font-size: 0.84rem !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
body.page-downloads .req-row span:first-child {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.70rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    flex: 0 0 40px !important;
}
body.page-downloads .req-row span:last-child {
    color: rgba(255,255,255,0.88) !important;
    text-align: right !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
}

body.page-downloads .req-note {
    margin-top: 18px !important;
    border-radius: 14px !important;
    padding: 16px 16px !important;
    background: rgba(94, 184, 255,0.06) !important;
    border: 1px solid rgba(94, 184, 255,0.16) !important;
    box-shadow: 0 0 24px rgba(94, 184, 255,0.06) !important;
}
body.page-downloads .req-note::before {
    display: none !important;
}
body.page-downloads .req-note__title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.68rem !important;
    letter-spacing: 2px !important;
}
body.page-downloads .req-note__title::before {
    content: '⚠';
    font-style: normal;
    font-size: 1rem;
    color: rgba(105,183,255,0.92);
}
body.page-downloads .req-note__text {
    color: rgba(255,255,255,0.82) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

body.page-downloads .page-back {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.20s ease !important;
}
body.page-downloads .page-back:hover {
    border-color: rgba(94, 184, 255,0.38) !important;
    background: rgba(94, 184, 255,0.08) !important;
    box-shadow: 0 0 18px rgba(94, 184, 255,0.14) !important;
}

@media (max-width: 768px) {
    .title-glow {
        font-size: clamp(1.45rem, 5vw, 2.0rem) !important;
        letter-spacing: 2.5px !important;
    }
    .server-card,
    .playtime-card,
    .feature-card {
        border-radius: var(--mr-radius-md) !important;
    }
    .champion-card {
        border-radius: 14px !important;
    }
    .ranking-tabs {
        border-radius: var(--mr-radius-sm) !important;
    }
}

.promo-modal__cta {
    border: 1px solid var(--accent-border) !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 78%, black),
        var(--accent) 48%,
        color-mix(in srgb, var(--accent) 72%, white)
    ) !important;
    box-shadow: 0 4px 22px var(--accent-glow) !important;
    color: rgba(0, 0, 0, 0.9) !important;
    transition: all var(--mr-transition) !important;
}
.promo-modal__cta:hover {
    box-shadow: 0 8px 32px var(--accent-glow) !important;
    filter: brightness(1.07) !important;
    transform: translateY(-1px) !important;
}

@keyframes mr-glow-pulse {
    0%, 100% { opacity: 0.65; }
    50%       { opacity: 1.00; }
}
@keyframes mr-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

.online .status-dot {
    animation: mr-glow-pulse 2.4s ease-in-out infinite;
}

   :root {
    --nav-h: 72px;
    --rm-edge:        var(--card-border, rgba(13, 71, 152, 0.22));
    --rm-edge-hover:  var(--card-border-hover, rgba(42, 127, 212, 0.34));
    --rm-glass:       none;
    --rm-panel:       var(--card-surface);
    --rm-panel-deep:  var(--card-surface-featured);
  }
  
  
  #main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 !important;
    height: var(--nav-h) !important;
    min-height: var(--nav-h) !important;
    overflow: visible;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #030a14 !important;
    background-image: linear-gradient(180deg, #061228 0%, #030a14 100%) !important;
    border-bottom: 1px solid rgba(13, 71, 152, 0.4) !important;
    box-shadow:
      inset 0 1px 0 rgba(42, 127, 212, 0.08),
      0 10px 32px rgba(0, 0, 0, 0.45) !important;
  }
  
  #main-header.scrolled {
    background-color: #030a14 !important;
    background-image: linear-gradient(180deg, #061228 0%, #020810 100%) !important;
    border-bottom-color: rgba(13, 71, 152, 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(42, 127, 212, 0.1),
      0 12px 36px rgba(0, 0, 0, 0.52) !important;
  }
  
  #main-header .header-inner.header-container.container {
    height: 100%;
    min-height: 0;
    width: 100%;
    max-width: min(1440px, 100%);
    margin-inline: auto;
    padding: 0 clamp(16px, 2.8vw, 32px) !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: flex-start;
    gap: 0;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  #main-header .header-logo {
    flex: 0 0 auto;
    margin-right: clamp(10px, 1.6vw, 20px);
  }
  
  #main-header a.header-logo.theme-brand-logo {
    width: clamp(128px, 16vw, 188px) !important;
    height: clamp(38px, 5.2vw, 50px) !important;
    max-height: calc(var(--nav-h) - 16px) !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) !important;
  }
  
  #main-header .header-inner.header-container.container::before {
    display: none !important;
  }
  
  #main-header a.header-logo.theme-brand-logo:hover {
    transform: none;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4)) brightness(1.05) !important;
  }
  
  #main-header .desktop-nav {
    display: flex !important;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: clamp(8px, 1.2vw, 16px);
    overflow: visible;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  
  #main-header .desktop-nav > ul {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    gap: clamp(2px, 0.5vw, 12px) !important;
    flex-wrap: nowrap;
  }
  
  #main-header .header-right {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.9vw, 12px);
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  
  @media (min-width: 1025px) {
    #main-header .hamburger,
    #main-header #mobile-menu-toggle {
      display: none !important;
    }
  }
  
  
  @media (min-width: 1025px) and (max-width: 1366px) {
    #main-header .header-inner.header-container.container {
      padding-inline: clamp(14px, 2.2vw, 24px) !important;
      max-width: 100%;
    }
  
    #main-header .header-logo {
      margin-right: clamp(8px, 1.2vw, 14px);
    }
  
    #main-header a.header-logo.theme-brand-logo {
      width: clamp(112px, 13vw, 156px) !important;
      height: clamp(34px, 4.5vw, 46px) !important;
    }
  
    #main-header .desktop-nav > ul {
      gap: clamp(0px, 0.35vw, 6px) !important;
    }
  
    #main-header .nav-link,
    #main-header .nav-dd-btn {
      padding: 10px clamp(7px, 0.9vw, 11px) !important;
      font-size: clamp(0.7rem, 0.82vw, 0.8rem) !important;
      min-height: 44px !important;
      gap: 6px !important;
    }
  
    #main-header .nav-link > i,
    #main-header .nav-dd-btn > i:first-of-type {
      font-size: 0.85em;
    }
  
    #main-header .header-right {
      gap: 6px;
    }
  
    #main-header .dd-btn--server,
    #main-header .dd-btn--header {
      min-height: 36px !important;
      padding: 6px 9px !important;
      font-size: 0.65rem !important;
    }
  
    #main-header #header-server-dd-label {
      max-width: 3.75rem;
    }
  
    #main-header #header-auth-controls .btn {
      min-height: 38px !important;
      padding: 8px 14px !important;
      font-size: 0.72rem !important;
    }
  
    #main-header .header-cta .btn-gold {
      min-height: 36px !important;
      padding: 7px 12px !important;
      font-size: 0.65rem !important;
    }
  }
  
  @media (min-width: 1025px) and (max-width: 1200px) {
    #main-header .desktop-nav {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      max-width: min(52vw, 520px);
    }
  
    #main-header .desktop-nav::-webkit-scrollbar {
      display: none;
    }
  
    #main-header .nav-link > span,
    #main-header .nav-dd-btn > span:not(.nav-dd-chevron) {
      display: none;
    }
  
    #main-header .nav-link,
    #main-header .nav-dd-btn {
      min-width: 40px;
      justify-content: center;
      padding: 10px 8px !important;
    }
  }
  
  #main-header .nav-link,
  #main-header .nav-dd-btn {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: clamp(0.82rem, 1vw, 0.92rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    color: rgba(200, 220, 255, 0.72) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    text-shadow: none;
  }
  
  #main-header .nav-link > i,
  #main-header .nav-dd-btn > i:first-of-type {
    opacity: 0.9;
    color: rgba(158, 210, 255, 0.88);
  }
  
  #main-header .nav-link::after {
    display: block !important;
    background: rgba(122, 166, 255, 0.85) !important;
  }
  
  #main-header .nav-dd-btn::after {
    display: none !important;
  }
  
  #main-header .nav-link:hover,
  #main-header .nav-dd-btn:hover {
    color: #f0f8ff !important;
    background: rgba(13, 71, 152, 0.22) !important;
  }
  
  #main-header .nav-link.active {
    color: #ffffff !important;
    background: rgba(13, 71, 152, 0.18) !important;
    box-shadow: none !important;
  }
  
  #main-header .nav-dd.is-open .nav-dd-btn {
    color: #ffffff !important;
    background: rgba(13, 71, 152, 0.22) !important;
    box-shadow: none !important;
  }
  
  
  #main-header .header-cta {
    display: none !important;
  }

  body.is-logged-in #main-header .header-cta {
    display: inline-flex !important;
  }
  
  body.is-logged-in #main-header a.header-logo.theme-brand-logo {
    width: clamp(100px, 11vw, 148px) !important;
    height: clamp(32px, 4.2vw, 44px) !important;
    min-width: 96px;
  }
  
  body.is-logged-in #main-header .header-logo {
    margin-right: clamp(6px, 1vw, 12px);
  }
  
  body.is-logged-in #main-header .nav-link,
  body.is-logged-in #main-header .nav-dd-btn {
    padding: 10px 10px !important;
    font-size: 0.74rem !important;
    gap: 6px !important;
  }
  
  body.is-logged-in #main-header #header-auth-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  
  body.is-logged-in #main-header #header-auth-controls .user-chip {
    padding: 5px 10px;
    max-width: min(148px, 22vw);
  }
  
  body.is-logged-in #main-header #header-auth-controls .user-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  
  body.is-logged-in #main-header #header-auth-controls .btn-logout-compact {
    min-height: 38px !important;
    padding: 8px 10px !important;
  }
  
  body.is-logged-in #main-header #header-auth-controls .btn-logout-compact__text {
    display: none;
  }
  
  body.is-logged-in #main-header #header-server-dd-label {
    max-width: 4.25rem;
  }
  
  body.is-logged-in #main-header .dd-btn--server,
  body.is-logged-in #main-header .dd-btn--header {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    body.is-logged-in #main-header .nav-link > span,
    body.is-logged-in #main-header .nav-dd-btn > span:not(.nav-dd-chevron) {
      display: none;
    }
  
    body.is-logged-in #main-header .nav-link,
    body.is-logged-in #main-header .nav-dd-btn {
      padding: 12px 9px !important;
      min-width: 44px;
      justify-content: center;
    }
  }
  
  @media (min-width: 1281px) and (max-width: 1380px) {
    body.is-logged-in #main-header .nav-link,
    body.is-logged-in #main-header .nav-dd-btn {
      padding: 12px 9px !important;
      font-size: 0.72rem !important;
    }
  }
  
  #main-header .dd-btn--server,
  #main-header .dd-btn--header {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(0, 0, 0, 0.12) !important;
    color: rgba(230, 242, 255, 0.88) !important;
    box-shadow: none !important;
  }
  
  #main-header .dd-btn--server:hover,
  #main-header .dd-btn--header:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    box-shadow: none !important;
  }
  
  #main-header #header-server-dd-label {
    max-width: 6.5rem;
  }
  
  #main-header #header-auth-controls .btn {
    min-height: 42px !important;
    padding: 10px 20px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    border-radius: 12px !important;
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.15s ease !important;
  }
  
  #main-header #header-auth-controls .btn-outline {
    background: rgba(6, 18, 40, 0.65) !important;
    background-image: none !important;
    border: 1px solid rgba(42, 127, 212, 0.38) !important;
    color: #d8ebff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
  
  #main-header #header-auth-controls .btn-outline:hover {
    background: rgba(13, 71, 152, 0.28) !important;
    border-color: rgba(94, 184, 255, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
  }
  
  #main-header #header-auth-controls .btn-primary {
    background: linear-gradient(135deg, #0d4798 0%, #0a307e 100%) !important;
    background-image: linear-gradient(135deg, #0d4798 0%, #0a307e 100%) !important;
    border: 1px solid rgba(94, 184, 255, 0.35) !important;
    color: #f5f8ff !important;
    box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }
  
  #main-header #header-auth-controls .btn-primary:hover {
    background: linear-gradient(135deg, #1578c8 0%, #0d4798 50%, #0a307e 100%) !important;
    background-image: linear-gradient(135deg, #1578c8 0%, #0d4798 50%, #0a307e 100%) !important;
    color: #ffffff !important;
    filter: none !important;
    transform: translateY(-1px);
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.4),
      0 0 24px rgba(13, 71, 152, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  }
  
  #main-header .header-cta .btn-gold {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 0.7rem !important;
    background: var(--brand-gradient) !important;
    background-image: var(--brand-gradient) !important;
    border: 1px solid rgba(122, 166, 255, 0.42) !important;
    color: #f5f8ff !important;
    box-shadow: 0 8px 22px rgba(18, 59, 148, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }
  
  #main-header .hamburger {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    #main-header .nav-link,
    #main-header .nav-dd-btn {
      padding: 12px 11px !important;
      font-size: 0.78rem !important;
    }
  }
  
  @media (max-width: 1024px) {
    #main-header .desktop-nav {
      display: none !important;
    }

    #main-header .header-inner.header-container.container {
      display: flex !important;
      grid-template-columns: unset !important;
      min-height: 60px;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
      overflow: hidden;
    }

    #main-header .header-logo {
      flex: 0 1 auto;
      min-width: 0;
      margin-right: auto;
    }

    #main-header a.header-logo.theme-brand-logo {
      width: clamp(118px, 34vw, 172px) !important;
      height: clamp(36px, 9.5vw, 50px) !important;
      flex-shrink: 0;
      min-width: 108px;
      max-width: 48vw;
      background-position: left center;
    }

    #main-header .header-right {
      flex: 0 0 auto;
      margin-left: 0;
      gap: 6px;
    }

    #main-header .header-auth,
    #main-header #header-auth-controls {
      display: none !important;
    }

    body.is-logged-in #main-header .header-cta {
      display: none !important;
    }

    #main-header .hamburger,
    #main-header #mobile-menu-toggle {
      display: flex !important;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }
  }
  
  
  body.page-home .hero {
    padding-top: calc(var(--nav-h) + 12px);
  }
  
  body.page-home .hero-gradient {
    background:
      radial-gradient(ellipse 65% 50% at 50% 30%, rgba(62, 123, 250, 0.20) 0%, transparent 60%),
      radial-gradient(ellipse 45% 38% at 85% 72%, rgba(18, 59, 148, 0.45) 0%, transparent 55%),
      linear-gradient(180deg, rgba(3, 7, 18, 0.55) 0%, rgba(2, 6, 15, 0.88) 60%, rgba(2, 6, 15, 0.98) 100%) !important;
  }
  
  body.page-home .hero-bg::before {
    filter: saturate(0.92) contrast(1.08) brightness(0.82);
  }
  
  body.page-home .hero-bg::after {
    background:
      radial-gradient(circle at 50% 22%, rgba(62, 123, 250, 0.20) 0%, transparent 26%),
      radial-gradient(circle at 16% 30%, rgba(18, 59, 148, 0.20) 0%, transparent 30%),
      radial-gradient(circle at 84% 36%, rgba(126, 168, 255, 0.10) 0%, transparent 28%),
      linear-gradient(180deg, rgba(2, 5, 13, 0.25) 0%, rgba(2, 5, 13, 0.78) 100%) !important;
  }
  
  
  body.page-home .hero-glow-ring {
    border-color: rgba(126, 168, 255, 0.16);
    background:
      radial-gradient(closest-side, rgba(62, 123, 250, 0.16), transparent 72%);
  }
  
  body.page-home .hero-brand-floor-glow {
    background:
      radial-gradient(60% 100% at 50% 100%, rgba(62, 123, 250, 0.30) 0%, transparent 70%);
    filter: blur(2px);
  }
  
  body.page-home .hero-divider__line {
    background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
    opacity: 0.6;
  }
  
  
  body.page-home .hero-live-card {
    background: var(--rm-panel) !important;
    background-image: var(--rm-panel) !important;
    border: 1px solid var(--rm-edge) !important;
    border-radius: 16px;
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 70px rgba(62, 123, 250, 0.10) !important;
    position: relative;
    overflow: hidden;
  }
  
  body.page-home .hero-live-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
    opacity: 0.5;
  }
  
  body.page-home .hero-status-led {
    box-shadow: 0 0 0 3px rgba(62, 123, 250, 0.14), 0 0 14px rgba(62, 123, 250, 0.6);
  }
  
  body.page-home .hero-live-card__exp-chip:not(.hero-live-card__meta-chip) {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 5px 16px 5px 6px;
    border-radius: 999px;
    background:
      linear-gradient(128deg, rgba(18, 59, 148, 0.42) 0%, rgba(6, 18, 44, 0.88) 52%, rgba(2, 8, 20, 0.94) 100%);
    border: 1px solid rgba(122, 166, 255, 0.38);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.25),
      0 10px 28px rgba(0, 0, 0, 0.38),
      0 0 32px rgba(13, 71, 152, 0.22);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  body.page-home .hero-live-card__exp-chip:not(.hero-live-card__meta-chip)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 35%,
      rgba(255, 232, 160, 0.07) 48%,
      transparent 62%
    );
    pointer-events: none;
    z-index: 0;
  }
  
  body.page-home .hero-live-card__exp-chip:not(.hero-live-card__meta-chip) > .fa-bolt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    font-size: 0.78rem;
    color: #1c1408;
    background: linear-gradient(145deg, #fff4cc 0%, #f0c85a 42%, #b8862a 100%);
    box-shadow:
      0 0 18px rgba(240, 200, 90, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -2px 4px rgba(0, 0, 0, 0.15);
    animation: heroExpBoltPulse 2.8s ease-in-out infinite;
  }
  
  @keyframes heroExpBoltPulse {
    0%,
    100% {
      box-shadow:
        0 0 14px rgba(240, 200, 90, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
      transform: scale(1);
    }
    50% {
      box-shadow:
        0 0 22px rgba(255, 220, 130, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transform: scale(1.04);
    }
  }
  
  body.page-home .hero-live-card__exp-label {
    position: relative;
    z-index: 1;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(186, 214, 255, 0.78);
    margin-right: 8px;
  }
  
  body.page-home .hero-live-card__exp-val {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    padding-left: 10px;
    border-left: 1px solid rgba(122, 166, 255, 0.32);
    background: linear-gradient(180deg, #ffffff 0%, #b8dcff 42%, #f0d878 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(62, 123, 250, 0.28));
  }
  
  @media (prefers-reduced-motion: reduce) {
    body.page-home .hero-live-card__exp-chip:not(.hero-live-card__meta-chip) > .fa-bolt {
      animation: none;
    }
  }
  
  body.page-home .hero-stats {
    border-top: 1px solid rgba(126, 168, 255, 0.10);
  }
  
  body.page-home .stat-num {
    background: linear-gradient(180deg, #ffffff 0%, var(--accent-2) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: 0.02em;
  }
  
  
  body.page-home .hero-actions .btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%) !important;
    border: 1px solid rgba(126, 168, 255, 0.4);
    box-shadow: 0 14px 34px rgba(18, 59, 148, 0.45);
  }
  body.page-home .hero-actions .btn-primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 18px 44px rgba(18, 59, 148, 0.6), 0 0 30px rgba(62, 123, 250, 0.3);
  }
  body.page-home .hero-actions .btn-outline {
    background: rgba(4, 12, 28, 0.5);
    backdrop-filter: blur(8px);
  }
  
  
  .feature-card,
  .event-win-card,
  .home-news-item,
  .home-news__aside-card,
  .rank-preview-col,
  .hero-live-card {
    position: relative;
  }
  
  .feature-card,
  .event-win-card,
  .rank-preview-col {
    background: var(--rm-panel) !important;
    background-image: var(--rm-panel) !important;
    border: 1px solid var(--rm-edge) !important;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  
  .feature-card::before,
  .event-win-card::before,
  .rank-preview-col::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
    opacity: 0.35;
    transition: opacity .25s ease;
  }
  
  .feature-card:hover,
  .event-win-card:hover,
  .rank-preview-col:hover {
    transform: translateY(-4px);
    border-color: var(--rm-edge-hover) !important;
    box-shadow:
      0 24px 56px rgba(0, 0, 0, 0.5),
      0 0 36px rgba(62, 123, 250, 0.14);
  }
  
  .feature-card:hover::before,
  .event-win-card:hover::before,
  .rank-preview-col:hover::before {
    opacity: 0.8;
  }
  
  .feature-icon {
    background: linear-gradient(135deg, rgba(18, 59, 148, 0.5), rgba(62, 123, 250, 0.16));
    border: 1px solid rgba(126, 168, 255, 0.22);
  }
  
  .event-win-card__icon {
    background: linear-gradient(135deg, rgba(18, 59, 148, 0.5), rgba(62, 123, 250, 0.16));
    border: 1px solid rgba(126, 168, 255, 0.22);
  }
  
  
  .badge {
    background: var(--accent-dim);
    border-color: var(--accent-border);
    box-shadow:
      0 4px 18px rgba(0, 0, 0, 0.35),
      0 0 20px var(--accent-glow);
  }
  
  .section-title span {
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  
  body.page-home .home-news-item,
  .home-news__aside-card {
    background: var(--rm-panel) !important;
    border-color: var(--rm-edge) !important;
  }
  
  body.page-home .home-news__list .home-news-item:first-child {
    background: var(--rm-panel-deep) !important;
    border-color: rgba(126, 168, 255, 0.24) !important;
  }
  
  body.page-home .home-news-item:hover {
    border-color: var(--rm-edge-hover) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(62, 123, 250, 0.12);
  }
  
  
  body.page-home .rank-table-head {
    background: rgba(1, 4, 11, 0.5);
    border-color: rgba(126, 168, 255, 0.1);
  }
  
  
  body.page-home .features-section,
  body.page-home .event-winners-section,
  body.page-home .ranking-preview-section {
    background: linear-gradient(180deg, transparent 0%, rgba(4, 12, 28, 0.4) 50%, transparent 100%);
  }

  
  body.page-home .features-section::before,
  body.page-home .features-section::after {
    display: block;
    z-index: 0;
  }

  body.page-home .features-section {
    padding: clamp(64px, 9vw, 100px) 0 clamp(72px, 10vw, 108px);
    background: transparent !important;
  }

  body.page-home .features-section .features-bg-pattern {
    opacity: var(--site-bg-hex-opacity, 0.04);
    background-size: var(--site-bg-hex-size, 56px 64px);
    background-repeat: repeat;
    background-position: center top;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.85) 8%,
      rgba(0, 0, 0, 1) 22%,
      rgba(0, 0, 0, 1) 78%,
      rgba(0, 0, 0, 0.85) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.85) 8%,
      rgba(0, 0, 0, 1) 22%,
      rgba(0, 0, 0, 1) 78%,
      rgba(0, 0, 0, 0.85) 92%,
      transparent 100%
    );
  }

  body.page-home .features-section .container {
    position: relative;
    z-index: 1;
  }

  body.page-home .features-section .container > .badge {
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    border: 1px solid rgba(94, 160, 255, 0.22) !important;
    background: rgba(8, 18, 38, 0.55) !important;
    color: rgba(180, 215, 255, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  body.page-home .features-section .section-title {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: clamp(1.65rem, 4.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-transform: none;
    margin-bottom: 10px;
  }

  body.page-home .features-section .section-title span {
    background: linear-gradient(90deg, #7ec8ff 0%, #5eb8ff 45%, #a8d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
  }

  body.page-home .features-section .section-subtitle {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(36px, 5vw, 48px) !important;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(160, 190, 230, 0.72) !important;
  }

  body.page-home .features-grid--modern,
  body.page-home .features-section .features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 1080px;
    margin-inline: auto;
    text-align: left;
  }

  body.page-home .features-section .feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 20px;
    border-radius: 14px !important;
    border: 1px solid rgba(94, 160, 255, 0.14) !important;
    background: linear-gradient(
      158deg,
      rgba(10, 24, 48, 0.72) 0%,
      rgba(4, 10, 24, 0.88) 100%
    ) !important;
    background-image: none !important;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }

  body.page-home .features-section .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: opacity 0.22s ease;
  }

  body.page-home .features-section .feature-card::after {
    display: none;
  }

  body.page-home .features-section .feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 180, 255, 0.28) !important;
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.38),
      0 0 28px rgba(13, 71, 152, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  }

  body.page-home .features-section .feature-card:hover::before {
    opacity: 1;
  }

  body.page-home .feature-card__head {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
  }

  body.page-home .features-section .feature-icon {
    width: 38px;
    height: 38px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 10px;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  body.page-home .features-section .feature-card h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.25;
    color: #f0f7ff;
  }

  body.page-home .features-section .feature-card p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(165, 195, 235, 0.78);
  }

  body.page-home .feature-card--accent-blue::before {
    background: linear-gradient(90deg, transparent, #5eb8ff, transparent);
  }

  body.page-home .feature-card--accent-blue .feature-icon {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(94, 184, 255, 0.28);
  }

  body.page-home .feature-card--accent-cyan::before {
    background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  }

  body.page-home .feature-card--accent-cyan .feature-icon {
    color: #67e8f9;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.28);
  }

  body.page-home .feature-card--accent-violet::before {
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
  }

  body.page-home .feature-card--accent-violet .feature-icon {
    color: #d8b4fe;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(192, 132, 252, 0.28);
  }

  body.page-home .feature-card--accent-green::before {
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
  }

  body.page-home .feature-card--accent-green .feature-icon {
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.28);
  }

  body.page-home .feature-card--accent-amber::before {
    background: linear-gradient(90deg, transparent, #fbbf24, transparent);
  }

  body.page-home .feature-card--accent-amber .feature-icon {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
  }

  body.page-home .feature-card--accent-gold::before {
    background: linear-gradient(90deg, transparent, #f0c85a, transparent);
  }

  body.page-home .feature-card--accent-gold .feature-icon {
    color: #2a1804;
    background: linear-gradient(145deg, #fff4cc, #e8b84a);
    border: 1px solid rgba(255, 220, 140, 0.45);
  }

  @media (max-width: 900px) {
    body.page-home .features-grid--modern,
    body.page-home .features-section .features-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    body.page-home .features-grid--modern,
    body.page-home .features-section .features-grid {
      grid-template-columns: 1fr;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .feature-card, .event-win-card, .rank-preview-col {
      transition: none;
    }
  }
  
  
  
  body.page-home .hero {
    position: relative;
    display: block !important;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--nav-h);
    padding-bottom: 0;
    overflow: hidden !important;
  }
  
  
  body.page-home .hero-glacier {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 14;
    width: 100%;
    height: clamp(72px, 11vh, 112px);
    pointer-events: none;
    line-height: 0;
  }
  
  body.page-home .hero-glacier__ridge {
    animation: none;
    stroke-width: 1.5;
    opacity: 0.85;
  }
  
  body.page-home .hero-glacier__ridge--thin {
    display: none;
  }
  
  body.page-home .hero-glacier__mist {
    display: none;
  }
  
  body.page-home .home-news-section {
    margin-top: 0;
    padding-top: clamp(36px, 5vw, 64px);
    background: #030a14;
  }
  
  body.page-home .home-news-section::before {
    opacity: 0.04;
  }
  
  body.page-home .hero-glacier__svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  @media (prefers-reduced-motion: reduce) {
    body.page-home .hero-glacier__ridge,
    body.page-home .hero-glacier__ridge--thin {
      animation: none;
    }
  }
  
  @media (max-width: 900px) {
    body.page-home .hero-glacier {
      height: clamp(64px, 11vh, 100px);
    }
  }
  
  body.page-home .hero > .hero-bg,
  body.page-home .hero > .hero-orb,
  body.page-home .hero > .hero-glow-ring,
  body.page-home .hero > .hero-modern-frame,
  body.page-home .hero > .hero-glacier {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: auto;
  }
  
  body.page-home .hero > .hero-glacier {
    top: auto;
    bottom: -1px;
    z-index: 14;
  }
  
  body.page-home .hero-bg {
    z-index: 0 !important;
  }
  
  body.page-home .hero-bg::before {
    display: block !important;
    opacity: 1 !important;
    inset: 0;
    background-image: var(--theme-hero-bg-image) !important;
    background-size: cover !important;
    background-position: center 22% !important;
    background-repeat: no-repeat !important;
    filter: saturate(1.12) contrast(1.05) brightness(0.92) !important;
    transform: none !important;
    animation: none !important;
  }
  
  body.page-home .hero-gradient {
    z-index: 1;
    background:
      radial-gradient(ellipse 65% 50% at 50% 30%, rgba(62, 123, 250, 0.2) 0%, transparent 60%),
      radial-gradient(ellipse 45% 38% at 85% 72%, rgba(18, 59, 148, 0.45) 0%, transparent 55%),
      linear-gradient(180deg, rgba(3, 7, 18, 0.55) 0%, rgba(2, 6, 15, 0.88) 60%, rgba(2, 6, 15, 0.98) 100%) !important;
  }
  
  body.page-home .hero-glow-ring {
    display: none;
  }
  
  body.page-home .hero-modern-frame {
    display: none !important;
  }
  
  body.page-home .hero-bg::after {
    z-index: 2;
    background:
      radial-gradient(ellipse 50% 60% at 20% 60%, rgba(62, 123, 250, 0.1) 0%, transparent 55%),
      radial-gradient(ellipse 45% 55% at 78% 50%, rgba(18, 59, 148, 0.12) 0%, transparent 50%),
      linear-gradient(180deg, rgba(2, 8, 22, 0.2) 0%, rgba(2, 8, 22, 0.55) 100%) !important;
    background-blend-mode: screen, screen, normal !important;
  }
  
  body.page-home .hero-layout {
    --hero-stack-foot: clamp(80px, 13vh, 132px);
    position: absolute;
    left: 50%;
    top: calc(
      var(--nav-h, 68px) +
      (100dvh - var(--nav-h, 68px) - var(--hero-stack-foot)) * 0.5
    );
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 22;
    width: min(640px, 94vw);
    max-width: 640px !important;
    margin: 0 !important;
    padding: clamp(8px, 1.5vh, 20px) clamp(16px, 3vw, 24px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  body.page-home .hero-layout::before,
  body.page-home .hero-layout::after {
    display: none !important;
    content: none !important;
  }
  
  body.page-home .hero-champion {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--nav-h, 68px);
    bottom: clamp(72px, 12vh, 140px);
    z-index: 6;
    width: 100%;
    height: auto;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0;
    padding: 0 clamp(0px, 2vw, 24px) 0 0;
    pointer-events: none;
    user-select: none;
    overflow: visible;
  }
  
  body.page-home .hero-champion__img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: calc(100dvh - var(--nav-h, 68px) - clamp(72px, 12vh, 140px)) !important;
    min-height: 320px !important;
    max-height: none !important;
    max-width: min(54vw, 880px) !important;
    object-fit: contain;
    object-position: bottom right;
    margin: 0 0 0 auto;
    filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.5));
    animation: none !important;
  }
  
  @media (min-width: 1280px) {
    body.page-home .hero-champion__img {
      max-width: min(50vw, 920px) !important;
      min-height: 420px !important;
    }
  
    body.page-home .hero-layout {
      width: min(660px, 92vw);
      max-width: 660px !important;
    }
  }
  
  body.page-home .hero-content.hero-content--split {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    text-align: center !important;
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: clamp(10px, 1.8vh, 18px);
    animation: none !important;
    position: relative;
    overflow: visible;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  
  body.page-home .hero-content-fx {
    display: none !important;
  }
  
  body.page-home .hero-content--split > * {
    position: relative;
    z-index: 1;
  }
  
  body.page-home .hero-brand-floor-glow {
    display: none !important;
  }
  
  body.page-home .hero-content--split .hero-brand-mark-wrap {
    position: relative;
    left: auto;
    right: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
    align-self: center;
    width: min(920px, 100vw);
    max-width: 100vw;
    margin: 0 0 clamp(4px, 1vh, 10px);
    box-sizing: border-box;
    filter: none;
  }
  
  body.page-home .hero-brand-crow {
    position: relative;
    width: 100%;
    max-width: min(900px, 100%);
    margin-inline: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    outline: none;
    line-height: 0;
  }

  @keyframes heroBrandCrowAlive {
    0%,
    100% {
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    25% {
      transform: translate3d(2px, -6px, 0) rotate(-0.3deg) scale(1.008);
    }
    50% {
      transform: translate3d(-3px, -11px, 0) rotate(0.35deg) scale(1.014);
    }
    75% {
      transform: translate3d(3px, -7px, 0) rotate(-0.2deg) scale(1.01);
    }
  }
  
  body.page-home .hero-brand-crow__bird {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    border: none;
    box-shadow: none;
    filter: brightness(1.06) contrast(1.08) saturate(1.04);
    transform-origin: 50% 88%;
    animation: heroBrandCrowAlive 7s ease-in-out infinite;
    will-change: transform;
  }

  
  body.page-home .hero-brand-mark-wrap--cioara2-test .hero-brand-mark {
    display: none !important;
  }

  body.page-home .hero-brand-mark-wrap--cioara2-test .hero-brand-crow {
    max-width: min(760px, 94vw);
  }

  body.page-home .hero-brand-mark-wrap--cioara2-test .hero-brand-crow__bird {
    filter: brightness(1.05) contrast(1.12) saturate(1.06);
    animation: heroBrandCrowAlive 8s ease-in-out infinite;
  }
  
  body.page-home .hero-content--split .hero-brand-mark.theme-brand-logo {
    position: absolute;
    left: 51%;
    top: 86%;
    bottom: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin: 0 !important;
    width: min(560px, 94%) !important;
    height: clamp(128px, 20vw, 210px) !important;
    background-image: var(--theme-brand-logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center !important;
    filter:
      brightness(1.16)
      contrast(1.2)
      saturate(1.24)
      drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65))
      drop-shadow(0 0 40px rgba(42, 127, 212, 0.55))
      drop-shadow(0 0 64px rgba(94, 184, 255, 0.32));
    animation: none !important;
    transition: filter 0.35s ease;
  }
  
  @media (min-width: 1280px) {
    body.page-home .hero-content--split .hero-brand-mark-wrap {
      width: min(1040px, 100vw);
    }
  
    body.page-home .hero-brand-crow {
      max-width: min(1000px, 100%);
    }
  
    body.page-home .hero-content--split .hero-brand-mark.theme-brand-logo {
      width: min(620px, 95%) !important;
      height: clamp(148px, 14vw, 240px) !important;
    }
  }
  
  body.page-home .hero-content--split .hero-divider {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    max-width: min(480px, 100%);
    margin-bottom: clamp(12px, 2vw, 22px) !important;
  }
  
  body.page-home .hero-content--split .hero-divider__line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(42, 127, 212, 0.35), transparent);
    animation: none;
    opacity: 0.7;
    box-shadow: none;
  }
  
  body.page-home .hero-content--split .hero-live-card {
    width: 100%;
    max-width: min(580px, 100%);
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    border-radius: 20px !important;
    background: var(--card-surface) !important;
    background-image: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  body.page-home .hero-content--split .hero-live-card::before {
    height: 1px;
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(42, 127, 212, 0.4), transparent);
    opacity: 0.5;
  }
  
  body.page-home .hero-content--split .hero-live-card::after {
    display: none !important;
  }
  
  body.page-home .hero-content--split .hero-live-card__head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: linear-gradient(
      180deg,
      rgba(14, 32, 64, 0.45) 0%,
      rgba(6, 14, 32, 0.28) 100%
    );
    border-bottom: 1px solid rgba(94, 160, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  body.page-home .hero-content--split .hero-live-card__head > .hero-live-card__meta-chip,
  body.page-home .hero-content--split .hero-live-card__head > .hero-live-card__version-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    margin: 0;
  }

  body.page-home .hero-content--split .hero-live-card__version-wrap {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
  }

  body.page-home .hero-content--split .hero-live-card__version-wrap .hero-live-card__meta-chip {
    flex: 1 1 auto;
    width: 100%;
  }

  body.page-home .hero-content--split .hero-live-card__head--opening,
  body.page-home .hero-content--split .hero-live-card__head--online,
  body.page-home .hero-content--split .hero-live-card__head--offline {
    background: linear-gradient(
      180deg,
      rgba(14, 32, 64, 0.48) 0%,
      rgba(6, 14, 32, 0.3) 100%
    ) !important;
  }

  body.page-home .hero-live-card__meta-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border-radius: 11px;
    background: rgba(6, 16, 36, 0.65);
    border: 1px solid rgba(100, 165, 240, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 2px 8px rgba(0, 0, 0, 0.22);
    max-width: none;
    min-height: 44px;
    height: 100%;
    flex: 1 1 0;
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  body.page-home .hero-live-card__meta-chip:hover {
    border-color: rgba(130, 190, 255, 0.35);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 4px 14px rgba(0, 0, 0, 0.28);
  }

  body.page-home .hero-live-card__status-chip {
    background: linear-gradient(
      128deg,
      rgba(48, 32, 8, 0.55) 0%,
      rgba(10, 22, 44, 0.72) 100%
    );
    border-color: rgba(255, 186, 90, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 160, 0.08),
      0 2px 10px rgba(0, 0, 0, 0.25),
      0 0 20px rgba(255, 150, 40, 0.08);
    padding-right: 10px;
  }

  body.page-home .hero-live-card__status-icon {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 9px;
    background: linear-gradient(145deg, rgba(255, 210, 120, 0.22) 0%, rgba(160, 90, 20, 0.18) 100%);
    border-color: rgba(255, 200, 110, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  body.page-home .hero-live-card__status-icon .hero-status-led {
    display: none;
  }

  body.page-home .hero-live-card__status-chip::before {
    content: '';
    position: absolute;
    top: 7px;
    right: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.75);
    opacity: 0.9;
  }

  body.page-home .hero-live-card__head--online .hero-live-card__status-chip::before {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.75);
  }

  body.page-home .hero-live-card__head--offline .hero-live-card__status-chip::before {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.65);
  }

  body.page-home .hero-live-card__head--loading .hero-live-card__status-chip::before {
    opacity: 0.35;
  }

  body.page-home .hero-live-card__status-icon .hero-live-status-icon {
    font-size: 0.68rem;
    line-height: 1;
    color: #ffc96a;
  }

  body.page-home .hero-live-card__status-chip .hero-live-card__meta-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    min-width: 0;
  }

  body.page-home .hero-live-card__status-chip .hero-live-card__meta-v {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.12;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    max-height: 2.3em;
  }

  body.page-home .hero-live-card__head--online .hero-live-card__status-chip {
    border-color: rgba(100, 220, 150, 0.32);
  }

  body.page-home .hero-live-card__head--online .hero-live-card__status-icon {
    background: linear-gradient(145deg, rgba(100, 230, 150, 0.2), rgba(20, 100, 60, 0.2));
    border-color: rgba(100, 220, 150, 0.38);
  }

  body.page-home .hero-live-card__head--online .hero-live-card__status-icon .hero-live-status-icon {
    color: #7ef0a8;
  }

  body.page-home .hero-live-card__head--offline .hero-live-card__status-chip {
    border-color: rgba(255, 120, 120, 0.3);
  }

  body.page-home .hero-live-card__head--offline .hero-live-card__status-icon {
    background: linear-gradient(145deg, rgba(255, 100, 100, 0.18), rgba(80, 20, 20, 0.2));
    border-color: rgba(255, 120, 120, 0.35);
  }

  body.page-home .hero-live-card__head--offline .hero-live-card__status-icon .hero-live-status-icon {
    color: #fca5a5;
  }

  body.page-home .hero-live-card__meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #d4ecff;
    background: linear-gradient(145deg, rgba(50, 110, 200, 0.35) 0%, rgba(20, 50, 110, 0.4) 100%);
    border: 1px solid rgba(130, 185, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  body.page-home .hero-live-card__meta-icon--exp {
    color: #2a1804;
    font-size: 0.72rem;
    background: linear-gradient(145deg, #fff6d6 0%, #f2cc5a 45%, #c9922e 100%);
    border-color: rgba(255, 228, 160, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 0 14px rgba(240, 200, 90, 0.35);
  }

  body.page-home .hero-live-card__meta-icon--version {
    color: #b8ecff;
    background: rgba(60, 140, 200, 0.18);
  }

  body.page-home .hero-live-card__meta-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
    line-height: 1.1;
    padding-right: 0;
  }

  body.page-home .hero-live-card__meta-k {
    font-family: var(--font-body);
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(150, 185, 230, 0.58);
    line-height: 1.2;
    width: 100%;
  }

  body.page-home .hero-live-card__meta-k[hidden] {
    display: none !important;
  }

  body.page-home .hero-live-card__meta-v {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f5f9ff;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
  }

  body.page-home .hero-live-card__exp-chip .hero-live-card__meta-v {
    color: #f5e6a8;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
  }

  body.page-home .hero-live-card__season.hero-live-card__meta-chip {
    background: linear-gradient(
      128deg,
      rgba(40, 28, 10, 0.5) 0%,
      rgba(8, 18, 38, 0.72) 100%
    );
    border-color: rgba(255, 200, 120, 0.26);
    box-shadow:
      inset 0 1px 0 rgba(255, 220, 160, 0.06),
      0 2px 8px rgba(0, 0, 0, 0.22);
  }

  body.page-home .hero-live-card__season .hero-live-card__meta-icon {
    color: #ffe4a8;
    background: linear-gradient(145deg, rgba(255, 190, 80, 0.25), rgba(120, 70, 10, 0.25));
    border-color: rgba(255, 200, 110, 0.35);
  }

  body.page-home .hero-live-card__version.hero-live-card__meta-chip {
    background: rgba(6, 16, 36, 0.65);
  }

  body.page-home .hero-live-card__version-wrap {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    min-width: 0;
  }

  body.page-home .hero-content--split .hero-live-card__exp-chip {
    padding: 6px 10px 6px 6px;
    gap: 8px;
    overflow: visible;
    isolation: auto;
    background: linear-gradient(
      128deg,
      rgba(22, 48, 100, 0.55) 0%,
      rgba(6, 16, 36, 0.78) 100%
    );
    border-color: rgba(130, 185, 255, 0.28);
  }

  body.page-home .hero-content--split .hero-live-card__exp-chip::before {
    display: none;
  }

  @media (max-width: 520px) {
    body.page-home .hero-content--split .hero-live-card__head {
      flex-wrap: wrap;
      gap: 6px;
    }

    body.page-home .hero-content--split .hero-live-card__head > .hero-live-card__meta-chip,
    body.page-home .hero-content--split .hero-live-card__head > .hero-live-card__version-wrap {
      flex: 1 1 calc(50% - 3px);
    }
  }
  
  body.page-home .hero-content--split .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 22px 18px 26px !important;
    border-top: none !important;
  }
  
  body.page-home .hero-content--split .hero-stat-sep {
    display: none !important;
  }
  
  body.page-home .hero-content--split .hero-stat {
    position: relative;
    text-align: center;
    padding: 18px 10px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(13, 71, 152, 0.22);
    box-shadow: none;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  body.page-home .hero-content--split .hero-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 0 0 4px 4px;
    opacity: 0.85;
  }

  body.page-home .hero-content--split .hero-stat:hover {
    transform: translateY(-1px);
  }

  
  body.page-home .hero-content--split .hero-stat--online {
    background: linear-gradient(
      165deg,
      rgba(34, 197, 94, 0.12) 0%,
      rgba(0, 0, 0, 0.32) 55%
    );
    border-color: rgba(74, 222, 128, 0.28);
  }

  body.page-home .hero-content--split .hero-stat--online::before {
    background: linear-gradient(90deg, transparent, #4ade80, transparent);
    box-shadow: 0 0 14px rgba(74, 222, 128, 0.45);
  }

  body.page-home .hero-content--split .hero-stat--online:hover {
    border-color: rgba(110, 231, 150, 0.45);
    box-shadow: 0 8px 28px rgba(34, 197, 94, 0.12);
  }

  body.page-home .hero-content--split .hero-stat--online .stat-num {
    background: linear-gradient(180deg, #f0fdf4 0%, #86efac 42%, #22c55e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(74, 222, 128, 0.35));
  }

  body.page-home .hero-content--split .hero-stat--online .stat-label {
    color: rgba(167, 243, 208, 0.88) !important;
  }

  
  body.page-home .hero-content--split .hero-stat--accounts {
    background: linear-gradient(
      165deg,
      rgba(56, 189, 248, 0.1) 0%,
      rgba(0, 0, 0, 0.32) 55%
    );
    border-color: rgba(94, 184, 255, 0.28);
  }

  body.page-home .hero-content--split .hero-stat--accounts::before {
    background: linear-gradient(90deg, transparent, #5eb8ff, transparent);
    box-shadow: 0 0 14px rgba(94, 184, 255, 0.4);
  }

  body.page-home .hero-content--split .hero-stat--accounts:hover {
    border-color: rgba(125, 211, 252, 0.42);
    box-shadow: 0 8px 28px rgba(56, 189, 248, 0.1);
  }

  body.page-home .hero-content--split .hero-stat--accounts .stat-num {
    background: linear-gradient(180deg, #f0f9ff 0%, #7dd3fc 45%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(94, 184, 255, 0.32));
  }

  body.page-home .hero-content--split .hero-stat--accounts .stat-label {
    color: rgba(186, 230, 253, 0.88) !important;
  }

  
  body.page-home .hero-content--split .hero-stat--characters {
    background: linear-gradient(
      165deg,
      rgba(167, 139, 250, 0.11) 0%,
      rgba(0, 0, 0, 0.32) 55%
    );
    border-color: rgba(192, 132, 252, 0.28);
  }

  body.page-home .hero-content--split .hero-stat--characters::before {
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.38);
  }

  body.page-home .hero-content--split .hero-stat--characters:hover {
    border-color: rgba(216, 180, 254, 0.4);
    box-shadow: 0 8px 28px rgba(167, 139, 250, 0.1);
  }

  body.page-home .hero-content--split .hero-stat--characters .stat-num {
    background: linear-gradient(180deg, #faf5ff 0%, #d8b4fe 45%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.32));
  }

  body.page-home .hero-content--split .hero-stat--characters .stat-label {
    color: rgba(233, 213, 255, 0.88) !important;
  }
  
  body.page-home .hero-content--split .stat-num {
    font-size: clamp(1.85rem, 4.2vw, 2.85rem) !important;
    line-height: 1.05;
    filter: none;
  }
  
  body.page-home .hero-content--split .stat-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.16em;
    color: rgba(200, 225, 255, 0.65) !important;
    margin-top: 6px;
  }
  
  body.page-home .hero-bg .hero-particles.hero-particles--sky {
    z-index: 4;
    opacity: 1;
  }

  body.page-home .hero-bg .hero-particles.hero-particles--sky .particle--dot {
    background: #a8dcff !important;
  }
  
  body.page-home .hero-content--split .hero-actions {
    position: relative;
    z-index: 3;
    margin-top: clamp(10px, 1.5vh, 16px);
    margin-bottom: 0;
    justify-content: center !important;
    align-self: center;
    width: 100%;
    max-width: min(640px, 100%);
    margin-left: auto;
    margin-right: auto;
    gap: 12px !important;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  body.page-home .hero-content--split .hero-actions .btn-primary {
    padding: 16px 32px !important;
    font-size: 1rem !important;
    letter-spacing: 0.06em;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
  }
  
  body.page-home .hero-content--split .hero-actions .btn-outline {
    padding: 14px 22px !important;
    border-color: rgba(13, 71, 152, 0.35) !important;
    box-shadow: none;
  }
  
  body.page-home .hero-content--split .hero-actions .btn-outline:hover {
    border-color: rgba(42, 127, 212, 0.45) !important;
    box-shadow: none;
  }
  
  @media (max-width: 960px) {
    body.page-home .hero-layout {
      --hero-stack-foot: clamp(64px, 11vh, 100px);
      left: 50%;
      top: calc(
        var(--nav-h, 68px) +
        (100dvh - var(--nav-h, 68px) - var(--hero-stack-foot)) * 0.5
      );
      transform: translate(-50%, -50%);
      width: min(100%, 96vw);
      max-width: 100% !important;
      padding: clamp(8px, 2vh, 16px) 16px;
    }
  
    body.page-home .hero-champion {
      bottom: clamp(56px, 10vh, 88px);
      min-height: 240px;
      justify-content: center;
      padding: 0;
    }
  
    body.page-home .hero-champion__img {
      height: auto !important;
      min-height: 0 !important;
      max-height: min(62vh, 580px) !important;
      max-width: min(100%, 540px) !important;
      object-position: bottom center;
      margin: 0 auto;
    }
  
    body.page-home .hero-content.hero-content--split {
      text-align: center;
    }
  
    body.page-home .hero-content--split .hero-brand-mark-wrap {
      width: min(720px, 100vw);
      align-self: center;
    }
  
    body.page-home .hero-brand-crow {
      max-width: 100%;
    }
  
    body.page-home .hero-content--split .hero-brand-mark.theme-brand-logo {
      margin-left: auto;
      margin-right: auto;
      background-position: center center;
      top: 52%;
      transform: translate(-50%, -50%);
      width: min(440px, 94%) !important;
      height: clamp(112px, 28vw, 180px) !important;
    }
  
    body.page-home .hero-content--split .hero-live-card__head {
      justify-content: center;
    }
  
    body.page-home .hero-content--split .hero-actions {
      justify-content: center;
    }
  
    body.page-home .hero-content--split .hero-stats {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    body.page-home .hero-content--split .hero-divider__line {
      animation: none !important;
    }

    body.page-home .hero-brand-crow__bird {
      animation: none !important;
      will-change: auto;
    }
  }
  
  
  #main-header .header-inner.header-container.container,
  #main-header.scrolled .header-inner.header-container.container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  #main-header .nav-list--primary,
  #main-header .nav-list--secondary,
  #main-header .header-tools,
  #main-header .header-auth-wrap {
    background: none !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  
  .desktop-nav > ul > li > a::after,
  #main-header .nav-dd-btn::after {
    display: none !important;
  }
  

html {
  color-scheme: dark;
}

body.page-home .hero-gradient {
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(13, 71, 152, 0.12) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(10, 48, 126, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, rgba(4, 12, 28, 0.82) 0%, rgba(2, 8, 20, 0.92) 55%, rgba(3, 10, 22, 0.96) 100%) !important;
}

body.page-home .features-section,
body.page-home .event-winners-section,
body.page-home .ranking-preview-section,
body.page-home .home-news-section {
  position: relative;
  isolation: isolate;
}

body.page-home .home-news-section {
  padding: clamp(48px, 7vw, 88px) 0;
  background: #030a14;
}

body.page-home .home-news-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: var(--site-bg-hex-pattern);
  background-size: var(--site-bg-hex-size);
}

.home-news__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 8px;
  text-align: left;
}

@media (max-width: 900px) {
  .home-news__grid {
    grid-template-columns: 1fr;
  }
}

.home-news__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-news-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 20px;
  border: 1px solid var(--card-border, rgba(13, 71, 152, 0.22));
  background: var(--card-surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  text-decoration: none;
  color: inherit;
}

.home-news-item:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hover, rgba(42, 127, 212, 0.34));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(13, 71, 152, 0.08);
}

.home-news__list .home-news-item:first-child {
  padding: clamp(22px, 3vw, 32px);
  border-color: rgba(42, 127, 212, 0.26);
  background: var(--card-surface-featured);
}

.home-news-item__meta {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.home-news-item__badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid transparent;
}

.home-news-item__badge[data-type="event"] {
  color: #2a1f08;
  background: linear-gradient(180deg, #f5dc88 0%, #e8b84a 100%);
  border-color: rgba(255, 224, 140, 0.75);
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.45);
}

.home-news-item__badge[data-type="maintenance"] {
  color: #fff5f7;
  background: linear-gradient(180deg, #ff9aab 0%, #ff6b82 100%);
  border-color: rgba(255, 170, 185, 0.65);
  box-shadow: 0 0 18px rgba(255, 100, 120, 0.4);
}

.home-news-item__badge[data-type="update"] {
  color: #eef6ff;
  background: linear-gradient(180deg, #7ec4ff 0%, #3d8eef 100%);
  border-color: rgba(150, 205, 255, 0.7);
  box-shadow: 0 0 18px rgba(61, 142, 239, 0.45);
}

.home-news-item__badge[data-type="news"] {
  color: #e8fbff;
  background: linear-gradient(180deg, #6ee7ff 0%, #22b8e8 100%);
  border-color: rgba(120, 230, 255, 0.65);
  box-shadow: 0 0 18px rgba(34, 184, 232, 0.4);
}

.home-news-item__badge[data-type="notice"],
.home-news-item__badge[data-type="fix"] {
  color: #edf8ff;
  background: linear-gradient(180deg, #9edcff 0%, #6ec8ff 100%);
  border-color: rgba(170, 225, 255, 0.62);
  box-shadow: 0 0 16px rgba(110, 200, 255, 0.38);
}

.home-news-item__date {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}

.home-news-item__body {
  grid-column: 1;
}

.home-news-item__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  line-height: 1.35;
}

.home-news__list .home-news-item:first-child .home-news-item__title {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.home-news-item__desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-news-item__more {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.home-news__list .home-news-item:first-child .home-news-item__more {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  margin-top: 0;
}

.home-news__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-news__aside-card {
  flex: 1;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border, rgba(13, 71, 152, 0.22));
  background: var(--card-surface);
  backdrop-filter: blur(12px);
}

.home-news__aside-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.home-news__aside-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.home-news__aside-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-news__aside-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}

.home-news__aside-links a:hover {
  border-color: var(--accent-border);
  background: var(--accent-dim);
  color: var(--accent);
}

body.page-home .news-modal {
  position: fixed;
  inset: 0;
  z-index: 120000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.page-home .news-modal[hidden] {
  display: none !important;
}

body.page-home .news-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(13, 71, 152, 0.35);
  background: var(--card-surface);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(13, 71, 152, 0.12);
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

body.page-home .news-modal.is-open .news-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

body.page-home .news-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(13, 71, 152, 0.15) 0%, transparent 55%),
    rgba(2, 6, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

body.page-home .news-modal.is-open .news-modal__backdrop {
  opacity: 1;
}

body.page-home .news-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 0;
}

body.page-home .news-modal__tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #b8e0ff;
}

body.page-home .news-modal__date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

body.page-home .news-modal__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  padding: 12px 24px 0;
  letter-spacing: 0.04em;
}

body.page-home .news-modal__content {
  padding: 16px 24px;
  overflow: auto;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

body.page-home .news-modal__content a {
  color: var(--accent);
}

body.page-home .news-modal__actions {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.news-modal-open {
  overflow: hidden;
}

body.page-home .feature-card,
body.page-home .event-win-card,
body.page-home .rank-preview-col {
  background: var(--card-surface) !important;
  background-image: var(--card-surface) !important;
  border-color: var(--card-border) !important;
}

#page-loader .loader-bar-fill {
  background: linear-gradient(90deg, #0a307e, #0d4798, #2a7fd4, #0a307e) !important;
}

#main-header {
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  padding: 0 !important;
}

#main-header .header-inner.header-container.container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#main-header .desktop-nav > ul {
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
}

#main-header .header-right {
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
}

.hero-corner {
  display: none !important;
}

body.page-home .hero::after {
  display: none !important;
}

body.page-home .hero-modern-frame {
  position: absolute;
  inset: clamp(12px, 3vw, 28px);
  z-index: 3;
  pointer-events: none;
  border-radius: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(94, 184, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(94, 184, 255, 0.04) 0%, transparent 42%),
    linear-gradient(315deg, rgba(10, 58, 120, 0.12) 0%, transparent 50%);
  box-shadow:
    inset 0 0 80px rgba(6, 34, 96, 0.35),
    0 0 120px rgba(94, 184, 255, 0.06);
  mask-image: linear-gradient(180deg, black 0%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 88%, transparent 100%);
}

body.page-home .hero-modern-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 184, 255, 0.45), transparent);
  opacity: 0.7;
}

body.page-home .hero-corner {
  display: none !important;
}

body.page-home .hero-brand-mark-wrap {
  position: relative;
  margin-bottom: clamp(14px, 2.4vw, 28px);
}

body.page-home .hero-brand-floor-glow {
  display: none !important;
}

body.page-home .hero-brand-mark.theme-brand-logo {
  transform: none;
  animation: none !important;
}

body.page-home .hero-divider {
  display: block;
  max-width: min(200px, 50vw);
  margin: 0 auto 28px;
  width: 100%;
}

body.page-home .hero-divider__line {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(94, 184, 255, 0.55), transparent);
  box-shadow: 0 0 20px rgba(94, 184, 255, 0.25);
}

body.page-home .hero-divider__icon {
  display: none;
}

body.page-home .hero-live-card {
  max-width: min(720px, 94vw);
  border-radius: 22px !important;
  border: 1px solid var(--card-border) !important;
  background: var(--card-surface) !important;
  background-image: var(--card-surface) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 48px rgba(13, 71, 152, 0.06) !important;
  margin-bottom: 32px !important;
}

body.page-home .hero-live-card::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 127, 212, 0.35), transparent);
  opacity: 0.5;
}

body.page-home .hero-live-card__head {
  padding: 16px 22px;
  gap: 10px;
  border-bottom-color: rgba(94, 184, 255, 0.12) !important;
}

body.page-home .hero-live-card__season,
body.page-home .hero-live-card__version {
  
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

body.page-home .hero-live-card__exp-chip.hero-live-card__meta-chip {
  
  isolation: auto;
  overflow: visible;
}

body.page-home .hero-live-card__status-text {
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(72, 220, 130, 0.12);
  border: 1px solid rgba(72, 220, 130, 0.35);
  color: #9dffc4 !important;
}

body.page-home .hero-live-card__head--offline .hero-live-card__status-text {
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 120, 120, 0.35);
  color: #ffb8b8 !important;
}

body.page-home .hero-stats {
  padding: 22px 20px 26px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

body.page-home .hero-stat {
  text-align: center;
  padding: 8px 4px;
}

body.page-home .hero-stat-sep {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, transparent, rgba(94, 184, 255, 0.35), transparent);
}

body.page-home .stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem) !important;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #9ad4ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 6px;
}

body.page-home .stat-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(200, 220, 255, 0.5) !important;
}

body.page-home .hero-actions {
  gap: 12px;
  padding: 0;
  border-radius: 18px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  max-width: min(640px, 94vw);
  margin-inline: auto;
}

body.page-home .hero-actions .btn-primary {
  flex: 1 1 160px;
  justify-content: center;
  border-radius: 14px !important;
  border: none !important;
  background: linear-gradient(135deg, #3d9ef5 0%, #5eb8ff 45%, #7ec8ff 100%) !important;
  color: #031428 !important;
  font-weight: 800 !important;
  box-shadow:
    0 8px 28px rgba(94, 184, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

body.page-home .hero-actions .btn-primary:hover {
  color: #02101f !important;
  background: linear-gradient(135deg, #5eb8ff 0%, #8eceff 100%) !important;
  box-shadow: 0 12px 36px rgba(94, 184, 255, 0.55) !important;
}

body.page-home .hero-actions .btn-outline {
  flex: 1 1 140px;
  justify-content: center;
  border-radius: 14px !important;
  border: 1px solid rgba(94, 184, 255, 0.35) !important;
  color: #d4ecff !important;
  background: rgba(10, 58, 120, 0.35) !important;
}

body.page-home .hero-actions .btn-outline:hover {
  border-color: rgba(155, 220, 255, 0.65) !important;
  background: rgba(94, 184, 255, 0.16) !important;
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .hero-brand-mark.theme-brand-logo {
    animation: none;
  }
}

@media (max-width: 640px) {
  body.page-home .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  body.page-home .hero-actions .btn {
    width: 100%;
  }
  body.page-home .hero-stats {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  body.page-home .hero-stat-sep {
    display: none;
  }
  #main-header .header-right {
    background: transparent;
    border: none;
    padding: 0;
  }
}

.badge,
.section-title span {
  border-color: rgba(94, 184, 255, 0.28) !important;
}

#page-loader {
  background:
    radial-gradient(ellipse 55% 42% at 50% 28%, rgba(13, 71, 152, 0.1) 0%, transparent 62%),
    linear-gradient(180deg, #061228 0%, #030a14 100%) !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease !important;
}

#page-loader::before {
  background-image: var(--site-bg-hex-pattern) !important;
  background-size: var(--site-bg-hex-size) !important;
  opacity: 0.04 !important;
}

#page-loader::after {
  display: none !important;
}

#page-loader .loader-ambient {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(13, 71, 152, 0.08) 0%, transparent 42%),
    radial-gradient(circle at 70% 60%, rgba(3, 10, 22, 0.5) 0%, transparent 48%);
  animation: loaderAmbientDrift 10s ease-in-out infinite alternate;
}

@keyframes loaderAmbientDrift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.04) translate(1%, -0.5%); }
}

#page-loader .loader-inner {
  gap: clamp(22px, 4vh, 32px) !important;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px) clamp(26px, 4vw, 36px);
  border-radius: 22px;
  background: rgba(4, 12, 28, 0.62) !important;
  border: 1px solid rgba(42, 127, 212, 0.24) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(42, 127, 212, 0.1) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  min-width: min(540px, 94vw);
  max-width: min(760px, 96vw);
  width: min(760px, 96vw);
}

#page-loader .loader-orbit-ring {
  position: absolute;
  width: min(520px, 92vw);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  pointer-events: none;
  z-index: 0;
}

#page-loader .loader-orbit-ring::before,
#page-loader .loader-orbit-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

#page-loader .loader-orbit-ring::before {
  border-top-color: rgba(42, 127, 212, 0.35);
  border-right-color: rgba(13, 71, 152, 0.15);
  animation: loaderSpin 1.2s linear infinite;
  filter: none;
}

#page-loader .loader-orbit-ring::after {
  inset: 14px;
  border-bottom-color: rgba(13, 71, 152, 0.28);
  border-left-color: transparent;
  animation: loaderSpin 1.7s linear infinite reverse;
  opacity: 0.5;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

#page-loader .loader-logo {
  position: relative;
  z-index: 1;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important;
  font-weight: 800;
  letter-spacing: 0.18em !important;
  color: rgba(220, 236, 255, 0.9) !important;
  text-shadow: 0 0 24px rgba(42, 127, 212, 0.25) !important;
  animation: loaderTextPulse 2s ease-in-out infinite !important;
}

#page-loader .loader-logo.theme-brand-logo {
  width: min(560px, 88vw) !important;
  height: clamp(140px, 32vh, 260px) !important;
  max-height: min(42vh, 280px) !important;
  margin-top: 0;
  filter:
    drop-shadow(0 0 48px rgba(42, 127, 212, 0.42))
    drop-shadow(0 0 96px rgba(13, 71, 152, 0.2))
    drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55)) !important;
  animation: themeLogoLoaderPulse 2.4s ease-in-out infinite !important;
}

@keyframes loaderTextPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.88; transform: scale(0.99); }
}

#page-loader .loader-subtitle {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(180, 210, 240, 0.42);
}

#page-loader .loader-bar {
  position: relative;
  z-index: 1;
  width: min(400px, 82vw) !important;
  height: 6px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(13, 71, 152, 0.35) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

#page-loader .loader-bar-fill {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #0a307e, #0d4798, #2a7fd4, #0d4798, #0a307e) !important;
  background-size: 200% 100% !important;
  animation: loaderBarShimmer 1.35s ease-in-out infinite !important;
  box-shadow: 0 0 10px rgba(13, 71, 152, 0.4);
}

@keyframes loaderBarShimmer {
  0% { width: 12%; margin-left: 0; background-position: 0% 50%; }
  50% { width: 72%; margin-left: 14%; background-position: 100% 50%; }
  100% { width: 12%; margin-left: 88%; background-position: 0% 50%; }
}

#page-loader .loader-bar-glow {
  position: absolute;
  inset: -4px -8px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(13, 71, 152, 0.25), transparent 72%);
  opacity: 0.35;
  animation: loaderGlowPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes loaderGlowPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.5; }
}

#page-loader.loaded {
  opacity: 0 !important;
  transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  #page-loader .loader-ambient,
  #page-loader .loader-orbit-ring::before,
  #page-loader .loader-orbit-ring::after,
  #page-loader .loader-bar-fill,
  #page-loader .loader-bar-glow,
  #page-loader .loader-logo {
    animation: none !important;
  }
  #page-loader .loader-bar-fill {
    width: 65% !important;
    margin-left: 0 !important;
  }
}

body.page-db-shell {
  --db-shell-accent: #7bc3ff;
  --db-shell-accent-deep: #2d74db;
  --db-shell-glow: rgba(105, 183, 255, 0.34);
}

body.page-db-shell .db-sidebar {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(105, 183, 255, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(7, 24, 60, 0.95) 0%, rgba(3, 12, 34, 0.97) 100%) !important;
}

body.page-db-shell .db-avatar {
  border-color: rgba(123, 195, 255, 0.45) !important;
  color: #dff1ff !important;
}

body.page-db-shell .db-nav-item.active,
body.page-dashboard .db-vote-btn,
body.page-dashboard .db-promo-btn,
.db-stat-shop-btn,
.mc-char-modal__btn--confirm:not(.is-danger),
.shop-nav-btn.active,
.action-btn,
.shop-checkout-modal .cart-tabs .shop-nav-btn.active,
.shop-checkout-modal .checkout-button,
.donation-status-btn {
  background-image: linear-gradient(135deg, #2d74db 0%, #69b7ff 52%, #d8efff 100%) !important;
  border-color: rgba(123, 195, 255, 0.4) !important;
  color: #031428 !important;
  box-shadow:
    0 14px 36px rgba(43, 110, 214, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset !important;
}

body.page-dashboard .db-vote-btn:hover:not(:disabled),
body.page-dashboard .db-promo-btn:hover:not(:disabled),
.db-stat-shop-btn:hover,
.mc-char-modal__btn--confirm:not(.is-danger):hover,
.shop-nav-btn.active:hover,
.action-btn:hover,
.shop-checkout-modal .cart-tabs .shop-nav-btn.active:hover,
.shop-checkout-modal .checkout-button:hover:not(:disabled),
.donation-status-btn:hover {
  box-shadow:
    0 18px 42px rgba(43, 110, 214, 0.48),
    0 0 28px rgba(105, 183, 255, 0.22) !important;
}

body.page-dashboard .db-vote-countdown strong,
.page-dashboard .lt-vote-status--ready,
.page-dashboard .lt-vote-status--wait,
.page-dashboard .db-vote-badge--ready,
.page-dashboard .db-promo-card__icon,
.page-dashboard .lt-head-icon,
.page-dashboard .lt-reward,
.page-dashboard .lt-empty i {
  color: #9fd8ff !important;
}

.page-dashboard .lt-vote-status--ready,
.page-dashboard .lt-vote-status--wait,
.page-dashboard .db-vote-badge--ready {
  border-color: rgba(123, 195, 255, 0.35) !important;
  background: rgba(105, 183, 255, 0.12) !important;
  box-shadow: 0 0 18px rgba(105, 183, 255, 0.14) !important;
}

.page-dashboard .lt-progress-bar span {
  background: linear-gradient(90deg, #2d74db, #69b7ff, #cfeaff) !important;
}

.mc-char-modal__offline {
  background: rgba(43, 110, 214, 0.1) !important;
  border-color: rgba(123, 195, 255, 0.36) !important;
  color: #cfeaff !important;
}

.page-donation-status {
  --ds-accent: #7bc3ff;
  --ds-accent-deep: #2d74db;
  --ds-success: #8fd6ff;
  --ds-error: #ff7f94;
}

.donation-status-panel {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(105, 183, 255, 0.18) 0%, transparent 55%),
    linear-gradient(168deg, rgba(9, 26, 62, 0.99) 0%, rgba(5, 16, 40, 0.99) 48%, rgba(2, 8, 22, 1) 100%) !important;
}

.donation-status-panel::before,
.shop-checkout-modal__panel::before {
  background: linear-gradient(90deg, transparent, rgba(123, 195, 255, 0.72), transparent) !important;
}

.shop-package-section--vip {
  --section-accent: #8fd6ff;
  --section-glow: rgba(143, 214, 255, 0.26);
}

.package-card--gold,
.package-card--vip-offer {
  --pkg-accent: #8fd6ff;
  --pkg-glow: rgba(143, 214, 255, 0.38);
}

.package-card--hot {
  --pkg-accent: #5aa9ff;
  --pkg-glow: rgba(90, 169, 255, 0.36);
}

.package-card--ruby {
  --pkg-accent: #74bfff;
  --pkg-glow: rgba(116, 191, 255, 0.34);
}

.package-deal-badge,
.package-badge-preorder,
.package-visual .category-tag--vip {
  color: #031428 !important;
  border-color: rgba(123, 195, 255, 0.4) !important;
  background: linear-gradient(135deg, #69b7ff 0%, #d8efff 100%) !important;
  box-shadow: 0 10px 28px rgba(105, 183, 255, 0.24) !important;
}

.shop-checkout-modal {
  --checkout-accent: #8fd6ff;
  --checkout-accent-deep: #2d74db;
  --checkout-discount: #bfe5ff;
}

.shop-checkout-modal__panel {
  background-color: var(--surface-aurora-base, #02060f) !important;
  background-image: var(--surface-aurora) !important;
  border-color: rgba(62, 123, 250, 0.28) !important;
}

#mobile-menu .mobile-menu-inner {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
}

#mobile-menu .mobile-menu-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 10%, rgba(105, 183, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 36%);
  pointer-events: none;
}

.mm-link {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  border: 1px solid rgba(123, 195, 255, 0.08) !important;
  background: rgba(6, 22, 58, 0.34) !important;
}

.mm-link:hover,
.mm-link.active {
  border-color: rgba(123, 195, 255, 0.26) !important;
  background: linear-gradient(135deg, rgba(43, 110, 214, 0.24), rgba(105, 183, 255, 0.1)) !important;
  box-shadow: 0 0 22px rgba(105, 183, 255, 0.08) !important;
}

body.page-home .hero-bg {
  filter: saturate(1.08);
}

body.page-home .hero-bg::before {
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.06), transparent 18%),
    linear-gradient(180deg, rgba(4, 16, 44, 0.1) 0%, rgba(2, 8, 22, 0.42) 100%),
    var(--theme-hero-bg-image);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, center 18%;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.06);
  transform: scale(1.04);
  animation: heroBgDrift 18s ease-in-out infinite alternate;
}

body.page-home .hero-bg::after {
  background:
    radial-gradient(circle at 50% 26%, rgba(105, 183, 255, 0.22) 0%, transparent 24%),
    radial-gradient(circle at 18% 26%, rgba(43, 110, 214, 0.16) 0%, transparent 28%),
    radial-gradient(circle at 82% 34%, rgba(184, 226, 255, 0.12) 0%, transparent 26%),
    linear-gradient(180deg, rgba(3, 12, 34, 0.08) 0%, rgba(2, 8, 22, 0.62) 100%),
    repeating-linear-gradient(90deg, rgba(105, 183, 255, 0.035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(105, 183, 255, 0.03) 0 1px, transparent 1px 92px) !important;
  background-blend-mode: screen, screen, screen, normal, normal, normal;
}

body.page-home .hero-modern-frame {
  border-color: rgba(123, 195, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(105, 183, 255, 0.06) 0%, transparent 42%),
    linear-gradient(315deg, rgba(43, 110, 214, 0.16) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%);
  box-shadow:
    inset 0 0 100px rgba(7, 27, 73, 0.34),
    0 0 140px rgba(105, 183, 255, 0.08);
}

body.page-home .hero-live-card {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 90px rgba(105, 183, 255, 0.14) !important;
}

@keyframes heroBgDrift {
  0% { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(0, -8px, 0); }
}

:root {
  --btn-radius: 12px;
  --btn-primary-bg: var(--brand-gradient, linear-gradient(135deg, #0d4798 0%, #0a307e 100%));
  --btn-primary-bg-hover: linear-gradient(135deg, #1578c8 0%, #0d4798 50%, #0a307e 100%);
  --btn-primary-shadow: 0 12px 32px rgba(4, 14, 34, 0.55), 0 0 28px rgba(13, 71, 152, 0.15);
  --btn-primary-shadow-hover: 0 16px 42px rgba(4, 14, 34, 0.65), 0 0 36px rgba(13, 71, 152, 0.22);
  --btn-outline-border: rgba(13, 71, 152, 0.32);
  --btn-outline-bg: rgba(3, 10, 26, 0.72);
  --stat-num-gradient: linear-gradient(180deg, #ffffff 0%, #a8d4ff 48%, #e8dcc0 100%);
  --panel-dark: #030a14;
  --panel-border: var(--card-border, rgba(13, 71, 152, 0.22));
}

html {
  background-color: #030a14;
}

body {
  background-color: #030a14 !important;
  background-image:
    radial-gradient(ellipse 55% 42% at 50% 28%, rgba(13, 71, 152, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 40% 32% at 88% 78%, rgba(10, 48, 126, 0.1) 0%, transparent 58%),
    linear-gradient(180deg, rgba(4, 12, 28, 0.88) 0%, rgba(2, 8, 20, 0.96) 55%, #030a14 100%),
    var(--theme-hero-bg-image) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, cover !important;
  background-position: center, center, center, center 14% !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}

body:not(.page-home) {
  background-image:
    radial-gradient(ellipse 55% 42% at 50% 28%, rgba(13, 71, 152, 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 40% 32% at 88% 78%, rgba(10, 48, 126, 0.12) 0%, transparent 58%),
    linear-gradient(180deg, rgba(4, 12, 28, 0.92) 0%, rgba(2, 8, 20, 0.98) 50%, #030a14 100%),
    var(--theme-hero-bg-image) !important;
}

.btn,
a.btn,
button.btn {
  border-radius: var(--btn-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    filter 0.2s ease,
    background 0.25s ease,
    border-color 0.2s ease !important;
}

.btn-primary,
.btn-gold,
#header-cta .btn,
#header-cta .btn.btn-gold,
.hero-actions .btn-primary,
.shop-checkout-modal__pay-btn,
.donation-card .btn-primary,
.auth-panel .btn-primary,
.dl-main-card .btn-primary {
  background: var(--btn-primary-bg) !important;
  background-image: var(--btn-primary-bg) !important;
  color: #f5f8ff !important;
  border: 1px solid rgba(122, 166, 255, 0.45) !important;
  box-shadow: var(--btn-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.btn-primary:hover,
.btn-gold:hover,
#header-cta .btn:hover,
.hero-actions .btn-primary:hover {
  background: var(--btn-primary-bg-hover) !important;
  background-image: var(--btn-primary-bg-hover) !important;
  color: #ffffff !important;
  filter: brightness(1.06);
  box-shadow: var(--btn-primary-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-2px);
}

.btn-primary:active,
.btn-gold:active {
  transform: translateY(0) !important;
  filter: brightness(0.98);
}

.btn-outline,
.btn-transparent,
.btn-ghost {
  background: var(--btn-outline-bg) !important;
  color: #d4e8ff !important;
  border: 1px solid var(--btn-outline-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(62, 123, 250, 0.06) !important;
}

.btn-outline:hover,
.btn-transparent:hover,
.btn-ghost:hover {
  background: rgba(62, 123, 250, 0.14) !important;
  border-color: rgba(122, 166, 255, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 0 28px rgba(62, 123, 250, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#main-header #header-auth-controls .btn-primary {
  background: var(--btn-primary-bg) !important;
  color: #f5f8ff !important;
  border-color: rgba(122, 166, 255, 0.4) !important;
}

#main-header #header-cta .btn.btn-gold,
#main-header #header-auth-controls .btn-primary {
  background-image: var(--btn-primary-bg) !important;
}

#main-header #header-auth-controls .btn-outline {
  background: rgba(0, 0, 0, 0.28) !important;
  color: #c8e0ff !important;
}

.stat-num,
.hero-stat .stat-num,
.db-stat-card .db-stat-value,
.db-balance-card__amount,
.si-stat-card strong,
.ranking-table .rank-num--top {
  background: var(--stat-num-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(62, 123, 250, 0.28));
}

.stat-label,
.hero-stat .stat-label,
.db-stat-card .db-stat-label {
  color: rgba(200, 225, 255, 0.62) !important;
  letter-spacing: 0.14em;
}

.card,
.feature-card,
.home-news-item,
.home-news__aside-card,
.event-win-card,
.rank-preview-col,
.ranking-table-wrapper--page,
.ranking-tabs,
.guide-sidebar,
.guide-article,
.auth-panel,
.auth-side-inner,
.terms-content-panel,
.dl-main-card,
.dl-section,
.donation-card,
.db-card,
.db-sidebar,
.db-user-card,
.db-balance-card,
.db-stat-card,
.shop-item-card,
.hero-live-card {
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image: var(--card-surface, var(--surface-aurora)) !important;
  border-color: var(--panel-border) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 0 32px rgba(13, 71, 152, 0.04) !important;
}

.hero-stat,
.db-stat-card,
.si-stat-card {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(13, 71, 152, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(2, 8, 20, 0.65) 0%, rgba(3, 10, 26, 0.85) 100%) !important;
  border: 1px solid rgba(13, 71, 152, 0.22) !important;
  border-radius: 14px !important;
}

.badge {
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid rgba(62, 123, 250, 0.28) !important;
  color: #b8d4ff !important;
  box-shadow: 0 0 20px rgba(62, 123, 250, 0.1);
}

.section-title span {
  color: #8ecfff !important;
}

body:not(.page-home) .page-hero {
  position: relative;
  background-color: rgba(3, 10, 26, 0.94) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(13, 71, 152, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 50% 45% at 50% 100%, rgba(13, 71, 152, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, rgba(4, 14, 32, 0.98) 0%, rgba(2, 8, 18, 0.96) 100%),
    var(--site-bg-hex-pattern) !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    var(--site-bg-hex-size) !important;
  background-position: center, center, center, center !important;
  border-bottom: 1px solid rgba(122, 166, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(42, 127, 212, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.35) !important;
  padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 5.5vw, 64px) !important;
  min-height: min(240px, 38vh) !important;
  overflow: hidden;
  text-align: center;
}

#main-footer {
  background: rgba(2, 5, 12, 0.97) !important;
  border-top: 1px solid rgba(13, 71, 152, 0.18) !important;
}

body.page-home .home-news-item,
body.page-home .home-news__aside-card,
body.page-home .feature-card,
body.page-home .event-win-card,
body.page-home .rank-preview-col,
body.page-home .hero-live-card {
  background-color: var(--surface-aurora-base) !important;
  background-image: var(--card-surface) !important;
  border-color: var(--card-border) !important;
}

body.page-home .home-news__list .home-news-item:first-child {
  background-image: var(--card-surface-featured) !important;
  border-color: rgba(42, 127, 212, 0.26) !important;
}

body.page-db-shell .db-nav-item.active,
body.page-dashboard .db-vote-btn,
body.page-dashboard .db-promo-btn,
.db-stat-shop-btn,
.mc-char-modal__btn--confirm:not(.is-danger),
.shop-nav-btn.active,
.action-btn,
.shop-checkout-modal .cart-tabs .shop-nav-btn.active,
.shop-checkout-modal .checkout-button,
.donation-status-btn {
  background: var(--btn-primary-bg) !important;
  background-image: var(--btn-primary-bg) !important;
  border-color: rgba(122, 166, 255, 0.45) !important;
  color: #f5f8ff !important;
  box-shadow: var(--btn-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

body.page-dashboard .db-vote-btn:hover:not(:disabled),
body.page-dashboard .db-promo-btn:hover:not(:disabled),
.db-stat-shop-btn:hover,
.mc-char-modal__btn--confirm:not(.is-danger):hover,
.shop-nav-btn.active:hover,
.action-btn:hover,
.shop-checkout-modal .cart-tabs .shop-nav-btn.active:hover,
.shop-checkout-modal .checkout-button:hover:not(:disabled),
.donation-status-btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  background-image: var(--btn-primary-bg-hover) !important;
  color: #ffffff !important;
  box-shadow: var(--btn-primary-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.page-dashboard .lt-progress-bar span,
.events-toast__bar-fill,
.events-toast--live .events-toast__bar-fill,
.events-toast--success .events-toast__bar-fill {
  background: var(--btn-primary-bg) !important;
  background-image: var(--btn-primary-bg) !important;
}

.package-deal-badge,
.package-badge-preorder,
.package-visual .category-tag--vip {
  background: var(--btn-primary-bg) !important;
  background-image: var(--btn-primary-bg) !important;
  color: #f5f8ff !important;
  border-color: rgba(122, 166, 255, 0.4) !important;
}

.donation-status-panel,
.shop-checkout-modal__panel,
body.page-events .ev-list,
body.page-events .ev-clocks,
body.page-shop .shop-login-gate-card,
body.page-shop .cart-view-container {
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image: var(--card-surface) !important;
  border-color: var(--panel-border) !important;
}

.page-shop #page-loader {
  background:
    radial-gradient(ellipse 55% 42% at 50% 28%, rgba(13, 71, 152, 0.1) 0%, transparent 62%),
    linear-gradient(180deg, #061228 0%, #030a14 100%) !important;
}

body.page-home .home-news-section .container {
  text-align: center;
}

body.page-home .home-news-section .section-subtitle {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(28px, 4vw, 40px);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(186, 214, 255, 0.72);
}

body.page-home .home-news__grid {
  text-align: left;
  align-items: start;
}

body.page-home .home-news__main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

body.page-home .home-news__list {
  gap: clamp(14px, 2.2vw, 18px);
}

body.page-home .home-news-pagination {
  display: flex;
  justify-content: stretch;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 2.5vw, 18px);
  margin-top: clamp(18px, 3vw, 26px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(13, 71, 152, 0.35);
  background: linear-gradient(180deg, rgba(8, 18, 36, 0.72) 0%, rgba(4, 10, 22, 0.55) 100%);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.page-home .home-news-pagination[hidden] {
  display: none !important;
}

body.page-home .home-news-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(42, 127, 212, 0.22);
  background: rgba(0, 0, 0, 0.38);
  color: rgba(220, 235, 255, 0.92);
  cursor: pointer;
  font-weight: 800;
  font-size: 0.82rem;
  font-family: var(--font-display, inherit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body.page-home .home-news-page-btn:hover:not(:disabled) {
  border-color: rgba(110, 200, 255, 0.55);
  background: rgba(13, 71, 152, 0.28);
  transform: translateY(-1px);
}

body.page-home .home-news-page-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

body.page-home .home-news-pagination__track {
  flex: 1 1 auto;
  min-width: 0;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(42, 127, 212, 0.2);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.page-home .home-news-pagination__fill {
  display: block;
  height: 100%;
  min-width: 12%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(42, 127, 212, 0.55) 0%, rgba(110, 200, 255, 0.95) 100%);
  box-shadow: 0 0 18px rgba(42, 127, 212, 0.45);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-home .home-news-page-btn--prev,
body.page-home .home-news-page-btn--next {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

body.page-home .home-news-page-btn--prev i,
body.page-home .home-news-page-btn--next i {
  font-size: 0.78rem;
  opacity: 0.9;
}

body.page-home .home-news-item {
  --news-accent: #3d8eef;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  border-radius: 20px !important;
  border: 1px solid rgba(13, 71, 152, 0.28) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease !important;
}

body.page-home .home-news-item--event {
  --news-accent: #e8b84a;
}

body.page-home .home-news-item--maintenance {
  --news-accent: #ff7b8a;
}

body.page-home .home-news-item--update {
  --news-accent: #3d8eef;
}

body.page-home .home-news-item--news {
  --news-accent: #22b8e8;
}

body.page-home .home-news-item--notice,
body.page-home .home-news-item--fix {
  --news-accent: #6ec8ff;
}

body.page-home .home-news-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 3;
  background: linear-gradient(180deg, var(--news-accent) 0%, rgba(13, 71, 152, 0.4) 100%);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--news-accent) 45%, transparent);
}

body.page-home .home-news-item::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -6%;
  top: 50%;
  width: clamp(160px, 38%, 260px);
  aspect-ratio: 1.05;
  translate: 0 -50%;
  background: url('/assets/icon/cioara.png') no-repeat center / contain;
  opacity: 0.11;
  filter: saturate(0.8) brightness(1.1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(260deg, #000 12%, transparent 72%);
  mask-image: linear-gradient(260deg, #000 12%, transparent 72%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.page-home .home-news-item__meta,
body.page-home .home-news-item__body,
body.page-home .home-news-item__more {
  position: relative;
  z-index: 2;
  margin-left: 4px;
}

body.page-home .home-news-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 20px) clamp(18px, 2.8vw, 24px) 0;
}

body.page-home .home-news-item__body {
  padding: 10px clamp(18px, 2.8vw, 24px) 0;
  flex: 1;
}

body.page-home .home-news-item__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 14px clamp(18px, 2.8vw, 24px) clamp(18px, 2.4vw, 22px);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.68rem !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #e8f4ff !important;
  background: linear-gradient(135deg, rgba(13, 71, 152, 0.55) 0%, rgba(4, 14, 34, 0.85) 100%);
  border: 1px solid rgba(122, 166, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 1 !important;
  transform: none !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

body.page-home .home-news-item__more i {
  font-size: 0.65rem;
  transition: transform 0.22s ease;
}

body.page-home .home-news-item__badge {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}

body.page-home .home-news-item__badge[data-type='event'] {
  color: #2a1f08 !important;
  background: linear-gradient(180deg, #f5dc88 0%, #e8b84a 55%, #c9942e 100%) !important;
  border-color: rgba(255, 224, 140, 0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 22px rgba(232, 184, 74, 0.55) !important;
}

body.page-home .home-news-item__badge[data-type='maintenance'] {
  color: #fff5f7 !important;
  background: linear-gradient(180deg, #ff9aab 0%, #ff6b82 55%, #e84a62 100%) !important;
  border-color: rgba(255, 170, 185, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 22px rgba(255, 100, 120, 0.5) !important;
}

body.page-home .home-news-item__badge[data-type='update'] {
  color: #eef6ff !important;
  background: linear-gradient(180deg, #7ec4ff 0%, #3d8eef 55%, #2568c4 100%) !important;
  border-color: rgba(150, 205, 255, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(61, 142, 239, 0.55) !important;
}

body.page-home .home-news-item__badge[data-type='news'] {
  color: #e8fbff !important;
  background: linear-gradient(180deg, #6ee7ff 0%, #22b8e8 55%, #0d8fb8 100%) !important;
  border-color: rgba(120, 230, 255, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 22px rgba(34, 184, 232, 0.5) !important;
}

body.page-home .home-news-item__badge[data-type='notice'],
body.page-home .home-news-item__badge[data-type='fix'] {
  color: #edf8ff !important;
  background: linear-gradient(180deg, #9edcff 0%, #6ec8ff 55%, #3a9fd4 100%) !important;
  border-color: rgba(170, 225, 255, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 20px rgba(110, 200, 255, 0.45) !important;
}

body.page-home .home-news-item__date {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: rgba(168, 200, 240, 0.55) !important;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(13, 71, 152, 0.2);
}

body.page-home .home-news-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.2rem) !important;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: #f4f8ff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

body.page-home .home-news-item__desc {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: rgba(186, 210, 240, 0.72) !important;
  margin-top: 8px;
}

body.page-home .home-news-item:hover {
  transform: translateY(-5px);
  border-color: rgba(42, 127, 212, 0.42) !important;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.58),
    0 0 40px rgba(13, 71, 152, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-home .home-news-item:hover::after {
  opacity: 0.17;
  transform: scale(1.04);
}

body.page-home .home-news-item:hover .home-news-item__more {
  border-color: rgba(158, 210, 255, 0.55);
  box-shadow: 0 10px 28px rgba(13, 71, 152, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.page-home .home-news-item:hover .home-news-item__more i {
  transform: translateX(3px);
}

body.page-home .home-news__list .home-news-item:first-child {
  border-color: rgba(42, 127, 212, 0.38) !important;
  background-image: var(--card-surface-featured) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(13, 71, 152, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-home .home-news__list .home-news-item:first-child::after {
  width: clamp(200px, 42%, 300px);
  opacity: 0.15;
  right: -2%;
}

body.page-home .home-news__list .home-news-item:first-child .home-news-item__title {
  font-size: clamp(1.28rem, 2.6vw, 1.75rem) !important;
}

body.page-home .home-news__list .home-news-item:nth-child(even)::after {
  right: auto;
  left: -8%;
  scale: -1 1;
  opacity: 0.09;
}

body.page-home .home-news__aside {
  gap: clamp(16px, 2.5vw, 20px);
}

body.page-home .home-news__aside-card {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 28px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(13, 71, 152, 0.3) !important;
  background:
    radial-gradient(120% 80% at 50% -30%, rgba(13, 71, 152, 0.2) 0%, transparent 55%),
    var(--card-surface) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

body.page-home .home-news__aside-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122, 166, 255, 0.45), transparent);
  pointer-events: none;
}

body.page-home .home-news__aside-card:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 127, 212, 0.38) !important;
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.52),
    0 0 32px rgba(13, 71, 152, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-home .home-news__aside-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

body.page-home .home-news__aside-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  font-size: 1.05rem;
  color: #ffe9a8;
  background: linear-gradient(145deg, rgba(232, 184, 74, 0.25) 0%, rgba(13, 71, 152, 0.35) 100%);
  border: 1px solid rgba(232, 184, 74, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.page-home .home-news__aside-icon--discord {
  color: #c8d8ff;
  background: linear-gradient(145deg, rgba(88, 101, 242, 0.35) 0%, rgba(13, 71, 152, 0.4) 100%);
  border-color: rgba(88, 101, 242, 0.45);
}

body.page-home .home-news__aside-card h3 {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 1.05rem !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0f6ff;
}

body.page-home .home-news__aside-card p {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: rgba(186, 210, 240, 0.75) !important;
  margin-bottom: 18px !important;
}

body.page-home .home-news__aside-links {
  gap: 10px !important;
}

body.page-home .home-news__aside-links a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(13, 71, 152, 0.32) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  font-size: 0.84rem !important;
  font-weight: 650 !important;
  color: #dcecff !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

body.page-home .home-news__aside-links a i:first-child {
  width: 1.25rem;
  text-align: center;
  color: #8ecfff;
}

body.page-home .home-news__aside-chevron {
  margin-left: auto !important;
  font-size: 0.7rem !important;
  opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.page-home .home-news__aside-links a:hover {
  transform: translateX(4px);
  border-color: rgba(122, 166, 255, 0.45) !important;
  background: rgba(13, 71, 152, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.page-home .home-news__aside-links a:hover .home-news__aside-chevron {
  opacity: 1;
  transform: translateX(2px);
}

body.page-home .home-news__discord-btn {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  border-color: rgba(88, 101, 242, 0.45) !important;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.22) 0%, rgba(4, 14, 34, 0.75) 100%) !important;
  color: #e8eeff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.page-home .home-news__discord-btn:hover {
  border-color: rgba(114, 137, 218, 0.65) !important;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.38) 0%, rgba(13, 71, 152, 0.45) 100%) !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  body.page-home .home-news-item::after {
    width: min(180px, 52vw);
    opacity: 0.08;
    right: -14%;
  }

  body.page-home .home-news__list .home-news-item:nth-child(even)::after {
    left: -16%;
    opacity: 0.07;
  }
}

body.page-home .news-modal {
  padding: clamp(16px, 4vw, 32px);
}

body.page-home .news-modal__panel {
  width: min(820px, 100%) !important;
  max-height: min(90vh, 860px) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(13, 71, 152, 0.38) !important;
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image:
    radial-gradient(120% 80% at 50% -25%, rgba(13, 71, 152, 0.22) 0%, transparent 55%),
    var(--card-surface) !important;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 56px rgba(13, 71, 152, 0.14) !important;
}

body.page-home .news-modal__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(122, 166, 255, 0.55), transparent);
  pointer-events: none;
}

body.page-home .news-modal__glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 60%;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(13, 71, 152, 0.2) 0%, transparent 70%);
  opacity: 0.9;
}

body.page-home .news-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(13, 71, 152, 0.35);
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(220, 236, 255, 0.85);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

body.page-home .news-modal__close:hover {
  color: #fff;
  border-color: rgba(122, 166, 255, 0.5);
  background: rgba(13, 71, 152, 0.35);
  transform: scale(1.04);
}

body.page-home .news-modal__head {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 32px) clamp(24px, 4vw, 36px) 0;
  padding-right: clamp(56px, 10vw, 64px);
}

body.page-home .news-modal__top {
  padding: 0 !important;
  margin-bottom: 14px;
}

body.page-home .news-modal__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}

body.page-home .news-modal__tag[data-type='event'] {
  color: #2a1f08 !important;
  background: linear-gradient(180deg, #f5dc88 0%, #e8b84a 55%, #c9942e 100%) !important;
  border-color: rgba(255, 224, 140, 0.75) !important;
  box-shadow: 0 0 20px rgba(232, 184, 74, 0.5) !important;
}

body.page-home .news-modal__tag[data-type='maintenance'] {
  color: #fff5f7 !important;
  background: linear-gradient(180deg, #ff9aab 0%, #ff6b82 55%, #e84a62 100%) !important;
  border-color: rgba(255, 170, 185, 0.65) !important;
  box-shadow: 0 0 20px rgba(255, 100, 120, 0.45) !important;
}

body.page-home .news-modal__tag[data-type='update'] {
  color: #eef6ff !important;
  background: linear-gradient(180deg, #7ec4ff 0%, #3d8eef 55%, #2568c4 100%) !important;
  border-color: rgba(150, 205, 255, 0.7) !important;
  box-shadow: 0 0 20px rgba(61, 142, 239, 0.48) !important;
}

body.page-home .news-modal__tag[data-type='news'] {
  color: #e8fbff !important;
  background: linear-gradient(180deg, #6ee7ff 0%, #22b8e8 55%, #0d8fb8 100%) !important;
  border-color: rgba(120, 230, 255, 0.65) !important;
  box-shadow: 0 0 20px rgba(34, 184, 232, 0.45) !important;
}

body.page-home .news-modal__tag[data-type='notice'],
body.page-home .news-modal__tag[data-type='fix'] {
  color: #edf8ff !important;
  background: linear-gradient(180deg, #9edcff 0%, #6ec8ff 55%, #3a9fd4 100%) !important;
  border-color: rgba(170, 225, 255, 0.62) !important;
  box-shadow: 0 0 18px rgba(110, 200, 255, 0.4) !important;
}

body.page-home .news-modal__date {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: rgba(168, 200, 240, 0.62) !important;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(13, 71, 152, 0.22);
}

body.page-home .news-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2.05rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.03em !important;
  color: #f4f8ff !important;
  padding: 0 !important;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
}

body.page-home .news-modal__content {
  position: relative;
  z-index: 1;
  margin: clamp(16px, 2.5vw, 22px) clamp(20px, 3.5vw, 32px);
  padding: clamp(18px, 2.8vw, 24px) !important;
  flex: 1;
  min-height: 120px;
  max-height: min(52vh, 480px);
  overflow: auto;
  font-size: clamp(0.92rem, 1.6vw, 1.02rem) !important;
  line-height: 1.7 !important;
  color: rgba(210, 228, 255, 0.9) !important;
  border-radius: 16px;
  border: 1px solid rgba(13, 71, 152, 0.22);
  background:
    rgba(0, 0, 0, 0.32),
    linear-gradient(180deg, rgba(4, 12, 28, 0.5) 0%, rgba(2, 8, 20, 0.65) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scrollbar-color: rgba(13, 71, 152, 0.6) rgba(0, 0, 0, 0.25);
  scrollbar-width: thin;
}

body.page-home .news-modal__content::-webkit-scrollbar {
  width: 8px;
}

body.page-home .news-modal__content::-webkit-scrollbar-thumb {
  background: rgba(13, 71, 152, 0.55);
  border-radius: 999px;
}

body.page-home .news-modal__content a {
  color: #8ecfff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.page-home .news-modal__content a:hover {
  color: #c8e8ff !important;
}

body.page-home .news-modal__content--html p {
  margin: 0 0 1em;
}

body.page-home .news-modal__content--html p:last-child {
  margin-bottom: 0;
}

body.page-home .news-modal__content--html strong,
body.page-home .news-modal__content--html b {
  color: #f0f6ff;
  font-weight: 700;
}

body.page-home .news-modal__content--html h1,
body.page-home .news-modal__content--html h2,
body.page-home .news-modal__content--html h3 {
  font-family: var(--font-display);
  color: #f0f6ff;
  margin: 1.25em 0 0.5em;
  letter-spacing: 0.04em;
}

body.page-home .news-modal__content--html img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1em 0;
  border: 1px solid rgba(13, 71, 152, 0.28);
}

body.page-home .news-modal__content--html blockquote {
  margin: 1em 0;
  padding: 12px 16px;
  border-left: 3px solid rgba(13, 71, 152, 0.6);
  background: rgba(13, 71, 152, 0.12);
  border-radius: 0 12px 12px 0;
  color: rgba(200, 225, 255, 0.85);
}

body.page-home .news-modal__actions {
  position: relative;
  z-index: 1;
  padding: clamp(16px, 2.5vw, 22px) clamp(24px, 4vw, 36px) clamp(24px, 3vw, 28px) !important;
  border-top: 1px solid rgba(13, 71, 152, 0.28) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  display: flex;
  justify-content: flex-end;
}

body.page-home .news-modal__close-btn {
  min-width: 140px;
  min-height: 46px !important;
  padding: 12px 28px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  border-radius: 14px !important;
}

@media (max-width: 560px) {
  body.page-home .news-modal__head {
    padding-right: 52px;
  }

  body.page-home .news-modal__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }

  body.page-home .news-modal__content {
    max-height: min(48vh, 360px);
  }

  body.page-home .news-modal__close-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .news-modal__panel,
  body.page-home .news-modal__backdrop {
    transition: none !important;
  }

  body.page-home .news-modal.is-open .news-modal__panel {
    transform: none;
  }
}

body.page-home .ranking-preview-section {
  padding: clamp(64px, 8vw, 100px) 0 !important;
  background: #030a14 !important;
  border-top: 1px solid rgba(13, 71, 152, 0.22) !important;
  border-bottom: 1px solid rgba(13, 71, 152, 0.18) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.page-home .ranking-preview-section .container {
  position: relative;
  z-index: 1;
}

body.page-home .hof-section-sub {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(32px, 4vw, 44px);
  color: rgba(186, 214, 255, 0.72) !important;
  font-size: 0.95rem;
  line-height: 1.6;
}

body.page-home .ranking-preview-grid {
  gap: clamp(20px, 3vw, 28px) !important;
  margin-bottom: clamp(32px, 4vw, 44px) !important;
}

body.page-home .rank-preview-col {
  border-radius: 22px !important;
  border: 1px solid rgba(13, 71, 152, 0.32) !important;
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image:
    radial-gradient(120% 70% at 50% -20%, rgba(13, 71, 152, 0.18) 0%, transparent 55%),
    var(--card-surface) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

body.page-home .rank-preview-col:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 127, 212, 0.42) !important;
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.58),
    0 0 40px rgba(13, 71, 152, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.page-home .rank-preview-col--characters {
  border-color: rgba(42, 127, 212, 0.28) !important;
}

body.page-home .rank-preview-col--guilds {
  border-color: rgba(122, 166, 255, 0.22) !important;
}

body.page-home .rank-col-title {
  margin: 0;
  padding: clamp(16px, 2.5vw, 20px) clamp(18px, 2.8vw, 22px) !important;
  font-family: var(--font-display);
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #e8f2ff !important;
  border-bottom: 1px solid rgba(13, 71, 152, 0.28) !important;
  background: linear-gradient(180deg, rgba(13, 71, 152, 0.12) 0%, rgba(0, 0, 0, 0.15) 100%) !important;
  border-left: none !important;
  gap: 12px !important;
}

body.page-home .rank-preview-col--characters .rank-col-title,
body.page-home .rank-preview-col--guilds .rank-col-title {
  border-left: none !important;
  padding-left: clamp(18px, 2.8vw, 22px) !important;
}

body.page-home .rank-col-title i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 0.95rem !important;
  opacity: 1 !important;
  color: #b8dcff !important;
  background: linear-gradient(145deg, rgba(13, 71, 152, 0.45) 0%, rgba(4, 14, 34, 0.75) 100%);
  border: 1px solid rgba(122, 166, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.page-home .rank-preview-col--guilds .rank-col-title i {
  color: #d4e4ff !important;
  border-color: rgba(158, 210, 255, 0.28);
}

body.page-home .rank-table-head {
  padding: 12px clamp(16px, 2.5vw, 20px) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.16em !important;
  color: rgba(158, 210, 255, 0.72) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-bottom: 1px solid rgba(13, 71, 152, 0.32) !important;
}

body.page-home .rank-item {
  border-bottom-color: rgba(13, 71, 152, 0.14) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

body.page-home .rank-item:hover {
  background: rgba(13, 71, 152, 0.12) !important;
}

body.page-home .rank-item--char:has(.rank-pos.pos-1),
body.page-home .rank-item--guild:has(.rank-pos.pos-1) {
  background: linear-gradient(90deg, rgba(240, 200, 90, 0.1) 0%, transparent 55%) !important;
}

body.page-home .rank-item--char:has(.rank-pos.pos-2),
body.page-home .rank-item--guild:has(.rank-pos.pos-2) {
  background: linear-gradient(90deg, rgba(192, 210, 228, 0.08) 0%, transparent 55%) !important;
}

body.page-home .rank-item--char:has(.rank-pos.pos-3),
body.page-home .rank-item--guild:has(.rank-pos.pos-3) {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, transparent 55%) !important;
}

body.page-home .rank-item--char,
body.page-home .rank-item--guild {
  padding: 12px clamp(16px, 2.5vw, 20px) !important;
  min-height: 56px !important;
}

body.page-home .rank-pos {
  font-size: 1rem !important;
  font-weight: 900 !important;
}

body.page-home .rank-pos.pos-1 {
  color: #ffd86a !important;
  filter: drop-shadow(0 0 8px rgba(255, 216, 106, 0.45));
}

body.page-home .rank-pos.pos-2 {
  color: #d4e4f8 !important;
  filter: drop-shadow(0 0 6px rgba(192, 210, 228, 0.35));
}

body.page-home .rank-pos.pos-3 {
  color: #e8a86a !important;
  filter: drop-shadow(0 0 6px rgba(232, 168, 106, 0.35));
}

body.page-home .rank-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(122, 166, 255, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

body.page-home .rank-item--char .rank-name,
body.page-home .rank-item--guild .rank-name {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #f2f7ff !important;
}

body.page-home .rank-guild-master,
body.page-home .rank-guild-sep {
  color: rgba(168, 200, 240, 0.55) !important;
}

body.page-home .hof-pill {
  min-height: 30px;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(13, 71, 152, 0.35) !important;
  color: #c8e4ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(122, 166, 255, 0.28) !important;
}

body.page-home .hof-pill--gr {
  background: linear-gradient(135deg, rgba(240, 200, 90, 0.22) 0%, rgba(13, 71, 152, 0.2) 100%) !important;
  color: #ffe9a8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(240, 200, 90, 0.35) !important;
}

body.page-home .hof-pill--total {
  background: rgba(0, 0, 0, 0.28) !important;
  color: #e8f2ff !important;
  box-shadow: inset 0 0 0 1px rgba(13, 71, 152, 0.28) !important;
}

body.page-home .hof-pill--total .hof-pill__v {
  color: #ffffff !important;
}

body.page-home .hof-pill__l {
  font-size: 0.56rem !important;
  letter-spacing: 0.12em !important;
  opacity: 0.9 !important;
}

body.page-home .rank-score,
body.page-home .rank-guild-score {
  color: #8ecfff !important;
  font-weight: 800 !important;
}

body.page-home .rank-skeleton {
  margin: 8px clamp(16px, 2.5vw, 20px) !important;
  border-radius: 12px !important;
  height: 48px !important;
  background: linear-gradient(
    90deg,
    rgba(13, 71, 152, 0.08) 25%,
    rgba(42, 127, 212, 0.12) 50%,
    rgba(13, 71, 152, 0.08) 75%
  ) !important;
}

body.page-home .ranking-preview-footer .hof-view-all-btn {
  min-height: 48px;
  padding: 12px 28px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  border-radius: 14px !important;
  border-color: rgba(122, 166, 255, 0.4) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #e8f2ff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

body.page-home .ranking-preview-footer .hof-view-all-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 210, 255, 0.55) !important;
  background: rgba(13, 71, 152, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 36px rgba(13, 71, 152, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  body.page-home .rank-table-head--char,
  body.page-home .rank-table-head--guild {
    grid-template-columns: 28px 36px minmax(0, 1fr) minmax(120px, 38vw) !important;
  }

  body.page-home .rank-item--char,
  body.page-home .rank-item--guild {
    grid-template-columns: 28px 36px minmax(0, 1fr) minmax(120px, 38vw) !important;
  }
}

body.page-home .event-winners-slider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(14px, 4vw, 28px);
  row-gap: 20px;
  width: min(680px, 100%);
  margin: 0 auto;
}

body.page-home .event-winners-slider__viewport {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  justify-self: center;
  border-radius: 18px;
  isolation: isolate;
}

body.page-home #event-winners-grid.event-winners-slider__track,
body.page-home .event-winners-slider__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-home .event-winners-slider__slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body.page-home .event-winners-slider__slide .event-win-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 18px !important;
  border-color: rgba(122, 166, 255, 0.22) !important;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 40px rgba(13, 71, 152, 0.12) !important;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

body.page-home .event-winners-slider__slide.is-active .event-win-card,
body.page-home .event-winners-slider__track .event-win-card.is-active {
  border-color: rgba(158, 210, 255, 0.38) !important;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(158, 210, 255, 0.08) inset,
    0 0 48px rgba(42, 127, 212, 0.18) !important;
}

body.page-home .event-winners-slider__slide .event-win-card:hover {
  transform: none !important;
}

body.page-home .event-winners-slider__nav {
  grid-row: 1;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(158, 210, 255, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(158, 210, 255, 0.18) 0%, transparent 55%),
    linear-gradient(165deg, rgba(13, 71, 152, 0.55) 0%, rgba(3, 10, 26, 0.92) 100%);
  color: #f0f7ff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(13, 71, 152, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.22s ease;
}

body.page-home .event-winners-slider__nav i {
  filter: drop-shadow(0 0 6px rgba(158, 210, 255, 0.45));
}

body.page-home .event-winners-slider__nav--prev {
  grid-column: 1;
}

body.page-home .event-winners-slider__nav--next {
  grid-column: 3;
}

body.page-home .event-winners-slider__nav:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(190, 228, 255, 0.72);
  background:
    radial-gradient(circle at 30% 25%, rgba(190, 228, 255, 0.28) 0%, transparent 55%),
    linear-gradient(165deg, rgba(42, 127, 212, 0.55) 0%, rgba(13, 71, 152, 0.65) 100%);
  box-shadow:
    0 16px 40px rgba(13, 71, 152, 0.45),
    0 0 32px rgba(42, 127, 212, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.page-home .event-winners-slider__nav:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

body.page-home .event-winners-slider__nav:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  pointer-events: none;
}

body.page-home .event-winners-slider__dots {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
}

body.page-home .event-winners-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(122, 166, 255, 0.28);
  cursor: pointer;
  transition:
    width 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

body.page-home .event-winners-slider__dot:hover {
  background: rgba(158, 210, 255, 0.5);
}

body.page-home .event-winners-slider__dot.is-active {
  width: 28px;
  background: linear-gradient(90deg, #0d4798, #2a7fd4);
  box-shadow: 0 0 14px rgba(42, 127, 212, 0.45);
}

body.page-home .event-winners-slider--single .event-winners-slider__nav {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 520px) {
  body.page-home .event-winners-slider {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    width: 100%;
    row-gap: 14px;
  }

  body.page-home .event-winners-slider__viewport {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.page-home .event-winners-slider__nav--prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    margin-right: 10px;
  }

  body.page-home .event-winners-slider__nav--next {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-left: 10px;
  }

  body.page-home .event-winners-slider__dots {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  body.page-home .event-winners-slider__nav {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .event-winners-slider__track {
    transition: none;
  }
}

body.page-db-shell .db-sidebar,
body.page-dashboard .db-sidebar {
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image: var(--card-surface) !important;
  border-color: var(--card-border, rgba(13, 71, 152, 0.22)) !important;
}

body.page-dashboard .db-balance-card,
body.page-db-shell.page-shop .db-balance-card {
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image: var(--card-surface) !important;
  border-color: var(--card-border) !important;
}

body.page-dashboard .db-balance-item,
body.page-db-shell .db-balance-item {
  background: rgba(3, 10, 26, 0.75) !important;
}

body.page-dashboard .db-balance-item:hover,
body.page-db-shell .db-balance-item:hover {
  background: rgba(13, 71, 152, 0.12) !important;
}

body.page-dashboard .db-card,
body.page-dashboard .db-stat-card,
body.page-dashboard .db-user-card,
body.page-db-shell .db-user-card {
  background-color: var(--surface-aurora-base, #030a14) !important;
  background-image: var(--card-surface) !important;
  border-color: var(--card-border) !important;
}

body.page-db-shell .db-nav-item.active {
  color: #f5f8ff !important;
  background: var(--btn-primary-bg) !important;
  background-image: var(--btn-primary-bg) !important;
  border-color: rgba(122, 166, 255, 0.4) !important;
  box-shadow: var(--btn-primary-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.page-dashboard .db-section-title span,
body.page-dashboard .db-hero-title .accent,
body.page-dashboard .db-section-sub .accent {
  color: #8ecfff !important;
}

body.page-dashboard .db-balance-val,
body.page-dashboard .db-stat-value {
  background: var(--stat-num-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body:not(.page-home) .page-hero::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(42, 127, 212, 0.4) 50%, transparent 100%) top / 100% 1px no-repeat,
    radial-gradient(ellipse 85% 70% at 50% 110%, rgba(13, 71, 152, 0.22) 0%, transparent 62%) !important;
}

body:not(.page-home) .page-hero::after {
  content: '' !important;
  position: absolute;
  left: 50%;
  right: auto;
  top: 52%;
  bottom: auto;
  width: min(520px, 88vw);
  height: min(380px, 62vh);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background: url('/assets/icon/cioara.png') center / contain no-repeat !important;
  opacity: 0.38 !important;
  filter:
    drop-shadow(0 0 48px rgba(13, 71, 152, 0.35))
    drop-shadow(0 24px 56px rgba(0, 0, 0, 0.5))
    saturate(1.08);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 48%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 52% at 50% 48%, #000 0%, transparent 72%);
}

body:not(.page-home) .page-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: min(720px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
  padding-right: clamp(20px, 4vw, 32px);
}

body:not(.page-home) .page-hero .badge {
  margin-bottom: 16px;
  margin-inline: auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(122, 166, 255, 0.32);
  background: rgba(13, 71, 152, 0.22);
  color: #b8d4ff;
  box-shadow: 0 0 24px rgba(13, 71, 152, 0.15);
}

body:not(.page-home) .page-hero-title,
body:not(.page-home) .page-hero .page-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: 0 auto 12px;
  max-width: 100%;
  width: 100%;
  color: #f0f7ff;
  text-align: center;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

body:not(.page-home) .page-hero-title span {
  color: #8ecfff !important;
  text-shadow: 0 0 32px rgba(42, 127, 212, 0.35);
}

body:not(.page-home) .page-hero-sub,
body:not(.page-home) .page-hero .page-subtitle {
  margin: 0 auto;
  max-width: min(36rem, 100%);
  font-size: clamp(0.9rem, 1.8vw, 1.02rem);
  line-height: 1.65;
  color: rgba(186, 214, 255, 0.78);
  text-align: center;
}

body:not(.page-home) .page-hero--compact {
  min-height: min(200px, 32vh) !important;
  padding: clamp(36px, 5vw, 52px) 0 clamp(28px, 4vw, 40px) !important;
}

body:not(.page-home) .page-hero--compact::after {
  width: min(400px, 82vw);
  height: min(280px, 48vh);
  opacity: 0.32 !important;
}

body:not(.page-home) .page-hero--compact .container {
  padding-right: clamp(20px, 4vw, 32px);
}

body.page-downloads .page-hero::after {
  background: url('/assets/icon/cioara.png') center / contain no-repeat !important;
}

body.page-guide .page-hero .container {
  padding-right: clamp(20px, 4vw, 32px);
  align-items: center;
  text-align: center;
}

body.page-guide .page-hero-sub {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body.page-ranking .page-hero-sub {
  text-align: center;
}

@media (max-width: 900px) {
  body:not(.page-home) .page-hero::after {
    width: min(360px, 92vw);
    height: min(260px, 38vh);
    opacity: 0.28 !important;
  }

  body:not(.page-home) .page-hero-title {
    font-size: clamp(1.65rem, 6vw, 2.35rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.page-home) .page-hero::after {
    animation: pageHeroArtFloat 8s ease-in-out infinite alternate;
  }
}

@keyframes pageHeroArtFloat {
  from {
    transform: translate(-50%, calc(-50% - 8px));
  }
  to {
    transform: translate(-50%, calc(-50% + 8px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.page-home) .page-hero::after {
    animation: none;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

video,
canvas,
iframe,
embed {
  max-width: 100%;
}

pre,
code {
  overflow-x: auto;
  max-width: 100%;
  word-break: break-word;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll, scroll !important;
  }

  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  #main-footer {
    padding-top: 48px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 12px);
  }

  .page-hero {
    padding: 42px 0 40px;
    min-height: min(20rem, 48vh);
  }

  .terms-content-panel {
    padding: 22px 18px !important;
  }

  .terms-layout {
    padding-top: 28px !important;
    padding-bottom: 52px !important;
    gap: 24px !important;
  }

  body.page-ranking .ranking-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-inline: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.page-ranking .page-hero-title {
    font-size: clamp(1.5rem, 7vw, 2.4rem);
  }

  body.page-ranking .page-hero-sub {
    font-size: 0.92rem;
    padding-inline: 4px;
  }

  body.page-guide .page-hero-title {
    font-size: clamp(1.5rem, 7vw, 2.4rem);
  }

  body.page-guide .page-hero-sub {
    font-size: 0.92rem;
    padding-inline: 4px;
  }

  body.page-guide .page-hero {
    padding: 36px 0 28px;
  }

  body.page-guide .guide-layout {
    min-height: clamp(280px, calc(100vh - var(--nav-h) - 20rem - 12rem), 520px);
  }

  
  #header-cta {
    display: none !important;
  }

  #main-header .header-dd-panel,
  #main-header .dd-panel--header {
    z-index: 10050;
  }
}

@supports (padding: max(0px)) {
  #mobile-menu .mobile-menu-inner {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
  }

  #main-header .header-inner.header-container.container {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 480px) {
  .modal-content {
    margin-left: max(12px, env(safe-area-inset-left, 0px));
    margin-right: max(12px, env(safe-area-inset-right, 0px));
    padding: 26px 18px 22px;
  }

  .donation-card {
    padding: 32px 18px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    margin-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    max-width: min(520px, 100%) !important;
    box-sizing: border-box;
  }

  body.page-dashboard .db-section-title {
    font-size: 1.35rem;
  }

  body.page-dashboard .db-content {
    padding: 18px 14px 40px;
  }

  body.page-dashboard .db-sidebar {
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }
}

@media (max-width: 400px) {
  .theme-globe-btn {
    width: 36px;
    height: 36px;
  }

  .theme-globe-visual {
    width: 28px;
    height: 28px;
  }

  #header-server-dd .header-dd-btn,
  #header-lang-dd .header-dd-btn {
    max-width: min(118px, 30vw);
    padding-inline: 6px 8px;
    font-size: 0.78rem;
  }
}

@media (max-width: 520px) {
  body.page-home .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: min(300px, 100%);
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }

  body.page-home .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  body.page-home .hero-desc {
    font-size: 0.92rem;
    padding-inline: 2px;
  }

  body.page-home .hero-stat {
    padding: 14px 12px;
  }

  body.page-home .stat-num {
    font-size: 1.35rem;
  }

  body.page-home .hero-title {
    font-size: clamp(1.65rem, 9vw, 2.4rem);
  }
}

@media (max-width: 520px) {
  body.page-auth .auth-shell {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 480px) {
  .page-donation-status main {
    padding-top: calc(var(--nav-h, 72px) + 10px) !important;
  }
}

@media (max-width: 480px) {
  body.page-downloads .dl-main-card,
  body.page-downloads .dl-section {
    padding-left: 18px;
    padding-right: 18px;
  }
}

#events-toast-stack {
  position: fixed;
  top: calc(var(--nav-h, 68px) + 12px);
  right: 16px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 24px));
}

.events-toast {
  pointer-events: auto;
  position: relative;
  width: min(320px, calc(100vw - 24px));
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(80, 150, 230, 0.22);
  background: linear-gradient(155deg, rgba(10, 22, 44, 0.97) 0%, rgba(4, 10, 22, 0.98) 100%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #e8f2ff;
  transform: translate3d(110%, 0, 0);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  overflow: hidden;
}

.events-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #6ec4ff, #2a7fd4);
  z-index: 2;
}

.events-toast.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.events-toast .events-toast__inner,
.events-toast .events-toast__content,
.events-toast .events-toast__title,
.events-toast .events-toast__message,
.events-toast .events-toast__eyebrow {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-left: 0;
  margin-right: 0;
}

.events-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 38px 10px 14px;
}

.events-toast__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #a8dcff;
  background: rgba(42, 100, 180, 0.2);
  border: 1px solid rgba(100, 170, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.events-toast__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
}

.events-toast__eyebrow {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7ec8ff;
  line-height: 1.2;
}

.events-toast__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #ffffff;
  overflow-wrap: break-word;
  word-break: normal;
}

.events-toast__message {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(175, 205, 240, 0.88);
}

.events-toast__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(200, 220, 255, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.events-toast__close:hover {
  background: rgba(80, 150, 230, 0.22);
  color: #fff;
}

.events-toast__bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.events-toast__bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2563a8, #5eb8ff);
  transform-origin: left center;
  animation: eventsToastShrink 8s linear forwards;
}

.events-toast--warn {
  border-color: rgba(251, 191, 36, 0.28);
}

.events-toast--warn::before {
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
}

.events-toast--warn .events-toast__icon {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

.events-toast--warn .events-toast__eyebrow {
  color: #fbbf24;
}

.events-toast--warn .events-toast__bar-fill {
  background: linear-gradient(90deg, #b45309, #fbbf24);
}

.events-toast--live,
.events-toast--success {
  border-color: rgba(74, 222, 128, 0.28);
}

.events-toast--live::before,
.events-toast--success::before {
  background: linear-gradient(180deg, #6ee7a8, #22c55e);
}

.events-toast--live .events-toast__icon,
.events-toast--success .events-toast__icon {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(100, 220, 150, 0.35) !important;
}

.events-toast--live .events-toast__eyebrow,
.events-toast--success .events-toast__eyebrow {
  color: #6ee7a7;
}

.events-toast--live .events-toast__bar-fill,
.events-toast--success .events-toast__bar-fill {
  background: linear-gradient(90deg, #15803d, #4ade80);
}

.events-toast--error {
  border-color: rgba(248, 113, 113, 0.3);
}

.events-toast--error::before {
  background: linear-gradient(180deg, #fca5a5, #dc2626);
}

.events-toast--error .events-toast__icon {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
}

.events-toast--error .events-toast__eyebrow {
  color: #f87171;
}

.events-toast--error .events-toast__bar-fill {
  background: linear-gradient(90deg, #991b1b, #f87171);
}

.events-toast--info .events-toast__eyebrow {
  color: #93c5fd;
}

@keyframes eventsToastShrink {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 768px) {
  #events-toast-stack {
    right: 10px;
    left: 10px;
    align-items: stretch;
    max-width: none;
  }

  .events-toast {
    width: 100%;
  }
}

.streaming-widget-container { position: fixed; right: 14px; bottom: 14px; z-index: 99999; display: none; flex-direction: column; gap: 8px; pointer-events: auto; }
.streaming-widget-container.is-live-active { display: flex !important; }
.streaming-widget-container.expanded .streaming-list-wrapper { display: block; }
.streaming-widget-container .streaming-list-wrapper { display: none; width: 260px; height: 300px; background: rgba(0,0,0,0.78); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.55); backdrop-filter: blur(10px); }
.streaming-widget-container .streaming-avatars-bar { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.55); box-shadow: 0 20px 60px rgba(0,0,0,0.55); backdrop-filter: blur(10px); }
.streaming-widget-container.expanded .streaming-avatars-bar { background: rgba(94, 184, 255,0.12); border-color: rgba(94, 184, 255,0.35); }
.streaming-avatar-btn { position: relative; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); padding: 0; overflow: hidden; background: rgba(0,0,0,0.35); cursor: pointer; }
.streaming-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.streaming-avatar-btn:hover { border-color: rgba(94, 184, 255,0.55); box-shadow: 0 10px 22px rgba(0,0,0,0.55); transform: translateY(-1px); }
.streaming-avatar-live { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 999px; background: #ef4444; border: 2px solid rgba(0,0,0,0.8); box-shadow: 0 0 0 2px rgba(239,68,68,0.15), 0 0 16px rgba(239,68,68,0.45); }
.streaming-list-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.10); font-weight: 900; font-size: 0.92rem; }
.stream-back-btn { border: 0; background: transparent; color: #fff; cursor: pointer; width: 34px; height: 34px; border-radius: 999px; }
.stream-back-btn:hover { background: rgba(255,255,255,0.08); }
.stream-close-btn { border: 0; background: transparent; color: rgba(255,255,255,0.92); cursor: pointer; width: 34px; height: 34px; border-radius: 999px; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.stream-close-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.streaming-list { padding: 8px; overflow: auto; height: calc(300px - 40px); }
.streaming-player-view { display: none; height: calc(300px - 40px); flex-direction: column; }
.streaming-player-embed { flex: 1; min-height: 0; }
.streaming-list-wrapper.is-playing .streaming-list { display: none; }
.streaming-list-wrapper.is-playing .streaming-player-view { display: block; }

.streaming-promo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.10); background: rgba(94, 184, 255,0.08); }
.streaming-promo-title { font-weight: 900; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(94, 184, 255,0.95); }
.streaming-promo-code { border: 1px solid rgba(94, 184, 255,0.55); background: rgba(94, 184, 255,0.14); color: rgba(94, 184, 255,0.98); padding: 6px 10px; border-radius: 999px; font-weight: 900; letter-spacing: 0.06em; cursor: pointer; }
.streaming-promo-code:hover { background: rgba(94, 184, 255,0.20); border-color: rgba(94, 184, 255,0.85); }
.stream-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.stream-item:hover { background: rgba(94, 184, 255,0.10); }
.stream-avatar img { width: 34px; height: 34px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.10); }
.stream-info-name { font-weight: 900; }
.stream-info-title { font-size: 0.72rem; opacity: 0.78; margin-top: 2px; line-height: 1.2; }
.stream-live-details { font-weight: 900; opacity: 0.85; font-size: 0.88rem; }
.streaming-toggle-btn { display: none; }

.discount-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(94, 184, 255,0.55);
  background: rgba(94, 184, 255,0.12);
  color: rgba(94, 184, 255,0.98);
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  margin-left: 2px;
}

.discount-code:hover {
  background: rgba(94, 184, 255,0.18);
  border-color: rgba(94, 184, 255,0.80);
}

@media (max-width: 520px) {
  .streaming-widget-container { right: 10px; bottom: 10px; }
  .streaming-widget-container .streaming-list-wrapper { width: 240px; height: 280px; }
  .streaming-list { height: calc(280px - 40px); }
  .streaming-player-view { height: calc(280px - 40px); }
}

/* Responsive header: compact bar + drawer */
@media (max-width: 1024px) {
  :root {
    --nav-h: 68px;
  }

  #main-header {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
  }

  #main-header .header-inner.header-container.container {
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px)) !important;
    gap: 10px !important;
  }

  #main-header .header-logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 112px);
    margin-right: 0 !important;
  }

  #main-header a.header-logo,
  #main-header a.header-logo.theme-brand-logo {
    width: min(220px, 58vw) !important;
    height: clamp(48px, 14vw, 62px) !important;
    min-width: 150px !important;
    max-width: calc(100vw - 120px) !important;
    background-image: var(--theme-brand-logo-image);
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4)) !important;
  }

  #main-header a.header-logo img,
  #main-header a.header-logo.logo img {
    display: block;
    width: auto;
    height: clamp(48px, 14vw, 62px);
    max-width: min(220px, 58vw);
    object-fit: contain;
    object-position: left center;
  }

  #main-header .header-right {
    flex: 0 0 auto;
    gap: 8px;
    flex-shrink: 0;
  }

  #main-header .desktop-nav {
    display: none !important;
  }

  #main-header #header-auth-controls,
  #main-header .header-auth {
    display: none !important;
  }

  body.is-logged-in #main-header .header-cta {
    display: none !important;
  }

  #main-header .hamburger,
  #main-header #mobile-menu-toggle {
    display: flex !important;
    gap: 5px;
    order: 10;
  }

  #header-server-dd .header-dd-btn,
  #header-lang-dd .header-dd-btn {
    min-height: 40px;
    min-width: 40px;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
  }

  #header-server-dd .dd-label {
    max-width: min(4.5rem, 18vw);
  }

  #header-lang-dd .dd-label {
    max-width: min(2.75rem, 14vw);
  }

  #mobile-menu.mobile-menu-overlay.open {
    z-index: 1100;
  }

  #mobile-menu .mobile-menu-inner {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(320px, 100vw) !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding:
      calc(var(--nav-h, 68px) + max(8px, env(safe-area-inset-top, 0px)))
      max(16px, env(safe-area-inset-right, 0px))
      max(24px, env(safe-area-inset-bottom, 0px) + 16px)
      max(16px, env(safe-area-inset-left, 0px)) !important;
    border-left: 1px solid rgba(94, 184, 255, 0.18) !important;
    border-radius: 18px 0 0 18px !important;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55) !important;
    gap: 6px;
  }

  #mobile-menu .mm-head {
    flex-shrink: 0;
    padding: 4px 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(94, 184, 255, 0.12);
  }

  #mobile-menu .mm-brand {
    display: block;
    width: min(200px, 72vw);
    height: 44px;
    background-image: var(--theme-brand-logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
    text-decoration: none;
    flex: 1;
    min-width: 0;
  }

  #mobile-menu .mm-title {
    display: none;
  }

  #mobile-menu .mm-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-menu .mm-link {
    padding: 13px 14px;
    font-size: 0.88rem;
    border-radius: 12px !important;
  }

  #mobile-menu .mm-lang {
    flex-shrink: 0;
    margin-top: 4px;
  }

  #mobile-menu .mm-lang-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #mobile-menu .mm-lang-btn {
    width: 100%;
    justify-content: flex-start;
    font-size: 0.78rem;
    padding: 9px 10px;
  }

  #mobile-menu .mm-auth-stack {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
  }

  #mobile-menu .mm-auth-stack .btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  #mobile-menu .mm-sep {
    display: none;
  }
}

@media (max-width: 480px) {
  #header-server-dd.header-dd {
    display: none;
  }

  #main-header .header-logo {
    max-width: calc(100% - 100px);
  }

  #main-header a.header-logo,
  #main-header a.header-logo.theme-brand-logo {
    width: min(200px, 62vw) !important;
    min-width: 132px !important;
    height: clamp(44px, 15vw, 56px) !important;
  }
}

@media (min-width: 1025px) {
  #main-header .hamburger,
  #main-header #mobile-menu-toggle {
    display: none !important;
  }
}

body.mobile-menu-open {
  overflow: hidden;
  touch-action: none;
}

body.mobile-menu-open #main-header {
  z-index: 1101;
}

/* ── Footer: mobile & tablet ── */
@media (max-width: 1024px) {
  #main-footer {
    padding: 48px 0 max(28px, env(safe-area-inset-bottom, 0px) + 16px);
  }

  #main-footer .container {
    padding-inline: max(18px, env(safe-area-inset-left, 0px))
      max(18px, env(safe-area-inset-right, 0px));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding-bottom: 28px;
    border-bottom-color: rgba(42, 127, 212, 0.14);
  }

  .footer-brand {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 4px 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(42, 127, 212, 0.1);
  }

  .footer-brand .footer-logo,
  .footer-brand a.footer-logo.theme-brand-logo {
    margin-inline: auto;
    margin-bottom: 16px;
    background-position: center center !important;
    width: min(240px, 78vw) !important;
    height: clamp(52px, 14vw, 68px) !important;
  }

  .footer-tagline {
    max-width: min(360px, 100%);
    margin-inline: auto;
    margin-bottom: 18px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(200, 220, 255, 0.62);
  }

  .footer-socials {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-socials .social-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1rem;
    border-color: rgba(42, 127, 212, 0.22);
    background: rgba(6, 18, 44, 0.65);
  }

  .footer-col {
    padding: 16px 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(42, 127, 212, 0.14);
    background: linear-gradient(
      165deg,
      rgba(6, 18, 44, 0.55) 0%,
      rgba(3, 10, 26, 0.35) 100%
    );
    min-width: 0;
  }

  .footer-col--legal {
    grid-column: 1 / -1;
    padding: 18px 16px 16px;
    border-color: rgba(42, 127, 212, 0.2);
    background: linear-gradient(
      165deg,
      rgba(8, 24, 52, 0.5) 0%,
      rgba(3, 10, 26, 0.4) 100%
    );
  }

  .footer-heading {
    margin-bottom: 12px;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: rgba(158, 210, 255, 0.95);
  }

  .footer-col ul {
    gap: 4px;
  }

  .footer-col ul a {
    display: block;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .footer-col ul a:hover,
  .footer-col ul a:focus-visible {
    color: var(--text-primary);
    background: rgba(13, 71, 152, 0.22);
  }

  .footer-col--legal ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
  }

  .footer-col--legal ul li:last-child {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(42, 127, 212, 0.12);
  }

  .footer-col--legal ul a.footer-terms-all {
    justify-content: center;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(13, 71, 152, 0.2);
    border: 1px solid rgba(94, 184, 255, 0.28);
  }

  /* Legal links duplicate the LEGAL column — hide on small screens */
  .footer-legal-bar {
    display: none !important;
  }

  .footer-bottom {
    padding-top: 22px;
    gap: 8px;
  }

  .footer-copy {
    font-size: 0.78rem;
    line-height: 1.5;
    padding-inline: 8px;
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-col--legal ul {
    grid-template-columns: 1fr;
  }

  .footer-col ul a {
    padding: 11px 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 380px) {
  .footer-brand a.footer-logo.theme-brand-logo {
    width: min(200px, 88vw) !important;
    height: 50px !important;
  }
}