:root {
  --newone-bg: #171022;
  --newone-panel: rgba(28, 18, 42, 0.78);
  --newone-panel-dark: rgba(12, 8, 20, 0.82);
  --newone-text: #f7f1ff;
  --newone-muted: #b9aeca;
  --newone-primary: #b65cff;
  --newone-primary-2: #7d3cff;
  --newone-gold: #f6d778;
  --newone-border: rgba(186, 99, 255, 0.38);
  --newone-shadow: 0 20px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background-color: #10091a !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.35 0.22 295 / 30%), transparent),
    radial-gradient(ellipse at 100% 100%, oklch(0.3 0.2 280 / 25%), transparent 60%) !important;
  color: var(--newone-text);
  font-family: "Open Sans", "Rajdhani", Arial, sans-serif;
}

body::before {
  display: none !important;
  content: none !important;
}

.wrapper {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.wrapper::before {
  display: none !important;
  content: none !important;
}

header {
  min-height: 640px;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  overflow: visible;
  background: transparent !important;
}

header::before {
  display: none !important;
}

header > .topPanel,
header > .sparks,
header > .logo,
header > .onlinetop,
header > .download {
  display: none !important;
}

.newone-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  transform: none;
  pointer-events: none;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.35 0.22 295 / 30%), transparent),
    radial-gradient(ellipse at 100% 100%, oklch(0.3 0.2 280 / 25%), transparent 60%);
}

.newone-bg img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.03);
  animation: newoneBgDrift 24s ease-in-out infinite alternate;
}

.newone-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    oklch(0.07 0.04 290 / 68%),
    oklch(0.1 0.045 290 / 92%) 62%,
    oklch(0.075 0.035 290)
  );
}

.newone-fantasy-towers {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.46;
  background:
    linear-gradient(180deg, transparent 0 38%, oklch(0.04 0.025 290 / 72%) 78%),
    linear-gradient(88deg, transparent 0 11%, oklch(0.035 0.025 290 / 72%) 11% 12.5%, transparent 12.5% 33%, oklch(0.035 0.025 290 / 68%) 33% 35%, transparent 35% 61%, oklch(0.035 0.025 290 / 70%) 61% 62.5%, transparent 62.5%),
    conic-gradient(from 45deg at 18% 39%, transparent 0 16%, oklch(0.035 0.025 290 / 78%) 16% 35%, transparent 35%),
    conic-gradient(from 45deg at 72% 34%, transparent 0 16%, oklch(0.035 0.025 290 / 74%) 16% 35%, transparent 35%);
  filter: blur(0.2px);
}

.newone-purple-fog {
  position: absolute;
  inset: -10%;
  z-index: 2;
  opacity: 0.75;
  background:
    radial-gradient(ellipse 38% 18% at 24% 58%, oklch(0.43 0.21 295 / 22%), transparent 70%),
    radial-gradient(ellipse 44% 22% at 68% 48%, oklch(0.47 0.24 295 / 18%), transparent 72%),
    radial-gradient(ellipse 80% 16% at 50% 100%, oklch(0.36 0.18 292 / 24%), transparent 70%);
  animation: newoneFogDrift 18s ease-in-out infinite alternate;
}

.newone-particle {
  position: absolute;
  z-index: 4;
  bottom: -30px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--newone-primary);
  box-shadow: 0 0 12px var(--newone-primary), 0 0 24px var(--newone-primary);
  animation: newoneParticle 15s linear infinite;
}

.newone-particle-1 { left: 8%; animation-delay: 0s; }
.newone-particle-2 { left: 24%; animation-delay: 3s; animation-duration: 19s; }
.newone-particle-3 { left: 42%; animation-delay: 6s; animation-duration: 13s; }
.newone-particle-4 { left: 58%; animation-delay: 1s; animation-duration: 17s; }
.newone-particle-5 { left: 76%; animation-delay: 4s; animation-duration: 21s; }
.newone-particle-6 { left: 91%; animation-delay: 8s; animation-duration: 16s; }
.newone-particle-7 { left: 14%; animation-delay: 10s; animation-duration: 18s; }
.newone-particle-8 { left: 31%; animation-delay: 12s; animation-duration: 22s; }
.newone-particle-9 { left: 49%; animation-delay: 7s; animation-duration: 20s; }
.newone-particle-10 { left: 67%; animation-delay: 11s; animation-duration: 14s; }
.newone-particle-11 { left: 84%; animation-delay: 2s; animation-duration: 24s; }
.newone-particle-12 { left: 96%; animation-delay: 5s; animation-duration: 18s; }

@keyframes newoneParticle {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: 0.85; }
  88% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(44px, -110vh, 0); }
}

@keyframes newoneFogDrift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}

@keyframes newoneBgDrift {
  from { transform: scale(1.03) translate3d(-0.8%, 0, 0); }
  to { transform: scale(1.06) translate3d(0.8%, -0.5%, 0); }
}

.newone-header {
  position: relative;
  z-index: 6;
  width: min(1440px, calc(100% - 48px));
  height: 80px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(189, 117, 255, 0.22);
  background: rgba(16, 10, 26, 0.42);
  backdrop-filter: blur(16px);
}

.newone-brand,
.newone-header-actions,
.newone-nav {
  display: flex;
  align-items: center;
}

.newone-brand {
  gap: 12px;
  min-width: 238px;
}

.newone-brand-logo {
  display: block;
  width: auto;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.45));
  transition: transform 0.3s ease;
}

.newone-brand:hover .newone-brand-logo {
  transform: scale(1.03);
}

.newone-brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--newone-border);
  background: linear-gradient(180deg, rgba(54, 30, 84, 0.84), rgba(15, 8, 25, 0.9));
  color: var(--newone-primary);
  font: 800 18px "Cinzel", serif;
  box-shadow: 0 0 32px rgba(182, 92, 255, 0.35);
}

.newone-brand-copy > span {
  display: block;
  color: var(--newone-text);
  font: 800 18px/1 "Cinzel", serif;
  letter-spacing: 0.18em;
  text-shadow: 0 0 24px rgba(182, 92, 255, 0.72);
}

.newone-brand-copy > span span {
  color: var(--newone-primary);
}

.newone-brand-copy small {
  display: block;
  margin-top: 5px;
  color: var(--newone-muted);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.newone-nav {
  justify-content: center;
  gap: 4px;
}

.newone-nav a {
  position: relative;
  padding: 12px 13px;
  color: var(--newone-muted);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.newone-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--newone-primary), transparent);
  transition: transform 0.25s ease;
}

.newone-nav a:hover {
  color: var(--newone-text);
}

.newone-nav a:hover::after {
  transform: scaleX(1);
}

.newone-header-actions {
  gap: 14px;
  justify-content: flex-end;
  min-width: 260px;
}

.newone-languages {
  display: flex;
  gap: 7px;
}

.newone-languages a {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid transparent;
  opacity: 0.66;
}

.newone-languages a.active,
.newone-languages a:hover {
  opacity: 1;
  border-color: var(--newone-primary);
  box-shadow: 0 0 14px rgba(182, 92, 255, 0.38);
}

.newone-languages img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.newone-play,
.newone-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, var(--newone-primary-2), var(--newone-primary));
  color: #fff !important;
  font: 800 12px/1 "Cinzel", serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 0 38px rgba(182, 92, 255, 0.44);
  overflow: hidden;
}

.newone-play {
  padding: 0 22px;
}

.newone-secondary {
  padding: 0 24px;
}

.newone-secondary--ghost {
  background: rgba(182, 92, 255, 0.11);
  border-color: rgba(182, 92, 255, 0.48);
  box-shadow: inset 0 0 22px rgba(182, 92, 255, 0.17);
}

.newone-play:hover,
.newone-secondary:hover {
  filter: brightness(1.14);
}

.newone-hero {
  position: relative;
  z-index: 5;
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 1.15fr) minmax(420px, 1.35fr) minmax(280px, 0.95fr);
  gap: 34px;
  align-items: center;
  padding: 28px 0 36px;
  overflow: visible;
}

.newone-character {
  position: absolute;
  left: 32px;
  top: 61%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
  overflow: visible;
  z-index: 1;
  transform: translateY(-50%);
}

.newone-character img,
.newone-character video {
  width: 448px;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 28px 55px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, rgba(0, 0, 0, 0.55) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 86%, rgba(0, 0, 0, 0.55) 94%, transparent 100%);
  pointer-events: none;
  transform: none;
}

.newone-hero-center {
  position: relative;
  text-align: center;
  padding-top: 20px;
  transform: translateX(40px);
}

.newone-hero-center::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(720px, 100%);
  height: 520px;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.52;
  background:
    linear-gradient(180deg, transparent 0 20%, rgba(8, 5, 16, 0.44) 76%, transparent),
    linear-gradient(90deg, transparent 0 12%, rgba(8, 5, 16, 0.62) 12% 14%, transparent 14% 31%, rgba(8, 5, 16, 0.58) 31% 33%, transparent 33% 67%, rgba(8, 5, 16, 0.58) 67% 69%, transparent 69% 86%, rgba(8, 5, 16, 0.62) 86% 88%, transparent 88%);
  pointer-events: none;
}

.newone-hero-center::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(760px, 110%);
  height: 230px;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 48% 22% at 50% 58%, rgba(246, 215, 120, 0.22), transparent 72%),
    radial-gradient(ellipse 78% 26% at 50% 62%, rgba(182, 92, 255, 0.32), transparent 76%),
    linear-gradient(90deg, transparent, rgba(182, 92, 255, 0.28), transparent);
  filter: blur(10px);
  pointer-events: none;
}

.newone-season {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--newone-primary);
  font: 700 12px/1 "Cinzel", serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.newone-season span {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--newone-primary));
}

.newone-season span:last-child {
  background: linear-gradient(90deg, var(--newone-primary), transparent);
}

.newone-hero-logo {
  display: block;
  width: min(620px, 92%);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 22px rgba(182, 92, 255, 0.6))
    drop-shadow(0 0 48px rgba(126, 51, 255, 0.34));
}

.newone-hero h1 {
  margin: 13px 0 0;
  color: transparent;
  font: 900 clamp(44px, 5.4vw, 76px)/1 "Cinzel", serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 32px rgba(182, 92, 255, 0.56), 0 0 60px rgba(126, 51, 255, 0.36);
}

.newone-hero h1 span {
  background: linear-gradient(180deg, #fff5ba, #d69c37);
  -webkit-background-clip: text;
  background-clip: text;
}

.newone-tagline {
  margin: 12px 0 0;
  color: var(--newone-muted);
  font: 700 16px/1.4 "Cinzel", serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.newone-rotator {
  position: relative;
  min-height: 1.5em;
  width: min(100%, 620px);
  margin-left: auto;
  margin-right: auto;
  color: var(--newone-primary);
  letter-spacing: 0.16em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(182, 92, 255, 0.85), 0 0 34px rgba(182, 92, 255, 0.55);
}

.newone-rotator span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: newoneRotator 12s ease-in-out infinite;
}

.newone-rotator span:nth-child(2) { animation-delay: 3s; }
.newone-rotator span:nth-child(3) { animation-delay: 6s; }
.newone-rotator span:nth-child(4) { animation-delay: 9s; }

@keyframes newoneRotator {
  0%, 18% { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  25%, 43% { opacity: 1; transform: translateY(0); filter: blur(0); }
  50%, 100% { opacity: 0; transform: translateY(-10px); filter: blur(6px); }
}

.newone-copy {
  max-width: 540px;
  margin: 24px auto 0;
  color: rgba(247, 241, 255, 0.78);
  font-size: 14px;
  line-height: 1.8;
}

.newone-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.newone-stats,
.newsBlock,
.weeklyCardsWrap,
.homeEventPanel,
.djw-card,
.blockHome,
.hallOfFameElectric,
.box-panel,
.content,
.panel {
  border: 1px solid var(--newone-border) !important;
  background:
    url("../images/ornate-compact-frame-clean.png") center / 106% 106% no-repeat,
    linear-gradient(180deg, var(--newone-panel), var(--newone-panel-dark)) !important;
  background-blend-mode: screen, normal;
  box-shadow: var(--newone-shadow) !important;
  backdrop-filter: blur(10px);
}

.newone-stats {
  position: relative;
  border-radius: 10px;
  padding: 20px;
}

.newone-stats::before,
.newone-stats::after,
.newsBlock::before,
.weeklyCardsWrap::before,
.homeEventPanel::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border: 1px solid rgba(214, 145, 255, 0.72);
}

.newone-stats::before,
.newsBlock::before,
.weeklyCardsWrap::before,
.homeEventPanel::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.newone-stats::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

.newone-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(186, 99, 255, 0.28);
}

.newone-stats-head strong {
  color: var(--newone-text);
  font: 800 13px/1.3 "Cinzel", serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.newone-stats-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #50e98b;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newone-stats-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50e98b;
  box-shadow: 0 0 12px #50e98b;
}

.newone-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(186, 99, 255, 0.22);
  border-radius: 8px;
  background: rgba(10, 7, 17, 0.5);
}

.newone-stat-row span {
  color: var(--newone-muted);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.newone-stat-row strong {
  color: var(--newone-text);
  font: 800 20px/1 "Cinzel", serif;
}

.newone-stat-row--online {
  border-color: rgba(182, 92, 255, 0.54);
  background: rgba(182, 92, 255, 0.12);
}

.newone-stat-row--online strong {
  color: var(--newone-gold);
  text-shadow: 0 0 18px rgba(246, 215, 120, 0.5);
}

main {
  position: relative;
  z-index: 3;
  margin-top: -82px;
}

.ajax-container {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

.h2-title,
.homeEventPanel-head,
.djw-card-title {
  color: var(--newone-text) !important;
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.h2-title span,
.homeEventPanel-head,
.djw-card-title,
.gold-text {
  color: var(--newone-gold) !important;
  text-shadow: 0 0 24px rgba(182, 92, 255, 0.34);
}

.homeNewsRewards,
.mainHomeBlock,
.sliderGallery {
  gap: 18px;
}

.newsBlock,
.weeklyCardsWrap,
.homeEventPanel,
.djw-card {
  position: relative;
  border-radius: 10px !important;
}

.live-hof-card {
  background:
    url("../images/live-hof-frame-clean.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--newone-panel), var(--newone-panel-dark)) !important;
  background-blend-mode: normal;
  padding: 18px 16px 16px;
}

.live-hof-card::before,
.live-hof-card::after {
  display: none !important;
}

.newsFeed a,
.f-menu a,
footer a {
  color: var(--newone-muted);
}

.newsFeed a:hover,
.f-menu a:hover,
footer a:hover {
  color: var(--newone-text);
}

footer {
  margin-top: 50px;
  border-top: 1px solid rgba(186, 99, 255, 0.25);
  background: rgba(16, 10, 26, 0.62) !important;
  backdrop-filter: blur(16px);
}

footer .wrapper {
  padding-top: 28px;
}

.footerMenu,
.footerInfo {
  color: var(--newone-muted);
}

input,
textarea,
select {
  border-color: rgba(186, 99, 255, 0.36) !important;
  background: rgba(8, 5, 14, 0.78) !important;
  color: var(--newone-text) !important;
}

button,
.button,
.button-custom,
.serverInfoButton {
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--newone-primary-2), var(--newone-primary)) !important;
  box-shadow: 0 0 32px rgba(182, 92, 255, 0.28) !important;
}

@media (max-width: 1180px) {
  header {
    min-height: auto;
  }

  .newone-header {
    height: auto;
    min-height: 76px;
    padding: 14px 0;
    flex-wrap: wrap;
  }

  .newone-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
  }

  .newone-header-actions {
    min-width: auto;
  }

  .newone-hero {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }

  .newone-character {
    min-height: auto;
    order: 2;
  }

  .newone-character img,
  .newone-character video {
    width: min(92vw, 520px);
    transform: none;
  }

  .newone-stats {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .wrapper,
  .ajax-container,
  .newone-header,
  .newone-hero {
    width: min(100% - 28px, 1440px);
  }

  .newone-brand {
    min-width: 0;
  }

  .newone-brand-logo {
    height: 48px;
    max-width: 190px;
  }

  .newone-brand-copy small,
  .newone-languages {
    display: none;
  }

  .newone-header-actions {
    margin-left: auto;
  }

  .newone-play {
    min-height: 40px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .newone-nav {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .newone-nav a {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
  }

  .newone-season {
    letter-spacing: 0.2em;
  }

  .newone-season span {
    width: 24px;
  }

  .newone-tagline {
    font-size: 13px;
    letter-spacing: 0.15em;
  }

  .newone-copy {
    font-size: 13px;
  }

  .newone-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .newone-secondary {
    width: 100%;
  }

  main {
    margin-top: 0;
  }
}

/* =========================================================
   NOXUS SAFE POLISH PATCH - 2026-06-05
   Goals:
   - stop hero character video/image from being clipped by masks/wrappers
   - stop using baked-in placeholder UI assets behind real HTML content
   - keep the purple/gold fantasy look with clean CSS + empty frame assets
   ========================================================= */

header,
.newone-hero,
.newone-character,
.newone-character * {
  overflow: visible !important;
}

.newone-character {
  left: 58px !important;
  top: 57% !important;
  z-index: 1 !important;
  width: 560px !important;
  max-width: none !important;
}

.newone-character img,
.newone-character video {
  width: 500px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  filter:
    drop-shadow(0 26px 52px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 28px rgba(157, 61, 255, 0.26)) !important;
}

.newone-character::before {
  content: "";
  position: absolute;
  inset: 8% -8% 8% -5%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 42%, rgba(157, 61, 255, 0.22), transparent 60%),
    radial-gradient(ellipse at 60% 55%, rgba(246, 215, 120, 0.08), transparent 62%);
  filter: blur(18px);
}

/* Clean panel base: do not use PNGs with baked placeholder rows/boxes behind real content. */
.newone-stats,
.newsBlock,
.weeklyCardsWrap,
.homeEventPanel,
.djw-card,
.blockHome,
.hallOfFameElectric,
.box-panel,
.content,
.panel {
  position: relative;
  overflow: visible !important;
  border: 1px solid rgba(186, 99, 255, 0.38) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 78, 255, 0.13), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(176, 78, 255, 0.10), transparent 26%),
    linear-gradient(180deg, rgba(17, 10, 29, 0.94), rgba(6, 4, 12, 0.96)) !important;
  background-blend-mode: normal !important;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.54),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 32px rgba(119, 40, 220, 0.09) !important;
  backdrop-filter: blur(10px);
}

/* Fantasy corner trims, made with CSS so no fake rows/text are baked in. */
.newsBlock::before,
.weeklyCardsWrap::before,
.homeEventPanel::before,
.djw-card::before,
.blockHome::before,
.box-panel::before,
.content::before,
.panel::before,
.newsBlock::after,
.weeklyCardsWrap::after,
.homeEventPanel::after,
.djw-card::after,
.blockHome::after,
.box-panel::after,
.content::after,
.panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.newsBlock::before,
.weeklyCardsWrap::before,
.homeEventPanel::before,
.djw-card::before,
.blockHome::before,
.box-panel::before,
.content::before,
.panel::before {
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(246, 215, 120, 0.50), rgba(176, 78, 255, 0.56), rgba(246, 215, 120, 0.50), transparent);
  box-shadow: 0 0 16px rgba(176, 78, 255, 0.32);
}

.newsBlock::after,
.weeklyCardsWrap::after,
.homeEventPanel::after,
.djw-card::after,
.blockHome::after,
.box-panel::after,
.content::after,
.panel::after {
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(246, 215, 120, 0.60) !important;
  background: linear-gradient(135deg, rgba(176, 78, 255, 0.92), rgba(44, 14, 80, 0.92));
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 18px rgba(176, 78, 255, 0.58);
}

/* Empty decorative frame image only for the large feature cards, without internal placeholder lines. */
.mainHomeBlock .blockHome,
.homeEventPanel,
.hallOfFameElectric {
  background:
    url("../images/noxus-empty-card-frame.png") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 0%, rgba(176, 78, 255, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(13, 8, 22, 0.96), rgba(5, 3, 10, 0.98)) !important;
  padding: 34px 28px 30px !important;
}

.mainHomeBlock .blockHome > *,
.homeEventPanel > *,
.hallOfFameElectric > * {
  position: relative;
  z-index: 2;
}

.h2-title,
.homeEventPanel-head,
.djw-card-title,
.hofe-title {
  margin-bottom: 18px !important;
  color: #f4e6ff !important;
  text-shadow: 0 0 18px rgba(176, 78, 255, 0.46) !important;
}

/* Keep lists away from decorative bottom trim. */
.serverInfoGrid,
.homeEventPanel-list,
.hofe-grid,
.newsFeed,
.djw-feed {
  padding-bottom: 18px;
}

.serverInfoList li,
.homeEventRow,
.newsLink,
.djw-feed > *,
.hofe-cardWrap {
  border-color: rgba(186, 99, 255, 0.20) !important;
  background: rgba(8, 5, 14, 0.42) !important;
}

.serverInfoButton,
.homeEventPanel .serverInfoButton,
.homeEventPanel a,
.all-button a,
.djw-card a,
.button,
.button-custom {
  position: relative;
  z-index: 3;
}

/* Stats panel: compact and clean, no fake skeleton graphics. */
.newone-stats {
  align-self: start;
  padding: 24px 22px 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(176, 78, 255, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(15, 9, 27, 0.94), rgba(5, 3, 10, 0.98)) !important;
}

.newone-stats::before {
  top: -12px !important;
  left: 50% !important;
  right: auto !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(246, 215, 120, 0.58) !important;
  background: linear-gradient(135deg, rgba(176, 78, 255, 0.95), rgba(54, 16, 95, 0.94)) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  box-shadow: 0 0 20px rgba(176, 78, 255, 0.58) !important;
}

.newone-stats::after {
  display: none !important;
}

.newone-stat-row {
  position: relative;
  z-index: 2;
  min-height: 54px !important;
  padding: 11px 14px !important;
  background: rgba(6, 4, 12, 0.58) !important;
}

/* Keep desktop hero from colliding with lower content. */
main {
  margin-top: -52px !important;
}

header > .topPanel,
header > .sparks,
header > .logo,
header > .onlinetop,
header > .download {
  display: none !important;
}

.newone-hero {
  width: min(1620px, calc(100% - 48px)) !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
  min-height: 620px;
  padding: 8px 24px 12px !important;
}

.newone-character {
  left: 32px !important;
  top: 61% !important;
  z-index: 5 !important;
}

.newone-character img,
.newone-character video {
  width: 448px !important;
}

.newone-hero-center {
  grid-column: 4 / span 5;
  z-index: 8;
  padding-top: 20px !important;
  transform: translateX(40px) !important;
}

.newone-hero-center::before {
  top: 34px !important;
  height: 610px !important;
}

.newone-hero-center::after {
  bottom: 18px !important;
}

.newone-season {
  margin-bottom: 6px;
  font-size: 11px !important;
  letter-spacing: 0.48em !important;
}

.newone-hero h1 {
  margin: 0 !important;
  font-size: clamp(66px, 5.4vw, 92px) !important;
  line-height: 0.9 !important;
  letter-spacing: 0.08em !important;
}

.newone-hero h1 span {
  background: linear-gradient(180deg, #ffe7ad 0%, #e3a75f 55%, #9d63ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.newone-tagline {
  margin-top: 20px !important;
}

.newone-podium {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: min(650px, 100%);
  margin: 42px auto 0;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.48));
}

.newone-podium::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -32px;
  width: 650px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 42% 28% at 50% 48%, rgba(246, 215, 120, 0.2), transparent 72%),
    radial-gradient(ellipse 80% 44% at 50% 58%, rgba(176, 78, 255, 0.28), transparent 74%),
    linear-gradient(90deg, transparent, rgba(176, 78, 255, 0.22), transparent);
  filter: blur(8px);
}

.newone-podium-card {
  position: relative;
  overflow: visible;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 18px 30px rgba(0, 0, 0, 0.56))
    drop-shadow(0 0 18px rgba(176, 78, 255, 0.28));
}

.newone-podium-card--rank1 {
  width: 190px;
  height: 304px;
  transform: translateY(-20px);
  z-index: 3;
}

.newone-podium-card--rank2,
.newone-podium-card--rank3 {
  width: 160px;
  height: 254px;
  transform: translateY(-4px);
  z-index: 2;
}

.newone-podium-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.newone-podium-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 70px 18px 34px;
  text-align: center;
}

.newone-podium-card--rank1 .newone-podium-content {
  padding-top: 82px;
  padding-bottom: 38px;
}

.newone-podium-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 50%;
  overflow: visible;
  transform: translate(var(--podium-avatar-x, 0), var(--podium-avatar-y, 0)) scale(var(--podium-avatar-scale, 1));
  transform-origin: center;
}

.newone-podium-card--rank1 .newone-podium-avatar {
  width: 70px;
  height: 70px;
  margin-bottom: 30px;
}

.newone-podium-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.newone-podium-avatar b {
  display: none !important;
  position: absolute;
  left: 50%;
  bottom: calc(var(--podium-badge-y, 19px) * -1);
  width: 25px;
  height: 25px;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid #0b0610;
  border-radius: 50%;
  background: #ffd84a;
  color: #08040d;
  font: 800 13px/1 "Cinzel", serif;
  box-shadow: 0 0 13px rgba(255, 216, 74, 0.45);
}

.newone-podium-card--rank1 .newone-podium-avatar {
  transform: translate(var(--podium-avatar-x, -3px), var(--podium-avatar-y, 6px)) scale(var(--podium-avatar-scale, 1.22));
}

.newone-podium-card--rank2 .newone-podium-avatar {
  transform: translate(var(--podium-avatar-x, 0), var(--podium-avatar-y, -4px)) scale(var(--podium-avatar-scale, 1.42));
}

.newone-podium-card--rank3 .newone-podium-avatar {
  transform: translate(var(--podium-avatar-x, 0), var(--podium-avatar-y, 2px)) scale(var(--podium-avatar-scale, 1.45));
}

.newone-podium-card--rank2 .newone-podium-avatar b {
  background: #dce7ef;
}

.newone-podium-card--rank3 .newone-podium-avatar b {
  background: #d57c35;
}

.newone-podium-content > strong {
  color: #fff8ff;
  font: 700 16px/1 "Cinzel", serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(176, 78, 255, 0.45);
}

.newone-podium-card--rank1 .newone-podium-content > strong {
  font-size: 20px;
}

.newone-podium-content > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  color: rgba(182, 92, 255, 0.9);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.newone-podium-content > span img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(176, 78, 255, 0.45));
}

.newone-podium-content > small {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  width: 84%;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(160, 90, 255, 0.22);
  color: rgba(226, 215, 244, 0.62);
  font-size: 11px;
}

.newone-podium-content > small em {
  color: #ffd84a;
  font: 500 18px/1 "Cinzel", serif;
  font-style: normal;
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.28);
}

.newone-server-frame {
  --server-frame-size: 381px;
  --server-frame-x: -56px;
  --server-frame-y: 18px;
  grid-column: 11 / span 3;
  position: relative;
  width: min(var(--server-frame-size), 100%);
  aspect-ratio: 425 / 625;
  margin-left: auto;
  transform: translate(var(--server-frame-x), var(--server-frame-y));
  z-index: 9;
  filter:
    drop-shadow(0 22px 42px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 18px rgba(176, 78, 255, 0.28));
}

.newone-server-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.newone-server-title {
  position: absolute;
  left: 17%;
  top: 5.35%;
  z-index: 1;
  display: grid;
  width: 66%;
  gap: 1px;
  color: #f7efff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(160, 70, 255, 0.55);
  transform: translate(10px, 22px) scale(1.18);
  transform-origin: center;
}

.newone-server-title strong {
  font: 600 13px/1 "Cinzel", serif;
  letter-spacing: 0.16em;
}

.newone-server-title span {
  color: #a66cff;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.newone-server-live {
  position: absolute;
  right: 14%;
  top: 11.5%;
  z-index: 2;
  color: #31e7b4;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newone-server-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.newone-server-rows {
  position: absolute;
  left: 33.2%;
  top: 18.4%;
  z-index: 1;
  display: grid;
  width: 46%;
  gap: 9px;
}

.newone-server-rows div {
  display: flex;
  min-height: 43px;
  flex-direction: column;
  justify-content: center;
  transform-origin: left center;
}

.newone-server-rows div:nth-child(1) { transform: translate(9px, -10px) scale(1.12); }
.newone-server-rows div:nth-child(2) { transform: translate(12px, 1px) scale(1.04); }
.newone-server-rows div:nth-child(3) { transform: translate(13px, 18px) scale(1.11); }
.newone-server-rows div:nth-child(4) { transform: translate(12px, 34px) scale(1.08); }

.newone-server-rows span,
.newone-server-online span {
  color: rgba(226, 215, 244, 0.58);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
}

.newone-server-rows strong {
  color: #f7efff;
  font: 700 16px/1.1 "Cinzel", serif;
  text-shadow: 0 0 10px rgba(160, 70, 255, 0.34);
}

.newone-server-online {
  position: absolute;
  left: 21.5%;
  top: 60.15%;
  z-index: 1;
  display: grid;
  width: 62%;
  transform: translate(0, 13px);
}

.newone-server-online strong {
  color: #ffd84a;
  font: 700 25px/1 "Cinzel", serif;
  text-shadow: 0 0 12px rgba(255, 216, 74, 0.3);
}

.newone-server-online small {
  color: rgba(226, 215, 244, 0.5);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newone-server-siege {
  position: absolute;
  left: 22%;
  top: 84.15%;
  z-index: 1;
  width: 56%;
  text-align: center;
}

.newone-server-siege > strong {
  display: block;
  color: #ffd9a0;
  font: 600 17px/1 "Cinzel", serif;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.26);
  text-transform: uppercase;
  transform: translate(5px, -21px) scale(1.35);
}

.newone-server-siege > span {
  display: block;
  margin-top: 2px;
  color: #8f55d8;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translate(5px, -21px) scale(1.35);
}

.newone-server-siege > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 7px;
  transform: translate(10px, 5px) scale(0.88);
}

.newone-server-siege b {
  display: grid;
  gap: 1px;
  color: #f7efff;
  font: 500 15px/1 "Cinzel", serif;
}

.newone-server-siege small {
  color: rgba(226, 215, 244, 0.5);
  font: 800 5px/1 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newone-server-siege em {
  display: block;
  margin-top: 7px;
  color: #8f55d8;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(4px, -33px);
}

.newone-live-panels {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(300px, 1fr));
  gap: 16px;
  width: min(1560px, calc(100% - 48px));
  margin: -46px auto 0;
  padding-bottom: 28px;
}

.newone-live-card {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(145, 75, 255, 0.45);
  border-radius: 8px;
  background: #08030f;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 24px rgba(120, 45, 255, 0.18),
    inset 0 0 24px rgba(120, 45, 255, 0.08);
}

.newone-live-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 0, 15, 0.88) 0%, rgba(20, 3, 45, 0.55) 45%, rgba(20, 3, 45, 0.18) 100%);
}

.newone-live-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 178px;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.85);
}

.newone-live-card > div {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 178px;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 20px 20px;
}

.newone-live-card h2 {
  margin: 0;
  color: #f5eaff;
  font: 900 clamp(30px, 2.2vw, 44px)/0.88 "Cinzel", serif;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(160, 70, 255, 0.65), 0 2px 0 rgba(0, 0, 0, 0.8);
}

.newone-live-card nav {
  display: flex;
  gap: 16px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.newone-live-card nav span:first-child {
  color: #fff083;
}

.newone-card-table {
  position: relative;
  z-index: 3;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(12, 14, 21, 0.96);
  color: #f7efff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 11px;
}

.newone-card-table thead {
  color: #fff35d;
  font: 800 10px/1 "Cinzel", serif;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 216, 74, 0.35);
}

.newone-card-table th,
.newone-card-table td {
  height: 44px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(160, 90, 255, 0.16);
  text-align: left;
  vertical-align: middle;
}

.newone-card-table th:last-child,
.newone-card-table td:last-child {
  color: #fff35d;
  text-align: right;
  font-weight: 900;
}

.newone-card-table tbody tr {
  background: rgba(255, 255, 255, 0.025);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.newone-card-table tbody tr:nth-child(even) {
  background: rgba(130, 70, 255, 0.055);
}

.newone-card-table tbody tr:hover {
  background: rgba(160, 85, 255, 0.12);
  box-shadow: inset 0 0 18px rgba(145, 75, 255, 0.16);
}

.newone-card-table td:first-child {
  color: #fff8d8;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 216, 74, 0.12);
}

.newone-card-table small {
  color: #fff35d;
  font-size: 8px;
  margin-left: 3px;
}

.newone-card-table--ranking th:nth-child(2),
.newone-card-table--ranking td:nth-child(2) {
  text-align: center;
}

.newone-card-table--ranking td img {
  position: static;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(46, 255, 177, 0.34));
}

@media (max-width: 1180px) {
  .newone-character {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .newone-character img,
  .newone-character video {
    width: min(92vw, 520px) !important;
  }

  main {
    margin-top: 0 !important;
  }

  .newone-hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto;
  }

  .newone-hero-center {
    transform: none !important;
  }

  .newone-server-frame {
    margin: 20px auto 0;
    transform: none;
  }

  .newone-live-panels {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }
}

/* =========================================================
   WONDER HERO 1 EXACT PORT
   The MU template engine has older global CSS that fights grid layouts,
   so this desktop hero is positioned explicitly to match NewOne.
   ========================================================= */
@media (min-width: 1181px) {
  header {
    /* Hero stage scale: shrinks the fixed 1440px composition to fit
       narrower desktops (1181-1480px) instead of clipping the right side.
       tan(atan2(a, b)) resolves to the unitless ratio a/b. */
    --nx-hero-scale: min(1, calc(tan(atan2(100vw - 72px, 1440px))));
    min-height: calc(250px + 665px * var(--nx-hero-scale, 1)) !important;
    overflow: hidden !important;
  }

  .newone-header {
    width: min(1440px, calc(100% - 48px)) !important;
    height: 80px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .newone-hero {
    position: relative !important;
    display: block !important;
    width: 1440px !important;
    height: 665px !important;
    min-height: 665px !important;
    left: 50% !important;
    /* negative bottom margin reclaims the layout space freed by scale() */
    margin: 0 0 calc((var(--nx-hero-scale, 1) - 1) * 665px) -720px !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: scale(var(--nx-hero-scale, 1)) !important;
    transform-origin: top center !important;
  }

  .newone-character {
    position: absolute !important;
    left: 34px !important;
    top: 378px !important;
    z-index: 6 !important;
    transform: translateY(-50%) !important;
  }

  .newone-character img,
  .newone-character video {
    width: 448px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  .newone-hero-center {
    position: absolute !important;
    left: 362px !important;
    top: 10px !important;
    z-index: 9 !important;
    width: 620px !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
  }

  .newone-hero-center::before {
    width: 620px !important;
    height: 420px !important;
    top: 45% !important;
    left: 44% !important;
    opacity: 0.52 !important;
  }

  .newone-hero-center::after {
    bottom: -18px !important;
  }

  .newone-season {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.46em !important;
  }

  .newone-hero h1 {
    margin: 0 !important;
    font: 900 76px/0.94 "Cinzel", serif !important;
    letter-spacing: 0.08em !important;
  }

  .newone-tagline {
    margin-top: 20px !important;
    font-size: 16px !important;
    letter-spacing: 0.18em !important;
  }

  .newone-podium {
    width: 620px !important;
    margin-top: 50px !important;
    gap: 10px !important;
    transform: scale(0.94) !important;
    transform-origin: top center !important;
  }

  .newone-podium-card--rank1 {
    width: 190px !important;
    height: 304px !important;
    transform: translateY(-20px) !important;
  }

  .newone-podium-card--rank2,
  .newone-podium-card--rank3 {
    width: 160px !important;
    height: 254px !important;
    transform: translateY(-4px) !important;
  }

  .newone-podium-content {
    padding: 70px 18px 34px !important;
  }

  .newone-podium-card--rank1 .newone-podium-content {
    padding-top: 82px !important;
    padding-bottom: 38px !important;
  }

  .newone-server-frame {
    position: absolute !important;
    left: 1080px !important;
    top: 45px !important;
    z-index: 10 !important;
    width: 381px !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  .newone-server-title {
    transform: translate(10px, 22px) scale(1.18) !important;
  }

  .newone-server-live {
    right: 15.5% !important;
    top: 11.6% !important;
    transform: none !important;
  }

  .newone-server-rows {
    left: 33.2% !important;
    top: 18.4% !important;
    gap: 9px !important;
  }

  .newone-server-online {
    left: 21.5% !important;
    top: 60.15% !important;
    transform: translate(0, 13px) scale(1) !important;
  }

  .newone-server-siege {
    left: 22% !important;
    top: 84.15% !important;
  }

  .newone-live-panels {
    width: 100vw !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(300px, 1fr)) !important;
    gap: 16px !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -58px !important;
    padding-left: max(0px, calc((100vw - 1560px) / 2 + 24px)) !important;
    padding-right: max(0px, calc((100vw - 1560px) / 2 + 24px)) !important;
    padding-bottom: 28px !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1181px) {
  .newone-header {
    width: 100vw !important;
    max-width: none !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    padding-left: max(24px, calc((100vw - 1440px) / 2 + 24px)) !important;
    padding-right: max(24px, calc((100vw - 1440px) / 2 + 24px)) !important;
    box-sizing: border-box !important;
  }

  .newone-live-panels {
    width: 100vw !important;
    max-width: none !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1181px) {
  html body .wrapper header .newone-live-panels {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  html body .wrapper header .newone-header {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   NOXUS HALL OF FAME BORDER FIX - 2026-06-05
   Fixes the stretched frame/image issue on compact ranking cards.
   Uses real CSS border ornaments so rows/text are never covered.
   ========================================================= */
.hallOfFameElectric,
.live-hof-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 38px 24px 42px !important;
  border: 1px solid rgba(150, 68, 255, 0.72) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(185, 76, 255, 0.20), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(185, 76, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(12, 5, 28, 0.98), rgba(4, 2, 12, 0.99)) !important;
  background-blend-mode: normal !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 28px rgba(118, 40, 220, 0.16),
    0 0 28px rgba(123, 45, 255, 0.20) !important;
}

.hallOfFameElectric::before,
.live-hof-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 13px 13px 15px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  border-radius: 9px !important;
  border: 1px solid rgba(117, 55, 203, 0.52) !important;
  background:
    linear-gradient(90deg, transparent 0, rgba(245, 196, 93, 0.78) 9%, rgba(139, 50, 255, 0.70) 50%, rgba(245, 196, 93, 0.78) 91%, transparent 100%) top center / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0, rgba(245, 196, 93, 0.56) 16%, rgba(139, 50, 255, 0.56) 50%, rgba(245, 196, 93, 0.56) 84%, transparent 100%) bottom center / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 0, rgba(245, 196, 93, 0.56) 12%, rgba(139, 50, 255, 0.44) 50%, rgba(245, 196, 93, 0.56) 88%, transparent 100%) left center / 1px 100% no-repeat,
    linear-gradient(180deg, transparent 0, rgba(245, 196, 93, 0.56) 12%, rgba(139, 50, 255, 0.44) 50%, rgba(245, 196, 93, 0.56) 88%, transparent 100%) right center / 1px 100% no-repeat,
    radial-gradient(circle at 0 0, rgba(245, 196, 93, 0.48), transparent 16px),
    radial-gradient(circle at 100% 0, rgba(245, 196, 93, 0.48), transparent 16px),
    radial-gradient(circle at 0 100%, rgba(245, 196, 93, 0.38), transparent 18px),
    radial-gradient(circle at 100% 100%, rgba(245, 196, 93, 0.38), transparent 18px) !important;
  box-shadow:
    inset 0 0 18px rgba(139, 50, 255, 0.13),
    0 0 12px rgba(139, 50, 255, 0.18) !important;
}

.hallOfFameElectric::after,
.live-hof-card::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 8px !important;
  z-index: 1 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  pointer-events: none !important;
  border: 1px solid rgba(248, 204, 104, 0.68) !important;
  border-radius: 2px !important;
  background: linear-gradient(135deg, rgba(206, 87, 255, 0.96), rgba(70, 17, 126, 0.98)) !important;
  transform: translateX(-50%) rotate(45deg) !important;
  box-shadow:
    0 0 12px rgba(206, 87, 255, 0.75),
    0 0 24px rgba(122, 50, 255, 0.38) !important;
}

.hallOfFameElectric > *,
.live-hof-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.hofe-title,
.hallOfFameElectric .h2-title,
.live-hof-card .h2-title {
  margin: 0 0 18px !important;
  padding: 0 18px 10px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(150, 68, 255, 0.22) !important;
}

.hofe-grid,
.live-hof-card .ranking-list,
.live-hof-card table,
.hallOfFameElectric table {
  position: relative !important;
  z-index: 2 !important;
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
}

.hofe-cardWrap:last-child,
.live-hof-card tr:last-child,
.hallOfFameElectric tr:last-child {
  margin-bottom: 8px !important;
}


/* =========================================================
   NOXUS HALL OF FAME FRAME REPLACEMENT - 2026-06-05
   User requested to replace the generated CSS border with the
   provided NOXUS frame image.
   ========================================================= */
.hallOfFameElectric,
.live-hof-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 34px 20px 34px !important;
  background: linear-gradient(180deg, rgba(14, 8, 30, 0.98), rgba(5, 3, 12, 0.99)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hallOfFameElectric::before,
.live-hof-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("../images/noxus-empty-card-frame.png") center center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

.hallOfFameElectric::after,
.live-hof-card::after {
  display: none !important;
  content: none !important;
}

.hallOfFameElectric > *,
.live-hof-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.hofe-title,
.hallOfFameElectric .h2-title,
.live-hof-card .h2-title {
  margin: 0 0 14px !important;
  padding: 0 22px 12px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(150, 68, 255, 0.18) !important;
  color: #f3e8ff !important;
  text-shadow: 0 0 18px rgba(176, 78, 255, 0.40) !important;
}

.hofe-grid,
.live-hof-card .ranking-list,
.live-hof-card table,
.hallOfFameElectric table {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding-bottom: 12px !important;
  background: transparent !important;
}

.hofe-cardWrap:last-child,
.live-hof-card tr:last-child,
.hallOfFameElectric tr:last-child {
  margin-bottom: 10px !important;
}


/* =========================================================
   NOXUS REAL CARD FRAME RESET - 2026-06-05
   Stop fighting the old CSS. Hide the broken NOXUS PNG frame
   and remove the purple outer boxes from the homepage cards.
   This leaves one clean fantasy card border instead of double
   borders / misplaced inner frames.
   ========================================================= */

.newsBlock,
.weeklyCardsWrap,
.homeEventPanel,
.djw-card,
.hallOfFameElectric,
.live-hof-card,
.mainHomeBlock .blockHome {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(139, 61, 255, 0.56) !important;
  border-radius: 8px !important;
  padding: 22px 18px 20px !important;
  background:
    radial-gradient(circle at 50% -12px, rgba(157, 61, 255, 0.18), transparent 36px),
    linear-gradient(180deg, rgba(11, 5, 25, 0.97), rgba(4, 2, 12, 0.99)) !important;
  box-shadow:
    0 0 0 1px rgba(246, 215, 120, 0.10) inset,
    0 0 24px rgba(112, 41, 220, 0.18) !important;
  backdrop-filter: none !important;
}

/* Disable every old generated frame/diamond layer that was causing the mess. */
.newsBlock::before,
.newsBlock::after,
.weeklyCardsWrap::before,
.weeklyCardsWrap::after,
.homeEventPanel::before,
.homeEventPanel::after,
.djw-card::before,
.djw-card::after,
.hallOfFameElectric::before,
.hallOfFameElectric::after,
.live-hof-card::before,
.live-hof-card::after,
.mainHomeBlock .blockHome::before,
.mainHomeBlock .blockHome::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If Hall of Fame is wrapped by weeklyCardsWrap, the wrapper must be invisible. */
.weeklyCardsWrap:has(.live-hof-card) {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.weeklyCardsWrap:has(.live-hof-card) .live-hof-card {
  border: 1px solid rgba(139, 61, 255, 0.56) !important;
  border-radius: 8px !important;
  padding: 22px 18px 20px !important;
}

/* Small clean gold/purple corner accents without using the broken PNG. */
.newsBlock > .h2-title,
.weeklyCardsWrap .h2-title,
.homeEventPanel-head,
.djw-card-title,
.hallOfFameElectric .h2-title,
.live-hof-card .h2-title {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 0 16px !important;
  padding: 0 0 10px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(139, 61, 255, 0.20) !important;
}

.newsBlock > *,
.weeklyCardsWrap > *,
.homeEventPanel > *,
.djw-card > *,
.hallOfFameElectric > *,
.live-hof-card > *,
.mainHomeBlock .blockHome > * {
  position: relative !important;
  z-index: 2 !important;
}

.newsBlock table,
.weeklyCardsWrap table,
.homeEventPanel table,
.djw-card table,
.hallOfFameElectric table,
.live-hof-card table,
.hofe-grid,
.djw-feed,
.homeEventPanel-list,
.newsFeed {
  margin: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* =========================================================
   EXACT NEWONE BACKGROUND CASCADE LOCK - 2026-06-06
   NewOne does not use a bitmap for Hero 1; it renders this exact fixed
   background stack. Keep Wonder from replacing it with legacy purple panels.
   ========================================================= */
html,
body {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background-color: oklch(0.12 0.04 290) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.35 0.22 295 / 30%), transparent),
    radial-gradient(ellipse at 100% 100%, oklch(0.3 0.2 280 / 25%), transparent 60%) !important;
  background-attachment: fixed !important;
}

body,
.wrapper,
header,
main,
.content,
.container,
.container-fluid,
.page-content,
.ajax-container {
  background-color: transparent !important;
  background-image: none !important;
}

.newone-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.35 0.22 295 / 30%), transparent),
    radial-gradient(ellipse at 100% 100%, oklch(0.3 0.2 280 / 25%), transparent 60%),
    oklch(0.12 0.04 290) !important;
}

.newone-bg img {
  display: none !important;
}

.newone-bg-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  background: linear-gradient(
    180deg,
    oklch(0.07 0.04 290 / 68%),
    oklch(0.1 0.045 290 / 92%) 62%,
    oklch(0.075 0.035 290)
  ) !important;
}

.newone-fantasy-towers {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 0.46 !important;
  background:
    linear-gradient(180deg, transparent 0 38%, oklch(0.04 0.025 290 / 72%) 78%),
    linear-gradient(88deg, transparent 0 11%, oklch(0.035 0.025 290 / 72%) 11% 12.5%, transparent 12.5% 33%, oklch(0.035 0.025 290 / 68%) 33% 35%, transparent 35% 61%, oklch(0.035 0.025 290 / 70%) 61% 62.5%, transparent 62.5%),
    conic-gradient(from 45deg at 18% 39%, transparent 0 16%, oklch(0.035 0.025 290 / 78%) 16% 35%, transparent 35%),
    conic-gradient(from 45deg at 72% 34%, transparent 0 16%, oklch(0.035 0.025 290 / 74%) 16% 35%, transparent 35%) !important;
  filter: blur(0.2px) !important;
}

.newone-purple-fog {
  position: absolute !important;
  inset: -10% !important;
  z-index: 2 !important;
  display: block !important;
  opacity: 0.75 !important;
  background:
    radial-gradient(ellipse 38% 18% at 24% 58%, oklch(0.43 0.21 295 / 22%), transparent 70%),
    radial-gradient(ellipse 44% 22% at 68% 48%, oklch(0.47 0.24 295 / 18%), transparent 72%),
    radial-gradient(ellipse 80% 16% at 50% 100%, oklch(0.36 0.18 292 / 24%), transparent 70%) !important;
  animation: newoneFogDrift 18s ease-in-out infinite alternate !important;
}

.newone-particle {
  z-index: 4 !important;
}

.newone-header,
.newone-hero,
.newone-live-panels {
  position: relative !important;
  z-index: 5 !important;
}

@media (min-width: 1181px) {
  header {
    width: 100vw !important;
    min-height: 1120px !important;
    overflow: visible !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .newone-header,
  .newone-hero,
  .newone-live-panels {
    width: min(1440px, calc(100vw - 48px)) !important;
    max-width: none !important;
  }

  .newone-live-panels {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .newone-live-card {
    min-height: 530px !important;
    overflow: hidden !important;
  }

  .newone-card-table {
    display: table !important;
    position: relative !important;
    z-index: 4 !important;
    table-layout: fixed !important;
  }

  .newone-card-table tbody {
    display: table-row-group !important;
  }

  .newone-card-table tr {
    display: table-row !important;
  }

  .newone-card-table th,
  .newone-card-table td {
    display: table-cell !important;
    height: 37px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .newone-card-table--ranking td:first-child {
    font-family: "Cinzel", serif !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
  }
}

/* Stop the lower cards from riding over Castle Siege / Hero 2. */
@media (min-width: 1181px) {
  html body .wrapper header {
    min-height: 1260px !important;
    padding-bottom: 72px !important;
    overflow: visible !important;
  }

  html body .wrapper main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body .wrapper .ajax-container {
    margin-top: 0 !important;
  }

  html body .wrapper .wonderCastleHero {
    margin-top: 0 !important;
    clear: both !important;
  }
}

/* Rankings are their own page: keep the NewOne navbar, remove home hero chrome. */
body.newone-rankings-page header {
  min-height: 96px !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

body.newone-rankings-page .newone-header {
  width: min(1440px, calc(100vw - 48px)) !important;
}

body.newone-rankings-page main {
  position: relative !important;
  z-index: 6 !important;
  margin-top: 34px !important;
  padding: 0 0 80px !important;
}

body.newone-rankings-page .ajax-container {
  width: min(1440px, calc(100vw - 48px)) !important;
  margin: 0 auto !important;
}

body.newone-rankings-page .rankingsPage {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 32px !important;
}

body.newone-rankings-page .rankingsPage > aside:not(.lovableRankSidebar) {
  display: none !important;
}

body.newone-rankings-page .rankingsPage .content,
body.newone-rankings-page .rankingsPage .content.pageNewsCard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

body.newone-rankings-page .rankingsPage .content.pageNewsCard {
  min-height: 620px !important;
  padding: 28px !important;
  border: 1px solid rgba(155, 80, 255, 0.42) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(13, 8, 22, 0.88), rgba(6, 2, 12, 0.94)),
    radial-gradient(circle at 50% 0%, rgba(160, 75, 255, 0.13), transparent 46%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 34px rgba(130, 65, 255, 0.18),
    inset 0 0 34px rgba(130, 65, 255, 0.08) !important;
}

body.newone-rankings-page .rankingsPage .h2-title-content {
  margin-bottom: 18px !important;
}

@media (max-width: 1180px) {
  body.newone-rankings-page header {
    min-height: 82px !important;
  }

  body.newone-rankings-page .ajax-container {
    width: min(100% - 24px, 960px) !important;
  }

  body.newone-rankings-page .rankingsPage .content.pageNewsCard {
    padding: 18px !important;
  }
}

/* Lovable Rankings port */
body.newone-rankings-page {
  background: #05010b !important;
}

body.newone-rankings-page .newone-bg {
  background: #05010b !important;
}

body.newone-rankings-page .newone-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(137, 54, 255, 0.32), transparent 55%),
    linear-gradient(180deg, rgba(9, 4, 18, 0.74), rgba(9, 4, 18, 0.93) 60%, #07030d),
    url("../images/rankings-bg.jpg") center top / cover no-repeat !important;
  opacity: 1 !important;
}

body.newone-rankings-page .newone-bg-overlay,
body.newone-rankings-page .newone-fantasy-towers,
body.newone-rankings-page .newone-purple-fog {
  display: none !important;
}

body.newone-rankings-page .newone-particle {
  z-index: 4 !important;
}

body.newone-rankings-page .lovableRankSidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  min-height: 420px;
  padding: 16px 12px;
  border: 1px solid rgba(165, 92, 255, 0.42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 75, 255, 0.18), transparent 44%),
    rgba(8, 3, 18, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 34px rgba(130, 65, 255, 0.18),
    inset 0 0 34px rgba(130, 65, 255, 0.08);
}

.lovableRankSidebar-head {
  padding: 4px 12px 12px;
}

.lovableRankSidebar-head span,
.lovableRankSidebar small {
  display: block;
  color: rgba(226, 214, 242, 0.62);
  font: 700 10px/1.4 "Cinzel", serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.lovableRankSidebar-head strong {
  display: block;
  margin-top: 4px;
  color: #f8f0ff;
  font: 900 18px/1 "Cinzel", serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(180, 88, 255, 0.62);
}

.lovableRankSidebar-line {
  height: 1px;
  margin: 0 8px 12px;
  background: linear-gradient(90deg, transparent, rgba(178, 94, 255, 0.45), transparent);
}

.lovableRankSidebar nav {
  display: grid;
  gap: 4px;
}

.lovableRankSidebar a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 7px;
  color: rgba(226, 214, 242, 0.66);
  font: 800 12px/1 "Cinzel", serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.18s ease;
}

.lovableRankSidebar a:hover,
.lovableRankSidebar a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(145, 70, 255, 0.28), transparent);
  box-shadow: inset 2px 0 0 rgba(186, 99, 255, 0.9), 0 0 24px rgba(160, 70, 255, 0.2);
}

.lovableRankSidebar a i {
  color: #b65cff;
  font-style: normal;
  font-size: 11px;
  text-shadow: 0 0 10px rgba(182, 92, 255, 0.8);
}

.lovableRankSidebar a b {
  display: none;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #b65cff;
  box-shadow: 0 0 12px #b65cff;
}

.lovableRankSidebar a.active b {
  display: block;
}

.lovableRankSidebar small {
  margin-top: 18px;
  padding: 0 12px 4px;
  font-size: 9px;
  opacity: 0.72;
}

body.newone-rankings-page .lovableRankContent {
  overflow: hidden;
}

body.newone-rankings-page .lovableRankContent::before {
  display: none !important;
}

body.newone-rankings-page .lovableRankContent > * {
  position: relative;
  z-index: 2;
}

.lovableRankHub header {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 4px;
  text-align: center;
}

.lovableRankHub header p {
  margin: 0;
  color: rgba(182, 92, 255, 0.86);
  font: 800 11px/1 "Cinzel", serif;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.lovableRankHub header h1 {
  margin: 10px 0 0;
  color: #fff;
  font: 900 clamp(48px, 6vw, 84px)/0.9 "Cinzel", serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 0 26px rgba(184, 98, 255, 0.72);
}

.lovableRankHub header span {
  display: block;
  margin-top: 16px;
  color: rgba(226, 214, 242, 0.7);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.lovableRankHub header b,
.lovableRankHub-card strong,
body.newone-rankings-page .rankingTable tbody td:last-child,
body.newone-rankings-page .rankingTable tbody tr td:last-child {
  color: #f6d778;
  text-shadow: 0 0 12px rgba(246, 215, 120, 0.34);
}

.lovableRankHub header::after {
  content: "";
  display: block;
  width: 190px;
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, rgba(182, 92, 255, 0.8), transparent);
}

.lovableRankCrest {
  position: relative;
  display: grid;
  place-items: center;
  height: 280px;
  margin: 20px auto 30px;
}

.lovableRankCrest::before {
  content: "";
  position: absolute;
  inset: 24px 18%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(172, 70, 255, 0.46), transparent 66%);
  filter: blur(28px);
}

.lovableRankCrest img {
  position: relative;
  z-index: 1;
  height: 280px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(174, 78, 255, 0.62));
  animation: lovableRankFloat 4.4s ease-in-out infinite alternate;
}

@keyframes lovableRankFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.lovableRankHub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lovableRankHub-card {
  position: relative;
  min-height: 158px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(165, 92, 255, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 0%, rgba(155, 70, 255, 0.28), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(110, 55, 220, 0.2), transparent 60%),
    rgba(8, 3, 18, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 28px rgba(130, 65, 255, 0.16),
    inset 0 0 24px rgba(130, 65, 255, 0.07);
  text-decoration: none;
  transition: 0.2s ease;
}

.lovableRankHub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(190, 110, 255, 0.76);
  box-shadow: 0 0 32px rgba(145, 75, 255, 0.32), inset 0 0 30px rgba(145, 75, 255, 0.12);
}

.lovableRankHub-card i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(165, 92, 255, 0.42);
  border-radius: 8px;
  color: #b65cff;
  font-style: normal;
  text-shadow: 0 0 16px rgba(182, 92, 255, 0.8);
  background: rgba(8, 3, 18, 0.55);
}

.lovableRankHub-card em {
  position: absolute;
  right: 24px;
  top: 30px;
  color: rgba(226, 214, 242, 0.62);
  font: 800 10px/1 "Cinzel", serif;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.lovableRankHub-card strong {
  display: block;
  margin-top: 30px;
  color: #fff;
  font: 900 20px/1 "Cinzel", serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lovableRankHub-card span {
  display: block;
  margin-top: 8px;
  color: rgba(226, 214, 242, 0.62);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lovableRankHub--cards .lovableRankCrest {
  display: none !important;
}

.lovableRankOverviewGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 250px));
  justify-content: center;
  gap: 24px;
  margin-top: 42px;
}

.lovableRankOverviewCard {
  position: relative;
  display: block;
  width: 250px;
  height: 250px;
  overflow: visible;
  text-decoration: none;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.lovableRankOverviewCard:hover {
  transform: translateY(-5px);
  filter: brightness(1.08);
}

.lovableRankOverviewCard-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(155, 75, 255, 0.22));
}

.lovableRankOverviewAvatar {
  position: absolute;
  left: 50%;
  top: 61.5%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(15, 6, 26, 0.96), rgba(2, 0, 6, 0.98));
  box-shadow:
    0 0 0 2px rgba(228, 170, 64, 0.36),
    0 0 16px rgba(160, 70, 255, 0.38);
}

.lovableRankOverviewAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.lovableRankOverviewAvatar canvas,
.lovableRankOverviewAvatar .svg {
  width: 54px !important;
  height: 54px !important;
}

.lovableRankOverviewCard strong {
  position: absolute;
  left: 50%;
  bottom: 17px;
  z-index: 3;
  width: 78%;
  transform: translateX(-50%);
  color: #f5eaff;
  font-family: "Cinzel", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-align: center;
  text-shadow:
    0 0 10px rgba(160, 70, 255, 0.65),
    0 2px 0 rgba(0, 0, 0, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1280px) {
  .lovableRankOverviewGrid {
    grid-template-columns: repeat(3, minmax(0, 250px));
  }
}

@media (max-width: 940px) {
  .lovableRankOverviewGrid {
    grid-template-columns: repeat(2, minmax(0, 250px));
  }
}

@media (max-width: 620px) {
  .lovableRankOverviewGrid {
    grid-template-columns: minmax(0, 250px);
  }
}

body.newone-rankings-page .lovableRankContent > .align-center:first-of-type {
  display: none !important;
}

body.newone-rankings-page .lovableRankContent .h2-title-content span,
body.newone-rankings-page .lovableRankContent .h2-title-content {
  color: #fff !important;
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 18px rgba(182, 92, 255, 0.7) !important;
}

body.newone-rankings-page .lovableRankContent .table-row.table-scroll {
  border: 1px solid rgba(165, 92, 255, 0.32) !important;
  border-radius: 8px !important;
  background: rgba(3, 0, 8, 0.45) !important;
  overflow: auto !important;
}

body.newone-rankings-page .rankingTable {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

body.newone-rankings-page .rankingTable thead tr {
  background: rgba(153, 85, 255, 0.12) !important;
}

body.newone-rankings-page .rankingTable thead td,
body.newone-rankings-page .rankingTable thead th {
  padding: 14px 16px !important;
  color: rgba(226, 214, 242, 0.68) !important;
  font: 900 11px/1.2 "Cinzel", serif !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(165, 92, 255, 0.24) !important;
}

body.newone-rankings-page .rankingTable tbody td,
body.newone-rankings-page .rankingTable tbody tr td {
  padding: 13px 16px !important;
  color: rgba(246, 240, 255, 0.88) !important;
  border-top: 1px solid rgba(165, 92, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  font-size: 13px !important;
}

body.newone-rankings-page .rankingTable tbody tr:nth-child(even) td {
  background: rgba(125, 60, 255, 0.045) !important;
}

body.newone-rankings-page .rankingTable tbody tr:hover td {
  background: rgba(160, 85, 255, 0.12) !important;
  box-shadow: inset 0 0 18px rgba(145, 75, 255, 0.12) !important;
}

body.newone-rankings-page .rankingTable a {
  color: #fff !important;
  font-family: "Cinzel", serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
}

body.newone-rankings-page .rankingTable img {
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  filter: drop-shadow(0 0 10px rgba(134, 255, 205, 0.28));
}

@media (max-width: 1180px) {
  body.newone-rankings-page .rankingsPage {
    grid-template-columns: 1fr !important;
  }

  body.newone-rankings-page .lovableRankSidebar {
    position: relative;
    top: auto;
  }

  .lovableRankHub-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Ajax/hash fallback: when rankings are injected into the home shell, kill old hero spacing too. */
@supports selector(body:has(.lovableRankPage)) {
  html body:has(.lovableRankPage) header {
    min-height: 96px !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  html body:has(.lovableRankPage) .newone-hero,
  html body:has(.lovableRankPage) .newone-live-panels,
  html body:has(.lovableRankPage) .topPanel,
  html body:has(.lovableRankPage) .sparks,
  html body:has(.lovableRankPage) .logo,
  html body:has(.lovableRankPage) .onlinetop,
  html body:has(.lovableRankPage) .download {
    display: none !important;
  }

  html body:has(.lovableRankPage) main {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 24px !important;
    padding-top: 0 !important;
  }

  html body:has(.lovableRankPage) .ajax-container {
    width: min(1440px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
  }

  html body:has(.lovableRankPage) .rankingsPage {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 32px !important;
    transform: none !important;
  }

  html body:has(.lovableRankPage) .rankingsPage > aside:not(.lovableRankSidebar) {
    display: none !important;
  }

  html body:has(.lovableRankPage) .lovableRankPage .lovableRankContent {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
  }

  html body:has(.lovableRankPage) .newone-bg {
    background: #05010b !important;
  }

  html body:has(.lovableRankPage) .newone-bg::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(137, 54, 255, 0.32), transparent 55%),
      linear-gradient(180deg, rgba(9, 4, 18, 0.74), rgba(9, 4, 18, 0.93) 60%, #07030d),
      url("../images/rankings-bg.jpg") center top / cover no-repeat !important;
  }

  @media (max-width: 1180px) {
    html body:has(.lovableRankPage) .rankingsPage {
      grid-template-columns: 1fr !important;
    }
  }
}