/* MMOCodeX Frontpage Edition
   Rollback: remove this stylesheet/script and the mcx-front-edition body class. */

body.mcx-front-edition {
  --ed-cyan: #73ffd6;
  --ed-mint: #68dcad;
  --ed-gold: #fff1bf;
  --ed-red: #ff5e6f;
  --ed-panel: rgba(2, 10, 7, .72);
  --ed-line: rgba(115, 255, 214, .18);
  --ed-line-strong: rgba(115, 255, 214, .42);
  background: #010403;
}

body.mcx-front-edition .mcx-shell {
  width: min(1440px, calc(100% - 34px));
  padding-top: 18px;
}

body.mcx-front-edition .mcx-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at var(--mcx-edition-x, 50%) var(--mcx-edition-y, 16%), rgba(115, 255, 214, .084), transparent 17rem);
  opacity: .72;
  filter: blur(5px);
}

body.mcx-front-edition .mcx-topbar {
  min-height: 76px;
  margin-bottom: clamp(22px, 3vw, 40px);
  border-radius: 18px;
  border-color: rgba(115, 255, 214, .22);
  background:
    linear-gradient(180deg, rgba(4, 18, 13, .84), rgba(1, 7, 5, .70)),
    rgba(1, 8, 5, .72);
  box-shadow:
    0 20px 68px rgba(0, 0, 0, .36),
    0 0 0 1px rgba(255, 255, 255, .025),
    0 0 42px rgba(115, 255, 214, .08);
  overflow: hidden;
}

body.mcx-front-edition .mcx-topbar::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(115, 255, 214, .72), rgba(255, 241, 191, .34), transparent);
  opacity: .74;
}

body.mcx-front-edition .mcx-brand img {
  height: 48px;
  filter: drop-shadow(0 0 18px rgba(115, 255, 214, .18));
}

body.mcx-front-edition .mcx-nav {
  gap: clamp(8px, 1.25vw, 18px);
  min-width: 0;
}

body.mcx-front-edition .mcx-nav a {
  font-size: clamp(.72rem, .82vw, .84rem);
  letter-spacing: .045em;
  color: rgba(239, 255, 248, .70);
  white-space: nowrap;
}

body.mcx-front-edition .mcx-nav a::after {
  bottom: -13px;
  height: 3px;
  box-shadow: 0 0 18px rgba(115, 255, 214, .62);
}

body.mcx-front-edition .mcx-video-hero {
  width: min(1100px, 100%);
  margin: clamp(14px, 2.4vw, 32px) auto 0;
  border-radius: 34px;
  padding: 1px;
  background:
    linear-gradient(135deg, rgba(115, 255, 214, .72), rgba(255, 241, 191, .16) 34%, rgba(255, 94, 111, .20) 62%, rgba(115, 255, 214, .48)),
    linear-gradient(180deg, rgba(4, 22, 16, .72), rgba(0, 0, 0, .78));
  box-shadow:
    0 24px 72px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(115, 255, 214, .12),
    0 0 72px rgba(115, 255, 214, .16);
  overflow: hidden;
}

body.mcx-front-edition .mcx-video-hero::before {
  inset: 1px;
  border-radius: 33px;
  background:
    linear-gradient(90deg, rgba(115, 255, 214, .16), transparent 20%, transparent 80%, rgba(255, 94, 111, .12)),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 36%);
  opacity: .72;
  mix-blend-mode: screen;
}

body.mcx-front-edition .mcx-video-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(115, 255, 214, .16);
  border-radius: 24px;
  mask-image: linear-gradient(90deg, #000 0 22%, transparent 22% 78%, #000 78% 100%);
}

body.mcx-front-edition .mcx-video-frame {
  border-radius: 33px;
  background: #010403;
}

body.mcx-front-edition .mcx-video-frame video {
  aspect-ratio: 23 / 9;
  max-height: 448px;
  object-position: center;
  filter: saturate(1.06) contrast(1.04);
}

body.mcx-front-edition .mcx-hero {
  width: min(1100px, 100%);
  margin: clamp(16px, 2.2vw, 30px) auto clamp(22px, 3vw, 38px);
  padding: 0 clamp(18px, 4vw, 54px);
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  text-align: center;
}

body.mcx-front-edition .mcx-hero .mcx-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 clamp(18px, 3vw, 32px);
  border: 1px solid rgba(115, 255, 214, .28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(2, 12, 8, .88), rgba(8, 34, 24, .78)),
    rgba(0, 0, 0, .54);
  color: #f2fff9;
  font-size: clamp(18px, 2.05vw, 32px);
  letter-spacing: .14em;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .34),
    0 0 34px rgba(115, 255, 214, .14);
}

body.mcx-front-edition .mcx-hero .mcx-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 14px;
  border-radius: 50%;
  background: var(--ed-cyan);
  box-shadow: 0 0 18px rgba(115, 255, 214, .88);
}

body.mcx-front-edition .mcx-game-grid {
  width: min(1180px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  perspective: 1200px;
}

body.mcx-front-edition .mcx-game-card {
  --ed-offset-y: 0px;
  min-height: clamp(236px, 24vw, 318px);
  border-radius: 18px;
  border-color: rgba(115, 255, 214, .16);
  background:
    linear-gradient(180deg, rgba(8, 25, 18, .78), rgba(0, 0, 0, .78)),
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--accent), transparent 72%), transparent 48%);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .30),
    inset 0 0 0 1px rgba(255, 255, 255, .025);
  transform: translate3d(0, var(--ed-offset-y), 0);
  transition:
    transform .36s cubic-bezier(.2, .72, .18, 1),
    border-color .24s ease,
    box-shadow .36s ease;
  will-change: transform;
  backface-visibility: hidden;
}

body.mcx-front-edition .mcx-game-card:nth-child(2n),
body.mcx-front-edition .mcx-game-card:nth-child(4n) {
  --ed-offset-y: 0px;
}

body.mcx-front-edition .mcx-game-card::before {
  background:
    radial-gradient(240px circle at var(--x) var(--y), rgba(255, 255, 255, .18), transparent 44%),
    linear-gradient(125deg, transparent, color-mix(in srgb, var(--accent), transparent 84%), transparent);
}

body.mcx-front-edition .mcx-game-card::after {
  opacity: .72;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .48) 66%, rgba(0, 0, 0, .88)),
    linear-gradient(90deg, rgba(0, 0, 0, .46), transparent 54%, rgba(0, 0, 0, .36));
}

body.mcx-front-edition .mcx-card-cover {
  opacity: .32;
  transform: scale(1.05);
  filter: saturate(1.12) contrast(1.08) brightness(.72);
  transition:
    opacity .34s ease,
    transform .52s cubic-bezier(.2, .72, .18, 1),
    filter .34s ease;
  will-change: opacity, transform, filter;
}

body.mcx-front-edition .mcx-card-logo-wrap {
  padding: 30px;
  transition:
    transform .38s cubic-bezier(.2, .72, .18, 1),
    opacity .24s ease;
  will-change: transform;
}

body.mcx-front-edition .mcx-card-logo {
  max-height: 124px;
}

body.mcx-front-edition .mcx-card-meta {
  opacity: 1;
}

body.mcx-front-edition .mcx-card-meta span {
  min-height: 28px;
  border-color: color-mix(in srgb, var(--accent), transparent 58%);
  background: rgba(0, 0, 0, .48);
}

body.mcx-front-edition .mcx-card-action {
  opacity: 1;
  transform: none;
  min-height: 44px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(12px);
  transition:
    opacity .28s ease,
    transform .38s cubic-bezier(.2, .72, .18, 1),
    border-color .24s ease,
    background .24s ease;
}

body.mcx-front-edition .mcx-game-card:hover {
  transform: translate3d(0, calc(var(--ed-offset-y, 0px) - 10px), 0) scale(1.012);
}

body.mcx-front-edition .mcx-game-card:hover .mcx-card-cover {
  opacity: .95;
  filter: saturate(1.18) contrast(1.08) brightness(.92);
}

body.mcx-front-edition .mcx-game-card:hover .mcx-card-logo-wrap {
  transform: translateY(-42px) scale(.62);
}

body.mcx-front-edition .mcx-most-wanted-bar {
  width: min(1180px, 100%);
  margin-top: clamp(58px, 7vw, 96px);
}

body.mcx-front-edition .mcx-most-wanted-label {
  min-height: 38px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(115, 255, 214, .16), rgba(0, 0, 0, .50)),
    rgba(3, 14, 9, .72);
  color: #f2fff9;
}

body.mcx-front-edition .mcx-search-bar,
body.mcx-front-edition .mcx-search-count,
body.mcx-front-edition .mcx-cat-tabs,
body.mcx-front-edition .mcx-list-grid,
body.mcx-front-edition .mcx-no-results {
  width: min(1180px, 100%);
}

body.mcx-front-edition .mcx-search-bar {
  margin-top: 24px;
}

body.mcx-front-edition .mcx-search-input {
  min-height: 62px;
  border-radius: 14px;
  border-color: rgba(115, 255, 214, .22);
  background:
    linear-gradient(90deg, rgba(115, 255, 214, .08), transparent 26%, rgba(255, 94, 111, .045)),
    rgba(1, 8, 5, .72);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .025);
}

body.mcx-front-edition .mcx-search-input:focus {
  border-color: rgba(115, 255, 214, .58);
  box-shadow:
    0 0 0 3px rgba(115, 255, 214, .10),
    0 18px 52px rgba(0, 0, 0, .34),
    0 0 34px rgba(115, 255, 214, .12);
}

body.mcx-front-edition .mcx-cat-tabs {
  margin-top: 18px;
  padding: 10px;
  border: 1px solid rgba(115, 255, 214, .14);
  border-radius: 16px;
  background: rgba(1, 8, 5, .46);
  backdrop-filter: blur(16px);
}

body.mcx-front-edition .mcx-cat-tab {
  min-height: 36px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .26);
}

body.mcx-front-edition .mcx-cat-tab:hover,
body.mcx-front-edition .mcx-cat-tab.is-active {
  color: #f2fff9;
  background: linear-gradient(135deg, rgba(115, 255, 214, .22), rgba(4, 22, 14, .68));
}

body.mcx-front-edition .mcx-list-grid {
  margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 12px;
}

body.mcx-front-edition .mcx-list-card {
  border-radius: 14px;
  padding: 9px;
  border-color: rgba(115, 255, 214, .12);
  background:
    linear-gradient(180deg, rgba(6, 19, 14, .76), rgba(0, 0, 0, .70)),
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent, #68dcad), transparent 76%), transparent 54%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  animation: none;
  transform: translate3d(0, 0, 0);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  backface-visibility: hidden;
}

body.mcx-front-edition .mcx-list-card-media {
  border-radius: 9px;
}

body.mcx-front-edition .mcx-list-card-shine {
  opacity: .18;
  filter: none;
  transition: opacity .22s ease;
}

body.mcx-front-edition .mcx-list-card-cover {
  opacity: .58;
  filter: none;
  transform: scale(1.02);
  transition:
    opacity .22s ease,
    transform .28s ease;
}

body.mcx-front-edition .mcx-list-card:hover {
  transform: translate3d(0, -3px, 0);
}

body.mcx-front-edition .mcx-list-card:hover .mcx-list-card-cover {
  opacity: .88;
  filter: none;
  transform: scale(1.035);
}

body.mcx-front-edition .mcx-list-card:hover .mcx-list-card-shine {
  opacity: .30;
  filter: none;
}

body.mcx-front-edition .mcx-list-card-name {
  color: #fff7d7;
}

body.mcx-front-edition .mcx-footer {
  width: min(1180px, 100%);
  margin: 58px auto 0;
  padding: 20px 18px;
  border: 1px solid rgba(115, 255, 214, .10);
  border-radius: 18px;
  background: rgba(1, 8, 5, .42);
}

body.mcx-front-edition.mcx-edition-ready .mcx-edition-reveal {
  opacity: 0;
  translate: 0 18px;
  filter: blur(5px);
  transition:
    opacity .58s ease,
    translate .58s cubic-bezier(.2, .7, .15, 1),
    filter .58s ease,
    transform .36s cubic-bezier(.2, .72, .18, 1),
    border-color .24s ease,
    box-shadow .36s ease;
  transition-delay:
    var(--edition-delay, 0ms),
    var(--edition-delay, 0ms),
    var(--edition-delay, 0ms),
    0ms,
    0ms,
    0ms;
}

body.mcx-front-edition.mcx-edition-ready .mcx-edition-reveal.mcx-edition-inview {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

body.mcx-front-edition .mcx-video-hero,
body.mcx-front-edition .mcx-game-card {
  animation: mcxEditionBreath 12s ease-in-out infinite alternate;
  animation-delay: var(--edition-delay, 0ms);
}

@keyframes mcxEditionBreath {
  0% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, .24),
      0 0 0 1px rgba(255, 255, 255, .018),
      0 0 18px color-mix(in srgb, var(--accent, #68dcad), transparent 92%);
  }
  100% {
    box-shadow:
      0 18px 46px rgba(0, 0, 0, .32),
      0 0 0 1px rgba(255, 255, 255, .026),
      0 0 28px color-mix(in srgb, var(--accent, #68dcad), transparent 88%);
  }
}

@media (max-width: 1080px) {
  body.mcx-front-edition .mcx-topbar {
    grid-template-columns: 1fr;
  }

  body.mcx-front-edition .mcx-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mcx-front-edition .mcx-game-card:nth-child(n) {
    --ed-offset-y: 0px;
  }
}

@media (max-width: 720px) {
  body.mcx-front-edition .mcx-shell {
    width: min(100% - 18px, 1440px);
    padding-top: 8px;
  }

  body.mcx-front-edition .mcx-topbar {
    position: relative;
    top: auto;
    margin-bottom: 22px;
    border-radius: 16px;
  }

  body.mcx-front-edition .mcx-video-hero {
    border-radius: 20px;
  }

  body.mcx-front-edition .mcx-video-frame,
  body.mcx-front-edition .mcx-video-hero::before {
    border-radius: 19px;
  }

  body.mcx-front-edition .mcx-video-frame video {
    aspect-ratio: 16 / 9;
  }

  body.mcx-front-edition .mcx-hero {
    margin: 16px auto 26px;
    padding: 0 6px;
  }

  body.mcx-front-edition .mcx-hero .mcx-kicker {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: clamp(16px, 4.6vw, 24px);
    text-align: center;
    letter-spacing: .08em;
  }

  body.mcx-front-edition .mcx-game-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.mcx-front-edition .mcx-game-card {
    min-height: 250px;
  }

  body.mcx-front-edition .mcx-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mcx-front-edition .mcx-video-hero,
  body.mcx-front-edition .mcx-game-card,
  body.mcx-front-edition .mcx-list-card,
  body.mcx-front-edition.mcx-edition-ready .mcx-edition-reveal {
    animation: none;
    transition: none;
    translate: 0 0;
    filter: none;
    opacity: 1;
  }
}