/* MMOCodeX Living Background
   Rollback: remove this stylesheet and script link from the page. */

body.mcx-page {
  background:
    linear-gradient(180deg, #06140f 0%, #020806 44%, #010202 100%),
    #020705;
}

body.mcx-page .mcx-bg {
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(5, 18, 13, .58), rgba(1, 4, 3, .92)),
    #020705;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .86) 58%, transparent 98%);
}

body.mcx-page .mcx-bg::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(128deg, transparent 0 20%, rgba(115, 255, 214, .13) 32%, transparent 45%),
    linear-gradient(36deg, transparent 0 52%, rgba(255, 241, 191, .08) 63%, transparent 75%),
    linear-gradient(154deg, transparent 0 60%, rgba(218, 73, 58, .07) 72%, transparent 84%);
  opacity: .42;
  filter: blur(18px);
  transform: translate3d(0, 0, 0) scale(1.02);
  will-change: transform, opacity;
  animation: mcxGalleryAura 74s ease-in-out infinite alternate;
}

.mcx-bg-gallery {
  position: absolute;
  inset: -7% -6%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: mcxGalleryDrift 86s cubic-bezier(.33, 0, .2, 1) infinite alternate;
  -webkit-mask-image: radial-gradient(ellipse 45% 42% at 50% 52%, transparent 0 44%, rgba(0, 0, 0, .36) 55%, #000 68%);
  mask-image: radial-gradient(ellipse 45% 42% at 50% 52%, transparent 0 44%, rgba(0, 0, 0, .36) 55%, #000 68%);
}

.mcx-bg-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(115, 255, 214, .18);
  border-radius: 18px;
  background-image: var(--art);
  background-position: center;
  background-size: cover;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .30),
    0 0 22px rgba(115, 255, 214, .075);
  filter: saturate(1.14) contrast(1.07) brightness(.84);
  opacity: var(--o);
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0) rotate(var(--r)) scale(var(--s));
  transform-origin: center;
  will-change: transform, opacity, filter;
  animation: mcxCardFloat var(--t, 24s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.mcx-bg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(115, 255, 214, .16) 45%, rgba(255, 241, 191, .07) 50%, transparent 59%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 34%),
    linear-gradient(90deg, rgba(2, 7, 5, .32), transparent 30%, transparent 70%, rgba(2, 7, 5, .32)),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .56));
  background-size: 220% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: -150% 0, center, center, center;
  animation: mcxCardSheen var(--shine, 21s) ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) - 9s);
}

.mcx-bg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045), inset 0 0 36px rgba(0, 0, 0, .38);
  opacity: .82;
  animation: mcxCardEdgePulse 16s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

.mcx-bg-card:nth-child(1) {
  --x: 18%;
  --y: 18%;
  --w: min(27vw, 390px);
  --r: -7deg;
  --s: 1;
  --o: .47;
  --d: -2s;
  --t: 25s;
}

.mcx-bg-card:nth-child(2) {
  --x: 82%;
  --y: 17%;
  --w: min(26vw, 375px);
  --r: 5deg;
  --s: .98;
  --o: .44;
  --d: -9s;
  --t: 28s;
}

.mcx-bg-card:nth-child(3) {
  --x: 12%;
  --y: 42%;
  --w: min(25vw, 360px);
  --r: 8deg;
  --s: .96;
  --o: .40;
  --d: -14s;
  --t: 24s;
}

.mcx-bg-card:nth-child(4) {
  --x: 88%;
  --y: 42%;
  --w: min(25vw, 360px);
  --r: -8deg;
  --s: .96;
  --o: .40;
  --d: -6s;
  --t: 27s;
}

.mcx-bg-card:nth-child(5) {
  --x: 22%;
  --y: 68%;
  --w: min(24vw, 345px);
  --r: 4deg;
  --s: .94;
  --o: .34;
  --d: -18s;
  --t: 30s;
}

.mcx-bg-card:nth-child(6) {
  --x: 78%;
  --y: 68%;
  --w: min(24vw, 345px);
  --r: -5deg;
  --s: .94;
  --o: .34;
  --d: -11s;
  --t: 26s;
}

.mcx-bg-card:nth-child(7) {
  --x: 36%;
  --y: 7%;
  --w: min(23vw, 330px);
  --r: -4deg;
  --s: .92;
  --o: .29;
  --d: -20s;
  --t: 31s;
}

.mcx-bg-card:nth-child(8) {
  --x: 64%;
  --y: 8%;
  --w: min(23vw, 330px);
  --r: 4deg;
  --s: .92;
  --o: .29;
  --d: -4s;
  --t: 29s;
}

.mcx-bg-card:nth-child(9) {
  --x: 36%;
  --y: 91%;
  --w: min(21vw, 300px);
  --r: -2deg;
  --s: .9;
  --o: .24;
  --d: -16s;
  --t: 33s;
}

.mcx-bg-card:nth-child(10) {
  --x: 64%;
  --y: 91%;
  --w: min(23vw, 325px);
  --r: 2deg;
  --s: .9;
  --o: .24;
  --d: -7s;
  --t: 32s;
}

body.mcx-page .mcx-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .54), rgba(0, 0, 0, .08) 15%, transparent 34%, transparent 66%, rgba(0, 0, 0, .08) 85%, rgba(0, 0, 0, .54)),
    linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 28%, transparent 74%, rgba(0, 0, 0, .36));
  opacity: .78;
}

body.mcx-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M42 84l18-7M104 292l28 11M286 58l12 16M314 266l22-12M74 214l9-19M206 122l30-6' stroke='%2373ffd6' stroke-width='1.15' opacity='.13'/%3E%3Cpath d='M64 162l13 5M214 268l18 9M318 132l15-7M134 42l20 8' stroke='%23fff1bf' stroke-width='1.1' opacity='.10'/%3E%3C/g%3E%3Cg fill='%2373ffd6' opacity='.10'%3E%3Cpath d='M80 46h2v2h-2zM152 188h2v2h-2zM272 302h2v2h-2zM306 84h2v2h-2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
  opacity: .24;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: mcxGallerySparks 120s linear infinite;
}

body.mcx-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 32%, transparent 76%, rgba(0, 0, 0, .34));
  opacity: .78;
}

.mcx-shell {
  position: relative;
}

.mcx-shell::before {
  display: none;
}

body.mcx-page .mcx-topbar {
  width: min(1035px, 100%);
  min-height: 76px;
  margin-inline: auto;
  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-page .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-page .mcx-topbar .mcx-brand img {
  height: 48px;
  filter: drop-shadow(0 0 18px rgba(115, 255, 214, .18));
}

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

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

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

body.mcx-page .mcx-topbar .mcx-user-slot {
  min-width: 0;
}

body.mcx-page .mcx-topbar .mcx-user-btn,
body.mcx-page .mcx-topbar .mcx-button {
  border-color: rgba(115, 255, 214, .20);
  background: rgba(4, 18, 13, .68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

body.mcx-page .mcx-topbar .mcx-user-btn:hover,
body.mcx-page .mcx-topbar .mcx-button:hover {
  border-color: rgba(115, 255, 214, .42);
  box-shadow: 0 0 26px rgba(115, 255, 214, .16);
}

body.mcx-page .mcx-topbar .mcx-user-btn--primary,
body.mcx-page .mcx-topbar .mcx-button--primary {
  border-color: rgba(115, 255, 214, .45);
  background: linear-gradient(135deg, rgba(115, 255, 214, .30), rgba(16, 92, 68, .78));
}

.mcx-topbar,
.mcx-video-hero,
.mcx-game-card,
.mcx-list-card,
.mcx-bottom-strip,
.mcx-footer {
  backdrop-filter: blur(18px);
}

.mcx-video-hero {
  box-shadow:
    0 0 0 1px rgba(115, 255, 214, .18),
    0 16px 44px rgba(0, 0, 0, .32),
    0 0 32px rgba(115, 255, 214, .10);
}

.mcx-list-card,
.mcx-game-card {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, .25),
    0 0 0 1px rgba(255, 255, 255, .018),
    0 0 22px color-mix(in srgb, var(--accent, #68dcad), transparent 94%);
}

@keyframes mcxGalleryDrift {
  0% {
    transform: translate3d(-10px, 0, 0) scale(1.01);
  }
  100% {
    transform: translate3d(14px, -14px, 0) scale(1.025);
  }
}

@keyframes mcxGalleryAura {
  0% {
    opacity: .34;
    transform: translate3d(-18px, 8px, 0) scale(1.02);
  }
  100% {
    opacity: .50;
    transform: translate3d(24px, -16px, 0) scale(1.05);
  }
}

@keyframes mcxGallerySparks {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-180px, 180px, 0);
  }
}

@keyframes mcxCardFloat {
  0% {
    filter: saturate(1.08) contrast(1.06) brightness(.80);
    transform: translate3d(calc(-50% - 6px), calc(-50% + 5px), 0) rotate(calc(var(--r) - .7deg)) scale(var(--s));
  }
  48% {
    filter: saturate(1.18) contrast(1.08) brightness(.88);
  }
  100% {
    filter: saturate(1.12) contrast(1.07) brightness(.84);
    transform: translate3d(calc(-50% + 7px), calc(-50% - 6px), 0) rotate(calc(var(--r) + .9deg)) scale(var(--s));
  }
}

@keyframes mcxCardSheen {
  0%,
  42% {
    background-position: -150% 0, center, center, center;
  }
  68%,
  100% {
    background-position: 150% 0, center, center, center;
  }
}

@keyframes mcxCardEdgePulse {
  0% {
    opacity: .58;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), inset 0 0 32px rgba(0, 0, 0, .42);
  }
  100% {
    opacity: .86;
    box-shadow: inset 0 0 0 1px rgba(115, 255, 214, .070), inset 0 0 38px rgba(0, 0, 0, .34);
  }
}

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

  body.mcx-page .mcx-topbar .mcx-nav,
  body.mcx-page .mcx-topbar .mcx-user-slot {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .mcx-bg-gallery {
    inset: -4% -18%;
    -webkit-mask-image: radial-gradient(ellipse 48% 42% at 50% 54%, transparent 0 43%, rgba(0, 0, 0, .40) 56%, #000 70%);
    mask-image: radial-gradient(ellipse 48% 42% at 50% 54%, transparent 0 43%, rgba(0, 0, 0, .40) 56%, #000 70%);
  }

  .mcx-bg-card:nth-child(n + 7) {
    display: none;
  }

  .mcx-bg-card:nth-child(1) {
    --x: 16%;
    --y: 15%;
    --w: 330px;
  }

  .mcx-bg-card:nth-child(2) {
    --x: 84%;
    --y: 20%;
    --w: 310px;
  }

  .mcx-bg-card:nth-child(3) {
    --x: 8%;
    --y: 52%;
    --w: 300px;
  }

  .mcx-bg-card:nth-child(4) {
    --x: 92%;
    --y: 52%;
    --w: 300px;
  }

  .mcx-bg-card:nth-child(5) {
    --x: 33%;
    --y: 90%;
    --w: 290px;
  }

  .mcx-bg-card:nth-child(6) {
    --x: 67%;
    --y: 92%;
    --w: 285px;
  }
}

@media (max-width: 640px) {
  body.mcx-page .mcx-topbar {
    min-height: 0;
    padding: 12px;
    margin-bottom: 22px;
    border-radius: 16px;
  }

  body.mcx-page .mcx-topbar .mcx-brand img {
    height: 44px;
  }

  body.mcx-page .mcx-topbar .mcx-nav {
    gap: 10px 14px;
  }

  body.mcx-page .mcx-topbar .mcx-nav a {
    font-size: .76rem;
  }

  body.mcx-page .mcx-topbar .mcx-user-btn,
  body.mcx-page .mcx-topbar .mcx-button {
    min-height: 36px;
    padding: 0 14px;
  }

  .mcx-bg-gallery {
    inset: -2% -46%;
    opacity: .84;
    -webkit-mask-image: radial-gradient(ellipse 42% 46% at 50% 52%, transparent 0 44%, rgba(0, 0, 0, .38) 57%, #000 72%);
    mask-image: radial-gradient(ellipse 42% 46% at 50% 52%, transparent 0 44%, rgba(0, 0, 0, .38) 57%, #000 72%);
  }

  .mcx-bg-card:nth-child(n + 5) {
    display: none;
  }

  .mcx-bg-card:nth-child(1) {
    --x: 24%;
    --y: 16%;
    --w: 300px;
    --o: .33;
  }

  .mcx-bg-card:nth-child(2) {
    --x: 76%;
    --y: 28%;
    --w: 285px;
    --o: .31;
  }

  .mcx-bg-card:nth-child(3) {
    --x: 22%;
    --y: 74%;
    --w: 280px;
    --o: .28;
  }

  .mcx-bg-card:nth-child(4) {
    --x: 78%;
    --y: 82%;
    --w: 270px;
    --o: .24;
  }

  body.mcx-page .mcx-bg::after {
    opacity: .84;
  }

  body.mcx-page::before {
    opacity: .18;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.mcx-page .mcx-bg::before,
  .mcx-bg-gallery,
  .mcx-bg-card,
  .mcx-bg-card::before,
  .mcx-bg-card::after,
  body.mcx-page::before {
    animation: none;
  }
}